@cloud-ru/uikit-product-calculator 0.33.3

package/src/components/Controls/SegmentedControl/SegmentedControl.tsx

@@ -0,0 +1,79 @@
+import { useEffect, useMemo } from 'react';
+
+import { FieldDecorator } from '@snack-uikit/fields';
+import { ToggleGroup } from '@snack-uikit/toggles';
+
+import { FormValues } from '../../../types';
+import { parseKeyToDataTest } from '../../../utils';
+import { CONTROL } from '../constants';
+import { BaseControlWithItems } from '../types';
+import { SegmentedControlCard, SegmentedControlItem } from './SegmentedControlCard';
+import styles from './styles.module.scss';
+
+type UiProps = { className?: string; disabled?: boolean };
+
+export type SegmentedControl = {
+  type: typeof CONTROL.Segmented;
+  defaultValue?: string;
+} & BaseControlWithItems<SegmentedControlItem, UiProps>;
+
+export type SegmentedControlUiProps = SegmentedControl & {
+  value?: string;
+  onChange?(value?: string): void;
+  watchedValues?: FormValues;
+};
+
+export function SegmentedControlUi({
+  decoratorProps,
+  uiProps,
+  value,
+  onChange,
+  items: itemsProp,
+  relateFn,
+  watchedValues,
+  accessorKey,
+}: SegmentedControlUiProps) {
+  const {
+    items: relatedItems,
+    decoratorProps: relatedDecoratorProps,
+    uiProps: relatedUiProps,
+  } = useMemo(() => relateFn?.(watchedValues ?? {}) ?? {}, [relateFn, watchedValues]);
+
+  const items = useMemo(() => relatedItems ?? itemsProp, [itemsProp, relatedItems]);
+
+  const dataTestAttribute = parseKeyToDataTest('segmented', accessorKey);
+
+  useEffect(() => {
+    if (!items.find(item => String(item?.value) === String(value))) {
+      onChange?.(String(items?.[0]?.value));
+    }
+  }, [value, onChange, items, relatedItems]);
+
+  const visible = relatedUiProps?.visible ?? uiProps?.visible ?? true;
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <FieldDecorator {...decoratorProps} {...relatedDecoratorProps} size='m' data-test-id={dataTestAttribute}>
+      <ToggleGroup
+        selectionMode='single'
+        value={value}
+        onChange={value => {
+          value && onChange?.(value);
+        }}
+      >
+        <div className={styles.container}>
+          {items.map(item => (
+            <SegmentedControlCard
+              disabled={relatedUiProps?.disabled ?? uiProps?.disabled}
+              {...item}
+              key={item?.value}
+            />
+          ))}
+        </div>
+      </ToggleGroup>
+    </FieldDecorator>
+  );
+}

package/src/components/Controls/SegmentedControl/SegmentedControlCard.tsx

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+
+import { ChipToggle } from '@snack-uikit/chips';
+import { useToggleGroup } from '@snack-uikit/toggles';
+import { Tooltip } from '@snack-uikit/tooltip';
+
+import { AnyType, PRICE_PERIOD } from '../../../types';
+
+export type SegmentedControlItem = {
+  value: string;
+
+  label?: string;
+  description?: string;
+
+  disabled?: boolean;
+  disabledReason?: ReactNode;
+
+  dataTestId?: string;
+  onChangePeriod?: (value: PRICE_PERIOD, setValue: (arr: [string, AnyType[]]) => void) => void;
+  canChangeWholePricePeriod?: boolean;
+};
+
+export function SegmentedControlCard({ value, label, disabled, disabledReason, dataTestId }: SegmentedControlItem) {
+  const { isChecked, handleClick } = useToggleGroup({ value });
+
+  return (
+    <Tooltip open={disabled && disabled && disabledReason ? undefined : false} tip={disabledReason}>
+      <ChipToggle
+        size='m'
+        checked={isChecked}
+        onChange={handleClick}
+        disabled={!isChecked && disabled}
+        data-test-id={dataTestId}
+        label={label ?? value}
+      />
+    </Tooltip>
+  );
+}

package/src/components/Controls/SegmentedControl/index.ts

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

package/src/components/Controls/SegmentedControl/styles.module.scss

@@ -0,0 +1,8 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as stv;
+
+.container {
+  display: flex;
+  flex-wrap: wrap;
+
+  gap: stv.$dimension-050m;
+}

package/src/components/Controls/SelectControl/SelectControl.tsx

@@ -0,0 +1,172 @@
+import { ReactNode, useEffect, useMemo } from 'react';
+
+import { AdaptiveFieldSelect } from '@cloud-ru/uikit-product-mobile-fields';
+import { BaseOptionProps, FieldSelectSingleProps } from '@snack-uikit/fields';
+
+import { useCalculatorContext } from '../../../contexts';
+import { FormValues, PRICE_PERIOD } from '../../../types';
+import { parseKeyToDataTest } from '../../../utils';
+import { CONTROL } from '../constants';
+import { BaseControlWithItems } from '../types';
+import styles from './styles.module.scss';
+
+export type SelectControlItem = {
+  value: string;
+  label?: string;
+  description?: string;
+  icon?: ReactNode;
+  disabled?: boolean;
+  disabledReason?: ReactNode;
+  dataTestId?: string;
+  onChangePeriod?: (value: PRICE_PERIOD) => void;
+  canChangeWholePricePeriod?: boolean;
+};
+
+type SelectUiProps = Pick<
+  FieldSelectSingleProps,
+  | 'placeholder'
+  | 'className'
+  | 'readonly'
+  | 'showClearButton'
+  | 'showCopyButton'
+  | 'caption'
+  | 'showHintIcon'
+  | 'searchable'
+  | 'noDataState'
+  | 'noResultsState'
+  | 'disabled'
+>;
+
+type SelectControl = BaseControlWithItems<SelectControlItem, SelectUiProps>;
+
+export type SelectSingleControl = SelectControl & { type: typeof CONTROL.SelectSingle } & {
+  defaultValue?: string;
+};
+
+type SelectSingleUiProps = SelectSingleControl & {
+  value?: string;
+  onChange?(value?: string): void;
+  watchedValues?: FormValues;
+};
+
+export type SelectMultipleControl = SelectControl & { type: typeof CONTROL.SelectMultiple } & {
+  defaultValue?: string[];
+};
+
+type SelectMultipleUiProps = SelectMultipleControl & {
+  value?: string[];
+  onChange?(value?: string[]): void;
+  watchedValues?: FormValues;
+};
+
+function convertItemsToOptions(items: SelectControlItem[]): BaseOptionProps[] {
+  return items.map(item => ({
+    value: item.value,
+    disabled: item.disabled,
+    option: item.label ?? item.value,
+    beforeContent: item.icon,
+  }));
+}
+
+export function SelectSingleUi({
+  decoratorProps,
+  uiProps,
+  value,
+  onChange,
+  items: itemsProp,
+  watchedValues,
+  relateFn,
+  accessorKey,
+}: SelectSingleUiProps) {
+  const { layoutType } = useCalculatorContext();
+
+  const {
+    items: relatedItems,
+    decoratorProps: relatedDecoratorProps,
+    uiProps: relatedUiProps,
+  } = useMemo(() => relateFn?.(watchedValues ?? {}) ?? {}, [relateFn, watchedValues]);
+
+  const items = useMemo(() => relatedItems ?? itemsProp, [itemsProp, relatedItems]);
+
+  const dataTestAttribute = parseKeyToDataTest('select', accessorKey);
+
+  useEffect(() => {
+    if (!items.find(item => String(item.value) === String(value))) {
+      onChange?.(String(items?.[0]?.value));
+    }
+  }, [value, onChange, items, relatedItems]);
+
+  const visible = relatedUiProps?.visible ?? uiProps?.visible ?? true;
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <div>
+      {!decoratorProps.label && <div className={styles.zeroLabel} />}
+      <AdaptiveFieldSelect
+        searchable={false}
+        showClearButton={false}
+        layoutType={layoutType}
+        widthStrategy='eq'
+        {...decoratorProps}
+        {...relatedDecoratorProps}
+        size='m'
+        selection='single'
+        value={value}
+        onChange={onChange}
+        options={convertItemsToOptions(items)}
+        data-test-id={dataTestAttribute}
+        {...uiProps}
+        {...relatedUiProps}
+      />
+    </div>
+  );
+}
+
+export function SelectMultipleUi({
+  decoratorProps,
+  uiProps,
+  value,
+  onChange,
+  items: itemsProp,
+  relateFn,
+  watchedValues,
+}: SelectMultipleUiProps) {
+  const { layoutType } = useCalculatorContext();
+
+  const {
+    items: relatedItems,
+    decoratorProps: relatedDecoratorProps,
+    uiProps: relatedUiProps,
+  } = useMemo(() => relateFn?.(watchedValues ?? {}) ?? {}, [relateFn, watchedValues]);
+
+  const items = useMemo(() => relatedItems ?? itemsProp, [itemsProp, relatedItems]);
+
+  const visible = relatedUiProps?.visible ?? uiProps?.visible ?? true;
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <div>
+      {!decoratorProps.label && <div className={styles.zeroLabel} />}
+      <AdaptiveFieldSelect
+        layoutType={layoutType}
+        searchable={false}
+        showClearButton={false}
+        {...decoratorProps}
+        {...relatedDecoratorProps}
+        selection='multiple'
+        size='m'
+        value={value}
+        onChange={onChange}
+        options={convertItemsToOptions(items)}
+        {...uiProps}
+        {...relatedUiProps}
+      />
+    </div>
+  );
+}

package/src/components/Controls/SelectControl/index.ts

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

package/src/components/Controls/SelectControl/styles.module.scss

@@ -0,0 +1,5 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as stv;
+
+.zeroLabel {
+  height: stv.$dimension-3m;
+}

package/src/components/Controls/SliderControl/SliderControl.tsx

@@ -0,0 +1,92 @@
+import { useMemo } from 'react';
+
+import { FieldSlider, FieldSliderProps } from '@snack-uikit/fields';
+
+import { FormValues } from '../../../types';
+import { parseKeyToDataTest } from '../../../utils';
+import { CONTROL } from '../constants';
+import { BaseControlWithItems } from '../types';
+
+type SliderUiProps = Pick<
+  FieldSliderProps,
+  'step' | 'className' | 'showScaleBar' | 'tipFormatter' | 'postfixIcon' | 'disabled' | 'postfix'
+>;
+
+export type SliderControl = {
+  type: typeof CONTROL.Slider;
+  defaultValue?: string;
+  accessorKey?: string;
+} & BaseControlWithItems<number, SliderUiProps>;
+
+export type SliderControlUiProps = SliderControl & {
+  onChange?(value: string): void;
+  watchedValues?: FormValues;
+  value?: string;
+};
+
+export function SliderControlUi({
+  decoratorProps,
+  uiProps,
+  onChange,
+  items: itemsProp,
+  watchedValues,
+  relateFn,
+  accessorKey,
+  value,
+}: SliderControlUiProps) {
+  const {
+    items: relatedItems,
+    decoratorProps: relatedDecoratorProps,
+    uiProps: relatedUiProps,
+  } = useMemo(() => relateFn?.(watchedValues ?? {}) ?? {}, [relateFn, watchedValues]);
+
+  const items = useMemo(() => relatedItems ?? itemsProp, [itemsProp, relatedItems]);
+
+  const dataTestAttribute = parseKeyToDataTest('slider', accessorKey);
+
+  const { marks } = useMemo(() => {
+    const marks = items
+      .sort((a, b) => a - b)
+      .reduce(
+        (res, item, idx) => {
+          res[idx + 1] = item;
+          return res;
+        },
+        {} as FieldSliderProps['marks'],
+      );
+
+    return { marks };
+  }, [items]);
+
+  const textInputValueFormatter = (value: number): string => String(marks[value]);
+
+  const visible = relatedUiProps?.visible ?? uiProps?.visible ?? true;
+
+  if (!visible) {
+    return null;
+  }
+
+  const currentValue = value ? items.findIndex(item => String(item) === value) + 1 : 1;
+
+  return (
+    <FieldSlider
+      range={false}
+      size='m'
+      value={currentValue}
+      onChange={newValue => {
+        const valueByKey = String(marks[newValue as number]);
+        onChange?.(valueByKey);
+      }}
+      marks={marks}
+      min={1}
+      max={items.length}
+      step={null}
+      textInputFormatter={textInputValueFormatter}
+      data-test-id={dataTestAttribute}
+      {...uiProps}
+      {...relatedUiProps}
+      {...decoratorProps}
+      {...relatedDecoratorProps}
+    />
+  );
+}

package/src/components/Controls/SliderControl/index.ts

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

package/src/components/Controls/StepperControl/StepperControl.tsx

@@ -0,0 +1,160 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import { FieldDecorator, FieldStepper, FieldStepperProps } from '@snack-uikit/fields';
+
+import { FormValues } from '../../../types';
+import { parseKeyToDataTest } from '../../../utils';
+import { formatNumber } from '../../../utils/formatNumber';
+import { CONTROL } from '../constants';
+import { BaseControl, WithVisible } from '../types';
+import styles from './styles.module.scss';
+
+type StepperUiProps = Pick<
+  FieldStepperProps,
+  'step' | 'min' | 'max' | 'allowMoreThanLimits' | 'disabled' | 'postfix' | 'size'
+> & {
+  showHint?: boolean;
+  /**
+   * Множитель для значения
+   * Например: надо реальное значение это 3 млн, а отображать надо как 3
+   */
+  multiplier?: number;
+  /** Массив допустимых значений. Если указан, то step игнорируется */
+  allowedValues?: number[];
+};
+
+export type StepperControl = {
+  type: typeof CONTROL.Stepper;
+  defaultValue?: number;
+  uiProps: WithVisible<StepperUiProps>;
+} & Omit<BaseControl<StepperUiProps>, 'uiProps'>;
+
+export type StepperControlUiProps = StepperControl & {
+  value?: number;
+  onChange?(value: number): void;
+  watchedValues?: FormValues;
+};
+
+export function StepperControlUi({
+  decoratorProps,
+  uiProps,
+  value,
+  onChange,
+  watchedValues,
+  relateFn,
+  accessorKey,
+}: StepperControlUiProps) {
+  const [innerValue, setInnerValue] = useState<number>(value ?? 0);
+  const [selectedIdx, setSelectedIdx] = useState<number>(0);
+
+  const dataTestAttribute = parseKeyToDataTest('stepper', accessorKey);
+
+  useEffect(() => {
+    setInnerValue(value ?? 0);
+  }, [value]);
+
+  const { decoratorProps: relatedDecoratorProps, uiProps: relatedUiProps } = useMemo(
+    () => relateFn?.(watchedValues ?? {}) ?? {},
+    [relateFn, watchedValues],
+  );
+
+  const { min, max, multiplier = 1, step = 1, allowedValues } = { ...uiProps, ...relatedUiProps };
+
+  useEffect(() => {
+    if (allowedValues) {
+      const idx = allowedValues.findIndex(item => item === value);
+      setSelectedIdx(idx >= 0 ? idx : 0);
+    }
+  }, [allowedValues, value]);
+
+  useEffect(() => {
+    if (min && Number((value ?? 0) / multiplier) < min) {
+      onChange?.(min * multiplier);
+
+      return;
+    }
+
+    if (max && Number((value ?? 0) / multiplier) > max) {
+      onChange?.(max * multiplier);
+
+      return;
+    }
+  }, [value, onChange, min, max, multiplier]);
+
+  const visible = relatedUiProps?.visible ?? uiProps?.visible ?? true;
+  const showHint = relatedUiProps?.showHint ?? uiProps.showHint ?? true;
+
+  const handleValueChange = (rawInnerValue?: number) => {
+    const innerValue = Number(rawInnerValue ?? 0);
+
+    if (allowedValues) {
+      onChange?.(innerValue);
+      return;
+    }
+
+    if (min && innerValue / multiplier <= min) {
+      onChange?.(min * multiplier);
+      setInnerValue(min);
+      return;
+    }
+
+    if (max && innerValue / multiplier >= max) {
+      onChange?.(max * multiplier);
+      setInnerValue(max);
+      return;
+    }
+
+    onChange?.(innerValue);
+  };
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <FieldDecorator {...decoratorProps} {...relatedDecoratorProps} size='m'>
+      <div>
+        <FieldStepper
+          size='m'
+          value={(innerValue ?? 0) / multiplier}
+          postfix={uiProps.postfix}
+          onChange={value => {
+            if (allowedValues) {
+              const currentIdx = selectedIdx;
+              const isIncrement = value > innerValue / multiplier;
+
+              const newIdx = isIncrement
+                ? Math.min(currentIdx + 1, allowedValues.length - 1)
+                : Math.max(currentIdx - 1, 0);
+
+              setSelectedIdx(newIdx);
+              handleValueChange(allowedValues[newIdx] * multiplier);
+              return;
+            }
+
+            if (Math.abs(value - innerValue / multiplier) === step) {
+              handleValueChange?.(value * multiplier);
+              return;
+            }
+
+            setInnerValue?.(value * multiplier);
+          }}
+          onBlur={() => {
+            handleValueChange(innerValue);
+          }}
+          allowMoreThanLimits={false}
+          data-test-id={dataTestAttribute}
+          {...uiProps}
+          {...relatedUiProps}
+        />
+      </div>
+
+      {showHint && (
+        <div className={styles.hintWrapper}>
+          <span className={styles.hint}>{formatNumber(min)}</span>
+          <span className={styles.hint}>{formatNumber(max)}</span>
+        </div>
+      )}
+    </FieldDecorator>
+  );
+}

package/src/components/Controls/StepperControl/index.ts

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

package/src/components/Controls/StepperControl/styles.module.scss

@@ -0,0 +1,16 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as stv;
+
+.hintWrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex: 1;
+  box-sizing: border-box;
+  padding: stv.$dimension-050m;
+}
+
+.hint {
+  @include stv.composite-var(stv.$sans-body-m);
+
+  color: stv.$sys-neutral-text-support;
+}