en-US

All components under Data Entry are supported.

zh-CN

支持数据录入下所有的组件。

import { useState } from 'react';

import { UploadOutlined } from '@react-devui/icons';
import {
  DForm,
  FormControl,
  FormGroup,
  useForm,
  DInput,
  DButton,
  DRadio,
  DSelect,
  DTextarea,
  DCheckbox,
  DSwitch,
  DCascader,
  DSlider,
  DRating,
  DTimePicker,
  DDatePicker,
  DUpload,
  DTransfer,
  DTree,
  DTreeSelect,
} from '@react-devui/ui';

const listOfSelect = Array.from({ length: 100 }).map((_, index) => ({
  label: `Item ${index}`,
  value: index,
  disabled: index === 3,
}));
const listOfCascader = Array.from({ length: 3 }).map((_, index1) => ({
  label: `Item ${index1}`,
  value: `${index1}`,
  children: Array.from({ length: 5 }).map((_, index2) => ({
    label: `Item ${index1}-${index2}`,
    value: `${index1}-${index2}`,
    disabled: index2 === 3,
    children: Array.from({ length: 20 }).map((_, index3) => ({
      label: `Item ${index1}-${index2}-${index3}`,
      value: `${index1}-${index2}-${index3}`,
    })),
  })),
}));
const listOfTransfer = Array.from({ length: 100 }).map((_, index) => ({
  label: `Item ${index}`,
  value: index,
  disabled: index === 3,
}));
const listOfTree = [
  {
    label: 'Item 1',
    value: 'Item 1',
    children: Array.from({ length: 3 }).map((_, index1) => ({
      label: `Item 1-${index1}`,
      value: `Item 1-${index1}`,
      children:
        index1 !== 2
          ? Array.from({ length: 5 }).map((_, index2) => ({
              label: `Item 1-${index1}-${index2}`,
              value: `Item 1-${index1}-${index2}`,
              disabled: index2 === 3,
            }))
          : undefined,
    })),
  },
  {
    label: 'Item 2',
    value: 'Item 2',
    children: [],
  },
  {
    label: 'Item 3',
    value: 'Item 3',
    children: Array.from({ length: 10 }).map((_, index) => ({
      label: `Item 3-${index}`,
      value: `Item 3-${index}`,
      disabled: index === 3,
    })),
  },
];
export default function Demo() {
  const [form, updateForm] = useForm(
    () =>
      new FormGroup({
        Input: new FormControl('Input', () => ({ error: true })),
        NumberInput: new FormControl('20', () => ({ error: true })),
        Checkbox: new FormControl(false),
        CheckboxGroup: new FormControl([1]),
        Radio: new FormControl(false),
        RadioGroup: new FormControl(1),
        Select: new FormControl(50, () => ({ error: true })),
        Cascader: new FormControl('0-0-10', () => ({ error: true })),
        Textarea: new FormControl('Textarea', () => ({ error: true })),
        Switch: new FormControl(false),
        Slider: new FormControl(40),
        SliderRange: new FormControl([20, 40]),
        Rating: new FormControl(3),
        TimePicker: new FormControl(new Date(), () => ({ error: true })),
        TimeRangePicker: new FormControl([new Date('2000-01-01T01:00:00'), new Date('2000-01-01T02:00:00')], () => ({ error: true })),
        DatePicker: new FormControl(new Date(), () => ({ error: true })),
        DateRangePicker: new FormControl([new Date('2000-01-01T01:00:00'), new Date('2000-01-10T02:00:00')], () => ({ error: true })),
        Upload: new FormControl([
          {
            uid: 1,
            name: 'logo.svg',
            status: 'load',
            url: '/assets/logo.svg',
            thumbUrl: '/assets/logo.svg',
          },
        ]),
        Transfer: new FormControl([50], () => ({ error: true })),
        Tree: new FormControl('Item 1-0-0', () => ({ error: true })),
        TreeSelect: new FormControl('Item 1-0-0', () => ({ error: true })),
      })
  );

  return (
    <DForm style={{ minWidth: 800 }} dUpdate={updateForm}>
      <DForm.Group dFormGroup={form}>
        <DForm.Item dFormControls={{ Input: 'Input!' }} dLabel="Input">
          {({ Input }) => <DInput dFormControl={Input} dPlaceholder="Input" />}
        </DForm.Item>
        <DForm.Item dFormControls={{ NumberInput: 'NumberInput!' }} dLabel="NumberInput">
          {({ NumberInput }) => <DInput dFormControl={NumberInput} dPlaceholder="NumberInput" dType="number" />}
        </DForm.Item>
        <DForm.Item dFormControls={{ Checkbox: 'Checkbox!' }} dLabel="Checkbox">
          {({ Checkbox }) => <DCheckbox dFormControl={Checkbox}>Checkbox</DCheckbox>}
        </DForm.Item>
        <DForm.Item dFormControls={{ CheckboxGroup: 'CheckboxGroup!' }} dLabel="CheckboxGroup">
          {({ CheckboxGroup }) => (
            <DCheckbox.Group
              dFormControl={CheckboxGroup}
              dList={[1, 2, 3].map((n) => ({
                label: `Checkbox ${n}`,
                value: n,
              }))}
            />
          )}
        </DForm.Item>
        <DForm.Item dFormControls={{ Radio: 'Radio!' }} dLabel="Radio">
          {({ Radio }) => <DRadio dFormControl={Radio}>Radio</DRadio>}
        </DForm.Item>
        <DForm.Item dFormControls={{ RadioGroup: 'RadioGroup!' }} dLabel="RadioGroup">
          {({ RadioGroup }) => (
            <DRadio.Group
              dFormControl={RadioGroup}
              dList={[1, 2, 3].map((n) => ({
                label: `Radio ${n}`,
                value: n,
                disabled: n === 2,
              }))}
            />
          )}
        </DForm.Item>
        <DForm.Item dFormControls={{ Switch: 'Switch!' }} dLabel="Switch">
          {({ Switch }) => <DSwitch dFormControl={Switch}>Switch</DSwitch>}
        </DForm.Item>
        <DForm.Item dFormControls={{ Select: 'Select!' }} dLabel="Select">
          {({ Select }) => <DSelect dFormControl={Select} dList={listOfSelect}></DSelect>}
        </DForm.Item>
        <DForm.Item dFormControls={{ Cascader: 'Cascader!' }} dLabel="Cascader">
          {({ Cascader }) => <DCascader dFormControl={Cascader} dList={listOfCascader}></DCascader>}
        </DForm.Item>
        <DForm.Item dFormControls={{ Textarea: 'Textarea!' }} dLabel="Textarea">
          {({ Textarea }) => <DTextarea dFormControl={Textarea} placeholder="Textarea" />}
        </DForm.Item>
        <DForm.Item dFormControls={{ Slider: 'Slider!' }} dLabel="Slider">
          {({ Slider }) => <DSlider dFormControl={Slider} />}
        </DForm.Item>
        <DForm.Item dFormControls={{ SliderRange: 'SliderRange!' }} dLabel="SliderRange">
          {({ SliderRange }) => <DSlider dFormControl={SliderRange} dRange />}
        </DForm.Item>
        <DForm.Item dFormControls={{ Rating: 'Rating!' }} dLabel="Rating">
          {({ Rating }) => <DRating dFormControl={Rating} />}
        </DForm.Item>
        <DForm.Item dFormControls={{ TimePicker: 'TimePicker!' }} dLabel="TimePicker">
          {({ TimePicker }) => <DTimePicker dFormControl={TimePicker} />}
        </DForm.Item>
        <DForm.Item dFormControls={{ TimeRangePicker: 'TimeRangePicker!' }} dLabel="TimeRangePicker">
          {({ TimeRangePicker }) => <DTimePicker dFormControl={TimeRangePicker} dRange />}
        </DForm.Item>
        <DForm.Item dFormControls={{ DatePicker: 'DatePicker!' }} dLabel="DatePicker">
          {({ DatePicker }) => <DDatePicker dFormControl={DatePicker} dShowTime />}
        </DForm.Item>
        <DForm.Item dFormControls={{ DateRangePicker: 'DateRangePicker!' }} dLabel="DateRangePicker">
          {({ DateRangePicker }) => <DDatePicker dFormControl={DateRangePicker} dRange />}
        </DForm.Item>
        <DForm.Item dFormControls={{ Upload: 'Upload!' }} dLabel="Upload">
          {({ Upload }) => (
            <DUpload
              dFormControl={Upload}
              dTrigger={
                <DButton className="mb-2" dIcon={<UploadOutlined />}>
                  Upload
                </DButton>
              }
              dList={<DUpload.List />}
              dXHRRequest={{ url: 'https://rd-upload.free.beeceptor.com' }}
            >
              {({ trigger, list }) => (
                <>
                  {trigger}
                  {list}
                </>
              )}
            </DUpload>
          )}
        </DForm.Item>
        <DForm.Item dFormControls={{ Transfer: 'Transfer!' }} dLabel="Transfer">
          {({ Transfer }) => <DTransfer dFormControl={Transfer} dList={listOfTransfer}></DTransfer>}
        </DForm.Item>
        <DForm.Item dFormControls={{ Tree: 'Tree!' }} dLabel="Tree">
          {({ Tree }) => <DTree dFormControl={Tree} dList={listOfTree} dHeight={256}></DTree>}
        </DForm.Item>
        <DForm.Item dFormControls={{ TreeSelect: 'TreeSelect!' }} dLabel="TreeSelect">
          {({ TreeSelect }) => <DTreeSelect dFormControl={TreeSelect} dList={listOfTree}></DTreeSelect>}
        </DForm.Item>
        <DForm.Item>
          <DButton
            onClick={() => {
              Object.values(form.controls).forEach((control) => {
                control.markAsDirty();
              });
              updateForm();
            }}
          >
            Verify
          </DButton>
        </DForm.Item>
      </DForm.Group>
    </DForm>
  );
}