@nutui/nutui-react-taro 1.5.11-beta.1 → 1.5.11-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/esm/MenuItem.js +3 -3
  2. package/dist/esm/{menuitem.taro-c1003fa4.js → menuitem.taro-fee49a85.js} +29 -17
  3. package/dist/esm/nutui-react.es.js +1 -1
  4. package/dist/locales/base.js +1 -1
  5. package/dist/locales/en-US.js +1 -1
  6. package/dist/locales/id-ID.js +1 -1
  7. package/dist/locales/zh-CN.js +1 -1
  8. package/dist/locales/zh-TW.js +1 -1
  9. package/dist/locales/zh-UG.js +1 -1
  10. package/dist/nutui.react.mjs +88 -86
  11. package/dist/nutui.react.umd.js +88 -86
  12. package/dist/packages/menuitem/menuitem.scss +3 -3
  13. package/dist/style.css +1 -1
  14. package/dist/style.mjs +1 -1
  15. package/dist/styles/variables.scss +1 -0
  16. package/package.json +1 -1
package/dist/esm/MenuItem.js CHANGED
@@ -1,13 +1,13 @@
1
- import { M as MenuItem } from './menuitem.taro-c1003fa4.js';
1
+ import { M as MenuItem } from './menuitem.taro-fee49a85.js';
2
2
  import 'react';
3
+ import '@tarojs/taro';
4
+ import '@tarojs/components';
3
5
  import 'classnames';
4
6
  import 'react-transition-group';
5
- import '@tarojs/taro';
6
7
  import './icon.taro-296a1bec.js';
7
8
  import './bem-350c1702.js';
8
9
  import '@bem-react/classname';
9
10
  import './overlay.taro-21e87fb1.js';
10
- import '@tarojs/components';
11
11
  import './typings-b9828dba.js';
12
12
 
13
13
 
package/dist/esm/{menuitem.taro-c1003fa4.js → menuitem.taro-fee49a85.js} RENAMED
@@ -1,7 +1,8 @@
1
- import React__default, { forwardRef, useState, useEffect, useImperativeHandle } from 'react';
1
+ import React__default, { forwardRef, useState, useEffect, useMemo, useCallback, useImperativeHandle } from 'react';
2
+ import { getSystemInfoSync, usePageScroll } from '@tarojs/taro';
3
+ import { View } from '@tarojs/components';
2
4
  import classNames from 'classnames';
3
5
  import { CSSTransition } from 'react-transition-group';
4
- import { getSystemInfoSync } from '@tarojs/taro';
5
6
  import { I as Icon } from './icon.taro-296a1bec.js';
6
7
  import { O as Overlay } from './overlay.taro-21e87fb1.js';
7
8
  import { C as ComponentDefaults } from './typings-b9828dba.js';
@@ -34,6 +35,19 @@ const MenuItem = forwardRef((props, ref) => {
34
35
  useEffect(() => {
35
36
  getParentOffset();
36
37
  }, [_showPopup]);
38
+ const windowHeight = useMemo(() => getSystemInfoSync().windowHeight, []);
39
+ const updateItemOffset = useCallback(() => {
40
+ const p = parent.parent().current;
41
+ p.getBoundingClientRect().then((rect) => {
42
+ if (rect) {
43
+ setPosition({
44
+ height: rect.height,
45
+ top: rect.top,
46
+ });
47
+ }
48
+ });
49
+ }, [direction, windowHeight]);
50
+ usePageScroll(updateItemOffset);
37
51
  useImperativeHandle(ref, () => ({
38
52
  toggle: parent.toggleItemShow,
39
53
  }));
@@ -75,47 +89,45 @@ const MenuItem = forwardRef((props, ref) => {
75
89
  };
76
90
  const getPosition = () => {
77
91
  return direction === 'down'
78
- ? { position: 'absolute', height: `100vh` }
92
+ ? { top: `${position.top + position.height}px` }
79
93
  : {
80
- position: 'absolute',
81
- bottom: '100%',
82
- top: 'auto',
83
- height: `100vh`,
94
+ bottom: `${getSystemInfoSync().windowHeight - position.top}px`,
95
+ top: '0',
96
+ height: 'initial',
84
97
  };
85
98
  };
86
99
  const placeholderStyle = () => {
87
100
  if (direction === 'down') {
88
101
  return {
89
102
  height: `${position.top + position.height}px`,
90
- top: 'auto',
91
- bottom: '-100%',
92
103
  ...isShow(),
104
+ ...style,
93
105
  };
94
106
  }
95
107
  return {
96
108
  height: `${getSystemInfoSync().windowHeight - position.top}px`,
97
- bottom: `auto`,
98
- top: '0',
109
+ top: 'auto',
99
110
  ...isShow(),
111
+ ...style,
100
112
  };
101
113
  };
102
- return (React__default.createElement("div", { className: "nut-menu-item-container", style: { position: 'absolute', left: 0, right: 0 } },
103
- React__default.createElement("div", { className: `placeholder-element ${classNames({
114
+ return (React__default.createElement(React__default.Fragment, null,
115
+ React__default.createElement(View, { className: `placeholder-element ${classNames({
104
116
  up: direction === 'up',
105
117
  })}`, style: placeholderStyle(), onClick: () => parent.toggleItemShow(orderKey) }),
106
118
  React__default.createElement(Overlay, { overlayClass: "nut-menu__overlay", style: getPosition(), lockScroll: parent.lockScroll, visible: _showPopup, closeOnClickOverlay: parent.closeOnClickOverlay, onClick: () => {
107
119
  parent.closeOnClickOverlay && parent.toggleItemShow(orderKey);
108
120
  } }),
109
- React__default.createElement("div", { className: direction === 'down'
121
+ React__default.createElement(View, { className: direction === 'down'
110
122
  ? 'nut-menu-item__wrap'
111
123
  : 'nut-menu-item__wrap-up', style: {
112
124
  // ...getPosition(),
113
125
  ...isShow(),
114
126
  } },
115
127
  React__default.createElement(CSSTransition, { in: _showPopup, timeout: 100, classNames: direction === 'down' ? 'menu-item' : 'menu-item-up' },
116
- React__default.createElement("div", { className: "nut-menu-item__content" },
128
+ React__default.createElement(View, { className: "nut-menu-item__content" },
117
129
  options?.map((item, index) => {
118
- return (React__default.createElement("div", { className: `nut-menu-item__option ${classNames({
130
+ return (React__default.createElement(View, { className: `nut-menu-item__option ${classNames({
119
131
  active: item.value === _value,
120
132
  })}`, key: item.text, style: {
121
133
  flexBasis: `${100 / columns}%`,
@@ -123,7 +135,7 @@ const MenuItem = forwardRef((props, ref) => {
123
135
  handleClick(item);
124
136
  } },
125
137
  item.value === _value ? (React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, className: getIconCName(item.value, value), name: optionsIcon, color: activeColor })) : null,
126
- React__default.createElement("div", { className: getIconCName(item.value, value), style: {
138
+ React__default.createElement(View, { className: getIconCName(item.value, value), style: {
127
139
  color: `${item.value === _value ? activeColor : ''}`,
128
140
  } }, item.text)));
129
141
  }),
package/dist/esm/nutui-react.es.js CHANGED
@@ -17,7 +17,7 @@ export { E as Elevator } from './elevator.taro-a883f7ad.js';
17
17
  export { F as FixedNav } from './fixednav.taro-1f05acaf.js';
18
18
  export { I as Indicator } from './indicator.taro-cba8b010.js';
19
19
  export { M as Menu } from './menu.taro-7e4038a1.js';
20
- export { M as MenuItem } from './menuitem.taro-c1003fa4.js';
20
+ export { M as MenuItem } from './menuitem.taro-fee49a85.js';
21
21
  export { N as NavBar } from './navbar.taro-777c4705.js';
22
22
  export { P as Pagination } from './pagination.taro-715a173b.js';
23
23
  export { S as SideNavBar } from './sidenavbar.taro-c307b35e.js';
package/dist/locales/base.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * @nutui/nutui-react-taro v1.5.11-beta.1 Thu Jul 06 2023 09:53:11 GMT+0800 (China Standard Time)
2
+ * @nutui/nutui-react-taro v1.5.11 Thu Jul 06 2023 16:48:08 GMT+0800 (China Standard Time)
3
3
  * (c) 2023 @jdf2e.
4
4
  * Released under the MIT License.
5
5
  */
package/dist/locales/en-US.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * @nutui/nutui-react-taro v1.5.11-beta.1 Thu Jul 06 2023 09:53:11 GMT+0800 (China Standard Time)
2
+ * @nutui/nutui-react-taro v1.5.11 Thu Jul 06 2023 16:48:08 GMT+0800 (China Standard Time)
3
3
  * (c) 2023 @jdf2e.
4
4
  * Released under the MIT License.
5
5
  */
package/dist/locales/id-ID.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * @nutui/nutui-react-taro v1.5.11-beta.1 Thu Jul 06 2023 09:53:11 GMT+0800 (China Standard Time)
2
+ * @nutui/nutui-react-taro v1.5.11 Thu Jul 06 2023 16:48:08 GMT+0800 (China Standard Time)
3
3
  * (c) 2023 @jdf2e.
4
4
  * Released under the MIT License.
5
5
  */
package/dist/locales/zh-CN.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * @nutui/nutui-react-taro v1.5.11-beta.1 Thu Jul 06 2023 09:53:11 GMT+0800 (China Standard Time)
2
+ * @nutui/nutui-react-taro v1.5.11 Thu Jul 06 2023 16:48:08 GMT+0800 (China Standard Time)
3
3
  * (c) 2023 @jdf2e.
4
4
  * Released under the MIT License.
5
5
  */
package/dist/locales/zh-TW.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * @nutui/nutui-react-taro v1.5.11-beta.1 Thu Jul 06 2023 09:53:11 GMT+0800 (China Standard Time)
2
+ * @nutui/nutui-react-taro v1.5.11 Thu Jul 06 2023 16:48:08 GMT+0800 (China Standard Time)
3
3
  * (c) 2023 @jdf2e.
4
4
  * Released under the MIT License.
5
5
  */
package/dist/locales/zh-UG.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * @nutui/nutui-react-taro v1.5.11-beta.1 Thu Jul 06 2023 09:53:11 GMT+0800 (China Standard Time)
2
+ * @nutui/nutui-react-taro v1.5.11 Thu Jul 06 2023 16:48:08 GMT+0800 (China Standard Time)
3
3
  * (c) 2023 @jdf2e.
4
4
  * Released under the MIT License.
5
5
  */
package/dist/nutui.react.mjs CHANGED
@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
5
5
  return value;
6
6
  };
7
7
  /*!
8
- * @nutui/nutui-react-taro v1.5.11-beta.1 Thu Jul 06 2023 09:52:42 GMT+0800 (China Standard Time)
8
+ * @nutui/nutui-react-taro v1.5.11 Thu Jul 06 2023 16:47:25 GMT+0800 (China Standard Time)
9
9
  * (c) 2023 @jdf2e.
10
10
  * Released under the MIT License.
11
11
  */
@@ -4131,6 +4131,19 @@ const MenuItem = forwardRef((props, ref) => {
4131
4131
  useEffect(() => {
4132
4132
  getParentOffset();
4133
4133
  }, [_showPopup]);
4134
+ const windowHeight = useMemo(() => getSystemInfoSync().windowHeight, []);
4135
+ const updateItemOffset = useCallback(() => {
4136
+ const p = parent.parent().current;
4137
+ p.getBoundingClientRect().then((rect) => {
4138
+ if (rect) {
4139
+ setPosition({
4140
+ height: rect.height,
4141
+ top: rect.top
4142
+ });
4143
+ }
4144
+ });
4145
+ }, [direction, windowHeight]);
4146
+ usePageScroll(updateItemOffset);
4134
4147
  useImperativeHandle(ref, () => ({
4135
4148
  toggle: parent.toggleItemShow
4136
4149
  }));
@@ -4171,114 +4184,103 @@ const MenuItem = forwardRef((props, ref) => {
4171
4184
  return { display: "none" };
4172
4185
  };
4173
4186
  const getPosition = () => {
4174
- return direction === "down" ? { position: "absolute", height: `100vh` } : {
4175
- position: "absolute",
4176
- bottom: "100%",
4177
- top: "auto",
4178
- height: `100vh`
4187
+ return direction === "down" ? { top: `${position.top + position.height}px` } : {
4188
+ bottom: `${getSystemInfoSync().windowHeight - position.top}px`,
4189
+ top: "0",
4190
+ height: "initial"
4179
4191
  };
4180
4192
  };
4181
4193
  const placeholderStyle = () => {
4182
4194
  if (direction === "down") {
4183
4195
  return {
4184
4196
  height: `${position.top + position.height}px`,
4185
- top: "auto",
4186
- bottom: "-100%",
4187
- ...isShow()
4197
+ ...isShow(),
4198
+ ...style
4188
4199
  };
4189
4200
  }
4190
4201
  return {
4191
4202
  height: `${getSystemInfoSync().windowHeight - position.top}px`,
4192
- bottom: `auto`,
4193
- top: "0",
4194
- ...isShow()
4203
+ top: "auto",
4204
+ ...isShow(),
4205
+ ...style
4195
4206
  };
4196
4207
  };
4197
- return /* @__PURE__ */ React__default.createElement(
4198
- "div",
4208
+ return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
4209
+ View,
4199
4210
  {
4200
- className: "nut-menu-item-container",
4201
- style: { position: "absolute", left: 0, right: 0 }
4202
- },
4203
- /* @__PURE__ */ React__default.createElement(
4204
- "div",
4205
- {
4206
- className: `placeholder-element ${classNames({
4207
- up: direction === "up"
4208
- })}`,
4209
- style: placeholderStyle(),
4210
- onClick: () => parent.toggleItemShow(orderKey)
4211
+ className: `placeholder-element ${classNames({
4212
+ up: direction === "up"
4213
+ })}`,
4214
+ style: placeholderStyle(),
4215
+ onClick: () => parent.toggleItemShow(orderKey)
4216
+ }
4217
+ ), /* @__PURE__ */ React__default.createElement(
4218
+ Overlay,
4219
+ {
4220
+ overlayClass: "nut-menu__overlay",
4221
+ style: getPosition(),
4222
+ lockScroll: parent.lockScroll,
4223
+ visible: _showPopup,
4224
+ closeOnClickOverlay: parent.closeOnClickOverlay,
4225
+ onClick: () => {
4226
+ parent.closeOnClickOverlay && parent.toggleItemShow(orderKey);
4211
4227
  }
4212
- ),
4213
- /* @__PURE__ */ React__default.createElement(
4214
- Overlay,
4215
- {
4216
- overlayClass: "nut-menu__overlay",
4217
- style: getPosition(),
4218
- lockScroll: parent.lockScroll,
4219
- visible: _showPopup,
4220
- closeOnClickOverlay: parent.closeOnClickOverlay,
4221
- onClick: () => {
4222
- parent.closeOnClickOverlay && parent.toggleItemShow(orderKey);
4223
- }
4228
+ }
4229
+ ), /* @__PURE__ */ React__default.createElement(
4230
+ View,
4231
+ {
4232
+ className: direction === "down" ? "nut-menu-item__wrap" : "nut-menu-item__wrap-up",
4233
+ style: {
4234
+ // ...getPosition(),
4235
+ ...isShow()
4224
4236
  }
4225
- ),
4237
+ },
4226
4238
  /* @__PURE__ */ React__default.createElement(
4227
- "div",
4239
+ CSSTransition$1,
4228
4240
  {
4229
- className: direction === "down" ? "nut-menu-item__wrap" : "nut-menu-item__wrap-up",
4230
- style: {
4231
- // ...getPosition(),
4232
- ...isShow()
4233
- }
4241
+ in: _showPopup,
4242
+ timeout: 100,
4243
+ classNames: direction === "down" ? "menu-item" : "menu-item-up"
4234
4244
  },
4235
- /* @__PURE__ */ React__default.createElement(
4236
- CSSTransition$1,
4237
- {
4238
- in: _showPopup,
4239
- timeout: 100,
4240
- classNames: direction === "down" ? "menu-item" : "menu-item-up"
4241
- },
4242
- /* @__PURE__ */ React__default.createElement("div", { className: "nut-menu-item__content" }, options == null ? void 0 : options.map((item, index) => {
4243
- return /* @__PURE__ */ React__default.createElement(
4244
- "div",
4245
+ /* @__PURE__ */ React__default.createElement(View, { className: "nut-menu-item__content" }, options == null ? void 0 : options.map((item, index) => {
4246
+ return /* @__PURE__ */ React__default.createElement(
4247
+ View,
4248
+ {
4249
+ className: `nut-menu-item__option ${classNames({
4250
+ active: item.value === _value
4251
+ })}`,
4252
+ key: item.text,
4253
+ style: {
4254
+ flexBasis: `${100 / columns}%`
4255
+ },
4256
+ onClick: () => {
4257
+ handleClick(item);
4258
+ }
4259
+ },
4260
+ item.value === _value ? /* @__PURE__ */ React__default.createElement(
4261
+ Icon$1,
4262
+ {
4263
+ classPrefix: iconClassPrefix,
4264
+ fontClassName: iconFontClassName,
4265
+ className: getIconCName(item.value, value),
4266
+ name: optionsIcon,
4267
+ color: activeColor
4268
+ }
4269
+ ) : null,
4270
+ /* @__PURE__ */ React__default.createElement(
4271
+ View,
4245
4272
  {
4246
- className: `nut-menu-item__option ${classNames({
4247
- active: item.value === _value
4248
- })}`,
4249
- key: item.text,
4273
+ className: getIconCName(item.value, value),
4250
4274
  style: {
4251
- flexBasis: `${100 / columns}%`
4252
- },
4253
- onClick: () => {
4254
- handleClick(item);
4275
+ color: `${item.value === _value ? activeColor : ""}`
4255
4276
  }
4256
4277
  },
4257
- item.value === _value ? /* @__PURE__ */ React__default.createElement(
4258
- Icon$1,
4259
- {
4260
- classPrefix: iconClassPrefix,
4261
- fontClassName: iconFontClassName,
4262
- className: getIconCName(item.value, value),
4263
- name: optionsIcon,
4264
- color: activeColor
4265
- }
4266
- ) : null,
4267
- /* @__PURE__ */ React__default.createElement(
4268
- "div",
4269
- {
4270
- className: getIconCName(item.value, value),
4271
- style: {
4272
- color: `${item.value === _value ? activeColor : ""}`
4273
- }
4274
- },
4275
- item.text
4276
- )
4277
- );
4278
- }), children)
4279
- )
4278
+ item.text
4279
+ )
4280
+ );
4281
+ }), children)
4280
4282
  )
4281
- );
4283
+ ));
4282
4284
  });
4283
4285
  MenuItem.defaultProps = defaultProps$1d;
4284
4286
  MenuItem.displayName = "NutMenuItem";
package/dist/nutui.react.umd.js CHANGED
@@ -8,7 +8,7 @@ var __publicField = (obj, key, value) => {
8
8
  return value;
9
9
  };
10
10
  /*!
11
- * @nutui/nutui-react-taro v1.5.11-beta.1 Thu Jul 06 2023 09:52:42 GMT+0800 (China Standard Time)
11
+ * @nutui/nutui-react-taro v1.5.11 Thu Jul 06 2023 16:47:25 GMT+0800 (China Standard Time)
12
12
  * (c) 2023 @jdf2e.
13
13
  * Released under the MIT License.
14
14
  */
@@ -4147,6 +4147,19 @@ var __publicField = (obj, key, value) => {
4147
4147
  React.useEffect(() => {
4148
4148
  getParentOffset();
4149
4149
  }, [_showPopup]);
4150
+ const windowHeight = React.useMemo(() => Taro.getSystemInfoSync().windowHeight, []);
4151
+ const updateItemOffset = React.useCallback(() => {
4152
+ const p = parent.parent().current;
4153
+ p.getBoundingClientRect().then((rect) => {
4154
+ if (rect) {
4155
+ setPosition({
4156
+ height: rect.height,
4157
+ top: rect.top
4158
+ });
4159
+ }
4160
+ });
4161
+ }, [direction, windowHeight]);
4162
+ Taro.usePageScroll(updateItemOffset);
4150
4163
  React.useImperativeHandle(ref, () => ({
4151
4164
  toggle: parent.toggleItemShow
4152
4165
  }));
@@ -4187,114 +4200,103 @@ var __publicField = (obj, key, value) => {
4187
4200
  return { display: "none" };
4188
4201
  };
4189
4202
  const getPosition = () => {
4190
- return direction === "down" ? { position: "absolute", height: `100vh` } : {
4191
- position: "absolute",
4192
- bottom: "100%",
4193
- top: "auto",
4194
- height: `100vh`
4203
+ return direction === "down" ? { top: `${position.top + position.height}px` } : {
4204
+ bottom: `${Taro.getSystemInfoSync().windowHeight - position.top}px`,
4205
+ top: "0",
4206
+ height: "initial"
4195
4207
  };
4196
4208
  };
4197
4209
  const placeholderStyle = () => {
4198
4210
  if (direction === "down") {
4199
4211
  return {
4200
4212
  height: `${position.top + position.height}px`,
4201
- top: "auto",
4202
- bottom: "-100%",
4203
- ...isShow()
4213
+ ...isShow(),
4214
+ ...style
4204
4215
  };
4205
4216
  }
4206
4217
  return {
4207
4218
  height: `${Taro.getSystemInfoSync().windowHeight - position.top}px`,
4208
- bottom: `auto`,
4209
- top: "0",
4210
- ...isShow()
4219
+ top: "auto",
4220
+ ...isShow(),
4221
+ ...style
4211
4222
  };
4212
4223
  };
4213
- return /* @__PURE__ */ React.createElement(
4214
- "div",
4224
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
4225
+ components.View,
4215
4226
  {
4216
- className: "nut-menu-item-container",
4217
- style: { position: "absolute", left: 0, right: 0 }
4218
- },
4219
- /* @__PURE__ */ React.createElement(
4220
- "div",
4221
- {
4222
- className: `placeholder-element ${classNames({
4223
- up: direction === "up"
4224
- })}`,
4225
- style: placeholderStyle(),
4226
- onClick: () => parent.toggleItemShow(orderKey)
4227
+ className: `placeholder-element ${classNames({
4228
+ up: direction === "up"
4229
+ })}`,
4230
+ style: placeholderStyle(),
4231
+ onClick: () => parent.toggleItemShow(orderKey)
4232
+ }
4233
+ ), /* @__PURE__ */ React.createElement(
4234
+ Overlay,
4235
+ {
4236
+ overlayClass: "nut-menu__overlay",
4237
+ style: getPosition(),
4238
+ lockScroll: parent.lockScroll,
4239
+ visible: _showPopup,
4240
+ closeOnClickOverlay: parent.closeOnClickOverlay,
4241
+ onClick: () => {
4242
+ parent.closeOnClickOverlay && parent.toggleItemShow(orderKey);
4227
4243
  }
4228
- ),
4229
- /* @__PURE__ */ React.createElement(
4230
- Overlay,
4231
- {
4232
- overlayClass: "nut-menu__overlay",
4233
- style: getPosition(),
4234
- lockScroll: parent.lockScroll,
4235
- visible: _showPopup,
4236
- closeOnClickOverlay: parent.closeOnClickOverlay,
4237
- onClick: () => {
4238
- parent.closeOnClickOverlay && parent.toggleItemShow(orderKey);
4239
- }
4244
+ }
4245
+ ), /* @__PURE__ */ React.createElement(
4246
+ components.View,
4247
+ {
4248
+ className: direction === "down" ? "nut-menu-item__wrap" : "nut-menu-item__wrap-up",
4249
+ style: {
4250
+ // ...getPosition(),
4251
+ ...isShow()
4240
4252
  }
4241
- ),
4253
+ },
4242
4254
  /* @__PURE__ */ React.createElement(
4243
- "div",
4255
+ CSSTransition$1,
4244
4256
  {
4245
- className: direction === "down" ? "nut-menu-item__wrap" : "nut-menu-item__wrap-up",
4246
- style: {
4247
- // ...getPosition(),
4248
- ...isShow()
4249
- }
4257
+ in: _showPopup,
4258
+ timeout: 100,
4259
+ classNames: direction === "down" ? "menu-item" : "menu-item-up"
4250
4260
  },
4251
- /* @__PURE__ */ React.createElement(
4252
- CSSTransition$1,
4253
- {
4254
- in: _showPopup,
4255
- timeout: 100,
4256
- classNames: direction === "down" ? "menu-item" : "menu-item-up"
4257
- },
4258
- /* @__PURE__ */ React.createElement("div", { className: "nut-menu-item__content" }, options == null ? void 0 : options.map((item, index) => {
4259
- return /* @__PURE__ */ React.createElement(
4260
- "div",
4261
+ /* @__PURE__ */ React.createElement(components.View, { className: "nut-menu-item__content" }, options == null ? void 0 : options.map((item, index) => {
4262
+ return /* @__PURE__ */ React.createElement(
4263
+ components.View,
4264
+ {
4265
+ className: `nut-menu-item__option ${classNames({
4266
+ active: item.value === _value
4267
+ })}`,
4268
+ key: item.text,
4269
+ style: {
4270
+ flexBasis: `${100 / columns}%`
4271
+ },
4272
+ onClick: () => {
4273
+ handleClick(item);
4274
+ }
4275
+ },
4276
+ item.value === _value ? /* @__PURE__ */ React.createElement(
4277
+ Icon$1,
4278
+ {
4279
+ classPrefix: iconClassPrefix,
4280
+ fontClassName: iconFontClassName,
4281
+ className: getIconCName(item.value, value),
4282
+ name: optionsIcon,
4283
+ color: activeColor
4284
+ }
4285
+ ) : null,
4286
+ /* @__PURE__ */ React.createElement(
4287
+ components.View,
4261
4288
  {
4262
- className: `nut-menu-item__option ${classNames({
4263
- active: item.value === _value
4264
- })}`,
4265
- key: item.text,
4289
+ className: getIconCName(item.value, value),
4266
4290
  style: {
4267
- flexBasis: `${100 / columns}%`
4268
- },
4269
- onClick: () => {
4270
- handleClick(item);
4291
+ color: `${item.value === _value ? activeColor : ""}`
4271
4292
  }
4272
4293
  },
4273
- item.value === _value ? /* @__PURE__ */ React.createElement(
4274
- Icon$1,
4275
- {
4276
- classPrefix: iconClassPrefix,
4277
- fontClassName: iconFontClassName,
4278
- className: getIconCName(item.value, value),
4279
- name: optionsIcon,
4280
- color: activeColor
4281
- }
4282
- ) : null,
4283
- /* @__PURE__ */ React.createElement(
4284
- "div",
4285
- {
4286
- className: getIconCName(item.value, value),
4287
- style: {
4288
- color: `${item.value === _value ? activeColor : ""}`
4289
- }
4290
- },
4291
- item.text
4292
- )
4293
- );
4294
- }), children)
4295
- )
4294
+ item.text
4295
+ )
4296
+ );
4297
+ }), children)
4296
4298
  )
4297
- );
4299
+ ));
4298
4300
  });
4299
4301
  MenuItem.defaultProps = defaultProps$1d;
4300
4302
  MenuItem.displayName = "NutMenuItem";
package/dist/packages/menuitem/menuitem.scss CHANGED
@@ -65,15 +65,15 @@
65
65
  }
66
66
 
67
67
  .placeholder-element {
68
- position: absolute;
69
- top: -$menu-bar-line-height;
68
+ position: fixed;
69
+ top: $menu-placeholder-top;
70
70
  left: 0;
71
71
  right: 0;
72
72
  z-index: $menu-bar-opened-z-index;
73
73
  background-color: transparent;
74
74
 
75
75
  &.up {
76
- bottom: -$menu-bar-line-height;
76
+ bottom: $menu-placeholder-top;
77
77
  }
78
78
  }
79
79