@teamturing/react-kit 2.3.1 → 2.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/core/Dialog/index.d.ts +16 -0
- package/dist/core/DialogHandler/index.d.ts +13 -0
- package/dist/core/Grid/index.d.ts +2 -2
- package/dist/core/MotionView/index.d.ts +3 -0
- package/dist/core/Stack/index.d.ts +2 -2
- package/dist/enigma/EnigmaUI/index.d.ts +12 -2
- package/dist/hook/useDialogHandler.d.ts +6 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.js +9769 -325
- package/dist/utils/index.d.ts +1 -0
- package/dist/utils/isFunction.d.ts +1 -0
- package/esm/core/Dialog/index.js +188 -0
- package/esm/core/DialogHandler/index.js +33 -0
- package/esm/core/MotionView/index.js +6 -0
- package/esm/enigma/EnigmaUI/index.js +6 -1
- package/esm/hook/useDialogHandler.js +14 -0
- package/esm/index.js +3 -0
- package/esm/node_modules/framer-motion/dist/es/animation/animators/instant.js +40 -0
- package/esm/node_modules/framer-motion/dist/es/animation/animators/js/driver-frameloop.js +16 -0
- package/esm/node_modules/framer-motion/dist/es/animation/animators/js/index.js +303 -0
- package/esm/node_modules/framer-motion/dist/es/animation/animators/waapi/create-accelerated-animation.js +199 -0
- package/esm/node_modules/framer-motion/dist/es/animation/animators/waapi/easing.js +31 -0
- package/esm/node_modules/framer-motion/dist/es/animation/animators/waapi/index.js +23 -0
- package/esm/node_modules/framer-motion/dist/es/animation/animators/waapi/utils/get-final-keyframe.js +8 -0
- package/esm/node_modules/framer-motion/dist/es/animation/generators/inertia.js +87 -0
- package/esm/node_modules/framer-motion/dist/es/animation/generators/keyframes.js +51 -0
- package/esm/node_modules/framer-motion/dist/es/animation/generators/spring/find.js +89 -0
- package/esm/node_modules/framer-motion/dist/es/animation/generators/spring/index.js +129 -0
- package/esm/node_modules/framer-motion/dist/es/animation/generators/utils/calc-duration.js +17 -0
- package/esm/node_modules/framer-motion/dist/es/animation/generators/utils/velocity.js +9 -0
- package/esm/node_modules/framer-motion/dist/es/animation/interfaces/motion-value.js +101 -0
- package/esm/node_modules/framer-motion/dist/es/animation/interfaces/single-value.js +11 -0
- package/esm/node_modules/framer-motion/dist/es/animation/interfaces/visual-element-target.js +71 -0
- package/esm/node_modules/framer-motion/dist/es/animation/interfaces/visual-element-variant.js +63 -0
- package/esm/node_modules/framer-motion/dist/es/animation/interfaces/visual-element.js +24 -0
- package/esm/node_modules/framer-motion/dist/es/animation/optimized-appear/data-id.js +6 -0
- package/esm/node_modules/framer-motion/dist/es/animation/utils/default-transitions.js +40 -0
- package/esm/node_modules/framer-motion/dist/es/animation/utils/is-animatable.js +30 -0
- package/esm/node_modules/framer-motion/dist/es/animation/utils/is-animation-controls.js +5 -0
- package/esm/node_modules/framer-motion/dist/es/animation/utils/is-keyframes-target.js +5 -0
- package/esm/node_modules/framer-motion/dist/es/animation/utils/is-none.js +12 -0
- package/esm/node_modules/framer-motion/dist/es/animation/utils/keyframes.js +45 -0
- package/esm/node_modules/framer-motion/dist/es/animation/utils/transitions.js +13 -0
- package/esm/node_modules/framer-motion/dist/es/components/AnimatePresence/PopChild.js +71 -0
- package/esm/node_modules/framer-motion/dist/es/components/AnimatePresence/PresenceChild.js +56 -0
- package/esm/node_modules/framer-motion/dist/es/components/AnimatePresence/index.js +158 -0
- package/esm/node_modules/framer-motion/dist/es/components/AnimatePresence/use-presence.js +40 -0
- package/esm/node_modules/framer-motion/dist/es/context/LayoutGroupContext.js +5 -0
- package/esm/node_modules/framer-motion/dist/es/context/LazyContext.js +5 -0
- package/esm/node_modules/framer-motion/dist/es/context/MotionConfigContext.js +12 -0
- package/esm/node_modules/framer-motion/dist/es/context/MotionContext/create.js +13 -0
- package/esm/node_modules/framer-motion/dist/es/context/MotionContext/index.js +5 -0
- package/esm/node_modules/framer-motion/dist/es/context/MotionContext/utils.js +17 -0
- package/esm/node_modules/framer-motion/dist/es/context/PresenceContext.js +8 -0
- package/esm/node_modules/framer-motion/dist/es/context/SwitchLayoutGroupContext.js +8 -0
- package/esm/node_modules/framer-motion/dist/es/debug/record.js +7 -0
- package/esm/node_modules/framer-motion/dist/es/easing/anticipate.js +5 -0
- package/esm/node_modules/framer-motion/dist/es/easing/back.js +9 -0
- package/esm/node_modules/framer-motion/dist/es/easing/circ.js +8 -0
- package/esm/node_modules/framer-motion/dist/es/easing/cubic-bezier.js +51 -0
- package/esm/node_modules/framer-motion/dist/es/easing/ease.js +7 -0
- package/esm/node_modules/framer-motion/dist/es/easing/modifiers/mirror.js +5 -0
- package/esm/node_modules/framer-motion/dist/es/easing/modifiers/reverse.js +5 -0
- package/esm/node_modules/framer-motion/dist/es/easing/utils/is-bezier-definition.js +3 -0
- package/esm/node_modules/framer-motion/dist/es/easing/utils/is-easing-array.js +5 -0
- package/esm/node_modules/framer-motion/dist/es/easing/utils/map.js +37 -0
- package/esm/node_modules/framer-motion/dist/es/events/add-dom-event.js +6 -0
- package/esm/node_modules/framer-motion/dist/es/events/add-pointer-event.js +8 -0
- package/esm/node_modules/framer-motion/dist/es/events/event-info.js +15 -0
- package/esm/node_modules/framer-motion/dist/es/events/utils/is-primary-pointer.js +18 -0
- package/esm/node_modules/framer-motion/dist/es/frameloop/batcher.js +60 -0
- package/esm/node_modules/framer-motion/dist/es/frameloop/frame.js +6 -0
- package/esm/node_modules/framer-motion/dist/es/frameloop/render-step.js +104 -0
- package/esm/node_modules/framer-motion/dist/es/gestures/drag/VisualElementDragControls.js +457 -0
- package/esm/node_modules/framer-motion/dist/es/gestures/drag/index.js +27 -0
- package/esm/node_modules/framer-motion/dist/es/gestures/drag/utils/constraints.js +125 -0
- package/esm/node_modules/framer-motion/dist/es/gestures/drag/utils/lock.js +53 -0
- package/esm/node_modules/framer-motion/dist/es/gestures/focus.js +41 -0
- package/esm/node_modules/framer-motion/dist/es/gestures/hover.js +32 -0
- package/esm/node_modules/framer-motion/dist/es/gestures/pan/PanSession.js +148 -0
- package/esm/node_modules/framer-motion/dist/es/gestures/pan/index.js +46 -0
- package/esm/node_modules/framer-motion/dist/es/gestures/press.js +120 -0
- package/esm/node_modules/framer-motion/dist/es/gestures/utils/is-node-or-child.js +20 -0
- package/esm/node_modules/framer-motion/dist/es/motion/features/Feature.js +9 -0
- package/esm/node_modules/framer-motion/dist/es/motion/features/animation/exit.js +31 -0
- package/esm/node_modules/framer-motion/dist/es/motion/features/animation/index.js +38 -0
- package/esm/node_modules/framer-motion/dist/es/motion/features/animations.js +13 -0
- package/esm/node_modules/framer-motion/dist/es/motion/features/definitions.js +28 -0
- package/esm/node_modules/framer-motion/dist/es/motion/features/drag.js +17 -0
- package/esm/node_modules/framer-motion/dist/es/motion/features/gestures.js +21 -0
- package/esm/node_modules/framer-motion/dist/es/motion/features/layout/MeasureLayout.js +131 -0
- package/esm/node_modules/framer-motion/dist/es/motion/features/layout.js +11 -0
- package/esm/node_modules/framer-motion/dist/es/motion/features/load-features.js +12 -0
- package/esm/node_modules/framer-motion/dist/es/motion/features/viewport/index.js +72 -0
- package/esm/node_modules/framer-motion/dist/es/motion/features/viewport/observers.js +49 -0
- package/esm/node_modules/framer-motion/dist/es/motion/index.js +79 -0
- package/esm/node_modules/framer-motion/dist/es/motion/utils/is-forced-motion-value.js +11 -0
- package/esm/node_modules/framer-motion/dist/es/motion/utils/symbol.js +3 -0
- package/esm/node_modules/framer-motion/dist/es/motion/utils/use-motion-ref.js +33 -0
- package/esm/node_modules/framer-motion/dist/es/motion/utils/use-visual-element.js +75 -0
- package/esm/node_modules/framer-motion/dist/es/motion/utils/use-visual-state.js +81 -0
- package/esm/node_modules/framer-motion/dist/es/motion/utils/valid-prop.js +59 -0
- package/esm/node_modules/framer-motion/dist/es/projection/animation/mix-values.js +93 -0
- package/esm/node_modules/framer-motion/dist/es/projection/geometry/conversion.js +33 -0
- package/esm/node_modules/framer-motion/dist/es/projection/geometry/copy.js +20 -0
- package/esm/node_modules/framer-motion/dist/es/projection/geometry/delta-apply.js +122 -0
- package/esm/node_modules/framer-motion/dist/es/projection/geometry/delta-calc.js +41 -0
- package/esm/node_modules/framer-motion/dist/es/projection/geometry/delta-remove.js +54 -0
- package/esm/node_modules/framer-motion/dist/es/projection/geometry/models.js +17 -0
- package/esm/node_modules/framer-motion/dist/es/projection/geometry/utils.js +25 -0
- package/esm/node_modules/framer-motion/dist/es/projection/node/DocumentProjectionNode.js +13 -0
- package/esm/node_modules/framer-motion/dist/es/projection/node/HTMLProjectionNode.js +27 -0
- package/esm/node_modules/framer-motion/dist/es/projection/node/create-projection-node.js +1494 -0
- package/esm/node_modules/framer-motion/dist/es/projection/node/state.js +19 -0
- package/esm/node_modules/framer-motion/dist/es/projection/shared/stack.js +112 -0
- package/esm/node_modules/framer-motion/dist/es/projection/styles/scale-border-radius.js +41 -0
- package/esm/node_modules/framer-motion/dist/es/projection/styles/scale-box-shadow.js +35 -0
- package/esm/node_modules/framer-motion/dist/es/projection/styles/scale-correction.js +6 -0
- package/esm/node_modules/framer-motion/dist/es/projection/styles/transform.js +42 -0
- package/esm/node_modules/framer-motion/dist/es/projection/utils/each-axis.js +5 -0
- package/esm/node_modules/framer-motion/dist/es/projection/utils/has-transform.js +24 -0
- package/esm/node_modules/framer-motion/dist/es/projection/utils/measure.js +17 -0
- package/esm/node_modules/framer-motion/dist/es/render/VisualElement.js +507 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/DOMVisualElement.js +48 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/create-visual-element.js +11 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/motion-proxy.js +47 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/motion.js +23 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/use-render.js +35 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/utils/camel-to-dash.js +6 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/utils/create-config.js +19 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/utils/css-variables-conversion.js +89 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/utils/filter-props.js +57 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/utils/is-css-variable.js +6 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/utils/is-svg-component.js +30 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/utils/is-svg-element.js +5 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/utils/parse-dom-variant.js +15 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/utils/unit-conversion.js +230 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/value-types/animatable-none.js +15 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/value-types/defaults.js +30 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/value-types/dimensions.js +15 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/value-types/find.js +15 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/value-types/get-as-type.js +10 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/value-types/number.js +72 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/value-types/test.js +6 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/value-types/type-auto.js +9 -0
- package/esm/node_modules/framer-motion/dist/es/render/dom/value-types/type-int.js +8 -0
- package/esm/node_modules/framer-motion/dist/es/render/html/HTMLVisualElement.js +55 -0
- package/esm/node_modules/framer-motion/dist/es/render/html/config-motion.js +12 -0
- package/esm/node_modules/framer-motion/dist/es/render/html/use-props.js +57 -0
- package/esm/node_modules/framer-motion/dist/es/render/html/utils/build-styles.js +74 -0
- package/esm/node_modules/framer-motion/dist/es/render/html/utils/build-transform.js +45 -0
- package/esm/node_modules/framer-motion/dist/es/render/html/utils/create-render-state.js +8 -0
- package/esm/node_modules/framer-motion/dist/es/render/html/utils/render.js +9 -0
- package/esm/node_modules/framer-motion/dist/es/render/html/utils/scrape-motion-values.js +17 -0
- package/esm/node_modules/framer-motion/dist/es/render/html/utils/transform.js +28 -0
- package/esm/node_modules/framer-motion/dist/es/render/store.js +3 -0
- package/esm/node_modules/framer-motion/dist/es/render/svg/SVGVisualElement.js +46 -0
- package/esm/node_modules/framer-motion/dist/es/render/svg/config-motion.js +40 -0
- package/esm/node_modules/framer-motion/dist/es/render/svg/lowercase-elements.js +33 -0
- package/esm/node_modules/framer-motion/dist/es/render/svg/use-props.js +24 -0
- package/esm/node_modules/framer-motion/dist/es/render/svg/utils/build-attrs.js +52 -0
- package/esm/node_modules/framer-motion/dist/es/render/svg/utils/camel-case-attrs.js +30 -0
- package/esm/node_modules/framer-motion/dist/es/render/svg/utils/create-render-state.js +8 -0
- package/esm/node_modules/framer-motion/dist/es/render/svg/utils/is-svg-tag.js +3 -0
- package/esm/node_modules/framer-motion/dist/es/render/svg/utils/path.js +32 -0
- package/esm/node_modules/framer-motion/dist/es/render/svg/utils/render.js +12 -0
- package/esm/node_modules/framer-motion/dist/es/render/svg/utils/scrape-motion-values.js +18 -0
- package/esm/node_modules/framer-motion/dist/es/render/svg/utils/transform-origin.js +18 -0
- package/esm/node_modules/framer-motion/dist/es/render/utils/animation-state.js +319 -0
- package/esm/node_modules/framer-motion/dist/es/render/utils/compare-by-depth.js +3 -0
- package/esm/node_modules/framer-motion/dist/es/render/utils/flat-tree.js +24 -0
- package/esm/node_modules/framer-motion/dist/es/render/utils/is-controlling-variants.js +13 -0
- package/esm/node_modules/framer-motion/dist/es/render/utils/is-variant-label.js +8 -0
- package/esm/node_modules/framer-motion/dist/es/render/utils/motion-values.js +63 -0
- package/esm/node_modules/framer-motion/dist/es/render/utils/resolve-dynamic-variants.js +24 -0
- package/esm/node_modules/framer-motion/dist/es/render/utils/resolve-variants.js +26 -0
- package/esm/node_modules/framer-motion/dist/es/render/utils/setters.js +101 -0
- package/esm/node_modules/framer-motion/dist/es/render/utils/variant-props.js +12 -0
- package/esm/node_modules/framer-motion/dist/es/utils/array.js +11 -0
- package/esm/node_modules/framer-motion/dist/es/utils/clamp.js +3 -0
- package/esm/node_modules/framer-motion/dist/es/utils/delay.js +19 -0
- package/esm/node_modules/framer-motion/dist/es/utils/distance.js +9 -0
- package/esm/node_modules/framer-motion/dist/es/utils/errors.js +18 -0
- package/esm/node_modules/framer-motion/dist/es/utils/hsla-to-rgba.js +42 -0
- package/esm/node_modules/framer-motion/dist/es/utils/interpolate.js +92 -0
- package/esm/node_modules/framer-motion/dist/es/utils/is-browser.js +3 -0
- package/esm/node_modules/framer-motion/dist/es/utils/is-numerical-string.js +6 -0
- package/esm/node_modules/framer-motion/dist/es/utils/is-ref-object.js +6 -0
- package/esm/node_modules/framer-motion/dist/es/utils/is-zero-value-string.js +6 -0
- package/esm/node_modules/framer-motion/dist/es/utils/memo.js +10 -0
- package/esm/node_modules/framer-motion/dist/es/utils/mix-color.js +40 -0
- package/esm/node_modules/framer-motion/dist/es/utils/mix-complex.js +64 -0
- package/esm/node_modules/framer-motion/dist/es/utils/mix.js +24 -0
- package/esm/node_modules/framer-motion/dist/es/utils/noop.js +3 -0
- package/esm/node_modules/framer-motion/dist/es/utils/offsets/default.js +9 -0
- package/esm/node_modules/framer-motion/dist/es/utils/offsets/fill.js +12 -0
- package/esm/node_modules/framer-motion/dist/es/utils/offsets/time.js +5 -0
- package/esm/node_modules/framer-motion/dist/es/utils/pipe.js +11 -0
- package/esm/node_modules/framer-motion/dist/es/utils/progress.js +18 -0
- package/esm/node_modules/framer-motion/dist/es/utils/reduced-motion/index.js +19 -0
- package/esm/node_modules/framer-motion/dist/es/utils/reduced-motion/state.js +5 -0
- package/esm/node_modules/framer-motion/dist/es/utils/resolve-value.js +11 -0
- package/esm/node_modules/framer-motion/dist/es/utils/shallow-compare.js +14 -0
- package/esm/node_modules/framer-motion/dist/es/utils/subscription-manager.js +40 -0
- package/esm/node_modules/framer-motion/dist/es/utils/time-conversion.js +10 -0
- package/esm/node_modules/framer-motion/dist/es/utils/use-constant.js +18 -0
- package/esm/node_modules/framer-motion/dist/es/utils/use-force-update.js +19 -0
- package/esm/node_modules/framer-motion/dist/es/utils/use-instant-transition-state.js +5 -0
- package/esm/node_modules/framer-motion/dist/es/utils/use-is-mounted.js +15 -0
- package/esm/node_modules/framer-motion/dist/es/utils/use-isomorphic-effect.js +6 -0
- package/esm/node_modules/framer-motion/dist/es/utils/use-unmount-effect.js +7 -0
- package/esm/node_modules/framer-motion/dist/es/utils/velocity-per-second.js +11 -0
- package/esm/node_modules/framer-motion/dist/es/utils/warn-once.js +11 -0
- package/esm/node_modules/framer-motion/dist/es/value/index.js +331 -0
- package/esm/node_modules/framer-motion/dist/es/value/types/color/hex.js +40 -0
- package/esm/node_modules/framer-motion/dist/es/value/types/color/hsla.js +22 -0
- package/esm/node_modules/framer-motion/dist/es/value/types/color/index.js +28 -0
- package/esm/node_modules/framer-motion/dist/es/value/types/color/rgba.js +25 -0
- package/esm/node_modules/framer-motion/dist/es/value/types/color/utils.js +23 -0
- package/esm/node_modules/framer-motion/dist/es/value/types/complex/filter.js +30 -0
- package/esm/node_modules/framer-motion/dist/es/value/types/complex/index.js +92 -0
- package/esm/node_modules/framer-motion/dist/es/value/types/numbers/index.js +17 -0
- package/esm/node_modules/framer-motion/dist/es/value/types/numbers/units.js +19 -0
- package/esm/node_modules/framer-motion/dist/es/value/types/utils.js +15 -0
- package/esm/node_modules/framer-motion/dist/es/value/use-will-change/is.js +7 -0
- package/esm/node_modules/framer-motion/dist/es/value/utils/is-motion-value.js +3 -0
- package/esm/node_modules/framer-motion/dist/es/value/utils/resolve-motion-value.js +16 -0
- package/esm/packages/icons/esm/Close.js +17 -0
- package/esm/packages/token-studio/esm/token/elevation/index.js +5 -1
- package/esm/utils/isFunction.js +3 -0
- package/package.json +3 -3
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
import { progress } from '../../../utils/progress.js';
|
|
2
|
+
import { calcLength } from '../../../projection/geometry/delta-calc.js';
|
|
3
|
+
import { clamp } from '../../../utils/clamp.js';
|
|
4
|
+
import { mix } from '../../../utils/mix.js';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Apply constraints to a point. These constraints are both physical along an
|
|
8
|
+
* axis, and an elastic factor that determines how much to constrain the point
|
|
9
|
+
* by if it does lie outside the defined parameters.
|
|
10
|
+
*/
|
|
11
|
+
function applyConstraints(point, { min, max }, elastic) {
|
|
12
|
+
if (min !== undefined && point < min) {
|
|
13
|
+
// If we have a min point defined, and this is outside of that, constrain
|
|
14
|
+
point = elastic ? mix(min, point, elastic.min) : Math.max(point, min);
|
|
15
|
+
}
|
|
16
|
+
else if (max !== undefined && point > max) {
|
|
17
|
+
// If we have a max point defined, and this is outside of that, constrain
|
|
18
|
+
point = elastic ? mix(max, point, elastic.max) : Math.min(point, max);
|
|
19
|
+
}
|
|
20
|
+
return point;
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* Calculate constraints in terms of the viewport when defined relatively to the
|
|
24
|
+
* measured axis. This is measured from the nearest edge, so a max constraint of 200
|
|
25
|
+
* on an axis with a max value of 300 would return a constraint of 500 - axis length
|
|
26
|
+
*/
|
|
27
|
+
function calcRelativeAxisConstraints(axis, min, max) {
|
|
28
|
+
return {
|
|
29
|
+
min: min !== undefined ? axis.min + min : undefined,
|
|
30
|
+
max: max !== undefined
|
|
31
|
+
? axis.max + max - (axis.max - axis.min)
|
|
32
|
+
: undefined,
|
|
33
|
+
};
|
|
34
|
+
}
|
|
35
|
+
/**
|
|
36
|
+
* Calculate constraints in terms of the viewport when
|
|
37
|
+
* defined relatively to the measured bounding box.
|
|
38
|
+
*/
|
|
39
|
+
function calcRelativeConstraints(layoutBox, { top, left, bottom, right }) {
|
|
40
|
+
return {
|
|
41
|
+
x: calcRelativeAxisConstraints(layoutBox.x, left, right),
|
|
42
|
+
y: calcRelativeAxisConstraints(layoutBox.y, top, bottom),
|
|
43
|
+
};
|
|
44
|
+
}
|
|
45
|
+
/**
|
|
46
|
+
* Calculate viewport constraints when defined as another viewport-relative axis
|
|
47
|
+
*/
|
|
48
|
+
function calcViewportAxisConstraints(layoutAxis, constraintsAxis) {
|
|
49
|
+
let min = constraintsAxis.min - layoutAxis.min;
|
|
50
|
+
let max = constraintsAxis.max - layoutAxis.max;
|
|
51
|
+
// If the constraints axis is actually smaller than the layout axis then we can
|
|
52
|
+
// flip the constraints
|
|
53
|
+
if (constraintsAxis.max - constraintsAxis.min <
|
|
54
|
+
layoutAxis.max - layoutAxis.min) {
|
|
55
|
+
[min, max] = [max, min];
|
|
56
|
+
}
|
|
57
|
+
return { min, max };
|
|
58
|
+
}
|
|
59
|
+
/**
|
|
60
|
+
* Calculate viewport constraints when defined as another viewport-relative box
|
|
61
|
+
*/
|
|
62
|
+
function calcViewportConstraints(layoutBox, constraintsBox) {
|
|
63
|
+
return {
|
|
64
|
+
x: calcViewportAxisConstraints(layoutBox.x, constraintsBox.x),
|
|
65
|
+
y: calcViewportAxisConstraints(layoutBox.y, constraintsBox.y),
|
|
66
|
+
};
|
|
67
|
+
}
|
|
68
|
+
/**
|
|
69
|
+
* Calculate a transform origin relative to the source axis, between 0-1, that results
|
|
70
|
+
* in an asthetically pleasing scale/transform needed to project from source to target.
|
|
71
|
+
*/
|
|
72
|
+
function calcOrigin(source, target) {
|
|
73
|
+
let origin = 0.5;
|
|
74
|
+
const sourceLength = calcLength(source);
|
|
75
|
+
const targetLength = calcLength(target);
|
|
76
|
+
if (targetLength > sourceLength) {
|
|
77
|
+
origin = progress(target.min, target.max - sourceLength, source.min);
|
|
78
|
+
}
|
|
79
|
+
else if (sourceLength > targetLength) {
|
|
80
|
+
origin = progress(source.min, source.max - targetLength, target.min);
|
|
81
|
+
}
|
|
82
|
+
return clamp(0, 1, origin);
|
|
83
|
+
}
|
|
84
|
+
/**
|
|
85
|
+
* Rebase the calculated viewport constraints relative to the layout.min point.
|
|
86
|
+
*/
|
|
87
|
+
function rebaseAxisConstraints(layout, constraints) {
|
|
88
|
+
const relativeConstraints = {};
|
|
89
|
+
if (constraints.min !== undefined) {
|
|
90
|
+
relativeConstraints.min = constraints.min - layout.min;
|
|
91
|
+
}
|
|
92
|
+
if (constraints.max !== undefined) {
|
|
93
|
+
relativeConstraints.max = constraints.max - layout.min;
|
|
94
|
+
}
|
|
95
|
+
return relativeConstraints;
|
|
96
|
+
}
|
|
97
|
+
const defaultElastic = 0.35;
|
|
98
|
+
/**
|
|
99
|
+
* Accepts a dragElastic prop and returns resolved elastic values for each axis.
|
|
100
|
+
*/
|
|
101
|
+
function resolveDragElastic(dragElastic = defaultElastic) {
|
|
102
|
+
if (dragElastic === false) {
|
|
103
|
+
dragElastic = 0;
|
|
104
|
+
}
|
|
105
|
+
else if (dragElastic === true) {
|
|
106
|
+
dragElastic = defaultElastic;
|
|
107
|
+
}
|
|
108
|
+
return {
|
|
109
|
+
x: resolveAxisElastic(dragElastic, "left", "right"),
|
|
110
|
+
y: resolveAxisElastic(dragElastic, "top", "bottom"),
|
|
111
|
+
};
|
|
112
|
+
}
|
|
113
|
+
function resolveAxisElastic(dragElastic, minLabel, maxLabel) {
|
|
114
|
+
return {
|
|
115
|
+
min: resolvePointElastic(dragElastic, minLabel),
|
|
116
|
+
max: resolvePointElastic(dragElastic, maxLabel),
|
|
117
|
+
};
|
|
118
|
+
}
|
|
119
|
+
function resolvePointElastic(dragElastic, label) {
|
|
120
|
+
return typeof dragElastic === "number"
|
|
121
|
+
? dragElastic
|
|
122
|
+
: dragElastic[label] || 0;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
export { applyConstraints, calcOrigin, calcRelativeAxisConstraints, calcRelativeConstraints, calcViewportAxisConstraints, calcViewportConstraints, defaultElastic, rebaseAxisConstraints, resolveAxisElastic, resolveDragElastic, resolvePointElastic };
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
function createLock(name) {
|
|
2
|
+
let lock = null;
|
|
3
|
+
return () => {
|
|
4
|
+
const openLock = () => {
|
|
5
|
+
lock = null;
|
|
6
|
+
};
|
|
7
|
+
if (lock === null) {
|
|
8
|
+
lock = name;
|
|
9
|
+
return openLock;
|
|
10
|
+
}
|
|
11
|
+
return false;
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
const globalHorizontalLock = createLock("dragHorizontal");
|
|
15
|
+
const globalVerticalLock = createLock("dragVertical");
|
|
16
|
+
function getGlobalLock(drag) {
|
|
17
|
+
let lock = false;
|
|
18
|
+
if (drag === "y") {
|
|
19
|
+
lock = globalVerticalLock();
|
|
20
|
+
}
|
|
21
|
+
else if (drag === "x") {
|
|
22
|
+
lock = globalHorizontalLock();
|
|
23
|
+
}
|
|
24
|
+
else {
|
|
25
|
+
const openHorizontal = globalHorizontalLock();
|
|
26
|
+
const openVertical = globalVerticalLock();
|
|
27
|
+
if (openHorizontal && openVertical) {
|
|
28
|
+
lock = () => {
|
|
29
|
+
openHorizontal();
|
|
30
|
+
openVertical();
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
else {
|
|
34
|
+
// Release the locks because we don't use them
|
|
35
|
+
if (openHorizontal)
|
|
36
|
+
openHorizontal();
|
|
37
|
+
if (openVertical)
|
|
38
|
+
openVertical();
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
return lock;
|
|
42
|
+
}
|
|
43
|
+
function isDragActive() {
|
|
44
|
+
// Check the gesture lock - if we get it, it means no drag gesture is active
|
|
45
|
+
// and we can safely fire the tap gesture.
|
|
46
|
+
const openGestureLock = getGlobalLock(true);
|
|
47
|
+
if (!openGestureLock)
|
|
48
|
+
return true;
|
|
49
|
+
openGestureLock();
|
|
50
|
+
return false;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
export { createLock, getGlobalLock, isDragActive };
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { addDomEvent } from '../events/add-dom-event.js';
|
|
2
|
+
import { Feature } from '../motion/features/Feature.js';
|
|
3
|
+
import { pipe } from '../utils/pipe.js';
|
|
4
|
+
|
|
5
|
+
class FocusGesture extends Feature {
|
|
6
|
+
constructor() {
|
|
7
|
+
super(...arguments);
|
|
8
|
+
this.isActive = false;
|
|
9
|
+
}
|
|
10
|
+
onFocus() {
|
|
11
|
+
let isFocusVisible = false;
|
|
12
|
+
/**
|
|
13
|
+
* If this element doesn't match focus-visible then don't
|
|
14
|
+
* apply whileHover. But, if matches throws that focus-visible
|
|
15
|
+
* is not a valid selector then in that browser outline styles will be applied
|
|
16
|
+
* to the element by default and we want to match that behaviour with whileFocus.
|
|
17
|
+
*/
|
|
18
|
+
try {
|
|
19
|
+
isFocusVisible = this.node.current.matches(":focus-visible");
|
|
20
|
+
}
|
|
21
|
+
catch (e) {
|
|
22
|
+
isFocusVisible = true;
|
|
23
|
+
}
|
|
24
|
+
if (!isFocusVisible || !this.node.animationState)
|
|
25
|
+
return;
|
|
26
|
+
this.node.animationState.setActive("whileFocus", true);
|
|
27
|
+
this.isActive = true;
|
|
28
|
+
}
|
|
29
|
+
onBlur() {
|
|
30
|
+
if (!this.isActive || !this.node.animationState)
|
|
31
|
+
return;
|
|
32
|
+
this.node.animationState.setActive("whileFocus", false);
|
|
33
|
+
this.isActive = false;
|
|
34
|
+
}
|
|
35
|
+
mount() {
|
|
36
|
+
this.unmount = pipe(addDomEvent(this.node.current, "focus", () => this.onFocus()), addDomEvent(this.node.current, "blur", () => this.onBlur()));
|
|
37
|
+
}
|
|
38
|
+
unmount() { }
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
export { FocusGesture };
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { addPointerEvent } from '../events/add-pointer-event.js';
|
|
2
|
+
import { pipe } from '../utils/pipe.js';
|
|
3
|
+
import { isDragActive } from './drag/utils/lock.js';
|
|
4
|
+
import { Feature } from '../motion/features/Feature.js';
|
|
5
|
+
import { frame } from '../frameloop/frame.js';
|
|
6
|
+
|
|
7
|
+
function addHoverEvent(node, isActive) {
|
|
8
|
+
const eventName = "pointer" + (isActive ? "enter" : "leave");
|
|
9
|
+
const callbackName = "onHover" + (isActive ? "Start" : "End");
|
|
10
|
+
const handleEvent = (event, info) => {
|
|
11
|
+
if (event.type === "touch" || isDragActive())
|
|
12
|
+
return;
|
|
13
|
+
const props = node.getProps();
|
|
14
|
+
if (node.animationState && props.whileHover) {
|
|
15
|
+
node.animationState.setActive("whileHover", isActive);
|
|
16
|
+
}
|
|
17
|
+
if (props[callbackName]) {
|
|
18
|
+
frame.update(() => props[callbackName](event, info));
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
return addPointerEvent(node.current, eventName, handleEvent, {
|
|
22
|
+
passive: !node.getProps()[callbackName],
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
class HoverGesture extends Feature {
|
|
26
|
+
mount() {
|
|
27
|
+
this.unmount = pipe(addHoverEvent(this.node, true), addHoverEvent(this.node, false));
|
|
28
|
+
}
|
|
29
|
+
unmount() { }
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
export { HoverGesture };
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
import { extractEventInfo } from '../../events/event-info.js';
|
|
2
|
+
import { secondsToMilliseconds, millisecondsToSeconds } from '../../utils/time-conversion.js';
|
|
3
|
+
import { addPointerEvent } from '../../events/add-pointer-event.js';
|
|
4
|
+
import { pipe } from '../../utils/pipe.js';
|
|
5
|
+
import { distance2D } from '../../utils/distance.js';
|
|
6
|
+
import { isPrimaryPointer } from '../../events/utils/is-primary-pointer.js';
|
|
7
|
+
import { frame, cancelFrame, frameData } from '../../frameloop/frame.js';
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* @internal
|
|
11
|
+
*/
|
|
12
|
+
class PanSession {
|
|
13
|
+
constructor(event, handlers, { transformPagePoint } = {}) {
|
|
14
|
+
/**
|
|
15
|
+
* @internal
|
|
16
|
+
*/
|
|
17
|
+
this.startEvent = null;
|
|
18
|
+
/**
|
|
19
|
+
* @internal
|
|
20
|
+
*/
|
|
21
|
+
this.lastMoveEvent = null;
|
|
22
|
+
/**
|
|
23
|
+
* @internal
|
|
24
|
+
*/
|
|
25
|
+
this.lastMoveEventInfo = null;
|
|
26
|
+
/**
|
|
27
|
+
* @internal
|
|
28
|
+
*/
|
|
29
|
+
this.handlers = {};
|
|
30
|
+
this.updatePoint = () => {
|
|
31
|
+
if (!(this.lastMoveEvent && this.lastMoveEventInfo))
|
|
32
|
+
return;
|
|
33
|
+
const info = getPanInfo(this.lastMoveEventInfo, this.history);
|
|
34
|
+
const isPanStarted = this.startEvent !== null;
|
|
35
|
+
// Only start panning if the offset is larger than 3 pixels. If we make it
|
|
36
|
+
// any larger than this we'll want to reset the pointer history
|
|
37
|
+
// on the first update to avoid visual snapping to the cursoe.
|
|
38
|
+
const isDistancePastThreshold = distance2D(info.offset, { x: 0, y: 0 }) >= 3;
|
|
39
|
+
if (!isPanStarted && !isDistancePastThreshold)
|
|
40
|
+
return;
|
|
41
|
+
const { point } = info;
|
|
42
|
+
const { timestamp } = frameData;
|
|
43
|
+
this.history.push({ ...point, timestamp });
|
|
44
|
+
const { onStart, onMove } = this.handlers;
|
|
45
|
+
if (!isPanStarted) {
|
|
46
|
+
onStart && onStart(this.lastMoveEvent, info);
|
|
47
|
+
this.startEvent = this.lastMoveEvent;
|
|
48
|
+
}
|
|
49
|
+
onMove && onMove(this.lastMoveEvent, info);
|
|
50
|
+
};
|
|
51
|
+
this.handlePointerMove = (event, info) => {
|
|
52
|
+
this.lastMoveEvent = event;
|
|
53
|
+
this.lastMoveEventInfo = transformPoint(info, this.transformPagePoint);
|
|
54
|
+
// Throttle mouse move event to once per frame
|
|
55
|
+
frame.update(this.updatePoint, true);
|
|
56
|
+
};
|
|
57
|
+
this.handlePointerUp = (event, info) => {
|
|
58
|
+
this.end();
|
|
59
|
+
if (!(this.lastMoveEvent && this.lastMoveEventInfo))
|
|
60
|
+
return;
|
|
61
|
+
const { onEnd, onSessionEnd } = this.handlers;
|
|
62
|
+
const panInfo = getPanInfo(event.type === "pointercancel"
|
|
63
|
+
? this.lastMoveEventInfo
|
|
64
|
+
: transformPoint(info, this.transformPagePoint), this.history);
|
|
65
|
+
if (this.startEvent && onEnd) {
|
|
66
|
+
onEnd(event, panInfo);
|
|
67
|
+
}
|
|
68
|
+
onSessionEnd && onSessionEnd(event, panInfo);
|
|
69
|
+
};
|
|
70
|
+
// If we have more than one touch, don't start detecting this gesture
|
|
71
|
+
if (!isPrimaryPointer(event))
|
|
72
|
+
return;
|
|
73
|
+
this.handlers = handlers;
|
|
74
|
+
this.transformPagePoint = transformPagePoint;
|
|
75
|
+
const info = extractEventInfo(event);
|
|
76
|
+
const initialInfo = transformPoint(info, this.transformPagePoint);
|
|
77
|
+
const { point } = initialInfo;
|
|
78
|
+
const { timestamp } = frameData;
|
|
79
|
+
this.history = [{ ...point, timestamp }];
|
|
80
|
+
const { onSessionStart } = handlers;
|
|
81
|
+
onSessionStart &&
|
|
82
|
+
onSessionStart(event, getPanInfo(initialInfo, this.history));
|
|
83
|
+
this.removeListeners = pipe(addPointerEvent(window, "pointermove", this.handlePointerMove), addPointerEvent(window, "pointerup", this.handlePointerUp), addPointerEvent(window, "pointercancel", this.handlePointerUp));
|
|
84
|
+
}
|
|
85
|
+
updateHandlers(handlers) {
|
|
86
|
+
this.handlers = handlers;
|
|
87
|
+
}
|
|
88
|
+
end() {
|
|
89
|
+
this.removeListeners && this.removeListeners();
|
|
90
|
+
cancelFrame(this.updatePoint);
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
function transformPoint(info, transformPagePoint) {
|
|
94
|
+
return transformPagePoint ? { point: transformPagePoint(info.point) } : info;
|
|
95
|
+
}
|
|
96
|
+
function subtractPoint(a, b) {
|
|
97
|
+
return { x: a.x - b.x, y: a.y - b.y };
|
|
98
|
+
}
|
|
99
|
+
function getPanInfo({ point }, history) {
|
|
100
|
+
return {
|
|
101
|
+
point,
|
|
102
|
+
delta: subtractPoint(point, lastDevicePoint(history)),
|
|
103
|
+
offset: subtractPoint(point, startDevicePoint(history)),
|
|
104
|
+
velocity: getVelocity(history, 0.1),
|
|
105
|
+
};
|
|
106
|
+
}
|
|
107
|
+
function startDevicePoint(history) {
|
|
108
|
+
return history[0];
|
|
109
|
+
}
|
|
110
|
+
function lastDevicePoint(history) {
|
|
111
|
+
return history[history.length - 1];
|
|
112
|
+
}
|
|
113
|
+
function getVelocity(history, timeDelta) {
|
|
114
|
+
if (history.length < 2) {
|
|
115
|
+
return { x: 0, y: 0 };
|
|
116
|
+
}
|
|
117
|
+
let i = history.length - 1;
|
|
118
|
+
let timestampedPoint = null;
|
|
119
|
+
const lastPoint = lastDevicePoint(history);
|
|
120
|
+
while (i >= 0) {
|
|
121
|
+
timestampedPoint = history[i];
|
|
122
|
+
if (lastPoint.timestamp - timestampedPoint.timestamp >
|
|
123
|
+
secondsToMilliseconds(timeDelta)) {
|
|
124
|
+
break;
|
|
125
|
+
}
|
|
126
|
+
i--;
|
|
127
|
+
}
|
|
128
|
+
if (!timestampedPoint) {
|
|
129
|
+
return { x: 0, y: 0 };
|
|
130
|
+
}
|
|
131
|
+
const time = millisecondsToSeconds(lastPoint.timestamp - timestampedPoint.timestamp);
|
|
132
|
+
if (time === 0) {
|
|
133
|
+
return { x: 0, y: 0 };
|
|
134
|
+
}
|
|
135
|
+
const currentVelocity = {
|
|
136
|
+
x: (lastPoint.x - timestampedPoint.x) / time,
|
|
137
|
+
y: (lastPoint.y - timestampedPoint.y) / time,
|
|
138
|
+
};
|
|
139
|
+
if (currentVelocity.x === Infinity) {
|
|
140
|
+
currentVelocity.x = 0;
|
|
141
|
+
}
|
|
142
|
+
if (currentVelocity.y === Infinity) {
|
|
143
|
+
currentVelocity.y = 0;
|
|
144
|
+
}
|
|
145
|
+
return currentVelocity;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
export { PanSession };
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { PanSession } from './PanSession.js';
|
|
2
|
+
import { addPointerEvent } from '../../events/add-pointer-event.js';
|
|
3
|
+
import { Feature } from '../../motion/features/Feature.js';
|
|
4
|
+
import { noop } from '../../utils/noop.js';
|
|
5
|
+
import { frame } from '../../frameloop/frame.js';
|
|
6
|
+
|
|
7
|
+
const asyncHandler = (handler) => (event, info) => {
|
|
8
|
+
if (handler) {
|
|
9
|
+
frame.update(() => handler(event, info));
|
|
10
|
+
}
|
|
11
|
+
};
|
|
12
|
+
class PanGesture extends Feature {
|
|
13
|
+
constructor() {
|
|
14
|
+
super(...arguments);
|
|
15
|
+
this.removePointerDownListener = noop;
|
|
16
|
+
}
|
|
17
|
+
onPointerDown(pointerDownEvent) {
|
|
18
|
+
this.session = new PanSession(pointerDownEvent, this.createPanHandlers(), { transformPagePoint: this.node.getTransformPagePoint() });
|
|
19
|
+
}
|
|
20
|
+
createPanHandlers() {
|
|
21
|
+
const { onPanSessionStart, onPanStart, onPan, onPanEnd } = this.node.getProps();
|
|
22
|
+
return {
|
|
23
|
+
onSessionStart: asyncHandler(onPanSessionStart),
|
|
24
|
+
onStart: asyncHandler(onPanStart),
|
|
25
|
+
onMove: onPan,
|
|
26
|
+
onEnd: (event, info) => {
|
|
27
|
+
delete this.session;
|
|
28
|
+
if (onPanEnd) {
|
|
29
|
+
frame.update(() => onPanEnd(event, info));
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
mount() {
|
|
35
|
+
this.removePointerDownListener = addPointerEvent(this.node.current, "pointerdown", (event) => this.onPointerDown(event));
|
|
36
|
+
}
|
|
37
|
+
update() {
|
|
38
|
+
this.session && this.session.updateHandlers(this.createPanHandlers());
|
|
39
|
+
}
|
|
40
|
+
unmount() {
|
|
41
|
+
this.removePointerDownListener();
|
|
42
|
+
this.session && this.session.end();
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
export { PanGesture };
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
import { extractEventInfo } from '../events/event-info.js';
|
|
2
|
+
import { addDomEvent } from '../events/add-dom-event.js';
|
|
3
|
+
import { addPointerEvent } from '../events/add-pointer-event.js';
|
|
4
|
+
import { Feature } from '../motion/features/Feature.js';
|
|
5
|
+
import { pipe } from '../utils/pipe.js';
|
|
6
|
+
import { isDragActive } from './drag/utils/lock.js';
|
|
7
|
+
import { isNodeOrChild } from './utils/is-node-or-child.js';
|
|
8
|
+
import { noop } from '../utils/noop.js';
|
|
9
|
+
import { frame } from '../frameloop/frame.js';
|
|
10
|
+
|
|
11
|
+
function fireSyntheticPointerEvent(name, handler) {
|
|
12
|
+
if (!handler)
|
|
13
|
+
return;
|
|
14
|
+
const syntheticPointerEvent = new PointerEvent("pointer" + name);
|
|
15
|
+
handler(syntheticPointerEvent, extractEventInfo(syntheticPointerEvent));
|
|
16
|
+
}
|
|
17
|
+
class PressGesture extends Feature {
|
|
18
|
+
constructor() {
|
|
19
|
+
super(...arguments);
|
|
20
|
+
this.removeStartListeners = noop;
|
|
21
|
+
this.removeEndListeners = noop;
|
|
22
|
+
this.removeAccessibleListeners = noop;
|
|
23
|
+
this.startPointerPress = (startEvent, startInfo) => {
|
|
24
|
+
this.removeEndListeners();
|
|
25
|
+
if (this.isPressing)
|
|
26
|
+
return;
|
|
27
|
+
const props = this.node.getProps();
|
|
28
|
+
const endPointerPress = (endEvent, endInfo) => {
|
|
29
|
+
if (!this.checkPressEnd())
|
|
30
|
+
return;
|
|
31
|
+
const { onTap, onTapCancel } = this.node.getProps();
|
|
32
|
+
frame.update(() => {
|
|
33
|
+
/**
|
|
34
|
+
* We only count this as a tap gesture if the event.target is the same
|
|
35
|
+
* as, or a child of, this component's element
|
|
36
|
+
*/
|
|
37
|
+
!isNodeOrChild(this.node.current, endEvent.target)
|
|
38
|
+
? onTapCancel && onTapCancel(endEvent, endInfo)
|
|
39
|
+
: onTap && onTap(endEvent, endInfo);
|
|
40
|
+
});
|
|
41
|
+
};
|
|
42
|
+
const removePointerUpListener = addPointerEvent(window, "pointerup", endPointerPress, { passive: !(props.onTap || props["onPointerUp"]) });
|
|
43
|
+
const removePointerCancelListener = addPointerEvent(window, "pointercancel", (cancelEvent, cancelInfo) => this.cancelPress(cancelEvent, cancelInfo), { passive: !(props.onTapCancel || props["onPointerCancel"]) });
|
|
44
|
+
this.removeEndListeners = pipe(removePointerUpListener, removePointerCancelListener);
|
|
45
|
+
this.startPress(startEvent, startInfo);
|
|
46
|
+
};
|
|
47
|
+
this.startAccessiblePress = () => {
|
|
48
|
+
const handleKeydown = (keydownEvent) => {
|
|
49
|
+
if (keydownEvent.key !== "Enter" || this.isPressing)
|
|
50
|
+
return;
|
|
51
|
+
const handleKeyup = (keyupEvent) => {
|
|
52
|
+
if (keyupEvent.key !== "Enter" || !this.checkPressEnd())
|
|
53
|
+
return;
|
|
54
|
+
fireSyntheticPointerEvent("up", (event, info) => {
|
|
55
|
+
const { onTap } = this.node.getProps();
|
|
56
|
+
if (onTap) {
|
|
57
|
+
frame.update(() => onTap(event, info));
|
|
58
|
+
}
|
|
59
|
+
});
|
|
60
|
+
};
|
|
61
|
+
this.removeEndListeners();
|
|
62
|
+
this.removeEndListeners = addDomEvent(this.node.current, "keyup", handleKeyup);
|
|
63
|
+
fireSyntheticPointerEvent("down", (event, info) => {
|
|
64
|
+
this.startPress(event, info);
|
|
65
|
+
});
|
|
66
|
+
};
|
|
67
|
+
const removeKeydownListener = addDomEvent(this.node.current, "keydown", handleKeydown);
|
|
68
|
+
const handleBlur = () => {
|
|
69
|
+
if (!this.isPressing)
|
|
70
|
+
return;
|
|
71
|
+
fireSyntheticPointerEvent("cancel", (cancelEvent, cancelInfo) => this.cancelPress(cancelEvent, cancelInfo));
|
|
72
|
+
};
|
|
73
|
+
const removeBlurListener = addDomEvent(this.node.current, "blur", handleBlur);
|
|
74
|
+
this.removeAccessibleListeners = pipe(removeKeydownListener, removeBlurListener);
|
|
75
|
+
};
|
|
76
|
+
}
|
|
77
|
+
startPress(event, info) {
|
|
78
|
+
this.isPressing = true;
|
|
79
|
+
const { onTapStart, whileTap } = this.node.getProps();
|
|
80
|
+
/**
|
|
81
|
+
* Ensure we trigger animations before firing event callback
|
|
82
|
+
*/
|
|
83
|
+
if (whileTap && this.node.animationState) {
|
|
84
|
+
this.node.animationState.setActive("whileTap", true);
|
|
85
|
+
}
|
|
86
|
+
if (onTapStart) {
|
|
87
|
+
frame.update(() => onTapStart(event, info));
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
checkPressEnd() {
|
|
91
|
+
this.removeEndListeners();
|
|
92
|
+
this.isPressing = false;
|
|
93
|
+
const props = this.node.getProps();
|
|
94
|
+
if (props.whileTap && this.node.animationState) {
|
|
95
|
+
this.node.animationState.setActive("whileTap", false);
|
|
96
|
+
}
|
|
97
|
+
return !isDragActive();
|
|
98
|
+
}
|
|
99
|
+
cancelPress(event, info) {
|
|
100
|
+
if (!this.checkPressEnd())
|
|
101
|
+
return;
|
|
102
|
+
const { onTapCancel } = this.node.getProps();
|
|
103
|
+
if (onTapCancel) {
|
|
104
|
+
frame.update(() => onTapCancel(event, info));
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
mount() {
|
|
108
|
+
const props = this.node.getProps();
|
|
109
|
+
const removePointerListener = addPointerEvent(this.node.current, "pointerdown", this.startPointerPress, { passive: !(props.onTapStart || props["onPointerStart"]) });
|
|
110
|
+
const removeFocusListener = addDomEvent(this.node.current, "focus", this.startAccessiblePress);
|
|
111
|
+
this.removeStartListeners = pipe(removePointerListener, removeFocusListener);
|
|
112
|
+
}
|
|
113
|
+
unmount() {
|
|
114
|
+
this.removeStartListeners();
|
|
115
|
+
this.removeEndListeners();
|
|
116
|
+
this.removeAccessibleListeners();
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
export { PressGesture };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Recursively traverse up the tree to check whether the provided child node
|
|
3
|
+
* is the parent or a descendant of it.
|
|
4
|
+
*
|
|
5
|
+
* @param parent - Element to find
|
|
6
|
+
* @param child - Element to test against parent
|
|
7
|
+
*/
|
|
8
|
+
const isNodeOrChild = (parent, child) => {
|
|
9
|
+
if (!child) {
|
|
10
|
+
return false;
|
|
11
|
+
}
|
|
12
|
+
else if (parent === child) {
|
|
13
|
+
return true;
|
|
14
|
+
}
|
|
15
|
+
else {
|
|
16
|
+
return isNodeOrChild(parent, child.parentElement);
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
export { isNodeOrChild };
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { Feature } from '../Feature.js';
|
|
2
|
+
|
|
3
|
+
let id = 0;
|
|
4
|
+
class ExitAnimationFeature extends Feature {
|
|
5
|
+
constructor() {
|
|
6
|
+
super(...arguments);
|
|
7
|
+
this.id = id++;
|
|
8
|
+
}
|
|
9
|
+
update() {
|
|
10
|
+
if (!this.node.presenceContext)
|
|
11
|
+
return;
|
|
12
|
+
const { isPresent, onExitComplete, custom } = this.node.presenceContext;
|
|
13
|
+
const { isPresent: prevIsPresent } = this.node.prevPresenceContext || {};
|
|
14
|
+
if (!this.node.animationState || isPresent === prevIsPresent) {
|
|
15
|
+
return;
|
|
16
|
+
}
|
|
17
|
+
const exitAnimation = this.node.animationState.setActive("exit", !isPresent, { custom: custom !== null && custom !== void 0 ? custom : this.node.getProps().custom });
|
|
18
|
+
if (onExitComplete && !isPresent) {
|
|
19
|
+
exitAnimation.then(() => onExitComplete(this.id));
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
mount() {
|
|
23
|
+
const { register } = this.node.presenceContext || {};
|
|
24
|
+
if (register) {
|
|
25
|
+
this.unmount = register(this.id);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
unmount() { }
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
export { ExitAnimationFeature };
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { isAnimationControls } from '../../../animation/utils/is-animation-controls.js';
|
|
2
|
+
import { createAnimationState } from '../../../render/utils/animation-state.js';
|
|
3
|
+
import { Feature } from '../Feature.js';
|
|
4
|
+
|
|
5
|
+
class AnimationFeature extends Feature {
|
|
6
|
+
/**
|
|
7
|
+
* We dynamically generate the AnimationState manager as it contains a reference
|
|
8
|
+
* to the underlying animation library. We only want to load that if we load this,
|
|
9
|
+
* so people can optionally code split it out using the `m` component.
|
|
10
|
+
*/
|
|
11
|
+
constructor(node) {
|
|
12
|
+
super(node);
|
|
13
|
+
node.animationState || (node.animationState = createAnimationState(node));
|
|
14
|
+
}
|
|
15
|
+
updateAnimationControlsSubscription() {
|
|
16
|
+
const { animate } = this.node.getProps();
|
|
17
|
+
this.unmount();
|
|
18
|
+
if (isAnimationControls(animate)) {
|
|
19
|
+
this.unmount = animate.subscribe(this.node);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* Subscribe any provided AnimationControls to the component's VisualElement
|
|
24
|
+
*/
|
|
25
|
+
mount() {
|
|
26
|
+
this.updateAnimationControlsSubscription();
|
|
27
|
+
}
|
|
28
|
+
update() {
|
|
29
|
+
const { animate } = this.node.getProps();
|
|
30
|
+
const { animate: prevAnimate } = this.node.prevProps || {};
|
|
31
|
+
if (animate !== prevAnimate) {
|
|
32
|
+
this.updateAnimationControlsSubscription();
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
unmount() { }
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
export { AnimationFeature };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { AnimationFeature } from './animation/index.js';
|
|
2
|
+
import { ExitAnimationFeature } from './animation/exit.js';
|
|
3
|
+
|
|
4
|
+
const animations = {
|
|
5
|
+
animation: {
|
|
6
|
+
Feature: AnimationFeature,
|
|
7
|
+
},
|
|
8
|
+
exit: {
|
|
9
|
+
Feature: ExitAnimationFeature,
|
|
10
|
+
},
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
export { animations };
|