| 1 | {"version":3,"sources":["../src/DynamicResponsive.tsx"],"names":["shallowEqual","a","b","key","createResponsiveComponents","ResponsiveContext","React","createContext","displayName","ResponsiveConsumer","Consumer","Provider","props","window","matchMedia","mediaQueries","Object","keys","reduce","matchers","mediaQueryMatchers","matches","mediaQueryMatches","checkMatchers","state","setState","undefined","isSupportedEnvironment","setupMatchers","initialMatchingMediaQueries","includes","mediaQueryStatusChangedCallback","values","forEach","matcher","addListener","removeListener","nextProps","nextState","children","Component"],"mappings":"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","sourcesContent":["/**\n * TODO: This is the deprecated runtime media-query component from Reaction.\n * It can probably be simplified somewhat if we’re not going to be using\n * it directly any longer.\n */\n\nimport React from \"react\"\n\n/** TODO */\nexport type MediaQueries<M extends string = string> = { [K in M]: string }\n\n/** TODO */\nexport interface MediaQueryMatchers {\n [key: string]: MediaQueryList\n}\n\n/** TODO */\nexport type MediaQueryMatches<M extends string = string> = { [K in M]: boolean }\n\n/** TODO */\nexport interface ResponsiveProviderProps<M extends string> {\n mediaQueries: MediaQueries<M>\n initialMatchingMediaQueries?: M[]\n children: React.ReactNode\n}\n\n/** TODO */\nexport interface ResponsiveProviderState {\n mediaQueryMatchers?: MediaQueryMatchers\n mediaQueryMatches: MediaQueryMatches\n}\n\nconst shallowEqual = (a: MediaQueryMatches, b: MediaQueryMatches) => {\n for (const key in a) {\n if (a[key] !== b[key]) return false\n }\n return true\n}\n\n/** TODO */\nexport function createResponsiveComponents<M extends string>() {\n const ResponsiveContext = React.createContext({})\n ResponsiveContext.displayName = \"Media.DynamicContext\"\n\n const ResponsiveConsumer: React.SFC<\n React.ConsumerProps<MediaQueryMatches<M>>\n > = ResponsiveContext.Consumer as React.SFC<React.ConsumerProps<any>>\n\n return {\n Consumer: ResponsiveConsumer,\n Provider: class ResponsiveProvider extends React.Component<\n ResponsiveProviderProps<M>,\n ResponsiveProviderState\n > {\n constructor(props: ResponsiveProviderProps<M>) {\n super(props)\n let mediaQueryMatchers: MediaQueryMatchers | undefined = undefined\n let mediaQueryMatches: MediaQueryMatches\n\n if (this.isSupportedEnvironment()) {\n mediaQueryMatchers = this.setupMatchers(props.mediaQueries)\n mediaQueryMatches = this.checkMatchers(mediaQueryMatchers)\n } else {\n mediaQueryMatches = Object.keys(props.mediaQueries).reduce(\n (matches, key) => ({\n ...matches,\n [key]:\n !!props.initialMatchingMediaQueries &&\n props.initialMatchingMediaQueries.includes(key as M),\n }),\n {}\n )\n }\n\n this.state = {\n mediaQueryMatchers,\n mediaQueryMatches,\n }\n }\n\n isSupportedEnvironment = () => {\n return (\n typeof window !== \"undefined\" &&\n typeof window.matchMedia !== \"undefined\"\n )\n }\n\n /**\n * Create an array of media matchers that can validate each media query\n */\n setupMatchers = (mediaQueries: MediaQueries): MediaQueryMatchers => {\n return Object.keys(mediaQueries).reduce(\n (matchers, key) => ({\n ...matchers,\n [key]: window.matchMedia(mediaQueries[key]),\n }),\n {}\n )\n }\n\n /**\n * Uses the matchers to build a map of the states of each media query\n */\n checkMatchers = (\n mediaQueryMatchers: MediaQueryMatchers\n ): MediaQueryMatches => {\n return Object.keys(mediaQueryMatchers).reduce(\n (matches, key) => ({\n ...matches,\n [key]: mediaQueryMatchers[key].matches,\n }),\n {}\n )\n }\n\n /**\n * The function that will be called any time a media query status changes\n */\n mediaQueryStatusChangedCallback = () => {\n const mediaQueryMatches = this.checkMatchers(\n this.state.mediaQueryMatchers!\n )\n this.setState({\n mediaQueryMatches,\n })\n }\n\n // Lifecycle methods\n\n componentDidMount() {\n if (this.state.mediaQueryMatchers) {\n const { mediaQueryStatusChangedCallback } = this\n Object.values(this.state.mediaQueryMatchers).forEach(matcher => {\n matcher.addListener(mediaQueryStatusChangedCallback)\n })\n }\n }\n\n componentWillUnmount() {\n if (this.state.mediaQueryMatchers) {\n const { mediaQueryStatusChangedCallback } = this\n Object.values(this.state.mediaQueryMatchers).forEach(matcher =>\n matcher.removeListener(mediaQueryStatusChangedCallback)\n )\n }\n }\n\n shouldComponentUpdate(\n nextProps: Readonly<ResponsiveProviderProps<M>>,\n nextState: Readonly<ResponsiveProviderState>\n ) {\n if (!this.state.mediaQueryMatchers) return false\n if (nextProps.children !== this.props.children) return true\n if (\n shallowEqual(\n this.state.mediaQueryMatches,\n nextState.mediaQueryMatches\n )\n ) {\n return false\n }\n return true\n }\n\n render() {\n return (\n <ResponsiveContext.Provider value={this.state.mediaQueryMatches}>\n {this.props.children}\n </ResponsiveContext.Provider>\n )\n }\n },\n }\n}\n"],"file":"DynamicResponsive.js"} |