generated from nirsky/figma-plugin-react-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.tsx
70 lines (65 loc) · 2.27 KB
/
App.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
import * as React from 'react';
import '../styles/ui.css';
import exporter from '../../plugin/figma/exportFile';
//import tailwind from '../assets/TailwindLogo.png';
/* import tailwind from '../assets/TailwindLogo';
import figma from '../assets/FigmaLogo.png'; */
declare function require(path: string): any;
const App = ({}) => {
const [ready, setReady] = React.useState(false);
const textbox = React.useRef<HTMLInputElement>(undefined);
const [data, setData] = React.useState({});
const [prefixTxt, setPrefixTxt] = React.useState('');
const prefix = React.useCallback((element: HTMLInputElement) => {
if (element) textbox.current = element;
}, []);
const onCreate = () => {
const prefix = textbox.current.value;
parent.postMessage({pluginMessage: {type: 'get-info', prefix}}, '*');
};
const onCancel = () => {
parent.postMessage({pluginMessage: {type: 'close'}}, '*');
};
const onExport = () => {
exporter(data);
};
const handleInput = (e) => {
setPrefixTxt(e.target.value);
};
React.useEffect(() => {
return () => {};
}, [prefixTxt]);
React.useEffect(() => {
// This is how we read messages sent from the plugin controller
window.onmessage = (event) => {
const {type, message} = event.data.pluginMessage;
if (type === 'get-info') {
/* console.log(`Figma Says: ${message.result}`);
console.log(message.data); */
setReady(true);
setData(message.data);
} else if (type === 'close') {
setReady(false);
/* console.log(`Figma Says: ${message.result}`); */
}
};
}, []);
return (
<div>
<p>
set class prefix: <input ref={prefix} onChange={handleInput} />
</p>
{!ready ? (
<button disabled={!prefixTxt.length} id="create" onClick={onCreate}>
Get project info
</button>
) : (
<button id="create" onClick={onExport}>
export
</button>
)}
<button onClick={onCancel}>Cancel</button>
</div>
);
};
export default App;