@niku/react-native-dropdown-select/lib/module/useDropDownSelect/index.js

A Dropdown select component for React Native

import { useCallback, useEffect, useState } from 'react';
import { isDropdownOptionItem } from '../utils';
export const useDropdownSelect = ({
  defaultValue,
  options,
  compareFunc,
  onShowDropdown,
  onHideDropdown,
  onSelectOption,
  value
}) => {
  const [show, setShow] = useState(false);
  const [selectedOption, setSelectedOption] = useState();
  const [showEventListeners, setShowEventListener] = useState([]);
  const [hideEventListeners, setHideEventListener] = useState([]);
  const [chooseOptionEventListeners, setChooseOptionEventListener] = useState([]);
  /**
   * Event listener
   */

  const callShowEventListeners = useCallback(() => {
    showEventListeners.forEach(listener => {
      listener();
    });
  }, [showEventListeners]);
  const addShowEventListener = useCallback(callback => {
    setShowEventListener(state => {
      const newState = [...state];
      newState.push(callback);
      return newState;
    });
  }, []);
  const removeShowEventListener = useCallback(callback => {
    setShowEventListener(state => {
      const newState = [...state];
      const index = newState.findIndex(listener => listener === callback);

      if (index > -1) {
        newState.splice(index, 1);
      }

      return newState;
    });
  }, []);
  const callHideEventListeners = useCallback(() => {
    hideEventListeners.forEach(listener => {
      listener();
    });
  }, [hideEventListeners]);
  const addHideEventListener = useCallback(callback => {
    setHideEventListener(state => {
      const newState = [...state];
      newState.push(callback);
      return newState;
    });
  }, []);
  const removeHideEventListener = useCallback(callback => {
    setHideEventListener(state => {
      const newState = [...state];
      const index = newState.findIndex(listener => listener === callback);

      if (index > -1) {
        newState.splice(index, 1);
      }

      return newState;
    });
  }, []);
  const callChooseOptionEventListeners = useCallback(option => {
    chooseOptionEventListeners.forEach(listener => {
      listener(option);
    });
  }, [chooseOptionEventListeners]);
  const addChooseOptionEventListener = useCallback(callback => {
    setChooseOptionEventListener(state => {
      const newState = [...state];
      newState.push(callback);
      return newState;
    });
  }, []);
  const removeChooseOptionEventListener = useCallback(callback => {
    setChooseOptionEventListener(state => {
      const newState = [...state];
      const index = newState.findIndex(listener => listener === callback);

      if (index > -1) {
        newState.splice(index, 1);
      }

      return newState;
    });
  }, []);
  const showDropdown = useCallback(() => {
    callShowEventListeners();
    setShow(true);
  }, [callShowEventListeners]);
  const hideDropdown = useCallback(() => {
    callHideEventListeners();
    setShow(false);
  }, [callHideEventListeners]);
  const selectOption = useCallback((option, fireEvent = true) => {
    if (fireEvent) {
      callChooseOptionEventListeners(option);
      hideDropdown();
    }

    setSelectedOption(option);
  }, [callChooseOptionEventListeners, hideDropdown]);
  const compareOption = useCallback((option1, option2) => {
    if (!option1 || !option2) {
      return false;
    }

    if (compareFunc) {
      return compareFunc(option1, option2);
    }

    return option1.value === option2.value;
  }, [compareFunc]);
  const findOptionMatchValue = useCallback((val, inputOptions) => {
    if (!inputOptions) {
      inputOptions = options;
    }

    if (val !== undefined) {
      for (const option of inputOptions) {
        if (isDropdownOptionItem(option)) {
          const isCurrentOption = isDropdownOptionItem(val) ? compareOption(option, val) : val === option.value;

          if (isCurrentOption) {
            return option;
          }
        } else {
          const matchedOption = findOptionMatchValue(val, option.options);

          if (matchedOption) {
            return matchedOption;
          }
        }
      }
    }

    return undefined;
  }, [options, compareOption, isDropdownOptionItem]);
  useEffect(() => {
    setSelectedOption(findOptionMatchValue(defaultValue));
  }, []);
  useEffect(() => {
    setSelectedOption(findOptionMatchValue(value));
  }, [value]);
  useEffect(() => {
    if (onShowDropdown) {
      addShowEventListener(onShowDropdown);
    }

    if (onHideDropdown) {
      addHideEventListener(onHideDropdown);
    }

    if (onSelectOption) {
      addChooseOptionEventListener(onSelectOption);
    }

    return () => {
      if (onShowDropdown) {
        removeShowEventListener(onShowDropdown);
      }

      if (onHideDropdown) {
        removeHideEventListener(onHideDropdown);
      }

      if (onSelectOption) {
        removeChooseOptionEventListener(onSelectOption);
      }
    };
  }, [addChooseOptionEventListener, addHideEventListener, addShowEventListener, onHideDropdown, onSelectOption, onShowDropdown, removeChooseOptionEventListener, removeHideEventListener, removeShowEventListener]);
  return {
    show,
    showDropdown,
    hideDropdown,
    selectOption,
    selectedOption,
    addShowEventListener,
    addHideEventListener,
    addChooseOptionEventListener,
    removeShowEventListener,
    removeHideEventListener,
    removeChooseOptionEventListener,
    compareOption
  };
};
//# sourceMappingURL=index.js.map