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

UI components for WordPress.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement } from "@wordpress/element";

/**
 * External dependencies
 */
import classnames from 'classnames';
import { Platform } from 'react-native';
/**
 * WordPress dependencies
 */

import { BottomSheet, PanelBody } from '@wordpress/components';
import { withPreferredColorScheme } from '@wordpress/compose';
import { menu } from '@wordpress/icons';
/**
 * Internal dependencies
 */

import Button from '../button';
import Dropdown from '../dropdown';

function mergeProps() {
  let defaultProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  let props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  const mergedProps = { ...defaultProps,
    ...props
  };

  if (props.className && defaultProps.className) {
    mergedProps.className = classnames(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(_ref) {
  let {
    children,
    className,
    controls,
    icon = menu,
    label,
    popoverProps,
    toggleProps
  } = _ref;

  if (!(controls !== null && controls !== void 0 && controls.length) && !isFunction(children)) {
    return null;
  } // Normalize controls to nested array of objects (sets of controls)


  let controlSets;

  if (controls !== null && controls !== void 0 && controls.length) {
    controlSets = controls;

    if (!Array.isArray(controlSets[0])) {
      controlSets = [controlSets];
    }
  }

  const mergedPopoverProps = mergeProps({
    className: 'components-dropdown-menu__popover'
  }, popoverProps);
  return createElement(Dropdown, {
    className: classnames('components-dropdown-menu', className),
    popoverProps: mergedPopoverProps,
    renderToggle: _ref2 => {
      let {
        isOpen,
        onToggle
      } = _ref2;
      const mergedToggleProps = mergeProps({
        className: classnames('components-dropdown-menu__toggle', {
          'is-opened': isOpen
        })
      }, toggleProps);
      return createElement(Button, _extends({}, mergedToggleProps, {
        icon: icon,
        onClick: event => {
          onToggle(event);

          if (mergedToggleProps.onClick) {
            mergedToggleProps.onClick(event);
          }
        },
        "aria-haspopup": "true",
        "aria-expanded": isOpen,
        label: label
      }), mergedToggleProps.children);
    },
    renderContent: _ref3 => {
      var _controlSets;

      let {
        isOpen,
        onClose,
        ...props
      } = _ref3;
      return createElement(BottomSheet, {
        hideHeader: true,
        isVisible: isOpen,
        onClose: onClose
      }, isFunction(children) ? children(props) : null, createElement(PanelBody, {
        title: label,
        style: {
          paddingLeft: 0,
          paddingRight: 0
        }
      }, (_controlSets = controlSets) === null || _controlSets === void 0 ? void 0 : _controlSets.flatMap((controlSet, indexOfSet) => controlSet.map((control, indexOfControl) => createElement(BottomSheet.Cell, {
        key: [indexOfSet, indexOfControl].join(),
        label: control.title,
        onPress: () => {
          onClose();

          if (control.onClick) {
            control.onClick();
          }
        },
        editable: false,
        icon: control.icon,
        leftAlign: true,
        isSelected: control.isActive,
        separatorType: Platform.OS === 'android' ? 'none' : 'leftMargin'
      })))));
    }
  });
}

export default withPreferredColorScheme(DropdownMenu);
//# sourceMappingURL=index.native.js.map