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

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

import _isString from "lodash/isString";
import _isNumber from "lodash/isNumber";
import _isNull from "lodash/isNull";
import _size from "lodash/size";
var _excluded = ["className", "defaultValue", "value", "direction", "children", "onChange"];

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 { getSystemInfoSync, usePageScroll } from "@vnxjs/vnmf";
import classnames from "classnames";
import * as React from "react";
import { Children, cloneElement, isValidElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useMounted } from "../hooks";
import { prefixClassname } from "../styles";
import { getRect } from "../utils/dom/rect";
import DropdownMenuItem from "./dropdown-menu-item";
import DropdownMenuOption from "./dropdown-menu-option";
import DropdownMenuTitle from "./dropdown-menu-title";
import DropdownMenuContext from "./dropdown-menu.context";

function getDropdownMenuTitle(options, dropdownValue) {
  var firstRef = {
    current: undefined
  };
  var nodeRef = {
    current: undefined
  };
  Children.forEach(options, (child, index) => {
    if (! /*#__PURE__*/isValidElement(child)) {
      return;
    }

    var element = child;
    var elementType = element.type;

    if (elementType === DropdownMenuOption) {
      var {
        props
      } = element;
      var {
        title,
        value,
        children
      } = props;

      if (index === 0) {
        firstRef.current = title !== null && title !== void 0 ? title : children;
      }

      if (dropdownValue === value) {
        nodeRef.current = title !== null && title !== void 0 ? title : children;
      }
    }
  });

  if (!nodeRef.current) {
    nodeRef.current = firstRef.current;
  }

  return nodeRef.current;
}

function useDropdownMenuChildren(children) {
  return useMemo(() => {
    var __children__ = {
      titles: [],
      items: []
    };
    Children.forEach(children, child => {
      if (! /*#__PURE__*/isValidElement(child)) {
        return;
      }

      var element = child;
      var elementType = element.type;

      if (elementType === DropdownMenuItem) {
        var {
          key,
          props
        } = element;
        var {
          disabled,
          title,
          value,
          children: itemChildren
        } = props;

        var index = _size(__children__.items);

        var itemKey = key !== null && key !== void 0 ? key : index;

        __children__.items.push( /*#__PURE__*/cloneElement(element, {
          key: itemKey,
          __dataKey__: itemKey
        }));

        __children__.titles.push( /*#__PURE__*/React.createElement(DropdownMenuTitle, {
          key: itemKey,
          __dataKey__: itemKey,
          disabled: disabled,
          children: title !== null && title !== void 0 ? title : getDropdownMenuTitle(itemChildren, value)
        }));
      }
    });
    return __children__;
  }, [children]);
}

function DropdownMenu(props) {
  var {
    className,
    defaultValue,
    value: valueProp,
    direction = "down",
    children: childrenProp,
    onChange: onChangeProp
  } = props,
      restProps = _objectWithoutProperties(props, _excluded);

  var {
    value,
    setValue
  } = useUncontrolled({
    value: valueProp,
    onChange: onChangeProp
  });
  var barRef = useRef();
  var [opened, setOpened] = useState();
  var [itemOffset, setItemOffset] = useState(0);
  var {
    titles,
    items
  } = useDropdownMenuChildren(childrenProp);
  var toggleKeyRef = useRef();
  var windowHeight = useMemo(() => getSystemInfoSync().windowHeight, []);
  var updateItemOffset = useCallback(() => {
    getRect(barRef).then(rect => {
      if (rect) {
        if (direction === "down") {
          setItemOffset(rect.bottom);
        } else {
          setItemOffset(windowHeight - rect.top);
        }
      }
    });
  }, [direction, windowHeight]);
  var toggleItem = useCallback(itemKey => {
    var itemActive = value === itemKey ? null : itemKey;

    if (itemActive !== null) {
      updateItemOffset();
    }

    setValue(itemActive);
  }, [setValue, updateItemOffset, value]);
  var isItemToggle = useCallback(itemKey => {
    var active = toggleKeyRef.current === itemKey;

    if (active && _isNull(value)) {
      return null;
    }

    return value === itemKey;
  }, [value]);
  useEffect(() => setOpened(value !== false && value !== null && value !== undefined), [value]);
  usePageScroll(updateItemOffset);
  useMounted(() => {
    if (_isNumber(defaultValue) || _isString(defaultValue)) {
      toggleItem(defaultValue);
      setTimeout(updateItemOffset, 120);
    }
  });
  return /*#__PURE__*/React.createElement(DropdownMenuContext.Provider, {
    value: {
      direction,
      itemOffset,
      toggleItem,
      isItemToggle
    }
  }, /*#__PURE__*/React.createElement(View, _objectSpread({
    className: classnames(prefixClassname("dropdown-menu"), className)
  }, restProps), /*#__PURE__*/React.createElement(View, {
    ref: barRef,
    className: classnames(prefixClassname("dropdown-menu__bar"), {
      [prefixClassname("dropdown-menu__bar--opened")]: opened
    }),
    children: titles
  }), items));
}

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