-
-
Notifications
You must be signed in to change notification settings - Fork 115
/
7313.9c56b387.chunk.js.map
1 lines (1 loc) · 16.9 KB
/
7313.9c56b387.chunk.js.map
1
{"version":3,"file":"static/js/7313.9c56b387.chunk.js","mappings":"gHAAA","sources":["../../packages/react-search-select/README.md"],"sourcesContent":["export default \"SearchSelect 搜索选择器\\n===\\n\\n[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-search-select/file/README.md)\\n[](https://www.npmjs.com/package/@uiw/react-search-select)\\n[](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 allowClear={true}\\n placeholder=\\\"请选择选项\\\"\\n option={option}\\n />\\n </Row>\\n <label>禁用</label>\\n <Row>\\n <SearchSelect\\n mode=\\\"single\\\"\\n style={{ width: 200 }}\\n allowClear={true}\\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 allowClear={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 allowClear={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 allowClear={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 [value, setValue] = React.useState([1,7]);\\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 <Col fixed style={{width:200}}>\\n <SearchSelect\\n mode=\\\"singe\\\"\\n showSearch={true}\\n value={value}\\n option={option}\\n loading={loading}\\n onSearch={handleSearch}\\n placeholder=\\\"请选择选项\\\"\\n style={{ width: 200 }}\\n onChange={(value) => {\\n setValue(value)\\n }}\\n />\\n </Col>\\n <Col fixed style={{width:200, marginLeft: 20}}>\\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 </Col>\\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 const refForm = React.useRef()\\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 const reSetForm = () => {\\n console.log('form', refForm.current.resetForm())\\n }\\n\\n return (\\n <div>\\n <Form\\n ref={refForm}\\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 <Col fixed>\\n <Button onClick={reSetForm}>重置</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":""}