@king-design/intact 2.0.0-beta.0

package/es/site/data/components/select/demos/clearable/react.js

@@ -0,0 +1,85 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import React from 'react';
+import { Select, Option } from '@king-design/react';
+
+var Demo = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Demo, _React$Component);
+
+  function Demo() {
+    var _context;
+
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.state = {
+      day: null,
+      days: []
+    };
+    return _this;
+  }
+
+  var _proto = Demo.prototype;
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Select, {
+      value: this.state.day,
+      onChangeValue: function onChangeValue(day) {
+        return _this2.setState({
+          day: day
+        });
+      },
+      clearable: true,
+      style: {
+        "marginRight": "10px"
+      }
+    }, /*#__PURE__*/React.createElement(Option, {
+      value: "Monday"
+    }, "\u661F\u671F\u4E00"), /*#__PURE__*/React.createElement(Option, {
+      value: "Tuesday"
+    }, "\u661F\u671F\u4E8C"), /*#__PURE__*/React.createElement(Option, {
+      value: "Wednesday"
+    }, "\u661F\u671F\u4E09"), /*#__PURE__*/React.createElement(Option, {
+      value: "Thursday"
+    }, "\u661F\u671F\u56DB"), /*#__PURE__*/React.createElement(Option, {
+      value: "Friday"
+    }, "\u661F\u671F\u4E94"), /*#__PURE__*/React.createElement(Option, {
+      value: "Saturday"
+    }, "\u661F\u671F\u516D"), /*#__PURE__*/React.createElement(Option, {
+      value: "Sunday"
+    }, "\u661F\u671F\u5929")), /*#__PURE__*/React.createElement(Select, {
+      value: this.state.days,
+      onChangeValue: function onChangeValue(days) {
+        return _this2.setState({
+          days: days
+        });
+      },
+      multiple: true,
+      clearable: true
+    }, /*#__PURE__*/React.createElement(Option, {
+      value: "Monday"
+    }, "\u661F\u671F\u4E00"), /*#__PURE__*/React.createElement(Option, {
+      value: "Tuesday"
+    }, "\u661F\u671F\u4E8C"), /*#__PURE__*/React.createElement(Option, {
+      value: "Wednesday"
+    }, "\u661F\u671F\u4E09"), /*#__PURE__*/React.createElement(Option, {
+      value: "Thursday"
+    }, "\u661F\u671F\u56DB"), /*#__PURE__*/React.createElement(Option, {
+      value: "Friday"
+    }, "\u661F\u671F\u4E94"), /*#__PURE__*/React.createElement(Option, {
+      value: "Saturday"
+    }, "\u661F\u671F\u516D"), /*#__PURE__*/React.createElement(Option, {
+      value: "Sunday"
+    }, "\u661F\u671F\u5929")));
+  };
+
+  return Demo;
+}(React.Component);
+
+export { Demo as default };

package/es/site/data/components/select/demos/creatable/index.d.ts

@@ -0,0 +1,10 @@
+export { default as data } from './index.json';
+import { Component } from 'intact';
+interface Props {
+    day?: string | null;
+    days?: string[];
+}
+export default class extends Component<Props> {
+    static template: string | import("intact").Template<any>;
+    static defaults(): Props;
+}

package/es/site/data/components/select/demos/creatable/index.js

@@ -0,0 +1,24 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+export { default as data } from './index.json';
+import { Component } from 'intact';
+import template from './index.vdt';
+
+var default_1 = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(default_1, _Component);
+
+  function default_1() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  default_1.defaults = function defaults() {
+    return {
+      day: null,
+      days: []
+    };
+  };
+
+  return default_1;
+}(Component);
+
+default_1.template = template;
+export { default_1 as default };

package/es/site/data/components/select/demos/creatable/react.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface Props {
+    day?: string | null;
+    days?: string[];
+}
+export default class Demo extends React.Component<{}, Props> {
+    state: Props;
+    render(): JSX.Element;
+}
+export {};

package/es/site/data/components/select/demos/creatable/react.js

@@ -0,0 +1,91 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _JSON$stringify from "@babel/runtime-corejs3/core-js/json/stringify";
+import React from 'react';
+import { Select, Option } from '@king-design/react';
+
+var Demo = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Demo, _React$Component);
+
+  function Demo() {
+    var _context;
+
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.state = {
+      day: null,
+      days: []
+    };
+    return _this;
+  }
+
+  var _proto = Demo.prototype;
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Select, {
+      value: this.state.day,
+      onChangeValue: function onChangeValue(day) {
+        return _this2.setState({
+          day: day
+        });
+      },
+      filterable: true,
+      creatable: true,
+      style: {
+        "marginRight": "10px"
+      }
+    }, /*#__PURE__*/React.createElement(Option, {
+      value: "Monday"
+    }, "\u661F\u671F\u4E00"), /*#__PURE__*/React.createElement(Option, {
+      value: "Tuesday"
+    }, "\u661F\u671F\u4E8C"), /*#__PURE__*/React.createElement(Option, {
+      value: "Wednesday"
+    }, "\u661F\u671F\u4E09"), /*#__PURE__*/React.createElement(Option, {
+      value: "Thursday"
+    }, "\u661F\u671F\u56DB"), /*#__PURE__*/React.createElement(Option, {
+      value: "Friday"
+    }, "\u661F\u671F\u4E94"), /*#__PURE__*/React.createElement(Option, {
+      value: "Saturday"
+    }, "\u661F\u671F\u516D"), /*#__PURE__*/React.createElement(Option, {
+      value: "Sunday"
+    }, "\u661F\u671F\u5929")), "Day: ", this.state.day, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Select, {
+      value: this.state.days,
+      onChangeValue: function onChangeValue(days) {
+        return _this2.setState({
+          days: days
+        });
+      },
+      filterable: true,
+      multiple: true,
+      creatable: true,
+      style: {
+        "marginRight": "10px"
+      }
+    }, /*#__PURE__*/React.createElement(Option, {
+      value: "Monday"
+    }, "\u661F\u671F\u4E00"), /*#__PURE__*/React.createElement(Option, {
+      value: "Tuesday"
+    }, "\u661F\u671F\u4E8C"), /*#__PURE__*/React.createElement(Option, {
+      value: "Wednesday"
+    }, "\u661F\u671F\u4E09"), /*#__PURE__*/React.createElement(Option, {
+      value: "Thursday"
+    }, "\u661F\u671F\u56DB"), /*#__PURE__*/React.createElement(Option, {
+      value: "Friday"
+    }, "\u661F\u671F\u4E94"), /*#__PURE__*/React.createElement(Option, {
+      value: "Saturday"
+    }, "\u661F\u671F\u516D"), /*#__PURE__*/React.createElement(Option, {
+      value: "Sunday"
+    }, "\u661F\u671F\u5929")), "Days: ", _JSON$stringify(this.state.days));
+  };
+
+  return Demo;
+}(React.Component);
+
+export { Demo as default };

package/es/site/data/components/select/demos/custom/index.d.ts

@@ -0,0 +1,10 @@
+export { default as data } from './index.json';
+import { Component } from 'intact';
+interface Props {
+    day?: string | null;
+    data: any[];
+}
+export default class extends Component {
+    static template: string | import("intact").Template<any>;
+    static defaults(): Props;
+}

package/es/site/data/components/select/demos/custom/index.js

@@ -0,0 +1,45 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+export { default as data } from './index.json';
+import { Component } from 'intact';
+import template from './index.vdt';
+
+var default_1 = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(default_1, _Component);
+
+  function default_1() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  default_1.defaults = function defaults() {
+    return {
+      day: null,
+      data: [{
+        label: '星期一',
+        value: 'Monday'
+      }, {
+        label: '星期二',
+        value: 'Tuesday'
+      }, {
+        label: '星期三',
+        value: 'Wednesday'
+      }, {
+        label: '星期四',
+        value: 'Thursday'
+      }, {
+        label: '星期五',
+        value: 'Friday'
+      }, {
+        label: '星期六',
+        value: 'Saturday'
+      }, {
+        label: '星期天',
+        value: 'Sunday'
+      }]
+    };
+  };
+
+  return default_1;
+}(Component);
+
+default_1.template = template;
+export { default_1 as default };

package/es/site/data/components/select/demos/custom/react.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface Props {
+    day?: string | null;
+    data: any[];
+}
+export default class Demo extends React.Component<{}, Props> {
+    state: Props;
+    render(): JSX.Element;
+}
+export {};

package/es/site/data/components/select/demos/custom/react.js

@@ -0,0 +1,78 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import React from 'react';
+import { Select, Option } from '@king-design/react';
+
+var Demo = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Demo, _React$Component);
+
+  function Demo() {
+    var _context;
+
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.state = {
+      day: null,
+      data: [{
+        label: '星期一',
+        value: 'Monday'
+      }, {
+        label: '星期二',
+        value: 'Tuesday'
+      }, {
+        label: '星期三',
+        value: 'Wednesday'
+      }, {
+        label: '星期四',
+        value: 'Thursday'
+      }, {
+        label: '星期五',
+        value: 'Friday'
+      }, {
+        label: '星期六',
+        value: 'Saturday'
+      }, {
+        label: '星期天',
+        value: 'Sunday'
+      }]
+    };
+    return _this;
+  }
+
+  var _proto = Demo.prototype;
+
+  _proto.render = function render() {
+    var _this2 = this,
+        _context2;
+
+    return /*#__PURE__*/React.createElement(Select, {
+      value: this.state.day,
+      onChangeValue: function onChangeValue(day) {
+        return _this2.setState({
+          day: day
+        });
+      },
+      filterable: true
+    }, _mapInstanceProperty(_context2 = this.state.data).call(_context2, function ($value, $key) {
+      return /*#__PURE__*/React.createElement(Option, {
+        value: $value.value,
+        label: $value.label
+      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, $value.label), /*#__PURE__*/React.createElement("span", {
+        style: {
+          "float": "right",
+          "color": "#ccc"
+        }
+      }, $value.value)));
+    }));
+  };
+
+  return Demo;
+}(React.Component);
+
+export { Demo as default };

package/es/site/data/components/select/demos/customMenu/index.d.ts

@@ -0,0 +1,21 @@
+export { default as data } from './index.json';
+import { Component } from 'intact';
+import './index.styl';
+interface Props {
+    values: DataItem[];
+    keywords?: string;
+    data: DataItem[];
+}
+declare type DataItem = {
+    name: string;
+    domain: string;
+};
+export default class extends Component<Props> {
+    static template: string | import("intact").Template<any>;
+    static defaults(): Props;
+    text(): string | null;
+    checkedKeys(): string[];
+    filter(): DataItem[];
+    confirm(): void;
+    hide(): void;
+}

package/es/site/data/components/select/demos/customMenu/index.js

@@ -0,0 +1,95 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js/instance/trim";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
+import { __decorate } from "tslib";
+export { default as data } from './index.json';
+import { Component } from 'intact';
+import template from './index.vdt';
+import './index.styl';
+import { bind } from 'kpc';
+
+var default_1 = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(default_1, _Component);
+
+  function default_1() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  default_1.defaults = function defaults() {
+    return {
+      values: [],
+      keywords: '',
+      data: [{
+        name: 'King Design',
+        domain: 'design.ksyun.com'
+      }, {
+        name: 'KPC Theme',
+        domain: 'kpc-theme.ksyun.com'
+      }, {
+        name: 'King Cloud',
+        domain: 'www.ksyun.com'
+      }, {
+        name: 'Baidu',
+        domain: 'www.baidu.com'
+      }, {
+        name: 'Google',
+        domain: 'www.google.com'
+      }, {
+        name: 'Bing',
+        domain: 'cn.bing.com'
+      }, {
+        name: 'Github',
+        domain: 'www.github.com'
+      }]
+    };
+  };
+
+  var _proto = default_1.prototype;
+
+  _proto.text = function text() {
+    var valuesLength = this.get('values').length;
+    var dataLength = this.get('data').length;
+    return valuesLength ? "\u5DF2\u9009\u62E9" + valuesLength + "\u9879 / \u5171" + dataLength + "\u9879" : null;
+  };
+
+  _proto.checkedKeys = function checkedKeys() {
+    var _context;
+
+    return _mapInstanceProperty(_context = this.get('values')).call(_context, function (item) {
+      return item.name;
+    });
+  };
+
+  _proto.filter = function filter() {
+    var data = this.get('data');
+    var keywords = this.get('keywords');
+    keywords = _trimInstanceProperty(keywords).call(keywords).toLowerCase();
+    if (!keywords) return data;
+    return _filterInstanceProperty(data).call(data, function (item) {
+      var _context2, _context3;
+
+      return _includesInstanceProperty(_context2 = item.name.toLowerCase()).call(_context2, keywords) || _includesInstanceProperty(_context3 = item.domain.toLowerCase()).call(_context3, keywords);
+    });
+  };
+
+  _proto.confirm = function confirm() {
+    var data = this.refs.table.getCheckedData();
+    this.set('values', data);
+    this.hide();
+  };
+
+  _proto.hide = function hide() {
+    this.refs.select.hide();
+  };
+
+  return default_1;
+}(Component);
+
+default_1.template = template;
+export { default_1 as default };
+
+__decorate([bind], default_1.prototype, "confirm", null);
+
+__decorate([bind], default_1.prototype, "hide", null);

package/es/site/data/components/select/demos/customMenu/react.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import './index.styl';
+interface Props {
+    values: DataItem[];
+    keywords?: string;
+    data: DataItem[];
+}
+declare type DataItem = {
+    name: string;
+    domain: string;
+};
+export default class Demo extends React.Component<{}, Props> {
+    state: Props;
+    private select;
+    private table;
+    text(): string | null;
+    checkedKeys(): string[];
+    filter(): DataItem[];
+    confirm(): void;
+    hide(): void;
+    render(): JSX.Element;
+}
+export {};

package/es/site/data/components/select/demos/customMenu/react.js

@@ -0,0 +1,159 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _valuesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/values";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js/instance/trim";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
+import { __decorate } from "tslib";
+import React from 'react';
+import { Select, Table, TableColumn, Input, Button, Icon } from '@king-design/react';
+import './index.styl';
+import { bind } from '@king-design/react';
+
+var Demo = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Demo, _React$Component);
+
+  function Demo() {
+    var _context;
+
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.state = {
+      values: [],
+      keywords: '',
+      data: [{
+        name: 'King Design',
+        domain: 'design.ksyun.com'
+      }, {
+        name: 'KPC Theme',
+        domain: 'kpc-theme.ksyun.com'
+      }, {
+        name: 'King Cloud',
+        domain: 'www.ksyun.com'
+      }, {
+        name: 'Baidu',
+        domain: 'www.baidu.com'
+      }, {
+        name: 'Google',
+        domain: 'www.google.com'
+      }, {
+        name: 'Bing',
+        domain: 'cn.bing.com'
+      }, {
+        name: 'Github',
+        domain: 'www.github.com'
+      }]
+    };
+    _this.select = void 0;
+    _this.table = void 0;
+    return _this;
+  }
+
+  var _proto = Demo.prototype;
+
+  _proto.text = function text() {
+    var valuesLength = _valuesInstanceProperty(this.state).length;
+
+    var dataLength = this.state.data.length;
+    return valuesLength ? "\u5DF2\u9009\u62E9" + valuesLength + "\u9879 / \u5171" + dataLength + "\u9879" : null;
+  };
+
+  _proto.checkedKeys = function checkedKeys() {
+    var _context2;
+
+    return _mapInstanceProperty(_context2 = _valuesInstanceProperty(this.state)).call(_context2, function (item) {
+      return item.name;
+    });
+  };
+
+  _proto.filter = function filter() {
+    var data = this.state.data;
+    var keywords = this.state.keywords;
+    keywords = _trimInstanceProperty(keywords).call(keywords).toLowerCase();
+    if (!keywords) return data;
+    return _filterInstanceProperty(data).call(data, function (item) {
+      var _context3, _context4;
+
+      return _includesInstanceProperty(_context3 = item.name.toLowerCase()).call(_context3, keywords) || _includesInstanceProperty(_context4 = item.domain.toLowerCase()).call(_context4, keywords);
+    });
+  };
+
+  _proto.confirm = function confirm() {
+    var data = this.table.getCheckedData();
+    this.setState({
+      values: data
+    });
+    this.hide();
+  };
+
+  _proto.hide = function hide() {
+    this.select.hide();
+  };
+
+  _proto.render = function render() {
+    var _this2 = this,
+        _context5;
+
+    return /*#__PURE__*/React.createElement(Select, {
+      value: this.text(),
+      slotMenu: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Input, {
+        placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u5B57",
+        size: "small",
+        fluid: true,
+        value: this.state.keywords,
+        onChangeValue: function onChangeValue(keywords) {
+          return _this2.setState({
+            keywords: keywords
+          });
+        },
+        slotSuffix: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
+          className: "ion-ios-search"
+        }))
+      }), /*#__PURE__*/React.createElement(Table, {
+        data: _filterInstanceProperty(_context5 = this).call(_context5),
+        type: "border",
+        fixHeader: "200",
+        ref: function ref(i) {
+          return _this2.table = i;
+        },
+        rowKey: function rowKey(i) {
+          return i.name;
+        },
+        checkedKeys: this.checkedKeys()
+      }, /*#__PURE__*/React.createElement(TableColumn, {
+        title: "Name",
+        key: "name"
+      }), /*#__PURE__*/React.createElement(TableColumn, {
+        title: "Domain",
+        key: "domain"
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "footer"
+      }, /*#__PURE__*/React.createElement(Button, {
+        type: "primary",
+        size: "small",
+        onClick: this.confirm
+      }, "\u786E\u5B9A"), /*#__PURE__*/React.createElement(Button, {
+        size: "small",
+        onClick: this.hide
+      }, "\u53D6\u6D88"))),
+      className: "custom-select",
+      ref: function ref(i) {
+        return _this2.select = i;
+      }
+    });
+  };
+
+  return Demo;
+}(React.Component);
+
+export { Demo as default };
+
+__decorate([bind], Demo.prototype, "confirm", null);
+
+__decorate([bind], Demo.prototype, "hide", null);

package/es/site/data/components/select/demos/disabled/index.d.ts

@@ -0,0 +1,11 @@
+export { default as data } from './index.json';
+import { Component } from 'intact';
+import './index.styl';
+interface Props {
+    day?: string | null;
+    days?: string[];
+}
+export default class extends Component<Props> {
+    static template: string | import("intact").Template<any>;
+    static defaults(): Props;
+}