@zat-design/sisyphus-react 3.1.5 → 3.2.0

package/es/ProTree/style/index.less

@@ -1,59 +1,73 @@
 .pro-tree {
   height: 100%; // tree auto css
-  .ant-spin-nested-loading{
+
+  .ant-spin-nested-loading {
     height: 100%; // tree auto css
-    .ant-spin-container{
+
+    .ant-spin-container {
       height: 100%; // tree auto css
     }
   }
+
   &-placeholder {
     color: #939499;
   }
-  .pro-tree-search{
-    margin-bottom: var(--zaui-space-size-sm);
+
+  .pro-tree-search {
+     margin-bottom: calc(var(--zaui-space-size-sm; 8px) * var(--zaui-size; 1));
   }
+
   &-content {
-    display: flex; // tree auto css
+    display       : flex; // tree auto css
     flex-direction: column; // tree auto css
-    height: 100%;
+    height        : 100%;
+
     // overflow-y: scroll;
-    .pro-tree-header-box, .pro-tree-footer-box{
-      display: inline-flex;
+    .pro-tree-header-box,
+    .pro-tree-footer-box {
+      display       : inline-flex;
       flex-direction: column;
     }
-    .pro-tree-tree-warp{
-      height: 100%;
-      flex: 1 1;
+
+    .pro-tree-tree-warp {
+      height    : 100%;
+      flex      : 1 1;
       overflow-y: auto;
       overflow-x: auto;
     }
-    .tree-title-box{
-      display: flex;
-      padding-top: 10px;
+
+    .tree-title-box {
+      display        : flex;
+      padding-top    : 10px;
       justify-content: space-between;
-      .tree-title-text{
-        font-size: var(--zaui-font-size-lg);
+
+      .tree-title-text {
+        font-size    : var(--zaui-font-size-lg);
         margin-bottom: var(--zaui-space-size-xs);
-        font-weight: 500;
-        padding-left: 2px;
+        font-weight  : 500;
+        padding-left : 2px;
       }
-      .expand-button{
+
+      .expand-button {
         padding-left: var(--zaui-space-size-sm);
-        display: flex;
-        align-items: baseline;
-        &.expand{
-          .expand-icon{
-            .anticon-caret-down{
+        display     : flex;
+        align-items : baseline;
+        cursor      : pointer;
+        &.expand {
+          .expand-icon {
+            .anticon-caret-down {
               transform: rotate(180deg);
             }
           }
         }
-        .expand-icon{
-          font-size: 12px;
+
+        .expand-icon {
+          font-size   : var(--zaui-font-size-sm, 12px);
           margin-right: var(--zaui-space-size-xs);
         }
       }
     }
+
     .ant-tree-checkbox {
       margin-top: 11px;
     }
@@ -61,37 +75,42 @@
     .ant-tree-switcher {
       line-height: 44px;
     }
-    .ant-tree-switcher-leaf-line{
+
+    .ant-tree-switcher-leaf-line {
       display: none;
     }
 
     .ant-tree-treenode {
       align-items: flex-start;
-      width: 100%;
-      padding: 0;
-      color: var(--zaui-text);
-      font-size: var(--zaui-font-size);
+      width      : 100%;
+      padding    : 0;
+      color      : var(--zaui-text);
+      font-size  : var(--zaui-font-size);
     }
 
     .ant-tree-node-content-wrapper {
-      min-height: var(--zaui-font-size-xxl);
+      min-height : var(--zaui-font-size-xxl);
       line-height: var(--zaui-font-size-xxl);
     }
 
     .ant-tree-node-content-wrapper {
       width: 100%;
-      .ant-tree-title{
+
+      .ant-tree-title {
         display: block;
-        width: 100%;
+        width  : 100%;
       }
     }
+
     // 只读状态下，是否隐藏未勾选行
-    .hide-disable-node{
-      .ant-tree-treenode.ant-tree-treenode-disabled{
+    .hide-disable-node {
+      .ant-tree-treenode.ant-tree-treenode-disabled {
         display: none;
       }
-      .ant-tree-treenode-checkbox-indeterminate, .ant-tree-treenode-checkbox-checked{
-        &.ant-tree-treenode-disabled{
+
+      .ant-tree-treenode-checkbox-indeterminate,
+      .ant-tree-treenode-checkbox-checked {
+        &.ant-tree-treenode-disabled {
           display: flex;
         }
       }
@@ -99,173 +118,203 @@
   }
 
   &-tree-node {
-    display: flex;
+    display       : flex;
     flex-direction: row;
-    padding: 9px var(--zaui-space-size-sm);
-    margin-left: -8px;
-    border-radius: var(--zaui-space-size-xs);
-    &:hover{
+    padding       : 9px var(--zaui-space-size-sm);
+    margin-left   : -8px;
+    border-radius : var(--zaui-space-size-xs);
+
+    &:hover {
       background: #F7F9FC;
     }
+
     &:last-child {
       flex: 1;
     }
-    &.checked{
+
+    &.checked {
       position: relative;
-      z-index: 1;
-      color: var(--zaui-brand);
-      .brand-bg-opa-ten{
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        top: 0px;
-        left:0px;
+      z-index : 1;
+      color   : var(--zaui-brand);
+
+      .brand-bg-opa-ten {
+        position        : absolute;
+        width           : 100%;
+        height          : 100%;
+        top             : 0px;
+        left            : 0px;
         background-color: var(--zaui-brand);
-        opacity: 0.1;
-        z-index: 0;
-        border-radius: var(--zaui-space-size-xs);
+        opacity         : 0.1;
+        z-index         : -1;
+        border-radius   : var(--zaui-space-size-xs);
       }
     }
-    .tree-node-show-text{
-      display: flex;
+
+    .tree-node-show-text {
+      display       : flex;
       flex-direction: row;
-      width: 100%;
-      .tree-node-show-text-label{
-        flex: 1;
+      width         : 100%;
+
+      .tree-node-show-text-label {
+        flex    : 1;
         overflow: hidden;
-        span{
+
+        span {
           width: 100%;
         }
-        span.ellipse{
-          display: block;
+
+        span.ellipse {
+          display      : block;
           text-overflow: ellipsis;
-          overflow: hidden;
-          height: 20px;
-          word-break: keep-all;
-          white-space: nowrap;
+          overflow     : hidden;
+          height       : 20px;
+          word-break   : keep-all;
+          white-space  : nowrap;
         }
       }
     }
-    .operate-tree-node-btns{
+
+    .operate-tree-node-btns {
       display: flex;
       z-index: 3;
-      .icon-item{
+
+      .icon-item {
         transition-delay: 10s;
-        width: 100%;
-        margin-left: var(--zaui-space-size-xs);
+        width           : 100%;
+        margin-left     : var(--zaui-space-size-xs);
       }
-      .icon-add{
-        font-size: 12px;
+
+      .icon-add {
+        font-size: var(--zaui-font-size-sm, 12px);
       }
-      .svg-icon-expand{
+
+      .svg-icon-expand {
         margin-bottom: -2px;
       }
     }
-    .operate-tree-node-btns-absolute{
-      visibility:visible;
-      position: absolute;
-      right: 0px;
+
+    .operate-tree-node-btns-absolute {
+      visibility: visible;
+      position  : absolute;
+      right     : 0px;
     }
   }
+
   &-tree-node-tag {
-    display: flex;
-    align-items: center;
+    display        : flex;
+    align-items    : center;
     justify-content: center;
-    height: 20px;
-    margin-right: var(--zaui-space-size-sm);
-    padding: 0 var(--zaui-space-size-xs);
-    font-weight: 400;
-    line-height: 24px;
-    white-space: nowrap;
-    border-radius: 2px;
+    height         : 20px;
+    margin-right   : var(--zaui-space-size-sm);
+    padding        : 0 var(--zaui-space-size-xs);
+    font-weight    : 400;
+    line-height    : 24px;
+    white-space    : nowrap;
+    border-radius  : var(--zaui-border-radius-card);
 
     span {
-      font-size: 12px;
+      font-size  : var(--zaui-font-size-sm, 12px);
       line-height: 20px;
-      text-align: center;
-      transform: scale(0.83, 0.83);
+      text-align : center;
+      transform  : scale(0.83, 0.83);
     }
   }
+
   // 连接线、箭头宽度
-  .ant-tree-show-line .ant-tree-indent-unit{
+  .ant-tree-show-line .ant-tree-indent-unit {
     width: 20px;
   }
-  .ant-tree-switcher{
-    width: 20px;
+
+  .ant-tree-switcher {
+    width     : 20px;
     align-self: flex-start;
     margin-top: -4px;
   }
-  .ant-tree-show-line .ant-tree-indent-unit::before{
+
+  .ant-tree-show-line .ant-tree-indent-unit::before {
     right: 9px;
   }
+
   // 底部样式
-  .pro-tree-footer-box{
-    z-index: 4;
-    padding: var(--zaui-space-size-md) var(--zaui-space-size-md) var(--zaui-space-size-md) var(--zaui-space-size-sm);
-    position: relative;
-    box-shadow:0 -20px 5px -21px rgba(151,151,151,0.32);
+  .pro-tree-footer-box {
+    z-index   : 4;
+    padding   : var(--zaui-space-size-md) var(--zaui-space-size-md) var(--zaui-space-size-md) var(--zaui-space-size-sm);
+    position  : relative;
+    box-shadow: 0 -20px 5px -21px rgba(151, 151, 151, 0.32);
   }
+
   // 去除antd白色背景
-  .ant-tree-show-line .ant-tree-switcher, .ant-tree{
+  .ant-tree-show-line .ant-tree-switcher,
+  .ant-tree {
     background-color: transparent;
   }
-  .empty-tree{
-    color: #939599;
-    height: 100%;
-    text-align: center;
-    display: flex;
-    align-items: center;
+
+  .empty-tree {
+    color          : #939599;
+    height         : 100%;
+    text-align     : center;
+    display        : flex;
+    align-items    : center;
     justify-content: center;
   }
 }
+
 // 操作按钮样式
-.pro-tree-operate-container{
+.pro-tree-operate-container {
   padding-top: 0px;
-  min-width: 120px;
-  .ant-popover-inner-content{
+  min-width  : 120px;
+
+  .ant-popover-inner-content {
     padding: 0px;
-    width: 100%;
+    width  : 100%;
   }
-  .ant-popover-arrow{
+
+  .ant-popover-arrow {
     display: none;
   }
-  .pro-tree-operate-btn-popover{
-    .icon-item{
-      position: relative;
-      z-index: 1;
-      cursor: pointer;
+
+  .pro-tree-operate-btn-popover {
+    .icon-item {
+      position    : relative;
+      z-index     : 1;
+      cursor      : pointer;
       padding-left: var(--zaui-space-size-md);
-      width: 100%;
-      height: 32px;
-      line-height: 32px;
+      width       : 100%;
+      height      : 32px;
+      line-height : 32px;
     }
-    .icon-item:hover{
-      &:after{
-        position: absolute;
-        display: block;
-        z-index: 0;
-        left:0;
-        top:0;
-        content: '';
-        width: 120px;
-        height: 32px;
+
+    .icon-item:hover {
+      &:after {
+        position        : absolute;
+        display         : block;
+        z-index         : 0;
+        left            : 0;
+        top             : 0;
+        content         : '';
+        width           : 120px;
+        height          : 32px;
         background-color: var(--zaui-brand);
-        opacity: 0.08;
+        opacity         : 0.08;
       }
     }
   }
 }
-.ant-tree .ant-tree-treenode-disabled{
-  .ant-tree-node-content-wrapper{
+
+.ant-tree .ant-tree-treenode-disabled {
+  .ant-tree-node-content-wrapper {
     color: var(--zaui-text);
   }
-  .pro-tree-tree-node.checked{
+
+  .pro-tree-tree-node.checked {
     color: var(--zaui-text);
   }
-  .pro-tree-tree-node.checked .brand-bg-opa-ten{
+
+  .pro-tree-tree-node.checked .brand-bg-opa-ten {
     background-color: inherit;
   }
 }
+
 // 中意全局样式覆盖
 // .pro-form.pro-form-view .ant-form-item * {
 //   line-height: 1!important;
@@ -274,16 +323,19 @@
 // }
 // 重置ant-form view模式样式ant-tree样式
 .pro-form.pro-form-view .ant-form-item .pro-tree * {
-  line-height: 1!important;
-  height: auto!important;
-  min-height: auto!important;
+  line-height: 1 !important;
+  height     : auto !important;
+  min-height : auto !important;
 }
-.pro-form.pro-form-view .ant-form-item .pro-tree .ant-tree-checkbox{
+
+.pro-form.pro-form-view .ant-form-item .pro-tree .ant-tree-checkbox {
   margin-top: var(--zaui-space-size-sm);
 }
-.pro-form.pro-form-view .ant-form-item .pro-tree .ant-tree-switcher{
+
+.pro-form.pro-form-view .ant-form-item .pro-tree .ant-tree-switcher {
   padding-top: var(--zaui-font-size-sm);
 }
+
 .pro-form.pro-form-view .ant-form-item .pro-tree .ant-tree-checkbox * {
-  height: 16px!important;
-}
+  height: 16px !important;
+}

package/es/ProTreeModal/components/List.js

@@ -53,20 +53,6 @@ function List(props, ref) {
     setState({
       checkedList: treeData
     });
-    // if (!span) {
-    //   setState({
-    //     checkedList: treeData,
-    //   });
-    // }
-    // // 数组长度一样不需要重新 filter、这种情况下属于右侧位置拖动
-    // else if (flatTreeData?.length && checkedList.length !== treeData.length) {
-    //   // 如果开启 span 不用管之前的位置顺序、直接按原数据源的顺序来即可
-    //   setState({
-    //     checkedList: flatTreeData.filter((item) =>
-    //       treeData.find((data) => data[fieldNameValue] === item[fieldNameValue]),
-    //     ),
-    //   });
-    // }
   }, [treeData]);
   var _useMemo = useMemo(function () {
       var min = -1;

package/es/ProTreeModal/components/Trigger.js

@@ -5,8 +5,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import classNames from 'classnames';
 import { CloseOutlined } from '@ant-design/icons';
 import { ReactSVG } from 'react-svg';
+import locale, { formatMessage } from '../../locale';
 import viewSvg from '../../assets/view.svg';
 function Trigger(props) {
+  var _locale$ProTreeModal, _locale$ProTreeModal2, _locale$ProTreeModal3;
   var checkedValues = props.checkedValues,
     handleClick = props.handleClick,
     handleClearAll = props.handleClearAll,
@@ -19,7 +21,9 @@ function Trigger(props) {
     children: [isView ? _jsxs("div", {
       className: "pro-tree-modal-isView",
       children: [_jsx("div", {
-        children: checkedValues.length === 0 ? '-' : checkAll ? '全选' : "\u5DF2\u9009\u62E9".concat(checkedValues.length, "\u9879")
+        children: checkedValues.length === 0 ? '-' : checkAll ? locale === null || locale === void 0 ? void 0 : locale.ProTreeModal.checkAll : formatMessage(locale === null || locale === void 0 ? void 0 : (_locale$ProTreeModal = locale.ProTreeModal) === null || _locale$ProTreeModal === void 0 ? void 0 : _locale$ProTreeModal.checkNumber, {
+          num: checkedValues.length
+        })
       }), _jsx("div", {
         className: "pro-enum-input-addonAfter",
         children: _jsx(ReactSVG, {
@@ -31,7 +35,9 @@ function Trigger(props) {
     }) : _jsx(_Input, {
       className: classNames(disabled ? 'trigger-no-hover' : ''),
       onClick: handleClick,
-      value: checkedValues.length === 0 ? null : checkAll ? '全选' : "\u5DF2\u9009\u62E9".concat(checkedValues.length, "\u9879"),
+      value: checkedValues.length === 0 ? null : checkAll ? locale === null || locale === void 0 ? void 0 : locale.ProTreeModal.checkAll : formatMessage(locale === null || locale === void 0 ? void 0 : (_locale$ProTreeModal2 = locale.ProTreeModal) === null || _locale$ProTreeModal2 === void 0 ? void 0 : _locale$ProTreeModal2.checkNumber, {
+        num: checkedValues.length
+      }),
       addonAfter: _jsxs("div", {
         className: "pro-enum-input-addonAfter",
         children: [checkedValues.length > 0 && !disabled && _jsx("span", {
@@ -45,7 +51,7 @@ function Trigger(props) {
           onClick: handleClick
         })]
       }),
-      placeholder: "\u8BF7\u9009\u62E9",
+      placeholder: locale === null || locale === void 0 ? void 0 : (_locale$ProTreeModal3 = locale.ProTreeModal) === null || _locale$ProTreeModal3 === void 0 ? void 0 : _locale$ProTreeModal3.select,
       disabled: disabled,
       style: _objectSpread({}, triggerStyle)
     }), _jsx(_Input, {