/
background.tsx
87 lines (79 loc) · 2.75 KB
/
background.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import Foundation, { HandledProps } from "@microsoft/fast-components-foundation-react";
import {
DesignSystem,
DesignSystemDefaults,
DesignSystemResolver,
} from "@microsoft/fast-components-styles-msft";
import {
DesignSystemConsumer,
DesignSystemProvider,
} from "@microsoft/fast-jss-manager-react";
import { get, has, memoize } from "lodash-es";
import React from "react";
import { Omit } from "utility-types";
import {
BackgroundHandledProps,
BackgroundUnhandledProps,
LightModeBackgrounds,
} from "./background.props";
export default class Background extends Foundation<
BackgroundHandledProps,
BackgroundUnhandledProps,
{}
> {
public static defaultProps: Partial<
Omit<BackgroundHandledProps, "value"> & { value: LightModeBackgrounds }
> = {
tag: "div",
value: LightModeBackgrounds.L1,
drawBackground: true,
};
protected handledProps: HandledProps<Required<BackgroundHandledProps>> = {
tag: void 0,
value: void 0,
drawBackground: void 0,
};
private getDesignSystemOverrides: (color: string) => Partial<DesignSystem> = memoize(
(color: string): Partial<DesignSystem> => {
return { backgroundColor: color };
}
);
public render(): JSX.Element {
return <DesignSystemConsumer>{this.withContext}</DesignSystemConsumer>;
}
private withContext = (designSystem: DesignSystem): JSX.Element => {
const background: string | number | DesignSystemResolver<string> = this.props
.value;
const color: string =
typeof background === "string"
? background
: typeof background === "function"
? background(designSystem)
: has(designSystem.neutralPalette, background)
? get(designSystem.neutralPalette, background)
: DesignSystemDefaults.neutralPalette[background] ||
DesignSystemDefaults.neutralPalette[
Background.defaultProps.value
];
const style: React.CSSProperties = Object.assign(
{},
this.props.style,
this.props.drawBackground
? {
backgroundColor: color,
}
: void 0
);
return (
<DesignSystemProvider designSystem={this.getDesignSystemOverrides(color)}>
<this.tag {...this.unhandledProps()} style={style}>
{this.props.children}
</this.tag>
</DesignSystemProvider>
);
};
private get tag(): any {
return this.props.tag;
}
}
export * from "./background.props";