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

* chore: 统一成使用 props.useMobileUI 避免混乱

* chore: 统一成使用 props.useMobileUI 避免混乱

* chore: 统一成使用 props.useMobileUI 避免混乱

* chore: 统一成使用 props.useMobileUI 避免混乱

* chore: 统一成使用 props.useMobileUI 避免混乱

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npx pretty-quick --staged
+npx lint-staged

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', '*');

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",
+    "video-react": "0.14.1"
-    "codemirror": "^5.63.0"
   },
   "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",

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.covertPoint(point, COORDINATES_BD09, COORDINATES_GCJ02).then(
-        this.props?.onChange({
+        (convertedPoint: any) => {
-          address: loc.address.trim() || loc.title,
+          this.props?.onChange({
-          lat: convertedPoint.lat,
+            address: loc.address.trim() || loc.title,
-          lng: convertedPoint.lng,
+            lat: convertedPoint.lat,
-          city: loc.city
+            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

src/components/ColorPicker.tsx

@@ -320,45 +320,43 @@ export class ColorControl extends React.PureComponent<
             </PopOver>
           </Overlay>
         ) : null}
-        {
+        {useMobileUI && isMobile() && (
-          useMobileUI && isMobile() && (
+          <PopUp
-            <PopUp
+            className={cx(`${ns}ColorPicker-popup`)}
-              className={cx(`${ns}ColorPicker-popup`)}
+            isShow={isOpened}
-              isShow={isOpened}
+            onHide={this.handleClick}
-              onHide={this.handleClick}
+          >
-            >
+            {allowCustomColor ? (
-              {allowCustomColor ? (
+              <SketchPicker
-                <SketchPicker
+                styles={{}}
-                  styles={{}}
+                disableAlpha={!!~['rgb', 'hex'].indexOf(format as string)}
-                  disableAlpha={!!~['rgb', 'hex'].indexOf(format as string)}
+                color={value}
-                  color={value}
+                presetColors={presetColors}
-                  presetColors={presetColors}
+                onChangeComplete={this.handleChange}
-                  onChangeComplete={this.handleChange}
+              />
-                />
+            ) : (
-              ) : (
+              <GithubPicker
-                <GithubPicker
+                color={value}
-                  color={value}
+                colors={
-                  colors={
+                  Array.isArray(presetColors)
-                    Array.isArray(presetColors)
+                    ? (presetColors
-                      ? (presetColors
+                        .filter(
-                          .filter(
+                          item => typeof item === 'string' || isObject(item)
-                            item => typeof item === 'string' || isObject(item)
+                        )
-                          )
+                        .map(item =>
-                          .map(item =>
+                          typeof item === 'string'
-                            typeof item === 'string'
+                            ? item
-                              ? item
+                            : isObject(item)
-                              : isObject(item)
+                            ? item?.color
-                              ? item?.color
+                            : item
-                              : item
+                        ) as string[])
-                          ) as string[])
+                    : undefined
-                      : undefined
+                }
-                  }
+                onChangeComplete={this.handleChange}
-                  onChangeComplete={this.handleChange}
+              />
-                />
+            )}
-              )}
+          </PopUp>
-            </PopUp>
+        )}
-          )
-        }
       </div>
     );
   }

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,
+    startTime: Date;
-    endTime: Date,
+    endTime: Date;
-    content: any,
+    content: any;
-    className?: string
+    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() ? (
-          useMobileUI && isMobile() ? (
+          <PopUp
-            <PopUp
+            className={cx(`${ns}DatePicker-popup`)}
-              className={cx(`${ns}DatePicker-popup`)}
+            isShow={isOpened}
-              isShow={isOpened}
+            onHide={this.handleClick}
-              onHide={this.handleClick}
+          >
-            >
+            {this.renderShortCuts(shortcuts)}
-              {this.renderShortCuts(shortcuts)}
 
-              <Calendar
+            <Calendar
-                value={date}
+              value={date}
-                onChange={this.handleChange}
+              onChange={this.handleChange}
-                requiredConfirm={!!(dateFormat && timeFormat)}
+              requiredConfirm={!!(dateFormat && timeFormat)}
-                dateFormat={dateFormat}
+              dateFormat={dateFormat}
-                inputFormat={inputFormat}
+              inputFormat={inputFormat}
-                timeFormat={timeFormat}
+              timeFormat={timeFormat}
-                isValidDate={this.checkIsValidDate}
+              isValidDate={this.checkIsValidDate}
-                viewMode={viewMode}
+              viewMode={viewMode}
-                timeConstraints={timeConstraints}
+              timeConstraints={timeConstraints}
-                input={false}
+              input={false}
-                onClose={this.close}
+              onClose={this.close}
-                locale={locale}
+              locale={locale}
-                minDate={minDate}
+              minDate={minDate}
-                // utc={utc}
+              // utc={utc}
-              />
+            />
-            </PopUp>
+          </PopUp>
-          ) : null
+        ) : null}
-        }
       </div>
     );
   }

src/components/DateRangePicker.tsx

@@ -859,17 +859,15 @@ export class DateRangePicker extends React.Component<
             </PopOver>
           </Overlay>
         ) : null}
-        {
+        {useMobileUI && isMobile() && (
-          useMobileUI && isMobile() && (
+          <PopUp
-            <PopUp
+            isShow={isOpened}
-              isShow={isOpened}
+            className={cx(`${ns}DateRangePicker-popup`)}
-              className={cx(`${ns}DateRangePicker-popup`)}
+            onHide={this.handleClick}
-              onHide={this.handleClick}
+          >
-            >
+            {this.renderCalendar()}
-              {this.renderCalendar()}
+          </PopUp>
-            </PopUp>
+        )}
-          )
-        }
       </div>
     );
   }

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() && (
-          useMobileUI && isMobile() && (
+          <PopUp
-            <PopUp
+            className={cx(`${ns}DateRangePicker-popup`)}
-              className={cx(`${ns}DateRangePicker-popup`)}
+            isShow={isOpened}
-              isShow={isOpened}
+            onHide={this.handleClick}
-              onHide={this.handleClick}
+          >
-            >
+            {this.renderCalendar()}
-              {this.renderCalendar()}
+          </PopUp>
-            </PopUp>
+        )}
-          )
-        }
       </div>
     );
   }

src/components/Picker.tsx

@@ -2,11 +2,7 @@
  * @file Picker
  * @description 移动端列滚动选择器
  */
-import React, {
+import React, {memo, ReactNode, useState} from '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?: (
+  onChange?: (value?: PickerValue[], index?: number, confirm?: boolean) => void;
-    value?: PickerValue[],
+  onClose?: (value?: PickerValue[]) => void;
-    index?: number,
+  onConfirm?: (value?: PickerValue[]) => void;
-    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
+    <div className={cx(className, 'PickerColumns', 'PickerColumns-popOver')}>
-      className={cx(className, 'PickerColumns', 'PickerColumns-popOver')}
+      {showToolbar && (
-    >
+        <div className={cx('PickerColumns-toolbar')}>
-      {showToolbar && <div className={cx('PickerColumns-toolbar')}>
+          <Button
-        <Button className="PickerColumns-cancel" level="default" onClick={close}>
+            className="PickerColumns-cancel"
-          {__('cancel')}
+            level="default"
-        </Button>
+            onClick={close}
-        <Button className="PickerColumns-confirm" level="primary" onClick={confirm}>
+          >
-          {__('confirm')}
+            {__('cancel')}
-        </Button>
+          </Button>
-      </div>}
+          <Button
+            className="PickerColumns-confirm"
+            level="primary"
+            onClick={confirm}
+          >
+            {__('confirm')}
+          </Button>
+        </div>
+      )}
       <div className={cx('PickerColumns-columns')} style={columnsStyle}>
-          {
+        {_columns.map((column: PickerColumnItem, index: number) =>
-              _columns.map((column: PickerColumnItem, index: number) => renderColumnItem(column, index))
+          renderColumnItem(column, index)
-          }
+        )}
         <div className={cx('PickerColumns-mask')} style={maskStyle}></div>
         <div className={cx('PickerColumns-frame')} style={frameStyle}></div>
       </div>

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(
+        requestAnimationFrame(() => {
-          () => {
+          props.onChange?.(options[index], index, confirm);
-            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
+    <div
-          ref={root}
+      ref={root}
-          className={props.classnames('PickerColumns', props.className)}
+      className={props.classnames('PickerColumns', props.className)}
-          onTouchStart={onTouchStart}
+      onTouchStart={onTouchStart}
-          onTouchMove={onTouchMove}
+      onTouchMove={onTouchMove}
-          onTouchEnd={onTouchEnd}
+      onTouchEnd={onTouchEnd}
-          onTouchCancel={onTouchEnd}
+      onTouchCancel={onTouchEnd}
+    >
+      <ul
+        ref={wrapper}
+        style={wrapperStyle}
+        className={props.classnames('PickerColumns-columnWrapper')}
+        onTransitionEnd={stopMomentum}
       >
-          <ul
+        {renderOptions()}
-          ref={wrapper}
+      </ul>
-          style={wrapperStyle}
+    </div>
-          className={props.classnames('PickerColumns-columnWrapper')}
-          onTransitionEnd={stopMomentum}
-          >
-          {renderOptions()}
-          </ul>
-      </div>
   );
 });
 
@@ -389,4 +387,3 @@ export default themeable(
     value: 'onChange'
   })
 );
-

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

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}

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 | {
+  status?:
-    [propName: string]: StepStatus;
+    | 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',
+              <div
-                      i < current && 'is-success')}>
+                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);

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
+      const {scrollLeft, scrollWidth, clientWidth} = this.navMain.current || {
-        || {
+        scrollLeft: 0,
-          scrollLeft: 0,
+        scrollWidth: 0,
-          scrollWidth: 0,
+        clientWidth: 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
+    const {scrollLeft, scrollWidth, clientWidth} = this.navMain.current || {
-      || {
+      scrollLeft: 0,
-        scrollLeft: 0,
+      scrollWidth: 0,
-        scrollWidth: 0,
+      clientWidth: 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
+    return isOverflow ? (
-      ? (<div onClick={() => this.handleArrow(type)}
+      <div
-          className={cx(
+        onClick={() => this.handleArrow(type)}
-            'Tabs-linksContainer-arrow',
+        className={cx(
-            'Tabs-linksContainer-arrow--' + type,
+          'Tabs-linksContainer-arrow',
-            disabled && 'Tabs-linksContainer-arrow--disabled'
+          'Tabs-linksContainer-arrow--' + type,
-          )}>
+          disabled && 'Tabs-linksContainer-arrow--disabled'
-          <i className={'iconfont icon-arrow-' + type} />
+        )}
-        </div>)
+      >
-      : null
+        <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) ? (
-          scrollable && !['vertical', 'chrome'].includes(mode) ?
+          <div
-            (<div className={cx('Tabs-linksContainer', isOverflow && 'Tabs-linksContainer--overflow')}>
+            className={cx(
-              {this.renderArrow('left')}
+              'Tabs-linksContainer',
-              <div
+              isOverflow && 'Tabs-linksContainer--overflow'
-                className={cx('Tabs-linksContainer-main')}
+            )}
-                ref={this.navMain}
+          >
-              >
+            {this.renderArrow('left')}
-                <ul className={cx('Tabs-links', linksClassName)} role="tablist">
+            <div className={cx('Tabs-linksContainer-main')} ref={this.navMain}>
-                  {children.map((tab, index) => this.renderNav(tab, index))}
+              <ul className={cx('Tabs-links', linksClassName)} role="tablist">
-                  {additionBtns}
+                {children.map((tab, index) => this.renderNav(tab, index))}
-                  {toolbar}
+                {additionBtns}
-                </ul>
+                {toolbar}
-              </div>
+              </ul>
-              {this.renderArrow('right')}
+            </div>
-            </div>)
+            {this.renderArrow('right')}
-          : (<ul className={cx('Tabs-links', linksClassName)} role="tablist">
+          </div>
-              {children.map((tab, index) => this.renderNav(tab, index))}
+        ) : (
-              {additionBtns}
+          <ul className={cx('Tabs-links', linksClassName)} role="tablist">
-              {toolbar}
+            {children.map((tab, index) => this.renderNav(tab, index))}
-            </ul>)
+            {additionBtns}
-        }
+            {toolbar}
+          </ul>
+        )}
 
         <div className={cx('Tabs-content', contentClassName)}>
           {children.map((child, index) => {

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();

src/components/calendar/DaysView.tsx

@@ -41,10 +41,10 @@ interface CustomDaysViewProps extends LocaleProps {
   handleClickOutside: () => void;
   classnames: ClassNamesFn;
   schedules?: Array<{
-    startTime: Date,
+    startTime: Date;
-    endTime: Date,
+    endTime: Date;
-    content: any,
+    content: any;
-    className?: string
+    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);
+            const findSchedule = find(
-            if (findSchedule && findSchedule !== showSchedule[i] && currentDate.weekday() !== 0) {
+              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());
+            const width =
-            return <div key={props.key + 'content' + index}
+              item.width ||
-              className={cx('ScheduleCalendar-large-schedule-content', item.className)}
+              Math.min(
-              style={{width: width + '00%'}}
+                moment(item.endTime).diff(moment(item.startTime), 'days') + 1,
-              onClick={() => this.props.onScheduleClick && this.props.onScheduleClick(scheduleData)}>
+                7 - moment(item.startTime).weekday()
-                <div className={cx('ScheduleCalendar-text-overflow')}>{item.content}</div>
+              );
-            </div>;
+            return (
-          });
+              <div
-          return <td {...props}>
+                key={props.key + 'content' + index}
-              <div className={cx('ScheduleCalendar-large-day-wrap')}>
+                className={cx(
-                <div className={cx('ScheduleCalendar-large-schedule-header')}>{currentDate.date()}</div>
+                  'ScheduleCalendar-large-schedule-content',
-                {scheduleDiv}
+                  item.className
-                {schedule.length > 3 && <div className={cx('ScheduleCalendar-large-schedule-footer')}>{schedule.length - 3} {__('more')}</div>}
+                )}
+                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)}
+        const ScheduleIcon = (
-           onClick={() => this.props.onScheduleClick && this.props.onScheduleClick(scheduleData)}></span>;
+          <span
-        return <td {...props}>
+            className={cx('ScheduleCalendar-icon', schedule[0].className)}
-          {currentDate.date()}
+            onClick={() =>
-          {ScheduleIcon}
+              this.props.onScheduleClick &&
-        </td>;
+              this.props.onScheduleClick(scheduleData)
+            }
+          ></span>
+        );
+        return (
+          <td {...props}>
+            {currentDate.date()}
+            {ScheduleIcon}
+          </td>
+        );
       }
     }
     return <td {...props}>{currentDate.date()}</td>;

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;}
+  maxDateObject: {year: number; month: number; day?: number};
-  minDateObject: {year: number; month: number; day?: number;}
+  minDateObject: {year: number; month: number; day?: number};
-  state: { columns: { options: number[]; }[]; };
+  state: {columns: {options: number[]}[]};
   setState: (arg0: any) => () => any;
   renderMonths: () => JSX.Element;
-  
+
   constructor(props: any) {
     super(props);
 
-    const {minDate, maxDate, selectedDate, viewDate} =  props;
+    const {minDate, maxDate, selectedDate, viewDate} = props;
-    const currentDate = (selectedDate || viewDate || moment());
+    const currentDate = selectedDate || viewDate || moment();
     const year = currentDate.year();
-    this.maxDateObject = maxDate ? convertDateToObject(maxDate) : {
+    this.maxDateObject = maxDate
-      year: year + 100,
+      ? convertDateToObject(maxDate)
-      month: 12
+      : {
-    };
+          year: year + 100,
-    this.minDateObject = minDate ? convertDateToObject(minDate) : {
+          month: 12
-      year: year - 100,
+        };
-      month: 1
+    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 minMonth =
-        const maxMonth = year === this.maxDateObject.year ? this.maxDateObject.month : 12;
+          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 {selectedDate, viewDate} = this.props;
-    const currentDate = (selectedDate || viewDate || moment());
+    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 (
+      return <div className="rdtYears">{this.renderPicker()}</div>;
-        <div className="rdtYears">
-          {this.renderPicker()}
-        </div>
-      );
     }
     return (
       <div className="rdtMonths">

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'
+        if (
-          && this.state.daypart !== false
+          type === 'hours' &&
-          && this.props.timeFormat.toLowerCase().indexOf(' a') !== -1) {
+          this.state.daypart !== false &&
-            max = max > 12 ? 12 : max;
+          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')}>
+      return (
-          {this.renderTimeViewPicker()}
+        <div className={cx('CalendarTime')}>{this.renderTimeViewPicker()}</div>
-        </div>
+      );
     }
     this.state.counters.forEach(c => {
       if (counters.length) {

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 = [{
+    const columns = [
-      options: getRange(minYear, maxYear, 1)
+      {
-    }];
+        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 (
+      return <div className="rdtYears">{this.renderYearPicker()}</div>;
-        <div className="rdtYears">
-          {this.renderYearPicker()}
-        </div>
-      );
     }
     return (
       <div className="rdtYears">

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) {

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()
+    const containerWidth =
-      .width;
+      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 {
+    const {size, offset} =
-      size,
+      this.sizeAndPositionManager.getSizeAndPositionForIndex(index);
-      offset
-    } = this.sizeAndPositionManager.getSizeAndPositionForIndex(index);
 
     return (this.styleCache[index] = sticky
       ? {

src/renderers/Custom.tsx

@@ -33,9 +33,12 @@ export interface CustomProps extends FormControlProps, CustomSchema {
 
 // 添加resolver，指定所有参数的联合字符串为key。因为最后一个参数为函数体
 // 缓存一下，避免在 crud 中的自定义组件被大量执行
-const getFunction = memoize((...args) => {
+const getFunction = memoize(
-  return new Function(...args);
+  (...args) => {
-}, (...args) => JSON.stringify(args));
+    return new Function(...args);
+  },
+  (...args) => JSON.stringify(args)
+);
 
 export class Custom extends React.Component<CustomProps, object> {
   static defaultProps: Partial<CustomProps> = {

src/renderers/Each.tsx

@@ -54,10 +54,10 @@ export default class Each extends React.Component<EachProps> {
       translate: __
     } = this.props;
 
-    const value = getPropValue(
+    const value = getPropValue(this.props, props =>
-      this.props,
+      props.source && !props.name
-      props => props.source && !props.name
+        ? resolveVariableAndFilter(props.source, props.data, '| raw')
-        ? resolveVariableAndFilter(props.source, props.data, '| raw') : undefined
+        : undefined
     );
 
     const arr = isObject(value)

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)
+        {(Array.isArray(items) ? items : items ? [items] : []).map(
-          ? items
+          (item, key) =>
-          : items
+            render(`flexItem/${key}`, item, {key: `flexItem/${key}`})
-          ? [items]
-          : []
-        ).map((item, key) =>
-          render(`flexItem/${key}`, item, {key: `flexItem/${key}`})
         )}
       </div>
     );

src/renderers/Form/ChartRadios.tsx

@@ -98,13 +98,8 @@ export default class ChartRadiosControl extends React.Component<
   }
 
   render() {
-    const {
+    const {options, labelField, chartValueField, valueField, render} =
-      options,
+      this.props;
-      labelField,
-      chartValueField,
-      valueField,
-      render
-    } = this.props;
     const config = {
       legend: {
         top: 10

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>
       );
     }

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.handleModifiedEditorChange =
-      this
+      this.handleModifiedEditorChange.bind(this);
-    );
   }
 
   componentWillUnmount() {

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>
     );

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<{
+  schedules?:
-    startTime: Date,
+    | Array<{
-    endTime: Date,
+        startTime: Date;
-    content: any,
+        endTime: Date;
-    className?: string
+        content: any;
-  }> | string;
+        className?: string;
+      }>
+    | string;
   /**
    * 日程显示颜色自定义
    */
@@ -288,10 +294,10 @@ interface DateControlState {
   minDate?: moment.Moment;
   maxDate?: moment.Moment;
   schedules?: Array<{
-    startTime: Date,
+    startTime: Date;
-    endTime: Date,
+    endTime: Date;
-    content: any,
+    content: any;
-    className?: string
+    className?: string;
   }>;
 }
 
@@ -370,15 +376,25 @@ export default class DateControl extends React.PureComponent<
       });
     }
 
-    if (anyChanged(['schedules', 'data'], prevProps, props)
+    if (
-      && (typeof props.schedules === 'string' && isPureVariable(props.schedules))
+      anyChanged(['schedules', 'data'], prevProps, props) &&
+      typeof props.schedules === 'string' &&
+      isPureVariable(props.schedules)
     ) {
-      const schedulesData = resolveVariableAndFilter(props.schedules, props.data, '| raw');
+      const schedulesData = resolveVariableAndFilter(
-      const preSchedulesData = resolveVariableAndFilter(prevProps.schedules, prevProps.data, '| raw');
+        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)}

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>
     );

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>
     );

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>
     );

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>
     );

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}

src/renderers/Form/TreeSelect.tsx

@@ -572,8 +572,8 @@ export default class TreeSelectControl extends React.Component<
       translate: __
     } = this.props;
 
-    const { isOpened } = this.state;
+    const {isOpened} = this.state;
-    const { useMobileUI } = env;
+    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() && (
-          useMobileUI && isMobile() && (
+          <PopUp
-            <PopUp
+            className={cx(`${ns}TreeSelect-popup`)}
-              className={cx(`${ns}TreeSelect-popup`)}
+            isShow={isOpened}
-              isShow={isOpened}
+            onHide={this.close}
-              onHide={this.close}
+          >
-            >
+            {this.renderOuter()}
-              {this.renderOuter()}
+          </PopUp>
-            </PopUp>
+        )}
-          )
-        }
       </div>
     );
   }

src/renderers/Steps.tsx

@@ -60,9 +60,11 @@ export interface StepsSchema extends BaseSchema {
    */
   name?: string;
 
-  status?: StepStatus | {
+  status?:
-    [propName: string]: StepStatus;
+    | 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'
+  const resolveRender = (val?: string | SchemaCollection) =>
-    ? filter(val, data)
+    typeof val === 'string' ? filter(val, data) : val && render('inner', val);
-    : 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(
+  function getStepStatus(step: StepSchema, i: number): StepStatus {
-    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>
   );
 }

src/renderers/Video.tsx

@@ -149,16 +149,8 @@ export class FlvSource extends React.Component<FlvSourceProps, any> {
   unsubscribe: any;
 
   componentDidMount() {
-    let {
+    let {src, video, config, manager, isLive, autoPlay, actions, setError} =
-      src,
+      this.props;
-      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 {
+    let {autoPlay, actions, src, setError, isLive, config, video, manager} =
-      autoPlay,
+      props;
-      actions,
-      src,
-      setError,
-      isLive,
-      config,
-      video,
-      manager
-    } = props;
 
     if (src !== prevProps.src) {
       setError('');

src/store/combo.ts

@@ -11,9 +11,7 @@ export const UniqueGroup = types
   })
   .views(self => ({
     get items() {
-      return self.itemsRef.map(
+      return self.itemsRef.map(id => getStoreById(id) as any as IFormItemStore);
-        id => (getStoreById(id) as any) as IFormItemStore
-      );
     }
   }))
   .actions(self => ({