@semcore/date-picker 3.0.8 → 3.0.11

package/src/MonthRangePicker.jsx

@@ -1,108 +0,0 @@
-import React from 'react';
-import dayjs from 'dayjs';
-import createComponent from '@semcore/core';
-import shortDateRangeFormat from './utils/shortDateRangeFormat';
-import { Header, Next, Period, Popper, Prev, Title, Trigger } from './components';
-import { CalendarMonths as Calendar } from './components/Calendar';
-import RangePickerAbstract from './components/RangePickerAbstract';
-
-class MonthRangePickerRoot extends RangePickerAbstract {
-  static displayName = 'MonthRangePicker';
-  static defaultProps = (props) => {
-    return {
-      ...RangePickerAbstract.defaultProps(props),
-      children: (
-        <>
-          <MonthRangePicker.Trigger />
-          <MonthRangePicker.Popper />
-        </>
-      ),
-    };
-  };
-
-  navigateStep = 'year';
-  keyStep = 'month';
-  keyDiff = {
-    37: -1,
-    38: -3,
-    39: 1,
-    40: 3,
-  };
-
-  getDefaultPeriods() {
-    const { getI18nText } = this.asProps;
-    const today = new Date(new Date().setHours(0, 0, 0, 0));
-    return [
-      {
-        children: getI18nText('lastMonth'),
-        value: [
-          dayjs(today).subtract(1, 'month').startOf('month').toDate(),
-          dayjs(today).startOf('month').toDate(),
-        ],
-      },
-      {
-        children: getI18nText('last3Months'),
-        value: [
-          dayjs(today).subtract(2, 'month').startOf('month').toDate(),
-          dayjs(today).startOf('month').toDate(),
-        ],
-      },
-      {
-        children: getI18nText('last6Months'),
-        value: [
-          dayjs(today).subtract(5, 'month').startOf('month').toDate(),
-          dayjs(today).startOf('month').toDate(),
-        ],
-      },
-      {
-        children: getI18nText('last12Months'),
-        value: [
-          dayjs(today).subtract(11, 'month').startOf('month').toDate(),
-          dayjs(today).startOf('month').toDate(),
-        ],
-      },
-    ];
-  }
-
-  getTriggerProps() {
-    const { value, locale } = this.asProps;
-    return {
-      ...super.getTriggerProps(),
-      placeholder: 'Select month period',
-      children: shortDateRangeFormat(value, {
-        locale,
-        month: 'short',
-        year: 'numeric',
-      }),
-    };
-  }
-
-  getTitleProps(props, index) {
-    const { displayedPeriod, locale } = this.asProps;
-    return {
-      ...super.getTitleProps(props, index),
-      children: new Intl.DateTimeFormat(locale, { year: 'numeric' }).format(
-        dayjs(displayedPeriod).add(index, this.navigateStep).startOf(this.navigateStep).toDate(),
-      ),
-    };
-  }
-}
-
-const MonthRangePicker = createComponent(
-  MonthRangePickerRoot,
-  {
-    Trigger,
-    Popper,
-    Header,
-    Title,
-    Prev,
-    Next,
-    Calendar,
-    Period,
-  },
-  {
-    parent: Calendar,
-  },
-);
-
-export default MonthRangePicker;

package/src/components/ButtonTrigger.jsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import BaseTrigger from '@semcore/base-trigger';
-import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
-import Calendar from '@semcore/icon/Calendar/m';
-import createComponent, { Root } from '@semcore/core';
-
-const ButtonTriggerRoot = ({ Children }) => {
-  return (
-    <Root render={BaseTrigger}>
-      <ButtonTrigger.Addon tag={Calendar} />
-      {addonTextChildren(Children, ButtonTrigger.Text, ButtonTrigger.Addon)}
-    </Root>
-  );
-};
-
-ButtonTriggerRoot.displayName = 'ButtonTrigger';
-
-const ButtonTrigger = createComponent(ButtonTriggerRoot, {
-  Text: BaseTrigger.Text,
-  Addon: BaseTrigger.Addon,
-});
-
-export default ButtonTrigger;

package/src/components/Calendar.jsx

@@ -1,284 +0,0 @@
-import React from 'react';
-import dayjs from 'dayjs';
-import isBetween from 'dayjs/plugin/isBetween';
-import createComponent, { Component, Root, sstyled } from '@semcore/core';
-import { Box } from '@semcore/flex-box';
-import fire from '@semcore/utils/lib/fire';
-import includesDate from '../utils/includesDate';
-import { getLocaleDate } from '../utils/formatDate';
-
-import style from '../style/calendar.shadow.css';
-
-dayjs.extend(isBetween);
-
-const range = (N, cb) => Array.from({ length: N }, (v, k) => cb(k));
-
-function getDayJSLocaleParams(locale) {
-  if (locale.includes('en') || locale.includes('ja')) {
-    return {
-      weekStart: 0,
-      ...dayjs.Ls[locale],
-    };
-  }
-  return {
-    weekStart: 1,
-    ...dayjs.Ls[locale],
-  };
-}
-
-class CalendarWeekDaysRoot extends Component {
-  static displayName = 'CalendarWeekDays';
-  static style = style;
-  static defaultProps = {
-    locale: 'en',
-    children: ({ days }) => days.map((data, i) => <CalendarWeekDays.Unit key={i} {...data} />),
-  };
-
-  getDaysByWeek() {
-    const { locale } = this.asProps;
-
-    let date = dayjs().locale(locale, getDayJSLocaleParams(locale)).startOf('week');
-    return range(7, () => {
-      const weekday = new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(date.valueOf());
-      date = date.add(1, 'day');
-      return {
-        children: weekday,
-      };
-    });
-  }
-
-  setContext() {
-    return {
-      days: this.getDaysByWeek(),
-    };
-  }
-
-  render() {
-    const SWeekDays = Root;
-    const { Children, styles } = this.asProps;
-    return sstyled(styles)(
-      <SWeekDays render={Box}>
-        <Children />
-      </SWeekDays>,
-    );
-  }
-}
-
-function CalendarWeekUnit(props) {
-  const SWeekDay = Root;
-  return sstyled(props.styles)(<SWeekDay render={Box} />);
-}
-
-class CalendarAbstract extends Component {
-  static style = style;
-
-  today = new Date(new Date().setHours(0, 0, 0, 0));
-
-  createUnit({ date, ...other }, unit) {
-    const self = this;
-    const { disabled: _disabled, value, locale, highlighted: _highlighted } = this.asProps;
-    let value0 = value[0] ? dayjs(value[0]) : null;
-    let value1 = value[1] ? dayjs(value[1]) : null;
-    let selected;
-    if (value0 && value1) {
-      if (value0 > value1) [value1, value0] = [value0, value1];
-      selected = date.isBetween(value0, value1, unit, '()');
-    }
-    const startSelected = value0 && date.isSame(value0, unit);
-    const endSelected = value1 && date.isSame(value1, unit);
-
-    let highlighted0 = _highlighted[0] ? dayjs(_highlighted[0]) : null;
-    let highlighted1 = _highlighted[1] ? dayjs(_highlighted[1]) : highlighted0;
-    let startHighlighted, endHighlighted, highlighted;
-    if (highlighted0 && highlighted1) {
-      if (highlighted0 > highlighted1) [highlighted1, highlighted0] = [highlighted0, highlighted1];
-      highlighted = date.isBetween(highlighted0, highlighted1, unit, '[]');
-      startHighlighted = highlighted0 && date.isSame(highlighted0, 'date');
-      endHighlighted = highlighted1 && date.isSame(highlighted1, 'date');
-    }
-
-    const disabled = _disabled.some(includesDate(date, unit));
-
-    return {
-      date: getLocaleDate(date, locale),
-      children: '',
-      startSelected,
-      endSelected,
-      selected,
-      disabled,
-      highlighted,
-      startHighlighted,
-      endHighlighted,
-      today: date.isSame(self.today, unit),
-      onClick: () => {
-        const { highlighted: _highlighted } = this.asProps;
-        let highlighted = [date.valueOf()];
-
-        if (_highlighted.length === 1) {
-          highlighted = [_highlighted[0], date.valueOf()];
-        } else if (_highlighted.length >= 2) {
-          highlighted = [];
-        }
-
-        fire(this, 'onHighlightedChange', highlighted);
-        fire(this, 'onChange', date.toDate());
-      },
-      onMouseEnter: () => {
-        const { value, highlighted: _highlighted } = this.asProps;
-        if (_highlighted[0] || value.length === 1) {
-          const startDate = _highlighted[0] || value[0];
-          const highlighted = [startDate.valueOf(), date.valueOf()];
-          fire(this, 'onHighlightedChange', highlighted);
-        }
-      },
-      ...other,
-    };
-  }
-
-  handleMouseLeave = () => {
-    const { highlighted } = this.asProps;
-
-    fire(this, 'onHighlightedChange', highlighted.length ? [highlighted[0]] : []);
-  };
-}
-
-function CalendarUnit({ styles, date }) {
-  const SCalendarUnit = Root;
-  return sstyled(styles)(
-    <SCalendarUnit render={Box} tag="button" aria-hidden={!date} aria-label={date} tabIndex={-1} />,
-  );
-}
-
-class CalendarDaysRoot extends CalendarAbstract {
-  static displayName = 'CalendarDays';
-  static defaultProps = {
-    displayedPeriod: new Date(new Date().setHours(0, 0, 0, 0)),
-    disabled: [],
-    value: [],
-    locale: 'en',
-    children: ({ days }) => days.map((data, i) => <CalendarDays.Unit key={i} {...data} />),
-  };
-
-  getDaysByMonth() {
-    const { displayedPeriod, renderOutdated, locale } = this.asProps;
-    let date = dayjs(displayedPeriod).startOf('month');
-    let prevDate = date.subtract(1, 'month');
-    let nextDate = date.add(1, 'month');
-
-    /* 0 - 6 */
-    const dateStartOfWeek = date
-      .locale(locale, getDayJSLocaleParams(locale))
-      .startOf('week')
-      .get('d')
-      ? (date.get('d') || 7) - 1
-      : date.get('d');
-
-    let prevMonthDays = dateStartOfWeek
-      ? range(prevDate.daysInMonth(), () => {
-          const day = this.createUnit({ date: prevDate, outdated: true }, 'date');
-          day.children = String(prevDate.get('date'));
-          prevDate = prevDate.add(1, 'day');
-          return day;
-        }).slice(-dateStartOfWeek)
-      : [];
-
-    const monthDays = range(date.daysInMonth(), () => {
-      const day = this.createUnit({ date }, 'date');
-      day.children = String(date.get('date'));
-      date = date.add(1, 'day');
-      return day;
-    });
-
-    let nextMonthDays = range(42 - prevMonthDays.length - monthDays.length, () => {
-      const day = this.createUnit({ date: nextDate, outdated: true }, 'date');
-      day.children = String(nextDate.get('date'));
-      nextDate = nextDate.add(1, 'day');
-      return day;
-    });
-
-    if (!renderOutdated) {
-      prevMonthDays = prevMonthDays.map(() => ({
-        disabled: true,
-        children: '',
-      }));
-      nextMonthDays = [];
-    }
-
-    return [...prevMonthDays, ...monthDays, ...nextMonthDays];
-  }
-
-  setContext() {
-    return {
-      days: this.getDaysByMonth(),
-    };
-  }
-
-  render() {
-    const SCalendar = Root;
-    const SGridDays = 'div';
-    const { Children, styles, locale } = this.asProps;
-
-    return sstyled(styles)(
-      <SCalendar render={Box}>
-        <CalendarWeekDays locale={locale} />
-        <SGridDays onMouseLeave={this.handleMouseLeave}>
-          <Children />
-        </SGridDays>
-      </SCalendar>,
-    );
-  }
-}
-
-class CalendarMonthsRoot extends CalendarAbstract {
-  static displayName = 'CalendarMonths';
-  static defaultProps = {
-    children: ({ months }) => months.map((data, i) => <CalendarMonths.Unit key={i} {...data} />),
-  };
-
-  getMonthsByYear() {
-    const { displayedPeriod, locale } = this.asProps;
-
-    let date = dayjs(displayedPeriod).startOf('year');
-
-    return range(12, () => {
-      const month = this.createUnit({ date }, 'month');
-      month.children = new Intl.DateTimeFormat(locale, { month: 'short' }).format(date.valueOf());
-      date = date.add(1, 'month');
-      return month;
-    });
-  }
-
-  setContext() {
-    return {
-      months: this.getMonthsByYear(),
-    };
-  }
-
-  render() {
-    const SCalendar = Root;
-    const SGridMonths = 'div';
-    const { Children, styles } = this.asProps;
-
-    return sstyled(styles)(
-      <SCalendar render={Box}>
-        <SGridMonths onMouseLeave={this.handleMouseLeave}>
-          <Children />
-        </SGridMonths>
-      </SCalendar>,
-    );
-  }
-}
-
-const CalendarWeekDays = createComponent(CalendarWeekDaysRoot, {
-  Unit: CalendarWeekUnit,
-});
-
-const CalendarDays = createComponent(CalendarDaysRoot, {
-  Unit: CalendarUnit,
-});
-
-const CalendarMonths = createComponent(CalendarMonthsRoot, {
-  Unit: CalendarUnit,
-});
-
-export { CalendarUnit, CalendarWeekDays, CalendarDays, CalendarMonths };

package/src/components/PickerAbstract.jsx

@@ -1,199 +0,0 @@
-import React from 'react';
-import dayjs from 'dayjs';
-import { Component, Root, CORE_INSTANCE, sstyled } from '@semcore/core';
-import Dropdown from '@semcore/dropdown';
-import i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';
-import de from '../translations/de.json';
-import en from '../translations/en.json';
-import es from '../translations/es.json';
-import fr from '../translations/fr.json';
-import it from '../translations/it.json';
-import ja from '../translations/ja.json';
-import pt from '../translations/pt.json';
-import ru from '../translations/ru.json';
-import zh from '../translations/zh.json';
-import ko from '../translations/ko.json';
-import vi from '../translations/vi.json';
-
-import style from '../style/date-picker.shadow.css';
-import includesDate from '../utils/includesDate';
-
-const i18n = { de, en, es, fr, it, ja, ru, zh, pt, ko, vi };
-
-const INTERACTION_TAGS = ['INPUT'];
-
-const defaultDisplayedPeriod = new Date(new Date().setHours(0, 0, 0, 0));
-
-class PickerAbstract extends Component {
-  static displayName = 'DatePicker';
-  static style = style;
-  static defaultProps({ value, defaultValue }) {
-    return {
-      i18n,
-      locale: 'en',
-      defaultDisplayedPeriod: value || defaultValue || defaultDisplayedPeriod,
-      defaultValue: null,
-      defaultVisible: false,
-      defaultHighlighted: [],
-      disabled: [],
-      size: 'm',
-    };
-  }
-  static enhance = [i18nEnhance()];
-
-  static add = (date, amount, unit) => {
-    return dayjs(date).add(amount, unit).toDate();
-  };
-
-  static subtract = (date, amount, unit) => {
-    return dayjs(date).subtract(amount, unit).toDate();
-  };
-
-  navigateStep;
-  keyDiff;
-  keyStep;
-
-  uncontrolledProps() {
-    return {
-      displayedPeriod: null,
-      visible: [
-        null,
-        (visible) => {
-          if (!visible) {
-            this.handlers.highlighted([]);
-            this.handlers.displayedPeriod(this.asProps.value || this.props.defaultDisplayedPeriod);
-          }
-        },
-      ],
-      highlighted: null,
-      value: [
-        null,
-        (value) => {
-          // TODO: работает только из-за new Date() !== new Date()
-          this.handlers.visible(false);
-          this.handlers.displayedPeriod(value);
-        },
-      ],
-    };
-  }
-
-  navigateView = (direction) => {
-    const { displayedPeriod } = this.asProps;
-    const action = direction >= 1 ? 'add' : 'subtract';
-    const date = dayjs(displayedPeriod)[action](1, this.navigateStep).toDate();
-    this.handlers.displayedPeriod(date);
-  };
-
-  bindHandlerNavigateClick = (direction) => () => {
-    this.navigateView(direction);
-  };
-
-  handlerKeyDown = (e) => {
-    if (e.target !== e.currentTarget) return;
-    const { value, displayedPeriod, highlighted, disabled: _disabled } = this.asProps;
-    const day = this.keyDiff[e.keyCode];
-
-    const getCurrentHighlightedDay = (day) => {
-      const current_day = day.toDate();
-      const isDisabledDay = _disabled.some(includesDate(dayjs(current_day), 'date'));
-      return isDisabledDay ? null : current_day;
-    };
-
-    if (e.keyCode === 32 || (e.keyCode === 13 && highlighted.length)) {
-      this.handlers.value(highlighted[0]);
-      e.preventDefault();
-    }
-    if (day) {
-      if (INTERACTION_TAGS.includes(e.target.tagName)) return;
-      const current_highlighted =
-        !highlighted[0] && !value
-          ? dayjs(highlighted[0] || displayedPeriod)
-          : dayjs(displayedPeriod).add(day, this.keyStep);
-      const current_day =
-        getCurrentHighlightedDay(current_highlighted) ||
-        getCurrentHighlightedDay(dayjs(highlighted[0] || displayedPeriod));
-
-      if (current_day) {
-        this.handlers.highlighted([current_day]);
-        this.handlers.displayedPeriod(current_day);
-        e.preventDefault();
-      }
-    }
-  };
-
-  getTriggerProps() {
-    const { value, size } = this.asProps;
-    return {
-      size,
-      empty: !value,
-      onKeyDown: this.handlerKeyDown,
-    };
-  }
-
-  getPopperProps() {
-    const Picker = this[CORE_INSTANCE];
-    return {
-      tabIndex: 0,
-      onKeyDown: this.handlerKeyDown,
-      children: (
-        <>
-          <Picker.Header />
-          <Picker.Calendar />
-        </>
-      ),
-    };
-  }
-
-  getHeaderProps() {
-    const Picker = this[CORE_INSTANCE];
-    return {
-      children: (
-        <>
-          <Picker.Prev />
-          <Picker.Title />
-          <Picker.Next />
-        </>
-      ),
-    };
-  }
-
-  getTitleProps() {
-    return {};
-  }
-
-  getNextProps() {
-    return {
-      onClick: this.bindHandlerNavigateClick(1),
-    };
-  }
-
-  getPrevProps() {
-    return {
-      onClick: this.bindHandlerNavigateClick(-1),
-    };
-  }
-
-  getCalendarProps() {
-    const { locale, displayedPeriod, disabled, value, onChange, highlighted } = this.asProps;
-    return {
-      locale,
-      displayedPeriod,
-      disabled,
-      onChange,
-      highlighted,
-      value: [value, value],
-      renderOutdated: true,
-    };
-  }
-
-  render() {
-    const { styles, Children } = this.asProps;
-    return sstyled(styles)(
-      <Root render={Dropdown}>
-        <Children />
-      </Root>,
-    );
-  }
-}
-
-export default PickerAbstract;