@razorpay/blade/build/lib/web/production/components/Checkbox/CheckboxGroup/useCheckboxGroup.js

The Design System that powers Razorpay

import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import React__default from 'react';
import { useControllableState } from '../../../utils/useControllable.js';
import '../../BladeProvider/index.js';
import { useFormId } from '../../Form/useFormId.js';
import useTheme from '../../BladeProvider/useTheme.js';

var useCheckboxGroup = function useCheckboxGroup(_ref) {
  var value = _ref.value,
    defaultValue = _ref.defaultValue,
    isDisabled = _ref.isDisabled,
    isRequired = _ref.isRequired,
    labelPosition = _ref.labelPosition,
    _onChange = _ref.onChange,
    validationState = _ref.validationState,
    name = _ref.name,
    necessityIndicator = _ref.necessityIndicator,
    size = _ref.size;
  var _useTheme = useTheme(),
    platform = _useTheme.platform;
  var _useFormId = useFormId('checkbox-group'),
    labelId = _useFormId.labelId;
  var _useControllableState = useControllableState({
      value: value,
      defaultValue: defaultValue || [],
      // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
      onChange: function onChange(values) {
        return _onChange === null || _onChange === void 0 ? void 0 : _onChange({
          values: values,
          name: name
        });
      }
    }),
    _useControllableState2 = _slicedToArray(_useControllableState, 2),
    checkedValues = _useControllableState2[0],
    setValue = _useControllableState2[1];
  var state = React__default.useMemo(function () {
    return {
      value: checkedValues,
      setValue: function (_setValue) {
        function setValue(_x) {
          return _setValue.apply(this, arguments);
        }
        setValue.toString = function () {
          return _setValue.toString();
        };
        return setValue;
      }(function (value) {
        if (isDisabled) {
          return;
        }
        setValue(function () {
          return value;
        });
      }),
      isChecked: function isChecked(value) {
        return checkedValues.includes(value);
      },
      addValue: function addValue(value) {
        if (isDisabled) {
          return;
        }
        if (!checkedValues.includes(value)) {
          setValue(function () {
            return checkedValues.concat(value);
          });
        }
      },
      removeValue: function removeValue(value) {
        if (isDisabled) {
          return;
        }
        if (checkedValues.includes(value)) {
          setValue(function () {
            return checkedValues.filter(function (existingValue) {
              return existingValue !== value;
            });
          });
        }
      }
    };
  }, [checkedValues, isDisabled, setValue]);
  var contextValue = React__default.useMemo(function () {
    return {
      validationState: validationState,
      isDisabled: isDisabled,
      isRequired: isRequired,
      labelPosition: platform === 'onMobile' ? 'top' : labelPosition,
      name: name,
      necessityIndicator: necessityIndicator,
      state: state,
      size: size
    };
  }, [validationState, isDisabled, isRequired, platform, labelPosition, name, necessityIndicator, state, size]);
  return {
    state: state,
    contextValue: contextValue,
    ids: {
      labelId: labelId
    }
  };
};

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