chore: 统一成使用 props.useMobileUI 避免混乱 (#3276)

* chore: 统一成使用 props.useMobileUI 避免混乱 * chore: 统一成使用 props.useMobileUI 避免混乱 * chore: 统一成使用 props.useMobileUI 避免混乱 * chore: 统一成使用 props.useMobileUI 避免混乱 * chore: 统一成使用 props.useMobileUI 避免混乱
2024-11-29 18:48:45 +08:00 · 2021-12-28 10:52:37 +08:00 · 2021-12-28 10:52:37 +08:00 · db43f45015
commit db43f45015
parent 3695086fe9
39 changed files with 567 additions and 510 deletions
--- a/.husky/.gitignore
+++ b/.husky/.gitignore
@ -0,0 +1 @@
+_
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"

-npx pretty-quick --staged
+npx lint-staged
--- a/examples/mobile.jsx
+++ b/examples/mobile.jsx
@ -23,7 +23,10 @@ class AMISComponent extends React.Component {
    window.addEventListener('message', event => {
      const data = event.data;
      if (data && data.schema) {
-        this.setState({schema: data.schema, props: data.props});
+        this.setState({
+          schema: data.schema,
+          props: {useMobileUI: true, ...data.props}
+        });
      }
    });
    window.parent.postMessage('amisReady', '*');
--- a/package.json
+++ b/package.json
@ -13,7 +13,7 @@
    "dev": "fis3 release -cwd ./public",
    "publish-to-internal": "sh build.sh && sh publish.sh",
    "build": "sh build.sh",
-    "prettier": "prettier --write '{src,examples,scss}/**/*.{tsx,ts,jsx,scss}'",
+    "prettier": "prettier --write '{src,scss,examples}/**/**/*.{js,jsx,ts,tsx,scss,json}'",
    "deploy-gh-page": "sh ./deploy-gh-pages.sh",
    "build-schemas": "ts-node -O '{\"target\":\"es6\"}' scripts/build-schemas.ts"
  },
@ -37,6 +37,11 @@
      "url": "http://www.apache.org/licenses/LICENSE-2.0"
    }
  ],
+  "lint-staged": {
+    "{src,examples}/**/**/*.{tsx,jsx,ts}": [
+      "prettier --write"
+    ]
+  },
  "dependencies": {
    "amis-formula": "^1.3.5",
    "ansi-to-react": "^6.1.6",
@ -44,6 +49,7 @@
    "attr-accept": "2.2.2",
    "blueimp-canvastoblob": "2.1.0",
    "classnames": "2.3.1",
+    "codemirror": "^5.63.0",
    "downshift": "6.1.7",
    "echarts": "5.2.2",
    "echarts-stat": "^1.2.0",
@ -88,14 +94,13 @@
    "tinymce": "^5.10.2",
    "tslib": "^2.3.1",
    "uncontrollable": "7.2.1",
-    "video-react": "0.14.1",
-    "codemirror": "^5.63.0"
+    "video-react": "0.14.1"
  },
  "devDependencies": {
-    "@types/codemirror": "^5.60.3",
    "@fortawesome/fontawesome-free": "^5.15.4",
    "@testing-library/react": "^12.0.0",
    "@types/async": "^2.0.45",
+    "@types/codemirror": "^5.60.3",
    "@types/echarts": "^4.9.2",
    "@types/file-saver": "^2.0.1",
    "@types/history": "^4.6.0",
@ -148,6 +153,7 @@
    "jest-canvas-mock": "^2.3.0",
    "js-yaml": "^4.1.0",
    "json5": "^2.2.0",
+    "lint-staged": "^12.1.4",
    "marked": "^3.0.4",
    "mkdirp": "^1.0.4",
    "moment-timezone": "^0.5.33",
--- a/src/components/BaiduMapPicker.tsx
+++ b/src/components/BaiduMapPicker.tsx
@ -120,7 +120,11 @@ export class BaiduMapPicker extends React.Component<
      ? new BMap.Point(value.lng, value.lat)
      : new BMap.Point(116.404, 39.915);
    if (this.props.coordinatesType == 'gcj02') {
-      point = await this.covertPoint(point, COORDINATES_GCJ02, COORDINATES_BD09);
+      point = await this.covertPoint(
+        point,
+        COORDINATES_GCJ02,
+        COORDINATES_BD09
+      );
      map.centerAndZoom(point, 15);
    } else {
      map.centerAndZoom(point, 15);
@ -269,27 +273,29 @@ export class BaiduMapPicker extends React.Component<

  covertPoint(point: any, from: number, to: number) {
    return new Promise((resolve, reject) => {
-      this.convertor.translate([point], from, to, (res:any)=> {
+      this.convertor.translate([point], from, to, (res: any) => {
        if (res.status === 0 && res.points.length) {
          resolve(new BMap.Point(res.points[0].lng, res.points[0].lat));
-        } else  {
+        } else {
          reject();
        }
-      })
-    })
+      });
+    });
  }

  triggerOnChange(loc: LocationItem) {
    const point = new BMap.Point(loc.lng, loc.lat);
    if (this.props.coordinatesType == 'gcj02') {
-      this.covertPoint(point, COORDINATES_BD09, COORDINATES_GCJ02).then((convertedPoint:any)=>{
-        this.props?.onChange({
-          address: loc.address.trim() || loc.title,
-          lat: convertedPoint.lat,
-          lng: convertedPoint.lng,
-          city: loc.city
-        });
-      })
+      this.covertPoint(point, COORDINATES_BD09, COORDINATES_GCJ02).then(
+        (convertedPoint: any) => {
+          this.props?.onChange({
+            address: loc.address.trim() || loc.title,
+            lat: convertedPoint.lat,
+            lng: convertedPoint.lng,
+            city: loc.city
+          });
+        }
+      );
    } else {
      this.props?.onChange({
        address: loc.address.trim() || loc.title,
@ -298,7 +304,6 @@ export class BaiduMapPicker extends React.Component<
        city: loc.city
      });
    }
-
  }

  @autobind
--- a/src/components/ColorPicker.tsx
+++ b/src/components/ColorPicker.tsx
@ -320,45 +320,43 @@ export class ColorControl extends React.PureComponent<
            </PopOver>
          </Overlay>
        ) : null}
-        {
-          useMobileUI && isMobile() && (
-            <PopUp
-              className={cx(`${ns}ColorPicker-popup`)}
-              isShow={isOpened}
-              onHide={this.handleClick}
-            >
-              {allowCustomColor ? (
-                <SketchPicker
-                  styles={{}}
-                  disableAlpha={!!~['rgb', 'hex'].indexOf(format as string)}
-                  color={value}
-                  presetColors={presetColors}
-                  onChangeComplete={this.handleChange}
-                />
-              ) : (
-                <GithubPicker
-                  color={value}
-                  colors={
-                    Array.isArray(presetColors)
-                      ? (presetColors
-                          .filter(
-                            item => typeof item === 'string' || isObject(item)
-                          )
-                          .map(item =>
-                            typeof item === 'string'
-                              ? item
-                              : isObject(item)
-                              ? item?.color
-                              : item
-                          ) as string[])
-                      : undefined
-                  }
-                  onChangeComplete={this.handleChange}
-                />
-              )}
-            </PopUp>
-          )
-        }
+        {useMobileUI && isMobile() && (
+          <PopUp
+            className={cx(`${ns}ColorPicker-popup`)}
+            isShow={isOpened}
+            onHide={this.handleClick}
+          >
+            {allowCustomColor ? (
+              <SketchPicker
+                styles={{}}
+                disableAlpha={!!~['rgb', 'hex'].indexOf(format as string)}
+                color={value}
+                presetColors={presetColors}
+                onChangeComplete={this.handleChange}
+              />
+            ) : (
+              <GithubPicker
+                color={value}
+                colors={
+                  Array.isArray(presetColors)
+                    ? (presetColors
+                        .filter(
+                          item => typeof item === 'string' || isObject(item)
+                        )
+                        .map(item =>
+                          typeof item === 'string'
+                            ? item
+                            : isObject(item)
+                            ? item?.color
+                            : item
+                        ) as string[])
+                    : undefined
+                }
+                onChangeComplete={this.handleChange}
+              />
+            )}
+          </PopUp>
+        )}
      </div>
    );
  }
--- a/src/components/DatePicker.tsx
+++ b/src/components/DatePicker.tsx
@ -15,7 +15,7 @@ import {ClassNamesFn, themeable, ThemeProps} from '../theme';
 import {PlainObject} from '../types';
 import Calendar from './calendar/Calendar';
 import 'react-datetime/css/react-datetime.css';
-import { localeable, LocaleProps, TranslateFn } from '../locale';
+import {localeable, LocaleProps, TranslateFn} from '../locale';
 import {isMobile, ucFirst} from '../utils/helper';

 const availableShortcuts: {[propName: string]: any} = {
@ -280,10 +280,10 @@ export interface DateProps extends LocaleProps, ThemeProps {
  // 是否为内嵌模式，如果开启就不是 picker 了，直接页面点选。
  embed?: boolean;
  schedules?: Array<{
-    startTime: Date,
-    endTime: Date,
-    content: any,
-    className?: string
+    startTime: Date;
+    endTime: Date;
+    content: any;
+    className?: string;
  }>;
  scheduleClassNames?: Array<string>;
  largeMode?: boolean;
@ -315,7 +315,13 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
    shortcuts: '',
    closeOnSelect: true,
    overlayPlacement: 'auto',
-    scheduleClassNames: ['bg-warning', 'bg-danger', 'bg-success', 'bg-info', 'bg-secondary']
+    scheduleClassNames: [
+      'bg-warning',
+      'bg-danger',
+      'bg-success',
+      'bg-info',
+      'bg-secondary'
+    ]
  };
  state: DatePickerState = {
    isOpened: false,
@ -572,7 +578,6 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
    const isOpened = this.state.isOpened;
    let date: moment.Moment | undefined = this.state.value;

-
    if (embed) {
      let schedulesData: DateProps['schedules'] = undefined;
      if (schedules && Array.isArray(schedules)) {
@ -703,34 +708,32 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
            </PopOver>
          </Overlay>
        ) : null}
-        {
-          useMobileUI && isMobile() ? (
-            <PopUp
-              className={cx(`${ns}DatePicker-popup`)}
-              isShow={isOpened}
-              onHide={this.handleClick}
-            >
-              {this.renderShortCuts(shortcuts)}
+        {useMobileUI && isMobile() ? (
+          <PopUp
+            className={cx(`${ns}DatePicker-popup`)}
+            isShow={isOpened}
+            onHide={this.handleClick}
+          >
+            {this.renderShortCuts(shortcuts)}

-              <Calendar
-                value={date}
-                onChange={this.handleChange}
-                requiredConfirm={!!(dateFormat && timeFormat)}
-                dateFormat={dateFormat}
-                inputFormat={inputFormat}
-                timeFormat={timeFormat}
-                isValidDate={this.checkIsValidDate}
-                viewMode={viewMode}
-                timeConstraints={timeConstraints}
-                input={false}
-                onClose={this.close}
-                locale={locale}
-                minDate={minDate}
-                // utc={utc}
-              />
-            </PopUp>
-          ) : null
-        }
+            <Calendar
+              value={date}
+              onChange={this.handleChange}
+              requiredConfirm={!!(dateFormat && timeFormat)}
+              dateFormat={dateFormat}
+              inputFormat={inputFormat}
+              timeFormat={timeFormat}
+              isValidDate={this.checkIsValidDate}
+              viewMode={viewMode}
+              timeConstraints={timeConstraints}
+              input={false}
+              onClose={this.close}
+              locale={locale}
+              minDate={minDate}
+              // utc={utc}
+            />
+          </PopUp>
+        ) : null}
      </div>
    );
  }
--- a/src/components/DateRangePicker.tsx
+++ b/src/components/DateRangePicker.tsx
@ -859,17 +859,15 @@ export class DateRangePicker extends React.Component<
            </PopOver>
          </Overlay>
        ) : null}
-        {
-          useMobileUI && isMobile() && (
-            <PopUp
-              isShow={isOpened}
-              className={cx(`${ns}DateRangePicker-popup`)}
-              onHide={this.handleClick}
-            >
-              {this.renderCalendar()}
-            </PopUp>
-          )
-        }
+        {useMobileUI && isMobile() && (
+          <PopUp
+            isShow={isOpened}
+            className={cx(`${ns}DateRangePicker-popup`)}
+            onHide={this.handleClick}
+          >
+            {this.renderCalendar()}
+          </PopUp>
+        )}
      </div>
    );
  }
--- a/src/components/MonthRangePicker.tsx
+++ b/src/components/MonthRangePicker.tsx
@ -20,7 +20,7 @@ import {LocaleProps, localeable} from '../locale';
 import {DateRangePicker} from './DateRangePicker';
 import capitalize from 'lodash/capitalize';
 import {ShortCuts, ShortCutDateRange} from './DatePicker';
-import { availableRanges } from './DateRangePicker';
+import {availableRanges} from './DateRangePicker';

 export interface MonthRangePickerProps extends ThemeProps, LocaleProps {
  className?: string;
@ -626,17 +626,15 @@ export class MonthRangePicker extends React.Component<
            </PopOver>
          </Overlay>
        ) : null}
-        {
-          useMobileUI && isMobile() && (
-            <PopUp
-              className={cx(`${ns}DateRangePicker-popup`)}
-              isShow={isOpened}
-              onHide={this.handleClick}
-            >
-              {this.renderCalendar()}
-            </PopUp>
-          )
-        }
+        {useMobileUI && isMobile() && (
+          <PopUp
+            className={cx(`${ns}DateRangePicker-popup`)}
+            isShow={isOpened}
+            onHide={this.handleClick}
+          >
+            {this.renderCalendar()}
+          </PopUp>
+        )}
      </div>
    );
  }
--- a/src/components/Picker.tsx
+++ b/src/components/Picker.tsx
@ -2,11 +2,7 @@
 * @file Picker
 * @description 移动端列滚动选择器
 */
-import React, {
-  memo,
-  ReactNode,
-  useState
-} from 'react';
+import React, {memo, ReactNode, useState} from 'react';
 import {uncontrollable} from 'uncontrollable';

 import {themeable, ThemeProps} from '../theme';
@ -18,7 +14,7 @@ import {PickerColumnItem, default as Column} from './PickerColumn';
 export type PickerValue = string | number;

 export interface PickerProps extends ThemeProps, LocaleProps {
-  title?: String | ReactNode,
+  title?: String | ReactNode;
  labelField?: string;
  className?: string;
  showToolbar?: boolean;
@ -28,17 +24,9 @@ export interface PickerProps extends ThemeProps, LocaleProps {
  visibleItemCount?: number;
  itemHeight?: number;
  columns: PickerColumnItem[] | PickerColumnItem;
-  onChange?: (
-    value?: PickerValue[],
-    index?: number,
-    confirm?: boolean
-  ) => void;
-  onClose?: (
-    value?: PickerValue[]
-  ) => void;
-  onConfirm?: (
-    value?: PickerValue[]
-  ) => void;
+  onChange?: (value?: PickerValue[], index?: number, confirm?: boolean) => void;
+  onClose?: (value?: PickerValue[]) => void;
+  onConfirm?: (value?: PickerValue[]) => void;
 }

 function fixToArray(data: any) {
@ -48,7 +36,7 @@ function fixToArray(data: any) {
  return data;
 }

-const Picker = memo<PickerProps>((props) => {
+const Picker = memo<PickerProps>(props => {
  const {
    labelField,
    visibleItemCount = 5,
@ -57,7 +45,7 @@ const Picker = memo<PickerProps>((props) => {
    columns = [],
    itemHeight = 30,
    showToolbar = true,
-    className='',
+    className = '',
    classnames: cx,
    classPrefix: ns,
    translate: __
@ -65,7 +53,7 @@ const Picker = memo<PickerProps>((props) => {

  const _columns = fixToArray(columns);
  const [innerValue, setInnerValue] = useState<PickerValue[]>(
-    fixToArray(props.value === undefined ? props.defaultValue || [] : value )
+    fixToArray(props.value === undefined ? props.defaultValue || [] : value)
  );

  const close = () => {
@ -80,7 +68,11 @@ const Picker = memo<PickerProps>((props) => {
    }
  };

-  const onChange = (itemValue: PickerValue, columnIndex: number, confirm?: boolean) => {
+  const onChange = (
+    itemValue: PickerValue,
+    columnIndex: number,
+    confirm?: boolean
+  ) => {
    const nextInnerValue = [...innerValue];
    nextInnerValue[columnIndex] = itemValue;
    setInnerValue(nextInnerValue);
@ -103,7 +95,8 @@ const Picker = memo<PickerProps>((props) => {
        onChange={(val: string | number, i, confirm) => {
          onChange(val, index, confirm);
        }}
-    />)
+      />
+    );
  };

  const wrapHeight = itemHeight * +visibleItemCount;
@ -114,21 +107,29 @@ const Picker = memo<PickerProps>((props) => {
  };

  return (
-    <div
-      className={cx(className, 'PickerColumns', 'PickerColumns-popOver')}
-    >
-      {showToolbar && <div className={cx('PickerColumns-toolbar')}>
-        <Button className="PickerColumns-cancel" level="default" onClick={close}>
-          {__('cancel')}
-        </Button>
-        <Button className="PickerColumns-confirm" level="primary" onClick={confirm}>
-          {__('confirm')}
-        </Button>
-      </div>}
+    <div className={cx(className, 'PickerColumns', 'PickerColumns-popOver')}>
+      {showToolbar && (
+        <div className={cx('PickerColumns-toolbar')}>
+          <Button
+            className="PickerColumns-cancel"
+            level="default"
+            onClick={close}
+          >
+            {__('cancel')}
+          </Button>
+          <Button
+            className="PickerColumns-confirm"
+            level="primary"
+            onClick={confirm}
+          >
+            {__('confirm')}
+          </Button>
+        </div>
+      )}
      <div className={cx('PickerColumns-columns')} style={columnsStyle}>
-          {
-              _columns.map((column: PickerColumnItem, index: number) => renderColumnItem(column, index))
-          }
+        {_columns.map((column: PickerColumnItem, index: number) =>
+          renderColumnItem(column, index)
+        )}
        <div className={cx('PickerColumns-mask')} style={maskStyle}></div>
        <div className={cx('PickerColumns-frame')} style={frameStyle}></div>
      </div>
--- a/src/components/PickerColumn.tsx
+++ b/src/components/PickerColumn.tsx
@ -33,7 +33,7 @@ export interface PickerColumnItem {
    index?: number,
    confirm?: boolean
  ) => void;
-};
+}

 export interface PickerColumnProps extends PickerColumnItem, ThemeProps {}

@ -64,7 +64,7 @@ function getElementTranslateY(element: HTMLElement | null) {
 function isOptionDisabled(option: PickerOption) {
  return isObject(option) && option.disabled;
 }
-  
+
 const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
  const {
    visibleItemCount = 5,
@ -132,11 +132,9 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
      updateState({index});

      if (emitChange && props.onChange) {
-        requestAnimationFrame(
-          () => {
-            props.onChange?.(options[index], index, confirm);
-          }
-        );
+        requestAnimationFrame(() => {
+          props.onChange?.(options[index], index, confirm);
+        });
        // setTimeout(() => {
        //   props.onChange?.(options[index], index, confirm);
        // }, 0);
@ -301,7 +299,7 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
          onClickItem(index);
        }
      };
-      
+
      const childData = {
        className: 'text-ellipsis',
        children: text
@ -357,23 +355,23 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
    transitionProperty: state.duration ? 'all' : 'none'
  };
  return (
-      <div
-          ref={root}
-          className={props.classnames('PickerColumns', props.className)}
-          onTouchStart={onTouchStart}
-          onTouchMove={onTouchMove}
-          onTouchEnd={onTouchEnd}
-          onTouchCancel={onTouchEnd}
+    <div
+      ref={root}
+      className={props.classnames('PickerColumns', props.className)}
+      onTouchStart={onTouchStart}
+      onTouchMove={onTouchMove}
+      onTouchEnd={onTouchEnd}
+      onTouchCancel={onTouchEnd}
+    >
+      <ul
+        ref={wrapper}
+        style={wrapperStyle}
+        className={props.classnames('PickerColumns-columnWrapper')}
+        onTransitionEnd={stopMomentum}
      >
-          <ul
-          ref={wrapper}
-          style={wrapperStyle}
-          className={props.classnames('PickerColumns-columnWrapper')}
-          onTransitionEnd={stopMomentum}
-          >
-          {renderOptions()}
-          </ul>
-      </div>
+        {renderOptions()}
+      </ul>
+    </div>
  );
 });

@ -389,4 +387,3 @@ export default themeable(
    value: 'onChange'
  })
 );
-
--- a/src/components/PopUp.tsx
+++ b/src/components/PopUp.tsx
@ -13,8 +13,7 @@ import Transition, {
  ENTERING
 } from 'react-transition-group/Transition';
 import Portal from 'react-overlays/Portal';
-import { Icon } from './icons';
-
+import {Icon} from './icons';

 export interface PopUpPorps {
  className?: string;
@ -46,12 +45,10 @@ export class PopUp extends React.PureComponent<PopUpPorps> {
    overlay: true,
    isShow: false,
    container: document.body,
-    hideClose: false,
+    hideClose: false
  };

-  componentDidMount() {
-
-  }
+  componentDidMount() {}
  handleClick(e: React.MouseEvent) {
    e.stopPropagation();
  }
@ -68,65 +65,50 @@ export class PopUp extends React.PureComponent<PopUpPorps> {
      isShow,
      container,
      hideClose,
-      placement='center',
+      placement = 'center',
      ...rest
    } = this.props;

    const outerStyle: any = {
-      ...style,
+      ...style
    };
    delete outerStyle.top;
    return (
      <Portal container={container}>
-        <Transition
-          mountOnEnter
-          unmountOnExit
-          in={isShow}
-          timeout={500}
-          appear
-        >
+        <Transition mountOnEnter unmountOnExit in={isShow} timeout={500} appear>
          {(status: string) => {
-              return (
-                <div
-                  className={cx(
-                    `${ns}PopUp`,
-                    className,
-                    fadeStyles[status]
-                  )}
-                  style={outerStyle}
-                  {...rest}
-                  onClick={this.handleClick}
-                >
-                  {overlay && (
-                    <div className={`${ns}PopUp-overlay`} onClick={onHide}/>
-                  )}
-                  <div className={cx(
-                    `${ns}PopUp-inner`
-                  )}
-                  >
-                    {
-                      !hideClose && (
-                        <div className={cx(`${ns}PopUp-closeWrap`, 'text-right')}>
-                          <Icon
-                            icon="close"
-                          className={cx('icon', `${ns}PopUp-close`)}
-                            onClick={onHide}
-                          />
-                        </div>
-                      )
-                    }
-                    <div
-                      className={cx(`${ns}PopUp-content`, `justify-${placement}`)}
-                    >
-                      {children}
+            return (
+              <div
+                className={cx(`${ns}PopUp`, className, fadeStyles[status])}
+                style={outerStyle}
+                {...rest}
+                onClick={this.handleClick}
+              >
+                {overlay && (
+                  <div className={`${ns}PopUp-overlay`} onClick={onHide} />
+                )}
+                <div className={cx(`${ns}PopUp-inner`)}>
+                  {!hideClose && (
+                    <div className={cx(`${ns}PopUp-closeWrap`, 'text-right')}>
+                      <Icon
+                        icon="close"
+                        className={cx('icon', `${ns}PopUp-close`)}
+                        onClick={onHide}
+                      />
                    </div>
+                  )}
+                  <div
+                    className={cx(`${ns}PopUp-content`, `justify-${placement}`)}
+                  >
+                    {children}
                  </div>
                </div>
-              )
+              </div>
+            );
          }}
        </Transition>
      </Portal>
-    )
+    );
  }
 }

--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@ -926,7 +926,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
    const menu = mobileUI ? (
      <Picker
        className={cx('PickerColumns-column', mobileClassName)}
-        labelField='label'
+        labelField="label"
        value={value[0]}
        translate={this.props.translate}
        locale={this.props.locale}
--- a/src/components/Steps.tsx
+++ b/src/components/Steps.tsx
@ -2,7 +2,7 @@ import React from 'react';
 import {themeable, ThemeProps} from '../theme';
 import {Icon} from './icons';
 import {BaseSchema} from '../Schema';
-import { isMobile } from '../utils/helper';
+import {isMobile} from '../utils/helper';

 export enum StepStatus {
  wait = 'wait',
@ -63,7 +63,7 @@ export interface StepsSchema extends BaseSchema {
   */
  name?: string;

-  status: StepStatus
+  status: StepStatus;

  /**
   * 展示模式
@ -75,9 +75,11 @@ export interface StepsProps extends ThemeProps {
  steps: StepSchema[];
  className: string;
  current: number;
-  status?: StepStatus | {
-    [propName: string]: StepStatus;
-  };
+  status?:
+    | StepStatus
+    | {
+        [propName: string]: StepStatus;
+      };
  mode?: 'horizontal' | 'vertical';
  useMobileUI?: boolean;
 }
@ -127,7 +129,14 @@ export function Steps(props: StepsProps) {

  const mobileUI = useMobileUI && isMobile();
  return (
-    <ul className={cx('Steps', `Steps--${mode}`, mobileUI ? 'Steps-mobile' : '', className)}>
+    <ul
+      className={cx(
+        'Steps',
+        `Steps--${mode}`,
+        mobileUI ? 'Steps-mobile' : '',
+        className
+      )}
+    >
      {stepsRow.map((step, i) => {
        const {stepStatus, icon} = getStepStatus(step, i);

@ -137,8 +146,12 @@ export function Steps(props: StepsProps) {
            className={cx('StepsItem', `is-${stepStatus}`, step.className)}
          >
            <div className={cx('StepsItem-container')}>
-              <div className={cx('StepsItem-containerIcon',
-                      i < current && 'is-success')}>
+              <div
+                className={cx(
+                  'StepsItem-containerIcon',
+                  i < current && 'is-success'
+                )}
+              >
                <span className={cx('StepsItem-icon')}>
                  {icon ? <Icon icon={icon} className="icon" /> : i + 1}
                </span>
@ -166,7 +179,7 @@ export function Steps(props: StepsProps) {
        );
      })}
    </ul>
-  )
+  );
 }

-export default themeable(Steps);
+export default themeable(Steps);
--- a/src/components/Tabs.tsx
+++ b/src/components/Tabs.tsx
@ -96,7 +96,7 @@ export interface TabsProps extends ThemeProps {
  tabs?: Array<TabProps>;
  tabRender?: (tab: TabProps, props?: TabsProps) => JSX.Element;
  toolbar?: React.ReactNode;
-  scrollable?: boolean // 是否支持溢出滚动
+  scrollable?: boolean; // 是否支持溢出滚动
 }

 export class Tabs extends React.Component<TabsProps, any> {
@ -107,23 +107,25 @@ export class Tabs extends React.Component<TabsProps, any> {

  static Tab = Tab;
  navMain = React.createRef<HTMLDivElement>();
-  scroll:boolean = false;
+  scroll: boolean = false;

  checkArrowStatus = debounce(
    () => {
-      const {scrollLeft, scrollWidth, clientWidth} = this.navMain.current
-        || {
-          scrollLeft: 0,
-          scrollWidth: 0,
-          clientWidth: 0
-        }
+      const {scrollLeft, scrollWidth, clientWidth} = this.navMain.current || {
+        scrollLeft: 0,
+        scrollWidth: 0,
+        clientWidth: 0
+      };
      const {arrowRightDisabled, arrowLeftDisabled} = this.state;
      if (scrollLeft === 0 && !arrowLeftDisabled) {
        this.setState({
          arrowRightDisabled: false,
          arrowLeftDisabled: true
        });
-      } else if (scrollWidth === scrollLeft + clientWidth && !arrowRightDisabled) {
+      } else if (
+        scrollWidth === scrollLeft + clientWidth &&
+        !arrowRightDisabled
+      ) {
        this.setState({
          arrowRightDisabled: true,
          arrowLeftDisabled: false
@ -132,7 +134,10 @@ export class Tabs extends React.Component<TabsProps, any> {
        this.setState({
          arrowLeftDisabled: false
        });
-      } else if (scrollWidth !== scrollLeft + clientWidth && arrowRightDisabled) {
+      } else if (
+        scrollWidth !== scrollLeft + clientWidth &&
+        arrowRightDisabled
+      ) {
        this.setState({
          arrowRightDisabled: false
        });
@ -143,21 +148,23 @@ export class Tabs extends React.Component<TabsProps, any> {
      trailing: true,
      leading: false
    }
-  )
+  );

  constructor(props: TabsProps) {
    super(props);
    this.state = {
      isOverflow: false,
      arrowLeftDisabled: false,
-      arrowRightDisabled: false,
+      arrowRightDisabled: false
    };
  }

  componentDidMount() {
    this.computedWidth();
    if (this.navMain) {
-      this.navMain.current?.addEventListener('wheel', this.handleWheel, {passive: false});
+      this.navMain.current?.addEventListener('wheel', this.handleWheel, {
+        passive: false
+      });
      this.checkArrowStatus();
    }
  }
@ -207,7 +214,9 @@ export class Tabs extends React.Component<TabsProps, any> {
    }
    const {activeKey, children} = this.props;
    const currentKey = key !== undefined ? key : activeKey;
-    const currentIndex = (children as any[])?.findIndex((item: any) => item.props.eventKey === currentKey);
+    const currentIndex = (children as any[])?.findIndex(
+      (item: any) => item.props.eventKey === currentKey
+    );
    const li = this.navMain.current?.children[0]?.children || [];
    const currentLi = li[currentIndex] as HTMLElement;
    const liOffsetLeft = currentLi?.offsetLeft - 20;
@ -241,12 +250,11 @@ export class Tabs extends React.Component<TabsProps, any> {
  }

  handleArrow(type: 'left' | 'right') {
-    const {scrollLeft, scrollWidth, clientWidth} = this.navMain.current
-      || {
-        scrollLeft: 0,
-        scrollWidth: 0,
-        clientWidth: 0
-      }
+    const {scrollLeft, scrollWidth, clientWidth} = this.navMain.current || {
+      scrollLeft: 0,
+      scrollWidth: 0,
+      clientWidth: 0
+    };
    if (type === 'left' && scrollLeft > 0) {
      this.navMain.current?.scrollTo({
        left: 0,
@ -369,7 +377,7 @@ export class Tabs extends React.Component<TabsProps, any> {
  }

  renderArrow(type: 'left' | 'right') {
-    const {mode: dMode, tabsMode,} = this.props;
+    const {mode: dMode, tabsMode} = this.props;
    const mode = tabsMode || dMode;
    if (mode === 'vertical') {
      return;
@ -377,17 +385,18 @@ export class Tabs extends React.Component<TabsProps, any> {
    const {classnames: cx} = this.props;
    const {isOverflow, arrowLeftDisabled, arrowRightDisabled} = this.state;
    const disabled = type === 'left' ? arrowLeftDisabled : arrowRightDisabled;
-    return (isOverflow
-      ? (<div onClick={() => this.handleArrow(type)}
-          className={cx(
-            'Tabs-linksContainer-arrow',
-            'Tabs-linksContainer-arrow--' + type,
-            disabled && 'Tabs-linksContainer-arrow--disabled'
-          )}>
-          <i className={'iconfont icon-arrow-' + type} />
-        </div>)
-      : null
-    )
+    return isOverflow ? (
+      <div
+        onClick={() => this.handleArrow(type)}
+        className={cx(
+          'Tabs-linksContainer-arrow',
+          'Tabs-linksContainer-arrow--' + type,
+          disabled && 'Tabs-linksContainer-arrow--disabled'
+        )}
+      >
+        <i className={'iconfont icon-arrow-' + type} />
+      </div>
+    ) : null;
  }

  render() {
@ -421,28 +430,30 @@ export class Tabs extends React.Component<TabsProps, any> {
          className
        )}
      >
-        {
-          scrollable && !['vertical', 'chrome'].includes(mode) ?
-            (<div className={cx('Tabs-linksContainer', isOverflow && 'Tabs-linksContainer--overflow')}>
-              {this.renderArrow('left')}
-              <div
-                className={cx('Tabs-linksContainer-main')}
-                ref={this.navMain}
-              >
-                <ul className={cx('Tabs-links', linksClassName)} role="tablist">
-                  {children.map((tab, index) => this.renderNav(tab, index))}
-                  {additionBtns}
-                  {toolbar}
-                </ul>
-              </div>
-              {this.renderArrow('right')}
-            </div>)
-          : (<ul className={cx('Tabs-links', linksClassName)} role="tablist">
-              {children.map((tab, index) => this.renderNav(tab, index))}
-              {additionBtns}
-              {toolbar}
-            </ul>)
-        }
+        {scrollable && !['vertical', 'chrome'].includes(mode) ? (
+          <div
+            className={cx(
+              'Tabs-linksContainer',
+              isOverflow && 'Tabs-linksContainer--overflow'
+            )}
+          >
+            {this.renderArrow('left')}
+            <div className={cx('Tabs-linksContainer-main')} ref={this.navMain}>
+              <ul className={cx('Tabs-links', linksClassName)} role="tablist">
+                {children.map((tab, index) => this.renderNav(tab, index))}
+                {additionBtns}
+                {toolbar}
+              </ul>
+            </div>
+            {this.renderArrow('right')}
+          </div>
+        ) : (
+          <ul className={cx('Tabs-links', linksClassName)} role="tablist">
+            {children.map((tab, index) => this.renderNav(tab, index))}
+            {additionBtns}
+            {toolbar}
+          </ul>
+        )}

        <div className={cx('Tabs-content', contentClassName)}>
          {children.map((child, index) => {
--- a/src/components/calendar/Calendar.tsx
+++ b/src/components/calendar/Calendar.tsx
@ -7,7 +7,7 @@ import CustomCalendarContainer from './CalendarContainer';
 import cx from 'classnames';
 import moment from 'moment';
 import {themeable, ThemeOutterProps, ThemeProps} from '../../theme';
-import {convertDateArrayToDate} from "../../utils/helper";
+import {convertDateArrayToDate} from '../../utils/helper';

 interface BaseDatePickerProps
  extends Omit<ReactDatePicker.DatetimepickerProps, 'viewMode'> {
@ -195,8 +195,12 @@ class BaseDatePicker extends ReactDatePicker {
  };

  onConfirm = (value: number[], types: string[]) => {
-    const currentDate = (this.state.selectedDate || this.state.viewDate || moment()).clone();
-    
+    const currentDate = (
+      this.state.selectedDate ||
+      this.state.viewDate ||
+      moment()
+    ).clone();
+
    const date = convertDateArrayToDate(value, types, currentDate);

    if (!this.props.value) {
@ -207,9 +211,8 @@ class BaseDatePicker extends ReactDatePicker {
    }
    this.props.onChange && this.props.onChange(date);
    this.props.onClose && this.props.onClose();
-  }
+  };

-  
  render() {
    const Component = CustomCalendarContainer as any;
    const viewProps = this.getComponentProps();
--- a/src/components/calendar/DaysView.tsx
+++ b/src/components/calendar/DaysView.tsx
@ -41,10 +41,10 @@ interface CustomDaysViewProps extends LocaleProps {
  handleClickOutside: () => void;
  classnames: ClassNamesFn;
  schedules?: Array<{
-    startTime: Date,
-    endTime: Date,
-    content: any,
-    className?: string
+    startTime: Date;
+    endTime: Date;
+    content: any;
+    className?: string;
  }>;
  largeMode?: boolean;
  onScheduleClick?: (scheduleData: any) => void;
@ -129,7 +129,12 @@ export class CustomDaysView extends DaysView {
    if (this.props.schedules) {
      let schedule: any[] = [];
      this.props.schedules.forEach((item: any) => {
-        if (currentDate.isSameOrAfter(moment(item.startTime).subtract(1, 'days')) && currentDate.isSameOrBefore(item.endTime)) {
+        if (
+          currentDate.isSameOrAfter(
+            moment(item.startTime).subtract(1, 'days')
+          ) &&
+          currentDate.isSameOrBefore(item.endTime)
+        ) {
          schedule.push(item);
        }
      });
@ -141,8 +146,11 @@ export class CustomDaysView extends DaysView {
          scheduleData: schedule.map((item: any) => {
            return {
              ...item,
-              time: moment(item.startTime).format('YYYY-MM-DD HH:mm:ss') + ' - ' + moment(item.endTime).format('YYYY-MM-DD HH:mm:ss'),
-            }
+              time:
+                moment(item.startTime).format('YYYY-MM-DD HH:mm:ss') +
+                ' - ' +
+                moment(item.endTime).format('YYYY-MM-DD HH:mm:ss')
+            };
          }),
          currentDate
        };
@ -156,8 +164,7 @@ export class CustomDaysView extends DaysView {
            }
            if (moment(schedule[i].startTime).isSame(currentDate, 'day')) {
              showSchedule.push(schedule[i]);
-            }
-            else if (currentDate.weekday() === 0) {
+            } else if (currentDate.weekday() === 0) {
              // 周一重新设置日程
              showSchedule.push({
                ...schedule[i],
@ -166,46 +173,86 @@ export class CustomDaysView extends DaysView {
            }
          }
          [0, 1, 2].forEach((i: number) => {
-            const findSchedule = find(schedule, (item: any) => item.height === i);
-            if (findSchedule && findSchedule !== showSchedule[i] && currentDate.weekday() !== 0) {
+            const findSchedule = find(
+              schedule,
+              (item: any) => item.height === i
+            );
+            if (
+              findSchedule &&
+              findSchedule !== showSchedule[i] &&
+              currentDate.weekday() !== 0
+            ) {
              // 生成一个空白格占位
              showSchedule.splice(i, 0, {
                width: 1,
                className: 'bg-transparent',
                content: ''
              });
-            }
-            else {
+            } else {
              showSchedule[i] && (showSchedule[i].height = i);
            }
          });
          // 最多展示3个
          showSchedule = showSchedule.slice(0, 3);
          const scheduleDiv = showSchedule.map((item: any, index: number) => {
-            const width = item.width || Math.min(moment(item.endTime).diff(moment(item.startTime), 'days') + 1, 7 - moment(item.startTime).weekday());
-            return <div key={props.key + 'content' + index}
-              className={cx('ScheduleCalendar-large-schedule-content', item.className)}
-              style={{width: width + '00%'}}
-              onClick={() => this.props.onScheduleClick && this.props.onScheduleClick(scheduleData)}>
-                <div className={cx('ScheduleCalendar-text-overflow')}>{item.content}</div>
-            </div>;
-          });
-          return <td {...props}>
-              <div className={cx('ScheduleCalendar-large-day-wrap')}>
-                <div className={cx('ScheduleCalendar-large-schedule-header')}>{currentDate.date()}</div>
-                {scheduleDiv}
-                {schedule.length > 3 && <div className={cx('ScheduleCalendar-large-schedule-footer')}>{schedule.length - 3} {__('more')}</div>}
+            const width =
+              item.width ||
+              Math.min(
+                moment(item.endTime).diff(moment(item.startTime), 'days') + 1,
+                7 - moment(item.startTime).weekday()
+              );
+            return (
+              <div
+                key={props.key + 'content' + index}
+                className={cx(
+                  'ScheduleCalendar-large-schedule-content',
+                  item.className
+                )}
+                style={{width: width + '00%'}}
+                onClick={() =>
+                  this.props.onScheduleClick &&
+                  this.props.onScheduleClick(scheduleData)
+                }
+              >
+                <div className={cx('ScheduleCalendar-text-overflow')}>
+                  {item.content}
+                </div>
              </div>
-          </td>
+            );
+          });
+          return (
+            <td {...props}>
+              <div className={cx('ScheduleCalendar-large-day-wrap')}>
+                <div className={cx('ScheduleCalendar-large-schedule-header')}>
+                  {currentDate.date()}
+                </div>
+                {scheduleDiv}
+                {schedule.length > 3 && (
+                  <div className={cx('ScheduleCalendar-large-schedule-footer')}>
+                    {schedule.length - 3} {__('more')}
+                  </div>
+                )}
+              </div>
+            </td>
+          );
        }

        // 正常模式
-        const ScheduleIcon = <span className={cx('ScheduleCalendar-icon', schedule[0].className)}
-           onClick={() => this.props.onScheduleClick && this.props.onScheduleClick(scheduleData)}></span>;
-        return <td {...props}>
-          {currentDate.date()}
-          {ScheduleIcon}
-        </td>;
+        const ScheduleIcon = (
+          <span
+            className={cx('ScheduleCalendar-icon', schedule[0].className)}
+            onClick={() =>
+              this.props.onScheduleClick &&
+              this.props.onScheduleClick(scheduleData)
+            }
+          ></span>
+        );
+        return (
+          <td {...props}>
+            {currentDate.date()}
+            {ScheduleIcon}
+          </td>
+        );
      }
    }
    return <td {...props}>{currentDate.date()}</td>;
--- a/src/components/calendar/MonthsView.tsx
+++ b/src/components/calendar/MonthsView.tsx
@ -4,7 +4,7 @@ import moment from 'moment';
 import React from 'react';
 import {LocaleProps, localeable, TranslateFn} from '../../locale';
 import Picker from '../Picker';
-import {convertDateToObject, getRange, isMobile} from "../../utils/helper";
+import {convertDateToObject, getRange, isMobile} from '../../utils/helper';

 export interface OtherProps {
  inputFormat?: string;
@ -33,34 +33,40 @@ export class CustomMonthsView extends MonthsView {
    useMobileUI: boolean;
  } & LocaleProps &
    OtherProps;
-  maxDateObject: {year: number; month: number; day?: number;}
-  minDateObject: {year: number; month: number; day?: number;}
-  state: { columns: { options: number[]; }[]; };
+  maxDateObject: {year: number; month: number; day?: number};
+  minDateObject: {year: number; month: number; day?: number};
+  state: {columns: {options: number[]}[]};
  setState: (arg0: any) => () => any;
  renderMonths: () => JSX.Element;
-  
+
  constructor(props: any) {
    super(props);

-    const {minDate, maxDate, selectedDate, viewDate} =  props;
-    const currentDate = (selectedDate || viewDate || moment());
+    const {minDate, maxDate, selectedDate, viewDate} = props;
+    const currentDate = selectedDate || viewDate || moment();
    const year = currentDate.year();
-    this.maxDateObject = maxDate ? convertDateToObject(maxDate) : {
-      year: year + 100,
-      month: 12
-    };
-    this.minDateObject = minDate ? convertDateToObject(minDate) : {
-      year: year - 100,
-      month: 1
-    };
+    this.maxDateObject = maxDate
+      ? convertDateToObject(maxDate)
+      : {
+          year: year + 100,
+          month: 12
+        };
+    this.minDateObject = minDate
+      ? convertDateToObject(minDate)
+      : {
+          year: year - 100,
+          month: 1
+        };

    const columns = ['year', 'month'].map((type: 'year' | 'month') => {
      if (type === 'month') {
-        const minMonth = year === this.minDateObject.year ? this.minDateObject.month : 1;
-        const maxMonth = year === this.maxDateObject.year ? this.maxDateObject.month : 12;
+        const minMonth =
+          year === this.minDateObject.year ? this.minDateObject.month : 1;
+        const maxMonth =
+          year === this.maxDateObject.year ? this.maxDateObject.month : 12;
        return {
          options: getRange(minMonth, maxMonth, 1)
-        }
+        };
      }
      return {
        options: getRange(this.minDateObject[type], this.maxDateObject[type], 1)
@ -72,7 +78,6 @@ export class CustomMonthsView extends MonthsView {
    };
  }

-
  renderMonth = (props: any, month: number) => {
    var localMoment = this.props.viewDate;
    var monthStr = localMoment
@ -92,40 +97,44 @@ export class CustomMonthsView extends MonthsView {
  onConfirm = (value: number[]) => {
    // 将月份的值减1 ，月份是0-11
    value[1] && --value[1];
-    this.props.onConfirm && this.props.onConfirm(value, ["year", "month"]);
-  }
+    this.props.onConfirm && this.props.onConfirm(value, ['year', 'month']);
+  };

  onPickerChange = (value: number[], index: number) => {
    const columns = [...this.state.columns];
    // 选择年份是最大值的年或者最小值的月时，需要重新计算月分选择的cloumn
    if (index === 0) {
-      if (value[0] === this.minDateObject.year && value[0] === this.maxDateObject.year)  {
+      if (
+        value[0] === this.minDateObject.year &&
+        value[0] === this.maxDateObject.year
+      ) {
        columns[1] = {
-          options: getRange(this.minDateObject.month, this.maxDateObject.month, 1)
+          options: getRange(
+            this.minDateObject.month,
+            this.maxDateObject.month,
+            1
+          )
        };
-      }
-      else if(value[0] === this.minDateObject.year) {
+      } else if (value[0] === this.minDateObject.year) {
        columns[1] = {
          options: getRange(this.minDateObject.month, 12, 1)
        };
-      }
-      else if (value[0] === this.maxDateObject.year) {
+      } else if (value[0] === this.maxDateObject.year) {
        columns[1] = {
          options: getRange(1, this.maxDateObject.month, 1)
        };
-      }
-      else {
+      } else {
        columns[1] = {
          options: getRange(1, 12, 1)
        };
      }
      this.setState({columns});
    }
-  }
+  };

  renderPicker = () => {
-    const {selectedDate, viewDate} =  this.props;
-    const currentDate = (selectedDate || viewDate || moment());
+    const {selectedDate, viewDate} = this.props;
+    const currentDate = selectedDate || viewDate || moment();
    const year = currentDate.year();
    const month = parseInt(currentDate.format('MM'), 10);

@ -138,7 +147,7 @@ export class CustomMonthsView extends MonthsView {
        onChange={this.onPickerChange}
        onConfirm={this.onConfirm}
        onClose={this.props.onClose}
-        />
+      />
    );
  };

@ -147,11 +156,7 @@ export class CustomMonthsView extends MonthsView {
    const showYearHead = !/^mm$/i.test(this.props.inputFormat || '');
    const canClick = /yy/i.test(this.props.inputFormat || '');
    if (isMobile() && this.props.useMobileUI) {
-      return (
-        <div className="rdtYears">
-          {this.renderPicker()}
-        </div>
-      );
+      return <div className="rdtYears">{this.renderPicker()}</div>;
    }
    return (
      <div className="rdtMonths">
--- a/src/components/calendar/TimeView.tsx
+++ b/src/components/calendar/TimeView.tsx
@ -7,7 +7,7 @@ import {Icon} from '../icons';
 import {ClassNamesFn} from '../../theme';
 import Picker from '../Picker';
 import {PickerColumnItem} from '../PickerColumn';
-import {getRange, isMobile} from "../../utils/helper";
+import {getRange, isMobile} from '../../utils/helper';

 export class CustomTimeView extends TimeView {
  props: {
@ -90,7 +90,7 @@ export class CustomTimeView extends TimeView {
      return parseInt(value);
    }
    return 0;
-  }
+  };

  renderCounter = (type: string) => {
    const cx = this.props.classnames;
@ -150,12 +150,12 @@ export class CustomTimeView extends TimeView {

  onConfirm = (value: number[]) => {
    this.props.onConfirm && this.props.onConfirm(value, this.state.counters);
-  }
+  };

  getDayPartOptions = () => {
    const {translate: __} = this.props;
    let options = ['am', 'pm'];
-    if ( this.props.timeFormat.indexOf( ' A' ) !== -1 ) {
+    if (this.props.timeFormat.indexOf(' A') !== -1) {
      options = ['AM', 'PM'];
    }

@ -163,7 +163,7 @@ export class CustomTimeView extends TimeView {
      text: __(daypart),
      value: daypart
    }));
-  }
+  };

  renderTimeViewPicker = () => {
    const columns: PickerColumnItem[] = [];
@ -174,10 +174,12 @@ export class CustomTimeView extends TimeView {
        const counterValue: number = this.getCounterValue(type);
        let {min, max, step} = this.timeConstraints[type];
        // 修正am pm时hours可选最大值
-        if (type === 'hours'
-          && this.state.daypart !== false
-          && this.props.timeFormat.toLowerCase().indexOf(' a') !== -1) {
-            max = max > 12 ? 12 : max;
+        if (
+          type === 'hours' &&
+          this.state.daypart !== false &&
+          this.props.timeFormat.toLowerCase().indexOf(' a') !== -1
+        ) {
+          max = max > 12 ? 12 : max;
        }
        columns.push({
          options: getRange(min, max, step)
@ -189,7 +191,7 @@ export class CustomTimeView extends TimeView {
      columns.push({
        options: this.getDayPartOptions()
      });
-      values.push(this.state.daypart)
+      values.push(this.state.daypart);
    }

    return (
@ -197,21 +199,21 @@ export class CustomTimeView extends TimeView {
        translate={this.props.translate}
        locale={this.props.locale}
        columns={columns}
-        value={values} 
+        value={values}
        onConfirm={this.onConfirm}
        onClose={this.props.onClose}
-        />
+      />
    );
-  }
+  };

  render() {
    let counters: Array<JSX.Element | null> = [];
    const cx = this.props.classnames;
-    
+
    if (isMobile() && this.props.useMobileUI) {
-      return <div className={cx('CalendarTime')}>
-          {this.renderTimeViewPicker()}
-        </div>
+      return (
+        <div className={cx('CalendarTime')}>{this.renderTimeViewPicker()}</div>
+      );
    }
    this.state.counters.forEach(c => {
      if (counters.length) {
--- a/src/components/calendar/YearsView.tsx
+++ b/src/components/calendar/YearsView.tsx
@ -4,7 +4,7 @@ import moment from 'moment';
 import React from 'react';
 import {LocaleProps, localeable} from '../../locale';
 import Picker from '../Picker';
-import {convertDateToObject, getRange, isMobile} from "../../utils/helper";
+import {convertDateToObject, getRange, isMobile} from '../../utils/helper';

 export class CustomYearsView extends YearsView {
  props: {
@ -38,28 +38,30 @@ export class CustomYearsView extends YearsView {
  };

  onConfirm = (value: number[]) => {
-    this.props.onConfirm && this.props.onConfirm(value, ["year"])
-  }
+    this.props.onConfirm && this.props.onConfirm(value, ['year']);
+  };

  renderYearPicker = () => {
-    const {minDate, maxDate, selectedDate, viewDate} =  this.props;
+    const {minDate, maxDate, selectedDate, viewDate} = this.props;
    const year = (selectedDate || viewDate || moment()).year();
    const maxYear = maxDate ? convertDateToObject(maxDate)!.year : year + 100;
    const minYear = minDate ? convertDateToObject(minDate)!.year : year - 100;
-    
-    const columns = [{
-      options: getRange(minYear, maxYear, 1)
-    }];
+
+    const columns = [
+      {
+        options: getRange(minYear, maxYear, 1)
+      }
+    ];

    return (
      <Picker
        translate={this.props.translate}
        locale={this.props.locale}
        columns={columns}
-        value={[year]} 
+        value={[year]}
        onConfirm={this.onConfirm}
        onClose={this.props.onClose}
-        />
+      />
    );
  };

@ -67,13 +69,9 @@ export class CustomYearsView extends YearsView {
    let year = this.props.viewDate.year();
    year = year - (year % 10);
    const __ = this.props.translate;
-    
+
    if (isMobile() && this.props.useMobileUI) {
-      return (
-        <div className="rdtYears">
-          {this.renderYearPicker()}
-        </div>
-      );
+      return <div className="rdtYears">{this.renderYearPicker()}</div>;
    }
    return (
      <div className="rdtYears">
--- a/src/components/virtual-list/SizeAndPositionManager.ts
+++ b/src/components/virtual-list/SizeAndPositionManager.ts
@ -72,7 +72,8 @@ export default class SizeAndPositionManager {
    }

    if (index > this.lastMeasuredIndex) {
-      const lastMeasuredSizeAndPosition = this.getSizeAndPositionOfLastMeasuredItem();
+      const lastMeasuredSizeAndPosition =
+        this.getSizeAndPositionOfLastMeasuredItem();
      let offset =
        lastMeasuredSizeAndPosition.offset + lastMeasuredSizeAndPosition.size;

@ -109,7 +110,8 @@ export default class SizeAndPositionManager {
   * As items as measured the estimate will be updated.
   */
  getTotalSize(): number {
-    const lastMeasuredSizeAndPosition = this.getSizeAndPositionOfLastMeasuredItem();
+    const lastMeasuredSizeAndPosition =
+      this.getSizeAndPositionOfLastMeasuredItem();

    return (
      lastMeasuredSizeAndPosition.offset +
@ -232,7 +234,8 @@ export default class SizeAndPositionManager {
    // So make sure the offset is at least 0 or no match will be found.
    offset = Math.max(0, offset);

-    const lastMeasuredSizeAndPosition = this.getSizeAndPositionOfLastMeasuredItem();
+    const lastMeasuredSizeAndPosition =
+      this.getSizeAndPositionOfLastMeasuredItem();
    const lastMeasuredIndex = Math.max(0, this.lastMeasuredIndex);

    if (lastMeasuredSizeAndPosition.offset >= offset) {
--- a/src/components/virtual-list/index.tsx
+++ b/src/components/virtual-list/index.tsx
@ -181,8 +181,8 @@ export default class VirtualList extends React.PureComponent<Props, State> {
    const itemsDom = this.rootNode.children[0].children;
    const scrollbarWidth =
      window.innerWidth - document.documentElement.clientWidth || 15;
-    const containerWidth = this.rootNode.parentElement!.getBoundingClientRect()
-      .width;
+    const containerWidth =
+      this.rootNode.parentElement!.getBoundingClientRect().width;
    let maxItemWidth = 0;
    for (let i = 0; i < itemsDom.length; i++) {
      let itemWidth = itemsDom[i].getBoundingClientRect().width;
@ -427,10 +427,8 @@ export default class VirtualList extends React.PureComponent<Props, State> {
    }

    const {scrollDirection = DIRECTION.VERTICAL} = this.props;
-    const {
-      size,
-      offset
-    } = this.sizeAndPositionManager.getSizeAndPositionForIndex(index);
+    const {size, offset} =
+      this.sizeAndPositionManager.getSizeAndPositionForIndex(index);

    return (this.styleCache[index] = sticky
      ? {
--- a/src/renderers/Custom.tsx
+++ b/src/renderers/Custom.tsx
@ -33,9 +33,12 @@ export interface CustomProps extends FormControlProps, CustomSchema {

 // 添加resolver，指定所有参数的联合字符串为key。因为最后一个参数为函数体
 // 缓存一下，避免在 crud 中的自定义组件被大量执行
-const getFunction = memoize((...args) => {
-  return new Function(...args);
-}, (...args) => JSON.stringify(args));
+const getFunction = memoize(
+  (...args) => {
+    return new Function(...args);
+  },
+  (...args) => JSON.stringify(args)
+);

 export class Custom extends React.Component<CustomProps, object> {
  static defaultProps: Partial<CustomProps> = {
--- a/src/renderers/Each.tsx
+++ b/src/renderers/Each.tsx
@ -54,10 +54,10 @@ export default class Each extends React.Component<EachProps> {
      translate: __
    } = this.props;

-    const value = getPropValue(
-      this.props,
-      props => props.source && !props.name
-        ? resolveVariableAndFilter(props.source, props.data, '| raw') : undefined
+    const value = getPropValue(this.props, props =>
+      props.source && !props.name
+        ? resolveVariableAndFilter(props.source, props.data, '| raw')
+        : undefined
    );

    const arr = isObject(value)
--- a/src/renderers/Flex.tsx
+++ b/src/renderers/Flex.tsx
@ -112,13 +112,9 @@ export default class Flex extends React.Component<FlexProps, object> {

    return (
      <div style={flexStyle} className={className}>
-        {(Array.isArray(items)
-          ? items
-          : items
-          ? [items]
-          : []
-        ).map((item, key) =>
-          render(`flexItem/${key}`, item, {key: `flexItem/${key}`})
+        {(Array.isArray(items) ? items : items ? [items] : []).map(
+          (item, key) =>
+            render(`flexItem/${key}`, item, {key: `flexItem/${key}`})
        )}
      </div>
    );
--- a/src/renderers/Form/ChartRadios.tsx
+++ b/src/renderers/Form/ChartRadios.tsx
@ -98,13 +98,8 @@ export default class ChartRadiosControl extends React.Component<
  }

  render() {
-    const {
-      options,
-      labelField,
-      chartValueField,
-      valueField,
-      render
-    } = this.props;
+    const {options, labelField, chartValueField, valueField, render} =
+      this.props;
    const config = {
      legend: {
        top: 10
--- a/src/renderers/Form/Checkboxes.tsx
+++ b/src/renderers/Form/Checkboxes.tsx
@ -216,7 +216,7 @@ export default class CheckboxesControl extends React.Component<
          inline={inline}
          labelClassName={labelClassName}
        >
-        {__('Checkboxes.selectAll')}
+          {__('Checkboxes.selectAll')}
        </Checkbox>
      );
    }
--- a/src/renderers/Form/DiffEditor.tsx
+++ b/src/renderers/Form/DiffEditor.tsx
@ -98,9 +98,8 @@ export class DiffEditor extends React.Component<DiffEditorProps, any> {
    this.handleBlur = this.handleBlur.bind(this);
    this.editorFactory = this.editorFactory.bind(this);
    this.handleEditorMounted = this.handleEditorMounted.bind(this);
-    this.handleModifiedEditorChange = this.handleModifiedEditorChange.bind(
-      this
-    );
+    this.handleModifiedEditorChange =
+      this.handleModifiedEditorChange.bind(this);
  }

  componentWillUnmount() {
--- a/src/renderers/Form/InputColor.tsx
+++ b/src/renderers/Form/InputColor.tsx
@ -72,7 +72,7 @@ export default class ColorControl extends React.PureComponent<
    return (
      <div className={cx(`${ns}ColorControl`, className)}>
        <Suspense fallback={<div>...</div>}>
-          <ColorPicker classPrefix={ns} {...rest} value={value || ''} useMobileUI={env.useMobileUI}/>
+          <ColorPicker classPrefix={ns} {...rest} value={value || ''} />
        </Suspense>
      </div>
    );
--- a/src/renderers/Form/InputDate.tsx
+++ b/src/renderers/Form/InputDate.tsx
@ -1,7 +1,11 @@
 import React from 'react';
 import {FormItem, FormControlProps, FormBaseControl} from './Item';
 import cx from 'classnames';
-import {filterDate, isPureVariable, resolveVariableAndFilter} from '../../utils/tpl-builtin';
+import {
+  filterDate,
+  isPureVariable,
+  resolveVariableAndFilter
+} from '../../utils/tpl-builtin';
 import moment from 'moment';
 import 'moment/locale/zh-cn';
 import DatePicker from '../../components/DatePicker';
@ -91,12 +95,14 @@ export interface DateControlSchema extends InputDateBaseControlSchema {
  /**
   * 日程
   */
-  schedules?: Array<{
-    startTime: Date,
-    endTime: Date,
-    content: any,
-    className?: string
-  }> | string;
+  schedules?:
+    | Array<{
+        startTime: Date;
+        endTime: Date;
+        content: any;
+        className?: string;
+      }>
+    | string;
  /**
   * 日程显示颜色自定义
   */
@ -288,10 +294,10 @@ interface DateControlState {
  minDate?: moment.Moment;
  maxDate?: moment.Moment;
  schedules?: Array<{
-    startTime: Date,
-    endTime: Date,
-    content: any,
-    className?: string
+    startTime: Date;
+    endTime: Date;
+    content: any;
+    className?: string;
  }>;
 }

@ -370,15 +376,25 @@ export default class DateControl extends React.PureComponent<
      });
    }

-    if (anyChanged(['schedules', 'data'], prevProps, props)
-      && (typeof props.schedules === 'string' && isPureVariable(props.schedules))
+    if (
+      anyChanged(['schedules', 'data'], prevProps, props) &&
+      typeof props.schedules === 'string' &&
+      isPureVariable(props.schedules)
    ) {
-      const schedulesData = resolveVariableAndFilter(props.schedules, props.data, '| raw');
-      const preSchedulesData = resolveVariableAndFilter(prevProps.schedules, prevProps.data, '| raw');
+      const schedulesData = resolveVariableAndFilter(
+        props.schedules,
+        props.data,
+        '| raw'
+      );
+      const preSchedulesData = resolveVariableAndFilter(
+        prevProps.schedules,
+        prevProps.data,
+        '| raw'
+      );
      if (Array.isArray(schedulesData) && preSchedulesData !== schedulesData) {
        this.setState({
          schedules: schedulesData
-        })
+        });
      }
    }
  }
@ -408,8 +424,12 @@ export default class DateControl extends React.PureComponent<
      }
    };

-    onAction && onAction(null, scheduleAction || defaultscheduleAction, createObject(data, scheduleData));
-
+    onAction &&
+      onAction(
+        null,
+        scheduleAction || defaultscheduleAction,
+        createObject(data, scheduleData)
+      );
  }

  render() {
@ -442,7 +462,6 @@ export default class DateControl extends React.PureComponent<
          format={valueFormat || format}
          {...this.state}
          classnames={cx}
-          useMobileUI={env.useMobileUI}
          schedules={this.state.schedules}
          largeMode={largeMode}
          onScheduleClick={this.onScheduleClick.bind(this)}
--- a/src/renderers/Form/InputDateRange.tsx
+++ b/src/renderers/Form/InputDateRange.tsx
@ -187,7 +187,6 @@ export default class DateRangeControl extends React.Component<DateRangeProps> {
          maxDate={maxDate ? filterDate(maxDate, data, format) : undefined}
          minDuration={minDuration ? parseDuration(minDuration) : undefined}
          maxDuration={maxDuration ? parseDuration(maxDuration) : undefined}
-          useMobileUI={env.useMobileUI}
        />
      </div>
    );
--- a/src/renderers/Form/InputMonthRange.tsx
+++ b/src/renderers/Form/InputMonthRange.tsx
@ -185,7 +185,6 @@ export default class MonthRangeControl extends React.Component<MonthRangeProps>
          maxDate={maxDate ? filterDate(maxDate, data, format) : undefined}
          minDuration={minDuration ? parseDuration(minDuration) : undefined}
          maxDuration={maxDuration ? parseDuration(maxDuration) : undefined}
-          useMobileUI={env.useMobileUI}
        />
      </div>
    );
--- a/src/renderers/Form/InputQuarterRange.tsx
+++ b/src/renderers/Form/InputQuarterRange.tsx
@ -45,7 +45,6 @@ export default class QuarterRangeControl extends InputDateRange {
          maxDate={maxDate ? filterDate(maxDate, data, format) : undefined}
          minDuration={minDuration ? parseDuration(minDuration) : undefined}
          maxDuration={maxDuration ? parseDuration(maxDuration) : undefined}
-          useMobileUI={env.useMobileUI}
        />
      </div>
    );
--- a/src/renderers/Form/InputYearRange.tsx
+++ b/src/renderers/Form/InputYearRange.tsx
@ -45,7 +45,6 @@ export default class YearRangeControl extends InputDateRange {
          maxDate={maxDate ? filterDate(maxDate, data, format) : undefined}
          minDuration={minDuration ? parseDuration(minDuration) : undefined}
          maxDuration={maxDuration ? parseDuration(maxDuration) : undefined}
-          useMobileUI={env.useMobileUI}
        />
      </div>
    );
--- a/src/renderers/Form/Select.tsx
+++ b/src/renderers/Form/Select.tsx
@ -314,7 +314,6 @@ export default class SelectControl extends React.Component<SelectProps, any> {
        ) : (
          <Select
            {...rest}
-            useMobileUI={env.useMobileUI}
            borderMode={borderMode}
            placeholder={placeholder}
            multiple={multiple || multi}
--- a/src/renderers/Form/TreeSelect.tsx
+++ b/src/renderers/Form/TreeSelect.tsx
@ -572,8 +572,8 @@ export default class TreeSelectControl extends React.Component<
      translate: __
    } = this.props;

-    const { isOpened } = this.state;
-    const { useMobileUI } = env;
+    const {isOpened} = this.state;
+    const {useMobileUI} = env;
    return (
      <div ref={this.container} className={cx(`TreeSelectControl`, className)}>
        <ResultBox
@ -612,7 +612,7 @@ export default class TreeSelectControl extends React.Component<
        >
          {loading ? <Spinner size="sm" /> : undefined}
        </ResultBox>
-        { !(useMobileUI && isMobile()) && isOpened ? (
+        {!(useMobileUI && isMobile()) && isOpened ? (
          <Overlay
            container={popOverContainer || (() => this.container.current)}
            target={() => this.target}
@ -631,17 +631,15 @@ export default class TreeSelectControl extends React.Component<
            </PopOver>
          </Overlay>
        ) : null}
-        {
-          useMobileUI && isMobile() && (
-            <PopUp
-              className={cx(`${ns}TreeSelect-popup`)}
-              isShow={isOpened}
-              onHide={this.close}
-            >
-              {this.renderOuter()}
-            </PopUp>
-          )
-        }
+        {useMobileUI && isMobile() && (
+          <PopUp
+            className={cx(`${ns}TreeSelect-popup`)}
+            isShow={isOpened}
+            onHide={this.close}
+          >
+            {this.renderOuter()}
+          </PopUp>
+        )}
      </div>
    );
  }
--- a/src/renderers/Steps.tsx
+++ b/src/renderers/Steps.tsx
@ -60,9 +60,11 @@ export interface StepsSchema extends BaseSchema {
   */
  name?: string;

-  status?: StepStatus | {
-    [propName: string]: StepStatus;
-  };
+  status?:
+    | StepStatus
+    | {
+        [propName: string]: StepStatus;
+      };

  /**
   * 展示模式
@ -84,7 +86,7 @@ export function StepsCmpt(props: StepsProps) {
    source,
    config,
    render,
-    env
+    useMobileUI
  } = props;

  const stepsRow =
@ -92,9 +94,8 @@ export function StepsCmpt(props: StepsProps) {
    config ||
    steps ||
    [];
-  const resolveRender = (val?: string | SchemaCollection) => typeof val === 'string'
-    ? filter(val, data)
-    : val && render('inner', val);
+  const resolveRender = (val?: string | SchemaCollection) =>
+    typeof val === 'string' ? filter(val, data) : val && render('inner', val);
  const value = getPropValue(props) ?? 0;
  const resolveValue =
    typeof value === 'string' && isNaN(+value)
@ -112,13 +113,10 @@ export function StepsCmpt(props: StepsProps) {
      title: resolveRender(step.title),
      subTitle: resolveRender(step.subTitle),
      description: resolveRender(step.description)
-    }
+    };
  });

-  function getStepStatus(
-    step: StepSchema,
-    i: number
-  ): StepStatus {
+  function getStepStatus(step: StepSchema, i: number): StepStatus {
    let stepStatus;

    if (typeof status === 'string') {
@ -141,7 +139,7 @@ export function StepsCmpt(props: StepsProps) {
      className={className}
      status={status}
      mode={mode}
-      useMobileUI={env.useMobileUI}
+      useMobileUI={useMobileUI}
    ></Steps>
  );
 }
--- a/src/renderers/Video.tsx
+++ b/src/renderers/Video.tsx
@ -149,16 +149,8 @@ export class FlvSource extends React.Component<FlvSourceProps, any> {
  unsubscribe: any;

  componentDidMount() {
-    let {
-      src,
-      video,
-      config,
-      manager,
-      isLive,
-      autoPlay,
-      actions,
-      setError
-    } = this.props;
+    let {src, video, config, manager, isLive, autoPlay, actions, setError} =
+      this.props;

    this.initFlv({
      video,
@ -174,16 +166,8 @@ export class FlvSource extends React.Component<FlvSourceProps, any> {

  componentDidUpdate(prevProps: FlvSourceProps) {
    const props = this.props;
-    let {
-      autoPlay,
-      actions,
-      src,
-      setError,
-      isLive,
-      config,
-      video,
-      manager
-    } = props;
+    let {autoPlay, actions, src, setError, isLive, config, video, manager} =
+      props;

    if (src !== prevProps.src) {
      setError('');
--- a/src/store/combo.ts
+++ b/src/store/combo.ts
@ -11,9 +11,7 @@ export const UniqueGroup = types
  })
  .views(self => ({
    get items() {
-      return self.itemsRef.map(
-        id => (getStoreById(id) as any) as IFormItemStore
-      );
+      return self.itemsRef.map(id => getStoreById(id) as any as IFormItemStore);
    }
  }))
  .actions(self => ({