@nutui/nutui-react-taro 3.0.0-beta.0 → 3.0.0-beta.10

package/dist/cjs/packages/menu/menu.js

@@ -18,6 +18,7 @@ var _to_consumable_array = require("@swc/helpers/_/_to_consumable_array");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _iconsreacttaro = require("@nutui/icons-react-taro");
+var _components = require("@tarojs/components");
 var _menuitem = require("../menuitem/menuitem");
 var _typings = require("../../utils/typings");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
@@ -44,16 +45,22 @@ var Menu = function Menu(props) {
         "onOpen"
     ]);
     var menuRef = (0, _react.useRef)(null);
-    var _useState = (0, _sliced_to_array._)((0, _react.useState)(false), 2), isScrollFixed = _useState[0], setIsScrollFixed = _useState[1];
+    var _useState = (0, _sliced_to_array._)((0, _react.useState)([]), 2), showMenuItem = _useState[0], setShowMenuItem = _useState[1];
+    var _useState1 = (0, _sliced_to_array._)((0, _react.useState)([]), 2), menuItemTitle = _useState1[0], setMenuItemTitle = _useState1[1];
+    var _useState2 = (0, _sliced_to_array._)((0, _react.useState)(false), 2), isScrollFixed = _useState2[0], setIsScrollFixed = _useState2[1];
+    var cls = (0, _classnames.default)("nut-menu", className, {
+        'scroll-fixed': isScrollFixed
+    });
     var getScrollTop = function getScrollTop(el) {
-        return Math.max(0, 'scrollTop' in el ? el.scrollTop : el.pageYOffset);
+        return Math.max(0, el === window ? window.scrollY : el.scrollTop);
     };
-    var onScroll = function onScroll() {
-        var scrollFixed = props.scrollFixed;
+    var onScroll = (0, _react.useCallback)(function() {
         var scrollTop = getScrollTop(window);
         var isFixed = scrollTop > (typeof scrollFixed === 'boolean' ? 30 : Number(scrollFixed));
         setIsScrollFixed(isFixed);
-    };
+    }, [
+        scrollFixed
+    ]);
     (0, _react.useEffect)(function() {
         if (scrollFixed) {
             window.addEventListener('scroll', onScroll);
@@ -61,9 +68,10 @@ var Menu = function Menu(props) {
         return function() {
             return window.removeEventListener('scroll', onScroll);
         };
-    }, []);
-    var _useState1 = (0, _sliced_to_array._)((0, _react.useState)([]), 2), showMenuItem = _useState1[0], setShowMenuItem = _useState1[1];
-    var _useState2 = (0, _sliced_to_array._)((0, _react.useState)([]), 2), menuItemTitle = _useState2[0], setMenuItemTitle = _useState2[1];
+    }, [
+        scrollFixed,
+        onScroll
+    ]);
     var toggleMenuItem = function toggleMenuItem(index) {
         var from = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 'NORMAL';
         showMenuItem[index] = !showMenuItem[index];
@@ -108,7 +116,7 @@ var Menu = function Menu(props) {
     var menuTitle = function menuTitle() {
         return _react.default.Children.map(children, function(child, index) {
             if (/*#__PURE__*/ _react.default.isValidElement(child)) {
-                var _child_props = child.props, title = _child_props.title, options = _child_props.options, value = _child_props.value, defaultValue = _child_props.defaultValue, disabled = _child_props.disabled, direction = _child_props.direction;
+                var _child_props = child.props, title = _child_props.title, titleIcon = _child_props.titleIcon, options = _child_props.options, value = _child_props.value, defaultValue = _child_props.defaultValue, disabled = _child_props.disabled, direction = _child_props.direction;
                 var selected = options === null || options === void 0 ? void 0 : options.filter(function(option) {
                     return option.value === (value !== undefined ? value : defaultValue);
                 });
@@ -118,8 +126,21 @@ var Menu = function Menu(props) {
                     if (selected && selected.length && selected[0].text) return selected[0].text;
                     return '';
                 };
-                return /*#__PURE__*/ _react.default.createElement("div", {
-                    className: (0, _classnames.default)('nut-menu-title ', {
+                var finallyIcon = function finallyIcon() {
+                    if (titleIcon) return titleIcon;
+                    if (icon) return icon;
+                    return direction === 'up' ? /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.ArrowUp, {
+                        className: "nut-menu-title-icon",
+                        width: "12px",
+                        height: "12px"
+                    }) : /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.ArrowDown, {
+                        className: "nut-menu-title-icon",
+                        width: "12px",
+                        height: "12px"
+                    });
+                };
+                return /*#__PURE__*/ _react.default.createElement(_components.View, {
+                    className: (0, _classnames.default)('nut-menu-title ', "nut-menu-title-".concat(index), {
                         active: showMenuItem[index],
                         disabled: disabled
                     }, className),
@@ -131,25 +152,17 @@ var Menu = function Menu(props) {
                         if ((!options || !options.length) && !child.props.children) return;
                         !disabled && toggleMenuItem(index);
                     }
-                }, /*#__PURE__*/ _react.default.createElement("div", {
+                }, /*#__PURE__*/ _react.default.createElement(_components.View, {
                     className: "nut-menu-title-text"
-                }, finallyTitle()), icon || (direction === 'up' ? /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.ArrowUp, {
-                    className: "nut-menu-title-icon",
-                    size: "12px"
-                }) : /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.ArrowDown, {
-                    className: "nut-menu-title-icon",
-                    size: "12px"
-                })));
+                }, finallyTitle()), finallyIcon());
             }
             return null;
         });
     };
-    return /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread_props._)((0, _object_spread._)({}, rest), {
-        className: (0, _classnames.default)("nut-menu", className, {
-            'scroll-fixed': isScrollFixed
-        }),
+    return /*#__PURE__*/ _react.default.createElement(_components.View, (0, _object_spread_props._)((0, _object_spread._)({}, rest), {
+        className: cls,
         ref: menuRef
-    }), /*#__PURE__*/ _react.default.createElement("div", {
+    }), /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: (0, _classnames.default)('nut-menu-bar', {
             opened: showMenuItem.includes(true)
         })

package/dist/cjs/packages/menu/style/style.css

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-overlay {
   /* #ifdef rn */
   position: absolute;
@@ -11,22 +15,13 @@
   right: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--nutui-overlay-bg-color, var(--nutui-black-10, rgba(0, 0, 0, 0.7)));
+  background-color: var(--nutui-overlay-bg-color, var(--nutui-black-10));
   z-index: var(--nutui-overlay-zIndex, 1000);
 }
 
-[dir=rtl] .nut-overlay,
-.nut-rtl .nut-overlay {
-  left: auto;
-  right: 0;
-}
-
 .nut-overflow-hidden {
   overflow: hidden !important;
 }
-.nut-overflow-hidden .taro_page {
-  overflow: hidden !important;
-}
 
 @keyframes nut-fade-in {
   0% {
@@ -61,13 +56,19 @@
   animation-duration: var(--nutui-overlay-animation-duration, 0.3s);
 }
 
+[dir=rtl] .nut-overlay,
+.nut-rtl .nut-overlay {
+  left: auto;
+  right: 0;
+}
+
 .nut-menu-container-content {
   padding: var(--nutui-menu-content-padding, 12px 24px);
   max-height: var(--nutui-menu-content-max-height, 214px);
   overflow-y: auto;
   display: flex;
   flex-wrap: wrap;
-  background: var(--nutui-menu-content-background-color, var(--nutui-gray-1, #ffffff));
+  background: var(--nutui-menu-content-background-color, var(--nutui-gray-1));
 }
 .nut-menu-container-content_fixed {
   width: 100%;
@@ -77,13 +78,13 @@
 .nut-menu-container-item {
   display: flex;
   align-items: center;
-  color: var(--nutui-gray-7, #1a1a1a);
-  font-size: var(--nutui-font-size-3, 14px);
+  color: var(--nutui-gray-7);
+  font-size: var(--nutui-font-size-base, 14px);
   padding: var(--nutui-menu-item-padding, 12px 0);
 }
 .nut-menu-container-item.active {
-  font-weight: var(--nutui-menu-item-active-font-weight, var(--nutui-font-weight-bold, 500));
-  color: var(--nutui-menu-item-active-color, var(--nutui-color-primary, #ff0f23));
+  font-weight: var(--nutui-menu-item-active-font-weight, var(--nutui-font-weight-bold, 600));
+  color: var(--nutui-menu-item-active-color, var(--nutui-brand-6));
 }
 .nut-menu-container-item .nut-icon {
   display: inline-flex;
@@ -184,7 +185,7 @@
   position: relative;
   display: flex;
   line-height: var(--nutui-menu-bar-line-height, 48px);
-  background-color: var(--nutui-gray-1, #ffffff);
+  background-color: var(--nutui-gray-1);
   box-shadow: var(--nutui-menu-bar-box-shadow, 0 2px 12px rgba(89, 89, 89, 0.12));
 }
 .nut-menu-bar.opened {
@@ -194,8 +195,8 @@
 .nut-menu-title {
   flex: 1;
   text-align: center;
-  font-size: var(--nutui-menu-title-font-size, var(--nutui-font-size-3, 14px));
-  color: var(--nutui-menu-title-color, var(--nutui-gray-7, #1a1a1a));
+  font-size: var(--nutui-menu-title-font-size, var(--nutui-font-size-base, 14px));
+  color: var(--nutui-menu-title-color, var(--nutui-gray-7));
   min-width: 0;
   display: flex;
   align-items: center;
@@ -214,10 +215,10 @@
   transition: all 0.2s linear;
 }
 .nut-menu-title.active {
-  color: var(--nutui-menu-item-active-color, var(--nutui-color-primary, #ff0f23));
+  color: var(--nutui-menu-item-active-color, var(--nutui-brand-6));
 }
 .nut-menu-title.disabled {
-  color: var(--nutui-menu-item-disabled-color, var(--nutui-color-text-disabled, #c2c4cc));
+  color: var(--nutui-menu-item-disabled-color, var(--nutui-gray-4));
 }
 .nut-menu-title.active .nut-menu-title-icon {
   transform: rotate(180deg);

package/dist/cjs/packages/menuitem/menuitem.d.ts

@@ -6,6 +6,7 @@ export interface OptionItem {
 }
 export interface MenuItemProps extends BasicComponent {
     title: React.ReactNode;
+    titleIcon: React.ReactNode;
     options: OptionItem[];
     disabled: boolean;
     columns: number;

package/dist/cjs/packages/menuitem/menuitem.js

@@ -27,6 +27,7 @@ var _getrectbytaro = require("../../utils/get-rect-by-taro");
 var _typings = require("../../utils/typings");
 var _usepropsvalue = require("../../utils/use-props-value");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
+    titleIcon: null,
     columns: 1,
     direction: 'down',
     icon: null,
@@ -51,15 +52,43 @@ var MenuItem = /*#__PURE__*/ (0, _react.forwardRef)(function(props, ref) {
             onChange === null || onChange === void 0 ? void 0 : onChange(option);
         }
     }), 2), innerValue = _usePropsValue[0], setValue = _usePropsValue[1];
+    var cssRef = (0, _react.useRef)(null);
     (0, _react.useEffect)(function() {
         setShowPopup(show);
     }, [
         show
     ]);
+    var getParentOffset = (0, _react.useCallback)(function() {
+        setTimeout(/*#__PURE__*/ (0, _async_to_generator._)(function() {
+            var p, rect;
+            return (0, _ts_generator._)(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        p = parent.menuRef.current;
+                        return [
+                            4,
+                            (0, _getrectbytaro.getRectByTaro)(p)
+                        ];
+                    case 1:
+                        rect = _state.sent();
+                        setPosition({
+                            height: rect.height,
+                            top: rect.top
+                        });
+                        return [
+                            2
+                        ];
+                }
+            });
+        }), 100);
+    }, [
+        parent.menuRef
+    ]);
     (0, _react.useEffect)(function() {
         getParentOffset();
     }, [
-        showPopup
+        showPopup,
+        getParentOffset
     ]);
     var windowHeight = (0, _react.useMemo)(function() {
         return (0, _taro.getSystemInfoSync)().windowHeight;
@@ -77,7 +106,9 @@ var MenuItem = /*#__PURE__*/ (0, _react.forwardRef)(function(props, ref) {
         });
     }, [
         direction,
-        windowHeight
+        windowHeight,
+        parent.lockScroll,
+        parent.menuRef
     ]);
     (0, _taro.usePageScroll)(updateItemOffset);
     (0, _react.useImperativeHandle)(ref, function() {
@@ -106,30 +137,6 @@ var MenuItem = /*#__PURE__*/ (0, _react.forwardRef)(function(props, ref) {
         top: 0,
         height: 0
     }), 2), position = _useState1[0], setPosition = _useState1[1];
-    var getParentOffset = function getParentOffset() {
-        setTimeout(/*#__PURE__*/ (0, _async_to_generator._)(function() {
-            var p, rect;
-            return (0, _ts_generator._)(this, function(_state) {
-                switch(_state.label){
-                    case 0:
-                        p = parent.menuRef.current;
-                        return [
-                            4,
-                            (0, _getrectbytaro.getRectByTaro)(p)
-                        ];
-                    case 1:
-                        rect = _state.sent();
-                        setPosition({
-                            height: rect.height,
-                            top: rect.top
-                        });
-                        return [
-                            2
-                        ];
-                }
-            });
-        }), 100);
-    };
     var isShow = function isShow() {
         if (showPopup) return {};
         return {
@@ -184,6 +191,7 @@ var MenuItem = /*#__PURE__*/ (0, _react.forwardRef)(function(props, ref) {
         }, className),
         style: (0, _object_spread._)({}, style, isShow())
     }, /*#__PURE__*/ _react.default.createElement(_reacttransitiongroup.CSSTransition, {
+        nodeRef: cssRef,
         in: showPopup,
         timeout: 100,
         classNames: direction === 'down' ? 'nut-menu-container-down' : 'nut-menu-container-up'
@@ -201,12 +209,14 @@ var MenuItem = /*#__PURE__*/ (0, _react.forwardRef)(function(props, ref) {
             onClick: function onClick() {
                 handleClick(item);
             }
-        }, item.value === innerValue ? /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, icon || /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Check, {
+        }, item.value === innerValue ? /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, icon ? /*#__PURE__*/ _react.default.cloneElement(icon, {
+            className: "nut-menu-container-item-icon ".concat(icon.props.className || '')
+        }) : /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Check, {
             color: activeColor,
             size: 16,
-            className: getIconCName(item.value, value)
+            className: "nut-menu-container-item-icon ".concat(getIconCName(item.value, value))
         })) : null, /*#__PURE__*/ _react.default.createElement(_components.View, {
-            className: getIconCName(item.value, value),
+            className: "nut-menu-container-item-title ".concat(getIconCName(item.value, value)),
             style: {
                 color: "".concat(item.value === innerValue ? activeColor : '')
             }

package/dist/cjs/packages/menuitem/style/style.css

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-overlay {
   /* #ifdef rn */
   position: absolute;
@@ -11,22 +15,13 @@
   right: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--nutui-overlay-bg-color, var(--nutui-black-10, rgba(0, 0, 0, 0.7)));
+  background-color: var(--nutui-overlay-bg-color, var(--nutui-black-10));
   z-index: var(--nutui-overlay-zIndex, 1000);
 }
 
-[dir=rtl] .nut-overlay,
-.nut-rtl .nut-overlay {
-  left: auto;
-  right: 0;
-}
-
 .nut-overflow-hidden {
   overflow: hidden !important;
 }
-.nut-overflow-hidden .taro_page {
-  overflow: hidden !important;
-}
 
 @keyframes nut-fade-in {
   0% {
@@ -61,13 +56,19 @@
   animation-duration: var(--nutui-overlay-animation-duration, 0.3s);
 }
 
+[dir=rtl] .nut-overlay,
+.nut-rtl .nut-overlay {
+  left: auto;
+  right: 0;
+}
+
 .nut-menu-container-content {
   padding: var(--nutui-menu-content-padding, 12px 24px);
   max-height: var(--nutui-menu-content-max-height, 214px);
   overflow-y: auto;
   display: flex;
   flex-wrap: wrap;
-  background: var(--nutui-menu-content-background-color, var(--nutui-gray-1, #ffffff));
+  background: var(--nutui-menu-content-background-color, var(--nutui-gray-1));
 }
 .nut-menu-container-content_fixed {
   width: 100%;
@@ -77,13 +78,13 @@
 .nut-menu-container-item {
   display: flex;
   align-items: center;
-  color: var(--nutui-gray-7, #1a1a1a);
-  font-size: var(--nutui-font-size-3, 14px);
+  color: var(--nutui-gray-7);
+  font-size: var(--nutui-font-size-base, 14px);
   padding: var(--nutui-menu-item-padding, 12px 0);
 }
 .nut-menu-container-item.active {
-  font-weight: var(--nutui-menu-item-active-font-weight, var(--nutui-font-weight-bold, 500));
-  color: var(--nutui-menu-item-active-color, var(--nutui-color-primary, #ff0f23));
+  font-weight: var(--nutui-menu-item-active-font-weight, var(--nutui-font-weight-bold, 600));
+  color: var(--nutui-menu-item-active-color, var(--nutui-brand-6));
 }
 .nut-menu-container-item .nut-icon {
   display: inline-flex;

package/dist/cjs/packages/navbar/navbar.d.ts

@@ -5,7 +5,7 @@ export interface NavBarProps extends BasicComponent {
     left: React.ReactNode;
     back: React.ReactNode;
     right: React.ReactNode;
-    titleAlign: 'center' | 'left';
+    title: React.ReactNode;
     fixed: boolean;
     safeAreaInsetTop: boolean;
     placeholder: boolean;

package/dist/cjs/packages/navbar/navbar.js

@@ -9,22 +9,18 @@ Object.defineProperty(exports, "NavBar", {
     }
 });
 var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-var _async_to_generator = require("@swc/helpers/_/_async_to_generator");
 var _define_property = require("@swc/helpers/_/_define_property");
 var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
-var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
-var _ts_generator = require("@swc/helpers/_/_ts_generator");
-var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _components = require("@tarojs/components");
+var _index = require("../configprovider/index");
 var _typings = require("../../utils/typings");
-var _getrectbytaro = require("../../utils/get-rect-by-taro");
+var _index1 = /*#__PURE__*/ _interop_require_default._(require("../safearea/index"));
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     left: '',
     right: '',
-    titleAlign: 'center',
     back: '',
     fixed: false,
     safeAreaInsetTop: false,
@@ -32,8 +28,9 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
     zIndex: 10
 });
 var NavBar = function NavBar(props) {
-    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), right = _$_object_spread.right, left = _$_object_spread.left, titleAlign = _$_object_spread.titleAlign, className = _$_object_spread.className, style = _$_object_spread.style, back = _$_object_spread.back, fixed = _$_object_spread.fixed, safeAreaInsetTop = _$_object_spread.safeAreaInsetTop, placeholder = _$_object_spread.placeholder, zIndex = _$_object_spread.zIndex, onBackClick = _$_object_spread.onBackClick;
+    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), right = _$_object_spread.right, left = _$_object_spread.left, title = _$_object_spread.title, className = _$_object_spread.className, style = _$_object_spread.style, back = _$_object_spread.back, fixed = _$_object_spread.fixed, safeAreaInsetTop = _$_object_spread.safeAreaInsetTop, placeholder = _$_object_spread.placeholder, zIndex = _$_object_spread.zIndex, onBackClick = _$_object_spread.onBackClick;
     var classPrefix = 'nut-navbar';
+    var rtl = (0, _index.useRtl)();
     var children = Array.isArray(props.children) ? props.children : [
         props.children
     ];
@@ -42,138 +39,41 @@ var NavBar = function NavBar(props) {
             zIndex: zIndex
         });
     };
-    var leftRef = (0, _react.useRef)(null);
-    var rightRef = (0, _react.useRef)(null);
-    var wrapperRef = (0, _react.useRef)(null);
-    var _useState = (0, _sliced_to_array._)((0, _react.useState)('50%'), 2), contentWidth = _useState[0], setContentWidth = _useState[1];
-    var getNodeWidth = function() {
-        var _ref = (0, _async_to_generator._)(function(node) {
-            var refe;
-            return (0, _ts_generator._)(this, function(_state) {
-                switch(_state.label){
-                    case 0:
-                        if (!node) return [
-                            3,
-                            2
-                        ];
-                        return [
-                            4,
-                            (0, _getrectbytaro.getRectByTaro)(node)
-                        ];
-                    case 1:
-                        refe = _state.sent();
-                        return [
-                            2,
-                            refe.width
-                        ];
-                    case 2:
-                        return [
-                            2,
-                            0
-                        ];
-                }
-            });
-        });
-        return function getNodeWidth(node) {
-            return _ref.apply(this, arguments);
-        };
-    }();
-    (0, _react.useEffect)(function() {
-        if (titleAlign === 'left') {
-            return;
-        }
-        if (!(back || left || right)) {
-            setContentWidth('100%');
-        }
-        var init = function() {
-            var _ref = (0, _async_to_generator._)(function() {
-                var leftRectWidth, rightRectWidth, wrapperWidth, centerWidth;
-                return (0, _ts_generator._)(this, function(_state) {
-                    switch(_state.label){
-                        case 0:
-                            return [
-                                4,
-                                getNodeWidth(leftRef === null || leftRef === void 0 ? void 0 : leftRef.current)
-                            ];
-                        case 1:
-                            leftRectWidth = _state.sent();
-                            return [
-                                4,
-                                getNodeWidth(rightRef === null || rightRef === void 0 ? void 0 : rightRef.current)
-                            ];
-                        case 2:
-                            rightRectWidth = _state.sent();
-                            return [
-                                4,
-                                getNodeWidth(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current)
-                            ];
-                        case 3:
-                            wrapperWidth = _state.sent();
-                            centerWidth = wrapperWidth / 2;
-                            if (leftRectWidth && rightRectWidth) {
-                                centerWidth = wrapperWidth - (leftRectWidth > rightRectWidth ? leftRectWidth * 2 : rightRectWidth * 2);
-                            } else {
-                                centerWidth = wrapperWidth - leftRectWidth * 2 - rightRectWidth * 2;
-                            }
-                            setContentWidth(centerWidth.toFixed(2));
-                            return [
-                                2
-                            ];
-                    }
-                });
-            });
-            return function init() {
-                return _ref.apply(this, arguments);
-            };
-        }();
-        init();
-    }, [
-        left,
-        right,
-        back
-    ]);
     var renderLeft = function renderLeft() {
-        return back || left ? /*#__PURE__*/ _react.default.createElement(_components.View, {
-            className: "".concat(classPrefix, "-left"),
-            ref: leftRef
-        }, back && /*#__PURE__*/ _react.default.createElement(_components.View, {
-            className: "".concat(classPrefix, "-left-back"),
+        var _obj, _obj1;
+        return /*#__PURE__*/ _react.default.createElement(_components.View, {
+            className: (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-left"), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-left-maxwidth"), title), (0, _define_property._)(_obj, "".concat(classPrefix, "-left-hidden"), !left && !back), (0, _define_property._)(_obj, "".concat(classPrefix, "-left-rtl"), rtl), _obj))
+        }, back ? /*#__PURE__*/ _react.default.createElement(_components.View, {
+            className: (0, _classnames.default)((_obj1 = {}, (0, _define_property._)(_obj1, "".concat(classPrefix, "-left-back"), true), (0, _define_property._)(_obj1, "".concat(classPrefix, "-left-back-children"), left), (0, _define_property._)(_obj1, "".concat(classPrefix, "-left-back-children-rtl"), left && rtl), _obj1)),
             onClick: function onClick(e) {
                 return onBackClick(e);
             }
-        }, back), left) : null;
+        }, back) : null, left);
     };
     var renderContent = function renderContent() {
-        var titleStyle = {};
-        if (titleAlign === 'center') {
-            var contentRealWidth = "".concat(contentWidth).concat(/%$/i.test(contentWidth) ? '' : 'px');
-            titleStyle = {
-                minWidth: contentRealWidth,
-                width: contentRealWidth
-            };
-        }
+        var _obj;
         return /*#__PURE__*/ _react.default.createElement(_components.View, {
-            className: "".concat(classPrefix, "-title"),
-            style: titleStyle
-        }, children);
+            className: (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-title"), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-title-center"), title), _obj))
+        }, title || children);
     };
     var renderRight = function renderRight() {
+        var _obj;
         return /*#__PURE__*/ _react.default.createElement(_components.View, {
-            className: "".concat(classPrefix, "-right"),
-            ref: rightRef
+            className: (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-right"), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-right-maxwidth"), title), (0, _define_property._)(_obj, "".concat(classPrefix, "-right-rtl"), rtl), _obj))
         }, right);
     };
     var renderWrapper = function renderWrapper() {
         return /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: cls,
-            style: styles(),
-            ref: wrapperRef
+            style: styles()
         }, renderLeft(), renderContent(), renderRight());
     };
     var _obj;
-    var classes = (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-fixed"), fixed), (0, _define_property._)(_obj, "".concat(classPrefix, "-safe-area-inset-top"), safeAreaInsetTop), (0, _define_property._)(_obj, "".concat(classPrefix, "-title-align-").concat(titleAlign), true), _obj));
-    var cls = (0, _classnames.default)(classPrefix, classes, className);
-    return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, fixed && placeholder ? /*#__PURE__*/ _react.default.createElement(_components.View, {
+    var classes = (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-fixed"), fixed), (0, _define_property._)(_obj, "".concat(classPrefix, "-safe-area-inset-top"), safeAreaInsetTop), (0, _define_property._)(_obj, "".concat(classPrefix, "-rtl"), rtl), _obj));
+    var cls = (0, _classnames.default)(classPrefix, classes, className, (0, _define_property._)({}, "".concat(classPrefix, "-title-wrapper"), title));
+    return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, safeAreaInsetTop && /*#__PURE__*/ _react.default.createElement(_index1.default, {
+        position: "top"
+    }), fixed && placeholder ? /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-placeholder")
     }, renderWrapper()) : renderWrapper());
 };