amis 1.4.2-beta.1 → 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;
 
@@ -723,6 +732,11 @@ export interface BaseSchema {
    * 是否显示表达式
    */
   visibleOn?: SchemaExpression;
+
+  /**
+   * 是否使用移动端交互
+   */
+  useMobileUI?: boolean;
 }
 
 export interface Option {

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,7 +6,7 @@ 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';
 
 /**
@@ -92,7 +92,7 @@ export class Badge extends React.Component<BadgeProps, object> {
     let {mode = 'dot', level = 'danger', style} = badge as BadgeSchema;
 
     if (typeof level === 'string' && level[0] === '$') {
-      level = resolveVariable(level, data);
+      level = resolveVariableAndFilter(level, data);
     }
 
     switch (mode) {
@@ -174,7 +174,7 @@ export class Badge extends React.Component<BadgeProps, object> {
     }
 
     if (typeof text === 'string' && text[0] === '$') {
-      text = resolveVariable(text, data);
+      text = resolveVariableAndFilter(text, data);
     }
 
     // 设置默认值

package/src/components/{ChainedCheckboxes.tsx → ChainedSelection.tsx}

@@ -1,7 +1,7 @@
 /**
  * 级联多选框，支持无限极。从左侧到右侧一层层点选。
  */
-import {BaseCheckboxes, BaseCheckboxesProps} from './Checkboxes';
+import {BaseSelection, BaseSelectionProps} from './Selection';
 import {themeable} from '../theme';
 import React from 'react';
 import {uncontrollable} from 'uncontrollable';
@@ -12,20 +12,20 @@ import times from 'lodash/times';
 import Spinner from './Spinner';
 import {localeable} from '../locale';
 
-export interface ChainedCheckboxesProps extends BaseCheckboxesProps {
+export interface ChainedSelectionProps extends BaseSelectionProps {
   defaultSelectedIndex?: string;
 }
 
-export interface ChainedCheckboxesState {
+export interface ChainedSelectionState {
   selected: Array<string>;
 }
 
-export class ChainedCheckboxes extends BaseCheckboxes<
-  ChainedCheckboxesProps,
-  ChainedCheckboxesState
+export class ChainedSelection extends BaseSelection<
+  ChainedSelectionProps,
+  ChainedSelectionState
 > {
   valueArray: Array<Option>;
-  state: ChainedCheckboxesState = {
+  state: ChainedSelectionState = {
     selected: []
   };
 
@@ -54,6 +54,46 @@ export class ChainedCheckboxes extends BaseCheckboxes<
     );
   }
 
+  renderItem(option: Option, index: number, depth: number, id: string) {
+    const {
+      labelClassName,
+      disabled,
+      classnames: cx,
+      itemClassName,
+      itemRender,
+      multiple
+    } = this.props;
+    const valueArray = this.valueArray;
+
+    return (
+      <div
+        key={index}
+        className={cx(
+          'ChainedSelection-item',
+          itemClassName,
+          option.className,
+          disabled || option.disabled ? 'is-disabled' : '',
+          !!~valueArray.indexOf(option) ? 'is-active' : ''
+        )}
+        onClick={() => this.toggleOption(option)}
+      >
+        <div className={cx('ChainedSelection-itemLabel')}>
+          {itemRender(option)}
+        </div>
+
+        {multiple ? (
+          <Checkbox
+            size="sm"
+            checked={!!~valueArray.indexOf(option)}
+            disabled={disabled || option.disabled}
+            labelClassName={labelClassName}
+            description={option.description}
+          />
+        ) : null}
+      </div>
+    );
+  }
+
   renderOption(option: Option, index: number, depth: number, id: string) {
     const {
       labelClassName,
@@ -69,7 +109,7 @@ export class ChainedCheckboxes extends BaseCheckboxes<
         <div
           key={index}
           className={cx(
-            'ChainedCheckboxes-item',
+            'ChainedSelection-item',
             itemClassName,
             option.className,
             disabled || option.disabled ? 'is-disabled' : '',
@@ -77,7 +117,7 @@ export class ChainedCheckboxes extends BaseCheckboxes<
           )}
           onClick={() => this.selectOption(option, depth, id)}
         >
-          <div className={cx('ChainedCheckboxes-itemLabel')}>
+          <div className={cx('ChainedSelection-itemLabel')}>
             {itemRender(option)}
           </div>
 
@@ -86,30 +126,7 @@ export class ChainedCheckboxes extends BaseCheckboxes<
       );
     }
 
-    return (
-      <div
-        key={index}
-        className={cx(
-          'ChainedCheckboxes-item',
-          itemClassName,
-          option.className,
-          disabled || option.disabled ? 'is-disabled' : ''
-        )}
-        onClick={() => this.toggleOption(option)}
-      >
-        <div className={cx('ChainedCheckboxes-itemLabel')}>
-          {itemRender(option)}
-        </div>
-
-        <Checkbox
-          size="sm"
-          checked={!!~valueArray.indexOf(option)}
-          disabled={disabled || option.disabled}
-          labelClassName={labelClassName}
-          description={option.description}
-        />
-      </div>
-    );
+    return this.renderItem(option, index, depth, id);
   }
 
   render() {
@@ -124,7 +141,7 @@ export class ChainedCheckboxes extends BaseCheckboxes<
       translate: __
     } = this.props;
 
-    this.valueArray = BaseCheckboxes.value2array(value, options, option2value);
+    this.valueArray = BaseSelection.value2array(value, options, option2value);
     let body: Array<React.ReactNode> = [];
 
     if (Array.isArray(options) && options.length) {
@@ -156,9 +173,9 @@ export class ChainedCheckboxes extends BaseCheckboxes<
           let nextIndexes = indexes;
 
           body.push(
-            <div key={depth} className={cx('ChainedCheckboxes-col')}>
+            <div key={depth} className={cx('ChainedSelection-col')}>
               {subTitle ? (
-                <div className={cx('ChainedCheckboxes-subTitle')}>
+                <div className={cx('ChainedSelection-subTitle')}>
                   {subTitle}
                 </div>
               ) : null}
@@ -176,7 +193,7 @@ export class ChainedCheckboxes extends BaseCheckboxes<
                   return this.renderOption(option, index, depth, id);
                 })
               ) : (
-                <div className={cx('ChainedCheckboxes-placeholder')}>
+                <div className={cx('ChainedSelection-placeholder')}>
                   {__(placeholder)}
                 </div>
               )}
@@ -201,11 +218,11 @@ export class ChainedCheckboxes extends BaseCheckboxes<
     }
 
     return (
-      <div className={cx('ChainedCheckboxes', className)}>
+      <div className={cx('ChainedSelection', className)}>
         {body && body.length ? (
           body
         ) : (
-          <div className={cx('ChainedCheckboxes-placeholder')}>
+          <div className={cx('ChainedSelection-placeholder')}>
             {__(placeholder)}
           </div>
         )}
@@ -216,7 +233,7 @@ export class ChainedCheckboxes extends BaseCheckboxes<
 
 export default themeable(
   localeable(
-    uncontrollable(ChainedCheckboxes, {
+    uncontrollable(ChainedSelection, {
       value: 'onChange'
     })
   )

package/src/components/{ListCheckboxes.tsx → GroupedSelection.tsx}

@@ -1,4 +1,4 @@
-import {BaseCheckboxes} from './Checkboxes';
+import {BaseSelection} from './Selection';
 import {themeable} from '../theme';
 import React from 'react';
 import {uncontrollable} from 'uncontrollable';
@@ -6,7 +6,7 @@ import Checkbox from './Checkbox';
 import {Option} from './Select';
 import {localeable} from '../locale';
 
-export class ListCheckboxes extends BaseCheckboxes {
+export class GroupedSelection extends BaseSelection {
   valueArray: Array<Option>;
 
   renderOption(option: Option, index: number) {
@@ -15,7 +15,8 @@ export class ListCheckboxes extends BaseCheckboxes {
       disabled,
       classnames: cx,
       itemClassName,
-      itemRender
+      itemRender,
+      multiple
     } = this.props;
     const valueArray = this.valueArray;
 
@@ -23,13 +24,13 @@ export class ListCheckboxes extends BaseCheckboxes {
       return (
         <div
           key={index}
-          className={cx('ListCheckboxes-group', option.className)}
+          className={cx('GroupedSelection-group', option.className)}
         >
-          <div className={cx('ListCheckboxes-itemLabel')}>
+          <div className={cx('GroupedSelection-itemLabel')}>
             {itemRender(option)}
           </div>
 
-          <div className={cx('ListCheckboxes-items', option.className)}>
+          <div className={cx('GroupedSelection-items', option.className)}>
             {option.children.map((child, index) =>
               this.renderOption(child, index)
             )}
@@ -42,24 +43,27 @@ export class ListCheckboxes extends BaseCheckboxes {
       <div
         key={index}
         className={cx(
-          'ListCheckboxes-item',
+          'GroupedSelection-item',
           itemClassName,
           option.className,
-          disabled || option.disabled ? 'is-disabled' : ''
+          disabled || option.disabled ? 'is-disabled' : '',
+          !!~valueArray.indexOf(option) ? 'is-active' : ''
         )}
         onClick={() => this.toggleOption(option)}
       >
-        <div className={cx('ListCheckboxes-itemLabel')}>
+        <div className={cx('GroupedSelection-itemLabel')}>
           {itemRender(option)}
         </div>
 
-        <Checkbox
-          size="sm"
-          checked={!!~valueArray.indexOf(option)}
-          disabled={disabled || option.disabled}
-          labelClassName={labelClassName}
-          description={option.description}
-        />
+        {multiple ? (
+          <Checkbox
+            size="sm"
+            checked={!!~valueArray.indexOf(option)}
+            disabled={disabled || option.disabled}
+            labelClassName={labelClassName}
+            description={option.description}
+          />
+        ) : null}
       </div>
     );
   }
@@ -71,11 +75,12 @@ export class ListCheckboxes extends BaseCheckboxes {
       className,
       placeholder,
       classnames: cx,
-      option2value
+      option2value,
+      onClick
     } = this.props;
     const __ = this.props.translate;
 
-    this.valueArray = BaseCheckboxes.value2array(value, options, option2value);
+    this.valueArray = BaseSelection.value2array(value, options, option2value);
     let body: Array<React.ReactNode> = [];
 
     if (Array.isArray(options) && options.length) {
@@ -83,11 +88,11 @@ export class ListCheckboxes extends BaseCheckboxes {
     }
 
     return (
-      <div className={cx('ListCheckboxes', className)}>
+      <div className={cx('GroupedSelection', className)} onClick={onClick}>
         {body && body.length ? (
           body
         ) : (
-          <div className={cx('ListCheckboxes-placeholder')}>
+          <div className={cx('GroupedSelection-placeholder')}>
             {__(placeholder)}
           </div>
         )}
@@ -98,7 +103,7 @@ export class ListCheckboxes extends BaseCheckboxes {
 
 export default themeable(
   localeable(
-    uncontrollable(ListCheckboxes, {
+    uncontrollable(GroupedSelection, {
       value: 'onChange'
     })
   )