@uiw/doc 4.18.0 → 4.18.1

package/web/static/js/{6659.12651144.chunk.js.map → 6659.372695ec.chunk.js.map}

@@ -1 +1 @@
-{"version":3,"file":"static/js/6659.12651144.chunk.js","mappings":"gHAAA","sources":["../../packages/react-table/README.md"],"sourcesContent":["export default \"Table 表格\\n===\\n\\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-table/file/README.md)\\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-table.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-table)\\n[![npm version](https://img.shields.io/npm/v/@uiw/react-table.svg?label=@uiw/react-table)](https://npmjs.com/@uiw/react-table)\\n\\n表示两种相互对立的状态间的切换，多用于触发「开/关」。选中时的内容支持响应式。\\n\\n```jsx\\nimport { Table } from 'uiw';\\n// or\\nimport Table from '@uiw/react-table';\\n```\\n\\n### 基本使用\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button } from 'uiw';\\n\\nconst columns = [\\n  {\\n    // title: '姓名',\\n    ellipsis: true, \\n    title: ({ key }) => {\\n      return (\\n        <span>字段: {key}</span>\\n      )\\n    },\\n    key: 'name', \\n  }, {\\n    title: '年龄',\\n    style: { color: 'red' },\\n    key: 'age',\\n  }, {\\n    title: '地址',\\n    key: 'info',\\n  }, {\\n    title: '操作',\\n    key: 'edit',\\n    width: 98,\\n    render: (text, key, rowData, rowNumber, columnNumber) => (\\n      <div>\\n        <Button size=\\\"small\\\" type=\\\"danger\\\">删除</Button>\\n        <Button size=\\\"small\\\" type=\\\"success\\\">修改</Button>\\n      </div>\\n    ),\\n  },\\n];\\nconst dataSource = [\\n  { name: '邓紫棋', age: '12', info: '又名G.E.M.，原名邓诗颖，1991年8月16日生于中国上海，中国香港创作型女歌手。', edit: '' },\\n  { name: '李易峰', age: '32', info: '1987年5月4日出生于四川成都，中国内地男演员、流行乐歌手、影视制片人', edit: '' },\\n  { name: '范冰冰', age: '23', info: '1981年9月16日出生于山东青岛，中国影视女演员、制片人、流行乐女歌手', edit: '' },\\n  { name: '杨幂', age: '34', info: '1986年9月12日出生于北京市，中国内地影视女演员、流行乐歌手、影视制片人。', edit: '' },\\n  { name: 'Angelababy', age: '54', info: '1989年2月28日出生于上海市，华语影视女演员、时尚模特。', edit: '' },\\n  { name: '唐嫣', age: '12', info: '1983年12月6日出生于上海市，毕业于中央戏剧学院表演系本科班', edit: '' },\\n  { name: '吴亦凡', age: '4', info: '1990年11月06日出生于广东省广州市，华语影视男演员、流行乐歌手。', edit: '' },\\n];\\nconst Demo = () => (\\n  <div>\\n    <Table columns={columns} data={dataSource} />\\n  </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n### 表头分组\\n\\n表头分组通过 `columns` 数组中对象的 `children` 来实现，以渲染分组表头。。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button } from 'uiw';\\n\\nconst columns = [\\n  {\\n    title: '姓名',\\n    style: { color: 'red' },\\n    key: 'name', \\n    children: [\\n       {\\n        title: '英文名字',\\n        width: 100,\\n        key: 'name_en',\\n      },\\n      {\\n        title: '中文名字',\\n        key: 'cnname',\\n        children:[\\n          {\\n            title: '姓名',\\n            style: { color: 'red' },\\n            key: 'firstname',\\n            children:[\\n              { title: '姓', key: 'name1', width: 80 },\\n              { title: '名',  key: 'name2', width: 80 },\\n            ]\\n          }, {\\n            title: '拼音',\\n            key: 'lastname',\\n            children:[\\n              { title: '姓', key: 'pinyin1', width: 80 },\\n              { title: '名', key: 'pinyin2', width: 80 },\\n            ],\\n          },\\n        ],\\n      }, \\n    ]\\n  }, {\\n    title: '其它',\\n    key: 'other',\\n    children:[\\n      { title: '生日', key: 'birthday', width: 150 },\\n      { title: '职业', key: 'job', width: 150 },\\n    ],\\n  }, {\\n    title: '操作',\\n    key: 'edit',\\n    width: 150,\\n    render: (text, key, rowData, rowNumber, columnNumber) => (\\n      <div>\\n        <Button size=\\\"small\\\" type=\\\"danger\\\">删除</Button>\\n        <span>{text} {key} - {rowNumber} - {columnNumber}</span>\\n      </div>\\n    ),\\n  },\\n];\\nconst dataSource = [\\n  { name1: '邓', name2:'紫棋', pinyin1: 'deng', pinyin2: 'ziqi', name_en: 'G.E.M.', birthday: '1991年8月16日', job: '唱作歌手、作曲人', edit:'' },\\n  { name1: '周', name2:'杰伦', pinyin1: 'zhou', pinyin2: 'jielun', name_en: 'Jay Chou', birthday: '1979年1月18日', job: '歌手、音乐人', edit:'' },\\n  { name1: '邓', name2:'紫棋', pinyin1: 'deng', pinyin2: 'ziqi', name_en: 'G.E.M.', birthday: '1991年8月16日', job: '唱作歌手、作曲人', edit:'' },\\n  { name1: '周', name2:'杰伦', pinyin1: 'zhou', pinyin2: 'jielun', name_en: 'Jay Chou', birthday: '1979年1月18日', job: '歌手、音乐人', edit:'' },\\n];\\nconst Demo = () => (\\n  <div>\\n    <Table bordered columns={columns} data={dataSource} />\\n  </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 表格行/列合并\\n\\n表头只支持列合并，使用 `columns` 里的 `colSpan` 进行设置。表格支持行/列合并，使用 `render` 里的单元格属性 `colSpan` 或者 `rowSpan` 设值为 0 时，设置的表格不会渲染。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true--> \\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button } from 'uiw';\\n\\nconst columns = [\\n  {\\n    title: '姓名',\\n    key: 'name', \\n  }, {\\n    title: '年龄',\\n    style: { color: 'red' },\\n    key: 'age',\\n    colSpan: 2,\\n    render: (text, key, rowData, rowNum, colNum) => {\\n      const obj = {\\n        children: text,\\n        props: {}\\n      }\\n      if (rowNum === 0) {\\n        obj.props.rowSpan = 2;\\n      }\\n      if (rowNum === 1) {\\n        obj.props.rowSpan = 0;\\n      }\\n      return obj;\\n    }\\n  }, {\\n    title: '地址',\\n    key: 'info',\\n    colSpan: 0,\\n  }, {\\n    title: '操作',\\n    key: 'edit',\\n    width: 98,\\n    render: (text, key, rowData, rowNumber, columnNumber) => (\\n      <div>\\n        <Button size=\\\"small\\\" type=\\\"danger\\\">删除</Button>\\n        <Button size=\\\"small\\\" type=\\\"success\\\">修改</Button>\\n      </div>\\n    ),\\n  },\\n];\\nconst dataSource = [\\n  { name: '邓紫棋', age: '12', info: '又名G.E.M.，原名邓诗颖，1991年8月16日生于中国上海，中国香港创作型女歌手。', edit: '' },\\n  { name: '李易峰', age: '12', info: '1987年5月4日出生于四川成都，中国内地男演员、流行乐歌手、影视制片人', edit: '' },\\n  { name: '范冰冰', age: '23', info: '1981年9月16日出生于山东青岛，中国影视女演员、制片人、流行乐女歌手', edit: '' },\\n  { name: '杨幂', age: '34', info: '1986年9月12日出生于北京市，中国内地影视女演员、流行乐歌手、影视制片人。', edit: '' },\\n];\\nconst Demo = () => (\\n  <div>\\n    <Table bordered columns={columns} data={dataSource} />\\n  </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n\\n### 标题页脚\\n\\n添加表格边框线，页头和页脚的展现效果。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button } from 'uiw';\\n\\nconst columns = [\\n  {\\n    title: '姓名',\\n    style: { color: 'red' },\\n    key: 'name', \\n  }, {\\n    title: '年龄',\\n    key: 'age',\\n  }, {\\n    title: '地址',\\n    key: 'info',\\n  }, {\\n    title: '操作',\\n    key: 'edit',\\n    width: 98,\\n    render: (text, key, rowData, rowNumber, columnNumber) => (\\n      <div>\\n        <Button size=\\\"small\\\" type=\\\"danger\\\">删除</Button>\\n        <Button size=\\\"small\\\" type=\\\"success\\\">修改</Button>\\n      </div>\\n    ),\\n  },\\n];\\nconst dataSource = [\\n  { name: '邓紫棋', age: '12', info: '又名G.E.M.，原名邓诗颖，1991年8月16日生于中国上海，中国香港创作型女歌手。', edit: '' },\\n  { name: '李易峰', age: '32', info: '1987年5月4日出生于四川成都，中国内地男演员、流行乐歌手、影视制片人', edit: '' },\\n  { name: '范冰冰', age: '23', info: '1981年9月16日出生于山东青岛，中国影视女演员、制片人、流行乐女歌手', edit: '' },\\n  { name: '杨幂', age: '34', info: '1986年9月12日出生于北京市，中国内地影视女演员、流行乐歌手、影视制片人。', edit: '' },\\n  { name: 'Angelababy', age: '54', info: '1989年2月28日出生于上海市，华语影视女演员、时尚模特。', edit: '' },\\n  { name: '唐嫣', age: '12', info: '1983年12月6日出生于上海市，毕业于中央戏剧学院表演系本科班', edit: '' },\\n  { name: '吴亦凡', age: '4', info: '1990年11月06日出生于广东省广州市，华语影视男演员、流行乐歌手。', edit: '' },\\n];\\nconst Demo = () => (\\n  <div>\\n    <Table\\n      title={(\\n        <div>\\n          这里是标题，有边框，<b>bordered=true</b>\\n        </div>\\n      )}\\n      footer={(\\n        <div>\\n          这里是页脚 Footer，有边框，<b>bordered=true</b>\\n        </div>\\n      )}\\n      bordered columns={columns} data={dataSource} />\\n    <Table title=\\\"这里是标题，没有边框\\\" footer=\\\"这里是页脚 Footer，没有边框\\\" columns={columns} data={dataSource} />\\n  </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 点击单元格\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button, Notify } from 'uiw';\\n\\nconst columns = [\\n  {\\n    title: '姓名',\\n    style: { color: 'red' },\\n    key: 'name', \\n  }, {\\n    title: '年龄',\\n    key: 'age',\\n  }, {\\n    title: '地址',\\n    key: 'info',\\n  }, {\\n    title: '操作',\\n    key: 'edit',\\n    width: 98,\\n    render: (text, key, rowData, rowNumber, columnNumber) => (\\n      <div>\\n        <Button size=\\\"small\\\" type=\\\"danger\\\">删除</Button>\\n        <Button size=\\\"small\\\" type=\\\"success\\\">修改</Button>\\n      </div>\\n    ),\\n  },\\n];\\nconst dataSource = [\\n  { name: '邓紫棋', age: '12', info: '又名G.E.M.，原名邓诗颖，1991年8月16日生于中国上海，中国香港创作型女歌手。', edit: '' },\\n  { name: '李易峰', age: '32', info: '1987年5月4日出生于四川成都，中国内地男演员、流行乐歌手、影视制片人', edit: '' },\\n  { name: '范冰冰', age: '23', info: '1981年9月16日出生于山东青岛，中国影视女演员、制片人、流行乐女歌手', edit: '' },\\n  { name: '杨幂', age: '34', info: '1986年9月12日出生于北京市，中国内地影视女演员、流行乐歌手、影视制片人。', edit: '' },\\n  { name: 'Angelababy', age: '54', info: '1989年2月28日出生于上海市，华语影视女演员、时尚模特。', edit: '' },\\n  { name: '唐嫣', age: '12', info: '1983年12月6日出生于上海市，毕业于中央戏剧学院表演系本科班', edit: '' },\\n  { name: '吴亦凡', age: '4', info: '1990年11月06日出生于广东省广州市，华语影视男演员、流行乐歌手。', edit: '' },\\n];\\nconst Demo = () => (\\n  <div>\\n    <Table\\n      title=\\\"表内容 tbody 单元格点击回调事件\\\"\\n      onCell={(rowData, { rowNum, colNum }) => {\\n        console.log('-->3', rowData);\\n        console.log('-->4', rowNum);\\n        console.log('-->5', colNum);\\n        Notify.info({ description: `你点击了\\\"${rowData.name}\\\"。` });\\n      }}\\n      columns={columns}\\n      data={dataSource}\\n    />\\n    <Table\\n      title=\\\"表头单元格点击回调事件\\\"\\n      onCellHead={(rowData, rowNum, columnNumber) => {\\n        console.log('-->3', rowData);\\n        console.log('-->4', rowNum);\\n        console.log('-->5', columnNumber);\\n        Notify.info({ description: `你点击了\\\"${rowData.title}\\\"。` });\\n      }}\\n      onCell={(rowData, { rowNum, colNum }) => {\\n        console.log('-->3', rowData);\\n        console.log('-->4', rowNum);\\n        console.log('-->5', colNum);\\n        Notify.info({ description: `你点击了\\\"${rowData.name}\\\"。` });\\n      }}\\n      columns={columns}\\n      data={dataSource}\\n    />\\n  </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 原始HTML\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button } from 'uiw';\\n\\nconst Demo = () => (\\n  <div>\\n    <Table bordered>\\n      <thead>\\n        <tr>\\n          <th>名称</th>\\n          <th>数量</th>\\n          <th>详情</th>\\n          <th>价格</th>\\n        </tr>\\n      </thead>\\n      <tbody>\\n        <tr>\\n          <td>土豆</td>\\n          <td>18</td>\\n          <td>2009/01/12</td>\\n          <td>￥86,000</td>\\n        </tr>\\n        <tr>\\n          <td>萝卜</td>\\n          <td>18</td>\\n          <td>2009/01/12</td>\\n          <td>￥86,000</td>\\n        </tr>\\n        <tr>\\n          <td>香蕉</td>\\n          <td>18</td>\\n          <td>2009/01/12</td>\\n          <td>￥86,000</td>\\n        </tr>\\n        <tr>\\n          <td>芝麻</td>\\n          <td>18</td>\\n          <td>2009/01/12</td>\\n          <td>￥86,000</td>\\n        </tr>\\n      </tbody>\\n    </Table>\\n    <Table>\\n      <caption>没有边框</caption>\\n      <thead>\\n        <tr>\\n          <th>名称</th>\\n          <th>数量</th>\\n          <th>详情</th>\\n          <th>价格</th>\\n        </tr>\\n      </thead>\\n      <tbody>\\n        <tr>\\n          <td>土豆</td>\\n          <td>18</td>\\n          <td>2009/01/12</td>\\n          <td>￥86,000</td>\\n        </tr>\\n        <tr>\\n          <td>萝卜</td>\\n          <td>18</td>\\n          <td>2009/01/12</td>\\n          <td>￥86,000</td>\\n        </tr>\\n        <tr>\\n          <td>香蕉</td>\\n          <td>18</td>\\n          <td>2009/01/12</td>\\n          <td>￥86,000</td>\\n        </tr>\\n        <tr>\\n          <td>芝麻</td>\\n          <td>18</td>\\n          <td>2009/01/12</td>\\n          <td>￥86,000</td>\\n        </tr>\\n      </tbody>\\n    </Table>\\n  </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 选择和操作\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button, Checkbox, Pagination, Loader } from 'uiw';\\n\\nclass Demo extends React.Component {\\n  constructor(props) {\\n    super(props);\\n    this.state = {\\n      // 选中的 key\\n      checked: [],\\n      loading: false,\\n      dataSource: [\\n        { name: '邓紫棋', age: '12', info: '又名G.E.M.，原名邓诗颖，1991年8月16日生于中国上海，中国香港创作型女歌手。' },\\n        { name: '李易峰', age: '32', info: '1987年5月4日出生于四川成都，中国内地男演员、流行乐歌手、影视制片人' },\\n        { name: '范冰冰', age: '23', info: '1981年9月16日出生于山东青岛，中国影视女演员、制片人、流行乐女歌手' },\\n        { name: '杨幂', age: '34', info: '1986年9月12日出生于北京市，中国内地影视女演员、流行乐歌手、影视制片人。' },\\n        { name: 'Angelababy', age: '54', info: '1989年2月28日出生于上海市，华语影视女演员、时尚模特。' },\\n        { name: '唐嫣', age: '12', info: '1983年12月6日出生于上海市，毕业于中央戏剧学院表演系本科班' },\\n        { name: '吴亦凡', age: '4', info: '1990年11月06日出生于广东省广州市，华语影视男演员、流行乐歌手。' },\\n      ],\\n      columns: [\\n        {\\n          title: (data, rowNum, colNum) => {\\n            const indeterminate = this.state.dataSource.length !== this.state.checked.length && this.state.checked.length > 0;\\n            const checked = this.state.dataSource.length === this.state.checked.length;\\n            return (\\n              <Checkbox\\n                checked={checked}\\n                indeterminate={indeterminate}\\n                onClick={(evn) => {\\n                  let checked = this.state.dataSource.map((item, idx) => idx);\\n                  if(!evn.target.checked) {\\n                    checked = [];\\n                  }\\n                  this.setState({ checked });\\n                }}\\n              />\\n            );\\n          },\\n          key: 'checked',\\n          render: (text, key, rowData, rowNumber, columnNumber) => {\\n            return (\\n              <Checkbox checked={rowData.checked} onClick={this.onClickCheckedItem.bind(this, rowNumber)} />\\n            );\\n          }\\n        }, {\\n          title: '名字',\\n          key: 'name',\\n        }, {\\n          title: '年龄',\\n          key: 'age',\\n        }, {\\n          title: '地址',\\n          key: 'info',\\n        },\\n      ]\\n    }\\n  }\\n  onClickCheckedItem(rowNumber, env) {\\n    let { checked } = this.state;\\n    const isChecked = env.target.checked;\\n    if(isChecked) {\\n      // 添加到选中数组中\\n      checked.push(rowNumber)\\n      checked = checked.sort((a, b) => a - b);\\n    } else {\\n      // 删除选中项\\n      checked.splice(checked.indexOf(rowNumber), 1);\\n    }\\n    this.setState({ checked });\\n  }\\n  render() {\\n    const { checked } = this.state;\\n    const dataSource = this.state.dataSource.map((item, idx) => {\\n      const isChecked = checked.indexOf(idx) > -1;\\n      return { checked: isChecked, ...item };\\n    });\\n    return (\\n      <div>\\n        <Loader loading={this.state.loading} style={{ display: 'block' }}>\\n          <Table\\n            columns={this.state.columns}\\n            data={dataSource}\\n            footer={\\n              <Pagination\\n                current={2}\\n                pageSize={10}\\n                total={30}\\n                divider\\n                onChange={(current, total, pageSize) => {\\n                  this.setState({ loading: true });\\n                  const timer = setTimeout(() => {\\n                    // 模拟变更数据\\n                    const dataSource = this.state.dataSource.map(item => {\\n                      item.age = Number(item.age) + current;\\n                      return item;\\n                    });\\n                    // 翻页 API 获取数据\\n                    this.setState({ checked: [], dataSource, loading: false });\\n                  }, 2000);\\n                }}\\n              />\\n            }\\n          />\\n        </Loader>\\n      </div>\\n    );\\n  }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 自定义单元格省略提示\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button, Notify, Tooltip } from 'uiw';\\n\\nconst columns = [\\n  {\\n    title: 'Name',\\n    key: 'name',\\n    render: text => <a>{text}</a>,\\n    width: 150,\\n  },\\n  {\\n    title: 'Age',\\n    key: 'age',\\n    width: 80,\\n  },\\n  {\\n    title: 'Address',\\n    key: 'address',\\n    ellipsis: true,\\n    render: address => (\\n      <Tooltip placement=\\\"topLeft\\\" content={address}>\\n        {address}\\n      </Tooltip>\\n    ),\\n  },\\n  {\\n    title: 'Long Column Long Column Long Column',\\n    key: 'address',\\n    ellipsis: true,\\n    render: address => (\\n      <Tooltip placement=\\\"topLeft\\\" content={address}>\\n        {address}\\n      </Tooltip>\\n    ),\\n  },\\n  {\\n    title: 'Long Column Long Column',\\n    key: 'address',\\n    ellipsis: true,\\n    render: address => (\\n      <Tooltip placement=\\\"topLeft\\\" content={address}>\\n        {address}\\n      </Tooltip>\\n    ),\\n  },\\n  {\\n    title: 'Long Column',\\n    key: 'address',\\n    ellipsis: true,\\n    render: address => {\\n      return (\\n        <Tooltip placement=\\\"topLeft\\\" content={address}>\\n          {address}\\n        </Tooltip>\\n      )\\n    },\\n  },\\n];\\n\\nconst data = [\\n  { name: '邓紫棋', age: '12', address: '又名G.E.M.，原名邓诗颖，1991年8月16日生于中国上海，中国香港创作型女歌手。' },\\n  { name: '李易峰', age: '32', address: '1987年5月4日出生于四川成都，中国内地男演员、流行乐歌手、影视制片人' },\\n  { name: '范冰冰', age: '23', address: '1981年9月16日出生于山东青岛，中国影视女演员、制片人、流行乐女歌手' },\\n  { name: '杨幂', age: '34', address: '1986年9月12日出生于北京市，中国内地影视女演员、流行乐歌手、影视制片人。' },\\n  { name: 'Angelababy', age: '54', address: '1989年2月28日出生于上海市，华语影视女演员、时尚模特。' },\\n  { name: '唐嫣', age: '12', address: '1983年12月6日出生于上海市，毕业于中央戏剧学院表演系本科班' },\\n  { name: '吴亦凡', age: '4', address: '1990年11月06日出生于广东省广州市，华语影视男演员、流行乐歌手。' },\\n];\\n\\nconst Demo = () => (\\n  <div>\\n    <Table\\n      title=\\\"表内容 tbody 单元格点击回调事件\\\"\\n      columns={columns}\\n      data={data}\\n    />\\n  </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 无数据状态\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button, Empty } from 'uiw';\\n\\nconst columns = [\\n  {\\n    ellipsis: true, \\n    title: '姓名',\\n    key: 'name', \\n  }, {\\n    title: '年龄',\\n    key: 'age',\\n  }, {\\n    title: '地址',\\n    key: 'info',\\n  }, {\\n    title: '操作',\\n    key: 'edit',\\n    width: 98,\\n    render: (text, key, rowData, rowNumber, columnNumber) => (\\n      <div>\\n        <Button size=\\\"small\\\" type=\\\"danger\\\">删除</Button>\\n        <Button size=\\\"small\\\" type=\\\"success\\\">修改</Button>\\n      </div>\\n    ),\\n  },\\n];\\nconst dataSource = [];\\nconst Demo = () => (\\n  <div>\\n    <Table\\n      columns={columns}\\n      data={dataSource}\\n      empty={<Empty />}  \\n    />\\n  </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 可展开\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button, Icon } from 'uiw';\\n\\nconst columns = [\\n  {\\n    title: '姓名',\\n    ellipsis: true, \\n    key: 'name', \\n  }, \\n  {\\n    title: '年龄',\\n    style: { color: 'red' },\\n    key: 'age',\\n  }, \\n  {\\n    title: '操作',\\n    key: 'edit',\\n    width: 98,\\n    render: (text, key, rowData, rowNumber, columnNumber) => (\\n      <div>\\n        <Button size=\\\"small\\\" type=\\\"danger\\\">删除</Button>\\n        <Button size=\\\"small\\\" type=\\\"success\\\">修改</Button>\\n      </div>\\n    ),\\n  },\\n];\\nconst dataSource = [\\n  { name: '邓紫棋', age: '10', id: '1'},\\n  { name: '李易峰', age: '32', id: '2'},\\n  { name: '范冰冰', age: '23', id: '3'},\\n];\\nconst Demo = () => (\\n  <div>\\n    <Table \\n      rowKey=\\\"id\\\"\\n      expandable={{\\n        expandedRowRender: (record, index, expanded)=>{\\n          return <div>{record.name}</div>\\n        },\\n        // defaultExpandAllRows: true,\\n        rowExpandable: (r)=>r.name!=='李易峰',\\n        expandIcon: (expanded) => expanded ? <Icon type=\\\"minus-circle-o\\\"/> : <Icon type=\\\"plus-circle-o\\\"/>,\\n        defaultExpandedRowKeys: [\\\"1\\\"]\\n      }}\\n      columns={columns} \\n      data={dataSource} \\n    />\\n  </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 树形数据展示\\n\\n表格支持树形数据的展示，当数据中有 children 字段时会自动展示为树形表格，如果不需要或配置为其他字段可以用 childrenColumnName 进行配置。\\n\\n可以通过设置 indentSize 以控制每一层的缩进宽度\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport React from 'react';\\nimport { Table, Button, Icon } from 'uiw';\\n\\nconst columns = [\\n  {\\n    title: '姓名',\\n    ellipsis: true, \\n    key: 'name', \\n  }, \\n  {\\n    title: '年龄',\\n    style: { color: 'red' },\\n    key: 'age',\\n  }, \\n  {\\n    title: '操作',\\n    key: 'edit',\\n    width: 98,\\n    render: (text, key, rowData, rowNumber, columnNumber) => (\\n      <div>\\n        <Button size=\\\"small\\\" type=\\\"danger\\\">删除</Button>\\n        <Button size=\\\"small\\\" type=\\\"success\\\">修改</Button>\\n      </div>\\n    ),\\n  },\\n];\\nconst dataSource = [\\n  { \\n    name: '邓紫棋', \\n    age: '10', \\n    id: '1', \\n    children: [\\n      {\\n        name: '邓紫棋-0-1', \\n        age: '10', \\n        id: '1-1', \\n        children: [\\n          { \\n            name: '邓紫棋-0-1-1', \\n            age: '10', \\n            id: '1-1-1',\\n            children: [\\n              {name: '邓紫棋-0-1-1-1', age: '10', id: '-0-1-1-1'},\\n              {name: '邓紫棋-0-1-1-2', age: '10', id: '-0-1-1-2'},\\n              {name: '邓紫棋-0-1-1-3', age: '10', id: '-0-1-1-3'},\\n            ]\\n          },\\n          { name: '邓紫棋-0-1-2', age: '10', id: '1-1-2',}\\n        ]\\n      },\\n      {name: '邓紫棋-0-2', age: '10', id: '1-1'},\\n      {name: '邓紫棋-0-3', age: '10', id: '1-1'},\\n    ]\\n  },\\n  { name: '李易峰', age: '32', id: '2',},\\n  { name: '范冰冰', age: '23', id: '3', \\n    children: [\\n      {name: '范冰冰0-1', age: '23', id: '3-1'},\\n      {name: '范冰冰0-2', age: '23', id: '3-2'},\\n      {name: '范冰冰0-3', age: '23', id: '3-3'},\\n    ]\\n  },\\n];\\nconst Demo = () => {\\n  const [expandedRowKeys, setExpandedRowKeys] = React.useState([])\\n  return (\\n    <div>\\n      <Table \\n        rowKey=\\\"id\\\"\\n        columns={columns}\\n        data={dataSource}\\n      />\\n    </div>\\n  )\\n};\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 表格列过宽导致 footer 滑动出表格底部\\n\\n使用 scroll 属性给表格设置宽(x)或高(y)即可\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button } from 'uiw';\\n\\nconst columns = [\\n  {\\n    // title: '姓名',\\n    ellipsis: true, \\n    width: 1000,\\n    title: ({ key }) => {\\n      return (\\n        <span>字段: {key}</span>\\n      )\\n    },\\n    key: 'name', \\n  }, {\\n    title: '年龄',\\n    style: { color: 'red' },\\n    key: 'age',\\n  }, {\\n    title: '地址',\\n    key: 'info',\\n  }, {\\n    title: '操作',\\n    key: 'edit',\\n    width: 98,\\n    render: (text, key, rowData, rowNumber, columnNumber) => (\\n      <div>\\n        <Button size=\\\"small\\\" type=\\\"danger\\\">删除</Button>\\n        <Button size=\\\"small\\\" type=\\\"success\\\">修改</Button>\\n      </div>\\n    ),\\n  },\\n];\\nconst dataSource = [\\n  { name: '邓紫棋', age: '12', info: '又名G.E.M.，原名邓诗颖，1991年8月16日生于中国上海，中国香港创作型女歌手。', edit: '' },\\n  { name: '李易峰', age: '32', info: '1987年5月4日出生于四川成都，中国内地男演员、流行乐歌手、影视制片人', edit: '' },\\n  { name: '范冰冰', age: '23', info: '1981年9月16日出生于山东青岛，中国影视女演员、制片人、流行乐女歌手', edit: '' },\\n  { name: '杨幂', age: '34', info: '1986年9月12日出生于北京市，中国内地影视女演员、流行乐歌手、影视制片人。', edit: '' },\\n  { name: 'Angelababy', age: '54', info: '1989年2月28日出生于上海市，华语影视女演员、时尚模特。', edit: '' },\\n  { name: '唐嫣', age: '12', info: '1983年12月6日出生于上海市，毕业于中央戏剧学院表演系本科班', edit: '' },\\n  { name: '吴亦凡', age: '4', info: '1990年11月06日出生于广东省广州市，华语影视男演员、流行乐歌手。', edit: '' },\\n];\\nconst Demo = () => (\\n  <div>\\n    <Table \\n      scroll={{x: 1800, y: 100}}\\n      footer={<div style={{height: 20, }}>这个是footer</div>}\\n      columns={columns} data={dataSource} \\n    />\\n  </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 固定列 \\n\\n通过使用 fixed 使其列固定\\n> ⚠️ 注意: 若并没有 scroll 滚动条，fixed 属性并不会有直观的效果\\n<!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;-->\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button } from 'uiw';\\n\\nconst columns = [\\n  {\\n    title: '姓名',\\n    ellipsis: true, \\n    // fixed: true,\\n    width: 50,\\n    key: 'name', \\n  }, {\\n    // fixed: true,\\n    title: '年龄',\\n    width: 50,\\n    style: { color: 'red' },\\n    key: 'age',\\n  }, {\\n    title: '地址',\\n    width: 50,\\n    key: 'info',\\n  }, {\\n    title: '操作',\\n    key: 'edit',\\n    width: 98,\\n    fixed: 'right',\\n    render: (text, key, rowData, rowNumber, columnNumber) => (\\n      <div>\\n        <Button size=\\\"small\\\" type=\\\"danger\\\">删除</Button>\\n        <Button size=\\\"small\\\" type=\\\"success\\\">修改</Button>\\n      </div>\\n    ),\\n  },\\n];\\nconst dataSource = [\\n  { name: '邓紫棋', age: '12', info: '又名G.E.M.，原名邓诗颖，1991年8月16日生于中国上海，中国香港创作型女歌手。', edit: '' },\\n  { name: '李易峰', age: '32', info: '1987年5月4日出生于四川成都，中国内地男演员、流行乐歌手、影视制片人', edit: '' },\\n  { name: '范冰冰', age: '23', info: '1981年9月16日出生于山东青岛，中国影视女演员、制片人、流行乐女歌手', edit: '' },\\n  { name: '杨幂', age: '34', info: '1986年9月12日出生于北京市，中国内地影视女演员、流行乐歌手、影视制片人。', edit: '' },\\n  { name: 'Angelababy', age: '54', info: '1989年2月28日出生于上海市，华语影视女演员、时尚模特。', edit: '' },\\n  { name: '唐嫣', age: '12', info: '1983年12月6日出生于上海市，毕业于中央戏剧学院表演系本科班', edit: '' },\\n  { name: '吴亦凡', age: '4', info: '1990年11月06日出生于广东省广州市，华语影视男演员、流行乐歌手。', edit: '' },\\n];\\nconst Demo = () => (\\n  <div>\\n    <Table scroll={{x: 1200}} bordered columns={columns} data={dataSource} />\\n  </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 可编辑\\n\\n利用 render 属性, 传递自定义组件实现\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button, Input, Select } from 'uiw';\\n\\nconst columns = (onChange) => [\\n  {\\n    title: '姓名',\\n    ellipsis: true, \\n    key: 'name', \\n    render: (text,key, rowData) => {\\n      return <EditInput \\n        value={text} \\n        onChange={(value)=>{\\n          onChange({...rowData, name: value}, rowData.id)\\n        }} \\n      />\\n    }\\n  }, \\n  {\\n    title: '性别',\\n    key: 'gender',\\n    render: (text,key, rowData) => {\\n      return <EditInput \\n        value={text} \\n        component=\\\"Select\\\"\\n        onChange={(value)=>{\\n          onChange({...rowData, gender: value}, rowData.id)\\n        }} \\n      />\\n    }\\n  },\\n  {\\n    title: '年龄',\\n    key: 'age',\\n    render: (text,key, rowData) => {\\n      return <EditInput \\n        value={text} \\n        type=\\\"number\\\"\\n        onChange={(value)=>{\\n          onChange({...rowData, age: value}, rowData.id)\\n        }} \\n      />\\n    }\\n  }, \\n  {\\n    title: '地址',\\n    key: 'info',\\n    render: (text,key, rowData) => {\\n      return <EditInput \\n        value={text} \\n        onChange={(value)=>{\\n          onChange({...rowData, info: value}, rowData.id)\\n        }} \\n      />\\n    }\\n  }, \\n];\\nconst dataSource = [\\n  { id: 1, gender: \\\"男\\\", name: '邓紫棋', age: '12', info: '又名G.E.M.，原名邓诗颖，1991年8月16日生于中国上海，中国香港创作型女'},\\n  { id: 2, gender: \\\"男\\\", name: '李易峰', age: '32', info: '1987年5月4日出生于四川成都，中国内地男演员、流行乐歌手、影视制片人', },\\n  { id: 3, gender: \\\"男\\\", name: '范冰冰', age: '23', info: '1981年9月16日出生于山东青岛，中国影视女演员、制片人、流行乐女歌手', },\\n  { id: 4, gender: \\\"男\\\", name: '杨幂', age: '34', info: '1986年9月12日出生于北京市，中国内地影视女演员、流行乐歌手、影视制片人。'},\\n  { id: 5, gender: \\\"男\\\", name: 'Angelababy', age: '54', info: '1989年2月28日出生于上海市，华语影视女演员、时尚模特。', },\\n  { id: 6, gender: \\\"男\\\", name: '唐嫣', age: '12', info: '1983年12月6日出生于上海市，毕业于中央戏剧学院表演系本科班', },\\n  { id: 7, gender: \\\"男\\\", name: '吴亦凡', age: '4', info: '1990年11月06日出生于广东省广州市，华语影视男演员、流行乐歌手。', },\\n];\\nconst EditInput = ({edit, value, type, onChange, component, ...other}) => {\\n  const [isEdit, setIsEdit] = React.useState(edit);\\n  const inputRef = React.useRef();\\n  React.useEffect(()=>{\\n    isEdit && inputRef.current.focus()\\n  }, [isEdit])\\n  if(isEdit) {\\n    if(component === \\\"Select\\\") {\\n      return <Select \\n        ref={inputRef}\\n        defaultValue={value} \\n        onBlur={e=>{\\n          onChange(e.target.value)\\n          setIsEdit(false)\\n        }}\\n      >\\n        <Select.Option value=\\\"男\\\">男</Select.Option>\\n        <Select.Option value=\\\"女\\\">女</Select.Option>\\n      </Select>\\n    }\\n    return <Input \\n      {...other}\\n      defaultValue={value} \\n      ref={inputRef} \\n      type={type || \\\"text\\\"}\\n      onBlur={(e)=>{\\n        onChange(e.target.value)\\n        setIsEdit(false)\\n      }}\\n    />\\n  }\\n  return <div onClick={()=>{\\n    setIsEdit(true)\\n  }}>{value}</div>\\n}\\nconst Demo = () => {\\n  const [data, setData] = React.useState(dataSource)\\n  const onChange = (value, id) => {\\n    setData(data.map(it=>it.id === id ? value : it))\\n  }\\n  return <div>\\n    <Table columns={columns(onChange)} data={data} />\\n  </div>\\n};\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 可编辑行\\n\\n利用 Form 组件和 render 属性, 实现编辑行效果\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button, Input, Select, Form, Notify } from 'uiw';\\n\\nconst columns = (actived, setChange, fields) => {\\n  return [\\n    {\\n      title: '姓名',\\n      ellipsis: true, \\n      key: 'name', \\n      render: (text,key, rowData) => {\\n        if(rowData.id === actived) return fields.name\\n        return text\\n      }\\n    }, \\n    {\\n      title: '性别',\\n      key: 'gender',\\n      render: (text,key, rowData) => {\\n        if(rowData.id === actived) return fields.gender\\n        return text\\n      }\\n    },\\n    {\\n      title: '年龄',\\n      key: 'age',\\n      render: (text,key, rowData) => {\\n        if(rowData.id === actived) return fields.age\\n        return text\\n      }\\n    }, \\n    {\\n      key: 'id',\\n      render: (id, key, rowData)=>{\\n        const flag = id === actived\\n        if(flag){\\n          return <>\\n            <Button type=\\\"primary\\\" htmlType=\\\"submit\\\">Save</Button>\\n            <Button type=\\\"danger\\\" onClick={()=>setChange({})}>Cancel</Button>\\n          </>\\n        }\\n        return <Button type=\\\"primary\\\" onClick={()=>setChange(rowData)} disabled={actived !== undefined && !flag}>Edit</Button>\\n      }\\n    }\\n  ]\\n};\\nconst dataSource = [\\n  { id: 1, gender: \\\"男\\\", name: '邓紫棋', age: '12', },\\n  { id: 2, gender: \\\"男\\\", name: '李易峰', age: '32', },\\n  { id: 3, gender: \\\"男\\\", name: '范冰冰', age: '23',  },\\n  { id: 4, gender: \\\"男\\\", name: '杨幂', age: '34',},\\n  { id: 5, gender: \\\"男\\\", name: 'Angelababy', age: '54', },\\n  { id: 6, gender: \\\"男\\\", name: '唐嫣', age: '12', },\\n  { id: 7, gender: \\\"男\\\", name: '吴亦凡', age: '4', },\\n];\\nconst Demo = () => {\\n  const [data, setData] = React.useState(dataSource)\\n  const [itemRowData, setItemRowData] = React.useState({})\\n  const [id, setId] = React.useState()\\n  \\n  const form = React.useRef()\\n  const setChange = (rowData) => {\\n    setId(rowData.id)\\n    setItemRowData(rowData)\\n    form.current.setFields(rowData)\\n  }\\n\\n  return <Form\\n    ref={form}\\n    onSubmit={({ current }) => {\\n      if(JSON.stringify(itemRowData) === JSON.stringify(current)) {\\n        Notify.error({\\n          title: '提交失败！',\\n          description: `表单提交内容并没有修改！`,\\n        });\\n        return \\n      }\\n      setData(data.map(it=>it.id === current.id ? current : it))\\n      setId(undefined)\\n      Notify.success({\\n        title: '提交成功！',\\n        description: '数据已经更新'\\n      });\\n    }}\\n    fields={{\\n      name: {\\n        children: <Input placeholder=\\\"请输入姓名\\\" />\\n      },\\n      age: {\\n        children: <Input placeholder=\\\"请输入年龄\\\" type=\\\"number\\\" />\\n      },\\n      gender: {\\n        children: <Select>\\n          <Select.Option value=\\\"男\\\">男</Select.Option>\\n          <Select.Option value=\\\"女\\\">女</Select.Option>\\n      </Select>\\n      }\\n    }}\\n  >\\n    {({ fields, state, canSubmit }) => {\\n      return (\\n        <div>\\n          <Table columns={columns(id, setChange, fields)} data={data} />\\n        </div>\\n      )\\n    }}\\n  </Form>\\n};\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Props\\n\\n### Table\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| columns | 表格列的配置描述，可以内嵌 `children`，以渲染分组表头。| ColumnProps[] | `[]` |\\n| data | 数据数组。| Array[] | `[]` |\\n| title | 表格标题 | ~~Function(text, key, rowData, rowNumber, columnNumber)~~ /<br/> Function(data: IColumns, rowNum: Number, colNum: Number)`@3.0.0+` /<br/> String / ReactNode | - |\\n| footer | 表格尾部 | String/ReactNode | - |\\n| bordered | 是否展示外边框和列边框 | Boolean | - |\\n| empty | 无数据状态 | ReactNode | - |\\n| onCellHead | 表头单元格点击回调 | ~~`Function(text, key, rowData, rowNumber, columnNumber)`~~ /<br/> Function(data: IColumns, colNum: Number, rowNum: Number, evn: React.MouseEvent<HTMLTableCellElement\\\\>) `@3.0.0+` | - |\\n| onCell | 单元格点击回调 | ~~`Function(text, key, rowData, rowNumber, columnNumber)`~~ /<br/> Function(data: IColumns, options:{ colNum: Number, rowNum: Number, keyName: String }, evn: React.MouseEvent<HTMLTableCellElement\\\\>) `@3.1.0+` | - |\\n| expandable | 可展开配置 | ExpandableType | - |\\n| rowKey | 表格行 key 的取值 | String | - |\\n| scroll | 表格是否可滚动，也可以指定滚动区域的宽、高 | { x?: React.CSSProperties['width'], y?: React.CSSProperties['height'] } | - |\\n\\n\\n### ColumnProps\\n\\n列描述数据对象，是 columns 中的一项，\\n\\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\\n|--------- |-------- |--------- |-------- |-------- |\\n| title | 列头显示文字。| ReactNode | - | - |\\n| key | 需要的 key，可以忽略这个属性，如果标题带有 `render` 函数，那么这个 `key` 为必须非常重要。| String | - | - |\\n| width | 列宽度。| Number | - | - |\\n| colSpan | 合并表头行。| Number | - | - |\\n| ellipsis | 超过宽度将自动省略。`v4.8.7+`| Boolean | `false` | - |\\n| render | 生成复杂数据的渲染函数，参数分别为当前行的值，当前值的 `key`，行索引数据，当前行号，当前列号。| `Function(text, key, rowData, rowNumber, columnNumber)` | - | - |\\n| align | 设置列的对齐方式 | \\\"left\\\"\\\\|\\\"center\\\"\\\\|\\\"right\\\" | - | - |\\n| className | 列样式类名 | String | - | - |\\n| fixed | 把选择框列固定\\t | Boolean \\\\|\\\"left\\\"\\\\|\\\"right\\\" | - | 4.15.1 |\\n\\n### expandable\\n\\n> ⚠️ 注意: expandedRowKeys 与 onExpandedRowsChange 必须同时出现或不出现\\n<!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;-->\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| expandedRowRender | 自定义展开行| (record, index, expanded) => React.ReactNode | - |\\n| expandIcon | 自定义图标 | (expanded, record, index) => React.ReactNode; | - |\\n| rowExpandable | 是否允许展开| (record)=>Boolean | - |\\n| defaultExpandAllRows | 初始时，是否展开所有行| Boolean | false |\\n| defaultExpandedRowKeys | 初始时，默认展开的行\\trowKey数组 | Array | - |\\n| expandedRowKeys | 控制展开的行\\trowKey数组 | Array | - |\\n| onExpandedRowsChange | 展开的行变化触发 | (expandedRows)=>void | - |\\n| onExpand | 点击展开图标触发 | (expanded,record,index)=>void | - |\\n| indentSize | 控制树形结构每一层的缩进宽度 | Number | 16 |\\n| childrenColumnName | 指定树形结构的列名 | String | children |\\n\";"],"names":[],"sourceRoot":""}
+{"version":3,"file":"static/js/6659.372695ec.chunk.js","mappings":"gHAAA","sources":["../../packages/react-table/README.md"],"sourcesContent":["export default \"Table 表格\\n===\\n\\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-table/file/README.md)\\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-table.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-table)\\n[![npm version](https://img.shields.io/npm/v/@uiw/react-table.svg?label=@uiw/react-table)](https://npmjs.com/@uiw/react-table)\\n\\n表示两种相互对立的状态间的切换，多用于触发「开/关」。选中时的内容支持响应式。\\n\\n```jsx\\nimport { Table } from 'uiw';\\n// or\\nimport Table from '@uiw/react-table';\\n```\\n\\n### 基本使用\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button } from 'uiw';\\n\\nconst columns = [\\n  {\\n    // title: '姓名',\\n    ellipsis: true, \\n    title: ({ key }) => {\\n      return (\\n        <span>字段: {key}</span>\\n      )\\n    },\\n    key: 'name', \\n  }, {\\n    title: '年龄',\\n    style: { color: 'red' },\\n    key: 'age',\\n  }, {\\n    title: '地址',\\n    key: 'info',\\n  }, {\\n    title: '操作',\\n    key: 'edit',\\n    width: 98,\\n    render: (text, key, rowData, rowNumber, columnNumber) => (\\n      <div>\\n        <Button size=\\\"small\\\" type=\\\"danger\\\">删除</Button>\\n        <Button size=\\\"small\\\" type=\\\"success\\\">修改</Button>\\n      </div>\\n    ),\\n  },\\n];\\nconst dataSource = [\\n  { name: '邓紫棋', age: '12', info: '又名G.E.M.，原名邓诗颖，1991年8月16日生于中国上海，中国香港创作型女歌手。', edit: '' },\\n  { name: '李易峰', age: '32', info: '1987年5月4日出生于四川成都，中国内地男演员、流行乐歌手、影视制片人', edit: '' },\\n  { name: '范冰冰', age: '23', info: '1981年9月16日出生于山东青岛，中国影视女演员、制片人、流行乐女歌手', edit: '' },\\n  { name: '杨幂', age: '34', info: '1986年9月12日出生于北京市，中国内地影视女演员、流行乐歌手、影视制片人。', edit: '' },\\n  { name: 'Angelababy', age: '54', info: '1989年2月28日出生于上海市，华语影视女演员、时尚模特。', edit: '' },\\n  { name: '唐嫣', age: '12', info: '1983年12月6日出生于上海市，毕业于中央戏剧学院表演系本科班', edit: '' },\\n  { name: '吴亦凡', age: '4', info: '1990年11月06日出生于广东省广州市，华语影视男演员、流行乐歌手。', edit: '' },\\n];\\nconst Demo = () => (\\n  <div>\\n    <Table columns={columns} data={dataSource} />\\n  </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n### 表头分组\\n\\n表头分组通过 `columns` 数组中对象的 `children` 来实现，以渲染分组表头。。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button } from 'uiw';\\n\\nconst columns = [\\n  {\\n    title: '姓名',\\n    style: { color: 'red' },\\n    key: 'name', \\n    children: [\\n       {\\n        title: '英文名字',\\n        width: 100,\\n        key: 'name_en',\\n      },\\n      {\\n        title: '中文名字',\\n        key: 'cnname',\\n        children:[\\n          {\\n            title: '姓名',\\n            style: { color: 'red' },\\n            key: 'firstname',\\n            children:[\\n              { title: '姓', key: 'name1', width: 80 },\\n              { title: '名',  key: 'name2', width: 80 },\\n            ]\\n          }, {\\n            title: '拼音',\\n            key: 'lastname',\\n            children:[\\n              { title: '姓', key: 'pinyin1', width: 80 },\\n              { title: '名', key: 'pinyin2', width: 80 },\\n            ],\\n          },\\n        ],\\n      }, \\n    ]\\n  }, {\\n    title: '其它',\\n    key: 'other',\\n    children:[\\n      { title: '生日', key: 'birthday', width: 150 },\\n      { title: '职业', key: 'job', width: 150 },\\n    ],\\n  }, {\\n    title: '操作',\\n    key: 'edit',\\n    width: 150,\\n    render: (text, key, rowData, rowNumber, columnNumber) => (\\n      <div>\\n        <Button size=\\\"small\\\" type=\\\"danger\\\">删除</Button>\\n        <span>{text} {key} - {rowNumber} - {columnNumber}</span>\\n      </div>\\n    ),\\n  },\\n];\\nconst dataSource = [\\n  { name1: '邓', name2:'紫棋', pinyin1: 'deng', pinyin2: 'ziqi', name_en: 'G.E.M.', birthday: '1991年8月16日', job: '唱作歌手、作曲人', edit:'' },\\n  { name1: '周', name2:'杰伦', pinyin1: 'zhou', pinyin2: 'jielun', name_en: 'Jay Chou', birthday: '1979年1月18日', job: '歌手、音乐人', edit:'' },\\n  { name1: '邓', name2:'紫棋', pinyin1: 'deng', pinyin2: 'ziqi', name_en: 'G.E.M.', birthday: '1991年8月16日', job: '唱作歌手、作曲人', edit:'' },\\n  { name1: '周', name2:'杰伦', pinyin1: 'zhou', pinyin2: 'jielun', name_en: 'Jay Chou', birthday: '1979年1月18日', job: '歌手、音乐人', edit:'' },\\n];\\nconst Demo = () => (\\n  <div>\\n    <Table bordered columns={columns} data={dataSource} />\\n  </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 表格行/列合并\\n\\n表头只支持列合并，使用 `columns` 里的 `colSpan` 进行设置。表格支持行/列合并，使用 `render` 里的单元格属性 `colSpan` 或者 `rowSpan` 设值为 0 时，设置的表格不会渲染。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true--> \\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button } from 'uiw';\\n\\nconst columns = [\\n  {\\n    title: '姓名',\\n    key: 'name', \\n  }, {\\n    title: '年龄',\\n    style: { color: 'red' },\\n    key: 'age',\\n    colSpan: 2,\\n    render: (text, key, rowData, rowNum, colNum) => {\\n      const obj = {\\n        children: text,\\n        props: {}\\n      }\\n      if (rowNum === 0) {\\n        obj.props.rowSpan = 2;\\n      }\\n      if (rowNum === 1) {\\n        obj.props.rowSpan = 0;\\n      }\\n      return obj;\\n    }\\n  }, {\\n    title: '地址',\\n    key: 'info',\\n    colSpan: 0,\\n  }, {\\n    title: '操作',\\n    key: 'edit',\\n    width: 98,\\n    render: (text, key, rowData, rowNumber, columnNumber) => (\\n      <div>\\n        <Button size=\\\"small\\\" type=\\\"danger\\\">删除</Button>\\n        <Button size=\\\"small\\\" type=\\\"success\\\">修改</Button>\\n      </div>\\n    ),\\n  },\\n];\\nconst dataSource = [\\n  { name: '邓紫棋', age: '12', info: '又名G.E.M.，原名邓诗颖，1991年8月16日生于中国上海，中国香港创作型女歌手。', edit: '' },\\n  { name: '李易峰', age: '12', info: '1987年5月4日出生于四川成都，中国内地男演员、流行乐歌手、影视制片人', edit: '' },\\n  { name: '范冰冰', age: '23', info: '1981年9月16日出生于山东青岛，中国影视女演员、制片人、流行乐女歌手', edit: '' },\\n  { name: '杨幂', age: '34', info: '1986年9月12日出生于北京市，中国内地影视女演员、流行乐歌手、影视制片人。', edit: '' },\\n];\\nconst Demo = () => (\\n  <div>\\n    <Table bordered columns={columns} data={dataSource} />\\n  </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n\\n### 标题页脚\\n\\n添加表格边框线，页头和页脚的展现效果。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button } from 'uiw';\\n\\nconst columns = [\\n  {\\n    title: '姓名',\\n    style: { color: 'red' },\\n    key: 'name', \\n  }, {\\n    title: '年龄',\\n    key: 'age',\\n  }, {\\n    title: '地址',\\n    key: 'info',\\n  }, {\\n    title: '操作',\\n    key: 'edit',\\n    width: 98,\\n    render: (text, key, rowData, rowNumber, columnNumber) => (\\n      <div>\\n        <Button size=\\\"small\\\" type=\\\"danger\\\">删除</Button>\\n        <Button size=\\\"small\\\" type=\\\"success\\\">修改</Button>\\n      </div>\\n    ),\\n  },\\n];\\nconst dataSource = [\\n  { name: '邓紫棋', age: '12', info: '又名G.E.M.，原名邓诗颖，1991年8月16日生于中国上海，中国香港创作型女歌手。', edit: '' },\\n  { name: '李易峰', age: '32', info: '1987年5月4日出生于四川成都，中国内地男演员、流行乐歌手、影视制片人', edit: '' },\\n  { name: '范冰冰', age: '23', info: '1981年9月16日出生于山东青岛，中国影视女演员、制片人、流行乐女歌手', edit: '' },\\n  { name: '杨幂', age: '34', info: '1986年9月12日出生于北京市，中国内地影视女演员、流行乐歌手、影视制片人。', edit: '' },\\n  { name: 'Angelababy', age: '54', info: '1989年2月28日出生于上海市，华语影视女演员、时尚模特。', edit: '' },\\n  { name: '唐嫣', age: '12', info: '1983年12月6日出生于上海市，毕业于中央戏剧学院表演系本科班', edit: '' },\\n  { name: '吴亦凡', age: '4', info: '1990年11月06日出生于广东省广州市，华语影视男演员、流行乐歌手。', edit: '' },\\n];\\nconst Demo = () => (\\n  <div>\\n    <Table\\n      title={(\\n        <div>\\n          这里是标题，有边框，<b>bordered=true</b>\\n        </div>\\n      )}\\n      footer={(\\n        <div>\\n          这里是页脚 Footer，有边框，<b>bordered=true</b>\\n        </div>\\n      )}\\n      bordered columns={columns} data={dataSource} />\\n    <Table title=\\\"这里是标题，没有边框\\\" footer=\\\"这里是页脚 Footer，没有边框\\\" columns={columns} data={dataSource} />\\n  </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 点击单元格\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button, Notify } from 'uiw';\\n\\nconst columns = [\\n  {\\n    title: '姓名',\\n    style: { color: 'red' },\\n    key: 'name', \\n  }, {\\n    title: '年龄',\\n    key: 'age',\\n  }, {\\n    title: '地址',\\n    key: 'info',\\n  }, {\\n    title: '操作',\\n    key: 'edit',\\n    width: 98,\\n    render: (text, key, rowData, rowNumber, columnNumber) => (\\n      <div>\\n        <Button size=\\\"small\\\" type=\\\"danger\\\">删除</Button>\\n        <Button size=\\\"small\\\" type=\\\"success\\\">修改</Button>\\n      </div>\\n    ),\\n  },\\n];\\nconst dataSource = [\\n  { name: '邓紫棋', age: '12', info: '又名G.E.M.，原名邓诗颖，1991年8月16日生于中国上海，中国香港创作型女歌手。', edit: '' },\\n  { name: '李易峰', age: '32', info: '1987年5月4日出生于四川成都，中国内地男演员、流行乐歌手、影视制片人', edit: '' },\\n  { name: '范冰冰', age: '23', info: '1981年9月16日出生于山东青岛，中国影视女演员、制片人、流行乐女歌手', edit: '' },\\n  { name: '杨幂', age: '34', info: '1986年9月12日出生于北京市，中国内地影视女演员、流行乐歌手、影视制片人。', edit: '' },\\n  { name: 'Angelababy', age: '54', info: '1989年2月28日出生于上海市，华语影视女演员、时尚模特。', edit: '' },\\n  { name: '唐嫣', age: '12', info: '1983年12月6日出生于上海市，毕业于中央戏剧学院表演系本科班', edit: '' },\\n  { name: '吴亦凡', age: '4', info: '1990年11月06日出生于广东省广州市，华语影视男演员、流行乐歌手。', edit: '' },\\n];\\nconst Demo = () => (\\n  <div>\\n    <Table\\n      title=\\\"表内容 tbody 单元格点击回调事件\\\"\\n      onCell={(rowData, { rowNum, colNum }) => {\\n        console.log('-->3', rowData);\\n        console.log('-->4', rowNum);\\n        console.log('-->5', colNum);\\n        Notify.info({ description: `你点击了\\\"${rowData.name}\\\"。` });\\n      }}\\n      columns={columns}\\n      data={dataSource}\\n    />\\n    <Table\\n      title=\\\"表头单元格点击回调事件\\\"\\n      onCellHead={(rowData, rowNum, columnNumber) => {\\n        console.log('-->3', rowData);\\n        console.log('-->4', rowNum);\\n        console.log('-->5', columnNumber);\\n        Notify.info({ description: `你点击了\\\"${rowData.title}\\\"。` });\\n      }}\\n      onCell={(rowData, { rowNum, colNum }) => {\\n        console.log('-->3', rowData);\\n        console.log('-->4', rowNum);\\n        console.log('-->5', colNum);\\n        Notify.info({ description: `你点击了\\\"${rowData.name}\\\"。` });\\n      }}\\n      columns={columns}\\n      data={dataSource}\\n    />\\n  </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 原始HTML\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button } from 'uiw';\\n\\nconst Demo = () => (\\n  <div>\\n    <Table bordered>\\n      <thead>\\n        <tr>\\n          <th>名称</th>\\n          <th>数量</th>\\n          <th>详情</th>\\n          <th>价格</th>\\n        </tr>\\n      </thead>\\n      <tbody>\\n        <tr>\\n          <td>土豆</td>\\n          <td>18</td>\\n          <td>2009/01/12</td>\\n          <td>￥86,000</td>\\n        </tr>\\n        <tr>\\n          <td>萝卜</td>\\n          <td>18</td>\\n          <td>2009/01/12</td>\\n          <td>￥86,000</td>\\n        </tr>\\n        <tr>\\n          <td>香蕉</td>\\n          <td>18</td>\\n          <td>2009/01/12</td>\\n          <td>￥86,000</td>\\n        </tr>\\n        <tr>\\n          <td>芝麻</td>\\n          <td>18</td>\\n          <td>2009/01/12</td>\\n          <td>￥86,000</td>\\n        </tr>\\n      </tbody>\\n    </Table>\\n    <Table>\\n      <caption>没有边框</caption>\\n      <thead>\\n        <tr>\\n          <th>名称</th>\\n          <th>数量</th>\\n          <th>详情</th>\\n          <th>价格</th>\\n        </tr>\\n      </thead>\\n      <tbody>\\n        <tr>\\n          <td>土豆</td>\\n          <td>18</td>\\n          <td>2009/01/12</td>\\n          <td>￥86,000</td>\\n        </tr>\\n        <tr>\\n          <td>萝卜</td>\\n          <td>18</td>\\n          <td>2009/01/12</td>\\n          <td>￥86,000</td>\\n        </tr>\\n        <tr>\\n          <td>香蕉</td>\\n          <td>18</td>\\n          <td>2009/01/12</td>\\n          <td>￥86,000</td>\\n        </tr>\\n        <tr>\\n          <td>芝麻</td>\\n          <td>18</td>\\n          <td>2009/01/12</td>\\n          <td>￥86,000</td>\\n        </tr>\\n      </tbody>\\n    </Table>\\n  </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 选择和操作\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button, Checkbox, Pagination, Loader } from 'uiw';\\n\\nclass Demo extends React.Component {\\n  constructor(props) {\\n    super(props);\\n    this.state = {\\n      // 选中的 key\\n      checked: [],\\n      loading: false,\\n      dataSource: [\\n        { name: '邓紫棋', age: '12', info: '又名G.E.M.，原名邓诗颖，1991年8月16日生于中国上海，中国香港创作型女歌手。' },\\n        { name: '李易峰', age: '32', info: '1987年5月4日出生于四川成都，中国内地男演员、流行乐歌手、影视制片人' },\\n        { name: '范冰冰', age: '23', info: '1981年9月16日出生于山东青岛，中国影视女演员、制片人、流行乐女歌手' },\\n        { name: '杨幂', age: '34', info: '1986年9月12日出生于北京市，中国内地影视女演员、流行乐歌手、影视制片人。' },\\n        { name: 'Angelababy', age: '54', info: '1989年2月28日出生于上海市，华语影视女演员、时尚模特。' },\\n        { name: '唐嫣', age: '12', info: '1983年12月6日出生于上海市，毕业于中央戏剧学院表演系本科班' },\\n        { name: '吴亦凡', age: '4', info: '1990年11月06日出生于广东省广州市，华语影视男演员、流行乐歌手。' },\\n      ],\\n      columns: [\\n        {\\n          title: (data, rowNum, colNum) => {\\n            const indeterminate = this.state.dataSource.length !== this.state.checked.length && this.state.checked.length > 0;\\n            const checked = this.state.dataSource.length === this.state.checked.length;\\n            return (\\n              <Checkbox\\n                checked={checked}\\n                indeterminate={indeterminate}\\n                onClick={(evn) => {\\n                  let checked = this.state.dataSource.map((item, idx) => idx);\\n                  if(!evn.target.checked) {\\n                    checked = [];\\n                  }\\n                  this.setState({ checked });\\n                }}\\n              />\\n            );\\n          },\\n          key: 'checked',\\n          render: (text, key, rowData, rowNumber, columnNumber) => {\\n            return (\\n              <Checkbox checked={rowData.checked} onClick={this.onClickCheckedItem.bind(this, rowNumber)} />\\n            );\\n          }\\n        }, {\\n          title: '名字',\\n          key: 'name',\\n        }, {\\n          title: '年龄',\\n          key: 'age',\\n        }, {\\n          title: '地址',\\n          key: 'info',\\n        },\\n      ]\\n    }\\n  }\\n  onClickCheckedItem(rowNumber, env) {\\n    let { checked } = this.state;\\n    const isChecked = env.target.checked;\\n    if(isChecked) {\\n      // 添加到选中数组中\\n      checked.push(rowNumber)\\n      checked = checked.sort((a, b) => a - b);\\n    } else {\\n      // 删除选中项\\n      checked.splice(checked.indexOf(rowNumber), 1);\\n    }\\n    this.setState({ checked });\\n  }\\n  render() {\\n    const { checked } = this.state;\\n    const dataSource = this.state.dataSource.map((item, idx) => {\\n      const isChecked = checked.indexOf(idx) > -1;\\n      return { checked: isChecked, ...item };\\n    });\\n    return (\\n      <div>\\n        <Loader loading={this.state.loading} style={{ display: 'block' }}>\\n          <Table\\n            columns={this.state.columns}\\n            data={dataSource}\\n            footer={\\n              <Pagination\\n                current={2}\\n                pageSize={10}\\n                total={30}\\n                divider\\n                onChange={(current, total, pageSize) => {\\n                  this.setState({ loading: true });\\n                  const timer = setTimeout(() => {\\n                    // 模拟变更数据\\n                    const dataSource = this.state.dataSource.map(item => {\\n                      item.age = Number(item.age) + current;\\n                      return item;\\n                    });\\n                    // 翻页 API 获取数据\\n                    this.setState({ checked: [], dataSource, loading: false });\\n                  }, 2000);\\n                }}\\n              />\\n            }\\n          />\\n        </Loader>\\n      </div>\\n    );\\n  }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 自定义单元格省略提示\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button, Notify, Tooltip } from 'uiw';\\n\\nconst columns = [\\n  {\\n    title: 'Name',\\n    key: 'name',\\n    render: text => <a>{text}</a>,\\n    width: 150,\\n  },\\n  {\\n    title: 'Age',\\n    key: 'age',\\n    width: 80,\\n  },\\n  {\\n    title: 'Address',\\n    key: 'address',\\n    ellipsis: true,\\n    render: address => (\\n      <Tooltip placement=\\\"topLeft\\\" content={address}>\\n        {address}\\n      </Tooltip>\\n    ),\\n  },\\n  {\\n    title: 'Long Column Long Column Long Column',\\n    key: 'address',\\n    ellipsis: true,\\n    render: address => (\\n      <Tooltip placement=\\\"topLeft\\\" content={address}>\\n        {address}\\n      </Tooltip>\\n    ),\\n  },\\n  {\\n    title: 'Long Column Long Column',\\n    key: 'address',\\n    ellipsis: true,\\n    render: address => (\\n      <Tooltip placement=\\\"topLeft\\\" content={address}>\\n        {address}\\n      </Tooltip>\\n    ),\\n  },\\n  {\\n    title: 'Long Column',\\n    key: 'address',\\n    ellipsis: true,\\n    render: address => {\\n      return (\\n        <Tooltip placement=\\\"topLeft\\\" content={address}>\\n          {address}\\n        </Tooltip>\\n      )\\n    },\\n  },\\n];\\n\\nconst data = [\\n  { name: '邓紫棋', age: '12', address: '又名G.E.M.，原名邓诗颖，1991年8月16日生于中国上海，中国香港创作型女歌手。' },\\n  { name: '李易峰', age: '32', address: '1987年5月4日出生于四川成都，中国内地男演员、流行乐歌手、影视制片人' },\\n  { name: '范冰冰', age: '23', address: '1981年9月16日出生于山东青岛，中国影视女演员、制片人、流行乐女歌手' },\\n  { name: '杨幂', age: '34', address: '1986年9月12日出生于北京市，中国内地影视女演员、流行乐歌手、影视制片人。' },\\n  { name: 'Angelababy', age: '54', address: '1989年2月28日出生于上海市，华语影视女演员、时尚模特。' },\\n  { name: '唐嫣', age: '12', address: '1983年12月6日出生于上海市，毕业于中央戏剧学院表演系本科班' },\\n  { name: '吴亦凡', age: '4', address: '1990年11月06日出生于广东省广州市，华语影视男演员、流行乐歌手。' },\\n];\\n\\nconst Demo = () => (\\n  <div>\\n    <Table\\n      title=\\\"表内容 tbody 单元格点击回调事件\\\"\\n      columns={columns}\\n      data={data}\\n    />\\n  </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 无数据状态\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button, Empty } from 'uiw';\\n\\nconst columns = [\\n  {\\n    ellipsis: true, \\n    title: '姓名',\\n    key: 'name', \\n  }, {\\n    title: '年龄',\\n    key: 'age',\\n  }, {\\n    title: '地址',\\n    key: 'info',\\n  }, {\\n    title: '操作',\\n    key: 'edit',\\n    width: 98,\\n    render: (text, key, rowData, rowNumber, columnNumber) => (\\n      <div>\\n        <Button size=\\\"small\\\" type=\\\"danger\\\">删除</Button>\\n        <Button size=\\\"small\\\" type=\\\"success\\\">修改</Button>\\n      </div>\\n    ),\\n  },\\n];\\nconst dataSource = [];\\nconst Demo = () => (\\n  <div>\\n    <Table\\n      columns={columns}\\n      data={dataSource}\\n      empty={<Empty />}  \\n    />\\n  </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 可展开\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button, Icon } from 'uiw';\\n\\nconst columns = [\\n  {\\n    title: '姓名',\\n    ellipsis: true, \\n    key: 'name', \\n  }, \\n  {\\n    title: '年龄',\\n    style: { color: 'red' },\\n    key: 'age',\\n  }, \\n  {\\n    title: '操作',\\n    key: 'edit',\\n    width: 98,\\n    render: (text, key, rowData, rowNumber, columnNumber) => (\\n      <div>\\n        <Button size=\\\"small\\\" type=\\\"danger\\\">删除</Button>\\n        <Button size=\\\"small\\\" type=\\\"success\\\">修改</Button>\\n      </div>\\n    ),\\n  },\\n];\\nconst dataSource = [\\n  { name: '邓紫棋', age: '10', id: '1'},\\n  { name: '李易峰', age: '32', id: '2'},\\n  { name: '范冰冰', age: '23', id: '3'},\\n];\\nconst Demo = () => (\\n  <div>\\n    <Table \\n      rowKey=\\\"id\\\"\\n      expandable={{\\n        expandedRowRender: (record, index, expanded)=>{\\n          return <div>{record.name}</div>\\n        },\\n        // defaultExpandAllRows: true,\\n        rowExpandable: (r)=>r.name!=='李易峰',\\n        expandIcon: (expanded) => expanded ? <Icon type=\\\"minus-circle-o\\\"/> : <Icon type=\\\"plus-circle-o\\\"/>,\\n        defaultExpandedRowKeys: [\\\"1\\\"]\\n      }}\\n      columns={columns} \\n      data={dataSource} \\n    />\\n  </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 树形数据展示\\n\\n表格支持树形数据的展示，当数据中有 children 字段时会自动展示为树形表格，如果不需要或配置为其他字段可以用 childrenColumnName 进行配置。\\n\\n可以通过设置 indentSize 以控制每一层的缩进宽度\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport React from 'react';\\nimport { Table, Button, Icon } from 'uiw';\\n\\nconst columns = [\\n  {\\n    title: '姓名',\\n    ellipsis: true, \\n    key: 'name', \\n  }, \\n  {\\n    title: '年龄',\\n    style: { color: 'red' },\\n    key: 'age',\\n  }, \\n  {\\n    title: '操作',\\n    key: 'edit',\\n    width: 98,\\n    render: (text, key, rowData, rowNumber, columnNumber) => (\\n      <div>\\n        <Button size=\\\"small\\\" type=\\\"danger\\\">删除</Button>\\n        <Button size=\\\"small\\\" type=\\\"success\\\">修改</Button>\\n      </div>\\n    ),\\n  },\\n];\\nconst dataSource = [\\n  { \\n    name: '邓紫棋', \\n    age: '10', \\n    id: '1', \\n    children: [\\n      {\\n        name: '邓紫棋-0-1', \\n        age: '10', \\n        id: '1-1', \\n        children: [\\n          { \\n            name: '邓紫棋-0-1-1', \\n            age: '10', \\n            id: '1-1-1',\\n            children: [\\n              {name: '邓紫棋-0-1-1-1', age: '10', id: '-0-1-1-1'},\\n              {name: '邓紫棋-0-1-1-2', age: '10', id: '-0-1-1-2'},\\n              {name: '邓紫棋-0-1-1-3', age: '10', id: '-0-1-1-3'},\\n            ]\\n          },\\n          { name: '邓紫棋-0-1-2', age: '10', id: '1-1-2',}\\n        ]\\n      },\\n      {name: '邓紫棋-0-2', age: '10', id: '1-1'},\\n      {name: '邓紫棋-0-3', age: '10', id: '1-1'},\\n    ]\\n  },\\n  { name: '李易峰', age: '32', id: '2',},\\n  { name: '范冰冰', age: '23', id: '3', \\n    children: [\\n      {name: '范冰冰0-1', age: '23', id: '3-1'},\\n      {name: '范冰冰0-2', age: '23', id: '3-2'},\\n      {name: '范冰冰0-3', age: '23', id: '3-3'},\\n    ]\\n  },\\n];\\nconst Demo = () => {\\n  const [expandedRowKeys, setExpandedRowKeys] = React.useState([])\\n  return (\\n    <div>\\n      <Table \\n        rowKey=\\\"id\\\"\\n        columns={columns}\\n        data={dataSource}\\n      />\\n    </div>\\n  )\\n};\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 表格列过宽导致 footer 滑动出表格底部\\n\\n使用 scroll 属性给表格设置宽(x)或高(y)即可\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button } from 'uiw';\\n\\nconst columns = [\\n  {\\n    // title: '姓名',\\n    ellipsis: true, \\n    width: 1000,\\n    title: ({ key }) => {\\n      return (\\n        <span>字段: {key}</span>\\n      )\\n    },\\n    key: 'name', \\n  }, {\\n    title: '年龄',\\n    style: { color: 'red' },\\n    key: 'age',\\n  }, {\\n    title: '地址',\\n    key: 'info',\\n  }, {\\n    title: '操作',\\n    key: 'edit',\\n    width: 98,\\n    render: (text, key, rowData, rowNumber, columnNumber) => (\\n      <div>\\n        <Button size=\\\"small\\\" type=\\\"danger\\\">删除</Button>\\n        <Button size=\\\"small\\\" type=\\\"success\\\">修改</Button>\\n      </div>\\n    ),\\n  },\\n];\\nconst dataSource = [\\n  { name: '邓紫棋', age: '12', info: '又名G.E.M.，原名邓诗颖，1991年8月16日生于中国上海，中国香港创作型女歌手。', edit: '' },\\n  { name: '李易峰', age: '32', info: '1987年5月4日出生于四川成都，中国内地男演员、流行乐歌手、影视制片人', edit: '' },\\n  { name: '范冰冰', age: '23', info: '1981年9月16日出生于山东青岛，中国影视女演员、制片人、流行乐女歌手', edit: '' },\\n  { name: '杨幂', age: '34', info: '1986年9月12日出生于北京市，中国内地影视女演员、流行乐歌手、影视制片人。', edit: '' },\\n  { name: 'Angelababy', age: '54', info: '1989年2月28日出生于上海市，华语影视女演员、时尚模特。', edit: '' },\\n  { name: '唐嫣', age: '12', info: '1983年12月6日出生于上海市，毕业于中央戏剧学院表演系本科班', edit: '' },\\n  { name: '吴亦凡', age: '4', info: '1990年11月06日出生于广东省广州市，华语影视男演员、流行乐歌手。', edit: '' },\\n];\\nconst Demo = () => (\\n  <div>\\n    <Table \\n      scroll={{x: 1800, y: 100}}\\n      footer={<div style={{height: 20, }}>这个是footer</div>}\\n      columns={columns} data={dataSource} \\n    />\\n  </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 固定列 \\n\\n通过使用 fixed 使其列固定\\n> ⚠️ 注意: 若并没有 scroll 滚动条，fixed 属性并不会有直观的效果\\n<!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;-->\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button } from 'uiw';\\n\\nconst columns = [\\n  {\\n    title: '姓名',\\n    ellipsis: true, \\n    // fixed: true,\\n    width: 50,\\n    key: 'name', \\n  }, {\\n    // fixed: true,\\n    title: '年龄',\\n    width: 50,\\n    style: { color: 'red' },\\n    key: 'age',\\n  }, {\\n    title: '地址',\\n    width: 50,\\n    key: 'info',\\n  }, {\\n    title: '操作',\\n    key: 'edit',\\n    width: 98,\\n    fixed: 'right',\\n    render: (text, key, rowData, rowNumber, columnNumber) => (\\n      <div>\\n        <Button size=\\\"small\\\" type=\\\"danger\\\">删除</Button>\\n        <Button size=\\\"small\\\" type=\\\"success\\\">修改</Button>\\n      </div>\\n    ),\\n  },\\n];\\nconst dataSource = [\\n  { name: '邓紫棋', age: '12', info: '又名G.E.M.，原名邓诗颖，1991年8月16日生于中国上海，中国香港创作型女歌手。', edit: '' },\\n  { name: '李易峰', age: '32', info: '1987年5月4日出生于四川成都，中国内地男演员、流行乐歌手、影视制片人', edit: '' },\\n  { name: '范冰冰', age: '23', info: '1981年9月16日出生于山东青岛，中国影视女演员、制片人、流行乐女歌手', edit: '' },\\n  { name: '杨幂', age: '34', info: '1986年9月12日出生于北京市，中国内地影视女演员、流行乐歌手、影视制片人。', edit: '' },\\n  { name: 'Angelababy', age: '54', info: '1989年2月28日出生于上海市，华语影视女演员、时尚模特。', edit: '' },\\n  { name: '唐嫣', age: '12', info: '1983年12月6日出生于上海市，毕业于中央戏剧学院表演系本科班', edit: '' },\\n  { name: '吴亦凡', age: '4', info: '1990年11月06日出生于广东省广州市，华语影视男演员、流行乐歌手。', edit: '' },\\n];\\nconst Demo = () => (\\n  <div>\\n    <Table scroll={{x: 1200}} bordered columns={columns} data={dataSource} />\\n  </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 可编辑\\n\\n利用 render 属性, 传递自定义组件实现\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button, Input, Select } from 'uiw';\\n\\nconst columns = (onChange) => [\\n  {\\n    title: '姓名',\\n    ellipsis: true, \\n    key: 'name', \\n    render: (text,key, rowData) => {\\n      return <EditInput \\n        value={text} \\n        onChange={(value)=>{\\n          onChange({...rowData, name: value}, rowData.id)\\n        }} \\n      />\\n    }\\n  }, \\n  {\\n    title: '性别',\\n    key: 'gender',\\n    render: (text,key, rowData) => {\\n      return <EditInput \\n        value={text} \\n        component=\\\"Select\\\"\\n        onChange={(value)=>{\\n          onChange({...rowData, gender: value}, rowData.id)\\n        }} \\n      />\\n    }\\n  },\\n  {\\n    title: '年龄',\\n    key: 'age',\\n    render: (text,key, rowData) => {\\n      return <EditInput \\n        value={text} \\n        type=\\\"number\\\"\\n        onChange={(value)=>{\\n          onChange({...rowData, age: value}, rowData.id)\\n        }} \\n      />\\n    }\\n  }, \\n  {\\n    title: '地址',\\n    key: 'info',\\n    render: (text,key, rowData) => {\\n      return <EditInput \\n        value={text} \\n        onChange={(value)=>{\\n          onChange({...rowData, info: value}, rowData.id)\\n        }} \\n      />\\n    }\\n  }, \\n];\\nconst dataSource = [\\n  { id: 1, gender: \\\"男\\\", name: '邓紫棋', age: '12', info: '又名G.E.M.，原名邓诗颖，1991年8月16日生于中国上海，中国香港创作型女'},\\n  { id: 2, gender: \\\"男\\\", name: '李易峰', age: '32', info: '1987年5月4日出生于四川成都，中国内地男演员、流行乐歌手、影视制片人', },\\n  { id: 3, gender: \\\"男\\\", name: '范冰冰', age: '23', info: '1981年9月16日出生于山东青岛，中国影视女演员、制片人、流行乐女歌手', },\\n  { id: 4, gender: \\\"男\\\", name: '杨幂', age: '34', info: '1986年9月12日出生于北京市，中国内地影视女演员、流行乐歌手、影视制片人。'},\\n  { id: 5, gender: \\\"男\\\", name: 'Angelababy', age: '54', info: '1989年2月28日出生于上海市，华语影视女演员、时尚模特。', },\\n  { id: 6, gender: \\\"男\\\", name: '唐嫣', age: '12', info: '1983年12月6日出生于上海市，毕业于中央戏剧学院表演系本科班', },\\n  { id: 7, gender: \\\"男\\\", name: '吴亦凡', age: '4', info: '1990年11月06日出生于广东省广州市，华语影视男演员、流行乐歌手。', },\\n];\\nconst EditInput = ({edit, value, type, onChange, component, ...other}) => {\\n  const [isEdit, setIsEdit] = React.useState(edit);\\n  const inputRef = React.useRef();\\n  React.useEffect(()=>{\\n    isEdit && inputRef.current.focus()\\n  }, [isEdit])\\n  if(isEdit) {\\n    if(component === \\\"Select\\\") {\\n      return <Select \\n        ref={inputRef}\\n        defaultValue={value} \\n        onBlur={e=>{\\n          onChange(e.target.value)\\n          setIsEdit(false)\\n        }}\\n      >\\n        <Select.Option value=\\\"男\\\">男</Select.Option>\\n        <Select.Option value=\\\"女\\\">女</Select.Option>\\n      </Select>\\n    }\\n    return <Input \\n      {...other}\\n      defaultValue={value} \\n      ref={inputRef} \\n      type={type || \\\"text\\\"}\\n      onBlur={(e)=>{\\n        onChange(e.target.value)\\n        setIsEdit(false)\\n      }}\\n    />\\n  }\\n  return <div onClick={()=>{\\n    setIsEdit(true)\\n  }}>{value}</div>\\n}\\nconst Demo = () => {\\n  const [data, setData] = React.useState(dataSource)\\n  const onChange = (value, id) => {\\n    setData(data.map(it=>it.id === id ? value : it))\\n  }\\n  return <div>\\n    <Table columns={columns(onChange)} data={data} />\\n  </div>\\n};\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 可编辑行\\n\\n利用 Form 组件和 render 属性, 实现编辑行效果\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Table, Button, Input, Select, Form, Notify } from 'uiw';\\n\\nconst columns = (actived, setChange, fields) => {\\n  return [\\n    {\\n      title: '姓名',\\n      ellipsis: true, \\n      key: 'name', \\n      render: (text,key, rowData) => {\\n        if(rowData.id === actived) return fields.name\\n        return text\\n      }\\n    }, \\n    {\\n      title: '性别',\\n      key: 'gender',\\n      render: (text,key, rowData) => {\\n        if(rowData.id === actived) return fields.gender\\n        return text\\n      }\\n    },\\n    {\\n      title: '年龄',\\n      key: 'age',\\n      render: (text,key, rowData) => {\\n        if(rowData.id === actived) return fields.age\\n        return text\\n      }\\n    }, \\n    {\\n      key: 'id',\\n      render: (id, key, rowData)=>{\\n        const flag = id === actived\\n        if(flag){\\n          return <>\\n            <Button type=\\\"primary\\\" htmlType=\\\"submit\\\">Save</Button>\\n            <Button type=\\\"danger\\\" onClick={()=>setChange({})}>Cancel</Button>\\n          </>\\n        }\\n        return <Button \\n          type=\\\"primary\\\" \\n          onClick={(e)=>{\\n            e.preventDefault();\\n            setChange(rowData)\\n          }} \\n          disabled={actived !== undefined && !flag}\\n        >Edit</Button>\\n      }\\n    }\\n  ]\\n};\\nconst dataSource = [\\n  { id: 1, gender: \\\"男\\\", name: '邓紫棋', age: '12', },\\n  { id: 2, gender: \\\"男\\\", name: '李易峰', age: '32', },\\n  { id: 3, gender: \\\"男\\\", name: '范冰冰', age: '23',  },\\n  { id: 4, gender: \\\"男\\\", name: '杨幂', age: '34',},\\n  { id: 5, gender: \\\"男\\\", name: 'Angelababy', age: '54', },\\n  { id: 6, gender: \\\"男\\\", name: '唐嫣', age: '12', },\\n  { id: 7, gender: \\\"男\\\", name: '吴亦凡', age: '4', },\\n];\\nconst Demo = () => {\\n  const [data, setData] = React.useState(dataSource)\\n  const [itemRowData, setItemRowData] = React.useState({})\\n  const [id, setId] = React.useState()\\n  \\n  const form = React.useRef()\\n  const setChange = (rowData) => {\\n    setId(rowData.id)\\n    setItemRowData(rowData)\\n    form.current.setFields(rowData)\\n  }\\n\\n  return <Form\\n    ref={form}\\n    onSubmit={({ current }) => {\\n      if(JSON.stringify(itemRowData) === JSON.stringify(current)) {\\n        Notify.error({\\n          title: '提交失败！',\\n          description: `表单提交内容并没有修改！`,\\n        });\\n        return \\n      }\\n      setData(data.map(it=>it.id === current.id ? current : it))\\n      setId(undefined)\\n      Notify.success({\\n        title: '提交成功！',\\n        description: '数据已经更新'\\n      });\\n    }}\\n    fields={{\\n      name: {\\n        children: <Input placeholder=\\\"请输入姓名\\\" />\\n      },\\n      age: {\\n        children: <Input placeholder=\\\"请输入年龄\\\" type=\\\"number\\\" />\\n      },\\n      gender: {\\n        children: <Select>\\n          <Select.Option value=\\\"男\\\">男</Select.Option>\\n          <Select.Option value=\\\"女\\\">女</Select.Option>\\n        </Select>\\n      }\\n    }}\\n  >\\n    {({ fields }) => <Table columns={columns(id, setChange, fields)} data={data} />}\\n  </Form>\\n};\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Props\\n\\n### Table\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| columns | 表格列的配置描述，可以内嵌 `children`，以渲染分组表头。| ColumnProps[] | `[]` |\\n| data | 数据数组。| Array[] | `[]` |\\n| title | 表格标题 | ~~Function(text, key, rowData, rowNumber, columnNumber)~~ /<br/> Function(data: IColumns, rowNum: Number, colNum: Number)`@3.0.0+` /<br/> String / ReactNode | - |\\n| footer | 表格尾部 | String/ReactNode | - |\\n| bordered | 是否展示外边框和列边框 | Boolean | - |\\n| empty | 无数据状态 | ReactNode | - |\\n| onCellHead | 表头单元格点击回调 | ~~`Function(text, key, rowData, rowNumber, columnNumber)`~~ /<br/> Function(data: IColumns, colNum: Number, rowNum: Number, evn: React.MouseEvent<HTMLTableCellElement\\\\>) `@3.0.0+` | - |\\n| onCell | 单元格点击回调 | ~~`Function(text, key, rowData, rowNumber, columnNumber)`~~ /<br/> Function(data: IColumns, options:{ colNum: Number, rowNum: Number, keyName: String }, evn: React.MouseEvent<HTMLTableCellElement\\\\>) `@3.1.0+` | - |\\n| expandable | 可展开配置 | ExpandableType | - |\\n| rowKey | 表格行 key 的取值 | String | - |\\n| scroll | 表格是否可滚动，也可以指定滚动区域的宽、高 | { x?: React.CSSProperties['width'], y?: React.CSSProperties['height'] } | - |\\n\\n\\n### ColumnProps\\n\\n列描述数据对象，是 columns 中的一项，\\n\\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\\n|--------- |-------- |--------- |-------- |-------- |\\n| title | 列头显示文字。| ReactNode | - | - |\\n| key | 需要的 key，可以忽略这个属性，如果标题带有 `render` 函数，那么这个 `key` 为必须非常重要。| String | - | - |\\n| width | 列宽度。| Number | - | - |\\n| colSpan | 合并表头行。| Number | - | - |\\n| ellipsis | 超过宽度将自动省略。`v4.8.7+`| Boolean | `false` | - |\\n| render | 生成复杂数据的渲染函数，参数分别为当前行的值，当前值的 `key`，行索引数据，当前行号，当前列号。| `Function(text, key, rowData, rowNumber, columnNumber)` | - | - |\\n| align | 设置列的对齐方式 | \\\"left\\\"\\\\|\\\"center\\\"\\\\|\\\"right\\\" | - | - |\\n| className | 列样式类名 | String | - | - |\\n| fixed | 把选择框列固定\\t | Boolean \\\\|\\\"left\\\"\\\\|\\\"right\\\" | - | 4.15.1 |\\n\\n### expandable\\n\\n> ⚠️ 注意: expandedRowKeys 与 onExpandedRowsChange 必须同时出现或不出现\\n<!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;-->\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| expandedRowRender | 自定义展开行| (record, index, expanded) => React.ReactNode | - |\\n| expandIcon | 自定义图标 | (expanded, record, index) => React.ReactNode; | - |\\n| rowExpandable | 是否允许展开| (record)=>Boolean | - |\\n| defaultExpandAllRows | 初始时，是否展开所有行| Boolean | false |\\n| defaultExpandedRowKeys | 初始时，默认展开的行\\trowKey数组 | Array | - |\\n| expandedRowKeys | 控制展开的行\\trowKey数组 | Array | - |\\n| onExpandedRowsChange | 展开的行变化触发 | (expandedRows)=>void | - |\\n| onExpand | 点击展开图标触发 | (expanded,record,index)=>void | - |\\n| indentSize | 控制树形结构每一层的缩进宽度 | Number | 16 |\\n| childrenColumnName | 指定树形结构的列名 | String | children |\\n\";"],"names":[],"sourceRoot":""}

package/web/static/js/{6869.b8062d81.chunk.js → 6869.37ce78aa.chunk.js}

@@ -1,2 +1,2 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6869],{76869:function(n,e,t){t.r(e),e.default="DateInput \u65e5\u671f\u8f93\u5165\u6846\n===\n\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-date-input/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-date-input.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-date-input)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-date-input.svg?label=@uiw/react-date-input)](https://npmjs.com/@uiw/react-date-input)\n\n\u663e\u793a\u4e00\u4e2a\u6708\u7684\u65e5\u5386\uff0c\u5e76\u5141\u8bb8\u7528\u6237\u9009\u62e9\u5355\u4e2a\u65e5\u671f\u3002\n\n```jsx\nimport { DateInput, DateInputRange } from 'uiw';\n// or\nimport DateInput,{ DateInputRange } from '@uiw/react-date-input';\n// \u5728 `v4.13.0` \u7248\u672c\u4e2d\u589e\u52a0 DateInputRange \u7ec4\u4ef6\n```\n\n## \u57fa\u672c\u4f7f\u7528\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { DateInput, DateInputRange, Row, Col } from 'uiw';\n\nfunction Demo () {\n\n  const [dataRange,dataRangeSet] =React.useState(['2022-02-25 15:06:24','2022-02-27 14:47:32'])\n\n  function onChange(selectedDate,dataRange) {\n    console.log('selectedDate',selectedDate,dataRange)\n  }\n\n  return (\n    <div>\n      <Row style={{ marginBottom:10 }}>\n        <Col style={{ width: 200 }} fixed>\n          <DateInput\n            value={new Date()}\n            datePickerProps={{ todayButton: '\u4eca\u5929' }}\n            onChange={onChange}\n          />\n        </Col>\n        <Col style={{ width: 200, marginLeft: 10 }} fixed>\n          <DateInput\n            value={new Date()}\n            disabled\n            onChange={onChange}\n          />\n        </Col>\n        <Col style={{ width: 400, marginLeft: 10 }} fixed>\n          <DateInputRange\n            bodyStyle={{ width: 400 }}\n            format=\"YYYY/MM/DD HH:mm:ss\"\n            value={dataRange}\n            datePickerProps={{ todayButton: '\u4eca\u5929',showTime:true }}\n            onChange={onChange}\n          />\n        </Col>\n      </Row>\n    </div>\n  )\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u5728\u8868\u5355\u4e2d\u4f7f\u7528\n\n\u5728 [`<Form />`](#/components/form) \u8868\u5355\u4e2d\u5e94\u7528 [`<DateInput />`](#/components/date-input) \u7ec4\u4ef6\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { DateInput,DateInputRange, Notify, Button, Form, Row, Col } from 'uiw';\n\nfunction Demo(){\n  const form = React.useRef(null)\n\n  const resetDateRange = () => {\n    form.current.resetForm()\n  }\n\n  const setDateRange = () => {\n    form.current.setFields({dateRange:[new Date(),new Date()]})\n  }\n\n  return (\n    <Form\n      ref={form}\n      onSubmit={({ initial, current }) => {\n        if (current.date) {\n          Notify.success({\n            title: '\u63d0\u4ea4\u6210\u529f\uff01',\n            description: `\u8868\u5355\u63d0\u4ea4\u65f6\u95f4\u6210\u529f\uff0c\u65f6\u95f4\u4e3a\uff1a${current.date}`,\n          });\n        } else {\n          Notify.error({\n            title: '\u63d0\u4ea4\u5931\u8d25\uff01',\n            description: `\u8868\u5355\u63d0\u4ea4\u65f6\u95f4\u6210\u529f\uff0c\u65f6\u95f4\u4e3a\uff1a${current.date}\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01`,\n          });\n        }\n      }}\n      fields={{\n        date: {\n          initialValue: '2019/02/17',\n          labelClassName: 'fieldLabel',\n          labelFor: 'date-inline',\n          children: <DateInput datePickerProps={{ todayButton: '\u4eca\u5929' }} id=\"date-inline\" />\n        },\n        dateRange: {\n          initialValue: ['2019/02/17', '2019/02/20'],\n          labelClassName: 'fieldLabel',\n          labelFor: 'date-inline',\n          children: <DateInputRange datePickerProps={{ todayButton: '\u4eca\u5929' }} id=\"date-inline\" />\n        },\n      }}\n    >\n      {({ fields, state, canSubmit }) => {\n        return (\n          <div>\n            <Row>\n              <Col style={{ width: 200 }} fixed>{fields.date}</Col>\n            </Row>\n            <Row style={{ width: 200 }} >\n              <Col fixed>{fields.dateRange}</Col>\n            </Row>\n            <Row gutter={10}>\n              <Col>\n                <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n                <Button onClick={resetDateRange} >\u91cd\u7f6e</Button>\n                <Button onClick={setDateRange}>setValue</Button>\n              </Col>\n            </Row>\n          </div>\n        )\n      }}\n    </Form>\n  )\n}\n\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u65e5\u671f\u683c\u5f0f\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { DateInput } from 'uiw';\n\nclass Demo extends React.Component {\n  onChange(selectedDate) {\n    console.log('selectedDate:', selectedDate);\n  }\n  render() {\n    return (\n      <div style={{ width: 200 }}>\n        <DateInput\n          format=\"YYYY # MM # DD\"\n          datePickerProps={{ todayButton: '\u4eca\u5929' }}\n          onChange={this.onChange.bind(this)}\n        />\n      </div>\n    )\n  }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u65e5\u671f\u65f6\u95f4\u8bbe\u7f6e\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { DateInput } from 'uiw';\n\nclass Demo extends React.Component {\n  onChange(selectedDate) {\n    console.log('selectedDate:', selectedDate);\n  }\n  render() {\n    return (\n      <div style={{ width: 200 }}>\n        <DateInput\n          format=\"YYYY/MM/DD HH:mm:ss\"\n          datePickerProps={{ showTime: true, todayButton: '\u4eca\u5929' }}\n          onChange={this.onChange.bind(this)}\n        />\n      </div>\n    )\n  }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u81ea\u52a8\u9690\u85cf\u5f39\u5c42\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { DateInput } from 'uiw';\n\nclass Demo extends React.Component {\n  onChange(selectedDate) {\n    console.log('selectedDate:', selectedDate);\n  }\n  render() {\n    return (\n      <div style={{ maxWidth: 200 }}>\n        <DateInput\n          autoClose={true}\n          format=\"YYYY/MM/DD HH:mm:ss\"\n          datePickerProps={{ showTime: true, todayButton: '\u4eca\u5929' }}\n          onChange={this.onChange.bind(this)}\n        />\n      </div>\n    )\n  }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n## Props\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n| ---- | ---- | ---- | ---- |\n| value | \u521d\u59cb\u65f6\u95f4\u503c | Date | - |\n| placeholder | \u8f93\u5165\u6846\u63d0\u793a\u6587\u5b57 | String | - |\n| allowClear | \u662f\u5426\u663e\u793a\u6e05\u9664\u6309\u94ae | Boolean | true |\n| format | \u683c\u5f0f\u5316\u65f6\u95f4\uff0c\u89c4\u5219\u67e5\u770b [`<formatter>`](#/components/formatter) \u6587\u6863 | String | `YYYY/MM/DD` |\n| onChange | \u9009\u62e9\u4e00\u5929\u65f6\u8c03\u7528\u3002 | Function(selectedDate:Date) | - |\n| popoverProps | \u5c06\u53c2\u6570\u4f20\u9012\u7ed9 [`<Popover>`](#/components/popover) \u7ec4\u4ef6 | Object | - |\n| datePickerProps | \u5c06\u53c2\u6570\u4f20\u9012\u7ed9 [`<DatePicker>`](#/components/date-picker) \u7ec4\u4ef6 | Object | - |\n| disabled | \u7ec4\u4ef6 [`<Input>`](#/components/input) \u7684\u5c5e\u6027\uff0c\u7981\u7528\u65e5\u5386 | Boolean | - |\n| autoClose | \u662f\u5426\u81ea\u52a8\u5173\u95ed\u5f39\u5c42 | Boolean | false |\n\n\u7ec4\u4ef6 `DateInput` \u7ee7\u627f `<Input>` \u7ec4\u4ef6\uff0c\u66f4\u591a\u5c5e\u6027\u6587\u6863\u8bf7\u53c2\u8003 [`<Input>`](#/components/input)\u3002\n\n## DateInputRange\n\n\u5728 `v4.13.0` \u7248\u672c\u4e2d\u589e\u52a0 `DateInputRange` \u7ec4\u4ef6\u3002\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n| ---- | ---- | ---- | ---- |\n| value | \u521d\u59cb\u65f6\u95f4\u503c | Array<Date, string> | - |\n| placeholder | \u8f93\u5165\u6846\u63d0\u793a\u6587\u5b57 | String | - |\n| allowClear | \u662f\u5426\u663e\u793a\u6e05\u9664\u6309\u94ae | Boolean | true |\n| format | \u683c\u5f0f\u5316\u65f6\u95f4\uff0c\u89c4\u5219\u67e5\u770b [`<formatter>`](#/components/formatter) \u6587\u6863 | String | `YYYY/MM/DD` |\n| onChange | \u9009\u62e9\u4e00\u5929\u65f6\u8c03\u7528\u3002 | Function(selectedDate:Date, dateRange: Array<Date>) | - |\n| popoverProps | \u5c06\u53c2\u6570\u4f20\u9012\u7ed9 [`<Popover>`](#/components/popover) \u7ec4\u4ef6 | Object | - |\n| datePickerProps | \u5c06\u53c2\u6570\u4f20\u9012\u7ed9 [`<DatePicker>`](#/components/date-picker) \u7ec4\u4ef6 | Object | - |\n| disabled | \u7ec4\u4ef6 [`<Input>`](#/components/input) \u7684\u5c5e\u6027\uff0c\u7981\u7528\u65e5\u5386 | Boolean | - |\n| bodyStyle | \u9009\u62e9\u6846\u6837\u5f0f  | Object | { width: 300 } | - |\n\n\u7ec4\u4ef6 `DateInputRange` \u7ee7\u627f `<Input>` \u7ec4\u4ef6\uff0c\u66f4\u591a\u5c5e\u6027\u6587\u6863\u8bf7\u53c2\u8003 [`<Input>`](#/components/input)\u3002\n\n"}}]);
-//# sourceMappingURL=6869.b8062d81.chunk.js.map
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6869],{76869:function(n,e,t){t.r(e),e.default="DateInput \u65e5\u671f\u8f93\u5165\u6846\n===\n\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-date-input/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-date-input.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-date-input)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-date-input.svg?label=@uiw/react-date-input)](https://npmjs.com/@uiw/react-date-input)\n\n\u663e\u793a\u4e00\u4e2a\u6708\u7684\u65e5\u5386\uff0c\u5e76\u5141\u8bb8\u7528\u6237\u9009\u62e9\u5355\u4e2a\u65e5\u671f\u3002\n\n```jsx\nimport { DateInput, DateInputRange } from 'uiw';\n// or\nimport DateInput,{ DateInputRange } from '@uiw/react-date-input';\n// \u5728 `v4.13.0` \u7248\u672c\u4e2d\u589e\u52a0 DateInputRange \u7ec4\u4ef6\n```\n\n## \u57fa\u672c\u4f7f\u7528\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { DateInput, DateInputRange, Row, Col } from 'uiw';\n\nfunction Demo () {\n\n  const [dataRange,dataRangeSet] =React.useState(['2022-02-25 15:06:24','2022-02-27 14:47:32'])\n\n  function onChange(selectedDate,dataRange) {\n    console.log('selectedDate',selectedDate,dataRange)\n  }\n\n  return (\n    <div>\n      <Row style={{ marginBottom:10 }}>\n        <Col style={{ width: 200 }} fixed>\n          <DateInput\n            value={new Date()}\n            datePickerProps={{ todayButton: '\u4eca\u5929' }}\n            onChange={onChange}\n          />\n        </Col>\n        <Col style={{ width: 200, marginLeft: 10 }} fixed>\n          <DateInput\n            value={new Date()}\n            disabled\n            onChange={onChange}\n          />\n        </Col>\n        <Col style={{ width: 400, marginLeft: 10 }} fixed>\n          <DateInputRange\n            bodyStyle={{ width: 400 }}\n            format=\"YYYY/MM/DD HH:mm:ss\"\n            value={dataRange}\n            datePickerProps={{ todayButton: '\u4eca\u5929',showTime:true }}\n            onChange={onChange}\n          />\n        </Col>\n      </Row>\n    </div>\n  )\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u5728\u8868\u5355\u4e2d\u4f7f\u7528\n\n\u5728 [`<Form />`](#/components/form) \u8868\u5355\u4e2d\u5e94\u7528 [`<DateInput />`](#/components/date-input) \u7ec4\u4ef6\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { DateInput,DateInputRange, Notify, Button, Form, Row, Col } from 'uiw';\n\nfunction Demo(){\n  const form = React.useRef(null)\n\n  const resetDateRange = () => {\n    form.current.resetForm()\n  }\n\n  const setDateRange = () => {\n    form.current.setFields({dateRange:[new Date(),new Date()]})\n  }\n\n  return (\n    <Form\n      ref={form}\n      onSubmit={({ initial, current }) => {\n        if (current.date) {\n          Notify.success({\n            title: '\u63d0\u4ea4\u6210\u529f\uff01',\n            description: `\u8868\u5355\u63d0\u4ea4\u65f6\u95f4\u6210\u529f\uff0c\u65f6\u95f4\u4e3a\uff1a${current.date}`,\n          });\n        } else {\n          Notify.error({\n            title: '\u63d0\u4ea4\u5931\u8d25\uff01',\n            description: `\u8868\u5355\u63d0\u4ea4\u65f6\u95f4\u6210\u529f\uff0c\u65f6\u95f4\u4e3a\uff1a${current.date}\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01`,\n          });\n        }\n      }}\n      fields={{\n        date: {\n          initialValue: '2019/02/17',\n          labelClassName: 'fieldLabel',\n          labelFor: 'date-inline',\n          children: <DateInput datePickerProps={{ todayButton: '\u4eca\u5929' }} id=\"date-inline\" />\n        },\n        dateRange: {\n          initialValue: ['2019/02/17', '2019/02/20'],\n          labelClassName: 'fieldLabel',\n          labelFor: 'date-inline',\n          children: <DateInputRange datePickerProps={{ todayButton: '\u4eca\u5929' }} id=\"date-inline\" />\n        },\n      }}\n    >\n      {({ fields, state, canSubmit }) => {\n        return (\n          <div>\n            <Row>\n              <Col style={{ width: 200 }} fixed>{fields.date}</Col>\n            </Row>\n            <Row style={{ width: 200 }} >\n              <Col fixed>{fields.dateRange}</Col>\n            </Row>\n            <Row gutter={10}>\n              <Col>\n                <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n                <Button onClick={resetDateRange} >\u91cd\u7f6e</Button>\n                <Button onClick={setDateRange}>setValue</Button>\n              </Col>\n            </Row>\n          </div>\n        )\n      }}\n    </Form>\n  )\n}\n\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u65e5\u671f\u683c\u5f0f\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { DateInput } from 'uiw';\n\nclass Demo extends React.Component {\n  onChange(selectedDate) {\n    console.log('selectedDate:', selectedDate);\n  }\n  render() {\n    return (\n      <div style={{ width: 200 }}>\n        <DateInput\n          format=\"YYYY # MM # DD\"\n          datePickerProps={{ todayButton: '\u4eca\u5929' }}\n          onChange={this.onChange.bind(this)}\n        />\n      </div>\n    )\n  }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u65e5\u671f\u65f6\u95f4\u8bbe\u7f6e\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { DateInput } from 'uiw';\n\nclass Demo extends React.Component {\n  onChange(selectedDate) {\n    console.log('selectedDate:', selectedDate);\n  }\n  render() {\n    return (\n      <div style={{ width: 200 }}>\n        <DateInput\n          format=\"YYYY/MM/DD HH:mm:ss\"\n          datePickerProps={{ showTime: true, todayButton: '\u4eca\u5929' }}\n          onChange={this.onChange.bind(this)}\n        />\n      </div>\n    )\n  }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u81ea\u52a8\u9690\u85cf\u5f39\u5c42\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { DateInput } from 'uiw';\n\nclass Demo extends React.Component {\n  onChange(selectedDate) {\n    console.log('selectedDate:', selectedDate);\n  }\n  render() {\n    return (\n      <div style={{ maxWidth: 200 }}>\n        <DateInput\n          autoClose={true}\n          format=\"YYYY/MM/DD HH:mm:ss\"\n          datePickerProps={{ showTime: true, todayButton: '\u4eca\u5929' }}\n          onChange={this.onChange.bind(this)}\n        />\n      </div>\n    )\n  }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n## Props\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n| ---- | ---- | ---- | ---- |\n| value | \u521d\u59cb\u65f6\u95f4\u503c | Date | - |\n| placeholder | \u8f93\u5165\u6846\u63d0\u793a\u6587\u5b57 | String | - |\n| allowClear | \u662f\u5426\u663e\u793a\u6e05\u9664\u6309\u94ae | Boolean | true |\n| format | \u683c\u5f0f\u5316\u65f6\u95f4\uff0c\u89c4\u5219\u67e5\u770b [`<formatter>`](#/components/formatter) \u6587\u6863 | String | `YYYY/MM/DD` |\n| onChange | \u9009\u62e9\u4e00\u5929\u65f6\u8c03\u7528\u3002 | Function(selectedDate:Date) | - |\n| popoverProps | \u5c06\u53c2\u6570\u4f20\u9012\u7ed9 [`<Popover>`](#/components/popover) \u7ec4\u4ef6 | Object | - |\n| datePickerProps | \u5c06\u53c2\u6570\u4f20\u9012\u7ed9 [`<DatePicker>`](#/components/date-picker) \u7ec4\u4ef6 | Object | - |\n| disabled | \u7ec4\u4ef6 [`<Input>`](#/components/input) \u7684\u5c5e\u6027\uff0c\u7981\u7528\u65e5\u5386 | Boolean | - |\n| autoClose | \u662f\u5426\u81ea\u52a8\u5173\u95ed\u5f39\u5c42 | Boolean | false |\n\n\u7ec4\u4ef6 `DateInput` \u7ee7\u627f `<Input>` \u7ec4\u4ef6\uff0c\u66f4\u591a\u5c5e\u6027\u6587\u6863\u8bf7\u53c2\u8003 [`<Input>`](#/components/input)\u3002\n\n## DateInputRange\n\n\u5728 `v4.13.0` \u7248\u672c\u4e2d\u589e\u52a0 `DateInputRange` \u7ec4\u4ef6\u3002\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n| ---- | ---- | ---- | ---- |\n| value | \u521d\u59cb\u65f6\u95f4\u503c | Array<Date, string> | - |\n| placeholder | \u8f93\u5165\u6846\u63d0\u793a\u6587\u5b57 | String | - |\n| allowClear | \u662f\u5426\u663e\u793a\u6e05\u9664\u6309\u94ae | Boolean | true |\n| format | \u683c\u5f0f\u5316\u65f6\u95f4\uff0c\u89c4\u5219\u67e5\u770b [`<formatter>`](#/components/formatter) \u6587\u6863 | String | `YYYY/MM/DD` |\n| onChange | \u9009\u62e9\u4e00\u5929\u65f6\u8c03\u7528\u3002 | Function(selectedDate:Date, dateRange: Array\\<Date>) | - |\n| popoverProps | \u5c06\u53c2\u6570\u4f20\u9012\u7ed9 [`<Popover>`](#/components/popover) \u7ec4\u4ef6 | Object | - |\n| datePickerProps | \u5c06\u53c2\u6570\u4f20\u9012\u7ed9 [`<DatePicker>`](#/components/date-picker) \u7ec4\u4ef6 | Object | - |\n| disabled | \u7ec4\u4ef6 [`<Input>`](#/components/input) \u7684\u5c5e\u6027\uff0c\u7981\u7528\u65e5\u5386 | Boolean | - |\n| bodyStyle | \u9009\u62e9\u6846\u6837\u5f0f  | Object | { width: 300 } | - |\n\n\u7ec4\u4ef6 `DateInputRange` \u7ee7\u627f `<Input>` \u7ec4\u4ef6\uff0c\u66f4\u591a\u5c5e\u6027\u6587\u6863\u8bf7\u53c2\u8003 [`<Input>`](#/components/input)\u3002\n\n"}}]);
+//# sourceMappingURL=6869.37ce78aa.chunk.js.map

package/web/static/js/{6869.b8062d81.chunk.js.map → 6869.37ce78aa.chunk.js.map}

@@ -1 +1 @@
-{"version":3,"file":"static/js/6869.b8062d81.chunk.js","mappings":"gHAAA","sources":["../../packages/react-date-input/README.md"],"sourcesContent":["export default \"DateInput 日期输入框\\n===\\n\\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-date-input/file/README.md)\\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-date-input.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-date-input)\\n[![npm version](https://img.shields.io/npm/v/@uiw/react-date-input.svg?label=@uiw/react-date-input)](https://npmjs.com/@uiw/react-date-input)\\n\\n显示一个月的日历，并允许用户选择单个日期。\\n\\n```jsx\\nimport { DateInput, DateInputRange } from 'uiw';\\n// or\\nimport DateInput,{ DateInputRange } from '@uiw/react-date-input';\\n// 在 `v4.13.0` 版本中增加 DateInputRange 组件\\n```\\n\\n## 基本使用\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { DateInput, DateInputRange, Row, Col } from 'uiw';\\n\\nfunction Demo () {\\n\\n  const [dataRange,dataRangeSet] =React.useState(['2022-02-25 15:06:24','2022-02-27 14:47:32'])\\n\\n  function onChange(selectedDate,dataRange) {\\n    console.log('selectedDate',selectedDate,dataRange)\\n  }\\n\\n  return (\\n    <div>\\n      <Row style={{ marginBottom:10 }}>\\n        <Col style={{ width: 200 }} fixed>\\n          <DateInput\\n            value={new Date()}\\n            datePickerProps={{ todayButton: '今天' }}\\n            onChange={onChange}\\n          />\\n        </Col>\\n        <Col style={{ width: 200, marginLeft: 10 }} fixed>\\n          <DateInput\\n            value={new Date()}\\n            disabled\\n            onChange={onChange}\\n          />\\n        </Col>\\n        <Col style={{ width: 400, marginLeft: 10 }} fixed>\\n          <DateInputRange\\n            bodyStyle={{ width: 400 }}\\n            format=\\\"YYYY/MM/DD HH:mm:ss\\\"\\n            value={dataRange}\\n            datePickerProps={{ todayButton: '今天',showTime:true }}\\n            onChange={onChange}\\n          />\\n        </Col>\\n      </Row>\\n    </div>\\n  )\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 在表单中使用\\n\\n在 [`<Form />`](#/components/form) 表单中应用 [`<DateInput />`](#/components/date-input) 组件。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { DateInput,DateInputRange, Notify, Button, Form, Row, Col } from 'uiw';\\n\\nfunction Demo(){\\n  const form = React.useRef(null)\\n\\n  const resetDateRange = () => {\\n    form.current.resetForm()\\n  }\\n\\n  const setDateRange = () => {\\n    form.current.setFields({dateRange:[new Date(),new Date()]})\\n  }\\n\\n  return (\\n    <Form\\n      ref={form}\\n      onSubmit={({ initial, current }) => {\\n        if (current.date) {\\n          Notify.success({\\n            title: '提交成功！',\\n            description: `表单提交时间成功，时间为：${current.date}`,\\n          });\\n        } else {\\n          Notify.error({\\n            title: '提交失败！',\\n            description: `表单提交时间成功，时间为：${current.date}，将自动填充初始化值！`,\\n          });\\n        }\\n      }}\\n      fields={{\\n        date: {\\n          initialValue: '2019/02/17',\\n          labelClassName: 'fieldLabel',\\n          labelFor: 'date-inline',\\n          children: <DateInput datePickerProps={{ todayButton: '今天' }} id=\\\"date-inline\\\" />\\n        },\\n        dateRange: {\\n          initialValue: ['2019/02/17', '2019/02/20'],\\n          labelClassName: 'fieldLabel',\\n          labelFor: 'date-inline',\\n          children: <DateInputRange datePickerProps={{ todayButton: '今天' }} id=\\\"date-inline\\\" />\\n        },\\n      }}\\n    >\\n      {({ fields, state, canSubmit }) => {\\n        return (\\n          <div>\\n            <Row>\\n              <Col style={{ width: 200 }} fixed>{fields.date}</Col>\\n            </Row>\\n            <Row style={{ width: 200 }} >\\n              <Col fixed>{fields.dateRange}</Col>\\n            </Row>\\n            <Row gutter={10}>\\n              <Col>\\n                <Button disabled={!canSubmit()} type=\\\"primary\\\" htmlType=\\\"submit\\\">提交</Button>\\n                <Button onClick={resetDateRange} >重置</Button>\\n                <Button onClick={setDateRange}>setValue</Button>\\n              </Col>\\n            </Row>\\n          </div>\\n        )\\n      }}\\n    </Form>\\n  )\\n}\\n\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 日期格式\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { DateInput } from 'uiw';\\n\\nclass Demo extends React.Component {\\n  onChange(selectedDate) {\\n    console.log('selectedDate:', selectedDate);\\n  }\\n  render() {\\n    return (\\n      <div style={{ width: 200 }}>\\n        <DateInput\\n          format=\\\"YYYY # MM # DD\\\"\\n          datePickerProps={{ todayButton: '今天' }}\\n          onChange={this.onChange.bind(this)}\\n        />\\n      </div>\\n    )\\n  }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 日期时间设置\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { DateInput } from 'uiw';\\n\\nclass Demo extends React.Component {\\n  onChange(selectedDate) {\\n    console.log('selectedDate:', selectedDate);\\n  }\\n  render() {\\n    return (\\n      <div style={{ width: 200 }}>\\n        <DateInput\\n          format=\\\"YYYY/MM/DD HH:mm:ss\\\"\\n          datePickerProps={{ showTime: true, todayButton: '今天' }}\\n          onChange={this.onChange.bind(this)}\\n        />\\n      </div>\\n    )\\n  }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 自动隐藏弹层\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { DateInput } from 'uiw';\\n\\nclass Demo extends React.Component {\\n  onChange(selectedDate) {\\n    console.log('selectedDate:', selectedDate);\\n  }\\n  render() {\\n    return (\\n      <div style={{ maxWidth: 200 }}>\\n        <DateInput\\n          autoClose={true}\\n          format=\\\"YYYY/MM/DD HH:mm:ss\\\"\\n          datePickerProps={{ showTime: true, todayButton: '今天' }}\\n          onChange={this.onChange.bind(this)}\\n        />\\n      </div>\\n    )\\n  }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Props\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n| ---- | ---- | ---- | ---- |\\n| value | 初始时间值 | Date | - |\\n| placeholder | 输入框提示文字 | String | - |\\n| allowClear | 是否显示清除按钮 | Boolean | true |\\n| format | 格式化时间，规则查看 [`<formatter>`](#/components/formatter) 文档 | String | `YYYY/MM/DD` |\\n| onChange | 选择一天时调用。 | Function(selectedDate:Date) | - |\\n| popoverProps | 将参数传递给 [`<Popover>`](#/components/popover) 组件 | Object | - |\\n| datePickerProps | 将参数传递给 [`<DatePicker>`](#/components/date-picker) 组件 | Object | - |\\n| disabled | 组件 [`<Input>`](#/components/input) 的属性，禁用日历 | Boolean | - |\\n| autoClose | 是否自动关闭弹层 | Boolean | false |\\n\\n组件 `DateInput` 继承 `<Input>` 组件，更多属性文档请参考 [`<Input>`](#/components/input)。\\n\\n## DateInputRange\\n\\n在 `v4.13.0` 版本中增加 `DateInputRange` 组件。\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n| ---- | ---- | ---- | ---- |\\n| value | 初始时间值 | Array<Date, string> | - |\\n| placeholder | 输入框提示文字 | String | - |\\n| allowClear | 是否显示清除按钮 | Boolean | true |\\n| format | 格式化时间，规则查看 [`<formatter>`](#/components/formatter) 文档 | String | `YYYY/MM/DD` |\\n| onChange | 选择一天时调用。 | Function(selectedDate:Date, dateRange: Array<Date>) | - |\\n| popoverProps | 将参数传递给 [`<Popover>`](#/components/popover) 组件 | Object | - |\\n| datePickerProps | 将参数传递给 [`<DatePicker>`](#/components/date-picker) 组件 | Object | - |\\n| disabled | 组件 [`<Input>`](#/components/input) 的属性，禁用日历 | Boolean | - |\\n| bodyStyle | 选择框样式  | Object | { width: 300 } | - |\\n\\n组件 `DateInputRange` 继承 `<Input>` 组件，更多属性文档请参考 [`<Input>`](#/components/input)。\\n\\n\";"],"names":[],"sourceRoot":""}
+{"version":3,"file":"static/js/6869.37ce78aa.chunk.js","mappings":"gHAAA","sources":["../../packages/react-date-input/README.md"],"sourcesContent":["export default \"DateInput 日期输入框\\n===\\n\\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-date-input/file/README.md)\\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-date-input.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-date-input)\\n[![npm version](https://img.shields.io/npm/v/@uiw/react-date-input.svg?label=@uiw/react-date-input)](https://npmjs.com/@uiw/react-date-input)\\n\\n显示一个月的日历，并允许用户选择单个日期。\\n\\n```jsx\\nimport { DateInput, DateInputRange } from 'uiw';\\n// or\\nimport DateInput,{ DateInputRange } from '@uiw/react-date-input';\\n// 在 `v4.13.0` 版本中增加 DateInputRange 组件\\n```\\n\\n## 基本使用\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { DateInput, DateInputRange, Row, Col } from 'uiw';\\n\\nfunction Demo () {\\n\\n  const [dataRange,dataRangeSet] =React.useState(['2022-02-25 15:06:24','2022-02-27 14:47:32'])\\n\\n  function onChange(selectedDate,dataRange) {\\n    console.log('selectedDate',selectedDate,dataRange)\\n  }\\n\\n  return (\\n    <div>\\n      <Row style={{ marginBottom:10 }}>\\n        <Col style={{ width: 200 }} fixed>\\n          <DateInput\\n            value={new Date()}\\n            datePickerProps={{ todayButton: '今天' }}\\n            onChange={onChange}\\n          />\\n        </Col>\\n        <Col style={{ width: 200, marginLeft: 10 }} fixed>\\n          <DateInput\\n            value={new Date()}\\n            disabled\\n            onChange={onChange}\\n          />\\n        </Col>\\n        <Col style={{ width: 400, marginLeft: 10 }} fixed>\\n          <DateInputRange\\n            bodyStyle={{ width: 400 }}\\n            format=\\\"YYYY/MM/DD HH:mm:ss\\\"\\n            value={dataRange}\\n            datePickerProps={{ todayButton: '今天',showTime:true }}\\n            onChange={onChange}\\n          />\\n        </Col>\\n      </Row>\\n    </div>\\n  )\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 在表单中使用\\n\\n在 [`<Form />`](#/components/form) 表单中应用 [`<DateInput />`](#/components/date-input) 组件。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { DateInput,DateInputRange, Notify, Button, Form, Row, Col } from 'uiw';\\n\\nfunction Demo(){\\n  const form = React.useRef(null)\\n\\n  const resetDateRange = () => {\\n    form.current.resetForm()\\n  }\\n\\n  const setDateRange = () => {\\n    form.current.setFields({dateRange:[new Date(),new Date()]})\\n  }\\n\\n  return (\\n    <Form\\n      ref={form}\\n      onSubmit={({ initial, current }) => {\\n        if (current.date) {\\n          Notify.success({\\n            title: '提交成功！',\\n            description: `表单提交时间成功，时间为：${current.date}`,\\n          });\\n        } else {\\n          Notify.error({\\n            title: '提交失败！',\\n            description: `表单提交时间成功，时间为：${current.date}，将自动填充初始化值！`,\\n          });\\n        }\\n      }}\\n      fields={{\\n        date: {\\n          initialValue: '2019/02/17',\\n          labelClassName: 'fieldLabel',\\n          labelFor: 'date-inline',\\n          children: <DateInput datePickerProps={{ todayButton: '今天' }} id=\\\"date-inline\\\" />\\n        },\\n        dateRange: {\\n          initialValue: ['2019/02/17', '2019/02/20'],\\n          labelClassName: 'fieldLabel',\\n          labelFor: 'date-inline',\\n          children: <DateInputRange datePickerProps={{ todayButton: '今天' }} id=\\\"date-inline\\\" />\\n        },\\n      }}\\n    >\\n      {({ fields, state, canSubmit }) => {\\n        return (\\n          <div>\\n            <Row>\\n              <Col style={{ width: 200 }} fixed>{fields.date}</Col>\\n            </Row>\\n            <Row style={{ width: 200 }} >\\n              <Col fixed>{fields.dateRange}</Col>\\n            </Row>\\n            <Row gutter={10}>\\n              <Col>\\n                <Button disabled={!canSubmit()} type=\\\"primary\\\" htmlType=\\\"submit\\\">提交</Button>\\n                <Button onClick={resetDateRange} >重置</Button>\\n                <Button onClick={setDateRange}>setValue</Button>\\n              </Col>\\n            </Row>\\n          </div>\\n        )\\n      }}\\n    </Form>\\n  )\\n}\\n\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 日期格式\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { DateInput } from 'uiw';\\n\\nclass Demo extends React.Component {\\n  onChange(selectedDate) {\\n    console.log('selectedDate:', selectedDate);\\n  }\\n  render() {\\n    return (\\n      <div style={{ width: 200 }}>\\n        <DateInput\\n          format=\\\"YYYY # MM # DD\\\"\\n          datePickerProps={{ todayButton: '今天' }}\\n          onChange={this.onChange.bind(this)}\\n        />\\n      </div>\\n    )\\n  }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 日期时间设置\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { DateInput } from 'uiw';\\n\\nclass Demo extends React.Component {\\n  onChange(selectedDate) {\\n    console.log('selectedDate:', selectedDate);\\n  }\\n  render() {\\n    return (\\n      <div style={{ width: 200 }}>\\n        <DateInput\\n          format=\\\"YYYY/MM/DD HH:mm:ss\\\"\\n          datePickerProps={{ showTime: true, todayButton: '今天' }}\\n          onChange={this.onChange.bind(this)}\\n        />\\n      </div>\\n    )\\n  }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 自动隐藏弹层\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { DateInput } from 'uiw';\\n\\nclass Demo extends React.Component {\\n  onChange(selectedDate) {\\n    console.log('selectedDate:', selectedDate);\\n  }\\n  render() {\\n    return (\\n      <div style={{ maxWidth: 200 }}>\\n        <DateInput\\n          autoClose={true}\\n          format=\\\"YYYY/MM/DD HH:mm:ss\\\"\\n          datePickerProps={{ showTime: true, todayButton: '今天' }}\\n          onChange={this.onChange.bind(this)}\\n        />\\n      </div>\\n    )\\n  }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Props\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n| ---- | ---- | ---- | ---- |\\n| value | 初始时间值 | Date | - |\\n| placeholder | 输入框提示文字 | String | - |\\n| allowClear | 是否显示清除按钮 | Boolean | true |\\n| format | 格式化时间，规则查看 [`<formatter>`](#/components/formatter) 文档 | String | `YYYY/MM/DD` |\\n| onChange | 选择一天时调用。 | Function(selectedDate:Date) | - |\\n| popoverProps | 将参数传递给 [`<Popover>`](#/components/popover) 组件 | Object | - |\\n| datePickerProps | 将参数传递给 [`<DatePicker>`](#/components/date-picker) 组件 | Object | - |\\n| disabled | 组件 [`<Input>`](#/components/input) 的属性，禁用日历 | Boolean | - |\\n| autoClose | 是否自动关闭弹层 | Boolean | false |\\n\\n组件 `DateInput` 继承 `<Input>` 组件，更多属性文档请参考 [`<Input>`](#/components/input)。\\n\\n## DateInputRange\\n\\n在 `v4.13.0` 版本中增加 `DateInputRange` 组件。\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n| ---- | ---- | ---- | ---- |\\n| value | 初始时间值 | Array<Date, string> | - |\\n| placeholder | 输入框提示文字 | String | - |\\n| allowClear | 是否显示清除按钮 | Boolean | true |\\n| format | 格式化时间，规则查看 [`<formatter>`](#/components/formatter) 文档 | String | `YYYY/MM/DD` |\\n| onChange | 选择一天时调用。 | Function(selectedDate:Date, dateRange: Array\\\\<Date>) | - |\\n| popoverProps | 将参数传递给 [`<Popover>`](#/components/popover) 组件 | Object | - |\\n| datePickerProps | 将参数传递给 [`<DatePicker>`](#/components/date-picker) 组件 | Object | - |\\n| disabled | 组件 [`<Input>`](#/components/input) 的属性，禁用日历 | Boolean | - |\\n| bodyStyle | 选择框样式  | Object | { width: 300 } | - |\\n\\n组件 `DateInputRange` 继承 `<Input>` 组件，更多属性文档请参考 [`<Input>`](#/components/input)。\\n\\n\";"],"names":[],"sourceRoot":""}

package/web/static/js/{7313.0ebd387c.chunk.js → 7313.1deb78f8.chunk.js}

@@ -1,2 +1,2 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7313],{67313:function(e,n,l){l.r(n),n.default="SearchSelect \u641c\u7d22\u9009\u62e9\u5668\n===\n\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-search-select/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-search-select.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-search-select)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-search-select.svg?label=@uiw/react-search-select)](https://npmjs.com/@uiw/react-search-select)\n\n\u641c\u7d22\u9009\u62e9\u5668\n\n```jsx\nimport { SearchSelect, Row ,Col } from 'uiw';\n// or\nimport SearchSelect from '@uiw/react-search-select';\n```\n\n## \u57fa\u7840\u793a\u4f8b\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { SearchSelect,Row,Col } from 'uiw';\n\nconst Demo = () => {\n  const option=[\n    { label: 'a1', value: 1 },\n    { label: 'a2', value: 2 },\n    { label: 'a3', value: 3 },\n    { label: 'a4', value: 4 },\n    { label: 'a5', value: 5 },\n    { label: 'a6', value: 6 },\n    { label: 'a7', value: 7 },\n    { label: 'a8', value: 8 },\n  ]\n\n  return(\n    <Row gutter={20}>\n     <label>\u5355\u9009</label>\n     <Row>\n       <SearchSelect\n         mode=\"single\"\n         style={{ width: 200 }}\n         placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n         option={option}\n       />\n     </Row>\n     <label>\u591a\u9009</label>\n     <Row>\n       <SearchSelect\n         mode=\"multiple\"\n         style={{ width: 200 }}\n         placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n         option={option}\n       />\n     </Row>\n     <label>\u7981\u7528</label>\n     <Row>\n       <SearchSelect\n         mode=\"single\"\n         style={{ width: 200 }}\n         placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n         option={option}\n         disabled={true}\n       />\n     </Row>\n    </Row>\n  );\n};\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u5c3a\u5bf8\n\n\u901a\u8fc7 size \u5c5e\u6027\u8bbe\u7f6e\u9009\u62e9\u5668\u7684\u5c3a\u5bf8\uff0c\u63d0\u4f9b\u4e09\u4e2a\u5c3a\u5bf8\u53c2\u6570\u8bbe\u7f6e\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { SearchSelect,Row,Col } from 'uiw';\n\nconst Demo = () => {\n  const option=[\n    { label: '\u5c0f\u5c3a\u5bf8', value: 1 },\n    { label: '\u9ed8\u8ba4\u5c3a\u5bf8', value: 2 },\n    { label: '\u5927\u5c3a\u5bf8', value: 3 },\n  ]\n\n  return(\n    <Row style={{ flexDirection: 'column' }}>\n      <Col>\n        <Row>\n          <SearchSelect\n            mode=\"multiple\"\n            style={{ width: 150 }}\n            option={option}\n            value={[1]}\n            showSearch={true}\n            placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n            size={'small'}\n          />\n        </Row>\n      </Col>\n      <Col style={{ margin:'10px 0px' }}>\n        <Row>\n          <SearchSelect\n            mode=\"multiple\"\n            style={{ width: 175 }}\n            option={option}\n            value={[2]}\n            showSearch={true}\n            placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n          />\n        </Row>\n      </Col>\n      <Col  >\n        <Row>\n          <SearchSelect\n            mode=\"multiple\"\n            style={{ width: 200 }}\n            option={option}\n            value={[3]}\n            showSearch={true}\n            placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n            size={'large'}\n          />\n        </Row>\n      </Col>\n    </Row>\n  );\n};\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u4e0d\u540c\u7684value\u7c7b\u578b\n\n\u901a`labelInValue`\u53c2\u6570\u63a7\u5236value\u7c7b\u578b\u548conChange\u65f6\u95f4\u8fd4\u56de\u53c2\u6570\u7684\u7c7b\u578b\uff0c\u8bbe\u7f6e\u4e3a`true`\u65f6\uff0c`value`\u548c`onChange`\u56de\u8c03\u8fd4\u56de\u7684\u503c\u7c7b\u578b\u4ece[..., value]\u53d8\u6210[..., { label, value}]\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { SearchSelect,Row,Col } from 'uiw';\n\nconst Demo = () => {\n  const option=[\n    { label: 'a1', value: 1 },\n    { label: 'a2', value: 2 },\n    { label: 'a3', value: 3 },\n    { label: 'a4', value: 4 },\n    { label: 'a5', value: 5 },\n    { label: 'a6', value: 6 },\n    { label: 'a7', value: 7 },\n    { label: 'a8', value: 8 },\n  ]\n\n\n  const [loading, setLoading] = React.useState(false);\n  const [value, setValue] = React.useState([1 ,7]);\n  const [labelValue, setLabelValue] = React.useState([{ label: 'a1', value: 1 }, { label: 'a7', value: 7 }]);\n\n  return(\n    <Row gutter={20}>\n     <Row>\n       <SearchSelect\n         mode=\"multiple\"\n         style={{ width: 200 }}\n         value={value}\n         option={option}\n         onChange={(value)=> {\n           console.log('value', value)\n           setValue(value)\n         }}\n         placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n       />\n     </Row>\n     <Row>\n       <SearchSelect\n         mode=\"multiple\"\n         labelInValue={true}\n         style={{ width: 200 }}\n         option={option}\n         value={labelValue}\n         onChange={(value)=> {\n           console.log('value', value)\n           setLabelValue(value)\n         }}\n         plac\n         placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n       />\n     </Row>\n    </Row>\n  );\n};\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u9650\u5236\u9009\u9879\u4e2a\u6570\n\n\u9650\u5236\u6700\u591a\u53ea\u80fd\u9009\u62e9\u4e24\u4e2a\u9009\u9879\uff0c\u8fbe\u5230\u6700\u5927\u540e\u5982\u679c\u7ee7\u7eed\u9009\u62e9\uff0c\u4f1a\u66ff\u6362\u6700\u540e\u4e00\u4e2a\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { SearchSelect,Row,Col } from 'uiw';\n\nconst Demo = () => {\n  const selectOption=[\n    { label: 'a1', value: 1 },\n    { label: 'a2', value: 2 },\n    { label: 'a3', value: 3 },\n    { label: 'a4', value: 4 },\n    { label: 'a5', value: 5 },\n    { label: 'a6', value: 6 },\n    { label: 'a7', value: 7 },\n    { label: 'a8', value: 8 },\n  ]\n\n  const valueAmount = 2\n  const [option, setOption] = React.useState(selectOption);\n  const [loading, setLoading] = React.useState(false);\n  const [values, setValues] = React.useState([ 1, 2, 7]);\n\n  function handleSearch(e) {\n    setLoading(true)\n    setTimeout(() =>  {\n     const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))\n      setOption([...filterOpion]);\n      setLoading(false);\n    }, 500);\n  }\n\n  return(\n    <Row style={{ marginLeft: 10 }}>\n        <SearchSelect\n          mode=\"multiple\"\n          style={{ width: 200 }}\n          valueAmount={valueAmount}\n          allowClear\n          value={values}\n          placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n          onSearch={handleSearch}\n          // onSelect={(value)=>console.log('onSelect',value)}\n          loading={loading}\n          option={option}\n          onChange={(value) => {\n            setValues(value)\n          }}\n        />\n    </Row>\n  );\n};\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u663e\u793a\u6700\u5927\u6570\u91cf\n\n\u4f7f\u7528`maxTagCount`\u9650\u5236\u663e\u793atag\u7684\u6570\u91cf\uff0c\u8d85\u8fc7\u540e\u4f7f\u7528\u7701\u7565tag\u663e\u793a\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { SearchSelect,Row,Col } from 'uiw';\n\nconst Demo = () => {\n  const selectOption=[\n    { label: 'a1', value: 1 },\n    { label: 'a2', value: 2 },\n    { label: 'a3', value: 3 },\n    { label: 'a4', value: 4 },\n    { label: 'a5', value: 5 },\n    { label: 'a6', value: 6 },\n    { label: 'a7', value: 7 },\n    { label: 'a8', value: 8 },\n  ]\n\n  const maxTagCount = 4\n  const [option, setOption] = React.useState(selectOption);\n  const [loading, setLoading] = React.useState(false);\n  const [values, setValues] = React.useState([\n      { label: 'a1', value: 1 },\n      { label: 'a2', value: 2 },\n      { label: 'a5', value: 5 },\n      { label: 'a7', value: 7 },\n      { label: 'a8', value: 8 },\n    ]);\n\n  function handleSearch(e) {\n    setLoading(true)\n    setTimeout(() =>  {\n     const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))\n      setOption([...filterOpion]);\n      setLoading(false);\n    }, 500);\n  }\n\n  return(\n    <Row style={{ marginLeft: 10 }}>\n        <SearchSelect\n          mode=\"multiple\"\n          style={{ width: 200 }}\n          labelInValue={true}\n          maxTagCount={maxTagCount}\n          allowClear\n          value={values}\n          placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n          onSearch={handleSearch}\n          loading={loading}\n          option={option}\n          onChange={(value) => {\n            setValues(value)\n          }}\n        />\n    </Row>\n  );\n};\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u542f\u7528\u641c\u7d22\n\n\u5c06`showSearch`\u8bbe\u7f6e\u4e3a`true`\u542f\u7528\u641c\u7d22\u529f\u80fd\uff0c\u7ec4\u4ef6\u6ca1\u6709\u5185\u7f6e\u641c\u7d22\u529f\u80fd\uff0c\u4f46`option`\u662f\u76d1\u542c\u53d8\u5316\u7684\uff0c\u53ef\u4ee5\u901a\u8fc7\u914d\u5408`onSearch`\u5b9e\u73b0\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { SearchSelect,Row,Col } from 'uiw';\n\nconst Demo = () => {\n  const selectOption=[\n    { label: 'a1', value: 1 },\n    { label: 'a2', value: 2 },\n    { label: 'a3', value: 3 },\n    { label: 'a4', value: 4 },\n    { label: 'a5', value: 5 },\n    { label: 'a6', value: 6 },\n    { label: 'a7', value: 7 },\n    { label: 'a8', value: 8 },\n  ]\n\n  const [values, setValues] = React.useState([1,7]);\n  const [option, setOption] = React.useState(selectOption);\n  const [loading, setLoading] = React.useState(false);\n\n  function handleSearch(e) {\n    setLoading(true)\n    setTimeout(() =>  {\n     const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))\n      setOption([...filterOpion]);\n      setLoading(false);\n    }, 500);\n  }\n\n  return(\n    <Row style={{ marginLeft: 10 }}>\n      <SearchSelect\n        mode=\"multiple\"\n        showSearch={true}\n        value={values}\n        option={option}\n        loading={loading}\n        onSearch={handleSearch}\n        placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n        style={{ width: 200 }}\n        onChange={(value) => {\n          setValues(value)\n        }}\n      />\n    </Row>\n  );\n};\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u5728\u8868\u5355\u4e2d\u4f7f\u7528\n\n\u5728 [`<Form />`](#/components/form) \u8868\u5355\u4e2d\u5e94\u7528 `<SearchSelect />` \u7ec4\u4ef6\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true&noScroll=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Form, Row, Col, SearchSelect, Button, Notify } from 'uiw';\n\nconst Demo = () => {\n  const selectOption =[\n        { label: 'a1', value: 1 },\n        { label: 'a2', value: 2 },\n        { label: 'a3', value: 3 },\n        { label: 'a4', value: 4 },\n        { label: 'a5', value: 5 },\n        { label: 'a6', value: 6 },\n        { label: 'a7', value: 7 },\n        { label: 'a8', value: 8 },\n      ];\n  const [option, setOption] = React.useState(selectOption);\n  const [loading, setLoading] = React.useState(false);\n\n  function handleSearch(e) {\n    setLoading(true)\n    setTimeout(() =>  {\n     const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))\n      setOption([...filterOpion]);\n      setLoading(false);\n    }, 500);\n  }\n\n  return (\n    <div>\n      <Form\n        onSubmitError={(error) => {\n          if (error.filed) {\n            return { ...error.filed };\n          }\n          return null;\n        }}\n        onSubmit={({initial, current}) => {\n          const errorObj = {};\n          if (!current.selectField) {\n            errorObj.selectField = '\u9ed8\u8ba4\u9700\u8981\u9009\u62e9\u5185\u5bb9\uff0c\u9009\u62e9\u5165\u5185\u5bb9';\n          }\n          if(Object.keys(errorObj).length > 0) {\n            const err = new Error();\n            err.filed = errorObj;\n            Notify.error({ title: '\u63d0\u4ea4\u5931\u8d25\uff01', description: '\u8bf7\u786e\u8ba4\u63d0\u4ea4\u8868\u5355\u662f\u5426\u6b63\u786e\uff01' });\n            throw err;\n          }\n          Notify.success({\n            title: '\u63d0\u4ea4\u6210\u529f\uff01',\n            description: `\u8868\u5355\u63d0\u4ea4\u6210\u529f\uff0c\u9009\u62e9\u503c\u4e3a\uff1a${current.selectField}\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01`,\n          });\n        }}\n        fields={{\n          selectField: {\n            initialValue:[{label: 'a7', value: 7},{label: 'a8', value: 8}],\n            children: (\n              <SearchSelect\n                allowClear\n                labelInValue={true}\n                showSearch={true}\n                mode=\"multiple\"\n                disabled={false}\n                placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n                onSearch={handleSearch}\n                onChange={(v)=>{\n                  console.log('onChange',v)\n                }}\n                option={option}\n                loading={loading}\n              />\n            )\n          },\n          selectSingle: {\n            initialValue:[{label: 'a7', value: 7}],\n            children: (\n              <SearchSelect\n                mode=\"single\"\n                labelInValue={true}\n                showSearch={true}\n                allowClear\n                disabled={false}\n                placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n                onSearch={handleSearch}\n                onChange={(v)=>{\n                  console.log('onChange',v)\n                }}\n                option={option}\n                loading={loading}\n              />\n            )\n          },\n        }}\n      >\n        {({ fields, state, canSubmit }) => {\n          return (\n            <div style={{ marginLeft:10}}>\n              <Row >\n                <Col fixed style={{width:200}}>{fields.selectField}</Col>\n              </Row>\n              <Row>\n                <Col fixed style={{width:200}}>{fields.selectSingle}</Col>\n              </Row>\n              <Row>\n                <Col fixed>\n                  <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n                </Col>\n              </Row>\n              <Row>\n                <Col>\n                  <pre style={{ padding: 10, marginTop: 10 }}>\n                    {JSON.stringify(state.current, null, 2)}\n                  </pre>\n                </Col>\n              </Row>\n            </div>\n          )\n        }}\n      </Form>\n    </div>\n  );\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n## Props\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c | \u7248\u672c |\n| ---- | ---- | ---- | ---- | ---- |\n| allowClear | \u652f\u6301\u6e05\u9664 | Boolean | `false` | - |\n| disabled | \u7981\u7528\u9009\u62e9\u5668 | Boolean | `false` | - |\n| mode | \u9009\u62e9\u6a21\u5f0f: `multiple`  `single` | String | `single` | - |\n| defaultValue | \u6307\u5b9a\u9ed8\u8ba4\u9009\u4e2d\u7684\u6761\u76ee | String/Number | - | - |\n| value | \u6307\u5b9a\u5f53\u524d\u9009\u4e2d\u7684\u6761\u76ee\uff0c\u591a\u9009\u65f6\u4e3a\u4e00\u4e2a\u6570\u7ec4 | String \\| Number \\| String[] \\| Number[] \\| LabeledValue \\| LabeledValue[] | - | - |\n| placeholder | \u9009\u62e9\u6846\u9ed8\u8ba4\u6587\u5b57 | String | - | - |\n| maxTagCount | \u591a\u9009\u6a21\u5f0f\u4e0b\u5c55\u793atag\u7684\u4e2a\u6570,\u9ed8\u8ba4\u6240\u6709 | number | - | - |\n| labelInValue | \u5f00\u542f\u4f1a\u628a Select \u7684 value \u7c7b\u578b\u4ece `string/number` \u53d8\u4e3a `{ value: string/number, label: string }` | Boolean | `false` | - |\n| showSearch | \u662f\u5426\u53ef\u641c\u7d22 | Boolean | - | - |\n| size | \u9009\u62e9\u6846\u5c3a\u5bf8 | Enum{large, default, small } | `default` | - |\n| tagProps | \u5c06\u53c2\u6570\u4f20\u9012\u7ed9 [`<Tag>`](https://uiwjs.github.io/#/components/tag) \u7ec4\u4ef6 | `TagProps` | `{}` | `4.13.0` |\n| onChange | \u9009\u4e2d option\uff0c\u6216 input \u7684 value\uff0c\u8c03\u7528\u6b64\u51fd\u6570 | function(value:String \\| Number \\| String[] \\| Number[] \\| LabeledValue \\| LabeledValue[]) | - | - |\n| onSearch | \u6587\u672c\u6846\u503c\u53d8\u5316\u65f6\u56de\u8c03 | function(value: String) | - | - |\n| onSelect | \u88ab\u9009\u4e2d\u65f6\u8c03\u7528\uff0c\u53c2\u6570\u4e3a\u9009\u4e2d\u9879\u7684 value | function(value: String/Number ) | - | - |\n| loading | \u52a0\u8f7d\u4e2d\u72b6\u6001 | Boolean | `false` | - |\n| valueAmount | \u591a\u9009\u6a21\u5f0f\u4e0b,\u9650\u5236\u6700\u591a\u9009\u62e9\u591a\u5c11\u4e2a(value\u7684\u957f\u5ea6) | number | - | - |\n"}}]);
-//# sourceMappingURL=7313.0ebd387c.chunk.js.map
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7313],{67313:function(e,n,l){l.r(n),n.default="SearchSelect \u641c\u7d22\u9009\u62e9\u5668\n===\n\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-search-select/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-search-select.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-search-select)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-search-select.svg?label=@uiw/react-search-select)](https://npmjs.com/@uiw/react-search-select)\n\n\u641c\u7d22\u9009\u62e9\u5668\n\n```jsx\nimport { SearchSelect, Row ,Col } from 'uiw';\n// or\nimport SearchSelect from '@uiw/react-search-select';\n```\n\n## \u57fa\u7840\u793a\u4f8b\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { SearchSelect,Row,Col } from 'uiw';\n\nconst Demo = () => {\n  const option=[\n    { label: 'a1', value: 1 },\n    { label: 'a2', value: 2 },\n    { label: 'a3', value: 3 },\n    { label: 'a4', value: 4 },\n    { label: 'a5', value: 5 },\n    { label: 'a6', value: 6 },\n    { label: 'a7', value: 7 },\n    { label: 'a8', value: 8 },\n  ]\n\n  return(\n    <Row gutter={20}>\n     <label>\u5355\u9009</label>\n     <Row>\n       <SearchSelect\n         mode=\"single\"\n         style={{ width: 200 }}\n         placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n         option={option}\n       />\n     </Row>\n     <label>\u591a\u9009</label>\n     <Row>\n       <SearchSelect\n         mode=\"multiple\"\n         style={{ width: 200 }}\n         placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n         option={option}\n       />\n     </Row>\n     <label>\u7981\u7528</label>\n     <Row>\n       <SearchSelect\n         mode=\"single\"\n         style={{ width: 200 }}\n         placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n         option={option}\n         disabled={true}\n       />\n     </Row>\n    </Row>\n  );\n};\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u5c3a\u5bf8\n\n\u901a\u8fc7 size \u5c5e\u6027\u8bbe\u7f6e\u9009\u62e9\u5668\u7684\u5c3a\u5bf8\uff0c\u63d0\u4f9b\u4e09\u4e2a\u5c3a\u5bf8\u53c2\u6570\u8bbe\u7f6e\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { SearchSelect,Row,Col } from 'uiw';\n\nconst Demo = () => {\n  const option=[\n    { label: '\u5c0f\u5c3a\u5bf8', value: 1 },\n    { label: '\u9ed8\u8ba4\u5c3a\u5bf8', value: 2 },\n    { label: '\u5927\u5c3a\u5bf8', value: 3 },\n  ]\n\n  return(\n    <Row style={{ flexDirection: 'column' }}>\n      <Col>\n        <Row>\n          <SearchSelect\n            mode=\"multiple\"\n            style={{ width: 150 }}\n            option={option}\n            value={[1]}\n            showSearch={true}\n            placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n            size={'small'}\n          />\n        </Row>\n      </Col>\n      <Col style={{ margin:'10px 0px' }}>\n        <Row>\n          <SearchSelect\n            mode=\"multiple\"\n            style={{ width: 175 }}\n            option={option}\n            value={[2]}\n            showSearch={true}\n            placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n          />\n        </Row>\n      </Col>\n      <Col  >\n        <Row>\n          <SearchSelect\n            mode=\"multiple\"\n            style={{ width: 200 }}\n            option={option}\n            value={[3]}\n            showSearch={true}\n            placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n            size={'large'}\n          />\n        </Row>\n      </Col>\n    </Row>\n  );\n};\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u4e0d\u540c\u7684value\u7c7b\u578b\n\n\u901a`labelInValue`\u53c2\u6570\u63a7\u5236value\u7c7b\u578b\u548conChange\u65f6\u95f4\u8fd4\u56de\u53c2\u6570\u7684\u7c7b\u578b\uff0c\u8bbe\u7f6e\u4e3a`true`\u65f6\uff0c`value`\u548c`onChange`\u56de\u8c03\u8fd4\u56de\u7684\u503c\u7c7b\u578b\u4ece[..., value]\u53d8\u6210[..., { label, value}]\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { SearchSelect,Row,Col } from 'uiw';\n\nconst Demo = () => {\n  const option=[\n    { label: 'a1', value: 1 },\n    { label: 'a2', value: 2 },\n    { label: 'a3', value: 3 },\n    { label: 'a4', value: 4 },\n    { label: 'a5', value: 5 },\n    { label: 'a6', value: 6 },\n    { label: 'a7', value: 7 },\n    { label: 'a8', value: 8 },\n  ]\n\n\n  const [loading, setLoading] = React.useState(false);\n  const [value, setValue] = React.useState([1 ,7]);\n  const [labelValue, setLabelValue] = React.useState([{ label: 'a1', value: 1 }, { label: 'a7', value: 7 }]);\n\n  return(\n    <Row gutter={20}>\n     <Row>\n       <SearchSelect\n         mode=\"multiple\"\n         style={{ width: 200 }}\n         value={value}\n         option={option}\n         onChange={(value)=> {\n           console.log('value', value)\n           setValue(value)\n         }}\n         placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n       />\n     </Row>\n     <Row>\n       <SearchSelect\n         mode=\"multiple\"\n         labelInValue={true}\n         style={{ width: 200 }}\n         option={option}\n         value={labelValue}\n         onChange={(value)=> {\n           console.log('value', value)\n           setLabelValue(value)\n         }}\n         plac\n         placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n       />\n     </Row>\n    </Row>\n  );\n};\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u9650\u5236\u9009\u9879\u4e2a\u6570\n\n\u9650\u5236\u6700\u591a\u53ea\u80fd\u9009\u62e9\u4e24\u4e2a\u9009\u9879\uff0c\u8fbe\u5230\u6700\u5927\u540e\u5982\u679c\u7ee7\u7eed\u9009\u62e9\uff0c\u4f1a\u66ff\u6362\u6700\u540e\u4e00\u4e2a\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { SearchSelect,Row,Col } from 'uiw';\n\nconst Demo = () => {\n  const selectOption=[\n    { label: 'a1', value: 1 },\n    { label: 'a2', value: 2 },\n    { label: 'a3', value: 3 },\n    { label: 'a4', value: 4 },\n    { label: 'a5', value: 5 },\n    { label: 'a6', value: 6 },\n    { label: 'a7', value: 7 },\n    { label: 'a8', value: 8 },\n  ]\n\n  const valueAmount = 2\n  const [option, setOption] = React.useState(selectOption);\n  const [loading, setLoading] = React.useState(false);\n  const [values, setValues] = React.useState([ 1, 2, 7]);\n\n  function handleSearch(e) {\n    setLoading(true)\n    setTimeout(() =>  {\n     const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))\n      setOption([...filterOpion]);\n      setLoading(false);\n    }, 500);\n  }\n\n  return(\n    <Row style={{ marginLeft: 10 }}>\n        <SearchSelect\n          mode=\"multiple\"\n          style={{ width: 200 }}\n          valueAmount={valueAmount}\n          allowClear\n          value={values}\n          placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n          onSearch={handleSearch}\n          // onSelect={(value)=>console.log('onSelect',value)}\n          loading={loading}\n          option={option}\n          onChange={(value) => {\n            setValues(value)\n          }}\n        />\n    </Row>\n  );\n};\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u663e\u793a\u6700\u5927\u6570\u91cf\n\n\u4f7f\u7528`maxTagCount`\u9650\u5236\u663e\u793atag\u7684\u6570\u91cf\uff0c\u8d85\u8fc7\u540e\u4f7f\u7528\u7701\u7565tag\u663e\u793a\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { SearchSelect,Row,Col } from 'uiw';\n\nconst Demo = () => {\n  const selectOption=[\n    { label: 'a1', value: 1 },\n    { label: 'a2', value: 2 },\n    { label: 'a3', value: 3 },\n    { label: 'a4', value: 4 },\n    { label: 'a5', value: 5 },\n    { label: 'a6', value: 6 },\n    { label: 'a7', value: 7 },\n    { label: 'a8', value: 8 },\n  ]\n\n  const maxTagCount = 4\n  const [option, setOption] = React.useState(selectOption);\n  const [loading, setLoading] = React.useState(false);\n  const [values, setValues] = React.useState([\n      { label: 'a1', value: 1 },\n      { label: 'a2', value: 2 },\n      { label: 'a5', value: 5 },\n      { label: 'a7', value: 7 },\n      { label: 'a8', value: 8 },\n    ]);\n\n  function handleSearch(e) {\n    setLoading(true)\n    setTimeout(() =>  {\n     const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))\n      setOption([...filterOpion]);\n      setLoading(false);\n    }, 500);\n  }\n\n  return(\n    <Row style={{ marginLeft: 10 }}>\n        <SearchSelect\n          mode=\"multiple\"\n          style={{ width: 200 }}\n          labelInValue={true}\n          maxTagCount={maxTagCount}\n          allowClear\n          value={values}\n          placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n          onSearch={handleSearch}\n          loading={loading}\n          option={option}\n          onChange={(value) => {\n            setValues(value)\n          }}\n        />\n    </Row>\n  );\n};\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u542f\u7528\u641c\u7d22\n\n\u5c06`showSearch`\u8bbe\u7f6e\u4e3a`true`\u542f\u7528\u641c\u7d22\u529f\u80fd\uff0c\u7ec4\u4ef6\u6ca1\u6709\u5185\u7f6e\u641c\u7d22\u529f\u80fd\uff0c\u4f46`option`\u662f\u76d1\u542c\u53d8\u5316\u7684\uff0c\u53ef\u4ee5\u901a\u8fc7\u914d\u5408`onSearch`\u5b9e\u73b0\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { SearchSelect,Row,Col } from 'uiw';\n\nconst Demo = () => {\n  const selectOption=[\n    { label: 'a1', value: 1 },\n    { label: 'a2', value: 2 },\n    { label: 'a3', value: 3 },\n    { label: 'a4', value: 4 },\n    { label: 'a5', value: 5 },\n    { label: 'a6', value: 6 },\n    { label: 'a7', value: 7 },\n    { label: 'a8', value: 8 },\n  ]\n\n  const [values, setValues] = React.useState([1,7]);\n  const [option, setOption] = React.useState(selectOption);\n  const [loading, setLoading] = React.useState(false);\n\n  function handleSearch(e) {\n    setLoading(true)\n    setTimeout(() =>  {\n     const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))\n      setOption([...filterOpion]);\n      setLoading(false);\n    }, 500);\n  }\n\n  return(\n    <Row style={{ marginLeft: 10 }}>\n      <SearchSelect\n        mode=\"multiple\"\n        showSearch={true}\n        value={values}\n        option={option}\n        loading={loading}\n        onSearch={handleSearch}\n        placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n        style={{ width: 200 }}\n        onChange={(value) => {\n          setValues(value)\n        }}\n      />\n    </Row>\n  );\n};\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u5728\u8868\u5355\u4e2d\u4f7f\u7528\n\n\u5728 [`<Form />`](#/components/form) \u8868\u5355\u4e2d\u5e94\u7528 `<SearchSelect />` \u7ec4\u4ef6\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true&noScroll=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Form, Row, Col, SearchSelect, Button, Notify } from 'uiw';\n\nconst Demo = () => {\n  const selectOption =[\n        { label: 'a1', value: 1 },\n        { label: 'a2', value: 2 },\n        { label: 'a3', value: 3 },\n        { label: 'a4', value: 4 },\n        { label: 'a5', value: 5 },\n        { label: 'a6', value: 6 },\n        { label: 'a7', value: 7 },\n        { label: 'a8', value: 8 },\n      ];\n  const [option, setOption] = React.useState(selectOption);\n  const [loading, setLoading] = React.useState(false);\n\n  function handleSearch(e) {\n    setLoading(true)\n    setTimeout(() =>  {\n     const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))\n      setOption([...filterOpion]);\n      setLoading(false);\n    }, 500);\n  }\n\n  return (\n    <div>\n      <Form\n        onSubmitError={(error) => {\n          if (error.filed) {\n            return { ...error.filed };\n          }\n          return null;\n        }}\n        onSubmit={({initial, current}) => {\n          const errorObj = {};\n          if (!current.selectField) {\n            errorObj.selectField = '\u9ed8\u8ba4\u9700\u8981\u9009\u62e9\u5185\u5bb9\uff0c\u9009\u62e9\u5165\u5185\u5bb9';\n          }\n          if(Object.keys(errorObj).length > 0) {\n            const err = new Error();\n            err.filed = errorObj;\n            Notify.error({ title: '\u63d0\u4ea4\u5931\u8d25\uff01', description: '\u8bf7\u786e\u8ba4\u63d0\u4ea4\u8868\u5355\u662f\u5426\u6b63\u786e\uff01' });\n            throw err;\n          }\n          Notify.success({\n            title: '\u63d0\u4ea4\u6210\u529f\uff01',\n            description: `\u8868\u5355\u63d0\u4ea4\u6210\u529f\uff0c\u9009\u62e9\u503c\u4e3a\uff1a${current.selectField}\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01`,\n          });\n        }}\n        fields={{\n          selectField: {\n            initialValue:[{label: 'a7', value: 7},{label: 'a8', value: 8}],\n            children: (\n              <SearchSelect\n                allowClear\n                labelInValue={true}\n                showSearch={true}\n                mode=\"multiple\"\n                disabled={false}\n                placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n                onSearch={handleSearch}\n                onChange={(v)=>{\n                  console.log('onChange',v)\n                }}\n                option={option}\n                loading={loading}\n              />\n            )\n          },\n          selectSingle: {\n            initialValue:[{label: 'a7', value: 7}],\n            children: (\n              <SearchSelect\n                mode=\"single\"\n                labelInValue={true}\n                showSearch={true}\n                allowClear\n                disabled={false}\n                placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n                onSearch={handleSearch}\n                onChange={(v)=>{\n                  console.log('onChange',v)\n                }}\n                option={option}\n                loading={loading}\n              />\n            )\n          },\n        }}\n      >\n        {({ fields, state, canSubmit }) => {\n          return (\n            <div style={{ marginLeft:10}}>\n              <Row >\n                <Col fixed style={{width:200}}>{fields.selectField}</Col>\n              </Row>\n              <Row>\n                <Col fixed style={{width:200}}>{fields.selectSingle}</Col>\n              </Row>\n              <Row>\n                <Col fixed>\n                  <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n                </Col>\n              </Row>\n              <Row>\n                <Col>\n                  <pre style={{ padding: 10, marginTop: 10 }}>\n                    {JSON.stringify(state.current, null, 2)}\n                  </pre>\n                </Col>\n              </Row>\n            </div>\n          )\n        }}\n      </Form>\n    </div>\n  );\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n## Props\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c | \u7248\u672c |\n| ---- | ---- | ---- | ---- | ---- |\n| allowClear | \u652f\u6301\u6e05\u9664 | Boolean | `false` | - |\n| disabled | \u7981\u7528\u9009\u62e9\u5668 | Boolean | `false` | - |\n| mode | \u9009\u62e9\u6a21\u5f0f: `multiple`  `single` | String | `single` | - |\n| defaultValue | \u6307\u5b9a\u9ed8\u8ba4\u9009\u4e2d\u7684\u6761\u76ee | String/Number | - | - |\n| value | \u6307\u5b9a\u5f53\u524d\u9009\u4e2d\u7684\u6761\u76ee\uff0c\u591a\u9009\u65f6\u4e3a\u4e00\u4e2a\u6570\u7ec4 | String \\| Number \\| String[] \\| Number[] \\| LabeledValue \\| LabeledValue[] | - | - |\n| placeholder | \u9009\u62e9\u6846\u9ed8\u8ba4\u6587\u5b57 | String | - | - |\n| maxTagCount | \u591a\u9009\u6a21\u5f0f\u4e0b\u5c55\u793atag\u7684\u4e2a\u6570,\u9ed8\u8ba4\u6240\u6709 | number | - | - |\n| labelInValue | \u5f00\u542f\u4f1a\u628a Select \u7684 value \u7c7b\u578b\u4ece `string/number` \u53d8\u4e3a `{ value: string/number, label: string }` | Boolean | `false` | - |\n| showSearch | \u662f\u5426\u53ef\u641c\u7d22 | Boolean | - | - |\n| size | \u9009\u62e9\u6846\u5c3a\u5bf8 | Enum{large, default, small } | `default` | - |\n| tagProps | \u5c06\u53c2\u6570\u4f20\u9012\u7ed9 [`<Tag>`](#/components/tag) \u7ec4\u4ef6 | `TagProps` | `{}` | `4.13.0` |\n| onChange | \u9009\u4e2d option\uff0c\u6216 input \u7684 value\uff0c\u8c03\u7528\u6b64\u51fd\u6570 | function(value:String \\| Number \\| String[] \\| Number[] \\| LabeledValue \\| LabeledValue[]) | - | - |\n| onSearch | \u6587\u672c\u6846\u503c\u53d8\u5316\u65f6\u56de\u8c03 | function(value: String) | - | - |\n| onSelect | \u88ab\u9009\u4e2d\u65f6\u8c03\u7528\uff0c\u53c2\u6570\u4e3a\u9009\u4e2d\u9879\u7684 value | function(value: String/Number ) | - | - |\n| loading | \u52a0\u8f7d\u4e2d\u72b6\u6001 | Boolean | `false` | - |\n| valueAmount | \u591a\u9009\u6a21\u5f0f\u4e0b,\u9650\u5236\u6700\u591a\u9009\u62e9\u591a\u5c11\u4e2a(value\u7684\u957f\u5ea6) | number | - | - |\n"}}]);
+//# sourceMappingURL=7313.1deb78f8.chunk.js.map

package/web/static/js/{7313.0ebd387c.chunk.js.map → 7313.1deb78f8.chunk.js.map}

@@ -1 +1 @@
-{"version":3,"file":"static/js/7313.0ebd387c.chunk.js","mappings":"gHAAA","sources":["../../packages/react-search-select/README.md"],"sourcesContent":["export default \"SearchSelect 搜索选择器\\n===\\n\\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-search-select/file/README.md)\\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-search-select.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-search-select)\\n[![npm version](https://img.shields.io/npm/v/@uiw/react-search-select.svg?label=@uiw/react-search-select)](https://npmjs.com/@uiw/react-search-select)\\n\\n搜索选择器\\n\\n```jsx\\nimport { SearchSelect, Row ,Col } from 'uiw';\\n// or\\nimport SearchSelect from '@uiw/react-search-select';\\n```\\n\\n## 基础示例\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { SearchSelect,Row,Col } from 'uiw';\\n\\nconst Demo = () => {\\n  const option=[\\n    { label: 'a1', value: 1 },\\n    { label: 'a2', value: 2 },\\n    { label: 'a3', value: 3 },\\n    { label: 'a4', value: 4 },\\n    { label: 'a5', value: 5 },\\n    { label: 'a6', value: 6 },\\n    { label: 'a7', value: 7 },\\n    { label: 'a8', value: 8 },\\n  ]\\n\\n  return(\\n    <Row gutter={20}>\\n     <label>单选</label>\\n     <Row>\\n       <SearchSelect\\n         mode=\\\"single\\\"\\n         style={{ width: 200 }}\\n         placeholder=\\\"请输入选择\\\"\\n         option={option}\\n       />\\n     </Row>\\n     <label>多选</label>\\n     <Row>\\n       <SearchSelect\\n         mode=\\\"multiple\\\"\\n         style={{ width: 200 }}\\n         placeholder=\\\"请输入选择\\\"\\n         option={option}\\n       />\\n     </Row>\\n     <label>禁用</label>\\n     <Row>\\n       <SearchSelect\\n         mode=\\\"single\\\"\\n         style={{ width: 200 }}\\n         placeholder=\\\"请输入选择\\\"\\n         option={option}\\n         disabled={true}\\n       />\\n     </Row>\\n    </Row>\\n  );\\n};\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 尺寸\\n\\n通过 size 属性设置选择器的尺寸，提供三个尺寸参数设置。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { SearchSelect,Row,Col } from 'uiw';\\n\\nconst Demo = () => {\\n  const option=[\\n    { label: '小尺寸', value: 1 },\\n    { label: '默认尺寸', value: 2 },\\n    { label: '大尺寸', value: 3 },\\n  ]\\n\\n  return(\\n    <Row style={{ flexDirection: 'column' }}>\\n      <Col>\\n        <Row>\\n          <SearchSelect\\n            mode=\\\"multiple\\\"\\n            style={{ width: 150 }}\\n            option={option}\\n            value={[1]}\\n            showSearch={true}\\n            placeholder=\\\"请输入选择\\\"\\n            size={'small'}\\n          />\\n        </Row>\\n      </Col>\\n      <Col style={{ margin:'10px 0px' }}>\\n        <Row>\\n          <SearchSelect\\n            mode=\\\"multiple\\\"\\n            style={{ width: 175 }}\\n            option={option}\\n            value={[2]}\\n            showSearch={true}\\n            placeholder=\\\"请输入选择\\\"\\n          />\\n        </Row>\\n      </Col>\\n      <Col  >\\n        <Row>\\n          <SearchSelect\\n            mode=\\\"multiple\\\"\\n            style={{ width: 200 }}\\n            option={option}\\n            value={[3]}\\n            showSearch={true}\\n            placeholder=\\\"请输入选择\\\"\\n            size={'large'}\\n          />\\n        </Row>\\n      </Col>\\n    </Row>\\n  );\\n};\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 不同的value类型\\n\\n通`labelInValue`参数控制value类型和onChange时间返回参数的类型，设置为`true`时，`value`和`onChange`回调返回的值类型从[..., value]变成[..., { label, value}]\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { SearchSelect,Row,Col } from 'uiw';\\n\\nconst Demo = () => {\\n  const option=[\\n    { label: 'a1', value: 1 },\\n    { label: 'a2', value: 2 },\\n    { label: 'a3', value: 3 },\\n    { label: 'a4', value: 4 },\\n    { label: 'a5', value: 5 },\\n    { label: 'a6', value: 6 },\\n    { label: 'a7', value: 7 },\\n    { label: 'a8', value: 8 },\\n  ]\\n\\n\\n  const [loading, setLoading] = React.useState(false);\\n  const [value, setValue] = React.useState([1 ,7]);\\n  const [labelValue, setLabelValue] = React.useState([{ label: 'a1', value: 1 }, { label: 'a7', value: 7 }]);\\n\\n  return(\\n    <Row gutter={20}>\\n     <Row>\\n       <SearchSelect\\n         mode=\\\"multiple\\\"\\n         style={{ width: 200 }}\\n         value={value}\\n         option={option}\\n         onChange={(value)=> {\\n           console.log('value', value)\\n           setValue(value)\\n         }}\\n         placeholder=\\\"请输入选择\\\"\\n       />\\n     </Row>\\n     <Row>\\n       <SearchSelect\\n         mode=\\\"multiple\\\"\\n         labelInValue={true}\\n         style={{ width: 200 }}\\n         option={option}\\n         value={labelValue}\\n         onChange={(value)=> {\\n           console.log('value', value)\\n           setLabelValue(value)\\n         }}\\n         plac\\n         placeholder=\\\"请输入选择\\\"\\n       />\\n     </Row>\\n    </Row>\\n  );\\n};\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 限制选项个数\\n\\n限制最多只能选择两个选项，达到最大后如果继续选择，会替换最后一个\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { SearchSelect,Row,Col } from 'uiw';\\n\\nconst Demo = () => {\\n  const selectOption=[\\n    { label: 'a1', value: 1 },\\n    { label: 'a2', value: 2 },\\n    { label: 'a3', value: 3 },\\n    { label: 'a4', value: 4 },\\n    { label: 'a5', value: 5 },\\n    { label: 'a6', value: 6 },\\n    { label: 'a7', value: 7 },\\n    { label: 'a8', value: 8 },\\n  ]\\n\\n  const valueAmount = 2\\n  const [option, setOption] = React.useState(selectOption);\\n  const [loading, setLoading] = React.useState(false);\\n  const [values, setValues] = React.useState([ 1, 2, 7]);\\n\\n  function handleSearch(e) {\\n    setLoading(true)\\n    setTimeout(() =>  {\\n     const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))\\n      setOption([...filterOpion]);\\n      setLoading(false);\\n    }, 500);\\n  }\\n\\n  return(\\n    <Row style={{ marginLeft: 10 }}>\\n        <SearchSelect\\n          mode=\\\"multiple\\\"\\n          style={{ width: 200 }}\\n          valueAmount={valueAmount}\\n          allowClear\\n          value={values}\\n          placeholder=\\\"请输入选择\\\"\\n          onSearch={handleSearch}\\n          // onSelect={(value)=>console.log('onSelect',value)}\\n          loading={loading}\\n          option={option}\\n          onChange={(value) => {\\n            setValues(value)\\n          }}\\n        />\\n    </Row>\\n  );\\n};\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 显示最大数量\\n\\n使用`maxTagCount`限制显示tag的数量，超过后使用省略tag显示\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { SearchSelect,Row,Col } from 'uiw';\\n\\nconst Demo = () => {\\n  const selectOption=[\\n    { label: 'a1', value: 1 },\\n    { label: 'a2', value: 2 },\\n    { label: 'a3', value: 3 },\\n    { label: 'a4', value: 4 },\\n    { label: 'a5', value: 5 },\\n    { label: 'a6', value: 6 },\\n    { label: 'a7', value: 7 },\\n    { label: 'a8', value: 8 },\\n  ]\\n\\n  const maxTagCount = 4\\n  const [option, setOption] = React.useState(selectOption);\\n  const [loading, setLoading] = React.useState(false);\\n  const [values, setValues] = React.useState([\\n      { label: 'a1', value: 1 },\\n      { label: 'a2', value: 2 },\\n      { label: 'a5', value: 5 },\\n      { label: 'a7', value: 7 },\\n      { label: 'a8', value: 8 },\\n    ]);\\n\\n  function handleSearch(e) {\\n    setLoading(true)\\n    setTimeout(() =>  {\\n     const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))\\n      setOption([...filterOpion]);\\n      setLoading(false);\\n    }, 500);\\n  }\\n\\n  return(\\n    <Row style={{ marginLeft: 10 }}>\\n        <SearchSelect\\n          mode=\\\"multiple\\\"\\n          style={{ width: 200 }}\\n          labelInValue={true}\\n          maxTagCount={maxTagCount}\\n          allowClear\\n          value={values}\\n          placeholder=\\\"请输入选择\\\"\\n          onSearch={handleSearch}\\n          loading={loading}\\n          option={option}\\n          onChange={(value) => {\\n            setValues(value)\\n          }}\\n        />\\n    </Row>\\n  );\\n};\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 启用搜索\\n\\n将`showSearch`设置为`true`启用搜索功能，组件没有内置搜索功能，但`option`是监听变化的，可以通过配合`onSearch`实现\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { SearchSelect,Row,Col } from 'uiw';\\n\\nconst Demo = () => {\\n  const selectOption=[\\n    { label: 'a1', value: 1 },\\n    { label: 'a2', value: 2 },\\n    { label: 'a3', value: 3 },\\n    { label: 'a4', value: 4 },\\n    { label: 'a5', value: 5 },\\n    { label: 'a6', value: 6 },\\n    { label: 'a7', value: 7 },\\n    { label: 'a8', value: 8 },\\n  ]\\n\\n  const [values, setValues] = React.useState([1,7]);\\n  const [option, setOption] = React.useState(selectOption);\\n  const [loading, setLoading] = React.useState(false);\\n\\n  function handleSearch(e) {\\n    setLoading(true)\\n    setTimeout(() =>  {\\n     const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))\\n      setOption([...filterOpion]);\\n      setLoading(false);\\n    }, 500);\\n  }\\n\\n  return(\\n    <Row style={{ marginLeft: 10 }}>\\n      <SearchSelect\\n        mode=\\\"multiple\\\"\\n        showSearch={true}\\n        value={values}\\n        option={option}\\n        loading={loading}\\n        onSearch={handleSearch}\\n        placeholder=\\\"请输入选择\\\"\\n        style={{ width: 200 }}\\n        onChange={(value) => {\\n          setValues(value)\\n        }}\\n      />\\n    </Row>\\n  );\\n};\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 在表单中使用\\n\\n在 [`<Form />`](#/components/form) 表单中应用 `<SearchSelect />` 组件。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true&noScroll=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Form, Row, Col, SearchSelect, Button, Notify } from 'uiw';\\n\\nconst Demo = () => {\\n  const selectOption =[\\n        { label: 'a1', value: 1 },\\n        { label: 'a2', value: 2 },\\n        { label: 'a3', value: 3 },\\n        { label: 'a4', value: 4 },\\n        { label: 'a5', value: 5 },\\n        { label: 'a6', value: 6 },\\n        { label: 'a7', value: 7 },\\n        { label: 'a8', value: 8 },\\n      ];\\n  const [option, setOption] = React.useState(selectOption);\\n  const [loading, setLoading] = React.useState(false);\\n\\n  function handleSearch(e) {\\n    setLoading(true)\\n    setTimeout(() =>  {\\n     const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))\\n      setOption([...filterOpion]);\\n      setLoading(false);\\n    }, 500);\\n  }\\n\\n  return (\\n    <div>\\n      <Form\\n        onSubmitError={(error) => {\\n          if (error.filed) {\\n            return { ...error.filed };\\n          }\\n          return null;\\n        }}\\n        onSubmit={({initial, current}) => {\\n          const errorObj = {};\\n          if (!current.selectField) {\\n            errorObj.selectField = '默认需要选择内容，选择入内容';\\n          }\\n          if(Object.keys(errorObj).length > 0) {\\n            const err = new Error();\\n            err.filed = errorObj;\\n            Notify.error({ title: '提交失败！', description: '请确认提交表单是否正确！' });\\n            throw err;\\n          }\\n          Notify.success({\\n            title: '提交成功！',\\n            description: `表单提交成功，选择值为：${current.selectField}，将自动填充初始化值！`,\\n          });\\n        }}\\n        fields={{\\n          selectField: {\\n            initialValue:[{label: 'a7', value: 7},{label: 'a8', value: 8}],\\n            children: (\\n              <SearchSelect\\n                allowClear\\n                labelInValue={true}\\n                showSearch={true}\\n                mode=\\\"multiple\\\"\\n                disabled={false}\\n                placeholder=\\\"请输入选择\\\"\\n                onSearch={handleSearch}\\n                onChange={(v)=>{\\n                  console.log('onChange',v)\\n                }}\\n                option={option}\\n                loading={loading}\\n              />\\n            )\\n          },\\n          selectSingle: {\\n            initialValue:[{label: 'a7', value: 7}],\\n            children: (\\n              <SearchSelect\\n                mode=\\\"single\\\"\\n                labelInValue={true}\\n                showSearch={true}\\n                allowClear\\n                disabled={false}\\n                placeholder=\\\"请输入选择\\\"\\n                onSearch={handleSearch}\\n                onChange={(v)=>{\\n                  console.log('onChange',v)\\n                }}\\n                option={option}\\n                loading={loading}\\n              />\\n            )\\n          },\\n        }}\\n      >\\n        {({ fields, state, canSubmit }) => {\\n          return (\\n            <div style={{ marginLeft:10}}>\\n              <Row >\\n                <Col fixed style={{width:200}}>{fields.selectField}</Col>\\n              </Row>\\n              <Row>\\n                <Col fixed style={{width:200}}>{fields.selectSingle}</Col>\\n              </Row>\\n              <Row>\\n                <Col fixed>\\n                  <Button disabled={!canSubmit()} type=\\\"primary\\\" htmlType=\\\"submit\\\">提交</Button>\\n                </Col>\\n              </Row>\\n              <Row>\\n                <Col>\\n                  <pre style={{ padding: 10, marginTop: 10 }}>\\n                    {JSON.stringify(state.current, null, 2)}\\n                  </pre>\\n                </Col>\\n              </Row>\\n            </div>\\n          )\\n        }}\\n      </Form>\\n    </div>\\n  );\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Props\\n\\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\\n| ---- | ---- | ---- | ---- | ---- |\\n| allowClear | 支持清除 | Boolean | `false` | - |\\n| disabled | 禁用选择器 | Boolean | `false` | - |\\n| mode | 选择模式: `multiple`  `single` | String | `single` | - |\\n| defaultValue | 指定默认选中的条目 | String/Number | - | - |\\n| value | 指定当前选中的条目，多选时为一个数组 | String \\\\| Number \\\\| String[] \\\\| Number[] \\\\| LabeledValue \\\\| LabeledValue[] | - | - |\\n| placeholder | 选择框默认文字 | String | - | - |\\n| maxTagCount | 多选模式下展示tag的个数,默认所有 | number | - | - |\\n| labelInValue | 开启会把 Select 的 value 类型从 `string/number` 变为 `{ value: string/number, label: string }` | Boolean | `false` | - |\\n| showSearch | 是否可搜索 | Boolean | - | - |\\n| size | 选择框尺寸 | Enum{large, default, small } | `default` | - |\\n| tagProps | 将参数传递给 [`<Tag>`](https://uiwjs.github.io/#/components/tag) 组件 | `TagProps` | `{}` | `4.13.0` |\\n| onChange | 选中 option，或 input 的 value，调用此函数 | function(value:String \\\\| Number \\\\| String[] \\\\| Number[] \\\\| LabeledValue \\\\| LabeledValue[]) | - | - |\\n| onSearch | 文本框值变化时回调 | function(value: String) | - | - |\\n| onSelect | 被选中时调用，参数为选中项的 value | function(value: String/Number ) | - | - |\\n| loading | 加载中状态 | Boolean | `false` | - |\\n| valueAmount | 多选模式下,限制最多选择多少个(value的长度) | number | - | - |\\n\";"],"names":[],"sourceRoot":""}
+{"version":3,"file":"static/js/7313.1deb78f8.chunk.js","mappings":"gHAAA","sources":["../../packages/react-search-select/README.md"],"sourcesContent":["export default \"SearchSelect 搜索选择器\\n===\\n\\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-search-select/file/README.md)\\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-search-select.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-search-select)\\n[![npm version](https://img.shields.io/npm/v/@uiw/react-search-select.svg?label=@uiw/react-search-select)](https://npmjs.com/@uiw/react-search-select)\\n\\n搜索选择器\\n\\n```jsx\\nimport { SearchSelect, Row ,Col } from 'uiw';\\n// or\\nimport SearchSelect from '@uiw/react-search-select';\\n```\\n\\n## 基础示例\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { SearchSelect,Row,Col } from 'uiw';\\n\\nconst Demo = () => {\\n  const option=[\\n    { label: 'a1', value: 1 },\\n    { label: 'a2', value: 2 },\\n    { label: 'a3', value: 3 },\\n    { label: 'a4', value: 4 },\\n    { label: 'a5', value: 5 },\\n    { label: 'a6', value: 6 },\\n    { label: 'a7', value: 7 },\\n    { label: 'a8', value: 8 },\\n  ]\\n\\n  return(\\n    <Row gutter={20}>\\n     <label>单选</label>\\n     <Row>\\n       <SearchSelect\\n         mode=\\\"single\\\"\\n         style={{ width: 200 }}\\n         placeholder=\\\"请输入选择\\\"\\n         option={option}\\n       />\\n     </Row>\\n     <label>多选</label>\\n     <Row>\\n       <SearchSelect\\n         mode=\\\"multiple\\\"\\n         style={{ width: 200 }}\\n         placeholder=\\\"请输入选择\\\"\\n         option={option}\\n       />\\n     </Row>\\n     <label>禁用</label>\\n     <Row>\\n       <SearchSelect\\n         mode=\\\"single\\\"\\n         style={{ width: 200 }}\\n         placeholder=\\\"请输入选择\\\"\\n         option={option}\\n         disabled={true}\\n       />\\n     </Row>\\n    </Row>\\n  );\\n};\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 尺寸\\n\\n通过 size 属性设置选择器的尺寸，提供三个尺寸参数设置。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { SearchSelect,Row,Col } from 'uiw';\\n\\nconst Demo = () => {\\n  const option=[\\n    { label: '小尺寸', value: 1 },\\n    { label: '默认尺寸', value: 2 },\\n    { label: '大尺寸', value: 3 },\\n  ]\\n\\n  return(\\n    <Row style={{ flexDirection: 'column' }}>\\n      <Col>\\n        <Row>\\n          <SearchSelect\\n            mode=\\\"multiple\\\"\\n            style={{ width: 150 }}\\n            option={option}\\n            value={[1]}\\n            showSearch={true}\\n            placeholder=\\\"请输入选择\\\"\\n            size={'small'}\\n          />\\n        </Row>\\n      </Col>\\n      <Col style={{ margin:'10px 0px' }}>\\n        <Row>\\n          <SearchSelect\\n            mode=\\\"multiple\\\"\\n            style={{ width: 175 }}\\n            option={option}\\n            value={[2]}\\n            showSearch={true}\\n            placeholder=\\\"请输入选择\\\"\\n          />\\n        </Row>\\n      </Col>\\n      <Col  >\\n        <Row>\\n          <SearchSelect\\n            mode=\\\"multiple\\\"\\n            style={{ width: 200 }}\\n            option={option}\\n            value={[3]}\\n            showSearch={true}\\n            placeholder=\\\"请输入选择\\\"\\n            size={'large'}\\n          />\\n        </Row>\\n      </Col>\\n    </Row>\\n  );\\n};\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 不同的value类型\\n\\n通`labelInValue`参数控制value类型和onChange时间返回参数的类型，设置为`true`时，`value`和`onChange`回调返回的值类型从[..., value]变成[..., { label, value}]\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { SearchSelect,Row,Col } from 'uiw';\\n\\nconst Demo = () => {\\n  const option=[\\n    { label: 'a1', value: 1 },\\n    { label: 'a2', value: 2 },\\n    { label: 'a3', value: 3 },\\n    { label: 'a4', value: 4 },\\n    { label: 'a5', value: 5 },\\n    { label: 'a6', value: 6 },\\n    { label: 'a7', value: 7 },\\n    { label: 'a8', value: 8 },\\n  ]\\n\\n\\n  const [loading, setLoading] = React.useState(false);\\n  const [value, setValue] = React.useState([1 ,7]);\\n  const [labelValue, setLabelValue] = React.useState([{ label: 'a1', value: 1 }, { label: 'a7', value: 7 }]);\\n\\n  return(\\n    <Row gutter={20}>\\n     <Row>\\n       <SearchSelect\\n         mode=\\\"multiple\\\"\\n         style={{ width: 200 }}\\n         value={value}\\n         option={option}\\n         onChange={(value)=> {\\n           console.log('value', value)\\n           setValue(value)\\n         }}\\n         placeholder=\\\"请输入选择\\\"\\n       />\\n     </Row>\\n     <Row>\\n       <SearchSelect\\n         mode=\\\"multiple\\\"\\n         labelInValue={true}\\n         style={{ width: 200 }}\\n         option={option}\\n         value={labelValue}\\n         onChange={(value)=> {\\n           console.log('value', value)\\n           setLabelValue(value)\\n         }}\\n         plac\\n         placeholder=\\\"请输入选择\\\"\\n       />\\n     </Row>\\n    </Row>\\n  );\\n};\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 限制选项个数\\n\\n限制最多只能选择两个选项，达到最大后如果继续选择，会替换最后一个\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { SearchSelect,Row,Col } from 'uiw';\\n\\nconst Demo = () => {\\n  const selectOption=[\\n    { label: 'a1', value: 1 },\\n    { label: 'a2', value: 2 },\\n    { label: 'a3', value: 3 },\\n    { label: 'a4', value: 4 },\\n    { label: 'a5', value: 5 },\\n    { label: 'a6', value: 6 },\\n    { label: 'a7', value: 7 },\\n    { label: 'a8', value: 8 },\\n  ]\\n\\n  const valueAmount = 2\\n  const [option, setOption] = React.useState(selectOption);\\n  const [loading, setLoading] = React.useState(false);\\n  const [values, setValues] = React.useState([ 1, 2, 7]);\\n\\n  function handleSearch(e) {\\n    setLoading(true)\\n    setTimeout(() =>  {\\n     const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))\\n      setOption([...filterOpion]);\\n      setLoading(false);\\n    }, 500);\\n  }\\n\\n  return(\\n    <Row style={{ marginLeft: 10 }}>\\n        <SearchSelect\\n          mode=\\\"multiple\\\"\\n          style={{ width: 200 }}\\n          valueAmount={valueAmount}\\n          allowClear\\n          value={values}\\n          placeholder=\\\"请输入选择\\\"\\n          onSearch={handleSearch}\\n          // onSelect={(value)=>console.log('onSelect',value)}\\n          loading={loading}\\n          option={option}\\n          onChange={(value) => {\\n            setValues(value)\\n          }}\\n        />\\n    </Row>\\n  );\\n};\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 显示最大数量\\n\\n使用`maxTagCount`限制显示tag的数量，超过后使用省略tag显示\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { SearchSelect,Row,Col } from 'uiw';\\n\\nconst Demo = () => {\\n  const selectOption=[\\n    { label: 'a1', value: 1 },\\n    { label: 'a2', value: 2 },\\n    { label: 'a3', value: 3 },\\n    { label: 'a4', value: 4 },\\n    { label: 'a5', value: 5 },\\n    { label: 'a6', value: 6 },\\n    { label: 'a7', value: 7 },\\n    { label: 'a8', value: 8 },\\n  ]\\n\\n  const maxTagCount = 4\\n  const [option, setOption] = React.useState(selectOption);\\n  const [loading, setLoading] = React.useState(false);\\n  const [values, setValues] = React.useState([\\n      { label: 'a1', value: 1 },\\n      { label: 'a2', value: 2 },\\n      { label: 'a5', value: 5 },\\n      { label: 'a7', value: 7 },\\n      { label: 'a8', value: 8 },\\n    ]);\\n\\n  function handleSearch(e) {\\n    setLoading(true)\\n    setTimeout(() =>  {\\n     const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))\\n      setOption([...filterOpion]);\\n      setLoading(false);\\n    }, 500);\\n  }\\n\\n  return(\\n    <Row style={{ marginLeft: 10 }}>\\n        <SearchSelect\\n          mode=\\\"multiple\\\"\\n          style={{ width: 200 }}\\n          labelInValue={true}\\n          maxTagCount={maxTagCount}\\n          allowClear\\n          value={values}\\n          placeholder=\\\"请输入选择\\\"\\n          onSearch={handleSearch}\\n          loading={loading}\\n          option={option}\\n          onChange={(value) => {\\n            setValues(value)\\n          }}\\n        />\\n    </Row>\\n  );\\n};\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 启用搜索\\n\\n将`showSearch`设置为`true`启用搜索功能，组件没有内置搜索功能，但`option`是监听变化的，可以通过配合`onSearch`实现\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { SearchSelect,Row,Col } from 'uiw';\\n\\nconst Demo = () => {\\n  const selectOption=[\\n    { label: 'a1', value: 1 },\\n    { label: 'a2', value: 2 },\\n    { label: 'a3', value: 3 },\\n    { label: 'a4', value: 4 },\\n    { label: 'a5', value: 5 },\\n    { label: 'a6', value: 6 },\\n    { label: 'a7', value: 7 },\\n    { label: 'a8', value: 8 },\\n  ]\\n\\n  const [values, setValues] = React.useState([1,7]);\\n  const [option, setOption] = React.useState(selectOption);\\n  const [loading, setLoading] = React.useState(false);\\n\\n  function handleSearch(e) {\\n    setLoading(true)\\n    setTimeout(() =>  {\\n     const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))\\n      setOption([...filterOpion]);\\n      setLoading(false);\\n    }, 500);\\n  }\\n\\n  return(\\n    <Row style={{ marginLeft: 10 }}>\\n      <SearchSelect\\n        mode=\\\"multiple\\\"\\n        showSearch={true}\\n        value={values}\\n        option={option}\\n        loading={loading}\\n        onSearch={handleSearch}\\n        placeholder=\\\"请输入选择\\\"\\n        style={{ width: 200 }}\\n        onChange={(value) => {\\n          setValues(value)\\n        }}\\n      />\\n    </Row>\\n  );\\n};\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 在表单中使用\\n\\n在 [`<Form />`](#/components/form) 表单中应用 `<SearchSelect />` 组件。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true&noScroll=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Form, Row, Col, SearchSelect, Button, Notify } from 'uiw';\\n\\nconst Demo = () => {\\n  const selectOption =[\\n        { label: 'a1', value: 1 },\\n        { label: 'a2', value: 2 },\\n        { label: 'a3', value: 3 },\\n        { label: 'a4', value: 4 },\\n        { label: 'a5', value: 5 },\\n        { label: 'a6', value: 6 },\\n        { label: 'a7', value: 7 },\\n        { label: 'a8', value: 8 },\\n      ];\\n  const [option, setOption] = React.useState(selectOption);\\n  const [loading, setLoading] = React.useState(false);\\n\\n  function handleSearch(e) {\\n    setLoading(true)\\n    setTimeout(() =>  {\\n     const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim()))\\n      setOption([...filterOpion]);\\n      setLoading(false);\\n    }, 500);\\n  }\\n\\n  return (\\n    <div>\\n      <Form\\n        onSubmitError={(error) => {\\n          if (error.filed) {\\n            return { ...error.filed };\\n          }\\n          return null;\\n        }}\\n        onSubmit={({initial, current}) => {\\n          const errorObj = {};\\n          if (!current.selectField) {\\n            errorObj.selectField = '默认需要选择内容，选择入内容';\\n          }\\n          if(Object.keys(errorObj).length > 0) {\\n            const err = new Error();\\n            err.filed = errorObj;\\n            Notify.error({ title: '提交失败！', description: '请确认提交表单是否正确！' });\\n            throw err;\\n          }\\n          Notify.success({\\n            title: '提交成功！',\\n            description: `表单提交成功，选择值为：${current.selectField}，将自动填充初始化值！`,\\n          });\\n        }}\\n        fields={{\\n          selectField: {\\n            initialValue:[{label: 'a7', value: 7},{label: 'a8', value: 8}],\\n            children: (\\n              <SearchSelect\\n                allowClear\\n                labelInValue={true}\\n                showSearch={true}\\n                mode=\\\"multiple\\\"\\n                disabled={false}\\n                placeholder=\\\"请输入选择\\\"\\n                onSearch={handleSearch}\\n                onChange={(v)=>{\\n                  console.log('onChange',v)\\n                }}\\n                option={option}\\n                loading={loading}\\n              />\\n            )\\n          },\\n          selectSingle: {\\n            initialValue:[{label: 'a7', value: 7}],\\n            children: (\\n              <SearchSelect\\n                mode=\\\"single\\\"\\n                labelInValue={true}\\n                showSearch={true}\\n                allowClear\\n                disabled={false}\\n                placeholder=\\\"请输入选择\\\"\\n                onSearch={handleSearch}\\n                onChange={(v)=>{\\n                  console.log('onChange',v)\\n                }}\\n                option={option}\\n                loading={loading}\\n              />\\n            )\\n          },\\n        }}\\n      >\\n        {({ fields, state, canSubmit }) => {\\n          return (\\n            <div style={{ marginLeft:10}}>\\n              <Row >\\n                <Col fixed style={{width:200}}>{fields.selectField}</Col>\\n              </Row>\\n              <Row>\\n                <Col fixed style={{width:200}}>{fields.selectSingle}</Col>\\n              </Row>\\n              <Row>\\n                <Col fixed>\\n                  <Button disabled={!canSubmit()} type=\\\"primary\\\" htmlType=\\\"submit\\\">提交</Button>\\n                </Col>\\n              </Row>\\n              <Row>\\n                <Col>\\n                  <pre style={{ padding: 10, marginTop: 10 }}>\\n                    {JSON.stringify(state.current, null, 2)}\\n                  </pre>\\n                </Col>\\n              </Row>\\n            </div>\\n          )\\n        }}\\n      </Form>\\n    </div>\\n  );\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Props\\n\\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\\n| ---- | ---- | ---- | ---- | ---- |\\n| allowClear | 支持清除 | Boolean | `false` | - |\\n| disabled | 禁用选择器 | Boolean | `false` | - |\\n| mode | 选择模式: `multiple`  `single` | String | `single` | - |\\n| defaultValue | 指定默认选中的条目 | String/Number | - | - |\\n| value | 指定当前选中的条目，多选时为一个数组 | String \\\\| Number \\\\| String[] \\\\| Number[] \\\\| LabeledValue \\\\| LabeledValue[] | - | - |\\n| placeholder | 选择框默认文字 | String | - | - |\\n| maxTagCount | 多选模式下展示tag的个数,默认所有 | number | - | - |\\n| labelInValue | 开启会把 Select 的 value 类型从 `string/number` 变为 `{ value: string/number, label: string }` | Boolean | `false` | - |\\n| showSearch | 是否可搜索 | Boolean | - | - |\\n| size | 选择框尺寸 | Enum{large, default, small } | `default` | - |\\n| tagProps | 将参数传递给 [`<Tag>`](#/components/tag) 组件 | `TagProps` | `{}` | `4.13.0` |\\n| onChange | 选中 option，或 input 的 value，调用此函数 | function(value:String \\\\| Number \\\\| String[] \\\\| Number[] \\\\| LabeledValue \\\\| LabeledValue[]) | - | - |\\n| onSearch | 文本框值变化时回调 | function(value: String) | - | - |\\n| onSelect | 被选中时调用，参数为选中项的 value | function(value: String/Number ) | - | - |\\n| loading | 加载中状态 | Boolean | `false` | - |\\n| valueAmount | 多选模式下,限制最多选择多少个(value的长度) | number | - | - |\\n\";"],"names":[],"sourceRoot":""}