shineout 1.12.2 → 1.12.3

package/esm/Tree/Tree.js

@@ -0,0 +1,344 @@
+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 immer from 'immer';
+import { PureComponent } from '../component';
+import DatumTree from '../Datum/Tree';
+import Root from './Root';
+var DefaultProps = {
+  data: [],
+  defaultExpanded: [],
+  defaultValue: [],
+  mode: 0,
+  dataUpdate: true,
+  childrenKey: 'children',
+  dragImageStyle: {}
+};
+
+var Tree =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Tree, _PureComponent);
+
+  function Tree(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleDragImageSelector", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleClidrenClass", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleLeafClass", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "nodes", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "datum", void 0);
+
+    _this.state = {
+      active: null
+    };
+    _this.nodes = new Map();
+    _this.datum = props.datum || new DatumTree({
+      data: props.data,
+      loader: props.loader,
+      keygen: props.keygen,
+      mode: props.mode,
+      onChange: props.onChange,
+      value: props.value || props.defaultValue,
+      disabled: typeof props.disabled === 'function' ? props.disabled : undefined,
+      childrenKey: props.childrenKey || DefaultProps.childrenKey,
+      unmatch: props.unmatch
+    });
+    _this.handleDrop = _this.handleDrop.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleToggle = _this.handleToggle.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleNodeClick = _this.handleNodeClick.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.bindNode = _this.bindNode.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.unbindNode = _this.unbindNode.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleDragImageSelector = _this.handleProps.bind(_assertThisInitialized(_assertThisInitialized(_this)), 'dragImageSelector');
+    _this.handleClidrenClass = _this.handleProps.bind(_assertThisInitialized(_assertThisInitialized(_this)), 'childrenClass');
+    _this.handleLeafClass = _this.handleProps.bind(_assertThisInitialized(_assertThisInitialized(_this)), 'leafClass');
+
+    _this.bindDatum();
+
+    return _this;
+  }
+
+  var _proto = Tree.prototype;
+
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    if (prevProps.expanded !== this.props.expanded) {
+      this.handleExpanded(this.props.expanded);
+    }
+
+    if (prevProps.active !== this.props.active) {
+      this.handleActive(this.props.active);
+    }
+
+    if (this.props.onChange || this.props.onDrop || this.props.radioUpdate) {
+      this.datum.mode = this.props.mode;
+      if (prevProps.value !== this.props.value) this.datum.setValue(this.props.value || []);
+      if (prevProps.data !== this.props.data && this.props.dataUpdate) this.datum.setData(this.props.data);
+    }
+  };
+
+  _proto.getActive = function getActive() {
+    var active = this.props.active;
+    return active === undefined ? this.state.active : active;
+  };
+
+  _proto.bindDatum = function bindDatum() {
+    var bindDatum = this.props.bindDatum;
+    if (bindDatum) bindDatum(this.datum);
+  };
+
+  _proto.bindNode = function bindNode(id, update) {
+    /*
+    if (this.nodes.has(id)) {
+      console.error(`Node with '${id}' key has already been added. Tree node's key must be unique.`)
+      return {}
+    }
+    */
+    this.nodes.set(id, update);
+    var active = this.props.active === id;
+    var expanded = this.props.expanded || this.props.defaultExpanded;
+
+    if (this.props.defaultExpandAll) {
+      return {
+        active: active,
+        expanded: true
+      };
+    }
+
+    return {
+      active: active,
+      expanded: !!(expanded && expanded.indexOf(id) >= 0)
+    };
+  };
+
+  _proto.unbindNode = function unbindNode(id) {
+    this.nodes.delete(id);
+  };
+
+  _proto.handleExpanded = function handleExpanded(expanded) {
+    var temp = new Set(expanded);
+
+    for (var _iterator = this.nodes, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
+      var _ref;
+
+      if (_isArray) {
+        if (_i >= _iterator.length) break;
+        _ref = _iterator[_i++];
+      } else {
+        _i = _iterator.next();
+        if (_i.done) break;
+        _ref = _i.value;
+      }
+
+      var _ref2 = _ref,
+          id = _ref2[0],
+          update = _ref2[1];
+      update('expanded', temp.has(id));
+    }
+  };
+
+  _proto.handleActive = function handleActive(active) {
+    for (var _iterator2 = this.nodes, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
+      var _ref3;
+
+      if (_isArray2) {
+        if (_i2 >= _iterator2.length) break;
+        _ref3 = _iterator2[_i2++];
+      } else {
+        _i2 = _iterator2.next();
+        if (_i2.done) break;
+        _ref3 = _i2.value;
+      }
+
+      var _ref4 = _ref3,
+          id = _ref4[0],
+          update = _ref4[1];
+      update('active', id === active);
+    }
+  };
+
+  _proto.handleNodeClick = function handleNodeClick(node, id) {
+    var _this2 = this;
+
+    var _this$props = this.props,
+        active = _this$props.active,
+        onClick = _this$props.onClick;
+
+    if (active === undefined) {
+      this.setState({
+        active: id
+      }, function () {
+        _this2.handleActive(id);
+      });
+    }
+
+    if (onClick) {
+      onClick(node, id, this.datum.getPath(id));
+    }
+  };
+
+  _proto.handleToggle = function handleToggle(id) {
+    var _this$props2 = this.props,
+        expanded = _this$props2.expanded,
+        onExpand = _this$props2.onExpand;
+    var newExpanded;
+
+    if (!expanded && onExpand) {
+      onExpand([id]);
+      return;
+    }
+
+    var expandedArr = expanded;
+
+    if (expandedArr.indexOf(id) >= 0) {
+      newExpanded = expandedArr.filter(function (e) {
+        return e !== id;
+      });
+    } else {
+      newExpanded = [].concat(expandedArr, [id]);
+    }
+
+    if (onExpand) onExpand(newExpanded);
+  };
+
+  _proto.handleDrop = function handleDrop(id, targetId, position) {
+    var _this3 = this;
+
+    var childrenKey = this.props.childrenKey;
+    var current = this.datum.getPath(id);
+    var target = this.datum.getPath(targetId);
+    var data = immer(this.props.data, function (draft) {
+      var node = draft;
+      var temp;
+
+      var removeNode = function removeNode() {};
+
+      var offset = 0;
+      current.indexPath.forEach(function (p, i) {
+        if (i < current.indexPath.length - 1) {
+          node = node[p][childrenKey];
+        } else {
+          temp = node;
+
+          removeNode = function removeNode() {
+            return temp.splice(p, 1)[0];
+          };
+
+          node = node[p];
+        }
+      });
+      var tnode = draft;
+      target.indexPath.forEach(function (p, i) {
+        if (i < target.indexPath.length - 1) {
+          tnode = tnode[p][childrenKey];
+        } else if (tnode === temp) {
+          // same parent
+          removeNode();
+
+          if (current.index <= target.index) {
+            offset = -1;
+          }
+
+          removeNode = function removeNode() {};
+        }
+      });
+
+      if (position === -1) {
+        tnode = tnode[target.index + offset];
+        if (!Array.isArray(tnode[childrenKey])) tnode[childrenKey] = [];
+        tnode[childrenKey].push(node);
+        position = tnode[childrenKey].length - 1;
+
+        var update = _this3.nodes.get(targetId);
+
+        if (update) update('expanded', true);
+      } else {
+        tnode.splice(position + offset, 0, node);
+        targetId = target.path[target.path.length - 1];
+      }
+
+      removeNode();
+    });
+
+    if (this.props.onDrop) {
+      this.props.onDrop(data, id, targetId, position);
+    }
+  };
+
+  _proto.handleProps = function handleProps(key) {
+    return this.props[key];
+  };
+
+  _proto.render = function render() {
+    var _this$props3 = this.props,
+        className = _this$props3.className,
+        style = _this$props3.style,
+        data = _this$props3.data,
+        disabled = _this$props3.disabled,
+        line = _this$props3.line,
+        keygen = _this$props3.keygen,
+        onExpand = _this$props3.onExpand,
+        onChange = _this$props3.onChange,
+        renderItem = _this$props3.renderItem,
+        _this$props3$mode = _this$props3.mode,
+        mode = _this$props3$mode === void 0 ? DefaultProps.mode : _this$props3$mode,
+        onDrop = _this$props3.onDrop,
+        loader = _this$props3.loader,
+        parentClickExpand = _this$props3.parentClickExpand,
+        childrenKey = _this$props3.childrenKey,
+        expandIcons = _this$props3.expandIcons,
+        _this$props3$dragImag = _this$props3.dragImageStyle,
+        dragImageStyle = _this$props3$dragImag === void 0 ? DefaultProps.dragImageStyle : _this$props3$dragImag,
+        dragImageSelector = _this$props3.dragImageSelector,
+        childrenClass = _this$props3.childrenClass,
+        leafClass = _this$props3.leafClass,
+        dragHoverExpand = _this$props3.dragHoverExpand,
+        doubleClickExpand = _this$props3.doubleClickExpand,
+        iconClass = _this$props3.iconClass,
+        nodeClass = _this$props3.nodeClass,
+        dragSibling = _this$props3.dragSibling;
+    var onToggle = onExpand ? this.handleToggle : undefined;
+    return React.createElement(Root, {
+      className: className,
+      data: data,
+      datum: this.datum,
+      disabled: typeof disabled !== 'function' && !!disabled,
+      bindNode: this.bindNode,
+      keygen: keygen,
+      line: line,
+      loader: loader,
+      mode: mode,
+      unbindNode: this.unbindNode,
+      onChange: onChange,
+      onDrop: onDrop && this.handleDrop,
+      onToggle: onToggle,
+      onNodeClick: this.handleNodeClick,
+      renderItem: renderItem,
+      style: style,
+      parentClickExpand: parentClickExpand,
+      childrenKey: childrenKey,
+      expandIcons: expandIcons,
+      dragImageStyle: dragImageStyle,
+      dragImageSelector: typeof dragImageSelector === 'function' ? dragImageSelector : this.handleDragImageSelector,
+      childrenClass: typeof childrenClass === 'function' ? childrenClass : this.handleClidrenClass,
+      leafClass: typeof leafClass === 'function' ? leafClass : this.handleLeafClass,
+      dragHoverExpand: dragHoverExpand,
+      doubleClickExpand: doubleClickExpand,
+      iconClass: iconClass,
+      nodeClass: nodeClass,
+      dragSibling: dragSibling
+    });
+  };
+
+  return Tree;
+}(PureComponent);
+
+_defineProperty(Tree, "defaultProps", DefaultProps);
+
+export default Tree;

package/esm/Tree/index.d.ts

@@ -0,0 +1,7 @@
+import Tree from './Tree';
+declare const TreeExport: typeof Tree & {
+    displayName: string;
+    Select: typeof import("./Props").TreeField;
+    Field: typeof import("./Props").TreeField;
+};
+export default TreeExport;

package/esm/Tree/index.js

@@ -0,0 +1,9 @@
+import Tree from './Tree';
+import inputable from '../Form/inputable';
+var Select = inputable(Tree);
+var TreeExport = Object.assign(Tree, {
+  displayName: 'ShineoutTree',
+  Select: Select,
+  Field: Select
+});
+export default TreeExport;

package/esm/Tree/interface.d.ts

@@ -0,0 +1 @@
+export { TreeProps as Props } from './Props';

package/esm/Tree/interface.js

@@ -0,0 +1 @@
+export {};

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

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

package/esm/Tree/styles/index.js

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

package/esm/Tree/styles/tree.less

@@ -0,0 +1,263 @@
+@import '../../styles/variables.less';
+@import '../../styles/themes/@{so-theme}.less';
+
+@tree-prefix: ~'@{so-prefix}-tree';
+@tree-line-value: 2px;
+@tree-transparent-value: 3px;
+@tree-rtl: ~'@{so-prefix}-rtl';
+
+.@{tree-prefix} {
+  position: relative;
+
+  &-node {
+    position: relative;
+    &-ltr {
+      padding-left: @tree-indicator-size;
+      > .@{tree-prefix}-children {
+        margin-left: @tree-level-indent;
+      }
+    }
+    &-rtl {
+      padding-right: @tree-indicator-size;
+      > .@{tree-prefix}-children {
+        margin-right: @tree-level-indent;
+      }
+    }
+    line-height: @line-height-base;
+
+    & > div {
+      margin-bottom: @tree-node-margin-bottom;
+    }
+
+    &:last-child > div {
+      padding-bottom: 0;
+    }
+  }
+
+  &-with-line {
+    > .@{tree-prefix}-node:only-child:before {
+      display: none;
+    }
+    .@{tree-prefix}-node {
+      &:before {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 6px;
+        width: 1px;
+        background: linear-gradient(to bottom, @tree-line-color, @tree-line-color @tree-line-value, transparent @tree-transparent-value, transparent);
+        background-size: 100% @tree-line-value * @tree-transparent-value;
+        content: ' ';
+        .@{tree-prefix}-rtl& {
+          left: auto;
+          right: 6px
+        }
+      }
+
+      &:after {
+        position: absolute;
+        top: 11px;
+        left: 7px;
+        width: 14px;
+        height: 1px;
+        background: linear-gradient(to right, @tree-line-color, @tree-line-color @tree-line-value, transparent @tree-transparent-value, transparent);
+        background-size: @tree-line-value * @tree-transparent-value 100%;
+        content: ' ';
+        .@{tree-prefix}-rtl& {
+          left: auto;
+          right: 7px
+        }
+      }
+
+      &:last-child:before {
+        top: -4px;
+        bottom: auto;
+        height: 14px;
+      }
+
+      &:first-child:before {
+        top: -4px;
+      }
+    }
+
+    &.@{tree-prefix} > .@{tree-prefix}-node:first-child:before {
+      top: 9px;
+    }
+
+    .@{tree-prefix}-icon-plus,
+    .@{tree-prefix}-icon-sub {
+      position: absolute;
+      z-index: 10;
+      top: 3px;
+      left: 0px;
+      .@{tree-prefix}-rtl& {
+        left: auto;
+        right: 0px;
+      }
+
+      &:hover span.@{tree-prefix}-default-icon {
+        border-color: @colors-primary;
+      }
+
+      &:focus span.@{tree-prefix}-default-icon {
+        .input-focus()
+      }
+
+      span.@{tree-prefix}-default-icon {
+        position: relative;
+        display: inline-block;
+        width: 13px;
+        height: 13px;
+        border: solid 1px @tree-indicator-color;
+        background: #fff;
+        border-radius: 2px;
+
+        &:before {
+          position: absolute;
+          top: 5px;
+          left: 2px;
+          display: block;
+          width: 7px;
+          height: 0;
+          border-bottom: solid 1px transparent;
+          border-color: inherit;
+          content: ' ';
+        }
+      }
+    }
+
+    .@{tree-prefix}-icon-plus span.@{tree-prefix}-default-icon {
+      &:after {
+        position: absolute;
+        top: 2px;
+        left: 5px;
+        display: block;
+        width: 0;
+        height: 7px;
+        border-right: solid 1px transparent;
+        border-color: inherit;
+        content: ' ';
+      }
+    }
+  }
+
+  &-no-line {
+    .@{tree-prefix}-icon-plus,
+    .@{tree-prefix}-icon-sub {
+      position: absolute;
+      z-index: 10;
+      top: 0px;
+      left: 0px;
+      width: 16px;
+      .@{tree-prefix}-rtl&{
+        left: auto;
+        right: 0px;
+      }
+
+      &:after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: inline-block;
+        padding: 12px;
+        transition: all .2s;
+        z-index: -1;
+        .@{tree-prefix}-rtl&{
+          left: auto;
+          right: 0;
+        }
+      }
+
+      &:hover {
+        &::after {
+          background: @gray-100;
+        }
+      }
+
+      .@{tree-prefix}-default-icon {
+        border-left-color: @gray-600;
+      }
+
+      span.@{tree-prefix}-default-icon {
+        position: absolute;
+        top: 8px;
+        left: 10px;
+        display: inline-block;
+        width: 0;
+        height: 0;
+        border-width: 4px 5px;
+        border-style: solid;
+        border-color: transparent transparent transparent @tree-indicator-color;
+        transform-origin: 2px 4px;
+        transition: transform 0.2s linear;
+        .@{tree-prefix}-rtl&{
+          left: auto;
+          right: 10px;
+          border-color: transparent @tree-indicator-color transparent transparent;
+          transform-origin: 8px 4px;
+        }
+      }
+    }
+
+    .@{tree-prefix}-icon-sub span.@{tree-prefix}-default-icon {
+      transform: rotate(90deg);
+      .@{tree-prefix}-rtl&{
+        transform: rotate(-90deg);
+      }
+    }
+  }
+
+  &-icon-loading {
+    position: absolute;
+    z-index: 10;
+    top: 3px;
+    left: 0px;
+    width: 12px;
+    height: 12px;
+    background: #fff;
+    .@{tree-prefix}-rtl &{
+      right: 0px;
+      left: auto;
+    }
+  }
+
+  &-content {
+    z-index: 10;
+    display: flex;
+    line-height: 24px;
+
+    .@{tree-prefix}-text {
+      flex: 1;
+    }
+  }
+
+  &-checkbox {
+    z-index: 10;
+    &-ltr{
+      margin-right: 6px;
+    }
+    font-size: 0;
+    &-rtl {
+      margin-left: 6px;
+    }
+  }
+
+  &-drag-place {
+    position: relative;
+    z-index: 0;
+    width: 100%;
+    height: 0;
+
+    div {
+      border: dashed 1px #ddd;
+      background: @gray-100;
+    }
+  }
+
+
+  &.@{tree-prefix}-rtl {
+    direction: rtl;
+    text-align: right;
+  }
+}

package/esm/TreeSelect/Input.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="node" />
+import React, { Component } from 'react';
+import { InputProps } from './Props';
+declare class FilterInput extends Component<InputProps> {
+    static defaultProps: {
+        text: string;
+        updatAble: boolean;
+    };
+    editElement: HTMLSpanElement;
+    blurTimer: NodeJS.Timer;
+    handleBlur: React.FocusEventHandler<HTMLSpanElement> | undefined;
+    constructor(props: InputProps);
+    componentDidMount(): void;
+    shouldComponentUpdate(): boolean;
+    componentDidUpdate(prevProps: InputProps): void;
+    reset(): void;
+    focus(): void;
+    bindElement(el: HTMLSpanElement): void;
+    handleInput(e: React.FormEvent<HTMLSpanElement>): void;
+    render(): JSX.Element;
+}
+export default FilterInput;