Skip to content

Commit 31e18ed

Browse files
siddharthkpsiddharthkp
committed
at least it compiles now!
1 parent 9cd608d commit 31e18ed

File tree

3 files changed

+86
-69
lines changed

3 files changed

+86
-69
lines changed

‎packages/app/src/app/pages/common/Modals/ShareModal2/components.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React from 'react';
2+
import {
3+
SectionHeader,
4+
SectionBody,
5+
SwitchLabel,
6+
SwitchBase,
7+
SwitchToggle,
8+
} from './elements';
9+
10+
const ToggleIcon = props => (
11+
<svg
12+
width="10"
13+
height="6"
14+
viewBox="0 0 10 6"
15+
fill="none"
16+
xmlns="http://www.w3.org/2000/svg"
17+
{...props}
18+
>
19+
<path
20+
d="M4.50498 6L0.00488229 1.26364e-06L9.00488 4.76837e-07L4.50498 6Z"
21+
fill="currentcolor"
22+
/>
23+
</svg>
24+
);
25+
26+
export const Section: React.FunctionComponent<{
27+
title: string;
28+
defaultOpen?: boolean;
29+
}> = ({ title, defaultOpen, ...props }) => {
30+
const [open, isOpen] = React.useState(title ? defaultOpen : true);
31+
32+
return (
33+
<section {...props}>
34+
<SectionHeader open={open} onClick={() => isOpen(!open)}>
35+
<ToggleIcon />
36+
{title}
37+
</SectionHeader>
38+
{open ? <SectionBody>{props.children}</SectionBody> : null}
39+
</section>
40+
);
41+
};
42+
43+
export { SectionBody };
44+
45+
export const Switch: React.FunctionComponent<{
46+
disabled?: boolean;
47+
on?: boolean;
48+
onChange: () => void;
49+
}> = ({ disabled, on, onChange, ...props }) => (
50+
<SwitchLabel>
51+
<input
52+
type="checkbox"
53+
disabled={disabled}
54+
checked={on}
55+
onChange={onChange}
56+
{...props}
57+
/>
58+
<SwitchBase>
59+
<SwitchToggle />
60+
</SwitchBase>
61+
</SwitchLabel>
62+
);

packages/app/src/app/pages/common/Modals/ShareModal2/elements.js renamed to packages/app/src/app/pages/common/Modals/ShareModal2/elements.ts

Lines changed: 15 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import React from 'react';
21
import styled from 'styled-components';
32
import css from '@styled-system/css';
43

@@ -34,7 +33,7 @@ export const Description = styled.p(
3433
})
3534
);
3635

37-
const SectionHeader = styled.button(props =>
36+
export const SectionHeader = styled.button<{ open?: Boolean }>(({ open }) =>
3837
css({
3938
display: 'flex',
4039
width: '100%',
@@ -60,43 +59,26 @@ const SectionHeader = styled.button(props =>
6059
},
6160
svg: {
6261
marginRight: 2,
63-
transform: props.open ? null : 'rotate(-90deg)',
62+
transform: open ? null : 'rotate(-90deg)',
6463
transition: 'transform ease-in',
6564
transitionDuration: theme => theme.speeds[3],
6665
},
6766
})
6867
);
6968

70-
const SectionBody = styled.div(props =>
69+
export const SectionBody = styled.div(
7170
css({
7271
paddingX: 4,
7372
paddingTop: 4,
7473
paddingBottom: 8,
7574
borderBottom: '1px solid',
7675
borderColor: 'grays.800',
77-
...props.css,
7876
})
7977
);
8078

8179
export const OptionDescription = styled.p(css({}));
8280

83-
export const Section = ({ title, children, defaultOpen, ...props }) => {
84-
const [open, isOpen] = React.useState(title ? defaultOpen : true);
85-
86-
return (
87-
<section {...props}>
88-
<SectionHeader open={open} onClick={() => isOpen(!open)}>
89-
<ToggleIcon />
90-
{title}
91-
</SectionHeader>
92-
{open ? <SectionBody>{children}</SectionBody> : null}
93-
</section>
94-
);
95-
};
96-
97-
Section.Body = SectionBody;
98-
99-
export const Input = styled.input(props =>
81+
export const Input = styled.input<{ code?: boolean }>(({ code }) =>
10082
css({
10183
backgroundColor: 'grays.700',
10284
border: '1px solid',
@@ -111,7 +93,7 @@ export const Input = styled.input(props =>
11193
height: 32,
11294
lineHeight: '32px',
11395

114-
fontFamily: props.code ? 'code' : 'body',
96+
fontFamily: code ? 'code' : 'body',
11597

11698
':hover': {
11799
backgroundColor: 'grays.800',
@@ -160,54 +142,27 @@ export const Button = styled.button(
160142
})
161143
);
162144

163-
export const Option = styled.label(props =>
145+
export const Option = styled.label<{
146+
multiline?: boolean;
147+
disabled?: boolean;
148+
}>(({ multiline, disabled }) =>
164149
css({
165150
justifyContent: 'space-between',
166151
alignItems: 'center',
167152
minHeight: 32,
168153
lineHeight: 1.6,
169154
marginY: 2,
170155

171-
display: props.multiline ? 'block' : 'flex',
156+
display: multiline ? 'block' : 'flex',
172157
input: {
173-
width: props.multiline ? '100%' : 48,
158+
width: multiline ? '100%' : 48,
174159
},
175160

176-
opacity: props.disabled ? 0.25 : 1,
161+
opacity: disabled ? 0.25 : 1,
177162
})
178163
);
179164

180-
const ToggleIcon = props => (
181-
<svg
182-
width="10"
183-
height="6"
184-
viewBox="0 0 10 6"
185-
fill="none"
186-
xmlns="http://www.w3.org/2000/svg"
187-
{...props}
188-
>
189-
<path
190-
d="M4.50498 6L0.00488229 1.26364e-06L9.00488 4.76837e-07L4.50498 6Z"
191-
fill="currentcolor"
192-
/>
193-
</svg>
194-
);
195-
196-
export const Switch = props => (
197-
<SwitchLabel>
198-
<input
199-
type="checkbox"
200-
disabled={props.disabled}
201-
checked={props.on}
202-
onChange={props.onChange}
203-
/>
204-
<SwitchBase>
205-
<SwitchToggle />
206-
</SwitchBase>
207-
</SwitchLabel>
208-
);
209-
210-
const SwitchBase = styled.span(
165+
export const SwitchBase = styled.span(
211166
css({
212167
display: 'flex',
213168
alignItems: 'center',
@@ -219,7 +174,7 @@ const SwitchBase = styled.span(
219174
})
220175
);
221176

222-
const SwitchToggle = styled.span(
177+
export const SwitchToggle = styled.span(
223178
css(theme => ({
224179
background: 'white',
225180
width: 14,
@@ -232,7 +187,7 @@ const SwitchToggle = styled.span(
232187
}))
233188
);
234189

235-
const SwitchLabel = styled.label(
190+
export const SwitchLabel = styled.label(
236191
css({
237192
cursor: 'pointer',
238193

packages/app/src/app/pages/common/Modals/ShareModal2/index.js renamed to packages/app/src/app/pages/common/Modals/ShareModal2/index.tsx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,17 @@ import queryString from 'query-string';
1616
import { ThemeProvider } from 'styled-components';
1717
import { theme } from '@codesandbox/common/lib/design-language';
1818

19+
import { Section, SectionBody, Switch } from './components';
20+
1921
import {
2022
Container,
2123
Sidebar,
22-
Section,
2324
Heading,
2425
Description,
2526
Option,
2627
Input,
2728
TextArea,
2829
Button,
29-
Switch,
3030
Preview,
3131
} from './elements';
3232

@@ -122,7 +122,7 @@ function ShareModal() {
122122
};
123123

124124
/** Copy Embed code */
125-
const urlContainer = React.createRef();
125+
const urlContainer = React.useRef();
126126
const [copied, setCopied] = React.useState(false);
127127

128128
const copyEmbedCode = () => {
@@ -137,7 +137,7 @@ function ShareModal() {
137137
<ThemeProvider theme={theme}>
138138
<Container>
139139
<Sidebar>
140-
<Section.Body css={{ paddingBottom: 0 }}>
140+
<SectionBody style={{ paddingBottom: 0 }}>
141141
<Heading>Embed</Heading>
142142
<Description>
143143
Customize the embed to better intergrate with your website, blog
@@ -161,7 +161,7 @@ function ShareModal() {
161161
Dark theme
162162
<Switch on={darkMode} onChange={() => setDarkMode(!darkMode)} />
163163
</Option>
164-
</Section.Body>
164+
</SectionBody>
165165

166166
<Section title="Editor">
167167
<Option>
@@ -175,7 +175,7 @@ function ShareModal() {
175175
Font-size
176176
<Input
177177
type="number"
178-
defaultValue={settings.fontSize}
178+
defaultValue={String(settings.fontSize)}
179179
disabled={!settings.showEditor}
180180
onChange={event => change({ fontSize: event.target.value })}
181181
/>
@@ -214,7 +214,7 @@ function ShareModal() {
214214
/>
215215
</Option>
216216
</Section>
217-
<Section title="Advanced Options" disabled={!settings.showEditor}>
217+
<Section title="Advanced Options">
218218
<Option>
219219
Use CodeMirror insted of Monaco
220220
<Switch
@@ -254,7 +254,7 @@ function ShareModal() {
254254
/>
255255
</Option>
256256
</Section>
257-
<Section.Body>
257+
<SectionBody>
258258
<TextArea
259259
as="textarea"
260260
code
@@ -274,7 +274,7 @@ function ShareModal() {
274274
value={getUrl(settings, darkMode).replace('embed', 's')}
275275
/>
276276
</Option>
277-
</Section.Body>
277+
</SectionBody>
278278
</Sidebar>
279279
<Preview>
280280
<iframe

0 commit comments

Comments
 (0)