@nutui/nutui-react-taro 1.4.4 → 1.4.5-beta.0

package/dist/esm/menu.taro-4abed328.js

@@ -1,142 +1,99 @@
-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, useEffect, useState } from 'react';
 import classNames from 'classnames';
 import { I as Icon } from './icon.taro-1d0d4fb7.js';
 import { C as ComponentDefaults } from './typings-1c5f2628.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 onScroll = function onScroll() {};
-  useEffect(function () {
-    if (scrollFixed) {
-      window.addEventListener('scroll', onScroll);
-    }
-    return function () {
-      return window.removeEventListener('scroll', onScroll);
+
+const defaultProps = {
+    ...ComponentDefaults,
+    className: '',
+    style: {},
+    activeColor: '#F2270C',
+    closeOnClickOverlay: true,
+    scrollFixed: false,
+    lockScroll: true,
+    titleIcon: '',
+};
+const Menu = (props) => {
+    const { className, titleIcon, scrollFixed, lockScroll, closeOnClickOverlay, children, activeColor, iconClassPrefix, iconFontClassName, ...rest } = {
+        ...defaultProps,
+        ...props,
     };
-  }, []);
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    itemShow = _useState2[0],
-    setItemShow = _useState2[1];
-  var _useState3 = useState([]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    itemTitle = _useState4[0],
-    setItemTitle = _useState4[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
+    const parentRef = useRef(null);
+    const onScroll = () => { };
+    useEffect(() => {
+        if (scrollFixed) {
+            window.addEventListener('scroll', onScroll);
         }
-      });
-    });
-  };
-  return React__default.createElement("div", _objectSpread(_objectSpread({
-    className: "nut-menu ".concat(className)
-  }, 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()));
+        return () => window.removeEventListener('scroll', onScroll);
+    }, []);
+    const [itemShow, setItemShow] = useState([]);
+    const [itemTitle, setItemTitle] = useState([]);
+    const toggleItemShow = (index) => {
+        itemShow[index] = !itemShow[index];
+        const temp = itemShow.map((i, idx) => (idx === index ? i : false));
+        setItemShow([...temp]);
+    };
+    const hideItemShow = (index) => {
+        itemShow[index] = false;
+        setItemShow([...itemShow]);
+    };
+    const updateTitle = (text, index) => {
+        itemTitle[index] = text;
+        setItemTitle([...itemTitle]);
+    };
+    const parent = () => {
+        return parentRef;
+    };
+    const cloneChildren = () => {
+        return React__default.Children.map(children, (child, index) => {
+            return React__default.cloneElement(child, {
+                showPopup: itemShow[index],
+                orderKey: index,
+                activeColor,
+                parent: {
+                    closeOnClickOverlay,
+                    lockScroll,
+                    toggleItemShow,
+                    updateTitle,
+                    hideItemShow,
+                    parent,
+                },
+            });
+        });
+    };
+    return (React__default.createElement("div", { className: `nut-menu ${className}`, ...rest, ref: parentRef },
+        React__default.createElement("div", { className: "nut-menu-relative" },
+            React__default.createElement("div", { className: `nut-menu__bar ${itemShow.includes(true) ? 'opened' : ''} ${className}` }, React__default.Children.toArray(children).map((child, index) => {
+                if (!child)
+                    return null;
+                const { disabled, title, value, direction, options, className } = child.props;
+                const currentTitle = options?.filter((option) => 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 ${classNames({
+                        active: itemShow[index],
+                        disabled,
+                    })} ${className}`, style: { color: itemShow[index] ? activeColor : '' }, key: index, onClick: () => {
+                        !disabled && toggleItemShow(index);
+                    } },
+                    React__default.createElement("div", { className: `nut-menu__title ${classNames({
+                            active: itemShow[index],
+                            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 M };

package/dist/esm/menuitem.taro-6e8b27c3.js

@@ -0,0 +1,130 @@
+import React__default, { forwardRef, useState, useEffect, useImperativeHandle } from 'react';
+import classNames from 'classnames';
+import { CSSTransition } from 'react-transition-group';
+import { u as useConfig } from './configprovider.taro-26882dd2.js';
+import { I as Icon } from './icon.taro-1d0d4fb7.js';
+import { O as Overlay } from './overlay.taro-98367bc1.js';
+import { C as ComponentDefaults } from './typings-1c5f2628.js';
+
+const defaultProps = {
+    ...ComponentDefaults,
+    className: '',
+    style: {},
+    columns: 1,
+    direction: 'down',
+    optionsIcon: 'Check',
+    activeTitleClass: '',
+    inactiveTitleClass: '',
+    iconClassPrefix: 'nut-icon',
+    fontClassName: 'nutui-iconfont',
+    onChange: (value) => undefined,
+};
+const MenuItem = forwardRef((props, ref) => {
+    useConfig();
+    const mergedProps = { ...defaultProps, ...props };
+    const { style, options, value, columns, title, optionsIcon, direction, onChange, activeTitleClass, inactiveTitleClass, children, iconClassPrefix, iconFontClassName, } = {
+        ...defaultProps,
+        ...props,
+    };
+    const { activeColor, showPopup, parent, orderKey } = mergedProps;
+    const [_showPopup, setShowPopup] = useState(showPopup);
+    const [_value, setValue] = useState(value);
+    useEffect(() => {
+        setShowPopup(showPopup);
+    }, [showPopup]);
+    useEffect(() => {
+        getParentOffset();
+    }, [_showPopup]);
+    useImperativeHandle(ref, () => ({
+        toggle: parent.toggleItemShow,
+    }));
+    const getIconCName = (optionVal, value) => {
+        return classNames({
+            [activeTitleClass]: optionVal === value,
+            [inactiveTitleClass]: optionVal !== value,
+        });
+    };
+    const setTitle = (text) => {
+        if (!title) {
+            parent.updateTitle(text, orderKey);
+        }
+    };
+    const handleClick = (item) => {
+        parent.toggleItemShow(orderKey);
+        setTitle(item.text);
+        setValue(item.value);
+        onChange && onChange(item);
+    };
+    const [position, setPosition] = useState({
+        top: 0,
+        height: 0,
+    });
+    const getParentOffset = () => {
+        setTimeout(async () => {
+            const p = parent.parent().current;
+            const rect = await p.getBoundingClientRect();
+            setPosition({
+                height: rect.height,
+                top: rect.top,
+            });
+        });
+    };
+    const isShow = () => {
+        if (_showPopup)
+            return {};
+        return { display: 'none' };
+    };
+    const getPosition = () => {
+        return direction === 'down'
+            ? { top: `${position.top + position.height}px` }
+            : { bottom: `${window.innerHeight - position.top}px`, top: 'auto' };
+    };
+    const placeholderStyle = () => {
+        if (direction === 'down') {
+            return {
+                height: `${position.top + position.height}px`,
+                ...isShow(),
+                ...style,
+            };
+        }
+        return {
+            height: `${window.innerHeight - position.top}px`,
+            top: 'auto',
+            ...isShow(),
+            ...style,
+        };
+    };
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", { className: `placeholder-element ${classNames({
+                up: direction === 'up',
+            })}`, style: placeholderStyle(), onClick: () => parent.toggleItemShow(orderKey) }),
+        React__default.createElement(Overlay, { overlayClass: "nut-menu__overlay", style: getPosition(), lockScroll: parent.lockScroll, visible: _showPopup, closeOnClickOverlay: parent.closeOnClickOverlay, onClick: () => {
+                parent.closeOnClickOverlay && parent.toggleItemShow(orderKey);
+            } }),
+        React__default.createElement("div", { className: direction === 'down'
+                ? 'nut-menu-item__wrap'
+                : 'nut-menu-item__wrap-up', style: {
+                // ...getPosition(),
+                ...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?.map((item, index) => {
+                        return (React__default.createElement("div", { className: `nut-menu-item__option ${classNames({
+                                active: item.value === _value,
+                            })}`, key: item.text, style: {
+                                flexBasis: `${100 / columns}%`,
+                            }, 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: `${item.value === _value ? activeColor : ''}`,
+                                } }, item.text)));
+                    }),
+                    children)))));
+});
+MenuItem.defaultProps = defaultProps;
+MenuItem.displayName = 'NutMenuItem';
+
+export { MenuItem as M };

package/dist/esm/navbar.taro-c931c078.js

@@ -1,115 +1,79 @@
-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';
 import classNames from 'classnames';
 import { I as Icon } from './icon.taro-1d0d4fb7.js';
 import { c as cn } from './bem-893ad28d.js';
 import { C as ComponentDefaults } from './typings-1c5f2628.js';
-var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  title: '',
-  desc: '',
-  leftShow: true,
-  titIcon: '',
-  className: '',
-  leftText: '',
-  fixed: false,
-  safeAreaInsetTop: false,
-  border: false,
-  placeholder: false,
-  zIndex: 10,
-  style: {}
-});
-var NavBar = function NavBar(props) {
-  var _classNames;
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
-    desc = _defaultProps$props.desc,
-    title = _defaultProps$props.title,
-    titIcon = _defaultProps$props.titIcon,
-    leftShow = _defaultProps$props.leftShow,
-    className = _defaultProps$props.className,
-    style = _defaultProps$props.style,
-    leftText = _defaultProps$props.leftText,
-    fixed = _defaultProps$props.fixed,
-    safeAreaInsetTop = _defaultProps$props.safeAreaInsetTop,
-    border = _defaultProps$props.border,
-    placeholder = _defaultProps$props.placeholder,
-    zIndex = _defaultProps$props.zIndex,
-    onClickTitle = _defaultProps$props.onClickTitle,
-    onClickIcon = _defaultProps$props.onClickIcon,
-    onClickBack = _defaultProps$props.onClickBack,
-    onClickRight = _defaultProps$props.onClickRight,
-    iconClassPrefix = _defaultProps$props.iconClassPrefix,
-    iconFontClassName = _defaultProps$props.iconFontClassName;
-  var b = cn('navbar');
-  var children = Array.isArray(props.children) ? props.children : [props.children];
-  var slot = children.reduce(function (slot, item) {
-    var data = slot;
-    if (item && item.props) {
-      data[item.props.slot] = item;
-    }
-    return data;
-  }, {});
-  var styles = function styles() {
-    return _objectSpread(_objectSpread({}, style), {}, {
-      zIndex: zIndex
+
+const defaultProps = {
+    ...ComponentDefaults,
+    title: '',
+    desc: '',
+    leftShow: true,
+    titIcon: '',
+    className: '',
+    leftText: '',
+    fixed: false,
+    safeAreaInsetTop: false,
+    border: false,
+    placeholder: false,
+    zIndex: 10,
+    style: {},
+};
+const NavBar = (props) => {
+    const { desc, title, titIcon, leftShow, className, style, leftText, fixed, safeAreaInsetTop, border, placeholder, zIndex, onClickTitle, onClickIcon, onClickBack, onClickRight, iconClassPrefix, iconFontClassName, } = {
+        ...defaultProps,
+        ...props,
+    };
+    const b = cn('navbar');
+    const children = Array.isArray(props.children)
+        ? props.children
+        : [props.children];
+    const slot = children.reduce((slot, item) => {
+        const data = slot;
+        if (item && item.props) {
+            data[item.props.slot] = item;
+        }
+        return data;
+    }, {});
+    const styles = () => {
+        return {
+            ...style,
+            zIndex,
+        };
+    };
+    const renderLeft = () => {
+        return (React__default.createElement("div", { className: `${b('left')}`, onClick: (e) => onClickBack(e) },
+            leftShow && (React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: "left", color: "#979797" })),
+            leftText && React__default.createElement("div", { className: `${b('text')}` }, leftText),
+            slot.left));
+    };
+    const renderContent = () => {
+        return (React__default.createElement("div", { className: `${b('title')}` },
+            title && (React__default.createElement("div", { className: "title", onClick: (e) => onClickTitle(e) }, title)),
+            titIcon && (React__default.createElement("div", { onClick: (e) => onClickIcon(e) },
+                React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: titIcon }))),
+            slot.content));
+    };
+    const renderRight = () => {
+        return (React__default.createElement("div", { className: `${b('right')}`, onClick: (e) => onClickRight(e) },
+            desc && React__default.createElement("div", { className: `${b('text')}` }, desc),
+            slot.right));
+    };
+    const renderWrapper = () => {
+        return (React__default.createElement("div", { className: cls, style: styles() },
+            renderLeft(),
+            renderContent(),
+            renderRight()));
+    };
+    const classes = classNames({
+        [`nut-navbar--border`]: border,
+        [`nut-navbar--fixed`]: fixed,
+        [`nut-navbar--safe-area-inset-top`]: safeAreaInsetTop,
     });
-  };
-  var renderLeft = function renderLeft() {
-    return React__default.createElement("div", {
-      className: "".concat(b('left')),
-      onClick: function onClick(e) {
-        return onClickBack(e);
-      }
-    }, leftShow && React__default.createElement(Icon, {
-      classPrefix: iconClassPrefix,
-      fontClassName: iconFontClassName,
-      name: "left",
-      color: "#979797"
-    }), leftText && React__default.createElement("div", {
-      className: "".concat(b('text'))
-    }, leftText), slot.left);
-  };
-  var renderContent = function renderContent() {
-    return React__default.createElement("div", {
-      className: "".concat(b('title'))
-    }, title && React__default.createElement("div", {
-      className: "title",
-      onClick: function onClick(e) {
-        return onClickTitle(e);
-      }
-    }, title), titIcon && React__default.createElement("div", {
-      onClick: function onClick(e) {
-        return onClickIcon(e);
-      }
-    }, React__default.createElement(Icon, {
-      classPrefix: iconClassPrefix,
-      fontClassName: iconFontClassName,
-      name: titIcon
-    })), slot.content);
-  };
-  var renderRight = function renderRight() {
-    return React__default.createElement("div", {
-      className: "".concat(b('right')),
-      onClick: function onClick(e) {
-        return onClickRight(e);
-      }
-    }, desc && React__default.createElement("div", {
-      className: "".concat(b('text'))
-    }, desc), slot.right);
-  };
-  var renderWrapper = function renderWrapper() {
-    return React__default.createElement("div", {
-      className: cls,
-      style: styles()
-    }, renderLeft(), renderContent(), renderRight());
-  };
-  var classes = classNames((_classNames = {}, _defineProperty(_classNames, "nut-navbar--border", border), _defineProperty(_classNames, "nut-navbar--fixed", fixed), _defineProperty(_classNames, "nut-navbar--safe-area-inset-top", safeAreaInsetTop), _classNames));
-  var cls = classNames(b(''), classes, className);
-  return React__default.createElement(React__default.Fragment, null, fixed && placeholder ? React__default.createElement("div", {
-    className: "".concat(b(''), "--placeholder")
-  }, renderWrapper()) : renderWrapper());
+    const cls = classNames(b(''), classes, className);
+    return (React__default.createElement(React__default.Fragment, null, fixed && placeholder ? (React__default.createElement("div", { className: `${b('')}--placeholder` }, renderWrapper())) : (renderWrapper())));
 };
 NavBar.defaultProps = defaultProps;
 NavBar.displayName = 'NutNavBar';
+
 export { NavBar as N };