@nutui/nutui-react-taro 1.5.11 → 1.5.12-beta.0
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.
- package/CHANGELOG.md +7 -0
- package/dist/esm/GridItem.js +1 -1
- package/dist/esm/MenuItem.js +3 -3
- package/dist/esm/{griditem.taro-cdb3f119.js → griditem.taro-8c77a891.js} +6 -6
- package/dist/esm/{menuitem.taro-fed68a19.js → menuitem.taro-fee49a85.js} +29 -17
- package/dist/esm/nutui-react.es.js +2 -2
- package/dist/locales/base.js +1 -1
- package/dist/locales/en-US.js +1 -1
- package/dist/locales/id-ID.js +1 -1
- package/dist/locales/zh-CN.js +1 -1
- package/dist/locales/zh-TW.js +1 -1
- package/dist/locales/zh-UG.js +1 -1
- package/dist/nutui.react.mjs +94 -91
- package/dist/nutui.react.umd.js +94 -91
- package/dist/packages/menuitem/menuitem.scss +3 -3
- package/dist/style.css +1 -1
- package/dist/style.mjs +1 -1
- package/dist/styles/variables.scss +1 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
package/dist/esm/GridItem.js
CHANGED
package/dist/esm/MenuItem.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { M as MenuItem } from './menuitem.taro-
|
|
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
|
|
|
@@ -26,7 +26,7 @@ const defaultProps = {
|
|
|
26
26
|
};
|
|
27
27
|
const GridItem = (props) => {
|
|
28
28
|
useConfig();
|
|
29
|
-
const { children, columnNum, index, gutter, square, text, fontSize, color, icon, iconColor, iconSize, parentIconSize, parentIconColor, border, center, reverse, direction, iconClassPrefix, iconFontClassName, className, onClick, ...rest } = {
|
|
29
|
+
const { children, columnNum, index, gutter, square, text, fontSize, color, icon, iconColor, iconSize, parentIconSize, parentIconColor, border, center, reverse, direction, iconClassPrefix, iconFontClassName, className, onClick, style, ...rest } = {
|
|
30
30
|
...defaultProps,
|
|
31
31
|
...props,
|
|
32
32
|
};
|
|
@@ -37,19 +37,19 @@ const GridItem = (props) => {
|
|
|
37
37
|
return Number.isNaN(Number(value)) ? String(value) : `${value}px`;
|
|
38
38
|
};
|
|
39
39
|
const rootStyle = () => {
|
|
40
|
-
const
|
|
40
|
+
const rootStyle = {
|
|
41
41
|
flexBasis: `${100 / +columnNum}%`,
|
|
42
42
|
};
|
|
43
43
|
if (square) {
|
|
44
|
-
|
|
44
|
+
rootStyle.paddingTop = `${100 / +columnNum}%`;
|
|
45
45
|
}
|
|
46
46
|
else if (gutter) {
|
|
47
|
-
|
|
47
|
+
rootStyle.paddingRight = pxCheck(gutter);
|
|
48
48
|
if (index >= columnNum) {
|
|
49
|
-
|
|
49
|
+
rootStyle.marginTop = pxCheck(gutter);
|
|
50
50
|
}
|
|
51
51
|
}
|
|
52
|
-
return style;
|
|
52
|
+
return { ...rootStyle, ...style };
|
|
53
53
|
};
|
|
54
54
|
const contentClass = () => {
|
|
55
55
|
return classNames(b('content'), {
|
|
@@ -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
|
-
? {
|
|
92
|
+
? { top: `${position.top + position.height}px` }
|
|
79
93
|
: {
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
height: `${window.innerHeight}px`,
|
|
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
|
-
|
|
98
|
-
top: '0',
|
|
109
|
+
top: 'auto',
|
|
99
110
|
...isShow(),
|
|
111
|
+
...style,
|
|
100
112
|
};
|
|
101
113
|
};
|
|
102
|
-
return (React__default.createElement(
|
|
103
|
-
React__default.createElement(
|
|
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(
|
|
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(
|
|
128
|
+
React__default.createElement(View, { className: "nut-menu-item__content" },
|
|
117
129
|
options?.map((item, index) => {
|
|
118
|
-
return (React__default.createElement(
|
|
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(
|
|
138
|
+
React__default.createElement(View, { className: getIconCName(item.value, value), style: {
|
|
127
139
|
color: `${item.value === _value ? activeColor : ''}`,
|
|
128
140
|
} }, item.text)));
|
|
129
141
|
}),
|
|
@@ -9,7 +9,7 @@ export { P as Popup } from './popup.taro-01676bff.js';
|
|
|
9
9
|
export { C as Col } from './col.taro-53eed3cc.js';
|
|
10
10
|
export { D as Divider } from './divider.taro-26d1d8b4.js';
|
|
11
11
|
export { G as Grid } from './grid.taro-3503b82c.js';
|
|
12
|
-
export { G as GridItem } from './griditem.taro-
|
|
12
|
+
export { G as GridItem } from './griditem.taro-8c77a891.js';
|
|
13
13
|
export { L as Layout } from './layout.taro-9046d093.js';
|
|
14
14
|
export { R as Row } from './row.taro-f64d4a13.js';
|
|
15
15
|
export { S as Sticky } from './sticky.taro-218bda37.js';
|
|
@@ -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-
|
|
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
package/dist/locales/en-US.js
CHANGED
package/dist/locales/id-ID.js
CHANGED
package/dist/locales/zh-CN.js
CHANGED
package/dist/locales/zh-TW.js
CHANGED
package/dist/locales/zh-UG.js
CHANGED
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.
|
|
8
|
+
* @nutui/nutui-react-taro v1.5.12-beta.0 Wed Jul 12 2023 16:47:44 GMT+0800 (中国标准时间)
|
|
9
9
|
* (c) 2023 @jdf2e.
|
|
10
10
|
* Released under the MIT License.
|
|
11
11
|
*/
|
|
@@ -3257,6 +3257,7 @@ const GridItem = (props) => {
|
|
|
3257
3257
|
iconFontClassName,
|
|
3258
3258
|
className,
|
|
3259
3259
|
onClick,
|
|
3260
|
+
style,
|
|
3260
3261
|
...rest
|
|
3261
3262
|
} = {
|
|
3262
3263
|
...defaultProps$1l,
|
|
@@ -3269,18 +3270,18 @@ const GridItem = (props) => {
|
|
|
3269
3270
|
return Number.isNaN(Number(value)) ? String(value) : `${value}px`;
|
|
3270
3271
|
};
|
|
3271
3272
|
const rootStyle = () => {
|
|
3272
|
-
const
|
|
3273
|
+
const rootStyle2 = {
|
|
3273
3274
|
flexBasis: `${100 / +columnNum}%`
|
|
3274
3275
|
};
|
|
3275
3276
|
if (square) {
|
|
3276
|
-
|
|
3277
|
+
rootStyle2.paddingTop = `${100 / +columnNum}%`;
|
|
3277
3278
|
} else if (gutter) {
|
|
3278
|
-
|
|
3279
|
+
rootStyle2.paddingRight = pxCheck2(gutter);
|
|
3279
3280
|
if (index >= columnNum) {
|
|
3280
|
-
|
|
3281
|
+
rootStyle2.marginTop = pxCheck2(gutter);
|
|
3281
3282
|
}
|
|
3282
3283
|
}
|
|
3283
|
-
return style;
|
|
3284
|
+
return { ...rootStyle2, ...style };
|
|
3284
3285
|
};
|
|
3285
3286
|
const contentClass = () => {
|
|
3286
3287
|
return classNames(b2("content"), {
|
|
@@ -4103,6 +4104,19 @@ const MenuItem = forwardRef((props, ref) => {
|
|
|
4103
4104
|
useEffect(() => {
|
|
4104
4105
|
getParentOffset();
|
|
4105
4106
|
}, [_showPopup]);
|
|
4107
|
+
const windowHeight = useMemo(() => getSystemInfoSync().windowHeight, []);
|
|
4108
|
+
const updateItemOffset = useCallback(() => {
|
|
4109
|
+
const p = parent.parent().current;
|
|
4110
|
+
p.getBoundingClientRect().then((rect) => {
|
|
4111
|
+
if (rect) {
|
|
4112
|
+
setPosition({
|
|
4113
|
+
height: rect.height,
|
|
4114
|
+
top: rect.top
|
|
4115
|
+
});
|
|
4116
|
+
}
|
|
4117
|
+
});
|
|
4118
|
+
}, [direction, windowHeight]);
|
|
4119
|
+
usePageScroll(updateItemOffset);
|
|
4106
4120
|
useImperativeHandle(ref, () => ({
|
|
4107
4121
|
toggle: parent.toggleItemShow
|
|
4108
4122
|
}));
|
|
@@ -4143,114 +4157,103 @@ const MenuItem = forwardRef((props, ref) => {
|
|
|
4143
4157
|
return { display: "none" };
|
|
4144
4158
|
};
|
|
4145
4159
|
const getPosition = () => {
|
|
4146
|
-
return direction === "down" ? {
|
|
4147
|
-
|
|
4148
|
-
|
|
4149
|
-
|
|
4150
|
-
height: `${window.innerHeight}px`
|
|
4160
|
+
return direction === "down" ? { top: `${position.top + position.height}px` } : {
|
|
4161
|
+
bottom: `${getSystemInfoSync().windowHeight - position.top}px`,
|
|
4162
|
+
top: "0",
|
|
4163
|
+
height: "initial"
|
|
4151
4164
|
};
|
|
4152
4165
|
};
|
|
4153
4166
|
const placeholderStyle = () => {
|
|
4154
4167
|
if (direction === "down") {
|
|
4155
4168
|
return {
|
|
4156
4169
|
height: `${position.top + position.height}px`,
|
|
4157
|
-
|
|
4158
|
-
|
|
4159
|
-
...isShow()
|
|
4170
|
+
...isShow(),
|
|
4171
|
+
...style
|
|
4160
4172
|
};
|
|
4161
4173
|
}
|
|
4162
4174
|
return {
|
|
4163
4175
|
height: `${getSystemInfoSync().windowHeight - position.top}px`,
|
|
4164
|
-
|
|
4165
|
-
|
|
4166
|
-
...
|
|
4176
|
+
top: "auto",
|
|
4177
|
+
...isShow(),
|
|
4178
|
+
...style
|
|
4167
4179
|
};
|
|
4168
4180
|
};
|
|
4169
|
-
return /* @__PURE__ */ React__default.createElement(
|
|
4170
|
-
|
|
4181
|
+
return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
|
|
4182
|
+
View,
|
|
4171
4183
|
{
|
|
4172
|
-
className:
|
|
4173
|
-
|
|
4174
|
-
|
|
4175
|
-
|
|
4176
|
-
|
|
4177
|
-
|
|
4178
|
-
|
|
4179
|
-
|
|
4180
|
-
|
|
4181
|
-
|
|
4182
|
-
|
|
4184
|
+
className: `placeholder-element ${classNames({
|
|
4185
|
+
up: direction === "up"
|
|
4186
|
+
})}`,
|
|
4187
|
+
style: placeholderStyle(),
|
|
4188
|
+
onClick: () => parent.toggleItemShow(orderKey)
|
|
4189
|
+
}
|
|
4190
|
+
), /* @__PURE__ */ React__default.createElement(
|
|
4191
|
+
Overlay,
|
|
4192
|
+
{
|
|
4193
|
+
overlayClass: "nut-menu__overlay",
|
|
4194
|
+
style: getPosition(),
|
|
4195
|
+
lockScroll: parent.lockScroll,
|
|
4196
|
+
visible: _showPopup,
|
|
4197
|
+
closeOnClickOverlay: parent.closeOnClickOverlay,
|
|
4198
|
+
onClick: () => {
|
|
4199
|
+
parent.closeOnClickOverlay && parent.toggleItemShow(orderKey);
|
|
4183
4200
|
}
|
|
4184
|
-
|
|
4185
|
-
|
|
4186
|
-
|
|
4187
|
-
|
|
4188
|
-
|
|
4189
|
-
|
|
4190
|
-
|
|
4191
|
-
|
|
4192
|
-
closeOnClickOverlay: parent.closeOnClickOverlay,
|
|
4193
|
-
onClick: () => {
|
|
4194
|
-
parent.closeOnClickOverlay && parent.toggleItemShow(orderKey);
|
|
4195
|
-
}
|
|
4201
|
+
}
|
|
4202
|
+
), /* @__PURE__ */ React__default.createElement(
|
|
4203
|
+
View,
|
|
4204
|
+
{
|
|
4205
|
+
className: direction === "down" ? "nut-menu-item__wrap" : "nut-menu-item__wrap-up",
|
|
4206
|
+
style: {
|
|
4207
|
+
// ...getPosition(),
|
|
4208
|
+
...isShow()
|
|
4196
4209
|
}
|
|
4197
|
-
|
|
4210
|
+
},
|
|
4198
4211
|
/* @__PURE__ */ React__default.createElement(
|
|
4199
|
-
|
|
4212
|
+
CSSTransition$1,
|
|
4200
4213
|
{
|
|
4201
|
-
|
|
4202
|
-
|
|
4203
|
-
|
|
4204
|
-
...isShow()
|
|
4205
|
-
}
|
|
4214
|
+
in: _showPopup,
|
|
4215
|
+
timeout: 100,
|
|
4216
|
+
classNames: direction === "down" ? "menu-item" : "menu-item-up"
|
|
4206
4217
|
},
|
|
4207
|
-
/* @__PURE__ */ React__default.createElement(
|
|
4208
|
-
|
|
4209
|
-
|
|
4210
|
-
|
|
4211
|
-
|
|
4212
|
-
|
|
4213
|
-
|
|
4214
|
-
|
|
4215
|
-
|
|
4216
|
-
|
|
4218
|
+
/* @__PURE__ */ React__default.createElement(View, { className: "nut-menu-item__content" }, options == null ? void 0 : options.map((item, index) => {
|
|
4219
|
+
return /* @__PURE__ */ React__default.createElement(
|
|
4220
|
+
View,
|
|
4221
|
+
{
|
|
4222
|
+
className: `nut-menu-item__option ${classNames({
|
|
4223
|
+
active: item.value === _value
|
|
4224
|
+
})}`,
|
|
4225
|
+
key: item.text,
|
|
4226
|
+
style: {
|
|
4227
|
+
flexBasis: `${100 / columns}%`
|
|
4228
|
+
},
|
|
4229
|
+
onClick: () => {
|
|
4230
|
+
handleClick(item);
|
|
4231
|
+
}
|
|
4232
|
+
},
|
|
4233
|
+
item.value === _value ? /* @__PURE__ */ React__default.createElement(
|
|
4234
|
+
Icon$1,
|
|
4217
4235
|
{
|
|
4218
|
-
|
|
4219
|
-
|
|
4220
|
-
|
|
4221
|
-
|
|
4236
|
+
classPrefix: iconClassPrefix,
|
|
4237
|
+
fontClassName: iconFontClassName,
|
|
4238
|
+
className: getIconCName(item.value, value),
|
|
4239
|
+
name: optionsIcon,
|
|
4240
|
+
color: activeColor
|
|
4241
|
+
}
|
|
4242
|
+
) : null,
|
|
4243
|
+
/* @__PURE__ */ React__default.createElement(
|
|
4244
|
+
View,
|
|
4245
|
+
{
|
|
4246
|
+
className: getIconCName(item.value, value),
|
|
4222
4247
|
style: {
|
|
4223
|
-
|
|
4224
|
-
},
|
|
4225
|
-
onClick: () => {
|
|
4226
|
-
handleClick(item);
|
|
4248
|
+
color: `${item.value === _value ? activeColor : ""}`
|
|
4227
4249
|
}
|
|
4228
4250
|
},
|
|
4229
|
-
item.
|
|
4230
|
-
|
|
4231
|
-
|
|
4232
|
-
|
|
4233
|
-
fontClassName: iconFontClassName,
|
|
4234
|
-
className: getIconCName(item.value, value),
|
|
4235
|
-
name: optionsIcon,
|
|
4236
|
-
color: activeColor
|
|
4237
|
-
}
|
|
4238
|
-
) : null,
|
|
4239
|
-
/* @__PURE__ */ React__default.createElement(
|
|
4240
|
-
"div",
|
|
4241
|
-
{
|
|
4242
|
-
className: getIconCName(item.value, value),
|
|
4243
|
-
style: {
|
|
4244
|
-
color: `${item.value === _value ? activeColor : ""}`
|
|
4245
|
-
}
|
|
4246
|
-
},
|
|
4247
|
-
item.text
|
|
4248
|
-
)
|
|
4249
|
-
);
|
|
4250
|
-
}), children)
|
|
4251
|
-
)
|
|
4251
|
+
item.text
|
|
4252
|
+
)
|
|
4253
|
+
);
|
|
4254
|
+
}), children)
|
|
4252
4255
|
)
|
|
4253
|
-
);
|
|
4256
|
+
));
|
|
4254
4257
|
});
|
|
4255
4258
|
MenuItem.defaultProps = defaultProps$1d;
|
|
4256
4259
|
MenuItem.displayName = "NutMenuItem";
|