uxcore.js - React UI Component Set

组件演示

[{"title":"基本用法","id":"components-transfer-demo-basic","tags":[],"filepath":"site/components/transfer/demo/basic.md","directory":"components/transfer/demo","filename":"basic","meta":{"title":"基本用法","description":"\n基本使用和常见操作\n","order":"0","filepath":"site/components/transfer/demo/basic.md","filename":"basic","directory":"components/transfer/demo","id":"components-transfer-demo-basic","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 _uxcore = require('uxcore');\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\nvar mockData = [];\nvar len = Math.random() * 10 + 40;\nfor (var i = 0; i < len; i += 1) {\n mockData.push({\n name: '\\u5185\\u5BB9' + (i + 1),\n value: i + 1,\n description: '\\u5185\\u5BB9' + (i + 1) + '\\u7684\\u63CF\\u8FF0',\n chosen: Math.random() * 2 > 1,\n keywords: ['neirong' + (i + 1)], // used in search & location\n disabled: i > 15\n });\n}\n\nvar TransferDemo = function (_React$Component) {\n _inherits(TransferDemo, _React$Component);\n\n function TransferDemo(props) {\n _classCallCheck(this, TransferDemo);\n\n var _this = _possibleConstructorReturn(this, (TransferDemo.__proto__ || Object.getPrototypeOf(TransferDemo)).call(this, props));\n\n _this.state = {\n disable: false,\n data: mockData\n };\n _this.handleChange = _this.handleChange.bind(_this);\n _this.handleClick = _this.handleClick.bind(_this);\n _this.handleClick2 = _this.handleClick2.bind(_this);\n _this.handleClick3 = _this.handleClick3.bind(_this);\n _this.handleClick4 = _this.handleClick4.bind(_this);\n return _this;\n }\n\n _createClass(TransferDemo, [{\n key: 'handleChange',\n value: function handleChange(data) {\n console.log(data);\n }\n }, {\n key: 'handleClick',\n value: function handleClick() {\n this.ref.selectItems([2, 3]);\n }\n }, {\n key: 'handleClick2',\n value: function handleClick2() {\n this.setState({\n disable: !this.state.disable\n });\n }\n }, {\n key: 'handleClick3',\n value: function handleClick3() {\n console.log('work');\n var mockData2 = [];\n var length = Math.random() * 10 + 40;\n for (var _i = 0; _i < length; _i += 1) {\n mockData2.push({\n name: '\\u5185\\u5BB9' + (_i + 1),\n value: _i + 1,\n description: '\\u5185\\u5BB9' + (_i + 1) + '\\u7684\\u63CF\\u8FF0',\n chosen: Math.random() * 2 > 1,\n keywords: ['neirong' + (_i + 1)] // used in search & location\n });\n }\n this.setState({\n data: mockData2\n });\n }\n }, {\n key: 'handleClick4',\n value: function handleClick4() {\n this.ref.reset();\n }\n }, {\n key: 'render',\n value: function render() {\n var _this2 = this;\n\n var me = this;\n return React.createElement(\n 'div',\n null,\n React.createElement(_uxcore.Transfer, {\n showSearch: true,\n disabled: me.state.disable,\n ref: function ref(c) {\n _this2.ref = c;\n },\n data: this.state.data,\n onChange: me.handleChange\n }),\n React.createElement(\n 'div',\n { style: { marginTop: '20px' } },\n React.createElement(\n _uxcore.Button,\n { onClick: me.handleClick },\n '\\u624B\\u52A8\\u66F4\\u6539\\u88AB\\u9009\\u4E2D\\u7684\\u9879'\n ),\n React.createElement(\n _uxcore.Button,\n { type: 'secondary', style: { marginLeft: 12 }, onClick: me.handleClick2 },\n '\\u66F4\\u6539 mode'\n ),\n React.createElement(\n _uxcore.Button,\n { type: 'secondary', style: { marginLeft: 12 }, onClick: me.handleClick3 },\n '\\u66F4\\u6539 props'\n ),\n React.createElement(\n _uxcore.Button,\n { type: 'secondary', style: { marginLeft: 12 }, onClick: me.handleClick4 },\n '\\u91CD\\u7F6E'\n )\n )\n );\n }\n }]);\n\n return TransferDemo;\n}(React.Component);\n\nReactDOM.render(React.createElement(TransferDemo, null), document.getElementById('components-transfer-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Button } from 'uxcore';\nimport { Transfer } from 'uxcore';\n\nconst mockData = [];\nconst len = (Math.random() * 10) + 40;\nfor (let i = 0; i < len; i += 1) {\n mockData.push({\n name: `内容${i + 1}`,\n value: (i + 1),\n description: `内容${i + 1}的描述`,\n chosen: Math.random() * 2 > 1,\n keywords: [`neirong${i + 1}`], // used in search & location\n disabled: i > 15,\n });\n}\n\nclass TransferDemo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n disable: false,\n data: mockData,\n };\n this.handleChange = this.handleChange.bind(this);\n this.handleClick = this.handleClick.bind(this);\n this.handleClick2 = this.handleClick2.bind(this);\n this.handleClick3 = this.handleClick3.bind(this);\n this.handleClick4 = this.handleClick4.bind(this);\n }\n\n handleChange(data) {\n console.log(data);\n }\n\n handleClick() {\n this.ref.selectItems([2, 3]);\n }\n\n handleClick2() {\n this.setState({\n disable: !this.state.disable,\n });\n }\n handleClick3() {\n console.log('work');\n const mockData2 = [];\n const length = (Math.random() * 10) + 40;\n for (let i = 0; i < length; i += 1) {\n mockData2.push({\n name: `内容${i + 1}`,\n value: (i + 1),\n description: `内容${i + 1}的描述`,\n chosen: Math.random() * 2 > 1,\n keywords: [`neirong${i + 1}`], // used in search & location\n });\n }\n this.setState({\n data: mockData2,\n });\n }\n\n handleClick4() {\n this.ref.reset();\n }\n\n render() {\n const me = this;\n return (\n <div>\n <Transfer\n showSearch\n disabled={me.state.disable}\n ref={(c) => { this.ref = c; }}\n data={this.state.data}\n onChange={me.handleChange}\n />\n <div style={{ marginTop: '20px' }}>\n <Button onClick={me.handleClick}>手动更改被选中的项</Button>\n <Button type=\"secondary\" style={{ marginLeft: 12 }} onClick={me.handleClick2}>更改 mode</Button>\n <Button type=\"secondary\" style={{ marginLeft: 12 }} onClick={me.handleClick3}>更改 props</Button>\n <Button type=\"secondary\" style={{ marginLeft: 12 }} onClick={me.handleClick4}>重置</Button>\n </div>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <TransferDemo />,\n document.getElementById('components-transfer-demo-basic')\n);</code></pre></div>"},"status":"public","toc":""}]

基本用法

基本使用和常见操作

import { Button } from 'uxcore';
import { Transfer } from 'uxcore';

const mockData = [];
const len = (Math.random() * 10) + 40;
for (let i = 0; i < len; i += 1) {
  mockData.push({
    name: `内容${i + 1}`,
    value: (i + 1),
    description: `内容${i + 1}的描述`,
    chosen: Math.random() * 2 > 1,
    keywords: [`neirong${i + 1}`], // used in search & location
    disabled: i > 15,
  });
}

class TransferDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      disable: false,
      data: mockData,
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleClick = this.handleClick.bind(this);
    this.handleClick2 = this.handleClick2.bind(this);
    this.handleClick3 = this.handleClick3.bind(this);
    this.handleClick4 = this.handleClick4.bind(this);
  }

  handleChange(data) {
    console.log(data);
  }

  handleClick() {
    this.ref.selectItems([2, 3]);
  }

  handleClick2() {
    this.setState({
      disable: !this.state.disable,
    });
  }
  handleClick3() {
    console.log('work');
    const mockData2 = [];
    const length = (Math.random() * 10) + 40;
    for (let i = 0; i < length; i += 1) {
      mockData2.push({
        name: `内容${i + 1}`,
        value: (i + 1),
        description: `内容${i + 1}的描述`,
        chosen: Math.random() * 2 > 1,
        keywords: [`neirong${i + 1}`], // used in search & location
      });
    }
    this.setState({
      data: mockData2,
    });
  }

  handleClick4() {
    this.ref.reset();
  }

  render() {
    const me = this;
    return (
      <div>
        <Transfer
          showSearch
          disabled={me.state.disable}
          ref={(c) => { this.ref = c; }}
          data={this.state.data}
          onChange={me.handleChange}
        />
        <div style={{ marginTop: '20px' }}>
          <Button onClick={me.handleClick}>手动更改被选中的项</Button>
          <Button type="secondary" style={{ marginLeft: 12 }} onClick={me.handleClick2}>更改 mode</Button>
          <Button type="secondary" style={{ marginLeft: 12 }} onClick={me.handleClick3}>更改 props</Button>
          <Button type="secondary" style={{ marginLeft: 12 }} onClick={me.handleClick4}>重置</Button>
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <TransferDemo />,
  document.getElementById('components-transfer-demo-basic')
);

API

selectItems(arr): 使对应 value 的变成高亮状态 (selected)。
参数：
- arr Array 一个由 value 组成的数组。

Props

参数	类型	必需	默认值	说明
data	array	required	-	用于初始化 transfer 的数据，格式见 Usage，其中 name 和 value 字段必有
disabled	boolean	optional	false	是否启用 disable 模式
showSearch	boolean	optional	true	是否显示搜索条
searchPlaceholder	string	optional	定位输入内容
leftTitle	string	optional	'未选中的'	左侧标题
rightTitle	string	optional	'已选中的'	右侧标题
onChange	func	optional	noop	选中情况变化时触发，返回选中和未选中的项