@uiw/doc 4.18.0 → 4.18.1

package/web/static/js/{766.1191e07c.chunk.js → 766.743dae68.chunk.js}

@@ -1,2 +1,2 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[766],{80766:function(e,n,l){l.r(n),n.default="SearchTree \u5e26\u641c\u7d22\u7684Tree\u9009\u62e9\u63a7\u4ef6\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-tree/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-search-tree.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-search-tree)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-search-tree.svg?label=@uiw/react-search-tree)](https://npmjs.com/@uiw/react-search-tree)\n\n\u4f7f\u7528\u6811\u9009\u62e9\u63a7\u4ef6\u53ef\u4ee5\u5b8c\u6574\u5c55\u73b0\u5176\u4e2d\u7684\u5c42\u7ea7\u5173\u7cfb\uff0c\u5e76\u5177\u6709\u9009\u4e2d\u72b6\u6001\u3002\u65b0\u7ec4\u4ef6 v4.11.7+ \u652f\u6301\u3002\n\n```jsx\nimport { SearchTree } from 'uiw';\n// or\nimport SearchTree from '@uiw/react-search-tree';\n```\n\n### \u57fa\u7840\u5b9e\u4f8b\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React, { useState, useEffect, useRef } from 'react';\nimport ReactDOM from 'react-dom';\nimport {  SearchTree } from 'uiw';\n\nconst data = [\n  {\n    label: '\u4e0a\u6d77\u5e02',\n    key: 1,\n    children:[\n      { label: '\u9ec4\u6d66\u533a', key: 2 },\n      { label: '\u5362\u6e7e\u533a', key: 3 },\n      {\n        label: '\u5f90\u6c47\u533a',\n        key: 4,\n        children:[\n          { label: '\u534a\u6dde\u56ed\u8def\u8857\u9053', key: 6 },\n          { label: '\u5357\u4eac\u4e1c\u8def\u8857\u9053', key: 7 },\n          { label: '\u5916\u6ee9\u8857\u9053', key: 8 },\n        ]\n      },\n    ]\n  },\n  {\n    label: '\u5317\u4eac\u5e02',\n    key: 9,\n    children:[\n      { label: '\u4e1c\u57ce\u533a', key: 10 },\n      { label: '\u897f\u57ce\u533a', key: 11 },\n      {\n        label: '\u5d07\u6587\u533a',\n        key: 12,\n        children:[\n          { label: '\u4e1c\u82b1\u5e02\u8857\u9053', key: 13 },\n          { label: '\u4f53\u80b2\u9986\u8def\u8857\u9053', key: 14 },\n          { label: '\u524d\u95e8\u8857\u9053', key: 15 },\n        ]\n      },\n    ]\n  },\n  { label: '\u6fb3\u95e8', key: 16 },\n];\n\nconst Demo = () => {\n\nconst [value,valueSet]=useState([{ label: '\u9ec4\u6d66\u533a', key: 12 }])\nconst [valueSinge,valueSingeSet]=useState([{ label: '\u4e0a\u6d77\u5e02', key: '1-0-0' }])\n\nconst onChange=(selectd, selectedAll,  isChecked)=>{\n  console.log('SearchTree-> onChange',selectedAll, selectd, isChecked)\n  valueSet(selectedAll)\n}\n\nconst onChangeSinge=(selectd, selectedAll,  isChecked)=>{\n  console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)\n  valueSingeSet(selectedAll)\n}\n\n return (\n   <Row gutter={20}>\n    <label>\u5355\u9009</label>\n    <Row>\n      <SearchTree\n        style={{width: 200}}\n        multiple={false}\n        allowClear={true}\n        onSearch={(searchValue)=>console.log('singe',searchValue)}\n        onChange={onChangeSinge}\n        value={valueSinge}\n        options={data}\n        placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n      />\n    </Row>\n    <label>\u591a\u9009</label>\n    <Row>\n      <SearchTree\n        style={{ width: 200 }}\n        allowClear={true}\n        onSearch={(searchValue)=>console.log('multiple',searchValue)}\n        onChange={onChange}\n        value={value}\n        options={data}\n        placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n      />\n    </Row>\n    <label>\u7981\u7528</label>\n    <Row>\n      <SearchTree\n        disabled={true}\n        style={{ width: 200 }}\n        allowClear={true}\n        value={[{ label: '\u4e1c\u57ce\u533a', key: 10 },{ label: '\u6210\u90fd\u5e02',  key: 2 }]}\n        options={data}\n        placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n      />\n    </Row>\n  </Row>\n  )\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u5c3a\u5bf8\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React, { useState, useEffect, useRef } from 'react';\nimport {  SearchTree } from 'uiw';\n\nconst Demo = () => {\n\nconst data = [\n    { label: '\u5c0f\u5c3a\u5bf8', key: 1 },\n    { label: '\u9ed8\u8ba4\u5c3a\u5bf8', key: 2 },\n    { label: '\u5927\u5c3a\u5bf8', key: 3 },\n  ]\n\n  return(\n    <>\n      <SearchTree\n        style={{ width: 150 }}\n        value={[{ label: '\u5c0f\u5c3a\u5bf8', key: 1 }]}\n        options={data}\n        size=\"small\"\n      />\n      <SearchTree\n        style={{ width: 175, marginTop: 10 }}\n        value={[{ label: '\u9ed8\u8ba4\u5c3a\u5bf8', key: 2 }]}\n        options={data}\n      />\n      <SearchTree\n        style={{ width: 200, marginTop: 10 }}\n        value={[{ label: '\u5927\u5c3a\u5bf8', key: 3 }]}\n        options={data}\n        size=\"large\"\n      />\n    </>\n  )\n}\n\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u81ea\u5b9a\u4e49\u7a7a\u9009\u9879\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React, { useState, useEffect, useRef } from 'react';\nimport {  SearchTree } from 'uiw';\n\nconst Demo = () => {\n  return(\n    <>\n      <SearchTree\n        style={{ width:200 }}\n        placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n      />\n      <SearchTree\n        style={{ width:200,marginTop:5 }}\n        emptyOption={<span>\u6682\u65e0\u6570\u636e..</span>}\n        placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n      />\n    </>\n  )\n}\n\nReactDOM.render(<Demo />, _mount_);\n```\n\n## Form\u4e2d\u4f7f\u7528\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React, { useState, useEffect, useRef } from 'react';\nimport ReactDOM from 'react-dom';\nimport {  Form, Button, SearchTree, Card, Row, Col } from 'uiw';;\n\n\nconst Demo = () => {\nconst form=useRef()\n\n  const data = [\n    {\n      label: '\u4e0a\u6d77\u5e02',\n      key: '1-0-0',\n      children:[\n        { label: '\u9ec4\u6d66\u533a', key: '1-0-1' },\n        { label: '\u5362\u6e7e\u533a', key: '1-0-2' },\n        {\n          label: '\u5f90\u6c47\u533a',\n          key: '1-0-3',\n          children:[\n            { label: '\u534a\u6dde\u56ed\u8def\u8857\u9053', key: '1-1-0' },\n            { label: '\u5357\u4eac\u4e1c\u8def\u8857\u9053', key: '1-2-0' },\n            { label: '\u5916\u6ee9\u8857\u9053', key: '1-3-0' },\n          ]\n        },\n      ]\n    },\n    {\n      label: '\u5317\u4eac\u5e02',\n      key: '2-0-0',\n      children:[\n        { label: '\u4e1c\u57ce\u533a', key: '2-1-0' },\n        { label: '\u897f\u57ce\u533a', key: '2-2-0' },\n        {\n          label: '\u5d07\u6587\u533a',\n          key: '2-3-0',\n          children:[\n            { label: '\u4e1c\u82b1\u5e02\u8857\u9053', key: '2-3-1' },\n            { label: '\u4f53\u80b2\u9986\u8def\u8857\u9053', key: '2-3-2' },\n            { label: '\u524d\u95e8\u8857\u9053', key: '2-3-3' },\n          ]\n        },\n      ]\n    },\n    { label: '\u6fb3\u95e8', key: '3' },\n  ];\n\n  const setValue=()=>{\n    form.current.setFields({\n      searchTree: [{ label: '\u4e1c\u57ce\u533a', key: '2-1-0' }, { label: '\u5916\u6ee9\u8857\u9053', key: '1-3-0' }],\n      searchTreeSinge:[{ label: '\u524d\u95e8\u8857\u9053', key: '2-3-3' }]\n       })\n  }\n\n  const resetValue=()=>{\n    form.current.resetForm()\n  }\n\n  return (\n    <div>\n      <Form\n        ref={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.searchTree) {\n            errorObj.searchTree = '\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          searchTree: {\n            initialValue:[ { label: '\u9ec4\u6d66\u533a', key: '1-0-1' }, { label: '\u5362\u6e7e\u533a', key: '1-0-2' }],\n            children: (\n                <SearchTree\n                  allowClear={true}\n                  style={{ width: 200 }}\n                  onSearch={(searchValue)=>console.log('SearchTree-> SearchTreeOption',searchValue)}\n                  onChange={(selectd, selectedAll,  isChecked)=>console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)}\n                  options={data}\n                  placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n                />\n            )\n          },\n          searchTreeSinge: {\n            initialValue:[{ label: '\u4e1c\u82b1\u5e02\u8857\u9053', key: '2-3-1' }],\n            children: (\n                <SearchTree\n                  multiple={false}\n                  style={{ width: 200 }}\n                  allowClear={true}\n                  onSearch={(searchValue)=>console.log('SearchTree-> SearchTreeOption',searchValue)}\n                  onChange={(selectd, selectedAll,  isChecked)=>console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)}\n                  options={data}\n                  placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n                />\n            )\n          },\n        }}\n      >\n        {({ fields, state, canSubmit }) => {\n          return (\n            <div>\n              <Row style={{display:'flex',flexDirection:'column'}}>\n                <div>\u591a\u9009</div>\n                <Col >{fields.searchTree}</Col>\n              </Row>\n              <Row style={{display:'flex',flexDirection:'column'}}>\n                <label>\u5355\u9009</label>\n                <Col >{fields.searchTreeSinge}</Col>\n              </Row>\n              <Row>\n                <Col fixed>\n                  <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n                  <Button onClick={setValue} type=\"primary\" >setValue</Button>\n                  <Button onClick={resetValue} type=\"primary\" >\u91cd\u7f6e</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 |\n|--------- |-------- |--------- |-------- |\n| allowClear | \u652f\u6301\u6e05\u9664 | Boolean | `false` |\n| disabled | \u7981\u7528\u9009\u62e9\u5668 | Boolean | `false` |\n| multiple | \u662f\u5426\u53ef\u4ee5\u591a\u9009 | Boolean | `true` |\n| value | \u6307\u5b9a\u5f53\u524d\u9009\u4e2d\u7684\u6761\u76ee | [{label:string, key:string}] | - |\n| options | \u4e0b\u62c9\u6570\u636e\u6e90,\u53ef\u53c2\u8003Tree\u4e0b\u62c9\u6570\u636e\u6e90 | [{label:string, key:string, children: [{label:string, key:string}] }] | - |\n| placeholder | \u9009\u62e9\u6846\u9ed8\u8ba4\u6587\u5b57 | String | - |\n| size | \u9009\u62e9\u6846\u5c3a\u5bf8 | Enum{large, default, small } | `default` |\n| onChange | \u9009\u4e2d option\uff0c\u6216 input \u7684 value\uff0c\u8c03\u7528\u6b64\u51fd\u6570 | function(selectd, selectdAll, isChecked)=>void | - |\n| onSearch | \u6587\u672c\u6846\u503c\u53d8\u5316\u65f6\u56de\u8c03 | function(searchValue) | - |\n| loading | \u52a0\u8f7d\u4e2d\u72b6\u6001 | Boolean | `false` |\n| emptyOption | \u81ea\u5b9a\u4e49\u4e0b\u62c9\u9009\u9879\u4e3a\u7a7a\u65f6\u663e\u793a\u5185\u5bb9 | React.ReactNode | [Empty](https://uiwjs.github.io/#/components/empty) |\n| tagProps | \u5c06\u53c2\u6570\u4f20\u9012\u7ed9 [`<Tag>`](https://uiwjs.github.io/#/components/tag) \u7ec4\u4ef6 | `TagProps` | `{}` | `4.13.0` |\n"}}]);
-//# sourceMappingURL=766.1191e07c.chunk.js.map
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[766],{80766:function(e,n,l){l.r(n),n.default="SearchTree \u5e26\u641c\u7d22\u7684Tree\u9009\u62e9\u63a7\u4ef6\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-tree/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-search-tree.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-search-tree)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-search-tree.svg?label=@uiw/react-search-tree)](https://npmjs.com/@uiw/react-search-tree)\n\n\u4f7f\u7528\u6811\u9009\u62e9\u63a7\u4ef6\u53ef\u4ee5\u5b8c\u6574\u5c55\u73b0\u5176\u4e2d\u7684\u5c42\u7ea7\u5173\u7cfb\uff0c\u5e76\u5177\u6709\u9009\u4e2d\u72b6\u6001\u3002\u65b0\u7ec4\u4ef6 v4.11.7+ \u652f\u6301\u3002\n\n```jsx\nimport { SearchTree } from 'uiw';\n// or\nimport SearchTree from '@uiw/react-search-tree';\n```\n\n### \u57fa\u7840\u5b9e\u4f8b\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React, { useState, useEffect, useRef } from 'react';\nimport ReactDOM from 'react-dom';\nimport {  SearchTree } from 'uiw';\n\nconst data = [\n  {\n    label: '\u4e0a\u6d77\u5e02',\n    key: 1,\n    children:[\n      { label: '\u9ec4\u6d66\u533a', key: 2 },\n      { label: '\u5362\u6e7e\u533a', key: 3 },\n      {\n        label: '\u5f90\u6c47\u533a',\n        key: 4,\n        children:[\n          { label: '\u534a\u6dde\u56ed\u8def\u8857\u9053', key: 6 },\n          { label: '\u5357\u4eac\u4e1c\u8def\u8857\u9053', key: 7 },\n          { label: '\u5916\u6ee9\u8857\u9053', key: 8 },\n        ]\n      },\n    ]\n  },\n  {\n    label: '\u5317\u4eac\u5e02',\n    key: 9,\n    children:[\n      { label: '\u4e1c\u57ce\u533a', key: 10 },\n      { label: '\u897f\u57ce\u533a', key: 11 },\n      {\n        label: '\u5d07\u6587\u533a',\n        key: 12,\n        children:[\n          { label: '\u4e1c\u82b1\u5e02\u8857\u9053', key: 13 },\n          { label: '\u4f53\u80b2\u9986\u8def\u8857\u9053', key: 14 },\n          { label: '\u524d\u95e8\u8857\u9053', key: 15 },\n        ]\n      },\n    ]\n  },\n  { label: '\u6fb3\u95e8', key: 16 },\n];\n\nconst Demo = () => {\n\nconst [value,valueSet]=useState([{ label: '\u9ec4\u6d66\u533a', key: 12 }])\nconst [valueSinge,valueSingeSet]=useState([{ label: '\u4e0a\u6d77\u5e02', key: '1-0-0' }])\n\nconst onChange=(selectd, selectedAll,  isChecked)=>{\n  console.log('SearchTree-> onChange',selectedAll, selectd, isChecked)\n  valueSet(selectedAll)\n}\n\nconst onChangeSinge=(selectd, selectedAll,  isChecked)=>{\n  console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)\n  valueSingeSet(selectedAll)\n}\n\n return (\n   <Row gutter={20}>\n    <label>\u5355\u9009</label>\n    <Row>\n      <SearchTree\n        style={{width: 200}}\n        multiple={false}\n        allowClear={true}\n        onSearch={(searchValue)=>console.log('singe',searchValue)}\n        onChange={onChangeSinge}\n        value={valueSinge}\n        options={data}\n        placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n      />\n    </Row>\n    <label>\u591a\u9009</label>\n    <Row>\n      <SearchTree\n        style={{ width: 200 }}\n        allowClear={true}\n        onSearch={(searchValue)=>console.log('multiple',searchValue)}\n        onChange={onChange}\n        value={value}\n        options={data}\n        placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n      />\n    </Row>\n    <label>\u7981\u7528</label>\n    <Row>\n      <SearchTree\n        disabled={true}\n        style={{ width: 200 }}\n        allowClear={true}\n        value={[{ label: '\u4e1c\u57ce\u533a', key: 10 },{ label: '\u6210\u90fd\u5e02',  key: 2 }]}\n        options={data}\n        placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n      />\n    </Row>\n  </Row>\n  )\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u5c3a\u5bf8\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React, { useState, useEffect, useRef } from 'react';\nimport {  SearchTree } from 'uiw';\n\nconst Demo = () => {\n\nconst data = [\n    { label: '\u5c0f\u5c3a\u5bf8', key: 1 },\n    { label: '\u9ed8\u8ba4\u5c3a\u5bf8', key: 2 },\n    { label: '\u5927\u5c3a\u5bf8', key: 3 },\n  ]\n\n  return(\n    <>\n      <SearchTree\n        style={{ width: 150 }}\n        value={[{ label: '\u5c0f\u5c3a\u5bf8', key: 1 }]}\n        options={data}\n        size=\"small\"\n      />\n      <SearchTree\n        style={{ width: 175, marginTop: 10 }}\n        value={[{ label: '\u9ed8\u8ba4\u5c3a\u5bf8', key: 2 }]}\n        options={data}\n      />\n      <SearchTree\n        style={{ width: 200, marginTop: 10 }}\n        value={[{ label: '\u5927\u5c3a\u5bf8', key: 3 }]}\n        options={data}\n        size=\"large\"\n      />\n    </>\n  )\n}\n\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u81ea\u5b9a\u4e49\u7a7a\u9009\u9879\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React, { useState, useEffect, useRef } from 'react';\nimport {  SearchTree } from 'uiw';\n\nconst Demo = () => {\n  return(\n    <>\n      <SearchTree\n        style={{ width:200 }}\n        placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n      />\n      <SearchTree\n        style={{ width:200,marginTop:5 }}\n        emptyOption={<span>\u6682\u65e0\u6570\u636e..</span>}\n        placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n      />\n    </>\n  )\n}\n\nReactDOM.render(<Demo />, _mount_);\n```\n\n## Form\u4e2d\u4f7f\u7528\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React, { useState, useEffect, useRef } from 'react';\nimport ReactDOM from 'react-dom';\nimport {  Form, Button, SearchTree, Card, Row, Col } from 'uiw';;\n\n\nconst Demo = () => {\nconst form=useRef()\n\n  const data = [\n    {\n      label: '\u4e0a\u6d77\u5e02',\n      key: '1-0-0',\n      children:[\n        { label: '\u9ec4\u6d66\u533a', key: '1-0-1' },\n        { label: '\u5362\u6e7e\u533a', key: '1-0-2' },\n        {\n          label: '\u5f90\u6c47\u533a',\n          key: '1-0-3',\n          children:[\n            { label: '\u534a\u6dde\u56ed\u8def\u8857\u9053', key: '1-1-0' },\n            { label: '\u5357\u4eac\u4e1c\u8def\u8857\u9053', key: '1-2-0' },\n            { label: '\u5916\u6ee9\u8857\u9053', key: '1-3-0' },\n          ]\n        },\n      ]\n    },\n    {\n      label: '\u5317\u4eac\u5e02',\n      key: '2-0-0',\n      children:[\n        { label: '\u4e1c\u57ce\u533a', key: '2-1-0' },\n        { label: '\u897f\u57ce\u533a', key: '2-2-0' },\n        {\n          label: '\u5d07\u6587\u533a',\n          key: '2-3-0',\n          children:[\n            { label: '\u4e1c\u82b1\u5e02\u8857\u9053', key: '2-3-1' },\n            { label: '\u4f53\u80b2\u9986\u8def\u8857\u9053', key: '2-3-2' },\n            { label: '\u524d\u95e8\u8857\u9053', key: '2-3-3' },\n          ]\n        },\n      ]\n    },\n    { label: '\u6fb3\u95e8', key: '3' },\n  ];\n\n  const setValue=()=>{\n    form.current.setFields({\n      searchTree: [{ label: '\u4e1c\u57ce\u533a', key: '2-1-0' }, { label: '\u5916\u6ee9\u8857\u9053', key: '1-3-0' }],\n      searchTreeSinge:[{ label: '\u524d\u95e8\u8857\u9053', key: '2-3-3' }]\n       })\n  }\n\n  const resetValue=()=>{\n    form.current.resetForm()\n  }\n\n  return (\n    <div>\n      <Form\n        ref={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.searchTree) {\n            errorObj.searchTree = '\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          searchTree: {\n            initialValue:[ { label: '\u9ec4\u6d66\u533a', key: '1-0-1' }, { label: '\u5362\u6e7e\u533a', key: '1-0-2' }],\n            children: (\n                <SearchTree\n                  allowClear={true}\n                  style={{ width: 200 }}\n                  onSearch={(searchValue)=>console.log('SearchTree-> SearchTreeOption',searchValue)}\n                  onChange={(selectd, selectedAll,  isChecked)=>console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)}\n                  options={data}\n                  placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n                />\n            )\n          },\n          searchTreeSinge: {\n            initialValue:[{ label: '\u4e1c\u82b1\u5e02\u8857\u9053', key: '2-3-1' }],\n            children: (\n                <SearchTree\n                  multiple={false}\n                  style={{ width: 200 }}\n                  allowClear={true}\n                  onSearch={(searchValue)=>console.log('SearchTree-> SearchTreeOption',searchValue)}\n                  onChange={(selectd, selectedAll,  isChecked)=>console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)}\n                  options={data}\n                  placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n                />\n            )\n          },\n        }}\n      >\n        {({ fields, state, canSubmit }) => {\n          return (\n            <div>\n              <Row style={{display:'flex',flexDirection:'column'}}>\n                <div>\u591a\u9009</div>\n                <Col >{fields.searchTree}</Col>\n              </Row>\n              <Row style={{display:'flex',flexDirection:'column'}}>\n                <label>\u5355\u9009</label>\n                <Col >{fields.searchTreeSinge}</Col>\n              </Row>\n              <Row>\n                <Col fixed>\n                  <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n                  <Button onClick={setValue} type=\"primary\" >setValue</Button>\n                  <Button onClick={resetValue} type=\"primary\" >\u91cd\u7f6e</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 |\n|--------- |-------- |--------- |-------- |\n| allowClear | \u652f\u6301\u6e05\u9664 | Boolean | `false` |\n| disabled | \u7981\u7528\u9009\u62e9\u5668 | Boolean | `false` |\n| multiple | \u662f\u5426\u53ef\u4ee5\u591a\u9009 | Boolean | `true` |\n| value | \u6307\u5b9a\u5f53\u524d\u9009\u4e2d\u7684\u6761\u76ee | [{label:string, key:string}] | - |\n| options | \u4e0b\u62c9\u6570\u636e\u6e90,\u53ef\u53c2\u8003Tree\u4e0b\u62c9\u6570\u636e\u6e90 | [{label:string, key:string, children: [{label:string, key:string}] }] | - |\n| placeholder | \u9009\u62e9\u6846\u9ed8\u8ba4\u6587\u5b57 | String | - |\n| size | \u9009\u62e9\u6846\u5c3a\u5bf8 | Enum{large, default, small } | `default` |\n| onChange | \u9009\u4e2d option\uff0c\u6216 input \u7684 value\uff0c\u8c03\u7528\u6b64\u51fd\u6570 | function(selectd, selectdAll, isChecked)=>void | - |\n| onSearch | \u6587\u672c\u6846\u503c\u53d8\u5316\u65f6\u56de\u8c03 | function(searchValue) | - |\n| loading | \u52a0\u8f7d\u4e2d\u72b6\u6001 | Boolean | `false` |\n| emptyOption | \u81ea\u5b9a\u4e49\u4e0b\u62c9\u9009\u9879\u4e3a\u7a7a\u65f6\u663e\u793a\u5185\u5bb9 | React.ReactNode | [Empty](#/components/empty) |\n| tagProps | \u5c06\u53c2\u6570\u4f20\u9012\u7ed9 [`<Tag>`](#/components/tag) \u7ec4\u4ef6 | `TagProps` | `{}` | `4.13.0` |\n"}}]);
+//# sourceMappingURL=766.743dae68.chunk.js.map

package/web/static/js/{766.1191e07c.chunk.js.map → 766.743dae68.chunk.js.map}

@@ -1 +1 @@
-{"version":3,"file":"static/js/766.1191e07c.chunk.js","mappings":"+GAAA","sources":["../../packages/react-search-tree/README.md"],"sourcesContent":["export default \"SearchTree 带搜索的Tree选择控件\\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-tree/file/README.md)\\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-search-tree.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-search-tree)\\n[![npm version](https://img.shields.io/npm/v/@uiw/react-search-tree.svg?label=@uiw/react-search-tree)](https://npmjs.com/@uiw/react-search-tree)\\n\\n使用树选择控件可以完整展现其中的层级关系，并具有选中状态。新组件 v4.11.7+ 支持。\\n\\n```jsx\\nimport { SearchTree } from 'uiw';\\n// or\\nimport SearchTree from '@uiw/react-search-tree';\\n```\\n\\n### 基础实例\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React, { useState, useEffect, useRef } from 'react';\\nimport ReactDOM from 'react-dom';\\nimport {  SearchTree } from 'uiw';\\n\\nconst data = [\\n  {\\n    label: '上海市',\\n    key: 1,\\n    children:[\\n      { label: '黄浦区', key: 2 },\\n      { label: '卢湾区', key: 3 },\\n      {\\n        label: '徐汇区',\\n        key: 4,\\n        children:[\\n          { label: '半淞园路街道', key: 6 },\\n          { label: '南京东路街道', key: 7 },\\n          { label: '外滩街道', key: 8 },\\n        ]\\n      },\\n    ]\\n  },\\n  {\\n    label: '北京市',\\n    key: 9,\\n    children:[\\n      { label: '东城区', key: 10 },\\n      { label: '西城区', key: 11 },\\n      {\\n        label: '崇文区',\\n        key: 12,\\n        children:[\\n          { label: '东花市街道', key: 13 },\\n          { label: '体育馆路街道', key: 14 },\\n          { label: '前门街道', key: 15 },\\n        ]\\n      },\\n    ]\\n  },\\n  { label: '澳门', key: 16 },\\n];\\n\\nconst Demo = () => {\\n\\nconst [value,valueSet]=useState([{ label: '黄浦区', key: 12 }])\\nconst [valueSinge,valueSingeSet]=useState([{ label: '上海市', key: '1-0-0' }])\\n\\nconst onChange=(selectd, selectedAll,  isChecked)=>{\\n  console.log('SearchTree-> onChange',selectedAll, selectd, isChecked)\\n  valueSet(selectedAll)\\n}\\n\\nconst onChangeSinge=(selectd, selectedAll,  isChecked)=>{\\n  console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)\\n  valueSingeSet(selectedAll)\\n}\\n\\n return (\\n   <Row gutter={20}>\\n    <label>单选</label>\\n    <Row>\\n      <SearchTree\\n        style={{width: 200}}\\n        multiple={false}\\n        allowClear={true}\\n        onSearch={(searchValue)=>console.log('singe',searchValue)}\\n        onChange={onChangeSinge}\\n        value={valueSinge}\\n        options={data}\\n        placeholder=\\\"请输入选择\\\"\\n      />\\n    </Row>\\n    <label>多选</label>\\n    <Row>\\n      <SearchTree\\n        style={{ width: 200 }}\\n        allowClear={true}\\n        onSearch={(searchValue)=>console.log('multiple',searchValue)}\\n        onChange={onChange}\\n        value={value}\\n        options={data}\\n        placeholder=\\\"请输入选择\\\"\\n      />\\n    </Row>\\n    <label>禁用</label>\\n    <Row>\\n      <SearchTree\\n        disabled={true}\\n        style={{ width: 200 }}\\n        allowClear={true}\\n        value={[{ label: '东城区', key: 10 },{ label: '成都市',  key: 2 }]}\\n        options={data}\\n        placeholder=\\\"请输入选择\\\"\\n      />\\n    </Row>\\n  </Row>\\n  )\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 尺寸\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React, { useState, useEffect, useRef } from 'react';\\nimport {  SearchTree } from 'uiw';\\n\\nconst Demo = () => {\\n\\nconst data = [\\n    { label: '小尺寸', key: 1 },\\n    { label: '默认尺寸', key: 2 },\\n    { label: '大尺寸', key: 3 },\\n  ]\\n\\n  return(\\n    <>\\n      <SearchTree\\n        style={{ width: 150 }}\\n        value={[{ label: '小尺寸', key: 1 }]}\\n        options={data}\\n        size=\\\"small\\\"\\n      />\\n      <SearchTree\\n        style={{ width: 175, marginTop: 10 }}\\n        value={[{ label: '默认尺寸', key: 2 }]}\\n        options={data}\\n      />\\n      <SearchTree\\n        style={{ width: 200, marginTop: 10 }}\\n        value={[{ label: '大尺寸', key: 3 }]}\\n        options={data}\\n        size=\\\"large\\\"\\n      />\\n    </>\\n  )\\n}\\n\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 自定义空选项\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React, { useState, useEffect, useRef } from 'react';\\nimport {  SearchTree } from 'uiw';\\n\\nconst Demo = () => {\\n  return(\\n    <>\\n      <SearchTree\\n        style={{ width:200 }}\\n        placeholder=\\\"请输入选择\\\"\\n      />\\n      <SearchTree\\n        style={{ width:200,marginTop:5 }}\\n        emptyOption={<span>暂无数据..</span>}\\n        placeholder=\\\"请输入选择\\\"\\n      />\\n    </>\\n  )\\n}\\n\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Form中使用\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React, { useState, useEffect, useRef } from 'react';\\nimport ReactDOM from 'react-dom';\\nimport {  Form, Button, SearchTree, Card, Row, Col } from 'uiw';;\\n\\n\\nconst Demo = () => {\\nconst form=useRef()\\n\\n  const data = [\\n    {\\n      label: '上海市',\\n      key: '1-0-0',\\n      children:[\\n        { label: '黄浦区', key: '1-0-1' },\\n        { label: '卢湾区', key: '1-0-2' },\\n        {\\n          label: '徐汇区',\\n          key: '1-0-3',\\n          children:[\\n            { label: '半淞园路街道', key: '1-1-0' },\\n            { label: '南京东路街道', key: '1-2-0' },\\n            { label: '外滩街道', key: '1-3-0' },\\n          ]\\n        },\\n      ]\\n    },\\n    {\\n      label: '北京市',\\n      key: '2-0-0',\\n      children:[\\n        { label: '东城区', key: '2-1-0' },\\n        { label: '西城区', key: '2-2-0' },\\n        {\\n          label: '崇文区',\\n          key: '2-3-0',\\n          children:[\\n            { label: '东花市街道', key: '2-3-1' },\\n            { label: '体育馆路街道', key: '2-3-2' },\\n            { label: '前门街道', key: '2-3-3' },\\n          ]\\n        },\\n      ]\\n    },\\n    { label: '澳门', key: '3' },\\n  ];\\n\\n  const setValue=()=>{\\n    form.current.setFields({\\n      searchTree: [{ label: '东城区', key: '2-1-0' }, { label: '外滩街道', key: '1-3-0' }],\\n      searchTreeSinge:[{ label: '前门街道', key: '2-3-3' }]\\n       })\\n  }\\n\\n  const resetValue=()=>{\\n    form.current.resetForm()\\n  }\\n\\n  return (\\n    <div>\\n      <Form\\n        ref={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.searchTree) {\\n            errorObj.searchTree = '默认需要选择内容，选择入内容';\\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          searchTree: {\\n            initialValue:[ { label: '黄浦区', key: '1-0-1' }, { label: '卢湾区', key: '1-0-2' }],\\n            children: (\\n                <SearchTree\\n                  allowClear={true}\\n                  style={{ width: 200 }}\\n                  onSearch={(searchValue)=>console.log('SearchTree-> SearchTreeOption',searchValue)}\\n                  onChange={(selectd, selectedAll,  isChecked)=>console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)}\\n                  options={data}\\n                  placeholder=\\\"请输入选择\\\"\\n                />\\n            )\\n          },\\n          searchTreeSinge: {\\n            initialValue:[{ label: '东花市街道', key: '2-3-1' }],\\n            children: (\\n                <SearchTree\\n                  multiple={false}\\n                  style={{ width: 200 }}\\n                  allowClear={true}\\n                  onSearch={(searchValue)=>console.log('SearchTree-> SearchTreeOption',searchValue)}\\n                  onChange={(selectd, selectedAll,  isChecked)=>console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)}\\n                  options={data}\\n                  placeholder=\\\"请输入选择\\\"\\n                />\\n            )\\n          },\\n        }}\\n      >\\n        {({ fields, state, canSubmit }) => {\\n          return (\\n            <div>\\n              <Row style={{display:'flex',flexDirection:'column'}}>\\n                <div>多选</div>\\n                <Col >{fields.searchTree}</Col>\\n              </Row>\\n              <Row style={{display:'flex',flexDirection:'column'}}>\\n                <label>单选</label>\\n                <Col >{fields.searchTreeSinge}</Col>\\n              </Row>\\n              <Row>\\n                <Col fixed>\\n                  <Button disabled={!canSubmit()} type=\\\"primary\\\" htmlType=\\\"submit\\\">提交</Button>\\n                  <Button onClick={setValue} type=\\\"primary\\\" >setValue</Button>\\n                  <Button onClick={resetValue} type=\\\"primary\\\" >重置</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| multiple | 是否可以多选 | Boolean | `true` |\\n| value | 指定当前选中的条目 | [{label:string, key:string}] | - |\\n| options | 下拉数据源,可参考Tree下拉数据源 | [{label:string, key:string, children: [{label:string, key:string}] }] | - |\\n| placeholder | 选择框默认文字 | String | - |\\n| size | 选择框尺寸 | Enum{large, default, small } | `default` |\\n| onChange | 选中 option，或 input 的 value，调用此函数 | function(selectd, selectdAll, isChecked)=>void | - |\\n| onSearch | 文本框值变化时回调 | function(searchValue) | - |\\n| loading | 加载中状态 | Boolean | `false` |\\n| emptyOption | 自定义下拉选项为空时显示内容 | React.ReactNode | [Empty](https://uiwjs.github.io/#/components/empty) |\\n| tagProps | 将参数传递给 [`<Tag>`](https://uiwjs.github.io/#/components/tag) 组件 | `TagProps` | `{}` | `4.13.0` |\\n\";"],"names":[],"sourceRoot":""}
+{"version":3,"file":"static/js/766.743dae68.chunk.js","mappings":"+GAAA","sources":["../../packages/react-search-tree/README.md"],"sourcesContent":["export default \"SearchTree 带搜索的Tree选择控件\\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-tree/file/README.md)\\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-search-tree.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-search-tree)\\n[![npm version](https://img.shields.io/npm/v/@uiw/react-search-tree.svg?label=@uiw/react-search-tree)](https://npmjs.com/@uiw/react-search-tree)\\n\\n使用树选择控件可以完整展现其中的层级关系，并具有选中状态。新组件 v4.11.7+ 支持。\\n\\n```jsx\\nimport { SearchTree } from 'uiw';\\n// or\\nimport SearchTree from '@uiw/react-search-tree';\\n```\\n\\n### 基础实例\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React, { useState, useEffect, useRef } from 'react';\\nimport ReactDOM from 'react-dom';\\nimport {  SearchTree } from 'uiw';\\n\\nconst data = [\\n  {\\n    label: '上海市',\\n    key: 1,\\n    children:[\\n      { label: '黄浦区', key: 2 },\\n      { label: '卢湾区', key: 3 },\\n      {\\n        label: '徐汇区',\\n        key: 4,\\n        children:[\\n          { label: '半淞园路街道', key: 6 },\\n          { label: '南京东路街道', key: 7 },\\n          { label: '外滩街道', key: 8 },\\n        ]\\n      },\\n    ]\\n  },\\n  {\\n    label: '北京市',\\n    key: 9,\\n    children:[\\n      { label: '东城区', key: 10 },\\n      { label: '西城区', key: 11 },\\n      {\\n        label: '崇文区',\\n        key: 12,\\n        children:[\\n          { label: '东花市街道', key: 13 },\\n          { label: '体育馆路街道', key: 14 },\\n          { label: '前门街道', key: 15 },\\n        ]\\n      },\\n    ]\\n  },\\n  { label: '澳门', key: 16 },\\n];\\n\\nconst Demo = () => {\\n\\nconst [value,valueSet]=useState([{ label: '黄浦区', key: 12 }])\\nconst [valueSinge,valueSingeSet]=useState([{ label: '上海市', key: '1-0-0' }])\\n\\nconst onChange=(selectd, selectedAll,  isChecked)=>{\\n  console.log('SearchTree-> onChange',selectedAll, selectd, isChecked)\\n  valueSet(selectedAll)\\n}\\n\\nconst onChangeSinge=(selectd, selectedAll,  isChecked)=>{\\n  console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)\\n  valueSingeSet(selectedAll)\\n}\\n\\n return (\\n   <Row gutter={20}>\\n    <label>单选</label>\\n    <Row>\\n      <SearchTree\\n        style={{width: 200}}\\n        multiple={false}\\n        allowClear={true}\\n        onSearch={(searchValue)=>console.log('singe',searchValue)}\\n        onChange={onChangeSinge}\\n        value={valueSinge}\\n        options={data}\\n        placeholder=\\\"请输入选择\\\"\\n      />\\n    </Row>\\n    <label>多选</label>\\n    <Row>\\n      <SearchTree\\n        style={{ width: 200 }}\\n        allowClear={true}\\n        onSearch={(searchValue)=>console.log('multiple',searchValue)}\\n        onChange={onChange}\\n        value={value}\\n        options={data}\\n        placeholder=\\\"请输入选择\\\"\\n      />\\n    </Row>\\n    <label>禁用</label>\\n    <Row>\\n      <SearchTree\\n        disabled={true}\\n        style={{ width: 200 }}\\n        allowClear={true}\\n        value={[{ label: '东城区', key: 10 },{ label: '成都市',  key: 2 }]}\\n        options={data}\\n        placeholder=\\\"请输入选择\\\"\\n      />\\n    </Row>\\n  </Row>\\n  )\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 尺寸\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React, { useState, useEffect, useRef } from 'react';\\nimport {  SearchTree } from 'uiw';\\n\\nconst Demo = () => {\\n\\nconst data = [\\n    { label: '小尺寸', key: 1 },\\n    { label: '默认尺寸', key: 2 },\\n    { label: '大尺寸', key: 3 },\\n  ]\\n\\n  return(\\n    <>\\n      <SearchTree\\n        style={{ width: 150 }}\\n        value={[{ label: '小尺寸', key: 1 }]}\\n        options={data}\\n        size=\\\"small\\\"\\n      />\\n      <SearchTree\\n        style={{ width: 175, marginTop: 10 }}\\n        value={[{ label: '默认尺寸', key: 2 }]}\\n        options={data}\\n      />\\n      <SearchTree\\n        style={{ width: 200, marginTop: 10 }}\\n        value={[{ label: '大尺寸', key: 3 }]}\\n        options={data}\\n        size=\\\"large\\\"\\n      />\\n    </>\\n  )\\n}\\n\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 自定义空选项\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React, { useState, useEffect, useRef } from 'react';\\nimport {  SearchTree } from 'uiw';\\n\\nconst Demo = () => {\\n  return(\\n    <>\\n      <SearchTree\\n        style={{ width:200 }}\\n        placeholder=\\\"请输入选择\\\"\\n      />\\n      <SearchTree\\n        style={{ width:200,marginTop:5 }}\\n        emptyOption={<span>暂无数据..</span>}\\n        placeholder=\\\"请输入选择\\\"\\n      />\\n    </>\\n  )\\n}\\n\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Form中使用\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React, { useState, useEffect, useRef } from 'react';\\nimport ReactDOM from 'react-dom';\\nimport {  Form, Button, SearchTree, Card, Row, Col } from 'uiw';;\\n\\n\\nconst Demo = () => {\\nconst form=useRef()\\n\\n  const data = [\\n    {\\n      label: '上海市',\\n      key: '1-0-0',\\n      children:[\\n        { label: '黄浦区', key: '1-0-1' },\\n        { label: '卢湾区', key: '1-0-2' },\\n        {\\n          label: '徐汇区',\\n          key: '1-0-3',\\n          children:[\\n            { label: '半淞园路街道', key: '1-1-0' },\\n            { label: '南京东路街道', key: '1-2-0' },\\n            { label: '外滩街道', key: '1-3-0' },\\n          ]\\n        },\\n      ]\\n    },\\n    {\\n      label: '北京市',\\n      key: '2-0-0',\\n      children:[\\n        { label: '东城区', key: '2-1-0' },\\n        { label: '西城区', key: '2-2-0' },\\n        {\\n          label: '崇文区',\\n          key: '2-3-0',\\n          children:[\\n            { label: '东花市街道', key: '2-3-1' },\\n            { label: '体育馆路街道', key: '2-3-2' },\\n            { label: '前门街道', key: '2-3-3' },\\n          ]\\n        },\\n      ]\\n    },\\n    { label: '澳门', key: '3' },\\n  ];\\n\\n  const setValue=()=>{\\n    form.current.setFields({\\n      searchTree: [{ label: '东城区', key: '2-1-0' }, { label: '外滩街道', key: '1-3-0' }],\\n      searchTreeSinge:[{ label: '前门街道', key: '2-3-3' }]\\n       })\\n  }\\n\\n  const resetValue=()=>{\\n    form.current.resetForm()\\n  }\\n\\n  return (\\n    <div>\\n      <Form\\n        ref={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.searchTree) {\\n            errorObj.searchTree = '默认需要选择内容，选择入内容';\\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          searchTree: {\\n            initialValue:[ { label: '黄浦区', key: '1-0-1' }, { label: '卢湾区', key: '1-0-2' }],\\n            children: (\\n                <SearchTree\\n                  allowClear={true}\\n                  style={{ width: 200 }}\\n                  onSearch={(searchValue)=>console.log('SearchTree-> SearchTreeOption',searchValue)}\\n                  onChange={(selectd, selectedAll,  isChecked)=>console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)}\\n                  options={data}\\n                  placeholder=\\\"请输入选择\\\"\\n                />\\n            )\\n          },\\n          searchTreeSinge: {\\n            initialValue:[{ label: '东花市街道', key: '2-3-1' }],\\n            children: (\\n                <SearchTree\\n                  multiple={false}\\n                  style={{ width: 200 }}\\n                  allowClear={true}\\n                  onSearch={(searchValue)=>console.log('SearchTree-> SearchTreeOption',searchValue)}\\n                  onChange={(selectd, selectedAll,  isChecked)=>console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)}\\n                  options={data}\\n                  placeholder=\\\"请输入选择\\\"\\n                />\\n            )\\n          },\\n        }}\\n      >\\n        {({ fields, state, canSubmit }) => {\\n          return (\\n            <div>\\n              <Row style={{display:'flex',flexDirection:'column'}}>\\n                <div>多选</div>\\n                <Col >{fields.searchTree}</Col>\\n              </Row>\\n              <Row style={{display:'flex',flexDirection:'column'}}>\\n                <label>单选</label>\\n                <Col >{fields.searchTreeSinge}</Col>\\n              </Row>\\n              <Row>\\n                <Col fixed>\\n                  <Button disabled={!canSubmit()} type=\\\"primary\\\" htmlType=\\\"submit\\\">提交</Button>\\n                  <Button onClick={setValue} type=\\\"primary\\\" >setValue</Button>\\n                  <Button onClick={resetValue} type=\\\"primary\\\" >重置</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| multiple | 是否可以多选 | Boolean | `true` |\\n| value | 指定当前选中的条目 | [{label:string, key:string}] | - |\\n| options | 下拉数据源,可参考Tree下拉数据源 | [{label:string, key:string, children: [{label:string, key:string}] }] | - |\\n| placeholder | 选择框默认文字 | String | - |\\n| size | 选择框尺寸 | Enum{large, default, small } | `default` |\\n| onChange | 选中 option，或 input 的 value，调用此函数 | function(selectd, selectdAll, isChecked)=>void | - |\\n| onSearch | 文本框值变化时回调 | function(searchValue) | - |\\n| loading | 加载中状态 | Boolean | `false` |\\n| emptyOption | 自定义下拉选项为空时显示内容 | React.ReactNode | [Empty](#/components/empty) |\\n| tagProps | 将参数传递给 [`<Tag>`](#/components/tag) 组件 | `TagProps` | `{}` | `4.13.0` |\\n\";"],"names":[],"sourceRoot":""}

package/web/static/js/7970.eba3f785.chunk.js

@@ -0,0 +1,2 @@
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7970],{37970:function(n,e,t){t.r(e),e.default="Transfer \u7a7f\u68ad\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-transfer/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-transfer.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-transfer)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-transfer.svg?label=@uiw/react-transfer)](https://npmjs.com/@uiw/react-transfer)\n\n\u9009\u62e9\u4e00\u4e2a\u6216\u4ee5\u4e0a\u7684\u9009\u9879\u540e\uff0c\u70b9\u51fb\u5de6\u53f3\u7684\u65b9\u5411\u6309\u94ae\uff0c\u53ef\u4ee5\u628a\u9009\u4e2d\u7684\u9009\u9879\u79fb\u52a8\u5230\u53e6\u4e00\u680f\u4e3a\u9009\u4e2d\u3002\u5728 v4.14.0+ \u6dfb\u52a0\u3002\n\n## \u57fa\u7840\u7528\u6cd5\n\n\u6700\u7b80\u5355\u7684\u7528\u6cd5\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport { Transfer } from 'uiw';\n\nfunction Demo() {\n\n  const options = [\n    { label: '\u6b66\u6c49\u5e02',  key: 1 },\n    { label: '\u6c49\u5357\u533a1', key: 5 },\n    { label: '\u6c49\u5357\u533a2', key: 6 },\n    { label: '\u6c49\u5357\u533a3', key: 7 },\n  ]\n\n  const [value,valueSet] = React.useState([{ label: '\u6b66\u6c49\u5e02',  key: 1 }])\n\n  return (\n    <Row style={{ flexDirection:'column' }} >\n      <Transfer\n        options={options}\n        value={value}\n        onChange={(transfer,option)=>{\n          valueSet(option)\n        }}\n      />\n    </Row>\n  );\n}\n\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u6811\u5f62\u8282\u70b9\n\n\u4f7f\u7528 [`Tree`](#/components/tree) \u7ed3\u6784\u4f5c\u4e3a\u9009\u9879\u8282\u70b9\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport { Transfer } from 'uiw';\n\nfunction Demo() {\nconst options = [\n    {\n      label: '\u6b66\u6c49\u5e02',\n      key: 1,\n      children: [\n        { label: '\u65b0\u6d32\u533a', key: 2, disabled: true },\n        { label: '\u6b66\u660c\u533a', key: 3 },\n        {\n          label: '\u6c49\u5357\u533a',\n          key: 4,\n          children: [\n            { label: '\u6c49\u5357\u533a1', key: 5 },\n            { label: '\u6c49\u5357\u533a2', key: 6 },\n            { label: '\u6c49\u5357\u533a3', key: 7 },\n          ]\n        },\n      ]\n    }\n  ];\n\n  const [value,valueSet] = React.useState([{ label: '\u6c49\u5357\u533a1', key: 5 }])\n\n  return (\n    <Row style={{ flexDirection:'column' }} >\n      <Transfer\n        options={options}\n        value={value}\n        onChange={(transfer,option)=>{\n          valueSet(option)\n        }}\n      />\n    </Row>\n  );\n}\n\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u5168\u90e8\u9009\u62e9\n\n\u5c06`selectedAll`\u8bbe\u7f6e\u4e3a`true`,\u542f\u7528\u5168\u90e8\u52fe\u9009\u529f\u80fd\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport { Transfer } from 'uiw';\n\nfunction Demo() {\n\n  const options = [\n    {\n      label: '\u6b66\u6c49\u5e02',\n      key: 1,\n      children: [\n        { label: '\u65b0\u6d32\u533a', key: 2 },\n        { label: '\u6b66\u660c\u533a', key: 3 },\n        {\n          label: '\u6c49\u5357\u533a',\n          key: 4,\n          children: [\n            { label: '\u6c49\u5357\u533a1', key: 5 },\n            { label: '\u6c49\u5357\u533a2', key: 6 },\n            { label: '\u6c49\u5357\u533a3', key: 7 },\n          ]\n        },\n      ]\n    }\n  ];\n\n  const [value,valueSet] = React.useState([{ label: '\u6b66\u660c\u533a', key: 3 }, { label: '\u6c49\u5357\u533a1', key: 5 }])\n\n  return (\n    <Row style={{ flexDirection:'column' }} >\n      <Transfer\n        options={options}\n        selectedAll={true}\n        value={value}\n        onChange={(transfer,option)=>{\n          valueSet(option)\n        }}\n      />\n    </Row>\n  );\n}\n\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u641c\u7d22\u9009\u9879\n\n\u5c06`showSearch`\u8bbe\u7f6e\u4e3a`true`\uff0c\u542f\u7528\u9009\u9879\u641c\u7d22\u6846\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport { Transfer } from 'uiw';\n\nfunction Demo() {\nconst options = [\n    {\n      label: '\u6b66\u6c49\u5e02',\n      key: 1,\n      children: [\n        { label: '\u65b0\u6d32\u533a', key: 2, disabled: true },\n        { label: '\u6b66\u660c\u533a', key: 3 },\n        {\n          label: '\u6c49\u5357\u533a',\n          key: 4,\n          children: [\n            { label: '\u6c49\u5357\u533a1', key: 5 },\n            { label: '\u6c49\u5357\u533a2', key: 6 },\n            { label: '\u6c49\u5357\u533a3', key: 7 },\n          ]\n        },\n      ]\n    }\n  ];\n\n  const [value,valueSet] = React.useState([\n    { label: '\u6b66\u660c\u533a', key: 3 },\n    { label: '\u6c49\u5357\u533a1', key: 5 },\n    { label: '\u6c49\u5357\u533a2', key: 6 },\n  ])\n\n  return (\n    <Row style={{ flexDirection:'column' }} >\n      <Transfer\n        options={options}\n        showSearch={true}\n        placeholder=\"\u641c\u7d22\u5185\u5bb9\"\n        value={value}\n        onChange={(transfer,option)=>{\n          valueSet(option)\n        }}\n      />\n    </Row>\n  );\n}\n\nReactDOM.render(<Demo />, _mount_);\n```\n\n## Form\u4e2d\u4f7f\u7528\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport { Transfer, Form } from 'uiw';\n\nfunction Demo() {\n\n  const options = [\n    { label: '\u6b66\u6c49\u5e02',  key: 1 },\n    { label: '\u6c49\u5357\u533a1', key: 5 },\n    { label: '\u6c49\u5357\u533a2', key: 6 },\n    { label: '\u6c49\u5357\u533a3', key: 7 },\n  ]\n\n  const [value,valueSet] = React.useState([{ label: '\u6b66\u6c49\u5e02',  key: 1 }])\n  const form=React.useRef()\n\n  const setValue=()=>{\n    form.current.setFields({\n     transfer: [\n        { label: '\u6c49\u5357\u533a1', key: 5 },\n        { label: '\u6c49\u5357\u533a3', key: 7 },\n      ]\n    })\n  }\n\n  const resetValue=()=>{\n    form.current.resetForm()\n  }\n\n  return (\n    <Form\n        ref={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.searchTree) {\n            errorObj.searchTree = '\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          transfer: {\n            initialValue:[{ label: '\u6c49\u5357\u533a2', key: 6 },{ label: '\u6c49\u5357\u533a3', key: 7 },],\n            children: (\n              <Transfer options={options}/>\n            )\n          }\n        }}\n      >\n        {({ fields, state, canSubmit }) => {\n          return (\n            <div>\n              <Row style={{display:'flex',flexDirection:'column'}}>\n                <Col >{fields.transfer}</Col>\n              </Row>\n              <Row>\n                <Col fixed>\n                  <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n                  <Button onClick={setValue} type=\"primary\" >setValue</Button>\n                  <Button onClick={resetValue} type=\"primary\" >\u91cd\u7f6e</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  );\n}\n\nReactDOM.render(<Demo />, _mount_);\n```\n\n## Props\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| bodyStyle | \u9009\u9879\u533a\u57df\u6837\u5f0f | Object | { height: 200px, overflow-y: auto } |\n| onChange | \u70b9\u51fb\u7a7f\u68ad\u65f6\u56de\u8c03 | (arrow, selectkeys) => void | - |\n| value | \u6307\u5b9a\u5f53\u524d\u9009\u4e2d\u7684\u6761\u76ee | [{label, key }] | - |\n| options | \u4e0b\u62c9\u6570\u636e\u6e90,\u53ef\u53c2\u8003Tree\u4e0b\u62c9\u6570\u636e\u6e90 | [{ label, key, children: [{label, key}] }] | - |\n| showSearch | \u542f\u7528\u641c\u7d22 | boolean | false |\n| placeholder | \u641c\u7d22\u8f93\u5165\u6846\u6587\u5b57 | string | - |\n| onSearch | \u641c\u7d22\u65f6\u56de\u8c03\u51fd\u6570 |  (arrow, searchValue) => void | - |\n| selectedAll | \u542f\u7528\u5168\u90e8\u52fe\u9009 |  boolean | false |\n"}}]);
+//# sourceMappingURL=7970.eba3f785.chunk.js.map

package/web/static/js/7970.eba3f785.chunk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"static/js/7970.eba3f785.chunk.js","mappings":"gHAAA","sources":["../../packages/react-transfer/README.md"],"sourcesContent":["export default \"Transfer 穿梭框\\n===\\n\\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-transfer/file/README.md)\\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-transfer.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-transfer)\\n[![npm version](https://img.shields.io/npm/v/@uiw/react-transfer.svg?label=@uiw/react-transfer)](https://npmjs.com/@uiw/react-transfer)\\n\\n选择一个或以上的选项后，点击左右的方向按钮，可以把选中的选项移动到另一栏为选中。在 v4.14.0+ 添加。\\n\\n## 基础用法\\n\\n最简单的用法。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport { Transfer } from 'uiw';\\n\\nfunction Demo() {\\n\\n  const options = [\\n    { label: '武汉市',  key: 1 },\\n    { label: '汉南区1', key: 5 },\\n    { label: '汉南区2', key: 6 },\\n    { label: '汉南区3', key: 7 },\\n  ]\\n\\n  const [value,valueSet] = React.useState([{ label: '武汉市',  key: 1 }])\\n\\n  return (\\n    <Row style={{ flexDirection:'column' }} >\\n      <Transfer\\n        options={options}\\n        value={value}\\n        onChange={(transfer,option)=>{\\n          valueSet(option)\\n        }}\\n      />\\n    </Row>\\n  );\\n}\\n\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 树形节点\\n\\n使用 [`Tree`](#/components/tree) 结构作为选项节点\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport { Transfer } from 'uiw';\\n\\nfunction Demo() {\\nconst options = [\\n    {\\n      label: '武汉市',\\n      key: 1,\\n      children: [\\n        { label: '新洲区', key: 2, disabled: true },\\n        { label: '武昌区', key: 3 },\\n        {\\n          label: '汉南区',\\n          key: 4,\\n          children: [\\n            { label: '汉南区1', key: 5 },\\n            { label: '汉南区2', key: 6 },\\n            { label: '汉南区3', key: 7 },\\n          ]\\n        },\\n      ]\\n    }\\n  ];\\n\\n  const [value,valueSet] = React.useState([{ label: '汉南区1', key: 5 }])\\n\\n  return (\\n    <Row style={{ flexDirection:'column' }} >\\n      <Transfer\\n        options={options}\\n        value={value}\\n        onChange={(transfer,option)=>{\\n          valueSet(option)\\n        }}\\n      />\\n    </Row>\\n  );\\n}\\n\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 全部选择\\n\\n将`selectedAll`设置为`true`,启用全部勾选功能\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport { Transfer } from 'uiw';\\n\\nfunction Demo() {\\n\\n  const options = [\\n    {\\n      label: '武汉市',\\n      key: 1,\\n      children: [\\n        { label: '新洲区', key: 2 },\\n        { label: '武昌区', key: 3 },\\n        {\\n          label: '汉南区',\\n          key: 4,\\n          children: [\\n            { label: '汉南区1', key: 5 },\\n            { label: '汉南区2', key: 6 },\\n            { label: '汉南区3', key: 7 },\\n          ]\\n        },\\n      ]\\n    }\\n  ];\\n\\n  const [value,valueSet] = React.useState([{ label: '武昌区', key: 3 }, { label: '汉南区1', key: 5 }])\\n\\n  return (\\n    <Row style={{ flexDirection:'column' }} >\\n      <Transfer\\n        options={options}\\n        selectedAll={true}\\n        value={value}\\n        onChange={(transfer,option)=>{\\n          valueSet(option)\\n        }}\\n      />\\n    </Row>\\n  );\\n}\\n\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 搜索选项\\n\\n将`showSearch`设置为`true`，启用选项搜索框\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport { Transfer } from 'uiw';\\n\\nfunction Demo() {\\nconst options = [\\n    {\\n      label: '武汉市',\\n      key: 1,\\n      children: [\\n        { label: '新洲区', key: 2, disabled: true },\\n        { label: '武昌区', key: 3 },\\n        {\\n          label: '汉南区',\\n          key: 4,\\n          children: [\\n            { label: '汉南区1', key: 5 },\\n            { label: '汉南区2', key: 6 },\\n            { label: '汉南区3', key: 7 },\\n          ]\\n        },\\n      ]\\n    }\\n  ];\\n\\n  const [value,valueSet] = React.useState([\\n    { label: '武昌区', key: 3 },\\n    { label: '汉南区1', key: 5 },\\n    { label: '汉南区2', key: 6 },\\n  ])\\n\\n  return (\\n    <Row style={{ flexDirection:'column' }} >\\n      <Transfer\\n        options={options}\\n        showSearch={true}\\n        placeholder=\\\"搜索内容\\\"\\n        value={value}\\n        onChange={(transfer,option)=>{\\n          valueSet(option)\\n        }}\\n      />\\n    </Row>\\n  );\\n}\\n\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Form中使用\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport { Transfer, Form } from 'uiw';\\n\\nfunction Demo() {\\n\\n  const options = [\\n    { label: '武汉市',  key: 1 },\\n    { label: '汉南区1', key: 5 },\\n    { label: '汉南区2', key: 6 },\\n    { label: '汉南区3', key: 7 },\\n  ]\\n\\n  const [value,valueSet] = React.useState([{ label: '武汉市',  key: 1 }])\\n  const form=React.useRef()\\n\\n  const setValue=()=>{\\n    form.current.setFields({\\n     transfer: [\\n        { label: '汉南区1', key: 5 },\\n        { label: '汉南区3', key: 7 },\\n      ]\\n    })\\n  }\\n\\n  const resetValue=()=>{\\n    form.current.resetForm()\\n  }\\n\\n  return (\\n    <Form\\n        ref={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.searchTree) {\\n            errorObj.searchTree = '默认需要选择内容，选择入内容';\\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          transfer: {\\n            initialValue:[{ label: '汉南区2', key: 6 },{ label: '汉南区3', key: 7 },],\\n            children: (\\n              <Transfer options={options}/>\\n            )\\n          }\\n        }}\\n      >\\n        {({ fields, state, canSubmit }) => {\\n          return (\\n            <div>\\n              <Row style={{display:'flex',flexDirection:'column'}}>\\n                <Col >{fields.transfer}</Col>\\n              </Row>\\n              <Row>\\n                <Col fixed>\\n                  <Button disabled={!canSubmit()} type=\\\"primary\\\" htmlType=\\\"submit\\\">提交</Button>\\n                  <Button onClick={setValue} type=\\\"primary\\\" >setValue</Button>\\n                  <Button onClick={resetValue} type=\\\"primary\\\" >重置</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  );\\n}\\n\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Props\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| bodyStyle | 选项区域样式 | Object | { height: 200px, overflow-y: auto } |\\n| onChange | 点击穿梭时回调 | (arrow, selectkeys) => void | - |\\n| value | 指定当前选中的条目 | [{label, key }] | - |\\n| options | 下拉数据源,可参考Tree下拉数据源 | [{ label, key, children: [{label, key}] }] | - |\\n| showSearch | 启用搜索 | boolean | false |\\n| placeholder | 搜索输入框文字 | string | - |\\n| onSearch | 搜索时回调函数 |  (arrow, searchValue) => void | - |\\n| selectedAll | 启用全部勾选 |  boolean | false |\\n\";"],"names":[],"sourceRoot":""}

package/web/static/js/{9820.1374775d.chunk.js → 9820.39dfb9cc.chunk.js}

@@ -1,2 +1,2 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9820],{79820:function(n,e,t){t.r(e),e.default="OverlayTrigger \u57fa\u7840\u89e6\u53d1\u5f39\u51fa\n===\n\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-overlay-trigger/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-overlay-trigger.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-overlay-trigger)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-overlay-trigger.svg?label=@uiw/react-overlay-trigger)](https://npmjs.com/@uiw/react-overlay-trigger)\n\n\u57fa\u7840\u5f39\u51fa\u89e6\u53d1\u7ec4\u4ef6\uff0c\u5728\u7ec4\u4ef6 [`<Overlay>`](#/components/overlay) \u7684\u57fa\u7840\u4e0a\u6dfb\u52a0\u4e8b\u4ef6\u548c 12 \u4e2a\u65b9\u5411\u7684\u4f4d\u7f6e\uff0c\u7ec4\u4ef6 [`<Tooltip>`](#/components/tooltip)\uff0c[`<Popover>`](#/components/popover) \u662f\u57fa\u4e8e\u8fd9\u4e2a\u7ec4\u4ef6\u5c01\u88c5\u7684\uff0c\u5f39\u51fa\u6846\u56f4\u7ed5\u5bf9\u8c61\u6307\u5b9a\u4f4d\u7f6e\u3002\n\n```jsx\nimport { OverlayTrigger } from 'uiw';\n// or\nimport OverlayTrigger from '@uiw/react-overlay-trigger';\n```\n\n### \u57fa\u7840\u7528\u6cd5\n\n\u6700\u7b80\u5355\u7684\u7528\u6cd5\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { OverlayTrigger } from 'uiw';\n\nconst tooltip = (\n  <div style={{ backgroundColor: '#fff', border: '1px solid #333', padding: 10, borderRadius: 3 }}>\n    <strong>Hellow uiw!</strong> Check this info.<br />\n    \u5c55\u793a 12 \u4e2a\u65b9\u5411\u4f4d\u7f6e\n  </div>\n);\nconst Demo = () => (\n  <OverlayTrigger placement=\"top\" trigger=\"click\" overlay={tooltip}>\n    <span>\u9f20\u6807\u79fb\u52a8\u5230\u6b64\u5904\uff0c\u70b9\u51fb\u663e\u793a\u548c\u6d88\u5931\u89e6\u53d1\u4e8b\u4ef6</span>\n  </OverlayTrigger>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u914d\u5408\u7ec4\u4ef6\u4f7f\u7528\n\n\u4e0b\u9762\u914d\u5408 [`<Card />`](#/components/card) \u7ec4\u4ef6\u4f7f\u7528\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { OverlayTrigger, Card } from 'uiw';\n\nconst card = (\n  <Card active>\n    <strong>Hellow uiw!</strong> Check this info.<br />\n    \u5c55\u793a 12 \u4e2a\u65b9\u5411\u4f4d\u7f6e\n  </Card>\n);\nconst Demo = () => (\n  <OverlayTrigger placement=\"top\" overlay={card}>\n    <span>\u9f20\u6807\u79fb\u52a8\u5230\u6b64\u5904\uff0c\u663e\u793a\u548c\u6d88\u5931\u89e6\u53d1\u4e8b\u4ef6</span>\n  </OverlayTrigger>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u4f4d\u7f6e\n\n\u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { OverlayTrigger, Card, Button } from 'uiw';\nconst btnStl = {position: 'relative', width: 70, height: 50 }\n\nconst card = (\n  <Card active>\n    <strong>Hellow uiw!</strong> Check this info.<br />\n    \u5c55\u793a 12 \u4e2a\u65b9\u5411\u4f4d\u7f6e\n  </Card>\n);\nconst Demo = () => (\n  <div>\n    <div style={{ position: 'relative' }}>\n      <OverlayTrigger placement=\"topLeft\" overlay={card}>\n        <Button style={{ ...btnStl, left: 70 }}>TL</Button>\n      </OverlayTrigger>\n      <OverlayTrigger placement=\"top\" overlay={card}>\n        <Button style={{ ...btnStl, left: 70}}>Top</Button>\n      </OverlayTrigger>\n      <OverlayTrigger placement=\"topRight\" overlay={card}>\n        <Button style={{ ...btnStl, left: 70 }}>TR</Button>\n      </OverlayTrigger>\n    </div>\n    <div style={{ position: 'relative', paddingTop: 10 }}>\n      <OverlayTrigger placement=\"leftTop\" overlay={card}>\n        <Button style={{ ...btnStl }}>LT</Button>\n      </OverlayTrigger>\n      <OverlayTrigger placement=\"rightTop\" overlay={card}>\n        <Button style={{ ...btnStl, left: 216 }}>RT</Button>\n      </OverlayTrigger>\n    </div>\n    <div style={{ position: 'relative', paddingTop: 10 }}>\n      <OverlayTrigger placement=\"left\" overlay={card}>\n        <Button style={{ ...btnStl }}>Left</Button>\n      </OverlayTrigger>\n      <OverlayTrigger placement=\"right\" overlay={card}>\n        <Button style={{ ...btnStl, left: 216 }}>Right</Button>\n      </OverlayTrigger>\n    </div>\n    <div style={{ position: 'relative', paddingTop: 10 }}>\n      <OverlayTrigger placement=\"leftBottom\" overlay={card}>\n        <Button style={{ ...btnStl }}>LB</Button>\n      </OverlayTrigger>\n      <OverlayTrigger placement=\"rightBottom\" overlay={card}>\n        <Button style={{ ...btnStl, left: 216 }}>RB</Button>\n      </OverlayTrigger>\n    </div>\n    <div style={{ position: 'relative', paddingTop: 10 }}>\n      <OverlayTrigger placement=\"bottomLeft\" overlay={card}>\n        <Button style={{ ...btnStl, left: 70 }}>BL</Button>\n      </OverlayTrigger>\n      <OverlayTrigger placement=\"bottom\" overlay={card}>\n        <Button style={{ ...btnStl, left: 70 }}>Bottom</Button>\n      </OverlayTrigger>\n      <OverlayTrigger placement=\"bottomRight\" overlay={card}>\n        <Button style={{ ...btnStl, left: 70 }}>BR</Button>\n      </OverlayTrigger>\n    </div>\n  </div>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u9f20\u6807\u7ecf\u8fc7\u4e8b\u4ef6\n\n\u9ed8\u8ba4\u79bb\u5f00**\u89e6\u53d1\u533a\u57df**\u9690\u85cf\u5f39\u51fa\u76ee\u6807\uff0c\u8bbe\u7f6e `isOutside` \u503c\u4e3a `true`\uff0c\u5728**\u89e6\u53d1\u533a\u57df**\u6216**\u5f39\u51fa\u76ee\u6807\u533a\u57df**\u5185\uff0c\u4e0d\u9690\u85cf**\u5f39\u51fa\u76ee\u6807**\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { OverlayTrigger, Card, Divider } from 'uiw';\n\nconst card = (\n  <Card active>\n    <strong>Hellow uiw!</strong> Check this info.<br />\n    \u5c55\u793a 12 \u4e2a\u65b9\u5411\u4f4d\u7f6e\n  </Card>\n);\n\nclass Demo extends React.Component {\n  constructor() {\n    super()\n    this.state = {\n      isVisbale: false,\n    }\n  }\n  onVisibleChange(isVisbale) {\n    this.setState({ isVisbale })\n  }\n  render() {\n    return (\n      <div>\n        <OverlayTrigger\n          placement=\"top\"\n          isOutside={true}\n          onVisibleChange={this.onVisibleChange.bind(this)}\n          overlay={card}\n        >\n          <span>\u9f20\u6807\u79fb\u52a8\u5230\u6b64\u5904\uff0c\u663e\u793a\u548c\u6d88\u5931\u89e6\u53d1\u4e8b\u4ef6</span>\n        </OverlayTrigger>\n        <Divider />\n        <div>\u72b6\u6001\uff1a{this.state.isVisbale ? '' : '\u4e0d'}\u53ef\u89c1</div>\n      </div>\n    )\n  }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n\n### \u5ef6\u8fdf\u8fdb\u5165\u548c\u6d88\u5931\n\n\u5ef6\u8fdf\u5c5e\u6027\uff0c\u53ea\u9488\u5bf9 `trigger=hover` \u6709\u6548\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { OverlayTrigger, Card } from 'uiw';\n\nconst card = (\n  <Card active>\n    <strong>Hellow uiw!</strong> Check this info.<br />\n    \u5c55\u793a 12 \u4e2a\u65b9\u5411\u4f4d\u7f6e\n  </Card>\n);\nconst Demo = () => (\n  <OverlayTrigger delay={{ show: 0, hide: 4000 }} placement=\"top\" overlay={card}>\n    <span>\u9f20\u6807\u79fb\u52a8\u5230\u6b64\u5904\uff0c\u663e\u793a\u548c\u6d88\u5931\u89e6\u53d1\u4e8b\u4ef6\uff0c\u5ef6\u8fdf `4s` \u6d88\u5931</span>\n  </OverlayTrigger>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u7ec4\u4ef6\u53d7\u63a7\n\n\u901a\u8fc7\u8bbe\u7f6e\u5c5e\u6027 isOpen \u53ef\u4ee5\u6587\u5b57\u63d0\u793a\u624b\u52a8\u63a7\u5236\u72b6\u6001\u7684\u5c55\u793a\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { OverlayTrigger, Card, Divider, Switch } from 'uiw';\n\nconst card = (\n  <Card active>\n    <strong>Hellow uiw!</strong> Check this info.<br />\n    \u5c55\u793a 12 \u4e2a\u65b9\u5411\u4f4d\u7f6e\n  </Card>\n);\n\nclass Demo extends React.Component {\n  constructor() {\n    super()\n    this.state = {\n      isOpen: false,\n    }\n  }\n  onChange(e) {\n    this.clickChecked = false;\n    this.setState({ isOpen: e.target.checked });\n  }\n  onVisibleChange(isOpen) {\n    console.log('onVisibleChange: ', isOpen);\n  }\n  render() {\n    return (\n      <div>\n        <OverlayTrigger\n          onVisibleChange={this.onVisibleChange.bind(this)}\n          isOpen={this.state.isOpen}\n          placement=\"right\"\n          onEnter={(node, isAppearing) => {\n            console.log('~~', node, isAppearing);\n          }}\n          overlay={card}\n        >\n          <span>\u9f20\u6807\u79fb\u52a8\u5230\u6b64\u5904\uff0c\u663e\u793a\u548c\u6d88\u5931\u89e6\u53d1\u4e8b\u4ef6</span>\n        </OverlayTrigger>\n        <Divider />\n        <Switch checked={this.state.isOpen} onChange={this.onChange.bind(this)} />\n      </div>\n    );\n  }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n### usePortal\n\n\u8bbe\u7f6e `usePortal={false}` \u5c06\u6a21\u6001\u5bf9\u8bdd\u6846\u751f\u6210\u5230\u6839\u8282\u70b9\u7684\u91cc\u9762\u3002\n\n\x3c!--rehype:bgWhite=true&noScroll=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { OverlayTrigger, Card, Divider } from 'uiw';\n\nconst card = (\n  <Card active>\n    <strong>Hellow uiw!</strong> Check this info.<br />\n    \u5c55\u793a 12 \u4e2a\u65b9\u5411\u4f4d\u7f6e\n  </Card>\n);\n\nclass Demo extends React.Component {\n  constructor() {\n    super()\n    this.state = {\n      isOpen: false,\n    }\n  }\n  onVisibleChange(isOpen) {\n    this.setState({ isOpen })\n  }\n  render() {\n    return (\n      <div>\n        <div style={{ position: 'relative' }}>\n          <OverlayTrigger\n            usePortal={false}\n            isOutside={true}\n            autoAdjustOverflow\n            placement=\"top\"\n            trigger=\"click\"\n            onVisibleChange={this.onVisibleChange.bind(this)}\n            overlay={card}\n          >\n            <span>\u9f20\u6807\u79fb\u52a8\u5230\u6b64\u5904\uff0c\u70b9\u51fb\u663e\u793a\u548c\u6d88\u5931\u89e6\u53d1\u4e8b\u4ef6</span>\n          </OverlayTrigger>\n        </div>\n        <Divider />\n        <div>\u72b6\u6001\uff1a{this.state.isOpen ? '' : '\u4e0d'}\u53ef\u89c1</div>\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| placement | \u6307\u5b9a\u5f39\u51fa\u6846\u4f4d\u7f6e | Enum{`top`, `topLeft`, `topRight`,<br /> `left`, `leftTop`, `leftBottom`,<br /> `right`, `rightTop`, `rightBottom`,<br /> `bottom`, `bottomLeft`, `bottomRight`} | - |\n| trigger | \u60ac\u505c/\u70b9\u51fb\u5f39\u51fa\u7a97\u53e3 | Enum{`hover`, `click`, `focus`} | `hover` |\n| disabled | \u662f\u5426\u7981\u7528\u5f39\u51fa\u76ee\u6807 | Boolean | `false` |\n| overlay | \u5f39\u51fa\u5185\u5bb9 | Function/Element | - |\n| delay | \u5ef6\u8fdf\u8fdb\u5165\u548c\u6d88\u5931\uff0c`{ show: 2000, hide: 4000 }` \u6216\u8005\u76f4\u63a5\u8bbe\u7f6e `2000`\uff0c\u53ea\u5bf9 `trigger=hover` \u6709\u6548 | Object/Number | - |\n| isOpen | \u9ed8\u8ba4\u662f\u5426\u663e\u793a\u5f39\u7a97 | Boolean | `false` |\n| isOutside | \u9ed8\u8ba4\u79bb\u5f00**\u89e6\u53d1\u533a\u57df**\u9690\u85cf\u5f39\u51fa\u76ee\u6807\uff0c\u8bbe\u7f6e\u503c\u4e3a `true`\uff0c\u5728\u89e6\u53d1\u533a\u57df\u548c\u5f39\u51fa\u76ee\u6807\u533a\u57df\u5185\uff0c\u4e0d\u9690\u85cf**\u5f39\u51fa\u76ee\u6807**\u3002 | Boolean | `false` |\n| isClickOutside | \u70b9\u51fb\u76ee\u6807\u533a\u57df\u4ee5\u5916\u7684\u533a\u57df\uff0c\u662f\u5426\u9690\u85cf\u3002 | Boolean | `true` |\n| autoAdjustOverflow | \u5f39\u51fa\u5c42\u88ab\u906e\u6321\u65f6\u81ea\u52a8\u8c03\u6574\u4f4d\u7f6e | Boolean | `false` |\n| onVisibleChange | \u663e\u793a\u9690\u85cf\u7684\u56de\u8c03 | Function(isVisiable:bool) | - |\n\n\u66f4\u591a\u5c5e\u6027\u6587\u6863\u8bf7\u53c2\u8003 [Overlay](#/components/overlay)\u3002\n"}}]);
-//# sourceMappingURL=9820.1374775d.chunk.js.map
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9820],{79820:function(n,e,t){t.r(e),e.default="OverlayTrigger \u57fa\u7840\u89e6\u53d1\u5f39\u51fa\n===\n\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-overlay-trigger/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-overlay-trigger.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-overlay-trigger)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-overlay-trigger.svg?label=@uiw/react-overlay-trigger)](https://npmjs.com/@uiw/react-overlay-trigger)\n\n\u57fa\u7840\u5f39\u51fa\u89e6\u53d1\u7ec4\u4ef6\uff0c\u5728\u7ec4\u4ef6 [`<Overlay>`](#/components/overlay) \u7684\u57fa\u7840\u4e0a\u6dfb\u52a0\u4e8b\u4ef6\u548c 12 \u4e2a\u65b9\u5411\u7684\u4f4d\u7f6e\uff0c\u7ec4\u4ef6 [`<Tooltip>`](#/components/tooltip)\uff0c[`<Popover>`](#/components/popover) \u662f\u57fa\u4e8e\u8fd9\u4e2a\u7ec4\u4ef6\u5c01\u88c5\u7684\uff0c\u5f39\u51fa\u6846\u56f4\u7ed5\u5bf9\u8c61\u6307\u5b9a\u4f4d\u7f6e\u3002\n\n```jsx\nimport { OverlayTrigger } from 'uiw';\n// or\nimport OverlayTrigger from '@uiw/react-overlay-trigger';\n```\n\n### \u57fa\u7840\u7528\u6cd5\n\n\u6700\u7b80\u5355\u7684\u7528\u6cd5\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { OverlayTrigger } from 'uiw';\n\nconst tooltip = (\n  <div style={{ backgroundColor: '#fff', border: '1px solid #333', padding: 10, borderRadius: 3 }}>\n    <strong>Hellow uiw!</strong> Check this info.<br />\n    \u5c55\u793a 12 \u4e2a\u65b9\u5411\u4f4d\u7f6e\n  </div>\n);\nconst Demo = () => (\n  <OverlayTrigger placement=\"top\" trigger=\"click\" overlay={tooltip}>\n    <span>\u9f20\u6807\u79fb\u52a8\u5230\u6b64\u5904\uff0c\u70b9\u51fb\u663e\u793a\u548c\u6d88\u5931\u89e6\u53d1\u4e8b\u4ef6</span>\n  </OverlayTrigger>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u914d\u5408\u7ec4\u4ef6\u4f7f\u7528\n\n\u4e0b\u9762\u914d\u5408 [`<Card />`](#/components/card) \u7ec4\u4ef6\u4f7f\u7528\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { OverlayTrigger, Card } from 'uiw';\n\nconst card = (\n  <Card active>\n    <strong>Hellow uiw!</strong> Check this info.<br />\n    \u5c55\u793a 12 \u4e2a\u65b9\u5411\u4f4d\u7f6e\n  </Card>\n);\nconst Demo = () => (\n  <OverlayTrigger placement=\"top\" overlay={card}>\n    <span>\u9f20\u6807\u79fb\u52a8\u5230\u6b64\u5904\uff0c\u663e\u793a\u548c\u6d88\u5931\u89e6\u53d1\u4e8b\u4ef6</span>\n  </OverlayTrigger>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u4f4d\u7f6e\n\n\u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { OverlayTrigger, Card, Button } from 'uiw';\nconst btnStl = {position: 'relative', width: 70, height: 50 }\n\nconst card = (\n  <Card active>\n    <strong>Hellow uiw!</strong> Check this info.<br />\n    \u5c55\u793a 12 \u4e2a\u65b9\u5411\u4f4d\u7f6e\n  </Card>\n);\nconst Demo = () => (\n  <div>\n    <div style={{ position: 'relative' }}>\n      <OverlayTrigger placement=\"topLeft\" overlay={card}>\n        <Button style={{ ...btnStl, left: 70 }}>TL</Button>\n      </OverlayTrigger>\n      <OverlayTrigger placement=\"top\" overlay={card}>\n        <Button style={{ ...btnStl, left: 70}}>Top</Button>\n      </OverlayTrigger>\n      <OverlayTrigger placement=\"topRight\" overlay={card}>\n        <Button style={{ ...btnStl, left: 70 }}>TR</Button>\n      </OverlayTrigger>\n    </div>\n    <div style={{ position: 'relative', paddingTop: 10 }}>\n      <OverlayTrigger placement=\"leftTop\" overlay={card}>\n        <Button style={{ ...btnStl }}>LT</Button>\n      </OverlayTrigger>\n      <OverlayTrigger placement=\"rightTop\" overlay={card}>\n        <Button style={{ ...btnStl, left: 216 }}>RT</Button>\n      </OverlayTrigger>\n    </div>\n    <div style={{ position: 'relative', paddingTop: 10 }}>\n      <OverlayTrigger placement=\"left\" overlay={card}>\n        <Button style={{ ...btnStl }}>Left</Button>\n      </OverlayTrigger>\n      <OverlayTrigger placement=\"right\" overlay={card}>\n        <Button style={{ ...btnStl, left: 216 }}>Right</Button>\n      </OverlayTrigger>\n    </div>\n    <div style={{ position: 'relative', paddingTop: 10 }}>\n      <OverlayTrigger placement=\"leftBottom\" overlay={card}>\n        <Button style={{ ...btnStl }}>LB</Button>\n      </OverlayTrigger>\n      <OverlayTrigger placement=\"rightBottom\" overlay={card}>\n        <Button style={{ ...btnStl, left: 216 }}>RB</Button>\n      </OverlayTrigger>\n    </div>\n    <div style={{ position: 'relative', paddingTop: 10 }}>\n      <OverlayTrigger placement=\"bottomLeft\" overlay={card}>\n        <Button style={{ ...btnStl, left: 70 }}>BL</Button>\n      </OverlayTrigger>\n      <OverlayTrigger placement=\"bottom\" overlay={card}>\n        <Button style={{ ...btnStl, left: 70 }}>Bottom</Button>\n      </OverlayTrigger>\n      <OverlayTrigger placement=\"bottomRight\" overlay={card}>\n        <Button style={{ ...btnStl, left: 70 }}>BR</Button>\n      </OverlayTrigger>\n    </div>\n  </div>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u9f20\u6807\u7ecf\u8fc7\u4e8b\u4ef6\n\n\u9ed8\u8ba4\u79bb\u5f00**\u89e6\u53d1\u533a\u57df**\u9690\u85cf\u5f39\u51fa\u76ee\u6807\uff0c\u8bbe\u7f6e `isOutside` \u503c\u4e3a `true`\uff0c\u5728**\u89e6\u53d1\u533a\u57df**\u6216**\u5f39\u51fa\u76ee\u6807\u533a\u57df**\u5185\uff0c\u4e0d\u9690\u85cf**\u5f39\u51fa\u76ee\u6807**\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { OverlayTrigger, Card, Divider } from 'uiw';\n\nconst card = (\n  <Card active>\n    <strong>Hellow uiw!</strong> Check this info.<br />\n    \u5c55\u793a 12 \u4e2a\u65b9\u5411\u4f4d\u7f6e\n  </Card>\n);\n\nclass Demo extends React.Component {\n  constructor() {\n    super()\n    this.state = {\n      isVisbale: false,\n    }\n  }\n  onVisibleChange(isVisbale) {\n    this.setState({ isVisbale })\n  }\n  render() {\n    return (\n      <div>\n        <OverlayTrigger\n          placement=\"top\"\n          isOutside={true}\n          onVisibleChange={this.onVisibleChange.bind(this)}\n          overlay={card}\n        >\n          <span>\u9f20\u6807\u79fb\u52a8\u5230\u6b64\u5904\uff0c\u663e\u793a\u548c\u6d88\u5931\u89e6\u53d1\u4e8b\u4ef6</span>\n        </OverlayTrigger>\n        <Divider />\n        <div>\u72b6\u6001\uff1a{this.state.isVisbale ? '' : '\u4e0d'}\u53ef\u89c1</div>\n      </div>\n    )\n  }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n\n### \u5ef6\u8fdf\u8fdb\u5165\u548c\u6d88\u5931\n\n\u5ef6\u8fdf\u5c5e\u6027\uff0c\u53ea\u9488\u5bf9 `trigger=hover` \u6709\u6548\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { OverlayTrigger, Card } from 'uiw';\n\nconst card = (\n  <Card active>\n    <strong>Hellow uiw!</strong> Check this info.<br />\n    \u5c55\u793a 12 \u4e2a\u65b9\u5411\u4f4d\u7f6e\n  </Card>\n);\nconst Demo = () => (\n  <OverlayTrigger delay={{ show: 0, hide: 4000 }} placement=\"top\" overlay={card}>\n    <span>\u9f20\u6807\u79fb\u52a8\u5230\u6b64\u5904\uff0c\u663e\u793a\u548c\u6d88\u5931\u89e6\u53d1\u4e8b\u4ef6\uff0c\u5ef6\u8fdf `4s` \u6d88\u5931</span>\n  </OverlayTrigger>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u7ec4\u4ef6\u53d7\u63a7\n\n\u901a\u8fc7\u8bbe\u7f6e\u5c5e\u6027 isOpen \u53ef\u4ee5\u6587\u5b57\u63d0\u793a\u624b\u52a8\u63a7\u5236\u72b6\u6001\u7684\u5c55\u793a\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { OverlayTrigger, Card, Divider, Switch } from 'uiw';\n\nconst card = (\n  <Card active>\n    <strong>Hellow uiw!</strong> Check this info.<br />\n    \u5c55\u793a 12 \u4e2a\u65b9\u5411\u4f4d\u7f6e\n  </Card>\n);\n\nclass Demo extends React.Component {\n  constructor() {\n    super()\n    this.state = {\n      isOpen: false,\n    }\n  }\n  onChange(e) {\n    this.clickChecked = false;\n    this.setState({ isOpen: e.target.checked });\n  }\n  onVisibleChange(isOpen) {\n    console.log('onVisibleChange: ', isOpen);\n    this.setState({ isOpen: isOpen });\n  }\n  render() {\n    return (\n      <div>\n        <OverlayTrigger\n          onVisibleChange={this.onVisibleChange.bind(this)}\n          isOpen={this.state.isOpen}\n          placement=\"right\"\n          onEnter={(node, isAppearing) => {\n            console.log('~~', node, isAppearing);\n          }}\n          overlay={card}\n        >\n          <span>\u9f20\u6807\u79fb\u52a8\u5230\u6b64\u5904\uff0c\u663e\u793a\u548c\u6d88\u5931\u89e6\u53d1\u4e8b\u4ef6</span>\n        </OverlayTrigger>\n        <Divider />\n        <Switch checked={this.state.isOpen} onChange={this.onChange.bind(this)} />\n      </div>\n    );\n  }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n### usePortal\n\n\u8bbe\u7f6e `usePortal={false}` \u5c06\u6a21\u6001\u5bf9\u8bdd\u6846\u751f\u6210\u5230\u6839\u8282\u70b9\u7684\u91cc\u9762\u3002\n\n\x3c!--rehype:bgWhite=true&noScroll=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { OverlayTrigger, Card, Divider } from 'uiw';\n\nconst card = (\n  <Card active>\n    <strong>Hellow uiw!</strong> Check this info.<br />\n    \u5c55\u793a 12 \u4e2a\u65b9\u5411\u4f4d\u7f6e\n  </Card>\n);\n\nclass Demo extends React.Component {\n  constructor() {\n    super()\n    this.state = {\n      isOpen: false,\n    }\n  }\n  onVisibleChange(isOpen) {\n    this.setState({ isOpen })\n  }\n  render() {\n    return (\n      <div>\n        <div style={{ position: 'relative' }}>\n          <OverlayTrigger\n            usePortal={false}\n            isOutside={true}\n            autoAdjustOverflow\n            placement=\"top\"\n            trigger=\"click\"\n            onVisibleChange={this.onVisibleChange.bind(this)}\n            overlay={card}\n          >\n            <span>\u9f20\u6807\u79fb\u52a8\u5230\u6b64\u5904\uff0c\u70b9\u51fb\u663e\u793a\u548c\u6d88\u5931\u89e6\u53d1\u4e8b\u4ef6</span>\n          </OverlayTrigger>\n        </div>\n        <Divider />\n        <div>\u72b6\u6001\uff1a{this.state.isOpen ? '' : '\u4e0d'}\u53ef\u89c1</div>\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| placement | \u6307\u5b9a\u5f39\u51fa\u6846\u4f4d\u7f6e | Enum{`top`, `topLeft`, `topRight`,<br /> `left`, `leftTop`, `leftBottom`,<br /> `right`, `rightTop`, `rightBottom`,<br /> `bottom`, `bottomLeft`, `bottomRight`} | - |\n| trigger | \u60ac\u505c/\u70b9\u51fb\u5f39\u51fa\u7a97\u53e3 | Enum{`hover`, `click`, `focus`} | `hover` |\n| disabled | \u662f\u5426\u7981\u7528\u5f39\u51fa\u76ee\u6807 | Boolean | `false` |\n| overlay | \u5f39\u51fa\u5185\u5bb9 | Function/Element | - |\n| delay | \u5ef6\u8fdf\u8fdb\u5165\u548c\u6d88\u5931\uff0c`{ show: 2000, hide: 4000 }` \u6216\u8005\u76f4\u63a5\u8bbe\u7f6e `2000`\uff0c\u53ea\u5bf9 `trigger=hover` \u6709\u6548 | Object/Number | - |\n| isOpen | \u9ed8\u8ba4\u662f\u5426\u663e\u793a\u5f39\u7a97 | Boolean | `false` |\n| isOutside | \u9ed8\u8ba4\u79bb\u5f00**\u89e6\u53d1\u533a\u57df**\u9690\u85cf\u5f39\u51fa\u76ee\u6807\uff0c\u8bbe\u7f6e\u503c\u4e3a `true`\uff0c\u5728\u89e6\u53d1\u533a\u57df\u548c\u5f39\u51fa\u76ee\u6807\u533a\u57df\u5185\uff0c\u4e0d\u9690\u85cf**\u5f39\u51fa\u76ee\u6807**\u3002 | Boolean | `false` |\n| isClickOutside | \u70b9\u51fb\u76ee\u6807\u533a\u57df\u4ee5\u5916\u7684\u533a\u57df\uff0c\u662f\u5426\u9690\u85cf\u3002 | Boolean | `true` |\n| autoAdjustOverflow | \u5f39\u51fa\u5c42\u88ab\u906e\u6321\u65f6\u81ea\u52a8\u8c03\u6574\u4f4d\u7f6e | Boolean | `false` |\n| onVisibleChange | \u663e\u793a\u9690\u85cf\u7684\u56de\u8c03 | Function(isVisiable:bool) | - |\n\n\u66f4\u591a\u5c5e\u6027\u6587\u6863\u8bf7\u53c2\u8003 [Overlay](#/components/overlay)\u3002\n"}}]);
+//# sourceMappingURL=9820.39dfb9cc.chunk.js.map

package/web/static/js/{9820.1374775d.chunk.js.map → 9820.39dfb9cc.chunk.js.map}

@@ -1 +1 @@
-{"version":3,"file":"static/js/9820.1374775d.chunk.js","mappings":"gHAAA","sources":["../../packages/react-overlay-trigger/README.md"],"sourcesContent":["export default \"OverlayTrigger 基础触发弹出\\n===\\n\\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-overlay-trigger/file/README.md)\\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-overlay-trigger.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-overlay-trigger)\\n[![npm version](https://img.shields.io/npm/v/@uiw/react-overlay-trigger.svg?label=@uiw/react-overlay-trigger)](https://npmjs.com/@uiw/react-overlay-trigger)\\n\\n基础弹出触发组件，在组件 [`<Overlay>`](#/components/overlay) 的基础上添加事件和 12 个方向的位置，组件 [`<Tooltip>`](#/components/tooltip)，[`<Popover>`](#/components/popover) 是基于这个组件封装的，弹出框围绕对象指定位置。\\n\\n```jsx\\nimport { OverlayTrigger } from 'uiw';\\n// or\\nimport OverlayTrigger from '@uiw/react-overlay-trigger';\\n```\\n\\n### 基础用法\\n\\n最简单的用法。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { OverlayTrigger } from 'uiw';\\n\\nconst tooltip = (\\n  <div style={{ backgroundColor: '#fff', border: '1px solid #333', padding: 10, borderRadius: 3 }}>\\n    <strong>Hellow uiw!</strong> Check this info.<br />\\n    展示 12 个方向位置\\n  </div>\\n);\\nconst Demo = () => (\\n  <OverlayTrigger placement=\\\"top\\\" trigger=\\\"click\\\" overlay={tooltip}>\\n    <span>鼠标移动到此处，点击显示和消失触发事件</span>\\n  </OverlayTrigger>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 配合组件使用\\n\\n下面配合 [`<Card />`](#/components/card) 组件使用。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { OverlayTrigger, Card } from 'uiw';\\n\\nconst card = (\\n  <Card active>\\n    <strong>Hellow uiw!</strong> Check this info.<br />\\n    展示 12 个方向位置\\n  </Card>\\n);\\nconst Demo = () => (\\n  <OverlayTrigger placement=\\\"top\\\" overlay={card}>\\n    <span>鼠标移动到此处，显示和消失触发事件</span>\\n  </OverlayTrigger>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 位置\\n\\n位置有 12 个方向，根据 placement 参数来设置。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { OverlayTrigger, Card, Button } from 'uiw';\\nconst btnStl = {position: 'relative', width: 70, height: 50 }\\n\\nconst card = (\\n  <Card active>\\n    <strong>Hellow uiw!</strong> Check this info.<br />\\n    展示 12 个方向位置\\n  </Card>\\n);\\nconst Demo = () => (\\n  <div>\\n    <div style={{ position: 'relative' }}>\\n      <OverlayTrigger placement=\\\"topLeft\\\" overlay={card}>\\n        <Button style={{ ...btnStl, left: 70 }}>TL</Button>\\n      </OverlayTrigger>\\n      <OverlayTrigger placement=\\\"top\\\" overlay={card}>\\n        <Button style={{ ...btnStl, left: 70}}>Top</Button>\\n      </OverlayTrigger>\\n      <OverlayTrigger placement=\\\"topRight\\\" overlay={card}>\\n        <Button style={{ ...btnStl, left: 70 }}>TR</Button>\\n      </OverlayTrigger>\\n    </div>\\n    <div style={{ position: 'relative', paddingTop: 10 }}>\\n      <OverlayTrigger placement=\\\"leftTop\\\" overlay={card}>\\n        <Button style={{ ...btnStl }}>LT</Button>\\n      </OverlayTrigger>\\n      <OverlayTrigger placement=\\\"rightTop\\\" overlay={card}>\\n        <Button style={{ ...btnStl, left: 216 }}>RT</Button>\\n      </OverlayTrigger>\\n    </div>\\n    <div style={{ position: 'relative', paddingTop: 10 }}>\\n      <OverlayTrigger placement=\\\"left\\\" overlay={card}>\\n        <Button style={{ ...btnStl }}>Left</Button>\\n      </OverlayTrigger>\\n      <OverlayTrigger placement=\\\"right\\\" overlay={card}>\\n        <Button style={{ ...btnStl, left: 216 }}>Right</Button>\\n      </OverlayTrigger>\\n    </div>\\n    <div style={{ position: 'relative', paddingTop: 10 }}>\\n      <OverlayTrigger placement=\\\"leftBottom\\\" overlay={card}>\\n        <Button style={{ ...btnStl }}>LB</Button>\\n      </OverlayTrigger>\\n      <OverlayTrigger placement=\\\"rightBottom\\\" overlay={card}>\\n        <Button style={{ ...btnStl, left: 216 }}>RB</Button>\\n      </OverlayTrigger>\\n    </div>\\n    <div style={{ position: 'relative', paddingTop: 10 }}>\\n      <OverlayTrigger placement=\\\"bottomLeft\\\" overlay={card}>\\n        <Button style={{ ...btnStl, left: 70 }}>BL</Button>\\n      </OverlayTrigger>\\n      <OverlayTrigger placement=\\\"bottom\\\" overlay={card}>\\n        <Button style={{ ...btnStl, left: 70 }}>Bottom</Button>\\n      </OverlayTrigger>\\n      <OverlayTrigger placement=\\\"bottomRight\\\" overlay={card}>\\n        <Button style={{ ...btnStl, left: 70 }}>BR</Button>\\n      </OverlayTrigger>\\n    </div>\\n  </div>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 鼠标经过事件\\n\\n默认离开**触发区域**隐藏弹出目标，设置 `isOutside` 值为 `true`，在**触发区域**或**弹出目标区域**内，不隐藏**弹出目标**。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { OverlayTrigger, Card, Divider } from 'uiw';\\n\\nconst card = (\\n  <Card active>\\n    <strong>Hellow uiw!</strong> Check this info.<br />\\n    展示 12 个方向位置\\n  </Card>\\n);\\n\\nclass Demo extends React.Component {\\n  constructor() {\\n    super()\\n    this.state = {\\n      isVisbale: false,\\n    }\\n  }\\n  onVisibleChange(isVisbale) {\\n    this.setState({ isVisbale })\\n  }\\n  render() {\\n    return (\\n      <div>\\n        <OverlayTrigger\\n          placement=\\\"top\\\"\\n          isOutside={true}\\n          onVisibleChange={this.onVisibleChange.bind(this)}\\n          overlay={card}\\n        >\\n          <span>鼠标移动到此处，显示和消失触发事件</span>\\n        </OverlayTrigger>\\n        <Divider />\\n        <div>状态：{this.state.isVisbale ? '' : '不'}可见</div>\\n      </div>\\n    )\\n  }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n\\n### 延迟进入和消失\\n\\n延迟属性，只针对 `trigger=hover` 有效。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { OverlayTrigger, Card } from 'uiw';\\n\\nconst card = (\\n  <Card active>\\n    <strong>Hellow uiw!</strong> Check this info.<br />\\n    展示 12 个方向位置\\n  </Card>\\n);\\nconst Demo = () => (\\n  <OverlayTrigger delay={{ show: 0, hide: 4000 }} placement=\\\"top\\\" overlay={card}>\\n    <span>鼠标移动到此处，显示和消失触发事件，延迟 `4s` 消失</span>\\n  </OverlayTrigger>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 组件受控\\n\\n通过设置属性 isOpen 可以文字提示手动控制状态的展示。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { OverlayTrigger, Card, Divider, Switch } from 'uiw';\\n\\nconst card = (\\n  <Card active>\\n    <strong>Hellow uiw!</strong> Check this info.<br />\\n    展示 12 个方向位置\\n  </Card>\\n);\\n\\nclass Demo extends React.Component {\\n  constructor() {\\n    super()\\n    this.state = {\\n      isOpen: false,\\n    }\\n  }\\n  onChange(e) {\\n    this.clickChecked = false;\\n    this.setState({ isOpen: e.target.checked });\\n  }\\n  onVisibleChange(isOpen) {\\n    console.log('onVisibleChange: ', isOpen);\\n  }\\n  render() {\\n    return (\\n      <div>\\n        <OverlayTrigger\\n          onVisibleChange={this.onVisibleChange.bind(this)}\\n          isOpen={this.state.isOpen}\\n          placement=\\\"right\\\"\\n          onEnter={(node, isAppearing) => {\\n            console.log('~~', node, isAppearing);\\n          }}\\n          overlay={card}\\n        >\\n          <span>鼠标移动到此处，显示和消失触发事件</span>\\n        </OverlayTrigger>\\n        <Divider />\\n        <Switch checked={this.state.isOpen} onChange={this.onChange.bind(this)} />\\n      </div>\\n    );\\n  }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### usePortal\\n\\n设置 `usePortal={false}` 将模态对话框生成到根节点的里面。\\n\\n<!--rehype:bgWhite=true&noScroll=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { OverlayTrigger, Card, Divider } from 'uiw';\\n\\nconst card = (\\n  <Card active>\\n    <strong>Hellow uiw!</strong> Check this info.<br />\\n    展示 12 个方向位置\\n  </Card>\\n);\\n\\nclass Demo extends React.Component {\\n  constructor() {\\n    super()\\n    this.state = {\\n      isOpen: false,\\n    }\\n  }\\n  onVisibleChange(isOpen) {\\n    this.setState({ isOpen })\\n  }\\n  render() {\\n    return (\\n      <div>\\n        <div style={{ position: 'relative' }}>\\n          <OverlayTrigger\\n            usePortal={false}\\n            isOutside={true}\\n            autoAdjustOverflow\\n            placement=\\\"top\\\"\\n            trigger=\\\"click\\\"\\n            onVisibleChange={this.onVisibleChange.bind(this)}\\n            overlay={card}\\n          >\\n            <span>鼠标移动到此处，点击显示和消失触发事件</span>\\n          </OverlayTrigger>\\n        </div>\\n        <Divider />\\n        <div>状态：{this.state.isOpen ? '' : '不'}可见</div>\\n      </div>\\n    );\\n  }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Props\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| placement | 指定弹出框位置 | Enum{`top`, `topLeft`, `topRight`,<br /> `left`, `leftTop`, `leftBottom`,<br /> `right`, `rightTop`, `rightBottom`,<br /> `bottom`, `bottomLeft`, `bottomRight`} | - |\\n| trigger | 悬停/点击弹出窗口 | Enum{`hover`, `click`, `focus`} | `hover` |\\n| disabled | 是否禁用弹出目标 | Boolean | `false` |\\n| overlay | 弹出内容 | Function/Element | - |\\n| delay | 延迟进入和消失，`{ show: 2000, hide: 4000 }` 或者直接设置 `2000`，只对 `trigger=hover` 有效 | Object/Number | - |\\n| isOpen | 默认是否显示弹窗 | Boolean | `false` |\\n| isOutside | 默认离开**触发区域**隐藏弹出目标，设置值为 `true`，在触发区域和弹出目标区域内，不隐藏**弹出目标**。 | Boolean | `false` |\\n| isClickOutside | 点击目标区域以外的区域，是否隐藏。 | Boolean | `true` |\\n| autoAdjustOverflow | 弹出层被遮挡时自动调整位置 | Boolean | `false` |\\n| onVisibleChange | 显示隐藏的回调 | Function(isVisiable:bool) | - |\\n\\n更多属性文档请参考 [Overlay](#/components/overlay)。\\n\";"],"names":[],"sourceRoot":""}
+{"version":3,"file":"static/js/9820.39dfb9cc.chunk.js","mappings":"gHAAA","sources":["../../packages/react-overlay-trigger/README.md"],"sourcesContent":["export default \"OverlayTrigger 基础触发弹出\\n===\\n\\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-overlay-trigger/file/README.md)\\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-overlay-trigger.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-overlay-trigger)\\n[![npm version](https://img.shields.io/npm/v/@uiw/react-overlay-trigger.svg?label=@uiw/react-overlay-trigger)](https://npmjs.com/@uiw/react-overlay-trigger)\\n\\n基础弹出触发组件，在组件 [`<Overlay>`](#/components/overlay) 的基础上添加事件和 12 个方向的位置，组件 [`<Tooltip>`](#/components/tooltip)，[`<Popover>`](#/components/popover) 是基于这个组件封装的，弹出框围绕对象指定位置。\\n\\n```jsx\\nimport { OverlayTrigger } from 'uiw';\\n// or\\nimport OverlayTrigger from '@uiw/react-overlay-trigger';\\n```\\n\\n### 基础用法\\n\\n最简单的用法。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { OverlayTrigger } from 'uiw';\\n\\nconst tooltip = (\\n  <div style={{ backgroundColor: '#fff', border: '1px solid #333', padding: 10, borderRadius: 3 }}>\\n    <strong>Hellow uiw!</strong> Check this info.<br />\\n    展示 12 个方向位置\\n  </div>\\n);\\nconst Demo = () => (\\n  <OverlayTrigger placement=\\\"top\\\" trigger=\\\"click\\\" overlay={tooltip}>\\n    <span>鼠标移动到此处，点击显示和消失触发事件</span>\\n  </OverlayTrigger>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 配合组件使用\\n\\n下面配合 [`<Card />`](#/components/card) 组件使用。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { OverlayTrigger, Card } from 'uiw';\\n\\nconst card = (\\n  <Card active>\\n    <strong>Hellow uiw!</strong> Check this info.<br />\\n    展示 12 个方向位置\\n  </Card>\\n);\\nconst Demo = () => (\\n  <OverlayTrigger placement=\\\"top\\\" overlay={card}>\\n    <span>鼠标移动到此处，显示和消失触发事件</span>\\n  </OverlayTrigger>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 位置\\n\\n位置有 12 个方向，根据 placement 参数来设置。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { OverlayTrigger, Card, Button } from 'uiw';\\nconst btnStl = {position: 'relative', width: 70, height: 50 }\\n\\nconst card = (\\n  <Card active>\\n    <strong>Hellow uiw!</strong> Check this info.<br />\\n    展示 12 个方向位置\\n  </Card>\\n);\\nconst Demo = () => (\\n  <div>\\n    <div style={{ position: 'relative' }}>\\n      <OverlayTrigger placement=\\\"topLeft\\\" overlay={card}>\\n        <Button style={{ ...btnStl, left: 70 }}>TL</Button>\\n      </OverlayTrigger>\\n      <OverlayTrigger placement=\\\"top\\\" overlay={card}>\\n        <Button style={{ ...btnStl, left: 70}}>Top</Button>\\n      </OverlayTrigger>\\n      <OverlayTrigger placement=\\\"topRight\\\" overlay={card}>\\n        <Button style={{ ...btnStl, left: 70 }}>TR</Button>\\n      </OverlayTrigger>\\n    </div>\\n    <div style={{ position: 'relative', paddingTop: 10 }}>\\n      <OverlayTrigger placement=\\\"leftTop\\\" overlay={card}>\\n        <Button style={{ ...btnStl }}>LT</Button>\\n      </OverlayTrigger>\\n      <OverlayTrigger placement=\\\"rightTop\\\" overlay={card}>\\n        <Button style={{ ...btnStl, left: 216 }}>RT</Button>\\n      </OverlayTrigger>\\n    </div>\\n    <div style={{ position: 'relative', paddingTop: 10 }}>\\n      <OverlayTrigger placement=\\\"left\\\" overlay={card}>\\n        <Button style={{ ...btnStl }}>Left</Button>\\n      </OverlayTrigger>\\n      <OverlayTrigger placement=\\\"right\\\" overlay={card}>\\n        <Button style={{ ...btnStl, left: 216 }}>Right</Button>\\n      </OverlayTrigger>\\n    </div>\\n    <div style={{ position: 'relative', paddingTop: 10 }}>\\n      <OverlayTrigger placement=\\\"leftBottom\\\" overlay={card}>\\n        <Button style={{ ...btnStl }}>LB</Button>\\n      </OverlayTrigger>\\n      <OverlayTrigger placement=\\\"rightBottom\\\" overlay={card}>\\n        <Button style={{ ...btnStl, left: 216 }}>RB</Button>\\n      </OverlayTrigger>\\n    </div>\\n    <div style={{ position: 'relative', paddingTop: 10 }}>\\n      <OverlayTrigger placement=\\\"bottomLeft\\\" overlay={card}>\\n        <Button style={{ ...btnStl, left: 70 }}>BL</Button>\\n      </OverlayTrigger>\\n      <OverlayTrigger placement=\\\"bottom\\\" overlay={card}>\\n        <Button style={{ ...btnStl, left: 70 }}>Bottom</Button>\\n      </OverlayTrigger>\\n      <OverlayTrigger placement=\\\"bottomRight\\\" overlay={card}>\\n        <Button style={{ ...btnStl, left: 70 }}>BR</Button>\\n      </OverlayTrigger>\\n    </div>\\n  </div>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 鼠标经过事件\\n\\n默认离开**触发区域**隐藏弹出目标，设置 `isOutside` 值为 `true`，在**触发区域**或**弹出目标区域**内，不隐藏**弹出目标**。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { OverlayTrigger, Card, Divider } from 'uiw';\\n\\nconst card = (\\n  <Card active>\\n    <strong>Hellow uiw!</strong> Check this info.<br />\\n    展示 12 个方向位置\\n  </Card>\\n);\\n\\nclass Demo extends React.Component {\\n  constructor() {\\n    super()\\n    this.state = {\\n      isVisbale: false,\\n    }\\n  }\\n  onVisibleChange(isVisbale) {\\n    this.setState({ isVisbale })\\n  }\\n  render() {\\n    return (\\n      <div>\\n        <OverlayTrigger\\n          placement=\\\"top\\\"\\n          isOutside={true}\\n          onVisibleChange={this.onVisibleChange.bind(this)}\\n          overlay={card}\\n        >\\n          <span>鼠标移动到此处，显示和消失触发事件</span>\\n        </OverlayTrigger>\\n        <Divider />\\n        <div>状态：{this.state.isVisbale ? '' : '不'}可见</div>\\n      </div>\\n    )\\n  }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n\\n### 延迟进入和消失\\n\\n延迟属性，只针对 `trigger=hover` 有效。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { OverlayTrigger, Card } from 'uiw';\\n\\nconst card = (\\n  <Card active>\\n    <strong>Hellow uiw!</strong> Check this info.<br />\\n    展示 12 个方向位置\\n  </Card>\\n);\\nconst Demo = () => (\\n  <OverlayTrigger delay={{ show: 0, hide: 4000 }} placement=\\\"top\\\" overlay={card}>\\n    <span>鼠标移动到此处，显示和消失触发事件，延迟 `4s` 消失</span>\\n  </OverlayTrigger>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 组件受控\\n\\n通过设置属性 isOpen 可以文字提示手动控制状态的展示。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { OverlayTrigger, Card, Divider, Switch } from 'uiw';\\n\\nconst card = (\\n  <Card active>\\n    <strong>Hellow uiw!</strong> Check this info.<br />\\n    展示 12 个方向位置\\n  </Card>\\n);\\n\\nclass Demo extends React.Component {\\n  constructor() {\\n    super()\\n    this.state = {\\n      isOpen: false,\\n    }\\n  }\\n  onChange(e) {\\n    this.clickChecked = false;\\n    this.setState({ isOpen: e.target.checked });\\n  }\\n  onVisibleChange(isOpen) {\\n    console.log('onVisibleChange: ', isOpen);\\n    this.setState({ isOpen: isOpen });\\n  }\\n  render() {\\n    return (\\n      <div>\\n        <OverlayTrigger\\n          onVisibleChange={this.onVisibleChange.bind(this)}\\n          isOpen={this.state.isOpen}\\n          placement=\\\"right\\\"\\n          onEnter={(node, isAppearing) => {\\n            console.log('~~', node, isAppearing);\\n          }}\\n          overlay={card}\\n        >\\n          <span>鼠标移动到此处，显示和消失触发事件</span>\\n        </OverlayTrigger>\\n        <Divider />\\n        <Switch checked={this.state.isOpen} onChange={this.onChange.bind(this)} />\\n      </div>\\n    );\\n  }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### usePortal\\n\\n设置 `usePortal={false}` 将模态对话框生成到根节点的里面。\\n\\n<!--rehype:bgWhite=true&noScroll=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { OverlayTrigger, Card, Divider } from 'uiw';\\n\\nconst card = (\\n  <Card active>\\n    <strong>Hellow uiw!</strong> Check this info.<br />\\n    展示 12 个方向位置\\n  </Card>\\n);\\n\\nclass Demo extends React.Component {\\n  constructor() {\\n    super()\\n    this.state = {\\n      isOpen: false,\\n    }\\n  }\\n  onVisibleChange(isOpen) {\\n    this.setState({ isOpen })\\n  }\\n  render() {\\n    return (\\n      <div>\\n        <div style={{ position: 'relative' }}>\\n          <OverlayTrigger\\n            usePortal={false}\\n            isOutside={true}\\n            autoAdjustOverflow\\n            placement=\\\"top\\\"\\n            trigger=\\\"click\\\"\\n            onVisibleChange={this.onVisibleChange.bind(this)}\\n            overlay={card}\\n          >\\n            <span>鼠标移动到此处，点击显示和消失触发事件</span>\\n          </OverlayTrigger>\\n        </div>\\n        <Divider />\\n        <div>状态：{this.state.isOpen ? '' : '不'}可见</div>\\n      </div>\\n    );\\n  }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Props\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| placement | 指定弹出框位置 | Enum{`top`, `topLeft`, `topRight`,<br /> `left`, `leftTop`, `leftBottom`,<br /> `right`, `rightTop`, `rightBottom`,<br /> `bottom`, `bottomLeft`, `bottomRight`} | - |\\n| trigger | 悬停/点击弹出窗口 | Enum{`hover`, `click`, `focus`} | `hover` |\\n| disabled | 是否禁用弹出目标 | Boolean | `false` |\\n| overlay | 弹出内容 | Function/Element | - |\\n| delay | 延迟进入和消失，`{ show: 2000, hide: 4000 }` 或者直接设置 `2000`，只对 `trigger=hover` 有效 | Object/Number | - |\\n| isOpen | 默认是否显示弹窗 | Boolean | `false` |\\n| isOutside | 默认离开**触发区域**隐藏弹出目标，设置值为 `true`，在触发区域和弹出目标区域内，不隐藏**弹出目标**。 | Boolean | `false` |\\n| isClickOutside | 点击目标区域以外的区域，是否隐藏。 | Boolean | `true` |\\n| autoAdjustOverflow | 弹出层被遮挡时自动调整位置 | Boolean | `false` |\\n| onVisibleChange | 显示隐藏的回调 | Function(isVisiable:bool) | - |\\n\\n更多属性文档请参考 [Overlay](#/components/overlay)。\\n\";"],"names":[],"sourceRoot":""}

package/web/static/js/9900.4957c035.chunk.js

@@ -0,0 +1,2 @@
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9900],{29900:function(n,e,t){t.r(e),e.default="Modal \u6a21\u6001\u5bf9\u8bdd\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-modal/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-modal.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-modal)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-modal.svg?label=@uiw/react-modal)](https://npmjs.com/@uiw/react-modal)\n\n\u6a21\u6001\u5bf9\u8bdd\u6846\u3002\n\n```jsx\nimport { Modal } from 'uiw';\n// or\nimport Modal from '@uiw/react-modal';\n```\n\n### \u57fa\u672c\u7528\u6cd5\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Modal, ButtonGroup, Button } from 'uiw';\n\nclass Demo extends React.Component {\n  constructor() {\n    super();\n    this.state = {\n      visible: false,\n    }\n  }\n  onClick() {\n    this.setState({ visible: !this.state.visible });\n  }\n  onClosed() {\n    this.setState({ visible: false });\n  }\n  render() {\n    return (\n      <div>\n        <Modal\n          title=\"\u6a21\u6001\u5bf9\u8bdd\u6846\"\n          isOpen={this.state.visible}\n          confirmText=\"\u786e\u5b9a\u6309\u94ae\"\n          cancelText=\"\u53d6\u6d88\u6309\u94ae\"\n          icon=\"information\"\n          type=\"primary\"\n          onConfirm={() => console.log('\u60a8\u70b9\u51fb\u4e86\u786e\u5b9a\u6309\u94ae\uff01')}\n          onCancel={() => console.log('\u60a8\u70b9\u51fb\u4e86\u53d6\u6d88\u6309\u94ae\uff01')}\n          onClosed={this.onClosed.bind(this)}\n        >\n          React \u53ef\u4ee5\u975e\u5e38\u8f7b\u677e\u5730\u521b\u5efa\u7528\u6237\u4ea4\u4e92\u754c\u9762\u3002\u4e3a\u4f60\u5e94\u7528\u7684\u6bcf\u4e00\u4e2a\u72b6\u6001\u8bbe\u8ba1\u7b80\u6d01\u7684\u89c6\u56fe\uff0c\u5728\u6570\u636e\u6539\u53d8\u65f6 React \u4e5f\u53ef\u4ee5\u9ad8\u6548\u5730\u66f4\u65b0\u6e32\u67d3\u754c\u9762\u3002\n          <br /><br />\n          \u4ee5\u58f0\u660e\u5f0f\u7f16\u5199UI\uff0c\u53ef\u4ee5\u8ba9\u4f60\u7684\u4ee3\u7801\u66f4\u52a0\u53ef\u9760\uff0c\u4e14\u65b9\u4fbf\u8c03\u8bd5\u3002\n          <br /><br />\n          \u521b\u5efa\u597d\u62e5\u6709\u5404\u81ea\u72b6\u6001\u7684\u7ec4\u4ef6\uff0c\u518d\u7531\u7ec4\u4ef6\u6784\u6210\u66f4\u52a0\u590d\u6742\u7684\u754c\u9762\u3002\n          <br /><br />\n          \u65e0\u9700\u518d\u7528\u6a21\u7248\u4ee3\u7801\uff0c\u901a\u8fc7\u4f7f\u7528JavaScript\u7f16\u5199\u7684\u7ec4\u4ef6\u4f60\u53ef\u4ee5\u66f4\u597d\u5730\u4f20\u9012\u6570\u636e\uff0c\u5c06\u5e94\u7528\u72b6\u6001\u548cDOM\u62c6\u5206\u5f00\u6765\u3002\n          <br /><br />\n          \u65e0\u8bba\u4f60\u73b0\u5728\u6b63\u5728\u4f7f\u7528\u4ec0\u4e48\u6280\u672f\u6808\uff0c\u4f60\u90fd\u53ef\u4ee5\u968f\u65f6\u5f15\u5165 React \u5f00\u53d1\u65b0\u7279\u6027\u3002\n          <br /><br />\n          <b>\u7ec4\u4ef6</b>\n          <br /><br />\n          React \u7ec4\u4ef6\u4f7f\u7528\u4e00\u4e2a\u540d\u4e3a render() \u7684\u65b9\u6cd5\uff0c \u63a5\u6536\u6570\u636e\u4f5c\u4e3a\u8f93\u5165\uff0c\u8f93\u51fa\u9875\u9762\u4e2d\u5bf9\u5e94\u5c55\u793a\u7684\u5185\u5bb9\u3002 \u4e0b\u9762\u8fd9\u4e2a\u793a\u4f8b\u4e2d\u7c7b\u4f3cXML\u7684\u5199\u6cd5\u88ab\u79f0\u4e3aJSX. \u8f93\u5165\u7684\u6570\u636e\u901a\u8fc7 this.props \u4f20\u5165 render() \u65b9\u6cd5\u3002\n          <br /><br />\n          \u4f7f\u7528 React \u7684\u65f6\u5019\u4e5f\u53ef\u4ee5\u4e0d\u4f7f\u7528 JSX \u8bed\u6cd5 \u4f60\u53ef\u4ee5\u5728 <a href=\"https://babeljs.io/repl/#?presets=react&code_lz=MYewdgzgLgBApgGzgWzmWBeGAeAFgRgD4AJRBEAGhgHcQAnBAEwEJsB6AwgbgChRJY_KAEMAlmDh0YWRiGABXVOgB0AczhQAokiVQAQgE8AkowAUPGDADkdECChWeASl4AlOMOBQAIgHkAssp0aIySpogoaFBUQmISdC48QA\" target=\"_blank\">Babel REPL</a> \u67e5\u770b JSX \u662f\u5982\u4f55\u88ab\u6e32\u67d3\u6210\u539f\u751f JavaScript \u4ee3\u7801\u7684\u3002\n        </Modal>\n        <ButtonGroup>\n          <Button onClick={this.onClick.bind(this)}>\u786e\u8ba4\u5bf9\u8bdd\u6846</Button>\n        </ButtonGroup>\n      </div>\n    )\n  }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u5ef6\u8fdf\u5173\u95ed\u5bf9\u8bdd\u6846\n\n\u8fd9\u91cc\u662f\u5229\u7528 `Promise` \u7b49\u5b83\u6267\u884c\u5b8c\u6210\u518d\u53bb\u5173\u95ed\u7a97\u53e3\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Modal, ButtonGroup, Button } from 'uiw';\n\nclass Demo extends React.Component {\n  constructor() {\n    super();\n    this.state = {\n      visible: false,\n    }\n    this.time = null\n  }\n  onClick() {\n    this.setState({ visible: !this.state.visible });\n  }\n  onClosed() {\n    this.setState({ visible: false });\n  }\n  render() {\n    return (\n      <div>\n        <Modal\n          title=\"\u6a21\u6001\u5bf9\u8bdd\u6846\"\n          isOpen={this.state.visible}\n          confirmText=\"\u786e\u5b9a\u6309\u94ae\"\n          cancelText=\"\u53d6\u6d88\u6309\u94ae\"\n          type=\"danger\"\n          onCancel={() => {\n            clearTimeout(this.time)\n            console.log('\u60a8\u70b9\u51fb\u4e86\u53d6\u6d88\u6309\u94ae\uff01')\n          }}\n          onClosed={this.onClosed.bind(this)}\n          onConfirm={() => {\n            console.log('\u786e\u5b9a\u56de\u8c03\uff01, \u8fd9\u91cc\u662f\u5229\u7528Promise\u7b49\u6267\u884c\u5b8c\u6210\u518d\u53bb\u5173\u95ed\u7a97\u53e3');\n            return new Promise((resolve, reject) => {\n              const random = Math.random();\n              console.log('\u6d4b\u8bd5\uff0c\u968f\u673a\u503c\u5927\u4e8e 0.5 \u6267\u884c resolve \u4e8b\u4ef6\uff0c\u5426\u5219 \u6267\u884c reject \u89e6\u53d1 catch \u9519\u8bef', random, random > 0.5)\n              this.time = setTimeout(random > 0.5 ? resolve : reject, 3000);\n            }).catch(() => {\n              // \u53ef\u4ee5\u901a\u8fc7\u4e0b\u9762\u65b9\u5f0f\uff0c\u963b\u6b62\u5f39\u6846\u6d88\u5931\n              // throw new Error();\n            });\n          }}\n        >\n          \u8fd9\u662f\u4e00\u4e2a\u5355\u51fb \u201c<b>\u786e\u5b9a\u6309\u94ae</b>\u201d \u5ef6\u8fdf\u5173\u95ed\u5bf9\u8bdd\u6846\u7684\u5b9e\u4f8b\uff0c\u5173\u95ed\u5bf9\u8bdd\u6846\u89e6\u53d1 \u201c<b>onConfirm</b>\u201d \u6216 \u201c<b>onCancel</b>\u201d \u4e8b\u4ef6\u3002<br /><br /> \u8fd9\u91cc\u662f\u5229\u7528 <b>Promise</b> \u7684\u7279\u6027\uff0c\u7b49\u5b83\u6267\u884c\u5b8c\u6210\u540e\uff0c\u518d\u53bb\u5173\u95ed\u7a97\u53e3\uff0c\u8fbe\u5230\u5ef6\u8fdf\u5173\u95ed\u7684\u6548\u679c\u3002<br /><br />\n          \u8fd9\u4e2a\u6d4b\u8bd5\u4f8b\u5b50\uff0c\u751f\u6210\u968f\u673a\u503c\u5224\u65ad\u662f\u5426\u5927\u4e8e <b>0.5</b> \u6267\u884c <b>resolve</b> \u4e8b\u4ef6\uff0c\u5426\u5219 \u6267\u884c <b>reject</b> \u89e6\u53d1 <b>catch</b> \u9519\u8bef\u3002\n        </Modal>\n        <ButtonGroup>\n          <Button onClick={this.onClick.bind(this)}>\u5ef6\u8fdf\u5173\u95ed\u5bf9\u8bdd\u6846</Button>\n        </ButtonGroup>\n      </div>\n    )\n  }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n\n### \u8868\u5355\u5e94\u7528\n\n\u8fd9\u91cc\u662f\u5229\u7528 `Promise` \u7b49\u5b83\u6267\u884c\u5b8c\u6210\u518d\u53bb\u5173\u95ed\u7a97\u53e3\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Modal, ButtonGroup, Button } from 'uiw';\n\nclass Demo extends React.Component {\n  constructor() {\n    super();\n    this.state = {\n      visible: false,\n      loading: false,\n    }\n  }\n  onClick() {\n    this.setState({ visible: !this.state.visible });\n  }\n  onClosed() {\n    this.setState({ visible: false });\n  }\n  onSubmit({ initial, current }) {\n    const errorObj = {};\n    if (current.userName.startsWith('u')) {\n      errorObj.userName = `\u59d3\u540d ${current.userName} \u4e0d\u80fd\u4ee5 \u2018u\u2019 \u5f00\u5934`;\n    }\n    if (!current.age || current.age < 18 || current.age > 30) {\n      errorObj.age = '\u5e74\u9f84\u5fc5\u987b\u572818 ~ 30\u5c81\u4e4b\u95f4\u3002';\n    }\n    if (!current.textarea) {\n      errorObj.textarea = '\u8bf7\u8f93\u5165\u63cf\u8ff0\u5185\u5bb9';\n    }\n    if(Object.keys(errorObj).length > 0) {\n      const err = new Error();\n      err.filed = errorObj;\n      throw err;\n    }\n\n    this.setState({ loading: true });\n    setTimeout(() => {\n      this.setState({ loading: false, visible: false });\n      Notify.success({ title: '\u63d0\u4ea4\u6210\u529f\u901a\u77e5\uff01', description: '\u63d0\u4ea4\u5185\u5bb9\uff0c\u3002' });\n    }, 2000);\n  }\n  render() {\n    return (\n      <div>\n        <Modal\n          title=\"\u6a21\u6001\u5bf9\u8bdd\u6846\"\n          width={900}\n          isOpen={this.state.visible}\n          onClosed={this.onClosed.bind(this)}\n          type=\"danger\"\n          useButton={false}\n        >\n          <Form\n            resetOnSubmit={false}\n            onSubmit={this.onSubmit.bind(this)}\n            onSubmitError={(error) => {\n              if (error.filed) {\n                return { ...error.filed };\n              }\n              return null;\n            }}\n            fields={{\n              userName: {\n                initialValue: 'uiw',\n                label: '\u59d3\u540d',\n                help: '\u4ee5\u201cu\u201d\u5f00\u5934\u7684\u540d\u5b57\u5c06\u5728\u6b64\u5904\u663e\u793a\u9519\u8bef\u4fe1\u606f',\n                children: <Input type=\"text\" />\n              },\n              age: {\n                initialValue: 9,\n                label: '\u5e74\u9f84',\n                children: <Input type=\"number\" />\n              },\n              textarea: {\n                initialValue: '',\n                label: '\u63cf\u8ff0\u8bf4\u660e',\n                children: <Textarea placeholder=\"\u8bf7\u8f93\u5165\u5185\u5bb9\" />\n              },\n            }}\n          >\n            {({ fields, state, canSubmit }) => {\n              console.log('fields:--\x3e', state);\n              return (\n                <div>\n                  <Row gutter={10}>\n                    <Col>{fields.userName}</Col>\n                    <Col>{fields.age}</Col>\n                  </Row>\n                  <Row gutter={10}>\n                    <Col>{fields.textarea}</Col>\n                  </Row>\n                  <Row gutter={10} justify=\"flex-end\">\n                    <Col fixed>\n                      <Button loading={this.state.loading} disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4\u8868\u5355</Button>\n                    </Col>\n                  </Row>\n                </div>\n              )\n            }}\n          </Form>\n        </Modal>\n        <ButtonGroup>\n          <Button onClick={this.onClick.bind(this)}>\u8868\u5355\u4e2d\u5e94\u7528</Button>\n        </ButtonGroup>\n      </div>\n    )\n  }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u81ea\u5b9a\u4e49\u9875\u811a\n\n\u8bbe\u7f6e `useButton={false}` \u9690\u85cf\u9ed8\u8ba4\u7684\u6309\u94ae\uff0c\u518d\u6839\u636e\u81ea\u5df1\u9700\u6c42\u5b9a\u4e49\u6309\u94ae\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Modal, ButtonGroup, Button } from 'uiw';\n\nclass Demo extends React.Component {\n  constructor() {\n    super();\n    this.state = {\n      visible: false,\n    }\n  }\n  onClick() {\n    this.setState({ visible: !this.state.visible });\n  }\n  onClosed() {\n    this.setState({ visible: false });\n  }\n  render() {\n    return (\n      <div>\n        <Modal\n          title=\"\u6a21\u6001\u5bf9\u8bdd\u6846\"\n          isOpen={this.state.visible}\n          useButton={false}\n          confirmText=\"\u786e\u5b9a\u6309\u94ae\"\n          cancelText=\"\u53d6\u6d88\u6309\u94ae\"\n          icon=\"information\"\n          type=\"danger\"\n          onConfirm={() => console.log('\u60a8\u70b9\u51fb\u4e86\u786e\u5b9a\u6309\u94ae\uff01')}\n          onCancel={() => console.log('\u60a8\u70b9\u51fb\u4e86\u53d6\u6d88\u6309\u94ae\uff01')}\n          onClosed={this.onClosed.bind(this)}\n        >\n          React \u53ef\u4ee5\u975e\u5e38\u8f7b\u677e\u5730\u521b\u5efa\u7528\u6237\u4ea4\u4e92\u754c\u9762\u3002\u4e3a\u4f60\u5e94\u7528\u7684\u6bcf\u4e00\u4e2a\u72b6\u6001\u8bbe\u8ba1\u7b80\u6d01\u7684\u89c6\u56fe\uff0c\u5728\u6570\u636e\u6539\u53d8\u65f6 React \u4e5f\u53ef\u4ee5\u9ad8\u6548\u5730\u66f4\u65b0\u6e32\u67d3\u754c\u9762\u3002\n          <br /><br />\n          \u4ee5\u58f0\u660e\u5f0f\u7f16\u5199UI\uff0c\u53ef\u4ee5\u8ba9\u4f60\u7684\u4ee3\u7801\u66f4\u52a0\u53ef\u9760\uff0c\u4e14\u65b9\u4fbf\u8c03\u8bd5\u3002\n          <br /><br />\n          \u521b\u5efa\u597d\u62e5\u6709\u5404\u81ea\u72b6\u6001\u7684\u7ec4\u4ef6\uff0c\u518d\u7531\u7ec4\u4ef6\u6784\u6210\u66f4\u52a0\u590d\u6742\u7684\u754c\u9762\u3002\n          <br /><br />\n          \u65e0\u9700\u518d\u7528\u6a21\u7248\u4ee3\u7801\uff0c\u901a\u8fc7\u4f7f\u7528JavaScript\u7f16\u5199\u7684\u7ec4\u4ef6\u4f60\u53ef\u4ee5\u66f4\u597d\u5730\u4f20\u9012\u6570\u636e\uff0c\u5c06\u5e94\u7528\u72b6\u6001\u548cDOM\u62c6\u5206\u5f00\u6765\u3002\n          <br /><br />\n          \u65e0\u8bba\u4f60\u73b0\u5728\u6b63\u5728\u4f7f\u7528\u4ec0\u4e48\u6280\u672f\u6808\uff0c\u4f60\u90fd\u53ef\u4ee5\u968f\u65f6\u5f15\u5165 React \u5f00\u53d1\u65b0\u7279\u6027\u3002\n          <br /><br />\n          <b>\u7ec4\u4ef6</b>\n          <br /><br />\n          React \u7ec4\u4ef6\u4f7f\u7528\u4e00\u4e2a\u540d\u4e3a render() \u7684\u65b9\u6cd5\uff0c \u63a5\u6536\u6570\u636e\u4f5c\u4e3a\u8f93\u5165\uff0c\u8f93\u51fa\u9875\u9762\u4e2d\u5bf9\u5e94\u5c55\u793a\u7684\u5185\u5bb9\u3002 \u4e0b\u9762\u8fd9\u4e2a\u793a\u4f8b\u4e2d\u7c7b\u4f3cXML\u7684\u5199\u6cd5\u88ab\u79f0\u4e3aJSX. \u8f93\u5165\u7684\u6570\u636e\u901a\u8fc7 this.props \u4f20\u5165 render() \u65b9\u6cd5\u3002\n          <br /><br />\n          \u4f7f\u7528 React \u7684\u65f6\u5019\u4e5f\u53ef\u4ee5\u4e0d\u4f7f\u7528 JSX \u8bed\u6cd5 \u4f60\u53ef\u4ee5\u5728 Babel REPL \u67e5\u770b JSX \u662f\u5982\u4f55\u88ab\u6e32\u67d3\u6210\u539f\u751f JavaScript \u4ee3\u7801\u7684\u3002\n          <div className=\"w-modal-footer\">\n            <Button type=\"danger\" onClick={this.onClosed.bind(this)} >\u786e\u5b9a\u6309\u94ae</Button>\n            <Button onClick={this.onClosed.bind(this)} >\u53d6\u6d88\u6309\u94ae</Button>\n          </div>\n        </Modal>\n        <ButtonGroup>\n          <Button onClick={this.onClick.bind(this)}>\u786e\u8ba4\u5bf9\u8bdd\u6846</Button>\n        </ButtonGroup>\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| title | \u8bbe\u7f6e\u6807\u9898 | Function(e) | - |\n| onCancel | \u53d6\u6d88\u6309\u94ae\u7684\u56de\u8c03\u51fd\u6570 | Function(e) | - |\n| onConfirm | \u70b9\u51fb\u786e\u5b9a\u6309\u94ae\u56de\u8c03 | Function(e) | - |\n| cancelText | \u53d6\u6d88\u6309\u94ae\u6587\u5b57\uff0c | String | - |\n| confirmText | \u786e\u8ba4\u6309\u94ae\u6587\u5b57 | String | `\u786e\u8ba4` |\n| icon | \u8bbe\u7f6e\u5bf9\u8bdd\u6846\u53f3\u4e0a\u89d2\u56fe\u6807\uff0c\u8bbe\u7f6e `type` \u5c06\u56fe\u6807\u8bbe\u7f6e\u4e0d\u540c\u7684\u989c\u8272\u3002\u5f53\u524d\u5c5e\u6027\u4e3a [`<Icon>`](#/components/icon) \u7ec4\u4ef6\u7684 `type` \u5c5e\u6027\uff0c\u6240\u4ee5\u53ef\u4ee5\u53c2\u8003\u8be5\u7ec4\u4ef6\u81ea\u5b9a\u4e49\u56fe\u6807\u3002 | String/ReactNode | - |\n| useButton | \u662f\u5426\u4f7f\u7528\u9ed8\u8ba4\u6309\u94ae\uff0c\u5982\u679c\u8bbe\u7f6e `false` \u9700\u8981\u81ea\u5b9a\u4e49\u6309\u94ae\u5173\u95ed | Boolean | `true` |\n| type | \u6309\u94ae\u7c7b\u578b\u8ddf `<Button>` \u7ec4\u4ef6\u7684 `type` \u53c2\u6570\u4e00\u81f4\uff0c\u540c\u65f6\u4f1a\u5f71\u54cd\u6309\u94ae\u989c\u8272\u3002 | String | `light` |\n| width | \u8bbe\u7f6e\u5f39\u51fa\u6846\u5bbd\u5ea6 | Number | - |\n| bodyStyle | Modal body \u6837\u5f0f | `CSSProperties` | - |\n| cancelButtonProps | cancel \u6309\u94ae props | `ButtonProps` | - |\n| confirmButtonProps | confirm \u6309\u94ae props | `ButtonProps` | - |\n| maxWidth | \u9ed8\u8ba4\u5f39\u51fa\u6846\u6700\u5927\u5bbd\u5ea6 `500` | Number | `500` |\n| minWidth | \u9ed8\u8ba4\u5f39\u51fa\u6846\u6700\u5c0f\u5bbd\u5ea6 `320` | Number | `320` |\n| isCloseButtonShown | \u662f\u5426\u5728\u5bf9\u8bdd\u6846\u7684\u6807\u9898\u4e2d\u663e\u793a\u5173\u95ed\u6309\u94ae\u3002 \u8bf7\u6ce8\u610f\uff0c\u53ea\u6709\u5728\u63d0\u4f9b\u6807\u9898\u65f6\u624d\u4f1a\u5448\u73b0\u6807\u9898\u3002 | Boolean | `true` |\n| isOpen[`<Overlay>`](#/components/overlay) | \u5bf9\u8bdd\u6846\u662f\u5426\u53ef\u89c1 | Boolean | `false` |\n| maskClosable[`<Overlay>`](#/components/overlay) | \u70b9\u51fb\u906e\u7f69\u5c42\u662f\u5426\u5141\u8bb8\u5173\u95ed | Boolean | `true` |\n\n\u66f4\u591a\u5c5e\u6027\u6587\u6863\u8bf7\u53c2\u8003 [Overlay](#/components/overlay)\u3002\n"}}]);
+//# sourceMappingURL=9900.4957c035.chunk.js.map

package/web/static/js/9900.4957c035.chunk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"static/js/9900.4957c035.chunk.js","mappings":"gHAAA","sources":["../../packages/react-modal/README.md"],"sourcesContent":["export default \"Modal 模态对话框\\n===\\n\\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-modal/file/README.md)\\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-modal.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-modal)\\n[![npm version](https://img.shields.io/npm/v/@uiw/react-modal.svg?label=@uiw/react-modal)](https://npmjs.com/@uiw/react-modal)\\n\\n模态对话框。\\n\\n```jsx\\nimport { Modal } from 'uiw';\\n// or\\nimport Modal from '@uiw/react-modal';\\n```\\n\\n### 基本用法\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Modal, ButtonGroup, Button } from 'uiw';\\n\\nclass Demo extends React.Component {\\n  constructor() {\\n    super();\\n    this.state = {\\n      visible: false,\\n    }\\n  }\\n  onClick() {\\n    this.setState({ visible: !this.state.visible });\\n  }\\n  onClosed() {\\n    this.setState({ visible: false });\\n  }\\n  render() {\\n    return (\\n      <div>\\n        <Modal\\n          title=\\\"模态对话框\\\"\\n          isOpen={this.state.visible}\\n          confirmText=\\\"确定按钮\\\"\\n          cancelText=\\\"取消按钮\\\"\\n          icon=\\\"information\\\"\\n          type=\\\"primary\\\"\\n          onConfirm={() => console.log('您点击了确定按钮！')}\\n          onCancel={() => console.log('您点击了取消按钮！')}\\n          onClosed={this.onClosed.bind(this)}\\n        >\\n          React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图，在数据改变时 React 也可以高效地更新渲染界面。\\n          <br /><br />\\n          以声明式编写UI，可以让你的代码更加可靠，且方便调试。\\n          <br /><br />\\n          创建好拥有各自状态的组件，再由组件构成更加复杂的界面。\\n          <br /><br />\\n          无需再用模版代码，通过使用JavaScript编写的组件你可以更好地传递数据，将应用状态和DOM拆分开来。\\n          <br /><br />\\n          无论你现在正在使用什么技术栈，你都可以随时引入 React 开发新特性。\\n          <br /><br />\\n          <b>组件</b>\\n          <br /><br />\\n          React 组件使用一个名为 render() 的方法， 接收数据作为输入，输出页面中对应展示的内容。 下面这个示例中类似XML的写法被称为JSX. 输入的数据通过 this.props 传入 render() 方法。\\n          <br /><br />\\n          使用 React 的时候也可以不使用 JSX 语法 你可以在 <a href=\\\"https://babeljs.io/repl/#?presets=react&code_lz=MYewdgzgLgBApgGzgWzmWBeGAeAFgRgD4AJRBEAGhgHcQAnBAEwEJsB6AwgbgChRJY_KAEMAlmDh0YWRiGABXVOgB0AczhQAokiVQAQgE8AkowAUPGDADkdECChWeASl4AlOMOBQAIgHkAssp0aIySpogoaFBUQmISdC48QA\\\" target=\\\"_blank\\\">Babel REPL</a> 查看 JSX 是如何被渲染成原生 JavaScript 代码的。\\n        </Modal>\\n        <ButtonGroup>\\n          <Button onClick={this.onClick.bind(this)}>确认对话框</Button>\\n        </ButtonGroup>\\n      </div>\\n    )\\n  }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 延迟关闭对话框\\n\\n这里是利用 `Promise` 等它执行完成再去关闭窗口\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Modal, ButtonGroup, Button } from 'uiw';\\n\\nclass Demo extends React.Component {\\n  constructor() {\\n    super();\\n    this.state = {\\n      visible: false,\\n    }\\n    this.time = null\\n  }\\n  onClick() {\\n    this.setState({ visible: !this.state.visible });\\n  }\\n  onClosed() {\\n    this.setState({ visible: false });\\n  }\\n  render() {\\n    return (\\n      <div>\\n        <Modal\\n          title=\\\"模态对话框\\\"\\n          isOpen={this.state.visible}\\n          confirmText=\\\"确定按钮\\\"\\n          cancelText=\\\"取消按钮\\\"\\n          type=\\\"danger\\\"\\n          onCancel={() => {\\n            clearTimeout(this.time)\\n            console.log('您点击了取消按钮！')\\n          }}\\n          onClosed={this.onClosed.bind(this)}\\n          onConfirm={() => {\\n            console.log('确定回调！, 这里是利用Promise等执行完成再去关闭窗口');\\n            return new Promise((resolve, reject) => {\\n              const random = Math.random();\\n              console.log('测试，随机值大于 0.5 执行 resolve 事件，否则 执行 reject 触发 catch 错误', random, random > 0.5)\\n              this.time = setTimeout(random > 0.5 ? resolve : reject, 3000);\\n            }).catch(() => {\\n              // 可以通过下面方式，阻止弹框消失\\n              // throw new Error();\\n            });\\n          }}\\n        >\\n          这是一个单击 “<b>确定按钮</b>” 延迟关闭对话框的实例，关闭对话框触发 “<b>onConfirm</b>” 或 “<b>onCancel</b>” 事件。<br /><br /> 这里是利用 <b>Promise</b> 的特性，等它执行完成后，再去关闭窗口，达到延迟关闭的效果。<br /><br />\\n          这个测试例子，生成随机值判断是否大于 <b>0.5</b> 执行 <b>resolve</b> 事件，否则 执行 <b>reject</b> 触发 <b>catch</b> 错误。\\n        </Modal>\\n        <ButtonGroup>\\n          <Button onClick={this.onClick.bind(this)}>延迟关闭对话框</Button>\\n        </ButtonGroup>\\n      </div>\\n    )\\n  }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n\\n### 表单应用\\n\\n这里是利用 `Promise` 等它执行完成再去关闭窗口\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Modal, ButtonGroup, Button } from 'uiw';\\n\\nclass Demo extends React.Component {\\n  constructor() {\\n    super();\\n    this.state = {\\n      visible: false,\\n      loading: false,\\n    }\\n  }\\n  onClick() {\\n    this.setState({ visible: !this.state.visible });\\n  }\\n  onClosed() {\\n    this.setState({ visible: false });\\n  }\\n  onSubmit({ initial, current }) {\\n    const errorObj = {};\\n    if (current.userName.startsWith('u')) {\\n      errorObj.userName = `姓名 ${current.userName} 不能以 ‘u’ 开头`;\\n    }\\n    if (!current.age || current.age < 18 || current.age > 30) {\\n      errorObj.age = '年龄必须在18 ~ 30岁之间。';\\n    }\\n    if (!current.textarea) {\\n      errorObj.textarea = '请输入描述内容';\\n    }\\n    if(Object.keys(errorObj).length > 0) {\\n      const err = new Error();\\n      err.filed = errorObj;\\n      throw err;\\n    }\\n\\n    this.setState({ loading: true });\\n    setTimeout(() => {\\n      this.setState({ loading: false, visible: false });\\n      Notify.success({ title: '提交成功通知！', description: '提交内容，。' });\\n    }, 2000);\\n  }\\n  render() {\\n    return (\\n      <div>\\n        <Modal\\n          title=\\\"模态对话框\\\"\\n          width={900}\\n          isOpen={this.state.visible}\\n          onClosed={this.onClosed.bind(this)}\\n          type=\\\"danger\\\"\\n          useButton={false}\\n        >\\n          <Form\\n            resetOnSubmit={false}\\n            onSubmit={this.onSubmit.bind(this)}\\n            onSubmitError={(error) => {\\n              if (error.filed) {\\n                return { ...error.filed };\\n              }\\n              return null;\\n            }}\\n            fields={{\\n              userName: {\\n                initialValue: 'uiw',\\n                label: '姓名',\\n                help: '以“u”开头的名字将在此处显示错误信息',\\n                children: <Input type=\\\"text\\\" />\\n              },\\n              age: {\\n                initialValue: 9,\\n                label: '年龄',\\n                children: <Input type=\\\"number\\\" />\\n              },\\n              textarea: {\\n                initialValue: '',\\n                label: '描述说明',\\n                children: <Textarea placeholder=\\\"请输入内容\\\" />\\n              },\\n            }}\\n          >\\n            {({ fields, state, canSubmit }) => {\\n              console.log('fields:-->', state);\\n              return (\\n                <div>\\n                  <Row gutter={10}>\\n                    <Col>{fields.userName}</Col>\\n                    <Col>{fields.age}</Col>\\n                  </Row>\\n                  <Row gutter={10}>\\n                    <Col>{fields.textarea}</Col>\\n                  </Row>\\n                  <Row gutter={10} justify=\\\"flex-end\\\">\\n                    <Col fixed>\\n                      <Button loading={this.state.loading} disabled={!canSubmit()} type=\\\"primary\\\" htmlType=\\\"submit\\\">提交表单</Button>\\n                    </Col>\\n                  </Row>\\n                </div>\\n              )\\n            }}\\n          </Form>\\n        </Modal>\\n        <ButtonGroup>\\n          <Button onClick={this.onClick.bind(this)}>表单中应用</Button>\\n        </ButtonGroup>\\n      </div>\\n    )\\n  }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 自定义页脚\\n\\n设置 `useButton={false}` 隐藏默认的按钮，再根据自己需求定义按钮。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Modal, ButtonGroup, Button } from 'uiw';\\n\\nclass Demo extends React.Component {\\n  constructor() {\\n    super();\\n    this.state = {\\n      visible: false,\\n    }\\n  }\\n  onClick() {\\n    this.setState({ visible: !this.state.visible });\\n  }\\n  onClosed() {\\n    this.setState({ visible: false });\\n  }\\n  render() {\\n    return (\\n      <div>\\n        <Modal\\n          title=\\\"模态对话框\\\"\\n          isOpen={this.state.visible}\\n          useButton={false}\\n          confirmText=\\\"确定按钮\\\"\\n          cancelText=\\\"取消按钮\\\"\\n          icon=\\\"information\\\"\\n          type=\\\"danger\\\"\\n          onConfirm={() => console.log('您点击了确定按钮！')}\\n          onCancel={() => console.log('您点击了取消按钮！')}\\n          onClosed={this.onClosed.bind(this)}\\n        >\\n          React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图，在数据改变时 React 也可以高效地更新渲染界面。\\n          <br /><br />\\n          以声明式编写UI，可以让你的代码更加可靠，且方便调试。\\n          <br /><br />\\n          创建好拥有各自状态的组件，再由组件构成更加复杂的界面。\\n          <br /><br />\\n          无需再用模版代码，通过使用JavaScript编写的组件你可以更好地传递数据，将应用状态和DOM拆分开来。\\n          <br /><br />\\n          无论你现在正在使用什么技术栈，你都可以随时引入 React 开发新特性。\\n          <br /><br />\\n          <b>组件</b>\\n          <br /><br />\\n          React 组件使用一个名为 render() 的方法， 接收数据作为输入，输出页面中对应展示的内容。 下面这个示例中类似XML的写法被称为JSX. 输入的数据通过 this.props 传入 render() 方法。\\n          <br /><br />\\n          使用 React 的时候也可以不使用 JSX 语法 你可以在 Babel REPL 查看 JSX 是如何被渲染成原生 JavaScript 代码的。\\n          <div className=\\\"w-modal-footer\\\">\\n            <Button type=\\\"danger\\\" onClick={this.onClosed.bind(this)} >确定按钮</Button>\\n            <Button onClick={this.onClosed.bind(this)} >取消按钮</Button>\\n          </div>\\n        </Modal>\\n        <ButtonGroup>\\n          <Button onClick={this.onClick.bind(this)}>确认对话框</Button>\\n        </ButtonGroup>\\n      </div>\\n    )\\n  }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Props\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| title | 设置标题 | Function(e) | - |\\n| onCancel | 取消按钮的回调函数 | Function(e) | - |\\n| onConfirm | 点击确定按钮回调 | Function(e) | - |\\n| cancelText | 取消按钮文字， | String | - |\\n| confirmText | 确认按钮文字 | String | `确认` |\\n| icon | 设置对话框右上角图标，设置 `type` 将图标设置不同的颜色。当前属性为 [`<Icon>`](#/components/icon) 组件的 `type` 属性，所以可以参考该组件自定义图标。 | String/ReactNode | - |\\n| useButton | 是否使用默认按钮，如果设置 `false` 需要自定义按钮关闭 | Boolean | `true` |\\n| type | 按钮类型跟 `<Button>` 组件的 `type` 参数一致，同时会影响按钮颜色。 | String | `light` |\\n| width | 设置弹出框宽度 | Number | - |\\n| bodyStyle | Modal body 样式 | `CSSProperties` | - |\\n| cancelButtonProps | cancel 按钮 props | `ButtonProps` | - |\\n| confirmButtonProps | confirm 按钮 props | `ButtonProps` | - |\\n| maxWidth | 默认弹出框最大宽度 `500` | Number | `500` |\\n| minWidth | 默认弹出框最小宽度 `320` | Number | `320` |\\n| isCloseButtonShown | 是否在对话框的标题中显示关闭按钮。 请注意，只有在提供标题时才会呈现标题。 | Boolean | `true` |\\n| isOpen[`<Overlay>`](#/components/overlay) | 对话框是否可见 | Boolean | `false` |\\n| maskClosable[`<Overlay>`](#/components/overlay) | 点击遮罩层是否允许关闭 | Boolean | `true` |\\n\\n更多属性文档请参考 [Overlay](#/components/overlay)。\\n\";"],"names":[],"sourceRoot":""}