@uiw/doc 4.21.12 → 5.0.0-bate-0

package/web/static/js/6536.6fa44339.chunk.js

@@ -1,2 +0,0 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6536],{36536:function(n,t,e){e.r(t),t.default='Popover \u6c14\u6ce1\u5361\u7247\n===\n\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-popover/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-popover.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-popover)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-popover.svg?label=@uiw/react-popover)](https://npmjs.com/@uiw/react-popover)\n\n\u70b9\u51fb/\u9f20\u6807\u79fb\u5165\u5143\u7d20\uff0c\u5f39\u51fa\u6c14\u6ce1\u5f0f\u7684\u5361\u7247\u6d6e\u5c42\u3002\n\n```jsx\nimport { Popover } from \'uiw\';\n// or\nimport Popover from \'@uiw/react-popover\';\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 React from \'react\';\nimport ReactDOM from \'react-dom\';\nimport { Popover, Card, Icon,Row,Col, Button } from \'uiw\';\n\nclass Demo extends React.Component {\n  constructor() {\n    super();\n    this.state = {\n      isOpen: false,\n      isOpen1: false,\n    }\n  }\n  onClick(field) {\n    this.setState({ [field]: false });\n  }\n\n  handleVisibleChange(field, isOpen) {\n    this.setState({ [field]:isOpen });\n  }\n  render() {\n    return (\n      <Row style={{ alignItems: \'center\' }}>\n        <Popover\n          trigger="click"\n          placement="top"\n          isOpen={this.state.isOpen}\n          onVisibleChange={this.handleVisibleChange.bind(this, \'isOpen\')}\n          content={\n            <Card bordered={false} title="Card\u6807\u9898" extra={<a href="#">\u66f4\u591a</a>} style={{ width: 200 }}>\n              <div>Are you sure you want to delete these items? You won\'t be able to recover them.</div>\n              <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 15 }}>\n                <Button size="small" onClick={this.onClick.bind(this, \'isOpen\')}>\n                  Cancel\n                </Button>\n                <Button type="danger" size="small" onClick={this.onClick.bind(this, \'isOpen\')}>\n                  Delete\n                </Button>\n              </div>\n            </Card>\n          }\n        >\n          <Button active={this.state.isOpen}>\u5f39\u51fa\u76ee\u6807</Button>\n        </Popover>\n        <div style={{ marginLeft: 20 }}>\n          <Popover\n            trigger="click"\n            placement="top"\n            isOpen={this.state.isOpen1}\n            onVisibleChange={this.handleVisibleChange.bind(this, \'isOpen1\')}\n            content={\n              <Card bordered={false} title="Card\u6807\u9898" extra={<a href="#">\u66f4\u591a</a>} style={{ width: 200 }}>\n                <div>Are you sure you want to delete these items? You won\'t be able to recover them.</div>\n                <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 15 }}>\n                  <Button size="small" onClick={this.onClick.bind(this, \'isOpen1\')}>\n                    Cancel\n                  </Button>\n                  <Button type="danger" size="small" onClick={this.onClick.bind(this, \'isOpen1\')}>\n                    Delete\n                  </Button>\n                </div>\n              </Card>\n            }\n          >\n            <div>\n              <Icon type="setting" color="#343a40" style={{ fontSize: 20 }} />\n            </div>\n          </Popover>\n        </div>\n      </Row>\n    )\n  }\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 { Popover, Card, Button } from \'uiw\';\n\nconst btnStl = {position: \'relative\', width: 70 }\nconst content = (\n  <Card bordered={false} style={{ width: 120 }}>\n    <div>Are you sure you want to delete these items? You won\'t be able to recover them.</div>\n  </Card>\n)\nconst Demo = () => (\n  <div>\n    <div style={{ position: \'relative\' }}>\n\n      <Popover trigger="click" placement="topLeft" content={content}>\n        <Button style={{ ...btnStl, left: 70 }}>TL</Button>\n      </Popover>\n      <Popover trigger="click" placement="top" content={content}>\n        <Button style={{ ...btnStl, left: 70}}>Top</Button>\n      </Popover>\n      <Popover trigger="click" placement="topRight" content={content}>\n        <Button style={{ ...btnStl, left: 70 }}>TR</Button>\n      </Popover>\n\n    </div>\n    <div style={{ position: \'relative\', paddingTop: 10 }}>\n\n      <Popover trigger="click" placement="leftTop" content={content}>\n        <Button style={{ ...btnStl }}>LT</Button>\n      </Popover>\n      <Popover trigger="click" placement="rightTop" content={content}>\n        <Button style={{ ...btnStl, left: 216 }}>RT</Button>\n      </Popover>\n\n    </div>\n    <div style={{ position: \'relative\', paddingTop: 10 }}>\n\n      <Popover trigger="click" placement="left" content={content}>\n        <Button style={{ ...btnStl }}>Left</Button>\n      </Popover>\n      <Popover trigger="click" placement="right" content={content}>\n        <Button style={{ ...btnStl, left: 216 }}>Right</Button>\n      </Popover>\n\n    </div>\n    <div style={{ position: \'relative\', paddingTop: 10 }}>\n\n      <Popover trigger="click" placement="leftBottom" content={content}>\n        <Button style={{ ...btnStl }}>LB</Button>\n      </Popover>\n      <Popover trigger="click" placement="rightBottom" content={content}>\n        <Button style={{ ...btnStl, left: 216 }}>RB</Button>\n      </Popover>\n\n    </div>\n    <div style={{ position: \'relative\', paddingTop: 10 }}>\n\n      <Popover trigger="click" placement="bottomLeft" content={content}>\n        <Button style={{ ...btnStl, left: 70 }}>BL</Button>\n      </Popover>\n      <Popover trigger="click" placement="bottom" content={content}>\n        <Button style={{ ...btnStl, left: 70 }}>Bottom</Button>\n      </Popover>\n      <Popover trigger="click" placement="bottomRight" content={content}>\n        <Button style={{ ...btnStl, left: 70 }}>BR</Button>\n      </Popover>\n\n    </div>\n  </div>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u9f20\u6807\u7ecf\u8fc7\u5f39\u51fa\u76ee\u6807\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from \'react-dom\';\nimport { Popover, Card, Button } from \'uiw\';\n\nconst btnStl = {position: \'relative\', width: 70 }\nconst content = (\n  <Card\n    style={{ width: 220 }}\n    bordered={false}\n    title="Card\u6807\u9898"\n    footer={\n      <span>\u8fd9\u91cc\u662f\u9875\u811a</span>\n    }\n  >\n    <div>\u8fd9\u662f\u4f60\u9f20\u6807\u7ecf\u8fc7\u5f39\u51fa\u7684\u76ee\u6807\u3002</div>\n  </Card>\n)\nconst Demo = () => (\n  <div>\n    <Popover trigger="hover" placement="top" content={content}>\n      <Button>\u9f20\u6807\u7ecf\u8fc7\u5f39\u51fa\u76ee\u6807</Button>\n    </Popover>\n  </div>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u7126\u70b9\u5c55\u793a\n\n\u901a\u8fc7\u8bbe\u7f6e `trigger="focus"` \u8ba9 `Input` \u7ec4\u4ef6\u5728\u83b7\u53d6\u7126\u70b9\u7684\u65f6\u5019\u5c55\u793a `Popover`\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from \'react\';\nimport ReactDOM from \'react-dom\';\nimport { Popover, Card, Button, Input } from \'uiw\';\n\nconst btnStl = {position: \'relative\', width: 70 }\nclass Demo extends React.Component {\n  constructor() {\n    super();\n    this.state = {\n      isOpen: false,\n      value: \'\',\n    }\n  }\n  onClick(val) {\n    const state = { isOpen: false }\n    if (val) {\n      state.value = val;\n    }\n    if (val === null) state.value = \'\';\n    this.setState({ ...state });\n  }\n  handleVisibleChange(isOpen) {\n    this.setState({ isOpen });\n  }\n  onChange(e) {\n    this.setState({ value: e.target.value });\n  }\n  renderPopup() {\n    return (\n      <Card\n        style={{ width: 220 }}\n        bordered={false}\n        footer={\n          <div style={{ display: "flex", justifyContent: "flex-end" }}>\n            <Button size="small" onClick={this.onClick.bind(this, undefined)}>\n              \u53d6\u6d88\n            </Button>\n            <Button size="small" onClick={this.onClick.bind(this, null)}>\n              \u6e05\u7a7a\n            </Button>\n            <Button type="success" size="small" onClick={this.onClick.bind(this, \'\u8fd9\u662f\u5411 Input \u8f93\u5165\u6846\u63d2\u5165\u7684\u5185\u5bb9\')}>\n              \u63d2\u5165\u5185\u5bb9\n            </Button>\n          </div>\n        }\n      >\n        <div>\u901a\u8fc7\u8bbe\u7f6e `trigger="focus"` \u8ba9 `Input` \u7ec4\u4ef6\u5728\u83b7\u53d6\u7126\u70b9\u7684\u65f6\u5019\u5c55\u793a `Popover`</div>\n      </Card>\n    )\n  }\n  render() {\n    return (\n      <div>\n        <div style={{ width: 200 }}>\n          <Popover\n            trigger="focus"\n            placement="top"\n            isOpen={this.state.isOpen}\n            onVisibleChange={this.handleVisibleChange.bind(this)}\n            content={this.renderPopup()}\n          >\n            <Input placeholder="\u8bf7\u8f93\u5165\u5185\u5bb9" value={this.state.value} onChange={this.onChange.bind(this)}/>\n          </Popover>\n        </div>\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\uff0c\u8fd9\u6837\u4e3a\u4e86\u8ba1\u7b97\u4f4d\u7f6e\u51c6\u786e\uff0c\u4f60\u9700\u8981\u5c06\u7236\u5c42\u6837\u5f0f\u8bbe\u4e3a `position: relative;` \u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from \'react\';\nimport ReactDOM from \'react-dom\';\nimport { Popover, Card, Button } from \'uiw\';\n\nclass Demo extends React.Component {\n  constructor() {\n    super();\n    this.state = {\n      isOpen: false,\n    }\n  }\n  onClick() {\n    this.setState({ isOpen: false });\n  }\n  handleVisibleChange(isOpen) {\n    this.setState({ isOpen });\n  }\n  render() {\n    return (\n      <div>\n        <div style={{ position: \'relative\' }}>\n          <Popover\n            trigger="click"\n            placement="right"\n            usePortal={false}\n            isOpen={this.state.isOpen}\n            onVisibleChange={this.handleVisibleChange.bind(this)}\n            content={\n              <Card bordered={false} title="Card\u6807\u9898" extra={<a href="#">\u66f4\u591a</a>} style={{ width: 200 }}>\n                <div>Are you sure you want to delete these items? You won\'t be able to recover them.</div>\n                <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 15 }}>\n                  <Button size="small" onClick={this.onClick.bind(this)}>\n                    Cancel\n                  </Button>\n                  <Button type="danger" size="small" onClick={this.onClick.bind(this)}>\n                    Delete\n                  </Button>\n                </div>\n              </Card>\n            }\n          >\n            <Button>\u5f39\u51fa\u76ee\u6807</Button>\n          </Popover>\n        </div>\n      </div>\n    )\n  }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n### Confirm \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 { Popover, Row } from \'uiw\';\n\nclass Demo extends React.Component {\n  render() {\n    return (\n      <Row style={{ alignItems: \'center\' }}>\n        <Popover.Confirm title="Are you sure delete this?">delete</Popover.Confirm>\n      </Row>\n    )\n  }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n## Props\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| content | \u663e\u793a\u7684\u5185\u5bb9 | String,React.ReactNode | - |\n| placement | \u6c14\u6ce1\u6846\u4f4d\u7f6e\uff0c\u53ef\u73b0\u5b9e\u7bad\u5934\u5728\u4e0d\u540c\u7684\u65b9\u4f4d | Enum{`top`, `topLeft`, `topRight`,<br /> `left`, `leftTop`, `leftBottom`,<br /> `right`, `rightTop`, `rightBottom`,<br /> `bottom`, `bottomLeft`, `bottomRight`} | `top` |\n| visibleArrow | \u662f\u5426\u663e\u793a\u7bad\u5934 | Boolean | `true` |\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\uff0c\u7ee7\u627f `<OverlayTrigger />` \u7ec4\u4ef6\u5c5e\u6027 | Object/Number | - |\n| trigger| \u60ac\u505c/\u70b9\u51fb\u5f39\u51fa\u7a97\u53e3\uff0c\u7ee7\u627f `<OverlayTrigger />` \u7ec4\u4ef6\u5c5e\u6027 | Enum{`hover`, `click`, `focus`} | `hover` |\n| disabled | \u662f\u5426\u7981\u7528\u5f39\u51fa\u76ee\u6807 | Boolean | `false` |\n| isOpen | \u9ed8\u8ba4\u662f\u5426\u663e\u793a\u5f39\u7a97\uff0c\u7ee7\u627f `<OverlayTrigger />` \u7ec4\u4ef6\u5c5e\u6027 | Boolean | `false` |\n| autoAdjustOverflow | \u5f39\u51fa\u5c42\u88ab\u906e\u6321\u65f6\u81ea\u52a8\u8c03\u6574\u4f4d\u7f6e\uff0c\u7ee7\u627f `<OverlayTrigger />` \u7ec4\u4ef6\u5c5e\u6027 | Boolean | `false` |\n| onVisibleChange | \u663e\u793a\u9690\u85cf\u7684\u56de\u8c03\uff0c\u7ee7\u627f `<OverlayTrigger />` \u7ec4\u4ef6\u5c5e\u6027 | Function(isVisible:bool) | - |\n\n## Confirm Props\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| trigger| \u60ac\u505c/\u70b9\u51fb\u5f39\u51fa\u7a97\u53e3\uff0c\u7ee7\u627f `<OverlayTrigger />` \u7ec4\u4ef6\u5c5e\u6027 | Enum{`hover`, `click`, `focus`} | `hover` |\n| placement | \u6c14\u6ce1\u6846\u4f4d\u7f6e\uff0c\u53ef\u73b0\u5b9e\u7bad\u5934\u5728\u4e0d\u540c\u7684\u65b9\u4f4d | Enum{`top`, `topLeft`, `topRight`,<br /> `left`, `leftTop`, `leftBottom`,<br /> `right`, `rightTop`, `rightBottom`,<br /> `bottom`, `bottomLeft`, `bottomRight`} | `top` |\n| visibleArrow | \u662f\u5426\u663e\u793a\u7bad\u5934 | Boolean | `true` |\n| children | \u5b50\u5143\u7d20 | React.ReactNode | - |\n| onConfirm | \u786e\u5b9a\u65b9\u6cd5 | ()=>void |  |\n| confirmText | \u786e\u5b9a\u6309\u94ae\u6587\u672c | string | Yes |\n| title | \u6807\u9898\u4fe1\u606f | React.ReactNode | - |\n| cancelText | \u53d6\u6d88\u6309\u94ae\u6587\u672c | string | No |\n\n\n\u66f4\u591a\u5c5e\u6027\u8bf7\u53c2\u8003 [OverlayTrigger](#/components/overlay-trigger)\u3002\n'}}]);
-//# sourceMappingURL=6536.6fa44339.chunk.js.map

package/web/static/js/6536.6fa44339.chunk.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"static/js/6536.6fa44339.chunk.js","mappings":"gHAAA","sources":["../../packages/react-popover/README.md"],"sourcesContent":["export default \"Popover 气泡卡片\\n===\\n\\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-popover/file/README.md)\\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-popover.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-popover)\\n[![npm version](https://img.shields.io/npm/v/@uiw/react-popover.svg?label=@uiw/react-popover)](https://npmjs.com/@uiw/react-popover)\\n\\n点击/鼠标移入元素，弹出气泡式的卡片浮层。\\n\\n```jsx\\nimport { Popover } from 'uiw';\\n// or\\nimport Popover from '@uiw/react-popover';\\n```\\n\\n### 基础用法\\n\\n最简单的用法。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Popover, Card, Icon,Row,Col, Button } from 'uiw';\\n\\nclass Demo extends React.Component {\\n  constructor() {\\n    super();\\n    this.state = {\\n      isOpen: false,\\n      isOpen1: false,\\n    }\\n  }\\n  onClick(field) {\\n    this.setState({ [field]: false });\\n  }\\n\\n  handleVisibleChange(field, isOpen) {\\n    this.setState({ [field]:isOpen });\\n  }\\n  render() {\\n    return (\\n      <Row style={{ alignItems: 'center' }}>\\n        <Popover\\n          trigger=\\\"click\\\"\\n          placement=\\\"top\\\"\\n          isOpen={this.state.isOpen}\\n          onVisibleChange={this.handleVisibleChange.bind(this, 'isOpen')}\\n          content={\\n            <Card bordered={false} title=\\\"Card标题\\\" extra={<a href=\\\"#\\\">更多</a>} style={{ width: 200 }}>\\n              <div>Are you sure you want to delete these items? You won't be able to recover them.</div>\\n              <div style={{ display: \\\"flex\\\", justifyContent: \\\"flex-end\\\", marginTop: 15 }}>\\n                <Button size=\\\"small\\\" onClick={this.onClick.bind(this, 'isOpen')}>\\n                  Cancel\\n                </Button>\\n                <Button type=\\\"danger\\\" size=\\\"small\\\" onClick={this.onClick.bind(this, 'isOpen')}>\\n                  Delete\\n                </Button>\\n              </div>\\n            </Card>\\n          }\\n        >\\n          <Button active={this.state.isOpen}>弹出目标</Button>\\n        </Popover>\\n        <div style={{ marginLeft: 20 }}>\\n          <Popover\\n            trigger=\\\"click\\\"\\n            placement=\\\"top\\\"\\n            isOpen={this.state.isOpen1}\\n            onVisibleChange={this.handleVisibleChange.bind(this, 'isOpen1')}\\n            content={\\n              <Card bordered={false} title=\\\"Card标题\\\" extra={<a href=\\\"#\\\">更多</a>} style={{ width: 200 }}>\\n                <div>Are you sure you want to delete these items? You won't be able to recover them.</div>\\n                <div style={{ display: \\\"flex\\\", justifyContent: \\\"flex-end\\\", marginTop: 15 }}>\\n                  <Button size=\\\"small\\\" onClick={this.onClick.bind(this, 'isOpen1')}>\\n                    Cancel\\n                  </Button>\\n                  <Button type=\\\"danger\\\" size=\\\"small\\\" onClick={this.onClick.bind(this, 'isOpen1')}>\\n                    Delete\\n                  </Button>\\n                </div>\\n              </Card>\\n            }\\n          >\\n            <div>\\n              <Icon type=\\\"setting\\\" color=\\\"#343a40\\\" style={{ fontSize: 20 }} />\\n            </div>\\n          </Popover>\\n        </div>\\n      </Row>\\n    )\\n  }\\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 { Popover, Card, Button } from 'uiw';\\n\\nconst btnStl = {position: 'relative', width: 70 }\\nconst content = (\\n  <Card bordered={false} style={{ width: 120 }}>\\n    <div>Are you sure you want to delete these items? You won't be able to recover them.</div>\\n  </Card>\\n)\\nconst Demo = () => (\\n  <div>\\n    <div style={{ position: 'relative' }}>\\n\\n      <Popover trigger=\\\"click\\\" placement=\\\"topLeft\\\" content={content}>\\n        <Button style={{ ...btnStl, left: 70 }}>TL</Button>\\n      </Popover>\\n      <Popover trigger=\\\"click\\\" placement=\\\"top\\\" content={content}>\\n        <Button style={{ ...btnStl, left: 70}}>Top</Button>\\n      </Popover>\\n      <Popover trigger=\\\"click\\\" placement=\\\"topRight\\\" content={content}>\\n        <Button style={{ ...btnStl, left: 70 }}>TR</Button>\\n      </Popover>\\n\\n    </div>\\n    <div style={{ position: 'relative', paddingTop: 10 }}>\\n\\n      <Popover trigger=\\\"click\\\" placement=\\\"leftTop\\\" content={content}>\\n        <Button style={{ ...btnStl }}>LT</Button>\\n      </Popover>\\n      <Popover trigger=\\\"click\\\" placement=\\\"rightTop\\\" content={content}>\\n        <Button style={{ ...btnStl, left: 216 }}>RT</Button>\\n      </Popover>\\n\\n    </div>\\n    <div style={{ position: 'relative', paddingTop: 10 }}>\\n\\n      <Popover trigger=\\\"click\\\" placement=\\\"left\\\" content={content}>\\n        <Button style={{ ...btnStl }}>Left</Button>\\n      </Popover>\\n      <Popover trigger=\\\"click\\\" placement=\\\"right\\\" content={content}>\\n        <Button style={{ ...btnStl, left: 216 }}>Right</Button>\\n      </Popover>\\n\\n    </div>\\n    <div style={{ position: 'relative', paddingTop: 10 }}>\\n\\n      <Popover trigger=\\\"click\\\" placement=\\\"leftBottom\\\" content={content}>\\n        <Button style={{ ...btnStl }}>LB</Button>\\n      </Popover>\\n      <Popover trigger=\\\"click\\\" placement=\\\"rightBottom\\\" content={content}>\\n        <Button style={{ ...btnStl, left: 216 }}>RB</Button>\\n      </Popover>\\n\\n    </div>\\n    <div style={{ position: 'relative', paddingTop: 10 }}>\\n\\n      <Popover trigger=\\\"click\\\" placement=\\\"bottomLeft\\\" content={content}>\\n        <Button style={{ ...btnStl, left: 70 }}>BL</Button>\\n      </Popover>\\n      <Popover trigger=\\\"click\\\" placement=\\\"bottom\\\" content={content}>\\n        <Button style={{ ...btnStl, left: 70 }}>Bottom</Button>\\n      </Popover>\\n      <Popover trigger=\\\"click\\\" placement=\\\"bottomRight\\\" content={content}>\\n        <Button style={{ ...btnStl, left: 70 }}>BR</Button>\\n      </Popover>\\n\\n    </div>\\n  </div>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 鼠标经过弹出目标\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Popover, Card, Button } from 'uiw';\\n\\nconst btnStl = {position: 'relative', width: 70 }\\nconst content = (\\n  <Card\\n    style={{ width: 220 }}\\n    bordered={false}\\n    title=\\\"Card标题\\\"\\n    footer={\\n      <span>这里是页脚</span>\\n    }\\n  >\\n    <div>这是你鼠标经过弹出的目标。</div>\\n  </Card>\\n)\\nconst Demo = () => (\\n  <div>\\n    <Popover trigger=\\\"hover\\\" placement=\\\"top\\\" content={content}>\\n      <Button>鼠标经过弹出目标</Button>\\n    </Popover>\\n  </div>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 焦点展示\\n\\n通过设置 `trigger=\\\"focus\\\"` 让 `Input` 组件在获取焦点的时候展示 `Popover`\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Popover, Card, Button, Input } from 'uiw';\\n\\nconst btnStl = {position: 'relative', width: 70 }\\nclass Demo extends React.Component {\\n  constructor() {\\n    super();\\n    this.state = {\\n      isOpen: false,\\n      value: '',\\n    }\\n  }\\n  onClick(val) {\\n    const state = { isOpen: false }\\n    if (val) {\\n      state.value = val;\\n    }\\n    if (val === null) state.value = '';\\n    this.setState({ ...state });\\n  }\\n  handleVisibleChange(isOpen) {\\n    this.setState({ isOpen });\\n  }\\n  onChange(e) {\\n    this.setState({ value: e.target.value });\\n  }\\n  renderPopup() {\\n    return (\\n      <Card\\n        style={{ width: 220 }}\\n        bordered={false}\\n        footer={\\n          <div style={{ display: \\\"flex\\\", justifyContent: \\\"flex-end\\\" }}>\\n            <Button size=\\\"small\\\" onClick={this.onClick.bind(this, undefined)}>\\n              取消\\n            </Button>\\n            <Button size=\\\"small\\\" onClick={this.onClick.bind(this, null)}>\\n              清空\\n            </Button>\\n            <Button type=\\\"success\\\" size=\\\"small\\\" onClick={this.onClick.bind(this, '这是向 Input 输入框插入的内容')}>\\n              插入内容\\n            </Button>\\n          </div>\\n        }\\n      >\\n        <div>通过设置 `trigger=\\\"focus\\\"` 让 `Input` 组件在获取焦点的时候展示 `Popover`</div>\\n      </Card>\\n    )\\n  }\\n  render() {\\n    return (\\n      <div>\\n        <div style={{ width: 200 }}>\\n          <Popover\\n            trigger=\\\"focus\\\"\\n            placement=\\\"top\\\"\\n            isOpen={this.state.isOpen}\\n            onVisibleChange={this.handleVisibleChange.bind(this)}\\n            content={this.renderPopup()}\\n          >\\n            <Input placeholder=\\\"请输入内容\\\" value={this.state.value} onChange={this.onChange.bind(this)}/>\\n          </Popover>\\n        </div>\\n      </div>\\n    )\\n  }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### usePortal\\n\\n设置 `usePortal={false}` 将模态对话框生成到根节点的里面，这样为了计算位置准确，你需要将父层样式设为 `position: relative;` 。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Popover, Card, Button } from 'uiw';\\n\\nclass Demo extends React.Component {\\n  constructor() {\\n    super();\\n    this.state = {\\n      isOpen: false,\\n    }\\n  }\\n  onClick() {\\n    this.setState({ isOpen: false });\\n  }\\n  handleVisibleChange(isOpen) {\\n    this.setState({ isOpen });\\n  }\\n  render() {\\n    return (\\n      <div>\\n        <div style={{ position: 'relative' }}>\\n          <Popover\\n            trigger=\\\"click\\\"\\n            placement=\\\"right\\\"\\n            usePortal={false}\\n            isOpen={this.state.isOpen}\\n            onVisibleChange={this.handleVisibleChange.bind(this)}\\n            content={\\n              <Card bordered={false} title=\\\"Card标题\\\" extra={<a href=\\\"#\\\">更多</a>} style={{ width: 200 }}>\\n                <div>Are you sure you want to delete these items? You won't be able to recover them.</div>\\n                <div style={{ display: \\\"flex\\\", justifyContent: \\\"flex-end\\\", marginTop: 15 }}>\\n                  <Button size=\\\"small\\\" onClick={this.onClick.bind(this)}>\\n                    Cancel\\n                  </Button>\\n                  <Button type=\\\"danger\\\" size=\\\"small\\\" onClick={this.onClick.bind(this)}>\\n                    Delete\\n                  </Button>\\n                </div>\\n              </Card>\\n            }\\n          >\\n            <Button>弹出目标</Button>\\n          </Popover>\\n        </div>\\n      </div>\\n    )\\n  }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### Confirm 用法\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Popover, Row } from 'uiw';\\n\\nclass Demo extends React.Component {\\n  render() {\\n    return (\\n      <Row style={{ alignItems: 'center' }}>\\n        <Popover.Confirm title=\\\"Are you sure delete this?\\\">delete</Popover.Confirm>\\n      </Row>\\n    )\\n  }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Props\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| content | 显示的内容 | String,React.ReactNode | - |\\n| placement | 气泡框位置，可现实箭头在不同的方位 | Enum{`top`, `topLeft`, `topRight`,<br /> `left`, `leftTop`, `leftBottom`,<br /> `right`, `rightTop`, `rightBottom`,<br /> `bottom`, `bottomLeft`, `bottomRight`} | `top` |\\n| visibleArrow | 是否显示箭头 | Boolean | `true` |\\n| delay | 延迟进入和消失，`{ show: 2000, hide: 4000 }` 或者直接设置 `2000`，只对 `trigger=hover` 有效，继承 `<OverlayTrigger />` 组件属性 | Object/Number | - |\\n| trigger| 悬停/点击弹出窗口，继承 `<OverlayTrigger />` 组件属性 | Enum{`hover`, `click`, `focus`} | `hover` |\\n| disabled | 是否禁用弹出目标 | Boolean | `false` |\\n| isOpen | 默认是否显示弹窗，继承 `<OverlayTrigger />` 组件属性 | Boolean | `false` |\\n| autoAdjustOverflow | 弹出层被遮挡时自动调整位置，继承 `<OverlayTrigger />` 组件属性 | Boolean | `false` |\\n| onVisibleChange | 显示隐藏的回调，继承 `<OverlayTrigger />` 组件属性 | Function(isVisible:bool) | - |\\n\\n## Confirm Props\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| trigger| 悬停/点击弹出窗口，继承 `<OverlayTrigger />` 组件属性 | Enum{`hover`, `click`, `focus`} | `hover` |\\n| placement | 气泡框位置，可现实箭头在不同的方位 | Enum{`top`, `topLeft`, `topRight`,<br /> `left`, `leftTop`, `leftBottom`,<br /> `right`, `rightTop`, `rightBottom`,<br /> `bottom`, `bottomLeft`, `bottomRight`} | `top` |\\n| visibleArrow | 是否显示箭头 | Boolean | `true` |\\n| children | 子元素 | React.ReactNode | - |\\n| onConfirm | 确定方法 | ()=>void |  |\\n| confirmText | 确定按钮文本 | string | Yes |\\n| title | 标题信息 | React.ReactNode | - |\\n| cancelText | 取消按钮文本 | string | No |\\n\\n\\n更多属性请参考 [OverlayTrigger](#/components/overlay-trigger)。\\n\";"],"names":[],"sourceRoot":""}

package/web/static/js/6566.511e95c6.chunk.js

@@ -1,2 +0,0 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6566],{36566:function(n,e,t){t.r(e),e.default="Form \u8868\u5355\n===\n\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-form/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-form.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-form)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-form.svg?label=@uiw/react-form)](https://npmjs.com/@uiw/react-form)\n\n\u7531\u8f93\u5165\u6846\u3001\u9009\u62e9\u5668\u3001\u5355\u9009\u6846\u3001\u591a\u9009\u6846\u7b49\u63a7\u4ef6\u7ec4\u6210\uff0c\u7528\u4ee5\u6536\u96c6\u3001\u6821\u9a8c\u3001\u63d0\u4ea4\u6570\u636e\u3002\n\n```jsx\nimport { Form, FormItem } from 'uiw';\n// or\nimport { Form, FormItem } from '@uiw/react-form';\n```\n\n### \u57fa\u672c\u7528\u6cd5\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\n\nimport React, { useState, useRef } from \"react\";\nimport ReactDOM from 'react-dom';\nimport { Form, Input, Row, Col, Slider, Button, Notify } from 'uiw';\n\nfunction Demo() {\n  const form = useRef()\n\n  const onSubmit = () => {\n    form.current.onSubmit()\n  }\n  const resetForm = () => {\n    form.current.resetForm()\n  }\n  const getFieldValues = () => {\n    console.log('getFieldValues', form.current.getFieldValues())\n  }\n\n  const setFieldValue=()=>{\n    form.current.setFieldValue('name','UIW')\n  }\n\n  return (\n    <div>\n      <Form\n        ref={form}\n        onChange={({ initial, current }) => {\n          console.log('onChange', initial, current);\n        }}\n        onSubmit={({ initial, current }) => {\n          if (current.name === initial.name) {\n            Notify.error({\n              title: '\u63d0\u4ea4\u5931\u8d25\uff01',\n              description: `\u8868\u5355\u63d0\u4ea4\u5185\u5bb9\u4e3a\u7a7a\uff01`,\n            });\n          } else {\n            Notify.success({\n              title: '\u63d0\u4ea4\u6210\u529f\uff01',\n              description: `\u59d3\u540d\u4e3a\uff1a${current.name}\uff0c\u63d0\u4ea4\u5b8c\u6210\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01`,\n            });\n          }\n        }}\n        fields={{\n          name: {\n            label: '\u59d3\u540d',\n            children: <Input placeholder=\"\u8bf7\u8f93\u5165\u59d3\u540d\" />\n          },\n        }}\n      >\n        {({ fields, state, canSubmit }) => {\n          return (\n            <div>\n              <Row>\n                <Col style={{ maxWidth: 300 }}>{fields.name}</Col>\n              </Row>\n              <Row>\n                <Col>\n                  <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n                </Col>\n              </Row>\n              <Row>\n                <Col>\n                  {JSON.stringify(state.current)}\n                </Col>\n              </Row>\n            </div>\n          )\n        }}\n      </Form>\n      <Button type=\"primary\" onClick={onSubmit} >submit</Button>\n      <Button type=\"primary\" onClick={resetForm}>resetForm</Button>\n      <Button type=\"primary\" onClick={getFieldValues}>getValues</Button>\n      <Button type=\"primary\" onClick={setFieldValue}>setFieldValue</Button>\n    </div>\n  )\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u81ea\u5b9a\u4e49\u6821\u9a8c\n\n\u4e00\u822c\u6821\u9a8c\u53ef\u4e0d\u9700\u5f15\u5165\u5916\u90e8\u5305\u89e3\u51b3\uff0c\u5982\u679c\u9047\u5230\u5927\u578b\u5de5\u7a0b\u8868\u5355\u6bd4\u8f83\u591a\u7684\u5730\u65b9\u63a8\u8350\u4f7f\u7528 [jquense/yup](https://github.com/jquense/yup)\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Form, Input, Notify, Checkbox, Switch, RadioGroup, Radio, Textarea, Row, Col, Button } from 'uiw';\n\nconst Demo = () => (\n  <Form\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.checkboxOne) {\n        errorObj.checkboxOne = '\u4e00\u4e2a\u591a\u9009\u6761\u4ef6 \u4e3a\u5fc5\u586b';\n      }\n      if (!current.terms) {\n        errorObj.terms = '\u5fc5\u987b\u7edf\u4e00\u670d\u52a1\u6761\u6b3e';\n      }\n      if(Object.keys(errorObj).length > 0) {\n        const err = new Error();\n        err.filed = errorObj;\n        throw err;\n      }\n      Notify.success({\n        title: '\u63d0\u4ea4\u6210\u529f\uff01',\n        description: `\u59d3\u540d\u4e3a\uff1a${current.userName}\uff0c\u63d0\u4ea4\u5b8c\u6210\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01`,\n      });\n    }}\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        children: <Input type=\"text\" />,\n        help: '\u4ee5\u201cu\u201d\u5f00\u5934\u7684\u540d\u5b57\u5c06\u5728\u6b64\u5904\u663e\u793a\u9519\u8bef\u4fe1\u606f'\n      },\n      age: {\n        initialValue: '9',\n        label: '\u5e74\u9f84',\n        children: <Input type=\"number\" />\n      },\n      checkbox: {\n        initialValue: ['\u56db\u5ddd\u83dc'],\n        label: '\u9009\u62e9\u4f60\u60f3\u5403\u7684\u83dc',\n        children: (\n          <Checkbox.Group>\n            <div>\u83dc\u7cfb</div>\n            <Checkbox value=\"\u56db\u5ddd\u83dc\">\u56db\u5ddd\u83dc</Checkbox>\n            <Checkbox value=\"\u6e56\u5317\u83dc\">\u6e56\u5317\u83dc</Checkbox>\n            <Checkbox value=\"\u897f\u5317\u83dc\">\u897f\u5317\u83dc</Checkbox>\n            <Checkbox value=\"\u65b0\u7586\u83dc\">\u65b0\u7586\u83dc</Checkbox>\n            <Checkbox value=\"\u4e1c\u5317\u83dc\">\u4e1c\u5317\u83dc</Checkbox>\n            <div style={{ marginTop: 10 }}>\u5bb6\u5e38\u83dc</div>\n            <Checkbox value=\"\u7ea2\u70e7\u6b66\u660c\u9c7c\">\u7ea2\u70e7\u6b66\u660c\u9c7c</Checkbox>\n            <Checkbox value=\"\u9ebb\u5a46\u8c46\u8150\">\u9ebb\u5a46\u8c46\u8150</Checkbox>\n            <Checkbox value=\"\u5317\u4eac\u70e4\u9e2d\">\u5317\u4eac\u70e4\u9e2d</Checkbox>\n          </Checkbox.Group>\n        )\n      },\n      checkboxOne: {\n        inline: true,\n        label: '\u4e00\u4e2a\u591a\u9009\u6761\u4ef6',\n        children: <Checkbox value=\"1\">\u56db\u5ddd\u83dc</Checkbox>\n      },\n      switch: {\n        inline: true,\n        initialValue: true,\n        label: '\u5f00\u542f',\n        children: <Switch size=\"small\" />\n      },\n      radioGroup: {\n        inline: true,\n        initialValue: '\u7537',\n        label: '\u5355\u9009',\n        children: (\n          <RadioGroup name=\"other\">\n            <Radio value=\"\u7537\">\u7537</Radio>\n            <Radio value=\"\u5973\">\u5973</Radio>\n            <Radio value=\"\u4eba\u5996\" disabled>\u4eba\u5996</Radio>\n            <Radio value=\"\u672a\u77e5\">\u672a\u77e5</Radio>\n          </RadioGroup>\n        )\n      },\n      textarea: {\n        initialValue: '',\n        label: '\u591a\u884c\u6587\u672c\u8f93\u5165\u6846',\n        children: <Textarea placeholder=\"\u8bf7\u8f93\u5165\u5185\u5bb9\" />\n      },\n      terms: {\n        validator: (currentValue) => {\n          return !currentValue ? '\u5fc5\u987b\u7edf\u4e00\u670d\u52a1\u6761\u6b3e' : null;\n        },\n        style: { marginBottom: 0 },\n        children: <Checkbox value=\"1\">\u5df2\u9605\u8bfb\u5e76\u540c\u610f<a href=\"#\">\u670d\u52a1\u6761\u6b3e</a></Checkbox>\n      }\n    }}\n  >\n    {({ fields, state, canSubmit, resetForm }) => {\n      console.log('fields:--\x3e', state);\n      return (\n        <div style={{ maxWidth: 500 }}>\n          <Row gutter={10}>\n            <Col>{fields.userName}</Col>\n            <Col>{fields.age}</Col>\n          </Row>\n          <Row gutter={10}>\n            <Col>{fields.checkbox}</Col>\n            <Col>{fields.checkboxOne}</Col>\n          </Row>\n          <Row gutter={10}>\n            <Col>{fields.radioGroup}</Col>\n          </Row>\n          <Row gutter={10}>\n            <Col>{fields.switch}</Col>\n          </Row>\n          <Row gutter={10}>\n            <Col>{fields.textarea}</Col>\n          </Row>\n          <Row gutter={10}>\n            <Col style={{ padding: '5px 0 10px 0' }}>\n              {fields.terms}\n            </Col>\n          </Row>\n          <Row gutter={10}>\n            <Col fixed>\n              <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n              <Button type=\"light\" onClick={resetForm}>\u91cd\u7f6e\u8868\u5355</Button>\n            </Col>\n          </Row>\n          <Row>\n            <Col>\n              <pre style={{ padding: '10px 0 0 10px' }}>\n                {JSON.stringify(state.current, null, 2)}\n              </pre>\n            </Col>\n          </Row>\n        </div>\n      )\n    }}\n  </Form>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u6c34\u5e73\u767b\u5f55\u680f\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Form, Input, Row, Col, Notify, Button } from 'uiw';\n\nconst Demo = () => (\n  <div>\n    <Form\n      onSubmit={({initial, current}) => {\n        const errorObj = {};\n        if (!current.username) {\n          errorObj.username = '\u7528\u6237\u540d\u4e0d\u80fd\u4e3a\u7a7a\uff01';\n        }\n        if (!current.password) {\n          errorObj.password = '\u5bc6\u7801\u4e0d\u80fd\u4e3a\u7a7a\uff01';\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        console.log('--\x3e>', initial, current);\n        Notify.success({ title: '\u63d0\u4ea4\u6210\u529f\uff01', description: '\u606d\u559c\u4f60\u767b\u5f55\u6210\u529f\uff01' });\n      }}\n      onSubmitError={(error) => {\n        if (error.filed) {\n          return { ...error.filed };\n        }\n        return null;\n      }}\n      fields={{\n        username: {\n          labelClassName: 'fieldLabel',\n          labelFor: 'username-inline',\n          children: <Input preIcon=\"user\" id=\"username-inline\" />\n        },\n        password: {\n          labelClassName: 'fieldLabel',\n          labelFor: 'password-inline',\n          children: <Input preIcon=\"lock\" id=\"password-inline\" type=\"password\" />\n        },\n      }}\n    >\n      {({ fields, state, canSubmit, resetForm }) => {\n        console.log('fields:', state);\n        return (\n          <div>\n            <Row gutter={10}>\n              <Col fixed>{fields.username}</Col>\n              <Col fixed>{fields.password}</Col>\n            </Row>\n            <Row gutter={10}>\n              <Col>\n                <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n                <Button type=\"danger\" onClick={resetForm}>\u91cd\u7f6e\u8868\u5355</Button>\n              </Col>\n            </Row>\n          </div>\n        )\n      }}\n    </Form>\n  </div>\n);\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u767b\u5f55\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Form, Input, Row, Col, Checkbox, Notify, Button } from 'uiw';\n\nconst Demo = () => (\n  <div>\n    <Form\n      onSubmit={({initial, current}) => {\n        console.log('--\x3e>', initial, current);\n      }}\n      fields={{\n        username: {\n          labelClassName: 'fieldLabel',\n          labelStyle: { width: 60 },\n          labelFor: 'username',\n          children: <Input preIcon=\"user\" id=\"username\" />\n        },\n        password: {\n          labelClassName: 'fieldLabel',\n          labelStyle: { width: 60 },\n          labelFor: 'password',\n          children: <Input preIcon=\"lock\" id=\"password\" type=\"password\" />\n        },\n        terms: {\n          validator: (currentValue) => !currentValue ? '\u5fc5\u987b\u7edf\u4e00\u670d\u52a1\u6761\u6b3e' : null,\n          children: <Checkbox value=\"1\">\u5df2\u9605\u8bfb\u5e76\u540c\u610f</Checkbox>\n        }\n      }}\n    >\n      {({ fields, state, canSubmit }) => {\n        console.log('fields:', state);\n        return (\n          <div>\n            <Row>\n              <Col fixed>{fields.username}</Col>\n            </Row>\n            <Row>\n              <Col fixed>{fields.password}</Col>\n            </Row>\n            <Row>\n              <Col fixed align=\"middle\">{fields.terms}</Col>\n              <Col fixed style={{ marginTop: -4 }}><a href=\"#\">\u670d\u52a1\u6761\u6b3e</a></Col>\n            </Row>\n            <Row>\n              <Col fixed>\n                <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n              </Col>\n            </Row>\n          </div>\n        )\n      }}\n    </Form>\n  </div>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u8868\u5355\u63d0\u4ea4\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Form, Input, Select, Row, Col, Button } from 'uiw';\n\nconst Demo = () => (\n  <div>\n    <Form\n      onSubmit={({initial, current}) => {\n        console.log('--\x3e>', initial, current);\n      }}\n      fields={{\n        firstName: {\n          labelClassName: 'fieldLabel',\n          labelStyle: { width: 60 },\n          inline: true,\n          label: '\u59d3\u6c0f',\n          children: <Input />\n        },\n        lastName: {\n          labelClassName: 'fieldLabel',\n          labelStyle: { width: 60 },\n          initialValue: '\u5148\u751f',\n          inline: true,\n          label: '\u540d\u5b57',\n          children: <Input />\n        },\n        email: {\n          labelClassName: 'fieldLabel',\n          labelStyle: { width: 60 },\n          validator: (currentValue) => {\n            return currentValue && currentValue.length < 2 ? 'Password must be 8+ characters' : null;\n          },\n          inline: true,\n          label: 'Email',\n          children: <Input />\n        },\n        select: {\n          labelClassName: 'fieldLabel',\n          labelStyle: { width: 60 },\n          inline: true,\n          label: '\u9009\u62e9\u5668',\n          children: (\n            <Select>\n              <Select.Option>Choose an item...</Select.Option>\n              <Select.Option value=\"1\">One</Select.Option>\n              <Select.Option value=\"2\">Two</Select.Option>\n              <Select.Option value=\"3\">Three</Select.Option>\n              <Select.Option value=\"4\">Four</Select.Option>\n            </Select>\n          ),\n        },\n      }}\n    >\n      {({ fields, state, canSubmit }) => {\n        console.log('fields:', state);\n        return (\n          <div>\n            <Row gutter={10} style={{ marginBottom: 10 }}>\n              <Col>{fields.firstName}</Col>\n              <Col>{fields.lastName}</Col>\n            </Row>\n            <Row gutter={10}>\n              <Col>{fields.email}</Col>\n              <Col>{fields.select}</Col>\n            </Row>\n            <Row gutter={10}>\n              <Col />\n              <Col fixed align=\"bottom\"><Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button></Col>\n            </Row>\n          </div>\n        )\n      }}\n    </Form>\n  </div>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n\n### \u81ea\u5b9a\u4e49\u63a7\u4ef6\u5e94\u7528\n\n\u4e0b\u9762\u5b9e\u4f8b\u662f\u5728 [`<Form />`](#/components/form) \u8868\u5355\u7ec4\u4ef6\u4e2d\uff0c\u5e94\u7528\u81ea\u5b9a\u4e49 `<CustomSelect />` \u63a7\u4ef6\u7ec4\u4ef6\u3002\n\n> \u26a0\ufe0f \u6ce8\u610f\uff0c\u81ea\u5b9a\u4e49\u63a7\u4ef6\u9700\u8981\u4e24\u4e2a\u5fc5\u8981\u7684 `props` \u53c2\u6570\uff0c`value` \u548c `onChange`\n\x3c!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;--\x3e\n\n- `value` \u7528\u4e8e\u503c\u4f20\u9012\uff0c\n- `onChange(value)` \u7528\u4e8e\u503c\u53d8\u66f4\u9700\u8981\u6267\u884c\u7684\u56de\u8c03\u51fd\u6570\uff0c\u56de\u8c03\u51fd\u6570\u7b2c\u4e00\u4e2a\u53c2\u6570\u5fc5\u987b\u662f `value`\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Form, Row, Col, Dropdown, Menu, Icon, Button, Notify } from 'uiw';\n\n// \u81ea\u5b9a\u4e49\u7ec4\u4ef6\nfunction CustomSelect(props) {\n  const { option = [], onChange } = props;\n  const [value, setValue] = React.useState(props.value);\n  const [isOpen, setIsOpen] = React.useState(false);\n\n  React.useEffect(() => {\n    if (value !== props.value) {\n      setValue(props.value);\n    }\n  }, [props.value]);\n  const label = option.find(item => value === item.value);\n  return (\n    <Dropdown\n      trigger=\"click\"\n      onVisibleChange={(open) => setIsOpen(open)}\n      isOpen={isOpen}\n      menu={\n        <Menu bordered style={{ minWidth: 120 }}>\n          {option.map((item, idx) => (\n            <Menu.Item active={value === item.value} key={idx} text={item.label}\n              onClick={() => {\n                setValue(item.value);\n                setIsOpen(false)\n                onChange && onChange(item.value);\n              }}\n            />\n          ))}\n        </Menu>\n      }\n    >\n      <Button\n        style={{\n          boxShadow: 'inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 -1px 0 rgba(16, 22, 26, 0.1)'\n        }}\n        type=\"link\"\n      >\n        {label.label}<Icon type={isOpen ? 'up' : 'down'} />\n      </Button>\n    </Dropdown>\n  );\n}\n\n// \u81ea\u5b9a\u4e49\u7ec4\u4ef6\u5e94\u7528\u5b9e\u4f8b\nconst Demo = () => (\n  <div>\n    <Form\n      onSubmitError={(error) => {\n        if (error.filed) {\n          return { ...error.filed };\n        }\n        return null;\n      }}\n      onSubmit={({initial, current}) => {\n        console.log('~~~', current);\n        const errorObj = {};\n        if (!current.select) {\n          errorObj.select = '\u5185\u5bb9\u4e3a\u7a7a\uff0c\u8bf7\u8f93\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\u5185\u5bb9\u4e3a\uff1a${current.select}\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01`,\n        });\n      }}\n      fields={{\n        select: {\n          initialValue: 0,\n          children: (\n            <CustomSelect option={[\n              { label: '\u8bf7\u9009\u62e9', value: 0 },\n              { label: '\u7ecf\u6d4e\u8231', value: 1 },\n              { label: '\u8c6a\u534e\u7ecf\u6d4e\u8231', value: 2 },\n              { label: '\u5546\u52a1\u8231', value: 3 },\n              { label: '\u5934\u7b49\u8231', value: 4 },\n            ]} />\n          )\n        },\n      }}\n    >\n      {({ fields, state, canSubmit }) => {\n        return (\n          <div>\n            <Row>\n              <Col style={{ maxWidth: 300 }}>{fields.select}</Col>\n            </Row>\n            <Row>\n              <Col fixed>\n                <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n              </Col>\n            </Row>\n          </div>\n        )\n      }}\n    </Form>\n  </div>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### FormItem \u7ad6\u6392\n\n\u5bf9\u7ec4\u4ef6 `FormItem` \u7ad6\u6392\u5c55\u793a\u793a\u4f8b\u3002\n\n> \u26a0\ufe0f \u6ce8\u610f\uff1a`FormItem` \u7ec4\u4ef6\u53ea\u5728 `Form` \u7ec4\u4ef6\u4e2d\u4f7f\u7528\uff0c\u5728 `@v4.10.4+` \u4ee5\u4e0a\u7248\u672c\u53ef\u4ee5\u5f53\u666e\u901a `form` \u4f7f\u7528\u3002\n\x3c!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;--\x3e\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Form, FormItem, Button } from 'uiw';\n\nconst Demo = () => {\n  const [formData, setFormData] = React.useState({});\n  const handleSubmit = (_, e) => {\n    e && e.preventDefault();\n    const fData = new FormData(e.target);\n    const data = {};\n    fData.forEach((value, key) => { data[key] = value; });\n    setFormData(data);\n  }\n  return (\n    <Form onSubmit={handleSubmit} onReset={() => setFormData({})}>\n      <FormItem\n        label=\"\u53ef\u9009\u5b57\u6bb5\"\n        labelFor=\"item-basic-input\"\n        help={<span>\u5728\u4e0a\u9762\u7684\u5b57\u6bb5\u4e2d\u8f93\u5165\u4e00\u4e2a\u503c</span>}\n      >\n        <Input id=\"item-basic-input\" name=\"basic\" type=\"text\"/>\n      </FormItem>\n      <FormItem\n        label=\"\u7528\u6237\u540d\"\n        labelFor=\"item-username-input\"\n        help={(!formData.username || formData.username.length < 8) ? \"\u7528\u6237\u540d\u957f\u5ea6\u81f3\u5c11\u4e3a8\u4e2a\u5b57\u7b26\u4e32\u3002\" : \"\u7528\u6237\u540d\u6b63\u786e \u221a \"}\n        hasError={(!formData.username || formData.username.length < 8)}\n      >\n        <Input id=\"item-username-input\" name=\"username\" type=\"text\"/>\n      </FormItem>\n      <FormItem>\n        <Button type=\"success\" htmlType=\"submit\"> Submit </Button>\n        <Button type=\"light\" htmlType=\"reset\"> Reset </Button>\n      </FormItem>\n      <pre>\n      {JSON.stringify(formData, null, 2)}\n      </pre>\n    </Form>\n  );\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n### FormItem \u6a2a\u6392\n\n\u5bf9\u7ec4\u4ef6 `FormItem` \u6a2a\u6392\u5c55\u793a\u793a\u4f8b\u3002\n\n> \u26a0\ufe0f \u6ce8\u610f\uff1a`FormItem` \u7ec4\u4ef6\u53ea\u5728 `Form` \u7ec4\u4ef6\u4e2d\u4f7f\u7528\uff0c\u5728 `@v4.10.4+` \u4ee5\u4e0a\u7248\u672c\u53ef\u4ee5\u5f53\u666e\u901a `form` \u4f7f\u7528\u3002\n\x3c!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;--\x3e\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Form, FormItem } from 'uiw';\n\nconst Demo = () => (\n  <Form>\n    <FormItem\n      inline={true}\n      label=\"\u53ef\u9009\u5b57\u6bb5\"\n      labelFor=\"basic-input-inline\"\n      help={<span>\u5728\u4e0a\u9762\u7684\u5b57\u6bb5\u4e2d\u8f93\u5165\u4e00\u4e2a\u503c</span>}\n      onChange={() => {\n        console.log('TEST::');\n      }}\n    >\n      <Input id=\"basic-input-inline\" name=\"basic\" type=\"text\"/>\n    </FormItem>\n    <FormItem\n      inline={true}\n      label=\"\u7528\u6237\u540d\"\n      labelFor=\"username-input-inline\"\n      labelClassName=\"username\"\n      help=\"\u7528\u6237\u540d\u957f\u5ea6\u81f3\u5c11\u4e3a8\u4e2a\u5b57\u7b26\u4e32\u3002\"\n      hasError={true}\n    >\n      <Input id=\"username-input-inline\" name=\"username\" type=\"text\"/>\n    </FormItem>\n  </Form>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n## Form\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| fields | \u8bbe\u7f6e\u5b57\u6bb5 | object | - |\n| children | \u56de\u8c03 {`fields`, `state`, `canSubmit`, `resetForm`} | function | - |\n| onSubmit | \u63d0\u4ea4\u8868\u5355\u65f6\u8c03\u7528  | `(state: FormSubmitProps, event: React.FormEvent) => any` | - |\n| afterSubmit `@3.0.0+` | \u63d0\u4ea4\u56de\u8c03 {`initial`, `current`}  | function({ initial, current }) | - |\n| onChange | \u8868\u5355\u53d1\u751f\u6539\u53d8\u56de\u8c03\u51fd\u6570 {`initial`, `current`}  | function({ initial, current }) | - |\n| onSubmitError | \u8c03\u7528 `onSubmit` \u629b\u51fa\u7684\u4efb\u4f55\u9519\u8bef\u3002\u4ece\u5b57\u6bb5\u540d\u79f0\u8fd4\u56de\u5bf9\u8c61\u6620\u5c04\u3002  | function | - |\n| resetOnSubmit | \u5728 `onSubmit` \u6210\u529f\u540e\u5c06\u8868\u5355\u91cd\u7f6e\u4e3a\u5176\u521d\u59cb\u72b6\u6001\u3002| bool | `true` |\n| ref | \u8fd4\u56deform\u5404\u79cd\u5185\u90e8\u51fd\u6570,\u53ef\u7528\u4e8e\u4e3b\u52a8\u89e6\u53d1\u4e8b\u4ef6 | Ref | - |\n\n\n#### fields\n\n```js\n{\n  firstName: {\n    initialValue: '\u738b',\n    inline: true,\n    label: '\u59d3',\n    labelClassName: 'fieldLabel',\n    labelStyle: { width: 60 },\n    // \u9a8c\u8bc1\uff0c\u901a\u8fc7 `canSubmit()` \u65b9\u6cd5\u83b7\u5f97\uff0c\u63d0\u4ea4\u6309\u94ae\u662f\u5426\u88ab\u7981\u7528\n    validator: (currentValue) => {},\n    help: '\u5e2e\u52a9\u63d0\u793a\u4fe1\u606f\uff01',\n    children: <Input type=\"number\" />\n  },\n}\n```\n\n#### ref\n\n```jsx\n  const form = useRef()\n  render(<Form ref={form}/>)\n```\n\n```js\n    form.current.onSubmit()                                   // \u63d0\u4ea4\u8868\u5355\n    form.current.resetForm()                                  // \u91cd\u7f6eform\n    const fieldValues = form.current.getFieldValues()         // \u83b7\u53d6\u6240\u6709 field\u7684 value\u5bf9\u8c61\n    const error = form.current.getError()                     // \u83b7\u53d6\u6240\u6709\u63d0\u4ea4\u65f6\u9a8c\u8bc1\u9519\u8bef\n    form.current.setFields({ /** [fieldName]: value **/  })   // \u8bbe\u7f6e\u8868\u5355\u7684\u503c,\u8986\u76d6 form\u6240\u6709 field\u7684\u503c\n    form.current.setFieldValue(fieldName, value)              // \u5bf9\u5355\u4e2a field\u8bbe\u7f6e value,\u5982\u679c value\u4e3a\u6570\u7ec4\u8bf7\u81ea\u884c\u6df1\u5ea6\u62f7\u8d1d\u540e\u4f20\u503c,\u4ee5\u514d\u7834\u574f\u539f\u6570\u7ec4\n```\n\n## FormItem\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| label | \u8868\u5355\u6807\u9898\u5c55\u793a | string | - |\n| required | \u8868\u5355\u662f\u5426\u5fc5\u586b\u6807\u8bc6 | boolean | - |\n| labelClassName | \u8868\u5355\u6807\u9898\u6837\u5f0f\u540d\u79f0 | string | - |\n| labelStyle | \u8868\u5355\u6807\u9898\u6837\u5f0f | object | - |\n| labelFor | \u5217\u7684\u5bbd\u5ea6\u76f8\u5bf9\u4e8e\u540c\u4e00\u7f51\u683c\u4e2d\u5176\u4ed6\u5217\u7684\u6bd4\u7387 | number | - |\n| help | \u63d0\u793a\u4fe1\u606f | ReactNode | - |\n| hasError | \u5982\u679c\u4e3atrue\uff0c\u5219\u5e94\u7528\u9519\u8befCSS\u3002\u8f6c\u52a8\u8fb9\u6846\u5e76\u5e2e\u52a9\u6587\u5b57\u53d8\u7ea2\u3002 | number | - |\n"}}]);
-//# sourceMappingURL=6566.511e95c6.chunk.js.map

package/web/static/js/6566.511e95c6.chunk.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"static/js/6566.511e95c6.chunk.js","mappings":"gHAAA","sources":["../../packages/react-form/README.md"],"sourcesContent":["export default \"Form 表单\\n===\\n\\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-form/file/README.md)\\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-form.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-form)\\n[![npm version](https://img.shields.io/npm/v/@uiw/react-form.svg?label=@uiw/react-form)](https://npmjs.com/@uiw/react-form)\\n\\n由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。\\n\\n```jsx\\nimport { Form, FormItem } from 'uiw';\\n// or\\nimport { Form, FormItem } from '@uiw/react-form';\\n```\\n\\n### 基本用法\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\n\\nimport React, { useState, useRef } from \\\"react\\\";\\nimport ReactDOM from 'react-dom';\\nimport { Form, Input, Row, Col, Slider, Button, Notify } from 'uiw';\\n\\nfunction Demo() {\\n  const form = useRef()\\n\\n  const onSubmit = () => {\\n    form.current.onSubmit()\\n  }\\n  const resetForm = () => {\\n    form.current.resetForm()\\n  }\\n  const getFieldValues = () => {\\n    console.log('getFieldValues', form.current.getFieldValues())\\n  }\\n\\n  const setFieldValue=()=>{\\n    form.current.setFieldValue('name','UIW')\\n  }\\n\\n  return (\\n    <div>\\n      <Form\\n        ref={form}\\n        onChange={({ initial, current }) => {\\n          console.log('onChange', initial, current);\\n        }}\\n        onSubmit={({ initial, current }) => {\\n          if (current.name === initial.name) {\\n            Notify.error({\\n              title: '提交失败！',\\n              description: `表单提交内容为空！`,\\n            });\\n          } else {\\n            Notify.success({\\n              title: '提交成功！',\\n              description: `姓名为：${current.name}，提交完成，将自动填充初始化值！`,\\n            });\\n          }\\n        }}\\n        fields={{\\n          name: {\\n            label: '姓名',\\n            children: <Input placeholder=\\\"请输入姓名\\\" />\\n          },\\n        }}\\n      >\\n        {({ fields, state, canSubmit }) => {\\n          return (\\n            <div>\\n              <Row>\\n                <Col style={{ maxWidth: 300 }}>{fields.name}</Col>\\n              </Row>\\n              <Row>\\n                <Col>\\n                  <Button disabled={!canSubmit()} type=\\\"primary\\\" htmlType=\\\"submit\\\">提交</Button>\\n                </Col>\\n              </Row>\\n              <Row>\\n                <Col>\\n                  {JSON.stringify(state.current)}\\n                </Col>\\n              </Row>\\n            </div>\\n          )\\n        }}\\n      </Form>\\n      <Button type=\\\"primary\\\" onClick={onSubmit} >submit</Button>\\n      <Button type=\\\"primary\\\" onClick={resetForm}>resetForm</Button>\\n      <Button type=\\\"primary\\\" onClick={getFieldValues}>getValues</Button>\\n      <Button type=\\\"primary\\\" onClick={setFieldValue}>setFieldValue</Button>\\n    </div>\\n  )\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 自定义校验\\n\\n一般校验可不需引入外部包解决，如果遇到大型工程表单比较多的地方推荐使用 [jquense/yup](https://github.com/jquense/yup)\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Form, Input, Notify, Checkbox, Switch, RadioGroup, Radio, Textarea, Row, Col, Button } from 'uiw';\\n\\nconst Demo = () => (\\n  <Form\\n    onSubmit={({initial, current}) => {\\n      const errorObj = {};\\n      if (current.userName.startsWith('u')) {\\n        errorObj.userName = `姓名 ${current.userName} 不能以 ‘u’ 开头`;\\n      }\\n      if (!current.checkboxOne) {\\n        errorObj.checkboxOne = '一个多选条件 为必填';\\n      }\\n      if (!current.terms) {\\n        errorObj.terms = '必须统一服务条款';\\n      }\\n      if(Object.keys(errorObj).length > 0) {\\n        const err = new Error();\\n        err.filed = errorObj;\\n        throw err;\\n      }\\n      Notify.success({\\n        title: '提交成功！',\\n        description: `姓名为：${current.userName}，提交完成，将自动填充初始化值！`,\\n      });\\n    }}\\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        children: <Input type=\\\"text\\\" />,\\n        help: '以“u”开头的名字将在此处显示错误信息'\\n      },\\n      age: {\\n        initialValue: '9',\\n        label: '年龄',\\n        children: <Input type=\\\"number\\\" />\\n      },\\n      checkbox: {\\n        initialValue: ['四川菜'],\\n        label: '选择你想吃的菜',\\n        children: (\\n          <Checkbox.Group>\\n            <div>菜系</div>\\n            <Checkbox value=\\\"四川菜\\\">四川菜</Checkbox>\\n            <Checkbox value=\\\"湖北菜\\\">湖北菜</Checkbox>\\n            <Checkbox value=\\\"西北菜\\\">西北菜</Checkbox>\\n            <Checkbox value=\\\"新疆菜\\\">新疆菜</Checkbox>\\n            <Checkbox value=\\\"东北菜\\\">东北菜</Checkbox>\\n            <div style={{ marginTop: 10 }}>家常菜</div>\\n            <Checkbox value=\\\"红烧武昌鱼\\\">红烧武昌鱼</Checkbox>\\n            <Checkbox value=\\\"麻婆豆腐\\\">麻婆豆腐</Checkbox>\\n            <Checkbox value=\\\"北京烤鸭\\\">北京烤鸭</Checkbox>\\n          </Checkbox.Group>\\n        )\\n      },\\n      checkboxOne: {\\n        inline: true,\\n        label: '一个多选条件',\\n        children: <Checkbox value=\\\"1\\\">四川菜</Checkbox>\\n      },\\n      switch: {\\n        inline: true,\\n        initialValue: true,\\n        label: '开启',\\n        children: <Switch size=\\\"small\\\" />\\n      },\\n      radioGroup: {\\n        inline: true,\\n        initialValue: '男',\\n        label: '单选',\\n        children: (\\n          <RadioGroup name=\\\"other\\\">\\n            <Radio value=\\\"男\\\">男</Radio>\\n            <Radio value=\\\"女\\\">女</Radio>\\n            <Radio value=\\\"人妖\\\" disabled>人妖</Radio>\\n            <Radio value=\\\"未知\\\">未知</Radio>\\n          </RadioGroup>\\n        )\\n      },\\n      textarea: {\\n        initialValue: '',\\n        label: '多行文本输入框',\\n        children: <Textarea placeholder=\\\"请输入内容\\\" />\\n      },\\n      terms: {\\n        validator: (currentValue) => {\\n          return !currentValue ? '必须统一服务条款' : null;\\n        },\\n        style: { marginBottom: 0 },\\n        children: <Checkbox value=\\\"1\\\">已阅读并同意<a href=\\\"#\\\">服务条款</a></Checkbox>\\n      }\\n    }}\\n  >\\n    {({ fields, state, canSubmit, resetForm }) => {\\n      console.log('fields:-->', state);\\n      return (\\n        <div style={{ maxWidth: 500 }}>\\n          <Row gutter={10}>\\n            <Col>{fields.userName}</Col>\\n            <Col>{fields.age}</Col>\\n          </Row>\\n          <Row gutter={10}>\\n            <Col>{fields.checkbox}</Col>\\n            <Col>{fields.checkboxOne}</Col>\\n          </Row>\\n          <Row gutter={10}>\\n            <Col>{fields.radioGroup}</Col>\\n          </Row>\\n          <Row gutter={10}>\\n            <Col>{fields.switch}</Col>\\n          </Row>\\n          <Row gutter={10}>\\n            <Col>{fields.textarea}</Col>\\n          </Row>\\n          <Row gutter={10}>\\n            <Col style={{ padding: '5px 0 10px 0' }}>\\n              {fields.terms}\\n            </Col>\\n          </Row>\\n          <Row gutter={10}>\\n            <Col fixed>\\n              <Button disabled={!canSubmit()} type=\\\"primary\\\" htmlType=\\\"submit\\\">提交</Button>\\n              <Button type=\\\"light\\\" onClick={resetForm}>重置表单</Button>\\n            </Col>\\n          </Row>\\n          <Row>\\n            <Col>\\n              <pre style={{ padding: '10px 0 0 10px' }}>\\n                {JSON.stringify(state.current, null, 2)}\\n              </pre>\\n            </Col>\\n          </Row>\\n        </div>\\n      )\\n    }}\\n  </Form>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 水平登录栏\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Form, Input, Row, Col, Notify, Button } from 'uiw';\\n\\nconst Demo = () => (\\n  <div>\\n    <Form\\n      onSubmit={({initial, current}) => {\\n        const errorObj = {};\\n        if (!current.username) {\\n          errorObj.username = '用户名不能为空！';\\n        }\\n        if (!current.password) {\\n          errorObj.password = '密码不能为空！';\\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        console.log('-->>', initial, current);\\n        Notify.success({ title: '提交成功！', description: '恭喜你登录成功！' });\\n      }}\\n      onSubmitError={(error) => {\\n        if (error.filed) {\\n          return { ...error.filed };\\n        }\\n        return null;\\n      }}\\n      fields={{\\n        username: {\\n          labelClassName: 'fieldLabel',\\n          labelFor: 'username-inline',\\n          children: <Input preIcon=\\\"user\\\" id=\\\"username-inline\\\" />\\n        },\\n        password: {\\n          labelClassName: 'fieldLabel',\\n          labelFor: 'password-inline',\\n          children: <Input preIcon=\\\"lock\\\" id=\\\"password-inline\\\" type=\\\"password\\\" />\\n        },\\n      }}\\n    >\\n      {({ fields, state, canSubmit, resetForm }) => {\\n        console.log('fields:', state);\\n        return (\\n          <div>\\n            <Row gutter={10}>\\n              <Col fixed>{fields.username}</Col>\\n              <Col fixed>{fields.password}</Col>\\n            </Row>\\n            <Row gutter={10}>\\n              <Col>\\n                <Button disabled={!canSubmit()} type=\\\"primary\\\" htmlType=\\\"submit\\\">提交</Button>\\n                <Button type=\\\"danger\\\" onClick={resetForm}>重置表单</Button>\\n              </Col>\\n            </Row>\\n          </div>\\n        )\\n      }}\\n    </Form>\\n  </div>\\n);\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 登录\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Form, Input, Row, Col, Checkbox, Notify, Button } from 'uiw';\\n\\nconst Demo = () => (\\n  <div>\\n    <Form\\n      onSubmit={({initial, current}) => {\\n        console.log('-->>', initial, current);\\n      }}\\n      fields={{\\n        username: {\\n          labelClassName: 'fieldLabel',\\n          labelStyle: { width: 60 },\\n          labelFor: 'username',\\n          children: <Input preIcon=\\\"user\\\" id=\\\"username\\\" />\\n        },\\n        password: {\\n          labelClassName: 'fieldLabel',\\n          labelStyle: { width: 60 },\\n          labelFor: 'password',\\n          children: <Input preIcon=\\\"lock\\\" id=\\\"password\\\" type=\\\"password\\\" />\\n        },\\n        terms: {\\n          validator: (currentValue) => !currentValue ? '必须统一服务条款' : null,\\n          children: <Checkbox value=\\\"1\\\">已阅读并同意</Checkbox>\\n        }\\n      }}\\n    >\\n      {({ fields, state, canSubmit }) => {\\n        console.log('fields:', state);\\n        return (\\n          <div>\\n            <Row>\\n              <Col fixed>{fields.username}</Col>\\n            </Row>\\n            <Row>\\n              <Col fixed>{fields.password}</Col>\\n            </Row>\\n            <Row>\\n              <Col fixed align=\\\"middle\\\">{fields.terms}</Col>\\n              <Col fixed style={{ marginTop: -4 }}><a href=\\\"#\\\">服务条款</a></Col>\\n            </Row>\\n            <Row>\\n              <Col fixed>\\n                <Button disabled={!canSubmit()} type=\\\"primary\\\" htmlType=\\\"submit\\\">提交</Button>\\n              </Col>\\n            </Row>\\n          </div>\\n        )\\n      }}\\n    </Form>\\n  </div>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 表单提交\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Form, Input, Select, Row, Col, Button } from 'uiw';\\n\\nconst Demo = () => (\\n  <div>\\n    <Form\\n      onSubmit={({initial, current}) => {\\n        console.log('-->>', initial, current);\\n      }}\\n      fields={{\\n        firstName: {\\n          labelClassName: 'fieldLabel',\\n          labelStyle: { width: 60 },\\n          inline: true,\\n          label: '姓氏',\\n          children: <Input />\\n        },\\n        lastName: {\\n          labelClassName: 'fieldLabel',\\n          labelStyle: { width: 60 },\\n          initialValue: '先生',\\n          inline: true,\\n          label: '名字',\\n          children: <Input />\\n        },\\n        email: {\\n          labelClassName: 'fieldLabel',\\n          labelStyle: { width: 60 },\\n          validator: (currentValue) => {\\n            return currentValue && currentValue.length < 2 ? 'Password must be 8+ characters' : null;\\n          },\\n          inline: true,\\n          label: 'Email',\\n          children: <Input />\\n        },\\n        select: {\\n          labelClassName: 'fieldLabel',\\n          labelStyle: { width: 60 },\\n          inline: true,\\n          label: '选择器',\\n          children: (\\n            <Select>\\n              <Select.Option>Choose an item...</Select.Option>\\n              <Select.Option value=\\\"1\\\">One</Select.Option>\\n              <Select.Option value=\\\"2\\\">Two</Select.Option>\\n              <Select.Option value=\\\"3\\\">Three</Select.Option>\\n              <Select.Option value=\\\"4\\\">Four</Select.Option>\\n            </Select>\\n          ),\\n        },\\n      }}\\n    >\\n      {({ fields, state, canSubmit }) => {\\n        console.log('fields:', state);\\n        return (\\n          <div>\\n            <Row gutter={10} style={{ marginBottom: 10 }}>\\n              <Col>{fields.firstName}</Col>\\n              <Col>{fields.lastName}</Col>\\n            </Row>\\n            <Row gutter={10}>\\n              <Col>{fields.email}</Col>\\n              <Col>{fields.select}</Col>\\n            </Row>\\n            <Row gutter={10}>\\n              <Col />\\n              <Col fixed align=\\\"bottom\\\"><Button disabled={!canSubmit()} type=\\\"primary\\\" htmlType=\\\"submit\\\">提交</Button></Col>\\n            </Row>\\n          </div>\\n        )\\n      }}\\n    </Form>\\n  </div>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n\\n### 自定义控件应用\\n\\n下面实例是在 [`<Form />`](#/components/form) 表单组件中，应用自定义 `<CustomSelect />` 控件组件。\\n\\n> ⚠️ 注意，自定义控件需要两个必要的 `props` 参数，`value` 和 `onChange`\\n<!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;-->\\n\\n- `value` 用于值传递，\\n- `onChange(value)` 用于值变更需要执行的回调函数，回调函数第一个参数必须是 `value`。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Form, Row, Col, Dropdown, Menu, Icon, Button, Notify } from 'uiw';\\n\\n// 自定义组件\\nfunction CustomSelect(props) {\\n  const { option = [], onChange } = props;\\n  const [value, setValue] = React.useState(props.value);\\n  const [isOpen, setIsOpen] = React.useState(false);\\n\\n  React.useEffect(() => {\\n    if (value !== props.value) {\\n      setValue(props.value);\\n    }\\n  }, [props.value]);\\n  const label = option.find(item => value === item.value);\\n  return (\\n    <Dropdown\\n      trigger=\\\"click\\\"\\n      onVisibleChange={(open) => setIsOpen(open)}\\n      isOpen={isOpen}\\n      menu={\\n        <Menu bordered style={{ minWidth: 120 }}>\\n          {option.map((item, idx) => (\\n            <Menu.Item active={value === item.value} key={idx} text={item.label}\\n              onClick={() => {\\n                setValue(item.value);\\n                setIsOpen(false)\\n                onChange && onChange(item.value);\\n              }}\\n            />\\n          ))}\\n        </Menu>\\n      }\\n    >\\n      <Button\\n        style={{\\n          boxShadow: 'inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 -1px 0 rgba(16, 22, 26, 0.1)'\\n        }}\\n        type=\\\"link\\\"\\n      >\\n        {label.label}<Icon type={isOpen ? 'up' : 'down'} />\\n      </Button>\\n    </Dropdown>\\n  );\\n}\\n\\n// 自定义组件应用实例\\nconst Demo = () => (\\n  <div>\\n    <Form\\n      onSubmitError={(error) => {\\n        if (error.filed) {\\n          return { ...error.filed };\\n        }\\n        return null;\\n      }}\\n      onSubmit={({initial, current}) => {\\n        console.log('~~~', current);\\n        const errorObj = {};\\n        if (!current.select) {\\n          errorObj.select = '内容为空，请输入内容';\\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.select}，将自动填充初始化值！`,\\n        });\\n      }}\\n      fields={{\\n        select: {\\n          initialValue: 0,\\n          children: (\\n            <CustomSelect option={[\\n              { label: '请选择', value: 0 },\\n              { label: '经济舱', value: 1 },\\n              { label: '豪华经济舱', value: 2 },\\n              { label: '商务舱', value: 3 },\\n              { label: '头等舱', value: 4 },\\n            ]} />\\n          )\\n        },\\n      }}\\n    >\\n      {({ fields, state, canSubmit }) => {\\n        return (\\n          <div>\\n            <Row>\\n              <Col style={{ maxWidth: 300 }}>{fields.select}</Col>\\n            </Row>\\n            <Row>\\n              <Col fixed>\\n                <Button disabled={!canSubmit()} type=\\\"primary\\\" htmlType=\\\"submit\\\">提交</Button>\\n              </Col>\\n            </Row>\\n          </div>\\n        )\\n      }}\\n    </Form>\\n  </div>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### FormItem 竖排\\n\\n对组件 `FormItem` 竖排展示示例。\\n\\n> ⚠️ 注意：`FormItem` 组件只在 `Form` 组件中使用，在 `@v4.10.4+` 以上版本可以当普通 `form` 使用。\\n<!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;-->\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Form, FormItem, Button } from 'uiw';\\n\\nconst Demo = () => {\\n  const [formData, setFormData] = React.useState({});\\n  const handleSubmit = (_, e) => {\\n    e && e.preventDefault();\\n    const fData = new FormData(e.target);\\n    const data = {};\\n    fData.forEach((value, key) => { data[key] = value; });\\n    setFormData(data);\\n  }\\n  return (\\n    <Form onSubmit={handleSubmit} onReset={() => setFormData({})}>\\n      <FormItem\\n        label=\\\"可选字段\\\"\\n        labelFor=\\\"item-basic-input\\\"\\n        help={<span>在上面的字段中输入一个值</span>}\\n      >\\n        <Input id=\\\"item-basic-input\\\" name=\\\"basic\\\" type=\\\"text\\\"/>\\n      </FormItem>\\n      <FormItem\\n        label=\\\"用户名\\\"\\n        labelFor=\\\"item-username-input\\\"\\n        help={(!formData.username || formData.username.length < 8) ? \\\"用户名长度至少为8个字符串。\\\" : \\\"用户名正确 √ \\\"}\\n        hasError={(!formData.username || formData.username.length < 8)}\\n      >\\n        <Input id=\\\"item-username-input\\\" name=\\\"username\\\" type=\\\"text\\\"/>\\n      </FormItem>\\n      <FormItem>\\n        <Button type=\\\"success\\\" htmlType=\\\"submit\\\"> Submit </Button>\\n        <Button type=\\\"light\\\" htmlType=\\\"reset\\\"> Reset </Button>\\n      </FormItem>\\n      <pre>\\n      {JSON.stringify(formData, null, 2)}\\n      </pre>\\n    </Form>\\n  );\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### FormItem 横排\\n\\n对组件 `FormItem` 横排展示示例。\\n\\n> ⚠️ 注意：`FormItem` 组件只在 `Form` 组件中使用，在 `@v4.10.4+` 以上版本可以当普通 `form` 使用。\\n<!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;-->\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Form, FormItem } from 'uiw';\\n\\nconst Demo = () => (\\n  <Form>\\n    <FormItem\\n      inline={true}\\n      label=\\\"可选字段\\\"\\n      labelFor=\\\"basic-input-inline\\\"\\n      help={<span>在上面的字段中输入一个值</span>}\\n      onChange={() => {\\n        console.log('TEST::');\\n      }}\\n    >\\n      <Input id=\\\"basic-input-inline\\\" name=\\\"basic\\\" type=\\\"text\\\"/>\\n    </FormItem>\\n    <FormItem\\n      inline={true}\\n      label=\\\"用户名\\\"\\n      labelFor=\\\"username-input-inline\\\"\\n      labelClassName=\\\"username\\\"\\n      help=\\\"用户名长度至少为8个字符串。\\\"\\n      hasError={true}\\n    >\\n      <Input id=\\\"username-input-inline\\\" name=\\\"username\\\" type=\\\"text\\\"/>\\n    </FormItem>\\n  </Form>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Form\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| fields | 设置字段 | object | - |\\n| children | 回调 {`fields`, `state`, `canSubmit`, `resetForm`} | function | - |\\n| onSubmit | 提交表单时调用  | `(state: FormSubmitProps, event: React.FormEvent) => any` | - |\\n| afterSubmit `@3.0.0+` | 提交回调 {`initial`, `current`}  | function({ initial, current }) | - |\\n| onChange | 表单发生改变回调函数 {`initial`, `current`}  | function({ initial, current }) | - |\\n| onSubmitError | 调用 `onSubmit` 抛出的任何错误。从字段名称返回对象映射。  | function | - |\\n| resetOnSubmit | 在 `onSubmit` 成功后将表单重置为其初始状态。| bool | `true` |\\n| ref | 返回form各种内部函数,可用于主动触发事件 | Ref | - |\\n\\n\\n#### fields\\n\\n```js\\n{\\n  firstName: {\\n    initialValue: '王',\\n    inline: true,\\n    label: '姓',\\n    labelClassName: 'fieldLabel',\\n    labelStyle: { width: 60 },\\n    // 验证，通过 `canSubmit()` 方法获得，提交按钮是否被禁用\\n    validator: (currentValue) => {},\\n    help: '帮助提示信息！',\\n    children: <Input type=\\\"number\\\" />\\n  },\\n}\\n```\\n\\n#### ref\\n\\n```jsx\\n  const form = useRef()\\n  render(<Form ref={form}/>)\\n```\\n\\n```js\\n    form.current.onSubmit()                                   // 提交表单\\n    form.current.resetForm()                                  // 重置form\\n    const fieldValues = form.current.getFieldValues()         // 获取所有 field的 value对象\\n    const error = form.current.getError()                     // 获取所有提交时验证错误\\n    form.current.setFields({ /** [fieldName]: value **/  })   // 设置表单的值,覆盖 form所有 field的值\\n    form.current.setFieldValue(fieldName, value)              // 对单个 field设置 value,如果 value为数组请自行深度拷贝后传值,以免破坏原数组\\n```\\n\\n## FormItem\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| label | 表单标题展示 | string | - |\\n| required | 表单是否必填标识 | boolean | - |\\n| labelClassName | 表单标题样式名称 | string | - |\\n| labelStyle | 表单标题样式 | object | - |\\n| labelFor | 列的宽度相对于同一网格中其他列的比率 | number | - |\\n| help | 提示信息 | ReactNode | - |\\n| hasError | 如果为true，则应用错误CSS。转动边框并帮助文字变红。 | number | - |\\n\";"],"names":[],"sourceRoot":""}

package/web/static/js/6659.372695ec.chunk.js

@@ -1,2 +0,0 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6659],{66659:function(n,e,t){t.r(e),e.default="Table \u8868\u683c\n===\n\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-table/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-table.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-table)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-table.svg?label=@uiw/react-table)](https://npmjs.com/@uiw/react-table)\n\n\u8868\u793a\u4e24\u79cd\u76f8\u4e92\u5bf9\u7acb\u7684\u72b6\u6001\u95f4\u7684\u5207\u6362\uff0c\u591a\u7528\u4e8e\u89e6\u53d1\u300c\u5f00/\u5173\u300d\u3002\u9009\u4e2d\u65f6\u7684\u5185\u5bb9\u652f\u6301\u54cd\u5e94\u5f0f\u3002\n\n```jsx\nimport { Table } from 'uiw';\n// or\nimport Table from '@uiw/react-table';\n```\n\n### \u57fa\u672c\u4f7f\u7528\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Table, Button } from 'uiw';\n\nconst columns = [\n  {\n    // title: '\u59d3\u540d',\n    ellipsis: true, \n    title: ({ key }) => {\n      return (\n        <span>\u5b57\u6bb5: {key}</span>\n      )\n    },\n    key: 'name', \n  }, {\n    title: '\u5e74\u9f84',\n    style: { color: 'red' },\n    key: 'age',\n  }, {\n    title: '\u5730\u5740',\n    key: 'info',\n  }, {\n    title: '\u64cd\u4f5c',\n    key: 'edit',\n    width: 98,\n    render: (text, key, rowData, rowNumber, columnNumber) => (\n      <div>\n        <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n        <Button size=\"small\" type=\"success\">\u4fee\u6539</Button>\n      </div>\n    ),\n  },\n];\nconst dataSource = [\n  { name: '\u9093\u7d2b\u68cb', age: '12', info: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002', edit: '' },\n  { name: '\u674e\u6613\u5cf0', age: '32', info: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba', edit: '' },\n  { name: '\u8303\u51b0\u51b0', age: '23', info: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b', edit: '' },\n  { name: '\u6768\u5e42', age: '34', info: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002', edit: '' },\n  { name: 'Angelababy', age: '54', info: '1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002', edit: '' },\n  { name: '\u5510\u5ae3', age: '12', info: '1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed', edit: '' },\n  { name: '\u5434\u4ea6\u51e1', age: '4', info: '1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002', edit: '' },\n];\nconst Demo = () => (\n  <div>\n    <Table columns={columns} data={dataSource} />\n  </div>\n);\nReactDOM.render(<Demo />, _mount_);\n```\n### \u8868\u5934\u5206\u7ec4\n\n\u8868\u5934\u5206\u7ec4\u901a\u8fc7 `columns` \u6570\u7ec4\u4e2d\u5bf9\u8c61\u7684 `children` \u6765\u5b9e\u73b0\uff0c\u4ee5\u6e32\u67d3\u5206\u7ec4\u8868\u5934\u3002\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Table, Button } from 'uiw';\n\nconst columns = [\n  {\n    title: '\u59d3\u540d',\n    style: { color: 'red' },\n    key: 'name', \n    children: [\n       {\n        title: '\u82f1\u6587\u540d\u5b57',\n        width: 100,\n        key: 'name_en',\n      },\n      {\n        title: '\u4e2d\u6587\u540d\u5b57',\n        key: 'cnname',\n        children:[\n          {\n            title: '\u59d3\u540d',\n            style: { color: 'red' },\n            key: 'firstname',\n            children:[\n              { title: '\u59d3', key: 'name1', width: 80 },\n              { title: '\u540d',  key: 'name2', width: 80 },\n            ]\n          }, {\n            title: '\u62fc\u97f3',\n            key: 'lastname',\n            children:[\n              { title: '\u59d3', key: 'pinyin1', width: 80 },\n              { title: '\u540d', key: 'pinyin2', width: 80 },\n            ],\n          },\n        ],\n      }, \n    ]\n  }, {\n    title: '\u5176\u5b83',\n    key: 'other',\n    children:[\n      { title: '\u751f\u65e5', key: 'birthday', width: 150 },\n      { title: '\u804c\u4e1a', key: 'job', width: 150 },\n    ],\n  }, {\n    title: '\u64cd\u4f5c',\n    key: 'edit',\n    width: 150,\n    render: (text, key, rowData, rowNumber, columnNumber) => (\n      <div>\n        <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n        <span>{text} {key} - {rowNumber} - {columnNumber}</span>\n      </div>\n    ),\n  },\n];\nconst dataSource = [\n  { name1: '\u9093', name2:'\u7d2b\u68cb', pinyin1: 'deng', pinyin2: 'ziqi', name_en: 'G.E.M.', birthday: '1991\u5e748\u670816\u65e5', job: '\u5531\u4f5c\u6b4c\u624b\u3001\u4f5c\u66f2\u4eba', edit:'' },\n  { name1: '\u5468', name2:'\u6770\u4f26', pinyin1: 'zhou', pinyin2: 'jielun', name_en: 'Jay Chou', birthday: '1979\u5e741\u670818\u65e5', job: '\u6b4c\u624b\u3001\u97f3\u4e50\u4eba', edit:'' },\n  { name1: '\u9093', name2:'\u7d2b\u68cb', pinyin1: 'deng', pinyin2: 'ziqi', name_en: 'G.E.M.', birthday: '1991\u5e748\u670816\u65e5', job: '\u5531\u4f5c\u6b4c\u624b\u3001\u4f5c\u66f2\u4eba', edit:'' },\n  { name1: '\u5468', name2:'\u6770\u4f26', pinyin1: 'zhou', pinyin2: 'jielun', name_en: 'Jay Chou', birthday: '1979\u5e741\u670818\u65e5', job: '\u6b4c\u624b\u3001\u97f3\u4e50\u4eba', edit:'' },\n];\nconst Demo = () => (\n  <div>\n    <Table bordered columns={columns} data={dataSource} />\n  </div>\n);\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u8868\u683c\u884c/\u5217\u5408\u5e76\n\n\u8868\u5934\u53ea\u652f\u6301\u5217\u5408\u5e76\uff0c\u4f7f\u7528 `columns` \u91cc\u7684 `colSpan` \u8fdb\u884c\u8bbe\u7f6e\u3002\u8868\u683c\u652f\u6301\u884c/\u5217\u5408\u5e76\uff0c\u4f7f\u7528 `render` \u91cc\u7684\u5355\u5143\u683c\u5c5e\u6027 `colSpan` \u6216\u8005 `rowSpan` \u8bbe\u503c\u4e3a 0 \u65f6\uff0c\u8bbe\u7f6e\u7684\u8868\u683c\u4e0d\u4f1a\u6e32\u67d3\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e \n```jsx\nimport ReactDOM from 'react-dom';\nimport { Table, Button } from 'uiw';\n\nconst columns = [\n  {\n    title: '\u59d3\u540d',\n    key: 'name', \n  }, {\n    title: '\u5e74\u9f84',\n    style: { color: 'red' },\n    key: 'age',\n    colSpan: 2,\n    render: (text, key, rowData, rowNum, colNum) => {\n      const obj = {\n        children: text,\n        props: {}\n      }\n      if (rowNum === 0) {\n        obj.props.rowSpan = 2;\n      }\n      if (rowNum === 1) {\n        obj.props.rowSpan = 0;\n      }\n      return obj;\n    }\n  }, {\n    title: '\u5730\u5740',\n    key: 'info',\n    colSpan: 0,\n  }, {\n    title: '\u64cd\u4f5c',\n    key: 'edit',\n    width: 98,\n    render: (text, key, rowData, rowNumber, columnNumber) => (\n      <div>\n        <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n        <Button size=\"small\" type=\"success\">\u4fee\u6539</Button>\n      </div>\n    ),\n  },\n];\nconst dataSource = [\n  { name: '\u9093\u7d2b\u68cb', age: '12', info: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002', edit: '' },\n  { name: '\u674e\u6613\u5cf0', age: '12', info: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba', edit: '' },\n  { name: '\u8303\u51b0\u51b0', age: '23', info: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b', edit: '' },\n  { name: '\u6768\u5e42', age: '34', info: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002', edit: '' },\n];\nconst Demo = () => (\n  <div>\n    <Table bordered columns={columns} data={dataSource} />\n  </div>\n);\nReactDOM.render(<Demo />, _mount_);\n```\n\n\n### \u6807\u9898\u9875\u811a\n\n\u6dfb\u52a0\u8868\u683c\u8fb9\u6846\u7ebf\uff0c\u9875\u5934\u548c\u9875\u811a\u7684\u5c55\u73b0\u6548\u679c\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Table, Button } from 'uiw';\n\nconst columns = [\n  {\n    title: '\u59d3\u540d',\n    style: { color: 'red' },\n    key: 'name', \n  }, {\n    title: '\u5e74\u9f84',\n    key: 'age',\n  }, {\n    title: '\u5730\u5740',\n    key: 'info',\n  }, {\n    title: '\u64cd\u4f5c',\n    key: 'edit',\n    width: 98,\n    render: (text, key, rowData, rowNumber, columnNumber) => (\n      <div>\n        <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n        <Button size=\"small\" type=\"success\">\u4fee\u6539</Button>\n      </div>\n    ),\n  },\n];\nconst dataSource = [\n  { name: '\u9093\u7d2b\u68cb', age: '12', info: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002', edit: '' },\n  { name: '\u674e\u6613\u5cf0', age: '32', info: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba', edit: '' },\n  { name: '\u8303\u51b0\u51b0', age: '23', info: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b', edit: '' },\n  { name: '\u6768\u5e42', age: '34', info: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002', edit: '' },\n  { name: 'Angelababy', age: '54', info: '1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002', edit: '' },\n  { name: '\u5510\u5ae3', age: '12', info: '1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed', edit: '' },\n  { name: '\u5434\u4ea6\u51e1', age: '4', info: '1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002', edit: '' },\n];\nconst Demo = () => (\n  <div>\n    <Table\n      title={(\n        <div>\n          \u8fd9\u91cc\u662f\u6807\u9898\uff0c\u6709\u8fb9\u6846\uff0c<b>bordered=true</b>\n        </div>\n      )}\n      footer={(\n        <div>\n          \u8fd9\u91cc\u662f\u9875\u811a Footer\uff0c\u6709\u8fb9\u6846\uff0c<b>bordered=true</b>\n        </div>\n      )}\n      bordered columns={columns} data={dataSource} />\n    <Table title=\"\u8fd9\u91cc\u662f\u6807\u9898\uff0c\u6ca1\u6709\u8fb9\u6846\" footer=\"\u8fd9\u91cc\u662f\u9875\u811a Footer\uff0c\u6ca1\u6709\u8fb9\u6846\" columns={columns} data={dataSource} />\n  </div>\n);\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u70b9\u51fb\u5355\u5143\u683c\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Table, Button, Notify } from 'uiw';\n\nconst columns = [\n  {\n    title: '\u59d3\u540d',\n    style: { color: 'red' },\n    key: 'name', \n  }, {\n    title: '\u5e74\u9f84',\n    key: 'age',\n  }, {\n    title: '\u5730\u5740',\n    key: 'info',\n  }, {\n    title: '\u64cd\u4f5c',\n    key: 'edit',\n    width: 98,\n    render: (text, key, rowData, rowNumber, columnNumber) => (\n      <div>\n        <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n        <Button size=\"small\" type=\"success\">\u4fee\u6539</Button>\n      </div>\n    ),\n  },\n];\nconst dataSource = [\n  { name: '\u9093\u7d2b\u68cb', age: '12', info: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002', edit: '' },\n  { name: '\u674e\u6613\u5cf0', age: '32', info: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba', edit: '' },\n  { name: '\u8303\u51b0\u51b0', age: '23', info: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b', edit: '' },\n  { name: '\u6768\u5e42', age: '34', info: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002', edit: '' },\n  { name: 'Angelababy', age: '54', info: '1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002', edit: '' },\n  { name: '\u5510\u5ae3', age: '12', info: '1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed', edit: '' },\n  { name: '\u5434\u4ea6\u51e1', age: '4', info: '1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002', edit: '' },\n];\nconst Demo = () => (\n  <div>\n    <Table\n      title=\"\u8868\u5185\u5bb9 tbody \u5355\u5143\u683c\u70b9\u51fb\u56de\u8c03\u4e8b\u4ef6\"\n      onCell={(rowData, { rowNum, colNum }) => {\n        console.log('--\x3e3', rowData);\n        console.log('--\x3e4', rowNum);\n        console.log('--\x3e5', colNum);\n        Notify.info({ description: `\u4f60\u70b9\u51fb\u4e86\"${rowData.name}\"\u3002` });\n      }}\n      columns={columns}\n      data={dataSource}\n    />\n    <Table\n      title=\"\u8868\u5934\u5355\u5143\u683c\u70b9\u51fb\u56de\u8c03\u4e8b\u4ef6\"\n      onCellHead={(rowData, rowNum, columnNumber) => {\n        console.log('--\x3e3', rowData);\n        console.log('--\x3e4', rowNum);\n        console.log('--\x3e5', columnNumber);\n        Notify.info({ description: `\u4f60\u70b9\u51fb\u4e86\"${rowData.title}\"\u3002` });\n      }}\n      onCell={(rowData, { rowNum, colNum }) => {\n        console.log('--\x3e3', rowData);\n        console.log('--\x3e4', rowNum);\n        console.log('--\x3e5', colNum);\n        Notify.info({ description: `\u4f60\u70b9\u51fb\u4e86\"${rowData.name}\"\u3002` });\n      }}\n      columns={columns}\n      data={dataSource}\n    />\n  </div>\n);\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u539f\u59cbHTML\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Table, Button } from 'uiw';\n\nconst Demo = () => (\n  <div>\n    <Table bordered>\n      <thead>\n        <tr>\n          <th>\u540d\u79f0</th>\n          <th>\u6570\u91cf</th>\n          <th>\u8be6\u60c5</th>\n          <th>\u4ef7\u683c</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr>\n          <td>\u571f\u8c46</td>\n          <td>18</td>\n          <td>2009/01/12</td>\n          <td>\uffe586,000</td>\n        </tr>\n        <tr>\n          <td>\u841d\u535c</td>\n          <td>18</td>\n          <td>2009/01/12</td>\n          <td>\uffe586,000</td>\n        </tr>\n        <tr>\n          <td>\u9999\u8549</td>\n          <td>18</td>\n          <td>2009/01/12</td>\n          <td>\uffe586,000</td>\n        </tr>\n        <tr>\n          <td>\u829d\u9ebb</td>\n          <td>18</td>\n          <td>2009/01/12</td>\n          <td>\uffe586,000</td>\n        </tr>\n      </tbody>\n    </Table>\n    <Table>\n      <caption>\u6ca1\u6709\u8fb9\u6846</caption>\n      <thead>\n        <tr>\n          <th>\u540d\u79f0</th>\n          <th>\u6570\u91cf</th>\n          <th>\u8be6\u60c5</th>\n          <th>\u4ef7\u683c</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr>\n          <td>\u571f\u8c46</td>\n          <td>18</td>\n          <td>2009/01/12</td>\n          <td>\uffe586,000</td>\n        </tr>\n        <tr>\n          <td>\u841d\u535c</td>\n          <td>18</td>\n          <td>2009/01/12</td>\n          <td>\uffe586,000</td>\n        </tr>\n        <tr>\n          <td>\u9999\u8549</td>\n          <td>18</td>\n          <td>2009/01/12</td>\n          <td>\uffe586,000</td>\n        </tr>\n        <tr>\n          <td>\u829d\u9ebb</td>\n          <td>18</td>\n          <td>2009/01/12</td>\n          <td>\uffe586,000</td>\n        </tr>\n      </tbody>\n    </Table>\n  </div>\n);\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u9009\u62e9\u548c\u64cd\u4f5c\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Table, Button, Checkbox, Pagination, Loader } from 'uiw';\n\nclass Demo extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      // \u9009\u4e2d\u7684 key\n      checked: [],\n      loading: false,\n      dataSource: [\n        { name: '\u9093\u7d2b\u68cb', age: '12', info: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002' },\n        { name: '\u674e\u6613\u5cf0', age: '32', info: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba' },\n        { name: '\u8303\u51b0\u51b0', age: '23', info: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b' },\n        { name: '\u6768\u5e42', age: '34', info: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002' },\n        { name: 'Angelababy', age: '54', info: '1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002' },\n        { name: '\u5510\u5ae3', age: '12', info: '1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed' },\n        { name: '\u5434\u4ea6\u51e1', age: '4', info: '1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002' },\n      ],\n      columns: [\n        {\n          title: (data, rowNum, colNum) => {\n            const indeterminate = this.state.dataSource.length !== this.state.checked.length && this.state.checked.length > 0;\n            const checked = this.state.dataSource.length === this.state.checked.length;\n            return (\n              <Checkbox\n                checked={checked}\n                indeterminate={indeterminate}\n                onClick={(evn) => {\n                  let checked = this.state.dataSource.map((item, idx) => idx);\n                  if(!evn.target.checked) {\n                    checked = [];\n                  }\n                  this.setState({ checked });\n                }}\n              />\n            );\n          },\n          key: 'checked',\n          render: (text, key, rowData, rowNumber, columnNumber) => {\n            return (\n              <Checkbox checked={rowData.checked} onClick={this.onClickCheckedItem.bind(this, rowNumber)} />\n            );\n          }\n        }, {\n          title: '\u540d\u5b57',\n          key: 'name',\n        }, {\n          title: '\u5e74\u9f84',\n          key: 'age',\n        }, {\n          title: '\u5730\u5740',\n          key: 'info',\n        },\n      ]\n    }\n  }\n  onClickCheckedItem(rowNumber, env) {\n    let { checked } = this.state;\n    const isChecked = env.target.checked;\n    if(isChecked) {\n      // \u6dfb\u52a0\u5230\u9009\u4e2d\u6570\u7ec4\u4e2d\n      checked.push(rowNumber)\n      checked = checked.sort((a, b) => a - b);\n    } else {\n      // \u5220\u9664\u9009\u4e2d\u9879\n      checked.splice(checked.indexOf(rowNumber), 1);\n    }\n    this.setState({ checked });\n  }\n  render() {\n    const { checked } = this.state;\n    const dataSource = this.state.dataSource.map((item, idx) => {\n      const isChecked = checked.indexOf(idx) > -1;\n      return { checked: isChecked, ...item };\n    });\n    return (\n      <div>\n        <Loader loading={this.state.loading} style={{ display: 'block' }}>\n          <Table\n            columns={this.state.columns}\n            data={dataSource}\n            footer={\n              <Pagination\n                current={2}\n                pageSize={10}\n                total={30}\n                divider\n                onChange={(current, total, pageSize) => {\n                  this.setState({ loading: true });\n                  const timer = setTimeout(() => {\n                    // \u6a21\u62df\u53d8\u66f4\u6570\u636e\n                    const dataSource = this.state.dataSource.map(item => {\n                      item.age = Number(item.age) + current;\n                      return item;\n                    });\n                    // \u7ffb\u9875 API \u83b7\u53d6\u6570\u636e\n                    this.setState({ checked: [], dataSource, loading: false });\n                  }, 2000);\n                }}\n              />\n            }\n          />\n        </Loader>\n      </div>\n    );\n  }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u81ea\u5b9a\u4e49\u5355\u5143\u683c\u7701\u7565\u63d0\u793a\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Table, Button, Notify, Tooltip } from 'uiw';\n\nconst columns = [\n  {\n    title: 'Name',\n    key: 'name',\n    render: text => <a>{text}</a>,\n    width: 150,\n  },\n  {\n    title: 'Age',\n    key: 'age',\n    width: 80,\n  },\n  {\n    title: 'Address',\n    key: 'address',\n    ellipsis: true,\n    render: address => (\n      <Tooltip placement=\"topLeft\" content={address}>\n        {address}\n      </Tooltip>\n    ),\n  },\n  {\n    title: 'Long Column Long Column Long Column',\n    key: 'address',\n    ellipsis: true,\n    render: address => (\n      <Tooltip placement=\"topLeft\" content={address}>\n        {address}\n      </Tooltip>\n    ),\n  },\n  {\n    title: 'Long Column Long Column',\n    key: 'address',\n    ellipsis: true,\n    render: address => (\n      <Tooltip placement=\"topLeft\" content={address}>\n        {address}\n      </Tooltip>\n    ),\n  },\n  {\n    title: 'Long Column',\n    key: 'address',\n    ellipsis: true,\n    render: address => {\n      return (\n        <Tooltip placement=\"topLeft\" content={address}>\n          {address}\n        </Tooltip>\n      )\n    },\n  },\n];\n\nconst data = [\n  { name: '\u9093\u7d2b\u68cb', age: '12', address: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002' },\n  { name: '\u674e\u6613\u5cf0', age: '32', address: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba' },\n  { name: '\u8303\u51b0\u51b0', age: '23', address: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b' },\n  { name: '\u6768\u5e42', age: '34', address: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002' },\n  { name: 'Angelababy', age: '54', address: '1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002' },\n  { name: '\u5510\u5ae3', age: '12', address: '1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed' },\n  { name: '\u5434\u4ea6\u51e1', age: '4', address: '1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002' },\n];\n\nconst Demo = () => (\n  <div>\n    <Table\n      title=\"\u8868\u5185\u5bb9 tbody \u5355\u5143\u683c\u70b9\u51fb\u56de\u8c03\u4e8b\u4ef6\"\n      columns={columns}\n      data={data}\n    />\n  </div>\n);\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u65e0\u6570\u636e\u72b6\u6001\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Table, Button, Empty } from 'uiw';\n\nconst columns = [\n  {\n    ellipsis: true, \n    title: '\u59d3\u540d',\n    key: 'name', \n  }, {\n    title: '\u5e74\u9f84',\n    key: 'age',\n  }, {\n    title: '\u5730\u5740',\n    key: 'info',\n  }, {\n    title: '\u64cd\u4f5c',\n    key: 'edit',\n    width: 98,\n    render: (text, key, rowData, rowNumber, columnNumber) => (\n      <div>\n        <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n        <Button size=\"small\" type=\"success\">\u4fee\u6539</Button>\n      </div>\n    ),\n  },\n];\nconst dataSource = [];\nconst Demo = () => (\n  <div>\n    <Table\n      columns={columns}\n      data={dataSource}\n      empty={<Empty />}  \n    />\n  </div>\n);\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u53ef\u5c55\u5f00\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Table, Button, Icon } from 'uiw';\n\nconst columns = [\n  {\n    title: '\u59d3\u540d',\n    ellipsis: true, \n    key: 'name', \n  }, \n  {\n    title: '\u5e74\u9f84',\n    style: { color: 'red' },\n    key: 'age',\n  }, \n  {\n    title: '\u64cd\u4f5c',\n    key: 'edit',\n    width: 98,\n    render: (text, key, rowData, rowNumber, columnNumber) => (\n      <div>\n        <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n        <Button size=\"small\" type=\"success\">\u4fee\u6539</Button>\n      </div>\n    ),\n  },\n];\nconst dataSource = [\n  { name: '\u9093\u7d2b\u68cb', age: '10', id: '1'},\n  { name: '\u674e\u6613\u5cf0', age: '32', id: '2'},\n  { name: '\u8303\u51b0\u51b0', age: '23', id: '3'},\n];\nconst Demo = () => (\n  <div>\n    <Table \n      rowKey=\"id\"\n      expandable={{\n        expandedRowRender: (record, index, expanded)=>{\n          return <div>{record.name}</div>\n        },\n        // defaultExpandAllRows: true,\n        rowExpandable: (r)=>r.name!=='\u674e\u6613\u5cf0',\n        expandIcon: (expanded) => expanded ? <Icon type=\"minus-circle-o\"/> : <Icon type=\"plus-circle-o\"/>,\n        defaultExpandedRowKeys: [\"1\"]\n      }}\n      columns={columns} \n      data={dataSource} \n    />\n  </div>\n);\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u6811\u5f62\u6570\u636e\u5c55\u793a\n\n\u8868\u683c\u652f\u6301\u6811\u5f62\u6570\u636e\u7684\u5c55\u793a\uff0c\u5f53\u6570\u636e\u4e2d\u6709 children \u5b57\u6bb5\u65f6\u4f1a\u81ea\u52a8\u5c55\u793a\u4e3a\u6811\u5f62\u8868\u683c\uff0c\u5982\u679c\u4e0d\u9700\u8981\u6216\u914d\u7f6e\u4e3a\u5176\u4ed6\u5b57\u6bb5\u53ef\u4ee5\u7528 childrenColumnName \u8fdb\u884c\u914d\u7f6e\u3002\n\n\u53ef\u4ee5\u901a\u8fc7\u8bbe\u7f6e indentSize \u4ee5\u63a7\u5236\u6bcf\u4e00\u5c42\u7684\u7f29\u8fdb\u5bbd\u5ea6\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport React from 'react';\nimport { Table, Button, Icon } from 'uiw';\n\nconst columns = [\n  {\n    title: '\u59d3\u540d',\n    ellipsis: true, \n    key: 'name', \n  }, \n  {\n    title: '\u5e74\u9f84',\n    style: { color: 'red' },\n    key: 'age',\n  }, \n  {\n    title: '\u64cd\u4f5c',\n    key: 'edit',\n    width: 98,\n    render: (text, key, rowData, rowNumber, columnNumber) => (\n      <div>\n        <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n        <Button size=\"small\" type=\"success\">\u4fee\u6539</Button>\n      </div>\n    ),\n  },\n];\nconst dataSource = [\n  { \n    name: '\u9093\u7d2b\u68cb', \n    age: '10', \n    id: '1', \n    children: [\n      {\n        name: '\u9093\u7d2b\u68cb-0-1', \n        age: '10', \n        id: '1-1', \n        children: [\n          { \n            name: '\u9093\u7d2b\u68cb-0-1-1', \n            age: '10', \n            id: '1-1-1',\n            children: [\n              {name: '\u9093\u7d2b\u68cb-0-1-1-1', age: '10', id: '-0-1-1-1'},\n              {name: '\u9093\u7d2b\u68cb-0-1-1-2', age: '10', id: '-0-1-1-2'},\n              {name: '\u9093\u7d2b\u68cb-0-1-1-3', age: '10', id: '-0-1-1-3'},\n            ]\n          },\n          { name: '\u9093\u7d2b\u68cb-0-1-2', age: '10', id: '1-1-2',}\n        ]\n      },\n      {name: '\u9093\u7d2b\u68cb-0-2', age: '10', id: '1-1'},\n      {name: '\u9093\u7d2b\u68cb-0-3', age: '10', id: '1-1'},\n    ]\n  },\n  { name: '\u674e\u6613\u5cf0', age: '32', id: '2',},\n  { name: '\u8303\u51b0\u51b0', age: '23', id: '3', \n    children: [\n      {name: '\u8303\u51b0\u51b00-1', age: '23', id: '3-1'},\n      {name: '\u8303\u51b0\u51b00-2', age: '23', id: '3-2'},\n      {name: '\u8303\u51b0\u51b00-3', age: '23', id: '3-3'},\n    ]\n  },\n];\nconst Demo = () => {\n  const [expandedRowKeys, setExpandedRowKeys] = React.useState([])\n  return (\n    <div>\n      <Table \n        rowKey=\"id\"\n        columns={columns}\n        data={dataSource}\n      />\n    </div>\n  )\n};\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u8868\u683c\u5217\u8fc7\u5bbd\u5bfc\u81f4 footer \u6ed1\u52a8\u51fa\u8868\u683c\u5e95\u90e8\n\n\u4f7f\u7528 scroll \u5c5e\u6027\u7ed9\u8868\u683c\u8bbe\u7f6e\u5bbd(x)\u6216\u9ad8(y)\u5373\u53ef\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Table, Button } from 'uiw';\n\nconst columns = [\n  {\n    // title: '\u59d3\u540d',\n    ellipsis: true, \n    width: 1000,\n    title: ({ key }) => {\n      return (\n        <span>\u5b57\u6bb5: {key}</span>\n      )\n    },\n    key: 'name', \n  }, {\n    title: '\u5e74\u9f84',\n    style: { color: 'red' },\n    key: 'age',\n  }, {\n    title: '\u5730\u5740',\n    key: 'info',\n  }, {\n    title: '\u64cd\u4f5c',\n    key: 'edit',\n    width: 98,\n    render: (text, key, rowData, rowNumber, columnNumber) => (\n      <div>\n        <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n        <Button size=\"small\" type=\"success\">\u4fee\u6539</Button>\n      </div>\n    ),\n  },\n];\nconst dataSource = [\n  { name: '\u9093\u7d2b\u68cb', age: '12', info: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002', edit: '' },\n  { name: '\u674e\u6613\u5cf0', age: '32', info: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba', edit: '' },\n  { name: '\u8303\u51b0\u51b0', age: '23', info: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b', edit: '' },\n  { name: '\u6768\u5e42', age: '34', info: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002', edit: '' },\n  { name: 'Angelababy', age: '54', info: '1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002', edit: '' },\n  { name: '\u5510\u5ae3', age: '12', info: '1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed', edit: '' },\n  { name: '\u5434\u4ea6\u51e1', age: '4', info: '1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002', edit: '' },\n];\nconst Demo = () => (\n  <div>\n    <Table \n      scroll={{x: 1800, y: 100}}\n      footer={<div style={{height: 20, }}>\u8fd9\u4e2a\u662ffooter</div>}\n      columns={columns} data={dataSource} \n    />\n  </div>\n);\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u56fa\u5b9a\u5217 \n\n\u901a\u8fc7\u4f7f\u7528 fixed \u4f7f\u5176\u5217\u56fa\u5b9a\n> \u26a0\ufe0f \u6ce8\u610f: \u82e5\u5e76\u6ca1\u6709 scroll \u6eda\u52a8\u6761\uff0cfixed \u5c5e\u6027\u5e76\u4e0d\u4f1a\u6709\u76f4\u89c2\u7684\u6548\u679c\n\x3c!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;--\x3e\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from 'react-dom';\nimport { Table, Button } from 'uiw';\n\nconst columns = [\n  {\n    title: '\u59d3\u540d',\n    ellipsis: true, \n    // fixed: true,\n    width: 50,\n    key: 'name', \n  }, {\n    // fixed: true,\n    title: '\u5e74\u9f84',\n    width: 50,\n    style: { color: 'red' },\n    key: 'age',\n  }, {\n    title: '\u5730\u5740',\n    width: 50,\n    key: 'info',\n  }, {\n    title: '\u64cd\u4f5c',\n    key: 'edit',\n    width: 98,\n    fixed: 'right',\n    render: (text, key, rowData, rowNumber, columnNumber) => (\n      <div>\n        <Button size=\"small\" type=\"danger\">\u5220\u9664</Button>\n        <Button size=\"small\" type=\"success\">\u4fee\u6539</Button>\n      </div>\n    ),\n  },\n];\nconst dataSource = [\n  { name: '\u9093\u7d2b\u68cb', age: '12', info: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973\u6b4c\u624b\u3002', edit: '' },\n  { name: '\u674e\u6613\u5cf0', age: '32', info: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba', edit: '' },\n  { name: '\u8303\u51b0\u51b0', age: '23', info: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b', edit: '' },\n  { name: '\u6768\u5e42', age: '34', info: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002', edit: '' },\n  { name: 'Angelababy', age: '54', info: '1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002', edit: '' },\n  { name: '\u5510\u5ae3', age: '12', info: '1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed', edit: '' },\n  { name: '\u5434\u4ea6\u51e1', age: '4', info: '1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002', edit: '' },\n];\nconst Demo = () => (\n  <div>\n    <Table scroll={{x: 1200}} bordered columns={columns} data={dataSource} />\n  </div>\n);\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u53ef\u7f16\u8f91\n\n\u5229\u7528 render \u5c5e\u6027, \u4f20\u9012\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u5b9e\u73b0\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Table, Button, Input, Select } from 'uiw';\n\nconst columns = (onChange) => [\n  {\n    title: '\u59d3\u540d',\n    ellipsis: true, \n    key: 'name', \n    render: (text,key, rowData) => {\n      return <EditInput \n        value={text} \n        onChange={(value)=>{\n          onChange({...rowData, name: value}, rowData.id)\n        }} \n      />\n    }\n  }, \n  {\n    title: '\u6027\u522b',\n    key: 'gender',\n    render: (text,key, rowData) => {\n      return <EditInput \n        value={text} \n        component=\"Select\"\n        onChange={(value)=>{\n          onChange({...rowData, gender: value}, rowData.id)\n        }} \n      />\n    }\n  },\n  {\n    title: '\u5e74\u9f84',\n    key: 'age',\n    render: (text,key, rowData) => {\n      return <EditInput \n        value={text} \n        type=\"number\"\n        onChange={(value)=>{\n          onChange({...rowData, age: value}, rowData.id)\n        }} \n      />\n    }\n  }, \n  {\n    title: '\u5730\u5740',\n    key: 'info',\n    render: (text,key, rowData) => {\n      return <EditInput \n        value={text} \n        onChange={(value)=>{\n          onChange({...rowData, info: value}, rowData.id)\n        }} \n      />\n    }\n  }, \n];\nconst dataSource = [\n  { id: 1, gender: \"\u7537\", name: '\u9093\u7d2b\u68cb', age: '12', info: '\u53c8\u540dG.E.M.\uff0c\u539f\u540d\u9093\u8bd7\u9896\uff0c1991\u5e748\u670816\u65e5\u751f\u4e8e\u4e2d\u56fd\u4e0a\u6d77\uff0c\u4e2d\u56fd\u9999\u6e2f\u521b\u4f5c\u578b\u5973'},\n  { id: 2, gender: \"\u7537\", name: '\u674e\u6613\u5cf0', age: '32', info: '1987\u5e745\u67084\u65e5\u51fa\u751f\u4e8e\u56db\u5ddd\u6210\u90fd\uff0c\u4e2d\u56fd\u5185\u5730\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba', },\n  { id: 3, gender: \"\u7537\", name: '\u8303\u51b0\u51b0', age: '23', info: '1981\u5e749\u670816\u65e5\u51fa\u751f\u4e8e\u5c71\u4e1c\u9752\u5c9b\uff0c\u4e2d\u56fd\u5f71\u89c6\u5973\u6f14\u5458\u3001\u5236\u7247\u4eba\u3001\u6d41\u884c\u4e50\u5973\u6b4c\u624b', },\n  { id: 4, gender: \"\u7537\", name: '\u6768\u5e42', age: '34', info: '1986\u5e749\u670812\u65e5\u51fa\u751f\u4e8e\u5317\u4eac\u5e02\uff0c\u4e2d\u56fd\u5185\u5730\u5f71\u89c6\u5973\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3001\u5f71\u89c6\u5236\u7247\u4eba\u3002'},\n  { id: 5, gender: \"\u7537\", name: 'Angelababy', age: '54', info: '1989\u5e742\u670828\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u5973\u6f14\u5458\u3001\u65f6\u5c1a\u6a21\u7279\u3002', },\n  { id: 6, gender: \"\u7537\", name: '\u5510\u5ae3', age: '12', info: '1983\u5e7412\u67086\u65e5\u51fa\u751f\u4e8e\u4e0a\u6d77\u5e02\uff0c\u6bd5\u4e1a\u4e8e\u4e2d\u592e\u620f\u5267\u5b66\u9662\u8868\u6f14\u7cfb\u672c\u79d1\u73ed', },\n  { id: 7, gender: \"\u7537\", name: '\u5434\u4ea6\u51e1', age: '4', info: '1990\u5e7411\u670806\u65e5\u51fa\u751f\u4e8e\u5e7f\u4e1c\u7701\u5e7f\u5dde\u5e02\uff0c\u534e\u8bed\u5f71\u89c6\u7537\u6f14\u5458\u3001\u6d41\u884c\u4e50\u6b4c\u624b\u3002', },\n];\nconst EditInput = ({edit, value, type, onChange, component, ...other}) => {\n  const [isEdit, setIsEdit] = React.useState(edit);\n  const inputRef = React.useRef();\n  React.useEffect(()=>{\n    isEdit && inputRef.current.focus()\n  }, [isEdit])\n  if(isEdit) {\n    if(component === \"Select\") {\n      return <Select \n        ref={inputRef}\n        defaultValue={value} \n        onBlur={e=>{\n          onChange(e.target.value)\n          setIsEdit(false)\n        }}\n      >\n        <Select.Option value=\"\u7537\">\u7537</Select.Option>\n        <Select.Option value=\"\u5973\">\u5973</Select.Option>\n      </Select>\n    }\n    return <Input \n      {...other}\n      defaultValue={value} \n      ref={inputRef} \n      type={type || \"text\"}\n      onBlur={(e)=>{\n        onChange(e.target.value)\n        setIsEdit(false)\n      }}\n    />\n  }\n  return <div onClick={()=>{\n    setIsEdit(true)\n  }}>{value}</div>\n}\nconst Demo = () => {\n  const [data, setData] = React.useState(dataSource)\n  const onChange = (value, id) => {\n    setData(data.map(it=>it.id === id ? value : it))\n  }\n  return <div>\n    <Table columns={columns(onChange)} data={data} />\n  </div>\n};\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u53ef\u7f16\u8f91\u884c\n\n\u5229\u7528 Form \u7ec4\u4ef6\u548c render \u5c5e\u6027, \u5b9e\u73b0\u7f16\u8f91\u884c\u6548\u679c\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Table, Button, Input, Select, Form, Notify } from 'uiw';\n\nconst columns = (actived, setChange, fields) => {\n  return [\n    {\n      title: '\u59d3\u540d',\n      ellipsis: true, \n      key: 'name', \n      render: (text,key, rowData) => {\n        if(rowData.id === actived) return fields.name\n        return text\n      }\n    }, \n    {\n      title: '\u6027\u522b',\n      key: 'gender',\n      render: (text,key, rowData) => {\n        if(rowData.id === actived) return fields.gender\n        return text\n      }\n    },\n    {\n      title: '\u5e74\u9f84',\n      key: 'age',\n      render: (text,key, rowData) => {\n        if(rowData.id === actived) return fields.age\n        return text\n      }\n    }, \n    {\n      key: 'id',\n      render: (id, key, rowData)=>{\n        const flag = id === actived\n        if(flag){\n          return <>\n            <Button type=\"primary\" htmlType=\"submit\">Save</Button>\n            <Button type=\"danger\" onClick={()=>setChange({})}>Cancel</Button>\n          </>\n        }\n        return <Button \n          type=\"primary\" \n          onClick={(e)=>{\n            e.preventDefault();\n            setChange(rowData)\n          }} \n          disabled={actived !== undefined && !flag}\n        >Edit</Button>\n      }\n    }\n  ]\n};\nconst dataSource = [\n  { id: 1, gender: \"\u7537\", name: '\u9093\u7d2b\u68cb', age: '12', },\n  { id: 2, gender: \"\u7537\", name: '\u674e\u6613\u5cf0', age: '32', },\n  { id: 3, gender: \"\u7537\", name: '\u8303\u51b0\u51b0', age: '23',  },\n  { id: 4, gender: \"\u7537\", name: '\u6768\u5e42', age: '34',},\n  { id: 5, gender: \"\u7537\", name: 'Angelababy', age: '54', },\n  { id: 6, gender: \"\u7537\", name: '\u5510\u5ae3', age: '12', },\n  { id: 7, gender: \"\u7537\", name: '\u5434\u4ea6\u51e1', age: '4', },\n];\nconst Demo = () => {\n  const [data, setData] = React.useState(dataSource)\n  const [itemRowData, setItemRowData] = React.useState({})\n  const [id, setId] = React.useState()\n  \n  const form = React.useRef()\n  const setChange = (rowData) => {\n    setId(rowData.id)\n    setItemRowData(rowData)\n    form.current.setFields(rowData)\n  }\n\n  return <Form\n    ref={form}\n    onSubmit={({ current }) => {\n      if(JSON.stringify(itemRowData) === JSON.stringify(current)) {\n        Notify.error({\n          title: '\u63d0\u4ea4\u5931\u8d25\uff01',\n          description: `\u8868\u5355\u63d0\u4ea4\u5185\u5bb9\u5e76\u6ca1\u6709\u4fee\u6539\uff01`,\n        });\n        return \n      }\n      setData(data.map(it=>it.id === current.id ? current : it))\n      setId(undefined)\n      Notify.success({\n        title: '\u63d0\u4ea4\u6210\u529f\uff01',\n        description: '\u6570\u636e\u5df2\u7ecf\u66f4\u65b0'\n      });\n    }}\n    fields={{\n      name: {\n        children: <Input placeholder=\"\u8bf7\u8f93\u5165\u59d3\u540d\" />\n      },\n      age: {\n        children: <Input placeholder=\"\u8bf7\u8f93\u5165\u5e74\u9f84\" type=\"number\" />\n      },\n      gender: {\n        children: <Select>\n          <Select.Option value=\"\u7537\">\u7537</Select.Option>\n          <Select.Option value=\"\u5973\">\u5973</Select.Option>\n        </Select>\n      }\n    }}\n  >\n    {({ fields }) => <Table columns={columns(id, setChange, fields)} data={data} />}\n  </Form>\n};\nReactDOM.render(<Demo />, _mount_);\n```\n\n## Props\n\n### Table\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| columns | \u8868\u683c\u5217\u7684\u914d\u7f6e\u63cf\u8ff0\uff0c\u53ef\u4ee5\u5185\u5d4c `children`\uff0c\u4ee5\u6e32\u67d3\u5206\u7ec4\u8868\u5934\u3002| ColumnProps[] | `[]` |\n| data | \u6570\u636e\u6570\u7ec4\u3002| Array[] | `[]` |\n| title | \u8868\u683c\u6807\u9898 | ~~Function(text, key, rowData, rowNumber, columnNumber)~~ /<br/> Function(data: IColumns, rowNum: Number, colNum: Number)`@3.0.0+` /<br/> String / ReactNode | - |\n| footer | \u8868\u683c\u5c3e\u90e8 | String/ReactNode | - |\n| bordered | \u662f\u5426\u5c55\u793a\u5916\u8fb9\u6846\u548c\u5217\u8fb9\u6846 | Boolean | - |\n| empty | \u65e0\u6570\u636e\u72b6\u6001 | ReactNode | - |\n| onCellHead | \u8868\u5934\u5355\u5143\u683c\u70b9\u51fb\u56de\u8c03 | ~~`Function(text, key, rowData, rowNumber, columnNumber)`~~ /<br/> Function(data: IColumns, colNum: Number, rowNum: Number, evn: React.MouseEvent<HTMLTableCellElement\\>) `@3.0.0+` | - |\n| onCell | \u5355\u5143\u683c\u70b9\u51fb\u56de\u8c03 | ~~`Function(text, key, rowData, rowNumber, columnNumber)`~~ /<br/> Function(data: IColumns, options:{ colNum: Number, rowNum: Number, keyName: String }, evn: React.MouseEvent<HTMLTableCellElement\\>) `@3.1.0+` | - |\n| expandable | \u53ef\u5c55\u5f00\u914d\u7f6e | ExpandableType | - |\n| rowKey | \u8868\u683c\u884c key \u7684\u53d6\u503c | String | - |\n| scroll | \u8868\u683c\u662f\u5426\u53ef\u6eda\u52a8\uff0c\u4e5f\u53ef\u4ee5\u6307\u5b9a\u6eda\u52a8\u533a\u57df\u7684\u5bbd\u3001\u9ad8 | { x?: React.CSSProperties['width'], y?: React.CSSProperties['height'] } | - |\n\n\n### ColumnProps\n\n\u5217\u63cf\u8ff0\u6570\u636e\u5bf9\u8c61\uff0c\u662f columns \u4e2d\u7684\u4e00\u9879\uff0c\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c | \u7248\u672c |\n|--------- |-------- |--------- |-------- |-------- |\n| title | \u5217\u5934\u663e\u793a\u6587\u5b57\u3002| ReactNode | - | - |\n| key | \u9700\u8981\u7684 key\uff0c\u53ef\u4ee5\u5ffd\u7565\u8fd9\u4e2a\u5c5e\u6027\uff0c\u5982\u679c\u6807\u9898\u5e26\u6709 `render` \u51fd\u6570\uff0c\u90a3\u4e48\u8fd9\u4e2a `key` \u4e3a\u5fc5\u987b\u975e\u5e38\u91cd\u8981\u3002| String | - | - |\n| width | \u5217\u5bbd\u5ea6\u3002| Number | - | - |\n| colSpan | \u5408\u5e76\u8868\u5934\u884c\u3002| Number | - | - |\n| ellipsis | \u8d85\u8fc7\u5bbd\u5ea6\u5c06\u81ea\u52a8\u7701\u7565\u3002`v4.8.7+`| Boolean | `false` | - |\n| render | \u751f\u6210\u590d\u6742\u6570\u636e\u7684\u6e32\u67d3\u51fd\u6570\uff0c\u53c2\u6570\u5206\u522b\u4e3a\u5f53\u524d\u884c\u7684\u503c\uff0c\u5f53\u524d\u503c\u7684 `key`\uff0c\u884c\u7d22\u5f15\u6570\u636e\uff0c\u5f53\u524d\u884c\u53f7\uff0c\u5f53\u524d\u5217\u53f7\u3002| `Function(text, key, rowData, rowNumber, columnNumber)` | - | - |\n| align | \u8bbe\u7f6e\u5217\u7684\u5bf9\u9f50\u65b9\u5f0f | \"left\"\\|\"center\"\\|\"right\" | - | - |\n| className | \u5217\u6837\u5f0f\u7c7b\u540d | String | - | - |\n| fixed | \u628a\u9009\u62e9\u6846\u5217\u56fa\u5b9a\t | Boolean \\|\"left\"\\|\"right\" | - | 4.15.1 |\n\n### expandable\n\n> \u26a0\ufe0f \u6ce8\u610f: expandedRowKeys \u4e0e onExpandedRowsChange \u5fc5\u987b\u540c\u65f6\u51fa\u73b0\u6216\u4e0d\u51fa\u73b0\n\x3c!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;--\x3e\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| expandedRowRender | \u81ea\u5b9a\u4e49\u5c55\u5f00\u884c| (record, index, expanded) => React.ReactNode | - |\n| expandIcon | \u81ea\u5b9a\u4e49\u56fe\u6807 | (expanded, record, index) => React.ReactNode; | - |\n| rowExpandable | \u662f\u5426\u5141\u8bb8\u5c55\u5f00| (record)=>Boolean | - |\n| defaultExpandAllRows | \u521d\u59cb\u65f6\uff0c\u662f\u5426\u5c55\u5f00\u6240\u6709\u884c| Boolean | false |\n| defaultExpandedRowKeys | \u521d\u59cb\u65f6\uff0c\u9ed8\u8ba4\u5c55\u5f00\u7684\u884c\trowKey\u6570\u7ec4 | Array | - |\n| expandedRowKeys | \u63a7\u5236\u5c55\u5f00\u7684\u884c\trowKey\u6570\u7ec4 | Array | - |\n| onExpandedRowsChange | \u5c55\u5f00\u7684\u884c\u53d8\u5316\u89e6\u53d1 | (expandedRows)=>void | - |\n| onExpand | \u70b9\u51fb\u5c55\u5f00\u56fe\u6807\u89e6\u53d1 | (expanded,record,index)=>void | - |\n| indentSize | \u63a7\u5236\u6811\u5f62\u7ed3\u6784\u6bcf\u4e00\u5c42\u7684\u7f29\u8fdb\u5bbd\u5ea6 | Number | 16 |\n| childrenColumnName | \u6307\u5b9a\u6811\u5f62\u7ed3\u6784\u7684\u5217\u540d | String | children |\n"}}]);
-//# sourceMappingURL=6659.372695ec.chunk.js.map

package/web/static/js/6659.372695ec.chunk.js.map

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

package/web/static/js/6715.df3e3a86.chunk.js

@@ -1,2 +0,0 @@
-(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6715],{84934:function(e){function n(e){var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}n.keys=function(){return[]},n.resolve=n,n.id=84934,e.exports=n},86082:function(e,n,t){"use strict";t.d(n,{Z:function(){return b}});var r=t(50189),o=t(53782),i=t(11026),s=t(41473),c=t(32131),d=t(75752),a=t(64508),u=t(69286),l=["version","dependencies","codePen","codeSandbox"];function p(e){var n=e.version,t=e.dependencies,i=e.codePen,s=e.codeSandbox,c=(0,o.Z)(e,l),d=(0,r.Z)({},c);return i&&(d.codePenOption={title:"uiw".concat(n," - demo"),includeModule:["uiw"],js:(d.code||"").replace("_mount_",'document.getElementById("container")'),html:'<div id="container" style="padding: 24px"></div>',css_external:"https://unpkg.com/uiw@".concat(n,"/dist/uiw.min.css"),js_external:"https://unpkg.com/react@17.x/umd/react.development.js;https://unpkg.com/react-dom@17.x/umd/react-dom.development.js;https://unpkg.com/classnames@2.2.6/index.js;https://unpkg.com/uiw@".concat(n,"/dist/uiw.min.js;https://unpkg.com/@uiw/codepen-require-polyfill@1.1.3/index.js")}),s&&(d.codeSandboxOption={files:{"sandbox.config.json":{content:'{\n            "template": "node",\n            "container": {\n              "startScript": "start",\n              "node": "14"\n            }\n          }'},"public/index.html":{content:'<div id="container"></div>'},"src/index.js":{content:(d.code||"").replace("_mount_",'document.getElementById("container")')},".kktrc.js":{content:'import lessModules from "@kkt/less-modules";\nexport default (conf, env, options) => {\nconf = lessModules(conf, env, options);\nreturn conf;\n};'},"package.json":{content:{name:"uiw-demo",description:"uiw v".concat(n," - demo"),dependencies:{react:"^17.0.2","react-dom":"^17.0.2",uiw:"latest"},devDependencies:{"@kkt/less-modules":"~7.1.1",kkt:"~7.1.5"},license:"MIT",scripts:{start:"kkt start",build:"kkt build",test:"kkt test --env=jsdom"},browserslist:[">0.2%","not dead","not ie <= 11","not op_mini all"]}}}}),(0,u.jsx)(a.Z,(0,r.Z)((0,r.Z)({},d),{},{dependencies:t,style:{marginBottom:0}}))}var h=t(36131);function m(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.path,t=/^http/.test(n||"")?n:"https://github.com/uiwjs/uiw/blob/master/".concat(n);return(0,u.jsxs)(s.Fragment,{children:["\u72af\u4e86\u9519\u8bef\u8fd8\u662f\u60f3\u5bf9\u6587\u4ef6\u505a\u51fa\u8d21\u732e\uff1f",t&&(0,u.jsx)("a",{href:t,target:"_blank",rel:"noopener noreferrer",children:"\u5728Github\u4e0a\u7f16\u8f91\u672c\u9875\uff01"}),(0,u.jsx)("br",{}),(0,u.jsx)("a",{href:"https://github.com/uiwjs/uiw/issues",target:"_blank",rel:"noopener noreferrer",children:"\u53cd\u9988\u5efa\u8bae"}),(0,u.jsx)(h.Divider,{type:"vertical"}),(0,u.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw/issues/new",children:"\u63d0\u4ea4bug"}),(0,u.jsx)(h.Divider,{type:"vertical"}),(0,u.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw",children:"Github"}),(0,u.jsx)(h.Divider,{type:"vertical"}),(0,u.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt",children:"kkt"}),(0,u.jsx)(h.Divider,{type:"vertical"}),(0,u.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt-ssr",children:"@kkt/ssr"}),(0,u.jsx)(h.Divider,{type:"vertical"}),(0,u.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"http://uiw.gitee.io",children:"\u56fd\u5185\u955c\u50cf"})]})}var f="index_docinfo__3Vx8S",k="index_markdown__hcQCp",v=["inline","node"],x=function e(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return n.forEach((function(n){"text"===n.type?t+=n.value:n.children&&Array.isArray(n.children)&&(t+=e(n.children))})),t};function b(e){var n=e.renderPage,t=e.dependencies,a=e.path,l=(0,s.useState)(""),h=(0,i.Z)(l,2),b=h[0],j=h[1],g=d.i8||"2.0.0";return(0,s.useEffect)((function(){n&&n().then((function(e){j(e)})).catch((function(){}))}),[]),b?(0,u.jsxs)("div",{children:[(0,u.jsx)(c.Z,{source:b,className:k,components:{code:function(e){var n=e.inline,i=e.node,s=(0,o.Z)(e,v),c=s,d=c.noPreview,a=c.bordered,l=c.noScroll,h=c.bgWhite,m=c.noCode,f=c.codePen,k=c.codeSandbox;if(n)return(0,u.jsx)("code",(0,r.Z)({},s));var b={noPreview:d,bordered:a,noScroll:l,bgWhite:h,noCode:m,codePen:f,codeSandbox:k};return 0===Object.keys(b).filter((function(e){return void 0!==b[e]})).length?(0,u.jsx)("code",(0,r.Z)({},s)):(0,u.jsx)(p,{version:g,code:x(i.children),dependencies:t,noPreview:d,bordered:a,noScroll:l,bgWhite:h,noCode:m,codePen:f,codeSandbox:k})}}}),(0,u.jsx)("div",{className:f,children:(0,u.jsx)(m,{path:a})})]}):null}},56238:function(e,n,t){"use strict";t.r(n);var r=t(27791),o=t(57135),i=t.n(o),s=(t(41473),t(86082)),c=t(69286);n.default=function(){return(0,c.jsx)(s.Z,{path:"https://github.com/uiwjs/uiw/tree/master/website/src/routes/guide/import/README.md",renderPage:(0,r.Z)(i().mark((function e(){var n;return i().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,t.e(1358).then(t.bind(t,71358));case 2:return n=e.sent,e.abrupt("return",n.default||n);case 4:case"end":return e.stop()}}),e)})))})}}}]);
-//# sourceMappingURL=6715.df3e3a86.chunk.js.map

package/web/static/js/6715.df3e3a86.chunk.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"static/js/6715.df3e3a86.chunk.js","mappings":"wFAAA,SAASA,EAAoBC,GAC5B,IAAIC,EAAI,IAAIC,MAAM,uBAAyBF,EAAM,KAEjD,MADAC,EAAEE,KAAO,mBACHF,EAEPF,EAAoBK,KAAO,WAAa,MAAO,IAC/CL,EAAoBM,QAAUN,EAC9BA,EAAoBO,GAAK,MACzBC,EAAOC,QAAUT,G,oNCEF,SAASU,EAAT,GAAqF,IAArEC,EAAoE,EAApEA,QAASC,EAA2D,EAA3DA,aAAcC,EAA6C,EAA7CA,QAASC,EAAoC,EAApCA,YAAgBC,GAAoB,YAC3FC,GAAuB,UAAQD,GAyDrC,OAxDIF,IACFG,EAAMC,cAAgB,CACpBC,MAAM,MAAD,OAAQP,EAAR,WACLQ,cAAe,CAAC,OAChBC,IAAKJ,EAAMZ,MAAQ,IAAIiB,QAAQ,UAAW,wCAC1CC,KAAM,mDACNC,aAAa,yBAAD,OAA2BZ,EAA3B,qBACZa,YAAY,yLAAD,OAA2Lb,EAA3L,qFAGXG,IACFE,EAAMS,kBAAoB,CACxBC,MAAO,CACL,sBAAuB,CACrBC,QAAQ,iKAQV,oBAAqB,CACnBA,QAAQ,8BAEV,eAAgB,CACdA,SAAUX,EAAMZ,MAAQ,IAAIiB,QAAQ,UAAW,yCAEjD,YAAa,CACXM,QAAQ,qJAEV,eAAgB,CACdA,QAAS,CACPC,KAAM,WACNC,YAAY,QAAD,OAAUlB,EAAV,WACXC,aAAc,CACZkB,MAAO,UACP,YAAa,UACbC,IAAK,UAEPC,gBAAiB,CACf,oBAAqB,SACrBC,IAAK,UAEPC,QAAS,MACTC,QAAS,CACPC,MAAO,YACPC,MAAO,YACPC,KAAM,wBAERC,aAAc,CAAC,QAAS,WAAY,eAAgB,yBAMvD,SAAC,KAAD,kBAAiBvB,GAAjB,IAAwBJ,aAAcA,EAAc4B,MAAO,CAAEC,aAAc,M,eC7DrE,SAAS,IAA2B,IAA1BzB,EAAyB,uDAAJ,GACpC0B,EAAS1B,EAAT0B,KACFC,EAAM,QAAQL,KAAKI,GAAQ,IAAMA,EAA3B,mDAA8EA,GAC1F,OACE,UAAC,EAAAE,SAAD,wGAEGD,IACC,cAAGE,KAAMF,EAAKG,OAAO,SAASC,IAAI,sBAAlC,+DAIF,mBACA,cAAGF,KAAK,sCAAsCC,OAAO,SAASC,IAAI,sBAAlE,uCAGA,SAAC,EAAAC,QAAD,CAASC,KAAK,cACd,cAAGH,OAAO,SAASC,IAAI,sBAAsBF,KAAK,0CAAlD,8BAGA,SAAC,EAAAG,QAAD,CAASC,KAAK,cACd,cAAGH,OAAO,SAASC,IAAI,sBAAsBF,KAAK,+BAAlD,qBAGA,SAAC,EAAAG,QAAD,CAASC,KAAK,cACd,cAAGH,OAAO,SAASC,IAAI,sBAAsBF,KAAK,+BAAlD,kBAGA,SAAC,EAAAG,QAAD,CAASC,KAAK,cACd,cAAGH,OAAO,SAASC,IAAI,sBAAsBF,KAAK,mCAAlD,uBAGA,SAAC,EAAAG,QAAD,CAASC,KAAK,cACd,cAAGH,OAAO,SAASC,IAAI,sBAAsBF,KAAK,sBAAlD,yCCtCN,MAA0B,uBAA1B,EAA4D,wB,oBCYtDK,EAAa,SAAbA,IAAuD,IAAzCC,EAAwC,uDAA1B,GAAI/C,EAAsB,uDAAP,GAQnD,OAPA+C,EAAKC,SAAQ,SAACC,GACM,SAAdA,EAAKJ,KACP7C,GAAQiD,EAAKC,MACJD,EAAKE,UAAYC,MAAMC,QAAQJ,EAAKE,YAC7CnD,GAAQ8C,EAAWG,EAAKE,cAGrBnD,GAGM,SAASsD,EAAc1C,GACpC,IAAQ2C,EAAmC3C,EAAnC2C,WAAY/C,EAAuBI,EAAvBJ,aAAc8B,EAAS1B,EAAT0B,KAClC,GAA0BkB,EAAAA,EAAAA,UAAS,IAAnC,eAAOC,EAAP,KAAcC,EAAd,KAEMnD,EAAUoD,EAAAA,IAAe,QAY/B,OAXAC,EAAAA,EAAAA,YAAU,WACJL,GACFA,IACGM,MAAK,SAACC,GACLJ,EAASI,MAEVC,OAAM,iBAGV,IAEEN,GAKH,4BACE,SAAC,IAAD,CACEO,OAAQP,EACRQ,UAAWC,EACXC,WAAY,CASVnE,KAAM,YAAiC,IAA9BoE,EAA6B,EAA7BA,OAAQnB,EAAqB,EAArBA,KAASrC,GAAY,YACpC,EAAiFA,EAAzEyD,EAAR,EAAQA,UAAWC,EAAnB,EAAmBA,SAAUC,EAA7B,EAA6BA,SAAUC,EAAvC,EAAuCA,QAASC,EAAhD,EAAgDA,OAAQhE,EAAxD,EAAwDA,QAASC,EAAjE,EAAiEA,YACjE,GAAI0D,EACF,OAAO,2BAAUxD,IAEnB,IAAM8D,EAAS,CACbL,UAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,OAAAA,EACAhE,QAAAA,EACAC,YAAAA,GAEF,OAAgF,IAA5EiE,OAAO1E,KAAKyE,GAAQE,QAAO,SAACpD,GAAD,YAA2BqD,IAAjBH,EAAOlD,MAAqBsD,QAC5D,2BAAUlE,KAGjB,SAACN,EAAD,CACEC,QAASA,EACTP,KAAM8C,EAAWG,EAAKE,UACtB3C,aAAcA,EACR6D,UAAAA,EAAWC,SAAAA,EAAUC,SAAAA,EAAUC,QAAAA,EAASC,OAAAA,EAAQhE,QAAAA,EAASC,YAAAA,SAMzE,gBAAKuD,UAAWC,EAAhB,UACE,SAACa,EAAD,CAAQzC,KAAMA,SA9CX,O,8GCtCX,qBAAe,OACb,SAAC,IAAD,CACEA,KAAK,qFACLiB,YAAU,iBAAE,oGACO,gCADP,cACJyB,EADI,yBAEHA,EAAGC,SAAWD,GAFX","sources":["../../node_modules/@babel/standalone|sync|nonrecursive","components/Markdown/Code.tsx","components/Markdown/Footer.tsx","webpack://website/./src/components/Markdown/index.module.less?6e49","components/Markdown/index.tsx","routes/guide/import/index.tsx"],"sourcesContent":["function webpackEmptyContext(req) {\n\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\te.code = 'MODULE_NOT_FOUND';\n\tthrow e;\n}\nwebpackEmptyContext.keys = function() { return []; };\nwebpackEmptyContext.resolve = webpackEmptyContext;\nwebpackEmptyContext.id = 84934;\nmodule.exports = webpackEmptyContext;","import CodePreview, { CodePreviewProps } from '@uiw/react-code-preview';\n\nexport interface CodeProps extends CodePreviewProps {\n  code: string;\n  version: string;\n  codePen: boolean;\n  codeSandbox?: boolean;\n  dependencies: any;\n}\n\nexport default function Code({ version, dependencies, codePen, codeSandbox, ...other }: CodeProps) {\n  const props: CodePreviewProps = { ...other };\n  if (codePen) {\n    props.codePenOption = {\n      title: `uiw${version} - demo`,\n      includeModule: ['uiw'],\n      js: (props.code || '').replace('_mount_', 'document.getElementById(\"container\")'),\n      html: '<div id=\"container\" style=\"padding: 24px\"></div>',\n      css_external: `https://unpkg.com/uiw@${version}/dist/uiw.min.css`,\n      js_external: `https://unpkg.com/react@17.x/umd/react.development.js;https://unpkg.com/react-dom@17.x/umd/react-dom.development.js;https://unpkg.com/classnames@2.2.6/index.js;https://unpkg.com/uiw@${version}/dist/uiw.min.js;https://unpkg.com/@uiw/codepen-require-polyfill@1.1.3/index.js`,\n    };\n  }\n  if (codeSandbox) {\n    props.codeSandboxOption = {\n      files: {\n        'sandbox.config.json': {\n          content: `{\n            \"template\": \"node\",\n            \"container\": {\n              \"startScript\": \"start\",\n              \"node\": \"14\"\n            }\n          }`,\n        },\n        'public/index.html': {\n          content: `<div id=\"container\"></div>`,\n        },\n        'src/index.js': {\n          content: (props.code || '').replace('_mount_', 'document.getElementById(\"container\")'),\n        },\n        '.kktrc.js': {\n          content: `import lessModules from \"@kkt/less-modules\";\\nexport default (conf, env, options) => {\\nconf = lessModules(conf, env, options);\\nreturn conf;\\n};`,\n        },\n        'package.json': {\n          content: {\n            name: 'uiw-demo',\n            description: `uiw v${version} - demo`,\n            dependencies: {\n              react: '^17.0.2',\n              'react-dom': '^17.0.2',\n              uiw: 'latest',\n            },\n            devDependencies: {\n              '@kkt/less-modules': '~7.1.1',\n              kkt: '~7.1.5',\n            },\n            license: 'MIT',\n            scripts: {\n              start: 'kkt start',\n              build: 'kkt build',\n              test: 'kkt test --env=jsdom',\n            },\n            browserslist: ['>0.2%', 'not dead', 'not ie <= 11', 'not op_mini all'],\n          },\n        },\n      },\n    };\n  }\n  return <CodePreview {...props} dependencies={dependencies} style={{ marginBottom: 0 }} />;\n}\n","import React, { Fragment } from 'react';\nimport { Divider } from 'uiw';\n\nexport type FooterProps = {\n  path?: string;\n};\n\nexport default function (props: FooterProps = {}) {\n  const { path } = props;\n  const url = /^http/.test(path || '') ? path : `https://github.com/uiwjs/uiw/blob/master/${path}`;\n  return (\n    <Fragment>\n      犯了错误还是想对文件做出贡献？\n      {url && (\n        <a href={url} target=\"_blank\" rel=\"noopener noreferrer\">\n          在Github上编辑本页！\n        </a>\n      )}\n      <br />\n      <a href=\"https://github.com/uiwjs/uiw/issues\" target=\"_blank\" rel=\"noopener noreferrer\">\n        反馈建议\n      </a>\n      <Divider type=\"vertical\" />\n      <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://github.com/uiwjs/uiw/issues/new\">\n        提交bug\n      </a>\n      <Divider type=\"vertical\" />\n      <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://github.com/uiwjs/uiw\">\n        Github\n      </a>\n      <Divider type=\"vertical\" />\n      <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://github.com/kktjs/kkt\">\n        kkt\n      </a>\n      <Divider type=\"vertical\" />\n      <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://github.com/kktjs/kkt-ssr\">\n        @kkt/ssr\n      </a>\n      <Divider type=\"vertical\" />\n      <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"http://uiw.gitee.io\">\n        国内镜像\n      </a>\n    </Fragment>\n  );\n}\n","// extracted by mini-css-extract-plugin\nexport default {\"docinfo\":\"index_docinfo__3Vx8S\",\"markdown\":\"index_markdown__hcQCp\"};","import { useEffect, useState } from 'react';\nimport MarkdownPreview from '@uiw/react-markdown-preview';\nimport pkg from 'uiw/package.json';\nimport Code from './Code';\nimport Footer from './Footer';\nimport styles from './index.module.less';\n\nexport type CreatePageProps<T> = {\n  dependencies?: T;\n  path: string;\n  renderPage?: () => Promise<string>;\n};\n\nconst getCodeStr = (data: any[] = [], code: string = '') => {\n  data.forEach((node) => {\n    if (node.type === 'text') {\n      code += node.value;\n    } else if (node.children && Array.isArray(node.children)) {\n      code += getCodeStr(node.children);\n    }\n  });\n  return code;\n};\n\nexport default function CreatePage<T>(props: CreatePageProps<T>) {\n  const { renderPage, dependencies, path } = props;\n  const [mdStr, setMdStr] = useState('');\n\n  const version = pkg.version || '2.0.0';\n  useEffect(() => {\n    if (renderPage) {\n      renderPage()\n        .then((str) => {\n          setMdStr(str);\n        })\n        .catch(() => {});\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  if (!mdStr) {\n    return null;\n  }\n\n  return (\n    <div>\n      <MarkdownPreview\n        source={mdStr}\n        className={styles.markdown}\n        components={{\n          /**\n           * bordered 边框\n           * bgWhite 设置代码预览背景白色，否则为格子背景。\n           * noCode 不显示代码编辑器。\n           * noPreview 不显示代码预览效果。\n           * noScroll 预览区域不显示滚动条。\n           * codePen 显示 Codepen 按钮，要特别注意 包导入的问题，实例中的 import 主要用于 Codepen 使用。\n           */\n          code: ({ inline, node, ...props }) => {\n            const { noPreview, bordered, noScroll, bgWhite, noCode, codePen, codeSandbox } = props as any;\n            if (inline) {\n              return <code {...props} />;\n            }\n            const config = {\n              noPreview,\n              bordered,\n              noScroll,\n              bgWhite,\n              noCode,\n              codePen,\n              codeSandbox,\n            } as any;\n            if (Object.keys(config).filter((name) => config[name] !== undefined).length === 0) {\n              return <code {...props} />;\n            }\n            return (\n              <Code\n                version={version}\n                code={getCodeStr(node.children)}\n                dependencies={dependencies}\n                {...{ noPreview, bordered, noScroll, bgWhite, noCode, codePen, codeSandbox }}\n              />\n            );\n          },\n        }}\n      />\n      <div className={styles.docinfo}>\n        <Footer path={path} />\n      </div>\n    </div>\n  );\n}\n","import React from 'react';\nimport Markdown from '../../../components/Markdown';\n\nexport default () => (\n  <Markdown\n    path=\"https://github.com/uiwjs/uiw/tree/master/website/src/routes/guide/import/README.md\"\n    renderPage={async () => {\n      const md = await import('./README.md');\n      return md.default || md;\n    }}\n  />\n);\n"],"names":["webpackEmptyContext","req","e","Error","code","keys","resolve","id","module","exports","Code","version","dependencies","codePen","codeSandbox","other","props","codePenOption","title","includeModule","js","replace","html","css_external","js_external","codeSandboxOption","files","content","name","description","react","uiw","devDependencies","kkt","license","scripts","start","build","test","browserslist","style","marginBottom","path","url","Fragment","href","target","rel","Divider","type","getCodeStr","data","forEach","node","value","children","Array","isArray","CreatePage","renderPage","useState","mdStr","setMdStr","pkg","useEffect","then","str","catch","source","className","styles","components","inline","noPreview","bordered","noScroll","bgWhite","noCode","config","Object","filter","undefined","length","Footer","md","default"],"sourceRoot":""}

package/web/static/js/6730.78172ed3.chunk.js

@@ -1,2 +0,0 @@
-(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6730],{84934:function(e){function n(e){var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}n.keys=function(){return[]},n.resolve=n,n.id=84934,e.exports=n},86082:function(e,n,t){"use strict";t.d(n,{Z:function(){return b}});var r=t(50189),o=t(53782),i=t(11026),s=t(41473),c=t(32131),d=t(75752),a=t(64508),u=t(69286),l=["version","dependencies","codePen","codeSandbox"];function p(e){var n=e.version,t=e.dependencies,i=e.codePen,s=e.codeSandbox,c=(0,o.Z)(e,l),d=(0,r.Z)({},c);return i&&(d.codePenOption={title:"uiw".concat(n," - demo"),includeModule:["uiw"],js:(d.code||"").replace("_mount_",'document.getElementById("container")'),html:'<div id="container" style="padding: 24px"></div>',css_external:"https://unpkg.com/uiw@".concat(n,"/dist/uiw.min.css"),js_external:"https://unpkg.com/react@17.x/umd/react.development.js;https://unpkg.com/react-dom@17.x/umd/react-dom.development.js;https://unpkg.com/classnames@2.2.6/index.js;https://unpkg.com/uiw@".concat(n,"/dist/uiw.min.js;https://unpkg.com/@uiw/codepen-require-polyfill@1.1.3/index.js")}),s&&(d.codeSandboxOption={files:{"sandbox.config.json":{content:'{\n            "template": "node",\n            "container": {\n              "startScript": "start",\n              "node": "14"\n            }\n          }'},"public/index.html":{content:'<div id="container"></div>'},"src/index.js":{content:(d.code||"").replace("_mount_",'document.getElementById("container")')},".kktrc.js":{content:'import lessModules from "@kkt/less-modules";\nexport default (conf, env, options) => {\nconf = lessModules(conf, env, options);\nreturn conf;\n};'},"package.json":{content:{name:"uiw-demo",description:"uiw v".concat(n," - demo"),dependencies:{react:"^17.0.2","react-dom":"^17.0.2",uiw:"latest"},devDependencies:{"@kkt/less-modules":"~7.1.1",kkt:"~7.1.5"},license:"MIT",scripts:{start:"kkt start",build:"kkt build",test:"kkt test --env=jsdom"},browserslist:[">0.2%","not dead","not ie <= 11","not op_mini all"]}}}}),(0,u.jsx)(a.Z,(0,r.Z)((0,r.Z)({},d),{},{dependencies:t,style:{marginBottom:0}}))}var h=t(36131);function f(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.path,t=/^http/.test(n||"")?n:"https://github.com/uiwjs/uiw/blob/master/".concat(n);return(0,u.jsxs)(s.Fragment,{children:["\u72af\u4e86\u9519\u8bef\u8fd8\u662f\u60f3\u5bf9\u6587\u4ef6\u505a\u51fa\u8d21\u732e\uff1f",t&&(0,u.jsx)("a",{href:t,target:"_blank",rel:"noopener noreferrer",children:"\u5728Github\u4e0a\u7f16\u8f91\u672c\u9875\uff01"}),(0,u.jsx)("br",{}),(0,u.jsx)("a",{href:"https://github.com/uiwjs/uiw/issues",target:"_blank",rel:"noopener noreferrer",children:"\u53cd\u9988\u5efa\u8bae"}),(0,u.jsx)(h.Divider,{type:"vertical"}),(0,u.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw/issues/new",children:"\u63d0\u4ea4bug"}),(0,u.jsx)(h.Divider,{type:"vertical"}),(0,u.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw",children:"Github"}),(0,u.jsx)(h.Divider,{type:"vertical"}),(0,u.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt",children:"kkt"}),(0,u.jsx)(h.Divider,{type:"vertical"}),(0,u.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt-ssr",children:"@kkt/ssr"}),(0,u.jsx)(h.Divider,{type:"vertical"}),(0,u.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"http://uiw.gitee.io",children:"\u56fd\u5185\u955c\u50cf"})]})}var m="index_docinfo__3Vx8S",k="index_markdown__hcQCp",v=["inline","node"],x=function e(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return n.forEach((function(n){"text"===n.type?t+=n.value:n.children&&Array.isArray(n.children)&&(t+=e(n.children))})),t};function b(e){var n=e.renderPage,t=e.dependencies,a=e.path,l=(0,s.useState)(""),h=(0,i.Z)(l,2),b=h[0],j=h[1],g=d.i8||"2.0.0";return(0,s.useEffect)((function(){n&&n().then((function(e){j(e)})).catch((function(){}))}),[]),b?(0,u.jsxs)("div",{children:[(0,u.jsx)(c.Z,{source:b,className:k,components:{code:function(e){var n=e.inline,i=e.node,s=(0,o.Z)(e,v),c=s,d=c.noPreview,a=c.bordered,l=c.noScroll,h=c.bgWhite,f=c.noCode,m=c.codePen,k=c.codeSandbox;if(n)return(0,u.jsx)("code",(0,r.Z)({},s));var b={noPreview:d,bordered:a,noScroll:l,bgWhite:h,noCode:f,codePen:m,codeSandbox:k};return 0===Object.keys(b).filter((function(e){return void 0!==b[e]})).length?(0,u.jsx)("code",(0,r.Z)({},s)):(0,u.jsx)(p,{version:g,code:x(i.children),dependencies:t,noPreview:d,bordered:a,noScroll:l,bgWhite:h,noCode:f,codePen:m,codeSandbox:k})}}}),(0,u.jsx)("div",{className:m,children:(0,u.jsx)(f,{path:a})})]}):null}},29569:function(e,n,t){"use strict";t.r(n);var r=t(27791),o=t(57135),i=t.n(o),s=(t(41473),t(86082)),c=t(69286);n.default=function(){return(0,c.jsx)(s.Z,{path:"https://github.com/uiwjs/uiw/tree/master/website/src/routes/extensions/README.md",renderPage:(0,r.Z)(i().mark((function e(){var n;return i().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,t.e(2926).then(t.bind(t,2926));case 2:return n=e.sent,e.abrupt("return",n.default||n);case 4:case"end":return e.stop()}}),e)})))})}}}]);
-//# sourceMappingURL=6730.78172ed3.chunk.js.map