amis 1.9.0 → 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;
@@ -31,7 +34,12 @@ interface CustomDaysViewProps extends LocaleProps {
   setDateTimeState: (state: any) => void;
   showTime: () => void;
   setTime: (type: string, amount: number) => void;
-  scrollToTop: (type: string, amount: number, i: number, lable?: string) => void;
+  scrollToTop: (
+    type: string,
+    amount: number,
+    i: number,
+    lable?: string
+  ) => void;
   subtractTime: (
     amount: number,
     type: string,
@@ -61,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[];
@@ -177,21 +209,20 @@ export class CustomDaysView extends React.Component<CustomDaysViewProps> {
       columns,
       types,
       pickerValue: currentDate.toArray(),
-      uniqueTag: 0,
+      uniqueTag: 0
+    };
+
+    if (this.props.timeConstraints) {
+      this.timeConstraints = merge(this.timeConstraints, props.timeConstraints);
     }
   }
 
   componentWillMount() {
-    this.setState({uniqueTag: (new Date()).valueOf()})
+    this.setState({uniqueTag: new Date().valueOf()});
   }
 
   componentDidMount() {
-    const {
-      timeFormat,
-      selectedDate,
-      viewDate,
-      isEndDate,
-    } = this.props;
+    const {timeFormat, selectedDate, viewDate, isEndDate} = this.props;
     const formatMap = {
       hours: 'HH',
       minutes: 'mm',
@@ -207,9 +238,14 @@ export class CustomDaysView extends React.Component<CustomDaysViewProps> {
         ? 'seconds'
         : '';
       if (type) {
-        this.scrollToTop(type, parseInt(date.format(formatMap[type]), 10), i, 'init')
+        this.scrollToTop(
+          type,
+          parseInt(date.format(formatMap[type]), 10),
+          i,
+          'init'
+        );
       }
-    })
+    });
   }
 
   updateSelectedDate = (event: React.MouseEvent<any>) => {
@@ -246,17 +282,14 @@ export class CustomDaysView extends React.Component<CustomDaysViewProps> {
     this.props.updateSelectedDate(event, true);
   };
 
-  showTime = () =>{
-    const {selectedDate, viewDate, timeFormat} = this.props
+  showTime = () => {
+    const {selectedDate, viewDate, timeFormat} = this.props;
     return (
-      <div 
-        key="stb"
-        className="rdtShowTime"
-      >
+      <div key="stb" className="rdtShowTime">
         {(selectedDate || viewDate || moment()).format(timeFormat)}
       </div>
-    )
-  }
+    );
+  };
 
   setTime = (
     type: 'hours' | 'minutes' | 'seconds' | 'milliseconds',
@@ -279,13 +312,19 @@ export class CustomDaysView extends React.Component<CustomDaysViewProps> {
     type: 'hours' | 'minutes' | 'seconds' | 'milliseconds',
     value: number,
     i: number,
-    label?: string,
+    label?: string
   ) => {
-    let elf: any = document.getElementById(`${this.state.uniqueTag}-${i}-input`);
-    elf.parentNode.scrollTo({
-      top: value * 28,
+    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: offset * height,
       behavior: label === 'init' ? 'auto' : 'smooth'
-    })
+    });
   };
 
   confirm = () => {
@@ -456,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 = () => {
@@ -478,8 +519,9 @@ 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())
+    inputs.push(this.showTime());
 
     timeFormat.split(':').forEach((format, i) => {
       const type = /h/i.test(format)
@@ -490,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',
@@ -525,7 +565,12 @@ export class CustomDaysView extends React.Component<CustomDaysViewProps> {
                   )
               });
               return (
-                <div className={cx('CalendarInputWrapper', 'CalendarInputWrapperMT')}>
+                <div
+                  className={cx(
+                    'CalendarInputWrapper',
+                    'CalendarInputWrapperMT'
+                  )}
+                >
                   {/* <input
                     type="text"
                     value={date.format(formatMap[type])}
@@ -534,24 +579,31 @@ export class CustomDaysView extends React.Component<CustomDaysViewProps> {
                     max={max}
                     {...inputProps}
                   /> */}
-                  <div 
+                  <div
                     className={cx(
                       'CalendarInput-sugs',
-                      type === 'hours' ? 'CalendarInput-sugsHours' : 'CalendarInput-sugsTimes'
-                    )} 
+                      type === 'hours'
+                        ? 'CalendarInput-sugsHours'
+                        : 'CalendarInput-sugsTimes'
+                    )}
                     id={`${this.state.uniqueTag}-${i}-input`}
                   >
                     {options.map(option => {
                       return (
                         <div
                           key={option.value}
-                          className={cx(
-                            'CalendarInput-sugsItem', 
-                            {'is-highlight': option.value === date.format(formatMap[type])}
-                          )}
+                          className={cx('CalendarInput-sugsItem', {
+                            'is-highlight': selectedDate
+                              ? option.value === date.format(formatMap[type])
+                              : option.value === options?.[0]?.value
+                          })}
                           onClick={() => {
                             this.setTime(type, parseInt(option.value, 10));
-                            this.scrollToTop(type, parseInt(option.value, 10), i);
+                            this.scrollToTop(
+                              type,
+                              parseInt(option.value, 10),
+                              i
+                            );
                             closeMenu();
                           }}
                         >
@@ -649,7 +701,13 @@ export class CustomDaysView extends React.Component<CustomDaysViewProps> {
   };
 
   render() {
-    const {viewDate: date, useMobileUI, embed, timeFormat, classnames: cx} = this.props;
+    const {
+      viewDate: date,
+      useMobileUI,
+      embed,
+      timeFormat,
+      classnames: cx
+    } = this.props;
     const locale = date.localeData();
     const __ = this.props.translate;
     if (isMobile() && useMobileUI && !embed) {
@@ -718,9 +776,19 @@ export class CustomDaysView extends React.Component<CustomDaysViewProps> {
     return (
       <>
         <div className={timeFormat ? 'rdtDays' : ''}>
-          <table className={timeFormat ? 'rdtDaysPart' : ''}>{tableChildren}</table>
+          <table className={timeFormat ? 'rdtDaysPart' : ''}>
+            {tableChildren}
+          </table>
           {timeFormat ? (
-            <div className={timeFormat.toLowerCase().indexOf('s') > 0 ? "rdtTimePartWithS" : "rdtTimePart"}>{this.renderTimes()}</div>
+            <div
+              className={
+                timeFormat.toLowerCase().indexOf('s') > 0
+                  ? 'rdtTimePartWithS'
+                  : 'rdtTimePart'
+              }
+            >
+              {this.renderTimes()}
+            </div>
           ) : null}
         </div>
         <table>{this.renderFooter()}</table>

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`
     );
-    elf.parentNode.scrollTo({
-      top: value * 28,
+    const {min, step} = this.timeConstraints[type];
+    const offset = (value - min) / step;
+    const height = 28; /** 单个选项的高度 */
+
+    elf?.parentNode?.scrollTo({
+      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));