amis 1.4.2-beta.1 → 1.4.2-beta.11

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

@@ -10,7 +10,7 @@ import {default as ContextMenu, openContextMenus} from './ContextMenu';
 import AsideNav from './AsideNav';
 import Button from './Button';
 import Checkbox from './Checkbox';
-import Checkboxes from './Checkboxes';
+import Checkboxes from './Selection';
 import Collapse from './Collapse';
 import DatePicker from './DatePicker';
 import DateRangePicker from './DateRangePicker';
@@ -41,19 +41,19 @@ import Tree from './Tree';
 import Alert2 from './Alert2';
 import Transfer from './Transfer';
 import TabsTransfer from './TabsTransfer';
-import ListCheckboxes from './ListCheckboxes';
-import TableCheckboxes from './TableCheckboxes';
-import TreeCheckboxes from './TreeCheckboxes';
-import ChainedCheckboxes from './ChainedCheckboxes';
 import ResultBox from './ResultBox';
 import InputBox from './InputBox';
-import ListRadios from './ListRadios';
-import TreeRadios from './TreeRadios';
 import ListGroup from './ListGroup';
 import NumberInput from './NumberInput';
 import ArrayInput from './ArrayInput';
 import SearchBox from './SearchBox';
 import AnchorNav from './AnchorNav';
+import Selection from './Selection';
+import GroupedSelection from './GroupedSelection';
+import ChainedSelection from './ChainedSelection';
+import TableSelection from './TableSelection';
+import TreeSelection from './TreeSelection';
+import AssociatedSelection from './AssociatedSelection';
 
 export {
   NotFound,
@@ -99,15 +99,15 @@ export {
   Tree,
   Transfer,
   TabsTransfer,
-  ListCheckboxes,
-  TableCheckboxes,
-  TreeCheckboxes,
-  ChainedCheckboxes,
+  Selection,
+  GroupedSelection,
+  ChainedSelection,
+  TableSelection,
+  TreeSelection,
+  AssociatedSelection,
   ResultBox,
   InputBox,
-  ListRadios,
   SearchBox,
-  TreeRadios,
   ListGroup,
   NumberInput,
   ArrayInput,

package/src/envOverwrite.ts

@@ -4,7 +4,6 @@
 
 import {SchemaNode, Schema} from './types';
 import {RendererProps, RendererConfig, addSchemaFilter} from './factory';
-
 const isMobile = (window as any).matchMedia?.('(max-width: 768px)').matches
   ? true
   : false;

package/src/factory.tsx

@@ -4,7 +4,16 @@ import {getEnv, destroy} from 'mobx-state-tree';
 import {wrapFetcher} from './utils/api';
 import {normalizeLink} from './utils/normalizeLink';
 import {findIndex, promisify, qsparse, string2regExp} from './utils/helper';
-import {Api, fetcherResult, Payload, SchemaNode, Schema, Action} from './types';
+import {
+  Api,
+  fetcherResult,
+  Payload,
+  SchemaNode,
+  Schema,
+  Action,
+  EventTrack,
+  PlainObject
+} from './types';
 import {observer} from 'mobx-react';
 import Scoped from './Scoped';
 import {getTheme, ThemeInstance, ThemeProps} from './theme';
@@ -58,6 +67,10 @@ export interface RendererProps extends ThemeProps, LocaleProps {
   };
   defaultData?: object;
   className?: any;
+  /**
+   * 是否使用移动端交互
+   */
+  useMobileUI?: boolean;
   [propName: string]: any;
 }
 
@@ -320,6 +333,8 @@ const defaultOptions: RenderOptions = {
   copy(contents: string) {
     console.error('copy contents', contents);
   },
+  // 用于跟踪用户在界面中的各种操作
+  tracker(eventTrack: EventTrack, props: PlainObject) {},
   rendererResolver: resolveRenderer
 };
 let stores: {
@@ -345,7 +360,7 @@ export function render(
       ...defaultOptions,
       ...options,
       fetcher: options.fetcher
-        ? wrapFetcher(options.fetcher)
+        ? wrapFetcher(options.fetcher, options.tracker)
         : defaultOptions.fetcher,
       confirm: promisify(
         options.confirm || defaultOptions.confirm || window.confirm
@@ -416,7 +431,7 @@ export function updateEnv(options: Partial<RenderOptions>, session = 'global') {
   };
 
   if (options.fetcher) {
-    options.fetcher = wrapFetcher(options.fetcher) as any;
+    options.fetcher = wrapFetcher(options.fetcher, options.tracker) as any;
   }
 
   if (options.confirm) {

package/src/hooks/index.ts

@@ -0,0 +1,5 @@
+/**
+ * @file 常用 hooks
+ */
+export {default as useSetState} from './use-set-state';
+export {default as useUpdateEffect} from './use-update-effect';

package/src/hooks/use-set-state.ts

@@ -0,0 +1,19 @@
+import {useCallback, useState} from 'react';
+import isFunction from 'lodash/isFunction';
+
+const useSetState = <T extends object>(
+  initialState: T = {} as T
+): [T, (patch: Partial<T> | ((prevState: T) => Partial<T>)) => void] => {
+  const [state, setState] = useState<T>(initialState);
+
+  const setMergeState = useCallback(patch => {
+    setState(prevState => ({
+      ...prevState,
+      ...(isFunction(patch) ? patch(prevState) : patch)
+    }));
+  }, []);
+
+  return [state, setMergeState];
+};
+
+export default useSetState;

package/src/hooks/use-touch.ts

@@ -0,0 +1,100 @@
+import {useCallback, useRef} from 'react';
+
+const MIN_DISTANCE = 10;
+
+type Direction = '' | 'vertical' | 'horizontal';
+
+function getDirection(x: number, y: number) {
+  if (x > y && x > MIN_DISTANCE) {
+    return 'horizontal';
+  }
+  if (y > x && y > MIN_DISTANCE) {
+    return 'vertical';
+  }
+  return '';
+}
+
+const INITIAL_STATE = {
+  startX: 0,
+  startY: 0,
+  deltaX: 0,
+  deltaY: 0,
+  offsetX: 0,
+  offsetY: 0,
+  direction: '' as Direction
+};
+
+type StateType = Partial<typeof INITIAL_STATE>;
+type StateFunctionType = (value: StateType) => typeof INITIAL_STATE;
+
+const useTouch = () => {
+  const refState = useRef(INITIAL_STATE);
+  const innerState = refState.current;
+
+  const update = (value: StateType | StateFunctionType) => {
+    if (typeof value === 'function') {
+      value = value(refState.current);
+    }
+    Object.entries(value).forEach(([k, v]) => {
+      //@ts-ignore
+      refState.current[k] = v;
+    });
+  };
+
+  const isVertical = useCallback(
+    () => innerState.direction === 'vertical',
+    [innerState.direction]
+  );
+  const isHorizontal = useCallback(
+    () => innerState.direction === 'horizontal',
+    [innerState.direction]
+  );
+
+  const reset = () => {
+    update({
+      deltaX: 0,
+      deltaY: 0,
+      offsetX: 0,
+      offsetY: 0,
+      direction: ''
+    });
+  };
+
+  const start = ((event: TouchEvent) => {
+    reset();
+    update({
+      startX: event.touches[0].clientX,
+      startY: event.touches[0].clientY
+    });
+  }) as EventListener;
+
+  const move = ((event: TouchEvent) => {
+    const touch = event.touches[0];
+
+    update(value => {
+      // Fix: Safari back will set clientX to negative number
+      const newState = {...value} as typeof innerState;
+
+      newState.deltaX = touch.clientX < 0 ? 0 : touch.clientX - newState.startX;
+      newState.deltaY = touch.clientY - newState.startY;
+      newState.offsetX = Math.abs(newState.deltaX);
+      newState.offsetY = Math.abs(newState.deltaY);
+
+      if (!newState.direction) {
+        newState.direction = getDirection(newState.offsetX, newState.offsetY);
+      }
+      return newState;
+    });
+  }) as EventListener;
+
+  return {
+    ...innerState,
+    move,
+    start,
+    reset,
+    isVertical,
+    isHorizontal
+  };
+};
+
+export default useTouch;

package/src/hooks/use-update-effect.ts

@@ -0,0 +1,16 @@
+import {useEffect, useRef} from 'react';
+
+const useUpdateEffect: typeof useEffect = (effect, deps) => {
+  const isMounted = useRef(false);
+
+  useEffect(() => {
+    if (!isMounted.current) {
+      isMounted.current = true;
+    } else {
+      return effect();
+    }
+    return undefined;
+  }, deps);
+};
+
+export default useUpdateEffect;

package/src/index.tsx

@@ -111,12 +111,14 @@ import './renderers/Form/InputColor';
 import './renderers/Form/ChainedSelect';
 import './renderers/Form/NestedSelect';
 import './renderers/Form/Transfer';
+import './renderers/Form/TransferPicker';
 import './renderers/Form/InputTable';
 import './renderers/Form/Picker';
 import './renderers/Form/IconPicker';
 import './renderers/Form/Formula';
 import './renderers/Form/FieldSet';
 import './renderers/Form/TabsTransfer';
+import './renderers/Form/TabsTransferPicker';
 import './renderers/Form/Group';
 import './renderers/Form/InputGroup';
 import './renderers/Grid';
@@ -133,6 +135,7 @@ import './renderers/PaginationWrapper';
 import './renderers/Panel';
 import './renderers/Plain';
 import './renderers/Property';
+import './renderers/Portlet';
 import './renderers/Spinner';
 import './renderers/Table/index';
 import './renderers/Tabs';

package/src/locale/de-DE.ts

@@ -181,6 +181,7 @@ register('de-DE', {
   'Transfer.configError': 'Konfigurationsfehler',
   'Transfer.refreshIcon': 'Zum Aktualisieren klicken',
   'Transfer.searchKeyword': 'Stichwörter eingeben',
+  'Transfer.available': 'Verfügbar',
   'Transfer.selectd': 'Ausgewählt',
   'Transfer.selectFromLeft': 'Von links auswählen',
   'Tree.addChild': 'Untergeordnetes Element hinzufügen',
@@ -222,6 +223,7 @@ register('de-DE', {
   'Wizard.saveAndNext': 'Speichern & Weiter',
   'year-to-year': '{{from}} - {{to}}',
   'Year.placeholder': 'Wählen Sie ein Jahr',
+  'reload': 'Neu laden',
   'rotate': 'Drehen',
   'Editor.fullscreen': 'Schirmfüllend Modus',
   'Editor.exitFullscreen': 'Zurücktreten Schirmfüllend Modus',

package/src/locale/en-US.ts

@@ -182,6 +182,7 @@ register('en-US', {
   'Transfer.configError': 'Config error',
   'Transfer.refreshIcon': 'Click to refresh',
   'Transfer.searchKeyword': 'Enter keywords',
+  'Transfer.available': 'Available',
   'Transfer.selectd': 'Selected',
   'Transfer.selectFromLeft': 'Select from the left',
   'Tree.addChild': 'Add child',
@@ -223,6 +224,7 @@ register('en-US', {
   'Wizard.saveAndNext': 'Save & Next',
   'year-to-year': '{{from}} - {{to}}',
   'Year.placeholder': 'Select a Year',
+  'reload': 'Reload',
   'rotate': 'Rotate',
   'Editor.fullscreen': 'full screen',
   'Editor.exitFullscreen': 'exit fullscreen mode',

package/src/locale/zh-CN.ts

@@ -186,8 +186,9 @@ register('zh-CN', {
   'Transfer.configError': '配置错误，选项无法与左侧选项对应',
   'Transfer.refreshIcon': '点击刷新重新加载',
   'Transfer.searchKeyword': '请输入关键字',
-  'Transfer.selectd': '当前选择',
-  'Transfer.selectFromLeft': '请从左侧选择数据',
+  'Transfer.available': '可选项',
+  'Transfer.selectd': '已选项',
+  'Transfer.selectFromLeft': '请选择左侧数据',
   'Tree.addChild': '添加子节点',
   'Tree.addRoot': '添加一级节点',
   'Tree.editNode': '编辑该节点',
@@ -227,6 +228,7 @@ register('zh-CN', {
   'Wizard.saveAndNext': '保存并下一步',
   'year-to-year': '{{from}} 年 - {{to}} 年',
   'Year.placeholder': '请选择年',
+  'reload': '刷新',
   'rotate': '旋转',
   'Editor.fullscreen': '全屏',
   'Editor.exitFullscreen': '退出全屏',