| 1 | {"version":3,"sources":["../src/Media.tsx"],"names":["createMedia","config","mediaQueries","MediaQueries","breakpoints","interactions","DynamicResponsive","MediaContext","React","createContext","displayName","MediaParentContext","hasParentMedia","breakpointProps","MediaContextProvider","disableDynamicMediaQueries","onlyMatch","children","dynamicResponsiveMediaQueries","mediaQueryTypes","matches","matchingMediaQueries","Object","keys","filter","key","Media","props","validateProps","passedClassName","className","interaction","mediaParentContext","at","largestBreakpoint","ownerName","owner","_reactInternalFiber","_debugOwner","type","name","err","console","warn","breakpoint","doesMatchParent","toVisibleAtBreakpointSet","length","renderChildren","undefined","shouldRenderMediaQuery","Function","Component","createMediaStyle","toStyle","SortedBreakpoints","sortedBreakpoints","findBreakpointAtWidth","findBreakpointsForWidths","valuesWithBreakpointProps","MutuallyExclusiveProps","validKeys","selectedProps","prop","includes","Error","join"],"mappings":"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","sourcesContent":["// tslint:disable:jsdoc-format\n\nimport React from \"react\"\nimport { createResponsiveComponents } from \"./DynamicResponsive\"\nimport { MediaQueries } from \"./MediaQueries\"\nimport { intersection, propKey, createClassName } from \"./Utils\"\nimport { BreakpointConstraint } from \"./Breakpoints\"\n\n/**\n * A render prop that can be used to render a different container element than\n * the default `div`.\n *\n * @see {@link MediaProps.children}.\n */\nexport type RenderProp = (\n className: string,\n renderChildren: boolean\n) => React.ReactNode\n\n// TODO: All of these props should be mutually exclusive. Using a union should\n// probably be made possible by https://github.com/Microsoft/TypeScript/pull/27408.\nexport interface MediaBreakpointProps<BreakpointKey = string> {\n /**\n * Children will only be shown if the viewport matches the specified\n * breakpoint. That is, a viewport width that’s higher than the configured\n * breakpoint value, but lower than the value of the next breakpoint, if any\n * larger breakpoints exist at all.\n *\n * @example\n\n ```tsx\n // With breakpoints defined like these\n { xs: 0, sm: 768, md: 1024 }\n\n // Matches a viewport that has a width between 0 and 768\n <Media at=\"xs\">ohai</Media>\n\n // Matches a viewport that has a width between 768 and 1024\n <Media at=\"sm\">ohai</Media>\n\n // Matches a viewport that has a width over 1024\n <Media at=\"md\">ohai</Media>\n ```\n *\n */\n at?: BreakpointKey\n\n /**\n * Children will only be shown if the viewport is smaller than the specified\n * breakpoint.\n *\n * @example\n\n ```tsx\n // With breakpoints defined like these\n { xs: 0, sm: 768, md: 1024 }\n\n // Matches a viewport that has a width from 0 to 767\n <Media lessThan=\"sm\">ohai</Media>\n\n // Matches a viewport that has a width from 0 to 1023\n <Media lessThan=\"md\">ohai</Media>\n ```\n *\n */\n lessThan?: BreakpointKey\n\n /**\n * Children will only be shown if the viewport is greater than the specified\n * breakpoint.\n *\n * @example\n\n ```tsx\n // With breakpoints defined like these\n { xs: 0, sm: 768, md: 1024 }\n\n // Matches a viewport that has a width from 768 to infinity\n <Media greaterThan=\"xs\">ohai</Media>\n\n // Matches a viewport that has a width from 1024 to infinity\n <Media greaterThan=\"sm\">ohai</Media>\n ```\n *\n */\n greaterThan?: BreakpointKey\n\n /**\n * Children will only be shown if the viewport is greater or equal to the\n * specified breakpoint.\n *\n * @example\n\n ```tsx\n // With breakpoints defined like these\n { xs: 0, sm: 768, md: 1024 }\n\n // Matches a viewport that has a width from 0 to infinity\n <Media greaterThanOrEqual=\"xs\">ohai</Media>\n\n // Matches a viewport that has a width from 768 to infinity\n <Media greaterThanOrEqual=\"sm\">ohai</Media>\n\n // Matches a viewport that has a width from 1024 to infinity\n <Media greaterThanOrEqual=\"md\">ohai</Media>\n ```\n *\n */\n greaterThanOrEqual?: BreakpointKey\n\n /**\n * Children will only be shown if the viewport is between the specified\n * breakpoints. That is, a viewport width that’s higher than or equal to the\n * small breakpoint value, but lower than the value of the large breakpoint.\n *\n * @example\n\n ```tsx\n // With breakpoints defined like these\n { xs: 0, sm: 768, md: 1024 }\n\n // Matches a viewport that has a width from 0 to 767\n <Media between={[\"xs\", \"sm\"]}>ohai</Media>\n\n // Matches a viewport that has a width from 0 to 1023\n <Media between={[\"xs\", \"md\"]}>ohai</Media>\n ```\n *\n */\n between?: [BreakpointKey, BreakpointKey]\n}\n\nexport interface MediaProps<BreakpointKey, Interaction>\n extends MediaBreakpointProps<BreakpointKey> {\n /**\n * Children will only be shown if the interaction query matches.\n *\n * @example\n\n ```tsx\n // With interactions defined like these\n { hover: \"(hover: hover)\" }\n\n // Matches an input device that is capable of hovering\n <Media interaction=\"hover\">ohai</Media>\n ```\n */\n interaction?: Interaction\n\n /**\n * The component(s) that should conditionally be shown, depending on the media\n * query matching.\n *\n * In case a different element is preferred, a render prop can be provided\n * that receives the class-name it should use to have the media query styling\n * applied.\n *\n * Additionally, the render prop receives a boolean that indicates wether or\n * not its children should be rendered, which will be `false` if the media\n * query is not included in the `onlyMatch` list. Use this flag if your\n * component’s children may be expensive to render and you want to avoid any\n * unnecessary work.\n * (@see {@link MediaContextProviderProps.onlyMatch} for details)\n *\n * @example\n *\n ```tsx\n const Component = () => (\n <Media greaterThan=\"xs\">\n {(className, renderChildren) => (\n <span className={className}>\n {renderChildren && \"ohai\"}\n </span>\n )}\n </Media>\n )\n ```\n *\n */\n children: React.ReactNode | RenderProp\n\n /**\n * Additional classNames to passed down and applied to Media container\n */\n className?: string\n}\n\nexport interface MediaContextProviderProps<M> {\n /**\n * This list of breakpoints and interactions can be used to limit the rendered\n * output to these.\n *\n * For instance, when a server knows for some user-agents that certain\n * breakpoints will never apply, omitting them altogether will lower the\n * rendered byte size.\n */\n onlyMatch?: M[]\n\n /**\n * Disables usage of browser MediaQuery API to only render at the current\n * breakpoint.\n *\n * Use this with caution, as disabling this means React components for all\n * breakpoints will be mounted client-side and all associated life-cycle hooks\n * will be triggered, which could lead to unintended side-effects.\n */\n disableDynamicMediaQueries?: boolean\n}\n\nexport interface CreateMediaConfig {\n /**\n * The breakpoint definitions for your application. Width definitions should\n * start at 0.\n *\n * @see {@link createMedia}\n */\n breakpoints: { [key: string]: number }\n\n /**\n * The interaction definitions for your application.\n */\n interactions?: { [key: string]: string }\n}\n\nexport interface CreateMediaResults<BreakpointKey, Interactions> {\n /**\n * The React component that you use throughout your application.\n *\n * @see {@link MediaBreakpointProps}\n */\n Media: React.ComponentType<MediaProps<BreakpointKey, Interactions>>\n\n /**\n * The React Context provider component that you use to constrain rendering of\n * breakpoints to a set list and to enable client-side dynamic constraining.\n *\n * @see {@link MediaContextProviderProps}\n */\n MediaContextProvider: React.ComponentType<\n MediaContextProviderProps<BreakpointKey | Interactions>\n >\n\n /**\n * Generates a set of CSS rules that you should include in your application’s\n * styling to enable the hiding behaviour of your `Media` component uses.\n */\n createMediaStyle(breakpointKeys?: BreakpointConstraint[]): string\n\n /**\n * A list of your application’s breakpoints sorted from small to large.\n */\n SortedBreakpoints: BreakpointKey[]\n\n /**\n * Creates a list of your application’s breakpoints that support the given\n * widths and everything in between.\n */\n findBreakpointsForWidths(\n fromWidth: number,\n throughWidth: number\n ): BreakpointKey[] | undefined\n\n /**\n * Finds the breakpoint that matches the given width.\n */\n findBreakpointAtWidth(width: number): BreakpointKey | undefined\n\n /**\n * Maps a list of values for various breakpoints to props that can be used\n * with the `Media` component.\n *\n * The values map to corresponding indices in the sorted breakpoints array. If\n * less values are specified than the number of breakpoints your application\n * has, the last value will be applied to all subsequent breakpoints.\n */\n valuesWithBreakpointProps<SizeValue>(\n values: SizeValue[]\n ): Array<[SizeValue, MediaBreakpointProps<BreakpointKey>]>\n}\n\n/**\n * This is used to generate a Media component, its context provider, and CSS\n * rules based on your application’s breakpoints and interactions.\n *\n * Note that the interaction queries are entirely up to you to define and they\n * should be written in such a way that they match when you want the element to\n * be hidden.\n *\n * @example\n *\n ```tsx\n const MyAppMedia = createMedia({\n breakpoints: {\n xs: 0,\n sm: 768,\n md: 900\n lg: 1024,\n xl: 1192,\n },\n interactions: {\n hover: `not all and (hover:hover)`\n },\n })\n\n export const Media = MyAppMedia.Media\n export const MediaContextProvider = MyAppMedia.MediaContextProvider\n export const createMediaStyle = MyAppMedia.createMediaStyle\n ```\n *\n */\nexport function createMedia<\n MediaConfig extends CreateMediaConfig,\n BreakpointKey extends keyof MediaConfig[\"breakpoints\"],\n Interaction extends keyof MediaConfig[\"interactions\"]\n>(config: MediaConfig): CreateMediaResults<BreakpointKey, Interaction> {\n const mediaQueries = new MediaQueries<BreakpointKey>(\n config.breakpoints,\n config.interactions || {}\n )\n\n const DynamicResponsive = createResponsiveComponents()\n\n const MediaContext = React.createContext<\n MediaContextProviderProps<BreakpointKey | Interaction>\n >({})\n MediaContext.displayName = \"Media.Context\"\n\n const MediaParentContext = React.createContext<{\n hasParentMedia: boolean\n breakpointProps: MediaBreakpointProps<BreakpointKey>\n }>({ hasParentMedia: false, breakpointProps: {} })\n MediaContext.displayName = \"MediaParent.Context\"\n\n const MediaContextProvider: React.SFC<\n MediaContextProviderProps<BreakpointKey | Interaction>\n > = ({ disableDynamicMediaQueries, onlyMatch, children }) => {\n if (disableDynamicMediaQueries) {\n return (\n <MediaContext.Provider\n value={{\n onlyMatch,\n }}\n >\n {children}\n </MediaContext.Provider>\n )\n } else {\n return (\n <DynamicResponsive.Provider\n mediaQueries={mediaQueries.dynamicResponsiveMediaQueries}\n initialMatchingMediaQueries={intersection(\n mediaQueries.mediaQueryTypes,\n onlyMatch\n )}\n >\n <DynamicResponsive.Consumer>\n {matches => {\n const matchingMediaQueries = Object.keys(matches).filter(\n key => matches[key]\n )\n return (\n <MediaContext.Provider\n value={{\n onlyMatch: intersection(matchingMediaQueries, onlyMatch),\n }}\n >\n {children}\n </MediaContext.Provider>\n )\n }}\n </DynamicResponsive.Consumer>\n </DynamicResponsive.Provider>\n )\n }\n }\n\n const Media = class extends React.Component<\n MediaProps<BreakpointKey, Interaction>\n > {\n constructor(props) {\n super(props)\n validateProps(props)\n }\n\n static defaultProps = {\n className: \"\",\n }\n\n static contextType = MediaParentContext\n\n render() {\n const props = this.props\n const {\n children,\n className: passedClassName,\n interaction,\n ...breakpointProps\n } = props\n return (\n <MediaParentContext.Consumer>\n {mediaParentContext => {\n return (\n <MediaParentContext.Provider\n value={{ hasParentMedia: true, breakpointProps }}\n >\n <MediaContext.Consumer>\n {({ onlyMatch } = {}) => {\n let className: string | null\n if (props.interaction) {\n className = createClassName(\n \"interaction\",\n props.interaction\n )\n } else {\n if (props.at) {\n const largestBreakpoint =\n mediaQueries.breakpoints.largestBreakpoint\n if (props.at === largestBreakpoint) {\n // TODO: We should look into making React’s __DEV__ available\n // and have webpack completely compile these away.\n let ownerName = null\n try {\n const owner = (this as any)._reactInternalFiber\n ._debugOwner.type\n ownerName = owner.displayName || owner.name\n } catch (err) {\n // no-op\n }\n\n console.warn(\n \"[@artsy/fresnel] \" +\n \"`at` is being used with the largest breakpoint. \" +\n \"Consider using `<Media greaterThanOrEqual=\" +\n `\"${largestBreakpoint}\">\\` to account for future ` +\n `breakpoint definitions outside of this range.${\n ownerName\n ? ` It is being used in the ${ownerName} component.`\n : \"\"\n }`\n )\n }\n }\n\n const type = propKey(breakpointProps)\n const breakpoint = breakpointProps[type]!\n className = createClassName(type, breakpoint)\n }\n\n const doesMatchParent =\n !mediaParentContext.hasParentMedia ||\n intersection(\n mediaQueries.breakpoints.toVisibleAtBreakpointSet(\n mediaParentContext.breakpointProps\n ),\n mediaQueries.breakpoints.toVisibleAtBreakpointSet(\n breakpointProps\n )\n ).length > 0\n const renderChildren =\n doesMatchParent &&\n (onlyMatch === undefined ||\n mediaQueries.shouldRenderMediaQuery(\n { ...breakpointProps, interaction },\n onlyMatch\n ))\n\n if (props.children instanceof Function) {\n return props.children(className, renderChildren)\n } else {\n return (\n <div\n className={`fresnel-container ${className} ${passedClassName}`}\n suppressHydrationWarning={!renderChildren}\n >\n {renderChildren ? props.children : null}\n </div>\n )\n }\n }}\n </MediaContext.Consumer>\n </MediaParentContext.Provider>\n )\n }}\n </MediaParentContext.Consumer>\n )\n }\n }\n\n return {\n Media,\n MediaContextProvider,\n createMediaStyle: mediaQueries.toStyle,\n SortedBreakpoints: [...mediaQueries.breakpoints.sortedBreakpoints],\n findBreakpointAtWidth: mediaQueries.breakpoints.findBreakpointAtWidth,\n findBreakpointsForWidths: mediaQueries.breakpoints.findBreakpointsForWidths,\n valuesWithBreakpointProps:\n mediaQueries.breakpoints.valuesWithBreakpointProps,\n }\n}\n\nconst MutuallyExclusiveProps: string[] = MediaQueries.validKeys()\n\nfunction validateProps(props) {\n const selectedProps = Object.keys(props).filter(prop =>\n MutuallyExclusiveProps.includes(prop)\n )\n if (selectedProps.length < 1) {\n throw new Error(`1 of ${MutuallyExclusiveProps.join(\", \")} is required.`)\n } else if (selectedProps.length > 1) {\n throw new Error(\n `Only 1 of ${selectedProps.join(\", \")} is allowed at a time.`\n )\n }\n}\n"],"file":"Media.js"} |