use-props.mjs 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. import { useMemo } from 'react';
  2. import { isForcedMotionValue } from '../../motion/utils/is-forced-motion-value.mjs';
  3. import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
  4. import { buildHTMLStyles } from './utils/build-styles.mjs';
  5. import { createHtmlRenderState } from './utils/create-render-state.mjs';
  6. function copyRawValuesOnly(target, source, props) {
  7. for (const key in source) {
  8. if (!isMotionValue(source[key]) && !isForcedMotionValue(key, props)) {
  9. target[key] = source[key];
  10. }
  11. }
  12. }
  13. function useInitialMotionValues({ transformTemplate }, visualState) {
  14. return useMemo(() => {
  15. const state = createHtmlRenderState();
  16. buildHTMLStyles(state, visualState, transformTemplate);
  17. return Object.assign({}, state.vars, state.style);
  18. }, [visualState]);
  19. }
  20. function useStyle(props, visualState) {
  21. const styleProp = props.style || {};
  22. const style = {};
  23. /**
  24. * Copy non-Motion Values straight into style
  25. */
  26. copyRawValuesOnly(style, styleProp, props);
  27. Object.assign(style, useInitialMotionValues(props, visualState));
  28. return style;
  29. }
  30. function useHTMLProps(props, visualState) {
  31. // The `any` isn't ideal but it is the type of createElement props argument
  32. const htmlProps = {};
  33. const style = useStyle(props, visualState);
  34. if (props.drag && props.dragListener !== false) {
  35. // Disable the ghost element when a user drags
  36. htmlProps.draggable = false;
  37. // Disable text selection
  38. style.userSelect =
  39. style.WebkitUserSelect =
  40. style.WebkitTouchCallout =
  41. "none";
  42. // Disable scrolling on the draggable direction
  43. style.touchAction =
  44. props.drag === true
  45. ? "none"
  46. : `pan-${props.drag === "x" ? "y" : "x"}`;
  47. }
  48. if (props.tabIndex === undefined &&
  49. (props.onTap || props.onTapStart || props.whileTap)) {
  50. htmlProps.tabIndex = 0;
  51. }
  52. htmlProps.style = style;
  53. return htmlProps;
  54. }
  55. export { copyRawValuesOnly, useHTMLProps };