amis 1.7.0 → 1.8.0-beta.2

package/src/Schema.ts

@@ -52,6 +52,7 @@ import {DialogSchema, DialogSchemaBase} from './renderers/Dialog';
 import {DrawerSchema} from './renderers/Drawer';
 import {SearchBoxSchema} from './renderers/SearchBox';
 import {SparkLineSchema} from './renderers/SparkLine';
+import {TooltipWrapperSchema} from './renderers/TooltipWrapper';
 import {PaginationWrapperSchema} from './renderers/PaginationWrapper';
 import {PaginationSchema} from './renderers/Pagination';
 import {AnchorNavSchema} from './renderers/AnchorNav';
@@ -331,7 +332,8 @@ export type SchemaType =
   | 'native-date'
   | 'native-time'
   | 'native-number'
-  | 'code';
+  | 'code'
+  | 'tooltip-wrapper';
 
 export type SchemaObject =
   | PageSchema
@@ -389,6 +391,7 @@ export type SchemaObject =
   | VideoSchema
   | WizardSchema
   | WrapperSchema
+  | TooltipWrapperSchema
   | FormSchema
   | AnchorNavSchema
   | StepsSchema
@@ -882,4 +885,4 @@ export interface ToastSchemaBase extends BaseSchema {
    * 持续时间
    */
   timeout: number;
-};
+}

package/src/SchemaRenderer.tsx

@@ -21,6 +21,8 @@ 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;
   }
 }
 

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/Alert2.tsx

@@ -5,7 +5,8 @@
 
 import React from 'react';
 import {ClassNamesFn, themeable} from '../theme';
-import {Icon} from './icons';
+import {generateIcon} from '../utils/icon';
+import {Icon, getIcon} from './icons';
 
 export interface AlertProps {
   level: 'danger' | 'info' | 'success' | 'warning';
@@ -73,16 +74,21 @@ export class Alert extends React.Component<AlertProps, AlertState> {
       closeButtonClassName
     } = this.props;
 
+    // 优先使用内置svg，其次使用icon库
     const iconNode = icon ? (
       typeof icon === 'string' ? (
-        <Icon icon={icon} className={cx(`Alert-icon icon`)} />
+        getIcon(icon) ? (
+          <Icon icon={icon} className={cx(`icon`)} />
+        ) : (
+          generateIcon(cx, icon, 'icon')
+        )
       ) : React.isValidElement(icon) ? (
         React.cloneElement(icon, {
           className: cx(`Alert-icon`, icon.props?.className)
         })
       ) : null
     ) : showIcon ? (
-      <Icon icon={`alert-${level}`} className={cx(`Alert-icon icon`)} />
+      <Icon icon={`alert-${level}`} className={cx(`icon`)} />
     ) : null;
 
     return this.state.show ? (

package/src/components/CityArea.tsx

@@ -145,8 +145,11 @@ const CityArea = memo<AreaProps>(props => {
     } else {
       onChange({
         code,
+        provinceCode: province,
         province: db[province],
+        cityCode: city,
         city: db[city],
+        districtCode: district,
         district: db[district],
         street
       });

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/Tabs.tsx

@@ -16,6 +16,7 @@ import {Icon} from './icons';
 import debounce from 'lodash/debounce';
 import {findDOMNode} from 'react-dom';
 import TooltipWrapper, {TooltipObject, Trigger} from './TooltipWrapper';
+import {resizeSensor} from '../utils/resize-sensor';
 
 import Sortable from 'sortablejs';
 
@@ -26,7 +27,7 @@ const transitionStyles: {
   [ENTERED]: 'in'
 };
 
-export type TabsMode = '' | 'line' | 'card' | 'radio' | 'vertical' | 'chrome' | 'simple' | 'strong';
+export type TabsMode = '' | 'line' | 'card' | 'radio' | 'vertical' | 'chrome' | 'simple' | 'strong' | 'tiled' |'sidebar';
 
 export interface TabProps extends ThemeProps {
   title?: string | React.ReactNode; // 标题
@@ -114,6 +115,8 @@ export interface TabsProps extends ThemeProps {
   scrollable?: boolean; // 属性废弃，为了兼容暂且保留
   editable?: boolean;
   onEdit?: (index: number, text: string) => void;
+  sidePosition?: 'left' | 'right';
+  addBtnText?: string;
 }
 
 export interface IDragInfo {
@@ -122,21 +125,25 @@ export interface IDragInfo {
 
 export class Tabs extends React.Component<TabsProps, any> {
   static defaultProps: Pick<TabsProps,
-    'mode' | 'contentClassName' | 'showTip' | 'showTipClassName'
+    'mode' | 'contentClassName' | 'showTip' | 'showTipClassName' | 'sidePosition' | 'addBtnText'
   > = {
     mode: '',
     contentClassName: '',
     showTip: false,
-    showTipClassName: ''
+    showTipClassName: '',
+    sidePosition: 'left',
+    addBtnText: '增加'
   };
 
   static Tab = Tab;
-  navMain = React.createRef<HTMLDivElement>();
+  navMain = React.createRef<HTMLUListElement>(); // HTMLDivElement
   scroll: boolean = false;
   sortable?: Sortable;
   dragTip?: HTMLElement;
   id: string = guid();
   draging: boolean = false;
+  toDispose: Array<() => void> = [];
+  resizeDom = React.createRef<HTMLDivElement>();
 
   checkArrowStatus = debounce(
     () => {
@@ -200,6 +207,12 @@ export class Tabs extends React.Component<TabsProps, any> {
       });
       this.checkArrowStatus();
     }
+
+    this.resizeDom?.current && this.toDispose.push(
+      resizeSensor(this.resizeDom.current as HTMLElement, () =>
+        this.computedWidth()
+      )
+    );
   }
 
   componentDidUpdate() {
@@ -212,6 +225,8 @@ export class Tabs extends React.Component<TabsProps, any> {
 
   componentWillUnmount() {
     this.checkArrowStatus.cancel();
+    this.toDispose.forEach(fn => fn());
+    this.toDispose = [];
   }
 
   /**
@@ -220,7 +235,7 @@ export class Tabs extends React.Component<TabsProps, any> {
   computedWidth() {
     const {mode: dMode, tabsMode} = this.props;
     const mode = tabsMode || dMode;
-    if (mode === 'vertical') {
+    if (['vertical', 'sidebar'].includes(mode)) {
       return;
     }
   
@@ -246,7 +261,7 @@ export class Tabs extends React.Component<TabsProps, any> {
     const {mode: dMode, tabsMode} = this.props;
     const {isOverflow} = this.state;
     const mode = tabsMode || dMode;
-    if (mode === 'vertical' || !isOverflow) {
+    if (['vertical', 'sidebar'].includes(mode) || !isOverflow) {
       return;
     }
     const {activeKey, children} = this.props;
@@ -254,7 +269,7 @@ export class Tabs extends React.Component<TabsProps, any> {
     const currentIndex = (children as any[])?.findIndex(
       (item: any) => item.props.eventKey === currentKey
     );
-    const li = this.navMain.current?.children[0]?.children || [];
+    const li = this.navMain.current?.children || [];
     const currentLi = li[currentIndex] as HTMLElement;
     const liOffsetLeft = currentLi?.offsetLeft;
     const liClientWidth = currentLi?.clientWidth;
@@ -569,7 +584,7 @@ export class Tabs extends React.Component<TabsProps, any> {
   renderArrow(type: 'left' | 'right') {
     const {mode: dMode, tabsMode} = this.props;
     const mode = tabsMode || dMode;
-    if (mode === 'vertical') {
+    if (['vertical', 'sidebar'].includes(mode)) {
       return;
     }
     const {classnames: cx} = this.props;
@@ -607,7 +622,9 @@ export class Tabs extends React.Component<TabsProps, any> {
       toolbar,
       linksClassName,
       addable,
-      draggable
+      draggable,
+      sidePosition,
+      addBtnText
     } = this.props;
 
     const {isOverflow} = this.state;
@@ -617,19 +634,35 @@ export class Tabs extends React.Component<TabsProps, any> {
 
     const mode = tabsMode || dMode;
 
+    const toolButtons = (
+      <>
+        {addable && (
+          <div className={cx('Tabs-addable')} onClick={() => this.handleAddBtn()}>
+            <Icon icon="plus" className={cx('Tabs-addable-icon')} />
+            {addBtnText}
+          </div>
+        )}
+        {toolbar}
+      </>
+    );
+
     return (
       <div
         className={cx(
           `Tabs`,
           {
-            [`Tabs--${mode}`]: mode
+            [`Tabs--${mode}`]: mode,
+            [`sidebar--${sidePosition}`]: mode === 'sidebar'
           },
           className
         )}
       >
         {
-        !['vertical', 'chrome'].includes(mode) ? (
-          <div className={cx('Tabs-linksContainer-wrapper')}>
+        !['vertical', 'sidebar', 'chrome'].includes(mode) ? (
+          <div
+            className={cx('Tabs-linksContainer-wrapper', toolbar && 'Tabs-linksContainer-wrapper--toolbar')}
+            ref={this.resizeDom}
+          >
             <div
               className={cx(
                 'Tabs-linksContainer',
@@ -637,22 +670,19 @@ export class Tabs extends React.Component<TabsProps, any> {
               )}
             >
               {this.renderArrow('left')}
-              <div className={cx('Tabs-linksContainer-main')} ref={this.navMain}>
-                <ul className={cx('Tabs-links', linksClassName)} role="tablist">
+              <div className={cx('Tabs-linksContainer-main')}>
+                <ul className={cx('Tabs-links', linksClassName)} role="tablist" ref={this.navMain}>
                   {children.map((tab, index) => this.renderNav(tab, index))}
                   {additionBtns}
-                  {toolbar}
+                  {
+                    !isOverflow && toolButtons
+                  }
                 </ul>
               </div>
               {this.renderArrow('right')}
             </div>
             {
-              addable && (
-                <div className={cx('Tabs-addable')} onClick={() => this.handleAddBtn()}>
-                  <Icon icon="plus" className={cx('Tabs-addable-icon')} />
-                  增加
-                </div>
-              )
+              isOverflow && toolButtons
             }
           </div>
         ) : (

package/src/components/TooltipWrapper.tsx

@@ -33,6 +33,7 @@ export interface TooltipWrapperProps {
   delay: number;
   theme?: string;
   tooltipClassName?: string;
+  style?: React.CSSProperties;
 }
 
 interface TooltipWrapperState {
@@ -167,7 +168,8 @@ export class TooltipWrapper extends React.Component<
       container,
       trigger,
       rootClose,
-      tooltipClassName
+      tooltipClassName,
+      style
     } = this.props;
 
     const child = React.Children.only(children);
@@ -210,6 +212,7 @@ export class TooltipWrapper extends React.Component<
       >
         <Tooltip
           title={typeof tooltip !== 'string' ? tooltip.title : undefined}
+          style={style}
           className={tooltipClassName}
           onMouseEnter={~triggers.indexOf('hover') && this.handleMouseOver}
           onMouseLeave={~triggers.indexOf('hover') && this.handleMouseOut}

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