@vnmfify/core/dropdown-menu/dropdown-menu-item.js

```shell npm i @vnmfify/core -S ```

import _isBoolean from "lodash/isBoolean";
import _isArray from "lodash/isArray";
var _excluded = ["style", "__dataKey__", "defaultValue", "value", "disabled", "children", "onChange", "onTransitionExited"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import { useUncontrolled } from "@vnmfify/hooks";
import { View } from "@vnxjs/components";
import classnames from "classnames";
import * as React from "react";
import { useCallback, useContext, useMemo, useState } from "react";
import Popup from "../popup";
import { prefixClassname } from "../styles";
import { addUnitPx } from "../utils/format/unit";
import DropdownMenuItemContext from "./dropdown-menu-item.context";
import DropdownMenuContext from "./dropdown-menu.context";

function DropdownMenuItem(props) {
  var {
    style: styleProp,
    __dataKey__: dataKey,
    defaultValue,
    value: valueProp,
    disabled,
    children,
    onChange: onChangeProp,
    onTransitionExited: _onTransitionExited
  } = props,
      restProps = _objectWithoutProperties(props, _excluded);

  var {
    getValue,
    setValue
  } = useUncontrolled({
    value: valueProp,
    defaultValue,
    onChange: onChangeProp
  });
  var {
    direction = "down",
    itemOffset,
    isItemToggle,
    toggleItem: triggerItem
  } = useContext(DropdownMenuContext);
  var active = useMemo(() => isItemToggle === null || isItemToggle === void 0 ? void 0 : isItemToggle(dataKey), [dataKey, isItemToggle]);
  var [opened, setOpened] = useState(false);
  var down = direction === "down";
  var toggleItem = useCallback(() => {
    if (!disabled) {
      triggerItem === null || triggerItem === void 0 ? void 0 : triggerItem(dataKey);
    }
  }, [dataKey, disabled, triggerItem]);
  var isOptionToggle = useCallback(aValue => _isArray(getValue()) ? getValue().includes(aValue) : getValue() === aValue, [getValue]);
  var toggleOption = useCallback(_ref => {
    var {
      value: evtValue,
      active
    } = _ref;
    var value = getValue();

    var multiselect = _isArray(value);

    if (multiselect) {
      if (active) {
        setValue(value.concat(evtValue));
      } else {
        setValue(value.filter(aValue => aValue !== evtValue));
      }
    } else {
      setValue(value === evtValue && !active ? undefined : evtValue);
    }

    toggleItem();
  }, [getValue, setValue, toggleItem]);
  var rootStyle = useMemo(() => {
    var style = {};

    if (opened) {
      if (down) {
        style.top = itemOffset ? addUnitPx(itemOffset) : "";
      } else {
        style.bottom = itemOffset ? addUnitPx(itemOffset) : "";
      }
    }

    style.display = !active && !opened ? "none" : "";
    return style;
  }, [opened, active, down, itemOffset]);
  return /*#__PURE__*/React.createElement(DropdownMenuItemContext.Provider, {
    value: {
      toggleOption,
      isOptionToggle
    }
  }, /*#__PURE__*/React.createElement(View, _objectSpread({
    style: _objectSpread(_objectSpread({}, styleProp), rootStyle),
    className: classnames(prefixClassname("dropdown-menu-item"), prefixClassname("dropdown-menu-item--".concat(direction)))
  }, restProps), /*#__PURE__*/React.createElement(Popup, {
    open: _isBoolean(active) && active,
    className: prefixClassname("dropdown-menu-item__content"),
    placement: down ? "top" : "bottom",
    onTransitionEnter: () => setOpened(true),
    onTransitionExited: function onTransitionExited() {
      setOpened(false);

      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
      }

      _onTransitionExited === null || _onTransitionExited === void 0 ? void 0 : _onTransitionExited(...args);
    }
  }, /*#__PURE__*/React.createElement(Popup.Backdrop, {
    style: {
      position: "absolute"
    },
    onClick: toggleItem
  }), children)));
}

export default DropdownMenuItem;
//# sourceMappingURL=dropdown-menu-item.js.map