@douyinfe/semi-ui 2.1.0-beta.0 → 2.1.0-next.0

package/lib/cjs/tree/interface.d.ts

@@ -0,0 +1,119 @@
+import React, { ReactNode, MouseEvent } from 'react';
+import { BasicTreeProps, BasicExpandedOtherProps, BasicRenderFullLabelProps, BasicSearchRenderProps, BasicTreeInnerData, BasicKeyEntities, BasicKeyEntity, BasicTreeNodeProps, BasicFlattenNode, BasicTreeNodeData, BasicOnDragProps } from '@douyinfe/semi-foundation/lib/cjs/tree/foundation';
+export declare type Value = string | number | TreeNodeData | Array<TreeNodeData | number | string>;
+export interface DragTreeNode extends TreeNodeData {
+    expanded: boolean;
+    /**
+     * The positional relationship of the current node in the entire
+     * treeData, such as the 0th node of the 2nd node of the 1st node
+     * of the 0th layer: '0-1-2-0'
+     */
+    pos: string;
+}
+export interface DragProps {
+    event: MouseEvent;
+    node: DragTreeNode;
+}
+export interface OnDragProps extends BasicOnDragProps {
+    event: MouseEvent;
+    node: DragTreeNode;
+    dragNode: DragTreeNode;
+}
+export interface DragEnterProps extends DragProps {
+    expandedKeys?: string[];
+}
+export interface ExpanedOtherProps extends BasicExpandedOtherProps {
+    node: TreeNodeData;
+}
+export interface RenderFullLabelProps extends BasicRenderFullLabelProps {
+    onClick: (e: MouseEvent) => void;
+    onContextMenu: (e: MouseEvent) => void;
+    onDoubleClick: (e: MouseEvent) => void;
+    onExpand: (e: MouseEvent) => void;
+    data: TreeNodeData;
+    style: React.CSSProperties;
+    onCheck: (e: MouseEvent) => void;
+    expandIcon: ReactNode;
+}
+export interface SearchRenderProps extends BasicSearchRenderProps {
+    prefix: ReactNode;
+}
+export interface TreeProps extends BasicTreeProps {
+    children?: ReactNode;
+    defaultValue?: Value;
+    emptyContent?: ReactNode;
+    searchRender?: ((searchRenderProps: SearchRenderProps) => ReactNode) | false;
+    searchStyle?: React.CSSProperties;
+    style?: React.CSSProperties;
+    treeData?: TreeNodeData[];
+    value?: Value;
+    icon?: ReactNode;
+    loadData?: (treeNode?: TreeNodeData) => Promise<void>;
+    onChange?: (value?: Value) => void;
+    onDoubleClick?: (e: MouseEvent, node: TreeNodeData) => void;
+    onDragEnd?: (dragProps: DragProps) => void;
+    onDragLeave?: (dragProps: DragProps) => void;
+    onDragOver?: (dragProps: DragProps) => void;
+    onDragStart?: (dragProps: DragProps) => void;
+    onDragEnter?: (dragEnterProps: DragEnterProps) => void;
+    onDrop?: (onDragProps: OnDragProps) => void;
+    onExpand?: (expandedKeys: string[], expanedOtherProps: ExpanedOtherProps) => void;
+    onLoad?: (loadedKeys?: Set<string>, treeNode?: TreeNodeData) => void;
+    onContextMenu?: (e: MouseEvent, node: TreeNodeData) => void;
+    onSelect?: (selectedKeys: string, selected: boolean, selectedNode: TreeNodeData) => void;
+    renderDraggingNode?: (nodeInstance: HTMLElement, node: TreeNodeData) => HTMLElement;
+    renderFullLabel?: (renderFullLabelProps: RenderFullLabelProps) => ReactNode;
+    renderLabel?: (label?: ReactNode, treeNode?: TreeNodeData) => ReactNode;
+}
+export interface OptionProps {
+    index: number;
+    style: React.CSSProperties;
+    data: KeyEntity;
+}
+export interface KeyEntities extends BasicKeyEntities {
+    [key: string]: KeyEntity;
+}
+export interface KeyEntity extends BasicKeyEntity {
+    children?: KeyEntities;
+    data?: TreeNodeData;
+    parent?: undefined | KeyEntity;
+}
+export interface TreeState extends BasicTreeInnerData {
+    keyEntities: KeyEntities;
+    treeData: TreeNodeData[];
+    flattenNodes: FlattenNode[];
+    prevProps: null | TreeProps;
+    cachedFlattenNodes: FlattenNode[] | undefined;
+}
+export interface TreeNodeProps extends BasicTreeNodeProps {
+    children?: TreeNodeData[];
+    icon?: ReactNode;
+}
+export interface TreeNodeState {
+    [x: string]: any;
+}
+export interface TreeNodeData extends BasicTreeNodeData {
+    label?: ReactNode;
+    icon?: ReactNode;
+    children?: TreeNodeData[];
+}
+export interface FlattenNode extends BasicFlattenNode {
+    children?: FlattenNode[];
+    data?: BasicTreeNodeData;
+    label?: ReactNode;
+    parent?: null | FlattenNode;
+}
+export interface NodeListProps {
+    [x: string]: any;
+    flattenNodes: FlattenNode[];
+    motionKeys: Set<string>;
+    motionType: string;
+    flattenList: FlattenNode[] | undefined;
+    renderTreeNode: (treeNode: FlattenNode, ind?: number, style?: React.CSSProperties) => ReactNode;
+}
+export declare type TransitionNodes<T> = Array<T | Array<T>>;
+export interface NodeListState {
+    transitionNodes: TransitionNodes<FlattenNode>;
+    cachedMotionKeys?: Set<string>;
+    cachedData?: FlattenNode[];
+}

package/lib/cjs/tree/interface.js

@@ -0,0 +1,7 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/tree/nodeList.d.ts

@@ -0,0 +1,9 @@
+import React, { PureComponent } from 'react';
+import { NodeListProps, NodeListState } from './interface';
+export default class NodeList extends PureComponent<NodeListProps, NodeListState> {
+    static contextType: React.Context<import("./treeContext").TreeContextValue>;
+    constructor(props: NodeListProps);
+    static getDerivedStateFromProps(props: NodeListProps, prevState: NodeListState): {};
+    onMotionEnd: () => void;
+    render(): React.ReactNode[];
+}

package/lib/cjs/tree/nodeList.js

@@ -0,0 +1,141 @@
+"use strict";
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _splice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/splice"));
+
+var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _lodashEs = require("lodash-es");
+
+var _treeContext = _interopRequireDefault(require("./treeContext"));
+
+var _collapse = _interopRequireDefault(require("./collapse"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const getTreeNodeKey = treeNode => {
+  const {
+    data
+  } = treeNode;
+  const {
+    key
+  } = data;
+  return key;
+};
+
+class NodeList extends _react.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.onMotionEnd = () => {
+      this.setState({
+        transitionNodes: []
+      });
+    };
+
+    this.state = {
+      transitionNodes: []
+    };
+  }
+
+  static getDerivedStateFromProps(props, prevState) {
+    var _context;
+
+    const {
+      flattenNodes = [],
+      motionKeys,
+      motionType,
+      flattenList = []
+    } = props;
+    const hasChanged = !(0, _lodashEs.isEqual)(prevState.cachedMotionKeys, motionKeys) || !(0, _lodashEs.isEqual)((0, _map.default)(_context = prevState.cachedData).call(_context, i => i.key), (0, _map.default)(flattenNodes).call(flattenNodes, i => i.key));
+    const motionArr = [...motionKeys];
+
+    if (!hasChanged || !motionArr.length) {
+      return null;
+    }
+
+    const transitionNodes = [];
+    const transitionRange = [];
+    let rangeStart = 0;
+    let newState = {};
+    const lookUpTarget = motionType === 'hide' && flattenList ? flattenList : flattenNodes;
+    (0, _forEach.default)(lookUpTarget).call(lookUpTarget, (treeNode, ind) => {
+      const nodeKey = getTreeNodeKey(treeNode);
+
+      if (motionKeys.has(nodeKey)) {
+        transitionRange.push(treeNode);
+
+        if (nodeKey === motionArr[0]) {
+          rangeStart = ind;
+        }
+      } else {
+        transitionNodes.push(treeNode);
+      }
+    });
+    (0, _splice.default)(transitionNodes).call(transitionNodes, rangeStart, 0, transitionRange);
+    newState = {
+      transitionNodes,
+      cachedData: flattenNodes,
+      cachedMotionKeys: motionKeys,
+      cachedMotionType: motionType
+    };
+    return newState;
+  }
+
+  render() {
+    const {
+      flattenNodes,
+      motionType,
+      renderTreeNode
+    } = this.props;
+    const {
+      transitionNodes
+    } = this.state;
+    const mapData = transitionNodes.length ? transitionNodes : flattenNodes;
+    const options = (0, _map.default)(mapData).call(mapData, treeNode => {
+      const isMotionNode = (0, _isArray.default)(treeNode);
+
+      if (isMotionNode && !treeNode.length) {
+        return null;
+      }
+
+      if (isMotionNode && treeNode.length) {
+        const nodeKey = getTreeNodeKey(treeNode[0]);
+        return /*#__PURE__*/_react.default.createElement(_collapse.default, {
+          motionType: motionType === 'show' ? 'enter' : 'leave',
+          key: "motion-".concat(nodeKey),
+          onMotionEnd: this.onMotionEnd,
+          motion: Boolean(motionType)
+        }, (0, _map.default)(treeNode).call(treeNode, node => renderTreeNode(node)));
+      }
+
+      return renderTreeNode(treeNode);
+    });
+    return options;
+  }
+
+}
+
+exports.default = NodeList;
+NodeList.contextType = _treeContext.default;

package/lib/cjs/tree/treeContext.d.ts

@@ -0,0 +1,40 @@
+import React, { ReactNode, MouseEvent, DragEvent } from 'react';
+import { Virtualize, ExpandAction } from '@douyinfe/semi-foundation/lib/cjs/tree/foundation';
+import { TreeNodeData, KeyEntities, TreeNodeProps, FlattenNode, RenderFullLabelProps } from './interface';
+export interface TreeContextValue {
+    treeDisabled?: boolean;
+    treeIcon?: ReactNode;
+    motion?: boolean;
+    motionKeys?: Set<string>;
+    motionType?: string;
+    filterTreeNode?: boolean | ((inputValue: string, treeNodeString: string) => void);
+    keyEntities?: KeyEntities;
+    onNodeClick?: any;
+    onNodeExpand?: (e: MouseEvent, treeNode: TreeNodeProps) => void;
+    onNodeSelect?: (e: MouseEvent, treeNode: TreeNodeProps) => void;
+    onNodeCheck?: (e: MouseEvent, treeNode: TreeNodeProps) => void;
+    onNodeRightClick?: (e: MouseEvent, treeNode: TreeNodeProps) => void;
+    onNodeDoubleClick?: (e: MouseEvent, treeNode: TreeNodeProps) => void;
+    renderTreeNode?: (treeNode: FlattenNode, ind?: number, style?: React.CSSProperties) => ReactNode;
+    onNodeDragStart?: (e: DragEvent<HTMLDivElement>, treeNode: TreeNodeProps) => void;
+    onNodeDragEnter?: (e: DragEvent<HTMLDivElement>, treeNode: TreeNodeProps) => void;
+    onNodeDragOver?: (e: DragEvent<HTMLDivElement>, treeNode: TreeNodeProps) => void;
+    onNodeDragLeave?: (e: DragEvent<HTMLDivElement>, treeNode: TreeNodeProps) => void;
+    onNodeDragEnd?: (e: DragEvent<HTMLDivElement>, treeNode: TreeNodeProps) => void;
+    onNodeDrop?: (e: DragEvent<HTMLDivElement>, treeNode: TreeNodeProps) => void;
+    expandAction?: ExpandAction;
+    directory?: boolean;
+    multiple?: boolean;
+    showFilteredOnly?: boolean;
+    isSearching?: boolean;
+    loadData?: (treeNode?: TreeNodeData) => Promise<void>;
+    onNodeLoad?: (data: TreeNodeData) => Promise<unknown>;
+    renderLabel?: (label?: ReactNode, treeNode?: TreeNodeData) => ReactNode;
+    draggable?: boolean;
+    renderFullLabel?: (renderFullLabelProps: RenderFullLabelProps) => React.ReactNode;
+    dragOverNodeKey?: string | string[];
+    dropPosition?: number | null;
+    labelEllipsis?: boolean | Virtualize;
+}
+declare const TreeContext: React.Context<TreeContextValue>;
+export default TreeContext;

package/lib/cjs/tree/treeContext.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+const TreeContext = /*#__PURE__*/_react.default.createContext(null);
+
+var _default = TreeContext;
+exports.default = _default;

package/lib/cjs/tree/treeNode.d.ts

@@ -0,0 +1,54 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { TreeNodeProps, TreeNodeState } from './interface';
+export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState> {
+    static contextType: React.Context<import("./treeContext").TreeContextValue>;
+    static propTypes: {
+        expanded: PropTypes.Requireable<boolean>;
+        selected: PropTypes.Requireable<boolean>;
+        checked: PropTypes.Requireable<boolean>;
+        halfChecked: PropTypes.Requireable<boolean>;
+        active: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        loaded: PropTypes.Requireable<boolean>;
+        loading: PropTypes.Requireable<boolean>;
+        isLeaf: PropTypes.Requireable<boolean>;
+        pos: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<object>;
+        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        directory: PropTypes.Requireable<boolean>;
+        keyword: PropTypes.Requireable<string>;
+        treeNodeFilterProp: PropTypes.Requireable<string>;
+        selectedKey: PropTypes.Requireable<string>;
+        motionKey: PropTypes.Requireable<string | string[]>;
+    };
+    static defaultProps: {
+        selectedKey: string;
+        motionKey: string;
+    };
+    debounceSelect: any;
+    refNode: HTMLElement;
+    constructor(props: TreeNodeProps);
+    onSelect: (e: React.MouseEvent) => void;
+    onExpand: (e: React.MouseEvent) => void;
+    onCheck: (e: React.MouseEvent) => void;
+    onContextMenu: (e: React.MouseEvent) => void;
+    onClick: (e: React.MouseEvent) => void;
+    onDoubleClick: (e: React.MouseEvent) => void;
+    onDragStart: (e: React.DragEvent) => void;
+    onDragEnter: (e: React.DragEvent) => void;
+    onDragOver: (e: React.DragEvent) => void;
+    onDragLeave: (e: React.DragEvent) => void;
+    onDragEnd: (e: React.DragEvent) => void;
+    onDrop: (e: React.DragEvent) => void;
+    getNodeChildren: () => import("./interface").TreeNodeData[] & React.ReactNode;
+    isLeaf: () => boolean;
+    isDisabled: () => boolean;
+    renderArrow(): JSX.Element;
+    renderCheckbox(): JSX.Element;
+    renderIcon(): any;
+    renderEmptyNode(): JSX.Element;
+    renderRealLabel: () => any;
+    setRef: (node: HTMLElement) => void;
+    render(): any;
+}