@nutui/nutui-react-taro 1.5.2-beta.1 → 1.5.2

package/dist/esm/InputNumber.js

@@ -1,11 +1,277 @@
-import { I as InputNumber } from './inputnumber.taro-91f65d17.js';
-import 'react';
-import 'classnames';
-import './icon.taro-296a1bec.js';
-import './bem-350c1702.js';
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["children", "disabled", "buttonSize", "min", "max", "inputWidth", "readonly", "modelValue", "decimalPlaces", "step", "isAsync", "className", "style", "formatter", "add", "reduce", "change", "overlimit", "blur", "focus", "onAdd", "onReduce", "onOverlimit", "onBlurFuc", "onFocus", "onChangeFuc", "iconClassPrefix", "iconFontClassName"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React__default, { useState, useRef, useEffect } from 'react';
+import classNames from 'classnames';
+import Icon from './Icon.js';
+import { c as cn } from './bem-3b438e61.js';
+import { C as ComponentDefaults } from './typings-f27b58f4.js';
 import '@bem-react/classname';
-import './typings-b9828dba.js';
-
-
-
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
+  disabled: false,
+  buttonSize: '',
+  min: 1,
+  max: 9999,
+  inputWidth: '',
+  readonly: false,
+  modelValue: 0,
+  step: 1,
+  decimalPlaces: 0,
+  isAsync: false
+});
+function pxCheck(value) {
+  return Number.isNaN(Number(value)) ? String(value) : "".concat(value, "px");
+}
+var InputNumber = function InputNumber(props) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+    children = _defaultProps$props.children,
+    disabled = _defaultProps$props.disabled,
+    buttonSize = _defaultProps$props.buttonSize,
+    min = _defaultProps$props.min,
+    max = _defaultProps$props.max,
+    inputWidth = _defaultProps$props.inputWidth,
+    readonly = _defaultProps$props.readonly,
+    modelValue = _defaultProps$props.modelValue,
+    decimalPlaces = _defaultProps$props.decimalPlaces,
+    step = _defaultProps$props.step,
+    isAsync = _defaultProps$props.isAsync,
+    className = _defaultProps$props.className,
+    style = _defaultProps$props.style,
+    formatter = _defaultProps$props.formatter,
+    add = _defaultProps$props.add,
+    reduce = _defaultProps$props.reduce,
+    change = _defaultProps$props.change,
+    overlimit = _defaultProps$props.overlimit,
+    blur = _defaultProps$props.blur,
+    focus = _defaultProps$props.focus,
+    onAdd = _defaultProps$props.onAdd,
+    onReduce = _defaultProps$props.onReduce,
+    onOverlimit = _defaultProps$props.onOverlimit,
+    onBlurFuc = _defaultProps$props.onBlurFuc,
+    onFocus = _defaultProps$props.onFocus,
+    onChangeFuc = _defaultProps$props.onChangeFuc,
+    iconClassPrefix = _defaultProps$props.iconClassPrefix,
+    iconFontClassName = _defaultProps$props.iconFontClassName,
+    restProps = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var _useState = useState(modelValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  var inputRef = useRef('');
+  useEffect(function () {
+    if (formatter) {
+      inputRef.current = formatter(modelValue);
+      setInputValue(formatter(modelValue));
+    } else {
+      setInputValue(modelValue);
+    }
+  }, [modelValue, formatter]);
+  var b = cn('inputnumber');
+  var classes = classNames(_defineProperty({}, "".concat(b(''), "--disabled"), disabled), className, b(''));
+  var styles = _objectSpread({
+    height: pxCheck(buttonSize)
+  }, style);
+  var addAllow = function addAllow() {
+    var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : inputValue;
+    if (formatter) {
+      var numValue = String(value).replace(/[^0-9|\.]/gi, '');
+      return Number(numValue) < Number(max) && !disabled;
+    }
+    if (value || typeof value === 'number') {
+      return value < Number(max) && !disabled;
+    }
+    return false;
+  };
+  var reduceAllow = function reduceAllow() {
+    var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : inputValue;
+    if (formatter) {
+      var numValue = String(value).replace(/[^0-9|\.]/gi, '');
+      return Number(numValue) > Number(min) && !disabled;
+    }
+    if (value || typeof value === 'number') {
+      return value > Number(min) && !disabled;
+    }
+    return false;
+  };
+  var iconMinusClasses = classNames('nut-inputnumber__icon', {
+    'nut-inputnumber__icon--disabled': !reduceAllow()
+  });
+  var iconAddClasses = classNames('nut-inputnumber__icon', {
+    'nut-inputnumber__icon--disabled': !addAllow()
+  });
+  var fixedDecimalPlaces = function fixedDecimalPlaces(v) {
+    return Number(v).toFixed(Number(decimalPlaces));
+  };
+  var emitChange = function emitChange(value, e) {
+    var outputValue = fixedDecimalPlaces(value);
+    onChangeFuc && onChangeFuc(outputValue, e);
+    change && change(outputValue, e);
+    if (!isAsync) {
+      if (Number(outputValue) < Number(min)) {
+        formatter ? setInputValue(formatter(Number(min))) : setInputValue(Number(min));
+      } else if (Number(outputValue) > Number(max)) {
+        formatter ? setInputValue(formatter(Number(max))) : setInputValue(Number(max));
+      } else {
+        formatter ? setInputValue(formatter(outputValue)) : setInputValue(outputValue);
+      }
+    }
+  };
+  var reduceNumber = function reduceNumber(e) {
+    onReduce && onReduce(e);
+    reduce && reduce(e);
+    if (reduceAllow()) {
+      if (formatter) {
+        var numValue = String(inputValue).replace(/[^0-9|\.]/gi, '');
+        var outputValue = Number(numValue) - Number(step);
+        inputRef.current = formatter(outputValue);
+        emitChange(outputValue, e);
+      } else {
+        var _outputValue = Number(inputValue) - Number(step);
+        emitChange(_outputValue, e);
+      }
+    } else {
+      onOverlimit && onOverlimit(e);
+      overlimit && overlimit(e);
+    }
+  };
+  var addNumber = function addNumber(e) {
+    onAdd && onAdd(e);
+    add && add(e);
+    if (addAllow()) {
+      if (formatter) {
+        var numValue = String(inputValue).replace(/[^0-9|\.]/gi, '');
+        var outputValue = Number(numValue) + Number(step);
+        inputRef.current = formatter(outputValue);
+        emitChange(outputValue, e);
+      } else {
+        var _outputValue2 = Number(inputValue) + Number(step);
+        emitChange(_outputValue2, e);
+      }
+    } else {
+      onOverlimit && onOverlimit(e);
+      overlimit && overlimit(e);
+    }
+  };
+  var changeValue = function changeValue(e) {
+    var input = e.target;
+    change && change(input.valueAsNumber, e);
+    onChangeFuc && onChangeFuc(input.valueAsNumber, e);
+    if (!isAsync) {
+      if (Number.isNaN(input.valueAsNumber)) {
+        setInputValue('');
+      } else {
+        setInputValue(input.valueAsNumber);
+      }
+    }
+  };
+  var changeFormatValue = function changeFormatValue(e) {
+    var input = e.target.value;
+    var numReg = new RegExp('^[0-9]*$');
+    var numValue = input.replace(/[^0-9|\.]/gi, '');
+    if (formatter) {
+      if (!numReg.test(input[0]) && numValue) {
+        setInputValue(formatter(numValue));
+      } else if (!numReg.test(input[0]) && !numValue) {
+        setInputValue(input);
+      } else if (numReg.test(input[0])) {
+        console.log('inputRef.current', inputRef.current);
+        console.log('formatter(numValue)', formatter(numValue));
+        // 针对于100%这种尾字符例子，直接删除会进行匹配
+        if (formatter(numValue) === inputRef.current) {
+          setInputValue(numValue);
+        } else {
+          setInputValue(formatter(numValue));
+          inputRef.current = formatter(numValue);
+        }
+      }
+    }
+  };
+  var burFormatValue = function burFormatValue(e) {
+    var input = e.target.value;
+    var numReg = new RegExp('^[0-9]*$');
+    var numValue = input.replace(/[^0-9|\.]/gi, '');
+    if (formatter) {
+      if (formatter(numValue) === input) {
+        emitChange(numValue, e);
+        return;
+      }
+      if (!numReg.test(input) || !input) {
+        setInputValue(formatter(''));
+      }
+    }
+  };
+  var focusValue = function focusValue(e) {
+    if (disabled) return;
+    if (readonly) return;
+    onFocus && onFocus(e);
+    focus && focus(e);
+  };
+  var burValue = function burValue(e) {
+    if (disabled) return;
+    if (readonly) return;
+    var input = e.target;
+    var value = input.valueAsNumber;
+    if (value < Number(min)) {
+      value = Number(min);
+    } else if (value > Number(max)) {
+      value = Number(max);
+    }
+    emitChange(value, e);
+    onBlurFuc && onBlurFuc(e);
+    blur && blur(e);
+  };
+  return React__default.createElement("div", _objectSpread({
+    className: classes,
+    style: styles
+  }, restProps), React__default.createElement("div", {
+    className: "nut-input-minus"
+  }, React__default.createElement(Icon, {
+    classPrefix: iconClassPrefix,
+    fontClassName: iconFontClassName,
+    className: iconMinusClasses,
+    size: buttonSize,
+    name: "minus",
+    onClick: reduceNumber
+  })), React__default.createElement(React__default.Fragment, null, formatter ? React__default.createElement("input", {
+    type: "text",
+    min: min,
+    max: max,
+    style: {
+      width: pxCheck(inputWidth)
+    },
+    disabled: disabled,
+    readOnly: readonly,
+    value: inputValue,
+    onInput: changeFormatValue,
+    onBlur: burFormatValue,
+    onFocus: focusValue
+  }) : React__default.createElement("input", {
+    type: "number",
+    min: min,
+    max: max,
+    style: {
+      width: pxCheck(inputWidth)
+    },
+    disabled: disabled,
+    readOnly: readonly,
+    value: inputValue,
+    onInput: changeValue,
+    onBlur: burValue,
+    onFocus: focusValue
+  })), React__default.createElement("div", {
+    className: "nut-input-add"
+  }, React__default.createElement(Icon, {
+    classPrefix: iconClassPrefix,
+    fontClassName: iconFontClassName,
+    className: iconAddClasses,
+    size: buttonSize,
+    name: "plus",
+    onClick: addNumber
+  })));
+};
+InputNumber.defaultProps = defaultProps;
+InputNumber.displayName = 'NutInputNumber';
 export { InputNumber as default };

package/dist/esm/Layout.js

@@ -1,6 +1,14 @@
-import { L as Layout } from './layout.taro-9046d093.js';
-import 'react';
-
-
-
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React__default from 'react';
+var defaultProps = {};
+var Layout = function Layout(props) {
+  _objectSpread(_objectSpread({}, defaultProps), props);
+  return React__default.createElement("div", {
+    className: "nut-layout"
+  }, "Layout");
+};
+Layout.defaultProps = defaultProps;
+Layout.displayName = 'NutLayout';
 export { Layout as default };

package/dist/esm/Menu.js

@@ -1,11 +1,154 @@
-import { M as Menu } from './menu.taro-7e4038a1.js';
-import 'react';
-import 'classnames';
-import './icon.taro-296a1bec.js';
-import './bem-350c1702.js';
-import '@bem-react/classname';
-import './typings-b9828dba.js';
-
-
-
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["className", "titleIcon", "scrollFixed", "lockScroll", "closeOnClickOverlay", "children", "activeColor", "iconClassPrefix", "iconFontClassName"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React__default, { useRef, useState, useEffect } from 'react';
+import classNames from 'classnames';
+import Icon from './Icon.js';
+import { C as ComponentDefaults } from './typings-f27b58f4.js';
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
+  className: '',
+  style: {},
+  activeColor: '#F2270C',
+  closeOnClickOverlay: true,
+  scrollFixed: false,
+  lockScroll: true,
+  titleIcon: ''
+});
+var Menu = function Menu(props) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+    className = _defaultProps$props.className,
+    titleIcon = _defaultProps$props.titleIcon,
+    scrollFixed = _defaultProps$props.scrollFixed,
+    lockScroll = _defaultProps$props.lockScroll,
+    closeOnClickOverlay = _defaultProps$props.closeOnClickOverlay,
+    children = _defaultProps$props.children,
+    activeColor = _defaultProps$props.activeColor,
+    iconClassPrefix = _defaultProps$props.iconClassPrefix,
+    iconFontClassName = _defaultProps$props.iconFontClassName,
+    rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var parentRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isScrollFixed = _useState2[0],
+    setIsScrollFixed = _useState2[1];
+  var getScrollTop = function getScrollTop(el) {
+    return Math.max(0, 'scrollTop' in el ? el.scrollTop : el.pageYOffset);
+  };
+  var onScroll = function onScroll() {
+    var scrollFixed = props.scrollFixed;
+    var scrollTop = getScrollTop(window);
+    var isFixed = scrollTop > (typeof scrollFixed === 'boolean' ? 30 : Number(scrollFixed));
+    setIsScrollFixed(isFixed);
+  };
+  useEffect(function () {
+    if (scrollFixed) {
+      window.addEventListener('scroll', onScroll);
+    }
+    return function () {
+      return window.removeEventListener('scroll', onScroll);
+    };
+  }, []);
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    itemShow = _useState4[0],
+    setItemShow = _useState4[1];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    itemTitle = _useState6[0],
+    setItemTitle = _useState6[1];
+  var toggleItemShow = function toggleItemShow(index) {
+    itemShow[index] = !itemShow[index];
+    var temp = itemShow.map(function (i, idx) {
+      return idx === index ? i : false;
+    });
+    setItemShow(_toConsumableArray(temp));
+  };
+  var hideItemShow = function hideItemShow(index) {
+    itemShow[index] = false;
+    setItemShow(_toConsumableArray(itemShow));
+  };
+  var updateTitle = function updateTitle(text, index) {
+    itemTitle[index] = text;
+    setItemTitle(_toConsumableArray(itemTitle));
+  };
+  var parent = function parent() {
+    return parentRef;
+  };
+  var cloneChildren = function cloneChildren() {
+    return React__default.Children.map(children, function (child, index) {
+      return React__default.cloneElement(child, {
+        showPopup: itemShow[index],
+        orderKey: index,
+        activeColor: activeColor,
+        parent: {
+          closeOnClickOverlay: closeOnClickOverlay,
+          lockScroll: lockScroll,
+          toggleItemShow: toggleItemShow,
+          updateTitle: updateTitle,
+          hideItemShow: hideItemShow,
+          parent: parent
+        }
+      });
+    });
+  };
+  return React__default.createElement("div", _objectSpread(_objectSpread({
+    className: "nut-menu ".concat(className, " ").concat(isScrollFixed ? 'scroll-fixed' : '')
+  }, rest), {}, {
+    ref: parentRef
+  }), React__default.createElement("div", {
+    className: "nut-menu-relative"
+  }, React__default.createElement("div", {
+    className: "nut-menu__bar ".concat(itemShow.includes(true) ? 'opened' : '', " ").concat(className)
+  }, React__default.Children.toArray(children).map(function (child, index) {
+    if (!child) return null;
+    var _child$props = child.props,
+      disabled = _child$props.disabled,
+      title = _child$props.title,
+      value = _child$props.value,
+      direction = _child$props.direction,
+      options = _child$props.options,
+      className = _child$props.className;
+    var currentTitle = options === null || options === void 0 ? void 0 : options.filter(function (option) {
+      return option.value === value;
+    });
+    function finallyTitle() {
+      if (title) return title;
+      if (itemTitle && itemTitle[index]) return itemTitle[index];
+      if (currentTitle && currentTitle[0] && currentTitle[0].text) return currentTitle[0].text;
+      return '';
+    }
+    return React__default.createElement("div", {
+      className: "nut-menu__item ".concat(classNames({
+        active: itemShow[index],
+        disabled: disabled
+      }), " ").concat(className),
+      style: {
+        color: itemShow[index] ? activeColor : ''
+      },
+      key: index,
+      onClick: function onClick() {
+        !disabled && toggleItemShow(index);
+      }
+    }, React__default.createElement("div", {
+      className: "nut-menu__title ".concat(classNames({
+        active: itemShow[index],
+        disabled: disabled
+      }))
+    }, React__default.createElement("div", {
+      className: "nut-menu__title-text"
+    }, finallyTitle()), React__default.createElement(Icon, {
+      classPrefix: iconClassPrefix,
+      fontClassName: iconFontClassName,
+      className: "nut-menu__title-icon",
+      size: "10",
+      name: titleIcon || (direction === 'up' ? 'arrow-up' : 'down-arrow')
+    })));
+  })), cloneChildren()));
+};
+Menu.defaultProps = defaultProps;
+Menu.displayName = 'NutMenu';
 export { Menu as default };

package/dist/esm/MenuItem.js

@@ -1,17 +1,177 @@
-import { M as MenuItem } from './menuitem.taro-96cc4f15.js';
-import 'react';
-import 'classnames';
-import 'react-transition-group';
-import './configprovider.taro-8d71eb49.js';
-import 'lodash.kebabcase';
-import './zh-CN-c779e6c1.js';
-import './icon.taro-296a1bec.js';
-import './bem-350c1702.js';
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React__default, { forwardRef, useState, useEffect, useImperativeHandle } from 'react';
+import classNames from 'classnames';
+import { CSSTransition } from 'react-transition-group';
+import Icon from './Icon.js';
+import { O as Overlay } from './overlay-de6c79d5.js';
+import { C as ComponentDefaults } from './typings-f27b58f4.js';
+import './bem-3b438e61.js';
 import '@bem-react/classname';
-import './overlay.taro-21e87fb1.js';
-import '@tarojs/components';
-import './typings-b9828dba.js';
-
-
-
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
+  className: '',
+  style: {},
+  columns: 1,
+  direction: 'down',
+  optionsIcon: 'Check',
+  activeTitleClass: '',
+  inactiveTitleClass: '',
+  iconClassPrefix: 'nut-icon',
+  fontClassName: 'nutui-iconfont',
+  onChange: function onChange(value) {
+    return undefined;
+  }
+});
+var MenuItem = forwardRef(function (props, ref) {
+  var mergedProps = _objectSpread(_objectSpread({}, defaultProps), props);
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+    style = _defaultProps$props.style,
+    options = _defaultProps$props.options,
+    value = _defaultProps$props.value,
+    columns = _defaultProps$props.columns,
+    title = _defaultProps$props.title,
+    optionsIcon = _defaultProps$props.optionsIcon,
+    direction = _defaultProps$props.direction,
+    onChange = _defaultProps$props.onChange,
+    activeTitleClass = _defaultProps$props.activeTitleClass,
+    inactiveTitleClass = _defaultProps$props.inactiveTitleClass,
+    children = _defaultProps$props.children,
+    iconClassPrefix = _defaultProps$props.iconClassPrefix,
+    iconFontClassName = _defaultProps$props.iconFontClassName;
+  var activeColor = mergedProps.activeColor,
+    showPopup = mergedProps.showPopup,
+    parent = mergedProps.parent,
+    orderKey = mergedProps.orderKey;
+  var _useState = useState(showPopup),
+    _useState2 = _slicedToArray(_useState, 2),
+    _showPopup = _useState2[0],
+    setShowPopup = _useState2[1];
+  var _useState3 = useState(value),
+    _useState4 = _slicedToArray(_useState3, 2),
+    _value = _useState4[0],
+    setValue = _useState4[1];
+  useEffect(function () {
+    setShowPopup(showPopup);
+  }, [showPopup]);
+  useEffect(function () {
+    getParentOffset();
+  }, [_showPopup]);
+  useImperativeHandle(ref, function () {
+    return {
+      toggle: parent.toggleItemShow
+    };
+  });
+  var getIconCName = function getIconCName(optionVal, value) {
+    var _classNames;
+    return classNames((_classNames = {}, _defineProperty(_classNames, activeTitleClass, optionVal === value), _defineProperty(_classNames, inactiveTitleClass, optionVal !== value), _classNames));
+  };
+  var setTitle = function setTitle(text) {
+    if (!title) {
+      parent.updateTitle(text, orderKey);
+    }
+  };
+  var handleClick = function handleClick(item) {
+    parent.toggleItemShow(orderKey);
+    setTitle(item.text);
+    setValue(item.value);
+    onChange && onChange(item);
+  };
+  var _useState5 = useState({
+      top: 0,
+      height: 0
+    }),
+    _useState6 = _slicedToArray(_useState5, 2),
+    position = _useState6[0],
+    setPosition = _useState6[1];
+  var getParentOffset = function getParentOffset() {
+    setTimeout(function () {
+      var p = parent.parent().current;
+      var rect = p.getBoundingClientRect();
+      setPosition({
+        height: rect.height,
+        top: rect.top
+      });
+    });
+  };
+  var isShow = function isShow() {
+    if (_showPopup) return {};
+    return {
+      display: 'none'
+    };
+  };
+  var getPosition = function getPosition() {
+    return direction === 'down' ? {
+      top: "".concat(position.top + position.height, "px")
+    } : {
+      bottom: "".concat(window.innerHeight - position.top, "px"),
+      top: 'auto'
+    };
+  };
+  var placeholderStyle = function placeholderStyle() {
+    if (direction === 'down') {
+      return _objectSpread(_objectSpread({
+        height: "".concat(position.top + position.height, "px")
+      }, isShow()), style);
+    }
+    return _objectSpread(_objectSpread({
+      height: "".concat(window.innerHeight - position.top, "px"),
+      top: 'auto'
+    }, isShow()), style);
+  };
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: "placeholder-element ".concat(classNames({
+      up: direction === 'up'
+    })),
+    style: placeholderStyle(),
+    onClick: function onClick() {
+      return parent.toggleItemShow(orderKey);
+    }
+  }), React__default.createElement(Overlay, {
+    overlayClass: "nut-menu__overlay",
+    style: getPosition(),
+    lockScroll: parent.lockScroll,
+    visible: _showPopup,
+    closeOnClickOverlay: parent.closeOnClickOverlay,
+    onClick: function onClick() {
+      parent.closeOnClickOverlay && parent.toggleItemShow(orderKey);
+    }
+  }), React__default.createElement("div", {
+    className: direction === 'down' ? 'nut-menu-item__wrap' : 'nut-menu-item__wrap-up',
+    style: _objectSpread({}, isShow())
+  }, React__default.createElement(CSSTransition, {
+    "in": _showPopup,
+    timeout: 100,
+    classNames: direction === 'down' ? 'menu-item' : 'menu-item-up'
+  }, React__default.createElement("div", {
+    className: "nut-menu-item__content"
+  }, options === null || options === void 0 ? void 0 : options.map(function (item, index) {
+    return React__default.createElement("div", {
+      className: "nut-menu-item__option ".concat(classNames({
+        active: item.value === _value
+      })),
+      key: item.text,
+      style: {
+        flexBasis: "".concat(100 / columns, "%")
+      },
+      onClick: function onClick() {
+        handleClick(item);
+      }
+    }, item.value === _value ? React__default.createElement(Icon, {
+      classPrefix: iconClassPrefix,
+      fontClassName: iconFontClassName,
+      className: getIconCName(item.value, value),
+      name: optionsIcon,
+      color: activeColor
+    }) : null, React__default.createElement("div", {
+      className: getIconCName(item.value, value),
+      style: {
+        color: "".concat(item.value === _value ? activeColor : '')
+      }
+    }, item.text));
+  }), children))));
+});
+MenuItem.defaultProps = defaultProps;
+MenuItem.displayName = 'NutMenuItem';
 export { MenuItem as default };