@razorpay/blade/build/lib/web/production/components/Chip/useChipGroup.js

The Design System that powers Razorpay

import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import React__default from 'react';
import isUndefined from '../../utils/lodashButBetter/isUndefined.js';
import { useControllableState } from '../../utils/useControllable.js';
import { useId } from '../../utils/useId.js';

var useChipGroup = function useChipGroup(_ref) {
  var value = _ref.value,
    defaultValue = _ref.defaultValue,
    isDisabled = _ref.isDisabled,
    isRequired = _ref.isRequired,
    _onChange = _ref.onChange,
    name = _ref.name,
    size = _ref.size,
    color = _ref.color,
    selectionType = _ref.selectionType,
    necessityIndicator = _ref.necessityIndicator,
    validationState = _ref.validationState;
  var idBase = useId('chip-group');
  var labelId = "".concat(idBase, "-label");
  var fallbackName = name !== null && name !== void 0 ? name : idBase;
  var _useControllableState = useControllableState({
      value: value && selectionType === 'single' ? [value] : value,
      // If selectionType is single, we need to convert the value to an array
      defaultValue: defaultValue && selectionType === 'single' ? [defaultValue] : defaultValue || [],
      onChange: function onChange(values) {
        return _onChange === null || _onChange === void 0 ? void 0 : _onChange({
          values: values,
          name: fallbackName
        });
      }
    }),
    _useControllableState2 = _slicedToArray(_useControllableState, 2),
    checkedValues = _useControllableState2[0],
    setValues = _useControllableState2[1];
  var state = React__default.useMemo(function () {
    return {
      value: checkedValues,
      isChecked: function isChecked(value) {
        if (selectionType === 'single') {
          if (isUndefined(value) || isUndefined(checkedValues)) return false;
          return checkedValues[0] === value;
        }
        return checkedValues.includes(value);
      },
      addValue: function addValue(value) {
        if (isDisabled) {
          return;
        }
        if (selectionType === 'single') {
          setValues(function () {
            return [value];
          });
        }
        if (selectionType === 'multiple' && !checkedValues.includes(value)) {
          setValues(function () {
            return checkedValues.concat(value);
          });
        }
      },
      removeValue: function removeValue(value) {
        if (isDisabled) {
          return;
        }
        if (selectionType === 'single') {
          setValues(undefined);
        }
        if (selectionType === 'multiple' && Array.isArray(checkedValues) && checkedValues.includes(value)) {
          setValues(function () {
            return checkedValues.filter(function (existingValue) {
              return existingValue !== value;
            });
          });
        }
      }
    };
  }, [checkedValues, isDisabled, setValues, selectionType]);
  var contextValue = React__default.useMemo(function () {
    return {
      isDisabled: isDisabled,
      isRequired: isRequired,
      necessityIndicator: necessityIndicator,
      validationState: validationState,
      name: name,
      state: state,
      size: size,
      color: color,
      selectionType: selectionType
    };
  }, [isDisabled, isRequired, necessityIndicator, validationState, name, state, size, color, selectionType]);
  return {
    state: state,
    contextValue: contextValue,
    ids: {
      labelId: labelId
    }
  };
};

export { useChipGroup };
//# sourceMappingURL=useChipGroup.js.map