@snack-uikit/fields 0.30.0 → 0.32.0

package/src/hooks/dateHandlers/useDateFieldHelpersForMode.ts

@@ -0,0 +1,145 @@
+import { RefObject, useCallback, useMemo } from 'react';
+
+import { MODES, NO_SECONDS_MODE, SlotKey, SLOTS, TIME_MODES } from '../../constants';
+import { Mode, NoSecondsMode, TimeMode } from '../../types';
+import { getNextSlotKeyHandler, getPrevSlotKeyHandler, getSlotKeyFromIndexHandler } from '../../utils/dateFields';
+
+export function useDateFieldHelpersForMode({
+  inputRef,
+  mode,
+}: {
+  inputRef: RefObject<HTMLInputElement>;
+  mode: Mode | TimeMode | NoSecondsMode;
+}) {
+  const setFocus = useCallback(
+    (slotKey: string) => {
+      if (inputRef.current) {
+        const { start, end } = SLOTS[mode][slotKey];
+
+        inputRef.current.setSelectionRange(start, end);
+      }
+    },
+    [mode, inputRef],
+  );
+
+  const isAllSelected = useCallback(
+    () => inputRef.current?.value.length === inputRef.current?.selectionEnd && inputRef.current?.selectionStart === 0,
+    [inputRef],
+  );
+
+  const getSlot = useCallback(
+    (slotKey: string) => {
+      if (inputRef.current) {
+        return inputRef.current.value.slice(SLOTS[mode][slotKey].start, SLOTS[mode][slotKey].end);
+      }
+
+      return '';
+    },
+    [mode, inputRef],
+  );
+
+  const isLikeDate = useCallback(() => {
+    if (inputRef.current) {
+      return Object.keys(SLOTS[mode]).every(slotKey => getSlot(slotKey) && Number.isInteger(Number(getSlot(slotKey))));
+    }
+    return false;
+  }, [mode, getSlot, inputRef]);
+
+  const isValidInput = useCallback((): boolean => {
+    const isTimeMode = Object.values(TIME_MODES).includes(mode as TimeMode);
+
+    if (isTimeMode) {
+      return true;
+    }
+
+    const day = parseInt(getSlot(SlotKey.Day), 10);
+    const month = parseInt(getSlot(SlotKey.Month), 10);
+    const year = parseInt(getSlot(SlotKey.Year), 10);
+
+    if (!month || !day) {
+      return true;
+    }
+
+    const date = new Date(year || /* високосный год = */ 2020, month - 1, day);
+
+    return date.getDate() === day;
+  }, [getSlot, mode]);
+
+  const tryToCompleteInput = useCallback((): boolean => {
+    let isCompleted: boolean;
+
+    const parsedSlotsData = Object.keys(SLOTS[mode]).reduce(
+      (res, key) => {
+        const slotKey = key as SlotKey;
+        res[slotKey] = parseInt(getSlot(slotKey), 10);
+        return res;
+      },
+      {} as Record<SlotKey, number>,
+    );
+
+    const {
+      [SlotKey.Day]: day,
+      [SlotKey.Month]: month,
+      [SlotKey.Year]: year,
+      [SlotKey.Hours]: hours,
+      [SlotKey.Minutes]: minutes,
+      [SlotKey.Seconds]: seconds,
+    } = parsedSlotsData;
+
+    const yearSlotMeta = SLOTS[mode][SlotKey.Year];
+    const isDateCompleted = Boolean(day && month && year >= yearSlotMeta?.min && year <= yearSlotMeta?.max);
+    const isTimeCompleted = [
+      hours,
+      minutes,
+      ...(mode === MODES.DateTime || mode === TIME_MODES.FullTime ? [seconds] : []),
+    ].every(value => value !== undefined);
+
+    if (mode === MODES.DateTime || mode === NO_SECONDS_MODE) {
+      isCompleted = isDateCompleted && isTimeCompleted;
+    } else if (mode === TIME_MODES.FullTime || mode === TIME_MODES.NoSeconds) {
+      isCompleted = isTimeCompleted;
+    } else {
+      isCompleted = isDateCompleted;
+    }
+
+    if (isCompleted && inputRef.current) {
+      const lastPosition = inputRef.current?.value.length;
+      inputRef.current.selectionStart = lastPosition;
+      inputRef.current.selectionEnd = lastPosition;
+    }
+
+    return isCompleted;
+  }, [getSlot, inputRef, mode]);
+
+  const updateSlot = useCallback(
+    (slotKey: string, slotValue: number | string) => {
+      if (inputRef.current) {
+        const { start, end, max } = SLOTS[mode][slotKey];
+
+        inputRef.current.value =
+          inputRef.current.value.slice(0, start) +
+          slotValue.toString().padStart(max.toString().length, '0') +
+          inputRef.current.value.slice(end);
+        setFocus(slotKey);
+      }
+    },
+    [inputRef, setFocus, mode],
+  );
+
+  const getNextSlotKey = useMemo(() => getNextSlotKeyHandler(mode), [mode]);
+  const getPrevSlotKey = useMemo(() => getPrevSlotKeyHandler(mode), [mode]);
+  const getSlotKeyFromIndex = useMemo(() => getSlotKeyFromIndexHandler(mode), [mode]);
+
+  return {
+    isAllSelected,
+    isValidInput,
+    tryToCompleteInput,
+    getSlot,
+    updateSlot,
+    setFocus,
+    isLikeDate,
+    getNextSlotKey,
+    getPrevSlotKey,
+    getSlotKeyFromIndex,
+  };
+}

package/src/hooks/index.ts

@@ -1,3 +1,4 @@
+export * from './dateHandlers';
 export * from './useCopyButton';
 export * from './useHideButton';
 export * from './usePostfix';

package/src/hooks/styles.module.scss

@@ -1,17 +1,17 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields';
 
 .prefix {
-  color: $sys-neutral-text-support;
+  color: styles-tokens-fields.$sys-neutral-text-support;
 
   &[data-disabled] {
-    opacity: $opacity-a056;
+    opacity: styles-tokens-fields.$opacity-a056;
   }
 }
 
 .postfix {
-  color: $sys-neutral-text-support;
+  color: styles-tokens-fields.$sys-neutral-text-support;
 
   &[data-disabled] {
-    opacity: $opacity-a056;
+    opacity: styles-tokens-fields.$opacity-a056;
   }
 }

package/src/hooks/useCopyButton.tsx

@@ -36,7 +36,7 @@ export function useCopyButton({
         <ButtonCopyValue
           {...props}
           size={BUTTON_SIZE_MAP[size]}
-          valueToCopy={prefix + valueToCopy + postfix}
+          valueToCopy={(prefix ?? '') + valueToCopy + (postfix ?? '')}
           onValueRequest={onValueRequest}
           disabled={disabled}
         />

package/src/styles.module.scss

@@ -1,10 +1,10 @@
-@import "@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element";
-@import "@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields";
+@use "@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element";
+@use "@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields";
 
 $sizes: 's', 'm';
 $icon-sizes: (
-  's': $icon-xs,
-  'm': $icon-s
+  's': styles-tokens-element.$icon-xs,
+  'm': styles-tokens-element.$icon-s
 );
 
 @mixin button-styles {
@@ -15,41 +15,41 @@ $icon-sizes: (
   margin: 0;
   padding: 0;
 
-  color: $sys-neutral-text-light;
+  color: styles-tokens-element.$sys-neutral-text-light;
 
   background-color: transparent;
   border: none;
 
   @each $size in $sizes {
     &[data-size='#{$size}'] {
-      @include composite-var($fields, 'buttons', $size);
+      @include styles-tokens-element.composite-var(styles-tokens-fields.$fields, 'buttons', $size);
 
       svg {
-        width: simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
-        height: simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
+        width: styles-tokens-element.simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
+        height: styles-tokens-element.simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
       }
     }
   }
 
   &:hover {
     cursor: pointer;
-    color: $sys-neutral-text-support;
+    color: styles-tokens-element.$sys-neutral-text-support;
   }
 
   &:focus-visible {
-    @include outline-var($container-focused-s);
+    @include styles-tokens-element.outline-var(styles-tokens-element.$container-focused-s);
 
-    color: $sys-neutral-text-support;
-    outline-color: $sys-available-complementary;
-    outline-offset: $spacing-state-focus-offset;
+    color: styles-tokens-element.$sys-neutral-text-support;
+    outline-color: styles-tokens-element.$sys-available-complementary;
+    outline-offset: styles-tokens-element.$spacing-state-focus-offset;
   }
 
   &:active {
-    color: $sys-neutral-text-main;
+    color: styles-tokens-element.$sys-neutral-text-main;
   }
 
   &[data-disabled] {
     cursor: not-allowed;
-    color: $sys-neutral-text-disabled;
+    color: styles-tokens-element.$sys-neutral-text-disabled;
   }
 }

package/src/{types.ts → types/allFields.ts}

@@ -3,7 +3,7 @@ import { ReactNode } from 'react';
 import { DroplistProps, SelectionSingleState } from '@snack-uikit/list';
 import { ValueOf } from '@snack-uikit/utils';
 
-import { BUTTON_VARIANT, CONTAINER_VARIANT, VALIDATION_STATE } from './constants';
+import { BUTTON_VARIANT, CONTAINER_VARIANT, VALIDATION_STATE } from '../constants';
 
 export type ValidationState = ValueOf<typeof VALIDATION_STATE>;
 

package/src/types/dateFields.ts

@@ -0,0 +1,14 @@
+import { ValueOf } from '@snack-uikit/utils';
+
+import { MODES, NO_SECONDS_MODE, TIME_MODES } from '../constants';
+
+export type Slot = {
+  start: number;
+  end: number;
+  max: number;
+  min: number;
+};
+
+export type Mode = ValueOf<typeof MODES>;
+export type TimeMode = ValueOf<typeof TIME_MODES>;
+export type NoSecondsMode = typeof NO_SECONDS_MODE;

package/src/types/index.ts

@@ -0,0 +1,2 @@
+export * from './allFields';
+export * from './dateFields';

package/src/utils/dateFields.ts

@@ -0,0 +1,75 @@
+import { SLOT_ORDER, SlotKey, SLOTS } from '../constants';
+import { Mode, NoSecondsMode, TimeMode } from '../types';
+
+export function getSlotKeyFromIndexHandler(mode: Mode | TimeMode | NoSecondsMode) {
+  return (index: number | null): SlotKey | undefined => {
+    if (index !== null) {
+      for (const key in SLOTS[mode]) {
+        if (index >= SLOTS[mode][key].start && index <= SLOTS[mode][key].end) {
+          return key as SlotKey;
+        }
+      }
+    }
+
+    return undefined;
+  };
+}
+
+export function getNextSlotKeyHandler(mode: Mode | TimeMode | NoSecondsMode) {
+  const order = SLOT_ORDER[mode];
+
+  return (slotKey: SlotKey | undefined) => {
+    const defaultIndex = order.length - 1;
+    const defaultSLot = order[defaultIndex];
+    const currentIndex = order.indexOf(slotKey as SlotKey);
+    return currentIndex === -1 || currentIndex === defaultIndex ? defaultSLot : order[currentIndex + 1];
+  };
+}
+
+export function getPrevSlotKeyHandler(mode: Mode | TimeMode | NoSecondsMode) {
+  const order = SLOT_ORDER[mode];
+
+  return (slotKey: SlotKey | undefined) => {
+    const defaultIndex = 0;
+    const defaultSLot = order[defaultIndex];
+    const currentIndex = order.indexOf(slotKey as SlotKey);
+    return currentIndex === -1 || currentIndex === defaultIndex ? defaultSLot : order[currentIndex - 1];
+  };
+}
+
+const DATE_STUB = new Date();
+
+/**
+ * Преобразует строковое значение поля FieldDate в тип Date
+ * @function  helper
+ */
+export function parseDate(value: string) {
+  if (!value) {
+    return undefined;
+  }
+
+  const splittedValue = value.split(', ');
+  const date = splittedValue[0];
+  let time = splittedValue[1];
+
+  let [day, month, year] = date.split('.').map(Number);
+  month -= 1;
+
+  if (date.includes(':')) {
+    time = date;
+  }
+
+  if (time) {
+    if (isNaN(year) || isNaN(month) || isNaN(day)) {
+      year = DATE_STUB.getFullYear();
+      month = DATE_STUB.getMonth();
+      day = DATE_STUB.getDay();
+    }
+
+    const [hours = 0, minutes = 0, seconds = 0] = time.split(':').map(str => Number(str) ?? 0);
+
+    return new Date(year, month, day, hours, minutes, seconds);
+  }
+
+  return new Date(year, month, day);
+}

package/dist/cjs/components/FieldDate/constants.d.ts

@@ -1,10 +0,0 @@
-import { Slot } from './types';
-export declare enum SlotKey {
-    Day = "D",
-    Month = "M",
-    Year = "Y"
-}
-export declare const MASK: Record<string, string>;
-export declare const DEFAULT_LOCALE: Intl.Locale;
-export declare const SLOTS: Record<SlotKey | string, Slot>;
-export declare const SLOTS_PLACEHOLDER: Record<string, Record<string, string>>;

package/dist/cjs/components/FieldDate/constants.js

@@ -1,49 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SLOTS_PLACEHOLDER = exports.SLOTS = exports.DEFAULT_LOCALE = exports.MASK = exports.SlotKey = void 0;
-var SlotKey;
-(function (SlotKey) {
-  SlotKey["Day"] = "D";
-  SlotKey["Month"] = "M";
-  SlotKey["Year"] = "Y";
-})(SlotKey || (exports.SlotKey = SlotKey = {}));
-exports.MASK = {
-  'ru-RU': 'ДД.ММ.ГГГГ',
-  'en-US': 'DD.MM.YYYY'
-};
-exports.DEFAULT_LOCALE = new Intl.Locale('ru-RU');
-exports.SLOTS = {
-  [SlotKey.Day]: {
-    start: 0,
-    end: 2,
-    max: 31,
-    min: 1
-  },
-  [SlotKey.Month]: {
-    start: 3,
-    end: 5,
-    max: 12,
-    min: 1
-  },
-  [SlotKey.Year]: {
-    start: 6,
-    end: 10,
-    max: 2100,
-    min: 1900
-  }
-};
-exports.SLOTS_PLACEHOLDER = {
-  'ru-RU': {
-    [SlotKey.Day]: 'ДД',
-    [SlotKey.Month]: 'ММ',
-    [SlotKey.Year]: 'ГГГГ'
-  },
-  'en-US': {
-    [SlotKey.Day]: 'DD',
-    [SlotKey.Month]: 'MM',
-    [SlotKey.Year]: 'YYYY'
-  }
-};

package/dist/cjs/components/FieldDate/hooks/index.d.ts

@@ -1 +0,0 @@
-export * from './useDateField';

package/dist/cjs/components/FieldDate/hooks/useDateFieldHelpers.d.ts

@@ -1,10 +0,0 @@
-import { RefObject } from 'react';
-export declare function useDateFieldHelpers(inputRef: RefObject<HTMLInputElement>): {
-    isAllSelected: () => boolean;
-    isValidInput: () => boolean;
-    tryToCompleteInput: () => boolean;
-    getSlot: (slotKey: string) => string;
-    updateSlot: (slotKey: string, slotValue: number | string) => void;
-    setFocus: (slotKey: string) => void;
-    isLikeDate: () => boolean;
-};

package/dist/cjs/components/FieldDate/hooks/useDateFieldHelpers.js

@@ -1,82 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useDateFieldHelpers = useDateFieldHelpers;
-const react_1 = require("react");
-const constants_1 = require("../constants");
-function useDateFieldHelpers(inputRef) {
-  const setFocus = (0, react_1.useCallback)(slotKey => {
-    if (inputRef.current) {
-      const {
-        start,
-        end
-      } = constants_1.SLOTS[slotKey];
-      inputRef.current.setSelectionRange(start, end);
-    }
-  }, [inputRef]);
-  const isAllSelected = (0, react_1.useCallback)(() => {
-    var _a, _b, _c;
-    return ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value.length) === ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.selectionEnd) && ((_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.selectionStart) === 0;
-  }, [inputRef]);
-  const getSlot = (0, react_1.useCallback)(slotKey => {
-    if (inputRef.current) {
-      return inputRef.current.value.slice(constants_1.SLOTS[slotKey].start, constants_1.SLOTS[slotKey].end);
-    }
-    return '';
-  }, [inputRef]);
-  const isLikeDate = (0, react_1.useCallback)(() => {
-    if (inputRef.current) {
-      return Object.keys(constants_1.SLOTS).every(slotKey => getSlot(slotKey) && Number.isInteger(Number(getSlot(slotKey))));
-    }
-    return false;
-  }, [getSlot, inputRef]);
-  const isValidInput = (0, react_1.useCallback)(() => {
-    const day = parseInt(getSlot(constants_1.SlotKey.Day), 10);
-    const month = parseInt(getSlot(constants_1.SlotKey.Month), 10);
-    const year = parseInt(getSlot(constants_1.SlotKey.Year), 10);
-    if (!month || !day) {
-      return true;
-    }
-    const date = new Date(year || /* високосный год = */2020, month - 1, day);
-    return date.getDate() === day;
-  }, [getSlot]);
-  const tryToCompleteInput = (0, react_1.useCallback)(() => {
-    var _a;
-    const day = parseInt(getSlot(constants_1.SlotKey.Day), 10);
-    const month = parseInt(getSlot(constants_1.SlotKey.Month), 10);
-    const year = parseInt(getSlot(constants_1.SlotKey.Year), 10);
-    const {
-      min,
-      max
-    } = constants_1.SLOTS[constants_1.SlotKey.Year];
-    const isCompleted = Boolean(day && month && year >= min && year <= max);
-    if (isCompleted && inputRef.current) {
-      const lastPosition = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value.length;
-      inputRef.current.selectionStart = lastPosition;
-      inputRef.current.selectionEnd = lastPosition;
-    }
-    return isCompleted;
-  }, [getSlot, inputRef]);
-  const updateSlot = (0, react_1.useCallback)((slotKey, slotValue) => {
-    if (inputRef.current) {
-      const {
-        start,
-        end,
-        max
-      } = constants_1.SLOTS[slotKey];
-      inputRef.current.value = inputRef.current.value.slice(0, start) + slotValue.toString().padStart(max.toString().length, '0') + inputRef.current.value.slice(end);
-      setFocus(slotKey);
-    }
-  }, [inputRef, setFocus]);
-  return {
-    isAllSelected,
-    isValidInput,
-    tryToCompleteInput,
-    getSlot,
-    updateSlot,
-    setFocus,
-    isLikeDate
-  };
-}

package/dist/cjs/components/FieldDate/types.d.ts

@@ -1,6 +0,0 @@
-export type Slot = {
-    start: number;
-    end: number;
-    max: number;
-    min: number;
-};

package/dist/cjs/components/FieldDate/utils.d.ts

@@ -1,9 +0,0 @@
-import { SlotKey } from './constants';
-export declare function getSlotKey(index: number | null): string | null;
-export declare function getNextSlotKey(slotKey: string | null): SlotKey.Month | SlotKey.Year;
-export declare function getPrevSlotKey(slotKey: string | null): SlotKey.Day | SlotKey.Month;
-/**
- * Преобразует строковое значение поля FieldDate в тип Date
- * @function  helper
- */
-export declare function parseDate(date: string): Date;

package/dist/cjs/components/FieldDate/utils.js

@@ -1,56 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getSlotKey = getSlotKey;
-exports.getNextSlotKey = getNextSlotKey;
-exports.getPrevSlotKey = getPrevSlotKey;
-exports.parseDate = parseDate;
-const constants_1 = require("./constants");
-function getSlotKey(index) {
-  if (index !== null) {
-    for (const key in constants_1.SLOTS) {
-      if (index >= constants_1.SLOTS[key].start && index <= constants_1.SLOTS[key].end) {
-        return key;
-      }
-    }
-  }
-  return null;
-}
-function getNextSlotKey(slotKey) {
-  switch (slotKey) {
-    case constants_1.SlotKey.Day:
-      {
-        return constants_1.SlotKey.Month;
-      }
-    case constants_1.SlotKey.Month:
-    case constants_1.SlotKey.Year:
-    default:
-      {
-        return constants_1.SlotKey.Year;
-      }
-  }
-}
-function getPrevSlotKey(slotKey) {
-  switch (slotKey) {
-    case constants_1.SlotKey.Year:
-      {
-        return constants_1.SlotKey.Month;
-      }
-    case constants_1.SlotKey.Month:
-    case constants_1.SlotKey.Day:
-    default:
-      {
-        return constants_1.SlotKey.Day;
-      }
-  }
-}
-/**
- * Преобразует строковое значение поля FieldDate в тип Date
- * @function  helper
- */
-function parseDate(date) {
-  const values = date.split('.');
-  return new Date(Number(values[2]), Number(values[1]) - 1, Number(values[0]));
-}

package/dist/esm/components/FieldDate/constants.d.ts

@@ -1,10 +0,0 @@
-import { Slot } from './types';
-export declare enum SlotKey {
-    Day = "D",
-    Month = "M",
-    Year = "Y"
-}
-export declare const MASK: Record<string, string>;
-export declare const DEFAULT_LOCALE: Intl.Locale;
-export declare const SLOTS: Record<SlotKey | string, Slot>;
-export declare const SLOTS_PLACEHOLDER: Record<string, Record<string, string>>;

package/dist/esm/components/FieldDate/constants.js

@@ -1,28 +0,0 @@
-export var SlotKey;
-(function (SlotKey) {
-    SlotKey["Day"] = "D";
-    SlotKey["Month"] = "M";
-    SlotKey["Year"] = "Y";
-})(SlotKey || (SlotKey = {}));
-export const MASK = {
-    'ru-RU': 'ДД.ММ.ГГГГ',
-    'en-US': 'DD.MM.YYYY',
-};
-export const DEFAULT_LOCALE = new Intl.Locale('ru-RU');
-export const SLOTS = {
-    [SlotKey.Day]: { start: 0, end: 2, max: 31, min: 1 },
-    [SlotKey.Month]: { start: 3, end: 5, max: 12, min: 1 },
-    [SlotKey.Year]: { start: 6, end: 10, max: 2100, min: 1900 },
-};
-export const SLOTS_PLACEHOLDER = {
-    'ru-RU': {
-        [SlotKey.Day]: 'ДД',
-        [SlotKey.Month]: 'ММ',
-        [SlotKey.Year]: 'ГГГГ',
-    },
-    'en-US': {
-        [SlotKey.Day]: 'DD',
-        [SlotKey.Month]: 'MM',
-        [SlotKey.Year]: 'YYYY',
-    },
-};

package/dist/esm/components/FieldDate/hooks/index.d.ts

@@ -1 +0,0 @@
-export * from './useDateField';

package/dist/esm/components/FieldDate/hooks/index.js

@@ -1 +0,0 @@
-export * from './useDateField';

package/dist/esm/components/FieldDate/hooks/useDateFieldHelpers.d.ts

@@ -1,10 +0,0 @@
-import { RefObject } from 'react';
-export declare function useDateFieldHelpers(inputRef: RefObject<HTMLInputElement>): {
-    isAllSelected: () => boolean;
-    isValidInput: () => boolean;
-    tryToCompleteInput: () => boolean;
-    getSlot: (slotKey: string) => string;
-    updateSlot: (slotKey: string, slotValue: number | string) => void;
-    setFocus: (slotKey: string) => void;
-    isLikeDate: () => boolean;
-};