| 1 | {"version":3,"file":"getFadedOverflowStyle.js","sourceRoot":"../src/","sources":["styles/getFadedOverflowStyle.ts"],"names":[],"mappings":"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","sourcesContent":["import { IRawStyle } from '@uifabric/merge-styles';\nimport { ITheme, ISemanticColors, IPalette } from '../interfaces/index';\n\ninterface IRGB {\n r: number;\n g: number;\n b: number;\n}\n\nconst DEFAULT_HEIGHT = '50%';\nconst DEFAULT_WIDTH = 20;\n\n/**\n * - Generates a style used to fade out an overflowing content by defining a style for an :after pseudo element.\n * - Apply it to the :after selector for all combination of states the parent of content might have (normal, hover,\n * selected, focus).\n * - Requires the target to have position set to relative and overflow set to hidden.\n *\n * @example\n * ```tsx\n * // Assuming the following DOM structure and the different background colors coming from\n * // the parent holding the content.\n * <div className={classNames.parent}>\n * <span className={classNames.content}>Overflown Content</span>\n * </div>\n * ```\n * ```ts\n * // This is how the style set would look in Component.styles.ts\n * const { bodyBackground } = theme.semanticColors;\n * const { neutralLighter } = theme.palette;\n *\n * // The second argument of getFadedOverflowStyle function is a string representing a key of\n * // ISemanticColors or IPalette.\n *\n * const styles = {\n * parent: [\n * backgroundColor: bodyBackground,\n * selectors: {\n * '&:hover: {\n * backgroundColor: neutralLighter\n * },\n * '$content:after': {\n * ...getFadedOverflowStyle(theme, 'bodyBackground')\n * },\n * '&:hover $content:after': {\n * ...getFadedOverflowStyle(theme, 'neutralLighter')\n * }\n * }\n * ],\n * content: [\n * width: '100%',\n * display: 'inline-block',\n * position: 'relative',\n * overflow: 'hidden'\n * ]\n * }\n * ```\n * @param theme - The theme object to use.\n * @param color - The background color to fade out to. Accepts only keys of ISemanticColors or IPalette.\n * Defaults to 'bodyBackground'.\n * @param direction - The direction of the overflow. Defaults to horizontal.\n * @param width - The width of the fading overflow. Vertical direction defaults it to 100% vs 20px when horizontal.\n * @param height - The Height of the fading overflow. Vertical direction defaults it to 50% vs 100% when horizontal.\n * @returns The style object.\n */\nexport function getFadedOverflowStyle(\n theme: ITheme,\n color: keyof ISemanticColors | keyof IPalette = 'bodyBackground',\n direction: 'horizontal' | 'vertical' = 'horizontal',\n width: string | number = getDefaultValue('width', direction),\n height: string | number = getDefaultValue('height', direction),\n): IRawStyle {\n // Get the color value string from the theme semanticColors or palette.\n const colorValue: string =\n theme.semanticColors[color as keyof ISemanticColors] || theme.palette[color as keyof IPalette];\n // Get the red, green, blue values of the colorValue.\n const rgbColor: IRGB = color2rgb(colorValue);\n // Apply opacity 0 to serve as a start color of the gradient.\n const rgba = `rgba(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}, 0)`;\n // Get the direction of the gradient. (mergeStyles takes care of RTL direction)\n const gradientDirection = direction === 'vertical' ? 'to bottom' : 'to right';\n\n return {\n content: '\"\"',\n position: 'absolute',\n right: 0,\n bottom: 0,\n width: width,\n height: height,\n pointerEvents: 'none',\n backgroundImage: `linear-gradient(${gradientDirection}, ${rgba} 0%, ${colorValue} 100%)`,\n };\n}\n\n// TODO consider moving this to a separate module along with some more color functions from OUFR/utilities.\n/**\n * Helper function to convert a string hex color to an RGB object.\n *\n * @param colorValue - Color to be converted from hex to rgba.\n */\nfunction color2rgb(colorValue: string): IRGB {\n if (colorValue[0] === '#') {\n // If it's a hex code\n return {\n r: parseInt(colorValue.slice(1, 3), 16),\n g: parseInt(colorValue.slice(3, 5), 16),\n b: parseInt(colorValue.slice(5, 7), 16),\n };\n } else if (colorValue.indexOf('rgba(') === 0) {\n // If it's an rgba color string\n colorValue = colorValue.match(/rgba\\(([^)]+)\\)/)![1];\n const parts = colorValue.split(/ *, */).map(Number);\n\n return {\n r: parts[0],\n g: parts[1],\n b: parts[2],\n };\n }\n // The only remaining possibility is transparent.\n return {\n r: 255,\n g: 255,\n b: 255,\n };\n}\n\n/**\n * Helper function to get the default values for parameters of main function.\n *\n * @param style - Which style to get the default value for.\n * @param direction - What direction to take into consideration.\n */\nfunction getDefaultValue(style: 'width' | 'height', direction: string): number | string {\n if (style === 'width') {\n return direction === 'horizontal' ? DEFAULT_WIDTH : '100%';\n } else {\n return direction === 'vertical' ? DEFAULT_HEIGHT : '100%';\n }\n}\n"]} |