1 | import { __rest } from "tslib";
|
2 | import * as React from 'react';
|
3 | import cssVar from '@patternfly/react-tokens/dist/esm/c_background_image_BackgroundImage';
|
4 | import cssVarName2x from '@patternfly/react-tokens/dist/esm/c_background_image_BackgroundImage_2x';
|
5 | import cssVarNameSm from '@patternfly/react-tokens/dist/esm/c_background_image_BackgroundImage_sm';
|
6 | import cssVarNameSm2x from '@patternfly/react-tokens/dist/esm/c_background_image_BackgroundImage_sm_2x';
|
7 | import cssVarNameLg from '@patternfly/react-tokens/dist/esm/c_background_image_BackgroundImage_lg';
|
8 | import cssVarNameFilter from '@patternfly/react-tokens/dist/esm/c_background_image_Filter';
|
9 | import { css } from '@patternfly/react-styles';
|
10 | import styles from '@patternfly/react-styles/css/components/BackgroundImage/background-image';
|
11 | const defaultFilter = (React.createElement("filter", null,
|
12 | React.createElement("feColorMatrix", { type: "matrix", values: "1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0" }),
|
13 | React.createElement("feComponentTransfer", { colorInterpolationFilters: "sRGB", result: "duotone" },
|
14 | React.createElement("feFuncR", { type: "table", tableValues: "0.086274509803922 0.43921568627451" }),
|
15 | React.createElement("feFuncG", { type: "table", tableValues: "0.086274509803922 0.43921568627451" }),
|
16 | React.createElement("feFuncB", { type: "table", tableValues: "0.086274509803922 0.43921568627451" }),
|
17 | React.createElement("feFuncA", { type: "table", tableValues: "0 1" }))));
|
18 | let filterCounter = 0;
|
19 | export const BackgroundImage = (_a) => {
|
20 | var { className, src, filter = defaultFilter } = _a, props = __rest(_a, ["className", "src", "filter"]);
|
21 | const getUrlValue = (size) => {
|
22 | if (typeof src === 'string') {
|
23 | return `url(${src})`;
|
24 | }
|
25 | else if (typeof src === 'object') {
|
26 | return `url(${src[size]})`;
|
27 | }
|
28 | return '';
|
29 | };
|
30 | const filterNum = React.useMemo(() => filterCounter++, []);
|
31 | const filterId = `patternfly-background-image-filter-overlay${filterNum}`;
|
32 | const style = {
|
33 | [cssVar.name]: getUrlValue('xs'),
|
34 | [cssVarName2x.name]: getUrlValue('xs2x'),
|
35 | [cssVarNameSm.name]: getUrlValue('sm'),
|
36 | [cssVarNameSm2x.name]: getUrlValue('sm2x'),
|
37 | [cssVarNameLg.name]: getUrlValue('lg'),
|
38 | [cssVarNameFilter.name]: `url(#${filterId})`
|
39 | };
|
40 | return (React.createElement("div", Object.assign({ className: css(styles.backgroundImage, className), style: style }, props),
|
41 | React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "pf-c-background-image__filter", width: "0", height: "0" }, React.cloneElement(filter, { id: filterId }))));
|
42 | };
|
43 | BackgroundImage.displayName = 'BackgroundImage';
|
44 |
|
\ | No newline at end of file |