@douyinfe/semi-foundation 2.1.0-alpha.1 → 2.1.0-alpha.2

package/anchor/foundation.ts

@@ -1,5 +1,5 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-import { isArray, get } from 'lodash';
+import { isArray, get } from 'lodash-es';
 import scrollIntoView, { CustomBehaviorOptions } from 'scroll-into-view-if-needed';
 import { cssClasses } from './constants';
 import React from 'react';

package/autoComplete/autoComplete.scss

@@ -1,7 +1,7 @@
 $module: #{$prefix}-autocomplete;
 
 @import "./variables.scss";
-
+@import "../select/option.scss";
 .#{$module} {
     cursor: text;
     display: inline-flex;

package/autoComplete/foundation.ts

@@ -1,6 +1,6 @@
 /* eslint-disable prefer-const, max-len */
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-import { isString, isNumber, isUndefined, isObject } from 'lodash';
+import { isString, isNumber, isUndefined, isObject } from 'lodash-es';
 import warning from '../utils/warning';
 import KeyCode from '../utils/keyCode';
 

package/babel.config.js

@@ -0,0 +1,33 @@
+module.exports = {
+    presets: [
+        [
+            '@babel/preset-env',
+            {
+                modules: false,
+                targets: {
+                    browsers: [
+                        "> 0.5%",
+                        "last 2 versions",
+                        "Firefox ESR",
+                        "not dead",
+                        "not IE 11"
+                    ]
+                }
+            },
+        ],
+    ],
+    plugins: [
+        [
+            '@babel/plugin-transform-runtime',
+            {
+                corejs: 3
+            },
+        ],
+        [
+            '@babel/plugin-proposal-decorators',
+            {
+                legacy: true,
+            },
+        ],
+    ]
+};

package/base/foundation.ts

@@ -5,7 +5,7 @@
  */
  
 import log from '../utils/log';
-import { noop } from 'lodash';
+import { noop } from 'lodash-es';
 
 export type noopFunction = (...args: any) => any;
 // eslint-disable-next-line

package/calendar/foundation.ts

@@ -83,11 +83,13 @@ export type MonthData = Record<number, DateObj[]>;
 //     cacheEventKeys: (cachedKeys: Array<string>) => void;
 // }
 
+export type ParsedEventsType = ParsedEvents | ParsedEventsWithArray | MonthlyEvent;
+
 export interface CalendarAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     updateCurrPos?: (currPos: number) => void;
     updateShowCurrTime?: () => void;
     updateScrollHeight?: (scrollHeight: number) => void;
-    setParsedEvents?: (parsedEvents: ParsedEvents | ParsedEventsWithArray | MonthlyEvent) => void;
+    setParsedEvents?: (parsedEvents: ParsedEventsType) => void;
     cacheEventKeys?: (cachedKeys: Array<string>) => void;
     setRangeData?: (data: RangeData) => void;
     getRangeData?: () => RangeData;

package/cascader/foundation.ts

@@ -1,4 +1,4 @@
-import { isEqual, get, difference, isUndefined, assign, cloneDeep, isEmpty, isNumber, includes } from 'lodash';
+import { isEqual, get, difference, isUndefined, assign, cloneDeep, isEmpty, isNumber, includes } from 'lodash-es';
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import {
     filter,
@@ -77,7 +77,7 @@ export interface BasicTriggerRenderProps {
     /** The hierarchical position of the selected node in treeData,
      * as in the following example, when Zhejiang-Hangzhou-Xiaoshan
      * District is selected, the value here is 0-0-1 */
-    value?: string;
+    value?: string | Set<string>;
     /* The input value of the current input box */
     inputValue: string;
     /* Cascader's placeholder */

package/cascader/util.ts

@@ -2,7 +2,7 @@ import {
     isNull,
     isUndefined,
     isEqual
-} from 'lodash';
+} from 'lodash-es';
 
 function getPosition(level: any, index: any) {
     return `${level}-${index}`;

package/collapse/foundation.ts

@@ -23,7 +23,7 @@ export interface CollapseState{
 }
 
 export interface CollapseAdapter extends DefaultAdapter<CollapseProps, CollapseState>{
-    handleChange: (...args: ArgsType<CollapseProps['onChange']>) => ReturnType<CollapseProps['onChange']>;
+    handleChange: (activeKey: CollapseProps['activeKey'], e: any) => void;
     // getStates: () => CollapseState;
     // getProps: () => CollapseProps;
     addActiveKey: (newSet: CollapseState['activeSet']) => void;

package/datePicker/_utils/getFullDateOffset.ts

@@ -1,4 +1,4 @@
-import { isFunction } from 'lodash';
+import { isFunction } from 'lodash-es';
 import { strings } from '../constants';
 import { format } from 'date-fns';
 

package/datePicker/foundation.ts

@@ -1,7 +1,7 @@
 /* eslint-disable no-nested-ternary */
 /* eslint-disable max-len, max-depth,  */
 import { format, isValid, isSameSecond, isEqual as isDateEqual, isDate } from 'date-fns';
-import { get, isObject, isString, isEqual } from 'lodash';
+import { get, isObject, isString, isEqual } from 'lodash-es';
 
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { isValidDate, isTimestamp } from './_utils/index';
@@ -282,7 +282,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
         if (isValidDate(value)) {
             dateObj = value as Date;
         } else if (isString(value)) {
-            dateObj = compatiableParse(value, this.getProp('format'), undefined, dateFnsLocale);
+            dateObj = compatiableParse(value as string, this.getProp('format'), undefined, dateFnsLocale);
         } else if (isTimestamp(value)) {
             dateObj = new Date(value);
         } else {

package/datePicker/monthsGridFoundation.ts

@@ -16,7 +16,7 @@ import {
 import { isBefore, isValidDate, getDefaultFormatToken, getFullDateOffset } from './_utils/index';
 import { formatFullDate, WeekStartNumber } from './_utils/getMonthTable';
 import { compatiableParse } from './_utils/parser';
-import { includes, isSet, isEqual } from 'lodash';
+import { includes, isSet, isEqual } from 'lodash-es';
 import { zonedTimeToUtc } from '../utils/date-fns-extra';
 import { getDefaultFormatTokenByType } from './_utils/getDefaultFormatToken';
 import isNullOrUndefined from '../utils/isNullOrUndefined';

package/form/foundation.ts

@@ -3,7 +3,7 @@ import BaseFoundation from '../base/foundation';
 import * as ObjectUtil from '../utils/object';
 import isPromise from '../utils/isPromise';
 import { isValid } from './utils';
-import { isUndefined, isFunction, toPath } from 'lodash';
+import { isUndefined, isFunction, toPath } from 'lodash-es';
 import scrollIntoView, { Options as scrollIntoViewOptions } from 'scroll-into-view-if-needed';
 
 import { BaseFormAdapter, FormState, CallOpts, FieldState, FieldStaff, ComponentProps, setValuesConfig, ArrayFieldStaff } from './interface';

package/form/interface.ts

@@ -79,7 +79,7 @@ export interface FieldState {
     status?: 'error' | 'success';
 }
 
-export interface withFieldOption {
+export interface WithFieldOption {
     valueKey?: string;
     onKeyChangeFnName?: string;
     valuePath?: string;

package/form/utils.ts

@@ -2,8 +2,8 @@
 /* eslint-disable prefer-const */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import AsyncValidator from 'async-validator';
-import { cloneDeep, toPath } from 'lodash';
-import { FieldValidateTriggerType, BasicTriggerType, ComponentProps, withFieldOption } from './interface';
+import { cloneDeep, toPath } from 'lodash-es';
+import { FieldValidateTriggerType, BasicTriggerType, ComponentProps, WithFieldOption } from './interface';
 
 export function getDisplayName(WrappedComponent: React.ComponentType | any) {
     const originName = WrappedComponent.displayName || WrappedComponent.name;
@@ -61,7 +61,7 @@ function transformTrigger(trigger: FieldValidateTriggerType): Array<BasicTrigger
     return result;
 }
 
-export function mergeOptions(opts: withFieldOption, props: ComponentProps) {
+export function mergeOptions(opts: WithFieldOption, props: ComponentProps) {
     // Opts: different types of component identification value, value change callback function may be inconsistent, used to adapt 1, input, select 2, radio, checkbox 3, switch
     // valueKey: input, select class component control value props are value, and checkbox, switch is checked
     // eg：checkbox、radio   { valueKey: 'checked', onKeyChangeFnName: 'onChange', valuePath: 'target.value' }

package/gulpfile.js

@@ -6,31 +6,23 @@ const merge2 = require('merge2');
 const gulpTS = require('gulp-typescript');
 const gulpBabel = require('gulp-babel');
 const sass = require('gulp-sass')(require('sass'));
+const replace = require('gulp-replace');
 const del = require('del');
 const tsConfig = require('./tsconfig.json');
-const getBabelConfig = require('./getBabelConfig');
+const babelConfig = require('./babel.config');
 
 gulp.task('cleanLib', function cleanLib() {
     return del(['lib/**/*']);
 });
 
-function compileTS(isESM) {
-    const targetDir = isESM ? 'lib/es' : 'lib/cjs';
+gulp.task('compileTS', function compileTSX() {
     const tsStream = gulp.src(['**/*.ts', '!node_modules/**/*.*'])
         .pipe(gulpTS(tsConfig.compilerOptions));
     const jsStream = tsStream.js
-        .pipe(gulpBabel(getBabelConfig({ isESM })))
-        .pipe(gulp.dest(targetDir));
-    const dtsStream = tsStream.dts.pipe(gulp.dest(targetDir));
+        .pipe(gulpBabel(babelConfig))
+        .pipe(gulp.dest('lib/es'));
+    const dtsStream = tsStream.dts.pipe(gulp.dest('lib/es'));
     return merge2([jsStream, dtsStream]);
-}
-
-gulp.task('compileTSForESM', function compileTSForESM() {
-    return compileTS(true);
-});
-
-gulp.task('compileTSForCJS', function compileTSForCJS() {
-    return compileTS(false);
 });
 
 const excludeScss = [
@@ -53,25 +45,15 @@ gulp.task('compileScss', function compileScss() {
             }
         ))
         .pipe(sass().on('error', sass.logError))
-        .pipe(gulp.dest('lib/es'))
-        .pipe(gulp.dest('lib/cjs'));
+        .pipe(gulp.dest('lib/es'));
 });
 
 gulp.task('moveScss', function moveScss() {
     return gulp.src(['**/*.scss', '!node_modules/**/*.*'])
-        .pipe(gulp.dest('lib/es'))
-        .pipe(gulp.dest('lib/cjs'));
+        .pipe(gulp.dest('lib/es'));
 });
 
-gulp.task('compileLib', 
-    gulp.series(
-        [
-            'cleanLib', 'compileScss', 
-            'moveScss', 
-            gulp.parallel('compileTSForESM', 'compileTSForCJS'),
-        ]
-    )
-);
+gulp.task('compileLib', gulp.series(['cleanLib', 'compileScss', 'moveScss', 'compileTS']));
 
 gulp.task('findDupCSSVariables', function findDupCSSVariables() {
     return gulp.src(['**/variable?.scss', '!node_modules/**/*.*'])

package/icons/icons.scss

@@ -0,0 +1,39 @@
+@import './variables.scss';
+@import "../keyframes/rotate.scss";
+
+$module: #{$prefix}-icon;
+
+.#{$module} {
+    display: inline-block;
+    color: inherit;
+    font-style: normal;
+    line-height: 0;
+    text-align: center;
+    text-transform: none;
+    text-rendering: optimizeLegibility;
+    fill: currentColor;
+
+    &-extra-small {
+        font-size: $width-icon_extra_small;
+    }
+
+    &-small {
+        font-size: $width-icon_small;
+    }
+
+    &-default {
+        font-size: $width-icon_medium;
+    }
+
+    &-large {
+        font-size: $width-icon_large;
+    }
+
+    &-extra-large {
+        font-size: $width-icon_extra_large;
+    }
+}
+
+.#{$module}-spin {
+    animation: $motion-icon_spin-animationDuration linear infinite #{$prefix}-animation-rotate;
+}

package/icons/variables.scss

@@ -0,0 +1,7 @@
+
+$width-icon_extra_small: $width-icon-extra-small; // 图标尺寸 - 超小
+$width-icon_small: $width-icon-small; // 图标尺寸 - 小
+$width-icon_medium: $width-icon-medium; // 图标尺寸 - 中
+$width-icon_large: $width-icon-large; // 图标尺寸 - 大
+$width-icon_extra_large: $width-icon-extra-large; // 图标尺寸 - 超大
+$motion-icon_spin-animationDuration: .6s;

package/input/foundation.ts

@@ -1,6 +1,6 @@
 import BaseFoundation, { DefaultAdapter, noopFunction } from '../base/foundation';
 import { strings } from './constants';
-import { noop, set, isNumber, isString, isFunction } from 'lodash';
+import { noop, set, isNumber, isString, isFunction } from 'lodash-es';
 
 const ENTER_KEY_CODE = 'Enter';
 

package/input/textareaFoundation.ts

@@ -4,7 +4,7 @@ import {
     isFunction,
     isNumber,
     isString
-} from 'lodash';
+} from 'lodash-es';
 import calculateNodeHeight from './util/calculateNodeHeight';
 import getSizingData from './util/getSizingData';
 

package/input/util/getSizingData.ts

@@ -1,5 +1,5 @@
 // Reference to https://github.com/andreypopp/react-textarea-autosize/
-import { pick } from 'lodash';
+import { pick } from 'lodash-es';
 
 const SIZING_STYLE = [
     'borderBottomWidth',

package/inputNumber/foundation.ts

@@ -4,7 +4,7 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import keyCode from '../utils/keyCode';
 import { numbers } from './constants';
-import { toNumber, toString } from 'lodash';
+import { toNumber, toString } from 'lodash-es';
 import { minus as numberMinus } from '../utils/number';
 
 export interface InputNumberAdapter extends DefaultAdapter {

package/lib/es/anchor/foundation.js

@@ -1,19 +1,14 @@
-import _get from "lodash/get";
-import _isArray from "lodash/isArray";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _Set from "@babel/runtime-corejs3/core-js-stable/set";
 import BaseFoundation from '../base/foundation';
+import { isArray, get } from 'lodash-es';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import { cssClasses } from './constants';
 const prefixCls = cssClasses.PREFIX;
 export default class AnchorFoundation extends BaseFoundation {
   constructor(adapter) {
-    var _this;
+    super(_Object$assign(_Object$assign({}, AnchorFoundation.defaultAdapter), adapter)); // eslint-disable-next-line @typescript-eslint/no-empty-function
 
-    super(_Object$assign(_Object$assign({}, AnchorFoundation.defaultAdapter), adapter));
-    _this = this;
-
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
     this.init = () => {}; // eslint-disable-next-line @typescript-eslint/no-empty-function
 
 
@@ -27,18 +22,16 @@ export default class AnchorFoundation extends BaseFoundation {
       this._adapter.removeLink(link);
     };
 
-    this.setActiveLink = function (link, prevLink) {
-      let shouldNotify = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-
-      const activeLink = _this._adapter.getState('activeLink');
+    this.setActiveLink = (link, prevLink, shouldNotify = true) => {
+      const activeLink = this._adapter.getState('activeLink');
 
-      const onChange = _this._adapter.getProp('onChange');
+      const onChange = this._adapter.getProp('onChange');
 
       if (activeLink !== link) {
-        _this._adapter.setActiveLink(link, _this._setActiveSlide);
+        this._adapter.setActiveLink(link, this._setActiveSlide);
 
         if (onChange && shouldNotify) {
-          _this._adapter.notifyChange(link, prevLink);
+          this._adapter.notifyChange(link, prevLink);
         }
       }
     }; // Adjust rail height according to text link content height
@@ -70,7 +63,7 @@ export default class AnchorFoundation extends BaseFoundation {
 
       const childMap = {};
 
-      if (_isArray(children)) {
+      if (isArray(children)) {
         for (const link of children) {
           this._getLinkToMap(link, [], childMap);
         }
@@ -119,22 +112,20 @@ export default class AnchorFoundation extends BaseFoundation {
       this.setActiveLink(activeLink, prevActiveLink);
     };
 
-    this.handleClick = function (e, link) {
-      let shouldNotify = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-
-      const destNode = _this._adapter.getContentNode(link);
+    this.handleClick = (e, link, shouldNotify = true) => {
+      const destNode = this._adapter.getContentNode(link);
 
-      const prevLink = _this._adapter.getState('activeLink');
+      const prevLink = this._adapter.getState('activeLink');
 
-      _this.setActiveLink(link, prevLink, shouldNotify);
+      this.setActiveLink(link, prevLink, shouldNotify);
 
       if (destNode) {
         try {
-          _this._adapter.setClickLinkWithCallBack(true, link, _this._scrollIntoView);
+          this._adapter.setClickLinkWithCallBack(true, link, this._scrollIntoView);
         } catch (error) {}
       }
 
-      shouldNotify && _this._adapter.notifyClick(e, link);
+      shouldNotify && this._adapter.notifyClick(e, link);
     };
 
     this.handleClickLink = () => {
@@ -206,11 +197,9 @@ export default class AnchorFoundation extends BaseFoundation {
            */
           behavior: actions => {
             // We just need to scroll the innermost target container
-            const innermostAction = _get(actions, '0');
-
-            const el = _get(innermostAction, 'el');
-
-            const top = _get(innermostAction, 'top');
+            const innermostAction = get(actions, '0');
+            const el = get(innermostAction, 'el');
+            const top = get(innermostAction, 'top');
 
             if (el) {
               const offsetTop = top - targetOffset;

package/lib/es/autoComplete/autoComplete.css

@@ -1,25 +1,99 @@
 /* shadow */
 /* sizing */
 /* spacing */
-.semi-autocomplete {
+.semi-select-option {
+  font-size: 14px;
+  line-height: 20px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  word-break: break-all;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  color: var(--semi-color-text-0);
+  position: relative;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+.semi-select-option-icon {
+  width: 12px;
+  color: transparent;
+  visibility: hidden;
+  margin-right: 8px;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+}
+.semi-select-option-text {
+  display: flex;
+  flex-wrap: wrap;
+  white-space: pre;
+}
+.semi-select-option-keyword {
+  color: var(--semi-color-primary);
+  background-color: inherit;
+  font-weight: 600;
+}
+.semi-select-option:active {
+  background-color: var(--semi-color-fill-1);
+}
+.semi-select-option-empty {
+  cursor: not-allowed;
+  color: var(--semi-color-disabled-text);
+  justify-content: center;
+}
+.semi-select-option-empty:hover {
+  background-color: inherit;
+}
+.semi-select-option-empty:active {
+  background-color: inherit;
+}
+.semi-select-option-disabled {
+  color: var(--semi-color-disabled-text);
+  cursor: not-allowed;
+}
+.semi-select-option-disabled:hover {
+  background-color: var(--semi-color-fill-0);
+}
+.semi-select-option-selected {
+  font-weight: 600;
+}
+.semi-select-option-selected .semi-select-option-icon {
+  visibility: visible;
+  color: var(--semi-color-text-2);
+}
+.semi-select-option-focused {
+  background-color: var(--semi-color-fill-0);
+}
+.semi-select-option:first-of-type {
+  margin-top: 4px;
+}
+.semi-select-option:last-of-type {
+  margin-bottom: 4px;
+}
+
+.semi-select {
   cursor: text;
   display: inline-flex;
   vertical-align: middle;
   box-sizing: border-box;
 }
-.semi-autocomplete-option-list {
+.semi-select-option-list {
   overflow-x: hidden;
   overflow-y: auto;
 }
-.semi-autocomplete-option-list-chosen .semi-autocomplete-option-icon {
+.semi-select-option-list-chosen .semi-select-option-icon {
   display: flex;
 }
-.semi-autocomplete-loading-wrapper {
+.semi-select-loading-wrapper {
   padding-top: 8px;
   padding-bottom: 8px;
   cursor: not-allowed;
 }
-.semi-autocomplete-loading-wrapper .semi-spin {
+.semi-select-loading-wrapper .semi-spin {
   width: 100%;
 }
 

package/lib/es/autoComplete/autoComplete.scss

@@ -1,7 +1,7 @@
 $module: #{$prefix}-autocomplete;
 
 @import "./variables.scss";
-
+@import "../select/option.scss";
 .#{$module} {
     cursor: text;
     display: inline-flex;

package/lib/es/autoComplete/foundation.js

@@ -1,7 +1,3 @@
-import _isObject from "lodash/isObject";
-import _isUndefined from "lodash/isUndefined";
-import _isNumber from "lodash/isNumber";
-import _isString from "lodash/isString";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
@@ -12,6 +8,7 @@ import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 
 /* eslint-disable prefer-const, max-len */
 import BaseFoundation from '../base/foundation';
+import { isString, isNumber, isUndefined, isObject } from 'lodash-es';
 import warning from '../utils/warning';
 import KeyCode from '../utils/keyCode';
 
@@ -71,9 +68,9 @@ class AutoCompleteFoundation extends BaseFoundation {
     if (dropdownMatchSelectWidth) {
       var _context;
 
-      if (style && _isNumber(style.width)) {
+      if (style && isNumber(style.width)) {
         width = style.width;
-      } else if (style && _isString(style.width) && !_includesInstanceProperty(_context = style.width).call(_context, '%')) {
+      } else if (style && isString(style.width) && !_includesInstanceProperty(_context = style.width).call(_context, '%')) {
         width = style.width;
       } else {
         width = this._adapter.getTriggerWidth();
@@ -128,14 +125,14 @@ class AutoCompleteFoundation extends BaseFoundation {
         const key = String(new Date().getTime()) + i;
         let option = {};
 
-        if (_isString(item) || _isNumber(item)) {
+        if (isString(item) || isNumber(item)) {
           option = {
             value: item,
             key,
             label: item,
             show: true
           };
-        } else if (_isObject(item) && !_isUndefined(item.value)) {
+        } else if (isObject(item) && !isUndefined(item.value)) {
           option = _Object$assign({
             show: true
           }, item);

package/lib/es/backtop/foundation.js

@@ -20,11 +20,9 @@ export default class BackTopFoundation extends BaseFoundation {
         duration,
         easing: 'easeInOutCubic'
       });
-      this.animation.on('frame', _ref => {
-        let {
-          scrollTop
-        } = _ref;
-
+      this.animation.on('frame', ({
+        scrollTop
+      }) => {
         this._adapter.targetScrollToTop(targetNode, scrollTop);
       });
       this.animation.start();