amis 1.5.6 → 1.6.1-beta.0

package/src/components/CalendarMobile.tsx

@@ -0,0 +1,658 @@
+/**
+ * @file CalendarMobile
+ * @description 移动端日历组件
+ * @author hongyang03
+ */
+
+import React from 'react';
+import moment from 'moment';
+import Calendar from './calendar/Calendar';
+import {themeable, ThemeProps} from '../theme';
+import {LocaleProps, localeable} from '../locale';
+import {autobind} from '../utils/helper';
+
+export interface CalendarMobileProps extends ThemeProps, LocaleProps {
+  className?: string;
+  timeFormat?: string;
+  inputFormat?: string;
+  startDate?: moment.Moment;
+  endDate?: moment.Moment;
+  minDate?: moment.Moment;
+  maxDate?: moment.Moment;
+  minDuration?: moment.Duration;
+  maxDuration?: moment.Duration;
+  dateFormat?: string;
+  embed?: boolean;
+  viewMode?: 'days' | 'months' | 'years' | 'time' | 'quarters';
+  close?: () => void;
+  confirm?: (startDate?: any, endTime?: any) => void;
+  onChange?: (data: any, callback?: () => void) => void;
+  footerExtra?: JSX.Element | null;
+  showViewMode?: 'years' | 'months';
+  isDatePicker?: boolean;
+  timeConstraints?: {
+    hours?: {
+      min: number;
+      max: number;
+      step: number;
+    };
+    minutes?: {
+      min: number;
+      max: number;
+      step: number;
+    };
+    seconds: {
+      min: number;
+      max: number;
+      step: number;
+    };
+  };
+  defaultDate?: moment.Moment;
+}
+
+export interface CalendarMobileState {
+  startDate?: moment.Moment;
+  endDate?: moment.Moment;
+  monthHeights?: number[];
+  currentDate: moment.Moment;
+  showToast: boolean;
+  isScrollToBottom: boolean;
+  dateTime: any;
+  minDate?: moment.Moment;
+  maxDate?: moment.Moment;
+}
+
+export class CalendarMobile extends React.Component<
+  CalendarMobileProps,
+  CalendarMobileState
+> {
+
+  mobileBody: any;
+  mobileHeader: any;
+  timer: any;
+
+  static defaultProps: Pick<CalendarMobileProps, 'showViewMode'> = {
+    showViewMode: 'months'
+  };
+
+  constructor(props: CalendarMobileProps) {
+    super(props);
+
+    this.mobileBody = React.createRef();
+    this.mobileHeader = React.createRef();
+
+    const {startDate, endDate, defaultDate, minDate, maxDate} = this.props;
+    const dateRange = this.getDateRange(minDate, maxDate, defaultDate);
+
+    this.state = {
+      minDate: dateRange.minDate,
+      maxDate: dateRange.maxDate,
+      startDate,
+      endDate,
+      showToast: false,
+      currentDate: dateRange.currentDate,
+      isScrollToBottom: false,
+      dateTime: endDate ? [endDate.hour(), endDate.minute()] : [0, 0]
+    };
+  }
+
+  getDateRange(minDate?: moment.Moment, maxDate?: moment.Moment, defaultDate?: moment.Moment) {
+    !moment.isMoment(minDate) || !minDate.isValid() && (minDate = undefined);
+    !moment.isMoment(maxDate) || !maxDate.isValid() && (maxDate = undefined);
+
+    let currentDate = defaultDate || moment();
+    let dateRange: {
+      minDate: moment.Moment,
+      maxDate: moment.Moment
+    } = {
+      minDate: currentDate.clone().subtract(1, 'year').startOf('months'),
+      maxDate: currentDate.clone().add(1, 'year').endOf('months')
+    };
+    if (minDate && maxDate) {
+      dateRange = {
+        minDate,
+        maxDate
+      };
+    }
+    else if (minDate && !maxDate) {
+      dateRange = {
+        minDate,
+        maxDate: moment(minDate).add(2, 'year')
+      };
+      currentDate = minDate.clone();
+    }
+    else if (!minDate && maxDate) {
+      dateRange = {
+        minDate: moment(maxDate).subtract(2, 'year'),
+        maxDate
+      };
+      currentDate = maxDate.clone();
+    }
+
+    if (!currentDate.isBetween(dateRange.minDate, dateRange.maxDate, 'days', '[]')) {
+      currentDate = dateRange.minDate.clone();
+    }
+    return {
+      ...dateRange,
+      currentDate
+    };
+  }
+
+  componentDidMount() {
+    this.initMonths();
+  }
+
+  componentDidUpdate(prevProps: CalendarMobileProps) {
+    const props = this.props;
+
+    if (prevProps.minDate !== props.minDate || prevProps.maxDate !== props.maxDate) {
+      const currentDate = this.state.currentDate;
+      const dateRange = this.getDateRange(props.minDate, props.maxDate, moment(currentDate));
+      this.setState(
+        {
+          minDate: dateRange.minDate,
+          maxDate: dateRange.maxDate,
+          currentDate: dateRange.currentDate,
+        },
+        () => this.initMonths()
+      );
+    }
+  }
+
+  componentWillUnmount() {
+    this.setState({showToast: false});
+    clearTimeout(this.timer);
+  }
+
+  initMonths() {
+    if (this.mobileBody.current) {
+      const header = this.mobileHeader.current;
+      let monthHeights: number[] = [];
+      const monthCollection = this.mobileBody.current.children;
+      for (let i = 0; i < monthCollection.length; i++) {
+        monthHeights[i] = monthCollection[i].offsetTop - header.clientHeight;
+      }
+      this.setState({
+        monthHeights
+      });
+      const defaultDate = this.props.defaultDate || this.state.currentDate;
+      this.scollToDate(defaultDate ? moment(defaultDate) : moment());
+    }
+  }
+
+  scollToDate(date: moment.Moment) {
+    const {showViewMode} = this.props;
+    const {minDate} = this.state;
+    const index = date.diff(minDate, showViewMode);
+    const currentEl = this.mobileBody.current.children[index];
+    if (!currentEl) {
+      return;
+    }
+    const header = this.mobileHeader.current;
+    this.mobileBody.current.scrollBy(0, currentEl.offsetTop - this.mobileBody.current.scrollTop - header.clientHeight);
+  }
+
+  @autobind
+  onMobileBodyScroll(e: any) {
+    const {showViewMode} = this.props;
+    const {monthHeights} = this.state;
+    let minDate = this.state.minDate?.clone();
+    if (!this.mobileBody?.current || !monthHeights || !minDate) {
+      return;
+    }
+    const scrollTop = this.mobileBody.current.scrollTop;
+    const clientHeight = this.mobileBody.current.clientHeight;
+    const scrollHeight = this.mobileBody.current.scrollHeight;
+    
+    let i = 0;
+    for(i; i < monthHeights.length; i++) {
+      if (scrollTop < monthHeights[i]) {
+        break;
+      }
+    }
+    i--;
+    i < 0 && (i = 0);
+    const currentDate = minDate.add(i, showViewMode);
+    this.setState({
+      currentDate,
+      isScrollToBottom: scrollTop + clientHeight === scrollHeight
+    });
+  }
+
+  @autobind
+  scrollPreYear() {
+    if (!this.state.currentDate) {
+      return;
+    }
+    let {currentDate, minDate} = this.state;
+    currentDate = currentDate.clone().subtract(1, 'years');
+    if (minDate && currentDate.isBefore(minDate)) {
+      currentDate = minDate;
+    }
+    this.setState({
+      currentDate
+    });
+    this.scollToDate(currentDate);
+  }
+
+  @autobind
+  scrollAfterYear() {
+    if (!this.state.currentDate) {
+      return;
+    }
+    let {currentDate, maxDate} = this.state;
+    currentDate = currentDate.clone().add(1, 'years');
+    if (maxDate && currentDate.isAfter(maxDate)) {
+      currentDate = maxDate;
+    }
+    this.setState({
+      currentDate
+    });
+    this.scollToDate(currentDate);
+  }
+
+  getDaysOfWeek() {
+    const locale = moment().localeData();
+    const days = locale.weekdaysMin();
+    const first = locale.firstDayOfWeek();
+    const	dow: string[] = [];
+    let	i = 0;
+
+    days.forEach((day: string) => {
+      dow[ (7 + ( i++ ) - first) % 7 ] = day;
+    });
+
+    return dow;
+  }
+
+  @autobind
+  handleCalendarClick(isDisabled: boolean) {
+    if (isDisabled) {
+      this.setState({showToast: true});
+      this.timer = setTimeout(() => {
+        this.setState({showToast: false});
+      }, 2000);
+    }
+  }
+
+  getRenderProps(props: any, currentDate: moment.Moment) {
+    let {startDate, endDate} = this.state;
+    const {translate: __, viewMode, isDatePicker} = this.props;
+    const precision = viewMode === 'time' ? 'hours' : viewMode || 'day';
+    let footerText = '';
+
+    if (startDate &&
+      endDate &&
+      currentDate.isBetween(startDate, endDate, precision, '()')) {
+      props.className += ' rdtBetween';
+    }
+    else if (startDate
+      && endDate
+      && startDate.isSame(endDate, precision)
+      && currentDate.isSame(startDate, precision)) {
+      props.className += ' rdtRangeStart';
+      footerText = __('Calendar.beginAndEnd');
+    }
+    else if (startDate && currentDate.isSame(startDate, precision)) {
+      props.className += ' rdtRangeStart';
+      footerText = __('Calendar.begin');
+      if (endDate) {
+        props.className += ' rdtRangeHasEnd';
+      }
+    }
+    else if (endDate && currentDate.isSame(endDate, precision)) {
+      props.className += ' rdtRangeEnd';
+      footerText = __('Calendar.end');
+    }
+
+    if (precision === 'day' && currentDate.date() === 1 && currentDate.day() === 1) {
+      props.className += ' rdtOldNone';
+    }
+
+    if (isDatePicker) {
+      footerText = '';
+    }
+
+    const rdtDisabled = props.className.indexOf('rdtDisabled') > -1;
+
+    return {
+      props,
+      footerText,
+      rdtDisabled
+    };
+  }
+
+  @autobind
+  handleTimeChange(newTime: any) {
+    if (!newTime) {
+      return;
+    }
+    const {onChange} = this.props;
+    let {startDate, endDate} = this.state;
+    if (startDate) {
+      let obj = {
+        dateTime: newTime,
+        startDate: endDate ? startDate : startDate?.clone().set({hour: newTime[0], minute: newTime[1], second: newTime[2] || 0}),
+        endDate: !endDate ? endDate : endDate?.clone().set({hour: newTime[0], minute: newTime[1], second: newTime[2] || 0})
+      };
+      this.setState(obj, () => {
+        onChange && onChange(this.state);
+      });
+    }
+  }
+
+  @autobind
+  checkIsValidDate(currentDate: moment.Moment) {
+    const {startDate, endDate, minDate, maxDate} = this.state;
+    let {minDuration, maxDuration, viewMode} = this.props;
+    const precision = viewMode === 'time' ? 'hours' : viewMode || 'day';
+
+    if (minDate && currentDate.isBefore(minDate, precision)) {
+      return false;
+    }
+    else if (maxDate && currentDate.isAfter(maxDate, precision)) {
+      return false;
+    }
+    else if (startDate && !endDate) {
+      if (minDuration
+        && currentDate.isBefore(startDate.clone().add(minDuration))
+        && currentDate.isSameOrAfter(startDate)) {
+        return false;
+      }
+      else if (maxDuration && currentDate.isAfter(startDate.clone().add(maxDuration))) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  @autobind
+  renderMobileDay(props: any, currentDate: moment.Moment) {
+    const cx = this.props.classnames;
+    const renderProps = this.getRenderProps(props, currentDate);
+
+    return <td {...renderProps.props}>
+      <div className="calendar-wrap" onClick={() => this.handleCalendarClick(renderProps.rdtDisabled)}>
+        {currentDate.date()}
+        <div className={cx('CalendarMobile-range-text')}>{renderProps.footerText}</div>
+      </div>
+    </td>;
+  }
+
+  @autobind
+  renderMonth(props: any, month: number, year: number) {
+    const cx = this.props.classnames;
+    const currentDate = moment().year(year).month(month);
+    const monthStr = currentDate
+      .localeData()
+      .monthsShort(currentDate.month(month));
+    const strLength = 3;
+    const monthStrFixedLength = monthStr.substring(0, strLength);
+    const renderProps = this.getRenderProps(props, currentDate);
+
+    return (
+      <td {...renderProps.props}>
+        <div className="calendar-wrap" onClick={() => this.handleCalendarClick(renderProps.rdtDisabled)}>
+          {monthStrFixedLength}
+          <div className={cx('CalendarMobile-range-text')}>{renderProps.footerText}</div>
+        </div>
+      </td>
+    );
+  }
+
+  @autobind
+  renderQuarter(props: any, quarter: number, year: number) {
+    const cx = this.props.classnames;
+    const currentDate = moment().year(year).quarter(quarter);
+    const renderProps = this.getRenderProps(props, currentDate);
+
+    return (
+      <td {...props}>
+        <div className="calendar-wrap" onClick={() => this.handleCalendarClick(renderProps.rdtDisabled)}>
+          Q{quarter}
+          <div className={cx('CalendarMobile-range-text')}>{renderProps.footerText}</div>
+        </div>
+      </td>
+    );
+  }
+
+  @autobind
+  handleMobileChange(newValue: moment.Moment) {
+    const {embed, minDuration, maxDuration, confirm, onChange, viewMode, isDatePicker} = this.props;
+    const {startDate, endDate, dateTime, minDate, maxDate} = this.state;
+    const precision = viewMode === 'time' ? 'hours' : viewMode || 'day';
+
+    if (minDate && newValue && newValue.isBefore(minDate, 'second')) {
+      newValue = minDate;
+    }
+
+    if (maxDate && newValue && newValue.isAfter(maxDate, 'second')) {
+      newValue = maxDate;
+    }
+
+    if (
+      !isDatePicker &&
+      startDate &&
+      !endDate &&
+      newValue.isSameOrAfter(startDate) &&
+      (!minDuration || newValue.isSameOrAfter(startDate.clone().add(minDuration))) &&
+      (!maxDuration || newValue.isSameOrBefore(startDate.clone().add(maxDuration)))
+    ) {
+      return this.setState(
+        {
+          endDate: newValue.clone().endOf(precision).set({hour: dateTime[0], minute: dateTime[1], second: dateTime[2] || 0})
+        },
+        () => {
+          onChange && onChange(this.state, () => embed && confirm && confirm(startDate, endDate));
+        }
+      );
+    }
+
+    this.setState(
+      {
+        startDate: newValue.clone().startOf(precision).set({hour: dateTime[0], minute: dateTime[1], second: dateTime[2] || 0}),
+        endDate: undefined
+      },
+      () => {
+        onChange && onChange(this.state);
+      }
+    );
+  }
+
+  @autobind
+  renderMobileCalendarBody() {
+    const {
+      classnames: cx,
+      dateFormat,
+      timeFormat,
+      inputFormat,
+      locale,
+      viewMode = 'days',
+      close,
+      defaultDate,
+      showViewMode
+    } = this.props;
+    const __ = this.props.translate;
+
+    const {minDate, maxDate} = this.state;
+    if (!minDate || !maxDate) {
+      return;
+    }
+    let calendarDates: moment.Moment[] = [];
+    for(let minDateClone = minDate.clone(); minDateClone.isSameOrBefore(maxDate); minDateClone.add(1, showViewMode)) {
+      let date = minDateClone.clone();
+      if (defaultDate) {
+        date = moment(defaultDate).set({year: date.get('year'), month: date.get('month')});
+      }
+      calendarDates.push(date);
+    }
+
+    return (
+      <div className={cx('CalendarMobile-body')} ref={this.mobileBody}
+        onScroll={this.onMobileBodyScroll}>
+        {calendarDates.map((calendarDate: moment.Moment, index: number) => {
+          const rdtOldNone = showViewMode === 'months'
+            && calendarDate.clone().startOf('month').day() === 1
+            ? 'rdtOldNone' : '';
+
+          return <div className={cx('CalendarMobile-calendar-wrap', rdtOldNone)} key={'calendar-wrap' + index}>
+            {showViewMode === 'months' && <div className={cx('CalendarMobile-calendar-mark')} key={'calendar-mark' + index}>
+              {calendarDate.month() + 1}
+            </div>}
+            <div className={cx('CalendarMobile-calendar-header')}>
+              <span className="rdtSwitch">
+                {calendarDate.format(__('dateformat.year'))}
+              </span>
+              {showViewMode === 'months' && <span className="rdtSwitch">
+                {calendarDate.format(__('MMM'))}
+              </span>}
+            </div>
+            <Calendar
+              className={cx('CalendarMobile-calendar', rdtOldNone)}
+              viewDate={calendarDate}
+              value={calendarDate}
+              onChange={this.handleMobileChange}
+              requiredConfirm={false}
+              dateFormat={dateFormat}
+              inputFormat={inputFormat}
+              timeFormat=''
+              isValidDate={this.checkIsValidDate}
+              viewMode={viewMode}
+              input={false}
+              onClose={close}
+              renderDay={this.renderMobileDay}
+              renderMonth={this.renderMonth}
+              renderQuarter={this.renderQuarter}
+              locale={locale}
+              hideHeader={true}
+              updateOn={viewMode}
+              key={'calendar' + index}
+            />
+          </div>
+        })}
+      </div>
+    );
+  }
+
+  @autobind
+  renderMobileTimePicker() {
+    const {
+      classnames: cx,
+      timeFormat,
+      locale,
+      close,
+      timeConstraints,
+      defaultDate,
+      isDatePicker
+    } = this.props;
+    const __ = this.props.translate;
+
+    const {startDate, endDate, dateTime} = this.state;
+
+    return (
+      <div className={cx('CalendarMobile-time')}>
+        <div className={cx('CalendarMobile-time-title')}>
+          {isDatePicker ? __('Date.titleTime') : startDate && endDate ? __('Calendar.endPick') : __('Calendar.startPick')}
+        </div>
+        <Calendar
+          className={cx('CalendarMobile-time-calendar')}
+          value={defaultDate}
+          onChange={this.handleTimeChange}
+          requiredConfirm={false}
+          timeFormat={timeFormat}
+          viewMode="time"
+          input={false}
+          onClose={close}
+          locale={locale}
+          useMobileUI={true}
+          showToolbar={false}
+          viewDate={moment().set({hour: dateTime[0], minute: dateTime[1], second: dateTime[2] || 0})}
+          timeConstraints={timeConstraints}
+          isValidDate={this.checkIsValidDate}
+        />
+      </div>
+    );
+  }
+
+
+  render() {
+    const {
+      className,
+      classnames: cx,
+      embed,
+      close,
+      confirm,
+      footerExtra,
+      timeFormat,
+      showViewMode,
+      isDatePicker
+    } = this.props;
+    const __ = this.props.translate;
+
+    const {startDate, endDate, currentDate, showToast, isScrollToBottom, minDate, maxDate} = this.state;
+    let dateNow = currentDate
+      ? currentDate.format(__(`Calendar.${showViewMode === 'months' ? 'yearmonth' : 'year'}`))
+      : moment().format(__(`Calendar.${showViewMode === 'months' ? 'yearmonth' : 'year'}`));
+
+    const header = (
+      <div className={cx('CalendarMobile-header')} ref={this.mobileHeader}>
+        <div className={cx('CalendarMobile-subtitle')}>
+          <span className="subtitle-text">
+            {currentDate && currentDate.isSameOrBefore(minDate, showViewMode)
+              ? null
+              : <a className="rdtPrev" onClick={this.scrollPreYear}>&lsaquo;</a>}
+            {dateNow}
+            {currentDate && currentDate.isSameOrAfter(maxDate, showViewMode) || isScrollToBottom
+              ? null
+              : <a className="rdtNext" onClick={this.scrollAfterYear}>&rsaquo;</a>}
+          </span>
+        </div>
+        {showViewMode === 'months' ? <div className={cx('CalendarMobile-weekdays')}>
+          {this.getDaysOfWeek().map((day: string, index: number) => (
+            <span key={day + index} className="weekday">
+              {day}
+            </span>
+          ))}
+        </div> : null}
+      </div>
+    );
+
+    const footer = (
+      <div className={cx('CalendarMobile-footer')}>
+        {timeFormat && startDate && this.renderMobileTimePicker()}
+        <div className={cx('CalendarMobile-footer-toolbar')}>
+          <div className={cx('CalendarMobile-footer-ranges')}>
+            {footerExtra}
+          </div>
+          {confirm && !embed && <a
+            className={cx('Button', 'Button--primary', 'date-range-confirm', {
+              'is-disabled': !startDate || !(endDate || isDatePicker)
+            })}
+            onClick={() => {
+              confirm(startDate, endDate);
+              close && close();
+            }}
+          >
+            {__('confirm')}
+          </a>}
+        </div>
+      </div>
+    );
+
+    return (
+      <div className={cx('CalendarMobile',
+        embed ? 'CalendarMobile-embed' : '',
+        className)}>
+        <div className={cx('CalendarMobile-wrap')}>
+          {header}
+          {this.renderMobileCalendarBody()}
+          {footer}
+        </div>
+        {showToast? <div className={cx('CalendarMobile-toast')}>{__('Calendar.toast')}</div> : null}
+      </div>
+    );
+  }
+};
+
+export default themeable(localeable(CalendarMobile));