@arco-design/mobile-react 2.19.1 → 2.21.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +53 -0
- package/README.en-US.md +6 -6
- package/README.md +6 -6
- package/cjs/_helpers/type.d.ts +1 -1
- package/cjs/avatar/group.js +1 -1
- package/cjs/avatar/index.d.ts +1 -1
- package/cjs/avatar/index.js +11 -14
- package/cjs/avatar/style/css/index.css +96 -126
- package/cjs/avatar/style/index.less +54 -72
- package/cjs/badge/index.d.ts +1 -1
- package/cjs/badge/index.js +7 -9
- package/cjs/badge/style/css/index.css +5 -5
- package/cjs/badge/style/index.less +5 -5
- package/cjs/button/hooks.d.ts +1 -2
- package/cjs/button/hooks.js +5 -3
- package/cjs/button/index.d.ts +6 -0
- package/cjs/button/index.js +38 -33
- package/cjs/button/style/css/index.css +75 -310
- package/cjs/button/style/index.less +32 -38
- package/cjs/carousel/index.d.ts +1 -1
- package/cjs/carousel/index.js +1 -1
- package/cjs/cell/index.d.ts +1 -1
- package/cjs/cell/index.js +1 -1
- package/cjs/checkbox/index.d.ts +1 -1
- package/cjs/checkbox/index.js +1 -1
- package/cjs/collapse/index.d.ts +1 -1
- package/cjs/collapse/index.js +1 -1
- package/cjs/count-down/demo/style/mobile.less +1 -1
- package/cjs/count-down/index.d.ts +1 -1
- package/cjs/count-down/index.js +1 -1
- package/cjs/date-picker/index.d.ts +1 -1
- package/cjs/date-picker/index.js +1 -1
- package/cjs/dropdown/dropdown.d.ts +3 -0
- package/cjs/dropdown/dropdown.js +322 -0
- package/cjs/dropdown/index.d.ts +3 -4
- package/cjs/dropdown/index.js +3 -303
- package/cjs/dropdown/options.js +2 -1
- package/cjs/dropdown/style/css/index.css +3 -0
- package/cjs/dropdown/style/index.less +2 -0
- package/cjs/dropdown/type.d.ts +20 -9
- package/cjs/dropdown-menu/dropdown-menu.d.ts +4 -0
- package/cjs/dropdown-menu/dropdown-menu.js +273 -0
- package/cjs/dropdown-menu/helper.d.ts +1 -1
- package/cjs/dropdown-menu/index.d.ts +2 -3
- package/cjs/dropdown-menu/index.js +2 -245
- package/cjs/dropdown-menu/type.d.ts +21 -20
- package/cjs/ellipsis/index.d.ts +1 -1
- package/cjs/ellipsis/index.js +1 -1
- package/cjs/grid/index.js +13 -12
- package/cjs/image/index.d.ts +1 -2
- package/cjs/image/index.js +14 -9
- package/cjs/image/style/css/index.css +2 -1
- package/cjs/image/style/index.less +2 -1
- package/cjs/image-picker/add-icon.d.ts +2 -0
- package/cjs/image-picker/add-icon.js +22 -0
- package/cjs/image-picker/demo/style/css/mobile.css +40 -0
- package/cjs/image-picker/demo/style/mobile.less +42 -0
- package/cjs/image-picker/index.d.ts +13 -0
- package/cjs/image-picker/index.js +331 -0
- package/cjs/image-picker/style/css/index.css +147 -0
- package/cjs/image-picker/style/css/index.d.ts +2 -0
- package/cjs/image-picker/style/css/index.js +5 -0
- package/cjs/image-picker/style/index.d.ts +2 -0
- package/cjs/image-picker/style/index.js +5 -0
- package/cjs/image-picker/style/index.less +116 -0
- package/cjs/image-picker/type.d.ts +174 -0
- package/cjs/image-picker/type.js +3 -0
- package/cjs/image-preview/index.d.ts +3 -3
- package/cjs/image-preview/index.js +1 -1
- package/cjs/index.d.ts +3 -0
- package/cjs/index.js +13 -1
- package/cjs/input/hooks.js +49 -8
- package/cjs/input/index.d.ts +1 -1
- package/cjs/input/index.js +1 -1
- package/cjs/input/props.d.ts +8 -2
- package/cjs/nav-bar/index.js +7 -2
- package/cjs/notice-bar/index.d.ts +1 -1
- package/cjs/notice-bar/index.js +1 -1
- package/cjs/picker/index.d.ts +1 -1
- package/cjs/picker/index.js +1 -1
- package/cjs/picker-view/index.d.ts +1 -1
- package/cjs/picker-view/index.js +1 -1
- package/cjs/popover/index.d.ts +1 -1
- package/cjs/popover/index.js +1 -1
- package/cjs/popup-swiper/index.js +3 -2
- package/cjs/radio/index.d.ts +1 -1
- package/cjs/radio/index.js +1 -1
- package/cjs/rate/index.d.ts +1 -1
- package/cjs/rate/index.js +1 -1
- package/cjs/search-bar/association.d.ts +3 -0
- package/cjs/search-bar/association.js +92 -0
- package/cjs/search-bar/cancel-button.d.ts +10 -0
- package/cjs/search-bar/cancel-button.js +41 -0
- package/cjs/search-bar/demo/style/css/mobile.css +5 -0
- package/cjs/search-bar/demo/style/mobile.less +9 -0
- package/cjs/search-bar/highlight.d.ts +12 -0
- package/cjs/search-bar/highlight.js +77 -0
- package/cjs/search-bar/index.d.ts +13 -0
- package/cjs/search-bar/index.js +239 -0
- package/cjs/search-bar/style/css/index.css +148 -0
- package/cjs/search-bar/style/css/index.d.ts +2 -0
- package/cjs/search-bar/style/css/index.js +5 -0
- package/cjs/search-bar/style/index.d.ts +2 -0
- package/cjs/search-bar/style/index.js +5 -0
- package/cjs/search-bar/style/index.less +111 -0
- package/cjs/search-bar/type.d.ts +163 -0
- package/cjs/search-bar/type.js +3 -0
- package/cjs/show-monitor/index.js +31 -3
- package/cjs/slider/index.d.ts +1 -1
- package/cjs/slider/index.js +1 -1
- package/cjs/steps/demo/style/css/mobile.css +1 -1
- package/cjs/steps/demo/style/mobile.less +1 -1
- package/cjs/steps/index.d.ts +1 -1
- package/cjs/steps/index.js +1 -1
- package/cjs/steps/style/css/index.css +5 -15
- package/cjs/steps/style/index.less +6 -10
- package/cjs/sticky/index.d.ts +1 -1
- package/cjs/style.d.ts +3 -0
- package/cjs/style.js +6 -0
- package/cjs/swipe-action/demo/style/css/mobile.css +5 -0
- package/cjs/swipe-action/demo/style/mobile.less +9 -0
- package/cjs/swipe-action/index.d.ts +12 -0
- package/cjs/swipe-action/index.js +339 -0
- package/cjs/swipe-action/item.d.ts +11 -0
- package/cjs/swipe-action/item.js +52 -0
- package/cjs/swipe-action/style/css/index.css +88 -0
- package/cjs/swipe-action/style/css/index.d.ts +2 -0
- package/cjs/swipe-action/style/css/index.js +5 -0
- package/cjs/swipe-action/style/index.d.ts +2 -0
- package/cjs/swipe-action/style/index.js +5 -0
- package/cjs/swipe-action/style/index.less +89 -0
- package/cjs/swipe-action/type.d.ts +123 -0
- package/cjs/swipe-action/type.js +3 -0
- package/cjs/switch/index.d.ts +1 -1
- package/cjs/switch/index.js +1 -1
- package/cjs/tabs/tab-pane.js +5 -1
- package/cjs/tag/index.d.ts +1 -1
- package/cjs/tag/index.js +1 -1
- package/cjs/textarea/index.d.ts +1 -1
- package/cjs/textarea/index.js +1 -1
- package/dist/index.js +8040 -6845
- package/dist/index.min.js +6 -7
- package/dist/style.css +497 -447
- package/dist/style.min.css +1 -1
- package/esm/_helpers/type.d.ts +1 -1
- package/esm/avatar/group.js +1 -1
- package/esm/avatar/index.d.ts +1 -1
- package/esm/avatar/index.js +11 -14
- package/esm/avatar/style/css/index.css +96 -126
- package/esm/avatar/style/index.less +54 -72
- package/esm/badge/index.d.ts +1 -1
- package/esm/badge/index.js +7 -9
- package/esm/badge/style/css/index.css +5 -5
- package/esm/badge/style/index.less +5 -5
- package/esm/button/hooks.d.ts +1 -2
- package/esm/button/hooks.js +5 -3
- package/esm/button/index.d.ts +6 -0
- package/esm/button/index.js +40 -35
- package/esm/button/style/css/index.css +75 -310
- package/esm/button/style/index.less +32 -38
- package/esm/carousel/index.d.ts +1 -1
- package/esm/carousel/index.js +1 -1
- package/esm/cell/index.d.ts +1 -1
- package/esm/cell/index.js +1 -1
- package/esm/checkbox/index.d.ts +1 -1
- package/esm/checkbox/index.js +1 -1
- package/esm/collapse/index.d.ts +1 -1
- package/esm/collapse/index.js +1 -1
- package/esm/count-down/demo/style/mobile.less +1 -1
- package/esm/count-down/index.d.ts +1 -1
- package/esm/count-down/index.js +1 -1
- package/esm/date-picker/index.d.ts +1 -1
- package/esm/date-picker/index.js +1 -1
- package/esm/dropdown/dropdown.d.ts +3 -0
- package/esm/dropdown/dropdown.js +304 -0
- package/esm/dropdown/index.d.ts +3 -4
- package/esm/dropdown/index.js +3 -293
- package/esm/dropdown/options.js +2 -1
- package/esm/dropdown/style/css/index.css +3 -0
- package/esm/dropdown/style/index.less +2 -0
- package/esm/dropdown/type.d.ts +20 -9
- package/esm/dropdown-menu/dropdown-menu.d.ts +4 -0
- package/esm/dropdown-menu/dropdown-menu.js +256 -0
- package/esm/dropdown-menu/helper.d.ts +1 -1
- package/esm/dropdown-menu/index.d.ts +2 -3
- package/esm/dropdown-menu/index.js +2 -237
- package/esm/dropdown-menu/type.d.ts +21 -20
- package/esm/ellipsis/index.d.ts +1 -1
- package/esm/ellipsis/index.js +1 -1
- package/esm/grid/index.js +13 -12
- package/esm/image/index.d.ts +1 -2
- package/esm/image/index.js +15 -10
- package/esm/image/style/css/index.css +2 -1
- package/esm/image/style/index.less +2 -1
- package/esm/image-picker/add-icon.d.ts +2 -0
- package/esm/image-picker/add-icon.js +14 -0
- package/esm/image-picker/demo/style/css/mobile.css +40 -0
- package/esm/image-picker/demo/style/mobile.less +42 -0
- package/esm/image-picker/index.d.ts +13 -0
- package/esm/image-picker/index.js +302 -0
- package/esm/image-picker/style/css/index.css +147 -0
- package/esm/image-picker/style/css/index.d.ts +2 -0
- package/esm/image-picker/style/css/index.js +2 -0
- package/esm/image-picker/style/index.d.ts +2 -0
- package/esm/image-picker/style/index.js +2 -0
- package/esm/image-picker/style/index.less +116 -0
- package/esm/image-picker/type.d.ts +174 -0
- package/esm/image-picker/type.js +1 -0
- package/esm/image-preview/index.d.ts +3 -3
- package/esm/image-preview/index.js +1 -1
- package/esm/index.d.ts +3 -0
- package/esm/index.js +3 -0
- package/esm/input/hooks.js +49 -8
- package/esm/input/index.d.ts +1 -1
- package/esm/input/index.js +1 -1
- package/esm/input/props.d.ts +8 -2
- package/esm/nav-bar/index.js +6 -2
- package/esm/notice-bar/index.d.ts +1 -1
- package/esm/notice-bar/index.js +1 -1
- package/esm/picker/index.d.ts +1 -1
- package/esm/picker/index.js +1 -1
- package/esm/picker-view/index.d.ts +1 -1
- package/esm/picker-view/index.js +1 -1
- package/esm/popover/index.d.ts +1 -1
- package/esm/popover/index.js +1 -1
- package/esm/popup-swiper/index.js +3 -2
- package/esm/radio/index.d.ts +1 -1
- package/esm/radio/index.js +1 -1
- package/esm/rate/index.d.ts +1 -1
- package/esm/rate/index.js +1 -1
- package/esm/search-bar/association.d.ts +3 -0
- package/esm/search-bar/association.js +82 -0
- package/esm/search-bar/cancel-button.d.ts +10 -0
- package/esm/search-bar/cancel-button.js +30 -0
- package/esm/search-bar/demo/style/css/mobile.css +5 -0
- package/esm/search-bar/demo/style/mobile.less +9 -0
- package/esm/search-bar/highlight.d.ts +12 -0
- package/esm/search-bar/highlight.js +66 -0
- package/esm/search-bar/index.d.ts +13 -0
- package/esm/search-bar/index.js +213 -0
- package/esm/search-bar/style/css/index.css +148 -0
- package/esm/search-bar/style/css/index.d.ts +2 -0
- package/esm/search-bar/style/css/index.js +2 -0
- package/esm/search-bar/style/index.d.ts +2 -0
- package/esm/search-bar/style/index.js +2 -0
- package/esm/search-bar/style/index.less +111 -0
- package/esm/search-bar/type.d.ts +163 -0
- package/esm/search-bar/type.js +1 -0
- package/esm/show-monitor/index.js +31 -3
- package/esm/slider/index.d.ts +1 -1
- package/esm/slider/index.js +1 -1
- package/esm/steps/demo/style/css/mobile.css +1 -1
- package/esm/steps/demo/style/mobile.less +1 -1
- package/esm/steps/index.d.ts +1 -1
- package/esm/steps/index.js +1 -1
- package/esm/steps/style/css/index.css +5 -15
- package/esm/steps/style/index.less +6 -10
- package/esm/sticky/index.d.ts +1 -1
- package/esm/style.d.ts +3 -0
- package/esm/style.js +3 -0
- package/esm/swipe-action/demo/style/css/mobile.css +5 -0
- package/esm/swipe-action/demo/style/mobile.less +9 -0
- package/esm/swipe-action/index.d.ts +12 -0
- package/esm/swipe-action/index.js +321 -0
- package/esm/swipe-action/item.d.ts +11 -0
- package/esm/swipe-action/item.js +42 -0
- package/esm/swipe-action/style/css/index.css +88 -0
- package/esm/swipe-action/style/css/index.d.ts +2 -0
- package/esm/swipe-action/style/css/index.js +2 -0
- package/esm/swipe-action/style/index.d.ts +2 -0
- package/esm/swipe-action/style/index.js +2 -0
- package/esm/swipe-action/style/index.less +89 -0
- package/esm/swipe-action/type.d.ts +123 -0
- package/esm/swipe-action/type.js +1 -0
- package/esm/switch/index.d.ts +1 -1
- package/esm/switch/index.js +1 -1
- package/esm/tabs/tab-pane.js +5 -1
- package/esm/tag/index.d.ts +1 -1
- package/esm/tag/index.js +1 -1
- package/esm/textarea/index.d.ts +1 -1
- package/esm/textarea/index.js +1 -1
- package/package.json +3 -3
- package/tokens/app/arcodesign/default/css-variables.less +53 -3
- package/tokens/app/arcodesign/default/index.d.ts +53 -3
- package/tokens/app/arcodesign/default/index.js +54 -4
- package/tokens/app/arcodesign/default/index.json +629 -39
- package/tokens/app/arcodesign/default/index.less +53 -3
- package/umd/_helpers/type.d.ts +1 -1
- package/umd/avatar/group.js +1 -1
- package/umd/avatar/index.d.ts +1 -1
- package/umd/avatar/index.js +11 -14
- package/umd/avatar/style/css/index.css +96 -126
- package/umd/avatar/style/index.less +54 -72
- package/umd/badge/index.d.ts +1 -1
- package/umd/badge/index.js +7 -9
- package/umd/badge/style/css/index.css +5 -5
- package/umd/badge/style/index.less +5 -5
- package/umd/button/hooks.d.ts +1 -2
- package/umd/button/hooks.js +5 -3
- package/umd/button/index.d.ts +6 -0
- package/umd/button/index.js +38 -33
- package/umd/button/style/css/index.css +75 -310
- package/umd/button/style/index.less +32 -38
- package/umd/carousel/index.d.ts +1 -1
- package/umd/carousel/index.js +1 -1
- package/umd/cell/index.d.ts +1 -1
- package/umd/cell/index.js +1 -1
- package/umd/checkbox/index.d.ts +1 -1
- package/umd/checkbox/index.js +1 -1
- package/umd/collapse/index.d.ts +1 -1
- package/umd/collapse/index.js +1 -1
- package/umd/count-down/demo/style/mobile.less +1 -1
- package/umd/count-down/index.d.ts +1 -1
- package/umd/count-down/index.js +1 -1
- package/umd/date-picker/index.d.ts +1 -1
- package/umd/date-picker/index.js +1 -1
- package/umd/dropdown/dropdown.d.ts +3 -0
- package/umd/dropdown/dropdown.js +325 -0
- package/umd/dropdown/index.d.ts +3 -4
- package/umd/dropdown/index.js +5 -298
- package/umd/dropdown/options.js +2 -1
- package/umd/dropdown/style/css/index.css +3 -0
- package/umd/dropdown/style/index.less +2 -0
- package/umd/dropdown/type.d.ts +20 -9
- package/umd/dropdown-menu/dropdown-menu.d.ts +4 -0
- package/umd/dropdown-menu/dropdown-menu.js +278 -0
- package/umd/dropdown-menu/helper.d.ts +1 -1
- package/umd/dropdown-menu/index.d.ts +2 -3
- package/umd/dropdown-menu/index.js +5 -241
- package/umd/dropdown-menu/type.d.ts +21 -20
- package/umd/ellipsis/index.d.ts +1 -1
- package/umd/ellipsis/index.js +1 -1
- package/umd/grid/index.js +13 -12
- package/umd/image/index.d.ts +1 -2
- package/umd/image/index.js +14 -9
- package/umd/image/style/css/index.css +2 -1
- package/umd/image/style/index.less +2 -1
- package/umd/image-picker/add-icon.d.ts +2 -0
- package/umd/image-picker/add-icon.js +35 -0
- package/umd/image-picker/demo/style/css/mobile.css +40 -0
- package/umd/image-picker/demo/style/mobile.less +42 -0
- package/umd/image-picker/index.d.ts +13 -0
- package/umd/image-picker/index.js +329 -0
- package/umd/image-picker/style/css/index.css +147 -0
- package/umd/image-picker/style/css/index.d.ts +2 -0
- package/umd/image-picker/style/css/index.js +15 -0
- package/umd/image-picker/style/index.d.ts +2 -0
- package/umd/image-picker/style/index.js +15 -0
- package/umd/image-picker/style/index.less +116 -0
- package/umd/image-picker/type.d.ts +174 -0
- package/umd/image-picker/type.js +17 -0
- package/umd/image-preview/index.d.ts +3 -3
- package/umd/image-preview/index.js +1 -1
- package/umd/index.d.ts +3 -0
- package/umd/index.js +11 -5
- package/umd/input/hooks.js +48 -7
- package/umd/input/index.d.ts +1 -1
- package/umd/input/index.js +1 -1
- package/umd/input/props.d.ts +8 -2
- package/umd/nav-bar/index.js +9 -6
- package/umd/notice-bar/index.d.ts +1 -1
- package/umd/notice-bar/index.js +1 -1
- package/umd/picker/index.d.ts +1 -1
- package/umd/picker/index.js +1 -1
- package/umd/picker-view/index.d.ts +1 -1
- package/umd/picker-view/index.js +1 -1
- package/umd/popover/index.d.ts +1 -1
- package/umd/popover/index.js +1 -1
- package/umd/popup-swiper/index.js +3 -2
- package/umd/radio/index.d.ts +1 -1
- package/umd/radio/index.js +1 -1
- package/umd/rate/index.d.ts +1 -1
- package/umd/rate/index.js +1 -1
- package/umd/search-bar/association.d.ts +3 -0
- package/umd/search-bar/association.js +101 -0
- package/umd/search-bar/cancel-button.d.ts +10 -0
- package/umd/search-bar/cancel-button.js +52 -0
- package/umd/search-bar/demo/style/css/mobile.css +5 -0
- package/umd/search-bar/demo/style/mobile.less +9 -0
- package/umd/search-bar/highlight.d.ts +12 -0
- package/umd/search-bar/highlight.js +87 -0
- package/umd/search-bar/index.d.ts +13 -0
- package/umd/search-bar/index.js +235 -0
- package/umd/search-bar/style/css/index.css +148 -0
- package/umd/search-bar/style/css/index.d.ts +2 -0
- package/umd/search-bar/style/css/index.js +15 -0
- package/umd/search-bar/style/index.d.ts +2 -0
- package/umd/search-bar/style/index.js +15 -0
- package/umd/search-bar/style/index.less +111 -0
- package/umd/search-bar/type.d.ts +163 -0
- package/umd/search-bar/type.js +17 -0
- package/umd/show-monitor/index.js +31 -3
- package/umd/slider/index.d.ts +1 -1
- package/umd/slider/index.js +1 -1
- package/umd/steps/demo/style/css/mobile.css +1 -1
- package/umd/steps/demo/style/mobile.less +1 -1
- package/umd/steps/index.d.ts +1 -1
- package/umd/steps/index.js +1 -1
- package/umd/steps/style/css/index.css +5 -15
- package/umd/steps/style/index.less +6 -10
- package/umd/sticky/index.d.ts +1 -1
- package/umd/style.d.ts +3 -0
- package/umd/style.js +4 -4
- package/umd/swipe-action/demo/style/css/mobile.css +5 -0
- package/umd/swipe-action/demo/style/mobile.less +9 -0
- package/umd/swipe-action/index.d.ts +12 -0
- package/umd/swipe-action/index.js +342 -0
- package/umd/swipe-action/item.d.ts +11 -0
- package/umd/swipe-action/item.js +62 -0
- package/umd/swipe-action/style/css/index.css +88 -0
- package/umd/swipe-action/style/css/index.d.ts +2 -0
- package/umd/swipe-action/style/css/index.js +15 -0
- package/umd/swipe-action/style/index.d.ts +2 -0
- package/umd/swipe-action/style/index.js +15 -0
- package/umd/swipe-action/style/index.less +89 -0
- package/umd/swipe-action/type.d.ts +123 -0
- package/umd/swipe-action/type.js +17 -0
- package/umd/switch/index.d.ts +1 -1
- package/umd/switch/index.js +1 -1
- package/umd/tabs/tab-pane.js +5 -1
- package/umd/tag/index.d.ts +1 -1
- package/umd/tag/index.js +1 -1
- package/umd/textarea/index.d.ts +1 -1
- package/umd/textarea/index.js +1 -1
@@ -0,0 +1,147 @@
|
|
1
|
+
.arco-image-picker {
|
2
|
+
font-size: 0.28rem ;
|
3
|
+
}
|
4
|
+
.arco-image-picker-container {
|
5
|
+
display: -webkit-box;
|
6
|
+
display: -webkit-flex;
|
7
|
+
display: flex;
|
8
|
+
-webkit-flex-wrap: wrap;
|
9
|
+
flex-wrap: wrap;
|
10
|
+
}
|
11
|
+
.arco-image-picker-image {
|
12
|
+
position: relative;
|
13
|
+
width: 100%;
|
14
|
+
display: -webkit-box;
|
15
|
+
display: -webkit-flex;
|
16
|
+
display: flex;
|
17
|
+
-webkit-box-align: center;
|
18
|
+
-webkit-align-items: center;
|
19
|
+
align-items: center;
|
20
|
+
-webkit-box-pack: center;
|
21
|
+
-webkit-justify-content: center;
|
22
|
+
justify-content: center;
|
23
|
+
padding-top: 100%;
|
24
|
+
border-radius: 0.04rem ;
|
25
|
+
overflow: hidden;
|
26
|
+
}
|
27
|
+
.arco-image-picker-image-container {
|
28
|
+
position: absolute;
|
29
|
+
top: 0;
|
30
|
+
width: 100%;
|
31
|
+
height: 100%;
|
32
|
+
left: 0;
|
33
|
+
}
|
34
|
+
.arco-image-picker-image .arco-image {
|
35
|
+
height: 100%;
|
36
|
+
width: 100%;
|
37
|
+
}
|
38
|
+
.arco-image-picker-image-mask {
|
39
|
+
position: absolute;
|
40
|
+
left: 0;
|
41
|
+
top: 0;
|
42
|
+
width: 100%;
|
43
|
+
height: 100%;
|
44
|
+
z-index: 2;
|
45
|
+
}
|
46
|
+
.arco-image-picker-add {
|
47
|
+
background-color: #f7f8fa ;
|
48
|
+
border-radius: 0.04rem ;
|
49
|
+
position: relative;
|
50
|
+
width: 100%;
|
51
|
+
height: 100%;
|
52
|
+
padding-top: 100%;
|
53
|
+
}
|
54
|
+
.arco-image-picker-add-container {
|
55
|
+
position: absolute;
|
56
|
+
top: 0;
|
57
|
+
width: 100%;
|
58
|
+
height: 100%;
|
59
|
+
left: 0;
|
60
|
+
display: -webkit-box;
|
61
|
+
display: -webkit-flex;
|
62
|
+
display: flex;
|
63
|
+
-webkit-box-orient: vertical;
|
64
|
+
-webkit-box-direction: normal;
|
65
|
+
-webkit-flex-direction: column;
|
66
|
+
flex-direction: column;
|
67
|
+
-webkit-box-pack: center;
|
68
|
+
-webkit-justify-content: center;
|
69
|
+
justify-content: center;
|
70
|
+
-webkit-box-align: center;
|
71
|
+
-webkit-align-items: center;
|
72
|
+
align-items: center;
|
73
|
+
text-align: center;
|
74
|
+
font-size: 0.24rem ;
|
75
|
+
color: #86909c ;
|
76
|
+
}
|
77
|
+
.arco-image-picker-add-icon {
|
78
|
+
font-size: 0.6rem ;
|
79
|
+
color: #d8d8d8 ;
|
80
|
+
}
|
81
|
+
.arco-image-picker-add-icon svg {
|
82
|
+
display: block;
|
83
|
+
}
|
84
|
+
.arco-image-picker-add-disabled {
|
85
|
+
pointer-events: none;
|
86
|
+
}
|
87
|
+
.arco-image-picker-add-disabled .arco-image-picker-add-icon {
|
88
|
+
opacity: 0.7 ;
|
89
|
+
}
|
90
|
+
.arco-image-picker-add input {
|
91
|
+
position: absolute;
|
92
|
+
opacity: 0;
|
93
|
+
left: 0;
|
94
|
+
top: 0;
|
95
|
+
width: 100%;
|
96
|
+
height: 100%;
|
97
|
+
display: none;
|
98
|
+
}
|
99
|
+
.arco-image-picker-close {
|
100
|
+
position: absolute;
|
101
|
+
top: 0;
|
102
|
+
right: 0;
|
103
|
+
z-index: 2;
|
104
|
+
}
|
105
|
+
.arco-image-picker-close-icon {
|
106
|
+
display: -webkit-box;
|
107
|
+
display: -webkit-flex;
|
108
|
+
display: flex;
|
109
|
+
-webkit-box-align: center;
|
110
|
+
-webkit-align-items: center;
|
111
|
+
align-items: center;
|
112
|
+
-webkit-box-pack: center;
|
113
|
+
-webkit-justify-content: center;
|
114
|
+
justify-content: center;
|
115
|
+
font-size: 0.24rem ;
|
116
|
+
width: 0.36rem ;
|
117
|
+
height: 0.36rem ;
|
118
|
+
color: #ffffff ;
|
119
|
+
background: rgba(0, 0, 0, 0.3) ;
|
120
|
+
border-radius: 0 0.04rem ;
|
121
|
+
}
|
122
|
+
.arco-image-picker-error {
|
123
|
+
position: absolute;
|
124
|
+
top: 0;
|
125
|
+
left: 0;
|
126
|
+
width: 100%;
|
127
|
+
height: 100%;
|
128
|
+
display: -webkit-box;
|
129
|
+
display: -webkit-flex;
|
130
|
+
display: flex;
|
131
|
+
-webkit-box-orient: vertical;
|
132
|
+
-webkit-box-direction: normal;
|
133
|
+
-webkit-flex-direction: column;
|
134
|
+
flex-direction: column;
|
135
|
+
-webkit-box-pack: center;
|
136
|
+
-webkit-justify-content: center;
|
137
|
+
justify-content: center;
|
138
|
+
-webkit-box-align: center;
|
139
|
+
-webkit-align-items: center;
|
140
|
+
align-items: center;
|
141
|
+
background: rgba(0, 0, 0, 0.5) ;
|
142
|
+
color: #ffffff ;
|
143
|
+
font-size: 0.28rem ;
|
144
|
+
}
|
145
|
+
.arco-image-picker-disabled {
|
146
|
+
pointer-events: none;
|
147
|
+
}
|
@@ -0,0 +1,116 @@
|
|
1
|
+
@import '../../../style/mixin.less';
|
2
|
+
|
3
|
+
.@{prefix}-image-picker {
|
4
|
+
.use-var(font-size, image-picker-font-size);
|
5
|
+
&-container {
|
6
|
+
display: flex;
|
7
|
+
flex-wrap: wrap;
|
8
|
+
}
|
9
|
+
.container() {
|
10
|
+
position: absolute;
|
11
|
+
top: 0;
|
12
|
+
width: 100%;
|
13
|
+
height: 100%;
|
14
|
+
left: 0;
|
15
|
+
}
|
16
|
+
&-image {
|
17
|
+
position: relative;
|
18
|
+
width: 100%;
|
19
|
+
display: flex;
|
20
|
+
align-items: center;
|
21
|
+
justify-content: center;
|
22
|
+
padding-top: 100%;
|
23
|
+
.use-var(border-radius, image-picker-border-radius);
|
24
|
+
overflow: hidden;
|
25
|
+
&-container {
|
26
|
+
.container()
|
27
|
+
}
|
28
|
+
.@{prefix}-image {
|
29
|
+
height: 100%;
|
30
|
+
width: 100%;
|
31
|
+
}
|
32
|
+
&-mask {
|
33
|
+
position: absolute;
|
34
|
+
left: 0;
|
35
|
+
top: 0;
|
36
|
+
width: 100%;
|
37
|
+
height: 100%;
|
38
|
+
z-index: 2;
|
39
|
+
}
|
40
|
+
}
|
41
|
+
&-add {
|
42
|
+
.use-var(background-color, image-picker-add-background);
|
43
|
+
.use-var(border-radius, image-picker-border-radius);
|
44
|
+
position: relative;
|
45
|
+
width: 100%;
|
46
|
+
height: 100%;
|
47
|
+
padding-top: 100%;
|
48
|
+
&-container {
|
49
|
+
.container();
|
50
|
+
display: flex;
|
51
|
+
flex-direction: column;
|
52
|
+
justify-content: center;
|
53
|
+
align-items: center;
|
54
|
+
text-align: center;
|
55
|
+
.use-var(font-size, image-picker-add-text-font-size);
|
56
|
+
.use-var(color, image-picker-add-text-color);
|
57
|
+
}
|
58
|
+
&-icon {
|
59
|
+
.use-var(font-size, image-picker-add-icon-font-size);
|
60
|
+
.use-var(color, image-picker-add-icon-color);
|
61
|
+
svg {
|
62
|
+
display: block;
|
63
|
+
}
|
64
|
+
}
|
65
|
+
&-disabled {
|
66
|
+
pointer-events: none;
|
67
|
+
}
|
68
|
+
&-disabled &-icon {
|
69
|
+
.use-var(opacity, image-picker-disabled-opacity);
|
70
|
+
}
|
71
|
+
input {
|
72
|
+
position: absolute;
|
73
|
+
opacity: 0;
|
74
|
+
left: 0;
|
75
|
+
top: 0;
|
76
|
+
width: 100%;
|
77
|
+
height: 100%;
|
78
|
+
display: none;
|
79
|
+
}
|
80
|
+
}
|
81
|
+
&-close {
|
82
|
+
position: absolute;
|
83
|
+
top: 0;
|
84
|
+
right: 0;
|
85
|
+
z-index: 2;
|
86
|
+
&-icon {
|
87
|
+
display: flex;
|
88
|
+
align-items: center;
|
89
|
+
justify-content: center;
|
90
|
+
.use-var(font-size, image-picker-close-font-size);
|
91
|
+
.use-var(width, image-picker-close-width);
|
92
|
+
.use-var(height, image-picker-close-height);
|
93
|
+
.use-var(color, image-picker-close-color);
|
94
|
+
.use-var(background, image-picker-close-background);
|
95
|
+
.use-var(border-radius, image-picker-close-border-radius);
|
96
|
+
}
|
97
|
+
}
|
98
|
+
&-error {
|
99
|
+
position: absolute;
|
100
|
+
top: 0;
|
101
|
+
left: 0;
|
102
|
+
width: 100%;
|
103
|
+
height: 100%;
|
104
|
+
display: flex;
|
105
|
+
flex-direction: column;
|
106
|
+
justify-content: center;
|
107
|
+
align-items: center;
|
108
|
+
.use-var(background, image-picker-error-background);
|
109
|
+
.use-var(color, image-picker-error-color);
|
110
|
+
.use-var(font-size, image-picker-font-size);
|
111
|
+
}
|
112
|
+
}
|
113
|
+
|
114
|
+
.@{prefix}-image-picker-disabled {
|
115
|
+
pointer-events: none;
|
116
|
+
}
|
@@ -0,0 +1,174 @@
|
|
1
|
+
import { InputHTMLAttributes } from 'react';
|
2
|
+
import { ImageProps } from '../image';
|
3
|
+
export interface ImagePickItem {
|
4
|
+
/**
|
5
|
+
* 图片地址
|
6
|
+
* @en Image Url
|
7
|
+
*/
|
8
|
+
url: string;
|
9
|
+
/**
|
10
|
+
* 图片文件
|
11
|
+
* @en Image File
|
12
|
+
*/
|
13
|
+
file?: File;
|
14
|
+
/**
|
15
|
+
* 图片状态
|
16
|
+
* @en Image Status
|
17
|
+
* @default 以图片自身加载状态而定
|
18
|
+
* @default_en According to inner status of the image
|
19
|
+
*/
|
20
|
+
status?: 'loaded' | 'loading' | 'error';
|
21
|
+
}
|
22
|
+
export interface AdapterFile {
|
23
|
+
url?: string;
|
24
|
+
size: number;
|
25
|
+
name: string;
|
26
|
+
}
|
27
|
+
export interface SelectCallback {
|
28
|
+
files: AdapterFile[];
|
29
|
+
}
|
30
|
+
export interface ImagePickerProps {
|
31
|
+
/**
|
32
|
+
* 自定义类名
|
33
|
+
* @en Custom className
|
34
|
+
*/
|
35
|
+
className?: string;
|
36
|
+
/**
|
37
|
+
* 自定义样式
|
38
|
+
* @en Custom stylesheet
|
39
|
+
*/
|
40
|
+
style?: React.CSSProperties;
|
41
|
+
/**
|
42
|
+
* 已选择图片列表
|
43
|
+
* @en selected images list
|
44
|
+
*/
|
45
|
+
images: ImagePickItem[];
|
46
|
+
/**
|
47
|
+
* 可以选择的文件类型
|
48
|
+
* @en Available File Types
|
49
|
+
* @default 'image/*'
|
50
|
+
*/
|
51
|
+
accept?: string;
|
52
|
+
/**
|
53
|
+
* 是否支持多选
|
54
|
+
* @en Whether To Support Multiple Selection
|
55
|
+
*/
|
56
|
+
multiple?: boolean;
|
57
|
+
/**
|
58
|
+
* 图片选取模式 Image selection mode [capture MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)
|
59
|
+
* @en Whether To Support Multiple Selection [capture MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)
|
60
|
+
*/
|
61
|
+
capture?: InputHTMLAttributes<unknown>['capture'];
|
62
|
+
/**
|
63
|
+
* 一行展示图片张数
|
64
|
+
* @en The Number Of Pictures Displayed In A Row
|
65
|
+
* @default 3
|
66
|
+
*/
|
67
|
+
columns?: number;
|
68
|
+
/**
|
69
|
+
* 格子间的间距
|
70
|
+
* @en spacing between grids
|
71
|
+
* @default 8
|
72
|
+
*/
|
73
|
+
gutter?: number;
|
74
|
+
/**
|
75
|
+
* 最多选择图片张数,超出数量自动隐藏上传按钮,0表示不做限制
|
76
|
+
* @en max Pictures Can Choose
|
77
|
+
*/
|
78
|
+
limit?: number;
|
79
|
+
/**
|
80
|
+
* 文件大小限制,单位为K
|
81
|
+
* @en File size limit, in K
|
82
|
+
*/
|
83
|
+
maxSize?: number;
|
84
|
+
/**
|
85
|
+
* 是否隐藏删除Icon
|
86
|
+
* @en Whether to hide delete Icon
|
87
|
+
* @default false
|
88
|
+
*/
|
89
|
+
hideDelete?: boolean;
|
90
|
+
/**
|
91
|
+
* 是否隐藏选择Icon
|
92
|
+
* @en Whether to hide Select Icon
|
93
|
+
* @default false
|
94
|
+
*/
|
95
|
+
hideSelect?: boolean;
|
96
|
+
/**
|
97
|
+
* 是否总是展示选择Icon,默认情况下当图片数量超出limit值时会自动隐藏选择Icon
|
98
|
+
* @en Whether to always show Select Icon
|
99
|
+
* @default false
|
100
|
+
*/
|
101
|
+
alwaysShowSelect?: boolean;
|
102
|
+
/**
|
103
|
+
* 禁用选择和删除图片
|
104
|
+
* @en Disable Select & Delete Image
|
105
|
+
*/
|
106
|
+
disabled?: boolean;
|
107
|
+
/**
|
108
|
+
* 自定义删除图标
|
109
|
+
* @en Defined Delete Icon
|
110
|
+
*/
|
111
|
+
deleteIcon?: React.ReactNode;
|
112
|
+
/**
|
113
|
+
* 自定义选择图标
|
114
|
+
* @en Defined Select Icon
|
115
|
+
*/
|
116
|
+
selectIcon?: React.ReactNode;
|
117
|
+
/**
|
118
|
+
* 透传给图片的属性
|
119
|
+
* @en Attributes passed through to the image
|
120
|
+
*/
|
121
|
+
imageProps?: Partial<ImageProps>;
|
122
|
+
/**
|
123
|
+
* 自定义上传失败展示
|
124
|
+
* @en Defined upload failed display
|
125
|
+
*/
|
126
|
+
renderError?: (index?: number) => React.ReactNode | React.ReactNode;
|
127
|
+
/**
|
128
|
+
* 自定义上传中展示
|
129
|
+
* @en Defined uploading display
|
130
|
+
*/
|
131
|
+
renderLoading?: (index?: number) => React.ReactNode | React.ReactNode;
|
132
|
+
/**
|
133
|
+
* 上传方法
|
134
|
+
* @en upload function
|
135
|
+
*/
|
136
|
+
upload?: (file: ImagePickItem) => Promise<ImagePickItem | null>;
|
137
|
+
/**
|
138
|
+
* 已选图片列表发生变化
|
139
|
+
* @en The list of selected images changes
|
140
|
+
*/
|
141
|
+
onChange?: (fileList: ImagePickItem[]) => void;
|
142
|
+
/**
|
143
|
+
* 图片超过限制大小
|
144
|
+
* @en Image exceeds size limit
|
145
|
+
*/
|
146
|
+
onMaxSizeExceed?: (file: File) => void;
|
147
|
+
/**
|
148
|
+
* 选择张数超过限制
|
149
|
+
* @en The number of pictures exceeds the limit
|
150
|
+
*/
|
151
|
+
onLimitExceed?: (files: File[]) => void;
|
152
|
+
/**
|
153
|
+
* 图片点击
|
154
|
+
* @en click event
|
155
|
+
*/
|
156
|
+
onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>, image: ImagePickItem, index: number) => void;
|
157
|
+
/**
|
158
|
+
* 图片长按事件
|
159
|
+
* @en long press event
|
160
|
+
*/
|
161
|
+
onLongPress?: (e: React.TouchEvent<HTMLElement>, image: ImagePickItem, index: number) => void;
|
162
|
+
/**
|
163
|
+
* 图片选择适配器
|
164
|
+
* @en Select Adaptor
|
165
|
+
*/
|
166
|
+
selectAdapter?: () => Promise<SelectCallback>;
|
167
|
+
}
|
168
|
+
export interface ImagePickerRef {
|
169
|
+
/**
|
170
|
+
* 最外层 DOM 元素
|
171
|
+
* @en The outer DOM element of the component
|
172
|
+
*/
|
173
|
+
dom: HTMLDivElement | null;
|
174
|
+
}
|
@@ -268,9 +268,9 @@ declare const _default: React.ForwardRefExoticComponent<ImagePreviewProps & Reac
|
|
268
268
|
* @param {ImagePreviewProps} config configuration
|
269
269
|
* @returns {{ close: () => void; update: (newConfig: ImagePreviewProps) => void; }}
|
270
270
|
*/
|
271
|
-
open: (config: Pick<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>, "style" | "ref" | "key" | "getContainer" | "className" | "onClose" | "onTouchMove" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "onChange" | "onTouchEnd" | "onTouchStart" | "animateDurationSlide" | "loop" | "swipeable" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "lazyloadCount" | "onAfterChange" | "
|
271
|
+
open: (config: Pick<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>, "style" | "ref" | "key" | "getContainer" | "className" | "onClose" | "onTouchMove" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "onChange" | "onTouchEnd" | "onTouchStart" | "animateDurationSlide" | "loop" | "swipeable" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "lazyloadCount" | "onAfterChange" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => {
|
272
272
|
close: () => void;
|
273
|
-
update: (newConfig: Pick<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>, "style" | "ref" | "key" | "getContainer" | "className" | "onClose" | "onTouchMove" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "onChange" | "onTouchEnd" | "onTouchStart" | "animateDurationSlide" | "loop" | "swipeable" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "lazyloadCount" | "onAfterChange" | "
|
273
|
+
update: (newConfig: Pick<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>, "style" | "ref" | "key" | "getContainer" | "className" | "onClose" | "onTouchMove" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "onChange" | "onTouchEnd" | "onTouchStart" | "animateDurationSlide" | "loop" | "swipeable" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "lazyloadCount" | "onAfterChange" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => void; /**
|
274
274
|
* 是否可循环滑动
|
275
275
|
* @en Whether it can be swiped circularly
|
276
276
|
* @default false
|
@@ -280,7 +280,7 @@ declare const _default: React.ForwardRefExoticComponent<ImagePreviewProps & Reac
|
|
280
280
|
/**
|
281
281
|
* 图片预览组件,支持循环轮播、双指/双击缩放、缩略图放大效果。
|
282
282
|
* @en The image preview, supports circular rotation, two-finger/double-tap zoom, and thumbnail zoom effects.
|
283
|
-
* @type
|
283
|
+
* @type 信息展示
|
284
284
|
* @type_en Data Display
|
285
285
|
* @name 图片预览
|
286
286
|
* @name_en ImagePreview
|
@@ -1018,7 +1018,7 @@ function methodsGenerator(Comp) {
|
|
1018
1018
|
/**
|
1019
1019
|
* 图片预览组件,支持循环轮播、双指/双击缩放、缩略图放大效果。
|
1020
1020
|
* @en The image preview, supports circular rotation, two-finger/double-tap zoom, and thumbnail zoom effects.
|
1021
|
-
* @type
|
1021
|
+
* @type 信息展示
|
1022
1022
|
* @type_en Data Display
|
1023
1023
|
* @name 图片预览
|
1024
1024
|
* @name_en ImagePreview
|
package/cjs/index.d.ts
CHANGED
@@ -21,6 +21,7 @@ export { default as Ellipsis } from './ellipsis';
|
|
21
21
|
export { default as Grid } from './grid';
|
22
22
|
export { default as Image } from './image';
|
23
23
|
export { default as ShowMonitor } from './show-monitor';
|
24
|
+
export { default as ImagePicker } from './image-picker';
|
24
25
|
export { default as ImagePreview } from './image-preview';
|
25
26
|
export { default as Input } from './input';
|
26
27
|
export { default as LoadMore } from './load-more';
|
@@ -40,8 +41,10 @@ export { default as PullRefresh } from './pull-refresh';
|
|
40
41
|
export { default as Radio } from './radio';
|
41
42
|
export { default as Rate } from './rate';
|
42
43
|
export { default as Slider } from './slider';
|
44
|
+
export { default as SearchBar } from './search-bar';
|
43
45
|
export { default as Steps } from './steps';
|
44
46
|
export { default as Sticky } from './sticky';
|
47
|
+
export { default as SwipeAction } from './swipe-action';
|
45
48
|
export { default as SwipeLoad } from './swipe-load';
|
46
49
|
export { default as TabBar } from './tab-bar';
|
47
50
|
export { default as Tag } from './tag';
|
package/cjs/index.js
CHANGED
@@ -3,7 +3,7 @@
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
4
|
|
5
5
|
exports.__esModule = true;
|
6
|
-
exports.Transition = exports.Toast = exports.Textarea = exports.Tag = exports.Tabs = exports.TabBar = exports.Switch = exports.SwipeLoad = exports.Sticky = exports.Steps = exports.Slider = exports.ShowMonitor = exports.Rate = exports.Radio = exports.PullRefresh = exports.Progress = exports.Portal = exports.PopupSwiper = exports.Popup = exports.Popover = exports.PickerView = exports.Picker = exports.Pagination = exports.Notify = exports.NoticeBar = exports.NavBar = exports.Masking = exports.Loading = exports.LoadMore = exports.Input = exports.ImagePreview = exports.Image = exports.Grid = exports.Ellipsis = exports.DropdownMenu = exports.Dropdown = exports.Dialog = exports.DatePicker = exports.CountDown = exports.ContextProvider = exports.Collapse = exports.CircleProgress = exports.Checkbox = exports.Cell = exports.Carousel = exports.Button = exports.Badge = exports.Avatar = exports.ActionSheet = void 0;
|
6
|
+
exports.Transition = exports.Toast = exports.Textarea = exports.Tag = exports.Tabs = exports.TabBar = exports.Switch = exports.SwipeLoad = exports.SwipeAction = exports.Sticky = exports.Steps = exports.Slider = exports.ShowMonitor = exports.SearchBar = exports.Rate = exports.Radio = exports.PullRefresh = exports.Progress = exports.Portal = exports.PopupSwiper = exports.Popup = exports.Popover = exports.PickerView = exports.Picker = exports.Pagination = exports.Notify = exports.NoticeBar = exports.NavBar = exports.Masking = exports.Loading = exports.LoadMore = exports.Input = exports.ImagePreview = exports.ImagePicker = exports.Image = exports.Grid = exports.Ellipsis = exports.DropdownMenu = exports.Dropdown = exports.Dialog = exports.DatePicker = exports.CountDown = exports.ContextProvider = exports.Collapse = exports.CircleProgress = exports.Checkbox = exports.Cell = exports.Carousel = exports.Button = exports.Badge = exports.Avatar = exports.ActionSheet = void 0;
|
7
7
|
|
8
8
|
var _actionSheet = _interopRequireDefault(require("./action-sheet"));
|
9
9
|
|
@@ -97,6 +97,10 @@ var _showMonitor = _interopRequireDefault(require("./show-monitor"));
|
|
97
97
|
|
98
98
|
exports.ShowMonitor = _showMonitor.default;
|
99
99
|
|
100
|
+
var _imagePicker = _interopRequireDefault(require("./image-picker"));
|
101
|
+
|
102
|
+
exports.ImagePicker = _imagePicker.default;
|
103
|
+
|
100
104
|
var _imagePreview = _interopRequireDefault(require("./image-preview"));
|
101
105
|
|
102
106
|
exports.ImagePreview = _imagePreview.default;
|
@@ -173,6 +177,10 @@ var _slider = _interopRequireDefault(require("./slider"));
|
|
173
177
|
|
174
178
|
exports.Slider = _slider.default;
|
175
179
|
|
180
|
+
var _searchBar = _interopRequireDefault(require("./search-bar"));
|
181
|
+
|
182
|
+
exports.SearchBar = _searchBar.default;
|
183
|
+
|
176
184
|
var _steps = _interopRequireDefault(require("./steps"));
|
177
185
|
|
178
186
|
exports.Steps = _steps.default;
|
@@ -181,6 +189,10 @@ var _sticky = _interopRequireDefault(require("./sticky"));
|
|
181
189
|
|
182
190
|
exports.Sticky = _sticky.default;
|
183
191
|
|
192
|
+
var _swipeAction = _interopRequireDefault(require("./swipe-action"));
|
193
|
+
|
194
|
+
exports.SwipeAction = _swipeAction.default;
|
195
|
+
|
184
196
|
var _swipeLoad = _interopRequireDefault(require("./swipe-load"));
|
185
197
|
|
186
198
|
exports.SwipeLoad = _swipeLoad.default;
|
package/cjs/input/hooks.js
CHANGED
@@ -45,6 +45,8 @@ function useInputLogic(props, inputRef) {
|
|
45
45
|
clearShowType = _props$clearShowType === void 0 ? 'focus' : _props$clearShowType,
|
46
46
|
_props$clearIcon = props.clearIcon,
|
47
47
|
clearIcon = _props$clearIcon === void 0 ? /*#__PURE__*/_react.default.createElement(_IconClear.default, null) : _props$clearIcon,
|
48
|
+
_props$preventEventWh = props.preventEventWhenClearing,
|
49
|
+
preventEventWhenClearing = _props$preventEventWh === void 0 ? true : _props$preventEventWh,
|
48
50
|
onClear = props.onClear,
|
49
51
|
autoFocus = props.autoFocus;
|
50
52
|
|
@@ -57,8 +59,30 @@ function useInputLogic(props, inputRef) {
|
|
57
59
|
}),
|
58
60
|
showClear = _useState2[0],
|
59
61
|
toggleClear = _useState2[1];
|
60
|
-
|
61
|
-
|
62
|
+
/**
|
63
|
+
* clear相关问题背景
|
64
|
+
* 如果点击clear按钮之前已经是focusing状态了,那么在点完clear按钮之后会手动聚焦一下
|
65
|
+
* 该行为将导致onClear事件触发时,也会触发一次onBlur和onFocus事件,可能影响一些组件外的代码逻辑
|
66
|
+
*
|
67
|
+
* e.g. 假设input按钮右侧有一个按钮仅在聚焦时展示
|
68
|
+
* 实现代码大致是:onBlur设置其visible为false,onFocus设置其visible为true
|
69
|
+
* 那么这个按钮就会因为clear的点击造成一瞬的闪烁
|
70
|
+
*
|
71
|
+
* 解决思路
|
72
|
+
* 先来看一下,在输入框已激活的状态时,点击清除按钮后,组件的一些事件的触发顺序
|
73
|
+
* handleBlur -> handleClear -> handleFocus -> onBlur(外部回调) -> onFocus(外部回调)
|
74
|
+
* 可以看到外部的onBlur和onFocus回调都是在handleClear函数之后被调用
|
75
|
+
* 因此可以在handleClear中设置一个shouldPreventEvent的boolean标志
|
76
|
+
* 如果这个标志为true,则跳过调用外部的onBlur和onFocus,并在最后再将标志置回false
|
77
|
+
*
|
78
|
+
*/
|
79
|
+
|
80
|
+
|
81
|
+
var _useState3 = (0, _react.useState)(false),
|
82
|
+
isFocusing = _useState3[0],
|
83
|
+
setIsFocusing = _useState3[1];
|
84
|
+
|
85
|
+
var shouldPreventEvent = (0, _react.useRef)(false);
|
62
86
|
var actualInputValue = value !== void 0 ? value : inputValue;
|
63
87
|
var system = (0, _helpers.useSystem)();
|
64
88
|
var wrapRef = (0, _react.useRef)(null);
|
@@ -126,7 +150,12 @@ function useInputLogic(props, inputRef) {
|
|
126
150
|
|
127
151
|
function handleFocus(e) {
|
128
152
|
(0, _mobileUtils.nextTick)(function () {
|
129
|
-
|
153
|
+
if (preventEventWhenClearing && shouldPreventEvent.current) {
|
154
|
+
shouldPreventEvent.current = false;
|
155
|
+
return;
|
156
|
+
}
|
157
|
+
|
158
|
+
setIsFocusing(true);
|
130
159
|
clearShowType === 'focus' && toggleClear(true);
|
131
160
|
onFocus && onFocus(e);
|
132
161
|
});
|
@@ -134,7 +163,11 @@ function useInputLogic(props, inputRef) {
|
|
134
163
|
|
135
164
|
function handleBlur(e) {
|
136
165
|
(0, _mobileUtils.nextTick)(function () {
|
137
|
-
|
166
|
+
if (preventEventWhenClearing && shouldPreventEvent.current) {
|
167
|
+
return;
|
168
|
+
}
|
169
|
+
|
170
|
+
setIsFocusing(false);
|
138
171
|
clearShowType === 'focus' && toggleClear(false);
|
139
172
|
onBlur && onBlur(e);
|
140
173
|
});
|
@@ -143,7 +176,7 @@ function useInputLogic(props, inputRef) {
|
|
143
176
|
function handleClick(e) {
|
144
177
|
// 安卓才会有键盘切换不过来的问题,ios不开启此项,因为blur之后不能再自动focus
|
145
178
|
// @en Android will have the problem that the keyboard cannot be switched. iOS does not enable this, because it can no longer automatically focus after blur.
|
146
|
-
if (blurBeforeFocus && system === 'android' && !
|
179
|
+
if (blurBeforeFocus && system === 'android' && !isFocusing) {
|
147
180
|
inputRef.current && inputRef.current.blur();
|
148
181
|
(0, _mobileUtils.nextTick)(function () {
|
149
182
|
inputRef.current && inputRef.current.focus();
|
@@ -166,18 +199,26 @@ function useInputLogic(props, inputRef) {
|
|
166
199
|
onClear && onClear(e); // 当点击clear前是focus时强制执行focus
|
167
200
|
// @en Enforce focus when focus is before clicking clear
|
168
201
|
|
169
|
-
if (
|
202
|
+
if (isFocusing) {
|
203
|
+
if (preventEventWhenClearing) {
|
204
|
+
shouldPreventEvent.current = true;
|
205
|
+
}
|
206
|
+
|
170
207
|
inputRef.current && inputRef.current.focus();
|
171
208
|
}
|
172
209
|
});
|
173
210
|
}
|
174
211
|
|
212
|
+
function renderPendNode(pend) {
|
213
|
+
return typeof pend === 'function' ? pend(isFocusing, actualInputValue) : pend;
|
214
|
+
}
|
215
|
+
|
175
216
|
function renderWrapper(prefixCls, type, children) {
|
176
217
|
return /*#__PURE__*/_react.default.createElement("div", {
|
177
218
|
className: prefixCls + "-container all-border-box " + (className || ''),
|
178
219
|
style: style,
|
179
220
|
ref: wrapRef
|
180
|
-
}, prepend, /*#__PURE__*/_react.default.createElement("div", {
|
221
|
+
}, renderPendNode(prepend), /*#__PURE__*/_react.default.createElement("div", {
|
181
222
|
className: (0, _mobileUtils.cls)(prefixCls + "-wrap", type, "border-" + border, system, {
|
182
223
|
disabled: disabled
|
183
224
|
}, {
|
@@ -196,7 +237,7 @@ function useInputLogic(props, inputRef) {
|
|
196
237
|
onClick: handleClear
|
197
238
|
}, clearIcon) : null, suffix ? /*#__PURE__*/_react.default.createElement("div", {
|
198
239
|
className: prefixCls + "-suffix"
|
199
|
-
}, suffix) : null), append);
|
240
|
+
}, suffix) : null), renderPendNode(append));
|
200
241
|
}
|
201
242
|
|
202
243
|
return {
|