@mantine/hooks 7.0.0-alpha.9 → 7.0.0-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/cjs/use-callback-ref/use-callback-ref.js +8 -5
- package/cjs/use-callback-ref/use-callback-ref.js.map +1 -1
- package/cjs/use-click-outside/use-click-outside.js +19 -21
- package/cjs/use-click-outside/use-click-outside.js.map +1 -1
- package/cjs/use-clipboard/use-clipboard.js +22 -26
- package/cjs/use-clipboard/use-clipboard.js.map +1 -1
- package/cjs/use-color-scheme/use-color-scheme.js +1 -3
- package/cjs/use-color-scheme/use-color-scheme.js.map +1 -1
- package/cjs/use-counter/use-counter.js +25 -9
- package/cjs/use-counter/use-counter.js.map +1 -1
- package/cjs/use-debounced-callback/use-debounced-callback.js +7 -7
- package/cjs/use-debounced-callback/use-debounced-callback.js.map +1 -1
- package/cjs/use-debounced-state/use-debounced-state.js +18 -19
- package/cjs/use-debounced-state/use-debounced-state.js.map +1 -1
- package/cjs/use-debounced-value/use-debounced-value.js +24 -25
- package/cjs/use-debounced-value/use-debounced-value.js.map +1 -1
- package/cjs/use-did-update/use-did-update.js +14 -11
- package/cjs/use-did-update/use-did-update.js.map +1 -1
- package/cjs/use-disclosure/use-disclosure.js +24 -24
- package/cjs/use-disclosure/use-disclosure.js.map +1 -1
- package/cjs/use-document-title/use-document-title.js +5 -5
- package/cjs/use-document-title/use-document-title.js.map +1 -1
- package/cjs/use-document-visibility/use-document-visibility.js +7 -7
- package/cjs/use-document-visibility/use-document-visibility.js.map +1 -1
- package/cjs/use-event-listener/use-event-listener.js +12 -9
- package/cjs/use-event-listener/use-event-listener.js.map +1 -1
- package/cjs/use-eye-dropper/use-eye-dropper.js +15 -12
- package/cjs/use-eye-dropper/use-eye-dropper.js.map +1 -1
- package/cjs/use-favicon/use-favicon.js +25 -23
- package/cjs/use-favicon/use-favicon.js.map +1 -1
- package/cjs/use-focus-return/use-focus-return.js +25 -29
- package/cjs/use-focus-return/use-focus-return.js.map +1 -1
- package/cjs/use-focus-trap/create-aria-hider.js +36 -36
- package/cjs/use-focus-trap/create-aria-hider.js.map +1 -1
- package/cjs/use-focus-trap/scope-tab.js +15 -15
- package/cjs/use-focus-trap/scope-tab.js.map +1 -1
- package/cjs/use-focus-trap/tabbable.js +33 -35
- package/cjs/use-focus-trap/tabbable.js.map +1 -1
- package/cjs/use-focus-trap/use-focus-trap.js +67 -67
- package/cjs/use-focus-trap/use-focus-trap.js.map +1 -1
- package/cjs/use-focus-within/use-focus-within.js +40 -37
- package/cjs/use-focus-within/use-focus-within.js.map +1 -1
- package/cjs/use-force-update/use-force-update.js +3 -3
- package/cjs/use-force-update/use-force-update.js.map +1 -1
- package/cjs/use-fullscreen/use-fullscreen.js +79 -83
- package/cjs/use-fullscreen/use-fullscreen.js.map +1 -1
- package/cjs/use-hash/use-hash.js +16 -16
- package/cjs/use-hash/use-hash.js.map +1 -1
- package/cjs/use-headroom/use-headroom.js +23 -23
- package/cjs/use-headroom/use-headroom.js.map +1 -1
- package/cjs/use-hotkeys/parse-hotkey.js +64 -49
- package/cjs/use-hotkeys/parse-hotkey.js.map +1 -1
- package/cjs/use-hotkeys/use-hotkeys.js +21 -22
- package/cjs/use-hotkeys/use-hotkeys.js.map +1 -1
- package/cjs/use-hover/use-hover.js +17 -17
- package/cjs/use-hover/use-hover.js.map +1 -1
- package/cjs/use-id/use-id.js +12 -12
- package/cjs/use-id/use-id.js.map +1 -1
- package/cjs/use-id/use-react-id.js +3 -3
- package/cjs/use-id/use-react-id.js.map +1 -1
- package/cjs/use-idle/use-idle.js +42 -26
- package/cjs/use-idle/use-idle.js.map +1 -1
- package/cjs/use-input-state/use-input-state.js +18 -22
- package/cjs/use-input-state/use-input-state.js.map +1 -1
- package/cjs/use-intersection/use-intersection.js +20 -17
- package/cjs/use-intersection/use-intersection.js.map +1 -1
- package/cjs/use-interval/use-interval.js +27 -28
- package/cjs/use-interval/use-interval.js.map +1 -1
- package/cjs/use-isomorphic-effect/use-isomorphic-effect.js +1 -3
- package/cjs/use-isomorphic-effect/use-isomorphic-effect.js.map +1 -1
- package/cjs/use-list-state/use-list-state.js +76 -55
- package/cjs/use-list-state/use-list-state.js.map +1 -1
- package/cjs/use-local-storage/create-storage.js +79 -71
- package/cjs/use-local-storage/create-storage.js.map +1 -1
- package/cjs/use-local-storage/use-local-storage.js +1 -1
- package/cjs/use-local-storage/use-local-storage.js.map +1 -1
- package/cjs/use-logger/use-logger.js +8 -9
- package/cjs/use-logger/use-logger.js.map +1 -1
- package/cjs/use-media-query/use-media-query.js +28 -31
- package/cjs/use-media-query/use-media-query.js.map +1 -1
- package/cjs/use-merged-ref/use-merged-ref.js +9 -11
- package/cjs/use-merged-ref/use-merged-ref.js.map +1 -1
- package/cjs/use-mouse/use-mouse.js +46 -25
- package/cjs/use-mouse/use-mouse.js.map +1 -1
- package/cjs/use-move/use-move.js +87 -88
- package/cjs/use-move/use-move.js.map +1 -1
- package/cjs/use-network/use-network.js +51 -32
- package/cjs/use-network/use-network.js.map +1 -1
- package/cjs/use-os/use-os.js +30 -30
- package/cjs/use-os/use-os.js.map +1 -1
- package/cjs/use-page-leave/use-page-leave.js +4 -4
- package/cjs/use-page-leave/use-page-leave.js.map +1 -1
- package/cjs/use-pagination/use-pagination.js +63 -58
- package/cjs/use-pagination/use-pagination.js.map +1 -1
- package/cjs/use-previous/use-previous.js +5 -5
- package/cjs/use-previous/use-previous.js.map +1 -1
- package/cjs/use-queue/use-queue.js +24 -24
- package/cjs/use-queue/use-queue.js.map +1 -1
- package/cjs/use-reduced-motion/use-reduced-motion.js +1 -1
- package/cjs/use-reduced-motion/use-reduced-motion.js.map +1 -1
- package/cjs/use-resize-observer/use-resize-observer.js +39 -38
- package/cjs/use-resize-observer/use-resize-observer.js.map +1 -1
- package/cjs/use-scroll-into-view/use-scroll-into-view.js +78 -75
- package/cjs/use-scroll-into-view/use-scroll-into-view.js.map +1 -1
- package/cjs/use-scroll-into-view/utils/ease-in-out-quad.js +1 -1
- package/cjs/use-scroll-into-view/utils/ease-in-out-quad.js.map +1 -1
- package/cjs/use-scroll-into-view/utils/get-relative-position.js +53 -46
- package/cjs/use-scroll-into-view/utils/get-relative-position.js.map +1 -1
- package/cjs/use-scroll-into-view/utils/get-scroll-start.js +9 -10
- package/cjs/use-scroll-into-view/utils/get-scroll-start.js.map +1 -1
- package/cjs/use-scroll-into-view/utils/set-scroll-param.js +11 -14
- package/cjs/use-scroll-into-view/utils/set-scroll-param.js.map +1 -1
- package/cjs/use-session-storage/use-session-storage.js +1 -1
- package/cjs/use-session-storage/use-session-storage.js.map +1 -1
- package/cjs/use-set-state/use-set-state.js +22 -3
- package/cjs/use-set-state/use-set-state.js.map +1 -1
- package/cjs/use-shallow-effect/use-shallow-effect.js +22 -22
- package/cjs/use-shallow-effect/use-shallow-effect.js.map +1 -1
- package/cjs/use-text-selection/use-text-selection.js +12 -12
- package/cjs/use-text-selection/use-text-selection.js.map +1 -1
- package/cjs/use-timeout/use-timeout.js +22 -22
- package/cjs/use-timeout/use-timeout.js.map +1 -1
- package/cjs/use-toggle/use-toggle.js +6 -6
- package/cjs/use-toggle/use-toggle.js.map +1 -1
- package/cjs/use-uncontrolled/use-uncontrolled.js +18 -10
- package/cjs/use-uncontrolled/use-uncontrolled.js.map +1 -1
- package/cjs/use-validated-state/use-validated-state.js +17 -14
- package/cjs/use-validated-state/use-validated-state.js.map +1 -1
- package/cjs/use-viewport-size/use-viewport-size.js +12 -12
- package/cjs/use-viewport-size/use-viewport-size.js.map +1 -1
- package/cjs/use-window-event/use-window-event.js +4 -4
- package/cjs/use-window-event/use-window-event.js.map +1 -1
- package/cjs/use-window-scroll/use-window-scroll.js +17 -19
- package/cjs/use-window-scroll/use-window-scroll.js.map +1 -1
- package/cjs/utils/clamp/clamp.js +10 -1
- package/cjs/utils/clamp/clamp.js.map +1 -1
- package/cjs/utils/lower-first/lower-first.js +1 -1
- package/cjs/utils/lower-first/lower-first.js.map +1 -1
- package/cjs/utils/random-id/random-id.js +1 -1
- package/cjs/utils/random-id/random-id.js.map +1 -1
- package/cjs/utils/range/range.js +2 -2
- package/cjs/utils/range/range.js.map +1 -1
- package/cjs/utils/shallow-equal/shallow-equal.js +19 -19
- package/cjs/utils/shallow-equal/shallow-equal.js.map +1 -1
- package/cjs/utils/upper-first/upper-first.js +1 -1
- package/cjs/utils/upper-first/upper-first.js.map +1 -1
- package/esm/use-callback-ref/use-callback-ref.js +8 -5
- package/esm/use-callback-ref/use-callback-ref.js.map +1 -1
- package/esm/use-click-outside/use-click-outside.js +19 -21
- package/esm/use-click-outside/use-click-outside.js.map +1 -1
- package/esm/use-clipboard/use-clipboard.js +22 -26
- package/esm/use-clipboard/use-clipboard.js.map +1 -1
- package/esm/use-color-scheme/use-color-scheme.js +1 -3
- package/esm/use-color-scheme/use-color-scheme.js.map +1 -1
- package/esm/use-counter/use-counter.js +25 -9
- package/esm/use-counter/use-counter.js.map +1 -1
- package/esm/use-debounced-callback/use-debounced-callback.js +7 -7
- package/esm/use-debounced-callback/use-debounced-callback.js.map +1 -1
- package/esm/use-debounced-state/use-debounced-state.js +18 -19
- package/esm/use-debounced-state/use-debounced-state.js.map +1 -1
- package/esm/use-debounced-value/use-debounced-value.js +24 -25
- package/esm/use-debounced-value/use-debounced-value.js.map +1 -1
- package/esm/use-did-update/use-did-update.js +14 -11
- package/esm/use-did-update/use-did-update.js.map +1 -1
- package/esm/use-disclosure/use-disclosure.js +24 -24
- package/esm/use-disclosure/use-disclosure.js.map +1 -1
- package/esm/use-document-title/use-document-title.js +5 -5
- package/esm/use-document-title/use-document-title.js.map +1 -1
- package/esm/use-document-visibility/use-document-visibility.js +7 -7
- package/esm/use-document-visibility/use-document-visibility.js.map +1 -1
- package/esm/use-event-listener/use-event-listener.js +12 -9
- package/esm/use-event-listener/use-event-listener.js.map +1 -1
- package/esm/use-eye-dropper/use-eye-dropper.js +15 -12
- package/esm/use-eye-dropper/use-eye-dropper.js.map +1 -1
- package/esm/use-favicon/use-favicon.js +25 -23
- package/esm/use-favicon/use-favicon.js.map +1 -1
- package/esm/use-focus-return/use-focus-return.js +25 -29
- package/esm/use-focus-return/use-focus-return.js.map +1 -1
- package/esm/use-focus-trap/create-aria-hider.js +36 -36
- package/esm/use-focus-trap/create-aria-hider.js.map +1 -1
- package/esm/use-focus-trap/scope-tab.js +15 -15
- package/esm/use-focus-trap/scope-tab.js.map +1 -1
- package/esm/use-focus-trap/tabbable.js +33 -35
- package/esm/use-focus-trap/tabbable.js.map +1 -1
- package/esm/use-focus-trap/use-focus-trap.js +67 -67
- package/esm/use-focus-trap/use-focus-trap.js.map +1 -1
- package/esm/use-focus-within/use-focus-within.js +40 -37
- package/esm/use-focus-within/use-focus-within.js.map +1 -1
- package/esm/use-force-update/use-force-update.js +3 -3
- package/esm/use-force-update/use-force-update.js.map +1 -1
- package/esm/use-fullscreen/use-fullscreen.js +79 -83
- package/esm/use-fullscreen/use-fullscreen.js.map +1 -1
- package/esm/use-hash/use-hash.js +16 -16
- package/esm/use-hash/use-hash.js.map +1 -1
- package/esm/use-headroom/use-headroom.js +23 -23
- package/esm/use-headroom/use-headroom.js.map +1 -1
- package/esm/use-hotkeys/parse-hotkey.js +64 -49
- package/esm/use-hotkeys/parse-hotkey.js.map +1 -1
- package/esm/use-hotkeys/use-hotkeys.js +21 -22
- package/esm/use-hotkeys/use-hotkeys.js.map +1 -1
- package/esm/use-hover/use-hover.js +17 -17
- package/esm/use-hover/use-hover.js.map +1 -1
- package/esm/use-id/use-id.js +12 -12
- package/esm/use-id/use-id.js.map +1 -1
- package/esm/use-id/use-react-id.js +3 -3
- package/esm/use-id/use-react-id.js.map +1 -1
- package/esm/use-idle/use-idle.js +42 -26
- package/esm/use-idle/use-idle.js.map +1 -1
- package/esm/use-input-state/use-input-state.js +18 -22
- package/esm/use-input-state/use-input-state.js.map +1 -1
- package/esm/use-intersection/use-intersection.js +20 -17
- package/esm/use-intersection/use-intersection.js.map +1 -1
- package/esm/use-interval/use-interval.js +27 -28
- package/esm/use-interval/use-interval.js.map +1 -1
- package/esm/use-isomorphic-effect/use-isomorphic-effect.js +1 -3
- package/esm/use-isomorphic-effect/use-isomorphic-effect.js.map +1 -1
- package/esm/use-list-state/use-list-state.js +76 -55
- package/esm/use-list-state/use-list-state.js.map +1 -1
- package/esm/use-local-storage/create-storage.js +79 -71
- package/esm/use-local-storage/create-storage.js.map +1 -1
- package/esm/use-local-storage/use-local-storage.js +1 -1
- package/esm/use-local-storage/use-local-storage.js.map +1 -1
- package/esm/use-logger/use-logger.js +8 -9
- package/esm/use-logger/use-logger.js.map +1 -1
- package/esm/use-media-query/use-media-query.js +28 -31
- package/esm/use-media-query/use-media-query.js.map +1 -1
- package/esm/use-merged-ref/use-merged-ref.js +9 -11
- package/esm/use-merged-ref/use-merged-ref.js.map +1 -1
- package/esm/use-mouse/use-mouse.js +46 -25
- package/esm/use-mouse/use-mouse.js.map +1 -1
- package/esm/use-move/use-move.js +87 -88
- package/esm/use-move/use-move.js.map +1 -1
- package/esm/use-network/use-network.js +51 -32
- package/esm/use-network/use-network.js.map +1 -1
- package/esm/use-os/use-os.js +30 -30
- package/esm/use-os/use-os.js.map +1 -1
- package/esm/use-page-leave/use-page-leave.js +4 -4
- package/esm/use-page-leave/use-page-leave.js.map +1 -1
- package/esm/use-pagination/use-pagination.js +63 -58
- package/esm/use-pagination/use-pagination.js.map +1 -1
- package/esm/use-previous/use-previous.js +5 -5
- package/esm/use-previous/use-previous.js.map +1 -1
- package/esm/use-queue/use-queue.js +24 -24
- package/esm/use-queue/use-queue.js.map +1 -1
- package/esm/use-reduced-motion/use-reduced-motion.js +1 -1
- package/esm/use-reduced-motion/use-reduced-motion.js.map +1 -1
- package/esm/use-resize-observer/use-resize-observer.js +39 -38
- package/esm/use-resize-observer/use-resize-observer.js.map +1 -1
- package/esm/use-scroll-into-view/use-scroll-into-view.js +78 -75
- package/esm/use-scroll-into-view/use-scroll-into-view.js.map +1 -1
- package/esm/use-scroll-into-view/utils/ease-in-out-quad.js +1 -1
- package/esm/use-scroll-into-view/utils/ease-in-out-quad.js.map +1 -1
- package/esm/use-scroll-into-view/utils/get-relative-position.js +53 -46
- package/esm/use-scroll-into-view/utils/get-relative-position.js.map +1 -1
- package/esm/use-scroll-into-view/utils/get-scroll-start.js +9 -10
- package/esm/use-scroll-into-view/utils/get-scroll-start.js.map +1 -1
- package/esm/use-scroll-into-view/utils/set-scroll-param.js +11 -14
- package/esm/use-scroll-into-view/utils/set-scroll-param.js.map +1 -1
- package/esm/use-session-storage/use-session-storage.js +1 -1
- package/esm/use-session-storage/use-session-storage.js.map +1 -1
- package/esm/use-set-state/use-set-state.js +22 -3
- package/esm/use-set-state/use-set-state.js.map +1 -1
- package/esm/use-shallow-effect/use-shallow-effect.js +22 -22
- package/esm/use-shallow-effect/use-shallow-effect.js.map +1 -1
- package/esm/use-text-selection/use-text-selection.js +12 -12
- package/esm/use-text-selection/use-text-selection.js.map +1 -1
- package/esm/use-timeout/use-timeout.js +22 -22
- package/esm/use-timeout/use-timeout.js.map +1 -1
- package/esm/use-toggle/use-toggle.js +6 -6
- package/esm/use-toggle/use-toggle.js.map +1 -1
- package/esm/use-uncontrolled/use-uncontrolled.js +18 -10
- package/esm/use-uncontrolled/use-uncontrolled.js.map +1 -1
- package/esm/use-validated-state/use-validated-state.js +17 -14
- package/esm/use-validated-state/use-validated-state.js.map +1 -1
- package/esm/use-viewport-size/use-viewport-size.js +12 -12
- package/esm/use-viewport-size/use-viewport-size.js.map +1 -1
- package/esm/use-window-event/use-window-event.js +4 -4
- package/esm/use-window-event/use-window-event.js.map +1 -1
- package/esm/use-window-scroll/use-window-scroll.js +17 -19
- package/esm/use-window-scroll/use-window-scroll.js.map +1 -1
- package/esm/utils/clamp/clamp.js +10 -1
- package/esm/utils/clamp/clamp.js.map +1 -1
- package/esm/utils/lower-first/lower-first.js +1 -1
- package/esm/utils/lower-first/lower-first.js.map +1 -1
- package/esm/utils/random-id/random-id.js +1 -1
- package/esm/utils/random-id/random-id.js.map +1 -1
- package/esm/utils/range/range.js +2 -2
- package/esm/utils/range/range.js.map +1 -1
- package/esm/utils/shallow-equal/shallow-equal.js +19 -19
- package/esm/utils/shallow-equal/shallow-equal.js.map +1 -1
- package/esm/utils/upper-first/upper-first.js +1 -1
- package/esm/utils/upper-first/upper-first.js.map +1 -1
- package/lib/use-hover/use-hover.d.ts +1 -0
- package/lib/use-mouse/use-mouse.d.ts +1 -0
- package/lib/use-move/use-move.d.ts +2 -1
- package/lib/use-scroll-into-view/use-scroll-into-view.d.ts +1 -0
- package/lib/utils/clamp/clamp.d.ts +1 -1
- package/package.json +5 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-network.js","sources":["../../src/use-network/use-network.ts"],"sourcesContent":["import { useState, useEffect, useCallback } from 'react';\nimport { useWindowEvent } from '../use-window-event/use-window-event';\n\ninterface NetworkStatus {\n downlink?: number;\n downlinkMax?: number;\n effectiveType?: 'slow-2g' | '2g' | '3g' | '4g';\n rtt?: number;\n saveData?: boolean;\n type?: 'bluetooth' | 'cellular' | 'ethernet' | 'wifi' | 'wimax' | 'none' | 'other' | 'unknown';\n}\n\nfunction getConnection(): NetworkStatus {\n if (typeof navigator === 'undefined') {\n return {};\n }\n\n const _navigator = navigator as any;\n const connection: any =\n _navigator.connection || _navigator.mozConnection || _navigator.webkitConnection;\n\n if (!connection) {\n return {};\n }\n\n return {\n downlink: connection?.downlink,\n downlinkMax: connection?.downlinkMax,\n effectiveType: connection?.effectiveType,\n rtt: connection?.rtt,\n saveData: connection?.saveData,\n type: connection?.type,\n };\n}\n\nexport function useNetwork() {\n const [status, setStatus] = useState<{ online: boolean } & NetworkStatus>({\n online: true,\n });\n const handleConnectionChange = useCallback(\n () => setStatus((current) => ({ ...current, ...getConnection() })),\n []\n );\n\n useWindowEvent('online', () => setStatus({ online: true, ...getConnection() }));\n useWindowEvent('offline', () => setStatus({ online: false, ...getConnection() }));\n\n useEffect(() => {\n const _navigator = navigator as any;\n\n if (_navigator.connection) {\n setStatus({ online: _navigator.onLine, ...getConnection() });\n _navigator.connection.addEventListener('change', handleConnectionChange);\n return () => _navigator.connection.removeEventListener('change', handleConnectionChange);\n }\n\n return undefined;\n }, []);\n\n return status;\n}\n"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"use-network.js","sources":["../../src/use-network/use-network.ts"],"sourcesContent":["import { useState, useEffect, useCallback } from 'react';\nimport { useWindowEvent } from '../use-window-event/use-window-event';\n\ninterface NetworkStatus {\n downlink?: number;\n downlinkMax?: number;\n effectiveType?: 'slow-2g' | '2g' | '3g' | '4g';\n rtt?: number;\n saveData?: boolean;\n type?: 'bluetooth' | 'cellular' | 'ethernet' | 'wifi' | 'wimax' | 'none' | 'other' | 'unknown';\n}\n\nfunction getConnection(): NetworkStatus {\n if (typeof navigator === 'undefined') {\n return {};\n }\n\n const _navigator = navigator as any;\n const connection: any =\n _navigator.connection || _navigator.mozConnection || _navigator.webkitConnection;\n\n if (!connection) {\n return {};\n }\n\n return {\n downlink: connection?.downlink,\n downlinkMax: connection?.downlinkMax,\n effectiveType: connection?.effectiveType,\n rtt: connection?.rtt,\n saveData: connection?.saveData,\n type: connection?.type,\n };\n}\n\nexport function useNetwork() {\n const [status, setStatus] = useState<{ online: boolean } & NetworkStatus>({\n online: true,\n });\n const handleConnectionChange = useCallback(\n () => setStatus((current) => ({ ...current, ...getConnection() })),\n []\n );\n\n useWindowEvent('online', () => setStatus({ online: true, ...getConnection() }));\n useWindowEvent('offline', () => setStatus({ online: false, ...getConnection() }));\n\n useEffect(() => {\n const _navigator = navigator as any;\n\n if (_navigator.connection) {\n setStatus({ online: _navigator.onLine, ...getConnection() });\n _navigator.connection.addEventListener('change', handleConnectionChange);\n return () => _navigator.connection.removeEventListener('change', handleConnectionChange);\n }\n\n return undefined;\n }, []);\n\n return status;\n}\n"],"names":[],"mappings":"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"}
|
package/esm/use-os/use-os.js
CHANGED
|
@@ -2,38 +2,38 @@ import { useState } from 'react';
|
|
|
2
2
|
import { useIsomorphicEffect } from '../use-isomorphic-effect/use-isomorphic-effect.js';
|
|
3
3
|
|
|
4
4
|
function getOS() {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
5
|
+
if (typeof window === "undefined") {
|
|
6
|
+
return "undetermined";
|
|
7
|
+
}
|
|
8
|
+
const { userAgent } = window.navigator;
|
|
9
|
+
const macosPlatforms = /(Macintosh)|(MacIntel)|(MacPPC)|(Mac68K)/i;
|
|
10
|
+
const windowsPlatforms = /(Win32)|(Win64)|(Windows)|(WinCE)/i;
|
|
11
|
+
const iosPlatforms = /(iPhone)|(iPad)|(iPod)/i;
|
|
12
|
+
if (macosPlatforms.test(userAgent)) {
|
|
13
|
+
return "macos";
|
|
14
|
+
}
|
|
15
|
+
if (iosPlatforms.test(userAgent)) {
|
|
16
|
+
return "ios";
|
|
17
|
+
}
|
|
18
|
+
if (windowsPlatforms.test(userAgent)) {
|
|
19
|
+
return "windows";
|
|
20
|
+
}
|
|
21
|
+
if (/Android/i.test(userAgent)) {
|
|
22
|
+
return "android";
|
|
23
|
+
}
|
|
24
|
+
if (/Linux/i.test(userAgent)) {
|
|
25
|
+
return "linux";
|
|
26
|
+
}
|
|
27
|
+
return "undetermined";
|
|
28
28
|
}
|
|
29
29
|
function useOs(options = { getValueInEffect: true }) {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
30
|
+
const [value, setValue] = useState(options.getValueInEffect ? "undetermined" : getOS());
|
|
31
|
+
useIsomorphicEffect(() => {
|
|
32
|
+
if (options.getValueInEffect) {
|
|
33
|
+
setValue(getOS);
|
|
34
|
+
}
|
|
35
|
+
}, []);
|
|
36
|
+
return value;
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
export { useOs };
|
package/esm/use-os/use-os.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-os.js","sources":["../../src/use-os/use-os.ts"],"sourcesContent":["import { useState } from 'react';\nimport { useIsomorphicEffect } from '../use-isomorphic-effect/use-isomorphic-effect';\n\nexport type OS = 'undetermined' | 'macos' | 'ios' | 'windows' | 'android' | 'linux';\n\nfunction getOS(): OS {\n if (typeof window === 'undefined') {\n return 'undetermined';\n }\n\n const { userAgent } = window.navigator;\n const macosPlatforms = /(Macintosh)|(MacIntel)|(MacPPC)|(Mac68K)/i;\n const windowsPlatforms = /(Win32)|(Win64)|(Windows)|(WinCE)/i;\n const iosPlatforms = /(iPhone)|(iPad)|(iPod)/i;\n\n if (macosPlatforms.test(userAgent)) {\n return 'macos';\n }\n if (iosPlatforms.test(userAgent)) {\n return 'ios';\n }\n if (windowsPlatforms.test(userAgent)) {\n return 'windows';\n }\n if (/Android/i.test(userAgent)) {\n return 'android';\n }\n if (/Linux/i.test(userAgent)) {\n return 'linux';\n }\n\n return 'undetermined';\n}\n\ninterface UseOsOptions {\n getValueInEffect: boolean;\n}\n\nexport function useOs(options: UseOsOptions = { getValueInEffect: true }): OS {\n const [value, setValue] = useState<OS>(options.getValueInEffect ? 'undetermined' : getOS());\n\n useIsomorphicEffect(() => {\n if (options.getValueInEffect) {\n setValue(getOS);\n }\n }, []);\n\n return value;\n}\n"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"use-os.js","sources":["../../src/use-os/use-os.ts"],"sourcesContent":["import { useState } from 'react';\nimport { useIsomorphicEffect } from '../use-isomorphic-effect/use-isomorphic-effect';\n\nexport type OS = 'undetermined' | 'macos' | 'ios' | 'windows' | 'android' | 'linux';\n\nfunction getOS(): OS {\n if (typeof window === 'undefined') {\n return 'undetermined';\n }\n\n const { userAgent } = window.navigator;\n const macosPlatforms = /(Macintosh)|(MacIntel)|(MacPPC)|(Mac68K)/i;\n const windowsPlatforms = /(Win32)|(Win64)|(Windows)|(WinCE)/i;\n const iosPlatforms = /(iPhone)|(iPad)|(iPod)/i;\n\n if (macosPlatforms.test(userAgent)) {\n return 'macos';\n }\n if (iosPlatforms.test(userAgent)) {\n return 'ios';\n }\n if (windowsPlatforms.test(userAgent)) {\n return 'windows';\n }\n if (/Android/i.test(userAgent)) {\n return 'android';\n }\n if (/Linux/i.test(userAgent)) {\n return 'linux';\n }\n\n return 'undetermined';\n}\n\ninterface UseOsOptions {\n getValueInEffect: boolean;\n}\n\nexport function useOs(options: UseOsOptions = { getValueInEffect: true }): OS {\n const [value, setValue] = useState<OS>(options.getValueInEffect ? 'undetermined' : getOS());\n\n useIsomorphicEffect(() => {\n if (options.getValueInEffect) {\n setValue(getOS);\n }\n }, []);\n\n return value;\n}\n"],"names":[],"mappings":";;;AAEA,SAAS,KAAK,GAAG;AACjB,EAAE,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;AACrC,IAAI,OAAO,cAAc,CAAC;AAC1B,GAAG;AACH,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,SAAS,CAAC;AACzC,EAAE,MAAM,cAAc,GAAG,2CAA2C,CAAC;AACrE,EAAE,MAAM,gBAAgB,GAAG,oCAAoC,CAAC;AAChE,EAAE,MAAM,YAAY,GAAG,yBAAyB,CAAC;AACjD,EAAE,IAAI,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;AACtC,IAAI,OAAO,OAAO,CAAC;AACnB,GAAG;AACH,EAAE,IAAI,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;AACpC,IAAI,OAAO,KAAK,CAAC;AACjB,GAAG;AACH,EAAE,IAAI,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;AACxC,IAAI,OAAO,SAAS,CAAC;AACrB,GAAG;AACH,EAAE,IAAI,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;AAClC,IAAI,OAAO,SAAS,CAAC;AACrB,GAAG;AACH,EAAE,IAAI,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;AAChC,IAAI,OAAO,OAAO,CAAC;AACnB,GAAG;AACH,EAAE,OAAO,cAAc,CAAC;AACxB,CAAC;AACM,SAAS,KAAK,CAAC,OAAO,GAAG,EAAE,gBAAgB,EAAE,IAAI,EAAE,EAAE;AAC5D,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,gBAAgB,GAAG,cAAc,GAAG,KAAK,EAAE,CAAC,CAAC;AAC1F,EAAE,mBAAmB,CAAC,MAAM;AAC5B,IAAI,IAAI,OAAO,CAAC,gBAAgB,EAAE;AAClC,MAAM,QAAQ,CAAC,KAAK,CAAC,CAAC;AACtB,KAAK;AACL,GAAG,EAAE,EAAE,CAAC,CAAC;AACT,EAAE,OAAO,KAAK,CAAC;AACf;;;;"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { useEffect } from 'react';
|
|
2
2
|
|
|
3
3
|
function usePageLeave(onPageLeave) {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
useEffect(() => {
|
|
5
|
+
document.documentElement.addEventListener("mouseleave", onPageLeave);
|
|
6
|
+
return () => document.documentElement.removeEventListener("mouseleave", onPageLeave);
|
|
7
|
+
}, []);
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
export { usePageLeave };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-page-leave.js","sources":["../../src/use-page-leave/use-page-leave.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nexport function usePageLeave(onPageLeave: () => void) {\n useEffect(() => {\n document.documentElement.addEventListener('mouseleave', onPageLeave);\n return () => document.documentElement.removeEventListener('mouseleave', onPageLeave);\n }, []);\n}\n"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"use-page-leave.js","sources":["../../src/use-page-leave/use-page-leave.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nexport function usePageLeave(onPageLeave: () => void) {\n useEffect(() => {\n document.documentElement.addEventListener('mouseleave', onPageLeave);\n return () => document.documentElement.removeEventListener('mouseleave', onPageLeave);\n }, []);\n}\n"],"names":[],"mappings":";;AACO,SAAS,YAAY,CAAC,WAAW,EAAE;AAC1C,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,QAAQ,CAAC,eAAe,CAAC,gBAAgB,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;AACzE,IAAI,OAAO,MAAM,QAAQ,CAAC,eAAe,CAAC,mBAAmB,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;AACzF,GAAG,EAAE,EAAE,CAAC,CAAC;AACT;;;;"}
|
|
@@ -2,64 +2,69 @@ import { useMemo } from 'react';
|
|
|
2
2
|
import { useUncontrolled } from '../use-uncontrolled/use-uncontrolled.js';
|
|
3
3
|
import { range } from '../utils/range/range.js';
|
|
4
4
|
|
|
5
|
-
const DOTS =
|
|
6
|
-
function usePagination({
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
5
|
+
const DOTS = "dots";
|
|
6
|
+
function usePagination({
|
|
7
|
+
total,
|
|
8
|
+
siblings = 1,
|
|
9
|
+
boundaries = 1,
|
|
10
|
+
page,
|
|
11
|
+
initialPage = 1,
|
|
12
|
+
onChange
|
|
13
|
+
}) {
|
|
14
|
+
const _total = Math.max(Math.trunc(total), 0);
|
|
15
|
+
const [activePage, setActivePage] = useUncontrolled({
|
|
16
|
+
value: page,
|
|
17
|
+
onChange,
|
|
18
|
+
defaultValue: initialPage,
|
|
19
|
+
finalValue: initialPage
|
|
20
|
+
});
|
|
21
|
+
const setPage = (pageNumber) => {
|
|
22
|
+
if (pageNumber <= 0) {
|
|
23
|
+
setActivePage(1);
|
|
24
|
+
} else if (pageNumber > _total) {
|
|
25
|
+
setActivePage(_total);
|
|
26
|
+
} else {
|
|
27
|
+
setActivePage(pageNumber);
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
const next = () => setPage(activePage + 1);
|
|
31
|
+
const previous = () => setPage(activePage - 1);
|
|
32
|
+
const first = () => setPage(1);
|
|
33
|
+
const last = () => setPage(_total);
|
|
34
|
+
const paginationRange = useMemo(() => {
|
|
35
|
+
const totalPageNumbers = siblings * 2 + 3 + boundaries * 2;
|
|
36
|
+
if (totalPageNumbers >= _total) {
|
|
37
|
+
return range(1, _total);
|
|
38
|
+
}
|
|
39
|
+
const leftSiblingIndex = Math.max(activePage - siblings, boundaries);
|
|
40
|
+
const rightSiblingIndex = Math.min(activePage + siblings, _total - boundaries);
|
|
41
|
+
const shouldShowLeftDots = leftSiblingIndex > boundaries + 2;
|
|
42
|
+
const shouldShowRightDots = rightSiblingIndex < _total - (boundaries + 1);
|
|
43
|
+
if (!shouldShowLeftDots && shouldShowRightDots) {
|
|
44
|
+
const leftItemCount = siblings * 2 + boundaries + 2;
|
|
45
|
+
return [...range(1, leftItemCount), DOTS, ...range(_total - (boundaries - 1), _total)];
|
|
46
|
+
}
|
|
47
|
+
if (shouldShowLeftDots && !shouldShowRightDots) {
|
|
48
|
+
const rightItemCount = boundaries + 1 + 2 * siblings;
|
|
49
|
+
return [...range(1, boundaries), DOTS, ...range(_total - rightItemCount, _total)];
|
|
50
|
+
}
|
|
51
|
+
return [
|
|
52
|
+
...range(1, boundaries),
|
|
53
|
+
DOTS,
|
|
54
|
+
...range(leftSiblingIndex, rightSiblingIndex),
|
|
55
|
+
DOTS,
|
|
56
|
+
...range(_total - boundaries + 1, _total)
|
|
57
|
+
];
|
|
58
|
+
}, [_total, siblings, activePage]);
|
|
59
|
+
return {
|
|
60
|
+
range: paginationRange,
|
|
61
|
+
active: activePage,
|
|
62
|
+
setPage,
|
|
63
|
+
next,
|
|
64
|
+
previous,
|
|
65
|
+
first,
|
|
66
|
+
last
|
|
67
|
+
};
|
|
63
68
|
}
|
|
64
69
|
|
|
65
70
|
export { DOTS, usePagination };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-pagination.js","sources":["../../src/use-pagination/use-pagination.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { useUncontrolled } from '../use-uncontrolled/use-uncontrolled';\nimport { range } from '../utils';\n\nexport const DOTS = 'dots';\n\nexport interface PaginationParams {\n /** Page selected on initial render, defaults to 1 */\n initialPage?: number;\n\n /** Controlled active page number */\n page?: number;\n\n /** Total amount of pages */\n total: number;\n\n /** Siblings amount on left/right side of selected page, defaults to 1 */\n siblings?: number;\n\n /** Amount of elements visible on left/right edges, defaults to 1 */\n boundaries?: number;\n\n /** Callback fired after change of each page */\n onChange?: (page: number) => void;\n}\n\nexport function usePagination({\n total,\n siblings = 1,\n boundaries = 1,\n page,\n initialPage = 1,\n onChange,\n}: PaginationParams) {\n const _total = Math.max(Math.trunc(total), 0);\n const [activePage, setActivePage] = useUncontrolled({\n value: page,\n onChange,\n defaultValue: initialPage,\n finalValue: initialPage,\n });\n\n const setPage = (pageNumber: number) => {\n if (pageNumber <= 0) {\n setActivePage(1);\n } else if (pageNumber > _total) {\n setActivePage(_total);\n } else {\n setActivePage(pageNumber);\n }\n };\n\n const next = () => setPage(activePage + 1);\n const previous = () => setPage(activePage - 1);\n const first = () => setPage(1);\n const last = () => setPage(_total);\n\n const paginationRange = useMemo((): (number | 'dots')[] => {\n const totalPageNumbers = siblings * 2 + 3 + boundaries * 2;\n if (totalPageNumbers >= _total) {\n return range(1, _total);\n }\n\n const leftSiblingIndex = Math.max(activePage - siblings, boundaries);\n const rightSiblingIndex = Math.min(activePage + siblings, _total - boundaries);\n\n const shouldShowLeftDots = leftSiblingIndex > boundaries + 2;\n const shouldShowRightDots = rightSiblingIndex < _total - (boundaries + 1);\n\n if (!shouldShowLeftDots && shouldShowRightDots) {\n const leftItemCount = siblings * 2 + boundaries + 2;\n return [...range(1, leftItemCount), DOTS, ...range(_total - (boundaries - 1), _total)];\n }\n\n if (shouldShowLeftDots && !shouldShowRightDots) {\n const rightItemCount = boundaries + 1 + 2 * siblings;\n return [...range(1, boundaries), DOTS, ...range(_total - rightItemCount, _total)];\n }\n\n return [\n ...range(1, boundaries),\n DOTS,\n ...range(leftSiblingIndex, rightSiblingIndex),\n DOTS,\n ...range(_total - boundaries + 1, _total),\n ];\n }, [_total, siblings, activePage]);\n\n return {\n range: paginationRange,\n active: activePage,\n setPage,\n next,\n previous,\n first,\n last,\n };\n}\n"],"names":[],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"use-pagination.js","sources":["../../src/use-pagination/use-pagination.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { useUncontrolled } from '../use-uncontrolled/use-uncontrolled';\nimport { range } from '../utils';\n\nexport const DOTS = 'dots';\n\nexport interface PaginationParams {\n /** Page selected on initial render, defaults to 1 */\n initialPage?: number;\n\n /** Controlled active page number */\n page?: number;\n\n /** Total amount of pages */\n total: number;\n\n /** Siblings amount on left/right side of selected page, defaults to 1 */\n siblings?: number;\n\n /** Amount of elements visible on left/right edges, defaults to 1 */\n boundaries?: number;\n\n /** Callback fired after change of each page */\n onChange?: (page: number) => void;\n}\n\nexport function usePagination({\n total,\n siblings = 1,\n boundaries = 1,\n page,\n initialPage = 1,\n onChange,\n}: PaginationParams) {\n const _total = Math.max(Math.trunc(total), 0);\n const [activePage, setActivePage] = useUncontrolled({\n value: page,\n onChange,\n defaultValue: initialPage,\n finalValue: initialPage,\n });\n\n const setPage = (pageNumber: number) => {\n if (pageNumber <= 0) {\n setActivePage(1);\n } else if (pageNumber > _total) {\n setActivePage(_total);\n } else {\n setActivePage(pageNumber);\n }\n };\n\n const next = () => setPage(activePage + 1);\n const previous = () => setPage(activePage - 1);\n const first = () => setPage(1);\n const last = () => setPage(_total);\n\n const paginationRange = useMemo((): (number | 'dots')[] => {\n const totalPageNumbers = siblings * 2 + 3 + boundaries * 2;\n if (totalPageNumbers >= _total) {\n return range(1, _total);\n }\n\n const leftSiblingIndex = Math.max(activePage - siblings, boundaries);\n const rightSiblingIndex = Math.min(activePage + siblings, _total - boundaries);\n\n const shouldShowLeftDots = leftSiblingIndex > boundaries + 2;\n const shouldShowRightDots = rightSiblingIndex < _total - (boundaries + 1);\n\n if (!shouldShowLeftDots && shouldShowRightDots) {\n const leftItemCount = siblings * 2 + boundaries + 2;\n return [...range(1, leftItemCount), DOTS, ...range(_total - (boundaries - 1), _total)];\n }\n\n if (shouldShowLeftDots && !shouldShowRightDots) {\n const rightItemCount = boundaries + 1 + 2 * siblings;\n return [...range(1, boundaries), DOTS, ...range(_total - rightItemCount, _total)];\n }\n\n return [\n ...range(1, boundaries),\n DOTS,\n ...range(leftSiblingIndex, rightSiblingIndex),\n DOTS,\n ...range(_total - boundaries + 1, _total),\n ];\n }, [_total, siblings, activePage]);\n\n return {\n range: paginationRange,\n active: activePage,\n setPage,\n next,\n previous,\n first,\n last,\n };\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { useRef, useEffect } from 'react';
|
|
2
2
|
|
|
3
3
|
function usePrevious(value) {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
4
|
+
const ref = useRef();
|
|
5
|
+
useEffect(() => {
|
|
6
|
+
ref.current = value;
|
|
7
|
+
}, [value]);
|
|
8
|
+
return ref.current;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
export { usePrevious };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-previous.js","sources":["../../src/use-previous/use-previous.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nexport function usePrevious<T>(value: T): T | undefined {\n const ref = useRef<T>();\n\n useEffect(() => {\n ref.current = value;\n }, [value]);\n\n return ref.current;\n}\n"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"use-previous.js","sources":["../../src/use-previous/use-previous.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nexport function usePrevious<T>(value: T): T | undefined {\n const ref = useRef<T>();\n\n useEffect(() => {\n ref.current = value;\n }, [value]);\n\n return ref.current;\n}\n"],"names":[],"mappings":";;AACO,SAAS,WAAW,CAAC,KAAK,EAAE;AACnC,EAAE,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;AACvB,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,GAAG,CAAC,OAAO,GAAG,KAAK,CAAC;AACxB,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;AACd,EAAE,OAAO,GAAG,CAAC,OAAO,CAAC;AACrB;;;;"}
|
|
@@ -1,32 +1,32 @@
|
|
|
1
1
|
import { useState } from 'react';
|
|
2
2
|
|
|
3
3
|
function useQueue({ initialValues = [], limit }) {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
return {
|
|
11
|
-
state: results.slice(0, limit),
|
|
12
|
-
queue: results.slice(limit),
|
|
13
|
-
};
|
|
14
|
-
});
|
|
15
|
-
const update = (fn) => setState((current) => {
|
|
16
|
-
const results = fn([...current.state, ...current.queue]);
|
|
17
|
-
return {
|
|
18
|
-
state: results.slice(0, limit),
|
|
19
|
-
queue: results.slice(limit),
|
|
20
|
-
};
|
|
21
|
-
});
|
|
22
|
-
const cleanQueue = () => setState((current) => ({ state: current.state, queue: [] }));
|
|
4
|
+
const [{ state, queue }, setState] = useState({
|
|
5
|
+
state: initialValues.slice(0, limit),
|
|
6
|
+
queue: initialValues.slice(limit)
|
|
7
|
+
});
|
|
8
|
+
const add = (...items) => setState((current) => {
|
|
9
|
+
const results = [...current.state, ...current.queue, ...items];
|
|
23
10
|
return {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
add,
|
|
27
|
-
update,
|
|
28
|
-
cleanQueue,
|
|
11
|
+
state: results.slice(0, limit),
|
|
12
|
+
queue: results.slice(limit)
|
|
29
13
|
};
|
|
14
|
+
});
|
|
15
|
+
const update = (fn) => setState((current) => {
|
|
16
|
+
const results = fn([...current.state, ...current.queue]);
|
|
17
|
+
return {
|
|
18
|
+
state: results.slice(0, limit),
|
|
19
|
+
queue: results.slice(limit)
|
|
20
|
+
};
|
|
21
|
+
});
|
|
22
|
+
const cleanQueue = () => setState((current) => ({ state: current.state, queue: [] }));
|
|
23
|
+
return {
|
|
24
|
+
state,
|
|
25
|
+
queue,
|
|
26
|
+
add,
|
|
27
|
+
update,
|
|
28
|
+
cleanQueue
|
|
29
|
+
};
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
export { useQueue };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-queue.js","sources":["../../src/use-queue/use-queue.ts"],"sourcesContent":["import { useState } from 'react';\n\nexport function useQueue<T>({ initialValues = [], limit }: { initialValues?: T[]; limit: number }) {\n const [{ state, queue }, setState] = useState({\n state: initialValues.slice(0, limit),\n queue: initialValues.slice(limit),\n });\n\n const add = (...items: T[]) =>\n setState((current) => {\n const results = [...current.state, ...current.queue, ...items];\n\n return {\n state: results.slice(0, limit),\n queue: results.slice(limit),\n };\n });\n\n const update = (fn: (state: T[]) => T[]) =>\n setState((current) => {\n const results = fn([...current.state, ...current.queue]);\n\n return {\n state: results.slice(0, limit),\n queue: results.slice(limit),\n };\n });\n\n const cleanQueue = () => setState((current) => ({ state: current.state, queue: [] }));\n\n return {\n state,\n queue,\n add,\n update,\n cleanQueue,\n };\n}\n"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"use-queue.js","sources":["../../src/use-queue/use-queue.ts"],"sourcesContent":["import { useState } from 'react';\n\nexport function useQueue<T>({ initialValues = [], limit }: { initialValues?: T[]; limit: number }) {\n const [{ state, queue }, setState] = useState({\n state: initialValues.slice(0, limit),\n queue: initialValues.slice(limit),\n });\n\n const add = (...items: T[]) =>\n setState((current) => {\n const results = [...current.state, ...current.queue, ...items];\n\n return {\n state: results.slice(0, limit),\n queue: results.slice(limit),\n };\n });\n\n const update = (fn: (state: T[]) => T[]) =>\n setState((current) => {\n const results = fn([...current.state, ...current.queue]);\n\n return {\n state: results.slice(0, limit),\n queue: results.slice(limit),\n };\n });\n\n const cleanQueue = () => setState((current) => ({ state: current.state, queue: [] }));\n\n return {\n state,\n queue,\n add,\n update,\n cleanQueue,\n };\n}\n"],"names":[],"mappings":";;AACO,SAAS,QAAQ,CAAC,EAAE,aAAa,GAAG,EAAE,EAAE,KAAK,EAAE,EAAE;AACxD,EAAE,MAAM,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC;AAChD,IAAI,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC;AACxC,IAAI,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,KAAK,CAAC;AACrC,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,GAAG,GAAG,CAAC,GAAG,KAAK,KAAK,QAAQ,CAAC,CAAC,OAAO,KAAK;AAClD,IAAI,MAAM,OAAO,GAAG,CAAC,GAAG,OAAO,CAAC,KAAK,EAAE,GAAG,OAAO,CAAC,KAAK,EAAE,GAAG,KAAK,CAAC,CAAC;AACnE,IAAI,OAAO;AACX,MAAM,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC;AACpC,MAAM,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC;AACjC,KAAK,CAAC;AACN,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,MAAM,GAAG,CAAC,EAAE,KAAK,QAAQ,CAAC,CAAC,OAAO,KAAK;AAC/C,IAAI,MAAM,OAAO,GAAG,EAAE,CAAC,CAAC,GAAG,OAAO,CAAC,KAAK,EAAE,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;AAC7D,IAAI,OAAO;AACX,MAAM,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC;AACpC,MAAM,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC;AACjC,KAAK,CAAC;AACN,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,UAAU,GAAG,MAAM,QAAQ,CAAC,CAAC,OAAO,MAAM,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;AACxF,EAAE,OAAO;AACT,IAAI,KAAK;AACT,IAAI,KAAK;AACT,IAAI,GAAG;AACP,IAAI,MAAM;AACV,IAAI,UAAU;AACd,GAAG,CAAC;AACJ;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { useMediaQuery } from '../use-media-query/use-media-query.js';
|
|
2
2
|
|
|
3
3
|
function useReducedMotion(initialValue, options) {
|
|
4
|
-
|
|
4
|
+
return useMediaQuery("(prefers-reduced-motion: reduce)", initialValue, options);
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
export { useReducedMotion };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-reduced-motion.js","sources":["../../src/use-reduced-motion/use-reduced-motion.ts"],"sourcesContent":["import { useMediaQuery, UseMediaQueryOptions } from '../use-media-query/use-media-query';\n\nexport function useReducedMotion(initialValue?: boolean, options?: UseMediaQueryOptions) {\n return useMediaQuery('(prefers-reduced-motion: reduce)', initialValue, options);\n}\n"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"use-reduced-motion.js","sources":["../../src/use-reduced-motion/use-reduced-motion.ts"],"sourcesContent":["import { useMediaQuery, UseMediaQueryOptions } from '../use-media-query/use-media-query';\n\nexport function useReducedMotion(initialValue?: boolean, options?: UseMediaQueryOptions) {\n return useMediaQuery('(prefers-reduced-motion: reduce)', initialValue, options);\n}\n"],"names":[],"mappings":";;AACO,SAAS,gBAAgB,CAAC,YAAY,EAAE,OAAO,EAAE;AACxD,EAAE,OAAO,aAAa,CAAC,kCAAkC,EAAE,YAAY,EAAE,OAAO,CAAC,CAAC;AAClF;;;;"}
|
|
@@ -1,48 +1,49 @@
|
|
|
1
1
|
import { useRef, useState, useMemo, useEffect } from 'react';
|
|
2
2
|
|
|
3
3
|
const defaultState = {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
4
|
+
x: 0,
|
|
5
|
+
y: 0,
|
|
6
|
+
width: 0,
|
|
7
|
+
height: 0,
|
|
8
|
+
top: 0,
|
|
9
|
+
left: 0,
|
|
10
|
+
bottom: 0,
|
|
11
|
+
right: 0
|
|
12
12
|
};
|
|
13
13
|
function useResizeObserver() {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
}
|
|
41
|
-
|
|
14
|
+
const frameID = useRef(0);
|
|
15
|
+
const ref = useRef(null);
|
|
16
|
+
const [rect, setRect] = useState(defaultState);
|
|
17
|
+
const observer = useMemo(
|
|
18
|
+
() => typeof window !== "undefined" ? new ResizeObserver((entries) => {
|
|
19
|
+
const entry = entries[0];
|
|
20
|
+
if (entry) {
|
|
21
|
+
cancelAnimationFrame(frameID.current);
|
|
22
|
+
frameID.current = requestAnimationFrame(() => {
|
|
23
|
+
if (ref.current) {
|
|
24
|
+
setRect(entry.contentRect);
|
|
25
|
+
}
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
}) : null,
|
|
29
|
+
[]
|
|
30
|
+
);
|
|
31
|
+
useEffect(() => {
|
|
32
|
+
if (ref.current) {
|
|
33
|
+
observer == null ? void 0 : observer.observe(ref.current);
|
|
34
|
+
}
|
|
35
|
+
return () => {
|
|
36
|
+
observer == null ? void 0 : observer.disconnect();
|
|
37
|
+
if (frameID.current) {
|
|
38
|
+
cancelAnimationFrame(frameID.current);
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
}, [ref.current]);
|
|
42
|
+
return [ref, rect];
|
|
42
43
|
}
|
|
43
44
|
function useElementSize() {
|
|
44
|
-
|
|
45
|
-
|
|
45
|
+
const [ref, { width, height }] = useResizeObserver();
|
|
46
|
+
return { ref, width, height };
|
|
46
47
|
}
|
|
47
48
|
|
|
48
49
|
export { useElementSize, useResizeObserver };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-resize-observer.js","sources":["../../src/use-resize-observer/use-resize-observer.ts"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\n\ntype ObserverRect = Omit<DOMRectReadOnly, 'toJSON'>;\n\nconst defaultState: ObserverRect = {\n x: 0,\n y: 0,\n width: 0,\n height: 0,\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n};\n\nexport function useResizeObserver<T extends HTMLElement = any>() {\n const frameID = useRef(0);\n const ref = useRef<T>(null);\n\n const [rect, setRect] = useState<ObserverRect>(defaultState);\n\n const observer = useMemo(\n () =>\n typeof window !== 'undefined'\n ? new ResizeObserver((entries: any) => {\n const entry = entries[0];\n\n if (entry) {\n cancelAnimationFrame(frameID.current);\n\n frameID.current = requestAnimationFrame(() => {\n if (ref.current) {\n setRect(entry.contentRect);\n }\n });\n }\n })\n : null,\n []\n );\n\n useEffect(() => {\n if (ref.current) {\n observer?.observe(ref.current);\n }\n\n return () => {\n observer?.disconnect();\n\n if (frameID.current) {\n cancelAnimationFrame(frameID.current);\n }\n };\n }, [ref.current]);\n\n return [ref, rect] as const;\n}\n\nexport function useElementSize<T extends HTMLElement = any>() {\n const [ref, { width, height }] = useResizeObserver<T>();\n return { ref, width, height };\n}\n"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"use-resize-observer.js","sources":["../../src/use-resize-observer/use-resize-observer.ts"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\n\ntype ObserverRect = Omit<DOMRectReadOnly, 'toJSON'>;\n\nconst defaultState: ObserverRect = {\n x: 0,\n y: 0,\n width: 0,\n height: 0,\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n};\n\nexport function useResizeObserver<T extends HTMLElement = any>() {\n const frameID = useRef(0);\n const ref = useRef<T>(null);\n\n const [rect, setRect] = useState<ObserverRect>(defaultState);\n\n const observer = useMemo(\n () =>\n typeof window !== 'undefined'\n ? new ResizeObserver((entries: any) => {\n const entry = entries[0];\n\n if (entry) {\n cancelAnimationFrame(frameID.current);\n\n frameID.current = requestAnimationFrame(() => {\n if (ref.current) {\n setRect(entry.contentRect);\n }\n });\n }\n })\n : null,\n []\n );\n\n useEffect(() => {\n if (ref.current) {\n observer?.observe(ref.current);\n }\n\n return () => {\n observer?.disconnect();\n\n if (frameID.current) {\n cancelAnimationFrame(frameID.current);\n }\n };\n }, [ref.current]);\n\n return [ref, rect] as const;\n}\n\nexport function useElementSize<T extends HTMLElement = any>() {\n const [ref, { width, height }] = useResizeObserver<T>();\n return { ref, width, height };\n}\n"],"names":[],"mappings":";;AACA,MAAM,YAAY,GAAG;AACrB,EAAE,CAAC,EAAE,CAAC;AACN,EAAE,CAAC,EAAE,CAAC;AACN,EAAE,KAAK,EAAE,CAAC;AACV,EAAE,MAAM,EAAE,CAAC;AACX,EAAE,GAAG,EAAE,CAAC;AACR,EAAE,IAAI,EAAE,CAAC;AACT,EAAE,MAAM,EAAE,CAAC;AACX,EAAE,KAAK,EAAE,CAAC;AACV,CAAC,CAAC;AACK,SAAS,iBAAiB,GAAG;AACpC,EAAE,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;AAC5B,EAAE,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AAC3B,EAAE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;AACjD,EAAE,MAAM,QAAQ,GAAG,OAAO;AAC1B,IAAI,MAAM,OAAO,MAAM,KAAK,WAAW,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,KAAK;AAC1E,MAAM,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;AAC/B,MAAM,IAAI,KAAK,EAAE;AACjB,QAAQ,oBAAoB,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;AAC9C,QAAQ,OAAO,CAAC,OAAO,GAAG,qBAAqB,CAAC,MAAM;AACtD,UAAU,IAAI,GAAG,CAAC,OAAO,EAAE;AAC3B,YAAY,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;AACvC,WAAW;AACX,SAAS,CAAC,CAAC;AACX,OAAO;AACP,KAAK,CAAC,GAAG,IAAI;AACb,IAAI,EAAE;AACN,GAAG,CAAC;AACJ,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,IAAI,GAAG,CAAC,OAAO,EAAE;AACrB,MAAM,QAAQ,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;AAChE,KAAK;AACL,IAAI,OAAO,MAAM;AACjB,MAAM,QAAQ,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,QAAQ,CAAC,UAAU,EAAE,CAAC;AACxD,MAAM,IAAI,OAAO,CAAC,OAAO,EAAE;AAC3B,QAAQ,oBAAoB,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;AAC9C,OAAO;AACP,KAAK,CAAC;AACN,GAAG,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;AACpB,EAAE,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;AACrB,CAAC;AACM,SAAS,cAAc,GAAG;AACjC,EAAE,MAAM,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,GAAG,iBAAiB,EAAE,CAAC;AACvD,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AAChC;;;;"}
|