组件演示[{"title":"基本使用","id":"components-pickable-demo-pickable","tags":[],"filepath":"site/components/pickable/demo/pickable.md","directory":"components/pickable/demo","filename":"pickable","meta":{"title":"基本使用","description":"\n","order":"0","filepath":"site/components/pickable/demo/pickable.md","filename":"pickable","directory":"components/pickable/demo","id":"components-pickable-demo-pickable","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _uxcore = require('uxcore');\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\n;\n\nvar Item = _uxcore.Pickable.Item;\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n value: [1]\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'handleChange',\n value: function handleChange(value) {\n this.setState({\n value: value\n });\n }\n }, {\n key: 'render',\n value: function render() {\n var items = [{\n text: '条件一',\n value: 1,\n num: 15\n }, {\n text: '条件二',\n value: 2,\n num: 20\n }, {\n text: '条件三',\n value: 3,\n disable: true\n }];\n return React.createElement(\n 'div',\n null,\n React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.Pickable,\n { onChange: this.handleChange.bind(this), value: this.state.value, multiple: false },\n items.map(function (item, index) {\n return React.createElement(\n Item,\n { key: index, value: item.value, number: item.num, disabled: item.disable },\n item.text\n );\n })\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-pickable-demo-pickable'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import classnames from 'classnames';;\n\nimport { Pickable } from 'uxcore';\nconst { Item } = Pickable;\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n value: [1],\n };\n }\n\n handleChange(value) {\n this.setState({\n value,\n });\n }\n\n render() {\n const items = [{\n text: '条件一',\n value: 1,\n num: 15,\n }, {\n text: '条件二',\n value: 2,\n num: 20,\n }, {\n text: '条件三',\n value: 3,\n disable: true,\n }];\n return (<div>\n <div>\n <Pickable onChange={this.handleChange.bind(this)} value={this.state.value} multiple={false}>\n {items.map((item, index) => <Item key={index} value={item.value} number={item.num} disabled={item.disable}>{item.text}</Item>)}\n </Pickable>\n </div>\n </div>);\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-pickable-demo-pickable'));</code></pre></div>"},"status":"public","toc":""},{"title":"精简的单选模式","id":"components-pickable-demo-simple","tags":[],"filepath":"site/components/pickable/demo/simple.md","directory":"components/pickable/demo","filename":"simple","meta":{"title":"精简的单选模式","description":"\n","order":"1","filepath":"site/components/pickable/demo/simple.md","filename":"simple","directory":"components/pickable/demo","id":"components-pickable-demo-simple","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _uxcore = require('uxcore');\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\n;\n\nvar Item = _uxcore.Pickable.Item;\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n value: [1]\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'handleChange',\n value: function handleChange(value) {\n this.setState({\n value: value\n });\n }\n }, {\n key: 'render',\n value: function render() {\n var items = [{\n text: '条件一',\n value: 1,\n num: 15\n }, {\n text: '条件二',\n value: 2,\n num: 20\n }, {\n text: '条件三',\n value: 3,\n disable: true\n }];\n return React.createElement(\n 'div',\n null,\n React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.Pickable,\n { onChange: this.handleChange.bind(this), value: this.state.value, type: 'simple', multiple: false },\n items.map(function (item, index) {\n return React.createElement(\n Item,\n { key: index, value: item.value, disabled: item.disable },\n item.text\n );\n })\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-pickable-demo-simple'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import classnames from 'classnames';;\n\nimport { Pickable } from 'uxcore';\nconst { Item } = Pickable;\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n value: [1],\n };\n }\n\n handleChange(value) {\n this.setState({\n value,\n });\n }\n\n render() {\n const items = [{\n text: '条件一',\n value: 1,\n num: 15,\n }, {\n text: '条件二',\n value: 2,\n num: 20,\n }, {\n text: '条件三',\n value: 3,\n disable: true,\n }];\n return (<div>\n <div>\n <Pickable onChange={this.handleChange.bind(this)} value={this.state.value} type=\"simple\" multiple={false}>\n {items.map((item, index) => <Item key={index} value={item.value} disabled={item.disable}>{item.text}</Item>)}\n </Pickable>\n </div>\n </div>);\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-pickable-demo-simple'));</code></pre></div>"},"status":"public","toc":""},{"title":"多选模式","id":"components-pickable-demo-hook","tags":[],"filepath":"site/components/pickable/demo/hook.md","directory":"components/pickable/demo","filename":"hook","meta":{"title":"多选模式","description":"\n<p>带对勾的样式</p>\n","order":"2","filepath":"site/components/pickable/demo/hook.md","filename":"hook","directory":"components/pickable/demo","id":"components-pickable-demo-hook","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _uxcore = require('uxcore');\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\n;\n\nvar Item = _uxcore.Pickable.Item;\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n value: [1]\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'handleChange',\n value: function handleChange(value) {\n this.setState({\n value: value\n });\n }\n }, {\n key: 'render',\n value: function render() {\n var items = [{\n text: '条件一',\n value: 1,\n num: 15\n }, {\n text: '条件二',\n value: 2,\n num: 20\n }, {\n text: '条件三',\n value: 3,\n disable: true\n }];\n return React.createElement(\n 'div',\n null,\n React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.Pickable,\n { onChange: this.handleChange.bind(this), value: this.state.value, type: 'hook' },\n items.map(function (item, index) {\n return React.createElement(\n Item,\n { key: index, value: item.value, number: item.num, disabled: item.disable },\n item.text\n );\n })\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-pickable-demo-hook'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import classnames from 'classnames';;\n\nimport { Pickable } from 'uxcore';\nconst { Item } = Pickable;\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n value: [1],\n };\n }\n\n handleChange(value) {\n this.setState({\n value,\n });\n }\n\n render() {\n const items = [{\n text: '条件一',\n value: 1,\n num: 15,\n }, {\n text: '条件二',\n value: 2,\n num: 20,\n }, {\n text: '条件三',\n value: 3,\n disable: true,\n }];\n return (<div>\n <div>\n <Pickable onChange={this.handleChange.bind(this)} value={this.state.value} type=\"hook\">\n {items.map((item, index) => <Item key={index} value={item.value} number={item.num} disabled={item.disable}>{item.text}</Item>)}\n </Pickable>\n </div>\n </div>);\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-pickable-demo-hook'));</code></pre></div>"},"status":"public","toc":""},{"title":"精简的多选模式","id":"components-pickable-demo-hook-single","tags":[],"filepath":"site/components/pickable/demo/hook-single.md","directory":"components/pickable/demo","filename":"hook-single","meta":{"title":"精简的多选模式","description":"\n<p>带对勾的样式</p>\n","order":"3","filepath":"site/components/pickable/demo/hook-single.md","filename":"hook-single","directory":"components/pickable/demo","id":"components-pickable-demo-hook-single","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _uxcore = require('uxcore');\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\n;\n\nvar Item = _uxcore.Pickable.Item;\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n value: [1]\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'handleChange',\n value: function handleChange(value) {\n this.setState({\n value: value\n });\n }\n }, {\n key: 'render',\n value: function render() {\n var items = [{\n text: '条件一',\n value: 1,\n num: 15\n }, {\n text: '条件二',\n value: 2,\n num: 20\n }, {\n text: '条件三',\n value: 3,\n disable: true\n }];\n return React.createElement(\n 'div',\n null,\n React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.Pickable,\n { onChange: this.handleChange.bind(this), value: this.state.value, type: 'simpleHook' },\n items.map(function (item, index) {\n return React.createElement(\n Item,\n { key: index, value: item.value, number: item.num, disabled: item.disable },\n item.text\n );\n })\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-pickable-demo-hook-single'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import classnames from 'classnames';;\n\nimport { Pickable } from 'uxcore';\nconst { Item } = Pickable;\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n value: [1],\n };\n }\n\n handleChange(value) {\n this.setState({\n value,\n });\n }\n\n render() {\n const items = [{\n text: '条件一',\n value: 1,\n num: 15,\n }, {\n text: '条件二',\n value: 2,\n num: 20,\n }, {\n text: '条件三',\n value: 3,\n disable: true,\n }];\n return (<div>\n <div>\n <Pickable onChange={this.handleChange.bind(this)} value={this.state.value} type=\"simpleHook\">\n {items.map((item, index) => <Item key={index} value={item.value} number={item.num} disabled={item.disable}>{item.text}</Item>)}\n </Pickable>\n </div>\n </div>);\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-pickable-demo-hook-single'));</code></pre></div>"},"status":"public","toc":""},{"title":"自动折叠","id":"components-pickable-demo-fold","tags":[],"filepath":"site/components/pickable/demo/fold.md","directory":"components/pickable/demo","filename":"fold","meta":{"title":"自动折叠","description":"\n<p>通过 enableFold 打开</p>\n","order":"4","filepath":"site/components/pickable/demo/fold.md","filename":"fold","directory":"components/pickable/demo","id":"components-pickable-demo-fold","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _uxcore = require('uxcore');\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\n;\n\nvar Item = _uxcore.Pickable.Item;\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n value: [1]\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'handleChange',\n value: function handleChange(value) {\n this.setState({\n value: value\n });\n }\n }, {\n key: 'render',\n value: function render() {\n var items = [{\n text: '条件一',\n value: 1\n }, {\n text: '条件二',\n value: 2,\n disable: true\n }, {\n text: '条件三',\n value: 3\n }, {\n text: '条件四',\n value: 4\n }, {\n text: '条件五',\n value: 5\n }, {\n text: '条件六',\n value: 6\n }, {\n text: '条件七',\n value: 7\n }];\n\n return React.createElement(\n 'div',\n { style: { width: 400 } },\n React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.Pickable,\n {\n enableFold: true,\n onChange: this.handleChange.bind(this), value: this.state.value, type: 'hook'\n },\n items.map(function (item, index) {\n return React.createElement(\n Item,\n { key: index, value: item.value, disabled: item.disable },\n item.text\n );\n })\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-pickable-demo-fold'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import classnames from 'classnames';;\n\nimport { Pickable } from 'uxcore';\nconst { Item } = Pickable;\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n value: [1],\n };\n }\n\n handleChange(value) {\n this.setState({\n value,\n });\n }\n\n render() {\n const items = [{\n text: '条件一',\n value: 1,\n }, {\n text: '条件二',\n value: 2,\n disable: true,\n }, {\n text: '条件三',\n value: 3,\n }, {\n text: '条件四',\n value: 4,\n }, {\n text: '条件五',\n value: 5,\n }, {\n text: '条件六',\n value: 6,\n }, {\n text: '条件七',\n value: 7,\n }];\n\n return (<div style={{ width: 400 }}>\n <div>\n <Pickable\n enableFold\n onChange={this.handleChange.bind(this)} value={this.state.value} type=\"hook\"\n >\n {items.map((item, index) => <Item key={index} value={item.value} disabled={item.disable}>{item.text}</Item>)}\n </Pickable>\n </div>\n </div>);\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-pickable-demo-fold'));</code></pre></div>"},"status":"public","toc":""},{"title":"自动折叠（配置行数）","id":"components-pickable-demo-fold-max-lines","tags":[],"filepath":"site/components/pickable/demo/fold-max-lines.md","directory":"components/pickable/demo","filename":"fold-max-lines","meta":{"title":"自动折叠（配置行数）","description":"\n<p>通过配置 maxLines 可以实现不同的收起效果</p>\n","order":"5","filepath":"site/components/pickable/demo/fold-max-lines.md","filename":"fold-max-lines","directory":"components/pickable/demo","id":"components-pickable-demo-fold-max-lines","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _uxcore = require('uxcore');\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\n;\n\nvar Item = _uxcore.Pickable.Item;\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n value: [1]\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'handleChange',\n value: function handleChange(value) {\n this.setState({\n value: value\n });\n }\n }, {\n key: 'render',\n value: function render() {\n var items = [{\n text: '条件一',\n value: 1\n }, {\n text: '条件二',\n value: 2,\n disable: true\n }, {\n text: '条件三',\n value: 3\n }, {\n text: '条件四',\n value: 4\n }, {\n text: '条件五',\n value: 5\n }, {\n text: '条件六',\n value: 6\n }, {\n text: '条件七',\n value: 7\n }, {\n text: '条件八',\n value: 8\n }, {\n text: '条件九',\n value: 9\n }];\n\n return React.createElement(\n 'div',\n { style: { width: 350 } },\n React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.Pickable,\n {\n enableFold: true,\n maxLines: 2,\n onChange: this.handleChange.bind(this), value: this.state.value, type: 'hook'\n },\n items.map(function (item, index) {\n return React.createElement(\n Item,\n { key: index, value: item.value, disabled: item.disable },\n item.text\n );\n })\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-pickable-demo-fold-max-lines'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import classnames from 'classnames';;\n\nimport { Pickable } from 'uxcore';\nconst { Item } = Pickable;\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n value: [1],\n };\n }\n\n handleChange(value) {\n this.setState({\n value,\n });\n }\n\n render() {\n const items = [{\n text: '条件一',\n value: 1,\n }, {\n text: '条件二',\n value: 2,\n disable: true,\n }, {\n text: '条件三',\n value: 3,\n }, {\n text: '条件四',\n value: 4,\n }, {\n text: '条件五',\n value: 5,\n }, {\n text: '条件六',\n value: 6,\n }, {\n text: '条件七',\n value: 7,\n }, {\n text: '条件八',\n value: 8,\n }, {\n text: '条件九',\n value: 9,\n }];\n\n return (<div style={{ width: 350 }}>\n <div>\n <Pickable\n enableFold\n maxLines={2}\n onChange={this.handleChange.bind(this)} value={this.state.value} type=\"hook\"\n >\n {items.map((item, index) => <Item key={index} value={item.value} disabled={item.disable}>{item.text}</Item>)}\n </Pickable>\n </div>\n </div>);\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-pickable-demo-fold-max-lines'));</code></pre></div>"},"status":"public","toc":""}]基本使用 import classnames from 'classnames';; import { Pickable } from 'uxcore'; const { Item } = Pickable; class Demo extends React.Component { constructor(props) { super(props); this.state = { value: [1], }; } handleChange(value) { this.setState({ value, }); } render() { const items = [{ text: '条件一', value: 1, num: 15, }, { text: '条件二', value: 2, num: 20, }, { text: '条件三', value: 3, disable: true, }]; return (<div> <div> <Pickable onChange={this.handleChange.bind(this)} value={this.state.value} multiple={false}> {items.map((item, index) => <Item key={index} value={item.value} number={item.num} disabled={item.disable}>{item.text}</Item>)} </Pickable> </div> </div>); } } ReactDOM.render( <Demo /> , document.getElementById('components-pickable-demo-pickable'));精简的单选模式 import classnames from 'classnames';; import { Pickable } from 'uxcore'; const { Item } = Pickable; class Demo extends React.Component { constructor(props) { super(props); this.state = { value: [1], }; } handleChange(value) { this.setState({ value, }); } render() { const items = [{ text: '条件一', value: 1, num: 15, }, { text: '条件二', value: 2, num: 20, }, { text: '条件三', value: 3, disable: true, }]; return (<div> <div> <Pickable onChange={this.handleChange.bind(this)} value={this.state.value} type="simple" multiple={false}> {items.map((item, index) => <Item key={index} value={item.value} disabled={item.disable}>{item.text}</Item>)} </Pickable> </div> </div>); } } ReactDOM.render( <Demo /> , document.getElementById('components-pickable-demo-simple'));多选模式 带对勾的样式 import classnames from 'classnames';; import { Pickable } from 'uxcore'; const { Item } = Pickable; class Demo extends React.Component { constructor(props) { super(props); this.state = { value: [1], }; } handleChange(value) { this.setState({ value, }); } render() { const items = [{ text: '条件一', value: 1, num: 15, }, { text: '条件二', value: 2, num: 20, }, { text: '条件三', value: 3, disable: true, }]; return (<div> <div> <Pickable onChange={this.handleChange.bind(this)} value={this.state.value} type="hook"> {items.map((item, index) => <Item key={index} value={item.value} number={item.num} disabled={item.disable}>{item.text}</Item>)} </Pickable> </div> </div>); } } ReactDOM.render( <Demo /> , document.getElementById('components-pickable-demo-hook'));精简的多选模式 带对勾的样式 import classnames from 'classnames';; import { Pickable } from 'uxcore'; const { Item } = Pickable; class Demo extends React.Component { constructor(props) { super(props); this.state = { value: [1], }; } handleChange(value) { this.setState({ value, }); } render() { const items = [{ text: '条件一', value: 1, num: 15, }, { text: '条件二', value: 2, num: 20, }, { text: '条件三', value: 3, disable: true, }]; return (<div> <div> <Pickable onChange={this.handleChange.bind(this)} value={this.state.value} type="simpleHook"> {items.map((item, index) => <Item key={index} value={item.value} number={item.num} disabled={item.disable}>{item.text}</Item>)} </Pickable> </div> </div>); } } ReactDOM.render( <Demo /> , document.getElementById('components-pickable-demo-hook-single'));自动折叠 通过 enableFold 打开 import classnames from 'classnames';; import { Pickable } from 'uxcore'; const { Item } = Pickable; class Demo extends React.Component { constructor(props) { super(props); this.state = { value: [1], }; } handleChange(value) { this.setState({ value, }); } render() { const items = [{ text: '条件一', value: 1, }, { text: '条件二', value: 2, disable: true, }, { text: '条件三', value: 3, }, { text: '条件四', value: 4, }, { text: '条件五', value: 5, }, { text: '条件六', value: 6, }, { text: '条件七', value: 7, }]; return (<div style={{ width: 400 }}> <div> <Pickable enableFold onChange={this.handleChange.bind(this)} value={this.state.value} type="hook" > {items.map((item, index) => <Item key={index} value={item.value} disabled={item.disable}>{item.text}</Item>)} </Pickable> </div> </div>); } } ReactDOM.render( <Demo /> , document.getElementById('components-pickable-demo-fold'));自动折叠（配置行数） 通过配置 maxLines 可以实现不同的收起效果 import classnames from 'classnames';; import { Pickable } from 'uxcore'; const { Item } = Pickable; class Demo extends React.Component { constructor(props) { super(props); this.state = { value: [1], }; } handleChange(value) { this.setState({ value, }); } render() { const items = [{ text: '条件一', value: 1, }, { text: '条件二', value: 2, disable: true, }, { text: '条件三', value: 3, }, { text: '条件四', value: 4, }, { text: '条件五', value: 5, }, { text: '条件六', value: 6, }, { text: '条件七', value: 7, }, { text: '条件八', value: 8, }, { text: '条件九', value: 9, }]; return (<div style={{ width: 350 }}> <div> <Pickable enableFold maxLines={2} onChange={this.handleChange.bind(this)} value={this.state.value} type="hook" > {items.map((item, index) => <Item key={index} value={item.value} disabled={item.disable}>{item.text}</Item>)} </Pickable> </div> </div>); } } ReactDOM.render( <Demo /> , document.getElementById('components-pickable-demo-fold-max-lines'));Props 配置项 类型 必填 默认值 功能/备注 prefixCls string optional kuma-pickable 类名前缀，不使用 kuma 主题时使用 className string required - 增加额外的class onChange func(value, changedKeys) optional - 选中情况变化时触发，返回选中的项，以及目前发生变动的值 multiple bool optional true 是否多选 max number optional 99 最大显示的数字，超过 max，显示 max+，2.0 版本后此项废弃，改为传入 children 时实现。 type string optional normal 样式风格，可选值为 normal, simple, hook, simpleHook enableFold bool optional false 是否启用折行后自动折叠, 3.0 版本后支持 defaultfoldItems bool optional true 是否在折行的情况下默认折叠, 3.0 版本后支持 maxLines number optonal 1 超过几行的情况下使用折叠, 3.0 版本后支持 locale string optional zh-cn 国际化,zh-cn/en-us, 3.0 版本后支持 Item Props 配置项 类型 必填 默认值 功能/备注 value string/number required - 该 Item 对应的值 disabled boolean optional false 是否禁用 number number optional - number 有值时会显示对应的值，2.0 版本后此项废弃，改为传入 children 时实现。 max number optional 99 最大显示的数字，超过 max，显示 max+，2.0 版本后此项废弃，改为传入 children 时实现。
