blob: 9ea9c3a3d7ea5debf0346593a838235a57a143c6 (
plain)
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
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { action, computed } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { SettingsManager } from '../util/SettingsManager';
import './PropertiesSection.scss';
export interface PropertiesSectionProps {
title: string;
children?: JSX.Element | string | null;
isOpen: boolean;
setIsOpen: (bool: boolean) => void;
onDoubleClick?: () => void;
}
@observer
export class PropertiesSection extends React.Component<PropertiesSectionProps> {
@computed get color() {
return SettingsManager.userColor;
}
@computed get variantColor() {
return SettingsManager.userVariantColor;
}
render() {
if (this.props.children === undefined || this.props.children === null) return null;
return (
<div className="propertiesView-section">
<div
className="propertiesView-sectionTitle"
onDoubleClick={action(() => {
this.props.onDoubleClick && this.props.onDoubleClick();
this.props.setIsOpen(true);
})}
onClick={action(() => {
this.props.setIsOpen(!this.props.isOpen);
})}
style={{
background: this.variantColor,
// this.props.isOpen ? this.variantColor : this.backgroundColor,
color: this.color,
}}>
{this.props.title}
<div className="propertiesView-sectionTitle-icon">
<FontAwesomeIcon icon={this.props.isOpen ? 'caret-down' : 'caret-right'} size="lg" />
</div>
</div>
{!this.props.isOpen ? null : <div className="propertiesView-content">{this.props.children}</div>}
</div>
);
}
}
|
