Editable 原地编辑

'use client'

import { useState } from 'react'
import { Editable, Stack, Text } from '@hina-ui/react'

export default function Demo() {
  const [title, setTitle] = useState('未命名文档')

  return (
    <Stack className="w-full max-w-sm">
      <Editable value={title} onValueChange={setTitle} aria-label="文档名称" />
      <Text size="sm" tone="muted">
        已保存：{title || '—'}
      </Text>
    </Stack>
  )
}

import { Editable, FormField, Stack } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack className="w-full max-w-sm" gap="lg">
      <FormField label="双击进入" description="键盘聚焦后仍可按 Enter 或空格进入。">
        <Editable defaultValue="双击修改文档标题" activationMode="dblclick" />
      </FormField>
      <FormField label="手动进入" description="草稿一直保留到按下保存或取消。">
        <Editable defaultValue="按编辑按钮修改" activationMode="manual" submitMode="manual" />
      </FormField>
    </Stack>
  )
}

'use client'

import { useState } from 'react'
import { Editable, FormField, Stack, Switch, Text } from '@hina-ui/react'

export default function Demo() {
  const [name, setName] = useState('创作者工作台')
  const [fail, setFail] = useState(false)
  const [saved, setSaved] = useState(false)

  async function save(value: string) {
    setSaved(false)
    if (!value.trim()) throw new Error('工作区名称不能为空')
    await new Promise(resolve => setTimeout(resolve, 800))
    if (fail) throw new Error('暂时无法保存，请关闭模拟失败后重试')
    setSaved(true)
  }

  return (
    <Stack className="w-full max-w-sm">
      <FormField label="工作区名称" description="保存完成前保留编辑态，失败后可继续修改或重试。">
        <Editable value={name} onValueChange={setName} onSave={save} submitMode="enter" />
      </FormField>
      <FormField label="模拟保存失败" orientation="horizontal">
        <Switch checked={fail} onCheckedChange={setFail} />
      </FormField>
      {saved && (
        <Text role="status" size="sm" tone="muted">
          工作区名称已保存。
        </Text>
      )}
    </Stack>
  )
}

'use client'

import { Button, Editable, FormField, Stack, Tag } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack className="w-full max-w-sm">
      <FormField label="发布版本">
        <Editable
          defaultValue="1.8.0"
          activationMode="manual"
          submitMode="manual"
          renderPreview={({ value }) => <Tag tone="info">v{value}</Tag>}
          renderActions={({ editing, saving, edit, submit, cancel }) =>
            editing ? (
              <>
                <Button size="sm" loading={saving} onClick={submit}>
                  保存版本
                </Button>
                <Button size="sm" variant="ghost" tone="neutral" disabled={saving} onClick={cancel}>
                  取消
                </Button>
              </>
            ) : (
              <Button size="sm" variant="outline" tone="neutral" onClick={edit}>
                修改版本
              </Button>
            )
          }
        />
      </FormField>
    </Stack>
  )
}

import { Editable, FormField, Stack } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack className="w-full max-w-sm">
      <Editable size="sm" value="小号文本" aria-label="小号" />
      <Editable size="md" value="默认文本" aria-label="默认" />
      <Editable size="lg" value="大号文本" aria-label="大号" />
      <FormField label="只读" description="内容可以选择与复制。">
        <Editable value="只读项目名称" readonly />
      </FormField>
      <FormField label="禁用">
        <Editable value="暂时无法修改" disabled />
      </FormField>
      <FormField label="尚未填写">
        <Editable placeholder="添加备注…" />
      </FormField>
    </Stack>
  )
}

'use client'

import { useState } from 'react'
import * as v from 'valibot'
import { Button, Editable, Form, FormField, Text } from '@hina-ui/react'

const schema = v.object({
  displayName: v.pipe(v.string(), v.trim(), v.minLength(2, '显示名称至少需要 2 个字')),
})

export default function Demo() {
  const [values, setValues] = useState({ displayName: '' })
  const [editing, setEditing] = useState(false)
  const [saved, setSaved] = useState('')

  async function save(data: unknown) {
    await new Promise(resolve => setTimeout(resolve, 600))
    setSaved((data as { displayName: string }).displayName)
  }

  return (
    <Form values={values} rules={schema} className="w-full max-w-sm" onSubmit={save}>
      {({ submitting }) => (
        <>
          <FormField
            name="displayName"
            label="显示名称"
            description="先确认字段修改，再保存整份资料。"
            required
          >
            <Editable
              value={values.displayName}
              onValueChange={displayName => setValues({ ...values, displayName })}
              editing={editing}
              onEditingChange={setEditing}
              name="displayName"
              placeholder="填写显示名称"
            />
          </FormField>
          <Button type="submit" loading={submitting} disabled={editing} className="self-start">
            保存资料
          </Button>
          {saved && (
            <Text role="status" size="sm" tone="muted">
              已保存：{saved}
            </Text>
          )}
        </>
      )}
    </Form>
  )
}