@douyinfe/semi-foundation 2.32.0-beta.0 → 2.32.0

package/lib/es/utils/date-fns-extra.js

@@ -62,14 +62,6 @@ const parse = (date, formatToken, options) => {
 
   return toDate(date, options);
 };
-/**
- *
- * @param {string | number | Date} date
- * @param {string} formatToken
- * @param {object} [options]
- * @param {string} [options.timeZone]
- */
-
 /* istanbul ignore next */
 
 
@@ -85,21 +77,35 @@ const format = (date, formatToken, options) => {
   return dateFnsFormat(date, formatToken, options);
 };
 /**
+ * Returns a Date which will format as the local time of any time zone from a specific UTC time
  *
- * @param {string | number | Date} date
- * @param {string} timeZone
- * @param {object} options
- * @returns {Date}
+ * @example
+ * ```javascript
+ * import { utcToZonedTime } from 'date-fns-tz'
+ * const { isoDate, timeZone } = fetchInitialValues() // 2014-06-25T10:00:00.000Z, America/New_York
+ * const date = utcToZonedTime(isoDate, timeZone) // In June 10am UTC is 6am in New York (-04:00)
+ * renderDatePicker(date) // 2014-06-25 06:00:00 (in the system time zone)
+ * renderTimeZoneSelect(timeZone) // America/New_York
+ * ```
+ *
+ * @see https://github.com/marnusw/date-fns-tz#utctozonedtime
  */
 
 
 const utcToZonedTime = (date, timeZone, options) => dateFnsUtcToZonedTime(date, toIANA(timeZone), options);
 /**
+ * Given a date and any time zone, returns a Date with the equivalent UTC time
  *
- * @param {string | number | Date} date
- * @param {string} timeZone
- * @param {object} options
- * @returns {Date}
+ * @example
+ * ```
+ * import { zonedTimeToUtc } from 'date-fns-tz'
+ * const date = getDatePickerValue() // e.g. 2014-06-25 10:00:00 (picked in any time zone)
+ * const timeZone = getTimeZoneValue() // e.g. America/Los_Angeles
+ * const utcDate = zonedTimeToUtc(date, timeZone) // In June 10am in Los Angeles is 5pm UTC
+ * postToServer(utcDate.toISOString(), timeZone) // post 2014-06-25T17:00:00.000Z, America/Los_Angeles
+ * ```
+ *
+ * @see https://github.com/marnusw/date-fns-tz#zonedtimetoutc
  */
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.32.0-beta.0",
+    "version": "2.32.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -10,8 +10,8 @@
         "@douyinfe/semi-animation": "2.12.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
-        "date-fns": "^2.9.0",
-        "date-fns-tz": "^1.0.10",
+        "date-fns": "^2.29.3",
+        "date-fns-tz": "^1.3.8",
         "lodash": "^4.17.21",
         "memoize-one": "^5.2.1",
         "scroll-into-view-if-needed": "^2.2.24"
@@ -23,7 +23,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "335f8c47c40373ee1464c841581130e62b62b1d5",
+    "gitHead": "6cf04209adcb1c3ab8d24ba7aec0025394d82d49",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/spin/spin.scss

@@ -29,6 +29,7 @@ $module: #{$prefix}-spin;
         & > svg {
             animation: $animation_duration-spin_wrapper-spin linear infinite #{$prefix}-animation-rotate;
             animation-fill-mode: forwards;
+            vertical-align: top;
             @include size($width-spin_middle);
         }
     }

package/table/table.scss

@@ -209,15 +209,19 @@ $module: #{$prefix}-table;
         display: table-row-group;
         & > .#{$module}-row {
             display: table-row;
+            background-color: $color-table_body-bg-default;
 
             &:hover {
                 & > .#{$module}-row-cell {
-                    background-color: $color-table_body-bg-hover;
+                    // $color-table_body-bg-hover has transparency，will reveal the background color $color-table_body-bg-default\
+                    // combine background-image and background-color to make the non-fixed column color does not show through the bottom color
+                    background-image: linear-gradient(0deg, $color-table_body-bg-hover, $color-table_body-bg-hover);
+                    background-color: $color-table_cell-bg-hover;
 
                     &.#{$module}-cell-fixed {
                         &-left,
                         &-right {
-                            background-color: $color-table_body-bg-default;
+                            background-image: linear-gradient(0deg, $color-table_body-bg-default, $color-table_body-bg-default);
 
                             &::before {
                                 background-color: $color-table_body-bg-hover;
@@ -246,7 +250,6 @@ $module: #{$prefix}-table;
                 box-sizing: border-box;
                 position: relative;
                 vertical-align: middle;
-                background-color: $color-table_body-bg-default;
 
                 &.resizing {
                     border-right: $width-table_resizer_border solid $color-table_resizer-bg-default;

package/table/utils.ts

@@ -2,7 +2,6 @@
 /* eslint-disable no-param-reassign */
 /* eslint-disable eqeqeq */
 import {
-    cloneDeepWith,
     isEqualWith,
     get,
     filter,
@@ -21,17 +20,6 @@ import isNullOrUndefined from '../utils/isNullOrUndefined';
 import Logger from '../utils/Logger';
 
 
-export function cloneDeep(value: any, customizer?: (v: any) => any) {
-    return cloneDeepWith(value, v => {
-        if (typeof v === 'function') {
-            return v;
-        } else if (typeof customizer === 'function') {
-            return customizer(v);
-        }
-        return undefined;
-    });
-}
-
 export function equalWith(value: any, other: any, customizer?: (...args: any[]) => boolean) {
     return isEqualWith(value, other, (objVal, othVal, ...rest) => {
         if (typeof objVal === 'function' && typeof othVal === 'function') {
@@ -61,36 +49,6 @@ export function getColumnKey(column: any, keyPropNames: any[]): any {
     return key;
 }
 
-export function mergeColumns(oldColumns: any[] = [], newColumns: any[] = [], keyPropNames: any[] = null, deep = true) {
-    const finalColumns: any[] = [];
-    const clone = deep ? cloneDeep : lodashClone;
-
-    if (deep) {
-        const logger = new Logger('[@douyinfe/semi-ui Table]');
-        logger.warn('Should not deep merge columns from foundation since columns may have react elements. Merge columns deep from semi-ui');
-    }
-
-    map(newColumns, newColumn => {
-        newColumn = { ...newColumn };
-        const key = getColumnKey(newColumn, keyPropNames);
-
-        const oldColumn = key != null && find(oldColumns, item => getColumnKey(item, keyPropNames) === key);
-
-        if (oldColumn) {
-            finalColumns.push(
-                clone({
-                    ...oldColumn,
-                    ...newColumn,
-                })
-            );
-        } else {
-            finalColumns.push(clone(newColumn));
-        }
-    });
-
-    return finalColumns;
-}
-
 /**
  *
  * @param {Array<number>} arr
@@ -437,7 +395,7 @@ export function mergeQueries(query: Record<string, any>, queries: Record<string,
  * @param {Object[]} newColumns
  */
 export function withResizeWidth(columns: Record<string, any>[], newColumns: Record<string, any>[]) {
-    const _newColumns = cloneDeep(newColumns);
+    const _newColumns = { ...newColumns };
     for (const column of columns) {
         if (!isNullOrUndefined(column.width)) {
             const currentColumn = column.key;

package/table/variables.scss

@@ -75,6 +75,8 @@ $color-table_resizer-bg-default: var(--semi-color-primary); // 表格拉伸标
 $color-table_selection-bg-default: rgba(var(--semi-grey-0), 1); // 表格分组背景色
 $color-table_placeholder-text-default: var(--semi-color-text-2); // 表格空数据文本颜色
 
+$color-table_cell-bg-hover: var(--semi-color-bg-0); // 让表格在 hover 时正确显示 $color-table_body-bg-hover 颜色，如无必要不要修改
+
 // Other
 $font-table_base-fontSize: 14px; // 表格默认文本字号
 $border-table_base-borderStyle: solid; // 表格描边样式

package/tree/tree.scss

@@ -302,6 +302,7 @@ $module: #{$prefix}-tree;
 
         &-spin-icon {
             display: flex;
+            line-height: 0; // make the spin icon in the center
             & svg {
                 width: $width-tree_spinIcon;
                 height: $width-tree_spinIcon;

package/treeSelect/foundation.ts

@@ -49,7 +49,7 @@ export interface BasicTriggerRenderProps {
     value: BasicTreeNodeData[];
     onClear: (e: any) => void;
     onSearch: (inputValue: string) => void;
-    onRemove: (value: string) => void
+    onRemove: (key: string) => void
 }
 
 export type BasicOnChangeWithObject = (node: BasicTreeNodeData[] | BasicTreeNodeData, e: any) => void;

package/upload/upload.scss

@@ -258,6 +258,7 @@ $module: #{$prefix}-upload;
             }
 
             &-loading {
+                line-height: 0; // make the spin icon in the center
                 .#{$prefix}-spin-wrapper svg {
                     height: $width-upload_file_card-icon;
                     width: $width-upload_file_card-icon;

package/utils/date-fns-extra.ts

@@ -100,15 +100,8 @@ const parse = (date: string | number | Date, formatToken: string, options?: any)
     return toDate(date, options);
 };
 
-/**
- *
- * @param {string | number | Date} date
- * @param {string} formatToken
- * @param {object} [options]
- * @param {string} [options.timeZone]
- */
 /* istanbul ignore next */
-const format = (date: string | number | Date, formatToken: string, options?: any) => {
+const format = (date: number | Date, formatToken: string, options?: any) => {
     if (options && options.timeZone != null && options.timeZone !== '') {
         const timeZone = toIANA(options.timeZone);
         options = { ...options, timeZone };
@@ -120,22 +113,36 @@ const format = (date: string | number | Date, formatToken: string, options?: any
 };
 
 /**
- *
- * @param {string | number | Date} date
- * @param {string} timeZone
- * @param {object} options
- * @returns {Date}
+ * Returns a Date which will format as the local time of any time zone from a specific UTC time
+ * 
+ * @example
+ * ```javascript
+ * import { utcToZonedTime } from 'date-fns-tz'
+ * const { isoDate, timeZone } = fetchInitialValues() // 2014-06-25T10:00:00.000Z, America/New_York
+ * const date = utcToZonedTime(isoDate, timeZone) // In June 10am UTC is 6am in New York (-04:00)
+ * renderDatePicker(date) // 2014-06-25 06:00:00 (in the system time zone)
+ * renderTimeZoneSelect(timeZone) // America/New_York
+ * ```
+ * 
+ * @see https://github.com/marnusw/date-fns-tz#utctozonedtime
  */
-const utcToZonedTime = (date: string | number | Date, timeZone: string, options?: OptionsWithTZ) => dateFnsUtcToZonedTime(date, toIANA(timeZone), options);
+const utcToZonedTime = (date: string | number | Date, timeZone: string | number, options?: OptionsWithTZ) => dateFnsUtcToZonedTime(date, toIANA(timeZone), options);
 
 /**
- *
- * @param {string | number | Date} date
- * @param {string} timeZone
- * @param {object} options
- * @returns {Date}
+ * Given a date and any time zone, returns a Date with the equivalent UTC time
+ * 
+ * @example
+ * ```
+ * import { zonedTimeToUtc } from 'date-fns-tz'
+ * const date = getDatePickerValue() // e.g. 2014-06-25 10:00:00 (picked in any time zone)
+ * const timeZone = getTimeZoneValue() // e.g. America/Los_Angeles
+ * const utcDate = zonedTimeToUtc(date, timeZone) // In June 10am in Los Angeles is 5pm UTC
+ * postToServer(utcDate.toISOString(), timeZone) // post 2014-06-25T17:00:00.000Z, America/Los_Angeles
+ * ```
+ * 
+ * @see https://github.com/marnusw/date-fns-tz#zonedtimetoutc
  */
-const zonedTimeToUtc = (date: string | number | Date, timeZone: string, options?: OptionsWithTZ) => dateFnsZonedTimeToUtc(date, toIANA(timeZone), options);
+const zonedTimeToUtc = (date: string | number | Date, timeZone: string | number, options?: OptionsWithTZ) => dateFnsZonedTimeToUtc(date, toIANA(timeZone), options);
 
 /**
  * return current system hour offset based on utc: