@yandex/ui/esm/ButtonGroup/ButtonGroup.utils.js

Yandex UI components

import { __read, __spread, __values } from "tslib";
import { useCallback, useState } from 'react';
/**
 * Функция, возвращающая детей в `array` по индексам `indices`
 *
 * @example
 *
 *  const indices = [1, 3, 4]
 *  const array = ['a', 'b', 'c', {}, []]
 *
 *  const res = indicesToArray(indices, array)
 *  // ['b', {}, []]
 *
 * @param indices number[] Получает на вход массив индексов, по которым должны выбраться поля
 * @param array any[] Откуда забираются данные
 */
var indicesToArray = function (indices, array) {
    var e_1, _a;
    var res = [];
    try {
        for (var indices_1 = __values(indices), indices_1_1 = indices_1.next(); !indices_1_1.done; indices_1_1 = indices_1.next()) {
            var index = indices_1_1.value;
            res.push(array[index]);
        }
    }
    catch (e_1_1) { e_1 = { error: e_1_1 }; }
    finally {
        try {
            if (indices_1_1 && !indices_1_1.done && (_a = indices_1.return)) _a.call(indices_1);
        }
        finally { if (e_1) throw e_1.error; }
    }
    return res;
};
/**
 * Реакт-хук состояния для компонента ButtonGroup.
 *
 *
 * @example
 *
 * const state = useButtonGroupState({ type: 'radio' })
 * return <ButtonGroup {...state} />
 */
export function useButtonGroupState(_a) {
    var type = _a.type, value = _a.value, mappings = _a.mappings;
    var _b = __read(useState(value || []), 2), selected = _b[0], setSelected = _b[1];
    var _c = __read(useState(indicesToArray(selected, mappings || [])), 2), mapped = _c[0], setMapped = _c[1];
    var onClick = useCallback(function (_event, nextValue) {
        var includes = selected.includes(nextValue);
        var indices = [];
        if (type === 'radio') {
            indices = includes ? [] : [nextValue];
        }
        else {
            indices = includes ? selected.filter(function (el) { return el !== nextValue; }) : __spread(selected, [nextValue]);
        }
        setSelected(indices);
        setMapped(indicesToArray(indices, mappings || []));
    }, [mappings, selected, type]);
    return { onClick: onClick, selected: selected, mapped: mapped };
}