generated from nirsky/figma-plugin-react-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.tsx
55 lines (49 loc) · 1.75 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
import React, { useEffect, useState } from 'react'
import styled from 'styled-components'
import '../styles/global.css'
import { MsgTypes } from '../../enums/MsgTypes.enum'
import { Heading3, ScreenContainer } from './Generics'
import MainForm from './MainForm'
import { Colors } from '../../constants'
import Loader from './Loader'
function App() {
const [isElementsSelected, setIsElementsSelected] = useState(null)
useEffect(() => {
window.onmessage = (ev) => {
const { type, msg, data } = ev.data.pluginMessage
switch (type) {
case MsgTypes.IS_ELEMENTS_SELECTED:
console.log(`Figma Says: ${msg}`)
setIsElementsSelected(data)
break;
case MsgTypes.GENERATE_DESIGN_SYSTEM:
console.log(`Figma Says: ${msg}`)
case MsgTypes.NO_SELECTION:
console.log(`Figma Says: ${msg}`)
default:
break;
}
}
}, [])
return (
<ScreenContainer gap={50} justify={'space-between'} align='center'>
{
(isElementsSelected === null)
? <Loader />
: <>
{isElementsSelected
? <MainForm isFormDisabled={!isElementsSelected} setIsElementsSelected={setIsElementsSelected} />
: <SelectElementsText>Please select some elements.</SelectElementsText>
}
</>
}
</ScreenContainer>
)
}
const SelectElementsText = styled(Heading3)`
margin-top: 40%;
color: ${Colors.GRAY_500};
text-align: center;
line-height: 1.3;
`
export default App