@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,50 @@
|
|
|
1
|
+
import React__default, { useState, useEffect } from 'react';
|
|
2
|
+
import { c as cn } from './bem-350c1702.js';
|
|
3
|
+
|
|
4
|
+
const defaultProps = {
|
|
5
|
+
isAsync: false,
|
|
6
|
+
checked: false,
|
|
7
|
+
disable: false,
|
|
8
|
+
activeColor: '',
|
|
9
|
+
inactiveColor: '',
|
|
10
|
+
activeText: '',
|
|
11
|
+
inactiveText: '',
|
|
12
|
+
className: '',
|
|
13
|
+
};
|
|
14
|
+
const Switch = (props) => {
|
|
15
|
+
const { isAsync, checked, disable, activeColor, inactiveColor, activeText, inactiveText, onChange, className, style, } = {
|
|
16
|
+
...defaultProps,
|
|
17
|
+
...props,
|
|
18
|
+
};
|
|
19
|
+
const [value, setValue] = useState(false);
|
|
20
|
+
const b = cn('switch');
|
|
21
|
+
useEffect(() => {
|
|
22
|
+
setValue(checked);
|
|
23
|
+
}, [checked]);
|
|
24
|
+
const classes = () => {
|
|
25
|
+
return `${b()} ${value ? 'switch-open' : 'switch-close'} ${disable ? `${b()}-disable` : ''} ${`${b()}-base`} ${className}`;
|
|
26
|
+
};
|
|
27
|
+
const styles = () => {
|
|
28
|
+
const myStyle = {
|
|
29
|
+
backgroundColor: value ? activeColor : inactiveColor,
|
|
30
|
+
...(style || {}),
|
|
31
|
+
};
|
|
32
|
+
return myStyle;
|
|
33
|
+
};
|
|
34
|
+
const onClick = (event) => {
|
|
35
|
+
if (disable)
|
|
36
|
+
return;
|
|
37
|
+
if (!isAsync) {
|
|
38
|
+
setValue(!value);
|
|
39
|
+
}
|
|
40
|
+
onChange && onChange(!value, event);
|
|
41
|
+
};
|
|
42
|
+
return (React__default.createElement("div", { className: classes(), onClick: (e) => onClick(e), style: styles() },
|
|
43
|
+
React__default.createElement("div", { className: "switch-button" },
|
|
44
|
+
!value && React__default.createElement("div", { className: "close-line" }),
|
|
45
|
+
activeText && (React__default.createElement(React__default.Fragment, null, value ? (React__default.createElement("div", { className: `${b('label')} open` }, activeText)) : (React__default.createElement("div", { className: `${b('label')} close` }, inactiveText)))))));
|
|
46
|
+
};
|
|
47
|
+
Switch.defaultProps = defaultProps;
|
|
48
|
+
Switch.displayName = 'NutSwitch';
|
|
49
|
+
|
|
50
|
+
export { Switch as S };
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import React__default, { useState, useEffect } from 'react';
|
|
2
|
+
import { c as cn } from './bem-350c1702.js';
|
|
3
|
+
|
|
4
|
+
const defaultProps = {
|
|
5
|
+
visible: 0,
|
|
6
|
+
bottom: false,
|
|
7
|
+
size: 20,
|
|
8
|
+
unactiveColor: '',
|
|
9
|
+
activeColor: '',
|
|
10
|
+
safeAreaInsetBottom: false,
|
|
11
|
+
className: '',
|
|
12
|
+
style: {},
|
|
13
|
+
onSwitch: (child, activeVisible) => { },
|
|
14
|
+
};
|
|
15
|
+
const Tabbar = (props) => {
|
|
16
|
+
const { children, visible, activeVisible, bottom, size, activeColor, unactiveColor, safeAreaInsetBottom, className, style, onSwitch, } = {
|
|
17
|
+
...defaultProps,
|
|
18
|
+
...props,
|
|
19
|
+
};
|
|
20
|
+
const b = cn('tabbar');
|
|
21
|
+
const [selectIndex, setSelectIndex] = useState(activeVisible || visible);
|
|
22
|
+
const handleClick = (idx) => {
|
|
23
|
+
if (!('activeVisible' in props)) {
|
|
24
|
+
setSelectIndex(idx);
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
useEffect(() => {
|
|
28
|
+
if (activeVisible !== undefined) {
|
|
29
|
+
setSelectIndex(activeVisible);
|
|
30
|
+
}
|
|
31
|
+
}, [activeVisible]);
|
|
32
|
+
return (React__default.createElement("div", { className: [
|
|
33
|
+
`${b()}`,
|
|
34
|
+
bottom ? `${b('bottom')}` : '',
|
|
35
|
+
safeAreaInsetBottom ? `${b('bottom')} ${b('safebottom')}` : '',
|
|
36
|
+
className,
|
|
37
|
+
].join(' '), style: style }, React__default.Children.map(children, (child, idx) => {
|
|
38
|
+
if (!React__default.isValidElement(child)) {
|
|
39
|
+
return null;
|
|
40
|
+
}
|
|
41
|
+
const childProps = {
|
|
42
|
+
...child.props,
|
|
43
|
+
active: idx === selectIndex,
|
|
44
|
+
index: idx,
|
|
45
|
+
unactiveColor,
|
|
46
|
+
activeColor,
|
|
47
|
+
size,
|
|
48
|
+
handleClick: () => {
|
|
49
|
+
handleClick(idx);
|
|
50
|
+
onSwitch(child, idx);
|
|
51
|
+
},
|
|
52
|
+
};
|
|
53
|
+
return React__default.cloneElement(child, childProps);
|
|
54
|
+
})));
|
|
55
|
+
};
|
|
56
|
+
Tabbar.defaultProps = defaultProps;
|
|
57
|
+
Tabbar.displayName = 'NutTabbar';
|
|
58
|
+
|
|
59
|
+
export { Tabbar as T };
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import React__default, { useEffect } from 'react';
|
|
2
|
+
import Taro from '@tarojs/taro';
|
|
3
|
+
import { c as cn } from './bem-350c1702.js';
|
|
4
|
+
import { I as Icon } from './icon.taro-296a1bec.js';
|
|
5
|
+
import { C as ComponentDefaults } from './typings-b9828dba.js';
|
|
6
|
+
|
|
7
|
+
const defaultProps = {
|
|
8
|
+
...ComponentDefaults,
|
|
9
|
+
dot: false,
|
|
10
|
+
size: '',
|
|
11
|
+
iconSize: '',
|
|
12
|
+
className: '',
|
|
13
|
+
tabTitle: '',
|
|
14
|
+
icon: '',
|
|
15
|
+
href: '',
|
|
16
|
+
to: '',
|
|
17
|
+
num: '',
|
|
18
|
+
active: false,
|
|
19
|
+
activeColor: '',
|
|
20
|
+
unactiveColor: '',
|
|
21
|
+
index: 0,
|
|
22
|
+
handleClick: (idx) => { },
|
|
23
|
+
};
|
|
24
|
+
const TabbarItem = (props) => {
|
|
25
|
+
const { dot, size, iconSize, className, style, tabTitle, icon, href, to, num, active, activeColor, unactiveColor, index, handleClick, iconClassPrefix, iconFontClassName, } = {
|
|
26
|
+
...defaultProps,
|
|
27
|
+
...props,
|
|
28
|
+
};
|
|
29
|
+
const b = cn('tabbar-item');
|
|
30
|
+
const bIcon = cn('tabbar-item__icon-box');
|
|
31
|
+
useEffect(() => {
|
|
32
|
+
if (active && href) {
|
|
33
|
+
window.location.href = href;
|
|
34
|
+
return;
|
|
35
|
+
}
|
|
36
|
+
if (active && to) {
|
|
37
|
+
Taro.navigateTo({
|
|
38
|
+
url: to,
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
}, [active, href, to]);
|
|
42
|
+
return (React__default.createElement("div", { className: `${b({ active })} ${className}`, style: {
|
|
43
|
+
...style,
|
|
44
|
+
color: active ? activeColor : unactiveColor,
|
|
45
|
+
}, onClick: () => {
|
|
46
|
+
handleClick(index);
|
|
47
|
+
} },
|
|
48
|
+
React__default.createElement("div", { className: `${bIcon()}` },
|
|
49
|
+
!dot ? (React__default.createElement(React__default.Fragment, null,
|
|
50
|
+
num && num <= 99 && (React__default.createElement("div", { className: `${bIcon('tips', [bIcon('num')])}` }, num)),
|
|
51
|
+
num && num >= 100 && (React__default.createElement("div", { className: `${bIcon('tips', [bIcon('nums')])}` }, "99+")))) : (React__default.createElement("div", { className: `${bIcon('tips', [bIcon('dot')])}` })),
|
|
52
|
+
icon && (React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, size: iconSize || size, name: icon }))),
|
|
53
|
+
tabTitle && (React__default.createElement("div", { className: bIcon({ 'nav-word': true }, [
|
|
54
|
+
bIcon({ 'big-word': !icon }),
|
|
55
|
+
]) }, tabTitle))));
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
export { TabbarItem as T };
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import React__default, { useState, useEffect } from 'react';
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
import { c as cn } from './bem-350c1702.js';
|
|
4
|
+
import { I as Icon } from './icon.taro-296a1bec.js';
|
|
5
|
+
import { u as useConfig } from './configprovider.taro-8d71eb49.js';
|
|
6
|
+
import { C as ComponentDefaults } from './typings-b9828dba.js';
|
|
7
|
+
|
|
8
|
+
const defaultProps = {
|
|
9
|
+
...ComponentDefaults,
|
|
10
|
+
className: '',
|
|
11
|
+
style: {},
|
|
12
|
+
columns: [],
|
|
13
|
+
data: [],
|
|
14
|
+
bordered: true,
|
|
15
|
+
striped: false,
|
|
16
|
+
noData: '无数据',
|
|
17
|
+
showHeader: true,
|
|
18
|
+
};
|
|
19
|
+
const Table = (props) => {
|
|
20
|
+
const { locale } = useConfig();
|
|
21
|
+
defaultProps.noData = locale.noData;
|
|
22
|
+
const { children, className, style, columns, data, bordered, summary, striped, noData, onSorter, iconClassPrefix, iconFontClassName, showHeader, ...rest } = {
|
|
23
|
+
...defaultProps,
|
|
24
|
+
...props,
|
|
25
|
+
};
|
|
26
|
+
const [curData, setCurData] = useState(data);
|
|
27
|
+
useEffect(() => {
|
|
28
|
+
if (data && String(data) !== String(curData)) {
|
|
29
|
+
setCurData(data);
|
|
30
|
+
}
|
|
31
|
+
}, [data]);
|
|
32
|
+
const b = cn('table');
|
|
33
|
+
const classes = classNames({});
|
|
34
|
+
const cls = classNames(b(), classes, className);
|
|
35
|
+
const handleSorterClick = (item) => {
|
|
36
|
+
if (item.sorter) {
|
|
37
|
+
onSorter && onSorter(item, curData);
|
|
38
|
+
if (typeof item.sorter === 'function') {
|
|
39
|
+
setCurData(curData.sort(item.sorter));
|
|
40
|
+
}
|
|
41
|
+
else {
|
|
42
|
+
setCurData(item.sorter === 'default' ? curData.sort() : curData);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
const cellClasses = (item) => {
|
|
47
|
+
return {
|
|
48
|
+
'nut-table__main__head__tr--border': props.bordered,
|
|
49
|
+
[`nut-table__main__head__tr--align${item.align ? item.align : ''}`]: true,
|
|
50
|
+
};
|
|
51
|
+
};
|
|
52
|
+
const getColumnItem = (value) => {
|
|
53
|
+
return columns.filter((item) => item.key === value)[0];
|
|
54
|
+
};
|
|
55
|
+
const renderHeadCells = () => {
|
|
56
|
+
return columns.map((item, index) => {
|
|
57
|
+
return (React__default.createElement("span", { className: classNames('nut-table__main__head__tr__th', cellClasses(item)), key: item.key, onClick: () => handleSorterClick(item) },
|
|
58
|
+
item.title,
|
|
59
|
+
item.sorter && (React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: "down-arrow", size: "12px" }))));
|
|
60
|
+
});
|
|
61
|
+
};
|
|
62
|
+
const sortDataItem = () => {
|
|
63
|
+
return columns.map((columns) => {
|
|
64
|
+
return [columns.key, columns.render];
|
|
65
|
+
});
|
|
66
|
+
};
|
|
67
|
+
const renderBodyTds = (item) => {
|
|
68
|
+
return sortDataItem().map(([value, render], index) => {
|
|
69
|
+
return (React__default.createElement("span", { className: classNames('nut-table__main__body__tr__td', cellClasses(getColumnItem(value))), key: value }, typeof item[value] === 'function' || typeof render === 'function' ? (React__default.createElement("div", null, render ? render(item) : item[value](item))) : (item[value])));
|
|
70
|
+
});
|
|
71
|
+
};
|
|
72
|
+
const renderBoyTrs = () => {
|
|
73
|
+
return curData.map((item, index) => {
|
|
74
|
+
return (React__default.createElement("div", { className: "nut-table__main__body__tr", key: index }, renderBodyTds(item)));
|
|
75
|
+
});
|
|
76
|
+
};
|
|
77
|
+
return (React__default.createElement("div", { className: cls, style: style, ...rest },
|
|
78
|
+
React__default.createElement("div", { className: classNames('nut-table__main', {
|
|
79
|
+
'nut-table__main--striped': striped,
|
|
80
|
+
}) },
|
|
81
|
+
showHeader && (React__default.createElement("div", { className: "nut-table__main__head" },
|
|
82
|
+
React__default.createElement("div", { className: "nut-table__main__head__tr" }, renderHeadCells()))),
|
|
83
|
+
React__default.createElement("div", { className: "nut-table__main__body" }, renderBoyTrs())),
|
|
84
|
+
summary && (React__default.createElement("div", { className: "nut-table__summary" },
|
|
85
|
+
React__default.createElement("span", { className: "nut-table__summary__text" }, summary))),
|
|
86
|
+
curData.length === 0 && (React__default.createElement("div", { className: "nut-table__nodata" },
|
|
87
|
+
React__default.createElement("div", { className: "nut-table__nodata" },
|
|
88
|
+
React__default.createElement("div", { className: "nut-table__nodata__text" }, noData))))));
|
|
89
|
+
};
|
|
90
|
+
Table.defaultProps = defaultProps;
|
|
91
|
+
Table.displayName = 'NutTable';
|
|
92
|
+
|
|
93
|
+
export { Table as T };
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React__default from 'react';
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
import { c as cn } from './bem-350c1702.js';
|
|
4
|
+
|
|
5
|
+
const defaultProps = {
|
|
6
|
+
title: '',
|
|
7
|
+
paneKey: '',
|
|
8
|
+
activeKey: '',
|
|
9
|
+
disabled: false,
|
|
10
|
+
};
|
|
11
|
+
const TabPane = (props) => {
|
|
12
|
+
const { children, paneKey, activeKey, autoHeightClassName, className, disabled, } = {
|
|
13
|
+
...defaultProps,
|
|
14
|
+
...props,
|
|
15
|
+
};
|
|
16
|
+
const b = cn('tabpane');
|
|
17
|
+
const classes = classNames({
|
|
18
|
+
active: !disabled && paneKey === activeKey,
|
|
19
|
+
}, b(''), autoHeightClassName, className);
|
|
20
|
+
return React__default.createElement("div", { className: classes }, !disabled && children);
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
export { TabPane as T };
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
import React__default, { useState, useRef, useEffect } from 'react';
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
import { c as cn } from './bem-350c1702.js';
|
|
4
|
+
import { I as Icon } from './icon.taro-296a1bec.js';
|
|
5
|
+
import { C as ComponentDefaults } from './typings-b9828dba.js';
|
|
6
|
+
import { T as TabPane } from './tabpane.taro-4ca340ef.js';
|
|
7
|
+
|
|
8
|
+
class Title {
|
|
9
|
+
title = '';
|
|
10
|
+
paneKey = '';
|
|
11
|
+
disabled = false;
|
|
12
|
+
index = 0;
|
|
13
|
+
// eslint-disable-next-line no-useless-constructor
|
|
14
|
+
constructor() { }
|
|
15
|
+
}
|
|
16
|
+
const defaultProps = {
|
|
17
|
+
...ComponentDefaults,
|
|
18
|
+
tabStyle: {},
|
|
19
|
+
value: 0,
|
|
20
|
+
color: '',
|
|
21
|
+
background: '',
|
|
22
|
+
direction: 'horizontal',
|
|
23
|
+
type: 'line',
|
|
24
|
+
titleScroll: false,
|
|
25
|
+
ellipsis: true,
|
|
26
|
+
animatedTime: 300,
|
|
27
|
+
titleGutter: 0,
|
|
28
|
+
size: 'normal',
|
|
29
|
+
leftAlign: false,
|
|
30
|
+
autoHeight: false,
|
|
31
|
+
};
|
|
32
|
+
const pxCheck = (value) => {
|
|
33
|
+
return Number.isNaN(Number(value)) ? String(value) : `${value}px`;
|
|
34
|
+
};
|
|
35
|
+
const Tabs = (props) => {
|
|
36
|
+
const { value, color, tabStyle, background, direction, type, titleScroll, ellipsis, animatedTime, titleGutter, size, leftAlign, titleNode, children, onClick, onChange, className, autoHeight, iconClassPrefix, iconFontClassName, ...rest } = {
|
|
37
|
+
...defaultProps,
|
|
38
|
+
...props,
|
|
39
|
+
};
|
|
40
|
+
const [currentItem, setCurrentItem] = useState({ index: 0 });
|
|
41
|
+
const titles = useRef([]);
|
|
42
|
+
useEffect(() => {
|
|
43
|
+
let currentIndex = 0;
|
|
44
|
+
titles.current = [];
|
|
45
|
+
// eslint-disable-next-line consistent-return
|
|
46
|
+
React__default.Children.forEach(children, (child, idx) => {
|
|
47
|
+
if (!React__default.isValidElement(child)) {
|
|
48
|
+
return null;
|
|
49
|
+
}
|
|
50
|
+
const title = new Title();
|
|
51
|
+
const childProps = child?.props;
|
|
52
|
+
if (childProps?.title || childProps?.paneKey) {
|
|
53
|
+
title.title = childProps?.title;
|
|
54
|
+
title.paneKey = getPaneKey(childProps?.paneKey, idx);
|
|
55
|
+
title.disabled = childProps?.disabled;
|
|
56
|
+
title.index = idx;
|
|
57
|
+
if (title.paneKey === value) {
|
|
58
|
+
currentIndex = idx;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
titles.current.push(title);
|
|
62
|
+
});
|
|
63
|
+
setCurrentItem(titles.current[currentIndex]);
|
|
64
|
+
}, [children]);
|
|
65
|
+
const b = cn('tabs');
|
|
66
|
+
const classes = classNames(direction, b(''), className);
|
|
67
|
+
const classesTitle = classNames({
|
|
68
|
+
[type]: type,
|
|
69
|
+
scrollable: titleScroll,
|
|
70
|
+
[size]: size,
|
|
71
|
+
}, `${b('')}__titles`);
|
|
72
|
+
const titleStyle = {
|
|
73
|
+
marginLeft: pxCheck(titleGutter),
|
|
74
|
+
marginRight: pxCheck(titleGutter),
|
|
75
|
+
};
|
|
76
|
+
const tabsActiveStyle = {
|
|
77
|
+
color: type === 'smile' ? color : '',
|
|
78
|
+
background: type === 'line' ? color : '',
|
|
79
|
+
};
|
|
80
|
+
const index = titles.current.findIndex((t) => t.paneKey === value);
|
|
81
|
+
const contentStyle = {
|
|
82
|
+
transform: direction === 'horizontal'
|
|
83
|
+
? `translate3d(-${index * 100}%, 0, 0)`
|
|
84
|
+
: `translate3d( 0,-${index * 100}%, 0)`,
|
|
85
|
+
transitionDuration: `${animatedTime}ms`,
|
|
86
|
+
};
|
|
87
|
+
const getPaneKey = (paneKey, index) => {
|
|
88
|
+
return typeof paneKey === 'string' ? paneKey : String(paneKey || index);
|
|
89
|
+
};
|
|
90
|
+
const tabChange = (item, index) => {
|
|
91
|
+
onClick && onClick(item);
|
|
92
|
+
if (item.disabled) {
|
|
93
|
+
return;
|
|
94
|
+
}
|
|
95
|
+
setCurrentItem(item);
|
|
96
|
+
onChange && onChange(item);
|
|
97
|
+
};
|
|
98
|
+
return (React__default.createElement("div", { className: classes, ...rest },
|
|
99
|
+
React__default.createElement("div", { className: classesTitle, style: { ...tabStyle, background } }, !!titleNode && typeof titleNode === 'function'
|
|
100
|
+
? titleNode()
|
|
101
|
+
: titles.current.map((item, index) => {
|
|
102
|
+
return (React__default.createElement("div", { style: titleStyle, onClick: (e) => tabChange(item), className: classNames({
|
|
103
|
+
active: !item.disabled &&
|
|
104
|
+
String(item.paneKey) === String(value),
|
|
105
|
+
disabled: item.disabled,
|
|
106
|
+
'nut-tabs__titles-item-left-align': leftAlign,
|
|
107
|
+
}, `${b('')}__titles-item`), key: item.paneKey },
|
|
108
|
+
type === 'line' && (React__default.createElement("div", { className: `${b('')}__titles-item__line`, style: tabsActiveStyle })),
|
|
109
|
+
type === 'smile' && (React__default.createElement("div", { className: `${b('')}__titles-item__smile`, style: tabsActiveStyle },
|
|
110
|
+
React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, color: color, name: "joy-smile" }))),
|
|
111
|
+
React__default.createElement("div", { className: classNames({
|
|
112
|
+
ellipsis: ellipsis &&
|
|
113
|
+
!titleScroll &&
|
|
114
|
+
direction === 'horizontal',
|
|
115
|
+
}, `${b('')}__titles-item__text`) }, item.title)));
|
|
116
|
+
})),
|
|
117
|
+
React__default.createElement("div", { className: `${b('')}__content__wrap` },
|
|
118
|
+
React__default.createElement("div", { className: `${b('')}__content`, style: contentStyle }, React__default.Children.map(children, (child, idx) => {
|
|
119
|
+
if (!React__default.isValidElement(child)) {
|
|
120
|
+
return null;
|
|
121
|
+
}
|
|
122
|
+
let childProps = {
|
|
123
|
+
...child.props,
|
|
124
|
+
activeKey: value,
|
|
125
|
+
};
|
|
126
|
+
if (String(value) !== getPaneKey(child.props?.paneKey, idx) &&
|
|
127
|
+
autoHeight) {
|
|
128
|
+
childProps = {
|
|
129
|
+
...childProps,
|
|
130
|
+
autoHeightClassName: 'inactive',
|
|
131
|
+
};
|
|
132
|
+
}
|
|
133
|
+
return React__default.cloneElement(child, childProps);
|
|
134
|
+
})))));
|
|
135
|
+
};
|
|
136
|
+
Tabs.defaultProps = defaultProps;
|
|
137
|
+
Tabs.displayName = 'NutTabs';
|
|
138
|
+
Tabs.TabPane = TabPane;
|
|
139
|
+
|
|
140
|
+
export { Tabs as T };
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import React__default, { useState, useEffect } from 'react';
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
import { I as Icon } from './icon.taro-296a1bec.js';
|
|
4
|
+
import { C as ComponentDefaults } from './typings-b9828dba.js';
|
|
5
|
+
|
|
6
|
+
const defaultProps = {
|
|
7
|
+
...ComponentDefaults,
|
|
8
|
+
type: 'default',
|
|
9
|
+
color: '',
|
|
10
|
+
textColor: '',
|
|
11
|
+
plain: false,
|
|
12
|
+
round: false,
|
|
13
|
+
mark: false,
|
|
14
|
+
closeable: false,
|
|
15
|
+
iconSize: '12px',
|
|
16
|
+
prefixCls: 'nut-tag',
|
|
17
|
+
onClose: (e) => { },
|
|
18
|
+
onClick: (e) => { },
|
|
19
|
+
};
|
|
20
|
+
const Tag = (props) => {
|
|
21
|
+
const { className, style, color, plain, type, round, prefixCls, children, mark, closeable, iconSize, textColor, onClick, onClose, iconClassPrefix, iconFontClassName, } = {
|
|
22
|
+
...defaultProps,
|
|
23
|
+
...props,
|
|
24
|
+
};
|
|
25
|
+
const [btnName, setBtnName] = useState('');
|
|
26
|
+
const [isTagShow, setIsTagShow] = useState(true);
|
|
27
|
+
useEffect(() => {
|
|
28
|
+
setBtnName(classes());
|
|
29
|
+
}, [
|
|
30
|
+
type,
|
|
31
|
+
color,
|
|
32
|
+
textColor,
|
|
33
|
+
plain,
|
|
34
|
+
round,
|
|
35
|
+
mark,
|
|
36
|
+
closeable,
|
|
37
|
+
iconSize,
|
|
38
|
+
prefixCls,
|
|
39
|
+
onClick,
|
|
40
|
+
onClose,
|
|
41
|
+
className,
|
|
42
|
+
]);
|
|
43
|
+
const classes = () => {
|
|
44
|
+
const prefixCls = 'nut-tag';
|
|
45
|
+
return classNames({
|
|
46
|
+
[prefixCls]: true,
|
|
47
|
+
[`${prefixCls}--${type}`]: type,
|
|
48
|
+
[`${prefixCls}--plain`]: plain,
|
|
49
|
+
[`${prefixCls}--round`]: round,
|
|
50
|
+
[`${prefixCls}--mark`]: mark,
|
|
51
|
+
[`${prefixCls}--close`]: closeable,
|
|
52
|
+
[`${className}`]: className,
|
|
53
|
+
});
|
|
54
|
+
};
|
|
55
|
+
const handleClick = (e) => {
|
|
56
|
+
if (props.onClick) {
|
|
57
|
+
props.onClick(e);
|
|
58
|
+
}
|
|
59
|
+
};
|
|
60
|
+
// 综合考虑 textColor、color、plain 组合使用时的效果
|
|
61
|
+
const getStyle = () => {
|
|
62
|
+
const style = {};
|
|
63
|
+
// 标签内字体颜色
|
|
64
|
+
if (textColor) {
|
|
65
|
+
style.color = textColor;
|
|
66
|
+
}
|
|
67
|
+
else if (color && plain) {
|
|
68
|
+
style.color = color;
|
|
69
|
+
}
|
|
70
|
+
// 标签背景与边框颜色
|
|
71
|
+
if (plain) {
|
|
72
|
+
style.background = '#fff';
|
|
73
|
+
style.borderColor = color;
|
|
74
|
+
}
|
|
75
|
+
else if (color) {
|
|
76
|
+
style.background = color;
|
|
77
|
+
}
|
|
78
|
+
return style;
|
|
79
|
+
};
|
|
80
|
+
return (React__default.createElement(React__default.Fragment, null, closeable ? (isTagShow && (React__default.createElement("div", { className: btnName, style: { ...style, ...getStyle() }, onClick: (e) => handleClick(e) },
|
|
81
|
+
children && React__default.createElement("span", { className: "nut-tag-text" }, children),
|
|
82
|
+
React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, className: "_icon", name: "close", size: iconSize, onClick: (e) => {
|
|
83
|
+
setIsTagShow(false);
|
|
84
|
+
if (props.onClose) {
|
|
85
|
+
props.onClose(e);
|
|
86
|
+
}
|
|
87
|
+
} })))) : (React__default.createElement("div", { className: btnName, style: { ...style, ...getStyle() }, onClick: (e) => handleClick(e) }, children && React__default.createElement("span", { className: "nut-tag-text" }, children)))));
|
|
88
|
+
};
|
|
89
|
+
Tag.defaultProps = defaultProps;
|
|
90
|
+
Tag.displayName = 'NutTag';
|
|
91
|
+
|
|
92
|
+
export { Tag as T };
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import React__default, { useState, useRef, useEffect } from 'react';
|
|
2
|
+
import { u as useConfig } from './configprovider.taro-8d71eb49.js';
|
|
3
|
+
import { c as cn } from './bem-350c1702.js';
|
|
4
|
+
|
|
5
|
+
const defaultProps = {
|
|
6
|
+
defaultValue: '',
|
|
7
|
+
textAlign: 'left',
|
|
8
|
+
limitshow: false,
|
|
9
|
+
maxlength: '',
|
|
10
|
+
rows: '',
|
|
11
|
+
placeholder: '',
|
|
12
|
+
readonly: false,
|
|
13
|
+
disabled: false,
|
|
14
|
+
autosize: false,
|
|
15
|
+
};
|
|
16
|
+
const TextArea = (props) => {
|
|
17
|
+
const { locale } = useConfig();
|
|
18
|
+
const { className, defaultValue, textAlign, limitshow, maxlength, rows, placeholder, readonly, disabled, autosize, style, onChange, onBlur, onFocus, } = { ...defaultProps, ...props };
|
|
19
|
+
const textareaBem = cn('textarea');
|
|
20
|
+
const [inputValue, SetInputValue] = useState('');
|
|
21
|
+
const compositingRef = useRef(false);
|
|
22
|
+
const [, updateState] = React__default.useState({});
|
|
23
|
+
const forceUpdate = React__default.useCallback(() => updateState({}), []);
|
|
24
|
+
useEffect(() => {
|
|
25
|
+
let initValue = defaultValue;
|
|
26
|
+
if (initValue && maxlength && [...initValue].length > Number(maxlength)) {
|
|
27
|
+
initValue = initValue.substring(0, Number(maxlength));
|
|
28
|
+
}
|
|
29
|
+
SetInputValue(initValue);
|
|
30
|
+
}, [defaultValue]);
|
|
31
|
+
const textChange = (event) => {
|
|
32
|
+
if (disabled)
|
|
33
|
+
return;
|
|
34
|
+
if (readonly)
|
|
35
|
+
return;
|
|
36
|
+
const text = event.detail ? event.detail : event.target;
|
|
37
|
+
if (maxlength &&
|
|
38
|
+
[...text.value].length > Number(maxlength) &&
|
|
39
|
+
!compositingRef.current) {
|
|
40
|
+
text.value = text.value.substring(0, Number(maxlength));
|
|
41
|
+
}
|
|
42
|
+
if (text.value === inputValue) {
|
|
43
|
+
forceUpdate();
|
|
44
|
+
}
|
|
45
|
+
else {
|
|
46
|
+
SetInputValue(text.value);
|
|
47
|
+
}
|
|
48
|
+
onChange && onChange(text.value, event);
|
|
49
|
+
};
|
|
50
|
+
const textFocus = (event) => {
|
|
51
|
+
if (disabled)
|
|
52
|
+
return;
|
|
53
|
+
if (readonly)
|
|
54
|
+
return;
|
|
55
|
+
onFocus && onFocus(event);
|
|
56
|
+
};
|
|
57
|
+
const textBlur = (event) => {
|
|
58
|
+
if (disabled)
|
|
59
|
+
return;
|
|
60
|
+
if (readonly)
|
|
61
|
+
return;
|
|
62
|
+
const text = event.detail ? event.detail : event.target;
|
|
63
|
+
onChange && onChange(text.value, event);
|
|
64
|
+
onBlur && onBlur(event);
|
|
65
|
+
};
|
|
66
|
+
const startComposing = () => {
|
|
67
|
+
compositingRef.current = true;
|
|
68
|
+
};
|
|
69
|
+
const endComposing = () => {
|
|
70
|
+
compositingRef.current = false;
|
|
71
|
+
};
|
|
72
|
+
return (React__default.createElement("div", { className: `${textareaBem()} ${disabled ? textareaBem('disabled') : ''} ${className || ''}` },
|
|
73
|
+
React__default.createElement("textarea", { className: textareaBem('textarea'), style: {
|
|
74
|
+
textAlign,
|
|
75
|
+
resize: `${autosize ? 'vertical' : 'none'}`,
|
|
76
|
+
...style,
|
|
77
|
+
}, readOnly: disabled || readonly, value: inputValue, onInput: (e) => {
|
|
78
|
+
textChange(e);
|
|
79
|
+
}, onChange: (e) => {
|
|
80
|
+
textChange(e);
|
|
81
|
+
}, onBlur: (e) => {
|
|
82
|
+
textBlur(e);
|
|
83
|
+
}, onFocus: (e) => {
|
|
84
|
+
textFocus(e);
|
|
85
|
+
}, onCompositionEnd: (e) => endComposing(), onCompositionStart: (e) => startComposing(), rows: rows, maxLength: maxlength < 0 ? 0 : maxlength, placeholder: placeholder || locale.placeholder }),
|
|
86
|
+
limitshow ? (React__default.createElement("div", { className: textareaBem('limit') },
|
|
87
|
+
[...inputValue].length,
|
|
88
|
+
"/",
|
|
89
|
+
maxlength < 0 ? 0 : maxlength)) : null));
|
|
90
|
+
};
|
|
91
|
+
TextArea.defaultProps = defaultProps;
|
|
92
|
+
TextArea.displayName = 'NutTextArea';
|
|
93
|
+
|
|
94
|
+
export { TextArea as T };
|
|
@@ -0,0 +1,44 @@
|
|
|
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
|
+
const defaultProps = {
|
|
6
|
+
className: '',
|
|
7
|
+
currentKey: 0,
|
|
8
|
+
currentTime: [],
|
|
9
|
+
times: [],
|
|
10
|
+
select: () => null,
|
|
11
|
+
};
|
|
12
|
+
const TimeDetail = (props) => {
|
|
13
|
+
useConfig();
|
|
14
|
+
const { children, times, className, currentKey, currentTime, select } = {
|
|
15
|
+
...defaultProps,
|
|
16
|
+
...props,
|
|
17
|
+
};
|
|
18
|
+
const b = cn('timedetail');
|
|
19
|
+
const [renderData, setRenderData] = useState([]);
|
|
20
|
+
useEffect(() => {
|
|
21
|
+
const currentData = times.find((timesItem) => String(timesItem.key) === String(currentKey));
|
|
22
|
+
const renderData = currentData ? currentData.list : [];
|
|
23
|
+
// 根据选中的日期回显当前日期可配送的时间
|
|
24
|
+
setRenderData(renderData);
|
|
25
|
+
}, [times, currentKey]);
|
|
26
|
+
// 选中时间的回调
|
|
27
|
+
const handleTime = (time) => {
|
|
28
|
+
select(time);
|
|
29
|
+
};
|
|
30
|
+
// 选中的配送时间增加 active 类名
|
|
31
|
+
const getDetailClass = (item) => {
|
|
32
|
+
let initClass = 'nut-timedetail__item';
|
|
33
|
+
const curTimeData = currentTime.find((item) => String(item.key) === String(currentKey));
|
|
34
|
+
if (curTimeData && curTimeData.list && curTimeData.list.includes(item)) {
|
|
35
|
+
initClass += ' nut-timedetail__item-active';
|
|
36
|
+
}
|
|
37
|
+
return initClass;
|
|
38
|
+
};
|
|
39
|
+
return (React__default.createElement("div", { className: `${b()} ${className || ''}` }, renderData.map((item, index) => (React__default.createElement("span", { className: getDetailClass(item), key: item, onClick: () => handleTime(item) }, item)))));
|
|
40
|
+
};
|
|
41
|
+
TimeDetail.defaultProps = defaultProps;
|
|
42
|
+
TimeDetail.displayName = 'NutTimeDetail';
|
|
43
|
+
|
|
44
|
+
export { TimeDetail as T };
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React__default from 'react';
|
|
2
|
+
import { c as cn } from './bem-350c1702.js';
|
|
3
|
+
import { u as useConfig } from './configprovider.taro-8d71eb49.js';
|
|
4
|
+
|
|
5
|
+
const defaultProps = {
|
|
6
|
+
className: '',
|
|
7
|
+
date: '',
|
|
8
|
+
curKey: 0,
|
|
9
|
+
};
|
|
10
|
+
const TimePannel = (props) => {
|
|
11
|
+
useConfig();
|
|
12
|
+
const { children, className, date, curKey, change } = {
|
|
13
|
+
...defaultProps,
|
|
14
|
+
...props,
|
|
15
|
+
};
|
|
16
|
+
const b = cn('timepannel');
|
|
17
|
+
return (React__default.createElement("div", { className: `${b()} ${className || ''}`, onClick: () => change(curKey) }, date));
|
|
18
|
+
};
|
|
19
|
+
TimePannel.defaultProps = defaultProps;
|
|
20
|
+
TimePannel.displayName = 'NutTimePannel';
|
|
21
|
+
|
|
22
|
+
export { TimePannel as T };
|