@vkontakte/vkui 4.28.0 → 4.28.1

package/src/components/DateInput/DateInput.tsx

@@ -0,0 +1,317 @@
+import * as React from "react";
+import { format, isMatch, parse } from "date-fns";
+import { Icon16Clear, Icon20CalendarOutline } from "@vkontakte/icons";
+import { Calendar, CalendarProps } from "../Calendar/Calendar";
+import { Popper, Placement } from "../Popper/Popper";
+import { multiRef } from "../../lib/utils";
+import IconButton from "../IconButton/IconButton";
+import { classNames } from "../../lib/classNames";
+import { FormField } from "../FormField/FormField";
+import { HasRootRef } from "../../types";
+import { useDateInput } from "../../hooks/useDateInput";
+import { InputLike } from "../InputLike/InputLike";
+import { InputLikeDivider } from "../InputLike/InputLikeDivider";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { callMultiple } from "../../lib/callMultiple";
+import "./DateInput.css";
+
+export interface DateInputProps
+  extends Omit<
+      React.InputHTMLAttributes<HTMLDivElement>,
+      "value" | "onChange" | "size"
+    >,
+    Pick<
+      CalendarProps,
+      | "disablePast"
+      | "disableFuture"
+      | "enableTime"
+      | "shouldDisableDate"
+      | "onChange"
+      | "value"
+      | "doneButtonText"
+      | "weekStartsOn"
+      | "disablePickers"
+      | "changeHoursAriaLabel"
+      | "changeMinutesAriaLabel"
+      | "prevMonthAriaLabel"
+      | "nextMonthAriaLabel"
+      | "changeMonthAriaLabel"
+      | "changeYearAriaLabel"
+      | "changeDayAriaLabel"
+      | "showNeighboringMonth"
+      | "size"
+    >,
+    HasRootRef<HTMLDivElement> {
+  calendarPlacement?: Placement;
+  closeOnChange?: boolean;
+  clearFieldAriaLabel?: string;
+  showCalendarAriaLabel?: string;
+}
+
+const elementsConfig = (index: number) => {
+  let length = 2;
+  let min = 1;
+  let max = 0;
+
+  switch (index) {
+    case 0:
+      max = 31;
+      break;
+    case 1:
+      max = 12;
+      break;
+    case 2:
+      max = 2100;
+      min = 1900;
+      length = 4;
+      break;
+    case 3:
+      max = 23;
+      break;
+    case 4:
+      max = 59;
+      break;
+  }
+
+  return { length, min, max };
+};
+
+const getInternalValue = (value: CalendarProps["value"]) => {
+  const newValue = ["", "", "", "", ""];
+  if (value) {
+    newValue[0] = String(value.getDate()).padStart(2, "0");
+    newValue[1] = String(value.getMonth() + 1).padStart(2, "0");
+    newValue[2] = String(value.getFullYear()).padStart(4, "0");
+    newValue[3] = String(value.getHours()).padStart(2, "0");
+    newValue[4] = String(value.getMinutes()).padStart(2, "0");
+  }
+  return newValue;
+};
+
+export const DateInput: React.FC<DateInputProps> = ({
+  enableTime,
+  shouldDisableDate,
+  disableFuture,
+  disablePast,
+  value,
+  onChange,
+  calendarPlacement = "bottom-start",
+  style,
+  className,
+  doneButtonText,
+  closeOnChange = true,
+  disablePickers,
+  getRootRef,
+  name,
+  autoFocus,
+  disabled,
+  onClick,
+  onFocus,
+  prevMonthAriaLabel,
+  nextMonthAriaLabel,
+  showNeighboringMonth,
+  size,
+  changeMonthAriaLabel = "Изменить месяц",
+  changeYearAriaLabel = "Изменить год",
+  changeDayAriaLabel = "Изменить день",
+  changeHoursAriaLabel = "Изменить час",
+  changeMinutesAriaLabel = "Изменить минуту",
+  clearFieldAriaLabel = "Очистить поле",
+  showCalendarAriaLabel = "Показать календарь",
+  ...props
+}) => {
+  const daysRef = React.useRef<HTMLSpanElement>(null);
+  const monthsRef = React.useRef<HTMLSpanElement>(null);
+  const yearsRef = React.useRef<HTMLSpanElement>(null);
+  const hoursRef = React.useRef<HTMLSpanElement>(null);
+  const minutesRef = React.useRef<HTMLSpanElement>(null);
+
+  const maxElement = enableTime ? 4 : 2;
+
+  const onInternalValueChange = React.useCallback(
+    (internalValue: string[]) => {
+      for (let i = 0; i <= maxElement; i += 1) {
+        if (internalValue[i].length < elementsConfig(i).length) {
+          return;
+        }
+      }
+
+      let formattedValue = `${internalValue[0]}.${internalValue[1]}.${internalValue[2]}`;
+      let mask = "dd.MM.yyyy";
+      if (enableTime) {
+        formattedValue += ` ${internalValue[3]}:${internalValue[4]}`;
+        mask += " HH:mm";
+      }
+
+      if (isMatch(formattedValue, mask)) {
+        onChange?.(parse(formattedValue, mask, value ?? new Date()));
+      }
+    },
+    [enableTime, maxElement, onChange, value]
+  );
+
+  const refs = React.useMemo(
+    () => [daysRef, monthsRef, yearsRef, hoursRef, minutesRef],
+    [daysRef, monthsRef, yearsRef, hoursRef, minutesRef]
+  );
+
+  const {
+    rootRef,
+    calendarRef,
+    open,
+    openCalendar,
+    closeCalendar,
+    internalValue,
+    handleKeyDown,
+    setFocusedElement,
+    handleFieldEnter,
+    clear,
+    removeFocusFromField,
+  } = useDateInput({
+    maxElement,
+    refs,
+    autoFocus,
+    disabled,
+    elementsConfig,
+    onChange,
+    onInternalValueChange,
+    getInternalValue,
+    value,
+  });
+
+  const { sizeY } = useAdaptivity();
+
+  const onCalendarChange = React.useCallback(
+    (value?: Date | undefined) => {
+      onChange?.(value);
+      if (closeOnChange && !enableTime) {
+        removeFocusFromField();
+      }
+    },
+    [onChange, removeFocusFromField, closeOnChange, enableTime]
+  );
+
+  return (
+    <FormField
+      vkuiClass={classNames("DateInput", `DateInput--sizeY-${sizeY}`)}
+      style={style}
+      className={className}
+      getRootRef={multiRef(rootRef, getRootRef)}
+      after={
+        value ? (
+          <IconButton
+            hoverMode="opacity"
+            aria-label={clearFieldAriaLabel}
+            onClick={clear}
+          >
+            <Icon16Clear />
+          </IconButton>
+        ) : (
+          <IconButton
+            hoverMode="opacity"
+            aria-label={showCalendarAriaLabel}
+            onClick={openCalendar}
+          >
+            <Icon20CalendarOutline />
+          </IconButton>
+        )
+      }
+      disabled={disabled}
+      onClick={callMultiple(handleFieldEnter, onClick)}
+      onFocus={callMultiple(handleFieldEnter, onFocus)}
+      {...props}
+    >
+      <input
+        type="hidden"
+        name={name}
+        value={
+          value
+            ? format(value, enableTime ? "dd.MM.yyyy'T'HH:mm" : "dd.MM.yyyy")
+            : ""
+        }
+      />
+      <span vkuiClass="DateInput__input" onKeyDown={handleKeyDown}>
+        <InputLike
+          tabIndex={1}
+          length={2}
+          getRootRef={daysRef}
+          index={0}
+          onElementSelect={setFocusedElement}
+          value={internalValue[0]}
+          aria-label={changeDayAriaLabel}
+        />
+        <InputLikeDivider>.</InputLikeDivider>
+        <InputLike
+          length={2}
+          getRootRef={monthsRef}
+          index={1}
+          onElementSelect={setFocusedElement}
+          value={internalValue[1]}
+          aria-label={changeMonthAriaLabel}
+        />
+        <InputLikeDivider>.</InputLikeDivider>
+        <InputLike
+          length={4}
+          getRootRef={yearsRef}
+          index={2}
+          onElementSelect={setFocusedElement}
+          value={internalValue[2]}
+          aria-label={changeYearAriaLabel}
+        />
+        {enableTime && (
+          <React.Fragment>
+            <InputLikeDivider vkuiClass="DateInput__input-time-divider">
+              {" "}
+            </InputLikeDivider>
+            <InputLike
+              length={2}
+              getRootRef={hoursRef}
+              index={3}
+              onElementSelect={setFocusedElement}
+              value={internalValue[3]}
+              aria-label={changeHoursAriaLabel}
+            />
+            <InputLikeDivider>:</InputLikeDivider>
+            <InputLike
+              length={2}
+              getRootRef={minutesRef}
+              index={4}
+              onElementSelect={setFocusedElement}
+              value={internalValue[4]}
+              aria-label={changeMinutesAriaLabel}
+            />
+          </React.Fragment>
+        )}
+      </span>
+      {open && (
+        <Popper
+          targetRef={rootRef}
+          offsetDistance={8}
+          placement={calendarPlacement}
+        >
+          <Calendar
+            value={value}
+            onChange={onCalendarChange}
+            enableTime={enableTime}
+            disablePast={disablePast}
+            disableFuture={disableFuture}
+            shouldDisableDate={shouldDisableDate}
+            onClose={closeCalendar}
+            getRootRef={calendarRef}
+            doneButtonText={doneButtonText}
+            disablePickers={disablePickers}
+            changeHoursAriaLabel={changeHoursAriaLabel}
+            changeMinutesAriaLabel={changeMinutesAriaLabel}
+            prevMonthAriaLabel={prevMonthAriaLabel}
+            nextMonthAriaLabel={nextMonthAriaLabel}
+            changeMonthAriaLabel={changeMonthAriaLabel}
+            changeYearAriaLabel={changeYearAriaLabel}
+            changeDayAriaLabel={changeDayAriaLabel}
+            showNeighboringMonth={showNeighboringMonth}
+            size={size}
+          />
+        </Popper>
+      )}
+    </FormField>
+  );
+};

package/src/components/DateInput/Readme.md

@@ -0,0 +1,116 @@
+Компонент выбора даты.
+
+> ⚠️ Данный компонент предназначен для использования на desktop. При использовании на ios/android работа компонента не гарантируется
+
+```jsx { "props": { "layout": false, "iframe": false } }
+import { format } from "date-fns";
+
+const Example = () => {
+  const [value, setValue] = useState(new Date());
+  const [enableTime, setEnableTime] = useState(false);
+  const [disablePast, setDisablePast] = useState(false);
+  const [disableFuture, setDisableFuture] = useState(false);
+  const [disablePickers, setDisablePickers] = useState(false);
+  const [closeOnChange, setCloseOnChange] = useState(true);
+  const [showNeighboringMonth, setShowNeighboringMonth] = useState(false);
+  const [locale, setLocale] = useState("ru");
+
+  return (
+    <FormLayout>
+      <FormLayoutGroup mode="vertical">
+        <FormItem top="Выбор времени">
+          <Checkbox
+            checked={enableTime}
+            onChange={(e) => setEnableTime(e.target.checked)}
+          >
+            Включено
+          </Checkbox>
+        </FormItem>
+        <FormItem top="Запрет выбора прошлых дат">
+          <Checkbox
+            checked={disablePast}
+            onChange={(e) => setDisablePast(e.target.checked)}
+          >
+            Включено
+          </Checkbox>
+        </FormItem>
+        <FormItem top="Запрет выбора будущих дат">
+          <Checkbox
+            checked={disableFuture}
+            onChange={(e) => setDisableFuture(e.target.checked)}
+          >
+            Включено
+          </Checkbox>
+        </FormItem>
+        <FormItem top="Закрывать календарь послы выбора даты">
+          <Checkbox
+            checked={closeOnChange}
+            onChange={(e) => setCloseOnChange(e.target.checked)}
+          >
+            Включено
+          </Checkbox>
+        </FormItem>
+        <FormItem top="Отключить селекты выбора месяца/года">
+          <Checkbox
+            checked={disablePickers}
+            onChange={(e) => setDisablePickers(e.target.checked)}
+          >
+            Включено
+          </Checkbox>
+        </FormItem>
+        <FormItem top="Отображать даты с прошлого и следующего месяца">
+          <Checkbox
+            checked={showNeighboringMonth}
+            onChange={(e) => setShowNeighboringMonth(e.target.checked)}
+          >
+            Включено
+          </Checkbox>
+        </FormItem>
+        <FormItem top="Локаль">
+          <Select
+            style={{ width: 100 }}
+            value={locale}
+            onChange={(e) => setLocale(e.target.value)}
+            options={[
+              {
+                label: "ru",
+                value: "ru",
+              },
+              {
+                label: "en",
+                value: "en",
+              },
+              {
+                label: "ar",
+                value: "ar",
+              },
+              {
+                label: "fr",
+                value: "fr",
+              },
+            ]}
+          />
+        </FormItem>
+        <FormItem>
+          <div style={{ display: "flex" }}>
+            <LocaleProviderContext.Provider value={locale}>
+              <DateInput
+                value={value}
+                onChange={setValue}
+                enableTime={enableTime}
+                disablePast={disablePast}
+                disableFuture={disableFuture}
+                closeOnChange={closeOnChange}
+                disablePickers={disablePickers}
+                showNeighboringMonth={showNeighboringMonth}
+              />
+            </LocaleProviderContext.Provider>
+          </div>
+        </FormItem>
+      </FormLayoutGroup>
+    </FormLayout>
+  );
+};
+
+<Example />;
+```

package/src/components/DatePicker/DatePicker.css

@@ -0,0 +1,30 @@
+.DatePicker {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.DatePicker__container {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+}
+
+.DatePicker__day {
+  min-width: 72px;
+}
+
+.DatePicker__month {
+  min-width: 0;
+  display: flex;
+  flex: 1 0 0;
+  padding: 0 8px;
+}
+
+.DatePicker__year {
+  min-width: 92px;
+}
+
+.DatePicker__monthSelect {
+  width: 100%;
+}

package/src/components/DatePicker/DatePicker.tsx

@@ -0,0 +1,238 @@
+import * as React from "react";
+import Input from "../Input/Input";
+import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
+import { HasPlatform } from "../../types";
+import { leadingZero } from "../../lib/utils";
+import CustomSelect from "../CustomSelect/CustomSelect";
+import "./DatePicker.css";
+
+const DefaultMonths: string[] = [
+  "Января",
+  "Февраля",
+  "Марта",
+  "Апреля",
+  "Мая",
+  "Июня",
+  "Июля",
+  "Августа",
+  "Сентября",
+  "Октября",
+  "Ноября",
+  "Декабря",
+];
+
+export type DatePickerDateFormat = {
+  day: number;
+  month: number;
+  year: number;
+};
+
+export interface DatePickerProps
+  extends Omit<
+      React.HTMLAttributes<HTMLDivElement>,
+      "defaultValue" | "min" | "max"
+    >,
+    HasPlatform,
+    AdaptivityProps {
+  min?: DatePickerDateFormat;
+  max?: DatePickerDateFormat;
+  name?: string;
+  defaultValue?: DatePickerDateFormat;
+  popupDirection?: "top" | "bottom";
+  monthNames?: string[];
+  dayPlaceholder?: string;
+  monthPlaceholder?: string;
+  yearPlaceholder?: string;
+  onDateChange?: (value: DatePickerDateFormat) => void;
+  disabled?: boolean;
+}
+
+// Переводим state к формату гг-мм-дд
+function convertToInputFormat({
+  day = 0,
+  month = 0,
+  year = 0,
+}: Partial<DatePickerDateFormat>) {
+  return `${year}-${leadingZero(month)}-${leadingZero(day)}`;
+}
+
+// Переводим дату формата гг-мм-дд к объекту
+function parseInputDate(date: string): DatePickerDateFormat {
+  const splited = date.split("-");
+
+  return {
+    day: Number(splited[2]),
+    month: Number(splited[1]),
+    year: Number(splited[0]),
+  };
+}
+
+function getMonthMaxDay(month?: number, year?: number) {
+  return month ? new Date(year || 2016, month, 0).getDate() : 31;
+}
+
+const range = (start: number, end: number) => {
+  const swap = start > end;
+  const arr = [];
+  for (let i = Math.min(start, end); i <= Math.max(start, end); i++) {
+    arr.push(i);
+  }
+  return swap ? arr.reverse() : arr;
+};
+
+const DatePickerCustom: React.FC<
+  DatePickerProps & Partial<DatePickerDateFormat>
+> = ({
+  name,
+  min = { day: 0, month: 0, year: 0 },
+  max = { day: 31, month: 12, year: 2100 },
+  dayPlaceholder,
+  monthPlaceholder,
+  yearPlaceholder,
+  popupDirection,
+  defaultValue,
+  hasMouse,
+  monthNames,
+  day = 0,
+  month = 0,
+  year = 0,
+  onDateChange,
+  disabled,
+  ...restProps
+}) => {
+  const onSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {
+    onDateChange?.({
+      day,
+      month,
+      year,
+      [e.target.name]: Number(e.target.value),
+    });
+  };
+  const dayOptions = range(1, getMonthMaxDay(month, year)).map((value) => ({
+    label: String(value),
+    value,
+  }));
+  const monthOptions = (monthNames || DefaultMonths).map((name, index) => ({
+    label: name,
+    value: index + 1,
+  }));
+  const yearOptions = range(max.year, min.year).map((value) => ({
+    label: String(value),
+    value: value,
+  }));
+  return (
+    <div vkuiClass="DatePicker" {...restProps}>
+      <div vkuiClass="DatePicker__container">
+        <div vkuiClass="DatePicker__day">
+          <CustomSelect
+            name="day"
+            value={day}
+            options={dayOptions}
+            placeholder={dayPlaceholder}
+            popupDirection={popupDirection}
+            onChange={onSelectChange}
+            disabled={disabled}
+          />
+        </div>
+        <div vkuiClass="DatePicker__month">
+          <CustomSelect
+            vkuiClass="DatePicker__monthSelect"
+            name="month"
+            value={month}
+            options={monthOptions}
+            placeholder={monthPlaceholder}
+            popupDirection={popupDirection}
+            onChange={onSelectChange}
+            disabled={disabled}
+          />
+        </div>
+        <div vkuiClass="DatePicker__year">
+          <CustomSelect
+            name="year"
+            value={year}
+            options={yearOptions}
+            placeholder={yearPlaceholder}
+            popupDirection={popupDirection}
+            onChange={onSelectChange}
+            disabled={disabled}
+          />
+        </div>
+      </div>
+      <input
+        type="hidden"
+        name={name}
+        value={convertToInputFormat({ day, month, year })}
+      />
+    </div>
+  );
+};
+
+const DatePickerNative: React.FC<
+  DatePickerProps & Partial<DatePickerDateFormat>
+> = ({
+  min = { day: 0, month: 0, year: 0 },
+  max = { day: 31, month: 12, year: 2100 },
+  dayPlaceholder,
+  monthPlaceholder,
+  yearPlaceholder,
+  popupDirection,
+  defaultValue,
+  hasMouse,
+  day,
+  month,
+  year,
+  onDateChange,
+  ...restProps
+}) => {
+  const defProps =
+    day && month && year
+      ? { defaultValue: convertToInputFormat({ day, month, year }) }
+      : {};
+  const onStringChange: React.ChangeEventHandler<HTMLInputElement> =
+    React.useCallback(
+      (e) => {
+        onDateChange?.(parseInputDate(e.currentTarget.value));
+      },
+      [onDateChange]
+    );
+  return (
+    <Input
+      {...restProps}
+      type="date"
+      onChange={onStringChange}
+      min={convertToInputFormat(min)}
+      max={convertToInputFormat(max)}
+      {...defProps}
+    />
+  );
+};
+
+const DatePicker: React.FC<DatePickerProps> = ({
+  hasMouse,
+  defaultValue,
+  ...props
+}) => {
+  const [value, setValue] = React.useState<Partial<DatePickerDateFormat>>(
+    () => ({
+      day: defaultValue?.day || 0,
+      month: defaultValue?.month || 0,
+      year: defaultValue?.year || 0,
+    })
+  );
+
+  const onDateChange = React.useCallback(
+    (update: DatePickerDateFormat) => {
+      setValue(update);
+      props.onDateChange && props.onDateChange({ ...update });
+    },
+    [props]
+  );
+
+  const Cmp = hasMouse ? DatePickerCustom : DatePickerNative;
+  return <Cmp {...props} {...value} onDateChange={onDateChange} />;
+};
+
+// eslint-disable-next-line import/no-default-export
+export default withAdaptivity(DatePicker, {
+  hasMouse: true,
+});