Editable

import * as React from 'react'
import { Editable } from '@hamur/react/editable'
import { Field } from '@hamur/react/field'

export default function EditableMultilineExample() {
  const [bio, setBio] = React.useState(
    'Mathematician and writer.\nWrote the first published program.',
  )
  return (
    <Field.Root className="field">
      <Field.Label>Bio</Field.Label>
      <Editable.Root
        className="editable"
        value={bio}
        autoResize
        placeholder="Add a bio"
        onValueChange={(next: string) => setBio(next)}
      >
        <Editable.Preview className="editable-preview" />
        <Editable.Input className="editable-input" render={<textarea />} />
      </Editable.Root>
      <Field.Description className="muted">
        Enter adds a line; Ctrl+Enter or Cmd+Enter saves and Escape cancels.
      </Field.Description>
    </Field.Root>
  )
}

import * as React from 'react'
import { Editable } from '@hamur/react/editable'
import { Field } from '@hamur/react/field'

export default function EditableTriggersExample() {
  const [title, setTitle] = React.useState('Quarterly report')
  return (
    <Field.Root className="field">
      <Field.Label>Project</Field.Label>
      <Editable.Root
        className="editable"
        value={title}
        activationMode="dblclick"
        onValueChange={(next: string) => setTitle(next)}
      >
        <Editable.Preview className="editable-preview" />
        <Editable.Input className="editable-input" />
        <Editable.EditTrigger className="editable-trigger">
          <svg className="editable-icon" viewBox="0 0 16 16" aria-hidden="true">
            <path d="M11 2.5l2.5 2.5L6 12.5H3.5V10z" />
          </svg>
        </Editable.EditTrigger>
        <Editable.SubmitTrigger className="editable-trigger">
          <svg className="editable-icon" viewBox="0 0 16 16" aria-hidden="true">
            <path d="M3 8.5l3 3 7-7" />
          </svg>
        </Editable.SubmitTrigger>
        <Editable.CancelTrigger className="editable-trigger">
          <svg className="editable-icon" viewBox="0 0 16 16" aria-hidden="true">
            <path d="M4 4l8 8M12 4l-8 8" />
          </svg>
        </Editable.CancelTrigger>
      </Editable.Root>
      <Field.Description className="muted">
        Double-click the title, or press Edit, to rename it.
      </Field.Description>
    </Field.Root>
  )
}

import * as React from 'react'
import { Editable } from '@hamur/react/editable'
import { Field } from '@hamur/react/field'
import { Form } from '@hamur/react/form'

const USERNAME = /^[a-z0-9-]+$/

export default function EditableFormExample() {
  const [username, setUsername] = React.useState('')
  const [refused, setRefused] = React.useState('')
  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="username" className="field">
        <Field.Label>Username</Field.Label>
        <Editable.Root
          className="editable"
          value={username}
          required
          placeholder="Choose a username"
          onValueChange={(next: string, details: { cancel: () => void }) => { if (!USERNAME.test(next)) { details.cancel() setRefused('Use lowercase letters, digits and hyphens.') return } setUsername(next) setRefused('') }}
        >
          <Editable.Preview className="editable-preview" />
          <Editable.Input className="editable-input" />
        </Editable.Root>
        <Field.Description className="muted">
          Lowercase letters, digits and hyphens.
        </Field.Description>
        {refused ? <p className="error">{refused}</p> : null}
        <Field.Error className="error" match="valueMissing">
          Choose a username.
        </Field.Error>
      </Field.Root>
      <button className="button" type="submit">
        Save
      </button>
      {submitted ? <pre className="output">{submitted}</pre> : null}
    </Form>
  )
}