acud 1.1.13 → 1.1.15

package/lib/toast/style/index.less

@@ -12,257 +12,266 @@
 @toast-padding: @toast-padding-vertical @toast-padding-horizontal;
 
 .@{notification-prefix-cls} {
-  .reset-component();
-  position: fixed;
-  z-index: @zindex-toast;
-  margin-right: @toast-margin-edge;
-
-  & > div {
-      display: flex;
-      flex-direction: column-reverse;
-  }
-
-  &-topLeft,
-  &-bottomLeft {
-    margin-right: 0;
-    margin-left: @toast-margin-edge;
-
-    .@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
-    .@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
-      animation-name: NotificationLeftFadeIn;
-    }
-  }
-
-  &-close-icon {
-    font-size: 4 * @P;
-    cursor: pointer;
-  }
-
-  &-hook-holder {
-    position: relative;
-  }
-
-  &-notice {
-    position: relative;
-    width: @toast-width;
-    max-width: ~'calc(100vw - @{toast-margin-edge} * 2)';
-    margin-bottom: @toast-margin-bottom;
-    margin-left: auto;
-    padding: @toast-padding;
-    overflow: hidden;
-    line-height: @line-height-base;
-    word-wrap: break-word;
-    background: @notification-bg;
-    border-radius: @R2;
-    box-shadow: @shadow-1;
-
-    .@{notification-prefix-cls}-topLeft &,
-    .@{notification-prefix-cls}-bottomLeft & {
-      margin-right: auto;
-      margin-left: 0;
+    .reset-component();
+    position: fixed;
+    z-index: @zindex-toast;
+    margin-right: @toast-margin-edge;
+
+    & > div {
+        display: flex;
+        flex-direction: column-reverse;
     }
 
-    &-message {
-      margin-bottom: 2 * @P;
-      color: @G2;
-      font-size: @T3;
-      line-height: 6 * @P;
-
-      &-single-line-auto-margin {
-        display: block;
-        width: ~'calc(@{toast-width} - @{toast-padding-horizontal} * 2 - 24px - 48px - 100%)';
-        background-color: transparent;
-        pointer-events: none;
-        &::before {
-          display: block;
-          content: '';
-        }
-      }
+    &-topLeft,
+    &-bottomLeft {
+        margin-right: 0;
+        margin-left: @toast-margin-edge;
 
-      .@{acud-prefix}-toast-wrap {
-        display: flex;
-        &-left {
-          flex: 1;
-          font-size: @T3;
-          color: @G2;
-          font-weight: @font-weight-500;
-        }
-        &-right {
-          font-size: @T2;
-          color: @G6;
-          span {
-            font-size: @T2;
-          }
+        .@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
+        .@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
+            animation-name: NotificationLeftFadeIn;
         }
-        &-no-description {
-            color: @G2;
-            font-size: @T2;
-            font-weight: @font-weight-400;
-        }
-      }
     }
 
-    &-description {
-      font-size: @toast-font-size-base;
-      .description-wrap {
-          margin: @P 0 0 0;
-          color: @G2;
-          font-size: @T2;
-          font-weight: @font-weight-400;
-      }
+    &-close-icon {
+        font-size: 4 * @P;
+        cursor: pointer;
     }
 
-    &-closable &-message {
-      // padding-right: 24px;
+    &-hook-holder {
+        position: relative;
     }
 
-    &-with-icon &-message {
-      margin: 0 ~'calc(@{toast-title-margin} + @{P} * 4)' 0 ~'calc(@{toast-title-margin} + @{T5})';
-      font-size: @font-size-lg;
-    }
+    &-notice {
+        position: relative;
+        width: @toast-width;
+        max-width: ~'calc(100vw - @{toast-margin-edge} * 2)';
+        margin-bottom: @toast-margin-bottom;
+        margin-left: auto;
+        padding: @toast-padding;
+        overflow: hidden;
+        line-height: @line-height-base;
+        word-wrap: break-word;
+        background: @notification-bg;
+        border-radius: @R2;
+        box-shadow: @shadow-1;
+
+        .@{notification-prefix-cls}-topLeft &,
+        .@{notification-prefix-cls}-bottomLeft & {
+            margin-right: auto;
+            margin-left: 0;
+        }
 
-    &-with-icon &-description {
-      margin: 0 ~'calc(@{toast-title-margin} + @{P} * 4)' 0 ~'calc(@{toast-title-margin} + @{T5})';
-      font-size: @toast-font-size-base;
-    }
+        &-message {
+            margin-bottom: 2 * @P;
+            color: @G2;
+            font-size: @T3;
+            line-height: 6 * @P;
+
+            &-single-line-auto-margin {
+                display: block;
+                width: ~'calc(@{toast-width} - @{toast-padding-horizontal} * 2 - 24px - 48px - 100%)';
+                background-color: transparent;
+                pointer-events: none;
+
+                &::before {
+                    display: block;
+                    content: '';
+                }
+            }
+
+            .@{notification-prefix-cls}-toast-wrap {
+                display: flex;
+
+                &-left {
+                    flex: 1;
+                    font-size: @T3;
+                    color: @G2;
+                    font-weight: @font-weight-500;
+                }
+
+                &-right {
+                    font-size: @T2;
+                    color: @G6;
+
+                    span {
+                        font-size: @T2;
+                    }
+                }
+
+                &-no-description {
+                    color: @G2;
+                    font-size: @T2;
+                    font-weight: @font-weight-400;
+                }
+            }
+        }
 
-    &-icon {
-      position: absolute;
-      font-size: 4 * @P;
-      line-height: 4 * @P;
-      top: 2 * @P
-    }
+        &-description {
+            font-size: @toast-font-size-base;
 
-    .@{iconfont-css-prefix}&-icon {
-      &-success {
-        path {
-            fill: @S6;
+            .description-wrap {
+                margin: @P 0 0 0;
+                color: @G2;
+                font-size: @T2;
+                font-weight: @font-weight-400;
+            }
         }
-      }
-      &-info {
-        path {
-          fill: @B6;
+
+        &-with-icon &-message {
+            margin: 0 ~'calc(@{toast-title-margin} + @{P} * 4)' 0 ~'calc(@{toast-title-margin} + @{T5})';
+            font-size: @font-size-lg;
         }
-      }
-      &-warning {
-        path {
-          fill: @W6;
+
+        &-with-icon &-description {
+            margin: 0 ~'calc(@{toast-title-margin} + @{P} * 4)' 0 ~'calc(@{toast-title-margin} + @{T5})';
+            font-size: @toast-font-size-base;
         }
-      }
-      &-error {
-        path {
-          fill: @E6;
+
+        &-icon {
+            position: absolute;
+            font-size: 4 * @P;
+            line-height: 4 * @P;
+            top: 2 * @P;
         }
-      }
-    }
 
-    &-close {
-        position: absolute;
-        top: 1 * @P;
-        right: 4 * @P;
-        outline: none;
-        color: @G5;
-        &:hover {
-            color: @G4;
-            // & when (@theme = dark) {
-            //   color: #fff;
-            // }
-            // & when not (@theme = dark) {
-            // //   color: shade('#ccc', 40%);
-            //   color: #ccc;
-            // }
+        .@{notification-prefix-cls}-notice-icon {
+            &-success {
+                path {
+                    fill: @S6;
+                }
+            }
+
+            &-info {
+                path {
+                    fill: @B6;
+                }
+            }
+
+            &-warning {
+                path {
+                    fill: @W6;
+                }
+            }
+
+            &-error {
+                path {
+                    fill: @E6;
+                }
+            }
         }
-        &:active {
-            color: @G3;
+
+        &-close {
+            position: absolute;
+            top: 1 * @P;
+            right: 4 * @P;
+            outline: none;
+            color: @G5;
+
+            &:hover {
+                color: @G4;
+                // & when (@theme = dark) {
+                //   color: #fff;
+                // }
+                // & when not (@theme = dark) {
+                // //   color: shade('#ccc', 40%);
+                //   color: #ccc;
+                // }
+            }
+
+            &:active {
+                color: @G3;
+            }
         }
-    }
 
-    &-btn {
-      float: right;
-      margin-top: 16px;
+        &-btn {
+            float: right;
+            margin-top: 16px;
+        }
     }
-  }
 
-  &-has-description {
-    padding: 4 * @P @toast-padding-horizontal;
-    .@{notification-prefix-cls}-notice-icon {
-      top: 4.8 * @P
-    }
-    .@{notification-prefix-cls}-notice-close {
-        top: 4 * @P;
+    &-has-description {
+        padding: 4 * @P @toast-padding-horizontal;
+        .@{notification-prefix-cls}-notice-icon {
+            top: 4.8 * @P;
+        }
+        .@{notification-prefix-cls}-notice-close {
+            top: 4 * @P;
+        }
     }
 
-  }
-
-  .notification-fade-effect {
-    animation-duration: 0.24s;
-    animation-timing-function: @ease-in-out;
-    animation-fill-mode: both;
-  }
+    .notification-fade-effect {
+        animation-duration: .24s;
+        animation-timing-function: @ease-in-out;
+        animation-fill-mode: both;
+    }
 
-  &-fade-enter,
-  &-fade-appear {
-    .notification-fade-effect();
+    &-fade-enter,
+    &-fade-appear {
+        .notification-fade-effect();
 
-    opacity: 0;
-    animation-play-state: paused;
-  }
+        opacity: 0;
+        animation-play-state: paused;
+    }
 
-  &-fade-leave {
-    .notification-fade-effect();
+    &-fade-leave {
+        .notification-fade-effect();
 
-    animation-duration: 0.4s;
-    animation-play-state: paused;
-  }
+        animation-duration: .4s;
+        animation-play-state: paused;
+    }
 
-  &-fade-enter&-fade-enter-active,
-  &-fade-appear&-fade-appear-active {
-    animation-name: NotificationFadeIn;
-    animation-play-state: running;
-  }
+    &-fade-enter&-fade-enter-active,
+    &-fade-appear&-fade-appear-active {
+        animation-name: NotificationFadeIn;
+        animation-play-state: running;
+    }
 
-  &-fade-leave&-fade-leave-active {
-    animation-name: NotificationFadeOut;
-    animation-play-state: running;
-  }
+    &-fade-leave&-fade-leave-active {
+        animation-name: NotificationFadeOut;
+        animation-play-state: running;
+    }
 }
 
 @keyframes NotificationFadeIn {
-  0% {
-    left: @toast-width;
-    opacity: 0;
-  }
-  100% {
-    left: 0;
-    opacity: 1;
-  }
+    0% {
+        left: @toast-width;
+        opacity: 0;
+    }
+
+    100% {
+        left: 0;
+        opacity: 1;
+    }
 }
 
 @keyframes NotificationLeftFadeIn {
-  0% {
-    right: @toast-width;
-    opacity: 0;
-  }
-  100% {
-    right: 0;
-    opacity: 1;
-  }
+    0% {
+        right: @toast-width;
+        opacity: 0;
+    }
+
+    100% {
+        right: 0;
+        opacity: 1;
+    }
 }
 
 @keyframes NotificationFadeOut {
-//   0% {
-//     top: 0;
-//     opacity: 1;
-//   }
-//   100% {
-//     top: -@toast-width;
-//     opacity: 0;
-//   }
+    //   0% {
+    //     top: 0;
+    //     opacity: 1;
+    //   }
+    //   100% {
+    //     top: -@toast-width;
+    //     opacity: 0;
+    //   }
 
     0% {
         right: 0;
         opacity: 1;
     }
+
     100% {
         right: -100 * @P;
         opacity: 0;

package/lib/tree/style/index.css

@@ -385,6 +385,7 @@
 }
 .acud-tree-switcher .acud-tree-switcher-icon svg,
 .acud-tree-switcher .acud-select-tree-switcher-icon svg {
+  width: 16px!important;
   transition: transform 0.3s;
 }
 .acud-tree-switcher-noop {
@@ -393,6 +394,29 @@
 .acud-tree-switcher_close .acud-tree-switcher-icon svg {
   transform: rotate(-90deg);
 }
+.acud-tree-switcher-leaf-line {
+  position: relative;
+  z-index: 1;
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+}
+.acud-tree-switcher-leaf-line::before {
+  position: absolute;
+  top: 0;
+  right: 8px;
+  bottom: -4px;
+  margin-left: -1px;
+  border-right: 1px solid #B8BABF;
+  content: ' ';
+}
+.acud-tree-switcher-leaf-line::after {
+  position: absolute;
+  width: 10px;
+  height: 14px;
+  border-bottom: 1px solid #B8BABF;
+  content: ' ';
+}
 .acud-tree .acud-tree-node-content-wrapper {
   position: relative;
   z-index: auto;
@@ -484,6 +508,26 @@
 .acud-tree-treenode:hover .acud-tree-draggable-icon {
   opacity: 0.45;
 }
+.acud-tree-show-line .acud-tree-indent-unit {
+  position: relative;
+  height: 100%;
+}
+.acud-tree-show-line .acud-tree-indent-unit::before {
+  position: absolute;
+  top: 0;
+  right: 16px;
+  bottom: -4px;
+  border-right: 1px solid #B8BABF;
+  content: '';
+}
+.acud-tree-show-line .acud-tree-indent-unit-end::before {
+  display: none;
+}
+.acud-tree .acud-tree-treenode-leaf-last .acud-tree-switcher-leaf-line::before {
+  top: auto !important;
+  bottom: auto !important;
+  height: 14px !important;
+}
 .acud-tree-checkbox {
   margin: 2px 0 0 8px;
   top: 0.1em;

package/lib/tree/style/mixin.less

@@ -12,6 +12,8 @@
         line-height: 0;
         vertical-align: -.24em;
         svg {
+            // 宽度规范覆盖自定义图标
+            width: 16px!important;
             transition: transform .3s;
         }
     }
@@ -143,6 +145,31 @@
                     }
                 }
             }
+
+            &-leaf-line {
+                position: relative;
+                z-index: 1;
+                display: inline-block;
+                width: 100%;
+                height: 100%;
+                &::before {
+                    position: absolute;
+                    top: 0;
+                    right: @P * 2;
+                    bottom: -@tree-node-padding;
+                    margin-left: -1px;
+                    border-right: 1px solid @G6;
+                    content: ' ';
+                }
+          
+                &::after {
+                    position: absolute;
+                    width: @tree-title-height - 14px;
+                    height: @tree-title-height - 10px;
+                    border-bottom: 1px solid @G6;
+                    content: ' ';
+                }
+            }
         }
 
         // title
@@ -228,6 +255,43 @@
             }
         }
 
+        // show line
+        &-show-line {
+            .@{custom-tree-prefix-cls}-indent {
+                &-unit {
+                    position: relative;
+                    height: 100%;
+            
+                    &::before {
+                        position: absolute;
+                        top: 0;
+                        right: (@tree-title-height / 3 * 2);
+                        bottom: -@tree-node-padding;
+                        border-right: 1px solid @G6;
+                        content: '';
+                    }
+            
+                    &-end {
+                        &::before {
+                            display: none;
+                        }
+                    }
+                }
+            }
+        }
+
+        .@{custom-tree-node-prefix-cls}-leaf-last {
+            .@{custom-tree-prefix-cls}-switcher {
+                &-leaf-line {
+                    &::before {
+                        top: auto !important;
+                        bottom: auto !important;
+                        height: @tree-title-height - 10px !important;
+                    }
+                }
+            }
+        }
+
         // Checkbox
         &-checkbox {
             margin: 0.5 * @P 0 0 2 * @P;

package/lib/tree/tree.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
-import RcTree, { TreeNode, TreeProps as RcTreeProps } from 'rc-tree';
+import RcTree, { TreeNode, TreeProps as RcTreeProps, TreeNodeProps } from 'rc-tree';
 import { BaseInputProps } from '../input/Input';
 import type { EventDataNode as RcEventDataNode, DataNode as RcDataNode, Key } from 'rc-tree/lib/interface';
 export interface DataNode extends RcDataNode {
     isEditable?: boolean;
 }
 export type EventDataNode = RcEventDataNode<DataNode>;
+export type TreeIcon = React.ReactNode | ((treeNode: TreeNodeProps) => React.ReactNode);
 declare enum DataChangeType {
     SAVE = "save",
     EDITINPUTCHANGE = "editInputChange",
@@ -24,6 +25,7 @@ interface PopoverUtil {
 }
 export interface TreeProps extends Partial<RcTreeProps> {
     treeData?: DataNode[];
+    showLine?: boolean;
     className?: string;
     multiple?: boolean;
     checkable?: boolean;
@@ -36,7 +38,8 @@ export interface TreeProps extends Partial<RcTreeProps> {
     showPopoverUtil?: boolean;
     customPopoverUtil?: Array<PopoverUtil>;
     showIcon?: boolean;
-    icon?: string;
+    icon?: TreeIcon;
+    switchIcon?: TreeIcon;
     children?: React.ReactNode;
     onDataChange?: (treeData: DataNode[], changingData: DataNode, changeType: DataChangeType) => void;
 }

package/lib/tree/tree.js

@@ -106,6 +106,8 @@ var Tree = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     customPopoverUtil = _props$customPopoverU === void 0 ? DEFAULT_POPOVER_UTIL : _props$customPopoverU,
     customizePrefixCls = props.prefixCls,
     className = props.className,
+    showLine = props.showLine,
+    _switcherIcon = props.switcherIcon,
     onDataChange = props.onDataChange,
     treeDataOrigin = props.treeData;
   var _useState = (0, _react.useState)([]),
@@ -381,7 +383,7 @@ var Tree = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     }) : checkable,
     autoExpandParent: autoExpandParent,
     switcherIcon: function switcherIcon(nodeProps) {
-      return (0, _iconHelper.renderSwitcherIcon)(prefixCls, nodeProps);
+      return (0, _iconHelper.renderSwitcherIcon)(prefixCls, _switcherIcon, showLine, nodeProps);
     },
     dropIndicatorRender: _dragHelper.dropIndicatorRender,
     draggable: draggableConfig

package/lib/tree/utils/iconHelper.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
 import { TreeNodeProps } from 'rc-tree';
-export declare function renderSwitcherIcon(prefixCls: string, nodeProps: TreeNodeProps): JSX.Element;
+import type { TreeIcon } from '../tree';
+export declare function renderSwitcherIcon(prefixCls: string, switcherIcon: TreeIcon, showLine: boolean, nodeProps: TreeNodeProps): any;