amis 1.4.2-beta.17 → 1.4.2-beta.18

package/src/components/Alert2.tsx

@@ -9,8 +9,13 @@ import {Icon} from './icons';
 
 export interface AlertProps {
   level: 'danger' | 'info' | 'success' | 'warning';
-  className: string;
+  title?: string;
+  className?: string;
   showCloseButton: boolean;
+  showIcon?: boolean;
+  icon?: string | React.ReactNode;
+  iconClassName?: string;
+  closeButtonClassName?: string;
   onClose?: () => void;
   classnames: ClassNamesFn;
   classPrefix: string;
@@ -60,21 +65,44 @@ export class Alert extends React.Component<AlertProps, AlertState> {
       className,
       level,
       children,
-      showCloseButton
+      showCloseButton,
+      title,
+      icon,
+      showIcon,
+      iconClassName,
+      closeButtonClassName
     } = this.props;
 
+    const iconNode = icon ? (
+      typeof icon === 'string' ? (
+        <Icon icon={icon} className={cx(`Alert-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`)} />
+    ) : null;
+
     return this.state.show ? (
       <div className={cx('Alert', level ? `Alert--${level}` : '', className)}>
+        {showIcon && iconNode ? (
+          <div className={cx('Alert-icon', iconClassName)}>{iconNode}</div>
+        ) : null}
+        <div className={cx('Alert-content')}>
+          {title ? <div className={cx('Alert-title')}>{title}</div> : null}
+          <div className={cx('Alert-desc')}>{children}</div>
+        </div>
         {showCloseButton ? (
           <button
-            className={cx('Alert-close')}
+            className={cx('Alert-close', closeButtonClassName)}
             onClick={this.handleClick}
             type="button"
           >
             <Icon icon="close" className="icon" />
           </button>
         ) : null}
-        {children}
       </div>
     ) : null;
   }

package/src/components/Button.tsx

@@ -82,6 +82,7 @@ export class Button extends React.Component<ButtonProps> {
       <Comp
         type={Comp === 'input' || Comp === 'button' ? type : undefined}
         {...pickEventsProps(rest)}
+        onClick={rest.onClick && disabled ? () => {} : rest.onClick}
         href={href}
         className={cx(
           overrideClassName

package/src/components/Collapse.tsx

@@ -160,7 +160,8 @@ export class Collapse extends React.Component<CollapseProps, CollapseState> {
       translate: __,
       showArrow,
       expandIcon,
-      disabled
+      disabled,
+      children
     } = this.props;
 
     const finalHeader = this.state.collapsed ? header : collapseHeader || header;
@@ -206,13 +207,7 @@ export class Collapse extends React.Component<CollapseProps, CollapseState> {
               ref={this.contentRef}
             >
               <div className={cx('Collapse-body', bodyClassName)}>
-                {React.cloneElement(body as any, {
-                  ...(body as React.ReactElement).props,
-                  className: cx(
-                    'Collapse-content',
-                    (body as React.ReactElement).props.className
-                  )
-                })}
+                <div className={cx('Collapse-content')}>{body || children}</div>
               </div>
             </div>
           );

package/src/components/ColorPicker.tsx

@@ -12,9 +12,11 @@ import Overlay from './Overlay';
 import {uncontrollable} from 'uncontrollable';
 import PopOver from './PopOver';
 import {ClassNamesFn, themeable, ThemeProps} from '../theme';
-import {autobind} from '../utils/helper';
+import {autobind, isObject} from '../utils/helper';
 import {localeable, LocaleProps} from '../locale';
 
+export type PresetColor = {color: string; title: string} | string;
+
 export interface ColorProps extends LocaleProps, ThemeProps {
   placeholder?: string;
   format: string;
@@ -27,7 +29,7 @@ export interface ColorProps extends LocaleProps, ThemeProps {
   placement?: string;
   value?: any;
   onChange: (value: any) => void;
-  presetColors?: string[];
+  presetColors?: PresetColor[];
   resetValue?: string;
   allowCustomColor?: boolean;
 }
@@ -229,11 +231,20 @@ export class ColorControl extends React.PureComponent<
           `ColorPicker`,
           {
             'is-disabled': disabled,
-            'is-focused': isFocused
+            'is-focused': isFocused,
+            'is-opened': isOpened
           },
           className
         )}
       >
+        <span onClick={this.handleClick} className={cx('ColorPicker-preview')}>
+          <i
+            ref={this.preview}
+            className={`${ns}ColorPicker-previewIcon`}
+            style={{background: this.state.inputValue || '#ccc'}}
+          />
+        </span>
+
         <input
           ref={this.input}
           type="text"
@@ -255,12 +266,8 @@ export class ColorControl extends React.PureComponent<
           </a>
         ) : null}
 
-        <span onClick={this.handleClick} className={cx('ColorPicker-preview')}>
-          <i
-            ref={this.preview}
-            className={`${ns}ColorPicker-previewIcon`}
-            style={{background: this.state.inputValue || '#ccc'}}
-          />
+        <span className={cx('ColorPicker-arrow')}>
+          <Icon icon="caret" className="icon" onClick={this.handleClick} />
         </span>
 
         {isOpened ? (
@@ -280,6 +287,7 @@ export class ColorControl extends React.PureComponent<
             >
               {allowCustomColor ? (
                 <SketchPicker
+                  styles={{}}
                   disableAlpha={!!~['rgb', 'hex'].indexOf(format as string)}
                   color={value}
                   presetColors={presetColors}
@@ -288,7 +296,21 @@ export class ColorControl extends React.PureComponent<
               ) : (
                 <GithubPicker
                   color={value}
-                  colors={presetColors}
+                  colors={
+                    Array.isArray(presetColors)
+                      ? (presetColors
+                          .filter(
+                            item => typeof item === 'string' || isObject(item)
+                          )
+                          .map(item =>
+                            typeof item === 'string'
+                              ? item
+                              : isObject(item)
+                              ? item?.color
+                              : item
+                          ) as string[])
+                      : undefined
+                  }
                   onChangeComplete={this.handleChange}
                 />
               )}

package/src/components/Overlay.tsx

@@ -295,6 +295,12 @@ export default class Overlay extends React.Component<
         <Portal container={container}>
           <RootClose onRootClose={props.onHide}>
             {(ref: any) => {
+              if (React.isValidElement(child)) {
+                return React.cloneElement(child, {
+                  ref: ref
+                });
+              }
+
               return <div ref={ref}>{child}</div>;
             }}
           </RootClose>

package/src/components/PopOver.tsx

@@ -7,7 +7,7 @@
 import React from 'react';
 import {findDOMNode} from 'react-dom';
 import {ClassNamesFn, themeable} from '../theme';
-import {camel} from '../utils/helper';
+import {camel, preventDefault} from '../utils/helper';
 
 export interface Offset {
   x: number;
@@ -53,12 +53,21 @@ export class PopOver extends React.PureComponent<PopOverPorps, PopOverState> {
   };
 
   parent: HTMLElement;
+  wrapperRef: React.RefObject<HTMLDivElement> = React.createRef();
 
   componentDidMount() {
     this.mayUpdateOffset();
     const dom = findDOMNode(this) as HTMLElement;
     this.parent = dom.parentNode as HTMLElement;
     this.parent.classList.add('has-popover');
+
+    if (this.wrapperRef && this.wrapperRef.current) {
+      // https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener#使用_passive_改善的滚屏性能
+      this.wrapperRef.current.addEventListener('touchmove', preventDefault, {
+        passive: false,
+        capture: false
+      });
+    }
   }
 
   componentDidUpdate() {
@@ -67,6 +76,10 @@ export class PopOver extends React.PureComponent<PopOverPorps, PopOverState> {
 
   componentWillUnmount() {
     this.parent && this.parent.classList.remove('has-popover');
+
+    if (this.wrapperRef && this.wrapperRef.current) {
+      this.wrapperRef.current.removeEventListener('touchmove', preventDefault);
+    }
   }
 
   mayUpdateOffset() {
@@ -122,6 +135,7 @@ export class PopOver extends React.PureComponent<PopOverPorps, PopOverState> {
 
     return (
       <div
+        ref={this.wrapperRef}
         className={cx(
           `${ns}PopOver`,
           className,

package/src/components/Toast.tsx

@@ -56,7 +56,8 @@ interface ToastComponentProps extends ThemeProps, LocaleProps {
 }
 
 interface Item extends Config {
-  body: string;
+  title?: string | React.ReactNode;
+  body: string | React.ReactNode;
   level: 'info' | 'success' | 'error' | 'warning';
   id: string;
   onDissmiss?: () => void;
@@ -164,7 +165,6 @@ export class ToastComponent extends React.Component<
       closeButton
     } = this.props;
     const items = this.state.items;
-
     const groupedItems = groupBy(items, item => item.position || position);
 
     return Object.keys(groupedItems).map(position => {
@@ -187,6 +187,7 @@ export class ToastComponent extends React.Component<
               <ToastMessage
                 classnames={cx}
                 key={item.id}
+                title={item.title}
                 body={item.body}
                 level={level}
                 timeout={toastTimeout}
@@ -206,7 +207,8 @@ export class ToastComponent extends React.Component<
 export default themeable(localeable(ToastComponent));
 
 interface ToastMessageProps {
-  body: string;
+  title?: string | React.ReactNode;
+  body: string | React.ReactNode;
   level: 'info' | 'success' | 'error' | 'warning';
   timeout: number;
   closeButton?: boolean;
@@ -291,6 +293,7 @@ export class ToastMessage extends React.Component<
       onDismiss,
       classnames: cx,
       closeButton,
+      title,
       body,
       allowHtml,
       level,
@@ -328,8 +331,25 @@ export class ToastMessage extends React.Component<
                   ) : null}
                 </div>
               )}
-              <div className={cx('Toast-body')}>
-                {allowHtml ? <Html html={body} /> : body}
+
+              <div className={cx('Toast-content')}>
+                {typeof title === 'string' ? (
+                  <span className={cx(`Toast-title`)}>{title}</span>
+                ) : React.isValidElement(title) ? (
+                  React.cloneElement(title, {
+                    className: cx(`Toast-title`, title?.props?.className ?? '')
+                  })
+                ) : null}
+
+                {typeof body === 'string' ? (
+                  <div className={cx('Toast-body')}>
+                    {allowHtml ? <Html html={body} /> : body}
+                  </div>
+                ) : React.isValidElement(body) ? (
+                  React.cloneElement(body, {
+                    className: cx(`Toast-body`, body?.props?.className ?? '')
+                  })
+                ) : null}
               </div>
 
               {closeButton ? (

package/src/components/condition-builder/Field.tsx

@@ -96,7 +96,9 @@ export class ConditionField extends React.Component<
               options={this.state.options}
               value={[value]}
               option2value={option2value}
-              onChange={([value]: any) => onChange(value)}
+              onChange={(value: any) =>
+                onChange(Array.isArray(value) ? value[0] : value)
+              }
             />
           </>
         )}

package/src/components/icons.tsx

@@ -70,6 +70,10 @@ import ExpandAltIcon from '../icons/expand-alt.svg';
 import CompressAltIcon from '../icons/compress-alt.svg';
 import TransparentIcon from '../icons/transparent.svg';
 import LoadingOutline from '../icons/loading-outline.svg';
+import AlertSuccess from '../icons/alert-success.svg';
+import AlertInfo from '../icons/alert-info.svg';
+import AlertWarning from '../icons/alert-warning.svg';
+import AlertDanger from '../icons/alert-danger.svg';
 
 // 兼容原来的用法，后续不直接试用。
 
@@ -166,6 +170,10 @@ registerIcon('expand-alt', ExpandAltIcon);
 registerIcon('compress-alt', CompressAltIcon);
 registerIcon('transparent', TransparentIcon);
 registerIcon('loading-outline', LoadingOutline);
+registerIcon('alert-success', AlertSuccess);
+registerIcon('alert-info', AlertInfo);
+registerIcon('alert-warning', AlertWarning);
+registerIcon('alert-danger', AlertDanger);
 
 export function Icon({
   icon,

package/src/icons/alert-danger.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="16px" fill="currentColor"><path d="M667.904 704.32L508.992 546.56l-157.888 158.912-45.376-45.056 157.824-158.976L304.64 343.488l45.12-45.376 158.912 157.824 157.888-158.848 45.44 45.056L553.984 501.12l158.976 157.888-45.12 45.44zM510.528 64a448 448 0 1 0 2.944 896 448 448 0 0 0-2.944-896z" fill="#E8684A"></path></svg>

package/src/icons/alert-info.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="16px" fill="currentColor"><path d="M512 64A448 448 0 1 1 512 960 448 448 0 0 1 512 64z m32 354.944h-64V768h64V418.944zM512 256a38.4 38.4 0 1 0-0.128 76.672A38.4 38.4 0 0 0 512 256z" fill="#2468F2"></path></svg>

package/src/icons/alert-success.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="16px" fill="currentColor"><path d="M449.856 706.56l-45.44-45.056 0.128-0.064L268.16 526.016l45.12-45.44 136.32 135.488 270.592-272.384 45.376 45.056-315.712 317.888zM510.528 64A448 448 0 1 0 960 510.528 448 448 0 0 0 510.528 64z" fill="#0BC286"></path></svg>

package/src/icons/alert-warning.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="16px" fill="currentColor"><path d="M512 64A448 448 0 1 1 512 960 448 448 0 0 1 512 64z m0 627.2A38.4 38.4 0 1 0 512 768a38.4 38.4 0 0 0 0-76.8zM544 256h-64v349.12h64V256z" fill="#FFB200"></path></svg>

package/src/renderers/Alert.tsx

@@ -1,7 +1,12 @@
 import {Renderer, RendererProps} from '../factory';
 import React from 'react';
 import Alert, {AlertProps} from '../components/Alert2';
-import {BaseSchema, SchemaCollection} from '../Schema';
+import {
+  BaseSchema,
+  SchemaObject,
+  SchemaCollection,
+  SchemaIcon
+} from '../Schema';
 
 /**
  * Alert 提示渲染器。
@@ -13,6 +18,11 @@ export interface AlertSchema extends BaseSchema {
    */
   type: 'alert';
 
+  /**
+   * 提示框标题
+   */
+  title?: string;
+
   /**
    * 内容区域
    */
@@ -27,6 +37,26 @@ export interface AlertSchema extends BaseSchema {
    * 是否显示关闭按钮
    */
   showCloseButton?: boolean;
+
+  /**
+   * 关闭按钮CSS类名
+   */
+  closeButtonClassName?: string;
+
+  /**
+   * 是否显示ICON
+   */
+  showIcon?: boolean;
+
+  /**
+   * 左侧图标
+   */
+  icon?: SchemaIcon;
+
+  /**
+   * 图标CSS类名
+   */
+  iconClassName?: string;
 }
 
 @Renderer({

package/src/renderers/Card.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {findDOMNode} from 'react-dom';
 import {Renderer, RendererProps} from '../factory';
-import {SchemaNode, Schema, Action} from '../types';
+import {SchemaNode, Schema, Action, PlainObject} from '../types';
 import {filter, evalExpression} from '../utils/tpl';
 import cx from 'classnames';
 import Checkbox from '../components/Checkbox';
@@ -11,7 +11,8 @@ import {
   isVisible,
   isDisabled,
   noop,
-  isClickOnInput
+  isClickOnInput,
+  hashCode
 } from '../utils/helper';
 import {resolveVariable} from '../utils/tpl-builtin';
 import QuickEdit, {SchemaQuickEdit} from './QuickEdit';
@@ -128,6 +129,7 @@ export interface CardSchema extends BaseSchema {
     avatar?: SchemaUrlPath;
 
     avatarText?: SchemaTpl;
+    avatarTextBackground?: String[];
     avatarTextClassName?: SchemaClassName;
 
     /**
@@ -485,6 +487,7 @@ export class Card extends React.Component<CardProps> {
         highlight: highlightTpl,
         avatar: avatarTpl,
         avatarText: avatarTextTpl,
+        avatarTextBackground,
         title: titleTpl,
         subTitle: subTitleTpl,
         subTitlePlaceholder,
@@ -500,6 +503,13 @@ export class Card extends React.Component<CardProps> {
       const title = filter(titleTpl, data);
       const subTitle = filter(subTitleTpl, data);
       const desc = filter(header?.description || descTpl, data);
+      const avatarTextStyle: PlainObject = {};
+      if (avatarText && avatarTextBackground && avatarTextBackground.length) {
+        avatarTextStyle['background'] =
+          avatarTextBackground[
+            Math.abs(hashCode(avatarText)) % avatarTextBackground.length
+          ];
+      }
 
       heading = (
         <div className={cx('Card-heading', header?.className)}>
@@ -524,6 +534,7 @@ export class Card extends React.Component<CardProps> {
                 'Card-avtarText',
                 header?.avatarTextClassName || avatarTextClassName
               )}
+              style={avatarTextStyle}
             >
               {avatarText}
             </span>

package/src/renderers/Form/ConditionBuilder.tsx

@@ -66,12 +66,12 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
     RemoteOptionsProps & React.ComponentProps<typeof ConditionBuilder>
   > {
     render() {
-      const {loading, config, deferLoad, ...rest} = this.props;
+      const {loading, config, deferLoad, disabled, ...rest} = this.props;
       return (
         <ConditionBuilder
           {...rest}
           fields={config || rest.fields || []}
-          disabled={loading}
+          disabled={disabled || loading}
         />
       );
     }

package/src/renderers/Form/InputColor.tsx

@@ -1,7 +1,9 @@
 import React, {Suspense} from 'react';
-import {FormItem, FormControlProps, FormBaseControl} from './Item';
 import cx from 'classnames';
 
+import {FormItem, FormControlProps, FormBaseControl} from './Item';
+import type {PresetColor} from '../../components/ColorPicker';
+
 export const ColorPicker = React.lazy(
   () => import('../../components/ColorPicker')
 );
@@ -34,7 +36,7 @@ export interface InputColorControlSchema extends FormBaseControl {
   /**
    * 预设颜色，用户可以直接从预设中选。
    */
-  presetColors?: Array<any>;
+  presetColors?: Array<PresetColor>;
 
   /**
    * 是否允许用户输入颜色。

package/src/renderers/Page.tsx

@@ -85,6 +85,21 @@ export interface PageSchema extends BaseSchema {
    */
   aside?: SchemaCollection;
 
+  /**
+   * 边栏是否允许拖动
+   */
+  asideResizor?: boolean;
+
+  /**
+   * 边栏最小宽度
+   */
+  asideMinWidth?: number;
+
+   /**
+   * 边栏最小宽度
+   */
+  asideMaxWidth?: number;
+
   /**
    * 边栏区 css 类名
    */
@@ -199,6 +214,9 @@ export default class Page extends React.Component<PageProps> {
   mounted: boolean;
   style: HTMLStyleElement;
   varStyle: HTMLStyleElement;
+  startX: number;
+  startWidth: number;
+  codeWrap: HTMLElement;
 
   static defaultProps = {
     asideClassName: '',
@@ -499,6 +517,37 @@ export default class Page extends React.Component<PageProps> {
     }
   }
 
+  @autobind
+  handleResizeMouseDown(e: React.MouseEvent) {
+    // todo 可能 ie 不正确
+    let isRightMB = e.nativeEvent.which == 3;
+
+    if (isRightMB) {
+      return;
+    }
+
+    this.codeWrap = e.currentTarget.parentElement as HTMLElement;
+    document.addEventListener('mousemove', this.handleResizeMouseMove);
+    document.addEventListener('mouseup', this.handleResizeMouseUp);
+    this.startX = e.clientX;
+    this.startWidth = this.codeWrap.offsetWidth;
+  }
+
+  @autobind
+  handleResizeMouseMove(e: MouseEvent) {
+    const {asideMinWidth = 160, asideMaxWidth = 350} = this.props;
+    const dx = e.clientX - this.startX;
+    const mx = this.startWidth + dx;
+    const width = Math.min(Math.max(mx, asideMinWidth), asideMaxWidth);
+    this.codeWrap.style.cssText += `width: ${width}px`;
+  }
+
+  @autobind
+  handleResizeMouseUp() {
+    document.removeEventListener('mousemove', this.handleResizeMouseMove);
+    document.removeEventListener('mouseup', this.handleResizeMouseUp);
+  }
+
   openFeedback(dialog: any, ctx: any) {
     return new Promise(resolve => {
       const {store} = this.props;
@@ -658,6 +707,7 @@ export default class Page extends React.Component<PageProps> {
       regions,
       style,
       data,
+      asideResizor,
       translate: __
     } = this.props;
 
@@ -684,7 +734,11 @@ export default class Page extends React.Component<PageProps> {
         style={styleVar}
       >
         {hasAside ? (
-          <div className={cx(`Page-aside`, asideClassName)}>
+          <div className={cx(
+            `Page-aside`,
+            asideResizor ? 'relative' : 'Page-aside--withWidth',
+            asideClassName
+          )}>
             {render('aside', aside || '', {
               ...subProps,
               ...(typeof aside === 'string'
@@ -694,6 +748,13 @@ export default class Page extends React.Component<PageProps> {
                   }
                 : null)
             })}
+            {asideResizor ? (
+              <div
+                onMouseDown={this.handleResizeMouseDown}
+                className={cx(`Page-asideResizor`)}
+              ></div>
+            ) : null}
+            
           </div>
         ) : null}
 

package/src/store/formItem.ts

@@ -25,8 +25,7 @@ import {
   spliceTree,
   isEmpty,
   getTreeAncestors,
-  filterTree,
-  eachTree
+  filterTree
 } from '../utils/helper';
 import {flattenTree} from '../utils/helper';
 import {IRendererStore} from '.';
@@ -691,30 +690,10 @@ export const FormItemStore = StoreNode.named('FormItemStore')
         json.data ||
         [];
 
-      const children = Array.isArray(self.options[0].children)
-        ? self.options[0].children.concat()
-        : [];
-
-      eachTree(options as any, item => {
-        if (!item.value) {
-          return;
-        }
-
-        const exits = children.find((a: any) => a.ref === item.value);
-        if (!exits) {
-          children.push({
-            ref: item.value,
-            children: [],
-            defer: true
-          });
-        }
-      });
-
       setOptions(
         [
           {
             ...self.options[0],
-            children,
             leftOptions: spliceTree(leftOptions, indexes, 1, {
               ...option,
               loading: false,