Image Cropper

import * as React from 'react'
import type { ImageCropperCrop } from '@hamur/core'
import { ImageCropper } from '@hamur/react/image-cropper'
import { Slider } from '@hamur/react/slider'
import photo from '../../assets/image-cropper-photo.jpg'

export default function ImageCropperAvatarExample() {
  const [zoom, setZoom] = React.useState(1)
  const [value, setValue] = React.useState<ImageCropperCrop | null>(null)
  return (
    <div className="stack">
      <ImageCropper.Root
        className="image-cropper"
        fixedArea
        shape="circle"
        aspectRatio={1}
        zoom={zoom}
        labels={{ root: 'Profile photo', area: 'Profile photo crop' }}
        onZoomChange={(next: number) => setZoom(next)}
        onValueChange={(next: ImageCropperCrop | null) => setValue(next)}
      >
        <ImageCropper.Viewport className="image-cropper-viewport">
          <ImageCropper.Image
            src={photo}
            alt="A lake at sunset below purple mountains"
          />
          <ImageCropper.Area className="image-cropper-area" />
        </ImageCropper.Viewport>
        <ImageCropper.Status />
      </ImageCropper.Root>
      <Slider.Root
        className="slider"
        min={1}
        max={5}
        step={0.1}
        value={zoom}
        onValueChange={(next) => setZoom(next)}
      >
        <div className="slider-head">
          <Slider.Label>Zoom</Slider.Label>
          <span className="muted">{Math.round(zoom * 100)}%</span>
        </div>
        <Slider.Control className="slider-control">
          <Slider.Track className="slider-track">
            <Slider.Indicator className="slider-indicator" />
            <Slider.Thumb className="slider-thumb" aria-label="Zoom" />
          </Slider.Track>
        </Slider.Control>
      </Slider.Root>
      <p className="muted">
        {value ? `Square of ${value.width} px at ${value.x}, ${value.y}` : 'Loading the photo'}
      </p>
    </div>
  )
}

import * as React from 'react'
import type { ImageCropperCrop } from '@hamur/core'
import { ImageCropper } from '@hamur/react/image-cropper'
import photo from '../../assets/image-cropper-photo.jpg'

const RATIOS: Record<string, number | undefined> = {
  free: undefined,
  '1:1': 1,
  '16:9': 16 / 9,
  '4:3': 4 / 3,
}
const HANDLES = [
  'top',
  'right',
  'bottom',
  'left',
  'top-left',
  'top-right',
  'bottom-left',
  'bottom-right',
] as const

export default function ImageCropperControlledExample() {
  const actionsRef = React.useRef<ImageCropper.Root.Actions | null>(null)
  const [value, setValue] = React.useState<ImageCropperCrop | null>(null)
  const [reason, setReason] = React.useState('none yet')
  const [ratio, setRatio] = React.useState('free')
  return (
    <div className="stack">
      <label className="field">
        Aspect ratio
        <select className="input" value={ratio} onChange={(event) => setRatio(event.target.value)}>
          {Object.keys(RATIOS).map((key) => (
            <option key={key} value={key}>
              {key}
            </option>
          ))}
        </select>
      </label>
      <ImageCropper.Root
        className="image-cropper"
        value={value}
        aspectRatio={RATIOS[ratio]}
        actionsRef={actionsRef}
        onValueChange={( next: ImageCropperCrop | null, details: ImageCropper.Root.ChangeEventDetails, ) => { setValue(next) setReason(details.reason) }}
      >
        <ImageCropper.Viewport className="image-cropper-viewport">
          <ImageCropper.Image
            src={photo}
            alt="A lake at sunset below purple mountains"
          />
          <ImageCropper.Area className="image-cropper-area">
            {HANDLES.map((position) => (
              <ImageCropper.Handle
                key={position}
                className="image-cropper-handle"
                position={position}
              />
            ))}
          </ImageCropper.Area>
        </ImageCropper.Viewport>
      </ImageCropper.Root>
      <p className="muted">
        {value
          ? `x ${value.x}, y ${value.y}, width ${value.width}, height ${value.height}`
          : 'No crop yet'}
      </p>
      <p className="muted">Reason: {reason}</p>
      <div className="row">
        <button className="button" type="button" onClick={() => actionsRef.current?.reset()}>
          Reset
        </button>
      </div>
    </div>
  )
}

import * as React from 'react'
import { Field } from '@hamur/react/field'
import { Form } from '@hamur/react/form'
import { ImageCropper } from '@hamur/react/image-cropper'
import photo from '../../assets/image-cropper-photo.jpg'

const HANDLES = [
  'top',
  'right',
  'bottom',
  'left',
  'top-left',
  'top-right',
  'bottom-left',
  'bottom-right',
] as const

export default function ImageCropperFormExample() {
  const [submitted, setSubmitted] = React.useState('')
  return (
    <Form
      className="stack"
      onFormSubmit={(_values, details) => {
        const form = details.event.target as HTMLFormElement
        setSubmitted([...new FormData(form)].map(([key, value]) => `${key}=${value}`).join('&'))
      }}
    >
      <Field.Root name="cover" className="field">
        <Field.Label>Cover photo</Field.Label>
        <ImageCropper.Root className="image-cropper" aspectRatio={16 / 9}>
          <ImageCropper.Viewport className="image-cropper-viewport">
            <ImageCropper.Image
              src={photo}
              alt="A lake at sunset below purple mountains"
            />
            <ImageCropper.Area className="image-cropper-area">
              <ImageCropper.Grid className="image-cropper-grid" />
              {HANDLES.map((position) => (
                <ImageCropper.Handle
                  key={position}
                  className="image-cropper-handle"
                  position={position}
                />
              ))}
            </ImageCropper.Area>
          </ImageCropper.Viewport>
        </ImageCropper.Root>
        <Field.Description className="muted">
          The crop is sent as JSON in a hidden input.
        </Field.Description>
      </Field.Root>
      <div className="row">
        <button className="button" type="submit">
          Save
        </button>
      </div>
      {submitted ? <pre className="output">{submitted}</pre> : null}
    </Form>
  )
}