@nutui/nutui-react 1.2.0 → 1.2.1-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/dist/esm/AnimatingNumbers.js +9 -11
- package/dist/esm/BackTop.js +8 -6
- package/dist/esm/Checkbox.js +54 -8
- package/dist/esm/CheckboxGroup.js +26 -4
- package/dist/esm/Elevator.js +129 -36
- package/dist/esm/Icon.js +5 -3
- package/dist/esm/Input.js +252 -57
- package/dist/esm/NavBar/style/index.js +1 -1
- package/dist/esm/NavBar.js +89 -32
- package/dist/esm/Step.js +20 -3
- package/dist/esm/TabPane.js +3 -2
- package/dist/esm/Tabs.js +13 -3
- package/dist/esm/Video/style/index.js +2 -0
- package/dist/esm/Video.js +97 -0
- package/dist/esm/nutui-react.es.js +1 -0
- 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 +770 -321
- package/dist/nutui.react.umd.js +18 -18
- package/dist/packages/animatingnumbers/animatingnumbers.scss +0 -2
- package/dist/packages/animatingnumbers/countup.scss +10 -10
- package/dist/packages/backtop/backtop.scss +8 -0
- package/dist/packages/checkbox/checkbox.scss +21 -3
- package/dist/packages/col/col.scss +1 -1
- package/dist/packages/elevator/elevator.scss +71 -39
- package/dist/packages/input/input.scss +131 -3
- package/dist/packages/navbar/navbar.scss +114 -21
- package/dist/packages/price/price.scss +0 -1
- package/dist/packages/row/row.scss +14 -0
- package/dist/packages/tabpane/tabpane.scss +5 -0
- package/dist/packages/video/video.scss +18 -0
- package/dist/style.css +1 -1
- package/dist/style.es.js +1 -1
- package/dist/styles/themes/default.scss +1 -0
- package/dist/styles/variables.scss +94 -4
- package/dist/types/animatingnumbers/__tests__/animatingnumbers.spec.d.ts +1 -0
- package/dist/types/backtop/backtop.d.ts +4 -4
- package/dist/types/checkbox/checkbox.d.ts +4 -0
- package/dist/types/checkbox/demo.d.ts +1 -0
- package/dist/types/checkboxgroup/checkboxgroup.d.ts +1 -0
- package/dist/types/elevator/__tests__/elevator.spec.d.ts +1 -0
- package/dist/types/elevator/elevator.d.ts +6 -1
- package/dist/types/icon/icon.d.ts +1 -0
- package/dist/types/input/input.d.ts +42 -5
- package/dist/types/navbar/navbar.d.ts +9 -4
- package/dist/types/nutui.react.d.ts +2 -1
- package/dist/types/tabpane/tabpane.d.ts +1 -0
- package/dist/types/tabs/__test__/tabs.spec.d.ts +1 -0
- package/dist/types/tabs/tabs.d.ts +1 -0
- package/dist/types/video/__tests__/video.spec.d.ts +1 -0
- package/dist/types/video/demo.d.ts +4 -0
- package/dist/types/video/index.d.ts +2 -0
- package/dist/types/video/video.d.ts +21 -0
- package/package.json +3 -3
|
@@ -59,21 +59,19 @@ var CountUp = function CountUp(props) {
|
|
|
59
59
|
if (countupRef.current) {
|
|
60
60
|
var numberItems = countupRef.current.querySelectorAll('.nut-countup__number');
|
|
61
61
|
var numberFilterArr = numerArr.filter(function (item) {
|
|
62
|
-
return !isNaN(item);
|
|
62
|
+
return !Number.isNaN(Number(item));
|
|
63
63
|
});
|
|
64
|
+
Object.keys(numberItems).forEach(function (key) {
|
|
65
|
+
var elem = numberItems[Number(key)];
|
|
66
|
+
var idx = Number(numberFilterArr[Number(key)]);
|
|
64
67
|
|
|
65
|
-
|
|
66
|
-
if (!Object.prototype.hasOwnProperty.call(numberItems, index)) continue;
|
|
67
|
-
var elem = numberItems[Number(index)];
|
|
68
|
-
var idx = Number(numberFilterArr[Number(index)]);
|
|
69
|
-
|
|
70
|
-
if ((idx || idx == 0) && elem) {
|
|
68
|
+
if ((idx || idx === 0) && elem) {
|
|
71
69
|
// 计算规则:父元素和实际列表高度的百分比,分割成20等份
|
|
72
|
-
var transform = "translate(0, -".concat((idx
|
|
70
|
+
var transform = "translate(0, -".concat((idx === 0 ? 10 : idx) * 5, "%)");
|
|
73
71
|
elem.style.transform = transform;
|
|
74
72
|
elem.style.webkitTransform = transform;
|
|
75
73
|
}
|
|
76
|
-
}
|
|
74
|
+
});
|
|
77
75
|
}
|
|
78
76
|
};
|
|
79
77
|
|
|
@@ -99,10 +97,10 @@ var CountUp = function CountUp(props) {
|
|
|
99
97
|
}, numerArr.map(function (item, idx) {
|
|
100
98
|
return React__default.createElement("li", {
|
|
101
99
|
className: "".concat(b('listitem', {
|
|
102
|
-
number: !isNaN(item)
|
|
100
|
+
number: !Number.isNaN(Number(item))
|
|
103
101
|
})),
|
|
104
102
|
key: idx
|
|
105
|
-
}, !isNaN(item) ? React__default.createElement("span", {
|
|
103
|
+
}, !Number.isNaN(Number(item)) ? React__default.createElement("span", {
|
|
106
104
|
className: b('number'),
|
|
107
105
|
style: numberEaseStyle
|
|
108
106
|
}, [].concat(numbers, numbers).map(function (number, subidx) {
|
package/dist/esm/BackTop.js
CHANGED
|
@@ -10,7 +10,7 @@ import Icon from './Icon.js';
|
|
|
10
10
|
var defaultProps = {
|
|
11
11
|
bottom: 20,
|
|
12
12
|
right: 10,
|
|
13
|
-
elId: '',
|
|
13
|
+
elId: 'body',
|
|
14
14
|
distance: 200,
|
|
15
15
|
zIndex: 10,
|
|
16
16
|
isAnimation: true,
|
|
@@ -29,7 +29,7 @@ var BackTop = function BackTop(props) {
|
|
|
29
29
|
className = _defaultProps$props.className,
|
|
30
30
|
duration = _defaultProps$props.duration,
|
|
31
31
|
style = _defaultProps$props.style,
|
|
32
|
-
|
|
32
|
+
onClick = _defaultProps$props.onClick;
|
|
33
33
|
|
|
34
34
|
var _useState = useState(false),
|
|
35
35
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -87,12 +87,12 @@ var BackTop = function BackTop(props) {
|
|
|
87
87
|
|
|
88
88
|
var scrollAnimation = function scrollAnimation() {
|
|
89
89
|
var cid = requestAniFrame()(function fn() {
|
|
90
|
-
var t = duration - Math.max(0, startTime - +new Date() + duration);
|
|
90
|
+
var t = duration - Math.max(0, startTime - +new Date() + duration / 2);
|
|
91
91
|
var y = t * -scrollTop / duration + scrollTop;
|
|
92
92
|
scroll(y);
|
|
93
93
|
cid = requestAniFrame()(fn);
|
|
94
94
|
|
|
95
|
-
if (t
|
|
95
|
+
if (t === duration || y === 0) {
|
|
96
96
|
window.cancelAnimationFrame(cid);
|
|
97
97
|
}
|
|
98
98
|
});
|
|
@@ -127,7 +127,7 @@ var BackTop = function BackTop(props) {
|
|
|
127
127
|
|
|
128
128
|
|
|
129
129
|
var goTop = function goTop(e) {
|
|
130
|
-
|
|
130
|
+
onClick && onClick(e);
|
|
131
131
|
var otime = +new Date();
|
|
132
132
|
startTime = otime;
|
|
133
133
|
isAnimation && duration > 0 ? scrollAnimation() : scroll();
|
|
@@ -141,7 +141,9 @@ var BackTop = function BackTop(props) {
|
|
|
141
141
|
return React__default.createElement("div", {
|
|
142
142
|
className: "nut-backtop ".concat(backTop ? 'show' : '', " ").concat(className || ''),
|
|
143
143
|
style: _objectSpread(_objectSpread({}, backTopClass), style),
|
|
144
|
-
onClick:
|
|
144
|
+
onClick: function onClick(e) {
|
|
145
|
+
goTop(e);
|
|
146
|
+
}
|
|
145
147
|
}, children || React__default.createElement(Icon, {
|
|
146
148
|
size: "19px",
|
|
147
149
|
className: "nut-backtop-main",
|
package/dist/esm/Checkbox.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
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
|
-
var _excluded = ["iconName", "iconSize", "label", "className", "textPosition", "iconActiveName", "checked", "disabled", "onChange"];
|
|
4
|
+
var _excluded = ["iconName", "iconSize", "label", "className", "textPosition", "iconActiveName", "checked", "disabled", "onChange", "indeterminate", "iconClassPrefix", "iconFontClassName", "iconIndeterminateName", "getParentVals", "max"];
|
|
5
5
|
|
|
6
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; }
|
|
7
7
|
|
|
@@ -19,6 +19,9 @@ var defaultProps = {
|
|
|
19
19
|
iconSize: 18,
|
|
20
20
|
iconName: 'check-normal',
|
|
21
21
|
iconActiveName: 'checked',
|
|
22
|
+
iconClassPrefix: 'nut-icon',
|
|
23
|
+
iconFontClassName: 'nutui-iconfont',
|
|
24
|
+
iconIndeterminateName: 'check-disabled',
|
|
22
25
|
onChange: function onChange(state, label) {}
|
|
23
26
|
};
|
|
24
27
|
|
|
@@ -37,6 +40,12 @@ var Checkbox = function Checkbox(props) {
|
|
|
37
40
|
checked = props.checked,
|
|
38
41
|
disabled = props.disabled,
|
|
39
42
|
onChange = props.onChange,
|
|
43
|
+
indeterminate = props.indeterminate,
|
|
44
|
+
iconClassPrefix = props.iconClassPrefix,
|
|
45
|
+
iconFontClassName = props.iconFontClassName,
|
|
46
|
+
iconIndeterminateName = props.iconIndeterminateName,
|
|
47
|
+
getParentVals = props.getParentVals,
|
|
48
|
+
max = props.max,
|
|
40
49
|
rest = _objectWithoutProperties(props, _excluded);
|
|
41
50
|
|
|
42
51
|
var _useState = useState(checked),
|
|
@@ -49,21 +58,55 @@ var Checkbox = function Checkbox(props) {
|
|
|
49
58
|
innerDisabled = _useState4[0],
|
|
50
59
|
setDisabled = _useState4[1];
|
|
51
60
|
|
|
61
|
+
var _useState5 = useState(indeterminate),
|
|
62
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
63
|
+
_indeterminate = _useState6[0],
|
|
64
|
+
setIndeterminate = _useState6[1];
|
|
65
|
+
|
|
52
66
|
useEffect(function () {
|
|
53
67
|
setInnerChecked(checked);
|
|
54
68
|
setDisabled(disabled);
|
|
55
69
|
}, [disabled, checked]);
|
|
70
|
+
useEffect(function () {
|
|
71
|
+
setIndeterminate(indeterminate);
|
|
72
|
+
}, [indeterminate]);
|
|
73
|
+
|
|
74
|
+
var getIconName = function getIconName() {
|
|
75
|
+
if (!innerChecked) {
|
|
76
|
+
return iconName;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
if (_indeterminate) {
|
|
80
|
+
return iconIndeterminateName;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
return iconActiveName;
|
|
84
|
+
};
|
|
56
85
|
|
|
57
86
|
var renderIcon = function renderIcon() {
|
|
58
87
|
return React__default.createElement(Icon, {
|
|
59
|
-
name:
|
|
88
|
+
name: getIconName(),
|
|
60
89
|
size: iconSize,
|
|
61
|
-
|
|
90
|
+
className: color(),
|
|
91
|
+
classPrefix: iconClassPrefix,
|
|
92
|
+
fontClassName: iconFontClassName
|
|
62
93
|
});
|
|
63
94
|
};
|
|
64
95
|
|
|
65
96
|
var color = function color() {
|
|
66
|
-
|
|
97
|
+
if (innerDisabled) {
|
|
98
|
+
return 'nut-checkbox__icon--disable';
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
if (innerChecked) {
|
|
102
|
+
if (_indeterminate) {
|
|
103
|
+
return 'nut-checkbox__icon--indeterminate';
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
return 'nut-checkbox__icon';
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
return 'nut-checkbox__icon--unchecked'; // return !innerDisabled ? (!innerChecked ? '#d6d6d6' : '#fa2c19') : '#f5f5f5'
|
|
67
110
|
};
|
|
68
111
|
|
|
69
112
|
var renderLabel = function renderLabel() {
|
|
@@ -71,13 +114,16 @@ var Checkbox = function Checkbox(props) {
|
|
|
71
114
|
className: "".concat(b('label', {
|
|
72
115
|
disabled: innerDisabled
|
|
73
116
|
}), " ")
|
|
74
|
-
},
|
|
117
|
+
}, children || label);
|
|
75
118
|
};
|
|
76
119
|
|
|
77
120
|
var handleClick = function handleClick() {
|
|
78
|
-
if (disabled)
|
|
79
|
-
|
|
80
|
-
|
|
121
|
+
if (!disabled) {
|
|
122
|
+
var latest = !innerChecked;
|
|
123
|
+
if (max !== undefined && latest && getParentVals().length >= max) return;
|
|
124
|
+
onChange && onChange(latest, label || children);
|
|
125
|
+
setInnerChecked(latest);
|
|
126
|
+
}
|
|
81
127
|
};
|
|
82
128
|
|
|
83
129
|
return React__default.createElement("div", _objectSpread(_objectSpread({
|
|
@@ -2,7 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
|
2
2
|
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
|
-
var _excluded = ["className", "disabled", "onChange", "checkedValue"];
|
|
5
|
+
var _excluded = ["className", "disabled", "onChange", "checkedValue", "max"];
|
|
6
6
|
|
|
7
7
|
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
8
|
|
|
@@ -14,6 +14,7 @@ import '@bem-react/classname';
|
|
|
14
14
|
var defaultProps = {
|
|
15
15
|
disabled: false,
|
|
16
16
|
checkedValue: [],
|
|
17
|
+
max: undefined,
|
|
17
18
|
onChange: function onChange(value) {}
|
|
18
19
|
};
|
|
19
20
|
var CheckboxGroup = React__default.forwardRef(function (props, ref) {
|
|
@@ -26,6 +27,7 @@ var CheckboxGroup = React__default.forwardRef(function (props, ref) {
|
|
|
26
27
|
disabled = props.disabled,
|
|
27
28
|
onChange = props.onChange,
|
|
28
29
|
checkedValue = props.checkedValue,
|
|
30
|
+
max = props.max,
|
|
29
31
|
rest = _objectWithoutProperties(props, _excluded);
|
|
30
32
|
|
|
31
33
|
var _useState = useState(disabled),
|
|
@@ -41,18 +43,30 @@ var CheckboxGroup = React__default.forwardRef(function (props, ref) {
|
|
|
41
43
|
useImperativeHandle(ref, function () {
|
|
42
44
|
return {
|
|
43
45
|
toggleAll: function toggleAll(state) {
|
|
44
|
-
console.log(state);
|
|
45
|
-
|
|
46
46
|
if (state === false) {
|
|
47
47
|
setInnerValue([]);
|
|
48
48
|
} else {
|
|
49
49
|
var childrenLabel = [];
|
|
50
50
|
React__default.Children.map(children, function (child) {
|
|
51
51
|
var childProps = child.props;
|
|
52
|
+
console.log(child);
|
|
52
53
|
childrenLabel.push(childProps.label || child.children);
|
|
53
54
|
});
|
|
54
55
|
setInnerValue(childrenLabel);
|
|
55
56
|
}
|
|
57
|
+
},
|
|
58
|
+
toggleReverse: function toggleReverse() {
|
|
59
|
+
var childrenLabel = [];
|
|
60
|
+
React__default.Children.map(children, function (child) {
|
|
61
|
+
var childProps = child.props;
|
|
62
|
+
childrenLabel.push(childProps.label || child.children);
|
|
63
|
+
});
|
|
64
|
+
var reverse = childrenLabel.filter(function (c) {
|
|
65
|
+
return (innerValue === null || innerValue === void 0 ? void 0 : innerValue.findIndex(function (v) {
|
|
66
|
+
return v === c;
|
|
67
|
+
})) === -1;
|
|
68
|
+
});
|
|
69
|
+
setInnerValue(reverse);
|
|
56
70
|
}
|
|
57
71
|
};
|
|
58
72
|
});
|
|
@@ -62,6 +76,8 @@ var CheckboxGroup = React__default.forwardRef(function (props, ref) {
|
|
|
62
76
|
}, [disabled, checkedValue]);
|
|
63
77
|
|
|
64
78
|
function handleChildChange(state, label) {
|
|
79
|
+
if (max !== undefined && innerValue && innerValue.length > max) return;
|
|
80
|
+
|
|
65
81
|
if (innerValue) {
|
|
66
82
|
var clippedValue = [];
|
|
67
83
|
|
|
@@ -82,6 +98,10 @@ var CheckboxGroup = React__default.forwardRef(function (props, ref) {
|
|
|
82
98
|
return (innerValue === null || innerValue === void 0 ? void 0 : innerValue.indexOf(child.props.label || child.children)) > -1;
|
|
83
99
|
}
|
|
84
100
|
|
|
101
|
+
function getParentVals() {
|
|
102
|
+
return innerValue;
|
|
103
|
+
}
|
|
104
|
+
|
|
85
105
|
function cloneChildren() {
|
|
86
106
|
return React__default.Children.map(children, function (child) {
|
|
87
107
|
var childChecked = validateChildChecked(child);
|
|
@@ -93,7 +113,9 @@ var CheckboxGroup = React__default.forwardRef(function (props, ref) {
|
|
|
93
113
|
return React__default.cloneElement(child, {
|
|
94
114
|
disabled: innerDisabled,
|
|
95
115
|
checked: childChecked,
|
|
96
|
-
onChange: handleChildChange
|
|
116
|
+
onChange: handleChildChange,
|
|
117
|
+
getParentVals: getParentVals,
|
|
118
|
+
max: max
|
|
97
119
|
});
|
|
98
120
|
});
|
|
99
121
|
}
|
package/dist/esm/Elevator.js
CHANGED
|
@@ -1,19 +1,23 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
4
|
-
var _excluded = ["height", "acceptKey", "indexList", "className", "clickItem", "clickIndex"];
|
|
4
|
+
var _excluded = ["height", "acceptKey", "indexList", "isSticky", "spaceHeight", "titleHeight", "className", "clickItem", "clickIndex", "children"];
|
|
5
5
|
|
|
6
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; }
|
|
7
7
|
|
|
8
8
|
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
9
|
|
|
10
|
-
import React__default, { useRef, useState, useEffect } from 'react';
|
|
10
|
+
import React__default, { createContext, useRef, useState, useEffect } from 'react';
|
|
11
11
|
import { c as cn } from './bem-893ad28d.js';
|
|
12
12
|
import '@bem-react/classname';
|
|
13
|
+
var elevatorContext = createContext({});
|
|
13
14
|
var defaultProps = {
|
|
14
15
|
height: '200px',
|
|
15
16
|
acceptKey: 'title',
|
|
16
17
|
indexList: [],
|
|
18
|
+
isSticky: false,
|
|
19
|
+
spaceHeight: 23,
|
|
20
|
+
titleHeight: 35,
|
|
17
21
|
className: ''
|
|
18
22
|
};
|
|
19
23
|
|
|
@@ -22,18 +26,24 @@ var Elevator = function Elevator(props) {
|
|
|
22
26
|
height = _defaultProps$props.height,
|
|
23
27
|
acceptKey = _defaultProps$props.acceptKey,
|
|
24
28
|
indexList = _defaultProps$props.indexList,
|
|
29
|
+
isSticky = _defaultProps$props.isSticky,
|
|
30
|
+
spaceHeight = _defaultProps$props.spaceHeight,
|
|
31
|
+
titleHeight = _defaultProps$props.titleHeight,
|
|
25
32
|
className = _defaultProps$props.className,
|
|
26
33
|
clickItem = _defaultProps$props.clickItem,
|
|
27
34
|
clickIndex = _defaultProps$props.clickIndex,
|
|
35
|
+
children = _defaultProps$props.children,
|
|
28
36
|
rest = _objectWithoutProperties(_defaultProps$props, _excluded);
|
|
29
37
|
|
|
30
38
|
var b = cn('elevator');
|
|
31
|
-
var spaceHeight = 23;
|
|
32
39
|
var listview = useRef(null);
|
|
33
40
|
var initData = {
|
|
34
41
|
anchorIndex: 0,
|
|
35
42
|
listHeight: [],
|
|
36
|
-
listGroup: []
|
|
43
|
+
listGroup: [],
|
|
44
|
+
scrollY: 0,
|
|
45
|
+
diff: -1,
|
|
46
|
+
fixedTop: 0
|
|
37
47
|
};
|
|
38
48
|
var touchState = useRef({
|
|
39
49
|
y1: 0,
|
|
@@ -42,24 +52,42 @@ var Elevator = function Elevator(props) {
|
|
|
42
52
|
|
|
43
53
|
var _useState = useState(0),
|
|
44
54
|
_useState2 = _slicedToArray(_useState, 2),
|
|
45
|
-
|
|
46
|
-
|
|
55
|
+
scrollY = _useState2[0],
|
|
56
|
+
setScrollY = _useState2[1];
|
|
47
57
|
|
|
48
|
-
var _useState3 = useState(
|
|
58
|
+
var _useState3 = useState({}),
|
|
49
59
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
50
|
-
|
|
51
|
-
|
|
60
|
+
currentData = _useState4[0],
|
|
61
|
+
setCurrentData = _useState4[1];
|
|
62
|
+
|
|
63
|
+
var _useState5 = useState(''),
|
|
64
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
65
|
+
currentKey = _useState6[0],
|
|
66
|
+
setCurrentKey = _useState6[1];
|
|
67
|
+
|
|
68
|
+
var _useState7 = useState(0),
|
|
69
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
70
|
+
currentIndex = _useState8[0],
|
|
71
|
+
setCurrentIndex = _useState8[1];
|
|
72
|
+
|
|
73
|
+
var _useState9 = useState(0),
|
|
74
|
+
_useState10 = _slicedToArray(_useState9, 2),
|
|
75
|
+
codeIndex = _useState10[0],
|
|
76
|
+
setCodeIndex = _useState10[1];
|
|
77
|
+
|
|
78
|
+
var _useState11 = useState(false),
|
|
79
|
+
_useState12 = _slicedToArray(_useState11, 2),
|
|
80
|
+
scrollStart = _useState12[0],
|
|
81
|
+
setScrollStart = _useState12[1];
|
|
52
82
|
|
|
53
83
|
var state = useRef(initData); // 重置滚动参数
|
|
54
84
|
|
|
55
85
|
var resetScrollState = function resetScrollState() {
|
|
56
|
-
state.current.anchorIndex = 0;
|
|
57
|
-
setCurrentIndex(0);
|
|
58
86
|
setScrollStart(false);
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
var clientHeight = function clientHeight() {
|
|
90
|
+
return listview.current ? listview.current.clientHeight : 0;
|
|
63
91
|
};
|
|
64
92
|
|
|
65
93
|
var getData = function getData(el, name) {
|
|
@@ -87,21 +115,29 @@ var Elevator = function Elevator(props) {
|
|
|
87
115
|
calculateHeight();
|
|
88
116
|
}
|
|
89
117
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
118
|
+
var cacheIndex = index;
|
|
119
|
+
|
|
120
|
+
if (index < 0) {
|
|
121
|
+
cacheIndex = 0;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
if (index > state.current.listHeight.length - 2) {
|
|
125
|
+
cacheIndex = state.current.listHeight.length - 2;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
setCodeIndex(cacheIndex);
|
|
93
129
|
|
|
94
130
|
if (listview.current) {
|
|
95
|
-
listview.current.scrollTo(0, state.current.listHeight[
|
|
131
|
+
listview.current.scrollTo(0, state.current.listHeight[cacheIndex]);
|
|
96
132
|
}
|
|
97
133
|
};
|
|
98
134
|
|
|
99
135
|
var touchMove = function touchMove(e) {
|
|
100
136
|
var firstTouch = e.touches[0];
|
|
101
137
|
touchState.current.y2 = firstTouch.pageY;
|
|
102
|
-
var delta = (touchState.current.y2 - touchState.current.y1) / spaceHeight
|
|
138
|
+
var delta = (touchState.current.y2 - touchState.current.y1) / spaceHeight || 0;
|
|
103
139
|
var cacheIndex = state.current.anchorIndex + delta;
|
|
104
|
-
|
|
140
|
+
setCodeIndex(cacheIndex);
|
|
105
141
|
scrollTo(cacheIndex);
|
|
106
142
|
};
|
|
107
143
|
|
|
@@ -115,8 +151,8 @@ var Elevator = function Elevator(props) {
|
|
|
115
151
|
var firstTouch = e.touches[0];
|
|
116
152
|
touchState.current.y1 = firstTouch.pageY;
|
|
117
153
|
state.current.anchorIndex = +index;
|
|
118
|
-
|
|
119
|
-
return
|
|
154
|
+
setCodeIndex(function (codeIndex) {
|
|
155
|
+
return codeIndex + index;
|
|
120
156
|
});
|
|
121
157
|
scrollTo(index);
|
|
122
158
|
var target = e.currentTarget;
|
|
@@ -126,6 +162,8 @@ var Elevator = function Elevator(props) {
|
|
|
126
162
|
|
|
127
163
|
var handleClickItem = function handleClickItem(key, item) {
|
|
128
164
|
clickItem && clickItem(key, item);
|
|
165
|
+
setCurrentData(item);
|
|
166
|
+
setCurrentKey(key);
|
|
129
167
|
};
|
|
130
168
|
|
|
131
169
|
var handleClickIndex = function handleClickIndex(key) {
|
|
@@ -143,39 +181,92 @@ var Elevator = function Elevator(props) {
|
|
|
143
181
|
}
|
|
144
182
|
};
|
|
145
183
|
|
|
184
|
+
var listViewScroll = function listViewScroll(e) {
|
|
185
|
+
var listHeight = state.current.listHeight;
|
|
186
|
+
|
|
187
|
+
if (!listHeight.length) {
|
|
188
|
+
calculateHeight();
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
var target = e.target;
|
|
192
|
+
var scrollTop = target.scrollTop;
|
|
193
|
+
state.current.scrollY = scrollTop;
|
|
194
|
+
setScrollY(scrollTop);
|
|
195
|
+
|
|
196
|
+
for (var i = 0; i < listHeight.length - 1; i++) {
|
|
197
|
+
var height1 = listHeight[i];
|
|
198
|
+
var height2 = listHeight[i + 1];
|
|
199
|
+
|
|
200
|
+
if (state.current.scrollY >= height1 && state.current.scrollY < height2) {
|
|
201
|
+
setCurrentIndex(i);
|
|
202
|
+
state.current.diff = height2 - state.current.scrollY;
|
|
203
|
+
return;
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
setCurrentIndex(listHeight.length - 2);
|
|
208
|
+
};
|
|
209
|
+
|
|
146
210
|
useEffect(function () {
|
|
147
211
|
if (listview.current) {
|
|
148
212
|
setListGroup();
|
|
213
|
+
listview.current.addEventListener('scroll', listViewScroll);
|
|
149
214
|
}
|
|
150
|
-
}, [listview
|
|
215
|
+
}, [listview]);
|
|
216
|
+
useEffect(function () {
|
|
217
|
+
var _state$current = state.current,
|
|
218
|
+
listHeight = _state$current.listHeight,
|
|
219
|
+
diff = _state$current.diff,
|
|
220
|
+
scrollY = _state$current.scrollY;
|
|
221
|
+
var fixedTop = diff > 0 && diff < titleHeight ? diff - titleHeight : 0;
|
|
222
|
+
|
|
223
|
+
if (scrollY + clientHeight() === listHeight[listHeight.length - 1]) {
|
|
224
|
+
if (fixedTop !== 0) {
|
|
225
|
+
fixedTop = 0;
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
if (state.current.fixedTop === fixedTop) return;
|
|
230
|
+
state.current.fixedTop = fixedTop;
|
|
231
|
+
}, [state.current.diff, titleHeight]);
|
|
151
232
|
return React__default.createElement("div", _objectSpread({
|
|
152
233
|
className: "".concat(b(), " ").concat(className)
|
|
153
|
-
}, rest), React__default.createElement("div", {
|
|
234
|
+
}, rest), isSticky && scrollY > 0 ? React__default.createElement("div", {
|
|
235
|
+
className: b('list__fixed')
|
|
236
|
+
}, React__default.createElement("span", {
|
|
237
|
+
className: "fixed-title"
|
|
238
|
+
}, indexList[currentIndex][acceptKey])) : null, React__default.createElement("div", {
|
|
154
239
|
className: b('list'),
|
|
155
|
-
ref: listview,
|
|
156
240
|
style: {
|
|
157
|
-
height: isNaN(+height) ? height : "".concat(height, "px")
|
|
241
|
+
height: Number.isNaN(+height) ? height : "".concat(height, "px")
|
|
158
242
|
}
|
|
159
|
-
},
|
|
243
|
+
}, React__default.createElement("div", {
|
|
244
|
+
className: b('list__inner'),
|
|
245
|
+
ref: listview
|
|
246
|
+
}, indexList.map(function (item, idx) {
|
|
160
247
|
return React__default.createElement("div", {
|
|
161
248
|
className: b('list__item'),
|
|
162
|
-
key:
|
|
249
|
+
key: idx
|
|
163
250
|
}, React__default.createElement("div", {
|
|
164
251
|
className: b('list__item__code')
|
|
165
252
|
}, item[acceptKey]), React__default.createElement(React__default.Fragment, null, item.list.map(function (subitem) {
|
|
166
253
|
return React__default.createElement("div", {
|
|
167
|
-
className: b('list__item__name'
|
|
254
|
+
className: b('list__item__name', {
|
|
255
|
+
highcolor: currentData.id === subitem.id && currentKey === item[acceptKey]
|
|
256
|
+
}),
|
|
168
257
|
key: subitem.id,
|
|
169
258
|
onClick: function onClick() {
|
|
170
259
|
return handleClickItem(item[acceptKey], subitem);
|
|
171
260
|
}
|
|
172
|
-
},
|
|
261
|
+
}, children ? React__default.createElement(React__default.Fragment, null, React__default.createElement(elevatorContext.Provider, {
|
|
262
|
+
value: subitem
|
|
263
|
+
}, children)) : subitem.name);
|
|
173
264
|
})));
|
|
174
|
-
})), indexList.length && scrollStart ? React__default.createElement("div", {
|
|
175
|
-
className: b('code', {
|
|
265
|
+
}))), indexList.length && scrollStart ? React__default.createElement("div", {
|
|
266
|
+
className: b('code--current', {
|
|
176
267
|
current: true
|
|
177
268
|
})
|
|
178
|
-
},
|
|
269
|
+
}, indexList[codeIndex][acceptKey]) : null, React__default.createElement("div", {
|
|
179
270
|
className: b('bars'),
|
|
180
271
|
onTouchStart: function onTouchStart(event) {
|
|
181
272
|
return touchStart(event);
|
|
@@ -187,9 +278,11 @@ var Elevator = function Elevator(props) {
|
|
|
187
278
|
className: b('bars__inner')
|
|
188
279
|
}, indexList.map(function (item, index) {
|
|
189
280
|
return React__default.createElement("div", {
|
|
190
|
-
className: b('bars__inner__item'
|
|
281
|
+
className: b('bars__inner__item', {
|
|
282
|
+
active: item[acceptKey] === indexList[currentIndex][acceptKey]
|
|
283
|
+
}),
|
|
191
284
|
"data-index": index,
|
|
192
|
-
key:
|
|
285
|
+
key: index,
|
|
193
286
|
onClick: function onClick() {
|
|
194
287
|
return handleClickIndex(item[acceptKey]);
|
|
195
288
|
}
|
package/dist/esm/Icon.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
-
var _excluded = ["name", "size", "classPrefix", "color", "tag", "children", "className", "style", "click"];
|
|
3
|
+
var _excluded = ["name", "size", "classPrefix", "color", "tag", "children", "className", "fontClassName", "style", "click"];
|
|
4
4
|
|
|
5
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; }
|
|
6
6
|
|
|
@@ -12,7 +12,8 @@ import '@bem-react/classname';
|
|
|
12
12
|
var defaultProps = {
|
|
13
13
|
name: '',
|
|
14
14
|
size: '',
|
|
15
|
-
classPrefix: 'nutui-
|
|
15
|
+
classPrefix: 'nutui-icon',
|
|
16
|
+
fontClassName: 'nutui-iconfont',
|
|
16
17
|
color: '',
|
|
17
18
|
tag: 'i',
|
|
18
19
|
click: function click(e) {},
|
|
@@ -32,6 +33,7 @@ var Icon = function Icon(props) {
|
|
|
32
33
|
tag = _defaultProps$props.tag,
|
|
33
34
|
children = _defaultProps$props.children,
|
|
34
35
|
className = _defaultProps$props.className,
|
|
36
|
+
fontClassName = _defaultProps$props.fontClassName,
|
|
35
37
|
style = _defaultProps$props.style,
|
|
36
38
|
click = _defaultProps$props.click,
|
|
37
39
|
rest = _objectWithoutProperties(_defaultProps$props, _excluded);
|
|
@@ -54,7 +56,7 @@ var Icon = function Icon(props) {
|
|
|
54
56
|
};
|
|
55
57
|
|
|
56
58
|
return React__default.createElement(type, _objectSpread(_objectSpread({
|
|
57
|
-
className: isImage ? "".concat(className || '', " ").concat(b('img')) : "".concat(className || '', " ").concat(b(null, [classPrefix]), " nut-icon-").concat(name, " "),
|
|
59
|
+
className: isImage ? "".concat(className || '', " ").concat(b('img')) : "".concat(className || '', " ").concat(fontClassName, " ").concat(b(null, [classPrefix]), " nut-icon-").concat(name, " "),
|
|
58
60
|
style: _objectSpread({
|
|
59
61
|
color: color,
|
|
60
62
|
fontSize: pxCheck(size),
|