en-US

Support using DCompose for combination.

For more usage, please refer to DCompose.

zh-CN

支持使用 DCompose 进行组合。

更多用法请参考 DCompose。

import { useState } from 'react';

import { SearchOutlined } from '@react-devui/icons';
import { DCascader, DRadio, DButton, DCompose } from '@react-devui/ui';

const list = 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}`,
    })),
  })),
}));
export default function Demo() {
  const [_size, setSize] = useState('default');
  const [_disabled, setDisabled] = useState('No disabled');

  const size = _size === 'default' ? undefined : _size;
  const disabled = _disabled === 'Disabled';

  return (
    <>
      <DRadio.Group
        dList={['smaller', 'default', 'larger'].map((size) => ({
          label: size,
          value: size,
        }))}
        dModel={_size}
        dType="outline"
        onModelChange={setSize}
      />
      <br />
      <DRadio.Group
        dList={['No disabled', 'Disabled'].map((text) => ({
          label: text,
          value: text,
        }))}
        dModel={_disabled}
        dType="outline"
        onModelChange={setDisabled}
      />
      <br />
      <DCompose dSize={size} dDisabled={disabled}>
        <DCascader style={{ width: 200 }} dList={list} dPlaceholder="Search"></DCascader>
        <DButton dIcon={<SearchOutlined />}></DButton>
      </DCompose>
      <DCompose dSize={size} dDisabled={disabled}>
        <DCompose.Item dGray>http://</DCompose.Item>
        <DCascader style={{ width: 200 }} dList={list} dPlaceholder="URL"></DCascader>
        <DCompose.Item dGray>.com</DCompose.Item>
      </DCompose>
    </>
  );
}