### Local Development Setup

Source: https://github.com/open-hand/choerodon-ui/blob/master/README.md

Clone the repository, install dependencies, and start the development server for local development of Choerodon UI.

```bash
$ git clone https://github.com/open-hand/choerodon-ui.git
$ cd choerodon-ui
$ npm install
$ npm start
```

--------------------------------

### Basic Localization Setup

Source: https://github.com/open-hand/choerodon-ui/blob/master/components/locale-provider/demo/basic.md

Wrap your application with LocaleProvider and import the desired language package (e.g., en_US) to enable localization. This example demonstrates setting up English localization.

```jsx
import { Pagination, LocaleProvider } from 'choerodon-ui';
import enUS from 'choerodon-ui/lib/locale-provider/en_US';

const App = () => (
  <div>
    <Pagination defaultCurrent={1} total={50} showSizeChanger />
  </div>
);

ReactDOM.render(
  <LocaleProvider locale={enUS}>
    <App />
  </LocaleProvider>,
  mountNode);

```

--------------------------------

### Picture List Upload Example

Source: https://github.com/open-hand/choerodon-ui/blob/master/components/upload/demo/picture-style.md

This example shows how to configure the Upload component to display files as a picture list. It includes default file list setup with `thumbUrl` for image previews. IE8/9 do not support local thumbnail previews and require `thumbUrl`.

```jsx
import { Upload, Button, Icon } from 'choerodon-ui';

const fileList = [{
  uid: -1,
  name: 'xxx.png',
  status: 'done',
  url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
}, {
  uid: -2,
  name: 'yyy.png',
  status: 'done',
  url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
}];

const props = {
  action: '//jsonplaceholder.typicode.com/posts/',
  listType: 'picture',
  defaultFileList: [...fileList],
};

const props2 = {
  action: '//jsonplaceholder.typicode.com/posts/',
  listType: 'picture',
  defaultFileList: [...fileList],
  className: 'upload-list-inline',
};

ReactDOM.render(
  <div>
    <Upload {...props}>
      <Button>
        <Icon type="file_upload" /> upload
      </Button>
    </Upload>
    <br />
    <br />
    <Upload {...props2}>
      <Button>
        <Icon type="file_upload" /> upload
      </Button>
    </Upload>
  </div>,
  mountNode);

```

--------------------------------

### Board Component Example

Source: https://github.com/open-hand/choerodon-ui/blob/master/components-pro/board/demo/pristine.md

Demonstrates the setup and usage of the Board component with various field types and configurations. Includes dynamic properties for code fields and a custom edit button.

```jsx
import {
  DataSet,
  Table,
  Form,
  TextField,
  NumberField,
  CheckBox,
  SelectBox,
  Modal,
  Button,
  Board,
} from 'choerodon-ui/pro';
import { observer } from 'mobx-react';

const { Column } = Table;

const codeCodeDynamicProps = {
  // 代码code_code值绑定 为 字段code 的 值列表的值字段为code.codevalue
  bind({ record }) {
    if (record) {
      const field = record.getField('code');
      if (field) {
        const valueField = field.get('valueField');
        return `code.${valueField}`;
      }
    }
  },
};

const codeDescriptionDynamicProps = {
  bind({ record }) {
    if (record) {
      const field = record.getField('code');
      if (field) {
        const textField = field.get('textField');
        return `code.${textField}`;
      }
    }
  },
};

class EditButton extends React.Component {
  handleClick = e => {
    const { record, onClick } = this.props;
    onClick(record, e);
  };

  render() {
    return <Button funcType="flat" icon="mode_edit" onClick={this.handleClick} size="small" />;
  }
}

@observer
class App extends React.Component {
  optionDs = new DataSet({
    selection: 'single',
    data: [{ value: 0, meaning: '关' }, { value: 1, meaning: '开' }],
    autoQuery: true,
  });

  userDs = new DataSet({
    primaryKey: 'userid',
    // transport: {
    //   read({ params: { page, pagesize } }) {
    //     return {
    //       url: `/dataset/user/page/${pagesize}/${page}`,
    //     };
    //   },
    // },
    name: 'user',
    autoQuery: true,
    combineSort: true,
    cacheSelection: true,
    pageSize: 5,
    paging: false,
    queryFields: [
      { name: 'name', type: 'string', label: '姓名' },
      { name: 'age', type: 'number', label: '年龄' },
      { name: 'code', type: 'object', label: '代码描述', lovCode: 'LOV_CODE' },
      {
        name: 'email',
        type: 'email',
        label: '邮箱',
      },
      {
        name: 'numberMultiple',
        type: 'number',
        label: '数值多值',
        multiple: true,
        min: 10,
        max: 100,
        step: 0.5,
      },
      {
        name: 'code_code',
        type: 'string',
        label: '代码',
        maxLength: 20,
        // required: true,
        computedProps: codeCodeDynamicProps,
      },
      {
        name: 'code_description',
        computedProps: codeDescriptionDynamicProps,
        type: 'string',
        label: '代码描述',
      },
      {
        name: 'code_select',
        type: 'string',
        label: '代码描述(下拉)',
        lovCode: 'LOV_CODE',
        // required: true,
      },
      {
        name: 'codeMultiple',
        type: 'object',
        label: '代码描述（多值）',
        lovCode: 'LOV_CODE',
        multiple: true,
        // required: true,
      },
      {
        name: 'codeMultiple_code',
        bind: 'codeMultiple.code',
        type: 'string',
        label: '代码（多值）',
        multiple: true,
      },
      {
        name: 'codeMultiple_description',
        bind: 'codeMultiple.description',
        type: 'string',
        label: '代码描述',
        multiple: ',',
      },
      {
        name: 'sex.text',
        type: 'string',
        label: '添加筛选',
        textField: 'text',
        valueField: 'value',
        lookupCode: 'HR.EMPLOYEE_GENDER',
        defaultValue: 'F',
      },
      { name: 'date.startDate', type: 'date', label: '开始日期' },
      {
        name: 'sexMultiple',
        type: 'string',
        label: '性别（多值）',
        lookupCode: 'HR.EMPLOYEE_GENDER',
        multiple: true,
      },
    ],
    fields: [
      {
        name: 'userid',
        type: 'string',
        label: '编号',
        required: true,
      },
      {
        name: 'name',
        type: 'intl',
        label: '姓名',
      },
      {
        name: 'age',
        type: 'number',
        label: '年龄',
        order: 'asc',
      },
      {
        name: 'sex',
        type: 'string',
        label: '性别',
        lookupCode: 'HR.EMPLOYEE_GENDER',
        required: true,
      },
      {
        name: 'kaiguan',
        type: 'boolean',
        label: '开关',
        options: this.optionDs,
        trueValue: 1,
        falseValue: 0,
        required: true,
      },
      {
        name: 'group',
        type: 'string',
        label: '分组',
        lookupCode: 'SYS.USER_STATUS',
      },
      { name: 'enable', type: 'boolean', label: '是否开启' },
    ],
    events: {
      submit: ({ data }) => console.log('submit data', data),
    },
  });

  render() {
    return (
      <Board dataset={this.userDs} />
    );
  }
}

```

--------------------------------

### Navigate and Start React App

Source: https://github.com/open-hand/choerodon-ui/blob/master/docs/react/use-with-create-react-app.en-US.md

Change the directory to your newly created project and start the development server to view your application in the browser.

```bash
cd choerodon-ui-demo
yarn start
```

--------------------------------

### Install Dependencies

Source: https://github.com/open-hand/choerodon-ui/blob/master/docs/react/contributing.en-US.md

Install all necessary project dependencies using npm.

```plain
npm install
```

--------------------------------

### Pagination Size Examples

Source: https://github.com/open-hand/choerodon-ui/blob/master/components/pagination/demo/size.md

Demonstrates the 'large' and 'small' size variants of the Pagination component. Includes examples with and without 'showTotal', 'showSizeChanger', and 'showQuickJumper'.

```jsx
import { Pagination } from 'choerodon-ui';

function showTotal(total) {
  return `总共 ${total} 条`;
}

ReactDOM.render(
  <div>
    <Pagination tiny={false} size="large" total={50} showTotal={false} showSizeChanger={false} />
    <Pagination tiny={false} size="large" total={50} showTotal={false} showSizeChanger showQuickJumper />
    <Pagination tiny={false} size="large" total={50} showTotal={showTotal} showSizeChanger={false} />
    <Pagination tiny={false} size="small" total={50} showTotal={false} showSizeChanger={false} />
    <Pagination tiny={false} size="small" total={50} showTotal={false} showSizeChanger showQuickJumper />
    <Pagination tiny={false} size="small" total={50} showTotal={showTotal} showSizeChanger={false} />
  </div>,
  mountNode);
```

--------------------------------

### CSS for Gutter Example

Source: https://github.com/open-hand/choerodon-ui/blob/master/components/grid/demo/gutter.md

Provides the necessary CSS to style the gutter example, ensuring the grid boxes have a background and padding.

```css
.gutter-example .c7n-row > div {
  background: transparent;
  border: 0;
}
.gutter-box {
  background: #00A0E9;
  padding: 5px 0;
}

```

--------------------------------

### Basic TreeSelect Example

Source: https://github.com/open-hand/choerodon-ui/blob/master/components/tree-select/demo/basic.md

This snippet shows the fundamental setup for a TreeSelect component, including importing necessary components and defining state for value changes. It's suitable for general-purpose selection from hierarchical data.

```jsx
import { TreeSelect } from 'choerodon-ui';

const TreeNode = TreeSelect.TreeNode;

class Demo extends React.Component {
  state = {
    value: undefined,
  };

  onChange = value => {
    this.setState({ value });
  };

  render() {
    return (
      <TreeSelect
        showSearch
        style={{ width: 300 }}
        value={this.state.value}
        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
        placeholder="Please select"
        allowClear
        treeDefaultExpandAll
        onChange={this.onChange}
      >
        <TreeNode value="parent 1" title="parent 1" key="0-1">
          <TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
            <TreeNode value="leaf1" title="my leaf" key="random" />
            <TreeNode value="leaf2" title="your leaf" key="random1" />
          </TreeNode>
          <TreeNode value="parent 1-1" title="parent 1-1" key="random2">
            <TreeNode value="sss" title={<b style={{ color: '#08c' }}>sss</b>} key="random3" />
          </TreeNode>
        </TreeNode>
      </TreeSelect>
    );
  }
}

ReactDOM.render(<Demo />, mountNode);
```

--------------------------------

### Install Choerodon UI

Source: https://github.com/open-hand/choerodon-ui/blob/master/README.md

Install the Choerodon UI package using npm.

```bash
npm install choerodon-ui --save
```

--------------------------------

### Rendering Integer and Decimal Step Examples

Source: https://github.com/open-hand/choerodon-ui/blob/master/components/slider/demo/input-number.md

This snippet shows how to render both the integer and decimal step examples by including their respective component instances within a parent div.

```jsx
ReactDOM.render(
  <div>
    <IntegerStep />
    <DecimalStep />
  </div>,
  mountNode);

```

--------------------------------

### Basic Layout Examples

Source: https://github.com/open-hand/choerodon-ui/blob/master/components/layout/demo/basic.md

These examples demonstrate different arrangements of Header, Footer, Sider, and Content components within the choerodon-ui Layout system. Ensure the Layout component and its sub-components are imported correctly.

```jsx
import { Layout } from 'choerodon-ui';

const { Header, Footer, Sider, Content } = Layout;

ReactDOM.render(
  <div>
    <Layout>
      <Header>Header</Header>
      <Content>Content</Content>
      <Footer>Footer</Footer>
    </Layout>

    <Layout>
      <Header>Header</Header>
      <Layout>
        <Sider>Sider</Sider>
        <Content>Content</Content>
      </Layout>
      <Footer>Footer</Footer>
    </Layout>

    <Layout>
      <Header>Header</Header>
      <Layout>
        <Content>Content</Content>
        <Sider>Sider</Sider>
      </Layout>
      <Footer>Footer</Footer>
    </Layout>

    <Layout>
      <Sider>Sider</Sider>
      <Layout>
        <Header>Header</Header>
        <Content>Content</Content>
        <Footer>Footer</Footer>
      </Layout>
    </Layout>
  </div>,
  mountNode,
);

```

--------------------------------

### Mini Progress Bar Example

Source: https://github.com/open-hand/choerodon-ui/blob/master/components/progress/demo/line-mini.md

Use the `size="small"` prop to render mini progress bars. This example shows different percentages and statuses.

```jsx
import { Progress } from 'choerodon-ui';

ReactDOM.render(
  <div style={{ width: 170 }}>
    <Progress percent={30} size="small" />
    <Progress percent={50} size="small" status="active" />
    <Progress percent={70} size="small" status="exception" />
    <Progress percent={100} size="small" />
  </div>,
  mountNode);

```

--------------------------------

### Responsive Grid Layout Example

Source: https://github.com/open-hand/choerodon-ui/blob/master/components/grid/demo/responsive-more.md

Use responsive properties to adjust column spans and offsets based on screen size. The example shows how to configure columns for small (xs) and large (lg) screens.

```jsx
import { Row, Col } from 'choerodon-ui';

ReactDOM.render(
  <Row>
    <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>Col</Col>
    <Col xs={{ span: 11, offset: 1 }} lg={{ span: 6, offset: 2 }}>Col</Col>
    <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>Col</Col>
  </Row>,
  mountNode);

```

--------------------------------

### Table with Clipboard Paste Example

Source: https://github.com/open-hand/choerodon-ui/blob/master/components-pro/table/demo/clipboard-paste.md

This example demonstrates the setup for a Table component that supports clipboard paste. It includes importing necessary components, defining DataSets with various field types, and configuring columns. This setup is crucial for enabling the two-way copy-paste functionality between the table and Excel.

```jsx
import {
  DataSet,
  Table,
  Form,
  TextField,
  NumberField,
  CheckBox,
  SelectBox,
  Modal,
  Button,
  TextArea,
} from 'choerodon-ui/pro';
import {Avatar, Tag, Badge} from 'choerodon-ui';

const { Column } = Table;

class EditButton extends React.Component {
  handleClick = e => {
    const { record, onClick } = this.props;
    onClick(record, e);
  };

  render() {
    return <Button tabindex="-1" funcType="flat" icon="mode_edit" onClick={this.handleClick} size="small" />;
  }
}

class App extends React.Component {
  userDs = new DataSet({
    primaryKey: 'userid',
    transport: {
      read({ params: { page, pagesize } }) {
        return {
          url: `/dataset/user/page/10/${page}`,
        };
      },
    },
    autoQuery: true,
    combineSort: true,
    pageSize: 20,
    // paging: false,
    fields: [
      {
        name: 'userid',
        type: 'string',
        label: '编号',
        required: true,
      },
      {
        name: 'name',
        type: 'intl',
        label: '姓名',
      },
      {
        name: 'age',
        type: 'number',
        label: '年龄',
        max: 100,
        step: 1,
        // disabled: true,
        readOnly: true,
      },
      {
        name: 'email',
        type: 'string',
        label: '邮箱',
      },
      {
        name: 'codeMultiple',
        type: 'object',
        label: '代码描述（多值）',
        lovCode: 'LOV_CODE',
        multiple: true,
        required: true,
      },
      {
        name: 'codeMultiple_code',
        bind: 'codeMultiple.code',
        type: 'string',
        label: '代码（多值）',
        multiple: true,
      },
      {
        name: 'codeMultiple_description',
        bind: 'codeMultiple.description',
        type: 'string',
        label: '代码描述',
        multiple: ',',
      },
      {
        name: 'sex',
        type: 'string',
        label: '性别',
        lookupCode: 'HR.EMPLOYEE_GENDER',
        required: true,
      },
      {
        name: 'enable', 
        type: 'boolean', 
        label: '是否开启',
      },
      {
        name: 'sexMultiple',
        type: 'string',
        label: '性别（多值）',
        lookupCode: 'HR.EMPLOYEE_GENDER',
        multiple: ',',
      },
      { name: 'userStatus', type: 'boolean', label: '员工状态' },
      { name: 'date.startDate', type: 'date', label: '开始日期', defaultValue: new Date() },
    ],
  });

  userDs1 = new DataSet({
    primaryKey: 'userid',
    data: [{}],
    combineSort: true,
    pageSize: 5,
    paging: false,
    fields: [
      {
        name: 'userid',
        type: 'string',
        label: '编号',
        required: true,
      },
      {
        name: 'name',
        type: 'intl',
        label: '姓名',
      },
      {
        name: 'age',
        type: 'number',
        label: '年龄',
        max: 100,
        step: 1,
      },
      {
        name: 'codeMultiple',
        type: 'object',
        label: '代码描述（多值）',
        lovCode: 'LOV_CODE',
        lovQueryAxiosConfig:(code, lovConfig, props)=>{
          return {
            method: 'post',
            url: 'https://www.fastmock.site/mock/423302b318dd24f1712751d9bfc1cbbc/mock/lov',
            data: props.data,
          }
        },
        multiple: true,
        required: true,
      },
      {
        name: 'codeMultiple_code',
        bind: 'codeMultiple.code',
        type: 'string',
        label: '代码（多值）',
        multiple: true,
      },
      {
        name: 'codeMultiple_description',
        bind: 'codeMultiple.description',
        type: 'string',
        label: '代码描述',
        multiple: ',',
      },
      {
        name: 'sex',
        type: 'string',
        label: '性别',
        lookupCode: 'HR.EMPLOYEE_GENDER',
        required: true,
      },
      { name: 'enable', type: 'boolean', label: '是否开启' },
      {
        name: 'sexMultiple',
        type: 'string',
        label: '性别（多值）',
        lookupCode: 'HR.EMPLOYEE_GENDER',
        // textField: 'description',
        // valueField: 'code',
        // lookupAxiosConfig:()=>{
        //   return {
        //     url: "https://www.fastmock.site/mock/423302b318dd24f1712751d9bfc1cbbc/mock/c7n/lookup",
        //     method: "post",
        //   }
        // },
        multiple: ',',
      },
      { name: 'date.startDate', type: 'date', multiple: true, label: '开始日期' },
      { name: 'date.endDate', type: 'dateTime', label: '结束日期', multiple: true },
      { name: 'month', type: 'month', label: '月份', multiple: true },
      { name: 'week', type: 'week', multiple: true, label: '周' },
      { name: 'time', type: 'time', multiple: true, label: '时间' },
      { name: 'year', type: 'year', label: '年', multiple: true },
    ],
  });

```

--------------------------------

### Basic Table Setup with Custom Renderers

Source: https://github.com/open-hand/choerodon-ui/blob/master/components-pro/table/demo/basic.md

This snippet shows the initial setup for a table, including importing necessary components and defining custom render functions for different column types like sex, phone, and dynamic headers/footers. It also demonstrates dynamic field properties based on record data.

```jsx
import { configure, Icon } from 'choerodon-ui';
import {
  DataSet,
  Table,
  TextField,
  NumberField,
  TextArea,
  DateTimePicker,
  Select,
  SelectBox,
  Modal,
  Button,
  AutoComplete,
} from 'choerodon-ui/pro';
import { action } from 'mobx';
import moment from 'moment';

// 导出配置
configure({
  xlsx: () => import('xlsx'),
});

const { Column } = Table;
const { Option } = Select;

function sexIdRenderer({ dataSet, record }) {
  // 获取性别codeValueId
  const value = record.get('sex') || [];
  const field = dataSet.getField('sex');
  return value.map(v => field.getLookupData(v, record).codeValueId).join(',');
}

const sexColumnTagRenderer = ({value, text, key, disabled, className}) => {
  const style = {};
  if (!disabled) {
    if (value === 'F') {
      style.backgroundColor = 'hotpink';
    } else {
      style.backgroundColor = 'skyblue';
    }
  }
  return <li className={className} key={key} style={style}>{text}</li>;
}

const sexEditorTagRenderer = ({value, text, key, disabled, readOnly, onClose, className}) => {
  const style = {};
  const closeBtn = <Icon type="close" onClick={onClose} />;
  const showClose = !(readOnly || disabled || key === "maxTagPlaceholder");
  if (!disabled) {
    if (value === 'F') {
      style.backgroundColor = 'green';
    } else {
      style.backgroundColor = 'blue';
    }
  }
  return <li className={className} key={key} style={style}>{text}{showClose ? closeBtn : null}</li>;
}

function renderPhoneEditor(record) {
  const region = (
    <Select record={record} name="phone-region" style={{ height: '.2rem' }}>
      <Option value="+81">+81</Option>
      <Option value="+00">+00</Option>
    </Select>
  );
  return <TextField addonBefore={region} addonBeforeStyle={{ border: 'none', padding: 0, maxWidth: '60px', width: '35%' }} />
}

function renderPhone({ record, text }) {
  return [record.get('phone-region'), text].filter(Boolean).join('-');
}

function renderColumnFooter({ dataSet, name }) {
  const max = Math.max(
    0,
    ...dataSet.map(record => record.get(name)).filter(value => !isNaN(value)),
  );
  return `最大年龄：${NumberField.format(max)}`;
}

function renderColumnHeader({ dataSet, name }) {
  const field = dataSet.getField(name);
  return (
    <span>
      <i>-=</i>
      {field ? field.get('label') : ''}
      <i>=-</i>
    </span>
  );
}

const codeDynamicProps = {
  lovCode({ record }) {
    if (record) {
      return 'LOV_CODE';
    }
  },
};

const nameDynamicProps = {
  // 当Sex为M(男)的时候 该属性为必须输入字段 即为 field 中 require = true
  required({ record }) {
    return record && record.get('sex') === 'M';
  },
  label() {
    return '姓名';
  },
};

const codeCodeDynamicProps = {
  // 代码code_code值绑定 为 字段code 的 值列表的值字段为code.codevalue
  bind({ record }) {
    if (record) {
      const field = record.get('name');
      if (field) {
        return 'codeMultiple.code';
      }
    }
  },
};

const codeDescriptionDynamicProps = {
  bind({ record }) {
    if (record) {
      const field = record.get('name');
      if (field) {
        return 'codeMultiple.description';
      }
    }
  },
};

class App extends React.Component {
  options = new DataSet({
    fields: [{
      name: 'value',
      type: 'string',
    }, {
      name: 'meaning',
      type: 'string',
    }],
  })

  userDs = new DataSet({
    primaryKey: 'userid',
    autoQuery: true,
    exportMode:'client',
    pageSize: 5,
    cacheSelection: true,
    cacheModified: true,
    validationRules: [
      {
        name: "minLength",
        value: 7,
        message: 'Maintain at least 7 pieces of data',
      },
      {
        name: "maxLength",
        value: 10,
        message: 'A maximum of 10 pieces of data can be maintained',
      }
    ],
    transport: {
      read({ params: { page, pagesize } }) {
        if (pagesize > 20) {
          return {
            url: '/dataset/large-user/queries',
          };
        }
        return {
          url: `/dataset/user/page/${pagesize}/${page}`,
        };
      },
      create: {
        url: '/dataset/user/mutations',
        method: 'put',
      },
      update: ({ data: [first] }) =>
        first
          ? {
            url: `/dataset/user/mutations/${first.userid}`,
            data: first,
            transformResponse() {
              return [first];
            },
          }
          : null,
      destroy: {
        url: '/dataset/user/mutations',
        method: 'delete',
      },
      exports:{
        url:'http://gitee.com/xurime/excelize/raw/master/test/SharedStrings.xlsx',
        method:'get',
      },
      tls({ name }) {
        // 多语言数据请求的 axios 配置或 url 字符串。UI 接收的接口返回值格式为：[{ name: { zh_CN: '简体中文', en_US: '美式英语', ... }}]
        console.log('fieldName', name);
        return {
          url: '/dataset/user/languages',
        };
      },
    },
    feedback: {
      loadSuccess(resp) {
        //  DataSet 查询成功的反馈 可以return 一个resp 来修改响应结果

```

--------------------------------

### Dropdown Menu Example

Source: https://github.com/open-hand/choerodon-ui/blob/master/components-pro/form/demo/disabled.md

Creates a sample dropdown menu with several menu items, each linking to a different URL.

```jsx
const menu = (
  <Menu>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer" href="https://choerodon.io/">1st menu item</a>
    </Menu.Item>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer" href="https://choerodon.com.cn/">2nd menu item</a>
    </Menu.Item>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer" href="https://github.com/open-hand/choerodon-ui">3rd menu item</a>
    </Menu.Item>
  </Menu>
);

const dropdown = (
  <Dropdown overlay={menu}>
    <Button funcType="flat" size="small">
      Click me <Icon type="arrow_drop_down" />
    </Button>
  </Dropdown>
);
```

--------------------------------

### Controlled SelectBox Example

Source: https://github.com/open-hand/choerodon-ui/blob/master/components-pro/select-box/demo/controlled.md

This snippet shows a basic controlled SelectBox. The selected value is managed by the component's state and updated via the onChange handler. Ensure you have React and Choerodon UI Pro installed.

```jsx
import { SelectBox } from 'choerodon-ui/pro';

const { Option } = SelectBox;

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'wu',
    };
  }

  handleChange = (value, oldValue) => {
    console.log('[constrolled]', 'newValue', value, '[oldValue]', oldValue);
    this.setState({
      value,
    });
  }

  render() {
    return (
      <SelectBox value={this.state.value} onChange={this.handleChange}>
        <Option value="jack">Jack</Option>
        <Option value="lucy">Lucy</Option>
        <Option value="wu">Wu</Option>
      </SelectBox>
    );
  }
}

ReactDOM.render(
  <App />,
  mountNode
);
```

--------------------------------

### Basic Progress Examples

Source: https://github.com/open-hand/choerodon-ui/blob/master/components-pro/progress/demo/basic.md

Shows how to render progress bars with different values and statuses like active, exception, and success. Also demonstrates hiding the info text.

```jsx
import { Progress } from 'choerodon-ui/pro';

ReactDOM.render(
  <div>
    <Progress value={40} />
    <Progress value={50} status="active" />
    <Progress value={70} status="exception" />
    <Progress value={50} status="success" />
    <Progress value={40} showInfo={false} />
  </div>,
  mountNode
);
```

--------------------------------

### Basic Dragger Upload Example

Source: https://github.com/open-hand/choerodon-ui/blob/master/components-pro/attachment/demo/dragger.md

This snippet shows a basic Dragger component setup. It includes configuration for file types, maximum number of files, and a custom label. The component is also set to a disabled state.

```jsx
import React from 'react';
import { Icon } from 'choerodon-ui';
import { Attachment } from 'choerodon-ui/pro';

const { Dragger } = Attachment

const App = () => {
  const [value, setValue] = React.useState('4c74a34a-fa37-4e92-be9d-5cf726fb1472');
  const props = {
    label: '技术附件',
    labelLayout: 'float',
    accept: ['.deb', '.txt', '.pdf', 'image/*'],
    max: 3,
    value,
    onChange: setValue,
    showHistory: true,
    disabled: true,
    //buttons: [['remove', { hidden: false }]],
    help: '支持文件类型： .deb .txt .pdf image/*',
  };

  return (
    <Dragger {...props}>
      <div style={{padding: 20}}>
        <p className="c7n-upload-drag-icon">
          <Icon type="inbox" />
        </p>
        <p style={{paddingTop:20, color:'rgba(0, 0, 0, 0.85)'}}>点击这里或者拖拽文件到这里上传</p>
        <p style={{color:'rgba(0, 0, 0, 0.45)'}}>支持文件类型： .deb .txt .pdf image/*</p>
      </div>
    </Dragger>
  );
}

ReactDOM.render(
  <App />,
  mountNode,
);

```

--------------------------------

### Directory Tree Example

Source: https://github.com/open-hand/choerodon-ui/blob/master/components/tree/demo/directory.md

Demonstrates the basic usage of the Directory Tree component with multi-selection enabled. It includes event handlers for selection and expansion.

```tsx
import { Tree } from 'choerodon-ui';

const { DirectoryTree } = Tree;

const treeData = [
  {
    title: 'parent 0',
    key: '0-0',
    children: [
      { title: 'leaf 0-0', key: '0-0-0', isLeaf: true },
      { title: 'leaf 0-1', key: '0-0-1', isLeaf: true },
    ],
  },
  {
    title: 'parent 1',
    key: '0-1',
    children: [
      { title: 'leaf 1-0', key: '0-1-0', isLeaf: true },
      { title: 'leaf 1-1', key: '0-1-1', isLeaf: true },
    ],
  },
];

const Demo: React.FC<{}> = () => {
  const onSelect = (keys, event) => {
    console.log('Trigger Select', keys, event);
  };

  const onExpand = () => {
    console.log('Trigger Expand');
  };

  return (
    <DirectoryTree
      multiple
      defaultExpandAll
      onSelect={onSelect}
      onExpand={onExpand}
      treeData={treeData}
    />
  );
};

ReactDOM.render(<Demo />, mountNode);
```

--------------------------------

### Pagination with Page Size Changer

Source: https://github.com/open-hand/choerodon-ui/blob/master/components/pagination/demo/changer.md

Use the `onShowSizeChange` prop to handle changes in the page size. This example shows a basic setup for a pagination component that allows users to select the number of items per page.

```jsx
import { Pagination } from 'choerodon-ui';

function onShowSizeChange(current, pageSize) {
  console.log(current, pageSize);
}

ReactDOM.render(
  <Pagination
    tiny={false}
    showSizeChangerLabel={false}
    showTotal={false}
    onShowSizeChange={onShowSizeChange}
    defaultCurrent={3}
    total={500}
  />,
  mountNode);

```

--------------------------------

### Transfer Component with 2000 Items

Source: https://github.com/open-hand/choerodon-ui/blob/master/components/transfer/demo/large-data.md

This example demonstrates initializing the Transfer component with a large dataset (2000 items) and handling user interactions like moving items between lists. Ensure the `choerodon-ui` and `react` libraries are installed.

```jsx
import { Transfer } from 'choerodon-ui';

class App extends React.Component {
  state = {
    mockData: [],
    targetKeys: [],
  }

  componentDidMount() {
    this.getMock();
  }

  getMock = () => {
    const targetKeys = [];
    const mockData = [];
    for (let i = 0; i < 2000; i++) {
      const data = {
        key: i.toString(),
        title: `content${i + 1}`,
        description: `description of content${i + 1}`,
        chosen: Math.random() * 2 > 1,
      };
      if (data.chosen) {
        targetKeys.push(data.key);
      }
      mockData.push(data);
    }
    this.setState({ mockData, targetKeys });
  }

  handleChange = (targetKeys, direction, moveKeys) => {
    console.log(targetKeys, direction, moveKeys);
    this.setState({ targetKeys });
  }

  render() {
    return (
      <Transfer
        dataSource={this.state.mockData}
        targetKeys={this.state.targetKeys}
        onChange={this.handleChange}
        render={item => item.title}
      />
    );
  }
}

ReactDOM.render(<App />, mountNode);
```

--------------------------------

### Output Component with Range Values

Source: https://github.com/open-hand/choerodon-ui/blob/master/components-pro/output/demo/range.md

This snippet shows how to configure the Output component to display range values. It includes examples for a single range bound to a DataSet field, a simple range with explicit values, a range defined by start and end properties, and multiple ranges.

```jsx
import { DataSet, Output, Row, Col } from 'choerodon-ui/pro';

class App extends React.Component {
  ds = new DataSet({
    autoCreate: true,
    fields: [
      { name: 'user', type: 'string', label: '用户', defaultValue: [1, 10], required: true, range: true },
    ],
  });

  render() {
    return (
      <Row gutter={10}>
        <Col span={12}>
          <Output dataSet={this.ds} name="user" />
        </Col>
        <Col span={12}>
          <Output range value={[20, 30]} />
        </Col>
        <Col span={24}>
          <Output range={['start', 'end']} value={{ start: 30, end: 50 }} />
        </Col>
        <Col span={24}>
          <Output multiple range value={[[1, 10], [20, 30], [30, 50]]} />
        </Col>
      </Row>
    );
  }
}

ReactDOM.render(
  <App />,
  mountNode
);

```

--------------------------------

### Cascading Select Example

Source: https://github.com/open-hand/choerodon-ui/blob/master/components-pro/select/demo/cascade.md

This snippet demonstrates a cascading select setup for provinces and cities, supporting both single and multiple selections. It utilizes DataSet with lookup codes and cascadeMap for defining the relationship between parent and child select components. The `handleDataSetChange` function logs changes to the console.

```jsx
import { Divider } from 'choerodon-ui';
import { DataSet, Select, Row, Col } from 'choerodon-ui/pro';

function handleDataSetChange({ record, value, oldValue }) {
  console.log('[dataset]', value, '[oldValue]', oldValue, '[record.toJSONData()]', record.toJSONData());
}

class App extends React.Component {
  ds = new DataSet({
    autoCreate: true,
    fields: [
      {
        name: 'sheng',
        label: '省',
        lookupCode: 'SHENG',
        valueField: 'codeValueId',
        defaultValue: 10206,
      },
      {
        name: 'shi',
        type: 'number',
        valueField: 'codeValueId',
        label: '市',
        lookupCode: 'SHI',
        cascadeMap: { parentCodeValueId: 'sheng' },
      },
      {
        name: 'sheng-multiple',
        label: '省（多选）',
        lookupCode: 'SHENG',
        valueField: 'codeValueId',
        defaultValue: 10206,
        multiple: true,
      },
      {
        name: 'shi-multiple',
        type: 'number',
        valueField: 'codeValueId',
        label: '市（多选）',
        lookupCode: 'SHI',
        multiple: true,
        cascadeMap: { parentCodeValueId: 'sheng-multiple' },
      },
    ],
    events: {
      update: handleDataSetChange,
    },
  });

  render() {
    return (
      <>
        <Divider>单选</Divider>
        <Row gutter={10}>
          <Col span={12}>
            <Select dataSet={this.ds} name="sheng" />
          </Col>
          <Col span={12}>
            <Select dataSet={this.ds} name="shi" />
          </Col>
        </Row>
        <Divider>多选</Divider>
        <Row gutter={10}>
          <Col span={12}>
            <Select dataSet={this.ds} name="sheng-multiple" />
          </Col>
          <Col span={12}>
            <Select dataSet={this.ds} name="shi-multiple" />
          </Col>
        </Row>
      </>
    );
  }
}

ReactDOM.render(
  <App />,
  mountNode
);

```

--------------------------------

### Basic Steps Group Example

Source: https://github.com/open-hand/choerodon-ui/blob/master/components/steps/demo/group.md

Shows how to import and use Steps, StepGroup, and Step components to create a grouped step interface. Ensure Steps, StepGroup, and Step are imported.

```jsx
import { Steps} from 'choerodon-ui';

const Step = Steps.Step;
const StepGroup = Steps.StepGroup;

ReactDOM.render(
  <Steps className="group-demo" current={0}>
    <StepGroup headerIcon="instance" headerText="必填项" >
      <Step title="标题名称"  />
      <Step title="标题名称"  />
    </StepGroup>
    <StepGroup headerIcon="mail_modal" className="group-next" headerText="选填项">
      <Step title="标题名称"  />
      <Step title="标题名称"  />
    </StepGroup>
  </Steps>,
  mountNode,
);

```

--------------------------------

### DatePicker Usage Example

Source: https://github.com/open-hand/choerodon-ui/blob/master/components/date-picker/index.en-US.md

A basic example demonstrating how to use the DatePicker component with a default value.

```APIDOC
## DatePicker

### Description

To select or input a date. By clicking the input box, you can select a date from a popup calendar.

### Usage Example

```jsx
// The default locale is en-US, if you want to use other locale, just set locale in entry file globaly.
// import moment from 'moment';
// import 'moment/locale/zh-cn';
// moment.locale('zh-cn');

<DatePicker defaultValue={moment('2015-01-01', 'YYYY-MM-DD')} />
```

### Common API

The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicker.

| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| allowClear | Whether to show clear button | boolean | true |
| autoFocus | get focus when component mounted | boolean | false |
| className | picker className | string | '' |
| dateRender | custom rendering function for date cells | function(currentDate: moment, today: moment) => React.ReactNode | - |
| disabled | determine whether the DatePicker is disabled | boolean | false |
| disabledDate | specify the date that cannot be selected | (currentDate: moment) => boolean | - |
| getCalendarContainer | to set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - |
| locale | localization configuration | object | [default](https://github.com/open-hand/choerodon-ui/blob/master/components/date-picker/locale/example.json) |
| open | open state of picker | boolean | - |
| placeholder | placeholder of date input | string\|RangePicker\[] | - |
| popupStyle | to customize the style of the popup calendar | object | {} |
| dropdownClassName | to customize the className of the popup calendar  | string | - |
| size | determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | string | - |
| style | to customize the style of the input box | object | {} |
| onOpenChange | a callback function, can be executed whether the popup calendar is popped up or closed | function(status) | - |
| onPanelChange | callback when picker panel mode is changed | function(value, mode) | - |
| mode | picker panel mode | `time|date|month|year` | 'date' |
| processValue | 日期控件值变更时，自动补全时间为23:59:59 | boolean |   |

### Common Methods

| Name | Description |
| ---- | ----------- |
| blur() | remove focus |
| focus() | get focus |

### DatePicker Specific API

| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| defaultValue | to set default date | [moment](http://momentjs.com/) | - |
| disabledTime | to specify the time that cannot be selected | function(date) | - |
| format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY-MM-DD" |
| renderExtraFooter | render extra footer in panel | () => React.ReactNode | - |
| showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](/components/time-picker/#API) |
| showTime.defaultValue | to set default time of selected date, [demo](/components/date-picker/#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/) | moment() |
| showToday | whether to show "Today" button | boolean | true |
| value | to set date | [moment](http://momentjs.com/) | - |
| onCalendarChange | a callback function, can be executed when the start time or the end time of the range is changing | function(dates: [moment, moment], dateStrings: [string, string]) | 无 |
| onChange | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - |
| onOk | callback when click ok button | function() | - |
```

--------------------------------

### Badge Usage

Source: https://github.com/open-hand/choerodon-ui/blob/master/components/badge/index.en-US.md

Examples demonstrating how to use the Badge component with different configurations.

```APIDOC
## Badge Component API

### Properties

| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| count | Number to show in badge | ReactNode |  |
| dot | Whether to display a red dot instead of `count` | boolean | `false` |
| offset | set offset of the badge dot, like`[x, y]` | `[number, number]` | - |
| overflowCount | Max count to show | number | 99 |
| showZero | Whether to show badge when `count` is zero | boolean | `false` |
| status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | `''` |
| text | If `status` or `color` is set, `text` sets the display text of the status `dot` | ReactNode | `''` |
| color | Customize Badge dot color | string |  |
| size | If `count` is set, `size` sets the size of badge | `default` \| `small` | `default` |
| title | Text to show when hovering over the badge | string |  |
```