@kdcloudjs/kdesign 1.0.2

package/es/tree/treeNode.d.ts

@@ -0,0 +1,40 @@
+import React, { MouseEvent } from 'react';
+import { TreeNodeData } from './index';
+export interface TreeNodeProps {
+    nodeKey?: string;
+    title?: string;
+    selectable?: boolean;
+    checkable?: boolean;
+    className?: string;
+    disabled?: boolean;
+    draggable?: boolean;
+    disableCheckbox?: boolean;
+    icon?: React.ReactNode | ((props: any) => React.ReactNode);
+    showLine?: boolean | {
+        showLeafIcon: boolean;
+    };
+    showIcon?: boolean;
+    selected?: boolean;
+    style?: Map<string, string>;
+    hasChildNode?: boolean;
+    expand?: boolean;
+    level?: number;
+    switcherIcon?: React.ReactNode | ((props: any) => React.ReactNode);
+    indeterminate?: boolean;
+    checked?: boolean;
+    pos?: string;
+    estimatedItemSize?: number;
+    onCheck?: (key: string, value: boolean, node: React.ReactNode, event: React.MouseEvent<MouseEvent>, pos: string) => void;
+    onSelect?: (event: React.MouseEvent<MouseEvent>, node: React.ReactNode, key: string) => void;
+    onExpand?: (value: boolean, node: React.ReactNode) => void;
+    onDragStart?: (event: React.MouseEvent<MouseEvent>, node: React.ReactNode) => void;
+    onDragOver?: (event: React.MouseEvent<MouseEvent>, node: React.ReactNode) => void;
+    onDragLeave?: (event: React.MouseEvent<MouseEvent>, node: React.ReactNode) => void;
+    onDragEnter?: (event: React.MouseEvent<MouseEvent>, node: React.ReactNode) => void;
+    onDragEnd?: (event: React.MouseEvent<MouseEvent>, node: React.ReactNode) => void;
+    onDrop?: (event: React.MouseEvent<MouseEvent>, node: React.ReactNode, dragNode: React.ReactNode) => void;
+    setDragNode?: (nodeData: TreeNodeData) => void;
+    getDragNode?: () => TreeNodeData;
+}
+declare const TreeNode: React.ForwardRefExoticComponent<TreeNodeProps & React.RefAttributes<unknown>>;
+export default TreeNode;

package/es/tree/treeNode.js

@@ -0,0 +1,333 @@
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof _Object$getOwnPropertySymbols === "function") for (var i = 0, p = _Object$getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+import React, { useContext, useEffect } from 'react';
+import classNames from 'classnames';
+import ConfigContext from '../config-provider/ConfigContext';
+import { getCompProps } from '../_utils';
+import Checkbox from './../checkbox';
+import Icon from '../icon';
+var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _context;
+
+  var _useContext = useContext(ConfigContext),
+      getPrefixCls = _useContext.getPrefixCls,
+      prefixCls = _useContext.prefixCls,
+      userDefaultProps = _useContext.compDefaultProps;
+
+  var TreeNodeProps = getCompProps('TreeNode', userDefaultProps, props); // 按钮属性需要合并一遍用户定义的默认属性
+
+  var nodeKey = TreeNodeProps.nodeKey,
+      customPrefixcls = TreeNodeProps.prefixCls,
+      selectable = TreeNodeProps.selectable,
+      checkable = TreeNodeProps.checkable,
+      className = TreeNodeProps.className,
+      icon = TreeNodeProps.icon,
+      switcherIcon = TreeNodeProps.switcherIcon,
+      disabled = TreeNodeProps.disabled,
+      draggable = TreeNodeProps.draggable,
+      pos = TreeNodeProps.pos,
+      checked = TreeNodeProps.checked,
+      level = TreeNodeProps.level,
+      getDragNode = TreeNodeProps.getDragNode,
+      hasChildNode = TreeNodeProps.hasChildNode,
+      expand = TreeNodeProps.expand,
+      title = TreeNodeProps.title,
+      showLine = TreeNodeProps.showLine,
+      showIcon = TreeNodeProps.showIcon,
+      selected = TreeNodeProps.selected,
+      setDragNode = TreeNodeProps.setDragNode,
+      style = TreeNodeProps.style,
+      indeterminate = TreeNodeProps.indeterminate,
+      estimatedItemSize = TreeNodeProps.estimatedItemSize,
+      onExpand = TreeNodeProps.onExpand,
+      onCheck = TreeNodeProps.onCheck,
+      onDragStart = TreeNodeProps.onDragStart,
+      onDragOver = TreeNodeProps.onDragOver,
+      onDragLeave = TreeNodeProps.onDragLeave,
+      onDragEnter = TreeNodeProps.onDragEnter,
+      onDragEnd = TreeNodeProps.onDragEnd,
+      onDrop = TreeNodeProps.onDrop,
+      onSelect = TreeNodeProps.onSelect,
+      others = __rest(TreeNodeProps, ["nodeKey", "prefixCls", "selectable", "checkable", "className", "icon", "switcherIcon", "disabled", "draggable", "pos", "checked", "level", "getDragNode", "hasChildNode", "expand", "title", "showLine", "showIcon", "selected", "setDragNode", "style", "indeterminate", "estimatedItemSize", "onExpand", "onCheck", "onDragStart", "onDragOver", "onDragLeave", "onDragEnter", "onDragEnd", "onDrop", "onSelect"]);
+
+  var nodeData = React.useMemo(function () {
+    return _extends({
+      selectable: selectable,
+      checkable: checkable,
+      expand: expand,
+      key: nodeKey,
+      level: level,
+      title: title,
+      disabled: disabled,
+      draggable: draggable,
+      checked: checked,
+      pos: pos,
+      hasChildNode: hasChildNode,
+      indeterminate: indeterminate,
+      icon: icon,
+      switcherIcon: switcherIcon,
+      // showLine,
+      showIcon: showIcon,
+      selected: selected
+    }, others);
+  }, [selectable, checkable, expand, nodeKey, level, title, disabled, draggable, checked, pos, hasChildNode, indeterminate, icon, switcherIcon, showIcon, selected]);
+
+  var useExpand = function useExpand(value) {
+    var _React$useState = React.useState(value),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        expand = _React$useState2[0],
+        setExpand = _React$useState2[1];
+
+    var setExpandState = function setExpandState(value) {
+      return setExpand(value);
+    };
+
+    useEffect(function () {
+      setExpand(value);
+    }, [value]);
+    return [expand, setExpandState];
+  };
+
+  var dragRef = React.useRef(null);
+
+  var _useExpand = useExpand(expand),
+      _useExpand2 = _slicedToArray(_useExpand, 2),
+      expandState = _useExpand2[0],
+      setExpandState = _useExpand2[1];
+
+  var _React$useState3 = React.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      showDragLine = _React$useState4[0],
+      setShowDragLine = _React$useState4[1];
+
+  var _React$useState5 = React.useState(false),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      forbiddenChildrenPointerEvents = _React$useState6[0],
+      setForbiddenChildrenPointerEvents = _React$useState6[1];
+
+  var treeNodePrefixCls = getPrefixCls(prefixCls, 'tree-node', customPrefixcls); // 按钮样式前缀
+
+  var renderIcon = function renderIcon(icon) {
+    if (typeof icon === 'function') {
+      var nodeProps = {
+        selectable: selectable,
+        checkable: checkable,
+        disabled: disabled,
+        title: title,
+        draggable: draggable,
+        checked: checked,
+        hasChildNode: hasChildNode,
+        expand: expand,
+        nodeKey: nodeKey,
+        icon: icon,
+        switcherIcon: switcherIcon,
+        showIcon: showIcon,
+        selected: selected,
+        indeterminate: indeterminate
+      };
+      return icon(_extends({}, nodeProps));
+    }
+
+    return icon;
+  };
+
+  var indent = function indent() {
+    var _classNames;
+
+    var indentArr = [];
+    var className = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(treeNodePrefixCls, "-indent"), true), _defineProperty(_classNames, "".concat(treeNodePrefixCls, "-indent-line"), !!showLine), _classNames));
+
+    for (var i = 0; i < level; i++) {
+      indentArr.push( /*#__PURE__*/React.createElement("span", {
+        className: className,
+        key: i,
+        style: {
+          height: "".concat(estimatedItemSize)
+        }
+      }, "\xA0\xA0\xA0\xA0"));
+    }
+
+    return indentArr;
+  }; // line的两种模式， 图标被替换和图标不被替换
+
+
+  var renderExpandIcon = function renderExpandIcon() {
+    // todo 图标被替换则 line样式改变
+    // if(switcherIcon){
+    // }
+    if (hasChildNode) {
+      var _classNames2;
+
+      // todo    showLine模式 使用+ -符号图标
+      // if(!!showLine){
+      //   return (
+      //     <span
+      //     onClick={handleClick}
+      //     className={classNames(`${treeNodePrefixCls}-icon`)}
+      //   >
+      //     {expand ? <Icon type='search' /> : <Icon type='add' />}
+      //   </span>
+      //   )
+      // }
+      if (Array.isArray(switcherIcon) && switcherIcon.length === 2) {
+        return /*#__PURE__*/React.createElement("span", {
+          className: classNames("".concat(treeNodePrefixCls, "-icon"))
+        }, expandState ? renderIcon(switcherIcon[1]) : renderIcon(switcherIcon[0]));
+      }
+
+      return /*#__PURE__*/React.createElement("span", {
+        className: classNames("".concat(treeNodePrefixCls, "-icon"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(treeNodePrefixCls, "-animation-expand"), expandState), _defineProperty(_classNames2, "".concat(treeNodePrefixCls, "-animation-collapse"), !expandState), _classNames2))
+      }, renderIcon(switcherIcon || /*#__PURE__*/React.createElement(Icon, {
+        type: "arrow-right-solid"
+      })));
+    } else {
+      // if(typeof showLine === 'object' && !showLine.showLeafIcon){
+      //   return (
+      //     <span
+      //       className={classNames(`${treeNodePrefixCls}-icon-hidden`)}
+      //     >
+      //       {/* todo  renderLeafLine() */}
+      //       {renderIcon(leafIcon)}
+      //     </span>
+      //   )
+      // }else if(typeof showLine === 'object' && showLine.showLeafIcon || showLine === true){
+      //   return (
+      //     <span
+      //       className={classNames(`${treeNodePrefixCls}-leaf-icon`)}
+      //     >
+      //       {renderIcon(leafIcon)}
+      //     </span>
+      //   )
+      // }
+      // 叶子结点 隐藏展开按钮
+      return /*#__PURE__*/React.createElement("span", {
+        className: "".concat(treeNodePrefixCls, "-icon-hidden")
+      });
+    }
+  };
+
+  var renderNodeIcon = function renderNodeIcon() {
+    return /*#__PURE__*/React.createElement("span", {
+      className: "".concat(treeNodePrefixCls, "-leaf-icon")
+    }, renderIcon(icon));
+  };
+
+  var renderNode = function renderNode() {
+    var _classNames3;
+
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      draggable: draggable && !disabled,
+      className: classNames((_classNames3 = {}, _defineProperty(_classNames3, "".concat(treeNodePrefixCls, "-draggabled"), true), _defineProperty(_classNames3, "".concat(treeNodePrefixCls, "-root"), true), _defineProperty(_classNames3, "".concat(treeNodePrefixCls, "-fb-children-pointerEvents"), forbiddenChildrenPointerEvents), _classNames3)),
+      onDragStart: handleDragStart,
+      onDragEnd: handleDragEnd,
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDragEnter: handleDragEnter,
+      onDrop: handleDrop,
+      ref: dragRef
+    }, indent(), renderExpandIcon(), showIcon && renderNodeIcon(), checkable ? /*#__PURE__*/React.createElement(Checkbox, {
+      onChange: handleOnchange,
+      checked: checked,
+      indeterminate: !disabled && indeterminate,
+      disabled: disabled
+    }, /*#__PURE__*/React.createElement("span", {
+      className: classNames("".concat(treeNodePrefixCls, "-title"), _defineProperty({}, "".concat(treeNodePrefixCls, "-title-disabled"), disabled))
+    }, title)) : /*#__PURE__*/React.createElement("span", {
+      className: classNames("".concat(treeNodePrefixCls, "-title"), _defineProperty({}, "".concat(treeNodePrefixCls, "-title-disabled"), disabled))
+    }, title), showDragLine && /*#__PURE__*/React.createElement("span", {
+      className: classNames("".concat(treeNodePrefixCls, "-drag-line"))
+    })));
+  };
+
+  var handleOnchange = React.useCallback(function (e) {
+    var value = e.target.checked;
+    onCheck && onCheck(nodeKey, value, nodeData, e, pos);
+  }, [onCheck, nodeKey, nodeData, pos]);
+  var handleSelect = React.useCallback(function (e) {
+    selectable && !disabled && onSelect && onSelect(e, nodeData, nodeKey);
+  }, [onSelect, selectable, disabled, nodeData, nodeKey]);
+  React.useImperativeHandle(ref, function () {
+    return {
+      selectNode: handleSelect
+    };
+  });
+  var handleClick = React.useCallback(function (e) {
+    e.stopPropagation();
+    setExpandState(!expandState);
+    onExpand && onExpand(nodeKey, !expandState, nodeData);
+    handleSelect(e);
+  }, [setExpandState, expandState, onExpand, nodeKey, nodeData, handleSelect]);
+  var handleDragStart = React.useCallback(function (e) {
+    if (!draggable) return;
+    setDragNode(nodeData);
+    onDragStart && onDragStart(e, props);
+  }, [onDragStart, nodeData, props, draggable]);
+  var handleDragOver = React.useCallback(function (e) {
+    if (!draggable) return;
+    e.preventDefault();
+    onDragOver && onDragOver(e, nodeData);
+  }, [onDragOver, nodeData, draggable]);
+  var handleDragLeave = React.useCallback(function (e) {
+    var _a;
+
+    if (!draggable) return;
+    if (!((_a = dragRef.current) === null || _a === void 0 ? void 0 : _a.isEqualNode(e.target))) return;
+    setForbiddenChildrenPointerEvents(false);
+    setShowDragLine(false);
+    onDragLeave && onDragLeave(e, nodeData);
+  }, [onDragLeave, nodeData, draggable]);
+  var handleDragEnter = React.useCallback(function (e) {
+    var _a;
+
+    if (!draggable) return;
+    setForbiddenChildrenPointerEvents(true);
+    if (!((_a = dragRef.current) === null || _a === void 0 ? void 0 : _a.isEqualNode(e.target))) return;
+    setShowDragLine(true);
+    onDragEnter && onDragEnter(e, nodeData);
+  }, [onDragEnter, nodeData, draggable]);
+  var handleDragEnd = React.useCallback(function (e) {
+    if (!draggable) return;
+    onDragEnd && onDragEnd(e, nodeData);
+    setDragNode(undefined);
+  }, [onDragEnd, nodeData, draggable]);
+  var handleDrop = React.useCallback(function (e) {
+    if (!draggable) return;
+    setShowDragLine(false);
+    var data = getDragNode();
+    var sourceKey = data === null || data === void 0 ? void 0 : data.key;
+
+    if (sourceKey) {
+      var targetKey = nodeKey;
+
+      if (targetKey !== sourceKey) {
+        onDrop && onDrop(e, nodeData, data, sourceKey);
+      }
+    }
+  }, [onDrop, nodeData, nodeKey]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(treeNodePrefixCls, "-item"), _defineProperty({}, "".concat(treeNodePrefixCls, "-item-hover"), !disabled && selectable), _defineProperty({}, "".concat(treeNodePrefixCls, "-selected"), selected && selectable && !disabled), _defineProperty({}, "".concat(treeNodePrefixCls, "-disabled"), disabled), _defineProperty({}, "".concat(treeNodePrefixCls, "-opened"), expandState), _concatInstanceProperty(_context = "".concat(treeNodePrefixCls, "-item-")).call(_context, nodeKey), className),
+    style: _extends({
+      height: "".concat(estimatedItemSize)
+    }, style),
+    onClick: handleClick
+  }, renderNode());
+});
+TreeNode.displayName = 'TreeNode';
+export default TreeNode;

package/es/tree/utils/treeUtils.d.ts

@@ -0,0 +1,46 @@
+import { TreeNodeData } from '../tree';
+/**
+ * 打平所有数组，并添加pos位置信息，
+ * 方便根据expandKeys等计算节点的expand，checkedKeys计算节点checked状态
+ * @param treeData [{key:'',title:'',children:[]}]
+ * @param newTreeData[{key:'',title:'',children:[], pos:'', hasChildNode, level}]
+ * @param level
+ * @param pos
+ */
+export declare const flattenAll: (treeData: any[], newTreeData?: TreeNodeData[], level?: number, pos?: string | undefined) => TreeNodeData[];
+export declare const getExpand: (expandedKeys: string[], key: string) => boolean;
+export declare const getChecked: (checkedKeys: string[], key: string) => boolean;
+export declare const getSelected: (selectedKeys: string[], key: string) => boolean;
+export declare const getHalfChecked: (halfCheckedKeys: string[], key: string) => boolean;
+export declare const getFilterData: (data: any[]) => any[];
+export declare const getMaxLevel: (data: any[]) => number;
+/**
+ *计算node的属性后返回新的 treedata
+ * @param treeData  打平后的treeData [{key:'',title:'',children:[], pos:''}]
+ * @param defaultExpandRoot
+ * @param expandedKeys
+ * @param defaultExpandAll
+ */
+export declare const getSpreadAttrData: (treeData: any[], expandedKeys: string[]) => any[];
+export declare const addKeys: (prevKeys?: string[], newKeys?: string[]) => string[];
+export declare const getAllParentKeys: (data: any[], pos?: string) => string[];
+export declare const getAllParentPos: (data: any[], pos?: string) => string[];
+export declare const getAllChildKeys: (data: any[], pos?: string) => string[];
+export declare const getPos: (data: any[], key: string) => any;
+export declare const getInitCheckedKeys: (data: any[], keys: string[]) => any[];
+export declare const getInitCheckededState: (data: any[], checkedKeys: string[] | undefined, maxLevel: number, init?: boolean) => {
+    checkedKeys: string[];
+    halfCheckedKeys: string[];
+};
+export declare const getDataCheckededState: (data: any[], checkedKeys: string[], halfCheckedKeys: string[], maxLevel: number, init: boolean | undefined, pos: string, value?: boolean | undefined) => {
+    checkedKeys: string[];
+    halfCheckedKeys: string[];
+};
+export declare const getDataCheckededStateStrictly: (checkedKeys: string[]) => {
+    checkedKeys: string[];
+    halfCheckedKeys: never[];
+};
+export declare const delKey: (prevKeys: string[], delKeys: string[]) => never[] & string[];
+export declare const getAllNodeKeys: (data: any[]) => string[];
+export declare const getInitExpandedKeys: (data: any[], expandedKeys: string[], defaultExpandedKeys: string[], defaultExpandAll: boolean, defaultExpandRoot: boolean, defaultExpandParent: boolean, expandScrollkeys?: string[]) => string[];
+export declare const getExpandedKeys: (expandedKeys: string[], expandScrollkeys?: string[]) => string[];