@nutui/nutui-react-taro 2.0.0-alpha.4 → 2.0.0-alpha.6
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 +29 -0
- package/dist/esm/ActionSheet.js +15 -16
- package/dist/esm/Address.js +19 -22
- package/dist/esm/Animate.js +7 -8
- package/dist/esm/AnimatingNumbers.js +8 -9
- package/dist/esm/Audio.js +17 -20
- package/dist/esm/Avatar.js +11 -12
- package/dist/esm/AvatarGroup.js +8 -13
- package/dist/esm/BackTop.js +9 -10
- package/dist/esm/Badge.js +7 -8
- package/dist/esm/Barrage.js +9 -10
- package/dist/esm/Button.js +8 -9
- package/dist/esm/Calendar.js +18 -21
- package/dist/esm/CalendarItem.js +11 -14
- package/dist/esm/Card.js +12 -13
- package/dist/esm/Cascader.js +16 -19
- package/dist/esm/Cell.js +7 -8
- package/dist/esm/CellGroup.js +7 -8
- package/dist/esm/Checkbox.js +9 -10
- package/dist/esm/CheckboxGroup.js +9 -10
- package/dist/esm/CircleProgress.js +8 -9
- package/dist/esm/Col.js +8 -9
- package/dist/esm/Collapse.js +8 -9
- package/dist/esm/CollapseItem.js +7 -8
- package/dist/esm/ConfigProvider.js +9 -9
- package/dist/esm/CountDown.js +8 -11
- package/dist/esm/DatePicker.js +21 -24
- package/dist/esm/Dialog.js +13 -16
- package/dist/esm/Divider.js +7 -8
- package/dist/esm/Drag.js +7 -8
- package/dist/esm/Elevator.js +9 -10
- package/dist/esm/Ellipsis.js +9 -11
- package/dist/esm/Empty.js +7 -11
- package/dist/esm/FixedNav.js +11 -14
- package/dist/esm/Form.js +10 -11
- package/dist/esm/FormItem.js +8 -9
- package/dist/esm/Grid.js +8 -11
- package/dist/esm/GridItem.js +7 -10
- package/dist/esm/Image.js +7 -10
- package/dist/esm/ImagePreview.js +19 -20
- package/dist/esm/Indicator.js +6 -7
- package/dist/esm/Infiniteloading.js +12 -15
- package/dist/esm/Input.js +11 -14
- package/dist/esm/InputNumber.js +9 -10
- package/dist/esm/Layout.js +5 -6
- package/dist/esm/Menu.js +8 -9
- package/dist/esm/MenuItem.js +13 -14
- package/dist/esm/NavBar.js +7 -8
- package/dist/esm/NoticeBar.js +11 -12
- package/dist/esm/Notify.js +9 -10
- package/dist/esm/NumberKeyboard.js +16 -19
- package/dist/esm/Overlay.js +8 -9
- package/dist/esm/Pagination.js +9 -12
- package/dist/esm/Picker.js +20 -23
- package/dist/esm/Popover.js +10 -11
- package/dist/esm/Popup.js +12 -13
- package/dist/esm/Price.js +7 -8
- package/dist/esm/Progress.js +7 -8
- package/dist/esm/PullToRefresh.js +11 -14
- package/dist/esm/Radio.js +9 -10
- package/dist/esm/RadioGroup.js +9 -10
- package/dist/esm/Range.js +13 -16
- package/dist/esm/Rate.js +9 -10
- package/dist/esm/Row.js +8 -9
- package/dist/esm/SearchBar.js +11 -14
- package/dist/esm/ShortPassword.js +16 -19
- package/dist/esm/SideNavBar.js +14 -15
- package/dist/esm/SideNavBarItem.js +5 -6
- package/dist/esm/Signature.js +13 -16
- package/dist/esm/Skeleton.js +14 -13
- package/dist/esm/Step.js +10 -11
- package/dist/esm/Steps.js +9 -10
- package/dist/esm/Sticky.js +11 -12
- package/dist/esm/SubSideNavBar.js +6 -7
- package/dist/esm/Swipe.js +11 -12
- package/dist/esm/Swiper.js +10 -11
- package/dist/esm/SwiperItem.js +9 -10
- package/dist/esm/Switch.js +7 -8
- package/dist/esm/TabPane.js +6 -7
- package/dist/esm/Tabbar/style/index.js +1 -1
- package/dist/esm/Tabbar.js +10 -11
- package/dist/esm/TabbarItem.js +8 -9
- package/dist/esm/Table.js +9 -14
- package/dist/esm/Tabs.js +11 -12
- package/dist/esm/Tag.js +8 -9
- package/dist/esm/TextArea.js +11 -11
- package/dist/esm/TimeDetail.js +8 -11
- package/dist/esm/TimePannel.js +8 -11
- package/dist/esm/TimeSelect.js +18 -21
- package/dist/esm/Toast.js +9 -10
- package/dist/esm/TrendArrow.js +8 -9
- package/dist/esm/Uploader.js +14 -17
- package/dist/esm/UserContext-735db09f.js +5 -0
- package/dist/esm/UserContext-ab42ba7f.js +5 -0
- package/dist/esm/UserContext-fde5badc.js +5 -0
- package/dist/esm/Video.js +8 -9
- package/dist/esm/VirtualList.js +8 -11
- package/dist/esm/WaterMark.js +10 -13
- package/dist/esm/actionsheet.taro-d2217152.js +61 -0
- package/dist/esm/address.taro-1c534feb.js +470 -0
- package/dist/esm/animate.taro-c8b29242.js +44 -0
- package/dist/esm/animatingnumbers.taro-c2a52dbd.js +103 -0
- package/dist/esm/audio.taro-ec96ef80.js +185 -0
- package/dist/esm/avatar.taro-01536aff.js +100 -0
- package/dist/esm/avatargroup-ad5ffb46.js +34 -0
- package/dist/esm/backtop.taro-7de36464.js +48 -0
- package/dist/esm/badge.taro-872605bf.js +48 -0
- package/dist/esm/barrage.taro-c8cb9864.js +91 -0
- package/dist/esm/bem-cdccae08.js +5 -0
- package/dist/esm/button.taro-01eae688.js +72 -0
- package/dist/esm/calendar.taro-10a6cb11.js +70 -0
- package/dist/esm/calendaritem.taro-3e5f114e.js +732 -0
- package/dist/esm/can-use-dom-0e539bd3.js +4 -0
- package/dist/esm/card.taro-a46fdf25.js +51 -0
- package/dist/esm/cascader.taro-a8d2148e.js +463 -0
- package/dist/esm/cell.taro-4e31d1fa.js +48 -0
- package/dist/esm/cellgroup.taro-a790d91b.js +28 -0
- package/dist/esm/checkbox.taro-016074da.js +177 -0
- package/dist/esm/circleprogress.taro-7149e09d.js +104 -0
- package/dist/esm/col.taro-d6a46a7d.js +41 -0
- package/dist/esm/collapse.taro-3d997680.js +70 -0
- package/dist/esm/collapseitem-f4571575.js +76 -0
- package/dist/esm/configprovider.taro-25758d9f.js +462 -0
- package/dist/esm/context-d0fccf11.js +5 -0
- package/dist/esm/countdown.taro-22200811.js +210 -0
- package/dist/esm/datepicker.taro-3f718964.js +260 -0
- package/dist/esm/dialog.taro-290eb9a6.js +128 -0
- package/dist/esm/divider.taro-0cb5f894.js +31 -0
- package/dist/esm/drag.taro-48e1ff38.js +111 -0
- package/dist/esm/elevator.taro-bc162e4f.js +201 -0
- package/dist/esm/ellipsis.taro-f9688dd7.js +242 -0
- package/dist/esm/empty.taro-ca792f57.js +59 -0
- package/dist/esm/fixednav.taro-28e5f776.js +61 -0
- package/dist/esm/form.taro-b06754e8.js +182 -0
- package/dist/esm/formitem.taro-b326809d.js +108 -0
- package/dist/esm/get-scroll-parent-8da04f2e.js +24 -0
- package/dist/esm/grid.taro-fbbd8618.js +52 -0
- package/dist/esm/griditem.taro-b0c37077.js +85 -0
- package/dist/esm/image.taro-767aa000.js +65 -0
- package/dist/esm/imagepreview.taro-8832dc01.js +163 -0
- package/dist/esm/index-e3184f19.js +9 -0
- package/dist/esm/indicator.taro-f2bd212f.js +30 -0
- package/dist/esm/infiniteloading.taro-f8f23ac6.js +143 -0
- package/dist/esm/input.taro-27d686c9.js +164 -0
- package/dist/esm/inputnumber.taro-877dc947.js +197 -0
- package/dist/esm/layout.taro-9659a928.js +11 -0
- package/dist/esm/menu.taro-cd0fef41.js +122 -0
- package/dist/esm/menuitem.taro-6076bffa.js +142 -0
- package/dist/esm/navbar.taro-5e1a0835.js +61 -0
- package/dist/esm/noticebar.taro-b3bfd4fe.js +408 -0
- package/dist/esm/notify.taro-6b6eb6bf.js +82 -0
- package/dist/esm/numberkeyboard.taro-0a0e866a.js +183 -0
- package/dist/esm/nutui-react.es.js +211 -118
- package/dist/esm/offsetContext-f32a9246.js +5 -0
- package/dist/esm/overlay.taro-75012bd3.js +77 -0
- package/dist/esm/pagination.taro-63607c3b.js +94 -0
- package/dist/esm/picker.taro-a5603921.js +468 -0
- package/dist/esm/popover.taro-ad483372.js +162 -0
- package/dist/esm/popup.taro-e756f3fc.js +150 -0
- package/dist/esm/price.taro-c4f45310.js +80 -0
- package/dist/esm/progress.taro-ff63be75.js +49 -0
- package/dist/esm/pulltorefresh.taro-c611fd92.js +179 -0
- package/dist/esm/radio.taro-3a54f4c8.js +152 -0
- package/dist/esm/range.taro-52cda918.js +325 -0
- package/dist/esm/rate.taro-78c66969.js +77 -0
- package/dist/esm/row.taro-8b7febd4.js +48 -0
- package/dist/esm/searchbar.taro-37ade36e.js +159 -0
- package/dist/esm/shortpassword.taro-f7292032.js +146 -0
- package/dist/esm/sidenavbar.taro-9f210df4.js +51 -0
- package/dist/esm/sidenavbaritem.taro-32a45ce6.js +12 -0
- package/dist/esm/signature.taro-c57469aa.js +146 -0
- package/dist/esm/skeleton.taro-9ff9baf4.js +71 -0
- package/dist/esm/step.taro-3bc01c0c.js +66 -0
- package/dist/esm/steps.taro-77e301ab.js +30 -0
- package/dist/esm/sticky.taro-3c03eb0a.js +134 -0
- package/dist/esm/subsidenavbar.taro-abe07673.js +64 -0
- package/dist/esm/supports-passive-aaaf0eff.js +17 -0
- package/dist/esm/swipe.taro-de80fcd8.js +180 -0
- package/dist/esm/swiper.taro-74cf9306.js +430 -0
- package/dist/esm/swiperitem-80df464a.js +29 -0
- package/dist/esm/switch.taro-f0da73a3.js +44 -0
- package/dist/esm/tabbar.taro-18eee41f.js +55 -0
- package/dist/esm/tabbaritem.taro-89646ca1.js +47 -0
- package/dist/esm/table.taro-15a55c5d.js +100 -0
- package/dist/esm/tabpane.taro-f8d92ece.js +21 -0
- package/dist/esm/tabs.taro-56e46dd3.js +137 -0
- package/dist/esm/tag.taro-1b4134a5.js +92 -0
- package/dist/esm/textarea.taro-c110565e.js +102 -0
- package/dist/esm/timedetail.taro-8d2acbbf.js +41 -0
- package/dist/esm/timepannel.taro-ee4c5dfa.js +22 -0
- package/dist/esm/timeselect.taro-069deedd.js +133 -0
- package/dist/esm/toast.taro-92c10e1d.js +114 -0
- package/dist/esm/trendarrow.taro-0cf43935.js +72 -0
- package/dist/esm/typings-11d83a22.js +7 -0
- package/dist/esm/uploader.taro-92977813.js +519 -0
- package/dist/esm/use-client-rect-f317804e.js +10 -0
- package/dist/esm/use-props-value-7ac1b1b5.js +16 -0
- package/dist/esm/use-touch-ff43512c.js +69 -0
- package/dist/esm/video-5d106e33.js +73 -0
- package/dist/esm/virtuallist.taro-99f03769.js +195 -0
- package/dist/esm/watermark.taro-cef29c03.js +109 -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 +924 -776
- package/dist/nutui.react.umd.js +923 -775
- package/dist/packages/cascader/cascader.scss +0 -26
- package/dist/packages/cellgroup/cellgroup.scss +20 -16
- package/dist/packages/checkbox/checkbox.scss +8 -11
- package/dist/packages/empty/empty.scss +0 -9
- package/dist/packages/picker/picker.scss +66 -137
- package/dist/packages/tabbar/tabbar.scss +1 -0
- package/dist/packages/table/table.scss +0 -56
- package/dist/packages/textarea/textarea.scss +5 -12
- package/dist/style.css +1 -1
- package/dist/style.mjs +1 -1
- package/dist/styles/themes/default.scss +0 -1
- package/dist/styles/variables-jmapp.scss +1 -4
- package/dist/styles/variables.scss +2 -6
- package/dist/types/index.d.ts +80 -91
- package/package.json +1 -1
- package/dist/esm/AvatarContext-c96afdcc.js +0 -5
- package/dist/esm/Icon.js +0 -64
- package/dist/esm/UserContext-0aac9a82.js +0 -5
- package/dist/esm/UserContext-e402e1a6.js +0 -5
- package/dist/esm/UserContext-e8176108.js +0 -5
- package/dist/esm/actionsheet.taro-12cf5a3e.js +0 -53
- package/dist/esm/address.taro-67e32c33.js +0 -461
- package/dist/esm/animate.taro-485331bb.js +0 -41
- package/dist/esm/animatingnumbers.taro-f6eaffef.js +0 -104
- package/dist/esm/audio.taro-51eafc9d.js +0 -162
- package/dist/esm/avatar.taro-a840f345.js +0 -105
- package/dist/esm/avatargroup-0eadb514.js +0 -34
- package/dist/esm/backtop.taro-8ec80d02.js +0 -52
- package/dist/esm/badge.taro-e2169fbe.js +0 -45
- package/dist/esm/barrage.taro-aa08da6c.js +0 -94
- package/dist/esm/bem-350c1702.js +0 -5
- package/dist/esm/button.taro-b50bc217.js +0 -65
- package/dist/esm/calendar.taro-b3ebdc35.js +0 -65
- package/dist/esm/calendaritem.taro-ab1ec154.js +0 -791
- package/dist/esm/can-use-dom-3eeb5af4.js +0 -6
- package/dist/esm/card.taro-0e849e94.js +0 -33
- package/dist/esm/cascader.taro-467910b2.js +0 -447
- package/dist/esm/cell.taro-ea725a95.js +0 -43
- package/dist/esm/cellgroup.taro-660faffc.js +0 -24
- package/dist/esm/checkbox.taro-ae460d3a.js +0 -168
- package/dist/esm/circleprogress.taro-d4943109.js +0 -103
- package/dist/esm/col.taro-4477c9f7.js +0 -43
- package/dist/esm/collapse.taro-89bcadf2.js +0 -79
- package/dist/esm/collapseitem-0e228cec.js +0 -68
- package/dist/esm/configprovider-9960f0fb.js +0 -19
- package/dist/esm/configprovider.taro-43a3c646.js +0 -45
- package/dist/esm/countdown.taro-c14b5c1f.js +0 -225
- package/dist/esm/datepicker.taro-7d522ff8.js +0 -275
- package/dist/esm/dialog.taro-f9ca73a2.js +0 -107
- package/dist/esm/divider.taro-3993d7d5.js +0 -33
- package/dist/esm/drag.taro-347dfb84.js +0 -111
- package/dist/esm/elevator.taro-360a831f.js +0 -185
- package/dist/esm/ellipsis.taro-79044d54.js +0 -241
- package/dist/esm/empty.taro-f8585835.js +0 -62
- package/dist/esm/fixednav.taro-cca9a6df.js +0 -54
- package/dist/esm/form.taro-7413d868.js +0 -179
- package/dist/esm/formitem.taro-b550d29c.js +0 -89
- package/dist/esm/get-scroll-parent-b4a07e65.js +0 -25
- package/dist/esm/grid.taro-10eb7716.js +0 -49
- package/dist/esm/griditem.taro-fb15eeec.js +0 -80
- package/dist/esm/image.taro-b897a058.js +0 -64
- package/dist/esm/imagepreview.taro-d511342c.js +0 -167
- package/dist/esm/index-5bcb0ff8.js +0 -7
- package/dist/esm/indicator.taro-bfb21d45.js +0 -30
- package/dist/esm/infiniteloading.taro-cce53c60.js +0 -141
- package/dist/esm/input.taro-1aca4a45.js +0 -167
- package/dist/esm/inputnumber.taro-1f893d42.js +0 -199
- package/dist/esm/layout.taro-e4bf83cb.js +0 -11
- package/dist/esm/menu.taro-e5c68cb8.js +0 -111
- package/dist/esm/menuitem.taro-37c18382.js +0 -129
- package/dist/esm/navbar.taro-92bab9c4.js +0 -57
- package/dist/esm/noticebar.taro-cbe93c9e.js +0 -427
- package/dist/esm/notify.taro-f1079218.js +0 -75
- package/dist/esm/numberkeyboard.taro-10ab54d6.js +0 -159
- package/dist/esm/offsetContext-c2a746fa.js +0 -5
- package/dist/esm/overlay.taro-067b7202.js +0 -73
- package/dist/esm/pagination.taro-df441058.js +0 -91
- package/dist/esm/picker.taro-9f1bb6a4.js +0 -423
- package/dist/esm/popover.taro-84a55ff9.js +0 -153
- package/dist/esm/popup.taro-89cc342a.js +0 -139
- package/dist/esm/price.taro-959d82f2.js +0 -83
- package/dist/esm/progress.taro-1a7ac8a4.js +0 -40
- package/dist/esm/pulltorefresh.taro-37dadbc5.js +0 -181
- package/dist/esm/radio.taro-36438449.js +0 -177
- package/dist/esm/range.taro-432d20d7.js +0 -332
- package/dist/esm/rate.taro-895bb41c.js +0 -77
- package/dist/esm/row.taro-e929ec5c.js +0 -48
- package/dist/esm/searchbar.taro-4aa300df.js +0 -152
- package/dist/esm/shortpassword.taro-99645f99.js +0 -119
- package/dist/esm/sidenavbar.taro-f8ffb7dc.js +0 -33
- package/dist/esm/sidenavbaritem.taro-6cb0821e.js +0 -12
- package/dist/esm/signature.taro-e5ede25a.js +0 -143
- package/dist/esm/skeleton.taro-fabd423a.js +0 -62
- package/dist/esm/step.taro-7ea33a76.js +0 -58
- package/dist/esm/steps.taro-86753d36.js +0 -30
- package/dist/esm/sticky.taro-a142a5f2.js +0 -136
- package/dist/esm/subsidenavbar.taro-85c03291.js +0 -63
- package/dist/esm/supports-passive-c85ef996.js +0 -18
- package/dist/esm/swipe.taro-b18a73ff.js +0 -177
- package/dist/esm/swiper.taro-c0e9a56b.js +0 -451
- package/dist/esm/swiperitem-abab7606.js +0 -29
- package/dist/esm/switch.taro-e82809f6.js +0 -38
- package/dist/esm/tabbar.taro-48413fb8.js +0 -51
- package/dist/esm/tabbaritem.taro-5afa3562.js +0 -37
- package/dist/esm/table.taro-eca757f3.js +0 -95
- package/dist/esm/tabpane.taro-406cc0d3.js +0 -21
- package/dist/esm/tabs.taro-d47ccfc5.js +0 -120
- package/dist/esm/tag.taro-846ee805.js +0 -92
- package/dist/esm/textarea.taro-e256e741.js +0 -94
- package/dist/esm/timedetail.taro-cae362b9.js +0 -44
- package/dist/esm/timepannel.taro-d6f4cf80.js +0 -22
- package/dist/esm/timeselect.taro-804199f9.js +0 -133
- package/dist/esm/toast.taro-c509a870.js +0 -108
- package/dist/esm/trendarrow.taro-dd83ec94.js +0 -70
- package/dist/esm/typings-d8491423.js +0 -6
- package/dist/esm/uploader.taro-716f9a50.js +0 -494
- package/dist/esm/use-client-rect-1f8ed1fe.js +0 -18
- package/dist/esm/use-props-value-ae7ee726.js +0 -15
- package/dist/esm/use-touch-db24bb5c.js +0 -69
- package/dist/esm/video-1c6405b4.js +0 -67
- package/dist/esm/virtuallist.taro-0bd611cb.js +0 -214
- package/dist/esm/watermark.taro-8966896a.js +0 -114
- package/dist/esm/zh-CN-b4f493ba.js +0 -131
- package/dist/packages/icon/icon.scss +0 -0
|
@@ -1,461 +0,0 @@
|
|
|
1
|
-
import React, { useEffect, useState, useRef } from 'react';
|
|
2
|
-
import { Check, Location2, Left, CircleClose } from '@nutui/icons-react-taro';
|
|
3
|
-
import { P as Popup } from './popup.taro-89cc342a.js';
|
|
4
|
-
import { c as cn } from './bem-350c1702.js';
|
|
5
|
-
import { u as useConfig } from './configprovider-9960f0fb.js';
|
|
6
|
-
import { createSelectorQuery } from '@tarojs/taro';
|
|
7
|
-
import { E as Elevator } from './elevator.taro-360a831f.js';
|
|
8
|
-
import { u as useConfig$1 } from './configprovider.taro-43a3c646.js';
|
|
9
|
-
import { C as ComponentDefaults } from './typings-d8491423.js';
|
|
10
|
-
|
|
11
|
-
const defaultProps$2 = {
|
|
12
|
-
type: 'custom',
|
|
13
|
-
existAddress: [],
|
|
14
|
-
defaultIcon: null,
|
|
15
|
-
selectedIcon: null,
|
|
16
|
-
isShowCustomAddress: true,
|
|
17
|
-
customAndExistTitle: '',
|
|
18
|
-
};
|
|
19
|
-
const ExistRender = (props) => {
|
|
20
|
-
const { locale } = useConfig();
|
|
21
|
-
const { children, type, existAddress, selectedIcon, defaultIcon, isShowCustomAddress, customAndExistTitle, onSelected, onClose, onSwitchModule, ...rest } = { ...defaultProps$2, ...props };
|
|
22
|
-
const b = cn('address');
|
|
23
|
-
// 选择现有地址
|
|
24
|
-
const selectedExist = (item) => {
|
|
25
|
-
const copyExistAdd = existAddress;
|
|
26
|
-
let prevExistAdd = {
|
|
27
|
-
provinceName: '',
|
|
28
|
-
cityName: '',
|
|
29
|
-
countyName: '',
|
|
30
|
-
townName: '',
|
|
31
|
-
addressDetail: '',
|
|
32
|
-
selectedAddress: false,
|
|
33
|
-
};
|
|
34
|
-
copyExistAdd.forEach((list, index) => {
|
|
35
|
-
if (list && list.selectedAddress) {
|
|
36
|
-
prevExistAdd = list;
|
|
37
|
-
}
|
|
38
|
-
list.selectedAddress = false;
|
|
39
|
-
});
|
|
40
|
-
item.selectedAddress = true;
|
|
41
|
-
onSelected && onSelected(prevExistAdd, item, copyExistAdd);
|
|
42
|
-
};
|
|
43
|
-
// 选择其他地址
|
|
44
|
-
const onSwitch = () => {
|
|
45
|
-
onSwitchModule &&
|
|
46
|
-
onSwitchModule({ type: type === 'exist' ? 'custom' : 'exist' });
|
|
47
|
-
};
|
|
48
|
-
useEffect(() => { }, [existAddress]);
|
|
49
|
-
return (React.createElement("div", { className: b('exist') },
|
|
50
|
-
React.createElement("div", { className: b('exist-group') },
|
|
51
|
-
React.createElement("ul", { className: b('exist-ul') }, existAddress.map((item, index) => {
|
|
52
|
-
return (React.createElement("li", { className: b('exist-item'), key: index },
|
|
53
|
-
React.createElement("div", { onClick: () => selectedExist(item) },
|
|
54
|
-
item.selectedAddress ? selectedIcon : defaultIcon,
|
|
55
|
-
React.createElement("div", { className: b('exist-item-info') },
|
|
56
|
-
item.name && item.phone && (React.createElement("div", { className: "exist-item-info-top" },
|
|
57
|
-
React.createElement("div", { className: "exist-item-info-name" }, item.name),
|
|
58
|
-
React.createElement("div", { className: "exist-item-info-phone" }, item.phone))),
|
|
59
|
-
React.createElement("div", { className: "exist-item-info-bottom" },
|
|
60
|
-
React.createElement("div", null, item.provinceName +
|
|
61
|
-
item.cityName +
|
|
62
|
-
item.countyName +
|
|
63
|
-
item.townName +
|
|
64
|
-
item.addressDetail))))));
|
|
65
|
-
}))),
|
|
66
|
-
isShowCustomAddress && (React.createElement("div", { className: b('choose-other'), onClick: onSwitch },
|
|
67
|
-
React.createElement("div", { className: b('choose-other-btn') }, customAndExistTitle || locale.address.chooseAnotherAddress)))));
|
|
68
|
-
};
|
|
69
|
-
|
|
70
|
-
const defaultProps$1 = {
|
|
71
|
-
modelValue: [],
|
|
72
|
-
type: 'custom',
|
|
73
|
-
province: [],
|
|
74
|
-
city: [],
|
|
75
|
-
country: [],
|
|
76
|
-
town: [],
|
|
77
|
-
height: '200px',
|
|
78
|
-
};
|
|
79
|
-
const CustomRender = (props) => {
|
|
80
|
-
const { locale } = useConfig$1();
|
|
81
|
-
const { children, type, modelValue, height, province, city, country, town, onNextArea, onTabClick, onClose, ...rest } = {
|
|
82
|
-
...defaultProps$1,
|
|
83
|
-
...props,
|
|
84
|
-
};
|
|
85
|
-
const b = cn('address');
|
|
86
|
-
const [privateType] = useState(type);
|
|
87
|
-
const [tabIndex, setTabIndex] = useState(0);
|
|
88
|
-
const [tabName] = useState(['province', 'city', 'country', 'town']);
|
|
89
|
-
useRef(null);
|
|
90
|
-
useRef(null);
|
|
91
|
-
useRef(null);
|
|
92
|
-
useRef(null);
|
|
93
|
-
const regionLine = useRef(null);
|
|
94
|
-
const isCustom2 = () => {
|
|
95
|
-
return type === 'custom2';
|
|
96
|
-
};
|
|
97
|
-
const transformData = (data) => {
|
|
98
|
-
if (!Array.isArray(data))
|
|
99
|
-
throw new TypeError('params muse be array.');
|
|
100
|
-
if (!data.length)
|
|
101
|
-
return [];
|
|
102
|
-
data.forEach((item) => {
|
|
103
|
-
if (!item.title) {
|
|
104
|
-
console.error('[NutUI] <Address> 请检查数组选项的 title 值是否有设置 ,title 为必填项 .');
|
|
105
|
-
}
|
|
106
|
-
});
|
|
107
|
-
const newData = [];
|
|
108
|
-
data = data.sort((a, b) => {
|
|
109
|
-
return a.title.localeCompare(b.title);
|
|
110
|
-
});
|
|
111
|
-
data.forEach((item) => {
|
|
112
|
-
const index = newData.findIndex((value) => value.title === item.title);
|
|
113
|
-
if (index <= -1) {
|
|
114
|
-
newData.push({
|
|
115
|
-
title: item.title,
|
|
116
|
-
list: [].concat(item),
|
|
117
|
-
});
|
|
118
|
-
}
|
|
119
|
-
else {
|
|
120
|
-
newData[index] = {
|
|
121
|
-
title: item.title,
|
|
122
|
-
list: newData[index].list.concat(item),
|
|
123
|
-
};
|
|
124
|
-
}
|
|
125
|
-
});
|
|
126
|
-
return newData;
|
|
127
|
-
};
|
|
128
|
-
const [regionList, setRegionList] = useState({
|
|
129
|
-
province: isCustom2() ? transformData(province) : province,
|
|
130
|
-
city: isCustom2() ? transformData(city) : city,
|
|
131
|
-
country: isCustom2() ? transformData(country) : country,
|
|
132
|
-
town: isCustom2() ? transformData(town) : town,
|
|
133
|
-
});
|
|
134
|
-
// 已选择的 省、市、县、镇
|
|
135
|
-
const [selectedRegion, setSelectedRegion] = useState({
|
|
136
|
-
province: { name: '' },
|
|
137
|
-
city: { name: '' },
|
|
138
|
-
country: { name: '' },
|
|
139
|
-
town: { name: '' },
|
|
140
|
-
});
|
|
141
|
-
const [lineDistance, setLineDistance] = useState(20);
|
|
142
|
-
// 获取已选地区列表名称
|
|
143
|
-
const getTabName = (item, index) => {
|
|
144
|
-
if (tabIndex > index) {
|
|
145
|
-
return item.name;
|
|
146
|
-
}
|
|
147
|
-
return locale.select;
|
|
148
|
-
};
|
|
149
|
-
// 移动下面的红线
|
|
150
|
-
const lineAnimation = (index) => {
|
|
151
|
-
setTimeout(() => {
|
|
152
|
-
const name = tabName[index];
|
|
153
|
-
createSelectorQuery()
|
|
154
|
-
.selectAll(`.${name}`)
|
|
155
|
-
.boundingClientRect((rects) => {
|
|
156
|
-
rects &&
|
|
157
|
-
rects.length > 0 &&
|
|
158
|
-
rects.forEach((rect) => {
|
|
159
|
-
if (rect.width > 0)
|
|
160
|
-
setLineDistance(rect.left || 20);
|
|
161
|
-
});
|
|
162
|
-
})
|
|
163
|
-
.exec();
|
|
164
|
-
}, 100);
|
|
165
|
-
};
|
|
166
|
-
// 切换下一级列表
|
|
167
|
-
const nextAreaList = (item) => {
|
|
168
|
-
// onchange 接收的参数
|
|
169
|
-
const calBack = {
|
|
170
|
-
next: '',
|
|
171
|
-
value: '',
|
|
172
|
-
custom: tabName[tabIndex],
|
|
173
|
-
};
|
|
174
|
-
const bbselectedRegion = selectedRegion ? { ...selectedRegion } : null;
|
|
175
|
-
if (bbselectedRegion) {
|
|
176
|
-
setSelectedRegion({
|
|
177
|
-
...bbselectedRegion,
|
|
178
|
-
[tabName[tabIndex]]: item,
|
|
179
|
-
});
|
|
180
|
-
calBack.selectedRegion = {
|
|
181
|
-
...bbselectedRegion,
|
|
182
|
-
[tabName[tabIndex]]: item,
|
|
183
|
-
};
|
|
184
|
-
for (let i = tabIndex; i < tabIndex - 1; i++) {
|
|
185
|
-
setSelectedRegion({
|
|
186
|
-
...bbselectedRegion,
|
|
187
|
-
[tabName[i + 1]]: null,
|
|
188
|
-
});
|
|
189
|
-
calBack.selectedRegion = {
|
|
190
|
-
...bbselectedRegion,
|
|
191
|
-
[tabName[i + 1]]: {},
|
|
192
|
-
};
|
|
193
|
-
}
|
|
194
|
-
}
|
|
195
|
-
if (tabIndex < 4) {
|
|
196
|
-
// 切换下一个
|
|
197
|
-
if (tabIndex === 3) {
|
|
198
|
-
calBack.next = '';
|
|
199
|
-
}
|
|
200
|
-
else {
|
|
201
|
-
setTabIndex(() => tabIndex + 1);
|
|
202
|
-
lineAnimation(tabIndex + 1);
|
|
203
|
-
calBack.next = tabName[tabIndex + 1];
|
|
204
|
-
}
|
|
205
|
-
calBack.value = item;
|
|
206
|
-
onNextArea && onNextArea(calBack);
|
|
207
|
-
}
|
|
208
|
-
else {
|
|
209
|
-
onClose && onClose();
|
|
210
|
-
}
|
|
211
|
-
};
|
|
212
|
-
// 切换地区Tab
|
|
213
|
-
const changeRegionTab = (item, index, key) => {
|
|
214
|
-
if (getTabName(item, index)) {
|
|
215
|
-
setTabIndex(index);
|
|
216
|
-
lineAnimation(index);
|
|
217
|
-
}
|
|
218
|
-
onTabClick && onTabClick(key);
|
|
219
|
-
};
|
|
220
|
-
// 默认选中项
|
|
221
|
-
const initCustomSelected = () => {
|
|
222
|
-
if (modelValue.length > 0) {
|
|
223
|
-
let tagIndex = 0;
|
|
224
|
-
const selectedRegionC = selectedRegion && Object.assign(selectedRegion);
|
|
225
|
-
for (let index = 0; index < modelValue.length; index++) {
|
|
226
|
-
if (regionList[tabName[index]].length === 0) {
|
|
227
|
-
tagIndex = index - 1;
|
|
228
|
-
setTabIndex(index - 1);
|
|
229
|
-
break;
|
|
230
|
-
}
|
|
231
|
-
else {
|
|
232
|
-
const val = modelValue[index];
|
|
233
|
-
const arr = regionList[tabName[index]];
|
|
234
|
-
if (privateType === 'custom') {
|
|
235
|
-
selectedRegionC[[tabName[index]]] = arr.filter((item) => item.id === val)[0];
|
|
236
|
-
}
|
|
237
|
-
else if (privateType === 'custom2') {
|
|
238
|
-
const sumArr = [];
|
|
239
|
-
arr.forEach((item) => {
|
|
240
|
-
sumArr.push(...item.list);
|
|
241
|
-
});
|
|
242
|
-
selectedRegionC[[tabName[index]]] = sumArr.filter((item) => item.id === val)[0];
|
|
243
|
-
}
|
|
244
|
-
tagIndex = index;
|
|
245
|
-
setSelectedRegion(selectedRegionC);
|
|
246
|
-
}
|
|
247
|
-
}
|
|
248
|
-
setTabIndex(tagIndex);
|
|
249
|
-
lineAnimation(tagIndex);
|
|
250
|
-
}
|
|
251
|
-
};
|
|
252
|
-
const handleElevatorItem = (key, item) => {
|
|
253
|
-
nextAreaList(item);
|
|
254
|
-
};
|
|
255
|
-
useEffect(() => {
|
|
256
|
-
const { province } = { ...defaultProps$1, ...props };
|
|
257
|
-
setRegionList({
|
|
258
|
-
...regionList,
|
|
259
|
-
province: isCustom2() ? transformData(province) : province,
|
|
260
|
-
});
|
|
261
|
-
}, [province]);
|
|
262
|
-
useEffect(() => {
|
|
263
|
-
const { city } = { ...defaultProps$1, ...props };
|
|
264
|
-
setRegionList({
|
|
265
|
-
...regionList,
|
|
266
|
-
city: isCustom2() ? transformData(city) : city,
|
|
267
|
-
});
|
|
268
|
-
}, [city]);
|
|
269
|
-
useEffect(() => {
|
|
270
|
-
const { country } = { ...defaultProps$1, ...props };
|
|
271
|
-
setRegionList({
|
|
272
|
-
...regionList,
|
|
273
|
-
country: isCustom2() ? transformData(country) : country,
|
|
274
|
-
});
|
|
275
|
-
}, [country]);
|
|
276
|
-
useEffect(() => {
|
|
277
|
-
const { town } = { ...defaultProps$1, ...props };
|
|
278
|
-
setRegionList({
|
|
279
|
-
...regionList,
|
|
280
|
-
town: isCustom2() ? transformData(town) : town,
|
|
281
|
-
});
|
|
282
|
-
}, [town]);
|
|
283
|
-
useEffect(() => {
|
|
284
|
-
initCustomSelected();
|
|
285
|
-
}, [modelValue]);
|
|
286
|
-
return (React.createElement("div", { className: b('custom') },
|
|
287
|
-
React.createElement("div", { className: b('region-tab') },
|
|
288
|
-
selectedRegion &&
|
|
289
|
-
Object.keys(selectedRegion).map((key, index) => {
|
|
290
|
-
return (React.createElement("div", { className: `${b('tab-item')} ${index === tabIndex ? 'active' : ''} ${tabName[index]}`, key: index, onClick: () => changeRegionTab(selectedRegion[key], index, key) }, index <= tabIndex && (React.createElement("div", null, getTabName(selectedRegion[key], index)))));
|
|
291
|
-
}),
|
|
292
|
-
React.createElement("div", { className: b('tab-line'), ref: regionLine, style: { left: `${lineDistance}px` } })),
|
|
293
|
-
privateType === 'custom' && (React.createElement("div", { className: b('region-con') },
|
|
294
|
-
React.createElement("ul", { className: b('region-group') }, regionList[tabName[tabIndex]].map((item, index) => {
|
|
295
|
-
return (React.createElement("li", { key: index, className: b('region-item') },
|
|
296
|
-
React.createElement("div", { onClick: () => {
|
|
297
|
-
nextAreaList(item);
|
|
298
|
-
} },
|
|
299
|
-
selectedRegion &&
|
|
300
|
-
selectedRegion[tabName[tabIndex]]
|
|
301
|
-
.id === item.id && (React.createElement(Check, { className: b('region-item--icon'), color: "#FA2C19", size: "13px" })),
|
|
302
|
-
item.name)));
|
|
303
|
-
})))),
|
|
304
|
-
privateType === 'custom2' && (React.createElement("div", { className: b('elevator-group') },
|
|
305
|
-
React.createElement(Elevator, { height: height, list: regionList[tabName[tabIndex]], onClickItem: handleElevatorItem })))));
|
|
306
|
-
};
|
|
307
|
-
|
|
308
|
-
const defaultProps = {
|
|
309
|
-
...ComponentDefaults,
|
|
310
|
-
modelValue: false,
|
|
311
|
-
modelSelect: [],
|
|
312
|
-
type: 'custom',
|
|
313
|
-
customAddressTitle: '',
|
|
314
|
-
province: [],
|
|
315
|
-
city: [],
|
|
316
|
-
country: [],
|
|
317
|
-
town: [],
|
|
318
|
-
isShowCustomAddress: true,
|
|
319
|
-
existAddress: [],
|
|
320
|
-
existAddressTitle: '',
|
|
321
|
-
customAndExistTitle: '',
|
|
322
|
-
height: '200px',
|
|
323
|
-
defaultIcon: null,
|
|
324
|
-
selectedIcon: null,
|
|
325
|
-
closeBtnIcon: null,
|
|
326
|
-
backBtnIcon: null,
|
|
327
|
-
};
|
|
328
|
-
const Address = (props) => {
|
|
329
|
-
const { locale } = useConfig$1();
|
|
330
|
-
const { modelValue, modelSelect, children, type, height, customAddressTitle, existAddress, existAddressTitle, province, city, country, town, isShowCustomAddress, customAndExistTitle, selectedIcon, defaultIcon, closeBtnIcon, backBtnIcon, onChange, onSelected, onClose, onCancel, onSwitch, onTabChecked, style, className, ...rest } = {
|
|
331
|
-
...defaultProps,
|
|
332
|
-
...props,
|
|
333
|
-
};
|
|
334
|
-
const b = cn('address');
|
|
335
|
-
const [privateType, setPrivateType] = useState(type);
|
|
336
|
-
const [tabName] = useState(['province', 'city', 'country', 'town']);
|
|
337
|
-
const [showPopup, setShowPopup] = useState(modelValue);
|
|
338
|
-
const [selectedRegion, setSelectedRegion] = useState({
|
|
339
|
-
province: { name: '' },
|
|
340
|
-
city: { name: '' },
|
|
341
|
-
country: { name: '' },
|
|
342
|
-
town: { name: '' },
|
|
343
|
-
}); // 已选择的 省、市、县、镇
|
|
344
|
-
const [selectedExistAddress, setSelectedExistAddress] = useState({}); // 当前选择的地址
|
|
345
|
-
// 手动关闭 点击叉号(cross),或者蒙层(mask)
|
|
346
|
-
const handClose = () => {
|
|
347
|
-
setShowPopup(false);
|
|
348
|
-
};
|
|
349
|
-
// 点击遮罩层关闭
|
|
350
|
-
const clickOverlay = () => {
|
|
351
|
-
onCancel && onCancel({ closeWay: 'mask' });
|
|
352
|
-
};
|
|
353
|
-
// 切换下一级列表
|
|
354
|
-
const nextAreaList = (item) => {
|
|
355
|
-
// onchange 接收的参数
|
|
356
|
-
const callbackParams = {
|
|
357
|
-
next: item.next,
|
|
358
|
-
value: item.value,
|
|
359
|
-
custom: item.custom,
|
|
360
|
-
};
|
|
361
|
-
setSelectedRegion({
|
|
362
|
-
...item.selectedRegion,
|
|
363
|
-
});
|
|
364
|
-
onChange && onChange(callbackParams);
|
|
365
|
-
};
|
|
366
|
-
// 选择现有地址
|
|
367
|
-
const selectedExist = (prevExistAdd, item, copyExistAdd) => {
|
|
368
|
-
setSelectedExistAddress(item);
|
|
369
|
-
onSelected && onSelected(prevExistAdd, item, copyExistAdd);
|
|
370
|
-
handClose();
|
|
371
|
-
};
|
|
372
|
-
// 初始化
|
|
373
|
-
const initAddress = () => {
|
|
374
|
-
for (let i = 0; i < tabName.length; i++) {
|
|
375
|
-
setSelectedRegion({
|
|
376
|
-
...selectedRegion,
|
|
377
|
-
[tabName[i]]: {},
|
|
378
|
-
});
|
|
379
|
-
}
|
|
380
|
-
};
|
|
381
|
-
// 关闭
|
|
382
|
-
const closeFun = () => {
|
|
383
|
-
const resCopy = {
|
|
384
|
-
addressIdStr: '',
|
|
385
|
-
addressStr: '',
|
|
386
|
-
...selectedRegion,
|
|
387
|
-
};
|
|
388
|
-
const res = {
|
|
389
|
-
data: {
|
|
390
|
-
addressIdStr: '',
|
|
391
|
-
addressStr: '',
|
|
392
|
-
...selectedRegion,
|
|
393
|
-
},
|
|
394
|
-
type: privateType,
|
|
395
|
-
};
|
|
396
|
-
if (privateType === 'custom' || privateType === 'custom2') {
|
|
397
|
-
const { province, city, country, town } = resCopy;
|
|
398
|
-
resCopy.addressIdStr = [
|
|
399
|
-
province.id || 0,
|
|
400
|
-
city.id || 0,
|
|
401
|
-
country.id || 0,
|
|
402
|
-
town.id || 0,
|
|
403
|
-
].join('_');
|
|
404
|
-
resCopy.addressStr = [
|
|
405
|
-
province.name,
|
|
406
|
-
city.name,
|
|
407
|
-
country.name,
|
|
408
|
-
town.name,
|
|
409
|
-
].join('');
|
|
410
|
-
res.data = resCopy;
|
|
411
|
-
}
|
|
412
|
-
else {
|
|
413
|
-
res.data = selectedExistAddress;
|
|
414
|
-
}
|
|
415
|
-
initAddress();
|
|
416
|
-
onClose && onClose(res);
|
|
417
|
-
};
|
|
418
|
-
// 选择其他地址
|
|
419
|
-
const onSwitchModule = () => {
|
|
420
|
-
if (privateType === 'exist') {
|
|
421
|
-
setPrivateType('custom');
|
|
422
|
-
}
|
|
423
|
-
else {
|
|
424
|
-
setPrivateType('exist');
|
|
425
|
-
}
|
|
426
|
-
initAddress();
|
|
427
|
-
onSwitch && onSwitch({ type: privateType });
|
|
428
|
-
};
|
|
429
|
-
const headerRender = () => {
|
|
430
|
-
return (React.createElement("div", { className: b('header') },
|
|
431
|
-
React.createElement("div", { className: "arrow-back", onClick: onSwitchModule }, privateType === 'custom' &&
|
|
432
|
-
(React.isValidElement(backBtnIcon) ? (backBtnIcon) : (React.createElement(Left, { color: "#cccccc" })))),
|
|
433
|
-
React.createElement("div", { className: b('header__title') }, privateType === 'custom'
|
|
434
|
-
? customAddressTitle || locale.address.selectRegion
|
|
435
|
-
: existAddressTitle || locale.address.deliveryTo),
|
|
436
|
-
React.createElement("div", { onClick: () => handClose() }, React.isValidElement(closeBtnIcon) ? (closeBtnIcon) : (React.createElement(CircleClose, { size: 18, color: "#ccc" })))));
|
|
437
|
-
};
|
|
438
|
-
useEffect(() => {
|
|
439
|
-
setShowPopup(modelValue);
|
|
440
|
-
}, [modelValue]);
|
|
441
|
-
useEffect(() => {
|
|
442
|
-
if (!showPopup) {
|
|
443
|
-
closeFun();
|
|
444
|
-
}
|
|
445
|
-
}, [showPopup]);
|
|
446
|
-
return (React.createElement(React.Fragment, null, showPopup && (React.createElement(Popup, { visible: showPopup, position: "bottom", onClickOverlay: clickOverlay, onClose: () => {
|
|
447
|
-
closeFun();
|
|
448
|
-
} },
|
|
449
|
-
React.createElement("div", { className: `${b()} ${className || ''}`, style: { ...style }, ...rest },
|
|
450
|
-
headerRender(),
|
|
451
|
-
(privateType === 'custom' || privateType === 'custom2') && (React.createElement(CustomRender, { modelValue: modelSelect, type: privateType, province: province, city: city, country: country, town: town, height: height, onNextArea: (cal) => {
|
|
452
|
-
nextAreaList && nextAreaList(cal);
|
|
453
|
-
}, onTabClick: (type) => {
|
|
454
|
-
onTabChecked && onTabChecked(type);
|
|
455
|
-
}, onClose: handClose })),
|
|
456
|
-
privateType === 'exist' && (React.createElement(ExistRender, { type: privateType, existAddress: existAddress, selectedIcon: React.isValidElement(selectedIcon) ? (selectedIcon) : (React.createElement(Check, { color: "#FA2C19" })), defaultIcon: React.isValidElement(defaultIcon) ? (defaultIcon) : (React.createElement(Location2, null)), isShowCustomAddress: isShowCustomAddress, customAndExistTitle: customAndExistTitle || locale.address.chooseAnotherAddress, onSelected: selectedExist, onSwitchModule: onSwitchModule })))))));
|
|
457
|
-
};
|
|
458
|
-
Address.defaultProps = defaultProps;
|
|
459
|
-
Address.displayName = 'NutAddress';
|
|
460
|
-
|
|
461
|
-
export { Address as A };
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import React, { useState } from 'react';
|
|
2
|
-
import classNames from 'classnames';
|
|
3
|
-
import { C as ComponentDefaults } from './typings-d8491423.js';
|
|
4
|
-
|
|
5
|
-
const defaultProps = {
|
|
6
|
-
...ComponentDefaults,
|
|
7
|
-
type: 'shake',
|
|
8
|
-
action: 'initial',
|
|
9
|
-
loop: false,
|
|
10
|
-
onClick: (event) => { },
|
|
11
|
-
};
|
|
12
|
-
const classPrefix = `nut-animate`;
|
|
13
|
-
const Animate = (props) => {
|
|
14
|
-
const { className, type, action, loop, onClick, children, ...rest } = {
|
|
15
|
-
...defaultProps,
|
|
16
|
-
...props,
|
|
17
|
-
};
|
|
18
|
-
const [clicked, setClicked] = useState(false);
|
|
19
|
-
const classes = classNames({
|
|
20
|
-
'nut-ani-container': true,
|
|
21
|
-
[`${classPrefix}-${type}`]: action === 'initial' || clicked ? type : false,
|
|
22
|
-
loop: loop,
|
|
23
|
-
});
|
|
24
|
-
const cls = classNames(classes, className);
|
|
25
|
-
const handleClick = (event) => {
|
|
26
|
-
setClicked(true);
|
|
27
|
-
//如果不是无限循环,清除类名
|
|
28
|
-
if (!loop) {
|
|
29
|
-
setTimeout(() => {
|
|
30
|
-
setClicked(false);
|
|
31
|
-
}, 1000);
|
|
32
|
-
}
|
|
33
|
-
onClick && onClick(event);
|
|
34
|
-
};
|
|
35
|
-
return (React.createElement("div", { className: "nut-animate" },
|
|
36
|
-
React.createElement("div", { className: cls, onClick: handleClick, ...rest }, children)));
|
|
37
|
-
};
|
|
38
|
-
Animate.defaultProps = defaultProps;
|
|
39
|
-
Animate.displayName = 'NutAnimate';
|
|
40
|
-
|
|
41
|
-
export { Animate as A };
|
|
@@ -1,104 +0,0 @@
|
|
|
1
|
-
import React, { useRef, useState, useEffect, Component } from 'react';
|
|
2
|
-
import { createSelectorQuery } from '@tarojs/taro';
|
|
3
|
-
import { c as cn } from './bem-350c1702.js';
|
|
4
|
-
|
|
5
|
-
const defaultProps$1 = {
|
|
6
|
-
maxLen: 0,
|
|
7
|
-
endNumber: '',
|
|
8
|
-
delaySpeed: 300,
|
|
9
|
-
easeSpeed: 1,
|
|
10
|
-
thousands: false,
|
|
11
|
-
className: '',
|
|
12
|
-
};
|
|
13
|
-
const CountUp = (props) => {
|
|
14
|
-
const { maxLen, endNumber, delaySpeed, easeSpeed, className, thousands, ...reset } = {
|
|
15
|
-
...defaultProps$1,
|
|
16
|
-
...props,
|
|
17
|
-
};
|
|
18
|
-
const b = cn('countup');
|
|
19
|
-
const countupRef = useRef(null);
|
|
20
|
-
const timerRef = useRef(0);
|
|
21
|
-
const numbers = Array.from({ length: 10 }, (v, i) => i);
|
|
22
|
-
const getShowNumber = () => {
|
|
23
|
-
const splitArr = endNumber.split('.');
|
|
24
|
-
const intNumber = maxLen && splitArr[0].length < maxLen
|
|
25
|
-
? (Array(maxLen).join('0') + splitArr[0]).slice(-maxLen)
|
|
26
|
-
: splitArr[0];
|
|
27
|
-
const currNumber = `${thousands ? intNumber.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') : intNumber}${splitArr[1] ? '.' : ''}${splitArr[1] || ''}`;
|
|
28
|
-
return currNumber.split('');
|
|
29
|
-
};
|
|
30
|
-
const [numerArr, setNumerArr] = useState([]);
|
|
31
|
-
const [transformArr, setTransformArr] = useState([]);
|
|
32
|
-
const isLoaded = useRef(false);
|
|
33
|
-
const setNumberTransform = () => {
|
|
34
|
-
if (countupRef.current && numerArr.length) {
|
|
35
|
-
createSelectorQuery()
|
|
36
|
-
.selectAll('.nut-countup__listitem')
|
|
37
|
-
.node((numberItems) => {
|
|
38
|
-
const transformArrCache = [];
|
|
39
|
-
Object.keys(numberItems).forEach((key) => {
|
|
40
|
-
const elem = numberItems[Number(key)];
|
|
41
|
-
const idx = Number(numerArr[Number(key)]);
|
|
42
|
-
if (elem) {
|
|
43
|
-
// 计算规则:父元素和实际列表高度的百分比,分割成20等份
|
|
44
|
-
const transform = idx || idx === 0
|
|
45
|
-
? `translate(0, -${(idx === 0 ? 10 : idx) * 5}%)`
|
|
46
|
-
: '';
|
|
47
|
-
transformArrCache.push(transform);
|
|
48
|
-
}
|
|
49
|
-
});
|
|
50
|
-
setTransformArr([...transformArrCache]);
|
|
51
|
-
})
|
|
52
|
-
.exec();
|
|
53
|
-
}
|
|
54
|
-
};
|
|
55
|
-
const numberEaseStyle = (idx) => {
|
|
56
|
-
return {
|
|
57
|
-
transition: `transform ${easeSpeed}s ease-in-out`,
|
|
58
|
-
transform: transformArr[idx] ? transformArr[idx] : null,
|
|
59
|
-
};
|
|
60
|
-
};
|
|
61
|
-
useEffect(() => {
|
|
62
|
-
setNumberTransform();
|
|
63
|
-
}, [numerArr]);
|
|
64
|
-
useEffect(() => {
|
|
65
|
-
if (!isLoaded.current) {
|
|
66
|
-
isLoaded.current = true;
|
|
67
|
-
timerRef.current = window.setTimeout(() => {
|
|
68
|
-
setNumerArr(getShowNumber());
|
|
69
|
-
}, delaySpeed);
|
|
70
|
-
}
|
|
71
|
-
else {
|
|
72
|
-
setNumerArr(getShowNumber());
|
|
73
|
-
}
|
|
74
|
-
return () => {
|
|
75
|
-
window.clearTimeout(timerRef.current);
|
|
76
|
-
};
|
|
77
|
-
}, [endNumber]);
|
|
78
|
-
return (React.createElement("div", { className: `${b()} ${className}`, ref: countupRef },
|
|
79
|
-
React.createElement("ul", { className: b('list') }, numerArr.map((item, idx) => {
|
|
80
|
-
return (React.createElement("li", { className: `${b('listitem', {
|
|
81
|
-
number: !Number.isNaN(Number(item)),
|
|
82
|
-
})}`, key: idx }, !Number.isNaN(Number(item)) ? (React.createElement("span", { className: b('number'), style: numberEaseStyle(idx) }, [...numbers, ...numbers].map((number, subidx) => {
|
|
83
|
-
return React.createElement("span", { key: subidx }, number);
|
|
84
|
-
}))) : (React.createElement("span", { className: b('separator') }, item))));
|
|
85
|
-
}))));
|
|
86
|
-
};
|
|
87
|
-
CountUp.defaultProps = defaultProps$1;
|
|
88
|
-
CountUp.displayName = 'NutCountUp';
|
|
89
|
-
|
|
90
|
-
const defaultProps = {};
|
|
91
|
-
class AnimatingNumbers extends Component {
|
|
92
|
-
static defaultProps = defaultProps;
|
|
93
|
-
static displayName = 'NutAnimatingNumbers';
|
|
94
|
-
static CountUp = CountUp;
|
|
95
|
-
constructor(props) {
|
|
96
|
-
super(props);
|
|
97
|
-
this.state = {};
|
|
98
|
-
}
|
|
99
|
-
render() {
|
|
100
|
-
return React.createElement("div", { className: "nut-animatingnumbers" });
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
export { AnimatingNumbers as A };
|