shineout 1.12.2 → 1.12.3

package/esm/Cascader/FilterList.js

@@ -0,0 +1,195 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import React from 'react';
+import classnames from 'classnames';
+import absoluteList from '../AnimationList/AbsoluteList';
+import { Component } from '../component';
+import { getFlattenTree } from '../utils/tree';
+import { selectClass } from '../Select/styles';
+import { cascaderClass } from './styles';
+import Spin from '../Spin';
+
+var FilterItem =
+/*#__PURE__*/
+function (_Component) {
+  _inheritsLoose(FilterItem, _Component);
+
+  function FilterItem(props) {
+    var _this;
+
+    _this = _Component.call(this, props) || this;
+    _this.handleSelect = _this.handleSelect.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleSelectItem = _this.handleSelectItem.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
+  }
+
+  var _proto = FilterItem.prototype;
+
+  _proto.checkDisabled = function checkDisabled(data) {
+    var datum = this.props.datum;
+    var key = datum.getKey(data);
+    return datum.isDisabled(key);
+  };
+
+  _proto.handleSelectItem = function handleSelectItem(index, e) {
+    var _this$props = this.props,
+        data = _this$props.data,
+        datum = _this$props.datum,
+        onChange = _this$props.onChange,
+        onPathChange = _this$props.onPathChange,
+        onFilter = _this$props.onFilter,
+        filterText = _this$props.filterText,
+        expandTrigger = _this$props.expandTrigger;
+    if (data && expandTrigger === 'hover-only' && index !== data.length - 1) return;
+    if (e) e.stopPropagation();
+    var item = this.props.data[index];
+    if (this.checkDisabled(item)) return;
+    var keys = data.slice(0, index + 1).map(function (i) {
+      return datum.getKey(i);
+    });
+    if (onChange) onChange(keys);
+    onPathChange(datum.getKey(item), item, keys.slice(0, keys.length - 1), true);
+    if (onFilter && filterText) onFilter('');
+  };
+
+  _proto.handleSelect = function handleSelect() {
+    var data = this.props.data;
+    this.handleSelectItem(data.length - 1);
+  };
+
+  _proto.renderItem = function renderItem(item) {
+    var renderItem = this.props.renderItem;
+    var render = renderItem;
+
+    if (typeof render === 'string') {
+      var copyRender = render;
+
+      render = function render(n) {
+        return n[copyRender];
+      };
+    }
+
+    return render(item);
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    var data = this.props.data;
+    return React.createElement("div", {
+      className: cascaderClass('node'),
+      onClick: this.handleSelect
+    }, data.map(function (item, i) {
+      var content = React.createElement("div", {
+        onClick: _this2.handleSelectItem.bind(_this2, i),
+        key: "content",
+        className: cascaderClass('filter-list-content', _this2.checkDisabled(item) && 'disabled')
+      }, _this2.renderItem(item));
+      if (i === 0) return content;
+      return [React.createElement("span", {
+        key: "separator",
+        className: cascaderClass('filter-list-separator')
+      }, "/"), content];
+    }));
+  };
+
+  return FilterItem;
+}(Component); // eslint-disable-next-line react/no-multi-comp
+
+
+var FilterList =
+/*#__PURE__*/
+function (_Component2) {
+  _inheritsLoose(FilterList, _Component2);
+
+  function FilterList() {
+    return _Component2.apply(this, arguments) || this;
+  }
+
+  var _proto2 = FilterList.prototype;
+
+  _proto2.getKey = function getKey(path) {
+    var datum = this.props.datum;
+    return path.map(function (d) {
+      return datum.getKey(d);
+    }).join('-');
+  };
+
+  _proto2.getWideMatch = function getWideMatch(list) {
+    var filterDataChange = this.props.filterDataChange;
+    return list.filter(function (arr) {
+      return arr.some(function (item) {
+        return filterDataChange(item);
+      });
+    });
+  };
+
+  _proto2.renderList = function renderList() {
+    var _this3 = this;
+
+    var _this$props2 = this.props,
+        data = _this$props2.data,
+        childrenKey = _this$props2.childrenKey,
+        height = _this$props2.height,
+        loading = _this$props2.loading,
+        wideMatch = _this$props2.wideMatch,
+        others = _objectWithoutPropertiesLoose(_this$props2, ["data", "childrenKey", "height", "loading", "wideMatch"]);
+
+    var list = getFlattenTree(data, childrenKey, wideMatch);
+
+    if (wideMatch) {
+      list = this.getWideMatch(list);
+    }
+
+    return React.createElement("div", {
+      className: cascaderClass('filter-list'),
+      style: {
+        maxHeight: height
+      }
+    }, loading ? React.createElement("div", {
+      className: cascaderClass('list-loading')
+    }, typeof loading === 'boolean' ? React.createElement(Spin, {
+      size: 20
+    }) : loading) : list.map(function (path) {
+      return React.createElement(FilterItem, _extends({
+        key: _this3.getKey(path)
+      }, others, {
+        data: path
+      }));
+    }));
+  };
+
+  _proto2.render = function render() {
+    var _this$props3 = this.props,
+        focus = _this$props3.focus,
+        getRef = _this$props3.getRef,
+        fixed = _this$props3.fixed,
+        data = _this$props3.data,
+        childrenKey = _this$props3.childrenKey,
+        renderItem = _this$props3.renderItem,
+        datum = _this$props3.datum,
+        expandTrigger = _this$props3.expandTrigger,
+        onChange = _this$props3.onChange,
+        onPathChange = _this$props3.onPathChange,
+        filterText = _this$props3.filterText,
+        onFilter = _this$props3.onFilter,
+        wideMatch = _this$props3.wideMatch,
+        height = _this$props3.height,
+        filterDataChange = _this$props3.filterDataChange,
+        placeholder = _this$props3.placeholder,
+        others = _objectWithoutPropertiesLoose(_this$props3, ["focus", "getRef", "fixed", "data", "childrenKey", "renderItem", "datum", "expandTrigger", "onChange", "onPathChange", "filterText", "onFilter", "wideMatch", "height", "filterDataChange", "placeholder"]);
+
+    if (!focus) return null;
+    return React.createElement("div", _extends({}, others, {
+      ref: getRef,
+      className: classnames(selectClass('options'), cascaderClass('filter', expandTrigger === 'hover-only' && 'leaf-only'))
+    }), this.renderList());
+  };
+
+  return FilterList;
+}(Component); // @ts-ignore
+
+
+export default absoluteList(FilterList);

package/esm/Cascader/Input.d.ts

@@ -0,0 +1,26 @@
+import { Component, ChangeEvent, ClipboardEvent } from 'react';
+interface Props {
+    onFilter: (text: string) => void;
+    trim: boolean;
+    focus: boolean;
+    filterText: string;
+}
+interface State {
+    editable: boolean;
+}
+declare class FilterInput extends Component<Props, State> {
+    lastCursorOffset: number;
+    editElement: HTMLSpanElement;
+    blurTimer: number;
+    constructor(props: Props);
+    componentDidMount(): void;
+    getProcessedValue(text: string): string;
+    reset(): void;
+    focusInput(flag?: boolean): void;
+    focus(): void;
+    bindElement(el: HTMLSpanElement): void;
+    handleInput(e: ChangeEvent<HTMLSpanElement>): void;
+    handlePaste(e: ClipboardEvent<HTMLSpanElement>): void;
+    render(): JSX.Element;
+}
+export default FilterInput;

package/esm/Cascader/Input.js

@@ -0,0 +1,117 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { Component } from 'react';
+import { cascaderClass } from './styles';
+import { focusElement, getCursorOffset, preventPasteFile } from '../utils/dom/element';
+
+var handleFocus = function handleFocus(e) {
+  e.stopPropagation();
+};
+
+var FilterInput =
+/*#__PURE__*/
+function (_Component) {
+  _inheritsLoose(FilterInput, _Component);
+
+  function FilterInput(props) {
+    var _this;
+
+    _this = _Component.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "lastCursorOffset", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "editElement", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "blurTimer", void 0);
+
+    _this.state = {
+      editable: false
+    };
+    _this.bindElement = _this.bindElement.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleInput = _this.handleInput.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handlePaste = _this.handlePaste.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.focusInput = _this.focusInput.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
+  }
+
+  var _proto = FilterInput.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    this.focusInput(true);
+  };
+
+  _proto.getProcessedValue = function getProcessedValue(text) {
+    var trim = this.props.trim;
+    if (!trim && this.lastCursorOffset === 0 && /^\u00A0$/.test(text)) return '';
+    return trim ? text.trim() : text.replace(/\u00A0/g, ' ');
+  };
+
+  _proto.reset = function reset() {
+    if (this.editElement) this.editElement.innerText = '';
+    if (this.blurTimer) clearTimeout(this.blurTimer);
+  };
+
+  _proto.focusInput = function focusInput(flag) {
+    var _this2 = this;
+
+    if (flag === void 0) {
+      flag = false;
+    }
+
+    if (!flag) {
+      this.setState({
+        editable: false
+      });
+      return;
+    }
+
+    this.setState({
+      editable: true
+    }, function () {
+      return _this2.focus();
+    });
+  };
+
+  _proto.focus = function focus() {
+    var _this3 = this;
+
+    requestAnimationFrame(function () {
+      focusElement.end(_this3.editElement);
+    });
+  };
+
+  _proto.bindElement = function bindElement(el) {
+    this.editElement = el;
+  };
+
+  _proto.handleInput = function handleInput(e) {
+    var text = e.target.innerText.replace('\feff ', '');
+    this.lastCursorOffset = getCursorOffset(text.length);
+    var t = this.getProcessedValue(text);
+    this.props.onFilter(t);
+  } // eslint-disable-next-line class-methods-use-this
+  ;
+
+  _proto.handlePaste = function handlePaste(e) {
+    preventPasteFile(e);
+  };
+
+  _proto.render = function render() {
+    var focus = this.props.focus;
+    var props = {
+      className: cascaderClass('input', !focus && 'ellipsis'),
+      ref: this.bindElement,
+      key: 'input',
+      onInput: this.handleInput,
+      contentEditable: focus || this.state.editable,
+      onFocus: handleFocus,
+      onPaste: this.handlePaste
+    };
+    return React.createElement("span", props);
+  };
+
+  return FilterInput;
+}(Component);
+
+export default FilterInput;

package/esm/Cascader/List.d.ts

@@ -0,0 +1,15 @@
+import { Component } from 'react';
+import { CascaderListProps } from './Props';
+import { KeygenResult } from '../@types/common';
+declare class List<U, T extends any[]> extends Component<CascaderListProps<U, T>> {
+    static defaultProps: {
+        id: string;
+        parentId: string;
+        text: {};
+    };
+    constructor(props: CascaderListProps<U, T>);
+    getKey(data: U, index: number): KeygenResult;
+    getText(key: string): any;
+    render(): JSX.Element;
+}
+export default List;

package/esm/Cascader/List.js

@@ -0,0 +1,85 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { Component } from 'react';
+import { cascaderClass } from './styles';
+import Node from './Node';
+import { getLocale } from '../locale';
+import { getDirectionClass } from '../utils/classname';
+var DefaultProps = {
+  id: '',
+  parentId: '',
+  text: {}
+};
+
+var List =
+/*#__PURE__*/
+function (_Component) {
+  _inheritsLoose(List, _Component);
+
+  function List(props) {
+    var _this;
+
+    _this = _Component.call(this, props) || this;
+    _this.state = {};
+    _this.getText = _this.getText.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
+  }
+
+  var _proto = List.prototype;
+
+  _proto.getKey = function getKey(data, index) {
+    var _this$props = this.props,
+        keygen = _this$props.keygen,
+        parentId = _this$props.parentId;
+    if (typeof keygen === 'function') return keygen(data, parentId);
+
+    if (keygen && typeof keygen === 'string') {
+      var key = data[keygen];
+
+      if (typeof key === 'string' || typeof key === 'number') {
+        return key;
+      }
+
+      console.error('key must be number or string but get', key);
+    }
+
+    return parentId + (parentId ? ',' : '') + index;
+  };
+
+  _proto.getText = function getText(key) {
+    return (this.props.text || {})[key] || getLocale(key);
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    var _this$props2 = this.props,
+        data = _this$props2.data,
+        other = _objectWithoutPropertiesLoose(_this$props2, ["data"]);
+
+    if (!data || data.length === 0) return React.createElement("span", {
+      className: cascaderClass('no-data')
+    }, this.getText('noData'));
+    return React.createElement("div", {
+      className: cascaderClass(getDirectionClass('list'))
+    }, data.map(function (d, i) {
+      var id = _this2.getKey(d, i);
+
+      return React.createElement(Node, _extends({}, other, {
+        key: id,
+        active: other.id === id,
+        id: id,
+        data: d
+      }));
+    }));
+  };
+
+  return List;
+}(Component);
+
+_defineProperty(List, "defaultProps", DefaultProps);
+
+export default List;

package/esm/Cascader/Node.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { CascaderBaseValue, NodeProps } from './Props';
+import { PureComponent } from '../component';
+interface NodeState {
+    loading: boolean;
+}
+declare class Node<U, T extends CascaderBaseValue> extends PureComponent<NodeProps<U, T>, NodeState> {
+    handleUpdate: Function;
+    constructor(props: NodeProps<U, T>);
+    componentWillUnmount(): void;
+    checkDisabled(): boolean;
+    handleClick(e: MouseEvent): void;
+    handlePathChange(): void;
+    handleChange(_: any, checked: boolean): void;
+    handleSelect(e: MouseEvent): void;
+    renderContent(): React.ReactNode;
+    render(): JSX.Element;
+}
+export default Node;

package/esm/Cascader/Node.js

@@ -0,0 +1,182 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import Spin from '../Spin';
+import { isRTL } from '../config';
+import Caret from '../icons/Caret';
+import Checkbox from '../Checkbox';
+import { cascaderClass } from './styles';
+import { PureComponent } from '../component';
+import { CHANGE_TOPIC } from '../Datum/types';
+import { getParent } from '../utils/dom/element';
+import { checkinputClass } from '../Checkbox/styles';
+import { getDirectionClass } from '../utils/classname';
+var checkBoxStyle = {
+  marginRight: 8,
+  marginTop: -1,
+  verticalAlign: 'top'
+};
+
+var Node =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Node, _PureComponent);
+
+  function Node(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleUpdate", void 0);
+
+    _this.state = {
+      loading: false
+    };
+    _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleChange = _this.handleChange.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handlePathChange = _this.handlePathChange.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleSelect = _this.handleSelect.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleUpdate = _this.forceUpdate.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+
+    _this.props.datum.subscribe(CHANGE_TOPIC, _this.handleUpdate);
+
+    return _this;
+  }
+
+  var _proto = Node.prototype;
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    _PureComponent.prototype.componentWillUnmount.call(this);
+
+    this.props.datum.unsubscribe(CHANGE_TOPIC, this.handleUpdate);
+  };
+
+  _proto.checkDisabled = function checkDisabled() {
+    var _this$props = this.props,
+        datum = _this$props.datum,
+        id = _this$props.id;
+    return datum.isDisabled(id);
+  };
+
+  _proto.handleClick = function handleClick(e) {
+    var _this$props2 = this.props,
+        id = _this$props2.id,
+        data = _this$props2.data,
+        path = _this$props2.path,
+        onChange = _this$props2.onChange,
+        onPathChange = _this$props2.onPathChange,
+        loader = _this$props2.loader,
+        multiple = _this$props2.multiple,
+        datum = _this$props2.datum;
+    if (onPathChange) onPathChange(id, data, path, true);
+
+    if (!multiple) {
+      if (onChange && path) onChange([].concat(path, [id]), datum.getDataById(id));
+    }
+
+    if (loader && !this.state.loading && !getParent(e.target, "." + checkinputClass('_'))) {
+      this.setState({
+        loading: true
+      });
+      loader(id, data);
+    }
+  };
+
+  _proto.handlePathChange = function handlePathChange() {
+    var _this$props3 = this.props,
+        id = _this$props3.id,
+        data = _this$props3.data,
+        path = _this$props3.path,
+        onPathChange = _this$props3.onPathChange; // if (active) return
+
+    if (onPathChange) onPathChange(id, data, path);
+  };
+
+  _proto.handleChange = function handleChange(_, checked) {
+    var _this$props4 = this.props,
+        datum = _this$props4.datum,
+        id = _this$props4.id,
+        onChange = _this$props4.onChange;
+    datum.set(id, checked ? 1 : 0);
+    if (onChange) onChange(datum.getValue(), datum.getDataById(id));
+  };
+
+  _proto.handleSelect = function handleSelect(e) {
+    var _this$props5 = this.props,
+        datum = _this$props5.datum,
+        id = _this$props5.id;
+    if (getParent(e.target, "." + checkinputClass('_'))) return;
+    var checked = datum.getChecked(id);
+    this.handleChange(null, !checked);
+  };
+
+  _proto.renderContent = function renderContent() {
+    var _this$props6 = this.props,
+        id = _this$props6.id,
+        active = _this$props6.active,
+        data = _this$props6.data,
+        renderItem = _this$props6.renderItem;
+    var render = typeof renderItem === 'function' ? renderItem : function (d) {
+      return d[renderItem];
+    };
+    return render(data, active, id);
+  };
+
+  _proto.render = function render() {
+    var _this$props7 = this.props,
+        active = _this$props7.active,
+        data = _this$props7.data,
+        multiple = _this$props7.multiple,
+        datum = _this$props7.datum,
+        id = _this$props7.id,
+        loader = _this$props7.loader,
+        expandTrigger = _this$props7.expandTrigger,
+        childrenKey = _this$props7.childrenKey;
+    var loading = this.state.loading;
+    var disabled = this.checkDisabled();
+    var children = data[childrenKey];
+    var hasChildren = children && children.length > 0;
+    var mayChildren = loader && !loading && children === undefined;
+    var className = cascaderClass('node', active && 'active', disabled && 'disabled', hasChildren && 'has-children', mayChildren && 'may-be-children');
+    var style = {};
+    var events = {};
+
+    if (!disabled && (expandTrigger !== 'hover-only' || !children || children.length === 0)) {
+      events.onClick = this.handleClick;
+      style.cursor = 'pointer';
+    }
+
+    if (expandTrigger === 'hover' || expandTrigger === 'hover-only') {
+      events.onMouseEnter = this.handlePathChange;
+      if (multiple) events.onClick = this.handleSelect;
+    }
+
+    var caret = React.createElement("span", {
+      className: cascaderClass(getDirectionClass('caret'))
+    }, React.createElement(Caret, null));
+
+    if (isRTL() && checkBoxStyle.marginRight !== 0) {
+      checkBoxStyle.marginRight = 0;
+    }
+
+    return React.createElement("div", _extends({
+      className: className,
+      style: style
+    }, events), multiple && React.createElement(Checkbox, {
+      checked: datum.getChecked(id),
+      disabled: disabled,
+      onChange: this.handleChange,
+      style: checkBoxStyle
+    }), this.renderContent(), loading && children === undefined && React.createElement(Spin, {
+      className: cascaderClass('loading'),
+      size: 10,
+      name: "ring"
+    }), (hasChildren || mayChildren) && caret);
+  };
+
+  return Node;
+}(PureComponent);
+
+export default Node;