@razorpay/blade/build/lib/web/development/utils/useControlledDropdownInput/useControlledDropdownInput.js

The Design System that powers Razorpay

import React__default from 'react';
import isEmpty from '../lodashButBetter/isEmpty.js';
import '../index.js';
import { useFirstRender } from '../useFirstRender.js';
import '../fireNativeEvent/index.js';
import { useDropdown } from '../../components/Dropdown/useDropdown.js';
import { isBrowser } from '../platform/isBrowser.js';
import { fireNativeEvent } from '../fireNativeEvent/fireNativeEvent.web.js';

var useControlledDropdownInput = function useControlledDropdownInput(props) {
  var isFirstRender = useFirstRender();
  var _useDropdown = useDropdown(),
    changeCallbackTriggerer = _useDropdown.changeCallbackTriggerer,
    isControlled = _useDropdown.isControlled,
    options = _useDropdown.options,
    selectedIndices = _useDropdown.selectedIndices,
    controlledValueIndices = _useDropdown.controlledValueIndices,
    setSelectedIndices = _useDropdown.setSelectedIndices,
    selectionType = _useDropdown.selectionType,
    setIsControlled = _useDropdown.setIsControlled;
  var getValuesArrayFromIndices = function getValuesArrayFromIndices() {
    var indices = [];
    if (isControlled) {
      indices = controlledValueIndices;
    } else {
      indices = selectedIndices;
    }
    return indices.map(function (selectionIndex) {
      return options[selectionIndex].value;
    });
  };
  var selectValues = function selectValues(valuesToSelect) {
    if (options.length > 0) {
      // we use empty `''` for clearing the input
      if (isEmpty(valuesToSelect)) {
        setSelectedIndices([]);
      } else if (typeof valuesToSelect === 'string') {
        // single select control
        var selectedItemIndex = options.findIndex(function (option) {
          return option.value === valuesToSelect;
        });
        if (selectedItemIndex >= 0) {
          setSelectedIndices([selectedItemIndex]);
        }
      } else {
        // multiselect control

        // Handles repeated values in user state
        var uniqueValues = Array.from(new Set(valuesToSelect));
        // Handle selectionType single with multiselect values
        var userValues = selectionType === 'single' ? [valuesToSelect === null || valuesToSelect === void 0 ? void 0 : valuesToSelect[0]] : uniqueValues;
        var selectedItemIndices = userValues.map(function (optionValue) {
          return options.findIndex(function (option) {
            return option.value === optionValue;
          });
        }).filter(function (value) {
          return value >= 0;
        });
        setSelectedIndices(selectedItemIndices);
      }
    }
  };

  // Handles `defaultValue` prop
  React__default.useEffect(function () {
    if (options.length > 0 && props.defaultValue) {
      selectValues(props.defaultValue);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [options.length]);

  // Handles `value` prop
  React__default.useEffect(function () {
    if (options.length > 0 && props.value !== undefined) {
      if (!isControlled) {
        setIsControlled(true);
      }
      selectValues(props.value);

      // in single select AutoComplete, we have to set inputValue of autocomplete according to the new selection.
      if (selectionType === 'single' && !Array.isArray(props.value) && !props.isSelectInput) {
        var _props$syncInputValue;
        (_props$syncInputValue = props.syncInputValueWithSelection) === null || _props$syncInputValue === void 0 || _props$syncInputValue.call(props, props.value);
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [props.value, options]);

  // onChange behaviour
  React__default.useEffect(function () {
    // Ignore calling onChange on mount

    if (!isFirstRender) {
      var _props$onChange;
      (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, {
        name: props.name,
        values: getValuesArrayFromIndices()
      });
      if (isBrowser()) {
        fireNativeEvent(props.triggererRef, ['change', 'input']);
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [changeCallbackTriggerer]);
};

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