@douyinfe/semi-ui 2.1.0-alpha.1 → 2.1.0-beta.3

package/lib/cjs/datePicker/month.js

@@ -1,507 +0,0 @@
-"use strict";
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-
-exports.default = void 0;
-
-var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
-
-var _trim = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/trim"));
-
-var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
-
-var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
-
-var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
-
-var _stubFalse2 = _interopRequireDefault(require("lodash/stubFalse"));
-
-var _noop2 = _interopRequireDefault(require("lodash/noop"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _monthFoundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/datePicker/monthFoundation"));
-
-var _constants = require("@douyinfe/semi-foundation/lib/cjs/datePicker/constants");
-
-var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
-
-var _index = require("@douyinfe/semi-foundation/lib/cjs/datePicker/_utils/index");
-
-var _dateFns = require("date-fns");
-
-/* eslint-disable max-len */
-const prefixCls = _constants.cssClasses.PREFIX;
-
-class Month extends _baseComponent.default {
-  constructor(props) {
-    super(props);
-    this.state = {
-      weekdays: [],
-      month: {
-        weeks: [],
-        monthText: ''
-      },
-      todayText: '',
-      weeksRowNum: props.weeksRowNum
-    };
-    this.monthRef = /*#__PURE__*/_react.default.createRef();
-  }
-
-  get adapter() {
-    return (0, _assign.default)((0, _assign.default)({}, super.adapter), {
-      updateToday: todayText => this.setState({
-        todayText
-      }),
-      setWeekDays: weekdays => this.setState({
-        weekdays
-      }),
-      setWeeksRowNum: (weeksRowNum, callback) => this.setState({
-        weeksRowNum
-      }, callback),
-      updateMonthTable: month => this.setState({
-        month
-      }),
-      notifyDayClick: day => this.props.onDayClick(day),
-      notifyDayHover: day => this.props.onDayHover(day),
-      notifyWeeksRowNumChange: weeksRowNum => this.props.onWeeksRowNumChange(weeksRowNum)
-    });
-  }
-
-  componentDidMount() {
-    this.foundation = new _monthFoundation.default(this.adapter);
-    this.foundation.init();
-  }
-
-  componentWillUnmount() {
-    this.foundation.destroy();
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    if (prevProps.month !== this.props.month) {
-      this.foundation.getMonthTable();
-    }
-  }
-
-  getSingleDayStatus(options) {
-    const {
-      fullDate,
-      todayText,
-      selected,
-      disabledDate,
-      rangeStart,
-      rangeEnd
-    } = options;
-    const disabledOptions = {
-      rangeStart,
-      rangeEnd
-    };
-    const isToday = fullDate === todayText;
-    const isSelected = selected.has(fullDate);
-    let isDisabled = disabledDate && disabledDate((0, _dateFns.parseISO)(fullDate), disabledOptions);
-
-    if (!isDisabled && this.props.rangeInputFocus === 'rangeStart' && rangeEnd && this.props.focusRecordsRef && this.props.focusRecordsRef.current.rangeEnd) {
-      // The reason for splitting is that the dateRangeTime format: 'yyyy-MM-dd HH:MM:SS'
-      isDisabled = (0, _index.isAfter)(fullDate, (0, _trim.default)(rangeEnd).call(rangeEnd).split(/\s+/)[0]);
-    }
-
-    if (!isDisabled && this.props.rangeInputFocus === 'rangeEnd' && rangeStart && this.props.focusRecordsRef && this.props.focusRecordsRef.current.rangeStart) {
-      // The reason for splitting is that the dateRangeTime format: 'yyyy-MM-dd HH:MM:SS'
-      isDisabled = (0, _index.isBefore)(fullDate, (0, _trim.default)(rangeStart).call(rangeStart).split(/\s+/)[0]);
-    }
-
-    return {
-      isToday,
-      isSelected,
-      isDisabled // Disabled
-
-    };
-  }
-
-  getDateRangeStatus(options) {
-    const {
-      rangeStart,
-      rangeEnd,
-      fullDate,
-      hoverDay,
-      offsetRangeStart,
-      offsetRangeEnd,
-      rangeInputFocus
-    } = options; // If no item is selected, return the empty object directly
-
-    const _isDateRangeAnySelected = Boolean(rangeStart || rangeEnd);
-
-    const _isDateRangeSelected = Boolean(rangeStart && rangeEnd);
-
-    const _isOffsetDateRangeAnyExist = offsetRangeStart || offsetRangeEnd;
-
-    if (!_isDateRangeAnySelected) {
-      return {};
-    } // The range selects the hover date, and the normal hover is .semi-datepicker-main: hover
-
-
-    const _isHoverDay = (0, _index.isSameDay)(hoverDay, fullDate); // When one is selected
-    // eslint-disable-next-line one-var
-
-
-    let _isHoverAfterStart, _isHoverBeforeEnd, isSelectedStart, isSelectedEnd, isHoverDayAroundOneSelected;
-
-    if (rangeStart) {
-      isSelectedStart = (0, _index.isSameDay)(fullDate, rangeStart);
-
-      if (rangeInputFocus === 'rangeEnd') {
-        _isHoverAfterStart = (0, _index.isBetween)(fullDate, {
-          start: rangeStart,
-          end: hoverDay
-        });
-      }
-    }
-
-    if (rangeEnd) {
-      isSelectedEnd = (0, _index.isSameDay)(fullDate, rangeEnd);
-
-      if (rangeInputFocus === 'rangeStart') {
-        _isHoverBeforeEnd = (0, _index.isBetween)(fullDate, {
-          start: hoverDay,
-          end: rangeEnd
-        });
-      }
-    }
-
-    if (!_isDateRangeSelected && _isDateRangeAnySelected) {
-      isHoverDayAroundOneSelected = _isHoverDay;
-    } // eslint-disable-next-line one-var
-
-
-    let isHover;
-
-    if (!_isOffsetDateRangeAnyExist) {
-      isHover = _isHoverAfterStart || _isHoverBeforeEnd || _isHoverDay;
-    } // Select all
-    // eslint-disable-next-line one-var
-
-
-    let isInRange, isSelectedStartAfterHover, isSelectedEndBeforeHover, isHoverDayInStartSelection, isHoverDayInEndSelection, isHoverDayInRange;
-
-    if (_isDateRangeSelected) {
-      isInRange = (0, _index.isBetween)(fullDate, {
-        start: rangeStart,
-        end: rangeEnd
-      });
-
-      if (!_isOffsetDateRangeAnyExist) {
-        isSelectedStartAfterHover = isSelectedStart && (0, _index.isAfter)(rangeStart, hoverDay);
-        isSelectedEndBeforeHover = isSelectedEnd && (0, _index.isBefore)(rangeEnd, hoverDay);
-        isHoverDayInStartSelection = _isHoverDay && rangeInputFocus === 'rangeStart';
-        isHoverDayInEndSelection = _isHoverDay && rangeInputFocus === 'rangeEnd';
-        isHoverDayInRange = _isHoverDay && (0, _index.isBetween)(hoverDay, {
-          start: rangeStart,
-          end: rangeEnd
-        });
-      }
-    }
-
-    return {
-      isHoverDay: _isHoverDay,
-      isSelectedStart,
-      isSelectedEnd,
-      isInRange,
-      isHover,
-      isSelectedStartAfterHover,
-      isSelectedEndBeforeHover,
-      isHoverDayInRange,
-      isHoverDayInStartSelection,
-      isHoverDayInEndSelection,
-      isHoverDayAroundOneSelected // Hover date and select a date
-
-    };
-  }
-
-  getOffsetDateStatus(options) {
-    const {
-      offsetRangeStart,
-      offsetRangeEnd,
-      rangeStart,
-      rangeEnd,
-      fullDate,
-      hoverDay
-    } = options; // When there is no offset, return the empty object directly
-
-    const _isOffsetDateRangeNull = !(offsetRangeStart || offsetRangeEnd);
-
-    if (_isOffsetDateRangeNull) {
-      return {};
-    } // Range Select base date
-
-
-    const _isInRange = (0, _index.isBetween)(fullDate, {
-      start: rangeStart,
-      end: rangeEnd
-    });
-
-    const _isHoverDay = (0, _index.isSameDay)(hoverDay, fullDate);
-
-    const _isSelectedStart = rangeStart && (0, _index.isSameDay)(fullDate, rangeStart);
-
-    const _isSelectedEnd = rangeEnd && (0, _index.isSameDay)(fullDate, rangeEnd);
-
-    const _isDateRangeSelected = Boolean(rangeStart && rangeEnd); // Determine whether it is offsetStart or offsetRangeEnd
-
-
-    const isOffsetRangeStart = (0, _index.isSameDay)(fullDate, offsetRangeStart);
-    const isOffsetRangeEnd = (0, _index.isSameDay)(fullDate, offsetRangeEnd);
-    const isHoverDayOffset = _isHoverDay; // When selected
-
-    let isHoverInOffsetRange, isInOffsetRange;
-
-    if (_isDateRangeSelected) {
-      isHoverInOffsetRange = _isInRange && _isHoverDay;
-    } // When there is an offset area
-
-
-    const _isOffsetDateRangeSelected = Boolean(offsetRangeStart && offsetRangeEnd);
-
-    if (_isOffsetDateRangeSelected) {
-      isInOffsetRange = _isSelectedStart || (0, _index.isBetween)(fullDate, {
-        start: offsetRangeStart,
-        end: offsetRangeEnd
-      }) || _isSelectedEnd;
-    }
-
-    return {
-      isOffsetRangeStart,
-      isOffsetRangeEnd,
-      isHoverInOffsetRange,
-      isHoverDayOffset,
-      isInOffsetRange // Include start and end within the week selection (start and end styles are the same as other dates, so start and end are included)
-
-    };
-  }
-  /**
-   * get day current status
-   * @param {Object} fullDate
-   * @param {Object} options
-   * @returns {Object}
-   */
-
-
-  getDayStatus(currentDay, options) {
-    const {
-      fullDate
-    } = currentDay;
-    const {
-      hoverDay,
-      rangeStart,
-      rangeEnd,
-      todayText,
-      offsetRangeStart,
-      offsetRangeEnd,
-      disabledDate,
-      selected,
-      rangeInputFocus
-    } = options;
-    const singleDayStatus = this.getSingleDayStatus({
-      fullDate,
-      todayText,
-      hoverDay,
-      selected,
-      disabledDate,
-      rangeStart,
-      rangeEnd
-    });
-    const dateRangeStatus = this.getDateRangeStatus((0, _assign.default)({
-      fullDate,
-      rangeStart,
-      rangeEnd,
-      hoverDay,
-      offsetRangeStart,
-      offsetRangeEnd,
-      rangeInputFocus
-    }, singleDayStatus));
-    const offsetDataStatus = this.getOffsetDateStatus((0, _assign.default)((0, _assign.default)({
-      offsetRangeStart,
-      offsetRangeEnd,
-      rangeStart,
-      rangeEnd,
-      fullDate,
-      hoverDay
-    }, singleDayStatus), dateRangeStatus)); // this parameter will pass to the user when given renderFullDate function, do not delete or modify its key
-
-    const dayStatus = (0, _assign.default)((0, _assign.default)((0, _assign.default)({}, singleDayStatus), dateRangeStatus), offsetDataStatus);
-    return dayStatus;
-  }
-
-  renderDayOfWeek() {
-    const {
-      locale
-    } = this.props;
-    const weekdayCls = (0, _classnames.default)(_constants.cssClasses.WEEKDAY);
-    const weekdayItemCls = (0, _classnames.default)("".concat(prefixCls, "-weekday-item"));
-    const {
-      weekdays
-    } = this.state; // i18n
-
-    const weekdaysText = (0, _map.default)(weekdays).call(weekdays, key => locale.weeks[key]);
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: weekdayCls
-    }, (0, _map.default)(weekdaysText).call(weekdaysText, (E, i) => /*#__PURE__*/_react.default.createElement("div", {
-      key: E + i,
-      className: weekdayItemCls
-    }, E)));
-  }
-
-  renderWeeks() {
-    const {
-      month
-    } = this.state;
-    const {
-      weeks
-    } = month;
-    const {
-      weeksRowNum
-    } = this.props;
-    let style = {};
-
-    if (weeksRowNum) {
-      const height = weeksRowNum * _constants.numbers.WEEK_HEIGHT;
-      style = {
-        height
-      };
-    }
-
-    const weeksCls = (0, _classnames.default)(_constants.cssClasses.WEEKS);
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: weeksCls,
-      style: style
-    }, (0, _map.default)(weeks).call(weeks, (week, weekIndex) => this.renderWeek(week, weekIndex)));
-  }
-
-  renderWeek(week, weekIndex) {
-    const weekCls = _constants.cssClasses.WEEK;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: weekCls,
-      key: weekIndex
-    }, (0, _map.default)(week).call(week, (day, dayIndex) => this.renderDay(day, dayIndex)));
-  }
-
-  renderDay(day, dayIndex) {
-    const {
-      todayText
-    } = this.state;
-    const {
-      renderFullDate,
-      renderDate
-    } = this.props;
-    const {
-      fullDate,
-      dayNumber
-    } = day;
-
-    if (!fullDate) {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        key: dayNumber + dayIndex,
-        className: _constants.cssClasses.DAY
-      }, /*#__PURE__*/_react.default.createElement("span", null));
-    }
-
-    const dayStatus = this.getDayStatus(day, (0, _assign.default)({
-      todayText
-    }, this.props));
-    const dayCls = (0, _classnames.default)(_constants.cssClasses.DAY, {
-      [_constants.cssClasses.DAY_TODAY]: dayStatus.isToday,
-      [_constants.cssClasses.DAY_IN_RANGE]: dayStatus.isInRange,
-      [_constants.cssClasses.DAY_HOVER]: dayStatus.isHover,
-      [_constants.cssClasses.DAY_SELECTED]: dayStatus.isSelected,
-      [_constants.cssClasses.DAY_SELECTED_START]: dayStatus.isSelectedStart,
-      [_constants.cssClasses.DAY_SELECTED_END]: dayStatus.isSelectedEnd,
-      [_constants.cssClasses.DAY_DISABLED]: dayStatus.isDisabled,
-      // offsetDate class
-      [_constants.cssClasses.DAY_HOVER_DAY]: dayStatus.isHoverDayOffset,
-      [_constants.cssClasses.DAY_IN_OFFSET_RANGE]: dayStatus.isInOffsetRange,
-      [_constants.cssClasses.DAY_SELECTED_RANGE_HOVER]: dayStatus.isHoverInOffsetRange,
-      [_constants.cssClasses.DAY_OFFSET_RANGE_START]: dayStatus.isOffsetRangeStart,
-      [_constants.cssClasses.DAY_OFFSET_RANGE_END]: dayStatus.isOffsetRangeEnd,
-      // range input class
-      [_constants.cssClasses.DAY_SELECTED_START_AFTER_HOVER]: dayStatus.isSelectedStartAfterHover,
-      [_constants.cssClasses.DAY_SELECTED_END_BEFORE_HOVER]: dayStatus.isSelectedEndBeforeHover,
-      [_constants.cssClasses.DAY_HOVER_DAY_BEFORE_RANGE]: dayStatus.isHoverDayInStartSelection,
-      [_constants.cssClasses.DAY_HOVER_DAY_AFTER_RANGE]: dayStatus.isHoverDayInEndSelection,
-      [_constants.cssClasses.DAY_HOVER_DAY_AROUND_SINGLE_SELECTED]: dayStatus.isHoverDayAroundOneSelected
-    });
-    const dayMainCls = (0, _classnames.default)({
-      ["".concat(_constants.cssClasses.DAY, "-main")]: true
-    });
-    const fullDateArgs = [dayNumber, fullDate, dayStatus];
-    const customRender = (0, _isFunction2.default)(renderFullDate);
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: !customRender ? dayCls : _constants.cssClasses.DAY,
-      title: fullDate,
-      key: dayNumber + dayIndex,
-      onClick: e => !dayStatus.isDisabled && this.foundation.handleClick(day),
-      onMouseEnter: () => this.foundation.handleHover(day),
-      onMouseLeave: () => this.foundation.handleHover()
-    }, customRender ? renderFullDate(...fullDateArgs) : /*#__PURE__*/_react.default.createElement("div", {
-      className: dayMainCls
-    }, (0, _isFunction2.default)(renderDate) ? renderDate(dayNumber, fullDate) : /*#__PURE__*/_react.default.createElement("span", null, dayNumber)));
-  }
-
-  render() {
-    const {
-      forwardRef
-    } = this.props;
-    const weekday = this.renderDayOfWeek();
-    const weeks = this.renderWeeks();
-    const monthCls = (0, _classnames.default)(_constants.cssClasses.MONTH);
-    const ref = forwardRef || this.monthRef;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      ref: ref,
-      className: monthCls
-    }, weekday, weeks);
-  }
-
-}
-
-exports.default = Month;
-Month.propTypes = {
-  month: _propTypes.default.object,
-  selected: _propTypes.default.object,
-  rangeStart: _propTypes.default.string,
-  rangeEnd: _propTypes.default.string,
-  offsetRangeStart: _propTypes.default.string,
-  offsetRangeEnd: _propTypes.default.string,
-  onDayClick: _propTypes.default.func,
-  onDayHover: _propTypes.default.func,
-  weekStartsOn: _propTypes.default.number,
-  disabledDate: _propTypes.default.func,
-  weeksRowNum: _propTypes.default.number,
-  onWeeksRowNumChange: _propTypes.default.func,
-  renderDate: _propTypes.default.func,
-  renderFullDate: _propTypes.default.func,
-  hoverDay: _propTypes.default.string,
-  startDateOffset: _propTypes.default.func,
-  endDateOffset: _propTypes.default.func,
-  rangeInputFocus: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  focusRecordsRef: _propTypes.default.object
-};
-Month.defaultProps = {
-  month: new Date(),
-  selected: new _set.default(),
-  rangeStart: '',
-  rangeEnd: '',
-  onDayClick: _noop2.default,
-  onDayHover: _noop2.default,
-  onWeeksRowNumChange: _noop2.default,
-  weekStartsOn: _constants.numbers.WEEK_START_ON,
-  disabledDate: _stubFalse2.default,
-  weeksRowNum: 0
-};

package/lib/cjs/datePicker/monthsGrid.d.ts

@@ -1,88 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import MonthsGridFoundation, { MonthInfo, MonthsGridAdapter, MonthsGridDateAdapter, MonthsGridFoundationProps, MonthsGridFoundationState, MonthsGridRangeAdapter, PanelType } from '@douyinfe/semi-foundation/lib/cjs/datePicker/monthsGridFoundation';
-import BaseComponent, { BaseProps } from '../_base/baseComponent';
-import Combobox from '../timePicker/Combobox';
-import YearAndMonth from './yearAndMonth';
-export interface MonthsGridProps extends MonthsGridFoundationProps, BaseProps {
-    navPrev?: React.ReactNode;
-    navNext?: React.ReactNode;
-    renderDate?: () => React.ReactNode;
-    renderFullDate?: () => React.ReactNode;
-    focusRecordsRef?: React.RefObject<{
-        rangeStart: boolean;
-        rangeEnd: boolean;
-    }>;
-}
-export declare type MonthsGridState = MonthsGridFoundationState;
-export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGridState> {
-    static propTypes: {
-        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
-        defaultValue: PropTypes.Requireable<string | number | object>;
-        defaultPickerValue: PropTypes.Requireable<string | number | object>;
-        multiple: PropTypes.Requireable<boolean>;
-        max: PropTypes.Requireable<number>;
-        weekStartsOn: PropTypes.Requireable<number>;
-        disabledDate: PropTypes.Requireable<(...args: any[]) => any>;
-        disabledTime: PropTypes.Requireable<(...args: any[]) => any>;
-        disabledTimePicker: PropTypes.Requireable<boolean>;
-        hideDisabledOptions: PropTypes.Requireable<boolean>;
-        navPrev: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        navNext: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        onMaxSelect: PropTypes.Requireable<(...args: any[]) => any>;
-        timePickerOpts: PropTypes.Requireable<object>;
-        isControlledComponent: PropTypes.Requireable<boolean>;
-        rangeStart: PropTypes.Requireable<string>;
-        rangeInputFocus: PropTypes.Requireable<string | boolean>;
-        locale: PropTypes.Requireable<object>;
-        localeCode: PropTypes.Requireable<string>;
-        format: PropTypes.Requireable<string>;
-        renderDate: PropTypes.Requireable<(...args: any[]) => any>;
-        renderFullDate: PropTypes.Requireable<(...args: any[]) => any>;
-        startDateOffset: PropTypes.Requireable<(...args: any[]) => any>;
-        endDateOffset: PropTypes.Requireable<(...args: any[]) => any>;
-        autoSwitchDate: PropTypes.Requireable<boolean>;
-        motionEnd: PropTypes.Requireable<boolean>;
-        density: PropTypes.Requireable<string>;
-        dateFnsLocale: PropTypes.Validator<object>;
-        timeZone: PropTypes.Requireable<string | number>;
-        syncSwitchMonth: PropTypes.Requireable<boolean>;
-        onPanelChange: PropTypes.Requireable<(...args: any[]) => any>;
-        focusRecordsRef: PropTypes.Requireable<object>;
-    };
-    static defaultProps: {
-        type: string;
-        rangeStart: string;
-        multiple: boolean;
-        weekStartsOn: 0;
-        disabledDate: {
-            (): false;
-            (): false;
-        };
-        onMaxSelect: (...args: any[]) => void;
-        locale: {};
-    };
-    foundation: MonthsGridFoundation;
-    constructor(props: MonthsGridProps);
-    get dateAdapter(): MonthsGridDateAdapter;
-    get rangeAdapter(): MonthsGridRangeAdapter;
-    get adapter(): MonthsGridAdapter;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: MonthsGridProps, prevState: MonthsGridState): void;
-    cacheRefCurrent: (key: string, current: Combobox | YearAndMonth | HTMLDivElement) => void;
-    leftIsYearOrTime: (state?: MonthsGridState) => boolean;
-    rightIsYearOrTime: (state?: MonthsGridState) => boolean;
-    /**
-     * Calculate the height of the scrolling list, if the animation is not over, return 0
-     */
-    calcScrollListHeight: () => number;
-    renderPanel(month: Date, panelType: PanelType): JSX.Element;
-    showYearPicker(panelType: PanelType, e: React.MouseEvent): void;
-    renderMonth(month: Date, panelType: PanelType): JSX.Element;
-    handleWeeksRowNumChange: (weeksRowNum: number, panelType: PanelType) => void;
-    reselect: () => void;
-    renderTimePicker(panelType: PanelType, panelDetail: MonthInfo): JSX.Element;
-    renderYearAndMonth(panelType: PanelType, panelDetail: MonthInfo): JSX.Element;
-    renderSwitch(panelType: PanelType): JSX.Element;
-    render(): JSX.Element;
-}