@react-spectrum/s2/dist/ImageCoordinator.mjs.map

Spectrum 2 UI components in React

{"mappings":"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","sources":["packages/@react-spectrum/s2/src/ImageCoordinator.tsx"],"sourcesContent":["import {Context, createContext, ReactNode, useCallback, useContext, useEffect, useMemo, useReducer} from 'react';\n\nexport interface ImageCoordinatorProps {\n  /** Children within the ImageCoordinator. */\n  children: ReactNode,\n  /**\n   * Time in milliseconds after which images are always displayed, even if all images are not yet loaded.\n   * @default 5000\n   */\n  timeout?: number,\n  /**\n   * A group of images to coordinate between, matching the group passed to the `<Image>` component.\n   * If not provided, the default image group is used.\n   */\n  group?: ImageGroup\n}\n\nexport type ImageGroup = Context<ImageGroupValue>;\n\ninterface ImageGroupValue {\n  revealAll: boolean,\n  register(url: string): void,\n  unregister(url: string): void,\n  load(url: string): void\n}\n\nconst defaultContext: ImageGroupValue = {\n  revealAll: true,\n  register() {},\n  unregister() {},\n  load() {}\n};\n\nexport const DefaultImageGroup = createImageGroup();\n\nexport function createImageGroup(): ImageGroup {\n  return createContext(defaultContext);\n}\n\ninterface State {\n  loadedAll: boolean,\n  timedOut: boolean,\n  loadStartTime: number,\n  loaded: Map<string, boolean>\n}\n\ntype Action =\n  | {type: 'register', url: string}\n  | {type: 'unregister', url: string}\n  | {type: 'load', url: string}\n  | {type: 'timeout'};\n\nfunction reducer(state: State, action: Action): State {\n  switch (action.type) {\n    case 'register': {\n      if (state.loaded.get(action.url) !== false) {\n        let loaded = new Map(state.loaded);\n        loaded.set(action.url, false);\n        return {\n          loadedAll: false,\n          // If we had previously loaded all items, then reset the timed out state\n          // since this is the first item of a new batch.\n          timedOut: state.loadedAll ? false : state.timedOut,\n          loadStartTime: state.loadedAll ? Date.now() : state.loadStartTime,\n          loaded\n        };\n      }\n      return state;\n    }\n    case 'unregister': {\n      if (state.loaded.has(action.url)) {\n        let loaded = new Map(state.loaded);\n        loaded.delete(action.url);\n        return {\n          loadedAll: isAllLoaded(loaded),\n          timedOut: state.timedOut,\n          loadStartTime: state.loadStartTime,\n          loaded\n        };\n      }\n      return state;\n    }\n    case 'load': {\n      if (state.loaded.get(action.url) === false) {\n        let loaded = new Map(state.loaded);\n        loaded.set(action.url, true);\n        return {\n          loadedAll: isAllLoaded(loaded),\n          timedOut: state.timedOut,\n          loadStartTime: state.loadStartTime,\n          loaded\n        };\n      }\n      return state;\n    }\n    case 'timeout': {\n      if (!state.loadedAll && !state.timedOut) {\n        return {\n          ...state,\n          timedOut: true\n        };\n      }\n      return state;\n    }\n    default:\n      return state;\n  }\n}\n\nfunction isAllLoaded(loaded: Map<string, boolean>) {\n  for (let isLoaded of loaded.values()) {\n    if (!isLoaded) {\n      return false;\n    }\n  }\n  return true;\n}\n\n/**\n * An ImageCoordinator coordinates loading behavior for a group of images.\n * Images within an ImageCoordinator are revealed together once all of them have loaded.\n */\nexport function ImageCoordinator(props: ImageCoordinatorProps): ReactNode {\n  // If we are already inside another ImageCoordinator, just pass\n  // through children and coordinate loading at the root.\n  let ctx = useContext(props.group || DefaultImageGroup);\n  if (ctx !== defaultContext) {\n    return props.children;\n  }\n\n  return <ImageCoordinatorRoot {...props} />;\n}\n\nfunction ImageCoordinatorRoot(props: ImageCoordinatorProps) {\n  let {children, timeout = 5000, group = DefaultImageGroup} = props;\n  let [{loadedAll, timedOut, loadStartTime}, dispatch] = useReducer(reducer, {\n    loadedAll: true,\n    timedOut: false,\n    loadStartTime: 0,\n    loaded: new Map()\n  });\n\n  let register = useCallback((url: string) => dispatch({type: 'register', url}), []);\n  let unregister = useCallback((url: string) => dispatch({type: 'unregister', url}), []);\n  let load = useCallback((url: string) => dispatch({type: 'load', url}), []);\n\n  useEffect(() => {\n    if (!loadedAll) {\n      let timeoutId = setTimeout(() => {\n        dispatch({type: 'timeout'});\n      }, loadStartTime + timeout - Date.now());\n\n      return () => clearTimeout(timeoutId);\n    }\n  }, [loadStartTime, loadedAll, timeout]);\n\n  let revealAll = loadedAll || timedOut;\n  return useMemo(() => (\n    <group.Provider value={{revealAll, register, unregister, load}}>\n      {children}\n    </group.Provider>\n  ), [group, children, revealAll, register, unregister, load]);\n}\n"],"names":[],"version":3,"file":"ImageCoordinator.mjs.map"}