@nutui/nutui-react-taro 1.5.2 → 1.5.3-beta.1
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 -1
- package/dist/esm/ActionSheet.js +14 -90
- package/dist/esm/Address.js +21 -620
- package/dist/esm/Animate.js +7 -53
- package/dist/esm/AnimatingNumbers.js +7 -125
- package/dist/esm/Audio.js +19 -264
- package/dist/esm/Avatar.js +11 -130
- package/dist/esm/{AvatarContext-15733596.js → AvatarContext-c96afdcc.js} +3 -1
- package/dist/esm/AvatarGroup.js +11 -41
- package/dist/esm/BackTop.js +10 -138
- package/dist/esm/Badge.js +9 -71
- package/dist/esm/Barrage.js +8 -97
- package/dist/esm/Button.js +9 -108
- package/dist/esm/Calendar.js +20 -128
- package/dist/esm/CalendarItem.js +12 -674
- package/dist/esm/Card.js +11 -61
- package/dist/esm/Cascader.js +16 -671
- package/dist/esm/Cell.js +9 -101
- package/dist/esm/CellGroup.js +5 -2
- package/dist/esm/Checkbox.js +7 -5
- package/dist/esm/CheckboxGroup.js +8 -111
- package/dist/esm/CircleProgress.js +8 -114
- package/dist/esm/Col.js +7 -57
- package/dist/esm/Collapse.js +7 -97
- package/dist/esm/CollapseItem.js +8 -146
- package/dist/esm/ConfigProvider.js +8 -187
- package/dist/esm/CountDown.js +9 -247
- package/dist/esm/DatePicker.js +25 -309
- package/dist/esm/Dialog.js +17 -296
- package/dist/esm/Divider.js +7 -34
- package/dist/esm/Drag.js +7 -118
- package/dist/esm/Elevator.js +8 -234
- package/dist/esm/Ellipsis.js +10 -176
- package/dist/esm/Empty.js +8 -79
- package/dist/esm/FixedNav.js +14 -103
- package/dist/esm/Form.js +10 -215
- package/dist/esm/FormItem.js +10 -3
- package/dist/esm/Grid.js +11 -81
- package/dist/esm/GridItem.js +13 -123
- package/dist/esm/Icon.js +5 -2
- package/dist/esm/Image.js +11 -169
- package/dist/esm/ImagePreview.js +19 -225
- package/dist/esm/Indicator.js +7 -50
- package/dist/esm/Infiniteloading.js +14 -215
- package/dist/esm/Input.js +12 -362
- package/dist/esm/InputNumber.js +9 -275
- package/dist/esm/Layout.js +5 -13
- package/dist/esm/Menu.js +10 -153
- package/dist/esm/MenuItem.js +15 -175
- package/dist/esm/NavBar.js +9 -114
- package/dist/esm/NoticeBar.js +10 -568
- package/dist/esm/Notify.js +8 -234
- package/dist/esm/NumberKeyboard.js +17 -247
- package/dist/esm/Overlay.js +6 -2
- package/dist/esm/Pagination.js +9 -168
- package/dist/esm/Picker.js +22 -494
- package/dist/esm/Popover.js +12 -223
- package/dist/esm/Popup.js +13 -193
- package/dist/esm/Price.js +6 -84
- package/dist/esm/Progress.js +9 -122
- package/dist/esm/PullToRefresh.js +13 -276
- package/dist/esm/Radio.js +8 -4
- package/dist/esm/RadioGroup.js +7 -120
- package/dist/esm/Range.js +15 -406
- package/dist/esm/Rate.js +9 -121
- package/dist/esm/Row.js +7 -49
- package/dist/esm/SearchBar.js +12 -235
- package/dist/esm/ShortPassword.js +17 -191
- package/dist/esm/SideNavBar.js +19 -57
- package/dist/esm/SideNavBarItem.js +5 -24
- package/dist/esm/Signature.js +13 -153
- package/dist/esm/Skeleton.js +12 -98
- package/dist/esm/Step.js +10 -87
- package/dist/esm/Steps.js +8 -38
- package/dist/esm/Sticky.js +11 -190
- package/dist/esm/SubSideNavBar.js +6 -78
- package/dist/esm/Swipe.js +10 -230
- package/dist/esm/Swiper.js +9 -490
- package/dist/esm/SwiperItem.js +8 -36
- package/dist/esm/Switch.js +6 -71
- package/dist/esm/TabPane.js +5 -2
- package/dist/esm/Tabbar.js +6 -68
- package/dist/esm/TabbarItem.js +9 -78
- package/dist/esm/Table.js +12 -140
- package/dist/esm/Tabs.js +8 -5
- package/dist/esm/Tag.js +10 -110
- package/dist/esm/TextArea.js +9 -148
- package/dist/esm/TimeDetail.js +9 -67
- package/dist/esm/TimePannel.js +9 -29
- package/dist/esm/TimeSelect.js +19 -171
- package/dist/esm/Toast.js +7 -268
- package/dist/esm/TrendArrow.js +7 -99
- package/dist/esm/Uploader.js +17 -566
- package/dist/esm/{UserContext-101ad4a4.js → UserContext-0aac9a82.js} +3 -1
- package/dist/esm/{UserContext-2629d479.js → UserContext-e402e1a6.js} +3 -1
- package/dist/esm/{UserContext-b33bcf21.js → UserContext-e8176108.js} +3 -1
- package/dist/esm/Video.js +7 -90
- package/dist/esm/VirtualList.js +9 -313
- package/dist/esm/WaterMark.js +11 -111
- package/dist/esm/actionsheet.taro-e6a51446.js +53 -0
- package/dist/esm/address.taro-3a9b6396.js +461 -0
- package/dist/esm/animate.taro-fb7986d6.js +40 -0
- package/dist/esm/animatingnumbers.taro-03e5d61d.js +104 -0
- package/dist/esm/audio.taro-87ec8bf2.js +161 -0
- package/dist/esm/avatar.taro-3676f38f.js +103 -0
- package/dist/esm/avatargroup-f3574510.js +34 -0
- package/dist/esm/backtop.taro-66394a36.js +48 -0
- package/dist/esm/badge.taro-a4e59c11.js +52 -0
- package/dist/esm/barrage.taro-0495a1b2.js +94 -0
- package/dist/esm/{bem-3b438e61.js → bem-350c1702.js} +3 -6
- package/dist/esm/button.taro-9244d065.js +100 -0
- package/dist/esm/calendar.taro-670842ea.js +65 -0
- package/dist/esm/calendaritem.taro-2a603571.js +787 -0
- package/dist/esm/can-use-dom-3eeb5af4.js +6 -0
- package/dist/esm/card.taro-e4c76dad.js +33 -0
- package/dist/esm/cascader.taro-a5553aa5.js +437 -0
- package/dist/esm/cell.taro-a10a74d3.js +64 -0
- package/dist/esm/cellgroup.taro-abe501bc.js +25 -0
- package/dist/esm/checkbox.taro-6120e3e3.js +171 -0
- package/dist/esm/circleprogress.taro-79854448.js +109 -0
- package/dist/esm/col.taro-53eed3cc.js +41 -0
- package/dist/esm/collapse.taro-1a9e4ba2.js +83 -0
- package/dist/esm/collapseitem-4d0bc55d.js +83 -0
- package/dist/esm/configprovider-67d19d3a.js +19 -0
- package/dist/esm/configprovider.taro-8d71eb49.js +42 -0
- package/dist/esm/countdown.taro-5b17c607.js +226 -0
- package/dist/esm/datepicker.taro-477ad357.js +275 -0
- package/dist/esm/dialog.taro-a3267d29.js +118 -0
- package/dist/esm/divider.taro-26d1d8b4.js +35 -0
- package/dist/esm/drag.taro-79bb8744.js +110 -0
- package/dist/esm/elevator.taro-6019669e.js +178 -0
- package/dist/esm/ellipsis.taro-f15f26da.js +241 -0
- package/dist/esm/empty.taro-04ae4389.js +62 -0
- package/dist/esm/fixednav.taro-1f05acaf.js +53 -0
- package/dist/esm/form.taro-0b399b30.js +178 -0
- package/dist/esm/formitem.taro-190a3326.js +89 -0
- package/dist/esm/get-scroll-parent-b4a07e65.js +25 -0
- package/dist/esm/grid.taro-3503b82c.js +61 -0
- package/dist/esm/{grid.context-2ee27d95.js → grid.taro.context-c2bbfb4f.js} +4 -2
- package/dist/esm/griditem.taro-cdb3f119.js +98 -0
- package/dist/esm/icon-296a1bec.js +63 -0
- package/dist/esm/icon.taro-296a1bec.js +63 -0
- package/dist/esm/image.taro-142cf512.js +64 -0
- package/dist/esm/imagepreview.taro-c50bb0a3.js +167 -0
- package/dist/esm/index-5bcb0ff8.js +7 -0
- package/dist/esm/indicator.taro-cba8b010.js +37 -0
- package/dist/esm/infiniteloading.taro-183bccbf.js +144 -0
- package/dist/esm/input.taro-97af6c96.js +240 -0
- package/dist/esm/inputnumber.taro-91f65d17.js +130 -0
- package/dist/esm/layout.taro-9046d093.js +11 -0
- package/dist/esm/menu.taro-7e4038a1.js +99 -0
- package/dist/esm/menuitem.taro-96cc4f15.js +130 -0
- package/dist/esm/navbar.taro-777c4705.js +79 -0
- package/dist/esm/noticebar.taro-4a23cdee.js +448 -0
- package/dist/esm/notify.taro-e17c6f82.js +75 -0
- package/dist/esm/numberkeyboard.taro-1bc24744.js +159 -0
- package/dist/esm/nutui-react.es.js +119 -94
- package/dist/esm/offsetContext-c2a746fa.js +5 -0
- package/dist/esm/overlay.taro-21e87fb1.js +69 -0
- package/dist/esm/pagination.taro-715a173b.js +124 -0
- package/dist/esm/picker.taro-0073eeaa.js +472 -0
- package/dist/esm/popover.taro-ad5e76ea.js +156 -0
- package/dist/esm/popup.taro-01676bff.js +137 -0
- package/dist/esm/price.taro-776ed16e.js +83 -0
- package/dist/esm/progress.taro-f0ce38e9.js +90 -0
- package/dist/esm/pulltorefresh.taro-a294f656.js +181 -0
- package/dist/esm/radio.taro-a6eff96c.js +168 -0
- package/dist/esm/range.taro-d8fc7656.js +332 -0
- package/dist/esm/rate.taro-6cdf03bd.js +75 -0
- package/dist/esm/row.taro-f64d4a13.js +46 -0
- package/dist/esm/searchbar.taro-0c25927b.js +152 -0
- package/dist/esm/shortpassword.taro-9ee034f7.js +111 -0
- package/dist/esm/sidenavbar.taro-c307b35e.js +35 -0
- package/dist/esm/sidenavbaritem.taro-5a7965d0.js +12 -0
- package/dist/esm/signature.taro-ec4e713b.js +143 -0
- package/dist/esm/skeleton.taro-76faf63f.js +62 -0
- package/dist/esm/step.taro-b7903e8c.js +59 -0
- package/dist/esm/steps.taro-c82d2252.js +30 -0
- package/dist/esm/sticky.taro-218bda37.js +138 -0
- package/dist/esm/subsidenavbar.taro-69cb9752.js +63 -0
- package/dist/esm/supports-passive-c85ef996.js +18 -0
- package/dist/esm/swipe.taro-ea35f07f.js +177 -0
- package/dist/esm/swiper.taro-7a94e211.js +451 -0
- package/dist/esm/swiperitem-c9e3d0d5.js +29 -0
- package/dist/esm/switch.taro-34ca8228.js +50 -0
- package/dist/esm/tabbar.taro-9acfc2fa.js +59 -0
- package/dist/esm/tabbaritem.taro-bf517487.js +58 -0
- package/dist/esm/table.taro-91fc0c01.js +93 -0
- package/dist/esm/tabpane.taro-4ca340ef.js +23 -0
- package/dist/esm/tabs.taro-6a7524a4.js +140 -0
- package/dist/esm/tag.taro-23ba0834.js +92 -0
- package/dist/esm/textarea.taro-442e7350.js +94 -0
- package/dist/esm/timedetail.taro-5b2f2269.js +44 -0
- package/dist/esm/timepannel.taro-d6e40180.js +22 -0
- package/dist/esm/timeselect.taro-a07036f4.js +133 -0
- package/dist/esm/toast.taro-d6c14811.js +109 -0
- package/dist/esm/trendarrow.taro-b8c5ccd9.js +73 -0
- package/dist/esm/typings-b9828dba.js +9 -0
- package/dist/esm/uploader.taro-587e6bf3.js +492 -0
- package/dist/esm/useClientRect-1f8ed1fe.js +18 -0
- package/dist/esm/useTouch-db24bb5c.js +69 -0
- package/dist/esm/video-f1be8a91.js +67 -0
- package/dist/esm/virtuallist.taro-f0b0270d.js +214 -0
- package/dist/esm/watermark.taro-9ce2ae37.js +114 -0
- package/dist/esm/zh-CN-c779e6c1.js +131 -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/locales/zh-UG.js +1 -1
- package/dist/nutui.react.mjs +13028 -14863
- package/dist/nutui.react.umd.js +13027 -14864
- package/dist/style.mjs +1 -1
- package/dist/types/index.d.ts +176 -183
- package/package.json +1 -1
- package/dist/esm/cellgroup-fcc72767.js +0 -34
- package/dist/esm/checkbox-44e13cd0.js +0 -137
- package/dist/esm/date-c7aad4c0.js +0 -97
- package/dist/esm/formitem-8a73a5fb.js +0 -157
- package/dist/esm/get-scroll-parent-5f85dee8.js +0 -24
- package/dist/esm/icon-4ef1581c.js +0 -70
- package/dist/esm/index-030b7245.js +0 -11
- package/dist/esm/offsetContext-3ab00d40.js +0 -16
- package/dist/esm/overlay-de6c79d5.js +0 -83
- package/dist/esm/radio-9f141e6b.js +0 -118
- package/dist/esm/render-bbebb760.js +0 -79
- package/dist/esm/tabpane-01075e6c.js +0 -29
- package/dist/esm/tabs-e1b4e4b1.js +0 -181
- package/dist/esm/typings-f27b58f4.js +0 -8
- package/dist/esm/useClientRect-56bb675b.js +0 -39
- package/dist/esm/useTouch-cf73a407.js +0 -99
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
import React__default, { useState, useRef, useEffect } from 'react';
|
|
2
|
+
import { getSystemInfoSync, createSelectorQuery } from '@tarojs/taro';
|
|
3
|
+
import { c as cn } from './bem-350c1702.js';
|
|
4
|
+
|
|
5
|
+
const defaultProps = {
|
|
6
|
+
attract: false,
|
|
7
|
+
direction: undefined,
|
|
8
|
+
boundary: {
|
|
9
|
+
top: 0,
|
|
10
|
+
left: 0,
|
|
11
|
+
right: 0,
|
|
12
|
+
bottom: 0,
|
|
13
|
+
},
|
|
14
|
+
className: 'myDrag',
|
|
15
|
+
};
|
|
16
|
+
const Drag = (props) => {
|
|
17
|
+
const { attract, direction, boundary, children, className, style, ...reset } = {
|
|
18
|
+
...defaultProps,
|
|
19
|
+
...props,
|
|
20
|
+
};
|
|
21
|
+
const b = cn('drag');
|
|
22
|
+
const [boundaryState, setBoundaryState] = useState(boundary);
|
|
23
|
+
const myDrag = useRef(null);
|
|
24
|
+
const dragRef = useRef(null);
|
|
25
|
+
const [currstyle, setCurrStyle] = useState({});
|
|
26
|
+
const timer = useRef(0);
|
|
27
|
+
const axisCache = useRef({ x: 0, y: 0 });
|
|
28
|
+
const transformCache = useRef({ x: 0, y: 0 });
|
|
29
|
+
const translateX = useRef(0);
|
|
30
|
+
const translateY = useRef(0);
|
|
31
|
+
const middleLine = useRef(0);
|
|
32
|
+
const getInfo = () => {
|
|
33
|
+
const el = myDrag.current;
|
|
34
|
+
if (el) {
|
|
35
|
+
const { top, left, bottom, right } = boundary;
|
|
36
|
+
const { screenWidth, windowHeight } = getSystemInfoSync();
|
|
37
|
+
createSelectorQuery()
|
|
38
|
+
.select(`.${className}`)
|
|
39
|
+
.boundingClientRect((rec) => {
|
|
40
|
+
setBoundaryState({
|
|
41
|
+
top: -rec.top + top,
|
|
42
|
+
left: -rec.left + left,
|
|
43
|
+
bottom: windowHeight - rec.height - rec.top - bottom,
|
|
44
|
+
right: screenWidth - rec.width - rec.left - right,
|
|
45
|
+
});
|
|
46
|
+
middleLine.current =
|
|
47
|
+
screenWidth - rec.width - rec.left - (screenWidth - rec.width) / 2;
|
|
48
|
+
})
|
|
49
|
+
.exec();
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
const touchStart = (e) => {
|
|
53
|
+
e.currentTarget;
|
|
54
|
+
const touches = e.touches[0];
|
|
55
|
+
axisCache.current = { x: touches.clientX, y: touches.clientY };
|
|
56
|
+
transformCache.current = { x: translateX.current, y: translateY.current };
|
|
57
|
+
};
|
|
58
|
+
const touchMove = (e) => {
|
|
59
|
+
if (e.touches.length === 1 && dragRef.current) {
|
|
60
|
+
const touch = e.touches[0];
|
|
61
|
+
const x = touch.clientX - axisCache.current.x;
|
|
62
|
+
const y = touch.clientY - axisCache.current.y;
|
|
63
|
+
translateX.current = x + transformCache.current.x;
|
|
64
|
+
translateY.current = y + transformCache.current.y;
|
|
65
|
+
// 边界判断
|
|
66
|
+
if (translateX.current < boundaryState.left) {
|
|
67
|
+
translateX.current = boundaryState.left;
|
|
68
|
+
}
|
|
69
|
+
else if (translateX.current > boundaryState.right) {
|
|
70
|
+
translateX.current = boundaryState.right;
|
|
71
|
+
}
|
|
72
|
+
if (translateY.current < boundaryState.top) {
|
|
73
|
+
translateY.current = boundaryState.top;
|
|
74
|
+
}
|
|
75
|
+
else if (translateY.current > boundaryState.bottom) {
|
|
76
|
+
translateY.current = boundaryState.bottom;
|
|
77
|
+
}
|
|
78
|
+
const transform = `translate3d(${props.direction !== 'y' ? translateX.current : 0}px, ${props.direction !== 'x' ? translateY.current : 0}px, 0px)`;
|
|
79
|
+
setCurrStyle({ transform });
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
const touchEnd = (e) => {
|
|
83
|
+
if (props.direction !== 'y' && props.attract && dragRef.current) {
|
|
84
|
+
if (translateX.current < middleLine.current) {
|
|
85
|
+
translateX.current = boundaryState.left;
|
|
86
|
+
}
|
|
87
|
+
else {
|
|
88
|
+
translateX.current = boundaryState.right;
|
|
89
|
+
}
|
|
90
|
+
const transform = `translate3d(${translateX.current}px, ${props.direction !== 'x' ? translateY.current : 0}px, 0px)`;
|
|
91
|
+
setCurrStyle({ transform });
|
|
92
|
+
}
|
|
93
|
+
};
|
|
94
|
+
useEffect(() => {
|
|
95
|
+
timer.current = window.setTimeout(() => {
|
|
96
|
+
getInfo();
|
|
97
|
+
}, 300);
|
|
98
|
+
return () => {
|
|
99
|
+
clearTimeout(timer.current);
|
|
100
|
+
};
|
|
101
|
+
}, []);
|
|
102
|
+
return (React__default.createElement("div", { style: style, className: `${b()} ${className}`, ...reset, ref: myDrag },
|
|
103
|
+
React__default.createElement("div", { onTouchStart: (event) => touchStart(event), ref: dragRef, onTouchMove: touchMove, onTouchEnd: touchEnd,
|
|
104
|
+
// eslint-disable-next-line react/no-unknown-property
|
|
105
|
+
style: currstyle }, children)));
|
|
106
|
+
};
|
|
107
|
+
Drag.defaultProps = defaultProps;
|
|
108
|
+
Drag.displayName = 'NutDrag';
|
|
109
|
+
|
|
110
|
+
export { Drag as D };
|
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
import React__default, { createContext, useRef, useState, useEffect } from 'react';
|
|
2
|
+
import { nextTick, createSelectorQuery } from '@tarojs/taro';
|
|
3
|
+
import { ScrollView } from '@tarojs/components';
|
|
4
|
+
import { c as cn } from './bem-350c1702.js';
|
|
5
|
+
|
|
6
|
+
const elevatorContext = createContext({});
|
|
7
|
+
const defaultProps = {
|
|
8
|
+
height: '200px',
|
|
9
|
+
acceptKey: 'title',
|
|
10
|
+
indexList: [],
|
|
11
|
+
isSticky: false,
|
|
12
|
+
spaceHeight: 23,
|
|
13
|
+
titleHeight: 35,
|
|
14
|
+
className: 'weapp-elevator',
|
|
15
|
+
};
|
|
16
|
+
const Elevator = (props) => {
|
|
17
|
+
const { height, acceptKey, indexList, isSticky, spaceHeight, titleHeight, className, onClickItem, onClickIndex, children, ...rest } = {
|
|
18
|
+
...defaultProps,
|
|
19
|
+
...props,
|
|
20
|
+
};
|
|
21
|
+
const b = cn('elevator');
|
|
22
|
+
const listview = useRef(null);
|
|
23
|
+
const initData = {
|
|
24
|
+
anchorIndex: 0,
|
|
25
|
+
listHeight: [],
|
|
26
|
+
listGroup: [],
|
|
27
|
+
scrollY: 0,
|
|
28
|
+
};
|
|
29
|
+
const touchState = useRef({
|
|
30
|
+
y1: 0,
|
|
31
|
+
y2: 0,
|
|
32
|
+
});
|
|
33
|
+
const [currentData, setCurrentData] = useState({});
|
|
34
|
+
const [currentKey, setCurrentKey] = useState('');
|
|
35
|
+
const [currentIndex, setCurrentIndex] = useState(0);
|
|
36
|
+
const [codeIndex, setCodeIndex] = useState(0);
|
|
37
|
+
const [scrollStart, setScrollStart] = useState(false);
|
|
38
|
+
const state = useRef(initData);
|
|
39
|
+
const [scrollTop, setScrollTop] = useState(0);
|
|
40
|
+
// 重置滚动参数
|
|
41
|
+
const resetScrollState = () => {
|
|
42
|
+
setScrollStart(false);
|
|
43
|
+
};
|
|
44
|
+
const getData = (el) => {
|
|
45
|
+
if (!el.dataset.index) {
|
|
46
|
+
return '0';
|
|
47
|
+
}
|
|
48
|
+
return el.dataset.index;
|
|
49
|
+
};
|
|
50
|
+
const calculateHeight = () => {
|
|
51
|
+
let height = 0;
|
|
52
|
+
state.current.listHeight.push(height);
|
|
53
|
+
for (let i = 0; i < state.current.listGroup.length; i++) {
|
|
54
|
+
const query = createSelectorQuery();
|
|
55
|
+
query
|
|
56
|
+
.selectAll(`.${className} .elevator__item__${i}`)
|
|
57
|
+
.boundingClientRect();
|
|
58
|
+
// eslint-disable-next-line no-loop-func
|
|
59
|
+
query.exec((res) => {
|
|
60
|
+
if (res[0][0])
|
|
61
|
+
height += res[0][0].height;
|
|
62
|
+
// console.log(res, res[0][0].height, height, 'res')
|
|
63
|
+
state.current.listHeight.push(height);
|
|
64
|
+
});
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
const scrollTo = (index) => {
|
|
68
|
+
if (!index && index !== 0) {
|
|
69
|
+
return;
|
|
70
|
+
}
|
|
71
|
+
if (!state.current.listHeight.length) {
|
|
72
|
+
calculateHeight();
|
|
73
|
+
}
|
|
74
|
+
let cacheIndex = index;
|
|
75
|
+
if (index < 0) {
|
|
76
|
+
cacheIndex = 0;
|
|
77
|
+
}
|
|
78
|
+
if (index > state.current.listHeight.length - 2) {
|
|
79
|
+
cacheIndex = state.current.listHeight.length - 2;
|
|
80
|
+
}
|
|
81
|
+
setCodeIndex(cacheIndex);
|
|
82
|
+
setScrollTop(state.current.listHeight[cacheIndex]);
|
|
83
|
+
};
|
|
84
|
+
const touchMove = (e) => {
|
|
85
|
+
const firstTouch = e.touches[0];
|
|
86
|
+
touchState.current.y2 = firstTouch.pageY;
|
|
87
|
+
const delta = (touchState.current.y2 - touchState.current.y1) / spaceHeight || 0;
|
|
88
|
+
const cacheIndex = state.current.anchorIndex + Math.floor(delta);
|
|
89
|
+
setCodeIndex(cacheIndex);
|
|
90
|
+
scrollTo(cacheIndex);
|
|
91
|
+
};
|
|
92
|
+
const touchEnd = () => {
|
|
93
|
+
resetScrollState();
|
|
94
|
+
};
|
|
95
|
+
const touchStart = (e) => {
|
|
96
|
+
setScrollStart(true);
|
|
97
|
+
const index = Number(getData(e.target));
|
|
98
|
+
const firstTouch = e.touches[0];
|
|
99
|
+
touchState.current.y1 = firstTouch.pageY;
|
|
100
|
+
state.current.anchorIndex = +index;
|
|
101
|
+
setCodeIndex((codeIndex) => {
|
|
102
|
+
return codeIndex + index;
|
|
103
|
+
});
|
|
104
|
+
scrollTo(index);
|
|
105
|
+
};
|
|
106
|
+
const handleClickItem = (key, item) => {
|
|
107
|
+
onClickItem && onClickItem(key, item);
|
|
108
|
+
setCurrentData(item);
|
|
109
|
+
setCurrentKey(key);
|
|
110
|
+
};
|
|
111
|
+
const handleClickIndex = (key) => {
|
|
112
|
+
onClickIndex && onClickIndex(key);
|
|
113
|
+
};
|
|
114
|
+
const setListGroup = () => {
|
|
115
|
+
if (listview.current) {
|
|
116
|
+
createSelectorQuery()
|
|
117
|
+
.selectAll(`.${className} .nut-elevator__list__item`)
|
|
118
|
+
.node((el) => {
|
|
119
|
+
state.current.listGroup = [...Object.keys(el)];
|
|
120
|
+
calculateHeight();
|
|
121
|
+
})
|
|
122
|
+
.exec();
|
|
123
|
+
}
|
|
124
|
+
};
|
|
125
|
+
const listViewScroll = (e) => {
|
|
126
|
+
const { listHeight } = state.current;
|
|
127
|
+
if (!listHeight.length) {
|
|
128
|
+
calculateHeight();
|
|
129
|
+
}
|
|
130
|
+
const target = e.target;
|
|
131
|
+
const { scrollTop } = target;
|
|
132
|
+
state.current.scrollY = Math.floor(scrollTop);
|
|
133
|
+
setScrollTop(scrollTop);
|
|
134
|
+
for (let i = 0; i < listHeight.length - 1; i++) {
|
|
135
|
+
const height1 = listHeight[i];
|
|
136
|
+
const height2 = listHeight[i + 1];
|
|
137
|
+
if (state.current.scrollY >= height1 && state.current.scrollY < height2) {
|
|
138
|
+
setCurrentIndex(i);
|
|
139
|
+
return;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
setCurrentIndex(listHeight.length - 2);
|
|
143
|
+
};
|
|
144
|
+
useEffect(() => {
|
|
145
|
+
if (listview.current) {
|
|
146
|
+
nextTick(() => {
|
|
147
|
+
setListGroup();
|
|
148
|
+
});
|
|
149
|
+
}
|
|
150
|
+
}, [listview]);
|
|
151
|
+
return (React__default.createElement("div", { className: `${b()} ${className} `, ...rest },
|
|
152
|
+
isSticky && scrollTop > 0 ? (React__default.createElement("div", { className: b('list__fixed') },
|
|
153
|
+
React__default.createElement("span", { className: "fixed-title" }, indexList[currentIndex][acceptKey]))) : null,
|
|
154
|
+
React__default.createElement("div", { className: b('list'), style: { height: Number.isNaN(+height) ? height : `${height}px` } },
|
|
155
|
+
React__default.createElement(ScrollView, { scrollTop: scrollTop, scrollY: true, className: b('list__inner'), ref: listview, onScroll: listViewScroll }, indexList.map((item, idx) => {
|
|
156
|
+
return (React__default.createElement("div", { className: `${b('list__item')} elevator__item__${idx}`, key: idx },
|
|
157
|
+
React__default.createElement("div", { className: b('list__item__code') }, item[acceptKey]),
|
|
158
|
+
React__default.createElement(React__default.Fragment, null, item.list.map((subitem) => {
|
|
159
|
+
return (React__default.createElement("div", { className: b('list__item__name', {
|
|
160
|
+
highcolor: currentData.id === subitem.id &&
|
|
161
|
+
currentKey === item[acceptKey],
|
|
162
|
+
}), key: subitem.id, onClick: () => handleClickItem(item[acceptKey], subitem) }, children ? (React__default.createElement(React__default.Fragment, null,
|
|
163
|
+
React__default.createElement(elevatorContext.Provider, { value: subitem }, children))) : (subitem.name)));
|
|
164
|
+
}))));
|
|
165
|
+
}))),
|
|
166
|
+
indexList.length && scrollStart ? (React__default.createElement("div", { className: b('code--current', { current: true }) }, indexList[codeIndex][acceptKey])) : null,
|
|
167
|
+
React__default.createElement("div", { className: b('bars') },
|
|
168
|
+
React__default.createElement("div", { className: b('bars__inner'), onTouchStart: (event) => touchStart(event), onTouchMove: (event) => touchMove(event), onTouchEnd: touchEnd, style: { touchAction: 'pan-y' } }, indexList.map((item, index) => {
|
|
169
|
+
return (React__default.createElement("div", { className: `${b('bars__inner__item', {
|
|
170
|
+
active: item[acceptKey] === indexList[currentIndex][acceptKey],
|
|
171
|
+
})} `, "data-index": index, key: index, onClick: () => handleClickIndex(item[acceptKey]) }, item[acceptKey]));
|
|
172
|
+
})))));
|
|
173
|
+
};
|
|
174
|
+
Elevator.defaultProps = defaultProps;
|
|
175
|
+
Elevator.displayName = 'NutElevator';
|
|
176
|
+
Elevator.Context = elevatorContext;
|
|
177
|
+
|
|
178
|
+
export { Elevator as E };
|
|
@@ -0,0 +1,241 @@
|
|
|
1
|
+
import React__default, { useState, useRef, useEffect } from 'react';
|
|
2
|
+
import { useReady, nextTick, createSelectorQuery } from '@tarojs/taro';
|
|
3
|
+
import { u as useConfig } from './configprovider.taro-8d71eb49.js';
|
|
4
|
+
import { g as getRectByTaro } from './useClientRect-1f8ed1fe.js';
|
|
5
|
+
|
|
6
|
+
const defaultProps = {
|
|
7
|
+
content: '',
|
|
8
|
+
direction: 'end',
|
|
9
|
+
rows: 1,
|
|
10
|
+
expandText: '',
|
|
11
|
+
collapseText: '',
|
|
12
|
+
symbol: '...',
|
|
13
|
+
lineHeight: '20',
|
|
14
|
+
};
|
|
15
|
+
const Ellipsis = (props) => {
|
|
16
|
+
useConfig();
|
|
17
|
+
const { children, content, direction, rows, expandText, collapseText, symbol, lineHeight, onClick, onChange, } = { ...defaultProps, ...props };
|
|
18
|
+
let maxHeight = 0; // 当行的最大高度
|
|
19
|
+
const [exceeded, setExceeded] = useState(false);
|
|
20
|
+
const [expanded, setExpanded] = useState(false);
|
|
21
|
+
const ellipsis = useRef({
|
|
22
|
+
leading: '',
|
|
23
|
+
tailing: '',
|
|
24
|
+
});
|
|
25
|
+
const root = useRef(null);
|
|
26
|
+
const rootContain = useRef(null);
|
|
27
|
+
const symbolContain = useRef(null);
|
|
28
|
+
const [contentCopy, setContentCopy] = useState(content);
|
|
29
|
+
let lineH = 0; // 当行的最大高度
|
|
30
|
+
let originHeight = 0; // 原始高度
|
|
31
|
+
const refRandomId = Math.random().toString(36).slice(-8);
|
|
32
|
+
const widthRef = useRef('auto');
|
|
33
|
+
let widthBase = [14, 10, 7, 8.4, 10]; // 中、英(大)、英(小)、数字、其他字符的基础宽度
|
|
34
|
+
let symbolTextWidth = widthBase[0] * 0.7921;
|
|
35
|
+
const chineseReg = /^[\u4e00-\u9fa5]+$/; // 汉字
|
|
36
|
+
const digitReg = /^[0-9]+$/; // 数字
|
|
37
|
+
const letterUpperReg = /^[A-Z]+$/; // 字母
|
|
38
|
+
const letterLowerReg = /^[a-z]+$/; // 字母
|
|
39
|
+
const init = () => {
|
|
40
|
+
setExceeded(false);
|
|
41
|
+
setExpanded(false);
|
|
42
|
+
setContentCopy(content);
|
|
43
|
+
nextTick(() => {
|
|
44
|
+
getSymbolInfo();
|
|
45
|
+
getReference();
|
|
46
|
+
});
|
|
47
|
+
};
|
|
48
|
+
useReady(() => init());
|
|
49
|
+
useEffect(() => init(), [content]);
|
|
50
|
+
// 获取省略号宽度
|
|
51
|
+
const getSymbolInfo = async () => {
|
|
52
|
+
const refe = await getRectByTaro(symbolContain?.current);
|
|
53
|
+
symbolTextWidth = refe.width
|
|
54
|
+
? Math.ceil(refe.width)
|
|
55
|
+
: Math.ceil(widthBase[0] * 0.7921);
|
|
56
|
+
};
|
|
57
|
+
const symbolText = () => {
|
|
58
|
+
if (direction === 'end' || direction === 'middle') {
|
|
59
|
+
return `${symbol}${expandText}`;
|
|
60
|
+
}
|
|
61
|
+
return `${symbol}${expandText}${symbol}`;
|
|
62
|
+
};
|
|
63
|
+
const getReference = async () => {
|
|
64
|
+
const element = root.current;
|
|
65
|
+
const query = createSelectorQuery();
|
|
66
|
+
query.select(`#${element.id}`) &&
|
|
67
|
+
query
|
|
68
|
+
.select(`#${element.id}`)
|
|
69
|
+
.fields({
|
|
70
|
+
computedStyle: [
|
|
71
|
+
'width',
|
|
72
|
+
'height',
|
|
73
|
+
'lineHeight',
|
|
74
|
+
'paddingTop',
|
|
75
|
+
'paddingBottom',
|
|
76
|
+
'fontSize',
|
|
77
|
+
],
|
|
78
|
+
}, (res) => {
|
|
79
|
+
if (!res)
|
|
80
|
+
return;
|
|
81
|
+
lineH = pxToNumber(res.lineHeight === 'normal' ? lineHeight : res.lineHeight);
|
|
82
|
+
maxHeight = Math.floor(lineH * (Number(rows) + 0.5) +
|
|
83
|
+
pxToNumber(res.paddingTop) +
|
|
84
|
+
pxToNumber(res.paddingBottom));
|
|
85
|
+
originHeight = pxToNumber(res.height);
|
|
86
|
+
widthRef.current = res.width;
|
|
87
|
+
// 设置基础字符
|
|
88
|
+
const bsize = pxToNumber(res.fontSize);
|
|
89
|
+
widthBase = [
|
|
90
|
+
bsize,
|
|
91
|
+
bsize * 0.72,
|
|
92
|
+
bsize * 0.53,
|
|
93
|
+
bsize * 0.4,
|
|
94
|
+
bsize * 0.75,
|
|
95
|
+
];
|
|
96
|
+
calcEllipse();
|
|
97
|
+
})
|
|
98
|
+
.exec();
|
|
99
|
+
};
|
|
100
|
+
// 计算省略号的位置
|
|
101
|
+
const calcEllipse = async () => {
|
|
102
|
+
const refe = await getRectByTaro(rootContain.current);
|
|
103
|
+
if (refe.height <= maxHeight) {
|
|
104
|
+
setExceeded(false);
|
|
105
|
+
}
|
|
106
|
+
else {
|
|
107
|
+
const rowNum = Math.floor(content.length / (originHeight / lineH - 1)); // 每行的字数
|
|
108
|
+
if (direction === 'middle') {
|
|
109
|
+
const end = content.length;
|
|
110
|
+
ellipsis.current.leading = tailorContent(0, rowNum * (Number(rows) + 0.5), 'end');
|
|
111
|
+
ellipsis.current.tailing = tailorContent(content.length - rowNum * (Number(rows) + 0.5), end, 'start');
|
|
112
|
+
}
|
|
113
|
+
else if (direction === 'end') {
|
|
114
|
+
const end = rowNum * (Number(rows) + 0.5);
|
|
115
|
+
ellipsis.current.leading = tailorContent(0, end);
|
|
116
|
+
}
|
|
117
|
+
else {
|
|
118
|
+
const start = content.length - rowNum * (Number(rows) + 0.5) - 5;
|
|
119
|
+
ellipsis.current.tailing = tailorContent(start, content.length);
|
|
120
|
+
}
|
|
121
|
+
// 进行兜底判断,是否符合要求
|
|
122
|
+
assignContent();
|
|
123
|
+
setTimeout(() => {
|
|
124
|
+
verifyEllipsis();
|
|
125
|
+
}, 100);
|
|
126
|
+
}
|
|
127
|
+
};
|
|
128
|
+
// 验证省略号
|
|
129
|
+
const verifyEllipsis = async () => {
|
|
130
|
+
const refe = await getRectByTaro(rootContain.current);
|
|
131
|
+
if (refe && refe.height && refe.height > maxHeight) {
|
|
132
|
+
if (direction === 'end') {
|
|
133
|
+
ellipsis.current.leading = ellipsis.current?.leading?.slice(0, ellipsis.current?.leading.length - 1);
|
|
134
|
+
}
|
|
135
|
+
else {
|
|
136
|
+
ellipsis.current.tailing = ellipsis.current?.tailing?.slice(1, ellipsis.current?.tailing.length);
|
|
137
|
+
}
|
|
138
|
+
assignContent();
|
|
139
|
+
setTimeout(() => {
|
|
140
|
+
verifyEllipsis();
|
|
141
|
+
}, 100);
|
|
142
|
+
}
|
|
143
|
+
};
|
|
144
|
+
const assignContent = () => {
|
|
145
|
+
const newContent = `${ellipsis.current?.leading || ''}${ellipsis.current?.leading ? symbol : ''}${expandText || ''}${ellipsis.current?.tailing ? symbol : ''}${ellipsis.current?.tailing || ''}`;
|
|
146
|
+
setContentCopy(newContent);
|
|
147
|
+
};
|
|
148
|
+
// 计算省略号
|
|
149
|
+
const tailorContent = (left, right, type = '') => {
|
|
150
|
+
const threeDotWidth = symbolTextWidth;
|
|
151
|
+
const direc = direction === 'middle' && type ? type : direction;
|
|
152
|
+
setExceeded(true);
|
|
153
|
+
let widthPart = -1;
|
|
154
|
+
const start = left;
|
|
155
|
+
const end = right;
|
|
156
|
+
let cutoff = 0;
|
|
157
|
+
let marking = 0;
|
|
158
|
+
if (direc === 'end') {
|
|
159
|
+
marking = start;
|
|
160
|
+
cutoff = end;
|
|
161
|
+
}
|
|
162
|
+
else {
|
|
163
|
+
marking = end;
|
|
164
|
+
cutoff = start;
|
|
165
|
+
}
|
|
166
|
+
const contentWidth = pxToNumber(widthRef.current) * Number(rows) - threeDotWidth;
|
|
167
|
+
const contentPartWidth = direction === 'middle' ? contentWidth / 2 : contentWidth;
|
|
168
|
+
while (widthPart < contentPartWidth) {
|
|
169
|
+
const zi = content[marking];
|
|
170
|
+
if (chineseReg.test(zi)) {
|
|
171
|
+
widthPart = Number(widthPart + widthBase[0]);
|
|
172
|
+
}
|
|
173
|
+
else if (letterUpperReg.test(zi)) {
|
|
174
|
+
widthPart = Number(widthPart + widthBase[1]);
|
|
175
|
+
}
|
|
176
|
+
else if (letterLowerReg.test(zi)) {
|
|
177
|
+
widthPart = Number(widthPart + widthBase[2]);
|
|
178
|
+
}
|
|
179
|
+
else if (digitReg.test(zi)) {
|
|
180
|
+
widthPart = Number(widthPart + widthBase[3]);
|
|
181
|
+
}
|
|
182
|
+
else {
|
|
183
|
+
widthPart = Number(widthPart + widthBase[4]);
|
|
184
|
+
}
|
|
185
|
+
cutoff = marking;
|
|
186
|
+
direc === 'end' ? marking++ : marking--;
|
|
187
|
+
}
|
|
188
|
+
if (direc === 'end') {
|
|
189
|
+
return content.slice(0, cutoff);
|
|
190
|
+
}
|
|
191
|
+
return content.slice(cutoff, end);
|
|
192
|
+
};
|
|
193
|
+
const pxToNumber = (value) => {
|
|
194
|
+
if (!value)
|
|
195
|
+
return 0;
|
|
196
|
+
const match = value.match(/^\d*(\.\d*)?/);
|
|
197
|
+
return match ? Number(match[0]) : 0;
|
|
198
|
+
};
|
|
199
|
+
// 展开收起
|
|
200
|
+
const clickHandle = (type) => {
|
|
201
|
+
if (type === 1) {
|
|
202
|
+
setExpanded(true);
|
|
203
|
+
onChange && onChange('expand');
|
|
204
|
+
}
|
|
205
|
+
else {
|
|
206
|
+
setExpanded(false);
|
|
207
|
+
onChange && onChange('collapse');
|
|
208
|
+
}
|
|
209
|
+
};
|
|
210
|
+
// 文本点击
|
|
211
|
+
const handleClick = () => {
|
|
212
|
+
onClick && onClick();
|
|
213
|
+
};
|
|
214
|
+
return (React__default.createElement(React__default.Fragment, null,
|
|
215
|
+
React__default.createElement("div", { className: "nut-ellipsis", onClick: handleClick, ref: root, id: `root${refRandomId}` },
|
|
216
|
+
React__default.createElement("div", null,
|
|
217
|
+
!exceeded ? (React__default.createElement("div", { className: "nut-ellipsis-wordbreak" }, content)) : null,
|
|
218
|
+
exceeded && !expanded ? (React__default.createElement(React__default.Fragment, null,
|
|
219
|
+
React__default.createElement("div", { className: "nut-ellipsis-wordbreak" },
|
|
220
|
+
ellipsis.current?.leading,
|
|
221
|
+
ellipsis.current?.leading && symbol,
|
|
222
|
+
expandText ? (React__default.createElement("span", { className: "nut-ellipsis-text", onClick: (e) => {
|
|
223
|
+
e.stopPropagation();
|
|
224
|
+
clickHandle(1);
|
|
225
|
+
} }, expandText)) : null,
|
|
226
|
+
ellipsis.current?.tailing && symbol,
|
|
227
|
+
ellipsis.current?.tailing))) : null,
|
|
228
|
+
exceeded && expanded ? (React__default.createElement(React__default.Fragment, null,
|
|
229
|
+
content,
|
|
230
|
+
expandText ? (React__default.createElement("span", { className: "nut-ellipsis-text", onClick: (e) => {
|
|
231
|
+
e.stopPropagation();
|
|
232
|
+
clickHandle(2);
|
|
233
|
+
} }, collapseText)) : null)) : null)),
|
|
234
|
+
React__default.createElement("div", { className: "nut-ellipsis-copy", ref: rootContain, id: `rootContain${refRandomId}`, style: { width: `${widthRef}` } },
|
|
235
|
+
React__default.createElement("div", null, contentCopy)),
|
|
236
|
+
React__default.createElement("div", { className: "nut-ellipsis-copy", ref: symbolContain, id: `symbolContain${refRandomId}`, style: { display: 'inline' } }, symbolText())));
|
|
237
|
+
};
|
|
238
|
+
Ellipsis.defaultProps = defaultProps;
|
|
239
|
+
Ellipsis.displayName = 'NutEllipsis';
|
|
240
|
+
|
|
241
|
+
export { Ellipsis as E };
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import React__default, { useState, useEffect } from 'react';
|
|
2
|
+
import { c as cn } from './bem-350c1702.js';
|
|
3
|
+
import { u as useConfig } from './configprovider.taro-8d71eb49.js';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* 内置图片地址
|
|
7
|
+
*/
|
|
8
|
+
const defaultStatus = {
|
|
9
|
+
empty: 'https://static-ftcms.jd.com/p/files/61a9e3183985005b3958672b.png',
|
|
10
|
+
error: 'https://ftcms.jd.com/p/files/61a9e33ee7dcdbcc0ce62736.png',
|
|
11
|
+
network: 'https://static-ftcms.jd.com/p/files/61a9e31de7dcdbcc0ce62734.png',
|
|
12
|
+
};
|
|
13
|
+
const defaultProps = {
|
|
14
|
+
description: '无内容',
|
|
15
|
+
image: 'empty',
|
|
16
|
+
imageSize: '',
|
|
17
|
+
className: '',
|
|
18
|
+
};
|
|
19
|
+
const Empty = (props) => {
|
|
20
|
+
const { locale } = useConfig();
|
|
21
|
+
defaultProps.description = locale.noData || defaultProps.description;
|
|
22
|
+
const { image, imageSize, description, children, className, ...rest } = {
|
|
23
|
+
...defaultProps,
|
|
24
|
+
...props,
|
|
25
|
+
};
|
|
26
|
+
const [imgStyle, setImgStyle] = useState({});
|
|
27
|
+
const b = cn('empty');
|
|
28
|
+
let imageNode = image;
|
|
29
|
+
if (typeof image === 'string') {
|
|
30
|
+
const isHttpUrl = image.startsWith('https://') ||
|
|
31
|
+
image.startsWith('http://') ||
|
|
32
|
+
image.startsWith('//');
|
|
33
|
+
const imageUrl = isHttpUrl ? image : defaultStatus[image];
|
|
34
|
+
imageNode = React__default.createElement("img", { className: "img", src: imageUrl, alt: "empty" });
|
|
35
|
+
}
|
|
36
|
+
useEffect(() => {
|
|
37
|
+
setImgStyle(() => {
|
|
38
|
+
if (!imageSize) {
|
|
39
|
+
return {};
|
|
40
|
+
}
|
|
41
|
+
if (typeof imageSize === 'number') {
|
|
42
|
+
return {
|
|
43
|
+
width: `${imageSize}px`,
|
|
44
|
+
height: `${imageSize}px`,
|
|
45
|
+
};
|
|
46
|
+
}
|
|
47
|
+
return {
|
|
48
|
+
width: imageSize,
|
|
49
|
+
height: imageSize,
|
|
50
|
+
};
|
|
51
|
+
});
|
|
52
|
+
}, [imageSize]);
|
|
53
|
+
return (React__default.createElement("div", { className: `${b()} ${className}`, ...rest },
|
|
54
|
+
React__default.createElement(React__default.Fragment, null,
|
|
55
|
+
React__default.createElement("div", { className: b('image'), style: imgStyle }, imageNode),
|
|
56
|
+
typeof description === 'string' ? (React__default.createElement("div", { className: b('description') }, description)) : ({ description }),
|
|
57
|
+
children)));
|
|
58
|
+
};
|
|
59
|
+
Empty.defaultProps = defaultProps;
|
|
60
|
+
Empty.displayName = 'NutEmpty';
|
|
61
|
+
|
|
62
|
+
export { Empty as E };
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import React__default from 'react';
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
import { I as Icon } from './icon.taro-296a1bec.js';
|
|
4
|
+
import { O as Overlay } from './overlay.taro-21e87fb1.js';
|
|
5
|
+
import { c as cn } from './bem-350c1702.js';
|
|
6
|
+
import { u as useConfig } from './configprovider.taro-8d71eb49.js';
|
|
7
|
+
import { C as ComponentDefaults } from './typings-b9828dba.js';
|
|
8
|
+
|
|
9
|
+
const defaultProps = {
|
|
10
|
+
...ComponentDefaults,
|
|
11
|
+
fixednavClass: 'nut-fixednav',
|
|
12
|
+
activeText: '',
|
|
13
|
+
unActiveText: '',
|
|
14
|
+
type: 'right',
|
|
15
|
+
position: {
|
|
16
|
+
top: 'auto',
|
|
17
|
+
bottom: 'auto',
|
|
18
|
+
},
|
|
19
|
+
};
|
|
20
|
+
const FixedNav = (props) => {
|
|
21
|
+
const { locale } = useConfig();
|
|
22
|
+
const { fixednavClass, overlay, visible, navList, activeText, unActiveText, position, onChange, onSelected, type, slotList, slotBtn, iconClassPrefix, iconFontClassName, ...rest } = {
|
|
23
|
+
...defaultProps,
|
|
24
|
+
...props,
|
|
25
|
+
};
|
|
26
|
+
const b = cn('fixednav');
|
|
27
|
+
const classes = classNames({
|
|
28
|
+
active: visible,
|
|
29
|
+
}, type, fixednavClass, b(''));
|
|
30
|
+
const onSelectCb = (event, item) => {
|
|
31
|
+
onSelected(item, event);
|
|
32
|
+
};
|
|
33
|
+
const onUpdateValue = (value = !visible) => {
|
|
34
|
+
onChange(value);
|
|
35
|
+
};
|
|
36
|
+
return (React__default.createElement("div", { className: classes, style: position, ...rest },
|
|
37
|
+
overlay && (React__default.createElement(Overlay, { visible: visible, zIndex: 200, onClick: () => onUpdateValue(false) })),
|
|
38
|
+
React__default.createElement("div", { className: "list" }, slotList || (React__default.createElement("div", { className: "nut-fixednav__list" }, navList.map((item, index) => {
|
|
39
|
+
return (React__default.createElement("div", { className: "nut-fixednav__list-item", onClick: (event) => onSelectCb(event, item), key: item.id || index },
|
|
40
|
+
React__default.createElement("img", { src: item.icon, alt: "" }),
|
|
41
|
+
React__default.createElement("div", { className: "nut-fixednav__list-text" }, item.text),
|
|
42
|
+
item.num && React__default.createElement("div", { className: "b" }, item.num)));
|
|
43
|
+
})))),
|
|
44
|
+
React__default.createElement("div", { className: "nut-fixednav__btn", onClick: () => onUpdateValue() }, slotBtn || (React__default.createElement(React__default.Fragment, null,
|
|
45
|
+
React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: "left", color: "#fff" }),
|
|
46
|
+
React__default.createElement("div", { className: "text" }, visible
|
|
47
|
+
? activeText || locale.fixednav.activeText
|
|
48
|
+
: unActiveText || locale.fixednav.unActiveText))))));
|
|
49
|
+
};
|
|
50
|
+
FixedNav.defaultProps = defaultProps;
|
|
51
|
+
FixedNav.displayName = 'NutFixedNav';
|
|
52
|
+
|
|
53
|
+
export { FixedNav as F };
|