@astryxdesign/core 0.7.6 → 0.7.7-canary.0eb44a2
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/dist/AppShell/AppShell.d.ts.map +1 -1
- package/dist/AppShell/AppShell.js +23 -3
- package/dist/Avatar/Avatar.d.ts.map +1 -1
- package/dist/Avatar/Avatar.js +1 -1
- package/dist/BottomSheet/BottomSheetPanel.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheetPanel.js +16 -9
- package/dist/Breadcrumbs/BreadcrumbItem.d.ts.map +1 -1
- package/dist/Breadcrumbs/BreadcrumbItem.js +2 -1
- package/dist/Button/Button.d.ts.map +1 -1
- package/dist/Button/Button.js +3 -2
- package/dist/Chat/ChatComposerInput.d.ts +9 -0
- package/dist/Chat/ChatComposerInput.d.ts.map +1 -1
- package/dist/Chat/ChatComposerInput.js +2 -0
- package/dist/Chat/ChatMessage.js +2 -2
- package/dist/Chat/chatMessage.vars.stylex.d.ts +8 -8
- package/dist/Chat/chatMessage.vars.stylex.js +8 -8
- package/dist/CommandPalette/CommandPaletteInput.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPaletteInput.js +8 -1
- package/dist/DateInput/MonthScroller.d.ts.map +1 -1
- package/dist/DateInput/MonthScroller.js +72 -2
- package/dist/DateInput/Wheel.d.ts +17 -1
- package/dist/DateInput/Wheel.d.ts.map +1 -1
- package/dist/DateInput/Wheel.js +179 -19
- package/dist/DateRangeInput/DateRangeInput.d.ts.map +1 -1
- package/dist/DateRangeInput/DateRangeInput.js +63 -49
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +37 -1
- package/dist/Drawer/Drawer.d.ts.map +1 -1
- package/dist/Drawer/Drawer.js +6 -0
- package/dist/Drawer/useDrawerDialogPresence.d.ts.map +1 -1
- package/dist/Drawer/useDrawerDialogPresence.js +4 -0
- package/dist/DropdownMenu/DropdownMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenu.js +20 -4
- package/dist/DropdownMenu/useMenuOverflow.d.ts +13 -3
- package/dist/DropdownMenu/useMenuOverflow.d.ts.map +1 -1
- package/dist/DropdownMenu/useMenuOverflow.js +31 -8
- package/dist/Field/PanelSearchInput.d.ts.map +1 -1
- package/dist/Field/PanelSearchInput.js +8 -1
- package/dist/Field/textEntryTraits.d.ts +6 -6
- package/dist/Field/textEntryTraits.js +6 -6
- package/dist/Layer/layerClickBoundary.d.ts +7 -1
- package/dist/Layer/layerClickBoundary.d.ts.map +1 -1
- package/dist/Layer/layerClickBoundary.js +2 -2
- package/dist/Layer/usePressPin.d.ts +95 -0
- package/dist/Layer/usePressPin.d.ts.map +1 -0
- package/dist/Layer/usePressPin.js +365 -0
- package/dist/Layer/useTouchTrigger.d.ts +23 -1
- package/dist/Layer/useTouchTrigger.d.ts.map +1 -1
- package/dist/Layer/useTouchTrigger.js +45 -7
- package/dist/Lightbox/Lightbox.d.ts.map +1 -1
- package/dist/Lightbox/Lightbox.js +2 -1
- package/dist/Link/Link.d.ts.map +1 -1
- package/dist/Link/Link.js +1 -0
- package/dist/Popover/usePopover.d.ts.map +1 -1
- package/dist/Popover/usePopover.js +56 -7
- package/dist/PowerSearch/PowerSearch.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearch.js +38 -30
- package/dist/ProgressBar/ProgressBar.d.ts +1 -1
- package/dist/ProgressBar/ProgressBar.d.ts.map +1 -1
- package/dist/ProgressBar/ProgressBar.js +52 -14
- package/dist/ProgressBar/ProgressBarTouch.d.ts +29 -0
- package/dist/ProgressBar/ProgressBarTouch.d.ts.map +1 -0
- package/dist/ProgressBar/ProgressBarTouch.js +91 -0
- package/dist/SegmentedControl/SegmentedControlItem.d.ts.map +1 -1
- package/dist/SegmentedControl/SegmentedControlItem.js +2 -1
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +25 -13
- package/dist/Slider/Slider.d.ts.map +1 -1
- package/dist/Slider/Slider.js +404 -131
- package/dist/Slider/sliderTouchController.d.ts +189 -0
- package/dist/Slider/sliderTouchController.d.ts.map +1 -0
- package/dist/Slider/sliderTouchController.js +1017 -0
- package/dist/Slider/useSliderTouch.d.ts +22 -0
- package/dist/Slider/useSliderTouch.d.ts.map +1 -0
- package/dist/Slider/useSliderTouch.js +56 -0
- package/dist/Switch/Switch.d.ts +1 -1
- package/dist/Switch/Switch.d.ts.map +1 -1
- package/dist/Switch/Switch.js +200 -46
- package/dist/Switch/switchFill.d.ts +31 -0
- package/dist/Switch/switchFill.d.ts.map +1 -0
- package/dist/Switch/switchFill.js +88 -0
- package/dist/Switch/switchTouch.d.ts +81 -0
- package/dist/Switch/switchTouch.d.ts.map +1 -0
- package/dist/Switch/switchTouch.js +133 -0
- package/dist/Switch/useSwitchTouch.d.ts +285 -0
- package/dist/Switch/useSwitchTouch.d.ts.map +1 -0
- package/dist/Switch/useSwitchTouch.js +998 -0
- package/dist/TabList/Tab.d.ts.map +1 -1
- package/dist/TabList/Tab.js +4 -3
- package/dist/Tokenizer/Tokenizer.d.ts.map +1 -1
- package/dist/Tokenizer/Tokenizer.js +12 -5
- package/dist/Tokenizer/TokenizerItemRemovableContext.d.ts +3 -0
- package/dist/Tokenizer/TokenizerItemRemovableContext.d.ts.map +1 -0
- package/dist/Tokenizer/TokenizerItemRemovableContext.js +17 -0
- package/dist/Tooltip/Tooltip.d.ts +30 -6
- package/dist/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/Tooltip/Tooltip.js +5 -0
- package/dist/Tooltip/index.d.ts +1 -1
- package/dist/Tooltip/index.d.ts.map +1 -1
- package/dist/Tooltip/useTooltip.d.ts +31 -5
- package/dist/Tooltip/useTooltip.d.ts.map +1 -1
- package/dist/Tooltip/useTooltip.js +59 -18
- package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
- package/dist/Typeahead/BaseTypeahead.js +19 -9
- package/dist/Typeahead/Typeahead.d.ts.map +1 -1
- package/dist/Typeahead/Typeahead.js +26 -15
- package/dist/astryx.css +91 -8
- package/dist/gestures/GestureArena.d.ts +21 -2
- package/dist/gestures/GestureArena.d.ts.map +1 -1
- package/dist/gestures/GestureArena.js +23 -3
- package/dist/gestures/GestureHost.d.ts +123 -3
- package/dist/gestures/GestureHost.d.ts.map +1 -1
- package/dist/gestures/GestureHost.js +797 -15
- package/dist/gestures/GestureRecognizer.d.ts +15 -1
- package/dist/gestures/GestureRecognizer.d.ts.map +1 -1
- package/dist/gestures/GestureRecognizer.js +12 -0
- package/dist/gestures/PanGestureRecognizer.d.ts +8 -0
- package/dist/gestures/PanGestureRecognizer.d.ts.map +1 -1
- package/dist/gestures/PinchGestureRecognizer.d.ts +5 -1
- package/dist/gestures/PinchGestureRecognizer.d.ts.map +1 -1
- package/dist/gestures/PinchGestureRecognizer.js +10 -0
- package/dist/gestures/PressTracker.d.ts +6 -0
- package/dist/gestures/PressTracker.d.ts.map +1 -1
- package/dist/gestures/PressTracker.js +3 -0
- package/dist/gestures/ScreenEdgePanGestureRecognizer.d.ts +3 -3
- package/dist/gestures/ScreenEdgePanGestureRecognizer.d.ts.map +1 -1
- package/dist/gestures/ScreenEdgePanGestureRecognizer.js +7 -5
- package/dist/gestures/nativeScroll.d.ts +16 -2
- package/dist/gestures/nativeScroll.d.ts.map +1 -1
- package/dist/gestures/nativeScroll.js +39 -8
- package/dist/gestures/recognizerInternals.d.ts +4 -2
- package/dist/gestures/recognizerInternals.d.ts.map +1 -1
- package/dist/gestures/types.d.ts +17 -0
- package/dist/gestures/types.d.ts.map +1 -1
- package/dist/gestures/types.js +7 -0
- package/dist/gestures/usePressTracker.d.ts.map +1 -1
- package/dist/gestures/usePressTracker.js +1 -0
- package/dist/gestures/wheelSegmenter.d.ts +56 -0
- package/dist/gestures/wheelSegmenter.d.ts.map +1 -0
- package/dist/gestures/wheelSegmenter.js +122 -0
- package/dist/hooks/useAttachment.d.ts +16 -8
- package/dist/hooks/useAttachment.d.ts.map +1 -1
- package/dist/hooks/useAttachment.js +35 -15
- package/dist/hooks/useFocusTrap.d.ts +15 -0
- package/dist/hooks/useFocusTrap.d.ts.map +1 -1
- package/dist/hooks/useFocusTrap.js +13 -2
- package/dist/hooks/usePager.d.ts +261 -0
- package/dist/hooks/usePager.d.ts.map +1 -0
- package/dist/hooks/usePager.js +1169 -0
- package/dist/motion/animator.d.ts.map +1 -1
- package/dist/motion/animator.js +140 -19
- package/dist/motion/paging.d.ts +69 -0
- package/dist/motion/paging.d.ts.map +1 -0
- package/dist/motion/paging.js +148 -0
- package/dist/motion/uikit/index.d.ts +8 -4
- package/dist/motion/uikit/index.d.ts.map +1 -1
- package/dist/motion/uikit/index.js +8 -4
- package/dist/motion/uikit/paging.d.ts +171 -0
- package/dist/motion/uikit/paging.d.ts.map +1 -0
- package/dist/motion/uikit/paging.js +192 -0
- package/dist/motion/uikit/progressBar.d.ts +79 -0
- package/dist/motion/uikit/progressBar.d.ts.map +1 -0
- package/dist/motion/uikit/progressBar.js +102 -0
- package/dist/motion/uikit/scroll.d.ts +0 -19
- package/dist/motion/uikit/scroll.d.ts.map +1 -1
- package/dist/motion/uikit/scroll.js +2 -21
- package/dist/motion/uikit/slider.d.ts +97 -0
- package/dist/motion/uikit/slider.d.ts.map +1 -0
- package/dist/motion/uikit/slider.js +111 -0
- package/dist/motion/uikit/springs.d.ts +59 -30
- package/dist/motion/uikit/springs.d.ts.map +1 -1
- package/dist/motion/uikit/springs.js +64 -34
- package/dist/motion/uikit/switch.d.ts +166 -0
- package/dist/motion/uikit/switch.d.ts.map +1 -0
- package/dist/motion/uikit/switch.js +186 -0
- package/dist/privateAttributes/pressHoldsDrag.stylex.d.ts +18 -0
- package/dist/privateAttributes/pressHoldsDrag.stylex.d.ts.map +1 -0
- package/dist/privateAttributes/pressHoldsDrag.stylex.js +28 -0
- package/dist/utils/pressFeedback.d.ts.map +1 -1
- package/dist/utils/pressFeedback.js +5 -0
- package/dist/utils/selectionLock.d.ts +43 -0
- package/dist/utils/selectionLock.d.ts.map +1 -1
- package/dist/utils/selectionLock.js +394 -6
- package/package.json +5 -5
- package/src/AppShell/AppShell.doc.mjs +10 -0
- package/src/AppShell/AppShell.tsx +48 -2
- package/src/Avatar/Avatar.tsx +3 -1
- package/src/BottomSheet/BottomSheetPanel.tsx +16 -9
- package/src/Breadcrumbs/BreadcrumbItem.tsx +4 -1
- package/src/Button/Button.tsx +3 -2
- package/src/Chat/Chat.doc.mjs +1 -0
- package/src/Chat/ChatComposerInput.doc.mjs +11 -0
- package/src/Chat/ChatComposerInput.tsx +11 -0
- package/src/Chat/ChatMessage.tsx +2 -2
- package/src/Chat/chatMessage.vars.stylex.ts +8 -8
- package/src/CommandPalette/CommandPaletteInput.tsx +6 -0
- package/src/DateInput/MonthScroller.tsx +63 -5
- package/src/DateInput/Wheel.tsx +174 -14
- package/src/DateRangeInput/DateRangeInput.doc.mjs +3 -2
- package/src/DateRangeInput/DateRangeInput.tsx +117 -71
- package/src/Dialog/Dialog.tsx +37 -1
- package/src/Drawer/Drawer.tsx +6 -0
- package/src/Drawer/useDrawerDialogPresence.ts +4 -0
- package/src/DropdownMenu/DropdownMenu.tsx +28 -6
- package/src/DropdownMenu/useMenuOverflow.ts +44 -8
- package/src/Field/PanelSearchInput.tsx +6 -0
- package/src/Field/textEntryTraits.ts +6 -6
- package/src/Layer/layerClickBoundary.ts +2 -2
- package/src/Layer/usePressPin.ts +516 -0
- package/src/Layer/useTouchTrigger.ts +56 -6
- package/src/Lightbox/Lightbox.tsx +2 -1
- package/src/Link/Link.tsx +3 -0
- package/src/Popover/usePopover.tsx +71 -9
- package/src/PowerSearch/PowerSearch.tsx +38 -31
- package/src/ProgressBar/ProgressBar.doc.mjs +7 -5
- package/src/ProgressBar/ProgressBar.tsx +147 -16
- package/src/ProgressBar/ProgressBarTouch.ts +109 -0
- package/src/SegmentedControl/SegmentedControlItem.tsx +2 -1
- package/src/Selector/Selector.tsx +29 -2
- package/src/Slider/Slider.doc.mjs +11 -7
- package/src/Slider/Slider.tsx +539 -132
- package/src/Slider/sliderTouchController.ts +1209 -0
- package/src/Slider/useSliderTouch.ts +78 -0
- package/src/Switch/Switch.doc.mjs +3 -3
- package/src/Switch/Switch.tsx +412 -86
- package/src/Switch/switchFill.ts +106 -0
- package/src/Switch/switchTouch.ts +194 -0
- package/src/Switch/useSwitchTouch.ts +1121 -0
- package/src/TabList/Tab.tsx +5 -3
- package/src/Tokenizer/Tokenizer.tsx +15 -5
- package/src/Tokenizer/TokenizerItemRemovableContext.ts +22 -0
- package/src/Tooltip/Tooltip.doc.mjs +21 -6
- package/src/Tooltip/Tooltip.tsx +42 -5
- package/src/Tooltip/index.ts +1 -0
- package/src/Tooltip/useTooltip.doc.mjs +4 -2
- package/src/Tooltip/useTooltip.tsx +84 -21
- package/src/Typeahead/BaseTypeahead.tsx +16 -8
- package/src/Typeahead/Typeahead.tsx +29 -15
- package/src/gestures/GestureArena.ts +45 -4
- package/src/gestures/GestureHost.ts +958 -15
- package/src/gestures/GestureRecognizer.ts +28 -0
- package/src/gestures/PanGestureRecognizer.ts +8 -0
- package/src/gestures/PinchGestureRecognizer.ts +16 -1
- package/src/gestures/PressTracker.ts +10 -0
- package/src/gestures/README.md +82 -3
- package/src/gestures/ScreenEdgePanGestureRecognizer.ts +7 -5
- package/src/gestures/nativeScroll.ts +49 -9
- package/src/gestures/recognizerInternals.ts +9 -2
- package/src/gestures/types.ts +18 -0
- package/src/gestures/usePressTracker.ts +2 -0
- package/src/gestures/wheelSegmenter.ts +143 -0
- package/src/hooks/useAttachment.ts +56 -14
- package/src/hooks/useFocusTrap.ts +26 -2
- package/src/hooks/usePager.ts +1446 -0
- package/src/motion/MEASUREMENTS.md +36 -27
- package/src/motion/README.md +7 -3
- package/src/motion/animator.ts +193 -25
- package/src/motion/paging.ts +161 -0
- package/src/motion/uikit/index.ts +7 -4
- package/src/motion/uikit/paging.ts +193 -0
- package/src/motion/uikit/progressBar.ts +102 -0
- package/src/motion/uikit/scroll.ts +2 -18
- package/src/motion/uikit/slider.ts +105 -0
- package/src/motion/uikit/springs.ts +53 -32
- package/src/motion/uikit/switch.ts +174 -0
- package/src/privateAttributes/pressHoldsDrag.stylex.ts +28 -0
- package/src/utils/pressFeedback.ts +5 -0
- package/src/utils/selectionLock.ts +501 -6
- package/dist/motion/selectPage.d.ts +0 -26
- package/dist/motion/selectPage.d.ts.map +0 -1
- package/dist/motion/selectPage.js +0 -55
- package/src/motion/selectPage.ts +0 -55
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
export interface SwitchTouchGeometry {
|
|
2
|
+
readonly trackWidth: number;
|
|
3
|
+
readonly trackHeight: number;
|
|
4
|
+
/** The thumb at rest, px. */
|
|
5
|
+
readonly thumbWidth: number;
|
|
6
|
+
readonly thumbHeight: number;
|
|
7
|
+
/** Gap between the thumb and the track's top, bottom and nearer end, px. */
|
|
8
|
+
readonly inset: number;
|
|
9
|
+
/** Offset of the thumb at the on end, px. */
|
|
10
|
+
readonly travel: number;
|
|
11
|
+
/**
|
|
12
|
+
* Scale of the lifted thumb, one value on both axes. It is UIKit's lift,
|
|
13
|
+
* capped so the thumb grows into at most half the gap on each side.
|
|
14
|
+
*/
|
|
15
|
+
readonly liftScaleX: number;
|
|
16
|
+
readonly liftScaleY: number;
|
|
17
|
+
/**
|
|
18
|
+
* The drag's rubber-band dimension, px: UIKit's, scaled to the track. It
|
|
19
|
+
* never exceeds the gap the lift leaves (`inset` less the lifted growth).
|
|
20
|
+
* The band approaches its dimension and never reaches it, so a banded thumb
|
|
21
|
+
* stays inside the track.
|
|
22
|
+
*/
|
|
23
|
+
readonly rubberBandDimension: number;
|
|
24
|
+
/** How far the finger goes toward the other end before a flip, px. */
|
|
25
|
+
readonly flipDistance: number;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* The thumb geometry in a track of this size: the thumb's measured box when
|
|
29
|
+
* given, UIKit's proportions otherwise.
|
|
30
|
+
*/
|
|
31
|
+
export declare function switchTouchGeometry(trackWidth: number, trackHeight: number, thumb?: {
|
|
32
|
+
readonly width: number;
|
|
33
|
+
readonly height: number;
|
|
34
|
+
}): SwitchTouchGeometry;
|
|
35
|
+
/**
|
|
36
|
+
* Where the drag puts the thumb's target. It is the offset at the landing,
|
|
37
|
+
* moved by the finger's translation and rubber-banded past either end.
|
|
38
|
+
*
|
|
39
|
+
* `start` is the thumb's offset on screen when the finger landed, mid-flight
|
|
40
|
+
* or banded. It is unbanded first, so a finger that grabs a moving thumb
|
|
41
|
+
* continues without a jump.
|
|
42
|
+
*/
|
|
43
|
+
export declare function dragTarget(start: number, translation: number, geometry: SwitchTouchGeometry): number;
|
|
44
|
+
/** A drag's flip state: the side it shows and how it got there. */
|
|
45
|
+
export interface SwitchFlip {
|
|
46
|
+
/** The value when the finger landed. */
|
|
47
|
+
readonly startedOn: boolean;
|
|
48
|
+
readonly isVisuallyOn: boolean;
|
|
49
|
+
/** The finger passed `flipDistance` on the last event: the next one flips. */
|
|
50
|
+
readonly isArmed: boolean;
|
|
51
|
+
/** The drag has flipped at least once. */
|
|
52
|
+
readonly didFlip: boolean;
|
|
53
|
+
}
|
|
54
|
+
export declare function startFlip(isOn: boolean): SwitchFlip;
|
|
55
|
+
/**
|
|
56
|
+
* One touch event of the drag. `translation` is the finger's travel since it
|
|
57
|
+
* landed along the writing direction (positive toward the on end).
|
|
58
|
+
*/
|
|
59
|
+
export declare function stepFlip(flip: SwitchFlip, translation: number, geometry: SwitchTouchGeometry): SwitchFlip;
|
|
60
|
+
/**
|
|
61
|
+
* Passive: how long a lift waits for the browser's own click before the
|
|
62
|
+
* switch clicks its input itself, ms. The browser sends that click with the
|
|
63
|
+
* lift's `touchend`. The surface's `touch-action` leaves no double-tap delay.
|
|
64
|
+
* So this only runs out for a lift the browser does not count as a click.
|
|
65
|
+
*/
|
|
66
|
+
export declare const BROWSER_CLICK_WAIT_MS = 300;
|
|
67
|
+
/**
|
|
68
|
+
* What a release commits: the side a drag flipped to; when nothing flipped,
|
|
69
|
+
* the other side of the value, wherever the finger lifts. A press slid off
|
|
70
|
+
* and lifted outside toggles too, as UISwitch's does. A toggle is
|
|
71
|
+
* reversible, so a stray release costs one more tap.
|
|
72
|
+
*/
|
|
73
|
+
export declare function commitOnRelease(flip: SwitchFlip | null, isOn: boolean): boolean;
|
|
74
|
+
/**
|
|
75
|
+
* When the lifted thumb may settle, on the document timeline (ms). It is the
|
|
76
|
+
* release, but never sooner than the minimum lift time after the lift.
|
|
77
|
+
* A caller may pass the minimum it plays; the table's measured one by
|
|
78
|
+
* default.
|
|
79
|
+
*/
|
|
80
|
+
export declare function settleTime(releaseTime: number, liftTime: number, minimumLiftMs?: number): number;
|
|
81
|
+
//# sourceMappingURL=switchTouch.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"switchTouch.d.ts","sourceRoot":"","sources":["../../src/Switch/switchTouch.ts"],"names":[],"mappings":"AAmBA,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,6BAA6B;IAC7B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,4EAA4E;IAC5E,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,6CAA6C;IAC7C,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B;;;;;OAKG;IACH,QAAQ,CAAC,mBAAmB,EAAE,MAAM,CAAC;IACrC,sEAAsE;IACtE,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;CAC/B;AAMD;;;GAGG;AACH,wBAAgB,mBAAmB,CACjC,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,KAAK,CAAC,EAAE;IAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;CAAC,GACxD,mBAAmB,CAoCrB;AAED;;;;;;;GAOG;AACH,wBAAgB,UAAU,CACxB,KAAK,EAAE,MAAM,EACb,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,mBAAmB,GAC5B,MAAM,CAOR;AAED,mEAAmE;AACnE,MAAM,WAAW,UAAU;IACzB,wCAAwC;IACxC,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,YAAY,EAAE,OAAO,CAAC;IAC/B,8EAA8E;IAC9E,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,0CAA0C;IAC1C,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;CAC3B;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,OAAO,GAAG,UAAU,CAEnD;AAED;;;GAGG;AACH,wBAAgB,QAAQ,CACtB,IAAI,EAAE,UAAU,EAChB,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,mBAAmB,GAC5B,UAAU,CAkBZ;AAED;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAEzC;;;;;GAKG;AACH,wBAAgB,eAAe,CAC7B,IAAI,EAAE,UAAU,GAAG,IAAI,EACvB,IAAI,EAAE,OAAO,GACZ,OAAO,CAET;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CACxB,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,MAAM,EAChB,aAAa,GAAE,MAAoC,GAClD,MAAM,CAER"}
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @file switchTouch.ts
|
|
5
|
+
* @input The UIKit switch constants (motion/uikit/switch.ts) and a track size
|
|
6
|
+
* @output The pure model of Switch's touch presentation: thumb geometry, the
|
|
7
|
+
* drag's target, the flip rule, the commit on release and its click wait,
|
|
8
|
+
* and when the lifted thumb may settle
|
|
9
|
+
* @position Pure half of Switch's touch presentation; driven by
|
|
10
|
+
* useSwitchTouch.ts, tested by switchTouch.test.ts without a browser
|
|
11
|
+
*
|
|
12
|
+
* Positions are thumb offsets from the off end, 0 … `travel`, in the writing
|
|
13
|
+
* direction; the caller mirrors them for right-to-left.
|
|
14
|
+
* SYNC: When modified, update useSwitchTouch.ts and switchTouch.test.ts.
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
import { rubberBandClamp, rubberBandUnclamp } from "../motion/rubberBand.js";
|
|
18
|
+
import { switchControl } from "../motion/uikit/switch.js";
|
|
19
|
+
const [UIKIT_TRACK_WIDTH, UIKIT_TRACK_HEIGHT] = switchControl.trackSize;
|
|
20
|
+
const [UIKIT_THUMB_WIDTH, UIKIT_THUMB_HEIGHT] = switchControl.thumbSize;
|
|
21
|
+
const [LIFTED_WIDTH, LIFTED_HEIGHT] = switchControl.liftedThumbSize;
|
|
22
|
+
|
|
23
|
+
/**
|
|
24
|
+
* The thumb geometry in a track of this size: the thumb's measured box when
|
|
25
|
+
* given, UIKit's proportions otherwise.
|
|
26
|
+
*/
|
|
27
|
+
export function switchTouchGeometry(trackWidth, trackHeight, thumb) {
|
|
28
|
+
const thumbHeight = thumb?.height ?? trackHeight * UIKIT_THUMB_HEIGHT / UIKIT_TRACK_HEIGHT;
|
|
29
|
+
const thumbWidth = thumb?.width ?? trackWidth * UIKIT_THUMB_WIDTH / UIKIT_TRACK_WIDTH;
|
|
30
|
+
const inset = Math.max(0, (trackHeight - thumbHeight) / 2);
|
|
31
|
+
// UIKit lifts to 58 × 38.3 from 37 × 24; here the lift fills at most half
|
|
32
|
+
// the gap on each side, on both axes alike.
|
|
33
|
+
const liftScale = Math.max(1, Math.min(LIFTED_WIDTH / UIKIT_THUMB_WIDTH, LIFTED_HEIGHT / UIKIT_THUMB_HEIGHT, thumbWidth > 0 ? 1 + inset / thumbWidth : 1, thumbHeight > 0 ? 1 + inset / thumbHeight : 1));
|
|
34
|
+
const liftGrowth = thumbWidth * (liftScale - 1) / 2;
|
|
35
|
+
return {
|
|
36
|
+
trackWidth,
|
|
37
|
+
trackHeight,
|
|
38
|
+
thumbWidth,
|
|
39
|
+
thumbHeight,
|
|
40
|
+
inset,
|
|
41
|
+
travel: Math.max(0, trackWidth - thumbWidth - 2 * inset),
|
|
42
|
+
liftScaleX: liftScale,
|
|
43
|
+
liftScaleY: liftScale,
|
|
44
|
+
rubberBandDimension: Math.max(0, Math.min(switchControl.rubberBand.dimension * trackHeight / UIKIT_TRACK_HEIGHT, inset - liftGrowth)),
|
|
45
|
+
flipDistance: Math.max(0, trackWidth - thumbWidth)
|
|
46
|
+
};
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/**
|
|
50
|
+
* Where the drag puts the thumb's target. It is the offset at the landing,
|
|
51
|
+
* moved by the finger's translation and rubber-banded past either end.
|
|
52
|
+
*
|
|
53
|
+
* `start` is the thumb's offset on screen when the finger landed, mid-flight
|
|
54
|
+
* or banded. It is unbanded first, so a finger that grabs a moving thumb
|
|
55
|
+
* continues without a jump.
|
|
56
|
+
*/
|
|
57
|
+
export function dragTarget(start, translation, geometry) {
|
|
58
|
+
const {
|
|
59
|
+
travel,
|
|
60
|
+
rubberBandDimension
|
|
61
|
+
} = geometry;
|
|
62
|
+
const coefficient = switchControl.rubberBand.coefficient;
|
|
63
|
+
const raw = rubberBandUnclamp(start, 0, travel, rubberBandDimension, coefficient) + translation;
|
|
64
|
+
return rubberBandClamp(raw, 0, travel, rubberBandDimension, coefficient);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/** A drag's flip state: the side it shows and how it got there. */
|
|
68
|
+
|
|
69
|
+
export function startFlip(isOn) {
|
|
70
|
+
return {
|
|
71
|
+
startedOn: isOn,
|
|
72
|
+
isVisuallyOn: isOn,
|
|
73
|
+
isArmed: false,
|
|
74
|
+
didFlip: false
|
|
75
|
+
};
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/**
|
|
79
|
+
* One touch event of the drag. `translation` is the finger's travel since it
|
|
80
|
+
* landed along the writing direction (positive toward the on end).
|
|
81
|
+
*/
|
|
82
|
+
export function stepFlip(flip, translation, geometry) {
|
|
83
|
+
// Travel toward the other end: right from off, left from on.
|
|
84
|
+
const toward = flip.startedOn ? -translation : translation;
|
|
85
|
+
if (flip.isVisuallyOn !== flip.startedOn) {
|
|
86
|
+
return toward < 0 ? {
|
|
87
|
+
...flip,
|
|
88
|
+
isVisuallyOn: flip.startedOn,
|
|
89
|
+
isArmed: false
|
|
90
|
+
} : flip;
|
|
91
|
+
}
|
|
92
|
+
const isPast = toward >= geometry.flipDistance;
|
|
93
|
+
if (flip.isArmed && isPast) {
|
|
94
|
+
return {
|
|
95
|
+
...flip,
|
|
96
|
+
isVisuallyOn: !flip.startedOn,
|
|
97
|
+
isArmed: false,
|
|
98
|
+
didFlip: true
|
|
99
|
+
};
|
|
100
|
+
}
|
|
101
|
+
return isPast === flip.isArmed ? flip : {
|
|
102
|
+
...flip,
|
|
103
|
+
isArmed: isPast
|
|
104
|
+
};
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
/**
|
|
108
|
+
* Passive: how long a lift waits for the browser's own click before the
|
|
109
|
+
* switch clicks its input itself, ms. The browser sends that click with the
|
|
110
|
+
* lift's `touchend`. The surface's `touch-action` leaves no double-tap delay.
|
|
111
|
+
* So this only runs out for a lift the browser does not count as a click.
|
|
112
|
+
*/
|
|
113
|
+
export const BROWSER_CLICK_WAIT_MS = 300;
|
|
114
|
+
|
|
115
|
+
/**
|
|
116
|
+
* What a release commits: the side a drag flipped to; when nothing flipped,
|
|
117
|
+
* the other side of the value, wherever the finger lifts. A press slid off
|
|
118
|
+
* and lifted outside toggles too, as UISwitch's does. A toggle is
|
|
119
|
+
* reversible, so a stray release costs one more tap.
|
|
120
|
+
*/
|
|
121
|
+
export function commitOnRelease(flip, isOn) {
|
|
122
|
+
return flip?.didFlip === true ? flip.isVisuallyOn : !isOn;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
/**
|
|
126
|
+
* When the lifted thumb may settle, on the document timeline (ms). It is the
|
|
127
|
+
* release, but never sooner than the minimum lift time after the lift.
|
|
128
|
+
* A caller may pass the minimum it plays; the table's measured one by
|
|
129
|
+
* default.
|
|
130
|
+
*/
|
|
131
|
+
export function settleTime(releaseTime, liftTime, minimumLiftMs = switchControl.minimumLiftMs) {
|
|
132
|
+
return Math.max(releaseTime, liftTime + minimumLiftMs);
|
|
133
|
+
}
|
|
@@ -0,0 +1,285 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file useSwitchTouch.ts
|
|
3
|
+
* @input Switch's parts (gesture surface, input, thumb and track), its value,
|
|
4
|
+
* whether it is interactive, the track's other state (switchFill.ts) and
|
|
5
|
+
* the thumb geometry (switchTouch.ts)
|
|
6
|
+
* @output Exports useSwitchTouch: Switch's gestures for a mouse, a pen and a
|
|
7
|
+
* finger, and its touch presentation under a coarse primary pointer
|
|
8
|
+
* @position DOM half of Switch's touch presentation, on the gesture system
|
|
9
|
+
* (../gestures) and the compositor animator (../motion/animator)
|
|
10
|
+
*
|
|
11
|
+
* SYNC: When modified, update switchTouch.ts, Switch.tsx
|
|
12
|
+
* and __tests__/Switch.interaction.browser.spec.ts.
|
|
13
|
+
*/
|
|
14
|
+
import { type RefObject } from 'react';
|
|
15
|
+
import { type SwitchTouchGeometry } from './switchTouch.js';
|
|
16
|
+
import { type TrackState } from './switchFill.js';
|
|
17
|
+
export interface SwitchTouchParts {
|
|
18
|
+
/** Receives the touches: the input and the track. */
|
|
19
|
+
readonly surface: RefObject<HTMLElement | null>;
|
|
20
|
+
readonly input: RefObject<HTMLInputElement | null>;
|
|
21
|
+
/** Moves: the themed thumb itself. */
|
|
22
|
+
readonly thumb: RefObject<HTMLElement | null>;
|
|
23
|
+
/**
|
|
24
|
+
* The track: its `::after` is the fade layer over its own fill, showing
|
|
25
|
+
* the fill it is leaving or heading to (switchFill.ts).
|
|
26
|
+
*/
|
|
27
|
+
readonly track: RefObject<HTMLElement | null>;
|
|
28
|
+
}
|
|
29
|
+
export interface SwitchTouchOptions {
|
|
30
|
+
readonly isOn: boolean;
|
|
31
|
+
/** False while disabled or busy: no touch is tracked. */
|
|
32
|
+
readonly isInteractive: boolean;
|
|
33
|
+
/**
|
|
34
|
+
* Disabled: the touch presentation is off and attaches nothing. A
|
|
35
|
+
* busy switch stays attached, so a change that starts a busy state still
|
|
36
|
+
* plays its release motion.
|
|
37
|
+
*/
|
|
38
|
+
readonly isDisabled: boolean;
|
|
39
|
+
/** The track's box, px (width × height): the thumb geometry's scale. */
|
|
40
|
+
readonly trackSize: readonly [number, number];
|
|
41
|
+
/**
|
|
42
|
+
* The props the track renders with in its other state (its theme target
|
|
43
|
+
* and fill), for the fade layer's colour.
|
|
44
|
+
*/
|
|
45
|
+
readonly otherTrackProps: object;
|
|
46
|
+
}
|
|
47
|
+
/**
|
|
48
|
+
* The switch's presentation: the touch presentation under a coarse primary
|
|
49
|
+
* pointer, or its own under a fine one.
|
|
50
|
+
*/
|
|
51
|
+
type SwitchPresentation = 'touch' | 'pointer';
|
|
52
|
+
interface Elements {
|
|
53
|
+
surface: HTMLElement;
|
|
54
|
+
input: HTMLInputElement;
|
|
55
|
+
thumb: HTMLElement;
|
|
56
|
+
track: HTMLElement;
|
|
57
|
+
}
|
|
58
|
+
/**
|
|
59
|
+
* The touch presentation of one switch: animators, recognizers and the
|
|
60
|
+
* gesture state. No React state: a gesture never renders. UISwitch on iOS
|
|
61
|
+
* 26.2 is the reference; every number is in motion/uikit/switch.ts.
|
|
62
|
+
*
|
|
63
|
+
* - The thumb's resting place is CSS (its inline-start inset). So the steady
|
|
64
|
+
* state needs no script and mirrors under RTL by itself. The animator only
|
|
65
|
+
* moves the thumb by a delta from that place (`translate`). When the value
|
|
66
|
+
* moves the CSS place, the delta is rebased in the same layout effect.
|
|
67
|
+
* Nothing moves on screen, and the velocity is kept.
|
|
68
|
+
* - Touches go to a press tracker, which never blocks a scroll. No
|
|
69
|
+
* recognizer claims the touch. `touch-action: pan-y` (Switch.tsx) keeps
|
|
70
|
+
* horizontal moves for the switch: a drag follows and flips it, and the
|
|
71
|
+
* release commits. A vertical drag is the page's scroll, and the switch
|
|
72
|
+
* yields.
|
|
73
|
+
* - A tap, a hold or a short drag activates through the browser's own click.
|
|
74
|
+
* The browser sends no click for a finger's hold, so the switch clicks its
|
|
75
|
+
* input once the click window passes. A mouse or a pen gets a click when
|
|
76
|
+
* it is released on the input. A drag that flipped the switch gets no
|
|
77
|
+
* click, so the switch clicks its input, and the shared click guard
|
|
78
|
+
* swallows the browser's late click. A finger's press slid off and lifted
|
|
79
|
+
* outside toggles too, as UISwitch's does. Forms, `onChange` and the
|
|
80
|
+
* keyboard stay the native checkbox's.
|
|
81
|
+
* - The drag never renders: each move retargets the thumb's tracking spring
|
|
82
|
+
* and steps the flip rule on the finger's travel.
|
|
83
|
+
* - The thumb lifts while a finger presses, into half of the gap around it,
|
|
84
|
+
* and its shadow fades in. At the release it settles back, no sooner than
|
|
85
|
+
* the minimum lift time. The lift and the settle are one curve, built at
|
|
86
|
+
* the release, so the settle starts on time on the compositor.
|
|
87
|
+
* - The track keeps its own fill in both states. A fade layer over it,
|
|
88
|
+
* painted with the track's other fill, fades the colour on the compositor.
|
|
89
|
+
* When the value changes, the layer swaps to the other fill and to the
|
|
90
|
+
* complement of its opacity. So nothing changes on screen. A change the
|
|
91
|
+
* fade already heads to swaps nothing: the track holds its previous fill
|
|
92
|
+
* inline until the fade lands. WebKit plays a curve built in a held frame
|
|
93
|
+
* only once the long task ends, so a swap there stepped the colour back.
|
|
94
|
+
* The layer is composited from the start (`will-change`, Switch.tsx), or
|
|
95
|
+
* iOS Safari runs its fade on the main thread.
|
|
96
|
+
* - Under reduced motion nothing travels or springs: a change plays the
|
|
97
|
+
* animator's Reduce Motion cross-fade. A dragging finger still moves the
|
|
98
|
+
* thumb: that is direct manipulation.
|
|
99
|
+
* - Under a fine primary pointer the switch keeps its own look. The same
|
|
100
|
+
* tracking, flip rule and release decide the value, with no animator, and
|
|
101
|
+
* the thumb moves when the value does. Only its press listens at rest. Its
|
|
102
|
+
* click listener comes with a press.
|
|
103
|
+
*/
|
|
104
|
+
export declare class SwitchTouchController {
|
|
105
|
+
private elements;
|
|
106
|
+
private geometry;
|
|
107
|
+
private isOn;
|
|
108
|
+
private isInteractive;
|
|
109
|
+
/** The side the visuals show or head to. */
|
|
110
|
+
private isVisuallyOn;
|
|
111
|
+
/** +1 left-to-right, −1 right-to-left. */
|
|
112
|
+
private direction;
|
|
113
|
+
private thumb;
|
|
114
|
+
/** The fade layer: its opacity is how far the visuals are from the value. */
|
|
115
|
+
private fade;
|
|
116
|
+
/** The lifted shadow: the thumb's `::after`, faded in with the lift. */
|
|
117
|
+
private shadow;
|
|
118
|
+
/** When the thumb lifted (document timeline, ms); null while at rest. */
|
|
119
|
+
private liftTime;
|
|
120
|
+
/** When the running settle leaves the lift (settleTime), ms. */
|
|
121
|
+
private settleAt;
|
|
122
|
+
private otherTrack;
|
|
123
|
+
/**
|
|
124
|
+
* A change landed mid-fade, and the fade already heads to it. The track's
|
|
125
|
+
* own fill stays the previous value's (inline) until the fade lands. So the
|
|
126
|
+
* change's frame builds no curve and repaints nothing. `baseHold` counts
|
|
127
|
+
* holds, so a settled one ignores its late landing.
|
|
128
|
+
*/
|
|
129
|
+
private baseHeld;
|
|
130
|
+
private baseHold;
|
|
131
|
+
private detachers;
|
|
132
|
+
/** When the press began (document timeline, ms); null with no press. */
|
|
133
|
+
private pressTime;
|
|
134
|
+
/** The thumb's offset when the current finger landed. */
|
|
135
|
+
private downOffset;
|
|
136
|
+
private drag;
|
|
137
|
+
/** The finger's last travel along x, for a lift that reports none. */
|
|
138
|
+
private lastTravel;
|
|
139
|
+
/**
|
|
140
|
+
* The press and the pan both report every touch event; the first report
|
|
141
|
+
* takes the step and this skips the second (cleared after the event).
|
|
142
|
+
*/
|
|
143
|
+
private isStepping;
|
|
144
|
+
/** The current touch already ended in a release. */
|
|
145
|
+
private released;
|
|
146
|
+
/**
|
|
147
|
+
* Reduced motion: a release changed the value. The thumb's travel waits for
|
|
148
|
+
* the value to commit, so its one cross-fade lands in the new frame.
|
|
149
|
+
*/
|
|
150
|
+
private pendingTravel;
|
|
151
|
+
/** Passive: a finger is down on the switch. */
|
|
152
|
+
private isTracking;
|
|
153
|
+
/** Which presentation the switch has: the touch one, or its own. */
|
|
154
|
+
private presentation;
|
|
155
|
+
/** The press-time listeners under a fine pointer, while armed. */
|
|
156
|
+
private pressListeners;
|
|
157
|
+
private pressListenersTimer;
|
|
158
|
+
/** Passive: a lift is waiting for the browser's own click. */
|
|
159
|
+
private browserClickTimer;
|
|
160
|
+
private reconcileTimer;
|
|
161
|
+
constructor(isOn: boolean, geometry: SwitchTouchGeometry);
|
|
162
|
+
get isAttached(): boolean;
|
|
163
|
+
attach(elements: Elements, presentation: SwitchPresentation): void;
|
|
164
|
+
/**
|
|
165
|
+
* Passive: UIControl's tracking, which never blocks a scroll. The press
|
|
166
|
+
* begins with the touch, or with the first horizontal move a pan would
|
|
167
|
+
* begin on. Inside a scroller the touch waits for the content delay. Every
|
|
168
|
+
* move steps the flip rule, and the release commits. A touch the browser
|
|
169
|
+
* takes for its scroll yields with no toggle.
|
|
170
|
+
*/
|
|
171
|
+
private attachPassive;
|
|
172
|
+
/** Under a fine pointer: adds the switch's own listeners for a press. */
|
|
173
|
+
private listenForPress;
|
|
174
|
+
private startPressListeners;
|
|
175
|
+
/** The press's click window is over: its listeners go. */
|
|
176
|
+
private endPressListeners;
|
|
177
|
+
private stopPressListeners;
|
|
178
|
+
/** Undo everything: listeners, timers, animations and inline styles. */
|
|
179
|
+
detach(): void;
|
|
180
|
+
setInteractive(isInteractive: boolean): void;
|
|
181
|
+
/** The track's other state, re-rendered with each value. */
|
|
182
|
+
setOtherTrack(otherTrack: TrackState): void;
|
|
183
|
+
setGeometry(geometry: SwitchTouchGeometry): void;
|
|
184
|
+
/**
|
|
185
|
+
* The thumb geometry from the rendered boxes. The track's box lets a theme
|
|
186
|
+
* resize the track. The thumb's box is the circle of the current value. It
|
|
187
|
+
* rests by insets from the track's padding box, so padding does not move it.
|
|
188
|
+
*/
|
|
189
|
+
private measureGeometry;
|
|
190
|
+
/**
|
|
191
|
+
* The rendered value changed. The CSS has already moved the thumb's
|
|
192
|
+
* resting place. So the thumb's delta is rebased first, and nothing moves on
|
|
193
|
+
* screen. Then the visuals head for the new value.
|
|
194
|
+
*/
|
|
195
|
+
setValue(isOn: boolean): void;
|
|
196
|
+
private touchDown;
|
|
197
|
+
/** Passive: a mouse, a pen or a finger on the switch, UIControl's events. */
|
|
198
|
+
private onControlEvent;
|
|
199
|
+
/**
|
|
200
|
+
* One touch event of a held or dragged switch. It retargets the thumb at the
|
|
201
|
+
* finger (one style write) and steps the flip rule.
|
|
202
|
+
*/
|
|
203
|
+
private move;
|
|
204
|
+
/**
|
|
205
|
+
* The finger lifted after a tap, a hold or a drag. `byBrowserClick`: the
|
|
206
|
+
* browser's own click activates the input, and the switch clicks it only
|
|
207
|
+
* if that click never comes.
|
|
208
|
+
*/
|
|
209
|
+
private release;
|
|
210
|
+
/**
|
|
211
|
+
* The switch's own click on its input. The shared click guard then swallows
|
|
212
|
+
* the browser's late click for the same lift, so the switch toggles once.
|
|
213
|
+
*/
|
|
214
|
+
private clickInput;
|
|
215
|
+
/** If the owner kept the old value, the visuals go back to it. */
|
|
216
|
+
private scheduleReconcile;
|
|
217
|
+
/** The touch ended without a release (cancelled, or the switch turned off). */
|
|
218
|
+
private abandon;
|
|
219
|
+
private rest;
|
|
220
|
+
/** The animator's x for a thumb offset, relative to its CSS place. */
|
|
221
|
+
private toX;
|
|
222
|
+
/** The thumb's offset on screen at `time`, from the curve. */
|
|
223
|
+
private offsetAt;
|
|
224
|
+
private showWell;
|
|
225
|
+
/**
|
|
226
|
+
* The fade layer heads for the visuals, on UIKit's well springs (on:
|
|
227
|
+
* 0.68 s, off: 0.40 s). It is clear when they show the value. It is opaque,
|
|
228
|
+
* the other fill, when they show the other side.
|
|
229
|
+
*/
|
|
230
|
+
private animateFade;
|
|
231
|
+
/**
|
|
232
|
+
* The track now shows the new value's fill. The fade layer swaps to the
|
|
233
|
+
* other fill and to the complement of its opacity, so nothing changes on
|
|
234
|
+
* screen. It keeps heading where the visuals head, on the running clock.
|
|
235
|
+
*/
|
|
236
|
+
private swapFade;
|
|
237
|
+
/**
|
|
238
|
+
* Holds the track's own fill at the previous value's (the other state's,
|
|
239
|
+
* now) until the fade lands. False when there is nothing to read it from.
|
|
240
|
+
*/
|
|
241
|
+
private holdBase;
|
|
242
|
+
/**
|
|
243
|
+
* Ends a held fill: the track shows its value's fill again and the fade
|
|
244
|
+
* layer swaps under it. Once the fade has landed, the layer is opaque and
|
|
245
|
+
* nothing changes on screen. Called early, by a new touch, value or other
|
|
246
|
+
* state, the swap keeps the picture where it is.
|
|
247
|
+
*/
|
|
248
|
+
private landBase;
|
|
249
|
+
/** The fade layer's colour: the track's fill in its other state. */
|
|
250
|
+
private paintFade;
|
|
251
|
+
/** Track color and thumb head for one side. */
|
|
252
|
+
private showSide;
|
|
253
|
+
/** The press began: the switch holds the touch and the thumb lifts. */
|
|
254
|
+
private pressBegan;
|
|
255
|
+
/** The press ended (a release, a cancel or the switch turning off). */
|
|
256
|
+
private pressEnded;
|
|
257
|
+
/**
|
|
258
|
+
* The thumb grows about its center into half the gap around it, and its
|
|
259
|
+
* lifted shadow fades in. Under reduced motion nothing lifts: the lift is
|
|
260
|
+
* feedback with no fade of its own.
|
|
261
|
+
*/
|
|
262
|
+
private lift;
|
|
263
|
+
/**
|
|
264
|
+
* The thumb settles back after the press, no sooner than the minimum lift
|
|
265
|
+
* time after it lifted. One curve per property, built now, starts the
|
|
266
|
+
* settle on the compositor's clock.
|
|
267
|
+
*/
|
|
268
|
+
private settle;
|
|
269
|
+
/**
|
|
270
|
+
* The thumb's box changed size with the value: the on circle is larger.
|
|
271
|
+
* Its scale carries the size it showed, so nothing jumps. Then it heads for
|
|
272
|
+
* the new box through the settle, or to the lift a held press keeps.
|
|
273
|
+
*/
|
|
274
|
+
private rescaleThumb;
|
|
275
|
+
private clearTimers;
|
|
276
|
+
}
|
|
277
|
+
/**
|
|
278
|
+
* Switch's gestures, attached for every pointer, with the touch
|
|
279
|
+
* presentation under a coarse primary pointer. Its parts
|
|
280
|
+
* must be rendered (and styled for it) whether or not it is active; it only
|
|
281
|
+
* animates and listens.
|
|
282
|
+
*/
|
|
283
|
+
export declare function useSwitchTouch(parts: SwitchTouchParts, { isOn, isInteractive, isDisabled, trackSize, otherTrackProps, }: SwitchTouchOptions): void;
|
|
284
|
+
export {};
|
|
285
|
+
//# sourceMappingURL=useSwitchTouch.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useSwitchTouch.d.ts","sourceRoot":"","sources":["../../src/Switch/useSwitchTouch.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAoB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAgBxD,OAAO,EASL,KAAK,mBAAmB,EACzB,MAAM,eAAe,CAAC;AACvB,OAAO,EAIL,KAAK,UAAU,EAChB,MAAM,cAAc,CAAC;AAEtB,MAAM,WAAW,gBAAgB;IAC/B,qDAAqD;IACrD,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAChD,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACnD,sCAAsC;IACtC,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC9C;;;OAGG;IACH,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC/C;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,yDAAyD;IACzD,QAAQ,CAAC,aAAa,EAAE,OAAO,CAAC;IAChC;;;;OAIG;IACH,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,wEAAwE;IACxE,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9C;;;OAGG;IACH,QAAQ,CAAC,eAAe,EAAE,MAAM,CAAC;CAClC;AAyDD;;;GAGG;AACH,KAAK,kBAAkB,GAAG,OAAO,GAAG,SAAS,CAAC;AAE9C,UAAU,QAAQ;IAChB,OAAO,EAAE,WAAW,CAAC;IACrB,KAAK,EAAE,gBAAgB,CAAC;IACxB,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,WAAW,CAAC;CACpB;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,qBAAa,qBAAqB;IAChC,OAAO,CAAC,QAAQ,CAAyB;IACzC,OAAO,CAAC,QAAQ,CAAsB;IACtC,OAAO,CAAC,IAAI,CAAU;IACtB,OAAO,CAAC,aAAa,CAAQ;IAC7B,4CAA4C;IAC5C,OAAO,CAAC,YAAY,CAAU;IAC9B,0CAA0C;IAC1C,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,KAAK,CAAyB;IACtC,6EAA6E;IAC7E,OAAO,CAAC,IAAI,CAAyB;IACrC,wEAAwE;IACxE,OAAO,CAAC,MAAM,CAAyB;IACvC,yEAAyE;IACzE,OAAO,CAAC,QAAQ,CAAuB;IACvC,gEAAgE;IAChE,OAAO,CAAC,QAAQ,CAAuB;IACvC,OAAO,CAAC,UAAU,CAA2B;IAC7C;;;;;OAKG;IACH,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,QAAQ,CAAK;IACrB,OAAO,CAAC,SAAS,CAAsB;IACvC,wEAAwE;IACxE,OAAO,CAAC,SAAS,CAAuB;IACxC,yDAAyD;IACzD,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,IAAI,CAAqB;IACjC,sEAAsE;IACtE,OAAO,CAAC,UAAU,CAAK;IACvB;;;OAGG;IACH,OAAO,CAAC,UAAU,CAAS;IAC3B,oDAAoD;IACpD,OAAO,CAAC,QAAQ,CAAS;IACzB;;;OAGG;IACH,OAAO,CAAC,aAAa,CAAS;IAC9B,+CAA+C;IAC/C,OAAO,CAAC,UAAU,CAAS;IAC3B,oEAAoE;IACpE,OAAO,CAAC,YAAY,CAA+B;IACnD,kEAAkE;IAClE,OAAO,CAAC,cAAc,CAA6B;IACnD,OAAO,CAAC,mBAAmB,CAA8C;IACzE,8DAA8D;IAC9D,OAAO,CAAC,iBAAiB,CAA8C;IACvE,OAAO,CAAC,cAAc,CAA8C;gBAExD,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,mBAAmB;IAMxD,IAAI,UAAU,IAAI,OAAO,CAExB;IAED,MAAM,CAAC,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,kBAAkB,GAAG,IAAI;IAgClE;;;;;;OAMG;IACH,OAAO,CAAC,aAAa;IAoDrB,yEAAyE;IACzE,OAAO,CAAC,cAAc,CAAmC;IAEzD,OAAO,CAAC,mBAAmB;IAU3B,0DAA0D;IAC1D,OAAO,CAAC,iBAAiB;IAazB,OAAO,CAAC,kBAAkB;IAS1B,wEAAwE;IACxE,MAAM,IAAI,IAAI;IA4Bd,cAAc,CAAC,aAAa,EAAE,OAAO,GAAG,IAAI;IAO5C,4DAA4D;IAC5D,aAAa,CAAC,UAAU,EAAE,UAAU,GAAG,IAAI;IAU3C,WAAW,CAAC,QAAQ,EAAE,mBAAmB,GAAG,IAAI;IAMhD;;;;OAIG;IACH,OAAO,CAAC,eAAe;IA2BvB;;;;OAIG;IACH,QAAQ,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI;IAkE7B,OAAO,CAAC,SAAS;IASjB,6EAA6E;IAC7E,OAAO,CAAC,cAAc;IA4FtB;;;OAGG;IACH,OAAO,CAAC,IAAI;IAiCZ;;;;OAIG;IACH,OAAO,CAAC,OAAO;IAkDf;;;OAGG;IACH,OAAO,CAAC,UAAU;IASlB,kEAAkE;IAClE,OAAO,CAAC,iBAAiB;IAazB,+EAA+E;IAC/E,OAAO,CAAC,OAAO;IAQf,OAAO,CAAC,IAAI;IAIZ,sEAAsE;IACtE,OAAO,CAAC,GAAG;IAIX,8DAA8D;IAC9D,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,QAAQ;IAMhB;;;;OAIG;IACH,OAAO,CAAC,WAAW;IAkBnB;;;;OAIG;IACH,OAAO,CAAC,QAAQ;IAYhB;;;OAGG;IACH,OAAO,CAAC,QAAQ;IAiBhB;;;;;OAKG;IACH,OAAO,CAAC,QAAQ;IAUhB,oEAAoE;IACpE,OAAO,CAAC,SAAS;IAQjB,+CAA+C;IAC/C,OAAO,CAAC,QAAQ;IAqBhB,uEAAuE;IACvE,OAAO,CAAC,UAAU;IAKlB,uEAAuE;IACvE,OAAO,CAAC,UAAU;IAKlB;;;;OAIG;IACH,OAAO,CAAC,IAAI;IAmBZ;;;;OAIG;IACH,OAAO,CAAC,MAAM;IAyCd;;;;OAIG;IACH,OAAO,CAAC,YAAY;IAsCpB,OAAO,CAAC,WAAW;CAUpB;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,gBAAgB,EACvB,EACE,IAAI,EACJ,aAAa,EACb,UAAU,EACV,SAAS,EACT,eAAe,GAChB,EAAE,kBAAkB,GACpB,IAAI,CAsDN"}
|