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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { observer } from 'mobx-react';
import * as React from 'react';
import { createSchema, makeInterface } from '../../../fields/Schema';
import { DocComponent } from '../DocComponent';
import './FontIconBox.scss';
import { FieldView, FieldViewProps } from './FieldView';
import { StrCast, Cast, NumCast } from '../../../fields/Types';
import { Utils } from "../../../Utils";
import { runInAction, observable, reaction, IReactionDisposer } from 'mobx';
import { Doc } from '../../../fields/Doc';
import { ContextMenu } from '../ContextMenu';
import { ScriptField } from '../../../fields/ScriptField';
import { Tooltip } from '@material-ui/core';
import { createUnionOrIntersectionTypeNode } from 'typescript';
import { CurrentUserUtils } from '../../util/CurrentUserUtils';
const FontIconSchema = createSchema({
icon: "string",
});
type FontIconDocument = makeInterface<[typeof FontIconSchema]>;
const FontIconDocument = makeInterface(FontIconSchema);
@observer
export class FontIconBox extends DocComponent<FieldViewProps, FontIconDocument>(FontIconDocument) {
public static LayoutString(fieldKey: string) { return FieldView.LayoutString(FontIconBox, fieldKey); }
@observable _foregroundColor = "white";
_ref: React.RefObject<HTMLButtonElement> = React.createRef();
_backgroundReaction: IReactionDisposer | undefined;
componentDidMount() {
this._backgroundReaction = reaction(() => this.layoutDoc.backgroundColor,
() => {
if (this._ref && this._ref.current) {
const col = Utils.fromRGBAstr(getComputedStyle(this._ref.current).backgroundColor);
const colsum = (col.r + col.g + col.b);
if (colsum / col.a > 600 || col.a < 0.25) runInAction(() => this._foregroundColor = "black");
else if (colsum / col.a <= 600 || col.a >= .25) runInAction(() => this._foregroundColor = "white");
}
}, { fireImmediately: true });
}
showTemplate = (): void => {
const dragFactory = Cast(this.layoutDoc.dragFactory, Doc, null);
dragFactory && this.props.addDocTab(dragFactory, "onRight");
}
dragAsTemplate = (): void => {
this.layoutDoc.onDragStart = ScriptField.MakeFunction('getCopy(this.dragFactory, true)');
}
useAsPrototype = (): void => {
this.layoutDoc.onDragStart = ScriptField.MakeFunction('makeDelegate(this.dragFactory, true)');
}
specificContextMenu = (): void => {
const cm = ContextMenu.Instance;
cm.addItem({ description: "Show Template", event: this.showTemplate, icon: "tag" });
cm.addItem({ description: "Use as Render Template", event: this.dragAsTemplate, icon: "tag" });
cm.addItem({ description: "Use as Prototype", event: this.useAsPrototype, icon: "tag" });
}
componentWillUnmount() {
this._backgroundReaction?.();
}
render() {
//style={{ backgroundColor: this.props.backgroundColor?.(this.props.Document) }}>
if (this.layoutDoc.menuIcon) {
let backgroundColor = "black";
if (this.dataDoc.title === "Sharing" || this.dataDoc.title === "Help" || this.dataDoc.title === "Settings" || this.dataDoc.title === "Import") {
backgroundColor = "black";
} else {
backgroundColor = CurrentUserUtils.selectedPanel === this.dataDoc.title ? "lightgrey" : "black";
}
const color = backgroundColor === "lightgrey" ? "black" : "white";
const menuBTN = <div className="menuButton" style={{ backgroundColor: backgroundColor }}>
<div className="menuButton-wrap" style={{ backgroundColor: backgroundColor }}>
<FontAwesomeIcon className="menuButton-icon" icon={StrCast(this.dataDoc.icon, "user") as any} color={color} size="lg" />
<div className="menuButton-label" style={{ color: color }}> {this.dataDoc.title} </div>
</div>
</div>;
return menuBTN;
} else {
const referenceDoc = (this.layoutDoc.dragFactory instanceof Doc ? this.layoutDoc.dragFactory : this.layoutDoc);
const refLayout = Doc.Layout(referenceDoc);
const button = <button className="fontIconBox-outerDiv" ref={this._ref} onContextMenu={this.specificContextMenu}
style={{
padding: Cast(this.layoutDoc._xPadding, "number", null),
background: StrCast(refLayout._backgroundColor, StrCast(refLayout.backgroundColor)),
boxShadow: this.layoutDoc.ischecked ? `4px 4px 12px black` : undefined
}}>
<FontAwesomeIcon className="fontIconBox-icon" icon={StrCast(this.dataDoc.icon, "user") as any} color={StrCast(this.layoutDoc.color, this._foregroundColor)} size="sm" />
{!this.rootDoc.title ? (null) : <div className="fontIconBox-label" style={{ width: this.rootDoc.label ? "max-content" : undefined }}> {StrCast(this.rootDoc.label, StrCast(this.rootDoc.title).substring(0, 6))} </div>}
</button>;
return !this.layoutDoc.toolTip ? button :
<Tooltip title={<div className="dash-tooltip">{StrCast(this.layoutDoc.toolTip)}</div>}>
{button}
</Tooltip>;
}
}
}
|
