@nutui/nutui-react 1.3.5 → 1.3.7
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 +14 -0
- package/dist/esm/ActionSheet.js +15 -25
- package/dist/esm/Address.js +151 -221
- package/dist/esm/AnimatingNumbers.js +7 -31
- package/dist/esm/Audio.js +31 -66
- package/dist/esm/Avatar.js +25 -51
- package/dist/esm/AvatarGroup.js +2 -9
- package/dist/esm/BackTop.js +29 -55
- package/dist/esm/Badge.js +9 -20
- package/dist/esm/Barrage.js +8 -20
- package/dist/esm/Button.js +22 -37
- package/dist/esm/Calendar.js +23 -37
- package/dist/esm/CalendarItem.js +86 -186
- package/dist/esm/Card.js +14 -20
- package/dist/esm/Cascader.js +77 -197
- package/dist/esm/Cell.js +20 -30
- package/dist/esm/CellGroup.js +6 -12
- package/dist/esm/Checkbox.js +27 -48
- package/dist/esm/CheckboxGroup.js +12 -30
- package/dist/esm/CircleProgress.js +11 -28
- package/dist/esm/Col.js +11 -22
- package/dist/esm/Collapse.js +11 -27
- package/dist/esm/CollapseItem.js +33 -47
- package/dist/esm/ConfigProvider.js +4 -15
- package/dist/esm/CountDown.js +37 -74
- package/dist/esm/DatePicker.js +44 -106
- package/dist/esm/Dialog.js +31 -89
- package/dist/esm/Divider.js +8 -15
- package/dist/esm/Drag.js +30 -45
- package/dist/esm/Elevator.js +37 -74
- package/dist/esm/Empty.js +11 -24
- package/dist/esm/FixedNav.js +18 -29
- package/dist/esm/Grid.js +13 -28
- package/dist/esm/GridItem.js +18 -34
- package/dist/esm/ImagePreview.js +36 -71
- package/dist/esm/Indicator.js +9 -20
- package/dist/esm/Infiniteloading.js +26 -55
- package/dist/esm/Input.js +62 -106
- package/dist/esm/InputNumber.js +25 -52
- package/dist/esm/Layout.js +0 -6
- package/dist/esm/Menu.js +27 -49
- package/dist/esm/MenuItem.js +32 -56
- package/dist/esm/NavBar.js +18 -34
- package/dist/esm/NoticeBar.js +54 -102
- package/dist/esm/Notify.js +9 -38
- package/dist/esm/NumberKeyboard.js +21 -52
- package/dist/esm/Pagination.js +38 -71
- package/dist/esm/Picker.js +91 -178
- package/dist/esm/Popover.js +32 -72
- package/dist/esm/Popup.js +40 -72
- package/dist/esm/Price.js +7 -24
- package/dist/esm/Progress.js +35 -50
- package/dist/esm/PullToRefresh.js +28 -83
- package/dist/esm/Radio.js +24 -47
- package/dist/esm/RadioGroup.js +14 -24
- package/dist/esm/Range.js +44 -116
- package/dist/esm/Rate.js +21 -39
- package/dist/esm/Row.js +7 -16
- package/dist/esm/SearchBar.js +47 -68
- package/dist/esm/ShortPassword.js +29 -56
- package/dist/esm/SideNavBar.js +9 -16
- package/dist/esm/SideNavBarItem.js +4 -11
- package/dist/esm/Signature.js +13 -43
- package/dist/esm/Skeleton.js +13 -23
- package/dist/esm/Step.js +12 -28
- package/dist/esm/Steps.js +6 -14
- package/dist/esm/Sticky.js +24 -52
- package/dist/esm/SubSideNavBar.js +7 -22
- package/dist/esm/Swipe.js +15 -54
- package/dist/esm/Swiper.js +102 -186
- package/dist/esm/SwiperItem.js +2 -12
- package/dist/esm/Switch.js +13 -27
- package/dist/esm/Tabbar.js +13 -25
- package/dist/esm/TabbarItem.js +15 -23
- package/dist/esm/Table.js +19 -39
- package/dist/esm/Tag.js +19 -36
- package/dist/esm/TextArea.js +19 -43
- package/dist/esm/TimeDetail.js +15 -28
- package/dist/esm/TimePannel.js +5 -12
- package/dist/esm/TimeSelect.js +35 -59
- package/dist/esm/Toast.js +16 -49
- package/dist/esm/Uploader.js +57 -152
- package/dist/esm/Video.js +8 -19
- package/dist/esm/VirtualList.js +84 -118
- package/dist/esm/date-710f8c7c.js +9 -33
- package/dist/esm/get-scroll-parent-3dcd3f53.js +1 -9
- package/dist/esm/icon-8dc4de10.js +11 -21
- package/dist/esm/offsetContext-0e3d04b3.js +0 -3
- package/dist/esm/overlay-ed3eb37d.js +12 -23
- package/dist/esm/render-18227751.js +0 -11
- package/dist/esm/tabpane-c957ab14.js +4 -10
- package/dist/esm/tabs-0896a61b.js +28 -56
- package/dist/esm/types/src/packages/elevator/demo.d.ts +1 -0
- package/dist/esm/types/src/packages/searchbar/searchbar.d.ts +2 -0
- package/dist/esm/useClientRect-839d18c5.js +0 -5
- package/dist/esm/useTouch-a2ea68c6.js +27 -47
- 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/nutui.react.es.js +429 -413
- package/dist/nutui.react.umd.js +421 -405
- package/dist/packages/menu/menu.scss +4 -0
- package/dist/packages/menuitem/menuitem.scss +27 -2
- package/dist/packages/searchbar/searchbar.scss +20 -3
- package/dist/style.css +1 -1
- package/dist/style.es.js +1 -1
- package/dist/types/index.d.ts +2 -0
- package/package.json +1 -1
package/dist/esm/InputNumber.js
CHANGED
|
@@ -2,18 +2,14 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
3
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
4
4
|
var _excluded = ["children", "disabled", "buttonSize", "min", "max", "inputWidth", "readonly", "modelValue", "decimalPlaces", "step", "isAsync", "className", "style", "add", "reduce", "change", "overlimit", "blur", "focus", "iconClassPrefix", "iconFontClassName"];
|
|
5
|
-
|
|
6
5
|
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; }
|
|
7
|
-
|
|
8
6
|
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; }
|
|
9
|
-
|
|
10
7
|
import React__default, { useState, useEffect } from 'react';
|
|
11
8
|
import classNames from 'classnames';
|
|
12
9
|
import Icon from './Icon.js';
|
|
13
10
|
import { c as cn } from './bem-893ad28d.js';
|
|
14
11
|
import { C as ComponentDefaults } from './typings-1c5f2628.js';
|
|
15
12
|
import '@bem-react/classname';
|
|
16
|
-
|
|
17
13
|
var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
|
|
18
14
|
disabled: false,
|
|
19
15
|
buttonSize: '',
|
|
@@ -26,76 +22,65 @@ var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
|
|
|
26
22
|
decimalPlaces: 0,
|
|
27
23
|
isAsync: false
|
|
28
24
|
});
|
|
29
|
-
|
|
30
25
|
function pxCheck(value) {
|
|
31
26
|
return Number.isNaN(Number(value)) ? String(value) : "".concat(value, "px");
|
|
32
27
|
}
|
|
33
|
-
|
|
34
28
|
var InputNumber = function InputNumber(props) {
|
|
35
29
|
var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
30
|
+
children = _defaultProps$props.children,
|
|
31
|
+
disabled = _defaultProps$props.disabled,
|
|
32
|
+
buttonSize = _defaultProps$props.buttonSize,
|
|
33
|
+
min = _defaultProps$props.min,
|
|
34
|
+
max = _defaultProps$props.max,
|
|
35
|
+
inputWidth = _defaultProps$props.inputWidth,
|
|
36
|
+
readonly = _defaultProps$props.readonly,
|
|
37
|
+
modelValue = _defaultProps$props.modelValue,
|
|
38
|
+
decimalPlaces = _defaultProps$props.decimalPlaces,
|
|
39
|
+
step = _defaultProps$props.step,
|
|
40
|
+
isAsync = _defaultProps$props.isAsync,
|
|
41
|
+
className = _defaultProps$props.className,
|
|
42
|
+
style = _defaultProps$props.style,
|
|
43
|
+
add = _defaultProps$props.add,
|
|
44
|
+
reduce = _defaultProps$props.reduce,
|
|
45
|
+
change = _defaultProps$props.change,
|
|
46
|
+
overlimit = _defaultProps$props.overlimit,
|
|
47
|
+
blur = _defaultProps$props.blur,
|
|
48
|
+
focus = _defaultProps$props.focus,
|
|
49
|
+
iconClassPrefix = _defaultProps$props.iconClassPrefix,
|
|
50
|
+
iconFontClassName = _defaultProps$props.iconFontClassName,
|
|
51
|
+
restProps = _objectWithoutProperties(_defaultProps$props, _excluded);
|
|
59
52
|
var _useState = useState(modelValue),
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
53
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
54
|
+
inputValue = _useState2[0],
|
|
55
|
+
setInputValue = _useState2[1];
|
|
64
56
|
useEffect(function () {
|
|
65
57
|
setInputValue(modelValue);
|
|
66
58
|
}, [modelValue]);
|
|
67
59
|
var b = cn('inputnumber');
|
|
68
60
|
var classes = classNames(_defineProperty({}, "".concat(b(''), "--disabled"), disabled), className, b(''));
|
|
69
|
-
|
|
70
61
|
var styles = _objectSpread({
|
|
71
62
|
height: pxCheck(buttonSize)
|
|
72
63
|
}, style);
|
|
73
|
-
|
|
74
64
|
var addAllow = function addAllow() {
|
|
75
65
|
var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Number(inputValue);
|
|
76
66
|
return value < Number(max) && !disabled;
|
|
77
67
|
};
|
|
78
|
-
|
|
79
68
|
var reduceAllow = function reduceAllow() {
|
|
80
69
|
var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Number(inputValue);
|
|
81
70
|
return value > Number(min) && !disabled;
|
|
82
71
|
};
|
|
83
|
-
|
|
84
72
|
var iconMinusClasses = classNames('nut-inputnumber__icon', {
|
|
85
73
|
'nut-inputnumber__icon--disabled': !reduceAllow()
|
|
86
74
|
});
|
|
87
75
|
var iconAddClasses = classNames('nut-inputnumber__icon', {
|
|
88
76
|
'nut-inputnumber__icon--disabled': !addAllow()
|
|
89
77
|
});
|
|
90
|
-
|
|
91
78
|
var fixedDecimalPlaces = function fixedDecimalPlaces(v) {
|
|
92
79
|
return Number(v).toFixed(Number(decimalPlaces));
|
|
93
80
|
};
|
|
94
|
-
|
|
95
81
|
var emitChange = function emitChange(value, e) {
|
|
96
82
|
var outputValue = fixedDecimalPlaces(value);
|
|
97
83
|
change && change(outputValue, e);
|
|
98
|
-
|
|
99
84
|
if (!isAsync) {
|
|
100
85
|
if (Number(outputValue) < Number(min)) {
|
|
101
86
|
setInputValue(Number(min));
|
|
@@ -106,10 +91,8 @@ var InputNumber = function InputNumber(props) {
|
|
|
106
91
|
}
|
|
107
92
|
}
|
|
108
93
|
};
|
|
109
|
-
|
|
110
94
|
var reduceNumber = function reduceNumber(e) {
|
|
111
95
|
reduce && reduce(e);
|
|
112
|
-
|
|
113
96
|
if (reduceAllow()) {
|
|
114
97
|
var outputValue = Number(inputValue) - Number(step);
|
|
115
98
|
emitChange(outputValue, e);
|
|
@@ -117,10 +100,8 @@ var InputNumber = function InputNumber(props) {
|
|
|
117
100
|
overlimit && overlimit(e);
|
|
118
101
|
}
|
|
119
102
|
};
|
|
120
|
-
|
|
121
103
|
var addNumber = function addNumber(e) {
|
|
122
104
|
add && add(e);
|
|
123
|
-
|
|
124
105
|
if (addAllow()) {
|
|
125
106
|
var outputValue = Number(inputValue) + Number(step);
|
|
126
107
|
emitChange(outputValue, e);
|
|
@@ -128,11 +109,9 @@ var InputNumber = function InputNumber(props) {
|
|
|
128
109
|
overlimit && overlimit(e);
|
|
129
110
|
}
|
|
130
111
|
};
|
|
131
|
-
|
|
132
112
|
var changeValue = function changeValue(e) {
|
|
133
113
|
var input = e.target;
|
|
134
114
|
change && change(input.valueAsNumber, e);
|
|
135
|
-
|
|
136
115
|
if (!isAsync) {
|
|
137
116
|
if (Number.isNaN(input.valueAsNumber)) {
|
|
138
117
|
setInputValue(inputValue);
|
|
@@ -141,29 +120,24 @@ var InputNumber = function InputNumber(props) {
|
|
|
141
120
|
}
|
|
142
121
|
}
|
|
143
122
|
};
|
|
144
|
-
|
|
145
123
|
var focusValue = function focusValue(e) {
|
|
146
124
|
if (disabled) return;
|
|
147
125
|
if (readonly) return;
|
|
148
126
|
focus && focus(e);
|
|
149
127
|
};
|
|
150
|
-
|
|
151
128
|
var burValue = function burValue(e) {
|
|
152
129
|
if (disabled) return;
|
|
153
130
|
if (readonly) return;
|
|
154
131
|
var input = e.target;
|
|
155
132
|
var value = input.valueAsNumber;
|
|
156
|
-
|
|
157
133
|
if (value < Number(min)) {
|
|
158
134
|
value = Number(min);
|
|
159
135
|
} else if (value > Number(max)) {
|
|
160
136
|
value = Number(max);
|
|
161
137
|
}
|
|
162
|
-
|
|
163
138
|
emitChange(value, e);
|
|
164
139
|
blur && blur(e);
|
|
165
140
|
};
|
|
166
|
-
|
|
167
141
|
return React__default.createElement("div", _objectSpread({
|
|
168
142
|
className: classes,
|
|
169
143
|
style: styles
|
|
@@ -196,7 +170,6 @@ var InputNumber = function InputNumber(props) {
|
|
|
196
170
|
onClick: addNumber
|
|
197
171
|
}));
|
|
198
172
|
};
|
|
199
|
-
|
|
200
173
|
InputNumber.defaultProps = defaultProps;
|
|
201
174
|
InputNumber.displayName = 'NutInputNumber';
|
|
202
175
|
export { InputNumber as default };
|
package/dist/esm/Layout.js
CHANGED
|
@@ -1,20 +1,14 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
-
|
|
3
2
|
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; }
|
|
4
|
-
|
|
5
3
|
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; }
|
|
6
|
-
|
|
7
4
|
import React__default from 'react';
|
|
8
5
|
var defaultProps = {};
|
|
9
|
-
|
|
10
6
|
var Layout = function Layout(props) {
|
|
11
7
|
_objectSpread(_objectSpread({}, defaultProps), props);
|
|
12
|
-
|
|
13
8
|
return React__default.createElement("div", {
|
|
14
9
|
className: "nut-layout"
|
|
15
10
|
}, "Layout");
|
|
16
11
|
};
|
|
17
|
-
|
|
18
12
|
Layout.defaultProps = defaultProps;
|
|
19
13
|
Layout.displayName = 'NutLayout';
|
|
20
14
|
export { Layout as default };
|
package/dist/esm/Menu.js
CHANGED
|
@@ -3,16 +3,12 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
|
3
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
4
4
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
5
5
|
var _excluded = ["className", "titleIcon", "scrollFixed", "lockScroll", "closeOnClickOverlay", "children", "activeColor", "iconClassPrefix", "iconFontClassName"];
|
|
6
|
-
|
|
7
6
|
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; }
|
|
8
|
-
|
|
9
7
|
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; }
|
|
10
|
-
|
|
11
8
|
import React__default, { useRef, useState, useEffect } from 'react';
|
|
12
9
|
import classNames from 'classnames';
|
|
13
10
|
import Icon from './Icon.js';
|
|
14
11
|
import { C as ComponentDefaults } from './typings-1c5f2628.js';
|
|
15
|
-
|
|
16
12
|
var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
|
|
17
13
|
className: '',
|
|
18
14
|
style: {},
|
|
@@ -22,59 +18,48 @@ var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
|
|
|
22
18
|
lockScroll: true,
|
|
23
19
|
titleIcon: ''
|
|
24
20
|
});
|
|
25
|
-
|
|
26
21
|
var Menu = function Menu(props) {
|
|
27
22
|
var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
23
|
+
className = _defaultProps$props.className,
|
|
24
|
+
titleIcon = _defaultProps$props.titleIcon,
|
|
25
|
+
scrollFixed = _defaultProps$props.scrollFixed,
|
|
26
|
+
lockScroll = _defaultProps$props.lockScroll,
|
|
27
|
+
closeOnClickOverlay = _defaultProps$props.closeOnClickOverlay,
|
|
28
|
+
children = _defaultProps$props.children,
|
|
29
|
+
activeColor = _defaultProps$props.activeColor,
|
|
30
|
+
iconClassPrefix = _defaultProps$props.iconClassPrefix,
|
|
31
|
+
iconFontClassName = _defaultProps$props.iconFontClassName,
|
|
32
|
+
rest = _objectWithoutProperties(_defaultProps$props, _excluded);
|
|
39
33
|
var parentRef = useRef(null);
|
|
40
|
-
|
|
41
34
|
var _useState = useState(false),
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
35
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
36
|
+
isScrollFixed = _useState2[0],
|
|
37
|
+
setIsScrollFixed = _useState2[1];
|
|
46
38
|
var getScrollTop = function getScrollTop(el) {
|
|
47
39
|
return Math.max(0, 'scrollTop' in el ? el.scrollTop : el.pageYOffset);
|
|
48
40
|
};
|
|
49
|
-
|
|
50
41
|
var onScroll = function onScroll() {
|
|
51
42
|
var scrollFixed = props.scrollFixed;
|
|
52
43
|
var scrollTop = getScrollTop(window);
|
|
53
|
-
console.log(scrollTop);
|
|
54
44
|
var isFixed = scrollTop > (typeof scrollFixed === 'boolean' ? 30 : Number(scrollFixed));
|
|
55
45
|
setIsScrollFixed(isFixed);
|
|
56
46
|
};
|
|
57
|
-
|
|
58
47
|
useEffect(function () {
|
|
59
48
|
if (scrollFixed) {
|
|
60
49
|
window.addEventListener('scroll', onScroll);
|
|
61
50
|
}
|
|
62
|
-
|
|
63
51
|
return function () {
|
|
64
52
|
return window.removeEventListener('scroll', onScroll);
|
|
65
53
|
};
|
|
66
54
|
}, []);
|
|
67
|
-
|
|
68
55
|
var _useState3 = useState([]),
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
56
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
57
|
+
itemShow = _useState4[0],
|
|
58
|
+
setItemShow = _useState4[1];
|
|
73
59
|
var _useState5 = useState([]),
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
60
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
61
|
+
itemTitle = _useState6[0],
|
|
62
|
+
setItemTitle = _useState6[1];
|
|
78
63
|
var toggleItemShow = function toggleItemShow(index) {
|
|
79
64
|
itemShow[index] = !itemShow[index];
|
|
80
65
|
var temp = itemShow.map(function (i, idx) {
|
|
@@ -82,21 +67,17 @@ var Menu = function Menu(props) {
|
|
|
82
67
|
});
|
|
83
68
|
setItemShow(_toConsumableArray(temp));
|
|
84
69
|
};
|
|
85
|
-
|
|
86
70
|
var hideItemShow = function hideItemShow(index) {
|
|
87
71
|
itemShow[index] = false;
|
|
88
72
|
setItemShow(_toConsumableArray(itemShow));
|
|
89
73
|
};
|
|
90
|
-
|
|
91
74
|
var updateTitle = function updateTitle(text, index) {
|
|
92
75
|
itemTitle[index] = text;
|
|
93
76
|
setItemTitle(_toConsumableArray(itemTitle));
|
|
94
77
|
};
|
|
95
|
-
|
|
96
78
|
var parent = function parent() {
|
|
97
79
|
return parentRef;
|
|
98
80
|
};
|
|
99
|
-
|
|
100
81
|
var cloneChildren = function cloneChildren() {
|
|
101
82
|
return React__default.Children.map(children, function (child, index) {
|
|
102
83
|
return React__default.cloneElement(child, {
|
|
@@ -114,33 +95,31 @@ var Menu = function Menu(props) {
|
|
|
114
95
|
});
|
|
115
96
|
});
|
|
116
97
|
};
|
|
117
|
-
|
|
118
|
-
console.log('isScrollFixed', isScrollFixed);
|
|
119
98
|
return React__default.createElement("div", _objectSpread(_objectSpread({
|
|
120
99
|
className: "nut-menu ".concat(className, " ").concat(isScrollFixed ? 'scroll-fixed' : '')
|
|
121
100
|
}, rest), {}, {
|
|
122
101
|
ref: parentRef
|
|
123
102
|
}), React__default.createElement("div", {
|
|
103
|
+
className: "nut-menu-relative"
|
|
104
|
+
}, React__default.createElement("div", {
|
|
124
105
|
className: "nut-menu__bar ".concat(itemShow.includes(true) ? 'opened' : '', " ").concat(className)
|
|
125
106
|
}, React__default.Children.toArray(children).map(function (child, index) {
|
|
126
107
|
if (!child) return null;
|
|
127
108
|
var _child$props = child.props,
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
109
|
+
disabled = _child$props.disabled,
|
|
110
|
+
title = _child$props.title,
|
|
111
|
+
value = _child$props.value,
|
|
112
|
+
direction = _child$props.direction,
|
|
113
|
+
options = _child$props.options;
|
|
133
114
|
var currentTitle = options === null || options === void 0 ? void 0 : options.filter(function (option) {
|
|
134
115
|
return option.value === value;
|
|
135
116
|
});
|
|
136
|
-
|
|
137
117
|
function finallyTitle() {
|
|
138
118
|
if (title) return title;
|
|
139
119
|
if (itemTitle && itemTitle[index]) return itemTitle[index];
|
|
140
120
|
if (currentTitle && currentTitle[0] && currentTitle[0].text) return currentTitle[0].text;
|
|
141
121
|
return '';
|
|
142
122
|
}
|
|
143
|
-
|
|
144
123
|
return React__default.createElement("div", {
|
|
145
124
|
className: "nut-menu__item ".concat(classNames({
|
|
146
125
|
active: itemShow[index],
|
|
@@ -167,9 +146,8 @@ var Menu = function Menu(props) {
|
|
|
167
146
|
size: "10",
|
|
168
147
|
name: titleIcon || (direction === 'up' ? 'arrow-up' : 'down-arrow')
|
|
169
148
|
})));
|
|
170
|
-
})), cloneChildren());
|
|
149
|
+
})), cloneChildren()));
|
|
171
150
|
};
|
|
172
|
-
|
|
173
151
|
Menu.defaultProps = defaultProps;
|
|
174
152
|
Menu.displayName = 'NutMenu';
|
|
175
153
|
export { Menu as default };
|
package/dist/esm/MenuItem.js
CHANGED
|
@@ -1,10 +1,7 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
|
-
|
|
4
3
|
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; }
|
|
5
|
-
|
|
6
4
|
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; }
|
|
7
|
-
|
|
8
5
|
import React__default, { useState, useEffect } from 'react';
|
|
9
6
|
import classNames from 'classnames';
|
|
10
7
|
import { CSSTransition } from 'react-transition-group';
|
|
@@ -14,7 +11,6 @@ import { O as Overlay } from './overlay-ed3eb37d.js';
|
|
|
14
11
|
import { C as ComponentDefaults } from './typings-1c5f2628.js';
|
|
15
12
|
import './bem-893ad28d.js';
|
|
16
13
|
import '@bem-react/classname';
|
|
17
|
-
|
|
18
14
|
var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
|
|
19
15
|
className: '',
|
|
20
16
|
style: {},
|
|
@@ -29,96 +25,80 @@ var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
|
|
|
29
25
|
return undefined;
|
|
30
26
|
}
|
|
31
27
|
});
|
|
32
|
-
|
|
33
28
|
var MenuItem = function MenuItem(props) {
|
|
34
29
|
useConfig();
|
|
35
|
-
|
|
36
30
|
var mergedProps = _objectSpread(_objectSpread({}, defaultProps), props);
|
|
37
|
-
|
|
38
31
|
var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
32
|
+
className = _defaultProps$props.className,
|
|
33
|
+
style = _defaultProps$props.style,
|
|
34
|
+
options = _defaultProps$props.options,
|
|
35
|
+
value = _defaultProps$props.value,
|
|
36
|
+
columns = _defaultProps$props.columns,
|
|
37
|
+
title = _defaultProps$props.title,
|
|
38
|
+
optionsIcon = _defaultProps$props.optionsIcon,
|
|
39
|
+
direction = _defaultProps$props.direction,
|
|
40
|
+
onChange = _defaultProps$props.onChange,
|
|
41
|
+
activeTitleClass = _defaultProps$props.activeTitleClass,
|
|
42
|
+
inactiveTitleClass = _defaultProps$props.inactiveTitleClass,
|
|
43
|
+
children = _defaultProps$props.children,
|
|
44
|
+
iconClassPrefix = _defaultProps$props.iconClassPrefix,
|
|
45
|
+
iconFontClassName = _defaultProps$props.iconFontClassName;
|
|
54
46
|
var activeColor = mergedProps.activeColor,
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
47
|
+
showPopup = mergedProps.showPopup,
|
|
48
|
+
parent = mergedProps.parent,
|
|
49
|
+
orderKey = mergedProps.orderKey;
|
|
59
50
|
var _useState = useState(showPopup),
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
51
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
52
|
+
_showPopup = _useState2[0],
|
|
53
|
+
setShowPopup = _useState2[1];
|
|
64
54
|
var _useState3 = useState(value),
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
55
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
56
|
+
_value = _useState4[0],
|
|
57
|
+
setValue = _useState4[1];
|
|
69
58
|
useEffect(function () {
|
|
70
59
|
setShowPopup(showPopup);
|
|
71
60
|
}, [showPopup]);
|
|
72
61
|
useEffect(function () {
|
|
73
62
|
getParentOffset();
|
|
74
63
|
}, [_showPopup]);
|
|
75
|
-
|
|
76
64
|
var getIconCName = function getIconCName(optionVal, value) {
|
|
77
65
|
var _classNames;
|
|
78
|
-
|
|
79
66
|
return classNames((_classNames = {}, _defineProperty(_classNames, activeTitleClass, optionVal === value), _defineProperty(_classNames, inactiveTitleClass, optionVal !== value), _classNames));
|
|
80
67
|
};
|
|
81
|
-
|
|
82
68
|
var setTitle = function setTitle(text) {
|
|
83
69
|
if (!title) {
|
|
84
70
|
parent.updateTitle(text, orderKey);
|
|
85
71
|
}
|
|
86
72
|
};
|
|
87
|
-
|
|
88
73
|
var handleClick = function handleClick(item) {
|
|
89
74
|
parent.toggleItemShow(orderKey);
|
|
90
75
|
setTitle(item.text);
|
|
91
76
|
setValue(item.value);
|
|
92
77
|
onChange && onChange(item);
|
|
93
78
|
};
|
|
94
|
-
|
|
95
79
|
var _useState5 = useState({
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
80
|
+
top: 0,
|
|
81
|
+
height: 0
|
|
82
|
+
}),
|
|
83
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
84
|
+
position = _useState6[0],
|
|
85
|
+
setPosition = _useState6[1];
|
|
103
86
|
var getParentOffset = function getParentOffset() {
|
|
104
87
|
setTimeout(function () {
|
|
105
88
|
var p = parent.parent().current;
|
|
106
89
|
var rect = p.getBoundingClientRect();
|
|
107
|
-
console.log(rect, p.offsetTop, window.screenTop);
|
|
108
90
|
setPosition({
|
|
109
91
|
height: rect.height,
|
|
110
92
|
top: rect.top
|
|
111
93
|
});
|
|
112
94
|
});
|
|
113
95
|
};
|
|
114
|
-
|
|
115
96
|
var isShow = function isShow() {
|
|
116
97
|
if (_showPopup) return {};
|
|
117
98
|
return {
|
|
118
99
|
display: 'none'
|
|
119
100
|
};
|
|
120
101
|
};
|
|
121
|
-
|
|
122
102
|
var getPosition = function getPosition() {
|
|
123
103
|
return direction === 'down' ? {
|
|
124
104
|
top: "".concat(position.top + position.height, "px")
|
|
@@ -127,20 +107,17 @@ var MenuItem = function MenuItem(props) {
|
|
|
127
107
|
top: 'auto'
|
|
128
108
|
};
|
|
129
109
|
};
|
|
130
|
-
|
|
131
110
|
var placeholderStyle = function placeholderStyle() {
|
|
132
111
|
if (direction === 'down') {
|
|
133
112
|
return _objectSpread(_objectSpread({
|
|
134
113
|
height: "".concat(position.top + position.height, "px")
|
|
135
114
|
}, isShow()), style);
|
|
136
115
|
}
|
|
137
|
-
|
|
138
116
|
return _objectSpread(_objectSpread({
|
|
139
117
|
height: "".concat(window.innerHeight - position.top, "px"),
|
|
140
118
|
top: 'auto'
|
|
141
119
|
}, isShow()), style);
|
|
142
120
|
};
|
|
143
|
-
|
|
144
121
|
return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
|
|
145
122
|
className: "placeholder-element ".concat(classNames({
|
|
146
123
|
up: direction === 'up'
|
|
@@ -159,12 +136,12 @@ var MenuItem = function MenuItem(props) {
|
|
|
159
136
|
parent.closeOnClickOverlay && parent.toggleItemShow(orderKey);
|
|
160
137
|
}
|
|
161
138
|
}), React__default.createElement("div", {
|
|
162
|
-
className:
|
|
163
|
-
style: _objectSpread(
|
|
139
|
+
className: direction === 'down' ? 'nut-menu-item__wrap' : 'nut-menu-item__wrap-up',
|
|
140
|
+
style: _objectSpread({}, isShow())
|
|
164
141
|
}, React__default.createElement(CSSTransition, {
|
|
165
142
|
"in": _showPopup,
|
|
166
143
|
timeout: 100,
|
|
167
|
-
classNames:
|
|
144
|
+
classNames: direction === 'down' ? 'menu-item' : 'menu-item-up'
|
|
168
145
|
}, React__default.createElement("div", {
|
|
169
146
|
className: "nut-menu-item__content"
|
|
170
147
|
}, options === null || options === void 0 ? void 0 : options.map(function (item, index) {
|
|
@@ -193,7 +170,6 @@ var MenuItem = function MenuItem(props) {
|
|
|
193
170
|
}, item.text));
|
|
194
171
|
}), children))));
|
|
195
172
|
};
|
|
196
|
-
|
|
197
173
|
MenuItem.defaultProps = defaultProps;
|
|
198
174
|
MenuItem.displayName = 'NutMenuItem';
|
|
199
175
|
export { MenuItem as default };
|