@wordpress/components/build/dropdown-menu/index.native.js

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _reactNative = require("react-native");
var _compose = require("@wordpress/compose");
var _icons = require("@wordpress/icons");
var _button = _interopRequireDefault(require("../button"));
var _dropdown = _interopRequireDefault(require("../dropdown"));
var _bottomSheet = _interopRequireDefault(require("../mobile/bottom-sheet"));
var _body = _interopRequireDefault(require("../panel/body"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function mergeProps(defaultProps = {}, props = {}) {
  const mergedProps = {
    ...defaultProps,
    ...props
  };
  if (props.className && defaultProps.className) {
    mergedProps.className = (0, _clsx.default)(props.className, defaultProps.className);
  }
  return mergedProps;
}

/**
 * Whether the argument is a function.
 *
 * @param {*} maybeFunc The argument to check.
 * @return {boolean} True if the argument is a function, false otherwise.
 */
function isFunction(maybeFunc) {
  return typeof maybeFunc === 'function';
}
function DropdownMenu({
  children,
  className,
  controls,
  icon = _icons.menu,
  label,
  popoverProps,
  toggleProps
}) {
  if (!controls?.length && !isFunction(children)) {
    return null;
  }

  // Normalize controls to nested array of objects (sets of controls)
  let controlSets;
  if (controls?.length) {
    controlSets = controls;
    if (!Array.isArray(controlSets[0])) {
      controlSets = [controlSets];
    }
  }
  const mergedPopoverProps = mergeProps({
    className: 'components-dropdown-menu__popover'
  }, popoverProps);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdown.default, {
    className: (0, _clsx.default)('components-dropdown-menu', className),
    popoverProps: mergedPopoverProps,
    renderToggle: ({
      isOpen,
      onToggle
    }) => {
      const mergedToggleProps = mergeProps({
        className: (0, _clsx.default)('components-dropdown-menu__toggle', {
          'is-opened': isOpen
        })
      }, toggleProps);
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
        ...mergedToggleProps,
        icon: icon,
        onClick: event => {
          onToggle(event);
          if (mergedToggleProps.onClick) {
            mergedToggleProps.onClick(event);
          }
        },
        "aria-haspopup": "true",
        "aria-expanded": isOpen,
        label: label,
        children: mergedToggleProps.children
      });
    },
    renderContent: ({
      isOpen,
      onClose,
      ...props
    }) => {
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_bottomSheet.default, {
        hideHeader: true,
        isVisible: isOpen,
        onClose: onClose,
        children: [isFunction(children) ? children(props) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_body.default, {
          title: label,
          style: {
            paddingLeft: 0,
            paddingRight: 0
          },
          children: controlSets?.flatMap((controlSet, indexOfSet) => controlSet.map((control, indexOfControl) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_bottomSheet.default.Cell, {
            label: control.title,
            onPress: () => {
              onClose();
              if (control.onClick) {
                control.onClick();
              }
            },
            editable: false,
            icon: control.icon,
            leftAlign: true,
            isSelected: control.isActive,
            separatorType: _reactNative.Platform.OS === 'android' ? 'none' : 'leftMargin'
          }, [indexOfSet, indexOfControl].join())))
        })]
      });
    }
  });
}
var _default = exports.default = (0, _compose.withPreferredColorScheme)(DropdownMenu);
//# sourceMappingURL=index.native.js.map