amis 1.8.0-beta.0 → 1.8.0-beta.3

package/src/SchemaRenderer.tsx

@@ -15,12 +15,14 @@ import {asFormItem} from './renderers/Form/Item';
 import {renderChild, renderChildren} from './Root';
 import {IScopedContext, ScopedContext} from './Scoped';
 import {Schema, SchemaNode} from './types';
-import {DebugWrapper, enableAMISDebug} from './utils/debug';
+import {DebugWrapper} from './utils/debug';
 import getExprProperties from './utils/filter-schema';
 import {anyChanged, chainEvents, autobind} from './utils/helper';
 import {SimpleMap} from './utils/SimpleMap';
 
 import type {RendererEvent} from './utils/renderer-event';
+import {observer} from 'mobx-react';
+import {isAlive} from 'mobx-state-tree';
 
 interface SchemaRendererProps extends Partial<RendererProps> {
   schema: Schema;
@@ -59,6 +61,7 @@ const defaultOmitList = [
 
 const componentCache: SimpleMap = new SimpleMap();
 
+@observer
 class BroadcastCmpt extends React.Component<BroadcastCmptProps> {
   ref: any;
   unbindEvent: (() => void) | undefined = undefined;
@@ -99,21 +102,36 @@ class BroadcastCmpt extends React.Component<BroadcastCmptProps> {
   }
 
   render() {
-    const {component: Component, ...rest} = this.props;
-
+    const {component: Component, rootStore, ...rest} = this.props;
+    const visible = isAlive(rootStore)
+      ? rootStore.visibleState[rest.$schema.id || rest.$path]
+      : true;
+    const disable = isAlive(rootStore)
+      ? rootStore.disableState[rest.$schema.id || rest.$path]
+      : false;
     const isClassComponent = Component.prototype?.isReactComponent;
 
-    // 函数组件不支持 ref https://reactjs.org/docs/refs-and-the-dom.html#refs-and-function-components
+    if (disable) {
+      (rest as any).disabled = true;
+    }
 
-    return isClassComponent ? (
-      <Component
-        ref={this.childRef}
-        {...rest}
-        dispatchEvent={this.dispatchEvent}
-      />
-    ) : (
-      <Component {...rest} dispatchEvent={this.dispatchEvent} />
-    );
+    // 函数组件不支持 ref https://reactjs.org/docs/refs-and-the-dom.html#refs-and-function-components
+    return visible !== false ? (
+      isClassComponent ? (
+        <Component
+          ref={this.childRef}
+          {...rest}
+          rootStore={rootStore}
+          dispatchEvent={this.dispatchEvent}
+        />
+      ) : (
+        <Component
+          {...rest}
+          rootStore={rootStore}
+          dispatchEvent={this.dispatchEvent}
+        />
+      )
+    ) : null;
   }
 }
 
@@ -399,7 +417,7 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
       />
     );
 
-    return enableAMISDebug ? (
+    return this.props.env.enableAMISDebug ? (
       <DebugWrapper renderer={renderer}>{component}</DebugWrapper>
     ) : (
       component

package/src/WithStore.tsx

@@ -1,5 +1,6 @@
 import hoistNonReactStatic from 'hoist-non-react-statics';
 import {observer} from 'mobx-react';
+import {isAlive} from 'mobx-state-tree';
 import React from 'react';
 import {RendererProps} from './factory';
 import {IIRendererStore, IRendererStore} from './store';
@@ -257,7 +258,8 @@ export function HocStoreFactory(renderer: {
       componentWillUnmount() {
         const rootStore = this.context as IRendererStore;
         const store = this.store;
-        rootStore.removeStore(store);
+
+        isAlive(store) && rootStore.removeStore(store);
 
         // @ts-ignore
         delete this.store;

package/src/actions/CmptAction.ts

@@ -21,6 +21,19 @@ export class CmptAction implements Action {
     renderer: ListenerContext,
     event: RendererEvent<any>
   ) {
+    // 显隐&状态控制
+    if (['show', 'hidden'].includes(action.actionType)) {
+      return renderer.props.rootStore.setVisible(
+        action.componentId,
+        action.actionType === 'show'
+      );
+    } else if (['enabled', 'disabled'].includes(action.actionType)) {
+      return renderer.props.rootStore.setDisable(
+        action.componentId,
+        action.actionType === 'disabled'
+      );
+    }
+
     /**
      * 根据唯一ID查找指定组件
      * 触发组件未指定id或未指定响应组件componentId，则使用触发组件响应
@@ -30,6 +43,11 @@ export class CmptAction implements Action {
         ? event.context.scoped?.getComponentById(action.componentId)
         : renderer;
 
+    // 刷新
+    if (action.actionType === 'reload') {
+      return component.reload?.(undefined, action.args);
+    }
+
     // 执行组件动作
     return component.doAction?.(action, action.args);
   }

package/src/components/BarCode.tsx

@@ -20,7 +20,7 @@ export class BarCode extends React.Component<BarCodeProps> {
 
   constructor(props: BarCodeProps) {
     super(props);
-    this.dom = React.createRef<SVGSVGElement>();
+    this.dom = React.createRef<HTMLImageElement>();
   }
 
   componentDidUpdate(prevProps: BarCodeProps) {
@@ -43,7 +43,7 @@ export class BarCode extends React.Component<BarCodeProps> {
   }
 
   render() {
-    return <svg ref={this.dom}></svg>;
+    return <img ref={this.dom} />;
   }
 }
 

package/src/components/DatePicker.tsx

@@ -17,6 +17,7 @@ import Calendar from './calendar/Calendar';
 import {localeable, LocaleProps, TranslateFn} from '../locale';
 import {isMobile, ucFirst} from '../utils/helper';
 import CalendarMobile from './CalendarMobile';
+import Input from './Input';
 
 const availableShortcuts: {[propName: string]: any} = {
   now: {
@@ -302,6 +303,7 @@ export interface DatePickerState {
   isOpened: boolean;
   isFocused: boolean;
   value: moment.Moment | undefined;
+  inputValue: string | undefined; // 手动输入的值
 }
 
 function normalizeValue(value: any, format?: string) {
@@ -329,11 +331,15 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
   state: DatePickerState = {
     isOpened: false,
     isFocused: false,
-    value: normalizeValue(this.props.value, this.props.format)
+    value: normalizeValue(this.props.value, this.props.format),
+    inputValue:
+      normalizeValue(this.props.value, this.props.format)?.format(
+        this.props.inputFormat
+      ) || ''
   };
   constructor(props: DateProps) {
     super(props);
-
+    this.inputRef = React.createRef();
     this.handleChange = this.handleChange.bind(this);
     this.selectRannge = this.selectRannge.bind(this);
     this.checkIsValidDate = this.checkIsValidDate.bind(this);
@@ -348,17 +354,35 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
     this.getTarget = this.getTarget.bind(this);
     this.handlePopOverClick = this.handlePopOverClick.bind(this);
     this.renderShortCuts = this.renderShortCuts.bind(this);
+    this.inputChange = this.inputChange.bind(this);
   }
 
   dom: HTMLDivElement;
 
+  inputRef: React.RefObject<HTMLInputElement>;
+
   componentDidUpdate(prevProps: DateProps) {
     const props = this.props;
 
-    if (prevProps.value !== props.value) {
-      this.setState({
+    const prevValue = prevProps.value;
+
+    if (prevValue !== props.value) {
+      const newState: any = {
         value: normalizeValue(props.value, props.format)
-      });
+      };
+      // 相对值和公式是 didUpdate 的时候才更新
+      if (
+        typeof prevValue === 'string' &&
+        (prevValue.startsWith('+') ||
+          prevValue.startsWith('-') ||
+          prevValue.startsWith('$'))
+      ) {
+        newState.inputValue =
+          normalizeValue(this.props.value, this.props.format)?.format(
+            this.props.inputFormat
+          ) || '';
+      }
+      this.setState(newState);
     }
   }
 
@@ -403,13 +427,17 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
   }
 
   open(fn?: () => void) {
-    this.props.disabled ||
-      this.setState(
-        {
-          isOpened: true
-        },
-        fn
-      );
+    if (this.props.disabled) {
+      return;
+    }
+    this.setState(
+      {
+        isOpened: true
+      },
+      fn
+    );
+    const input = this.inputRef.current;
+    input && input.focus();
   }
 
   close() {
@@ -423,6 +451,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
     e.stopPropagation();
     const onChange = this.props.onChange;
     onChange('');
+    this.setState({inputValue: ''});
   }
 
   handleChange(value: moment.Moment) {
@@ -432,6 +461,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
       minDate,
       maxDate,
       dateFormat,
+      inputFormat,
       timeFormat,
       closeOnSelect,
       utc,
@@ -453,6 +483,31 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
     if (closeOnSelect && dateFormat && !timeFormat) {
       this.close();
     }
+
+    this.setState({
+      inputValue: utc
+        ? moment.utc(value).format(inputFormat)
+        : value.format(inputFormat)
+    });
+  }
+
+  // 手动输入日期
+  inputChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const {onChange, inputFormat, format, utc} = this.props;
+    const value = e.currentTarget.value;
+    this.setState({inputValue: value});
+    if (value === '') {
+      onChange('');
+    } else {
+      const newDate = moment(value, inputFormat);
+      const dateValue = utc
+        ? moment.utc(newDate).format(format)
+        : newDate.format(format);
+      // 小于 0 的日期丢弃
+      if (!dateValue.startsWith('-')) {
+        onChange(dateValue);
+      }
+    }
   }
 
   selectRannge(item: any) {
@@ -684,7 +739,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
           `DatePicker`,
           {
             'is-disabled': disabled,
-            'is-focused': this.state.isFocused,
+            'is-focused': !disabled && this.state.isFocused,
             [`DatePicker--border${ucFirst(borderMode)}`]: borderMode,
             'is-mobile': useMobileUI && isMobile()
           },
@@ -693,15 +748,15 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
         ref={this.domRef}
         onClick={this.handleClick}
       >
-        {date ? (
-          <span className={cx(`DatePicker-value`)}>
-            {date.format(inputFormat)}
-          </span>
-        ) : (
-          <span className={cx(`DatePicker-placeholder`)}>
-            {__(placeholder)}
-          </span>
-        )}
+        <Input
+          className={cx('DatePicker-input')}
+          onChange={this.inputChange}
+          ref={this.inputRef}
+          placeholder={__(placeholder)}
+          autoComplete="off"
+          value={this.state.inputValue}
+          disabled={disabled}
+        />
 
         {clearable && !disabled && normalizeValue(value, format) ? (
           <a className={cx(`DatePicker-clear`)} onClick={this.clearValue}>

package/src/components/DateRangePicker.tsx

@@ -82,8 +82,19 @@ export const availableRanges: {[propName: string]: any} = {
     }
   },
 
-  '1dayago': {
-    label: 'DateRange.1dayago',
+  'tomorrow': {
+    label: 'Date.tomorrow',
+    startDate: (now: moment.Moment) => {
+      return now.add(1, 'days').startOf('day');
+    },
+    endDate: (now: moment.Moment) => {
+      return now.add(1, 'days').endOf('day');
+    }
+  },
+
+  // 兼容一下错误的用法
+  '1daysago': {
+    label: 'DateRange.1daysago',
     startDate: (now: moment.Moment) => {
       return now.add(-1, 'days');
     },
@@ -203,6 +214,177 @@ export const availableRanges: {[propName: string]: any} = {
   }
 };
 
+export const advancedRanges = [
+  {
+    regexp: /^(\d+)hoursago$/,
+    resolve: (__: any, _: string, hours: string) => {
+      return {
+        label: __('DateRange.hoursago', {hours}),
+        startDate: (now: moment.Moment) => {
+          return now.add(-hours, 'hours').startOf('hour');
+        },
+        endDate: (now: moment.Moment) => {
+          return now.add(-1, 'hours').endOf('hours');
+        }
+      };
+    }
+  },
+  {
+    regexp: /^(\d+)hourslater$/,
+    resolve: (__: any, _: string, hours: string) => {
+      return {
+        label: __('DateRange.hourslater', {hours}),
+        startDate: (now: moment.Moment) => {
+          return now.startOf('hour');
+        },
+        endDate: (now: moment.Moment) => {
+          return now.add(hours, 'hours').endOf('hour');
+        }
+      };
+    }
+  },
+  {
+    regexp: /^(\d+)daysago$/,
+    resolve: (__: any, _: string, days: string) => {
+      return {
+        label: __('DateRange.daysago', {days}),
+        startDate: (now: moment.Moment) => {
+          return now.add(-days, 'days').startOf('day');
+        },
+        endDate: (now: moment.Moment) => {
+          return now.add(-1, 'days').endOf('day');
+        }
+      };
+    }
+  },
+  {
+    regexp: /^(\d+)dayslater$/,
+    resolve: (__: any, _: string, days: string) => {
+      return {
+        label: __('DateRange.dayslater', {days}),
+        startDate: (now: moment.Moment) => {
+          return now.startOf('day');
+        },
+        endDate: (now: moment.Moment) => {
+          return now.add(days, 'days').endOf('day');
+        }
+      };
+    }
+  },
+  {
+    regexp: /^(\d+)weeksago$/,
+    resolve: (__: any, _: string, weeks: string) => {
+      return {
+        label: __('DateRange.weeksago', {weeks}),
+        startDate: (now: moment.Moment) => {
+          return now.startOf('week').add(-weeks, 'weeks');
+        },
+        endDate: (now: moment.Moment) => {
+          return now.startOf('week').add(-1, 'days').endOf('day');
+        }
+      };
+    }
+  },
+  {
+    regexp: /^(\d+)weekslater$/,
+    resolve: (__: any, _: string, weeks: string) => {
+      return {
+        label: __('DateRange.weekslater', {weeks}),
+        startDate: (now: moment.Moment) => {
+          return now.startOf('week');
+        },
+        endDate: (now: moment.Moment) => {
+          return now.startOf('week').add(weeks, 'weeks').endOf('day');
+        }
+      };
+    }
+  },
+  {
+    regexp: /^(\d+)monthsago$/,
+    resolve: (__: any, _: string, months: string) => {
+      return {
+        label: __('DateRange.monthsago', {months}),
+        startDate: (now: moment.Moment) => {
+          return now.startOf('months').add(-months, 'months');
+        },
+        endDate: (now: moment.Moment) => {
+          return now.startOf('month').add(-1, 'days').endOf('day');
+        }
+      };
+    }
+  },
+  {
+    regexp: /^(\d+)monthslater$/,
+    resolve: (__: any, _: string, months: string) => {
+      return {
+        label: __('DateRange.monthslater', {months}),
+        startDate: (now: moment.Moment) => {
+          return now.startOf('month');
+        },
+        endDate: (now: moment.Moment) => {
+          return now.startOf('month').add(months, 'months').endOf('day');
+        }
+      };
+    }
+  },
+  {
+    regexp: /^(\d+)quartersago$/,
+    resolve: (__: any, _: string, quarters: string) => {
+      return {
+        label: __('DateRange.quartersago', {quarters}),
+        startDate: (now: moment.Moment) => {
+          return now.startOf('quarters').add(-quarters, 'quarters');
+        },
+        endDate: (now: moment.Moment) => {
+          return now.startOf('quarter').add(-1, 'days').endOf('day');
+        }
+      };
+    }
+  },
+  {
+    regexp: /^(\d+)quarterslater$/,
+    resolve: (__: any, _: string, quarters: string) => {
+      return {
+        label: __('DateRange.quarterslater', {quarters}),
+        startDate: (now: moment.Moment) => {
+          return now.startOf('quarter');
+        },
+        endDate: (now: moment.Moment) => {
+          return now.startOf('quarter').add(quarters, 'quarters').endOf('day');
+        }
+      };
+    }
+  },
+  {
+    regexp: /^(\d+)yearsago$/,
+    resolve: (__: any, _: string, years: string) => {
+      return {
+        label: __('DateRange.yearsago', {years}),
+        startDate: (now: moment.Moment) => {
+          return now.startOf('years').add(-years, 'years');
+        },
+        endDate: (now: moment.Moment) => {
+          return now.startOf('year').add(-1, 'days').endOf('day');
+        }
+      };
+    }
+  },
+  {
+    regexp: /^(\d+)yearslater$/,
+    resolve: (__: any, _: string, years: string) => {
+      return {
+        label: __('DateRange.yearslater', {years}),
+        startDate: (now: moment.Moment) => {
+          return now.startOf('year');
+        },
+        endDate: (now: moment.Moment) => {
+          return now.startOf('year').add(years, 'years').endOf('day');
+        }
+      };
+    }
+  }
+];
+
 export class DateRangePicker extends React.Component<
   DateRangePickerProps,
   DateRangePickerState
@@ -528,8 +710,20 @@ export class DateRangePicker extends React.Component<
           }
           let range: PlainObject = {};
           if (typeof item === 'string') {
-            range = availableRanges[item];
-            range.key = item;
+            if (availableRanges[item]) {
+              range = availableRanges[item];
+              range.key = item;
+            } else {
+              // 通过正则尝试匹配
+              for (let i = 0, len = advancedRanges.length; i < len; i++) {
+                let value = advancedRanges[i];
+                const m = value.regexp.exec(item);
+                if (m) {
+                  range = value.resolve.apply(item, [__, ...m]);
+                  range.key = item;
+                }
+              }
+            }
           } else if (
             (item as ShortCutDateRange).startDate &&
             (item as ShortCutDateRange).endDate

package/src/components/Progress.tsx

@@ -74,19 +74,15 @@ export class Progress extends React.Component<ProgressProps, Object> {
     const isLineType = type === 'line';
     const prefixCls = isLineType ? 'Progress-line' : 'Progress-circle';
 
-    let viewValue: React.ReactNode = (
-      <span className="text-muted">{placeholder}</span>
-    );
-
-    if (type === 'line') {
+    let viewValue: React.ReactNode;
+    if (typeof value !== 'number') {
+      viewValue = <span className="text-muted">{placeholder}</span>;
+    } else if (type === 'line') {
+      const style: any = {};
+      strokeWidth && (style.height = strokeWidth);
       viewValue = [
-        <div
-          key="progress"
-          className={cx(prefixCls, progressClassName, {
-            [`${prefixCls}-no-label`]: !showLabel
-          })}
-        >
-          <div className={cx(`${prefixCls}-inter`)}>
+        <div key="progress" className={cx(prefixCls, progressClassName)}>
+          <div className={cx(`${prefixCls}-inter`)} style={style}>
             <div
               className={cx(
                 `${prefixCls}-bar`,

package/src/components/Radios.tsx

@@ -21,11 +21,12 @@ import Button from './Button';
 import {value2array, OptionProps, Option} from './Select';
 import chunk from 'lodash/chunk';
 import {ClassNamesFn, themeable} from '../theme';
+import {columnsSplit} from '../utils/columnsSplit';
 
 interface RadioProps extends OptionProps {
   id?: string;
   type: string;
-  optionType?: string,
+  optionType?: string;
   value?: string;
   className?: string;
   style?: React.CSSProperties;
@@ -34,7 +35,7 @@ interface RadioProps extends OptionProps {
   btnActiveLevel?: string;
   disabled?: boolean;
   onChange?: Function;
-  columnsCount: number;
+  columnsCount: number | number[];
   itemClassName?: string;
   labelField?: string;
   labelClassName?: string;
@@ -78,7 +79,7 @@ export class Radios extends React.Component<RadioProps, any> {
   }
 
   renderGroup(option: Option, index: number, valueArray: Array<Option>) {
-    const {classnames: cx, optionType, classPrefix: ns,} = this.props;
+    const {classnames: cx, optionType, classPrefix: ns} = this.props;
 
     return (
       <div key={index} className={cx('RadiosControl-group', option.className)}>
@@ -178,20 +179,8 @@ export class Radios extends React.Component<RadioProps, any> {
       );
     }
 
-    if (!inline && columnsCount > 1) {
-      let weight = 12 / (columnsCount as number);
-      let cellClassName = `Grid-col--sm${
-        weight === Math.round(weight) ? weight : ''
-      }`;
-      body = chunk(body, columnsCount).map((group, groupIndex) => (
-        <div className={cx('Grid')} key={groupIndex}>
-          {Array.from({length: columnsCount as number}).map((_, index) => (
-            <div key={index} className={cx(cellClassName)}>
-              {group[index]}
-            </div>
-          ))}
-        </div>
-      ));
+    if (!inline) {
+      body = columnsSplit(body, cx, columnsCount);
     }
 
     return (