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
|
import { IReactionDisposer, observable, reaction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { Doc } from '../../fields/Doc';
import { NumCast } from '../../fields/Types';
import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnTrue, emptyPath } from '../../Utils';
import { Transform } from '../util/Transform';
import { DocumentView } from './nodes/DocumentView';
import './Palette.scss';
export interface PaletteProps {
x: number;
y: number;
thumb: number[];
thumbDoc: Doc;
}
@observer
export default class Palette extends React.Component<PaletteProps> {
private _selectedDisposer?: IReactionDisposer;
@observable private _selectedIndex: number = 0;
componentDidMount = () => {
this._selectedDisposer = reaction(
() => NumCast(this.props.thumbDoc.selectedIndex),
i => (this._selectedIndex = i),
{ fireImmediately: true }
);
};
componentWillUnmount = () => {
this._selectedDisposer?.();
};
render() {
return (
<div className="palette-container" style={{ transform: `translate(${this.props.x}px, ${this.props.y}px)` }}>
<div className="palette-thumb" style={{ transform: `translate(${this.props.thumb[0] - this.props.x}px, ${this.props.thumb[1] - this.props.y}px)` }}>
<div className="palette-thumbContent" style={{ transform: `translate(-${this._selectedIndex * 50 + 10}px, 0px)` }}>
<DocumentView
Document={this.props.thumbDoc}
DataDoc={undefined}
addDocument={undefined}
addDocTab={returnFalse}
rootSelected={returnTrue}
pinToPres={emptyFunction}
removeDocument={undefined}
ScreenToLocalTransform={Transform.Identity}
PanelWidth={() => window.screen.width}
PanelHeight={() => window.screen.height}
renderDepth={0}
isDocumentActive={returnTrue}
isContentActive={emptyFunction}
focus={emptyFunction}
docViewPath={returnEmptyDoclist}
styleProvider={returnEmptyString}
whenChildContentsActiveChanged={emptyFunction}
bringToFront={emptyFunction}
childFilters={returnEmptyFilter}
childFiltersByRanges={returnEmptyFilter}
searchFilterDocs={returnEmptyDoclist}
/>
<div className="palette-cover" style={{ transform: `translate(${Math.max(0, this._selectedIndex) * 50.75 + 23}px, 0px)` }}></div>
</div>
</div>
</div>
);
}
}
|
