7313.6ffaf317.chunk.js.map

{"version":3,"file":"static/js/7313.6ffaf317.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 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 [option, setOption] = React.useState(selectOption);\\n  const [loading, setLoading] = React.useState(false);\\n  const [values, setValues] = React.useState([{label: 'a7', value: 7},{label: 'a8', value: 8}]);\\n  const [value, setValue] = React.useState([{label: 'a7', value: 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 gutter={20}>\\n     <Row>\\n       <SearchSelect\\n         mode=\\\"multiple\\\"\\n         style={{ width: 200 }}\\n         showSearch={true}\\n         labelInValue={true}\\n         maxTagCount={6}\\n         allowClear\\n         value={values}\\n         disabled={false}\\n         placeholder=\\\"请输入选择\\\"\\n         onSearch={handleSearch}\\n         // onSelect={(value)=>console.log('onSelect',value)}\\n         loading={loading}\\n         option={option}\\n         onChange={(value) => {\\n           console.log('value', value)\\n           setValues(value)\\n         }}\\n       />\\n     </Row>\\n     <Row>\\n       <SearchSelect\\n         mode=\\\"single\\\"\\n         style={{ width: 200 }}\\n         showSearch={true}\\n         labelInValue={true}\\n         maxTagCount={6}\\n         allowClear\\n         value={value}\\n         disabled={false}\\n         placeholder=\\\"请输入选择\\\"\\n         onSearch={handleSearch}\\n         // onSelect={(value)=>console.log('onSelect',value)}\\n         loading={loading}\\n         option={option}\\n         onChange={(value) => {\\n           console.log('value', value)\\n           setValue(value)\\n         }}\\n       />\\n     </Row>\\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\";"],"names":[],"sourceRoot":""}