amis 1.3.5-beta.7 → 1.4.2-beta.11

package/src/Schema.ts

@@ -39,6 +39,7 @@ import {QRCodeSchema} from './renderers/QRCode';
 import {ServiceSchema} from './renderers/Service';
 import {StatusSchema} from './renderers/Status';
 import {TabsSchema} from './renderers/Tabs';
+import {PortletSchema} from './renderers/Portlet';
 import {TasksSchema} from './renderers/Tasks';
 import {VBoxSchema} from './renderers/VBox';
 import {VideoSchema} from './renderers/Video';
@@ -109,6 +110,8 @@ import {TransferControlSchema} from './renderers/Form/Transfer';
 import {TreeSelectControlSchema} from './renderers/Form/TreeSelect';
 import {UUIDControlSchema} from './renderers/Form/UUID';
 import {FormControlSchema} from './renderers/Form/Control';
+import {TransferPickerControlSchema} from './renderers/Form/TransferPicker';
+import {TabsTransferPickerControlSchema} from './renderers/Form/TabsTransferPicker';
 
 // 每加个类型，这补充一下。
 export type SchemaType =
@@ -308,9 +311,12 @@ export type SchemaType =
   | 'multi-select'
   | 'textarea'
   | 'transfer'
+  | 'transfer-picker'
+  | 'tabs-transfer-picker'
   | 'input-tree'
   | 'tree-select'
   | 'table-view'
+  | 'portlet'
 
   // 原生 input 类型
   | 'native-date'
@@ -375,6 +381,7 @@ export type SchemaObject =
   | FormSchema
   | AnchorNavSchema
   | StepsSchema
+  | PortletSchema
 
   // 表单项
   | FormControlSchema
@@ -429,6 +436,8 @@ export type SchemaObject =
   | TextControlSchema
   | TextareaControlSchema
   | TransferControlSchema
+  | TransferPickerControlSchema
+  | TabsTransferPickerControlSchema
   | TreeControlSchema
   | TreeSelectControlSchema;
 
@@ -492,6 +501,24 @@ export interface SchemaApiObject {
     [propName: string]: any;
   };
 
+  /**
+   * 默认数据映射中的key如果带点，或者带大括号，会转成对象比如：
+   *
+   * {
+   *   'a.b': '123'
+   * }
+   *
+   * 经过数据映射后变成
+   * {
+   *  a: {
+   *   b: '123
+   *  }
+   * }
+   *
+   * 如果想要关闭此功能，请设置 convertKeyToPath 为 false
+   */
+  convertKeyToPath?: boolean;
+
   /**
    * 用来做接口返回的数据映射。
    */
@@ -705,6 +732,11 @@ export interface BaseSchema {
    * 是否显示表达式
    */
   visibleOn?: SchemaExpression;
+
+  /**
+   * 是否使用移动端交互
+   */
+  useMobileUI?: boolean;
 }
 
 export interface Option {

package/src/components/Alert.tsx

@@ -113,7 +113,9 @@ export class Alert extends React.Component<AlertProps, AlertState> {
 
     this.setState(
       {
-        show: false
+        show: false,
+        prompt: false,
+        confirm: false
       },
       isConfirm ? () => this._resolve(confirmed) /*this._reject()*/ : undefined
     );

package/src/components/AnchorNav.tsx

@@ -46,6 +46,7 @@ export interface AnchorNavProps extends ThemeProps {
     props?: AnchorNavProps
   ) => JSX.Element; // 锚点区域渲染器
   onSelect?: (key: string | number) => void; // 选中回调方法
+  direction?: 'vertical' | 'horizontal'; // 导航方向
 }
 
 export interface AnchorNavState {
@@ -56,10 +57,11 @@ export interface AnchorNavState {
 export class AnchorNav extends React.Component<AnchorNavProps, AnchorNavState> {
   static defaultProps: Pick<
     AnchorNavProps,
-    'linkClassName' | 'sectionClassName'
+    'linkClassName' | 'sectionClassName' | 'direction'
   > = {
     linkClassName: '',
-    sectionClassName: ''
+    sectionClassName: '',
+    direction: 'vertical'
   };
 
   // 滚动区域DOM
@@ -214,7 +216,8 @@ export class AnchorNav extends React.Component<AnchorNavProps, AnchorNavState> {
       className,
       linkClassName,
       sectionClassName,
-      children
+      children,
+      direction
     } = this.props;
 
     if (!Array.isArray(children)) {
@@ -222,7 +225,15 @@ export class AnchorNav extends React.Component<AnchorNavProps, AnchorNavState> {
     }
 
     return (
-      <div className={cx(`AnchorNav`, className)}>
+      <div
+        className={cx(
+          'AnchorNav',
+          {
+            [`AnchorNav--${direction}`]: direction
+          },
+          className
+        )}
+      >
         <ul
           className={cx('AnchorNav-link-wrap', linkClassName)}
           role="anchorlist"

package/src/components/{AssociatedCheckboxes.tsx → AssociatedSelection.tsx}

@@ -5,27 +5,24 @@
  */
 
 import React from 'react';
-import {BaseCheckboxesProps, BaseCheckboxes} from './Checkboxes';
+import {BaseSelectionProps, BaseSelection} from './Selection';
 import {Options, Option} from './Select';
-import ListMenu from './ListMenu';
 import {autobind} from '../utils/helper';
-import ListRadios from './ListRadios';
 import {themeable} from '../theme';
 import {uncontrollable} from 'uncontrollable';
-import ListCheckboxes from './ListCheckboxes';
-import TableCheckboxes from './TableCheckboxes';
-import TreeCheckboxes from './TreeCheckboxes';
-import ChainedCheckboxes from './ChainedCheckboxes';
-import Spinner from './Spinner';
-import TreeRadios from './TreeRadios';
+import GroupedSelection from './GroupedSelection';
+import TableSelection from './TableSelection';
+import TreeSelection from './TreeSelection';
+import GroupedSelecton from './GroupedSelection';
+import ChainedSelection from './ChainedSelection';
 import {Icon} from './icons';
 import {localeable} from '../locale';
 
-export interface AssociatedCheckboxesProps extends BaseCheckboxesProps {
+export interface AssociatedSelectionProps extends BaseSelectionProps {
   leftOptions: Options;
   leftDefaultValue?: any;
-  leftMode?: 'tree' | 'list';
-  rightMode?: 'table' | 'list' | 'tree' | 'chained';
+  leftMode?: 'tree' | 'list' | 'group';
+  rightMode?: 'table' | 'list' | 'group' | 'tree' | 'chained';
   columns?: Array<any>;
   cellRender?: (
     column: {
@@ -39,15 +36,15 @@ export interface AssociatedCheckboxesProps extends BaseCheckboxesProps {
   ) => JSX.Element;
 }
 
-export interface AssociatedCheckboxesState {
+export interface AssociatedSelectionState {
   leftValue?: Option;
 }
 
-export class AssociatedCheckboxes extends BaseCheckboxes<
-  AssociatedCheckboxesProps,
-  AssociatedCheckboxesState
+export class AssociatedSelection extends BaseSelection<
+  AssociatedSelectionProps,
+  AssociatedSelectionState
 > {
-  state: AssociatedCheckboxesState = {
+  state: AssociatedSelectionState = {
     leftValue: this.props.leftDefaultValue
   };
 
@@ -56,7 +53,7 @@ export class AssociatedCheckboxes extends BaseCheckboxes<
     const {options, onDeferLoad} = this.props;
 
     if (leftValue) {
-      const selectdOption = ListRadios.resolveSelected(
+      const selectdOption = BaseSelection.resolveSelected(
         leftValue,
         options,
         (option: Option) => option.ref
@@ -78,7 +75,7 @@ export class AssociatedCheckboxes extends BaseCheckboxes<
     const {options, onDeferLoad} = this.props;
     this.setState({leftValue: value});
 
-    const selectdOption = ListRadios.resolveSelected(
+    const selectdOption = BaseSelection.resolveSelected(
       value,
       options,
       (option: Option) => option.ref
@@ -107,10 +104,11 @@ export class AssociatedCheckboxes extends BaseCheckboxes<
       value,
       disabled,
       leftMode,
-      cellRender
+      cellRender,
+      multiple
     } = this.props;
 
-    const selectdOption = ListRadios.resolveSelected(
+    const selectdOption = BaseSelection.resolveSelected(
       this.state.leftValue,
       options,
       (option: Option) => option.ref
@@ -118,36 +116,38 @@ export class AssociatedCheckboxes extends BaseCheckboxes<
     const __ = this.props.translate;
 
     return (
-      <div className={cx('AssociatedCheckboxes', className)}>
-        <div className={cx('AssociatedCheckboxes-left')}>
+      <div className={cx('AssociatedSelection', className)}>
+        <div className={cx('AssociatedSelection-left')}>
           {leftMode === 'tree' ? (
-            <TreeRadios
+            <TreeSelection
               option2value={this.leftOption2Value}
               options={leftOptions}
               value={this.state.leftValue}
               disabled={disabled}
               onChange={this.handleLeftSelect}
-              showRadio={false}
+              multiple={false}
+              clearable={false}
             />
           ) : (
-            <ListRadios
+            <GroupedSelecton
               option2value={this.leftOption2Value}
               options={leftOptions}
               value={this.state.leftValue}
               disabled={disabled}
               onChange={this.handleLeftSelect}
-              showRadio={false}
+              multiple={false}
+              clearable={false}
             />
           )}
         </div>
-        <div className={cx('AssociatedCheckboxes-right')}>
+        <div className={cx('AssociatedSelection-right')}>
           {this.state.leftValue ? (
             selectdOption ? (
               selectdOption.defer && !selectdOption.loaded ? (
-                <div className={cx('AssociatedCheckboxes-box')}>
+                <div className={cx('AssociatedSelection-box')}>
                   <div
                     className={cx(
-                      'AssociatedCheckboxes-reload',
+                      'AssociatedSelection-reload',
                       selectdOption.loading ? 'is-spin' : 'is-clickable'
                     )}
                     onClick={
@@ -166,7 +166,7 @@ export class AssociatedCheckboxes extends BaseCheckboxes<
                   )}
                 </div>
               ) : rightMode === 'table' ? (
-                <TableCheckboxes
+                <TableSelection
                   columns={columns!}
                   value={value}
                   disabled={disabled}
@@ -174,39 +174,43 @@ export class AssociatedCheckboxes extends BaseCheckboxes<
                   onChange={onChange}
                   option2value={option2value}
                   cellRender={cellRender}
+                  multiple={multiple}
                 />
               ) : rightMode === 'tree' ? (
-                <TreeCheckboxes
+                <TreeSelection
                   value={value}
                   disabled={disabled}
                   options={selectdOption.children || []}
                   onChange={onChange}
                   option2value={option2value}
+                  multiple={multiple}
                 />
               ) : rightMode === 'chained' ? (
-                <ChainedCheckboxes
+                <ChainedSelection
                   value={value}
                   disabled={disabled}
                   options={selectdOption.children || []}
                   onChange={onChange}
                   option2value={option2value}
+                  multiple={multiple}
                 />
               ) : (
-                <ListCheckboxes
+                <GroupedSelection
                   value={value}
                   disabled={disabled}
                   options={selectdOption.children || []}
                   onChange={onChange}
                   option2value={option2value}
+                  multiple={multiple}
                 />
               )
             ) : (
-              <div className={cx('AssociatedCheckboxes-box')}>
+              <div className={cx('AssociatedSelection-box')}>
                 {__('Transfer.configError')}
               </div>
             )
           ) : (
-            <div className={cx('AssociatedCheckboxes-box')}>
+            <div className={cx('AssociatedSelection-box')}>
               {__('Transfer.selectFromLeft')}
             </div>
           )}
@@ -218,7 +222,7 @@ export class AssociatedCheckboxes extends BaseCheckboxes<
 
 export default themeable(
   localeable(
-    uncontrollable(AssociatedCheckboxes, {
+    uncontrollable(AssociatedSelection, {
       value: 'onChange'
     })
   )

package/src/components/Badge.tsx

@@ -6,18 +6,18 @@ import React from 'react';
 import hoistNonReactStatic from 'hoist-non-react-statics';
 import {BaseSchema, SchemaExpression} from '../Schema';
 import {evalExpression} from '../utils/tpl';
-import {resolveVariable} from '../utils/tpl-builtin';
+import {resolveVariable, resolveVariableAndFilter} from '../utils/tpl-builtin';
 import {ClassNamesFn} from '../theme';
 
 /**
  * Badge 角标。
  * 文档：https://baidu.gitee.io/amis/docs/components/badge
  */
-export interface BadgeSchema extends BaseSchema {
+export interface BadgeSchema extends Omit<BaseSchema, 'type'> {
   /**
    * 文本内容
    */
-  text?: string;
+  text?: string | number;
 
   /**
    * 大小
@@ -27,13 +27,23 @@ export interface BadgeSchema extends BaseSchema {
   /**
    * 角标类型
    */
-  mode?: 'text' | 'dot';
+  mode?: 'text' | 'dot' | 'ribbon';
+
+  /**
+   * 角标位置，优先级大于position
+   */
+  offset?: [number | string, number | string];
 
   /**
    * 角标位置
    */
   position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
 
+  /**
+   * 封顶的数字值
+   */
+  overflowCount?: number;
+
   /**
    * 动态控制是否显示
    */
@@ -50,6 +60,11 @@ export interface BadgeSchema extends BaseSchema {
   style?: {
     [propName: string]: any;
   };
+
+  /**
+   * 提示类型
+   */
+  level?: 'info' | 'warning' | 'success' | 'danger' | SchemaExpression;
 }
 
 export interface BadgeProps {
@@ -65,6 +80,70 @@ export class Badge extends React.Component<BadgeProps, object> {
     super(props);
   }
 
+  renderBadge(
+    text: any,
+    size: number,
+    position: any,
+    offsetStyle: any,
+    sizeStyle: any,
+    animationElement: any
+  ) {
+    const {classnames: cx, badge, data} = this.props;
+    let {mode = 'dot', level = 'danger', style} = badge as BadgeSchema;
+
+    if (typeof level === 'string' && level[0] === '$') {
+      level = resolveVariableAndFilter(level, data);
+    }
+
+    switch (mode) {
+      case 'dot':
+        return (
+          <span
+            className={cx('Badge-dot', `Badge--${position}`, `Badge--${level}`)}
+            style={{...offsetStyle, ...sizeStyle, ...style}}
+          >
+            {animationElement}
+          </span>
+        );
+      case 'text':
+        return (
+          <span
+            className={cx(
+              'Badge-text',
+              `Badge--${position}`,
+              `Badge--${level}`
+            )}
+            style={{...offsetStyle, ...sizeStyle, ...style}}
+          >
+            {text}
+            {animationElement}
+          </span>
+        );
+      case 'ribbon':
+        const outSize = size * Math.sqrt(2) + 5;
+        return (
+          <div
+            className={cx('Badge-ribbon-out', `Badge-ribbon-out--${position}`)}
+            style={{width: outSize, height: outSize}}
+          >
+            <span
+              className={cx(
+                'Badge-ribbon',
+                `Badge-ribbon--${position}`,
+                `Badge--${level}`
+              )}
+              style={{...sizeStyle, ...style}}
+            >
+              {text}
+              {animationElement}
+            </span>
+          </div>
+        );
+      default:
+        return null;
+    }
+  }
+
   render() {
     const badge = this.props.badge;
     if (!badge) {
@@ -79,9 +158,12 @@ export class Badge extends React.Component<BadgeProps, object> {
     let {
       mode = 'dot',
       text,
+      level,
       size,
       style,
+      offset,
       position = 'top-right',
+      overflowCount = 99,
       visibleOn,
       className,
       animation
@@ -92,13 +174,15 @@ export class Badge extends React.Component<BadgeProps, object> {
     }
 
     if (typeof text === 'string' && text[0] === '$') {
-      text = resolveVariable(text, data);
+      text = resolveVariableAndFilter(text, data);
     }
 
     // 设置默认值
     if (typeof size === 'undefined') {
       if (mode === 'dot') {
         size = 6;
+      } else if (mode === 'ribbon') {
+        size = 12;
       } else {
         size = 16;
       }
@@ -111,6 +195,14 @@ export class Badge extends React.Component<BadgeProps, object> {
         height: size,
         lineHeight: size + 'px'
       };
+      // 当text、overflowCount都为number类型时，进行封顶值处理
+      if (typeof text === 'number' && typeof overflowCount === 'number') {
+        text = (
+          (text as number) > (overflowCount as number)
+            ? `${overflowCount}+`
+            : text
+        ) as string | number;
+      }
 
       if (!text) {
         isDisplay = false;
@@ -121,6 +213,25 @@ export class Badge extends React.Component<BadgeProps, object> {
       sizeStyle = {width: size, height: size};
     }
 
+    if (mode === 'ribbon') {
+      sizeStyle = {
+        height: size,
+        lineHeight: size + 'px',
+        fontSize: size
+      };
+    }
+
+    let offsetStyle = {};
+    // 如果设置了offset属性，offset在position为'top-right'的基础上进行translate定位
+    if (offset && offset.length) {
+      position = 'top-right';
+      const left = `calc(50% + ${parseInt(offset[0] as string, 10)}px)`;
+      const right = `calc(-50% + ${parseInt(offset[1] as string, 10)}px)`;
+      offsetStyle = {
+        transform: `translate(${left}, ${right})`
+      };
+    }
+
     let animationBackground = 'var(--danger)';
 
     if (style && style.background) {
@@ -145,24 +256,16 @@ export class Badge extends React.Component<BadgeProps, object> {
     return (
       <div className={cx('Badge', className)}>
         {children}
-        {isDisplay ? (
-          mode === 'dot' ? (
-            <span
-              className={cx('Badge-dot', `Badge--${position}`)}
-              style={{...sizeStyle, ...style}}
-            >
-              {animationElement}
-            </span>
-          ) : (
-            <span
-              className={cx('Badge-text', `Badge--${position}`)}
-              style={{...sizeStyle, ...style}}
-            >
-              {text}
-              {animationElement}
-            </span>
-          )
-        ) : null}
+        {isDisplay
+          ? this.renderBadge(
+              text,
+              size,
+              position,
+              offsetStyle,
+              sizeStyle,
+              animationElement
+            )
+          : null}
       </div>
     );
   }

package/src/components/Button.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 import TooltipWrapper, {TooltipObject, Trigger} from './TooltipWrapper';
 import {pickEventsProps} from '../utils/helper';
 import {ClassNamesFn, themeable} from '../theme';
-
+import {Icon} from './icons';
 interface ButtonProps extends React.DOMAttributes<HTMLButtonElement> {
   id?: string;
   className?: string;
@@ -16,7 +16,7 @@ interface ButtonProps extends React.DOMAttributes<HTMLButtonElement> {
   type: 'button' | 'reset' | 'submit';
   level: string; // 'link' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' | 'light' | 'dark' | 'default';
   tooltip?: string | TooltipObject;
-  placement: 'top' | 'right' | 'bottom' | 'left';
+  tooltipPlacement: 'top' | 'right' | 'bottom' | 'left';
   tooltipContainer?: any;
   tooltipTrigger: Trigger | Array<Trigger>;
   tooltipRootClose: boolean;
@@ -29,6 +29,8 @@ interface ButtonProps extends React.DOMAttributes<HTMLButtonElement> {
   classnames: ClassNamesFn;
   componentClass: React.ReactType;
   overrideClassName?: boolean;
+  loading?: boolean;
+  loadingClassName?: string;
 }
 
 export class Button extends React.Component<ButtonProps> {
@@ -37,14 +39,14 @@ export class Button extends React.Component<ButtonProps> {
     | 'componentClass'
     | 'level'
     | 'type'
-    | 'placement'
+    | 'tooltipPlacement'
     | 'tooltipTrigger'
     | 'tooltipRootClose'
   > = {
     componentClass: 'button',
     level: 'default',
     type: 'button',
-    placement: 'top',
+    tooltipPlacement: 'top',
     tooltipTrigger: ['hover', 'focus'],
     tooltipRootClose: false
   };
@@ -64,13 +66,15 @@ export class Button extends React.Component<ButtonProps> {
       active,
       iconOnly,
       href,
+      loading,
+      loadingClassName,
       overrideClassName,
       ...rest
     } = this.props;
 
     if (href) {
       Comp = 'a';
-    } else if (Comp === 'button' && disabled) {
+    } else if ((Comp === 'button' && disabled) || loading) {
       Comp = 'div';
     }
 
@@ -95,6 +99,18 @@ export class Button extends React.Component<ButtonProps> {
         )}
         disabled={disabled}
       >
+        {loading && !disabled ? (
+          <span
+            className={cx(
+              overrideClassName
+                ? ''
+                : {[`Button--loading Button--loading--${level}`]: level},
+              loadingClassName
+            )}
+          >
+            <Icon icon="loading-outline" className="icon" />
+          </span>
+        ) : null}
         {children}
       </Comp>
     );
@@ -103,7 +119,7 @@ export class Button extends React.Component<ButtonProps> {
   render() {
     const {
       tooltip,
-      placement,
+      tooltipPlacement,
       tooltipContainer,
       tooltipTrigger,
       tooltipRootClose,
@@ -114,7 +130,7 @@ export class Button extends React.Component<ButtonProps> {
 
     return (
       <TooltipWrapper
-        placement={placement}
+        placement={tooltipPlacement}
         tooltip={disabled ? disabledTip : tooltip}
         container={tooltipContainer}
         trigger={tooltipTrigger}