shineout 1.12.2 → 1.12.3

package/esm/Tree/Node.js

@@ -0,0 +1,268 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
+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, { createElement } from 'react';
+import classnames from 'classnames';
+import { PureComponent } from '../component';
+import { isFunc, isString } from '../utils/is';
+import { treeClass } from './styles';
+import Content from './Content';
+import { getDirectionClass } from '../utils/classname';
+var placeElement = document.createElement('div');
+placeElement.className = treeClass('drag-place');
+var innerPlaceElement = document.createElement('div');
+placeElement.appendChild(innerPlaceElement);
+var placeInfo = {
+  start: '',
+  target: ''
+};
+var isDragging = false;
+
+var Node =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Node, _PureComponent);
+
+  function Node(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "element", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "dragImage", void 0);
+
+    var _props$bindNode = props.bindNode(props.id, _this.update.bind(_assertThisInitialized(_assertThisInitialized(_this)))),
+        active = _props$bindNode.active,
+        expanded = _props$bindNode.expanded;
+
+    _this.state = {
+      active: active,
+      expanded: expanded,
+      fetching: false
+    };
+    _this.bindElement = _this.bindElement.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleToggle = _this.handleToggle.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleDragStart = _this.handleDragStart.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleDragOver = _this.handleDragOver.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleDragEnd = _this.handleDragEnd.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.setFetching = _this.setFetching.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.isLeaf = _this.isLeaf.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
+  }
+
+  var _proto = Node.prototype;
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    _PureComponent.prototype.componentWillUnmount.call(this);
+
+    this.props.unbindNode(this.props.id);
+  };
+
+  _proto.setFetching = function setFetching(fetching) {
+    this.setState({
+      fetching: fetching
+    });
+  };
+
+  _proto.update = function update(key, value) {
+    var _this$setState;
+
+    if (this.state[key] !== value) this.setState((_this$setState = {}, _this$setState[key] = value, _this$setState));
+  };
+
+  _proto.bindElement = function bindElement(el) {
+    this.element = el;
+  };
+
+  _proto.isLeaf = function isLeaf() {
+    var _this$props = this.props,
+        childrenKey = _this$props.childrenKey,
+        data = _this$props.data,
+        loader = _this$props.loader;
+    var fetching = this.state.fetching;
+    var children = data[childrenKey];
+    if (children && children.length > 0) return false;
+    if (Array.isArray(children) || children === null) return true;
+    if (fetching && !children) return false;
+    if (loader && !fetching) return false;
+    return true;
+  };
+
+  _proto.handleToggle = function handleToggle() {
+    var _this$props2 = this.props,
+        id = _this$props2.id,
+        onToggle = _this$props2.onToggle; // eslint-disable-next-line
+
+    var expanded = !this.state.expanded;
+    this.setState({
+      expanded: expanded
+    });
+    if (onToggle) onToggle(id, expanded);
+  };
+
+  _proto.handleDragStart = function handleDragStart(event) {
+    var _this2 = this;
+
+    var _this$props3 = this.props,
+        dragImageSelector = _this$props3.dragImageSelector,
+        dragImageStyle = _this$props3.dragImageStyle,
+        data = _this$props3.data;
+    if (isDragging) return;
+    isDragging = true;
+    event.dataTransfer.effectAllowed = 'copyMove';
+    event.dataTransfer.setData('text/plain', this.props.id);
+    placeInfo.start = this.props.id;
+    var element = document.querySelector(dragImageSelector(data));
+    var dragImage = element || this.element.querySelector("." + treeClass('content'));
+    var rect = dragImage.getBoundingClientRect();
+    this.dragImage = dragImage.cloneNode(true);
+    document.body.appendChild(this.dragImage);
+    this.dragImage.style.position = 'absolute';
+    this.dragImage.style.top = '-1000px';
+    this.dragImage.style.left = '-1000px';
+    this.dragImage.style.width = rect.width + "px";
+    this.dragImage.style.background = '#fff';
+    this.dragImage.style.boxShadow = '0 0 5px 0 rgba(0, 0, 0, 0.1)';
+
+    if (dragImageStyle) {
+      Object.keys(dragImageStyle).forEach(function (k) {
+        var styleKey = k;
+        _this2.dragImage.style[styleKey] = dragImageStyle[styleKey];
+      });
+    }
+
+    event.dataTransfer.setDragImage(this.dragImage, event.clientX - rect.left, event.clientY - rect.top);
+    setTimeout(function () {
+      _this2.element.style.display = 'none';
+    }, 0);
+  };
+
+  _proto.handleDragOver = function handleDragOver(e) {
+    if (!isDragging) return;
+    var _this$props4 = this.props,
+        dragHoverExpand = _this$props4.dragHoverExpand,
+        datum = _this$props4.datum,
+        dragSibling = _this$props4.dragSibling;
+    var startId = placeInfo.start;
+    var current = datum.getPath(startId);
+    var target = datum.getPath(this.props.id);
+    var currentPathStr = current.path.join('/');
+    var targetPathStr = target.path.join('/');
+    if (dragSibling && targetPathStr !== currentPathStr) return;
+    if (dragHoverExpand && !this.state.expanded) this.handleToggle();
+    var hover = this.element;
+    var rect = hover.getBoundingClientRect();
+    var clientHeight = e.target.getBoundingClientRect().height || 20;
+    var hoverMiddleY = (rect.bottom - rect.top) / 2;
+    var hoverClientY = e.clientY - rect.top;
+    var position = this.props.index;
+    innerPlaceElement.style.height = '0px';
+
+    if (hoverClientY < hoverMiddleY + clientHeight * 0.2) {
+      hover.parentNode.insertBefore(placeElement, hover);
+
+      if (hoverClientY > clientHeight * 0.3) {
+        if (!dragSibling) {
+          position = -1;
+          innerPlaceElement.style.height = rect.height + "px";
+        } else {
+          position += 1;
+          hover.parentNode.insertBefore(placeElement, hover.nextElementSibling);
+        }
+      }
+    } else {
+      position += 1;
+      hover.parentNode.insertBefore(placeElement, hover.nextElementSibling);
+    }
+
+    placeInfo.target = this.props.id; // @ts-ignore
+
+    placeElement.setAttribute('data-position', position);
+  };
+
+  _proto.handleDragEnd = function handleDragEnd() {
+    this.element.style.display = '';
+    if (!isDragging) return;
+    isDragging = false;
+    if (!placeElement.parentNode) return;
+    if (this.dragImage && this.dragImage.parentNode) this.dragImage.parentNode.removeChild(this.dragImage);
+    var _this$props5 = this.props,
+        id = _this$props5.id,
+        index = _this$props5.index,
+        onDrop = _this$props5.onDrop;
+    var position = parseInt(placeElement.getAttribute('data-position') || '', 10);
+    var target = placeInfo.target;
+    placeElement.parentNode.removeChild(placeElement);
+
+    if (onDrop && (target !== id || index !== position)) {
+      onDrop(id, target, position);
+    }
+  };
+
+  _proto.render = function render() {
+    var _this$props6 = this.props,
+        data = _this$props6.data,
+        listComponent = _this$props6.listComponent,
+        onDrop = _this$props6.onDrop,
+        childrenClass = _this$props6.childrenClass,
+        leafClass = _this$props6.leafClass,
+        nodeClass = _this$props6.nodeClass,
+        other = _objectWithoutPropertiesLoose(_this$props6, ["data", "listComponent", "onDrop", "childrenClass", "leafClass", "nodeClass"]);
+
+    var children = data[other.childrenKey];
+    var hasChildren = children && children.length > 0;
+    var _this$state = this.state,
+        expanded = _this$state.expanded,
+        fetching = _this$state.fetching;
+
+    var listProps = _objectSpread({}, other, {
+      data: children,
+      expanded: expanded,
+      onDrop: onDrop,
+      leafClass: leafClass,
+      childrenClass: childrenClass,
+      nodeClass: nodeClass,
+      childrenClassName: childrenClass(data)
+    });
+
+    var wrapProps = {};
+
+    if (onDrop) {
+      Object.assign(wrapProps, {
+        draggable: true,
+        onDragStart: this.handleDragStart,
+        onDragEnd: this.handleDragEnd
+      });
+    } // node className
+
+
+    var nodeClassName = null;
+
+    if (isString(nodeClass)) {
+      nodeClassName = nodeClass;
+    } else if (isFunc(nodeClass)) {
+      nodeClassName = nodeClass(data);
+    }
+
+    return React.createElement("div", _extends({}, wrapProps, {
+      ref: this.bindElement,
+      className: classnames(treeClass(getDirectionClass('node')), this.isLeaf() && leafClass(data), nodeClassName)
+    }), React.createElement(Content, _extends({}, other, {
+      active: this.state.active,
+      data: data,
+      expanded: expanded,
+      onToggle: this.handleToggle,
+      onDragOver: this.handleDragOver,
+      setFetching: this.setFetching,
+      fetching: fetching
+    })), hasChildren && createElement(listComponent, listProps));
+  };
+
+  return Node;
+}(PureComponent);
+
+export default Node;

package/esm/Tree/Props.d.ts

@@ -0,0 +1,291 @@
+import * as React from 'react';
+import { ComponentType } from 'react';
+import * as CSS from 'csstype';
+import { KeygenResult, LiteralUnion, StandardProps, ValueItem } from '../@types/common';
+import DatumTree, { TreePathType, TreeModeType } from '../Datum/Tree';
+import { GetInputableProps } from '../Form/Props';
+/** ------------ Tree -------------- */
+export interface TreeProps<DataItem, Value extends any[]> extends StandardProps {
+    /**
+     * active node key
+     *
+     * 激活节点的key
+     *
+     * default: -
+     */
+    active?: KeygenResult;
+    /**
+     * desc: active nodes
+     *
+     * 数据，子节点为children，如果 children 值为 null 或 长度为 0 时，视为叶子节点
+     *
+     * default: []
+     */
+    data: DataItem[];
+    /**
+     * desc: default expanded nodes
+     *
+     * 默认展开的节点 key（非受控）
+     *
+     * default: none
+     */
+    defaultExpanded?: KeygenResult[];
+    defaultValue?: Value;
+    /**
+     * desc: control whether the node can be chosen
+     *
+     * 显示选择框时有效，为 true 时，所有节点禁用选择，为函数时，根据函数返回结果确定是否禁用
+     *
+     * default: none
+     */
+    disabled?: boolean | ((data: DataItem) => boolean);
+    /**
+     * desc: expanded node
+     *
+     * 展开的节点 key （受控）
+     *
+     * default: none
+     */
+    expanded?: KeygenResult[];
+    /**
+     * desc: whether show line
+     *
+     * 是否显示连接线
+     *
+     * default: true
+     */
+    line?: boolean;
+    /**
+     * desc: dynamically load nodes
+     *
+     * 设置loader属性后，未定义children的节点视为动态加载节点，点击展开触发 loader事件，children 为 null 或者长度为 0 视为叶子节点
+     *
+     * default: none
+     */
+    loader?: (key: ValueItem<Value>, data: DataItem) => void;
+    /**
+     * desc: selected mode
+     *
+     * 选中值模式
+     *
+     * default: 1
+     */
+    mode?: TreeModeType;
+    /**
+     * desc: change event
+     *
+     * 设置 onChange 属性时，显示 选择框。参数为当前选中值，和 mode 属性相关
+     *
+     * default: none
+     */
+    onChange?: (value: Value, id: KeygenResult) => void;
+    /**
+     * desc: click event
+     *
+     * 节点点击事件
+     *
+     * default: none
+     */
+    onClick?: (data: DataItem, key: KeygenResult, path: TreePathType) => void;
+    /**
+     * desc: expand event
+     *
+     * 节点展开回调，参数为当前展开节点 key 数组
+     *
+     * default: none
+     */
+    onExpand?: (value: KeygenResult[]) => void;
+    /**
+     * desc: drop event
+     *
+     * 设置 onDrop 属性时，为可拖动状态
+     *
+     * default: none
+     */
+    onDrop?: (data: DataItem[], key: KeygenResult, targetKey: KeygenResult, position: number) => void;
+    value?: Value;
+    datum?: DatumTree<DataItem>;
+    /**
+     * Expand by click parent node
+     *
+     * 点击父节点展开
+     *
+     * default: -
+     */
+    parentClickExpand?: boolean;
+    /**
+     * desc: expanded all nodes
+     *
+     * 默认展开所有节点
+     *
+     * default: false
+     */
+    defaultExpandAll?: boolean;
+    dataUpdate?: boolean;
+    /**
+     * desc: specify the name of the subdata
+     *
+     * 指定子数据的属性名
+     *
+     * default: children
+     */
+    childrenKey?: LiteralUnion<DataItem>;
+    /**
+     * desc: DIY icon when expanded
+     *
+     * 自定义展开/收起按钮
+     *
+     * default: none
+     */
+    expandIcons?: React.ReactNode[];
+    /**
+     * desc: style when drap images
+     *
+     * 拖拽图片的样式
+     *
+     * default: none
+     */
+    dragImageStyle?: CSS.Properties<string>;
+    radioUpdate?: boolean;
+    /**
+     * desc: if need to double-click to expand
+     *
+     * 双击是否展开节点
+     *
+     * default: false
+     */
+    doubleClickExpand?: boolean;
+    /**
+     * desc: whether it can only be dragged at the same level
+     *
+     * 是否只能平级拖拽
+     *
+     * default: none
+     */
+    dragSibling?: boolean;
+    unmatch?: boolean;
+    /**
+     * Auxiliary method for generating key. When it is a function, use the return value of this function. When it is a string, use the data value corresponding to this string. For example, 'id' is the same thing as (d) => d.id.
+     *
+     * 生成key的辅助方法, 为函数时，使用此函数返回值, 为string时，使用这个string对应的数据值。如 'id'，相当于 (d) => d.id
+     *
+     * default: index
+     */
+    keygen: LiteralUnion<DataItem> | ((data: DataItem, parentKey: KeygenResult) => KeygenResult);
+    /**
+     * desc: selector when dray image
+     *
+     * 定义拖拽图片的选择器
+     *
+     * default: none
+     */
+    dragImageSelector?: string | ((data: DataItem) => string);
+    /**
+     * the class of children, the params of function is data
+     *
+     * 子节点 class, 函数的参数为该条叶子节点数据
+     *
+     * default: none
+     */
+    childrenClass?: string | ((data: DataItem) => string);
+    /**
+     * the class of lead, the params of function is data
+     *
+     * 叶子节点的 class, 函数的参数为该条叶子节点数据
+     *
+     * default: none
+     */
+    leafClass?: string | ((data: DataItem) => string);
+    /**
+     * get datum
+     *
+     * 获取 datum
+     *
+     * default: -
+     */
+    bindDatum?: (datum: any) => void;
+    /**
+     * When it is a string, return d[string]. When it is a function, return the result of the function.
+     *
+     * 为 string 时，返回 d[string]。 为 function 时，返回函数结果
+     *
+     * default: -
+     */
+    renderItem: LiteralUnion<DataItem> | ((data: DataItem, expanded: boolean, active: boolean, id: KeygenResult) => React.ReactNode);
+    /**
+     * desc: automatically expand nodes with child nodes when dragging
+     *
+     * 拖拽时自动展开含有子节点的节点
+     *
+     * default: false
+     */
+    dragHoverExpand?: boolean;
+    /**
+     * desc: class name of icon
+     *
+     * 展开/收起按钮的类名
+     *
+     * default: none
+     */
+    iconClass?: string;
+    /**
+     * desc: class name of node
+     *
+     * 节点的class，如果是函数，参数为该节点数据
+     *
+     * default: none
+     */
+    nodeClass?: string | ((data: DataItem) => string);
+}
+export declare type UpdateFunc = (name: string, active: boolean) => void;
+/** ------------ Root -------------- */
+export interface RootProps<DataItem, Value extends any[]> extends Pick<TreeProps<DataItem, Value>, 'className' | 'keygen' | 'line' | 'loader' | 'onChange' | 'renderItem' | 'style' | 'parentClickExpand' | 'expandIcons' | 'dragHoverExpand' | 'doubleClickExpand' | 'iconClass' | 'nodeClass' | 'dragSibling'>, Pick<Required<TreeProps<DataItem, Value>>, 'childrenKey' | 'dragImageStyle' | 'mode' | 'data'> {
+    datum: DatumTree<DataItem>;
+    disabled: boolean;
+    unbindNode: (id: KeygenResult) => void;
+    bindNode: (id: KeygenResult, update: UpdateFunc) => {
+        active: boolean;
+        expanded: boolean;
+    };
+    onDrop?: (id: KeygenResult, targetId: KeygenResult, position: number) => void;
+    onToggle?: (id: KeygenResult, expanded: boolean) => void;
+    onNodeClick: (node: DataItem, id: KeygenResult) => void;
+    dragImageSelector: (data: DataItem) => string | undefined;
+    childrenClass: (data: DataItem) => string | undefined;
+    leafClass: (data: DataItem) => string | undefined;
+}
+/** ------------ List -------------- */
+export interface ListProps<DataItem, Value extends any[]> extends Omit<RootProps<DataItem, Value>, 'className' | 'expanded'> {
+    className?: string;
+    expanded?: boolean;
+    path: string;
+    isRoot?: boolean;
+    deepIndex: number;
+    id?: KeygenResult;
+    childrenClassName?: string;
+}
+/** ------------ Node -------------- */
+export interface NodeProps<DataItem, Value extends any[]> extends Omit<ListProps<DataItem, Value>, 'data' | 'isRoot' | 'expanded' | 'className' | 'style' | 'id'> {
+    id: KeygenResult;
+    data: DataItem;
+    index: number;
+    listComponent: ComponentType<ListProps<DataItem, Value>>;
+}
+/** ------------ Content -------------- */
+export interface ContentProps<DataItem, Value extends any[]> extends Omit<NodeProps<DataItem, Value>, 'listComponent' | 'onDrop' | 'childrenClass' | 'leafClass' | 'nodeClass'> {
+    active: boolean;
+    expanded: boolean;
+    onToggle: () => void;
+    onDragOver: (e: React.DragEvent) => void;
+    setFetching: (fetching: boolean) => void;
+    fetching: boolean;
+}
+/** ------------ Checkbox -------------- */
+export interface CheckboxProps<DataItem, Value extends any[]> extends Omit<ContentProps<DataItem, Value>, 'data' | 'onToggle' | 'onChange' | 'expanded' | 'onDragOver'> {
+    onChange: Required<ContentProps<DataItem, Value>>['onChange'];
+}
+export declare type TreeFieldProps<DataItem, Value extends any[]> = GetInputableProps<TreeProps<DataItem, Value>, Value>;
+export declare class TreeField<DataItem, Value extends any[]> extends React.Component<TreeFieldProps<DataItem, Value>, any> {
+    render: () => JSX.Element;
+}
+export declare type TreeFieldType = typeof TreeField;

package/esm/Tree/Props.js

@@ -0,0 +1 @@
+import * as React from 'react';

package/esm/Tree/Root.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { RootProps } from './Props';
+declare function Root<DataItem, Value extends any[]>(props: RootProps<DataItem, Value>): JSX.Element;
+declare namespace Root {
+    var defaultProps: {
+        data: never[];
+        line: boolean;
+    };
+}
+export default Root;

package/esm/Tree/Root.js

@@ -0,0 +1,23 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import classnames from 'classnames';
+import { treeClass } from './styles';
+import List from './List';
+import { isRTL } from '../config';
+
+function Root(props) {
+  var className = classnames(treeClass('_', props.line ? 'with-line' : 'no-line', isRTL() && 'rtl'), props.className);
+  return React.createElement(List, _extends({}, props, {
+    className: className,
+    expanded: true,
+    path: "",
+    isRoot: true,
+    deepIndex: 0
+  }));
+}
+
+Root.defaultProps = {
+  data: [],
+  line: true
+};
+export default Root;

package/esm/Tree/Tree.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+import { PureComponent } from '../component';
+import DatumTree from '../Datum/Tree';
+import { TreeProps, UpdateFunc } from './Props';
+import { KeygenResult } from '../@types/common';
+interface TreeState {
+    active: null | KeygenResult;
+}
+declare class Tree<DataItem, Value extends any[]> extends PureComponent<TreeProps<DataItem, Value>, TreeState> {
+    handleDragImageSelector: () => string | undefined;
+    handleClidrenClass: () => string | undefined;
+    handleLeafClass: () => string | undefined;
+    nodes: Map<KeygenResult, UpdateFunc>;
+    datum: DatumTree<DataItem>;
+    static defaultProps: any;
+    constructor(props: TreeProps<DataItem, Value>);
+    componentDidUpdate(prevProps: TreeProps<DataItem, Value>): void;
+    getActive(): KeygenResult | null;
+    bindDatum(): void;
+    bindNode(id: KeygenResult, update: UpdateFunc): {
+        active: boolean;
+        expanded: boolean;
+    };
+    unbindNode(id: KeygenResult): void;
+    handleExpanded(expanded?: KeygenResult[]): void;
+    handleActive(active?: KeygenResult): void;
+    handleNodeClick(node: DataItem, id: KeygenResult): void;
+    handleToggle(id: KeygenResult): void;
+    handleDrop(id: KeygenResult, targetId: KeygenResult, position: number): void;
+    handleProps(key: 'dragImageSelector' | 'childrenClass' | 'leafClass'): string | ((data: DataItem) => string) | ((data: DataItem) => string) | ((data: DataItem) => string) | undefined;
+    render(): JSX.Element;
+}
+export default Tree;