@fle-ui/next 2.0.0-alpha.3 → 2.0.0-alpha.6

package/lib/tree/DirectoryTree.js

@@ -0,0 +1,218 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _FileOutlined = _interopRequireDefault(require("@ant-design/icons/FileOutlined"));
+
+var _FolderOpenOutlined = _interopRequireDefault(require("@ant-design/icons/FolderOpenOutlined"));
+
+var _FolderOutlined = _interopRequireDefault(require("@ant-design/icons/FolderOutlined"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _util = require("rc-tree/lib/util");
+
+var _treeUtil = require("rc-tree/lib/utils/treeUtil");
+
+var React = _interopRequireWildcard(require("react"));
+
+var _configProvider = require("../config-provider");
+
+var _Tree = _interopRequireDefault(require("./Tree"));
+
+var _dictUtil = require("./utils/dictUtil");
+
+var __rest = void 0 && (void 0).__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;
+};
+
+function getIcon(props) {
+  var isLeaf = props.isLeaf,
+      expanded = props.expanded;
+
+  if (isLeaf) {
+    return /*#__PURE__*/React.createElement(_FileOutlined["default"], null);
+  }
+
+  return expanded ? /*#__PURE__*/React.createElement(_FolderOpenOutlined["default"], null) : /*#__PURE__*/React.createElement(_FolderOutlined["default"], null);
+}
+
+function getTreeData(_ref) {
+  var treeData = _ref.treeData,
+      children = _ref.children;
+  return treeData || (0, _treeUtil.convertTreeToData)(children);
+}
+
+var DirectoryTree = function DirectoryTree(_a, ref) {
+  var defaultExpandAll = _a.defaultExpandAll,
+      defaultExpandParent = _a.defaultExpandParent,
+      defaultExpandedKeys = _a.defaultExpandedKeys,
+      props = __rest(_a, ["defaultExpandAll", "defaultExpandParent", "defaultExpandedKeys"]); // Shift click usage
+
+
+  var lastSelectedKey = React.useRef();
+  var cachedSelectedKeys = React.useRef();
+
+  var getInitExpandedKeys = function getInitExpandedKeys() {
+    var _convertDataToEntitie = (0, _treeUtil.convertDataToEntities)(getTreeData(props)),
+        keyEntities = _convertDataToEntitie.keyEntities;
+
+    var initExpandedKeys; // Expanded keys
+
+    if (defaultExpandAll) {
+      initExpandedKeys = Object.keys(keyEntities);
+    } else if (defaultExpandParent) {
+      initExpandedKeys = (0, _util.conductExpandParent)(props.expandedKeys || defaultExpandedKeys || [], keyEntities);
+    } else {
+      initExpandedKeys = props.expandedKeys || defaultExpandedKeys;
+    }
+
+    return initExpandedKeys;
+  };
+
+  var _React$useState = React.useState(props.selectedKeys || props.defaultSelectedKeys || []),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      selectedKeys = _React$useState2[0],
+      setSelectedKeys = _React$useState2[1];
+
+  var _React$useState3 = React.useState(function () {
+    return getInitExpandedKeys();
+  }),
+      _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+      expandedKeys = _React$useState4[0],
+      setExpandedKeys = _React$useState4[1];
+
+  React.useEffect(function () {
+    if ('selectedKeys' in props) {
+      setSelectedKeys(props.selectedKeys);
+    }
+  }, [props.selectedKeys]);
+  React.useEffect(function () {
+    if ('expandedKeys' in props) {
+      setExpandedKeys(props.expandedKeys);
+    }
+  }, [props.expandedKeys]);
+
+  var onExpand = function onExpand(keys, info) {
+    var _a;
+
+    if (!('expandedKeys' in props)) {
+      setExpandedKeys(keys);
+    } // Call origin function
+
+
+    return (_a = props.onExpand) === null || _a === void 0 ? void 0 : _a.call(props, keys, info);
+  };
+
+  var onSelect = function onSelect(keys, event) {
+    var _a;
+
+    var multiple = props.multiple;
+    var node = event.node,
+        nativeEvent = event.nativeEvent;
+    var _node$key = node.key,
+        key = _node$key === void 0 ? '' : _node$key;
+    var treeData = getTreeData(props); // const newState: DirectoryTreeState = {};
+    // We need wrap this event since some value is not same
+
+    var newEvent = (0, _extends2["default"])((0, _extends2["default"])({}, event), {
+      selected: true
+    }); // Windows / Mac single pick
+
+    var ctrlPick = (nativeEvent === null || nativeEvent === void 0 ? void 0 : nativeEvent.ctrlKey) || (nativeEvent === null || nativeEvent === void 0 ? void 0 : nativeEvent.metaKey);
+    var shiftPick = nativeEvent === null || nativeEvent === void 0 ? void 0 : nativeEvent.shiftKey; // Generate new selected keys
+
+    var newSelectedKeys;
+
+    if (multiple && ctrlPick) {
+      // Control click
+      newSelectedKeys = keys;
+      lastSelectedKey.current = key;
+      cachedSelectedKeys.current = newSelectedKeys;
+      newEvent.selectedNodes = (0, _dictUtil.convertDirectoryKeysToNodes)(treeData, newSelectedKeys);
+    } else if (multiple && shiftPick) {
+      // Shift click
+      newSelectedKeys = Array.from(new Set([].concat((0, _toConsumableArray2["default"])(cachedSelectedKeys.current || []), (0, _toConsumableArray2["default"])((0, _dictUtil.calcRangeKeys)({
+        treeData: treeData,
+        expandedKeys: expandedKeys,
+        startKey: key,
+        endKey: lastSelectedKey.current
+      })))));
+      newEvent.selectedNodes = (0, _dictUtil.convertDirectoryKeysToNodes)(treeData, newSelectedKeys);
+    } else {
+      // Single click
+      newSelectedKeys = [key];
+      lastSelectedKey.current = key;
+      cachedSelectedKeys.current = newSelectedKeys;
+      newEvent.selectedNodes = (0, _dictUtil.convertDirectoryKeysToNodes)(treeData, newSelectedKeys);
+    }
+
+    (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, newSelectedKeys, newEvent);
+
+    if (!('selectedKeys' in props)) {
+      setSelectedKeys(newSelectedKeys);
+    }
+  };
+
+  var _React$useContext = React.useContext(_configProvider.ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls,
+      direction = _React$useContext.direction;
+
+  var customizePrefixCls = props.prefixCls,
+      className = props.className,
+      _props$showIcon = props.showIcon,
+      showIcon = _props$showIcon === void 0 ? true : _props$showIcon,
+      _props$expandAction = props.expandAction,
+      expandAction = _props$expandAction === void 0 ? 'click' : _props$expandAction,
+      otherProps = __rest(props, ["prefixCls", "className", "showIcon", "expandAction"]);
+
+  var prefixCls = getPrefixCls('tree', customizePrefixCls);
+  var connectClassName = (0, _classnames["default"])("".concat(prefixCls, "-directory"), (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-directory-rtl"), direction === 'rtl'), className);
+  return /*#__PURE__*/React.createElement(_Tree["default"], (0, _extends2["default"])({
+    icon: getIcon,
+    ref: ref,
+    blockNode: true
+  }, otherProps, {
+    showIcon: showIcon,
+    expandAction: expandAction,
+    prefixCls: prefixCls,
+    className: connectClassName,
+    expandedKeys: expandedKeys,
+    selectedKeys: selectedKeys,
+    onSelect: onSelect,
+    onExpand: onExpand
+  }));
+};
+
+var ForwardDirectoryTree = /*#__PURE__*/React.forwardRef(DirectoryTree);
+
+if (process.env.NODE_ENV !== 'production') {
+  ForwardDirectoryTree.displayName = 'DirectoryTree';
+}
+
+var _default = ForwardDirectoryTree;
+exports["default"] = _default;

package/lib/tree/Tree.d.ts

@@ -0,0 +1,133 @@
+import type { BasicDataNode, TreeProps as RcTreeProps } from 'rc-tree';
+import RcTree from 'rc-tree';
+import type { DataNode, Key } from 'rc-tree/lib/interface';
+import * as React from 'react';
+export type SwitcherIcon = React.ReactNode | ((props: AntTreeNodeProps) => React.ReactNode);
+export type TreeLeafIcon = React.ReactNode | ((props: AntTreeNodeProps) => React.ReactNode);
+export interface AntdTreeNodeAttribute {
+    eventKey: string;
+    prefixCls: string;
+    className: string;
+    expanded: boolean;
+    selected: boolean;
+    checked: boolean;
+    halfChecked: boolean;
+    children: React.ReactNode;
+    title: React.ReactNode;
+    pos: string;
+    dragOver: boolean;
+    dragOverGapTop: boolean;
+    dragOverGapBottom: boolean;
+    isLeaf: boolean;
+    selectable: boolean;
+    disabled: boolean;
+    disableCheckbox: boolean;
+}
+export interface AntTreeNodeProps {
+    className?: string;
+    checkable?: boolean;
+    disabled?: boolean;
+    disableCheckbox?: boolean;
+    title?: string | React.ReactNode;
+    key?: Key;
+    eventKey?: string;
+    isLeaf?: boolean;
+    checked?: boolean;
+    expanded?: boolean;
+    loading?: boolean;
+    selected?: boolean;
+    selectable?: boolean;
+    icon?: ((treeNode: AntdTreeNodeAttribute) => React.ReactNode) | React.ReactNode;
+    children?: React.ReactNode;
+    [customProp: string]: any;
+}
+export interface AntTreeNode extends React.Component<AntTreeNodeProps, {}> {
+}
+export interface AntTreeNodeBaseEvent {
+    node: AntTreeNode;
+    nativeEvent: MouseEvent;
+}
+export interface AntTreeNodeCheckedEvent extends AntTreeNodeBaseEvent {
+    event: 'check';
+    checked?: boolean;
+    checkedNodes?: AntTreeNode[];
+}
+export interface AntTreeNodeSelectedEvent extends AntTreeNodeBaseEvent {
+    event: 'select';
+    selected?: boolean;
+    selectedNodes?: DataNode[];
+}
+export interface AntTreeNodeExpandedEvent extends AntTreeNodeBaseEvent {
+    expanded?: boolean;
+}
+export interface AntTreeNodeMouseEvent {
+    node: AntTreeNode;
+    event: React.DragEvent<HTMLElement>;
+}
+export interface AntTreeNodeDragEnterEvent extends AntTreeNodeMouseEvent {
+    expandedKeys: Key[];
+}
+export interface AntTreeNodeDropEvent {
+    node: AntTreeNode;
+    dragNode: AntTreeNode;
+    dragNodesKeys: Key[];
+    dropPosition: number;
+    dropToGap?: boolean;
+    event: React.MouseEvent<HTMLElement>;
+}
+export type TreeNodeNormal = DataNode;
+type DraggableFn = (node: DataNode) => boolean;
+interface DraggableConfig {
+    icon?: React.ReactNode | false;
+    nodeDraggable?: DraggableFn;
+}
+export interface TreeProps<T extends BasicDataNode = DataNode> extends Omit<RcTreeProps<T>, 'prefixCls' | 'showLine' | 'direction' | 'draggable' | 'icon' | 'switcherIcon'> {
+    showLine?: boolean | {
+        showLeafIcon: boolean | TreeLeafIcon;
+    };
+    className?: string;
+    /** 是否支持多选 */
+    multiple?: boolean;
+    /** 是否自动展开父节点 */
+    autoExpandParent?: boolean;
+    /** Checkable状态下节点选择完全受控（父子节点选中状态不再关联） */
+    checkStrictly?: boolean;
+    /** 是否支持选中 */
+    checkable?: boolean;
+    /** 是否禁用树 */
+    disabled?: boolean;
+    /** 默认展开所有树节点 */
+    defaultExpandAll?: boolean;
+    /** 默认展开对应树节点 */
+    defaultExpandParent?: boolean;
+    /** 默认展开指定的树节点 */
+    defaultExpandedKeys?: Key[];
+    /** （受控）展开指定的树节点 */
+    expandedKeys?: Key[];
+    /** （受控）选中复选框的树节点 */
+    checkedKeys?: Key[] | {
+        checked: Key[];
+        halfChecked: Key[];
+    };
+    /** 默认选中复选框的树节点 */
+    defaultCheckedKeys?: Key[];
+    /** （受控）设置选中的树节点 */
+    selectedKeys?: Key[];
+    /** 默认选中的树节点 */
+    defaultSelectedKeys?: Key[];
+    selectable?: boolean;
+    /** 点击树节点触发 */
+    filterAntTreeNode?: (node: AntTreeNode) => boolean;
+    loadedKeys?: Key[];
+    /** 设置节点可拖拽（IE>8） */
+    draggable?: DraggableFn | boolean | DraggableConfig;
+    style?: React.CSSProperties;
+    showIcon?: boolean;
+    icon?: ((nodeProps: AntdTreeNodeAttribute) => React.ReactNode) | React.ReactNode | RcTreeProps<T>['icon'];
+    switcherIcon?: SwitcherIcon | RcTreeProps<T>['switcherIcon'];
+    prefixCls?: string;
+    children?: React.ReactNode;
+    blockNode?: boolean;
+}
+declare const Tree: React.ForwardRefExoticComponent<TreeProps<DataNode> & React.RefAttributes<RcTree<DataNode>>>;
+export default Tree;

package/lib/tree/Tree.js

@@ -0,0 +1,116 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _HolderOutlined = _interopRequireDefault(require("@ant-design/icons/HolderOutlined"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _rcTree = _interopRequireDefault(require("rc-tree"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _configProvider = require("../config-provider");
+
+var _motion = _interopRequireDefault(require("../_util/motion"));
+
+var _dropIndicator = _interopRequireDefault(require("./utils/dropIndicator"));
+
+var _iconUtil = _interopRequireDefault(require("./utils/iconUtil"));
+
+var Tree = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _classNames;
+
+  var _React$useContext = React.useContext(_configProvider.ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls,
+      direction = _React$useContext.direction,
+      virtual = _React$useContext.virtual;
+
+  var customizePrefixCls = props.prefixCls,
+      className = props.className,
+      _props$showIcon = props.showIcon,
+      showIcon = _props$showIcon === void 0 ? false : _props$showIcon,
+      showLine = props.showLine,
+      _switcherIcon = props.switcherIcon,
+      _props$blockNode = props.blockNode,
+      blockNode = _props$blockNode === void 0 ? false : _props$blockNode,
+      children = props.children,
+      _props$checkable = props.checkable,
+      checkable = _props$checkable === void 0 ? false : _props$checkable,
+      _props$selectable = props.selectable,
+      selectable = _props$selectable === void 0 ? true : _props$selectable,
+      draggable = props.draggable,
+      _props$motion = props.motion,
+      motion = _props$motion === void 0 ? (0, _extends2["default"])((0, _extends2["default"])({}, _motion["default"]), {
+    motionAppear: false
+  }) : _props$motion;
+  var prefixCls = getPrefixCls('tree', customizePrefixCls);
+  var newProps = (0, _extends2["default"])((0, _extends2["default"])({}, props), {
+    checkable: checkable,
+    selectable: selectable,
+    showIcon: showIcon,
+    motion: motion,
+    blockNode: blockNode,
+    showLine: Boolean(showLine),
+    dropIndicatorRender: _dropIndicator["default"]
+  });
+  var draggableConfig = React.useMemo(function () {
+    if (!draggable) {
+      return false;
+    }
+
+    var mergedDraggable = {};
+
+    switch ((0, _typeof2["default"])(draggable)) {
+      case 'function':
+        mergedDraggable.nodeDraggable = draggable;
+        break;
+
+      case 'object':
+        mergedDraggable = (0, _extends2["default"])({}, draggable);
+        break;
+
+      default:
+        break;
+      // Do nothing
+    }
+
+    if (mergedDraggable.icon !== false) {
+      mergedDraggable.icon = mergedDraggable.icon || /*#__PURE__*/React.createElement(_HolderOutlined["default"], null);
+    }
+
+    return mergedDraggable;
+  }, [draggable]);
+  return /*#__PURE__*/React.createElement(_rcTree["default"], (0, _extends2["default"])({
+    itemHeight: 20,
+    ref: ref,
+    virtual: virtual
+  }, newProps, {
+    prefixCls: prefixCls,
+    className: (0, _classnames["default"])((_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-icon-hide"), !showIcon), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-block-node"), blockNode), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-unselectable"), !selectable), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _classNames), className),
+    direction: direction,
+    checkable: checkable ? /*#__PURE__*/React.createElement("span", {
+      className: "".concat(prefixCls, "-checkbox-inner")
+    }) : checkable,
+    selectable: selectable,
+    switcherIcon: function switcherIcon(nodeProps) {
+      return (0, _iconUtil["default"])(prefixCls, _switcherIcon, showLine, nodeProps);
+    },
+    draggable: draggableConfig
+  }), children);
+});
+var _default = Tree;
+exports["default"] = _default;

package/lib/tree/index.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import type RcTree from 'rc-tree';
+import { TreeNode } from 'rc-tree';
+import type { BasicDataNode } from 'rc-tree';
+import type { DataNode } from 'rc-tree/lib/interface';
+import type { TreeProps } from './Tree';
+import DirectoryTree from './DirectoryTree';
+export { DataNode };
+export { EventDataNode } from 'rc-tree/lib/interface';
+export { DirectoryTreeProps, ExpandAction as DirectoryTreeExpandAction } from './DirectoryTree';
+export { AntdTreeNodeAttribute, AntTreeNode, AntTreeNodeCheckedEvent, AntTreeNodeExpandedEvent, AntTreeNodeMouseEvent, AntTreeNodeProps, AntTreeNodeSelectedEvent, TreeProps, } from './Tree';
+type CompoundedComponent = (<T extends BasicDataNode | DataNode = DataNode>(props: React.PropsWithChildren<TreeProps<T>> & {
+    ref?: React.Ref<RcTree>;
+}) => React.ReactElement) & {
+    TreeNode: typeof TreeNode;
+    DirectoryTree: typeof DirectoryTree;
+};
+declare const Tree: CompoundedComponent;
+export default Tree;

package/lib/tree/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _rcTree = require("rc-tree");
+
+var _Tree = _interopRequireDefault(require("./Tree"));
+
+var _DirectoryTree = _interopRequireDefault(require("./DirectoryTree"));
+
+var Tree = _Tree["default"];
+Tree.DirectoryTree = _DirectoryTree["default"];
+Tree.TreeNode = _rcTree.TreeNode;
+var _default = Tree;
+exports["default"] = _default;

package/lib/tree/style/css.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("../../style/default.css");
+
+require("./index.css");

package/lib/tree/style/directory.less

@@ -0,0 +1,72 @@
+@import '../../style/themes/index';
+
+@tree-prefix-cls: ~'@{ant-prefix}-tree';
+
+.@{tree-prefix-cls}.@{tree-prefix-cls}-directory {
+  // ================== TreeNode ==================
+  .@{tree-prefix-cls}-treenode {
+    position: relative;
+
+    // Hover color
+    &::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 4px;
+      left: 0;
+      transition: background-color 0.3s;
+      content: '';
+      pointer-events: none;
+    }
+
+    &:hover {
+      &::before {
+        background: @item-hover-bg;
+      }
+    }
+
+    // Elements
+    > * {
+      z-index: 1;
+    }
+
+    // >>> Switcher
+    .@{tree-prefix-cls}-switcher {
+      transition: color 0.3s;
+    }
+
+    // >>> Title
+    .@{tree-prefix-cls}-node-content-wrapper {
+      border-radius: 0;
+      user-select: none;
+
+      &:hover {
+        background: transparent;
+      }
+
+      &.@{tree-prefix-cls}-node-selected {
+        color: @tree-directory-selected-color;
+        background: transparent;
+      }
+    }
+
+    // ============= Selected =============
+    &-selected {
+      &:hover::before,
+      &::before {
+        background: @tree-directory-selected-bg;
+      }
+
+      // >>> Switcher
+      .@{tree-prefix-cls}-switcher {
+        color: @tree-directory-selected-color;
+      }
+
+      // >>> Title
+      .@{tree-prefix-cls}-node-content-wrapper {
+        color: @tree-directory-selected-color;
+        background: transparent;
+      }
+    }
+  }
+}

package/lib/tree/style/index-pure.less

@@ -0,0 +1,16 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+@import '../../checkbox/style/mixin';
+@import './mixin';
+@import './directory';
+
+@tree-prefix-cls: ~'@{ant-prefix}-tree';
+@tree-node-prefix-cls: ~'@{tree-prefix-cls}-treenode';
+
+.antCheckboxFn(@checkbox-prefix-cls: ~'@{ant-prefix}-tree-checkbox');
+
+.@{tree-prefix-cls} {
+  .antTreeFn(@tree-prefix-cls);
+}
+
+@import './rtl';