react-flip-toolkit/lib/index.modern.mjs.map

Configurable FLIP animation helpers for React

{"version":3,"file":"index.modern.mjs","sources":["../src/Flipper/context.ts","../src/Flipper/index.tsx","../src/Flipped/index.tsx","../src/ExitContainer/index.tsx"],"sourcesContent":["import { createContext } from 'react'\nimport { FlipCallbacks } from 'flip-toolkit/lib/types'\n\nexport const FlipContext = createContext({} as FlipCallbacks)\nexport const PortalContext = createContext('portal')\n","import React, { Component } from 'react'\nimport PropTypes from 'prop-types'\nimport {\n  getFlippedElementPositionsBeforeUpdate,\n  onFlipKeyUpdate\n} from 'flip-toolkit'\nimport {\n  FlipperProps,\n  InProgressAnimations,\n  FlipCallbacks\n} from 'flip-toolkit/lib/types'\nimport { FlippedElementPositionsBeforeUpdateReturnVals } from 'flip-toolkit/lib/flip/getFlippedElementPositions/getFlippedElementPositionsBeforeUpdate/types'\nimport { FlipContext, PortalContext } from './context'\n\nclass Flipper extends Component<FlipperProps> {\n  static defaultProps = {\n    applyTransformOrigin: true,\n    element: 'div'\n  }\n\n  private inProgressAnimations: InProgressAnimations = {}\n  private flipCallbacks: FlipCallbacks = {}\n  private el?: HTMLElement = undefined\n\n  getSnapshotBeforeUpdate(prevProps: FlipperProps) {\n    if (prevProps.flipKey !== this.props.flipKey && this.el) {\n      return getFlippedElementPositionsBeforeUpdate({\n        element: this.el,\n        // if onExit callbacks exist here, we'll cache the DOM node\n        flipCallbacks: this.flipCallbacks,\n        inProgressAnimations: this.inProgressAnimations,\n        portalKey: this.props.portalKey\n      })\n    }\n    return null\n  }\n\n  componentDidUpdate(\n    prevProps: FlipperProps,\n    _prevState: any,\n    cachedData: FlippedElementPositionsBeforeUpdateReturnVals\n  ) {\n    if (this.props.flipKey !== prevProps.flipKey && this.el) {\n      onFlipKeyUpdate({\n        flippedElementPositionsBeforeUpdate: cachedData.flippedElementPositions,\n        cachedOrderedFlipIds: cachedData.cachedOrderedFlipIds,\n        containerEl: this.el,\n        inProgressAnimations: this.inProgressAnimations,\n        flipCallbacks: this.flipCallbacks,\n        applyTransformOrigin: this.props.applyTransformOrigin,\n        spring: this.props.spring,\n        debug: this.props.debug,\n        portalKey: this.props.portalKey,\n        staggerConfig: this.props.staggerConfig,\n        handleEnterUpdateDelete: this.props.handleEnterUpdateDelete,\n        decisionData: {\n          previous: prevProps.decisionData,\n          current: this.props.decisionData\n        },\n        onComplete: this.props.onComplete,\n        onStart: this.props.onStart\n      })\n    }\n  }\n\n  public render() {\n    const { element, className, portalKey } = this.props\n    const Element = element\n\n    let flipperMarkup = (\n      <FlipContext.Provider value={this.flipCallbacks}>\n        {/*\n        // @ts-ignore */}\n        <Element\n          className={className}\n          ref={(el: HTMLElement) => (this.el = el)}\n        >\n          {this.props.children}\n        </Element>\n      </FlipContext.Provider>\n    )\n\n    if (portalKey) {\n      flipperMarkup = (\n        <PortalContext.Provider value={portalKey}>\n          {flipperMarkup}\n        </PortalContext.Provider>\n      )\n    }\n\n    return flipperMarkup\n  }\n}\n// @ts-ignore\n\nif (process.env.NODE_ENV !== 'production') {\n  // @ts-ignore\n  Flipper.propTypes = {\n    flipKey: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.number,\n      PropTypes.bool\n    ]),\n    children: PropTypes.node.isRequired,\n    spring: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n    applyTransformOrigin: PropTypes.bool,\n    debug: PropTypes.bool,\n    element: PropTypes.string,\n    className: PropTypes.string,\n    portalKey: PropTypes.string,\n    staggerConfig: PropTypes.object,\n    decisionData: PropTypes.any,\n    handleEnterUpdateDelete: PropTypes.func,\n    onComplete: PropTypes.func,\n    onStart: PropTypes.func\n  }\n}\n\nexport default Flipper\n","import React, {\n  FunctionComponent,\n  Children,\n  cloneElement,\n  ReactElement\n} from 'react'\nimport PropTypes from 'prop-types'\nimport { utilities, constants } from 'flip-toolkit'\nimport { FlippedProps, SerializableFlippedProps } from 'flip-toolkit/lib/types'\nimport { FlipContext, PortalContext } from '../Flipper/context'\n\nfunction isFunction(child: any): child is Function {\n  return typeof child === 'function'\n}\n\n// This wrapper creates child components for the main Flipper component\nexport const Flipped: FunctionComponent<SerializableFlippedProps> = ({\n  children,\n  flipId,\n  inverseFlipId,\n  portalKey,\n  ...rest\n}) => {\n  let child = children\n  const isFunctionAsChildren = isFunction(child)\n\n  if (!isFunctionAsChildren) {\n    try {\n      child = Children.only(children)\n    } catch (e) {\n      throw new Error('Each Flipped component must wrap a single child')\n    }\n  }\n\n  // if nothing is being animated, assume everything is being animated\n  if (!rest.scale && !rest.translate && !rest.opacity) {\n    utilities.assign(rest, {\n      translate: true,\n      scale: true,\n      opacity: true\n    })\n  }\n\n  const dataAttributes: Record<string, string | undefined> = {\n    [constants.DATA_FLIP_CONFIG]: JSON.stringify(rest)\n  }\n\n  if (flipId !== undefined)\n    dataAttributes[constants.DATA_FLIP_ID] = String(flipId)\n  else if (inverseFlipId)\n    dataAttributes[constants.DATA_INVERSE_FLIP_ID] = String(inverseFlipId)\n  if (portalKey !== undefined) {\n    dataAttributes[constants.DATA_PORTAL_KEY] = portalKey\n  }\n  if (isFunctionAsChildren) {\n    return (child as Function)(dataAttributes)\n  }\n  return cloneElement(child as ReactElement<any>, dataAttributes)\n}\n// @ts-ignore\nexport const FlippedWithContext: FunctionComponent<FlippedProps> = ({\n  children,\n  flipId,\n  shouldFlip,\n  shouldInvert,\n  onAppear,\n  onStart,\n  onStartImmediate,\n  onComplete,\n  onExit,\n  onSpringUpdate,\n  ...rest\n}) => {\n  if (!children) {\n    return null\n  }\n  if (rest.inverseFlipId) {\n    return <Flipped {...rest}>{children}</Flipped>\n  }\n\n  return (\n    <PortalContext.Consumer>\n      {portalKey => (\n        <FlipContext.Consumer>\n          {data => {\n            // if there is no surrounding Flipper component,\n            // we don't want to throw an error, so check\n            // that data exists and is not the default string\n            if (utilities.isObject(data) && flipId) {\n              data[flipId] = {\n                shouldFlip,\n                shouldInvert,\n                onAppear,\n                onStart,\n                onStartImmediate,\n                onComplete,\n                onExit,\n                onSpringUpdate\n              }\n            }\n            return (\n              <Flipped flipId={flipId} {...rest} portalKey={portalKey}>\n                {children}\n              </Flipped>\n            )\n          }}\n        </FlipContext.Consumer>\n      )}\n    </PortalContext.Consumer>\n  )\n}\nif (process.env.NODE_ENV !== 'production') {\n  FlippedWithContext.propTypes = {\n    // @ts-expect-error\n    children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,\n    inverseFlipId: PropTypes.string,\n    flipId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    opacity: PropTypes.bool,\n    translate: PropTypes.bool,\n    scale: PropTypes.bool,\n    transformOrigin: PropTypes.string,\n    spring: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n    onStart: PropTypes.func,\n    onStartImmediate: PropTypes.func,\n    onComplete: PropTypes.func,\n    onAppear: PropTypes.func,\n    onSpringUpdate: PropTypes.func,\n    shouldFlip: PropTypes.func,\n    shouldInvert: PropTypes.func,\n    onExit: PropTypes.func,\n    portalKey: PropTypes.string,\n    stagger: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])\n  }\n}\n\nFlippedWithContext.displayName = 'Flipped'\n\nexport default FlippedWithContext\n","import { cloneElement, ReactElement, ReactNode } from 'react'\nimport { constants } from 'flip-toolkit'\n\nconst ExitContainer = ({ children }: { children: ReactNode }) => {\n  return cloneElement(children as ReactElement<any>, {\n    [constants.DATA_EXIT_CONTAINER]: true\n  })\n}\n\nexport default ExitContainer\n"],"names":["FlipContext","createContext","PortalContext","Flipper","Component","constructor","args","inProgressAnimations","this","flipCallbacks","el","undefined","getSnapshotBeforeUpdate","prevProps","flipKey","props","getFlippedElementPositionsBeforeUpdate","element","portalKey","componentDidUpdate","_prevState","cachedData","onFlipKeyUpdate","flippedElementPositionsBeforeUpdate","flippedElementPositions","cachedOrderedFlipIds","containerEl","applyTransformOrigin","spring","debug","staggerConfig","handleEnterUpdateDelete","decisionData","previous","current","onComplete","onStart","render","className","flipperMarkup","React","createElement","Provider","value","ref","children","defaultProps","_excluded","_excluded2","Flipped","_ref","flipId","inverseFlipId","rest","_objectWithoutPropertiesLoose","child","isFunctionAsChildren","isFunction","Children","only","e","Error","scale","translate","opacity","utilities","assign","dataAttributes","constants","DATA_FLIP_CONFIG","JSON","stringify","DATA_FLIP_ID","String","DATA_INVERSE_FLIP_ID","DATA_PORTAL_KEY","cloneElement","FlippedWithContext","_ref2","shouldFlip","shouldInvert","onAppear","onStartImmediate","onExit","onSpringUpdate","_extends","Consumer","data","isObject","displayName","ExitContainer","DATA_EXIT_CONTAINER"],"mappings":"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"}