blob: b900d17caa1817e4262c5db94508e480729fdd04 (
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
|
import React = require('react');
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { action, computed } from "mobx"
import { observer } from "mobx-react"
import './PropertiesSection.scss'
import { Doc } from '../../fields/Doc';
import { StrCast } from '../../fields/Types';
export interface PropertiesSectionProps {
title: string,
content?: JSX.Element | string | null,
isOpen: boolean,
setIsOpen: (bool: boolean) => any
inSection?: boolean,
setInSection?: (bool: boolean) => any
}
@observer
export class PropertiesSection extends React.Component<PropertiesSectionProps> {
@computed get color() {
return StrCast(Doc.UserDoc().userColor);
}
@computed get backgroundColor() {
return StrCast(Doc.UserDoc().userBackgroundColor);
}
@computed get variantColor() {
return StrCast(Doc.UserDoc().userVariantColor);
}
render() {
console.log(this.props.title, this.props.content)
if (this.props.content === undefined || this.props.content === null) return null
else return <div className="propertiesView-section" onPointerEnter={action(() => (this.props.setInSection && this.props.setInSection(true)))} onPointerLeave={action(() => (this.props.setInSection && this.props.setInSection(false)))}>
<div className="propertiesView-sectionTitle" onPointerDown={action(() => (this.props.setIsOpen(!this.props.isOpen)))} style={{
background: 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.content}
</div>
}
</div>
}
}
|
