@giteeteam/apps-team-components 1.3.0-alpha.2 → 1.3.0-alpha.3

package/README.md

@@ -1,21 +1,21 @@
-# @giteeteam/apps-team-components
-
-- gitee team components
-
-## 安装
-
-```bash
-pnpm i
-```
-
-## 预览
-**开发前务必先阅读预览首页文档**
-```
-pnpm storybook
-```
-
-# 1.1.x版本
-- team最低版本为4.16.0
-
-# 1.2.x版本
-- team最低版本为4.21.0
+# @giteeteam/apps-team-components
+
+- gitee team components
+
+## 安装
+
+```bash
+pnpm i
+```
+
+## 预览
+**开发前务必先阅读预览首页文档**
+```
+pnpm storybook
+```
+
+# 1.1.x版本
+- team最低版本为4.16.0
+
+# 1.2.x版本
+- team最低版本为4.21.0

package/dist/components/common/PriceTag.js

@@ -4,26 +4,26 @@ import { ClassNames } from '@emotion/react';
 import { i18n } from '../../lib/i18n.js';
 import SimpleOverflowToolTip from './overflow-tooltip/SimpleOverflowToolTip.js';
 
-const containerStyle = `
-  display: inline-flex;
-  align-items: center;
-  max-width: 100%;
+const containerStyle = `
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
 `;
-const textStyle = `
-  flex: 1;
-  width: 0;
+const textStyle = `
+  flex: 1;
+  width: 0;
 `;
-const tagStyle = `
-  height: 18px;
-  padding: 0 4px;
-  margin-left: 8px;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 18px;
-  color: #fff;
-  background: linear-gradient(230deg, #66dbff 0%, #3683ff 100%);
-  border-radius: 5px 0;
-  white-space: nowrap;
+const tagStyle = `
+  height: 18px;
+  padding: 0 4px;
+  margin-left: 8px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 18px;
+  color: #fff;
+  background: linear-gradient(230deg, #66dbff 0%, #3683ff 100%);
+  border-radius: 5px 0;
+  white-space: nowrap;
 `;
 const PriceTag = ({ text, className, edition, expired }) => {
     const isTagVisible = useMemo(() => {

package/dist/components/common/expand-component/style.js

@@ -1,10 +1,10 @@
-const expandFooter = `
-  font-size: 12px;
-  color: #0c62ff;
-  text-align: right;
+const expandFooter = `
+  font-size: 12px;
+  color: #0c62ff;
+  text-align: right;
 `;
-const expandBtn = `
-  cursor: pointer;
+const expandBtn = `
+  cursor: pointer;
 `;
 
 export { expandBtn, expandFooter };

package/dist/components/common/overflow-tooltip/style/index.js

@@ -1,19 +1,19 @@
-const tooltipOverflowStyle = `
-  display: -webkit-box;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  word-break: break-all;
-  white-space: pre-line !important;
-  -webkit-box-orient: vertical;
+const tooltipOverflowStyle = `
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  white-space: pre-line !important;
+  -webkit-box-orient: vertical;
 `;
-const simpleTooltipStyle = `
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+const simpleTooltipStyle = `
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 const getTooltipMaxlineStyle = (n) => {
-    return `
-    -webkit-line-clamp: ${n};
+    return `
+    -webkit-line-clamp: ${n};
   `;
 };
 

package/dist/components/common/style/global.js

@@ -1,5 +1,5 @@
-const fieldValueOverlayStyle = `
-  width: 100%;
+const fieldValueOverlayStyle = `
+  width: 100%;
 `;
 
 export { fieldValueOverlayStyle };

package/dist/components/common/style/mixin.js

@@ -1,20 +1,20 @@
 import { gray4, gray6 } from '../../../style/common.js';
 
-const hoverStyle = `
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 32px;
-  padding: 0 8px !important;
-  color: rgb(226 236 255 50%);
-  border: 1px solid ${gray4};
-  border-radius: 4px;
+const hoverStyle = `
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 32px;
+  padding: 0 8px !important;
+  color: rgb(226 236 255 50%);
+  border: 1px solid ${gray4};
+  border-radius: 4px;
 `;
-const hoverIconStyle = `
-  display: none;
-  font-size: 12px;
-  color: ${gray6};
+const hoverIconStyle = `
+  display: none;
+  font-size: 12px;
+  color: ${gray6};
 `;
 
 export { hoverIconStyle, hoverStyle };

package/dist/components/common/user-field/style/index.js

@@ -1,27 +1,27 @@
 const avatarSize = '20px';
-const avatarItemStyle = `
-  flex-shrink: 0;
+const avatarItemStyle = `
+  flex-shrink: 0;
 `;
-const avatarStyle = `
-  display: inline-block;
-  width: ${avatarSize};
-  height: ${avatarSize};
-  margin-right: 3px;
-  vertical-align: middle;
-  background: #fff center/contain no-repeat;
-  border-radius: 50%;
+const avatarStyle = `
+  display: inline-block;
+  width: ${avatarSize};
+  height: ${avatarSize};
+  margin-right: 3px;
+  vertical-align: middle;
+  background: #fff center/contain no-repeat;
+  border-radius: 50%;
 `;
-const defaultAvatarStyle = `
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: ${avatarSize};
-  height: ${avatarSize};
-  margin-right: 6px;
-  font-size: 12px;
-  color: #fff;
-  background: #5243aa;
-  border-radius: 50%;
+const defaultAvatarStyle = `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: ${avatarSize};
+  height: ${avatarSize};
+  margin-right: 6px;
+  font-size: 12px;
+  color: #fff;
+  background: #5243aa;
+  border-radius: 50%;
 `;
 
 export { avatarItemStyle, avatarStyle, defaultAvatarStyle };

package/dist/components/default-empty-icon/style.js

@@ -10,58 +10,58 @@ const autoMarginClass = randomClassName('auto-margin');
 const smallDefaultClass = randomClassName('small-default');
 const largeWorkspaceClass = randomClassName('large-workspace');
 const largeItemClass = randomClassName('large-item');
-const emptyIconWrapper = `
-  margin-top: 12px;
-  text-align: center;
-
-  &.${centerClass} {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    user-select: none;
-  }
-
-  &.${smallTextClass} {
-    .${textClass} {
-      font-size: 12px;
-    }
-  }
-
-  &.${smallMarginClass} {
-    margin-top: 16px;
-  }
-
-  &.${largeMarginClass} {
-    margin-top: 48px;
-  }
-
-  &.${noMarginClass} {
-    margin: 0;
-  }
-
-  &.${autoMarginClass} {
-    margin: auto;
-  }
-
-  .${smallDefaultClass} {
-    width: 90px;
-    height: 90px;
-  }
-
-  .${largeWorkspaceClass},
-  .${largeItemClass} {
-    width: 180px;
-    height: 180px;
-  }
-
-  .${textClass} {
-    padding: 0;
-    margin: 12px 0;
-    font-size: 14px;
-    line-height: 22px;
-    color: #848c9f;
-  }
+const emptyIconWrapper = `
+  margin-top: 12px;
+  text-align: center;
+
+  &.${centerClass} {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+  }
+
+  &.${smallTextClass} {
+    .${textClass} {
+      font-size: 12px;
+    }
+  }
+
+  &.${smallMarginClass} {
+    margin-top: 16px;
+  }
+
+  &.${largeMarginClass} {
+    margin-top: 48px;
+  }
+
+  &.${noMarginClass} {
+    margin: 0;
+  }
+
+  &.${autoMarginClass} {
+    margin: auto;
+  }
+
+  .${smallDefaultClass} {
+    width: 90px;
+    height: 90px;
+  }
+
+  .${largeWorkspaceClass},
+  .${largeItemClass} {
+    width: 180px;
+    height: 180px;
+  }
+
+  .${textClass} {
+    padding: 0;
+    margin: 12px 0;
+    font-size: 14px;
+    line-height: 22px;
+    color: #848c9f;
+  }
 `;
 
 export { autoMarginClass, centerClass, emptyIconWrapper, largeItemClass, largeMarginClass, largeWorkspaceClass, noMarginClass, smallDefaultClass, smallMarginClass, smallTextClass, textClass };

package/dist/components/fields/bind-workspace/style/index.js

@@ -1,6 +1,6 @@
-const pointerStyle = `
-  color: #0c62ff;
-  cursor: pointer;
+const pointerStyle = `
+  color: #0c62ff;
+  cursor: pointer;
 `;
 
 export { pointerStyle };

package/dist/components/fields/dropdown/BaseField.js

@@ -52,6 +52,7 @@ const Dropdown = props => {
     const valueRef = useRef([]);
     const containerRef = useRef(null);
     const targetRef = useRef(null);
+    const onBlurRef = useRef({ time: 0, e: null });
     const [isClicked, setClicked] = useState(false);
     const optionLoadedRef = useRef(false);
     const loadMoreRef = useRef(false);
@@ -430,6 +431,7 @@ const Dropdown = props => {
     const handleBlur = useCallback(e => {
         var _a;
         if (open) {
+            onBlurRef.current = { time: Date.now(), e: e };
             return;
         }
         if (!editMode) {
@@ -497,6 +499,15 @@ const Dropdown = props => {
             });
         }
     }, [isMultiple]);
+    useEffect(() => {
+        if (!open) {
+            const now = Date.now();
+            if (now > onBlurRef.current.time && now - onBlurRef.current.time < 200) {
+                handleBlur(onBlurRef.current.e);
+                onBlurRef.current.time = 0;
+            }
+        }
+    }, [handleBlur, open]);
     const dropdownRender = useCallback(({ cx, css }) => {
         return menu => {
             if (!isShowOnlyWorkspace)

package/dist/components/fields/dropdown/style.js

@@ -1,16 +1,16 @@
 import { randomClassName } from '../../../style/common.js';
 import { hoverStyle, hoverIconStyle } from '../../common/style/mixin.js';
 
-const dropdownSelectDisabled = `
-  text-decoration: line-through;
+const dropdownSelectDisabled = `
+  text-decoration: line-through;
 `;
-const onlyWorkspaceStyle = `
-  padding: 5px 12px;
+const onlyWorkspaceStyle = `
+  padding: 5px 12px;
 `;
-const onlyWorkspaceDividerStyle = `
-  &:not(.add-weights) {
-    margin: 4px 0;
-  }
+const onlyWorkspaceDividerStyle = `
+  &:not(.add-weights) {
+    margin: 4px 0;
+  }
 `;
 const hiddenHoverClass = randomClassName('hidden-hover');
 const displayWrapClass = randomClassName('display-wrap');
@@ -21,73 +21,73 @@ const valueOptionLabelClass = randomClassName('value-option-label');
 const workspaceClass = randomClassName('workspace');
 const hoverIconClass = randomClassName('hover-icon');
 const optionDisplayWrapClass = randomClassName('option-display-wrap');
-const dropdownStyle = (antPrefix) => `
-  width: 100%;
-
-  &:not(.${hiddenHoverClass}) &:not(.${displayWrapClass}) :hover {
-    ${hoverStyle}
-
-    .${hoverIconClass} {
-      display: inline-block;
-    }
-  }
-
-  .${hoverIconClass} {
-    ${hoverIconStyle}
-  }
-
-  .${antPrefix}-select {
-    width: 100%;
-  }
-
-  .${antPrefix}-select-selection-item) {
-    .${workspaceClass} {
-      display: none;
-    }
-  }
-
-  .${valueOptionClass} {
-    margin-bottom: 8px;
-  }
-
-  .${valueOptionContentClass} {
-    width: 100%;
-    padding-top: 6px;
-
-    .${valueOptionIconClass} {
-      position: absolute;
-      margin-top: 3px;
-    }
-
-    .${valueOptionLabelClass} {
-      display: inline-block;
-      width: ~'calc(100% - 22px)';
-      margin-left: 22px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-
-  .${optionDisplayWrapClass} {
-    .${antPrefix}-select-selection-overflow {
-      display: block;
-      .${antPrefix}-select-selection-overflow-item {
-        width: fit-content;
-      }
-    }
-  }
+const dropdownStyle = (antPrefix) => `
+  width: 100%;
+
+  &:not(.${hiddenHoverClass}) &:not(.${displayWrapClass}) :hover {
+    ${hoverStyle}
+
+    .${hoverIconClass} {
+      display: inline-block;
+    }
+  }
+
+  .${hoverIconClass} {
+    ${hoverIconStyle}
+  }
+
+  .${antPrefix}-select {
+    width: 100%;
+  }
+
+  .${antPrefix}-select-selection-item) {
+    .${workspaceClass} {
+      display: none;
+    }
+  }
+
+  .${valueOptionClass} {
+    margin-bottom: 8px;
+  }
+
+  .${valueOptionContentClass} {
+    width: 100%;
+    padding-top: 6px;
+
+    .${valueOptionIconClass} {
+      position: absolute;
+      margin-top: 3px;
+    }
+
+    .${valueOptionLabelClass} {
+      display: inline-block;
+      width: ~'calc(100% - 22px)';
+      margin-left: 22px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .${optionDisplayWrapClass} {
+    .${antPrefix}-select-selection-overflow {
+      display: block;
+      .${antPrefix}-select-selection-overflow-item {
+        width: fit-content;
+      }
+    }
+  }
 `;
 const dropdownSelectOptionClass = randomClassName('dropdown-select-option');
 const disabledClass = randomClassName('disabled');
-const dropdownSelectStyle = (antPrefix) => `
-  .${dropdownSelectOptionClass}.${disabledClass} {
-    text-decoration: line-through;
-  }
-
-  .${antPrefix}-select-selection-item-content {
-    text-decoration: line-through;   
-  }
+const dropdownSelectStyle = (antPrefix) => `
+  .${dropdownSelectOptionClass}.${disabledClass} {
+    text-decoration: line-through;
+  }
+
+  .${antPrefix}-select-selection-item-content {
+    text-decoration: line-through;   
+  }
 `;
 
 export { disabledClass, displayWrapClass, dropdownSelectDisabled, dropdownSelectOptionClass, dropdownSelectStyle, dropdownStyle, hiddenHoverClass, hoverIconClass, onlyWorkspaceDividerStyle, onlyWorkspaceStyle, optionDisplayWrapClass, valueOptionClass, valueOptionContentClass, valueOptionIconClass, valueOptionLabelClass, workspaceClass };

package/dist/components/fields/hyper-link/style/index.js

@@ -1,21 +1,21 @@
 import { blue6 } from '../../../../style/common.js';
 
-const hyperLinkListStyle = `
-  display: flex;
-  width: 100%;
+const hyperLinkListStyle = `
+  display: flex;
+  width: 100%;
 `;
-const hyperLinkItemStyle = `
-  ${hyperLinkListStyle} & {
-    overflow: hidden;
-    color: @blue-6;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    -webkit-line-clamp: 1;
-  }
+const hyperLinkItemStyle = `
+  ${hyperLinkListStyle} & {
+    overflow: hidden;
+    color: @blue-6;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    -webkit-line-clamp: 1;
+  }
 `;
-const hyperLinkTipItem = `
-  display: block;
-  color: ${blue6};
+const hyperLinkTipItem = `
+  display: block;
+  color: ${blue6};
 `;
 
 export { hyperLinkItemStyle, hyperLinkListStyle, hyperLinkTipItem };

package/dist/components/fields/item-type/style/index.js

@@ -1,8 +1,8 @@
-const nameItemTypeImg = `
-  width: 16px;
-  height: 16px;
-  margin-right: 8px;
-  font-size: 16px;
+const nameItemTypeImg = `
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+  font-size: 16px;
 `;
 
 export { nameItemTypeImg };

package/dist/components/fields/long-text/style/index.js

@@ -1,8 +1,8 @@
-const whiteSpacePreStyle = `
-  padding-top: 5px;
-  padding-bottom: 5px;
-  word-break: break-all;
-  white-space: pre-wrap;
+const whiteSpacePreStyle = `
+  padding-top: 5px;
+  padding-bottom: 5px;
+  word-break: break-all;
+  white-space: pre-wrap;
 `;
 
 export { whiteSpacePreStyle };