amis 1.8.0-beta.0 → 1.8.0-beta.1

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,10 +354,13 @@ 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;
 
@@ -403,13 +412,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 +436,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 +446,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
       minDate,
       maxDate,
       dateFormat,
+      inputFormat,
       timeFormat,
       closeOnSelect,
       utc,
@@ -453,6 +468,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) {
@@ -693,15 +733,13 @@ 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
+          onChange={this.inputChange}
+          ref={this.inputRef}
+          placeholder={__(placeholder)}
+          autoComplete="off"
+          value={this.state.inputValue}
+        />
 
         {clearable && !disabled && normalizeValue(value, format) ? (
           <a className={cx(`DatePicker-clear`)} onClick={this.clearValue}>

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/calendar/Calendar.tsx

@@ -161,18 +161,19 @@ class BaseDatePicker extends React.Component<
       updatedState = this.getStateFromProps(props);
     }
 
-    if (updatedState.open === undefined) {
-      if (typeof props.open !== 'undefined') {
-        updatedState.open = props.open;
-      } else if (
-        prevProps.closeOnSelect &&
-        this.state.currentView !== viewModes.TIME
-      ) {
-        updatedState.open = false;
-      } else {
-        updatedState.open = this.state.open;
-      }
-    }
+    // open 是外部控制了
+    // if (updatedState.open === undefined) {
+    //   if (typeof props.open !== 'undefined') {
+    //     updatedState.open = props.open;
+    //   } else if (
+    //     prevProps.closeOnSelect &&
+    //     this.state.currentView !== viewModes.TIME
+    //   ) {
+    //     updatedState.open = false;
+    //   } else {
+    //     updatedState.open = this.state.open;
+    //   }
+    // }
 
     if (props.viewMode !== prevProps.viewMode) {
       updatedState.currentView = props.viewMode;
@@ -236,6 +237,10 @@ class BaseDatePicker extends React.Component<
       updatedState.viewDate = moment(props.viewDate);
     }
 
+    if (Object.keys(updatedState).length) {
+      this.setState(updatedState);
+    }
+
     this.checkTZ(props);
   }
 

package/src/components/formula/Editor.tsx

@@ -10,7 +10,7 @@ import {FormulaPlugin, editorFactory} from './plugin';
 import FuncList from './FuncList';
 import {VariableList} from './VariableList';
 import CodeMirrorEditor from '../CodeMirror';
-import {autobind} from '../../utils/helper';
+import {autobind, eachTree} from '../../utils/helper';
 import {themeable, ThemeProps} from '../../theme';
 import {localeable, LocaleProps} from '../../locale';
 
@@ -133,8 +133,39 @@ export class FormulaEditor extends React.Component<
     variables: Array<VariableItem>,
     functions: Array<FuncGroup>
   ) {
-    // todo 高亮原始文本
-    return value;
+    if (!Array.isArray(variables) || !variables.length || !value) {
+      return;
+    }
+
+    const varMap: {
+      [propname: string]: string;
+    } = {};
+
+    eachTree(
+      variables,
+      item => item.value && (varMap[item.value] = item.label)
+    );
+    const vars = Object.keys(varMap).sort((a, b) => b.length - a.length);
+    let content = value || '';
+
+    // 标记方法调用
+    content = content.replace(/([A-Z]+)\s*\(/g, (_, func, pos) => {
+      return _?.replace(func, `<span class="c-func">${func}</span>`);
+    });
+
+    vars.forEach(v => {
+      let from = 0;
+      let idx = -1;
+      while (~(idx = content.indexOf(v, from))) {
+        content = content.replace(
+          v,
+          `<span class="c-field">${varMap[v]}</span>`
+        );
+        from = idx + v.length;
+      }
+    });
+
+    return {html: content};
   }
 
   componentWillUnmount() {

package/src/components/formula/Picker.tsx

@@ -69,6 +69,11 @@ export interface FormulaPickerProps extends FormulaEditorProps {
    */
   disabled?: boolean;
 
+  /**
+   * 是否允许输入，否需要点击fx在弹窗中输入
+   */
+  allowInput?: boolean;
+
   /**
    * 占位文本
    */
@@ -96,12 +101,28 @@ export class FormulaPicker extends React.Component<FormulaPickerProps> {
     this.props.onChange?.(value);
   }
 
+  @autobind
+  renderFormulaValue(item: any) {
+    const {allowInput, classnames: cx} = this.props;
+    const html = {__html: item.html};
+    if (allowInput) {
+      return '';
+    }
+    return (
+      <div
+        className={cx('FormulaPicker-ResultBox')}
+        dangerouslySetInnerHTML={html}
+      ></div>
+    );
+  }
+
   render() {
     let {
       classnames: cx,
       value,
       translate: __,
       disabled,
+      allowInput,
       className,
       onChange,
       size,
@@ -186,9 +207,15 @@ export class FormulaPicker extends React.Component<FormulaPickerProps> {
                     'FormulaPicker-input',
                     isOpened ? 'is-active' : ''
                   )}
-                  allowInput
+                  allowInput={allowInput}
                   clearable={clearable}
                   value={value}
+                  result={FormulaEditor.highlightValue(
+                    value,
+                    variables,
+                    functions
+                  )}
+                  itemRender={this.renderFormulaValue}
                   onResultChange={noop}
                   onChange={this.handleConfirm}
                   disabled={disabled}

package/src/factory.tsx

@@ -518,13 +518,13 @@ export function render(
   // 进行文本替换
   if (env.replaceText && isObject(env.replaceText)) {
     const replaceKeys = Object.keys(env.replaceText);
-    replaceKeys.sort().reverse(); // 避免用户将短的放前面
+    replaceKeys.sort((a, b) => b.length - a.length); // 避免用户将短的放前面
     const replaceTextIgnoreKeys = new Set(env.replaceTextIgnoreKeys || []);
     JSONTraverse(schema, (value: any, key: string, object: any) => {
       if (typeof value === 'string' && !replaceTextIgnoreKeys.has(key)) {
         for (const replaceKey of replaceKeys) {
           if (~value.indexOf(replaceKey)) {
-            object[key] = value.replaceAll(
+            value = object[key] = value.replaceAll(
               replaceKey,
               env.replaceText[replaceKey]
             );

package/src/renderers/Dialog.tsx

@@ -90,6 +90,11 @@ export interface DialogSchema extends BaseSchema {
    * 是否显示错误信息
    */
   showErrorMsg?: boolean;
+
+  /**
+   * 是否显示 spinner
+   */
+  showLoading?: boolean;
 }
 
 export type DialogSchemaBase = Omit<DialogSchema, 'type'>;
@@ -424,13 +429,22 @@ export default class Dialog extends React.Component<DialogProps> {
       return null;
     }
 
-    const {store, render, classnames: cx, showErrorMsg} = this.props;
+    const {
+      store,
+      render,
+      classnames: cx,
+      showErrorMsg,
+      showLoading
+    } = this.props;
 
     return (
       <div className={cx('Modal-footer')}>
-        {store.loading || store.error ? (
+        {(showLoading !== false && store.loading) ||
+        (showErrorMsg !== false && store.error) ? (
           <div className={cx('Dialog-info')} key="info">
-            <Spinner size="sm" key="info" show={store.loading} />
+            {showLoading !== false ? (
+              <Spinner size="sm" key="info" show={store.loading} />
+            ) : null}
             {store.error && showErrorMsg !== false ? (
               <span className={cx('Dialog-error')}>{store.msg}</span>
             ) : null}

package/src/renderers/DropDownButton.tsx

@@ -147,12 +147,14 @@ export default class DropDownButton extends React.Component<
   };
 
   target: any;
+  timer: ReturnType<typeof setTimeout>;
   constructor(props: DropDownButtonProps) {
     super(props);
 
     this.open = this.open.bind(this);
     this.close = this.close.bind(this);
     this.toogle = this.toogle.bind(this);
+    this.keepOpen = this.keepOpen.bind(this);
     this.domRef = this.domRef.bind(this);
   }
 
@@ -183,9 +185,17 @@ export default class DropDownButton extends React.Component<
   }
 
   close() {
-    this.setState({
-      isOpened: false
-    });
+    this.timer = setTimeout(() => {
+      this.setState({
+        isOpened: false
+      });
+    }, 200);
+  }
+
+  keepOpen() {
+    if (this.timer) {
+      clearTimeout(this.timer);
+    }
   }
 
   renderButton(
@@ -260,6 +270,7 @@ export default class DropDownButton extends React.Component<
                 menuClassName
               )}
               onClick={closeOnClick ? this.close : noop}
+              onMouseEnter={this.keepOpen}
               ref={ref}
             >
               {children

package/src/renderers/Form/InputFormula.tsx

@@ -55,6 +55,11 @@ export interface InputFormulaControlSchema extends FormBaseControl {
    */
   inputMode?: 'button' | 'input-button';
 
+  /**
+   * 外层input是否允许输入，否需要点击fx在弹窗中输入
+   */
+  allowInput?: boolean;
+
   /**
    * 按钮图标
    */
@@ -139,6 +144,7 @@ export class InputFormulaRenderer extends React.Component<InputFormulaProps> {
       className,
       classPrefix: ns,
       classnames: cx,
+      allowInput = true,
       borderMode,
       placeholder,
       inputMode,
@@ -156,6 +162,7 @@ export class InputFormulaRenderer extends React.Component<InputFormulaProps> {
         className={className}
         value={value}
         disabled={disabled}
+        allowInput={allowInput}
         onChange={onChange}
         evalMode={evalMode}
         variables={variables}

package/src/renderers/Form/InputTable.tsx

@@ -1082,7 +1082,9 @@ export default class FormTable extends React.Component<TableProps, TableState> {
       prefixRow,
       formInited,
       perPage,
-      classnames: cx
+      classnames: cx,
+      rowClassName,
+      rowClassNameExpr
     } = this.props;
 
     if (formInited === false) {
@@ -1131,7 +1133,9 @@ export default class FormTable extends React.Component<TableProps, TableState> {
             expandConfig,
             canAccessSuperData,
             reUseRow: false,
-            offset
+            offset,
+            rowClassName,
+            rowClassNameExpr
           }
         )}
         {(addable && showAddBtn !== false) || showPager ? (

package/src/renderers/Page.tsx

@@ -853,7 +853,7 @@ export class PageRenderer extends Page {
     throwErrors: boolean = false,
     delegate?: IScopedContext
   ) {
-    const scoped = this.context as IScopedContext;
+    const scoped = delegate || (this.context as IScopedContext);
 
     if (action.actionType === 'reload') {
       action.target && scoped.reload(action.target, ctx);
@@ -877,7 +877,6 @@ export class PageRenderer extends Page {
         action.reload &&
         ~['url', 'link', 'jump'].indexOf(action.actionType!)
       ) {
-        const scoped = delegate || (this.context as IScopedContext);
         scoped.reload(action.reload, ctx);
       }
     }

package/src/renderers/Progress.tsx

@@ -59,7 +59,7 @@ export interface ProgressSchema extends BaseSchema {
   animate?: boolean;
 
   /**
-   * 圆形进度条线的宽度
+   * 进度条线的宽度
    */
   strokeWidth?: number;
   /**
@@ -95,7 +95,7 @@ export class ProgressField extends React.Component<ProgressProps, object> {
   @autobind
   format(value: number) {
     const {valueTpl, render, data} = this.props;
-    return render(`progress-value`, valueTpl + '', {
+    return render(`progress-value`, valueTpl || '${value}%', {
       data: createObject(data, {value})
     });
   }

package/src/renderers/Table/TableRow.tsx

@@ -195,7 +195,7 @@ export class TableRow extends React.Component<TableRowProps> {
             'is-checked': item.checked,
             'is-modified': item.modified,
             'is-moved': item.moved,
-            'is-expanded': item.expanded,
+            'is-expanded': item.expanded && item.expandable,
             'is-expandable': item.expandable,
             [`Table-tr--hasItemAction`]: itemAction,
             [`Table-tr--odd`]: itemIndex % 2 === 0,

package/src/store/table.ts

@@ -152,7 +152,7 @@ export const Row = types
     },
 
     get expanded(): boolean {
-      return !this.collapsed && self.children.length > 0;
+      return !this.collapsed;
     },
 
     get moved() {
@@ -904,7 +904,7 @@ export const TableStore = iRendererStore
         return {
           // id: String(item && (item as any)[self.primaryField] || `${pindex}-${depth}-${key}`),
           id: String(id),
-          parentId,
+          parentId: String(parentId),
           key: String(`${pindex}-${depth}-${index}`),
           path: `${path}${index}`,
           depth: depth,