@para-ui/core 5.0.0-beta.1 → 5.0.0-beta.4

package/lib/Tree/style/mixin.scss

@@ -0,0 +1,589 @@
+@use "../../styles/theme" as *;
+@use "./params" as *;
+
+@mixin reset-component {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: $NT1;
+  font-size: $small;
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  list-style: none;
+  font-feature-settings: 'tnum';
+}
+
+@mixin paraCheckboxFn($checkbox-prefix-cls) {
+  $checkbox-inner-prefix-cls: '#{$checkbox-prefix-cls}-inner';
+
+  // 一般状态
+  .#{$checkbox-prefix-cls} {
+    @include reset-component;
+    position: relative;
+    top: 0.2em;
+    line-height: 1;
+    white-space: nowrap;
+    outline: none;
+    cursor: pointer;
+
+    .#{$checkbox-prefix-cls}-wrapper:hover &-inner,
+    &:hover &-inner,
+    &-input:focus+&-inner {
+      border-color: $NP1;
+    }
+
+
+    &:hover::after,
+    .#{$checkbox-prefix-cls}-wrapper:hover &::after {
+      visibility: visible;
+    }
+
+    &-inner {
+      position: relative;
+      top: 0;
+      left: 0;
+      display: block;
+      margin-top: 2px;
+      width: 14px;
+      height: 14px;
+      direction: ltr;
+      background-color: $NA4;
+      border: 1px solid $NA1;
+      border-radius: 2px;
+      border-collapse: separate;
+      transition: all 0.3s;
+
+      &::after {
+        position: absolute;
+        top: 50%;
+        left: 21.5%;
+        display: table;
+        width: 6px;
+        height: 9px;
+        border: 2px solid $NA4;
+        border-top: 0;
+        border-left: 0;
+        transform: rotate(45deg) scale(0) translate(-50%, -50%);
+        opacity: 0;
+        transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
+        content: ' ';
+        box-sizing: border-box;
+      }
+    }
+
+    &-input {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 1;
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+      opacity: 0;
+    }
+  }
+
+  // 选中状态
+  .#{$checkbox-prefix-cls}-checked .#{$checkbox-inner-prefix-cls}::after {
+    position: absolute;
+    display: table;
+    border: 1px solid $NA4;
+    border-top: 0;
+    border-left: 0;
+    width: 4px;
+    height: 8px;
+    top: 45%;
+    left: 21%;
+    transform: rotate(45deg) scale(1) translate(-50%, -50%);
+    opacity: 1;
+    transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
+    line-height: 16px;
+    content: ' ';
+  }
+
+  .#{$checkbox-prefix-cls}-checked {
+    .#{$checkbox-inner-prefix-cls} {
+      background-color: $NP1;
+      border-color: rgba(0, 0, 0, 0);
+      line-height: 16px;
+    }
+  }
+
+  .#{$checkbox-prefix-cls}-disabled {
+    cursor: not-allowed;
+    border-color: $NA1;
+
+
+    &.#{$checkbox-prefix-cls}-checked {
+      .#{$checkbox-inner-prefix-cls} {
+        background-color: $NA1;
+        border: none !important;
+      }
+
+      &:hover {
+        .#{$checkbox-inner-prefix-cls} {
+          border-color: $NA1;
+        }
+      }
+
+      .#{$checkbox-inner-prefix-cls}::after {
+        border-color: $NA4;
+        color: $NA4;
+      }
+    }
+
+    .#{$checkbox-prefix-cls}-input {
+      cursor: not-allowed;
+    }
+
+    .#{$checkbox-inner-prefix-cls} {
+      background-color: $NA2;
+      border-color: $NA1;
+
+      &::after {
+        border-color: #fff !important;
+        border-collapse: separate;
+        animation-name: none;
+      }
+    }
+
+    &+span {
+      color: rgba(0, 0, 0, 0.25);
+      cursor: not-allowed;
+    }
+
+    // Not show highlight border of checkbox when disabled
+    &:hover::after,
+    .#{$checkbox-prefix-cls}-wrapper:hover &::after {
+      visibility: hidden;
+    }
+  }
+
+  .#{$checkbox-prefix-cls}-disabled+.paraui-v4-tree-node-content-wrapper {
+    color: $NT3 !important;
+  }
+
+  .#{$checkbox-prefix-cls}-wrapper {
+    @include reset-component;
+    display: inline-flex;
+    align-items: baseline;
+    line-height: unset;
+    cursor: pointer;
+
+    &.#{$checkbox-prefix-cls}-wrapper-disabled {
+      cursor: not-allowed;
+    }
+
+    &+& {
+      margin-left: 8px;
+    }
+  }
+
+
+  .#{$checkbox-prefix-cls}-group {
+    @include reset-component;
+
+    display: inline-block;
+
+    &-item {
+      margin-right: 8px;
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+
+    &-item+&-item {
+      margin-left: 0;
+    }
+  }
+
+  // 半选状态
+  .#{$checkbox-prefix-cls}-indeterminate {
+    .#{$checkbox-inner-prefix-cls} {
+      background-color: $NP1;
+      border-color: $NP1;
+    }
+
+    .#{$checkbox-inner-prefix-cls}::after {
+      top: 50%;
+      left: 50%;
+      width: 8px;
+      height: 2px;
+      background-color: $NA4;
+      border: 0;
+      transform: translate(-50%, -50%) scale(1);
+      opacity: 1;
+      content: ' ';
+    }
+
+    &.#{$checkbox-prefix-cls}-disabled .#{$checkbox-inner-prefix-cls} {
+      background-color: $NA1;
+      border: none !important;
+
+      &::after {
+        border-color: #fff !important;
+        border-collapse: separate;
+        animation-name: none;
+      }
+    }
+  }
+
+}
+
+
+@mixin paraTreeSwitcherIcon {
+
+  .#{$tree-prefix-cls}-switcher-icon,
+  .#{$select-tree-prefix-cls}-switcher-icon {
+    display: inline-block;
+    vertical-align: middle;
+    transition: transform 0.3s;
+    color: inherit;
+
+    svg {
+      font-size: inherit;
+      color: inherit;
+      transition: transform 0.3s;
+    }
+  }
+
+}
+
+@mixin drop-indicator {
+  .#{$tree-prefix-cls}-drop-indicator {
+    position: absolute;
+    z-index: 1;
+    height: 2px;
+    background-color: $NP1;
+    border-radius: 1px;
+    pointer-events: none;
+
+    &::after {
+      position: absolute;
+      top: -3px;
+      left: -6px;
+      width: 8px;
+      height: 8px;
+      background-color: transparent;
+      border: 2px solid $NP1;
+      border-radius: 50%;
+      content: '';
+    }
+  }
+
+}
+
+@mixin paraTreeFn($custom-tree-prefix-cls) {
+  $custom-tree-node-prefix-cls: '#{$custom-tree-prefix-cls}-treenode';
+  @include reset-component;
+  background: $NA4;
+  border-radius: 2px;
+  transition: background-color 0.3s;
+
+  &-focused:not(:hover):not(&-active-focused) {
+    background: #e6f7ff;
+  }
+
+  // =================== Virtual List ===================
+  &-list-holder-inner {
+    align-items: flex-start;
+  }
+
+  &.#{$custom-tree-prefix-cls}-block-node {
+    .#{$custom-tree-prefix-cls}-list-holder-inner {
+      align-items: stretch;
+
+      // >>> Title
+      .#{$custom-tree-prefix-cls}-node-content-wrapper {
+        flex: auto;
+      }
+    }
+  }
+
+  // ===================== TreeNode =====================
+  .#{$custom-tree-node-prefix-cls} {
+    display: flex;
+    align-items: center;
+    //padding: 0 0 4px 0;
+    outline: none;
+
+    // Disabled
+    &-disabled {
+
+      // >>> Title
+      .#{$custom-tree-prefix-cls}-node-content-wrapper {
+        color: rgba(0, 0, 0, 0.25);
+        cursor: not-allowed;
+
+        &:hover {
+          background: transparent;
+        }
+      }
+    }
+
+    &-active .#{$custom-tree-prefix-cls}-node-content-wrapper {
+      background: #f5f5f5;
+    }
+
+    &:not(&-disabled).filter-node .#{$custom-tree-prefix-cls}-title {
+      color: inherit;
+      font-weight: 500;
+    }
+  }
+
+  // >>> Indent
+  &-indent {
+    align-self: stretch;
+    white-space: nowrap;
+    user-select: none;
+
+    &-unit {
+      display: inline-block;
+      width: 24px;
+    }
+  }
+
+  // >>> Switcher
+  &-switcher {
+    @include paraTreeSwitcherIcon;
+    position: relative;
+    flex: none;
+    text-align: center;
+    width: 16px;
+    margin-right: 4px;
+    cursor: pointer;
+    user-select: none;
+
+    &-noop {
+      cursor: default;
+    }
+
+    &-icon {
+      &[data-name="DownTriangleF"] {
+        &:hover {
+          color: $NP1;
+          background: $NA3;
+        }
+      }
+    }
+
+
+    &_close {
+      .#{$custom-tree-prefix-cls}-switcher-icon {
+        transform: rotate(-90deg);
+
+        svg {
+          color: currentColor;
+          transform: rotate(-90deg);
+        }
+      }
+    }
+
+    //tree node loading
+    &-loading-icon {
+      color: $NP1;
+      will-change: transform;
+      transition: transform .3s ease-in-out;
+      animation: treeLoadingCircle 1s infinite linear;
+      vertical-align: middle;
+      font-size: $small !important;
+    }
+
+    @keyframes treeLoadingCircle {
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+
+    &-leaf-line {
+      position: relative;
+      z-index: 1;
+      display: inline-block;
+      width: 100%;
+      height: 100%;
+
+      &::before {
+        position: absolute;
+        top: 0;
+        bottom: -4px;
+        margin-left: -1px;
+        border-left: 1px solid #d9d9d9;
+        content: ' ';
+      }
+
+      &::after {
+        position: absolute;
+        width: 10px;
+        height: 14px;
+        margin-left: -1px;
+        border-bottom: 1px solid #d9d9d9;
+        content: ' ';
+      }
+    }
+  }
+
+  // >>> Checkbox
+  &-checkbox {
+    top: initial;
+    width: 18px;
+    height: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  // >>> Title
+  & &-node-content-wrapper {
+    padding: 0 8px;
+    position: relative;
+    z-index: auto;
+    min-height: 24px;
+    margin: 2px 0 0 0;
+    color: inherit;
+    line-height: 24px;
+    background: transparent;
+    border-radius: 2px;
+    cursor: pointer;
+    transition: all 0.3s, border 0s, line-height 0s, box-shadow 0s;
+
+    &:hover {
+      background-color: $NA3;
+      border-radius: $radius;
+    }
+
+    &.#{$custom-tree-prefix-cls}-node-selected {
+      color: $NP1;
+    }
+
+    // Icon
+    .#{$custom-tree-prefix-cls}-iconEle {
+      display: inline-block;
+      height: 24px;
+      margin-right: 8px;
+      line-height: 26px;
+      text-align: center;
+      vertical-align: top;
+
+      >svg {
+        vertical-align: -0.125em;
+        color: $NT1;
+      }
+
+      &:empty {
+        display: none;
+      }
+    }
+  }
+
+  &-unselectable &-node-content-wrapper:hover {
+    background-color: transparent;
+  }
+
+  // ==================== Draggable =====================
+  &-node-content-wrapper[draggable='true'] {
+    line-height: 24px;
+    user-select: none;
+
+    @include drop-indicator;
+  }
+
+  .#{$custom-tree-node-prefix-cls}.drop-container {
+    >[draggable] {
+      box-shadow: 0 0 0 2px $NP1;
+    }
+  }
+
+  // ==================== Show Line =====================
+  &-show-line {
+
+    // ================ Indent lines ================
+    .#{$custom-tree-prefix-cls}-indent {
+      &-unit {
+        position: relative;
+        height: 100%;
+
+        &::before {
+          position: absolute;
+          top: 0;
+          right: 12px;
+          bottom: -4px;
+          border-right: 1px solid #d9d9d9;
+          content: '';
+        }
+
+        &-end {
+          &::before {
+            display: none;
+          }
+        }
+      }
+    }
+
+    // ============== Cover Background ==============
+    .#{$custom-tree-prefix-cls}-switcher {
+      background: $NA4;
+
+      //特殊处理
+      &_close {
+        svg {
+          transform: rotate(-90deg);
+          color: inherit;
+          font-size: $small;
+          transition: transform 0.3s;
+        }
+      }
+
+      &_open {
+        svg {
+          color: inherit;
+          font-size: $small;
+          transition: transform 0.3s;
+        }
+      }
+
+
+
+      &-line-icon {
+        vertical-align: -0.225em;
+        color: inherit;
+        font-size: $small;
+
+        &[data-name="DownTriangleF"] {
+          &:hover {
+            color: $NP1;
+            background: $NA3;
+          }
+        }
+      }
+    }
+  }
+
+}
+
+.#{$tree-node-prefix-cls}-leaf-last {
+  .#{$tree-prefix-cls}-switcher {
+    &-leaf-line {
+      &::before {
+        top: auto !important;
+        bottom: auto !important;
+        height: 14px !important;
+      }
+    }
+  }
+}
+
+
+@keyframes treeCheckboxEffect {
+  0% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+
+  100% {
+    transform: scale(1.6);
+    opacity: 0;
+  }
+}

package/lib/Tree/style/rtl.scss

@@ -0,0 +1,76 @@
+@use "../../styles/theme" as *;
+@use "./params" as *;
+
+.#{$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 {
+          $self: &;
+
+          .#{$tree-prefix-cls}-rtl#{$self} {
+            right: auto;
+            left: -13px;
+            border-right: none;
+            border-left: 1px solid #d9d9d9;
+          }
+        }
+      }
+    }
+  }
+
+  // >>> Checkbox
+  &-checkbox {
+    $self: &;
+
+    .#{$tree-prefix-cls}-rtl#{$self} {
+      margin: 4px 0 0 8px;
+    }
+  }
+}
+
+.#{$select-tree-prefix-cls} {
+
+  // >>> Checkbox
+  &-checkbox {
+    .#{$tree-prefix-cls}-select-dropdown-rtl & {
+      margin: 4px 0 0 8px;
+    }
+  }
+}

package/lib/Tree/utils/treeUtil.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("../../_virtual/jsx-runtime.js"),p=require("react"),j=require("clsx"),f=require("@para-ui/icons/LoadingF"),g=require("@para-ui/icons/Document"),c=require("@para-ui/icons/DownTriangleF"),h=require("../../Radio/index.js"),x=require("../../GlobalContext/constant.js"),a=()=>({height:0,opacity:0}),m=e=>({height:e.scrollHeight,opacity:1}),E=e=>({height:e.offsetHeight}),l=(e,t)=>t.propertyName==="height",N={motionName:`${x.$prefixCls}-tree-motion-collapse`,onAppearStart:a,onEnterStart:a,onAppearActive:m,onEnterActive:m,onLeaveStart:E,onLeaveActive:a,onAppearEnd:l,onEnterEnd:l,onLeaveEnd:l,motionDeadline:500};function R(e,t,n,{isLeaf:r,expanded:i,loading:s,eventKey:$}){if(s)return o.jsxRuntimeExports.jsx(f,{className:`${e}-switcher-loading-icon`});let u;if(n&&typeof n=="object"&&(u=n.showLeafIcon),r)return n?typeof n=="object"&&!u?o.jsxRuntimeExports.jsx("span",{className:`${e}-switcher-leaf-line`}):o.jsxRuntimeExports.jsx(g,{className:`${e}-switcher-line-icon`}):null;const d=`${e}-switcher-icon`;return p.isValidElement(t)?p.cloneElement(t,{className:j(t.props.className||"",d)}):t||(n?i?o.jsxRuntimeExports.jsx(c,{className:`${e}-switcher-line-icon`}):o.jsxRuntimeExports.jsx(c,{className:`${e}-switcher-line-icon`}):o.jsxRuntimeExports.jsx(c,{className:d}))}function y(e,t,n,r){if(!t)return null;const i=r?.key||"key",s=e.data?.[i]===n;return o.jsxRuntimeExports.jsx(h.Radio,{className:`${x.$prefixCls}-tree-node-radio`,checked:s})}exports.collapseMotion=N;exports.default=R;exports.renderTreeNodeIcon=y;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("../../_virtual/jsx-runtime.js"),m=require("react"),g=require("clsx"),j=require("../../node_modules/@para-ui/icons/LoadingF/index.js"),f=require("../../node_modules/@para-ui/icons/Document/index.js"),a=require("../../node_modules/@para-ui/icons/DownTriangleF/index.js"),h=require("../../Radio/index.js"),x=require("../../GlobalContext/constant.js"),c=()=>({height:0,opacity:0}),p=e=>({height:e.scrollHeight,opacity:1}),E=e=>({height:e.offsetHeight}),l=(e,t)=>t.propertyName==="height",N={motionName:`${x.$prefixCls}-tree-motion-collapse`,onAppearStart:c,onEnterStart:c,onAppearActive:p,onEnterActive:p,onLeaveStart:E,onLeaveActive:c,onAppearEnd:l,onEnterEnd:l,onLeaveEnd:l,motionDeadline:500};function R(e,t,n,{isLeaf:r,expanded:i,loading:s,eventKey:y}){if(s)return o.jsxRuntimeExports.jsx(j.LoadingF,{className:`${e}-switcher-loading-icon`});let u;if(n&&typeof n=="object"&&(u=n.showLeafIcon),r)return n?typeof n=="object"&&!u?o.jsxRuntimeExports.jsx("span",{className:`${e}-switcher-leaf-line`}):o.jsxRuntimeExports.jsx(f.Document,{className:`${e}-switcher-line-icon`}):null;const d=`${e}-switcher-icon`;return m.isValidElement(t)?m.cloneElement(t,{className:g(t.props.className||"",d)}):t||(n?i?o.jsxRuntimeExports.jsx(a.DownTriangleF,{className:`${e}-switcher-line-icon`}):o.jsxRuntimeExports.jsx(a.DownTriangleF,{className:`${e}-switcher-line-icon`}):o.jsxRuntimeExports.jsx(a.DownTriangleF,{className:d}))}function $(e,t,n,r){if(!t)return null;const i=r?.key||"key",s=e.data?.[i]===n;return o.jsxRuntimeExports.jsx(h.Radio,{className:`${x.$prefixCls}-tree-node-radio`,checked:s})}exports.collapseMotion=N;exports.default=R;exports.renderTreeNodeIcon=$;
 //# sourceMappingURL=treeUtil.js.map

package/lib/Upload/ErroTip/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./index.css');const r=require("../../_virtual/jsx-runtime.js"),s=require("@para-ui/icons/Forbid"),t=require("clsx"),i=require("../../GlobalContext/constant.js");;/* empty css            */const u=e=>r.jsxRuntimeExports.jsxs("div",{className:t(`${i.$prefixCls}-upload-error`,e.className),children:[r.jsxRuntimeExports.jsx(s,{}),e.message]});exports.default=u;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./index.css');const r=require("../../_virtual/jsx-runtime.js"),s=require("../../node_modules/@para-ui/icons/Forbid/index.js"),t=require("clsx"),i=require("../../GlobalContext/constant.js");;/* empty css            */const u=e=>r.jsxRuntimeExports.jsxs("div",{className:t(`${i.$prefixCls}-upload-error`,e.className),children:[r.jsxRuntimeExports.jsx(s.Forbid,{}),e.message]});exports.default=u;
 //# sourceMappingURL=index.js.map

package/lib/Upload/ImageUpload/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./index.css');const o=require("../../_virtual/jsx-runtime.js"),r=require("react"),Fe=require("rc-upload"),N=require("clsx"),Ue=require("@para-ui/icons/UploadFile"),be=require("@para-ui/icons/Loading"),ye=require("@para-ui/icons/EditOutline"),Ne=require("@para-ui/icons/Close"),Se=require("../UploadList/index.js"),Le=require("../ErroTip/index.js"),qe=require("../../Tooltip/index.js"),Ie=require("../../Button/index.js"),Pe=require("../../GlobalContext/useFormatMessage.js"),Me=require("../lang/index.js"),S=require("../../GlobalContext/constant.js"),L=require("../util.js");;/* empty css            */const De=q=>{const{className:G,style:H,onStart:J,onSuccess:K,onError:Q,onProgress:W,onRemove:E,beforeUpload:X,onChange:v,defaultFileList:Y=[],fileList:g,showUploadList:d=!0,maxCount:Z,children:ee=null,itemRender:se,showUploadError:j=!1,stash:te=!1,uploading:ae=!0,loading:I=!1,showLoading:oe=!1,defaultImage:u,readonly:P,onPreview:re,actionRender:ie,operateBtnProps:ne,disabledTooltip:w,removeErrorTip:le,avatarProps:l,defaultFile:R,...F}=q,M=Pe.default("Upload",Me.default),[c,U]=r.useState(L.composeDefaultFileList(Y,R)),[ce,de]=r.useState(!1),[n,D]=r.useState(),[ue,b]=r.useState(!1),[pe,y]=r.useState(!0),[p,m]=r.useState(!1),[C,O]=r.useState(!1),[i,x]=r.useState({imageUrl:""}),{showRemoveIcon:me,removeIcon:xe,showPreviewIcon:fe,previewIcon:ge}=typeof d=="boolean"?{}:d,{uploadErrorMsg:T=M({id:"uploadError"}),leaveDelay:$=2e3}=typeof j=="boolean"?{}:j,f=r.useRef(),B=r.useMemo(()=>!d&&i.imageUrl&&!p,[d,i.imageUrl,p]);r.useEffect(()=>{if(l&&Object.prototype.toString.call(l)==="[object Object]"&&Object.keys(l).length>0){const{showReset:e=!1,borderRadius:t="50%",defaultImage:s,showName:a=!1}=l||{};de(e),D(String(t).includes("px")||String(t).includes("%")?String(t):`${t}px`),b(!0),y(a),x({...s||u||{imageUrl:""}})}else typeof l=="boolean"&&l?(D("50%"),b(!0),y(!1),u&&x({...u})):(b(!1),y(!0),u&&x({...u}))},[l,u]),r.useEffect(()=>{m(I)},[I]);const je={accept:"image/*",...F,beforeUpload:async(e,t)=>{F.action&&oe&&ae&&m(!0);const s=await X?.(e,t);return s===!1?(m(!1),!1):typeof s=="object"&&s?s instanceof File||s instanceof Blob?s:(f.current=s.cropFile,s.isUpload):!0},onStart(e){J?.(e)},onSuccess(e,t,s){m(!1),C&&_(!1);const a=A(t);h(a),K?.(e,t,s)},onError(e,t,s){if(m(!1),_(!!j),!j){s.status="error",s.response=e?.message||T;const a=A(s);h(a)}Q?.(e,t,s)},onProgress(e,t){W?.(e,t)},onBatchStart(e){if(te){if(f.current){const a=e.findIndex(V=>V.file.uid===f.current?.uid);a>-1&&e.splice(a,1,{file:f.current,parsedFile:f.current})}const t=e.map(a=>a.parsedFile||a.file),s=Re(t);h(s)}}},h=async e=>{let t=[...e];if(!d){const s=t.slice(-1)[0];if(s){const a=await he(s);s.dataUrl=a,i.imageUrl=a,i.imageName=s.name,x({...i}),v?.([s])}else x({imageUrl:""}),v?.([]);return}t=L.processUploadFiles(Z,t,R),v?.(t),U(t)},A=e=>{const t=[...c],s={...e,lastModified:e.lastModified,lastModifiedDate:e.lastModifiedDate,name:e.name,size:e.size,type:e.type,uid:e.uid,originFileObj:e};return t.concat(s)},Re=e=>{const t=[...c],s=e.map(a=>({...a,lastModified:a.lastModified,lastModifiedDate:a.lastModifiedDate,name:a.name,size:a.size,type:a.type,uid:a.uid,originFileObj:a}));return t.concat(s)},z=e=>{Promise.resolve(typeof E=="function"?E(e):E).then(t=>{if(t===!1)return;const s=c.findIndex(a=>a.uid===e.uid);s>-1&&c.splice(s,1),h(c)})},he=async e=>new Promise(t=>{const s=new FileReader;e.originFileObj?(s.onload=()=>{t(s.result)},s.readAsDataURL(e.originFileObj)):t("")}),_=e=>{O(e),!($<0)&&setTimeout(()=>{O(!1)},$)};r.useEffect(()=>{const e=L.composeDefaultFile(R);e&&!g?.length?U([e]):g&&U([...g])},[g,R]);const Ee=()=>d&&o.jsxRuntimeExports.jsx(Se.UploadList,{listType:"picture-card",readonly:P,items:c,showRemoveIcon:me,removeIcon:xe,showPreviewIcon:fe,previewIcon:ge,onRemove:z,itemRender:se,onPreview:re,actionRender:ie,operateBtnProps:ne,disabled:q.disabled}),ve=()=>{const e=o.jsxRuntimeExports.jsxs("div",{className:"upload-img-wrapper",style:n?{borderRadius:n}:{},children:[o.jsxRuntimeExports.jsx("img",{src:i.imageUrl,alt:i.imageName??"",style:n?{borderRadius:n}:{}}),i.imageName&&pe&&o.jsxRuntimeExports.jsx("span",{className:"upload-img-wrapper-name",children:i.imageName}),o.jsxRuntimeExports.jsx("span",{className:"upload-img-wrapper-action",children:o.jsxRuntimeExports.jsx(ye,{})})]}),t=o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[p?o.jsxRuntimeExports.jsx(be,{className:"upload-image-loading"}):o.jsxRuntimeExports.jsx(Ue,{className:"upload-image-icon"}),o.jsxRuntimeExports.jsx("span",{className:N("upload-image-text",p&&"upload-image-text-loading"),children:p?M({id:"uploading"}):ee})]});return F.disabled&&w&&w?.title?o.jsxRuntimeExports.jsx(qe.Tooltip,{followCursor:!0,...w||{},disabled:!0,children:o.jsxRuntimeExports.jsx("div",{className:"upload-image-select-tooltip-wrapper",children:t})}):B?e:o.jsxRuntimeExports.jsx(o.jsxRuntimeExports.Fragment,{children:t})},k=()=>o.jsxRuntimeExports.jsxs("div",{className:N("upload-image-select",p&&"upload-image-select-loading",ue&&"is-avatar"),style:n?{borderRadius:n}:{},children:[o.jsxRuntimeExports.jsx(Fe,{...je,prefixCls:`${S.$rcPrefixCls}-upload`,children:o.jsxRuntimeExports.jsx("div",{className:`${B?"is-avatar ":""}upload-image-picture-card`,style:n?{borderRadius:n}:{},children:ve()})}),C&&!le&&o.jsxRuntimeExports.jsx(Le.default,{message:T,className:`${S.$prefixCls}-upload-error-image`})]}),we=()=>{z(c[0])};return o.jsxRuntimeExports.jsxs("div",{className:N(`${S.$prefixCls}-upload-image`,G),style:H,children:[Ee(),P?o.jsxRuntimeExports.jsx(o.jsxRuntimeExports.Fragment,{}):ce&&i.imageUrl?o.jsxRuntimeExports.jsxs("div",{className:"upload-img-wrapper-container",children:[o.jsxRuntimeExports.jsx(Ie.Button.IconButton,{className:"upload-img-wrapper-container__del-btn",variant:"text",size:"small",onClick:we,children:o.jsxRuntimeExports.jsx(Ne,{})}),k()]}):k()]})};exports.default=De;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./index.css');const o=require("../../_virtual/jsx-runtime.js"),r=require("react"),Fe=require("rc-upload"),N=require("clsx"),Ue=require("../../node_modules/@para-ui/icons/UploadFile/index.js"),be=require("../../node_modules/@para-ui/icons/Loading/index.js"),ye=require("../../node_modules/@para-ui/icons/EditOutline/index.js"),Ne=require("../../node_modules/@para-ui/icons/Close/index.js"),Se=require("../UploadList/index.js"),Le=require("../ErroTip/index.js"),qe=require("../../Tooltip/index.js"),Ie=require("../../Button/index.js"),Pe=require("../../GlobalContext/useFormatMessage.js"),Me=require("../lang/index.js"),S=require("../../GlobalContext/constant.js"),L=require("../util.js");;/* empty css            */const $e=q=>{const{className:G,style:H,onStart:J,onSuccess:K,onError:Q,onProgress:W,onRemove:E,beforeUpload:X,onChange:v,defaultFileList:Y=[],fileList:g,showUploadList:c=!0,maxCount:Z,children:ee=null,itemRender:se,showUploadError:j=!1,stash:te=!1,uploading:ae=!0,loading:I=!1,showLoading:oe=!1,defaultImage:u,readonly:P,onPreview:re,actionRender:ie,operateBtnProps:ne,disabledTooltip:w,removeErrorTip:le,avatarProps:l,defaultFile:R,...F}=q,M=Pe.default("Upload",Me.default),[d,U]=r.useState(L.composeDefaultFileList(Y,R)),[de,ce]=r.useState(!1),[n,$]=r.useState(),[ue,b]=r.useState(!1),[pe,y]=r.useState(!0),[p,m]=r.useState(!1),[D,C]=r.useState(!1),[i,x]=r.useState({imageUrl:""}),{showRemoveIcon:me,removeIcon:xe,showPreviewIcon:fe,previewIcon:ge}=typeof c=="boolean"?{}:c,{uploadErrorMsg:O=M({id:"uploadError"}),leaveDelay:T=2e3}=typeof j=="boolean"?{}:j,f=r.useRef(),B=r.useMemo(()=>!c&&i.imageUrl&&!p,[c,i.imageUrl,p]);r.useEffect(()=>{if(l&&Object.prototype.toString.call(l)==="[object Object]"&&Object.keys(l).length>0){const{showReset:e=!1,borderRadius:t="50%",defaultImage:s,showName:a=!1}=l||{};ce(e),$(String(t).includes("px")||String(t).includes("%")?String(t):`${t}px`),b(!0),y(a),x({...s||u||{imageUrl:""}})}else typeof l=="boolean"&&l?($("50%"),b(!0),y(!1),u&&x({...u})):(b(!1),y(!0),u&&x({...u}))},[l,u]),r.useEffect(()=>{m(I)},[I]);const je={accept:"image/*",...F,beforeUpload:async(e,t)=>{F.action&&oe&&ae&&m(!0);const s=await X?.(e,t);return s===!1?(m(!1),!1):typeof s=="object"&&s?s instanceof File||s instanceof Blob?s:(f.current=s.cropFile,s.isUpload):!0},onStart(e){J?.(e)},onSuccess(e,t,s){m(!1),D&&_(!1);const a=A(t);h(a),K?.(e,t,s)},onError(e,t,s){if(m(!1),_(!!j),!j){s.status="error",s.response=e?.message||O;const a=A(s);h(a)}Q?.(e,t,s)},onProgress(e,t){W?.(e,t)},onBatchStart(e){if(te){if(f.current){const a=e.findIndex(V=>V.file.uid===f.current?.uid);a>-1&&e.splice(a,1,{file:f.current,parsedFile:f.current})}const t=e.map(a=>a.parsedFile||a.file),s=Re(t);h(s)}}},h=async e=>{let t=[...e];if(!c){const s=t.slice(-1)[0];if(s){const a=await he(s);s.dataUrl=a,i.imageUrl=a,i.imageName=s.name,x({...i}),v?.([s])}else x({imageUrl:""}),v?.([]);return}t=L.processUploadFiles(Z,t,R),v?.(t),U(t)},A=e=>{const t=[...d],s={...e,lastModified:e.lastModified,lastModifiedDate:e.lastModifiedDate,name:e.name,size:e.size,type:e.type,uid:e.uid,originFileObj:e};return t.concat(s)},Re=e=>{const t=[...d],s=e.map(a=>({...a,lastModified:a.lastModified,lastModifiedDate:a.lastModifiedDate,name:a.name,size:a.size,type:a.type,uid:a.uid,originFileObj:a}));return t.concat(s)},z=e=>{Promise.resolve(typeof E=="function"?E(e):E).then(t=>{if(t===!1)return;const s=d.findIndex(a=>a.uid===e.uid);s>-1&&d.splice(s,1),h(d)})},he=async e=>new Promise(t=>{const s=new FileReader;e.originFileObj?(s.onload=()=>{t(s.result)},s.readAsDataURL(e.originFileObj)):t("")}),_=e=>{C(e),!(T<0)&&setTimeout(()=>{C(!1)},T)};r.useEffect(()=>{const e=L.composeDefaultFile(R);e&&!g?.length?U([e]):g&&U([...g])},[g,R]);const Ee=()=>c&&o.jsxRuntimeExports.jsx(Se.UploadList,{listType:"picture-card",readonly:P,items:d,showRemoveIcon:me,removeIcon:xe,showPreviewIcon:fe,previewIcon:ge,onRemove:z,itemRender:se,onPreview:re,actionRender:ie,operateBtnProps:ne,disabled:q.disabled}),ve=()=>{const e=o.jsxRuntimeExports.jsxs("div",{className:"upload-img-wrapper",style:n?{borderRadius:n}:{},children:[o.jsxRuntimeExports.jsx("img",{src:i.imageUrl,alt:i.imageName??"",style:n?{borderRadius:n}:{}}),i.imageName&&pe&&o.jsxRuntimeExports.jsx("span",{className:"upload-img-wrapper-name",children:i.imageName}),o.jsxRuntimeExports.jsx("span",{className:"upload-img-wrapper-action",children:o.jsxRuntimeExports.jsx(ye.EditOutline,{})})]}),t=o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[p?o.jsxRuntimeExports.jsx(be.Loading,{className:"upload-image-loading"}):o.jsxRuntimeExports.jsx(Ue.UploadFile,{className:"upload-image-icon"}),o.jsxRuntimeExports.jsx("span",{className:N("upload-image-text",p&&"upload-image-text-loading"),children:p?M({id:"uploading"}):ee})]});return F.disabled&&w&&w?.title?o.jsxRuntimeExports.jsx(qe.Tooltip,{followCursor:!0,...w||{},disabled:!0,children:o.jsxRuntimeExports.jsx("div",{className:"upload-image-select-tooltip-wrapper",children:t})}):B?e:o.jsxRuntimeExports.jsx(o.jsxRuntimeExports.Fragment,{children:t})},k=()=>o.jsxRuntimeExports.jsxs("div",{className:N("upload-image-select",p&&"upload-image-select-loading",ue&&"is-avatar"),style:n?{borderRadius:n}:{},children:[o.jsxRuntimeExports.jsx(Fe,{...je,prefixCls:`${S.$rcPrefixCls}-upload`,children:o.jsxRuntimeExports.jsx("div",{className:`${B?"is-avatar ":""}upload-image-picture-card`,style:n?{borderRadius:n}:{},children:ve()})}),D&&!le&&o.jsxRuntimeExports.jsx(Le.default,{message:O,className:`${S.$prefixCls}-upload-error-image`})]}),we=()=>{z(d[0])};return o.jsxRuntimeExports.jsxs("div",{className:N(`${S.$prefixCls}-upload-image`,G),style:H,children:[Ee(),P?o.jsxRuntimeExports.jsx(o.jsxRuntimeExports.Fragment,{}):de&&i.imageUrl?o.jsxRuntimeExports.jsxs("div",{className:"upload-img-wrapper-container",children:[o.jsxRuntimeExports.jsx(Ie.Button.IconButton,{className:"upload-img-wrapper-container__del-btn",variant:"text",size:"small",onClick:we,children:o.jsxRuntimeExports.jsx(Ne.Close,{})}),k()]}):k()]})};exports.default=$e;
 //# sourceMappingURL=index.js.map