Skip to content

Commit 8bd8185

Browse files
elchininetelchininet
committed
Save playground options in the snippets
1 parent ff0c5c4 commit 8bd8185

File tree

10 files changed

+138
-38
lines changed

10 files changed

+138
-38
lines changed

‎docs/scripts/index.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎playground/src/@types/index.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,6 @@ export interface ObjectProps<T> {
77
[key: string]: T;
88
}
99

10-
export type PluginOptions = Parameters<typeof postcssRTLCSS>[0];
10+
export type PluginOptions = Parameters<typeof postcssRTLCSS>[0];
11+
12+
export type FetchOptions = Record<string, string | boolean>;

‎playground/src/components/AppProvider/AppProvider.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { PropsWithChildren, createContext, useContext, useState, useEffect } from 'react';
22
import { Mode, Source, Autorename } from 'postcss-rtlcss/options';
3-
import { PluginOptions } from '@types';
3+
import { PluginOptions, FetchOptions } from '@types';
44
import { useApi } from '@hooks/useApi';
55
import { breakpointSizes } from '@utilities/styles';
66

@@ -17,12 +17,13 @@ export interface AppProviderContext {
1717
ready: boolean;
1818
token: string;
1919
fetchCode: string;
20+
fetchOptions: FetchOptions;
2021
code: string;
2122
optionsOpen: boolean;
2223
options: PluginOptions;
2324
windowSizes: WindowSizes;
2425
setCode: (code: string) => void;
25-
share: (code: string) => void;
26+
share: (code: string, options: string) => void;
2627
setOptionsOpen: React.Dispatch<React.SetStateAction<boolean>>;
2728
changeOptionsMode: (mode: Mode) => void;
2829
changeOptionsSource: (source: Source) => void;
@@ -69,7 +70,7 @@ export const AppProvider = (props: PropsWithChildren<{}>): JSX.Element => {
6970
const [ options, setOptions ] = useState<PluginOptions>(defaultOptions);
7071
const [ sizes, setSizes ] = useState<WindowSizes>(windowSizes);
7172
const [ optionsOpen, setOptionsOpen ] = useState<boolean>(false);
72-
const { canShare, ready, token, fetchCode, share } = useApi();
73+
const { canShare, ready, token, fetchCode, fetchOptions, share } = useApi();
7374

7475
useEffect(() => {
7576
window.removeEventListener('resize', resize);
@@ -103,6 +104,7 @@ export const AppProvider = (props: PropsWithChildren<{}>): JSX.Element => {
103104
ready,
104105
token,
105106
fetchCode,
107+
fetchOptions,
106108
code,
107109
options,
108110
optionsOpen,

‎playground/src/components/Header/Header.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@ import { cssLines } from '@components/Playground/css';
55
import { stylesheet } from './stylesheet';
66

77
export const Header = (): JSX.Element => {
8-
const { canShare, token, share, code } = useAppContext();
8+
const { canShare, token, share, code, options } = useAppContext();
99
const shareCallback = useCallback(() => {
10-
share(code);
11-
}, [share, code]);
10+
const fetchOptions = JSON.stringify(options);
11+
share(code, fetchOptions);
12+
}, [share, code, options]);
1213
const showShareButton = canShare && token && code && code !== cssLines;
1314
return (
1415
<header css={stylesheet.wrapper}>

‎playground/src/components/Options/Options.tsx‎

Lines changed: 73 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
import React from 'react';
1+
import React, { useEffect } from 'react';
22
import { Mode, Source, Autorename } from 'postcss-rtlcss/options';
33
import { useAppContext } from '@components/AppProvider';
44
import { Switch } from '@components/Switch';
55
import { SwitchGroup } from '@components/SwitchGroup';
66
import { stylesheet } from './stylesheet';
7+
import { isBoolean } from '@utilities/types';
78

89
export const Options = (): JSX.Element => {
910

1011
const {
1112
optionsOpen,
12-
options,
1313
changeOptionsMode,
1414
changeOptionsSource,
1515
changeOptionsSafeBothPrefix,
@@ -19,7 +19,8 @@ export const Options = (): JSX.Element => {
1919
changeOptionsProcessEnv,
2020
changeOptionsUseCalc,
2121
changeOptionsAutoRename,
22-
changeOptionsGreedy
22+
changeOptionsGreedy,
23+
fetchOptions
2324
} = useAppContext();
2425

2526
const changeMode = (value: string): void => {
@@ -48,6 +49,41 @@ export const Options = (): JSX.Element => {
4849
}
4950
};
5051
const changeGreedy = (checked: boolean): void => changeOptionsGreedy(checked);
52+
53+
useEffect(() => {
54+
if (fetchOptions) {
55+
if (fetchOptions.mode) {
56+
changeMode(fetchOptions.mode as string);
57+
}
58+
if (fetchOptions.source) {
59+
changeSource(fetchOptions.source === 'rtl');
60+
}
61+
if (isBoolean(fetchOptions.safeBothPrefix)) {
62+
changeIgnorePrefixedRules(fetchOptions.safeBothPrefix as boolean);
63+
}
64+
if (isBoolean(fetchOptions.ignorePrefixedRules)) {
65+
changeIgnorePrefixedRules(fetchOptions.ignorePrefixedRules as boolean);
66+
}
67+
if (isBoolean(fetchOptions.processUrls)) {
68+
changeProcessUrls(fetchOptions.processUrls as boolean);
69+
}
70+
if (isBoolean(fetchOptions.processKeyFrames)) {
71+
changeProcessKeyframes(fetchOptions.processKeyFrames as boolean);
72+
}
73+
if (isBoolean(fetchOptions.processEnv)) {
74+
changeProcessEnv(fetchOptions.processEnv as boolean);
75+
}
76+
if (isBoolean(fetchOptions.useCalc)) {
77+
changeUseCalc(fetchOptions.useCalc as boolean);
78+
}
79+
if (fetchOptions.autoRename) {
80+
changeAutoRename(fetchOptions.autoRename as string);
81+
}
82+
if (isBoolean(fetchOptions.greedy)) {
83+
changeGreedy(fetchOptions.greedy as boolean);
84+
}
85+
}
86+
}, [fetchOptions]);
5187

5288
return (
5389
<div css={stylesheet.wrapper} data-opened={optionsOpen}>
@@ -62,57 +98,85 @@ export const Options = (): JSX.Element => {
6298
name="mode"
6399
values={['combined', 'override', 'diff']}
64100
onChange={changeMode}
101+
active={ fetchOptions?.mode as string || 'combined'}
65102
/>
66103
</div>
67104
{ /* Source */ }
68105
<div css={stylesheet.panel}>
69106
<Switch
70107
labels={['source: ltr', 'source: rtl']}
71108
onChange={changeSource}
109+
attributes={{
110+
checked: fetchOptions?.source === 'rtl'
111+
}}
72112
/>
73113
</div>
74114
{ /* safeBothPrefix */ }
75115
<div css={stylesheet.panel}>
76116
<Switch
77117
labels={['safeBothPrefix: false', 'safeBothPrefix: true']}
78118
onChange={changeSafeBothPrefix}
119+
attributes={{
120+
checked: !!fetchOptions?.safeBothPrefix
121+
}}
79122
/>
80123
</div>
81124
{ /* ignorePrefixedRules */ }
82125
<div css={stylesheet.panel}>
83126
<Switch
84127
labels={['ignorePrefixedRules: false', 'ignorePrefixedRules: true']}
85-
attributes={{ checked: true }}
86128
onChange={changeIgnorePrefixedRules}
129+
attributes={{
130+
checked: !!(
131+
isBoolean(fetchOptions?.ignorePrefixedRules)
132+
? fetchOptions.ignorePrefixedRules
133+
: true
134+
)
135+
}}
87136
/>
88137
</div>
89138
{ /* processUrls */ }
90139
<div css={stylesheet.panel}>
91140
<Switch
92141
labels={['processUrls: false', 'processUrls: true']}
93142
onChange={changeProcessUrls}
143+
attributes={{
144+
checked: !!fetchOptions?.processUrls
145+
}}
94146
/>
95147
</div>
96148
{ /* processKeyFrames */ }
97149
<div css={stylesheet.panel}>
98150
<Switch
99151
labels={['processKeyFrames: false', 'processKeyFrames: true']}
100152
onChange={changeProcessKeyframes}
153+
attributes={{
154+
checked: !!fetchOptions?.processKeyFrames
155+
}}
101156
/>
102157
</div>
103158
{ /* processEnv */ }
104159
<div css={stylesheet.panel}>
105160
<Switch
106161
labels={['processEnv: false', 'processEnv: true']}
107-
attributes={{ checked: true }}
108162
onChange={changeProcessEnv}
163+
attributes={{
164+
checked: !!(
165+
isBoolean(fetchOptions?.processEnv)
166+
? fetchOptions.processEnv
167+
: true
168+
)
169+
}}
109170
/>
110171
</div>
111172
{ /* useCalc */ }
112173
<div css={stylesheet.panel}>
113174
<Switch
114175
labels={['useCalc: false', 'useCalc: true']}
115176
onChange={changeUseCalc}
177+
attributes={{
178+
checked: !!fetchOptions?.useCalc
179+
}}
116180
/>
117181
</div>
118182
{ /* autoRename */ }
@@ -122,13 +186,17 @@ export const Options = (): JSX.Element => {
122186
name="auto-rename"
123187
values={['disabled', 'flexible', 'strict']}
124188
onChange={changeAutoRename}
189+
active={fetchOptions?.autoRename as string || 'disabled'}
125190
/>
126191
</div>
127192
{ /* greedy */ }
128193
<div css={stylesheet.panel}>
129194
<Switch
130195
labels={['greedy: false', 'greedy: true']}
131196
onChange={changeGreedy}
197+
attributes={{
198+
checked: !!fetchOptions?.greedy
199+
}}
132200
/>
133201
</div>
134202
</div>

‎playground/src/components/SwitchGroup/SwitchGroup.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState, ChangeEvent } from 'react';
1+
import React, { useState, useEffect, ChangeEvent } from 'react';
22
import { stylesheet } from './stylesheet';
33

44
interface Attributes {
@@ -25,7 +25,14 @@ export const SwitchGroup = (props: SwitchGroupProps): JSX.Element => {
2525
active,
2626
onChange
2727
} = props;
28-
const [selected, setSelected] = useState(active || values[0]);
28+
const [selected, setSelected] = useState(values[0]);
29+
30+
useEffect(() => {
31+
if (active) {
32+
setSelected(active);
33+
}
34+
}, [active]);
35+
2936
const onChangeRadio = (event: ChangeEvent<HTMLInputElement>) => {
3037
const currentTarget = event.currentTarget;
3138
const value = currentTarget.value;

‎playground/src/constants/index.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,6 @@ export enum COLORS {
66
gray_darkest = '#1E1E1E',
77
gray_light = '#EFEFEF',
88
white = '#FFF'
9-
}
9+
}
10+
11+
export const BOOLEAN_TYPE = 'boolean';

0 commit comments

Comments
 (0)