@douyinfe/semi-ui 2.1.1 → 2.1.2

package/lib/cjs/tree/autoSizer.js

@@ -0,0 +1,115 @@
+"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 _parseInt2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/parse-int"));
+
+var _get2 = _interopRequireDefault(require("lodash/get"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/tree/constants");
+
+var _resizeObserver = _interopRequireDefault(require("../resizeObserver"));
+
+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 prefixcls = _constants.cssClasses.PREFIX;
+
+class AutoSizer extends _react.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this._onResize = entries => {
+      // observe parent node height
+      const target = entries && entries[1] && entries[1].target;
+
+      if (target) {
+        const height = (0, _get2.default)(target, 'offsetHeight') || 0;
+        const style = window.getComputedStyle(target) || {};
+        const paddingTop = (0, _parseInt2.default)((0, _get2.default)(style, 'paddingTop'), 10) || 0;
+        const paddingBottom = (0, _parseInt2.default)((0, _get2.default)(style, 'paddingBottom'), 10) || 0;
+        const newHeight = height - paddingTop - paddingBottom;
+
+        if (this.state.height !== newHeight) {
+          this.setState({
+            height: height - paddingTop - paddingBottom
+          });
+        }
+      }
+    };
+
+    this.state = {
+      height: this.props.defaultHeight || 0
+    };
+  }
+
+  componentDidMount() {
+    const {
+      height
+    } = this.state; // if height is a number, pass it directly to virtual-list
+
+    if (typeof height === 'number') {
+      return;
+    }
+  }
+
+  render() {
+    const {
+      children,
+      defaultWidth,
+      defaultHeight
+    } = this.props;
+    const {
+      height
+    } = this.state; // Avoid rendering children before the initial measurements have been collected.
+    // At best this would just be wasting cycles. Refer to https://github.com/bvaughn/react-virtualized-auto-sizer/
+
+    let bailoutOnChildren = false;
+
+    if (height === 0 || typeof height !== 'number') {
+      bailoutOnChildren = true;
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_resizeObserver.default, {
+      observeParent: true,
+      onResize: this._onResize
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        height: defaultHeight,
+        overflow: 'visible'
+      },
+      className: "".concat(prefixcls, "-auto-wrapper")
+    }, !bailoutOnChildren && children({
+      height,
+      width: defaultWidth
+    })));
+  }
+
+}
+
+exports.default = AutoSizer;
+AutoSizer.propTypes = {
+  defaultHeight: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  defaultWidth: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
+};
+AutoSizer.defaultProps = {
+  defaultHeight: '100%',
+  defaultWidth: '100%'
+};

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+export interface CollapseProps {
+    [x: string]: any;
+    motion?: boolean;
+    children?: React.ReactNode[];
+    duration?: number;
+    onMotionEnd?: () => void;
+    motionType?: string;
+}
+export interface TransitionStyle {
+    [x: string]: any;
+    maxHeight?: number;
+}
+declare const Collapse: {
+    (props: CollapseProps): JSX.Element;
+    propType: {
+        motion: PropTypes.Requireable<boolean | object>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        duration: PropTypes.Requireable<number>;
+        onMotionEnd: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    defaultProps: {
+        duration: number;
+        motion: boolean;
+        onMotionEnd: (...args: any[]) => void;
+    };
+};
+export default Collapse;

package/lib/cjs/tree/collapse.js

@@ -0,0 +1,164 @@
+"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 _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _noop2 = _interopRequireDefault(require("lodash/noop"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _semiAnimationReact = require("@douyinfe/semi-animation-react");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/collapsible/constants");
+
+var _getMotionObjFromProps = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/getMotionObjFromProps"));
+
+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; }
+
+/* eslint-disable arrow-body-style */
+const ease = 'cubicBezier(.25,.1,.25,1)';
+
+const Collapse = props => {
+  const {
+    motion,
+    children,
+    duration,
+    onMotionEnd,
+    motionType
+  } = props;
+  const ref = (0, _react.useRef)(null);
+  const [maxHeight, setMaxHeight] = (0, _react.useState)(0); // cache last state
+
+  const [open, setOpen] = (0, _react.useState)(true);
+  const [left, setLeft] = (0, _react.useState)(false);
+  const [immediateAttr, setImmediateAttr] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    if (motionType === 'enter') {
+      !open && setOpen(true);
+      left && setLeft(false);
+    } else if (motionType === 'leave') {
+      !open && setOpen(true);
+      !immediateAttr && setImmediateAttr(true);
+      left && setLeft(false);
+    }
+  }, [motionType]);
+  const setHeight = (0, _react.useCallback)(node => {
+    const currHeight = node && node.scrollHeight;
+
+    if (currHeight && maxHeight !== currHeight) {
+      setMaxHeight(currHeight);
+    }
+  }, [left]);
+
+  const resetHeight = () => {
+    ref.current.style.maxHeight = 'none';
+  };
+
+  const formatStyle = style => {
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    const {
+      maxHeight
+    } = style;
+    return {
+      maxHeight
+    };
+  };
+
+  const renderChildren = transitionStyle => {
+    const transition = transitionStyle && typeof transitionStyle === 'object' ? formatStyle(transitionStyle) : {};
+    const style = (0, _assign.default)({
+      overflow: 'hidden',
+      maxHeight: open ? 'none' : 0
+    }, transition);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: style,
+      className: "".concat(_constants.cssClasses.PREFIX, "-wrapper"),
+      ref: ref
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      ref: setHeight
+    }, children));
+  };
+
+  const didLeave = () => {
+    setLeft(true);
+    setMaxHeight(0);
+    motionType === 'leave' && onMotionEnd();
+  };
+
+  const onImmediateEnter = () => {
+    open && setOpen(false);
+    setImmediateAttr(false);
+  };
+
+  const didEnter = () => {
+    resetHeight();
+    immediateAttr && onImmediateEnter();
+    motionType === 'enter' && onMotionEnd();
+  };
+
+  const renderContent = () => {
+    if (left) {
+      return null;
+    }
+
+    const mergeMotion = (0, _getMotionObjFromProps.default)({
+      didEnter,
+      didLeave,
+      motion
+    });
+    return motion ? /*#__PURE__*/_react.default.createElement(_semiAnimationReact.Transition, (0, _assign.default)({
+      state: open ? 'enter' : 'leave',
+      immediate: immediateAttr,
+      from: {
+        maxHeight: 0
+      },
+      enter: {
+        maxHeight: {
+          val: maxHeight,
+          easing: ease,
+          duration
+        }
+      },
+      leave: {
+        maxHeight: {
+          val: 0,
+          easing: ease,
+          duration
+        }
+      }
+    }, mergeMotion), transitionStyle => renderChildren(transitionStyle)) : renderChildren(null);
+  };
+
+  return renderContent();
+};
+
+Collapse.propType = {
+  motion: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.func, _propTypes.default.object]),
+  children: _propTypes.default.node,
+  duration: _propTypes.default.number,
+  onMotionEnd: _propTypes.default.func
+};
+Collapse.defaultProps = {
+  duration: 250,
+  motion: true,
+  onMotionEnd: _noop2.default
+};
+var _default = Collapse;
+exports.default = _default;

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

@@ -0,0 +1,135 @@
+import React, { MouseEvent } from 'react';
+import PropTypes from 'prop-types';
+import { TreeAdapter } from '@douyinfe/semi-foundation/lib/cjs/tree/foundation';
+import BaseComponent from '../_base/baseComponent';
+import Input from '../input/index';
+import TreeNode from './treeNode';
+import '@douyinfe/semi-foundation/lib/cjs/tree/tree.css';
+import { TreeProps, TreeState, TreeNodeProps, TreeNodeData, FlattenNode, KeyEntity } from './interface';
+export * from './interface';
+export { AutoSizerProps } from './autoSizer';
+declare class Tree extends BaseComponent<TreeProps, TreeState> {
+    static contextType: React.Context<import("../configProvider/context").ContextValue>;
+    static propTypes: {
+        blockNode: PropTypes.Requireable<boolean>;
+        className: PropTypes.Requireable<string>;
+        showClear: PropTypes.Requireable<boolean>;
+        defaultExpandAll: PropTypes.Requireable<boolean>;
+        defaultExpandedKeys: PropTypes.Requireable<any[]>;
+        defaultValue: PropTypes.Requireable<string | any[]>;
+        directory: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        emptyContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        expandAll: PropTypes.Requireable<boolean>;
+        expandedKeys: PropTypes.Requireable<any[]>;
+        filterTreeNode: PropTypes.Requireable<boolean | ((...args: any[]) => any)>;
+        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        onChangeWithObject: PropTypes.Requireable<boolean>;
+        motion: PropTypes.Requireable<boolean>;
+        multiple: PropTypes.Requireable<boolean>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onExpand: PropTypes.Requireable<(...args: any[]) => any>;
+        onSearch: PropTypes.Requireable<(...args: any[]) => any>;
+        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
+        onContextMenu: PropTypes.Requireable<(...args: any[]) => any>;
+        onDoubleClick: PropTypes.Requireable<(...args: any[]) => any>;
+        searchClassName: PropTypes.Requireable<string>;
+        searchPlaceholder: PropTypes.Requireable<string>;
+        searchStyle: PropTypes.Requireable<object>;
+        selectedKey: PropTypes.Requireable<string>;
+        showFilteredOnly: PropTypes.Requireable<boolean>;
+        style: PropTypes.Requireable<object>;
+        treeData: PropTypes.Requireable<PropTypes.InferProps<{
+            key: PropTypes.Validator<string>;
+            value: PropTypes.Requireable<string | number>;
+            label: PropTypes.Requireable<any>;
+            isLeaf: PropTypes.Requireable<boolean>;
+        }>[]>;
+        treeDataSimpleJson: PropTypes.Requireable<object>;
+        treeNodeFilterProp: PropTypes.Requireable<string>;
+        value: PropTypes.Requireable<string | number | object>;
+        virtualize: PropTypes.Requireable<object>;
+        autoExpandParent: PropTypes.Requireable<boolean>;
+        expandAction: PropTypes.Requireable<string | boolean>;
+        searchRender: PropTypes.Requireable<boolean | ((...args: any[]) => any)>;
+        renderLabel: PropTypes.Requireable<(...args: any[]) => any>;
+        renderFullLabel: PropTypes.Requireable<(...args: any[]) => any>;
+        leafOnly: PropTypes.Requireable<boolean>;
+        loadedKeys: PropTypes.Requireable<any[]>;
+        loadData: PropTypes.Requireable<(...args: any[]) => any>;
+        onLoad: PropTypes.Requireable<(...args: any[]) => any>;
+        disableStrictly: PropTypes.Requireable<boolean>;
+        draggable: PropTypes.Requireable<boolean>;
+        autoExpandWhenDragEnter: PropTypes.Requireable<boolean>;
+        hideDraggingNode: PropTypes.Requireable<boolean>;
+        renderDraggingNode: PropTypes.Requireable<(...args: any[]) => any>;
+        onDragEnd: PropTypes.Requireable<(...args: any[]) => any>;
+        onDragEnter: PropTypes.Requireable<(...args: any[]) => any>;
+        onDragLeave: PropTypes.Requireable<(...args: any[]) => any>;
+        onDragOver: PropTypes.Requireable<(...args: any[]) => any>;
+        onDragStart: PropTypes.Requireable<(...args: any[]) => any>;
+        onDrop: PropTypes.Requireable<(...args: any[]) => any>;
+        labelEllipsis: PropTypes.Requireable<boolean>;
+    };
+    static defaultProps: {
+        showClear: boolean;
+        disabled: boolean;
+        blockNode: boolean;
+        multiple: boolean;
+        filterTreeNode: boolean;
+        autoExpandParent: boolean;
+        treeNodeFilterProp: string;
+        defaultExpandAll: boolean;
+        expandAll: boolean;
+        onChangeWithObject: boolean;
+        motion: boolean;
+        leafOnly: boolean;
+        showFilteredOnly: boolean;
+        expandAction: boolean;
+        disableStrictly: boolean;
+        draggable: boolean;
+        autoExpandWhenDragEnter: boolean;
+    };
+    static TreeNode: typeof TreeNode;
+    inputRef: React.RefObject<typeof Input>;
+    optionsRef: React.RefObject<any>;
+    dragNode: any;
+    onNodeClick: any;
+    onMotionEnd: any;
+    constructor(props: TreeProps);
+    /**
+     * Process of getDerivedStateFromProps was inspired by rc-tree
+     * https://github.com/react-component/tree
+     */
+    static getDerivedStateFromProps(props: TreeProps, prevState: TreeState): Partial<TreeState>;
+    get adapter(): TreeAdapter;
+    search: (value: string) => void;
+    renderInput(): JSX.Element;
+    renderEmpty: () => JSX.Element;
+    onNodeSelect: (e: MouseEvent, treeNode: TreeNodeProps) => void;
+    onNodeLoad: (data: TreeNodeData) => Promise<unknown>;
+    onNodeCheck: (e: MouseEvent, treeNode: TreeNodeProps) => void;
+    onNodeExpand: (e: MouseEvent, treeNode: TreeNodeProps) => void;
+    onNodeRightClick: (e: MouseEvent, treeNode: TreeNodeProps) => void;
+    onNodeDoubleClick: (e: MouseEvent, treeNode: TreeNodeProps) => void;
+    onNodeDragStart: (e: React.DragEvent<HTMLDivElement>, treeNode: TreeNodeProps) => void;
+    onNodeDragEnter: (e: React.DragEvent<HTMLDivElement>, treeNode: TreeNodeProps) => void;
+    onNodeDragOver: (e: React.DragEvent<HTMLDivElement>, treeNode: TreeNodeProps) => void;
+    onNodeDragLeave: (e: React.DragEvent<HTMLDivElement>, treeNode: TreeNodeProps) => void;
+    onNodeDragEnd: (e: React.DragEvent<HTMLDivElement>, treeNode: TreeNodeProps) => void;
+    onNodeDrop: (e: React.DragEvent<HTMLDivElement>, treeNode: TreeNodeProps) => void;
+    getTreeNodeRequiredProps: () => {
+        expandedKeys: Set<string>;
+        selectedKeys: string[];
+        checkedKeys: Set<string>;
+        halfCheckedKeys: Set<string>;
+        filteredKeys: Set<string>;
+        keyEntities: import("./interface").KeyEntities;
+    };
+    getTreeNodeKey: (treeNode: TreeNodeData) => any;
+    renderTreeNode: (treeNode: FlattenNode, ind?: number, style?: React.CSSProperties) => JSX.Element;
+    itemKey: (index: number, data: KeyEntity) => any;
+    renderNodeList(): JSX.Element;
+    render(): JSX.Element;
+}
+export default Tree;