amis 1.9.1-beta.28 → 1.9.1-beta.30

package/src/components/SearchBox.tsx

@@ -1,10 +1,31 @@
 import React from 'react';
+import moment from 'moment';
+import _ from 'lodash';
+import debounce from 'lodash/debounce';
+import isInteger from 'lodash/isInteger';
 import {ThemeProps, themeable} from '../theme';
 import {Icon} from './icons';
 import {uncontrollable} from 'uncontrollable';
 import {autobind} from '../utils/helper';
 import {LocaleProps, localeable} from '../locale';
-import debounce from 'lodash/debounce';
+
+export interface HistoryRecord {
+  /** 历史记录值 */
+  value: string;
+  /** 历史记录生成的unix时间戳 */
+  timestamp?: number;
+}
+
+export interface SearchHistoryOptions {
+  /** 是否开启历史记录 */
+  enable: boolean;
+  /** 本地存储历史记录的key */
+  key?: string;
+  /** 历史记录数量上限 */
+  limit?: number;
+  /** 历史记录下拉面板CSS类名 */
+  dropdownClassName?: string;
+}
 
 export interface SearchBoxProps extends ThemeProps, LocaleProps {
   name?: string;
@@ -22,29 +43,46 @@ export interface SearchBoxProps extends ThemeProps, LocaleProps {
   onActiveChange?: (active: boolean) => void;
   onSearch?: (value: string) => void;
   onCancel?: () => void;
+  /** 历史记录配置 */
+  history?: SearchHistoryOptions;
 }
 
 export interface SearchBoxState {
   isFocused: boolean;
+  isHistoryOpened: boolean;
+  inputValue: string;
+  historyRecords: HistoryRecord[];
 }
 
+const historyDefaultOptions: Required<SearchHistoryOptions> = {
+  enable: false,
+  key: 'amis:search_history',
+  limit: 5,
+  dropdownClassName: ''
+};
+
 export class SearchBox extends React.Component<SearchBoxProps, SearchBoxState> {
   inputRef: React.RefObject<HTMLInputElement> = React.createRef();
+
   static defaultProps = {
     mini: true,
     enhance: false,
     clearable: false,
-    searchImediately: true
+    searchImediately: true,
+    history: historyDefaultOptions
   };
 
   state = {
-    isFocused: false
+    isHistoryOpened: false,
+    isFocused: false,
+    inputValue: this.props.value ?? '',
+    historyRecords: this.getHistoryRecords()
   };
 
   lazyEmitSearch = debounce(
     () => {
       const onSearch = this.props.onSearch;
-      onSearch?.(this.props.value || '');
+      onSearch?.(this.state.inputValue ?? '');
     },
     250,
     {
@@ -53,6 +91,12 @@ export class SearchBox extends React.Component<SearchBoxProps, SearchBoxState> {
     }
   );
 
+  componentDidUpdate(prevProps: SearchBoxProps) {
+    if (prevProps.value !== this.props.value) {
+      this.setState({inputValue: this.props.value ?? ''});
+    }
+  }
+
   componentWillUnmount() {
     this.lazyEmitSearch.cancel();
   }
@@ -67,22 +111,35 @@ export class SearchBox extends React.Component<SearchBoxProps, SearchBoxState> {
   @autobind
   handleCancel() {
     const {onActiveChange, onCancel, onChange} = this.props;
+
     onActiveChange?.(false);
     onCancel?.();
-    onChange?.('');
+    this.setState({inputValue: ''}, () => onChange?.(''));
   }
 
   @autobind
   handleChange(e: React.ChangeEvent<HTMLInputElement>) {
     const {searchImediately, onChange} = this.props;
-    onChange?.(e.currentTarget.value);
-    searchImediately && this.lazyEmitSearch();
+    const inputValue = e.currentTarget.value;
+
+    this.setState({inputValue}, () => {
+      onChange?.(inputValue);
+      searchImediately && this.lazyEmitSearch();
+    });
   }
 
   @autobind
   handleSearch() {
-    const {onSearch, value} = this.props;
-    onSearch?.(value || '');
+    const {onSearch} = this.props;
+    const {inputValue} = this.state;
+    const {enable} = this.getHistoryOptions();
+
+    if (enable) {
+      this.insertHistoryRecord(inputValue);
+      this.setState({isFocused: false, isHistoryOpened: false});
+    }
+
+    onSearch?.(inputValue || '');
   }
 
   @autobind
@@ -96,11 +153,117 @@ export class SearchBox extends React.Component<SearchBoxProps, SearchBoxState> {
   @autobind
   handleClear() {
     const {searchImediately, onChange} = this.props;
-    onChange?.('');
-    searchImediately && this.lazyEmitSearch();
+
+    this.setState({inputValue: ''}, () => {
+      onChange?.('');
+      searchImediately && this.lazyEmitSearch();
+    });
   }
 
-  render() {
+  @autobind
+  handleFocus() {
+    const {enable} = this.getHistoryOptions();
+    this.setState({isFocused: true, isHistoryOpened: enable});
+  }
+
+  @autobind
+  handleBlur(e: React.FocusEvent<HTMLInputElement>) {
+    this.setState({isFocused: false, isHistoryOpened: false});
+  }
+
+  handleHistoryRecordSelect(record: HistoryRecord) {
+    this.setState(
+      {inputValue: record.value, isHistoryOpened: false, isFocused: false},
+      () => this.handleSearch()
+    );
+  }
+
+  /** 获取历史搜索配置 */
+  getHistoryOptions(): Required<SearchHistoryOptions> {
+    const {history} = this.props;
+    const options = {
+      enable: !!history?.enable,
+      key: history?.key ?? historyDefaultOptions.key,
+      limit:
+        history?.limit && isInteger(history?.limit) && history?.limit > 0
+          ? history?.limit
+          : historyDefaultOptions.limit,
+      dropdownClassName: history?.dropdownClassName ?? ''
+    };
+
+    return options;
+  }
+
+  /** 获取历史记录 */
+  getHistoryRecords() {
+    const {key, limit} = this.getHistoryOptions();
+
+    try {
+      const storageValues = localStorage.getItem(key);
+
+      return _.chain(storageValues ? JSON.parse(storageValues) : [])
+        .uniqBy('value')
+        .orderBy(['timestamp'], ['desc'])
+        .slice(0, limit)
+        .value();
+    } catch {}
+
+    return [];
+  }
+
+  /** 清空历史记录 */
+  clearHistoryRecords(): HistoryRecord[] {
+    const {key} = this.getHistoryOptions();
+    localStorage.removeItem(key);
+    this.setState({historyRecords: []});
+
+    return [];
+  }
+
+  /** 删除一条历史记录 */
+  removeHistoryRecord(record: HistoryRecord): HistoryRecord[] {
+    const {key} = this.getHistoryOptions();
+    const datasource = this.getHistoryRecords();
+    const recordIndex = datasource.findIndex(
+      item => item.value === record.value
+    );
+
+    if (~recordIndex) {
+      datasource.splice(recordIndex, 1);
+      localStorage.setItem(key, JSON.stringify(datasource));
+      this.setState({historyRecords: datasource});
+    }
+
+    return datasource;
+  }
+
+  /** 新增一条历史记录 */
+  insertHistoryRecord(value: string): HistoryRecord[] {
+    const datasource = this.getHistoryRecords();
+
+    if (!value || datasource.find(item => item.value === value)) {
+      return datasource;
+    }
+
+    try {
+      const {key, limit} = this.getHistoryOptions();
+      const newDatasource = _.chain([
+        ...datasource,
+        {value, timestamp: moment().unix()}
+      ])
+        .orderBy(['timestamp'], ['desc'])
+        .slice(0, limit)
+        .value();
+
+      localStorage.setItem(key, JSON.stringify(newDatasource));
+      this.setState({historyRecords: newDatasource});
+      return newDatasource;
+    } catch {}
+
+    return datasource;
+  }
+
+  renderInput(isHistoryMode?: boolean) {
     const {
       classnames: cx,
       active,
@@ -111,43 +274,41 @@ export class SearchBox extends React.Component<SearchBoxProps, SearchBoxState> {
       mini,
       enhance,
       clearable,
-      value,
       translate: __
     } = this.props;
-
-    const isFocused = this.state.isFocused;
+    const {isFocused, inputValue} = this.state;
+    const {enable} = this.getHistoryOptions();
 
     return (
       <div
         className={cx(
           'SearchBox',
           enhance && 'SearchBox--enhance',
-          className,
+          !!isHistoryMode ? '' : className,
           disabled ? 'is-disabled' : '',
           isFocused ? 'is-focused' : '',
           !mini || active ? 'is-active' : '',
+          {'is-history': enable}
         )}
       >
         <input
           name={name}
-          disabled={disabled}
+          ref={this.inputRef}
+          onFocus={this.handleFocus}
+          onBlur={this.handleBlur}
           onChange={this.handleChange}
-          value={value || ''}
+          onKeyDown={this.handleKeyDown}
+          value={inputValue ?? ''}
+          disabled={disabled}
           placeholder={__(placeholder || 'placeholder.enter')}
-          ref={this.inputRef}
           autoComplete="off"
-          onFocus={() => this.setState({ isFocused: true })}
-          onBlur={() => this.setState({ isFocused: false })}
-          onKeyDown={this.handleKeyDown}
         />
 
-        {
-          !mini && clearable && value && !disabled ? (
-            <div className={cx('SearchBox-clearable')} onClick={this.handleClear}>
-              <Icon icon="input-clear" className="icon"/>
-            </div>
-          ) : null
-        }
+        {!mini && clearable && inputValue && !disabled ? (
+          <div className={cx('SearchBox-clearable')} onClick={this.handleClear}>
+            <Icon icon="input-clear" className="icon" />
+          </div>
+        ) : null}
 
         {!mini ? (
           <a className={cx('SearchBox-searchBtn')} onClick={this.handleSearch}>
@@ -165,6 +326,78 @@ export class SearchBox extends React.Component<SearchBoxProps, SearchBoxState> {
       </div>
     );
   }
+
+  renderTag(item: HistoryRecord, index: number) {
+    const {classnames: cx} = this.props;
+
+    return (
+      <span className={cx('Tag', 'SearchBox-history-tag')} key={index}>
+        <span
+          className={cx('SearchBox-history-tag-text')}
+          onMouseDown={(e: React.MouseEvent<any>) => {
+            e.preventDefault();
+            this.handleHistoryRecordSelect(item);
+          }}
+        >
+          {item.value}
+        </span>
+        <span
+          className={cx(`SearchBox-history-tag-close`)}
+          onMouseDown={(e: React.MouseEvent<any>) => {
+            e.preventDefault();
+            this.removeHistoryRecord(item);
+          }}
+        >
+          <Icon icon="close" className="icon" />
+        </span>
+      </span>
+    );
+  }
+
+  renderHitoryMode() {
+    const {classnames: cx, translate: __, className} = this.props;
+    const {isHistoryOpened, inputValue, historyRecords} = this.state;
+    const {dropdownClassName} = this.getHistoryOptions();
+    const showDropdown =
+      isHistoryOpened && !inputValue && historyRecords.length > 0;
+
+    return (
+      <div
+        id="searchbox-history"
+        className={cx('SearchBox-history', className)}
+      >
+        {this.renderInput(true)}
+
+        <div
+          className={cx('SearchBox-history-dropdown', dropdownClassName, {
+            'is-active': showDropdown
+          })}
+        >
+          <header>
+            <h4>{__('searchHistory')}</h4>
+            <a
+              onMouseDown={(e: React.MouseEvent<any>) => {
+                e.preventDefault();
+                this.clearHistoryRecords();
+              }}
+            >
+              {__('clear')}
+            </a>
+          </header>
+
+          <div className={cx('SearchBox-history-content')}>
+            {historyRecords.map((item, index) => this.renderTag(item, index))}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    const {enable} = this.getHistoryOptions();
+
+    return enable ? this.renderHitoryMode() : this.renderInput();
+  }
 }
 
 export default themeable(

package/src/components/Tag.tsx

@@ -18,6 +18,7 @@ export interface TagProps extends ThemeProps {
   disabled?: boolean;
   closeIcon?: string | React.ReactNode;
   onClose?: (e: React.MouseEvent) => void;
+  onClick?: (e: React.MouseEvent) => void;
 }
 
 export interface CheckableTagProps extends TagProps {
@@ -82,6 +83,12 @@ export class Tag extends React.Component<TagProps> {
     onClose?.(e);
   }
 
+  @autobind
+  handleClick(e: React.MouseEvent<HTMLElement>) {
+    const {onClick} = this.props;
+    onClick?.(e);
+  }
+
   render() {
     const {
       children,
@@ -92,7 +99,8 @@ export class Tag extends React.Component<TagProps> {
       color,
       icon,
       style,
-      label
+      label,
+      closable
     } = this.props;
 
     const isPresetColor =
@@ -131,9 +139,12 @@ export class Tag extends React.Component<TagProps> {
           [`Tag--disabled`]: disabled
         })}
         style={tagStyle}
+        onClick={this.handleClick}
       >
-        {prevIcon}
-        {label || children}
+        <span className={cx('Tag-text')}>
+          {prevIcon}
+          {label || children}
+        </span>
         {this.renderCloseIcon()}
       </span>
     );

package/src/components/calendar/Calendar.tsx

@@ -65,7 +65,12 @@ interface BaseDatePickerProps {
     currentDate: moment.Moment,
     selectedDate: moment.Moment
   ) => JSX.Element;
-  renderMonth?: (props: any, month: number, year: number, date: any) => JSX.Element;
+  renderMonth?: (
+    props: any,
+    month: number,
+    year: number,
+    date: any
+  ) => JSX.Element;
   renderQuarter?: (
     props: any,
     quartar: number,
@@ -92,6 +97,7 @@ interface BaseDatePickerProps {
   displayTimeZone?: string;
   timeConstraints?: any;
   timeRangeHeader?: string;
+  timeRangeContext?: 'start' | 'end';
 }
 
 interface BaseDatePickerState {
@@ -558,7 +564,7 @@ class BaseDatePicker extends React.Component<
       }
     }
 
-    that.props.onChange(date);
+    that.props.onChange(date, this.props.timeRangeContext);
   };
 
   getDateBoundary = (currentDate: moment.Moment) => {
@@ -640,7 +646,13 @@ class BaseDatePicker extends React.Component<
   };
 
   render() {
-    const {viewMode, timeFormat, dateFormat, timeRangeHeader} = this.props;
+    const {
+      viewMode,
+      timeFormat,
+      dateFormat,
+      timeRangeHeader,
+      timeRangeContext
+    } = this.props;
     const Component = CustomCalendarContainer as any;
     const viewProps = this.getComponentProps();
 
@@ -649,11 +661,9 @@ class BaseDatePicker extends React.Component<
         'quarters',
         this.props.renderQuarter
       ];
-    }
-    else if (viewMode === 'years') {
+    } else if (viewMode === 'years') {
       viewProps.updateOn = 'years';
-    }
-    else if (viewMode === 'months') {
+    } else if (viewMode === 'months') {
       viewProps.updateOn = 'months';
     }
 
@@ -668,28 +678,34 @@ class BaseDatePicker extends React.Component<
         className={cx(
           'rdt rdtStatic rdtOpen',
           this.props.className,
-          (timeFormat && !dateFormat || typeof dateFormat !== 'string')
+          (timeFormat && !dateFormat) || typeof dateFormat !== 'string'
             ? 'rdtTimeWithoutD'
-            : (timeFormat && timeFormat.toLowerCase().indexOf('s') > 0)
+            : timeFormat && timeFormat.toLowerCase().indexOf('s') > 0
             ? 'rdtTimeWithS'
             : timeFormat
             ? 'rdtTime'
             : ''
         )}
       >
-        <div key="dt"
+        <div
+          key="dt"
           className={cx(
             'rdtPicker',
-            (timeFormat && !dateFormat)
+            timeFormat && !dateFormat
               ? 'rdtPickerTimeWithoutD'
-              : (timeFormat && dateFormat)
+              : timeFormat && dateFormat
               ? 'rdtPickerTime'
-              : (dateFormat && !timeFormat)
+              : dateFormat && !timeFormat
               ? 'rdtPickerDate'
               : ''
           )}
         >
-          <Component view={this.state.currentView} viewProps={viewProps} timeRangeHeader={timeRangeHeader}/>
+          <Component
+            view={this.state.currentView}
+            viewProps={viewProps}
+            timeRangeHeader={timeRangeHeader}
+            timeRangeContext={timeRangeContext}
+          />
         </div>
       </div>
     );

package/src/components/calendar/DaysView.tsx

@@ -55,7 +55,11 @@ interface CustomDaysViewProps extends LocaleProps {
     selected?: moment.Moment
   ) => boolean;
   showView: (view: string) => () => void;
-  updateSelectedDate: (event: React.MouseEvent<any>, close?: boolean) => void;
+  updateSelectedDate: (
+    event: React.MouseEvent<any>,
+    close?: boolean,
+    timeRangeContext?: 'start' | 'end'
+  ) => void;
   handleClickOutside: () => void;
   classnames: ClassNamesFn;
   schedules?: Array<{
@@ -70,6 +74,7 @@ interface CustomDaysViewProps extends LocaleProps {
   getColumns: (types: DateType[], dateBoundary: void) => any;
   getDateBoundary: (currentDate: moment.Moment) => any;
   timeConstraints?: any;
+  timeRangeContext?: 'start' | 'end';
 }
 
 export class CustomDaysView extends React.Component<CustomDaysViewProps> {
@@ -494,7 +499,11 @@ export class CustomDaysView extends React.Component<CustomDaysViewProps> {
         );
       }
     }
-    return <td {...props}><span>{currentDate.date()}</span></td>;
+    return (
+      <td {...props}>
+        <span>{currentDate.date()}</span>
+      </td>
+    );
   };
 
   /** 时间选择器数据源 */
@@ -523,8 +532,6 @@ export class CustomDaysView extends React.Component<CustomDaysViewProps> {
     const inputs: Array<React.ReactNode> = [];
     const timeConstraints = this.timeConstraints;
 
-    inputs.push(this.showTime());
-
     timeFormat.split(':').forEach((format, i) => {
       const type = /h/i.test(format)
         ? 'hours'
@@ -623,7 +630,12 @@ export class CustomDaysView extends React.Component<CustomDaysViewProps> {
       }
     });
     inputs.length && inputs.pop();
-    return <div>{inputs}</div>;
+    return (
+      <div className={cx('CalendarTimesWrapper')}>
+        {this.showTime()}
+        <div className={cx('CalendarInputsWrapper')}>{inputs}</div>
+      </div>
+    );
   };
 
   renderFooter = () => {

package/src/locale/de-DE.ts

@@ -184,6 +184,7 @@ register('de-DE', {
   'saveFailed': 'Fehler beim Speichern',
   'saveSuccess': 'Erfolgreich gespeichert',
   'search': 'Suchen',
+  'searchHistory': 'Suchverlauf',
   'searchResult': 'Suchergebnis',
   'Checkboxes.selectAll': 'Alle auswählen/abwählen',
   'Select.checkAll': 'Alle markieren',

package/src/locale/en-US.ts

@@ -186,6 +186,7 @@ register('en-US', {
   'saveFailed': 'Save failed',
   'saveSuccess': 'Saved successfully',
   'search': 'Search',
+  'searchHistory': 'Search History',
   'searchResult': 'Search result',
   'Checkboxes.selectAll': 'Select/Deselect All',
   'Select.checkAll': 'Check all',

package/src/locale/zh-CN.ts

@@ -193,6 +193,7 @@ register('zh-CN', {
   'saveFailed': '保存失败',
   'saveSuccess': '保存成功',
   'search': '搜索',
+  'searchHistory': '搜索历史',
   'searchResult': '搜索结果',
   'stop': '停止',
   'Checkboxes.selectAll': '全选/不选',

package/src/renderers/CRUD.tsx

@@ -410,6 +410,9 @@ export default class CRUD extends React.Component<CRUDProps, any> {
 
   timer: ReturnType<typeof setTimeout>;
   mounted: boolean;
+
+  target: React.RefObject<HTMLDivElement> = React.createRef();
+
   constructor(props: CRUDProps) {
     super(props);
 
@@ -434,6 +437,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
     this.renderHeaderToolbar = this.renderHeaderToolbar.bind(this);
     this.renderFooterToolbar = this.renderFooterToolbar.bind(this);
     this.clearSelection = this.clearSelection.bind(this);
+    this.getTarget = this.getTarget.bind(this);
 
     const {
       location,
@@ -1755,6 +1759,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
           classPrefix={ns}
           searchable={false}
           placeholder={__('Select.placeholder')}
+          popOverContainer={this.getTarget}
           options={perPages}
           value={store.perPage + ''}
           onChange={(value: any) => this.handleChangePage(1, value.value)}
@@ -1764,6 +1769,10 @@ export default class CRUD extends React.Component<CRUDProps, any> {
     );
   }
 
+  getTarget() {
+    return this.target.current?.ownerDocument.body;
+  }
+
   renderLoadMore() {
     const {store, classPrefix: ns, classnames: cx, translate: __} = this.props;
     const {page, lastPage} = store;
@@ -2075,6 +2084,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
         className={cx('Crud', className, {
           'is-loading': store.loading
         })}
+        ref={this.target}
       >
         {filter && (!store.filterTogggable || store.filterVisible)
           ? render(