amis 1.9.1-beta.1 → 1.9.1-beta.3

package/src/components/UserTabSelect.tsx

@@ -0,0 +1,261 @@
+/**
+ * @file 移动端人员、部门、角色、岗位选择
+ * @author fex
+ */
+
+import React from 'react';
+import {themeable, ThemeProps} from '../theme';
+import {LocaleProps, localeable} from '../locale';
+import {ResultBox} from '../components';
+import UserSelect from './UserSelect';
+import {Option} from '../renderers/Form/Options';
+import Sortable from 'sortablejs';
+import PopUp from '../components/PopUp';
+import {Icon} from '../components/icons';
+import {autobind, findTree} from '../utils/helper';
+import {default as Tabs, Tab} from './Tabs';
+import {UserSelectProps} from './UserSelect';
+import {PlainObject} from '../types';
+import {resolveVariableAndFilter} from '../utils/tpl-builtin';
+
+export interface UserSelectTop extends UserSelectProps {
+  title: string;
+  deferApi?: string;
+  searchApi?: string;
+  searchable?: boolean;
+  searchParam?: PlainObject;
+  searchTerm?: string;
+}
+export interface UserTabSelectProps extends ThemeProps, LocaleProps {
+  tabOptions?: Array<UserSelectTop>;
+  multiple?: boolean;
+  placeholder?: string;
+  valueField?: string;
+  labelField?: string;
+  selection?: Array<Option>;
+  data?: PlainObject;
+  onChange: (value: Array<Option> | Option) => void;
+  onSearch?: (
+    term: string,
+    cancelExecutor: Function,
+    paramObj?: PlainObject
+  ) => Promise<any[]> | undefined;
+  deferLoad: (
+    data?: Object,
+    isRef?: boolean,
+    param?: PlainObject
+  ) => Promise<Option[]>;
+}
+
+export interface UserTabSelectState {
+  isOpened: boolean;
+  isSearch: boolean;
+  isSelectOpened: boolean;
+  inputValue: string;
+  breadList: Array<any>;
+  options: Array<Option>;
+  tempSelection: Array<Option>;
+  selection: Array<Option>;
+  searchList: Array<Option>;
+  searchLoading: boolean;
+  isEdit: boolean;
+  activeKey: number;
+}
+
+export class UserTabSelect extends React.Component<
+  UserTabSelectProps,
+  UserTabSelectState
+> {
+  cancelSearch?: Function;
+  sortable?: Sortable;
+  unmounted = false;
+
+  constructor(props: UserTabSelectProps) {
+    super(props);
+    this.state = {
+      isOpened: false,
+      isSelectOpened: false,
+      inputValue: '',
+      options: [],
+      breadList: [],
+      searchList: [],
+      tempSelection: [],
+      selection: props.selection ? props.selection : [],
+      isSearch: false,
+      searchLoading: false,
+      isEdit: false,
+      activeKey: 0
+    };
+  }
+
+  static defaultProps = {};
+
+  componentDidMount() {}
+
+  componentDidUpdate(prevProps: UserTabSelectProps) {}
+
+  componentWillUnmount() {
+    this.unmounted = true;
+  }
+
+  @autobind
+  onClose() {
+    this.setState({
+      isOpened: false,
+      isSearch: false,
+      inputValue: '',
+      searchList: [],
+      searchLoading: false,
+      activeKey: 0
+    });
+  }
+
+  @autobind
+  onOpen() {
+    const {selection} = this.state;
+    this.setState({
+      isOpened: true,
+      tempSelection: selection.slice()
+    });
+  }
+
+  @autobind
+  handleBack() {
+    this.onClose();
+    const {onChange} = this.props;
+    onChange(this.state.selection);
+  }
+
+  @autobind
+  handleSelectChange(option: Option | Array<Option>, isReplace?: boolean) {
+    const {multiple, valueField = 'value'} = this.props;
+    let selection = this.state.selection.slice();
+    let selectionVals = selection.map((option: Option) => option[valueField]);
+    if (isReplace && Array.isArray(option)) {
+      selection = option.slice();
+    } else if (!Array.isArray(option)) {
+      let pos = selectionVals.indexOf(option[valueField]);
+      if (pos !== -1) {
+        selection.splice(selection.indexOf(option), 1);
+      } else {
+        if (multiple) {
+          selection.push(option);
+        } else {
+          selection = [option];
+        }
+      }
+    }
+
+    this.setState({
+      selection: selection
+    });
+    return false;
+  }
+
+  @autobind
+  handleTabChange(key: number) {
+    this.setState({
+      activeKey: key
+    });
+  }
+
+  render() {
+    let {
+      classnames: cx,
+      translate: __,
+      onChange,
+      placeholder = '请选择',
+      tabOptions,
+      onSearch,
+      deferLoad,
+      data
+    } = this.props;
+    const {activeKey, isOpened, selection} = this.state;
+
+    return (
+      <div className={cx('UserTabSelect')}>
+        <ResultBox
+          className={cx('UserTabSelect-input', isOpened ? 'is-active' : '')}
+          allowInput={false}
+          result={selection}
+          onResultChange={value => this.handleSelectChange(value, true)}
+          onResultClick={this.onOpen}
+          placeholder={placeholder}
+          useMobileUI
+        />
+        <PopUp
+          isShow={isOpened}
+          className={cx(`UserTabSelect-popup`)}
+          onHide={this.onClose}
+          showClose={false}
+        >
+          <div className={cx('UserTabSelect-wrap')}>
+            <div className={cx('UserSelect-navbar')}>
+              <span className="left-arrow-box" onClick={this.handleBack}>
+                <Icon icon="left-arrow" className="icon" />
+              </span>
+              <div className={cx('UserSelect-navbar-title')}>人员选择</div>
+            </div>
+            <Tabs
+              mode="tiled"
+              className={cx('UserTabSelect-tabs')}
+              onSelect={this.handleTabChange}
+              activeKey={activeKey}
+            >
+              {tabOptions?.map((item: UserSelectTop, index: number) => {
+                return (
+                  <Tab
+                    {...this.props}
+                    eventKey={index}
+                    key={index}
+                    title={item.title}
+                    className="TabsTransfer-tab"
+                  >
+                    <UserSelect
+                      selection={selection}
+                      showResultBox={false}
+                      {...item}
+                      options={
+                        typeof item.options === 'string' && data
+                          ? resolveVariableAndFilter(
+                              item.options,
+                              data,
+                              '| raw'
+                            )
+                          : item.options
+                      }
+                      multiple
+                      controlled
+                      onChange={this.handleSelectChange}
+                      onSearch={(input: string, cancelExecutor: Function) =>
+                        item.searchable && onSearch
+                          ? onSearch(input, cancelExecutor, {
+                              searchApi: item.searchApi,
+                              searchParam: item.searchParam,
+                              searchTerm: item.searchTerm
+                            })
+                          : undefined
+                      }
+                      deferLoad={(
+                        data?: PlainObject,
+                        isRef?: boolean,
+                        param?: PlainObject
+                      ) =>
+                        deferLoad(data, isRef, {
+                          deferApi: item.deferApi,
+                          ...(param || {})
+                        })
+                      }
+                    />
+                  </Tab>
+                );
+              })}
+            </Tabs>
+          </div>
+        </PopUp>
+      </div>
+    );
+  }
+}
+
+export default themeable(localeable(UserTabSelect));

package/src/components/WithRemoteConfig.tsx

@@ -5,7 +5,7 @@
 import React from 'react';
 import hoistNonReactStatic from 'hoist-non-react-statics';
 import debounce from 'lodash/debounce';
-import {Api, Payload} from '../types';
+import {Api, ApiObject, Payload} from '../types';
 import {SchemaApi, SchemaTokenizeableString} from '../Schema';
 import {withStore} from './WithStore';
 
@@ -123,6 +123,8 @@ export interface RemoteOptionsProps<T = any> {
 }
 
 export interface WithRemoteConfigSettings {
+  sourceField?: string;
+
   /**
    * 从接口返回数据适配到配置
    */
@@ -163,6 +165,13 @@ export interface WithRemoteConfigSettings {
     config: any,
     props: any
   ) => any;
+
+  injectedPropsFilter?: (props: {
+    config: any;
+    loading?: boolean;
+    deferLoad: (term: string) => any;
+    updateConfig: (config: any) => void;
+  }) => any;
 }
 
 export function withRemoteConfig<P = any>(
@@ -214,7 +223,8 @@ export function withRemoteConfig<P = any>(
 
           componentDidMount() {
             const env: RendererEnv = this.props.env || this.context;
-            const {store, source, data} = this.props;
+            const {store, data} = this.props;
+            const source = (this.props as any)[config.sourceField || 'source'];
 
             store.setData(data);
 
@@ -233,7 +243,7 @@ export function withRemoteConfig<P = any>(
               );
             } else if (env && isEffectiveApi(source, data)) {
               this.loadConfig();
-              source.autoRefresh !== false &&
+              (source as ApiObject).autoRefresh !== false &&
                 this.toDispose.push(
                   reaction(
                     () => {
@@ -268,7 +278,8 @@ export function withRemoteConfig<P = any>(
 
           async loadConfig(ctx = this.props.data) {
             const env: RendererEnv = this.props.env || this.context;
-            const {store, source} = this.props;
+            const {store} = this.props;
+            const source = (this.props as any)[config.sourceField || 'source'];
 
             if (env && isEffectiveApi(source, ctx)) {
               await store.load(env, source, ctx, config);
@@ -303,7 +314,8 @@ export function withRemoteConfig<P = any>(
           }
 
           syncConfig() {
-            const {store, source, data} = this.props;
+            const {store, data} = this.props;
+            const source = (this.props as any)[config.sourceField || 'source'];
 
             if (isPureVariable(source)) {
               store.setConfig(
@@ -315,7 +327,8 @@ export function withRemoteConfig<P = any>(
           }
 
           async deferLoadConfig(item: any) {
-            const {store, source, data, deferApi} = this.props;
+            const {store, data, deferApi} = this.props;
+            const source = (this.props as any)[config.sourceField || 'source'];
             const env: RendererEnv = this.props.env || this.context;
             const indexes = findTreeIndex(store.config, a => a === item)!;
 
@@ -375,7 +388,9 @@ export function withRemoteConfig<P = any>(
                 {...(env && isEffectiveApi(autoComplete) && this.loadOptions
                   ? {loadOptions: this.loadOptions}
                   : {})}
-                {...injectedProps}
+                {...(config.injectedPropsFilter
+                  ? config.injectedPropsFilter(injectedProps)
+                  : injectedProps)}
               />
             );
           }

package/src/components/calendar/DaysView.tsx

@@ -4,6 +4,7 @@ import moment from 'moment';
 import React from 'react';
 import Downshift from 'downshift';
 import findIndex from 'lodash/findIndex';
+import merge from 'lodash/merge';
 import {LocaleProps, localeable} from '../../locale';
 import {ClassNamesFn} from '../../theme';
 import {isMobile, convertArrayValueToMoment} from '../../utils/helper';
@@ -11,6 +12,8 @@ import Picker from '../Picker';
 import {PickerOption} from '../PickerColumn';
 import {DateType} from './Calendar';
 
+import type {TimeScale} from './TimeView';
+
 interface CustomDaysViewProps extends LocaleProps {
   classPrefix?: string;
   prevIcon?: string;
@@ -66,9 +69,33 @@ interface CustomDaysViewProps extends LocaleProps {
   hideHeader?: boolean;
   getColumns: (types: DateType[], dateBoundary: void) => any;
   getDateBoundary: (currentDate: moment.Moment) => any;
+  timeConstraints?: any;
 }
 
 export class CustomDaysView extends React.Component<CustomDaysViewProps> {
+  timeConstraints = {
+    hours: {
+      min: 0,
+      max: 23,
+      step: 1
+    },
+    minutes: {
+      min: 0,
+      max: 59,
+      step: 1
+    },
+    seconds: {
+      min: 0,
+      max: 59,
+      step: 1
+    },
+    milliseconds: {
+      min: 0,
+      max: 999,
+      step: 1
+    }
+  };
+
   state: {
     columns: {options: PickerOption[]}[];
     types: DateType[];
@@ -184,6 +211,10 @@ export class CustomDaysView extends React.Component<CustomDaysViewProps> {
       pickerValue: currentDate.toArray(),
       uniqueTag: 0
     };
+
+    if (this.props.timeConstraints) {
+      this.timeConstraints = merge(this.timeConstraints, props.timeConstraints);
+    }
   }
 
   componentWillMount() {
@@ -283,11 +314,15 @@ export class CustomDaysView extends React.Component<CustomDaysViewProps> {
     i: number,
     label?: string
   ) => {
-    let elf: any = document.getElementById(
+    const elf: any = document.getElementById(
       `${this.state.uniqueTag}-${i}-input`
     );
+    const {min, step} = this.timeConstraints[type];
+    const offset = (value - min) / step;
+    const height = 28; /** 单个选项的高度 */
+
     elf?.parentNode?.scrollTo({
-      top: value * 28,
+      top: offset * height,
       behavior: label === 'init' ? 'auto' : 'smooth'
     });
   };
@@ -460,15 +495,17 @@ export class CustomDaysView extends React.Component<CustomDaysViewProps> {
     return <td {...props}>{currentDate.date()}</td>;
   };
 
-  computedTimeOptions(total: number) {
-    const times: {label: string; value: string}[] = [];
+  /** 时间选择器数据源 */
+  computedTimeOptions(timeScale: TimeScale) {
+    const {min, max, step} = this.timeConstraints?.[timeScale];
 
-    for (let t = 0; t < total; t++) {
-      const label = t < 10 ? `0${t}` : `${t}`;
-      times.push({label, value: label});
-    }
+    return Array.from({length: max - min + 1}, (item, index) => {
+      const value = (index + min)
+        .toString()
+        .padStart(timeScale !== 'milliseconds' ? 2 : 3, '0');
 
-    return times;
+      return index % step === 0 ? {label: value, value} : undefined;
+    }).filter((item): item is {label: string; value: string} => !!item);
   }
 
   renderTimes = () => {
@@ -482,6 +519,7 @@ export class CustomDaysView extends React.Component<CustomDaysViewProps> {
 
     const date = selectedDate || (isEndDate ? viewDate.endOf('day') : viewDate);
     const inputs: Array<React.ReactNode> = [];
+    const timeConstraints = this.timeConstraints;
 
     inputs.push(this.showTime());
 
@@ -494,11 +532,9 @@ export class CustomDaysView extends React.Component<CustomDaysViewProps> {
         ? 'seconds'
         : '';
       if (type) {
-        const min = 0;
-        const max = type === 'hours' ? 23 : 59;
-        const hours = this.computedTimeOptions(24);
-        const times = this.computedTimeOptions(60);
-        const options = type === 'hours' ? hours : times;
+        const min = timeConstraints[type].min;
+        const max = timeConstraints[type].max;
+        const options = this.computedTimeOptions(type);
         const formatMap = {
           hours: 'HH',
           minutes: 'mm',
@@ -557,8 +593,9 @@ export class CustomDaysView extends React.Component<CustomDaysViewProps> {
                         <div
                           key={option.value}
                           className={cx('CalendarInput-sugsItem', {
-                            'is-highlight':
-                              option.value === date.format(formatMap[type])
+                            'is-highlight': selectedDate
+                              ? option.value === date.format(formatMap[type])
+                              : option.value === options?.[0]?.value
                           })}
                           onClick={() => {
                             this.setTime(type, parseInt(option.value, 10));

package/src/components/calendar/TimeView.tsx

@@ -55,7 +55,7 @@ interface CustomTimeViewState {
   [propName: string]: any;
 }
 
-type TimeScale = 'hours' | 'minutes' | 'seconds' | 'milliseconds';
+export type TimeScale = 'hours' | 'minutes' | 'seconds' | 'milliseconds';
 
 export class CustomTimeView extends React.Component<
   CustomTimeViewProps & LocaleProps,
@@ -547,11 +547,15 @@ export class CustomTimeView extends React.Component<
   };
 
   scrollToTop = (type: TimeScale, value: number, i: number, label?: string) => {
-    let elf: any = document.getElementById(
+    const elf: any = document.getElementById(
       `${this.state.uniqueTag}-${i}-input`
     );
+    const {min, step} = this.timeConstraints[type];
+    const offset = (value - min) / step;
+    const height = 28; /** 单个选项的高度 */
+
     elf?.parentNode?.scrollTo({
-      top: value * 28,
+      top: offset * height,
       behavior: label === 'init' ? 'auto' : 'smooth'
     });
   };
@@ -664,8 +668,9 @@ export class CustomTimeView extends React.Component<
                         <div
                           key={option.value}
                           className={cx('CalendarInput-sugsItem', {
-                            'is-highlight':
-                              option.value === date.format(formatMap[type])
+                            'is-highlight': selectedDate
+                              ? option.value === date.format(formatMap[type])
+                              : option.value === options?.[0]?.value
                           })}
                           onClick={() => {
                             this.setTime(type, parseInt(option.value, 10));

package/src/components/icons.tsx

@@ -84,6 +84,11 @@ import FunctionIcon from '../icons/function.svg';
 import InputClearIcon from '../icons/input-clear.svg';
 import SliderHandleIcon from '../icons/slider-handle-icon.svg';
 import TrashIcon from '../icons/trash.svg';
+import MenuIcon from '../icons/menu.svg';
+import UserRemove from '../icons/user-remove.svg';
+import Role from '../icons/role.svg';
+import Department from '../icons/department.svg';
+import Post from '../icons/post.svg';
 import DotIcon from '../icons/dot.svg';
 
 // 兼容原来的用法，后续不直接试用。
@@ -195,6 +200,11 @@ registerIcon('cloud-upload', CloudUploadIcon);
 registerIcon('image', ImageIcon);
 registerIcon('refresh', RefreshIcon);
 registerIcon('trash', TrashIcon);
+registerIcon('menu', MenuIcon);
+registerIcon('user-remove', UserRemove);
+registerIcon('role', Role);
+registerIcon('department', Department);
+registerIcon('post', Post);
 registerIcon('dot', DotIcon);
 
 export function Icon({
@@ -227,11 +237,17 @@ export {
   MuteIcon,
   PlayIcon,
   PauseIcon,
+  ReloadIcon,
   LeftArrowIcon,
   RightArrowIcon,
   CheckIcon,
   PlusIcon,
   MinusIcon,
   PencilIcon,
-  FunctionIcon
+  FunctionIcon,
+  MenuIcon,
+  UserRemove,
+  Role,
+  Department,
+  Post
 };

package/src/components/index.tsx

@@ -62,6 +62,7 @@ import Table from './table';
 import SchemaVariableListPicker from './schema-editor/SchemaVariableListPicker';
 import SchemaVariableList from './schema-editor/SchemaVariableList';
 import FormulaPicker from './formula/Picker';
+import InputJSONSchema from './json-schema';
 
 export {
   NotFound,
@@ -127,5 +128,6 @@ export {
   Table,
   SchemaVariableListPicker,
   SchemaVariableList,
-  FormulaPicker
+  FormulaPicker,
+  InputJSONSchema
 };