@cloud-ru/uikit-product-mobile-chips 0.8.36

package/src/components/MobileChipChoice/components/MobileChipChoiceDate.tsx

@@ -0,0 +1,135 @@
+import { ReactNode, useCallback, useMemo, useRef } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { MobileDropdown } from '@cloud-ru/uikit-product-mobile-dropdown';
+import { Calendar, CalendarProps } from '@snack-uikit/calendar';
+import { Scroll } from '@snack-uikit/scroll';
+import { useValueControl } from '@snack-uikit/utils';
+
+import { CHIP_CHOICE_TEST_IDS, SIZE } from '../../../constants';
+import { DEFAULT_LOCALE } from '../constants';
+import { useHandleOnKeyDown } from '../hooks';
+import { ChipChoiceCommonProps } from '../types';
+import { ChipChoiceBase } from './ChipChoiceBase';
+import styles from './styles.module.scss';
+
+type ChipChoiceDateWithSeconds = {
+  mode?: 'date-time';
+  showSeconds?: boolean;
+};
+
+export type MobileChipChoiceDateProps = ChipChoiceCommonProps & {
+  /** Значение компонента */
+  value?: Date;
+  /** Значение компонента по-умолчанию */
+  defaultValue?: Date;
+  /** Колбек смены значения */
+  onChange?(value: Date): void;
+  /** Колбек формирующий строковое представление выбранного значения. Принимает выбранное значение */
+  valueRender?(value?: Date): ReactNode;
+  mode?: Exclude<CalendarProps['mode'], 'range'>;
+} & (
+    | ChipChoiceDateWithSeconds
+    | {
+        mode?: 'date' | 'month' | 'year';
+      }
+  );
+
+export function MobileChipChoiceDate({
+  size = SIZE.S,
+  value,
+  defaultValue,
+  onChange,
+  valueRender,
+  mode = 'date',
+  onClearButtonClick,
+  open: openProp,
+  onOpenChange,
+  ...rest
+}: MobileChipChoiceDateProps) {
+  const [selectedValue, setSelectedValue] = useValueControl<Date>({ value, defaultValue, onChange });
+
+  const showSeconds = mode === 'date-time' ? ((rest as ChipChoiceDateWithSeconds).showSeconds ?? true) : undefined;
+
+  const localRef = useRef<HTMLDivElement>(null);
+
+  const [open, setOpen] = useUncontrolledProp(openProp, false, onOpenChange);
+  const handleOnKeyDown = useHandleOnKeyDown({ setOpen });
+
+  const closeDroplist = useCallback(() => {
+    setOpen(false);
+    setTimeout(() => localRef.current?.focus(), 0);
+  }, [setOpen]);
+
+  const { t } = useLocale('Chips');
+
+  const valueToRender = useMemo(() => {
+    if (valueRender) {
+      return valueRender(selectedValue);
+    }
+
+    if (!selectedValue) return t('allLabel');
+
+    const date = new Date(selectedValue);
+
+    if (mode === 'date-time') {
+      return date.toLocaleString(DEFAULT_LOCALE, {
+        year: 'numeric',
+        month: 'numeric',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: showSeconds ? '2-digit' : undefined,
+      });
+    }
+
+    return date.toLocaleDateString(DEFAULT_LOCALE, {
+      year: 'numeric',
+      month: 'numeric',
+      day: mode === 'date' ? 'numeric' : undefined,
+    });
+  }, [mode, selectedValue, showSeconds, t, valueRender]);
+
+  const handleChangeValue = useCallback(
+    (value: Date) => {
+      setSelectedValue(value);
+      closeDroplist();
+    },
+    [closeDroplist, setSelectedValue],
+  );
+
+  const navigationStartRef = useRef<HTMLButtonElement>(null);
+
+  return (
+    <MobileDropdown
+      content={
+        <Scroll className={mode === 'date-time' ? styles.dateTimeWrapper : styles.dateWrapper} barHideStrategy='never'>
+          <Calendar
+            mode={mode}
+            size='l'
+            value={selectedValue}
+            onChangeValue={handleChangeValue}
+            navigationStartRef={navigationStartRef}
+            onFocusLeave={closeDroplist}
+            showSeconds={showSeconds}
+            locale={DEFAULT_LOCALE}
+          />
+        </Scroll>
+      }
+      open={open}
+      onOpenChange={setOpen}
+      data-test-id={CHIP_CHOICE_TEST_IDS.droplist}
+    >
+      <ChipChoiceBase
+        {...rest}
+        ref={localRef}
+        onClearButtonClick={onClearButtonClick}
+        value={selectedValue}
+        valueToRender={valueToRender}
+        size={size}
+        onKeyDown={handleOnKeyDown()}
+      />
+    </MobileDropdown>
+  );
+}

package/src/components/MobileChipChoice/components/MobileChipChoiceDateRange.tsx

@@ -0,0 +1,101 @@
+import { ReactNode, useCallback, useRef } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { MobileDropdown } from '@cloud-ru/uikit-product-mobile-dropdown';
+import { Calendar } from '@snack-uikit/calendar';
+
+import { CHIP_CHOICE_TEST_IDS, DEFAULT_EMPTY_VALUE, SIZE } from '../../../constants';
+import { useHandleOnKeyDown } from '../hooks';
+import { ChipChoiceCommonProps } from '../types';
+import { ChipChoiceBase } from './ChipChoiceBase';
+import styles from './styles.module.scss';
+
+type Range = [Date, Date];
+
+export type MobileChipChoiceDateRangeProps = ChipChoiceCommonProps & {
+  /** Значение компонента */
+  value?: Range;
+  /** Значение компонента по умолчанию */
+  defaultValue?: Range;
+  /** Колбек смены значения */
+  onChange?(value: Range): void;
+  /** Колбек формирующий строковое представление выбранного значения. Принимает массив выбранных значений */
+  valueRender?(value?: Range): ReactNode;
+};
+
+type DefaultRangeFormatterProps = {
+  value?: Range;
+  allLabel?: string;
+};
+
+function defaultRangeFormatter({ value, allLabel }: DefaultRangeFormatterProps) {
+  if (!value || !value.length) return allLabel;
+
+  const [from, to] = value;
+
+  return `${from.toLocaleDateString()} ${DEFAULT_EMPTY_VALUE} ${to.toLocaleDateString()}`;
+}
+
+export function MobileChipChoiceDateRange({
+  size = SIZE.S,
+  value,
+  defaultValue,
+  onChange,
+  valueRender,
+  onClearButtonClick,
+  open: openProp,
+  onOpenChange,
+  ...rest
+}: MobileChipChoiceDateRangeProps) {
+  const [selectedValue, setSelectedValue] = useUncontrolledProp<Range>(value, defaultValue, onChange);
+
+  const { t } = useLocale('Chips');
+
+  const valueToRender = valueRender
+    ? valueRender(selectedValue)
+    : defaultRangeFormatter({ value: selectedValue, allLabel: t('allLabel') });
+
+  const localRef = useRef<HTMLDivElement>(null);
+
+  const [open, setOpen] = useUncontrolledProp(openProp, false, onOpenChange);
+
+  const closeDroplist = useCallback(() => {
+    setOpen(false);
+    setTimeout(() => localRef.current?.focus(), 0);
+  }, [setOpen]);
+
+  const handleOnKeyDown = useHandleOnKeyDown({ setOpen });
+
+  return (
+    <MobileDropdown
+      content={
+        <div className={styles.dateWrapper}>
+          <Calendar
+            mode='range'
+            size='l'
+            value={selectedValue}
+            onChangeValue={value => {
+              setSelectedValue(value);
+              closeDroplist();
+            }}
+            onFocusLeave={closeDroplist}
+          />
+        </div>
+      }
+      open={open}
+      data-test-id={CHIP_CHOICE_TEST_IDS.droplist}
+      onOpenChange={setOpen}
+    >
+      <ChipChoiceBase
+        {...rest}
+        ref={localRef}
+        onClearButtonClick={onClearButtonClick}
+        value={selectedValue}
+        valueToRender={valueToRender}
+        size={size}
+        onKeyDown={handleOnKeyDown()}
+      />
+    </MobileDropdown>
+  );
+}

package/src/components/MobileChipChoice/components/MobileChipChoiceMultiple.tsx

@@ -0,0 +1,218 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { ItemId, MobileDroplist, SelectionSingleValueType } from '@cloud-ru/uikit-product-mobile-dropdown';
+import { ButtonFilled, ButtonFunction } from '@snack-uikit/button';
+import { useValueControl } from '@snack-uikit/utils';
+
+import { CHIP_CHOICE_TEST_IDS, SIZE } from '../../../constants';
+import { useAutoApplyFooter, useHandleOnKeyDown, useOptionSearch } from '../hooks';
+import { ContentRenderProps, MobileChipChoiceMultipleProps } from '../types';
+import { FlattenOption, kindFlattenOptions } from '../utils';
+import { transformOptionsToItems } from '../utils/options';
+import { ChipChoiceBase } from './ChipChoiceBase';
+import styles from './styles.module.scss';
+
+export type ChipChoiceMultipleValueFormatterProps<T extends ContentRenderProps = ContentRenderProps> = {
+  value: FlattenOption<T>[];
+  total: number;
+  allLabel: string;
+};
+
+const defaultMultiValueLabelFormatter = ({ value, total, allLabel }: ChipChoiceMultipleValueFormatterProps): ItemId => {
+  const len = value.length;
+
+  if ([0, total].includes(len) && total !== len) {
+    return allLabel;
+  }
+
+  if (len === 1) {
+    return value[0].label;
+  }
+
+  return `${len.toString()}/${total}`;
+};
+
+export function MobileChipChoiceMultiple<T extends ContentRenderProps = ContentRenderProps>({
+  value: valueProp,
+  defaultValue,
+  options,
+  onChange: onChangeProp,
+  valueRender,
+  size = SIZE.S,
+  label,
+  searchable: searchableProp,
+  contentRender,
+  onClearButtonClick,
+  open: openProp,
+  onOpenChange,
+  virtualized,
+  disableFuzzySearch = false,
+  autoApply = true,
+  onApprove,
+  onCancel,
+  ...rest
+}: MobileChipChoiceMultipleProps<T>) {
+  const { t } = useLocale();
+
+  const [value, setValue] = useValueControl<SelectionSingleValueType[]>({
+    value: valueProp,
+    defaultValue,
+    onChange: onChangeProp,
+  });
+
+  const [deferredValue, setDeferredValue] = useValueControl<SelectionSingleValueType[]>({
+    defaultValue,
+  });
+
+  const flattenOptions = useMemo(() => {
+    const { flattenOptions } = kindFlattenOptions<T>({ options });
+
+    return flattenOptions;
+  }, [options]);
+
+  const searchable = searchableProp && Object.values(flattenOptions).length > 5;
+
+  const [searchValue = '', setSearchValue] = useState<string>('');
+
+  const [open, setOpen] = useUncontrolledProp(openProp, false, onOpenChange);
+  const handleOnKeyDown = useHandleOnKeyDown({ setOpen });
+
+  const flatMapOptions = useMemo(() => Object.values(flattenOptions), [flattenOptions]);
+
+  const dropListSelection = useMemo(() => (autoApply ? value : deferredValue), [autoApply, deferredValue, value]);
+
+  const selectedOptions = useMemo(
+    () => (value && value.length ? value.map(id => flattenOptions[id]).filter(Boolean) : ([] as FlattenOption<T>[])),
+    [flattenOptions, value],
+  );
+
+  const valueToRender = valueRender
+    ? valueRender(selectedOptions)
+    : defaultMultiValueLabelFormatter({
+        value: selectedOptions ?? [],
+        total: Object.keys(flattenOptions).length,
+        allLabel: t('Chips.allLabel'),
+      });
+
+  const optionSearch = useOptionSearch({ options, flatMapOptions, disableFuzzySearch });
+
+  const result = useMemo(
+    () => (!searchable || valueToRender === searchValue ? options : optionSearch(searchValue)),
+    [optionSearch, options, searchValue, searchable, valueToRender],
+  );
+  const items = useMemo(() => transformOptionsToItems<T>(result, contentRender), [contentRender, result]);
+
+  const chipRef = useRef<HTMLDivElement>(null);
+  const listRef = useRef<HTMLElement>(null);
+
+  const handleSelectionChange = useCallback(
+    (newValue?: SelectionSingleValueType[]) => {
+      if (newValue !== undefined) {
+        if (autoApply) {
+          setValue(newValue);
+        } else {
+          setDeferredValue(newValue);
+        }
+
+        if (searchValue) {
+          listRef.current?.focus();
+        }
+      }
+    },
+    [autoApply, searchValue, setValue, setDeferredValue],
+  );
+
+  const handleOnCancelClick = () => {
+    onCancel?.();
+
+    setDeferredValue(value);
+    setOpen(false);
+  };
+
+  const handleOnApproveClick = () => {
+    onApprove?.();
+
+    setValue(deferredValue);
+    setOpen(false);
+  };
+
+  const autoApplyFooter = useAutoApplyFooter({
+    autoApply,
+    onApprove: handleOnApproveClick,
+    onCancel: handleOnCancelClick,
+  });
+
+  useEffect(() => {
+    if (searchValue && !open) {
+      setSearchValue('');
+    }
+  }, [searchable, open, searchValue]);
+
+  useEffect(() => {
+    setDeferredValue(value);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
+  return (
+    <MobileDroplist
+      items={items}
+      selection={{
+        value: dropListSelection,
+        onChange: handleSelectionChange,
+        mode: 'multiple',
+      }}
+      data-test-id={CHIP_CHOICE_TEST_IDS.droplist}
+      open={open}
+      onOpenChange={open => {
+        if (!open) {
+          setSearchValue('');
+          handleOnCancelClick();
+        }
+        setOpen(open);
+      }}
+      label={label}
+      virtualized={virtualized}
+      footer={
+        <div className={styles.footer}>
+          <div className={styles.footerTopLine}>
+            <span className={styles.counter}>{`${t('MobileChips.selectedN')}${value?.length || 0}`}</span>
+            <ButtonFunction
+              label={t('MobileChips.resetAll')}
+              onClick={() => {
+                handleSelectionChange([]);
+              }}
+              size='m'
+            />
+          </div>
+
+          {autoApply ? (
+            <ButtonFilled
+              fullWidth
+              label={t('MobileChips.select')}
+              onClick={() => {
+                setOpen(false);
+              }}
+              size='l'
+            />
+          ) : (
+            autoApplyFooter
+          )}
+        </div>
+      }
+    >
+      <ChipChoiceBase
+        {...rest}
+        ref={chipRef}
+        onClearButtonClick={onClearButtonClick}
+        value={value}
+        valueToRender={valueToRender}
+        label={label}
+        loading={rest.loading}
+        size={size}
+        onKeyDown={handleOnKeyDown()}
+      />
+    </MobileDroplist>
+  );
+}

package/src/components/MobileChipChoice/components/MobileChipChoiceSingle.tsx

@@ -0,0 +1,176 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { ItemId, MobileDroplist, SelectionSingleValueType } from '@cloud-ru/uikit-product-mobile-dropdown';
+import { useValueControl } from '@snack-uikit/utils';
+
+import { CHIP_CHOICE_TEST_IDS, SIZE } from '../../../constants';
+import { useAutoApplyFooter, useHandleOnKeyDown, useOptionSearch } from '../hooks';
+import { ContentRenderProps, MobileChipChoiceSingleProps } from '../types';
+import { FlattenOption, kindFlattenOptions } from '../utils';
+import { transformOptionsToItems } from '../utils/options';
+import { ChipChoiceBase } from './ChipChoiceBase';
+import styles from './styles.module.scss';
+
+export type ChipChoiceSingleValueFormatterProps = {
+  label?: ItemId;
+  allLabel?: string;
+};
+
+export function defaultSingleValueFormatter({ label, allLabel }: ChipChoiceSingleValueFormatterProps) {
+  return label ?? allLabel;
+}
+
+export function MobileChipChoiceSingle<T extends ContentRenderProps = ContentRenderProps>({
+  value: valueProp,
+  defaultValue,
+  options,
+  onChange: onChangeProp,
+  valueRender,
+  size = SIZE.S,
+  label,
+  searchable: searchableProp,
+  contentRender,
+  onClearButtonClick,
+  open: openProp,
+  onOpenChange,
+  virtualized,
+  disableFuzzySearch = false,
+  autoApply = true,
+  onApprove,
+  onCancel,
+  ...rest
+}: MobileChipChoiceSingleProps<T>) {
+  const [value, setValue] = useValueControl<SelectionSingleValueType>({
+    value: valueProp,
+    defaultValue,
+    onChange: onChangeProp,
+  });
+
+  const [deferredValue, setDeferredValue] = useValueControl<SelectionSingleValueType>({
+    defaultValue,
+  });
+
+  const flattenOptions = useMemo(() => {
+    const { flattenOptions } = kindFlattenOptions<T>({ options });
+
+    return flattenOptions;
+  }, [options]);
+
+  const searchable = searchableProp && Object.values(flattenOptions).length > 5;
+
+  const { t } = useLocale('Chips');
+
+  const [open, setOpen] = useUncontrolledProp(openProp, false, onOpenChange);
+  const handleOnKeyDown = useHandleOnKeyDown({ setOpen });
+
+  const flatMapOptions = useMemo(() => Object.values(flattenOptions), [flattenOptions]);
+
+  const dropListSelection = useMemo(() => (autoApply ? value : deferredValue), [autoApply, deferredValue, value]);
+
+  const selectedOption = useMemo(
+    () => (value ? flattenOptions[value] : ({} as FlattenOption<T>)),
+    [flattenOptions, value],
+  );
+
+  const [searchValue, setSearchValue] = useState<string>('');
+
+  const valueToRender = valueRender
+    ? valueRender(selectedOption)
+    : defaultSingleValueFormatter({ label: selectedOption?.label, allLabel: t('allLabel') });
+
+  const optionSearch = useOptionSearch({ options, flatMapOptions, disableFuzzySearch });
+
+  const result = useMemo(
+    () => (!searchable || valueToRender === searchValue ? options : optionSearch(searchValue)),
+    [optionSearch, options, searchValue, searchable, valueToRender],
+  );
+  const items = useMemo(() => transformOptionsToItems<T>(result, contentRender), [contentRender, result]);
+
+  const chipRef = useRef<HTMLDivElement>(null);
+
+  const handleSelectionChange = useCallback(
+    (newValue?: SelectionSingleValueType) => {
+      if (newValue !== undefined) {
+        chipRef.current?.focus();
+
+        if (autoApply) {
+          setOpen(false);
+          setSearchValue('');
+          setValue(newValue);
+        } else {
+          setDeferredValue(newValue);
+        }
+
+        return;
+      }
+
+      if (autoApply) {
+        setOpen(false);
+      }
+    },
+    [autoApply, setOpen, setValue, setDeferredValue],
+  );
+
+  const handleOnCancelClick = useCallback(() => {
+    onCancel?.();
+
+    setDeferredValue(value);
+    setOpen(false);
+  }, [onCancel, setDeferredValue, setOpen, value]);
+
+  const handleOnApproveClick = useCallback(() => {
+    onApprove?.();
+
+    setValue(deferredValue);
+    setOpen(false);
+  }, [deferredValue, onApprove, setOpen, setValue]);
+
+  const autoApplyFooter = useAutoApplyFooter({
+    autoApply,
+    onApprove: handleOnApproveClick,
+    onCancel: handleOnCancelClick,
+  });
+
+  useEffect(() => {
+    if (searchValue && !open) {
+      setSearchValue('');
+    }
+  }, [searchable, open, searchValue]);
+
+  return (
+    <MobileDroplist
+      items={items}
+      selection={{
+        value: dropListSelection,
+        onChange: handleSelectionChange,
+        mode: 'single',
+      }}
+      data-test-id={CHIP_CHOICE_TEST_IDS.droplist}
+      open={open}
+      onOpenChange={open => {
+        if (!open) {
+          setSearchValue('');
+          handleOnCancelClick();
+        }
+        setOpen(open);
+      }}
+      label={label}
+      virtualized={virtualized}
+      footer={!autoApply && autoApplyFooter ? <div className={styles.footer}>{autoApplyFooter}</div> : undefined}
+    >
+      <ChipChoiceBase
+        {...rest}
+        ref={chipRef}
+        onClearButtonClick={onClearButtonClick}
+        value={value}
+        valueToRender={valueToRender}
+        label={label}
+        loading={rest.loading}
+        size={size}
+        onKeyDown={handleOnKeyDown()}
+      />
+    </MobileDroplist>
+  );
+}