@nickeylin/antd-mobile-pro 2.0.0

package/dist/cjs/components/tree/style/index.less

@@ -0,0 +1,354 @@
+@import '../../styles/variable.less';
+@import './checkbox/mixin.less';
+
+@class-prefix-tree: ~'@{suid-prefix}-tree';
+@class-prefix-treenode: ~'@{class-prefix-tree}-treenode';
+
+.treeSwitcherIcon() {
+  .@{class-prefix-tree}-switcher-icon,
+  .@{class-prefix-tree}-select-switcher-icon {
+    display: inline-block;
+    font-size: 10px;
+    vertical-align: baseline;
+
+    svg {
+      transition: transform 0.3s;
+    }
+  }
+}
+
+.drop-indicator() {
+  .@{class-prefix-tree}-drop-indicator {
+    position: absolute;
+    // it should displayed over the following node
+    z-index: 1;
+    height: 2px;
+    background-color: var(--adm-color-primary);
+    border-radius: 1px;
+    pointer-events: none;
+
+    &::after {
+      position: absolute;
+      top: -3px;
+      left: -6px;
+      width: 8px;
+      height: 8px;
+      background-color: transparent;
+      border: 2px solid var(--adm-color-primary);
+      border-radius: 50%;
+      content: '';
+    }
+  }
+}
+.@{class-prefix-tree} {
+  &__wrap {
+    --title-height: 24px;
+    --body-height: auto;
+    --node-padding: 4px;
+    --node-hover-bg: var(--adm-color-box);
+    --node-hightlight-color: inherit;
+    --checkbox-size: 16px;
+    --node-selected-bg: var(--adm-color-primary);
+    --line-color: var(--adm-color-weak);
+
+    overflow-y: auto;
+    background-color: var(--adm-color-background);
+  }
+  &__search {
+    padding: 4px;
+    background: var(--adm-color-background);
+    align-items: center;
+    z-index: 999999;
+    border-bottom: 1px solid var(--adm-color-border);
+  }
+  &__body {
+    position: relative;
+    padding: 4px;
+    height: var(--body-height);
+    overflow: auto;
+  }
+
+  // Tree
+  // =================== Virtual List ===================
+  &-list-holder-inner {
+    align-items: flex-start;
+  }
+  &--block-node {
+    .@{class-prefix-tree}-list-holder-inner {
+      align-items: stretch;
+
+      // >>> Title
+      .@{class-prefix-tree}-node-content-wrapper {
+        flex: auto;
+      }
+
+      // >>> Drag
+      .@{class-prefix-tree}-treenode.dragging {
+        position: relative;
+
+        &::after {
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: var(--node-padding);
+          left: 0;
+          border: 1px solid var(--adm-color-primary);
+          opacity: 0;
+          animation: suid-tree-node-fx-do-not-use 0.3s;
+          animation-play-state: running;
+          animation-fill-mode: forwards;
+          content: '';
+          pointer-events: none;
+        }
+      }
+    }
+  }
+  // ===================== TreeNode =====================
+  &-treenode {
+    display: flex;
+    align-items: flex-start;
+    padding: 0 0 var(--node-padding) 0;
+    outline: none;
+    // Disabled
+    &&-disabled {
+      // >>> Title
+      .@{class-prefix-tree}-node-content-wrapper {
+        // disabled color
+        color: var(--adm-color-light);
+        cursor: not-allowed;
+
+        &:hover {
+          background: transparent;
+        }
+      }
+    }
+
+    &-active .@{class-prefix-tree}-node-content-wrapper {
+      background: var(--node-hover-bg);
+    }
+
+    &:not(&-disabled).filter-node .@{class-prefix-tree}-title {
+      color: var(--node-hightlight-color);
+      font-weight: 500;
+    }
+
+    &-draggable {
+      .@{class-prefix-tree}-draggable-icon {
+        width: var(--title-height);
+        line-height: var(--title-height);
+        text-align: center;
+        visibility: visible;
+        opacity: 0.2;
+        transition: opacity 0.3s;
+
+        .@{class-prefix-treenode}:hover & {
+          opacity: 0.45;
+        }
+      }
+
+      &.@{class-prefix-treenode}-disabled {
+        .@{class-prefix-tree}-draggable-icon {
+          visibility: hidden;
+        }
+      }
+    }
+  }
+  // >>> Indent
+  &-indent {
+    align-self: stretch;
+    white-space: nowrap;
+    user-select: none;
+
+    &-unit {
+      display: inline-block;
+      width: var(--title-height);
+    }
+  }
+  // >>> Drag Handler
+  &-draggable-icon {
+    visibility: hidden;
+  }
+
+  // >>> Switcher
+  &-switcher {
+    .treeSwitcherIcon();
+    position: relative;
+    flex: none;
+    align-self: stretch;
+    width: var(--title-height);
+    margin: 0;
+    line-height: var(--title-height);
+    text-align: center;
+    cursor: pointer;
+    user-select: none;
+
+    &-noop {
+      cursor: default;
+    }
+
+    &_close {
+      .@{class-prefix-tree}-switcher-icon {
+        svg {
+          transform: rotate(-90deg);
+        }
+      }
+    }
+
+    &-loading-icon {
+      color: var(--adm-color-primary);
+    }
+
+    &-leaf-line {
+      position: relative;
+      z-index: 1;
+      display: inline-block;
+      width: 100%;
+      height: 100%;
+      // https://github.com/ant-design/ant-design/issues/31884
+      &::before {
+        position: absolute;
+        top: 0;
+        right: 12px;
+        bottom: -var(--node-padding);
+        margin-left: -1px;
+        border-right: 1px solid var(--adm-color-border);
+        content: ' ';
+      }
+
+      &::after {
+        position: absolute;
+        width: calc(var(--title-height) - 14px);
+        height: calc(var(--title-height) - 10px);
+        border-bottom: 1px solid var(--adm-color-border);
+        content: ' ';
+      }
+    }
+  }
+
+  // >>> Checkbox
+  &-checkbox {
+    top: initial;
+    margin: calc((var(--title-height) - var(--checkbox-size)) / 2) 8px 0 0;
+    .suid-checkbox {
+      --icon-size: var(--checkbox-size);
+    }
+  }
+
+  // >>> Title
+  & &-node-content-wrapper {
+    position: relative;
+    z-index: auto;
+    min-height: var(--title-height);
+    margin: 0;
+    padding: 0 4px;
+    color: inherit;
+    line-height: var(--title-height);
+    background: transparent;
+    border-radius: var(--adm-radius-s);
+    cursor: pointer;
+    transition: all 0.3s, border 0s, line-height 0s, box-shadow 0s;
+
+    &:hover {
+      background-color: var(--node-hover-bg);
+    }
+
+    &.@{class-prefix-tree}-node-selected {
+      background-color: var(--node-selected-bg);
+      color: var(--adm-color-white);
+    }
+
+    // Icon
+    .@{class-prefix-tree}-iconEle {
+      display: inline-block;
+      width: var(--title-height);
+      height: var(--title-height);
+      line-height: var(--title-height);
+      text-align: center;
+      vertical-align: top;
+
+      &:empty {
+        display: none;
+      }
+    }
+  }
+
+  // https://github.com/ant-design/ant-design/issues/28217
+  &-unselectable &-node-content-wrapper:hover {
+    background-color: transparent;
+  }
+
+  // ==================== Draggable =====================
+  &-node-content-wrapper {
+    line-height: var(--title-height);
+    user-select: none;
+
+    .drop-indicator();
+  }
+
+  .@{class-prefix-treenode}.drop-container {
+    > [draggable] {
+      box-shadow: 0 0 0 2px var(--adm-color-primary);
+    }
+  }
+
+  // ==================== Show Line =====================
+  &-show-line {
+    // ================ Indent lines ================
+    .@{class-prefix-tree}-indent {
+      &-unit {
+        position: relative;
+        height: 100%;
+
+        &::before {
+          position: absolute;
+          top: 0;
+          right: calc(var(--title-height) / 2);
+          bottom: -4px; //calc(0 - var(--node-padding));
+          border-right: 1px solid var(--line-color);
+          content: '';
+        }
+
+        &-end {
+          &::before {
+            display: none;
+          }
+        }
+      }
+    }
+
+    // ============== Cover Background ==============
+    .@{class-prefix-tree}-switcher {
+      background: var(--adm-color-background);
+
+      &-line-icon {
+        // https://github.com/ant-design/ant-design/issues/32813
+        vertical-align: -0.15em;
+      }
+    }
+  }
+  .@{class-prefix-tree}-leaf-last {
+    .@{class-prefix-treenode}-switcher {
+      &-leaf-line {
+        &::before {
+          top: auto !important;
+          bottom: auto !important;
+          height: calc(var(--title-height) - 10px) !important;
+        }
+      }
+    }
+  }
+}
+
+.antCheckboxFn(@checkbox-prefix-cls: ~'@{class-prefix-tree}-checkbox');
+
+@keyframes suid-tree-node-fx-do-not-use {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@import './rtl.less';

package/dist/cjs/components/tree/style/rtl.less

@@ -0,0 +1,70 @@
+@ant-prefix: suid;
+
+@tree-prefix-cls: ~'@{ant-prefix}-tree';
+@select-tree-prefix-cls: ~'@{ant-prefix}-select-tree';
+@tree-node-prefix-cls: ~'@{tree-prefix-cls}-treenode';
+
+.@{tree-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+    .@{tree-prefix-cls}-node-content-wrapper[draggable='true'] {
+      .@{tree-prefix-cls}-drop-indicator {
+        &::after {
+          right: -6px;
+          left: unset;
+        }
+      }
+    }
+  }
+
+  // ===================== TreeNode =====================
+  .@{tree-node-prefix-cls} {
+    &-rtl {
+      direction: rtl;
+    }
+  }
+
+  // >>> Switcher
+  &-switcher {
+    &_close {
+      .@{tree-prefix-cls}-switcher-icon {
+        svg {
+          .@{tree-prefix-cls}-rtl & {
+            transform: rotate(90deg);
+          }
+        }
+      }
+    }
+  }
+  // ==================== Show Line =====================
+  &-show-line {
+    // ================ Indent lines ================
+    .@{tree-prefix-cls}-indent {
+      &-unit {
+        &::before {
+          .@{tree-prefix-cls}-rtl& {
+            right: auto;
+            left: calc(0px - (var(--tree-title-height) / 2) - 1px);
+            border-right: none;
+            border-left: 1px solid var(--adm-color-box);
+          }
+        }
+      }
+    }
+  }
+  // >>> Checkbox
+  &-checkbox {
+    .@{tree-prefix-cls}-rtl & {
+      margin: calc((var(--tree-title-height) - 16px) / 2) 0 0 8px;
+    }
+  }
+}
+
+.@{select-tree-prefix-cls} {
+  // >>> Checkbox
+  &-checkbox {
+    .@{tree-prefix-cls}-select-dropdown-rtl & {
+      margin: calc((var(--tree-title-height) - 16px) / 2) 0 0 8px;
+    }
+  }
+}

package/dist/cjs/components/tree/tree.d.ts

@@ -0,0 +1,93 @@
+import { SearchBarProps } from 'antd-mobile';
+import { NativeProps } from 'antd-mobile/es/utils/native-props';
+import type { TreeProps as RcTreeProps } from 'rc-tree';
+import RcTree from 'rc-tree';
+import type { FieldDataNode } from 'rc-tree/lib/interface';
+import { CSSProperties, RefObject } from 'react';
+import { RemoteDataProps } from '../../utils/remote-data-props';
+import { RowKey } from '../pro-list/helper';
+export type TreeDataNode<T extends object = object> = FieldDataNode<T>;
+export interface TreeProps<D extends TreeDataNode = TreeDataNode> extends Omit<RcTreeProps<D>, 'direction' | 'showLine' | 'prefixCls' | 'style' | 'treeData'>, RemoteDataProps<D[]>, NativeProps<'--title-height' | '--body-height' | '--node-padding' | '--node-hover-bg' | '--node-hightlight-color' | '--checkbox-size' | '--node-selected-bg' | '--line-color'> {
+    showLine?: boolean | {
+        showLeafIcon: boolean;
+    };
+    rowKey?: RowKey<D>;
+    treeRef?: RefObject<RcTree<D>>;
+    blockNode?: boolean;
+    prefixCls?: string;
+    /**
+     * 搜索框配置
+     */
+    search?: false | SearchBarProps;
+    bodyClassName?: string;
+    bodyStyle?: CSSProperties;
+    /** s
+     * zh-CN: 显示快速搜索
+     * en-US: Show search
+     * @deprecated use `search` instead
+     */
+    showSearch?: boolean;
+    /**
+     * zh-CN: 搜索框默认文字
+     * en-US: Placeholder of search
+     * @deprecated use `search` instead
+     */
+    searchPlaceHolder?: string;
+    /**
+     * zh-CN: 级联参数配置
+     * en-US: Cascade parameter configuration
+     */
+    cascadeParams?: object;
+}
+declare function Tree<T extends TreeDataNode = TreeDataNode>(props: TreeProps<T>): JSX.Element;
+declare namespace Tree {
+    var TreeNode: import("react").FC<import("rc-tree").TreeNodeProps<import("rc-tree/lib/interface").DataNode>>;
+    var DirectoryTree: (<T extends import("rc-tree").BasicDataNode | import("rc-tree/lib/interface").DataNode = import("rc-tree/lib/interface").DataNode>(props: import("./DirectoryTree").DirectoryTreeProps<T> & {
+        children?: import("react").ReactNode;
+    } & {
+        ref?: import("react").Ref<RcTree<import("rc-tree/lib/interface").DataNode>> | undefined;
+    }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+        defaultProps: Partial<import("react").PropsWithChildren<import("./DirectoryTree").DirectoryTreeProps<any>>>;
+        displayName?: string | undefined;
+    };
+    var defaultProps: {
+        checkable: boolean;
+        selectable: boolean;
+        showIcon: boolean;
+        motion: {
+            motionAppear: boolean;
+            motionName?: import("rc-motion/es/CSSMotion").MotionName | undefined;
+            visible?: boolean | undefined;
+            motionEnter?: boolean | undefined;
+            motionLeave?: boolean | undefined;
+            motionLeaveImmediately?: boolean | undefined;
+            motionDeadline?: number | undefined;
+            forceRender?: boolean | undefined;
+            removeOnLeave?: boolean | undefined;
+            leavedClassName?: string | undefined;
+            eventProps?: object | undefined;
+            onAppearPrepare?: import("rc-motion/es/interface").MotionPrepareEventHandler | undefined;
+            onEnterPrepare?: import("rc-motion/es/interface").MotionPrepareEventHandler | undefined;
+            onLeavePrepare?: import("rc-motion/es/interface").MotionPrepareEventHandler | undefined;
+            onAppearStart?: import("rc-motion").MotionEventHandler | undefined;
+            onEnterStart?: import("rc-motion").MotionEventHandler | undefined;
+            onLeaveStart?: import("rc-motion").MotionEventHandler | undefined;
+            onAppearActive?: import("rc-motion").MotionEventHandler | undefined;
+            onEnterActive?: import("rc-motion").MotionEventHandler | undefined;
+            onLeaveActive?: import("rc-motion").MotionEventHandler | undefined;
+            onAppearEnd?: import("rc-motion").MotionEndEventHandler | undefined;
+            onEnterEnd?: import("rc-motion").MotionEndEventHandler | undefined;
+            onLeaveEnd?: import("rc-motion").MotionEndEventHandler | undefined;
+            onVisibleChanged?: ((visible: boolean) => void) | undefined;
+            internalRef?: import("react").Ref<any> | undefined;
+            children?: ((props: {
+                [key: string]: any;
+                visible?: boolean | undefined;
+                className?: string | undefined;
+                style?: CSSProperties | undefined;
+            }, ref: (node: any) => void) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) | undefined;
+        };
+        blockNode: boolean;
+    };
+}
+export default Tree;