amis 1.9.1-beta.28 → 1.9.1-beta.29

package/src/components/AnchorNav.tsx

@@ -49,8 +49,13 @@ export interface AnchorNavProps extends ThemeProps {
   direction?: 'vertical' | 'horizontal'; // 导航方向
 }
 
+interface SectionOffset {
+  key: string | number;
+  offsetTop: number;
+}
+
 export interface AnchorNavState {
-  offsetArr: PlainObject[]; // 记录每个段落的offsetTop
+  offsetArr: SectionOffset[]; // 记录每个段落的offsetTop
   fromSelect: boolean; // 标识滚动触发来源
 }
 
@@ -67,17 +72,45 @@ export class AnchorNav extends React.Component<AnchorNavProps, AnchorNavState> {
   // 滚动区域DOM
   contentDom: React.RefObject<HTMLDivElement> = React.createRef();
 
+  // 后代节点观察器
+  observer: MutationObserver;
+
   componentDidMount() {
-    // 初始化滚动标识
+    // 初始化滚动标识
     this.setState({fromSelect: false});
 
-    // add scroll event
     const sectionRootDom =
       this.contentDom && (this.contentDom.current as HTMLElement);
-    sectionRootDom.addEventListener('scroll', this.scrollToNav);
-    let offsetArr: Array<object> = [];
+
+    this.updateSectionOffset(sectionRootDom, false);
+    this.observer = new MutationObserver((mutations: MutationRecord[]) => {
+      const ModDetected = mutations.some(record =>
+        record.target.parentNode?.isSameNode(sectionRootDom)
+      );
+
+      if (ModDetected) {
+        this.updateSectionOffset(sectionRootDom, true);
+      }
+    });
+    this.observer.observe(sectionRootDom, {childList: true, subtree: true});
+  }
+
+  componentWillUnmount() {
+    if (this.contentDom && this.contentDom.current) {
+      this.contentDom.current.removeEventListener('scroll', this.scrollToNav);
+    }
+    this.observer && this.observer.disconnect();
+  }
+
+  updateSectionOffset(parentNode: HTMLElement, inited: boolean) {
+    const offsetArr: Array<SectionOffset> = [];
     const {children, active} = this.props;
 
+    if (!inited) {
+      // add scroll event
+      parentNode.addEventListener('scroll', this.scrollToNav);
+    }
+
     // 收集段落区域offsetTop
     children &&
       React.Children.forEach(
@@ -85,7 +118,7 @@ export class AnchorNav extends React.Component<AnchorNavProps, AnchorNavState> {
         (section: AnchorNavSectionComponent, index: number) => {
           offsetArr.push({
             key: section.props.name,
-            offsetTop: (sectionRootDom.children[index] as HTMLElement).offsetTop
+            offsetTop: (parentNode.children[index] as HTMLElement).offsetTop
           });
         }
       );
@@ -94,7 +127,7 @@ export class AnchorNav extends React.Component<AnchorNavProps, AnchorNavState> {
       {
         offsetArr
       },
-      () => active && this.scrollToSection(active)
+      !inited ? () => active && this.scrollToSection(active) : undefined
     );
   }
 

package/src/components/DatePicker.tsx

@@ -276,7 +276,7 @@ export interface DateProps extends LocaleProps, ThemeProps {
     };
   };
   popOverContainer?: any;
-
+  label?: string | false;
   borderMode?: 'full' | 'half' | 'none';
   // 是否为内嵌模式，如果开启就不是 picker 了，直接页面点选。
   embed?: boolean;
@@ -657,7 +657,8 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
       largeMode,
       scheduleClassNames,
       onScheduleClick,
-      mobileCalendarMode
+      mobileCalendarMode,
+      label
     } = this.props;
 
     const __ = this.props.translate;
@@ -687,7 +688,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
     );
     const CalendarMobileTitle = (
       <div className={`${ns}CalendarMobile-title`}>
-        {__('Calendar.datepicker')}
+        {label && typeof label === 'string' ? label : __('Calendar.datepicker')}
       </div>
     );
     const useCalendarMobile =
@@ -788,7 +789,10 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
         ) : null}
 
         <a className={cx(`DatePicker-toggler`)}>
-          <Icon icon={viewMode === 'time' ? 'clock' : 'date'} className="icon" />
+          <Icon
+            icon={viewMode === 'time' ? 'clock' : 'date'}
+            className="icon"
+          />
         </a>
 
         {!(useMobileUI && isMobile()) && isOpened ? (

package/src/components/DateRangePicker.tsx

@@ -55,6 +55,7 @@ export interface DateRangePickerProps extends ThemeProps, LocaleProps {
   onBlur?: Function;
   type?: string;
   onRef?: any;
+  label?: string | false;
 }
 
 export interface DateRangePickerState {
@@ -62,6 +63,8 @@ export interface DateRangePickerState {
   isFocused: boolean;
   startDate?: moment.Moment;
   endDate?: moment.Moment;
+  oldStartDate?: moment.Moment;
+  oldEndDate?: moment.Moment;
   editState?: 'start' | 'end'; // 编辑开始时间还是结束时间
   startInputValue?: string;
   endInputValue?: string;
@@ -534,6 +537,8 @@ export class DateRangePicker extends React.Component<
       editState: 'start',
       startDate,
       endDate,
+      oldStartDate: startDate,
+      oldEndDate: endDate,
       startInputValue: startDate?.format(inputFormat),
       endInputValue: endDate?.format(inputFormat)
     };
@@ -645,7 +650,17 @@ export class DateRangePicker extends React.Component<
     });
   }
 
-  close() {
+  close(isConfirm: boolean = false) {
+    if (!isConfirm) {
+      const {oldEndDate, oldStartDate} = this.state;
+      const {inputFormat} = this.props;
+      this.setState({
+        endDate: oldEndDate,
+        endInputValue: oldEndDate ? oldEndDate.format(inputFormat) : '',
+        startDate: oldStartDate,
+        startInputValue: oldStartDate ? oldStartDate.format(inputFormat) : ''
+      });
+    }
     this.setState(
       {
         isOpened: false,
@@ -693,7 +708,7 @@ export class DateRangePicker extends React.Component<
     if (this.state.startDate && !this.state.endDate) {
       this.setState({editState: 'end'});
     } else {
-      this.close();
+      this.close(true);
     }
   }
 
@@ -746,6 +761,7 @@ export class DateRangePicker extends React.Component<
     );
     const newState = {
       startDate: date,
+      oldStartDate: startDate,
       startInputValue: date.format(inputFormat)
     } as any;
     // 这些没有时间的选择点第一次后第二次就是选结束时间
@@ -769,6 +785,7 @@ export class DateRangePicker extends React.Component<
     if (newValue.isBefore(startDate)) {
       this.setState({
         startDate: undefined,
+        oldStartDate: startDate,
         startInputValue: ''
       });
     }
@@ -777,6 +794,7 @@ export class DateRangePicker extends React.Component<
     this.setState(
       {
         endDate: date,
+        oldEndDate: endDate,
         endInputValue: date.format(inputFormat)
       },
       () => {
@@ -1226,7 +1244,8 @@ export class DateRangePicker extends React.Component<
       locale,
       embed,
       type,
-      viewMode = 'days'
+      viewMode = 'days',
+      useMobileUI
     } = this.props;
     const __ = this.props.translate;
 
@@ -1236,7 +1255,7 @@ export class DateRangePicker extends React.Component<
     const isTimeRange = type === 'input-datetime-range' || viewMode === 'time';
 
     return (
-      <div className={`${ns}DateRangePicker-wrap`} ref={this.calendarRef}>
+      <div className={cx(`${ns}DateRangePicker-wrap`)} ref={this.calendarRef}>
         {this.renderRanges(ranges)}
         {(!isTimeRange || (editState === 'start' && !embed)) && (
           <Calendar
@@ -1299,7 +1318,10 @@ export class DateRangePicker extends React.Component<
 
         {embed ? null : (
           <div key="button" className={`${ns}DateRangePicker-actions`}>
-            <a className={cx('Button', 'Button--default')} onClick={this.close}>
+            <a
+              className={cx('Button', 'Button--default')}
+              onClick={() => this.close}
+            >
               {__('cancel')}
             </a>
             <a
@@ -1348,7 +1370,8 @@ export class DateRangePicker extends React.Component<
       maxDuration,
       dateFormat,
       viewMode = 'days',
-      ranges
+      ranges,
+      label
     } = this.props;
     const useCalendarMobile =
       useMobileUI &&
@@ -1400,7 +1423,7 @@ export class DateRangePicker extends React.Component<
 
     const CalendarMobileTitle = (
       <div className={`${ns}CalendarMobile-title`}>
-        {__('Calendar.datepicker')}
+        {label && typeof label === 'string' ? label : __('Calendar.datepicker')}
       </div>
     );
 
@@ -1466,7 +1489,10 @@ export class DateRangePicker extends React.Component<
             <PopUp
               isShow={isOpened}
               container={popOverContainer}
-              className={cx(`${ns}CalendarMobile-pop`)}
+              className={cx(
+                `${ns}CalendarMobile-pop`,
+                `${ns}CalendarMobile-pop--${viewMode}`
+              )}
               onHide={this.close}
               header={CalendarMobileTitle}
             >

package/src/components/MonthRangePicker.tsx

@@ -52,6 +52,7 @@ export interface MonthRangePickerProps extends ThemeProps, LocaleProps {
   useMobileUI?: boolean;
   onFocus?: Function;
   onBlur?: Function;
+  label?: string | false;
 }
 
 export interface MonthRangePickerState {
@@ -555,7 +556,8 @@ export class MonthRangePicker extends React.Component<
       maxDate,
       minDuration,
       maxDuration,
-      ranges
+      ranges,
+      label
     } = this.props;
     const mobileUI = isMobile() && useMobileUI;
 
@@ -616,7 +618,7 @@ export class MonthRangePicker extends React.Component<
 
     const CalendarMobileTitle = (
       <div className={`${ns}CalendarMobile-title`}>
-        {__('Calendar.datepicker')}
+        {label && typeof label === 'string' ? label : __('Calendar.datepicker')}
       </div>
     );
 

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(