@niku/react-native-dropdown-select/lib/commonjs/DropdownSelect/index.js

A Dropdown select component for React Native

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DropdownSelect = DropdownSelect;

var _react = _interopRequireWildcard(require("react"));

var _reactNative = require("react-native");

var _utils = require("../utils");

var _useDropDownSelect = require("../useDropDownSelect");

var _DropdownButton = require("../DropdownButton");

var _DropdownModalContent = _interopRequireDefault(require("../DropdownModalContent"));

var _DropdownLoading = require("../DropdownLoading");

var _DropdownOptionGroup = require("../DropdownOptionGroup");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function DropdownSelect({
  component,
  children,
  render,
  loadingComponent,
  renderLoading,
  optionComponent,
  renderOption,
  optionGroupComponent,
  renderOptionGroup,
  position = 'bottom',
  placeholder = 'Select an option...',
  loading,
  buttonWrapperStyle,
  buttonContainerStyle,
  buttonLabelStyle,
  buttonIconStyle,
  buttonPlaceholderStyle,
  dropdownStyle,
  optionStyle,
  selectedOptionStyle,
  disabledOptionStyle,
  optionLabelStyle,
  selectedOptionLabelStyle,
  disabledOptionLabelStyle,
  optionGroupPadding,
  ...configs
}) {
  const {
    options
  } = configs;
  /**
   * Dropdown configs
   */

  const {
    showDropdown,
    hideDropdown,
    show,
    selectOption,
    selectedOption,
    compareOption,
    addHideEventListener,
    addShowEventListener,
    removeHideEventListener,
    removeShowEventListener
  } = (0, _useDropDownSelect.useDropdownSelect)(configs);
  /**
   * Button position
   */

  const [containerLayout, setContainerLayout] = (0, _react.useState)({
    x: 0,
    y: 0,
    width: 0,
    height: 0
  });
  const containerRef = (0, _react.useRef)(null);
  const measureContainer = (0, _react.useCallback)(callback => {
    var _containerRef$current;

    (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.measure((_x, _y, width, height, pageX, pageY) => {
      setContainerLayout({
        x: pageX,
        y: pageY,
        width,
        height
      });
      callback();
    });
  }, []);
  /**
   * Dropdown modal visible
   */

  const [modalVisible, setModalVisible] = (0, _react.useState)(show);
  const [dropdownContentVisible, setDropdownContentVisible] = (0, _react.useState)(show);
  const handleDropdownModalContentDismissed = (0, _react.useCallback)(() => {
    setModalVisible(false);
  }, []);
  (0, _react.useEffect)(() => {
    const onShow = () => {
      measureContainer(() => {
        setModalVisible(true);
        setDropdownContentVisible(true);
      });
    };

    addShowEventListener(onShow);

    const onHide = () => {
      measureContainer(() => {
        setDropdownContentVisible(false);
      });
    };

    addHideEventListener(onHide);
    return () => {
      removeShowEventListener(onShow);
      removeHideEventListener(onHide);
    };
  }, [addHideEventListener, addShowEventListener]);
  /**
   * Combine styles
   */

  const combinedWrapperStyle = (0, _react.useMemo)(() => {
    return [buttonWrapperStyle];
  }, [buttonWrapperStyle]);
  /**
   * Render
   */

  const buttonProps = (0, _react.useMemo)(() => {
    return {
      show,
      selectedOption,
      position,
      placeholder,
      loading,
      style: buttonContainerStyle,
      labelStyle: buttonLabelStyle,
      iconStyle: buttonIconStyle,
      placeholderStyle: buttonPlaceholderStyle
    };
  }, [show, selectedOption, position, placeholder, loading, buttonContainerStyle, buttonLabelStyle, buttonIconStyle, buttonPlaceholderStyle]);
  const computedChildren = (0, _react.useMemo)(() => {
    const childrenElement = (0, _utils.getRenderComponent)(buttonProps, component, render, children);
    return childrenElement || /*#__PURE__*/_react.default.createElement(_DropdownButton.DropdownButton, buttonProps);
  }, [component, children, render, buttonProps]);
  const computedLoadingComponent = (0, _react.useMemo)(() => {
    const loadingElement = (0, _utils.getRenderComponent)({}, loadingComponent, renderLoading);
    return loadingElement || /*#__PURE__*/_react.default.createElement(_DropdownLoading.DropdownLoading, null);
  }, [loadingComponent, renderLoading]);
  const renderItem = (0, _react.useCallback)(({
    item: option
  }) => {
    return (0, _DropdownOptionGroup.renderOptionItemOrGroup)({
      compareOption,
      renderOption,
      renderOptionGroup,
      selectedOption,
      optionGroupComponent,
      optionComponent,
      style: optionStyle,
      disabledStyle: disabledOptionStyle,
      labelStyle: optionLabelStyle,
      disabledLabelStyle: disabledOptionLabelStyle,
      activeStyle: selectedOptionStyle,
      activeLabelStyle: selectedOptionLabelStyle,
      selectOption,
      option,
      optionGroupPadding
    });
  }, [selectOption, compareOption, optionComponent, optionLabelStyle, optionStyle, renderOption, selectedOption, selectedOptionLabelStyle, selectedOptionStyle, optionGroupComponent, renderOptionGroup, disabledOptionStyle, disabledOptionLabelStyle, optionGroupPadding]);
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
    ref: containerRef,
    onPress: showDropdown,
    style: combinedWrapperStyle,
    activeOpacity: 1
  }, computedChildren), /*#__PURE__*/_react.default.createElement(_reactNative.Modal, {
    visible: modalVisible,
    transparent: true
  }, /*#__PURE__*/_react.default.createElement(_DropdownModalContent.default, {
    visible: dropdownContentVisible,
    onDismiss: hideDropdown,
    onDismissed: handleDropdownModalContentDismissed,
    dropdownContainerStyle: dropdownStyle,
    options: options,
    renderItem: renderItem,
    loading: loading,
    loadingComponent: computedLoadingComponent,
    buttonLayout: containerLayout,
    position: position
  })));
}
//# sourceMappingURL=index.js.map