shineout 1.12.2 → 1.12.3

package/esm/Transfer/item.js

@@ -0,0 +1,71 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import React from 'react';
+import classnames from 'classnames';
+import Checkbox from '../Checkbox';
+import { PureComponent } from '../component';
+import { transferClass } from './styles';
+import Context from './context';
+
+var Item =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Item, _PureComponent);
+
+  function Item(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+    _this.check = _this.check.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
+  }
+
+  var _proto = Item.prototype;
+
+  _proto.check = function check(c) {
+    var _this$props = this.props,
+        index = _this$props.index,
+        selecteds = _this$props.selecteds,
+        checkKey = _this$props.checkKey,
+        setSelecteds = _this$props.setSelecteds;
+
+    if (c) {
+      setSelecteds(index, [].concat(selecteds[index], [checkKey]));
+    } else {
+      setSelecteds(index, selecteds[index].filter(function (ch) {
+        return ch !== checkKey;
+      }));
+    }
+  };
+
+  _proto.render = function render() {
+    var _this$props2 = this.props,
+        content = _this$props2.content,
+        selecteds = _this$props2.selecteds,
+        checkKey = _this$props2.checkKey,
+        index = _this$props2.index,
+        disabled = _this$props2.disabled,
+        itemClass = _this$props2.itemClass;
+    return React.createElement("div", {
+      className: classnames(transferClass('item', disabled && 'item-disabled'), itemClass)
+    }, React.createElement(Checkbox, {
+      className: transferClass('item-check'),
+      onChange: this.check,
+      disabled: disabled,
+      checked: selecteds[index].indexOf(checkKey) > -1
+    }, content));
+  };
+
+  return Item;
+}(PureComponent);
+
+export default (function (prop) {
+  return React.createElement(Context.Consumer, null, function (value) {
+    return React.createElement(Item, _extends({}, prop, {
+      selecteds: value.selecteds,
+      setSelecteds: value.setSelecteds,
+      itemClass: value.itemClass
+    }));
+  });
+});

package/esm/Transfer/select.d.ts

@@ -0,0 +1,3 @@
+import { BaseTransferProps } from './Props';
+import { KeygenResult } from '../@types/common';
+export default function splitSelecteds<DataItem, Value extends any[]>(selecteds: KeygenResult[] | undefined, props: BaseTransferProps<DataItem, Value>): [KeygenResult[], KeygenResult[]] | null;

package/esm/Transfer/select.js

@@ -0,0 +1,20 @@
+import { getKey } from '../utils/uid';
+export default function splitSelecteds(selecteds, props) {
+  if (!selecteds) return null;
+  var data = props.data,
+      keygen = props.keygen,
+      datum = props.datum;
+  var left = [];
+  var right = [];
+  selecteds.forEach(function (s) {
+    var v = data.find(function (d, i) {
+      return getKey(d, keygen, i) === s;
+    });
+
+    if (v) {
+      if (datum.check(v)) right.push(s);else left.push(s);
+    }
+  });
+  var result = [left, right];
+  return result;
+}

package/esm/Transfer/styles/index.d.ts

@@ -0,0 +1,2 @@
+import '../../styles/normalize.less';
+export declare const transferClass: (...args: any) => string;

package/esm/Transfer/styles/index.js

@@ -0,0 +1,4 @@
+import '../../styles/normalize.less';
+import transferLess from './transfer.less';
+import genaration from '../../utils/classname';
+export var transferClass = genaration(transferLess, 'transfer');

package/esm/Transfer/styles/transfer.less

@@ -0,0 +1,123 @@
+@import '../../styles/variables.less';
+@import '../../styles/themes/@{so-theme}.less';
+
+@transfer-prefix: ~'@{so-prefix}-transfer';
+@checkinput-prefix: ~'@{so-prefix}-checkinput';
+
+.@{transfer-prefix} {
+  display: flex;
+  align-items: stretch;
+
+  &-card {
+    display: inline-block;
+    min-width: 200px;
+    // width: auto;
+
+    &-header {
+      padding: 8px 12px;
+      display: flex;
+      justify-content: space-between;
+      align-items: stretch;
+
+      &-title {
+        padding: 2px 0 0 0;
+      }
+    }
+
+    &-body {
+      padding: 2px 0;
+      overflow: hidden;
+      height: 180px;
+      z-index: 1;
+
+      .@{transfer-prefix}-body-container {
+        box-sizing: border-box;
+        height: 100%;
+      }
+    }
+
+    &-footer {
+      padding: 0;
+    }
+  }
+
+  &-item {
+    width: 100%;
+    cursor: pointer;
+
+    &-check {
+      width: 100%;
+      margin-right: 0;
+      padding: 6px 0 6px 12px;
+      i.@{checkinput-prefix}-indicator + span {
+        vertical-align: top;
+      }
+    }
+
+    &:hover {
+      background-color: var(--select-option-hover-bg, #f5f5f5);
+    }
+
+    &-disabled {
+      color: var(--gray-500, #adb5bd);
+
+      &:hover {
+        background-color: transparent;
+        color: var(--gray-500, #adb5bd);
+      }
+    }
+  }
+
+  &-btns {
+    padding: 0 8px;
+    display: flex;
+    align-items: center;
+
+    &-bottom {
+      margin-bottom: 4px;
+    }
+
+    &-button {
+      color: #fff;
+      display: inline-flex;
+
+      > svg {
+        height: 18px;
+        width: 10px;
+        fill: #fff;
+      }
+
+      &[disabled] > svg {
+        fill: rgba(0,0,0,0.25);
+      }
+    }
+  }
+
+  &-filter {
+    padding: 10px 12px 8px;
+  }
+
+  &-empty {
+    position: absolute;
+    text-align: center;
+    width: 100%;
+    top: 50%;
+    color: @gray-500;
+    transform: translateY(-50%)
+  }
+
+
+  &.@{transfer-prefix}-rtl {
+    direction: rtl;
+    text-align: right;
+
+    .@{transfer-prefix}-btns-button > svg {
+      transform: rotate(180deg);
+    }
+
+    .@{transfer-prefix}-item-check {
+      margin-left: 0;
+      padding: 6px 12px 6px 0;
+    }
+  }
+}

package/esm/Tree/Checkbox.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { PureComponent } from '../component';
+import { CheckboxProps } from './Props';
+import { CheckValueType } from '../Checkbox/Props';
+export default class TreeCheckbox<DataItem, Value extends any[]> extends PureComponent<CheckboxProps<DataItem, Value>> {
+    constructor(props: CheckboxProps<DataItem, Value>);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    checkDisabled(): boolean;
+    handleChange(_: any, checked: CheckValueType): void;
+    render(): JSX.Element;
+}

package/esm/Tree/Checkbox.js

@@ -0,0 +1,76 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import React from 'react';
+import { PureComponent } from '../component';
+import Checkbox from '../Checkbox/Checkbox';
+import { treeClass } from './styles';
+import { getDirectionClass } from '../utils/classname';
+
+var TreeCheckbox =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(TreeCheckbox, _PureComponent);
+
+  function TreeCheckbox(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+    _this.handleChange = _this.handleChange.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    props.datum.bind(props.id, _this.forceUpdate.bind(_assertThisInitialized(_assertThisInitialized(_this))));
+    return _this;
+  }
+
+  var _proto = TreeCheckbox.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    _PureComponent.prototype.componentDidMount.call(this); // When dragging a node,
+    // it will first trigger the constructor of the new node,
+    // then trigger the willUnmount of the old node,
+    // and finally trigger the didMount of the new node,
+    // the old node will unload the update event, so bind it here again
+
+
+    this.props.datum.bind(this.props.id, this.forceUpdate.bind(this));
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    _PureComponent.prototype.componentWillUnmount.call(this);
+
+    this.props.datum.unbind(this.props.id);
+  };
+
+  _proto.checkDisabled = function checkDisabled() {
+    var _this$props = this.props,
+        datum = _this$props.datum,
+        id = _this$props.id,
+        disabled = _this$props.disabled;
+    if (disabled) return true;
+    return datum.isDisabled(id);
+  };
+
+  _proto.handleChange = function handleChange(_, checked) {
+    var _this$props2 = this.props,
+        datum = _this$props2.datum,
+        id = _this$props2.id,
+        onChange = _this$props2.onChange;
+    datum.set(id, checked ? 1 : 0);
+    onChange(datum.getValue(), id);
+  };
+
+  _proto.render = function render() {
+    var _this$props3 = this.props,
+        datum = _this$props3.datum,
+        id = _this$props3.id;
+    var checked = datum.getChecked(id);
+    return React.createElement(Checkbox, {
+      checked: checked,
+      disabled: this.checkDisabled(),
+      onChange: this.handleChange,
+      className: treeClass(getDirectionClass('checkbox'))
+    });
+  };
+
+  return TreeCheckbox;
+}(PureComponent);
+
+export { TreeCheckbox as default };

package/esm/Tree/Content.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { PureComponent } from '../component';
+import { ContentProps } from './Props';
+declare class Content<DataItem, Value extends any[]> extends PureComponent<ContentProps<DataItem, Value>> {
+    constructor(props: ContentProps<DataItem, Value>);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    handleNodeClick(): void;
+    handleUpdate(): void;
+    handleNodeExpand(): void;
+    handleIndicatorClick(): void;
+    renderNode(): React.ReactNode;
+    renderIndicator(): JSX.Element | null;
+    render(): JSX.Element;
+}
+export default Content;

package/esm/Tree/Content.js

@@ -0,0 +1,158 @@
+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 { PureComponent } from '../component';
+import { treeClass } from './styles';
+import Spin from '../Spin';
+import Checkbox from './Checkbox';
+import { CHANGE_TOPIC } from '../Datum/types';
+var loading = React.createElement("span", {
+  className: treeClass('icon-loading')
+}, React.createElement(Spin, {
+  name: "ring",
+  size: 12
+}));
+
+var Content =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Content, _PureComponent);
+
+  function Content(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+    _this.handleNodeClick = _this.handleNodeClick.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleNodeExpand = _this.handleNodeExpand.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleIndicatorClick = _this.handleIndicatorClick.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleUpdate = _this.handleUpdate.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
+  }
+
+  var _proto = Content.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    _PureComponent.prototype.componentDidMount.call(this);
+
+    var datum = this.props.datum;
+    datum.subscribe(CHANGE_TOPIC, this.handleUpdate);
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    _PureComponent.prototype.componentWillUnmount.call(this);
+
+    var datum = this.props.datum;
+    datum.unsubscribe(CHANGE_TOPIC, this.handleUpdate);
+  };
+
+  _proto.handleNodeClick = function handleNodeClick() {
+    var _this$props = this.props,
+        data = _this$props.data,
+        id = _this$props.id,
+        parentClickExpand = _this$props.parentClickExpand,
+        childrenKey = _this$props.childrenKey;
+    var children = data[childrenKey];
+    var hasChildren = children && children.length > 0;
+
+    if (hasChildren && parentClickExpand) {
+      this.handleIndicatorClick();
+    } else {
+      this.props.onNodeClick(data, id);
+    }
+  };
+
+  _proto.handleUpdate = function handleUpdate() {
+    this.forceUpdate();
+  };
+
+  _proto.handleNodeExpand = function handleNodeExpand() {
+    var _this$props2 = this.props,
+        data = _this$props2.data,
+        childrenKey = _this$props2.childrenKey,
+        doubleClickExpand = _this$props2.doubleClickExpand;
+    if (!doubleClickExpand) return;
+    var children = data[childrenKey];
+    var hasChildren = children && children.length > 0;
+    if (hasChildren) this.handleIndicatorClick();
+  };
+
+  _proto.handleIndicatorClick = function handleIndicatorClick() {
+    var _this$props3 = this.props,
+        id = _this$props3.id,
+        data = _this$props3.data,
+        onToggle = _this$props3.onToggle,
+        loader = _this$props3.loader,
+        childrenKey = _this$props3.childrenKey,
+        setFetching = _this$props3.setFetching;
+    onToggle();
+    if (data[childrenKey] !== undefined) return;
+    setFetching(true);
+    if (loader) loader(id, data);
+  };
+
+  _proto.renderNode = function renderNode() {
+    var _this$props4 = this.props,
+        id = _this$props4.id,
+        active = _this$props4.active,
+        data = _this$props4.data,
+        renderItem = _this$props4.renderItem,
+        expanded = _this$props4.expanded;
+    var render = typeof renderItem === 'function' ? renderItem : function (d) {
+      return d[renderItem];
+    };
+    return render(data, expanded, active, id);
+  };
+
+  _proto.renderIndicator = function renderIndicator() {
+    var _this$props5 = this.props,
+        data = _this$props5.data,
+        expanded = _this$props5.expanded,
+        expandIcons = _this$props5.expandIcons,
+        loader = _this$props5.loader,
+        childrenKey = _this$props5.childrenKey,
+        fetching = _this$props5.fetching,
+        iconClass = _this$props5.iconClass;
+    var children = data[childrenKey];
+    var icon = expandIcons ? expandIcons[expanded ? 1 : 0] : React.createElement("span", {
+      className: treeClass('default-icon')
+    });
+    var indicator = React.createElement("a", {
+      onClick: this.handleIndicatorClick,
+      className: classnames(treeClass("icon-" + (expanded ? 'sub' : 'plus')), iconClass)
+    }, typeof icon === 'function' ? icon(data) : icon);
+    if (children && children.length > 0) return indicator;
+    if (Array.isArray(children) || children === null) return null;
+    if (fetching && !children) return loading;
+    if (loader && !fetching) return indicator;
+    return null;
+  };
+
+  _proto.render = function render() {
+    var _this$props6 = this.props,
+        data = _this$props6.data,
+        onToggle = _this$props6.onToggle,
+        onChange = _this$props6.onChange,
+        expanded = _this$props6.expanded,
+        onDragOver = _this$props6.onDragOver,
+        other = _objectWithoutPropertiesLoose(_this$props6, ["data", "onToggle", "onChange", "expanded", "onDragOver"]);
+
+    return React.createElement("div", {
+      onDragOver: onDragOver
+    }, this.renderIndicator(), React.createElement("div", {
+      className: treeClass('content')
+    }, onChange && React.createElement(Checkbox, _extends({}, other, {
+      onChange: onChange
+    })), React.createElement("div", {
+      className: treeClass('text'),
+      onClick: this.handleNodeClick,
+      onDoubleClick: this.handleNodeExpand
+    }, this.renderNode())));
+  };
+
+  return Content;
+}(PureComponent);
+
+export default Content;

package/esm/Tree/List.d.ts

@@ -0,0 +1,21 @@
+import { PureComponent } from 'react';
+import { ListProps } from './Props';
+import { KeygenResult } from '../@types/common';
+declare class List<DataItem, Value extends any[]> extends PureComponent<ListProps<DataItem, Value>> {
+    static defaultProps: {
+        id: string;
+        line: boolean;
+        className: string;
+    };
+    bindLines: (el: HTMLDivElement) => void;
+    bindList: (el: HTMLDivElement) => void;
+    lines: HTMLDivElement;
+    element: HTMLDivElement;
+    hasExpanded: boolean;
+    constructor(props: ListProps<DataItem, Value>);
+    getKey(data: DataItem, index: number): KeygenResult | DataItem[import("../@types/common").LiteralUnion<DataItem>];
+    bindElement(name: 'lines' | 'element', el: HTMLDivElement): void;
+    renderNode(child: DataItem, index: number): JSX.Element;
+    render(): JSX.Element | null;
+}
+export default List;

package/esm/Tree/List.js

@@ -0,0 +1,107 @@
+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, { PureComponent } from 'react';
+import classnames from 'classnames';
+import { treeClass } from './styles';
+import { empty } from '../utils/func';
+import Node from './Node';
+
+var List =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(List, _PureComponent);
+
+  function List(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "bindLines", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "bindList", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "lines", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "element", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "hasExpanded", void 0);
+
+    _this.bindLines = _this.bindElement.bind(_assertThisInitialized(_assertThisInitialized(_this)), 'lines');
+    _this.bindList = _this.bindElement.bind(_assertThisInitialized(_assertThisInitialized(_this)), 'element');
+    _this.renderNode = _this.renderNode.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
+  }
+
+  var _proto = List.prototype;
+
+  _proto.getKey = function getKey(data, index) {
+    var _this$props = this.props,
+        _this$props$id = _this$props.id,
+        id = _this$props$id === void 0 ? '' : _this$props$id,
+        keygen = _this$props.keygen;
+    if (typeof keygen === 'function') return keygen(data, id);
+    if (keygen) return data[keygen];
+    return id + (id ? ',' : '') + index;
+  };
+
+  _proto.bindElement = function bindElement(name, el) {
+    this[name] = el;
+  };
+
+  _proto.renderNode = function renderNode(child, index) {
+    var _this$props2 = this.props,
+        data = _this$props2.data,
+        isRoot = _this$props2.isRoot,
+        expanded = _this$props2.expanded,
+        keygen = _this$props2.keygen,
+        line = _this$props2.line,
+        className = _this$props2.className,
+        style = _this$props2.style,
+        other = _objectWithoutPropertiesLoose(_this$props2, ["data", "isRoot", "expanded", "keygen", "line", "className", "style"]);
+
+    var id = this.getKey(child, index);
+    return React.createElement(Node, _extends({}, other, {
+      data: child,
+      id: id,
+      index: index,
+      key: id,
+      line: line,
+      keygen: keygen,
+      listComponent: List
+    }));
+  };
+
+  _proto.render = function render() {
+    var _this$props3 = this.props,
+        data = _this$props3.data,
+        expanded = _this$props3.expanded,
+        className = _this$props3.className,
+        style = _this$props3.style,
+        childrenClassName = _this$props3.childrenClassName;
+    if (!expanded && !this.hasExpanded) return null;
+    this.hasExpanded = true;
+    var newStyle = Object.assign({}, style, {
+      display: expanded ? 'block' : 'none'
+    });
+    return React.createElement("div", {
+      className: classnames(className, childrenClassName),
+      ref: this.bindList,
+      onDrop: empty,
+      onDragOver: empty,
+      style: newStyle
+    }, data.map(this.renderNode));
+  };
+
+  return List;
+}(PureComponent);
+
+_defineProperty(List, "defaultProps", {
+  id: '',
+  line: true,
+  className: treeClass('children')
+});
+
+export default List;

package/esm/Tree/Node.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { PureComponent } from '../component';
+import { NodeProps } from './Props';
+interface NodeState {
+    active: boolean;
+    expanded: boolean;
+    fetching: boolean;
+}
+declare class Node<DataItem, Value extends any[]> extends PureComponent<NodeProps<DataItem, Value>, NodeState> {
+    element: HTMLDivElement;
+    dragImage: HTMLDivElement;
+    constructor(props: NodeProps<DataItem, Value>);
+    componentWillUnmount(): void;
+    setFetching(fetching: boolean): void;
+    update(key: keyof NodeState, value: boolean): void;
+    bindElement(el: HTMLDivElement): void;
+    isLeaf(): boolean;
+    handleToggle(): void;
+    handleDragStart(event: React.DragEvent): void;
+    handleDragOver(e: React.DragEvent<HTMLDivElement>): void;
+    handleDragEnd(): void;
+    render(): JSX.Element;
+}
+export default Node;