@vkontakte/vkui 5.8.2 → 5.9.1

package/src/components/DateInput/DateInput.tsx

@@ -0,0 +1,331 @@
+import * as React from 'react';
+import { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';
+import { classNames } from '@vkontakte/vkjs';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { useDateInput } from '../../hooks/useDateInput';
+import { useExternRef } from '../../hooks/useExternRef';
+import { SizeType } from '../../lib/adaptivity';
+import { callMultiple } from '../../lib/callMultiple';
+import { format, isMatch, parse } from '../../lib/date';
+import type { PlacementWithAuto } from '../../lib/floating';
+import { HasRootRef } from '../../types';
+import { Calendar, CalendarProps } from '../Calendar/Calendar';
+import { FormField, FormFieldProps } from '../FormField/FormField';
+import { IconButton } from '../IconButton/IconButton';
+import { InputLike } from '../InputLike/InputLike';
+import { InputLikeDivider } from '../InputLike/InputLikeDivider';
+import { Popper } from '../Popper/Popper';
+import { Text } from '../Typography/Text/Text';
+import '../InputLike/InputLike.module.css'; // Reorder css
+import styles from './DateInput.module.css';
+
+const sizeYClassNames = {
+  none: styles['DateInput--sizeY-none'],
+  [SizeType.COMPACT]: styles['DateInput--sizeY-compact'],
+};
+
+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'
+      | 'viewDate'
+      | 'onHeaderChange'
+      | 'onNextMonth'
+      | 'onPrevMonth'
+      | 'prevMonthIcon'
+      | 'nextMonthIcon'
+    >,
+    HasRootRef<HTMLDivElement>,
+    FormFieldProps {
+  calendarPlacement?: PlacementWithAuto;
+  closeOnChange?: boolean;
+  clearFieldAriaLabel?: string;
+  showCalendarAriaLabel?: string;
+  disableCalendar?: boolean;
+}
+
+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;
+};
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/DateInput
+ */
+export const DateInput = ({
+  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 = 'Показать календарь',
+  viewDate,
+  onHeaderChange,
+  onNextMonth,
+  onPrevMonth,
+  prevMonthIcon,
+  nextMonthIcon,
+  disableCalendar = false,
+  ...props
+}: DateInputProps) => {
+  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 = 'none' } = useAdaptivity();
+
+  const handleRootRef = useExternRef(rootRef, getRootRef);
+
+  const onCalendarChange = React.useCallback(
+    (value?: Date | undefined) => {
+      onChange?.(value);
+      if (closeOnChange && !enableTime) {
+        removeFocusFromField();
+      }
+    },
+    [onChange, removeFocusFromField, closeOnChange, enableTime],
+  );
+
+  return (
+    <FormField
+      style={style}
+      className={classNames(sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className)}
+      getRootRef={handleRootRef}
+      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.YYYYTHH:mm' : 'DD.MM.YYYY') : ''}
+      />
+      <Text className={styles['DateInput__input']} onKeyDown={handleKeyDown}>
+        <InputLike
+          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 className={styles['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>
+        )}
+      </Text>
+      {open && !disableCalendar && (
+        <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}
+            viewDate={viewDate}
+            onHeaderChange={onHeaderChange}
+            onNextMonth={onNextMonth}
+            onPrevMonth={onPrevMonth}
+            prevMonthIcon={prevMonthIcon}
+            nextMonthIcon={nextMonthIcon}
+          />
+        </Popper>
+      )}
+    </FormField>
+  );
+};

package/src/components/DatePicker/DatePicker.module.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,202 @@
+import * as React from 'react';
+import { leadingZero } from '@vkontakte/vkjs';
+import { range } from '../../helpers/range';
+import { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';
+import { HTMLAttributesWithRootRef } from '../../types';
+import { CustomSelect } from '../CustomSelect/CustomSelect';
+import { Input } from '../Input/Input';
+import { RootComponent } from '../RootComponent/RootComponent';
+import styles from './DatePicker.module.css';
+
+const DefaultMonths: string[] = [
+  'Января',
+  'Февраля',
+  'Марта',
+  'Апреля',
+  'Мая',
+  'Июня',
+  'Июля',
+  'Августа',
+  'Сентября',
+  'Октября',
+  'Ноября',
+  'Декабря',
+];
+
+export type DatePickerDateFormat = {
+  day: number;
+  month: number;
+  year: number;
+};
+
+export interface DatePickerProps
+  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'defaultValue' | 'min' | 'max'> {
+  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 DatePickerCustom = ({
+  name,
+  min = { day: 0, month: 0, year: 0 },
+  max = { day: 31, month: 12, year: 2100 },
+  dayPlaceholder,
+  monthPlaceholder,
+  yearPlaceholder,
+  popupDirection,
+  defaultValue,
+  monthNames,
+  day = 0,
+  month = 0,
+  year = 0,
+  onDateChange,
+  disabled,
+  ...restProps
+}: DatePickerProps & Partial<DatePickerDateFormat>) => {
+  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 (
+    <RootComponent baseClassName={styles['DatePicker']} {...restProps}>
+      <div className={styles['DatePicker__container']}>
+        <div className={styles['DatePicker__day']}>
+          <CustomSelect
+            name="day"
+            value={day}
+            options={dayOptions}
+            placeholder={dayPlaceholder}
+            popupDirection={popupDirection}
+            onChange={onSelectChange}
+            disabled={disabled}
+          />
+        </div>
+        <div className={styles['DatePicker__month']}>
+          <CustomSelect
+            className={styles['DatePicker__monthSelect']}
+            name="month"
+            value={month}
+            options={monthOptions}
+            placeholder={monthPlaceholder}
+            popupDirection={popupDirection}
+            onChange={onSelectChange}
+            disabled={disabled}
+          />
+        </div>
+        <div className={styles['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 })} />
+    </RootComponent>
+  );
+};
+
+const DatePickerNative = ({
+  min = { day: 0, month: 0, year: 0 },
+  max = { day: 31, month: 12, year: 2100 },
+  dayPlaceholder,
+  monthPlaceholder,
+  yearPlaceholder,
+  popupDirection,
+  defaultValue,
+  day,
+  month,
+  year,
+  onDateChange,
+  ...restProps
+}: DatePickerProps & Partial<DatePickerDateFormat>) => {
+  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}
+    />
+  );
+};
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/DatePicker
+ */
+export const DatePicker = ({ defaultValue, ...props }: DatePickerProps) => {
+  const hasPointer = useAdaptivityHasPointer();
+  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 = hasPointer ? DatePickerCustom : DatePickerNative;
+  return <Cmp {...props} {...value} onDateChange={onDateChange} />;
+};

package/src/components/DateRangeInput/DateRangeInput.module.css

@@ -0,0 +1,20 @@
+.DateRangeInput__input {
+  flex-grow: 1;
+  margin-left: 10px;
+  margin-right: 14px;
+  z-index: var(--vkui_internal--z_index_form_field_element);
+  cursor: text;
+  white-space: nowrap;
+  user-select: text;
+  font-variant-numeric: tabular-nums;
+}
+
+.DateRangeInput--sizeY-compact .DateRangeInput__input {
+  margin-right: 22px;
+}
+
+@media (--sizeY-compact) {
+  .DateRangeInput--sizeY-none .DateRangeInput__input {
+    margin-right: 22px;
+  }
+}