amis 1.4.0 → 1.4.2-beta.12

package/src/components/TransferDropDown.tsx

@@ -0,0 +1,117 @@
+import {localeable} from '../locale';
+import {themeable} from '../theme';
+import {Transfer, TransferProps} from './Transfer';
+import {uncontrollable} from 'uncontrollable';
+import React from 'react';
+import ResultBox from './ResultBox';
+import {Icon} from './icons';
+import InputBox from './InputBox';
+import PopOverContainer from './PopOverContainer';
+
+export interface TransferDropDownProps extends TransferProps {
+  // 新的属性？
+  multiple?: boolean;
+}
+
+export class TransferDropDown extends Transfer<TransferDropDownProps> {
+  render() {
+    const {
+      classnames: cx,
+      value,
+      translate: __,
+      disabled,
+      className,
+      onChange,
+      onSearch,
+      multiple
+    } = this.props;
+    const {inputValue, searchResult} = this.state;
+
+    return (
+      <PopOverContainer
+        popOverClassName={cx('TransferDropDown-popover')}
+        popOverRender={({onClose}) => (
+          <div className={cx('TransferDropDown-content')}>
+            {onSearch ? (
+              <div className={cx('Transfer-search')}>
+                <InputBox
+                  value={inputValue}
+                  onChange={this.handleSearch}
+                  placeholder={__('Transfer.searchKeyword')}
+                  clearable={false}
+                  onKeyDown={this.handleSearchKeyDown}
+                >
+                  {searchResult !== null ? (
+                    <a onClick={this.handleSeachCancel}>
+                      <Icon icon="close" className="icon" />
+                    </a>
+                  ) : (
+                    <Icon icon="search" className="icon" />
+                  )}
+                </InputBox>
+              </div>
+            ) : null}
+            {searchResult !== null
+              ? this.renderSearchResult({
+                  ...this.props,
+                  value,
+                  onChange: multiple
+                    ? onChange
+                    : (value: any) => {
+                        onClose();
+                        onChange?.(value);
+                      },
+                  multiple
+                })
+              : this.renderOptions({
+                  ...this.props,
+                  value,
+                  onChange: multiple
+                    ? onChange
+                    : (value: any) => {
+                        onClose();
+                        onChange?.(value);
+                      },
+                  multiple
+                })}
+          </div>
+        )}
+      >
+        {({onClick, isOpened, ref}) => (
+          <ResultBox
+            className={cx(
+              'TransferDropDown',
+              className,
+              isOpened ? 'is-active' : ''
+            )}
+            allowInput={false}
+            result={
+              multiple
+                ? value
+                : value?.[0]
+                ? this.props.itemRender(value[0])
+                : null
+            }
+            onResultChange={onChange}
+            onResultClick={onClick}
+            placeholder={__('Select.placeholder')}
+            disabled={disabled}
+            ref={ref}
+          >
+            <span className={cx('TransferDropDown-icon')}>
+              <Icon icon="caret" className="icon" />
+            </span>
+          </ResultBox>
+        )}
+      </PopOverContainer>
+    );
+  }
+}
+
+export default themeable(
+  localeable(
+    uncontrollable(TransferDropDown, {
+      value: 'onChange'
+    })
+  )
+);

package/src/components/TransferPicker.tsx

@@ -0,0 +1,84 @@
+import {localeable} from '../locale';
+import {themeable} from '../theme';
+import Transfer, {TransferProps} from './Transfer';
+import {uncontrollable} from 'uncontrollable';
+import React from 'react';
+import ResultBox from './ResultBox';
+import {Icon} from './icons';
+import PickerContainer from './PickerContainer';
+import {autobind} from '../utils/helper';
+
+export interface TransferPickerProps extends Omit<TransferProps, 'itemRender'> {
+  // 新的属性？
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+}
+
+export class TransferPicker extends React.Component<TransferPickerProps> {
+  @autobind
+  handleClose() {
+    this.setState({
+      inputValue: '',
+      searchResult: null
+    });
+  }
+
+  @autobind
+  handleConfirm(value: any) {
+    this.props.onChange?.(value);
+    this.handleClose();
+  }
+
+  render() {
+    const {
+      classnames: cx,
+      value,
+      translate: __,
+      disabled,
+      className,
+      onChange,
+      size,
+      ...rest
+    } = this.props;
+
+    return (
+      <PickerContainer
+        title={__('Select.placeholder')}
+        popOverRender={({onClose, value, onChange}) => {
+          return <Transfer {...rest} value={value} onChange={onChange} />;
+        }}
+        value={value}
+        onConfirm={this.handleConfirm}
+        onCancel={this.handleClose}
+        size={size}
+      >
+        {({onClick, isOpened}) => (
+          <ResultBox
+            className={cx(
+              'TransferPicker',
+              className,
+              isOpened ? 'is-active' : ''
+            )}
+            allowInput={false}
+            result={value}
+            onResultChange={onChange}
+            onResultClick={onClick}
+            placeholder={__('Select.placeholder')}
+            disabled={disabled}
+          >
+            <span className={cx('TransferPicker-icon')}>
+              <Icon icon="pencil" className="icon" />
+            </span>
+          </ResultBox>
+        )}
+      </PickerContainer>
+    );
+  }
+}
+
+export default themeable(
+  localeable(
+    uncontrollable(TransferPicker, {
+      value: 'onChange'
+    })
+  )
+);

package/src/components/Tree.tsx

@@ -19,7 +19,7 @@ import {
 import {Option, Options, value2array} from './Select';
 import {ClassNamesFn, themeable, ThemeProps} from '../theme';
 import {highlight} from '../renderers/Form/Options';
-import {Icon} from './icons';
+import {Icon, getIcon} from './icons';
 import Checkbox from './Checkbox';
 import {LocaleProps, localeable} from '../locale';
 import Spinner from './Spinner';
@@ -710,6 +710,8 @@ export class TreeSelector extends React.Component<
       const isLeaf =
         (!item.children || !item.children.length) && !item.placeholder;
 
+      const iconValue = item[iconField] || (childrenItems ? 'folder' : 'file');
+
       return (
         <li
           key={key}
@@ -754,7 +756,6 @@ export class TreeSelector extends React.Component<
                 <i
                   className={cx(
                     `Tree-itemIcon ${
-                      item[iconField] ||
                       (childrenItems ? 'Tree-folderIcon' : 'Tree-leafIcon')
                     }`
                   )}
@@ -765,12 +766,9 @@ export class TreeSelector extends React.Component<
                       : this.handleSelect(item))
                   }
                 >
-                  {item[iconField] ? null : (
-                    <Icon
-                      icon={childrenItems ? 'folder' : 'file'}
-                      className="icon"
-                    />
-                  )}
+                  {getIcon(iconValue)
+                    ? <Icon icon={iconValue} className="icon"/>
+                    : <i className={iconValue}></i>}
                 </i>
               ) : null}
 

package/src/components/{TreeCheckboxes.tsx → TreeSelection.tsx}

@@ -1,4 +1,4 @@
-import {BaseCheckboxes, BaseCheckboxesProps} from './Checkboxes';
+import {BaseSelection, BaseSelectionProps} from './Selection';
 import {themeable} from '../theme';
 import React from 'react';
 import {uncontrollable} from 'uncontrollable';
@@ -9,25 +9,25 @@ import Spinner from './Spinner';
 import {localeable} from '../locale';
 import {Icon} from './icons';
 
-export interface TreeCheckboxesProps extends BaseCheckboxesProps {
+export interface TreeSelectionProps extends BaseSelectionProps {
   expand?: 'all' | 'first' | 'root' | 'none';
 }
 
-export interface TreeCheckboxesState {
+export interface TreeSelectionState {
   expanded: Array<string>;
 }
 
-export class TreeCheckboxes extends BaseCheckboxes<
-  TreeCheckboxesProps,
-  TreeCheckboxesState
+export class TreeSelection extends BaseSelection<
+  TreeSelectionProps,
+  TreeSelectionState
 > {
   valueArray: Array<Option>;
-  state: TreeCheckboxesState = {
+  state: TreeSelectionState = {
     expanded: []
   };
 
   static defaultProps = {
-    ...BaseCheckboxes.defaultProps,
+    ...BaseSelection.defaultProps,
     expand: 'first' as 'first'
   };
 
@@ -35,7 +35,7 @@ export class TreeCheckboxes extends BaseCheckboxes<
     this.syncExpanded();
   }
 
-  componentDidUpdate(prevProps: TreeCheckboxesProps) {
+  componentDidUpdate(prevProps: TreeSelectionProps) {
     const props = this.props;
 
     if (
@@ -82,7 +82,9 @@ export class TreeCheckboxes extends BaseCheckboxes<
       option2value,
       options,
       onDeferLoad,
-      disabled
+      disabled,
+      multiple,
+      clearable
     } = this.props;
 
     if (disabled || option.disabled) {
@@ -92,12 +94,13 @@ export class TreeCheckboxes extends BaseCheckboxes<
       return;
     }
 
-    let valueArray = BaseCheckboxes.value2array(value, options, option2value);
+    let valueArray = BaseSelection.value2array(value, options, option2value);
 
     if (
       option.value === void 0 &&
       Array.isArray(option.children) &&
-      option.children.length
+      option.children.length &&
+      multiple
     ) {
       const someCheckedFn = (child: Option) =>
         (Array.isArray(child.children) && child.children.length
@@ -124,10 +127,12 @@ export class TreeCheckboxes extends BaseCheckboxes<
     } else {
       let idx = valueArray.indexOf(option);
 
-      if (~idx) {
+      if (~idx && (multiple || clearable)) {
         valueArray.splice(idx, 1);
-      } else {
+      } else if (multiple) {
         valueArray.push(option);
+      } else {
+        valueArray = [option];
       }
     }
 
@@ -135,7 +140,7 @@ export class TreeCheckboxes extends BaseCheckboxes<
       ? valueArray.map(item => option2value(item))
       : valueArray;
 
-    onChange && onChange(newValue);
+    onChange && onChange(multiple ? newValue : newValue[0]);
   }
 
   toggleCollapsed(option: Option, index: string) {
@@ -163,7 +168,8 @@ export class TreeCheckboxes extends BaseCheckboxes<
       disabled,
       classnames: cx,
       itemClassName,
-      itemRender
+      itemRender,
+      multiple
     } = this.props;
     const id = indexes.join('-');
     const valueArray = this.valueArray;
@@ -204,7 +210,7 @@ export class TreeCheckboxes extends BaseCheckboxes<
       <div
         key={index}
         className={cx(
-          'TreeCheckboxes-item',
+          'TreeSelection-item',
           disabled || option.disabled || (option.defer && option.loading)
             ? 'is-disabled'
             : '',
@@ -213,9 +219,10 @@ export class TreeCheckboxes extends BaseCheckboxes<
       >
         <div
           className={cx(
-            'TreeCheckboxes-itemInner',
+            'TreeSelection-itemInner',
             itemClassName,
-            option.className
+            option.className,
+            checked ? 'is-active' : ''
           )}
           onClick={() => this.toggleOption(option)}
         >
@@ -231,13 +238,13 @@ export class TreeCheckboxes extends BaseCheckboxes<
             </a>
           ) : null}
 
-          <div className={cx('TreeCheckboxes-itemLabel')}>
+          <div className={cx('TreeSelection-itemLabel')}>
             {itemRender(option)}
           </div>
 
           {option.defer && option.loading ? <Spinner show size="sm" /> : null}
 
-          {!option.defer || option.loaded ? (
+          {multiple && (!option.defer || option.loaded) ? (
             <Checkbox
               size="sm"
               checked={checked}
@@ -249,7 +256,7 @@ export class TreeCheckboxes extends BaseCheckboxes<
           ) : null}
         </div>
         {hasChildren ? (
-          <div className={cx('TreeCheckboxes-sublist')}>
+          <div className={cx('TreeSelection-sublist')}>
             {option.children!.map((option, key) =>
               this.renderItem(option, key, indexes.concat(key))
             )}
@@ -270,7 +277,7 @@ export class TreeCheckboxes 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) {
@@ -278,11 +285,11 @@ export class TreeCheckboxes extends BaseCheckboxes<
     }
 
     return (
-      <div className={cx('TreeCheckboxes', className)}>
+      <div className={cx('TreeSelection', className)}>
         {body && body.length ? (
           body
         ) : (
-          <div className={cx('TreeCheckboxes-placeholder')}>
+          <div className={cx('TreeSelection-placeholder')}>
             {__(placeholder)}
           </div>
         )}
@@ -293,7 +300,7 @@ export class TreeCheckboxes extends BaseCheckboxes<
 
 export default themeable(
   localeable(
-    uncontrollable(TreeCheckboxes, {
+    uncontrollable(TreeSelection, {
       value: 'onChange'
     })
   )

package/src/components/WithRemoteConfig.tsx

@@ -12,7 +12,12 @@ import {withStore} from './WithStore';
 import {EnvContext, RendererEnv} from '../env';
 
 import {flow, Instance, isAlive, types} from 'mobx-state-tree';
-import {buildApi, isEffectiveApi, normalizeApi} from '../utils/api';
+import {
+  buildApi,
+  isEffectiveApi,
+  normalizeApi,
+  normalizeApiResponseData
+} from '../utils/api';
 import {
   isPureVariable,
   resolveVariableAndFilter,
@@ -46,7 +51,7 @@ export const Store = types
         }
 
         if (ret.ok) {
-          const data = ret.data || {};
+          const data = normalizeApiResponseData(ret.data);
           let options = config.adaptor
             ? config.adaptor(data, component.props)
             : data;

package/src/components/calendar/DaysView.tsx

@@ -100,8 +100,8 @@ export class CustomDaysView extends DaysView {
   confirm = () => {
     let date = (this.props.selectedDate || this.props.viewDate).clone();
 
-    // 如果 minDate 是可用的，且比当前日期早，则用 minDate
-    if (this.props.minDate?.isValid() && this.props.minDate?.isBefore(date)) {
+    // 如果 minDate 是可用的，且比当前日期晚，则用 minDate
+    if (this.props.minDate?.isValid() && this.props.minDate?.isAfter(date)) {
       date = this.props.minDate.clone();
     }
 

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PopOverContainer from '../PopOverContainer';
-import ListRadios from '../ListRadios';
+import ListSelection from '../GroupedSelection';
 import ResultBox from '../ResultBox';
 import {ClassNamesFn, ThemeProps, themeable} from '../../theme';
 import {Icon} from '../icons';
@@ -90,13 +90,13 @@ export class ConditionField extends React.Component<
             {searchable ? (
               <SearchBox mini={false} onSearch={this.onSearch} />
             ) : null}
-            <ListRadios
+            <ListSelection
+              multiple={false}
               onClick={e => this.onPopClose(e, onClose)}
-              showRadio={false}
               options={this.state.options}
-              value={value}
+              value={[value]}
               option2value={option2value}
-              onChange={onChange}
+              onChange={([value]: any) => onChange(value)}
             />
           </>
         )}

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

@@ -2,7 +2,7 @@ import React from 'react';
 import {Func, ExpressionFunc, Field, Funcs} from './types';
 import {ThemeProps, themeable} from '../../theme';
 import PopOverContainer from '../PopOverContainer';
-import ListRadios from '../ListRadios';
+import GroupedSelection from '../GroupedSelection';
 import {autobind, findTree, noop} from '../../utils/helper';
 import ResultBox from '../ResultBox';
 import {Icon} from '../icons';
@@ -77,13 +77,13 @@ export class ConditionFunc extends React.Component<ConditionFuncProps> {
       <div className={cx('CBFunc')}>
         <PopOverContainer
           popOverRender={({onClose}) => (
-            <ListRadios
+            <GroupedSelection
               onClick={onClose}
-              showRadio={false}
               options={funcs!}
               value={(func as Func)?.type}
               option2value={option2value}
               onChange={this.handleFuncChange}
+              multiple={false}
             />
           )}
         >

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PopOverContainer from '../PopOverContainer';
 import {Icon} from '../icons';
-import ListRadios from '../ListRadios';
+import GroupedSelection from '../GroupedSelection';
 import {ClassNamesFn, themeable, ThemeProps} from '../../theme';
 
 export interface InputSwitchProps extends ThemeProps {
@@ -23,13 +23,13 @@ export function InputSwitch({
   return (
     <PopOverContainer
       popOverRender={({onClose}) => (
-        <ListRadios
+        <GroupedSelection
           onClick={onClose}
           option2value={option2value}
           onChange={onChange}
           options={options}
           value={value}
-          showRadio={false}
+          multiple={false}
           disabled={disabled}
         />
       )}

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

@@ -18,7 +18,7 @@ import {autobind, findTree, noop} from '../../utils/helper';
 import Expression from './Expression';
 import {Config, OperationMap} from './config';
 import PopOverContainer from '../PopOverContainer';
-import ListRadios from '../ListRadios';
+import GroupedSelection from '../GroupedSelection';
 import ResultBox from '../ResultBox';
 import {localeable, LocaleProps} from '../../locale';
 
@@ -100,15 +100,8 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
   }
 
   renderLeft() {
-    const {
-      value,
-      fields,
-      funcs,
-      config,
-      disabled,
-      fieldClassName,
-      searchable
-    } = this.props;
+    const {value, fields, funcs, config, disabled, fieldClassName, searchable} =
+      this.props;
     return (
       <Expression
         config={config}
@@ -158,7 +151,7 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
       return (
         <PopOverContainer
           popOverRender={({onClose}) => (
-            <ListRadios
+            <GroupedSelection
               onClick={onClose}
               option2value={option2value}
               onChange={this.handleOperatorChange}
@@ -167,7 +160,7 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
                 value: operator
               }))}
               value={value.op}
-              showRadio={false}
+              multiple={false}
             />
           )}
         >

package/src/components/icons.tsx

@@ -6,6 +6,7 @@
 import React from 'react';
 
 import CloseIcon from '../icons/close.svg';
+import StatusCloseIcon from '../icons/status-close.svg';
 import UnDoIcon from '../icons/undo.svg';
 import ReDoIcon from '../icons/redo.svg';
 import EnterIcon from '../icons/enter.svg';
@@ -24,6 +25,10 @@ import RemoveIcon from '../icons/remove.svg';
 import RetryIcon from '../icons/retry.svg';
 import UploadIcon from '../icons/upload.svg';
 import FileIcon from '../icons/file.svg';
+import StatusSuccessIcon from '../icons/status-success.svg';
+import StatusFailIcon from '../icons/status-fail.svg';
+import StatusInfoIcon from '../icons/status-info.svg';
+import StatusWarningIcon from '../icons/status-warning.svg';
 import SuccessIcon from '../icons/success.svg';
 import FailIcon from '../icons/fail.svg';
 import SearchIcon from '../icons/search.svg';
@@ -36,6 +41,8 @@ import ReloadIcon from '../icons/reload.svg';
 import ExchangeIcon from '../icons/exchange.svg';
 import ColmunsIcon from '../icons/columns.svg';
 import CalendarIcon from '../icons/calendar.svg';
+import ClockIcon from '../icons/clock.svg';
+
 import CopyIcon from '../icons/copy.svg';
 import FilterIcon from '../icons/filter.svg';
 import CaretIcon from '../icons/caret.svg';
@@ -61,6 +68,7 @@ import EllipsisVIcon from '../icons/ellipsis-v.svg';
 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';
 
 // 兼容原来的用法，后续不直接试用。
 
@@ -91,6 +99,7 @@ export function registerIcon(key: string, component: React.ReactType<{}>) {
 }
 
 registerIcon('close', CloseIcon);
+registerIcon('status-close', StatusCloseIcon);
 registerIcon('undo', UnDoIcon);
 registerIcon('redo', ReDoIcon);
 registerIcon('enter', EnterIcon);
@@ -112,6 +121,10 @@ registerIcon('remove', RemoveIcon);
 registerIcon('retry', RetryIcon);
 registerIcon('upload', UploadIcon);
 registerIcon('file', FileIcon);
+registerIcon('status-success', StatusSuccessIcon);
+registerIcon('status-fail', StatusFailIcon);
+registerIcon('status-info', StatusInfoIcon);
+registerIcon('status-warning', StatusWarningIcon);
 registerIcon('success', SuccessIcon);
 registerIcon('fail', FailIcon);
 registerIcon('warning', WarningIcon);
@@ -127,6 +140,7 @@ registerIcon('reload', ReloadIcon);
 registerIcon('exchange', ExchangeIcon);
 registerIcon('columns', ColmunsIcon);
 registerIcon('calendar', CalendarIcon);
+registerIcon('clock', ClockIcon);
 registerIcon('copy', CopyIcon);
 registerIcon('filter', FilterIcon);
 registerIcon('column-filter', ColumnFilterIcon);
@@ -149,6 +163,7 @@ registerIcon('ellipsis-v', EllipsisVIcon);
 registerIcon('expand-alt', ExpandAltIcon);
 registerIcon('compress-alt', CompressAltIcon);
 registerIcon('transparent', TransparentIcon);
+registerIcon('loading-outline', LoadingOutline);
 
 export function Icon({
   icon,