vimeography / lib / admin / app / src / providers / Themes.tsx

Themes.tsx in Vimeography: Vimeo Video Gallery WordPress Plugin 2.2, at lib/admin/app/src/providers/Themes.tsx

199 lines 6.0 KB

Raw Download Zip

1	import * as React from "react";
2	import ThemesContext from "../context/Themes";
3	import { useQuery } from "react-query";
4	import produce from "immer";
5
6	type ThemesProviderProps = React.PropsWithChildren<{ id?: string }>;
7
8	/** Defines which CSS selectors and properties that the setting will control.
9	An array of one or more arrays, with each array containing two key/value pairs: */
10	export type ThemeSettingProperty = {
11	/** defines the CSS property that this setting will control for the corresponding target selector. */
12	attribute: string;
13
14	/** defines the CSS selector that the setting will affect */
15	target: string;
16
17	/** allows you to provide a string with a {{value}} token to define where the resulting pixel value should be injected in the generated CSS string value. */
18	transform?: string;
19	};
20
21	/**
22	* Defines additional CSS selectors and properties that the setting will control,
23	* but this time, relatively manipulating the value before associating it with the
24	* selector. This is useful if you have two selectors whose values are linked and
25	* change relative to one another (widescreen image ratios, margins etc.)
26	*/
27	export type ThemeSettingExpression = {
28	/** defines the CSS selector that the setting will affect */
29	target: string;
30	/** the CSS property that this setting will control for the target selector. */
31	attribute: string;
32	/** defines the symbol(s) to use for the mathmatical operation to perform on the original setting value. */
33	operator: ThemeSettingExpressionOperation;
34	/** is the input integer which acts as the addend, subtrahend, divisor, multiplier etc. to the original setting value. */
35	value: string;
36	/** allows you to provide a string with a {{value}} token to define where the resulting pixel value should be injected in the generated CSS string value. */
37	transform?: string;
38	};
39
40	type ThemeSettingExpressionOperation = "+" \| "-" \| "/" \| "*";
41
42	export type ThemeSettingType =
43	\| "colorpicker"
44	\| "slider"
45	\| "numeric"
46	\| "visibility";
47
48	/** Contains all of the configurable settings for a theme. */
49	export type ThemeSetting = {
50	/** An arbitrary identifier string to associate with the UI control's form field. */
51	id: string;
52
53	/** The i18n-compatible label for this particular setting. */
54	label: string;
55
56	/**
57	* Whether or not the DOM element being targeted by the CSS is a child of the
58	* vimeography-gallery-{{gallery_id}} container. Usually TRUE, unless your theme
59	* uses a fancybox plugin, in which case, the modal window is outside of the container
60	* element, so FALSE would be appropriate.
61	*/
62	namespace: boolean;
63
64	/** Whether or not this setting requires the Vimeography Pro plugin to be installed. TRUE if `type` is 'colorpicker', otherwise FALSE. */
65	pro: boolean;
66
67	/** The default CSS value for this setting. */
68	value: string;
69
70	/** Defines which CSS selectors and properties that the setting will control. */
71	properties: ThemeSettingProperty[];
72
73	/** The UI control to render for the current setting. */
74	type: ThemeSettingType;
75
76	/**
77	* Defines additional CSS selectors and properties that the setting will control,
78	* but this time, relatively manipulating the value before associating it with the
79	* selector. This is useful if you have two selectors whose values are linked and
80	* change relative to one another (widescreen image ratios, margins etc.)
81	*/
82	expressions?: ThemeSettingExpression[];
83
84	/** If set to TRUE, the CSS rule will be saved with an `!important` flag. */
85	important?: boolean;
86
87	/** [required if `type` is 'slider' or 'numeric'] The minimum value that a CSS property can be set. */
88
89	min?: number;
90
91	/** [required if `type` is 'slider' or 'numeric'] The maximum value that a CSS property can be set. */
92
93	max?: number;
94
95	/** [required if `type` is 'slider' or 'numeric'] The increment/decrement value of the UI control. */
96	step?: number;
97	};
98
99	export type Theme = {
100	name?: string;
101	description: string;
102	version: string;
103	thumbnail: string;
104	is_licensed: string;
105	settings: ThemeSetting[];
106	};
107
108	export type ThemesState = {
109	themes?: Theme[] \| [];
110	};
111
112	type UpdateThemeSettingDefaultValuePayload = {
113	themeName: string;
114	settingId: string;
115	value: any;
116	};
117
118	type Action =
119	\| { type: `HYDRATE`; payload: Theme[] }
120	\| { type: `RESET`; payload: Theme[] }
121	\| {
122	type: `THEME.SETTING.UPDATE_DEFAULT_VALUE`;
123	payload: UpdateThemeSettingDefaultValuePayload;
124	};
125
126	const initialState: ThemesState = {
127	themes: [],
128	};
129
130	const reducer = (state: ThemesState, action: Action) => {
131	switch (action.type) {
132	case "HYDRATE": {
133	if (state.themes.length > 0) return state; //only hydrate once
134
135	return produce(state, (next) => {
136	next.themes = action.payload;
137	});
138	}
139
140	case "RESET": {
141	return produce(state, (next) => {
142	next.themes = action.payload;
143	});
144	}
145
146	case `THEME.SETTING.UPDATE_DEFAULT_VALUE`: {
147	// console.log(action.payload);
148	const themeIndex = state.themes.findIndex(
149	(theme) => theme.name === action.payload.themeName
150	);
151	const settingIndex = state.themes[themeIndex].settings.findIndex(
152	(setting) => setting.id === action.payload.settingId
153	);
154
155	const nextState = produce(state, (draft) => {
156	draft.themes[themeIndex].settings[settingIndex].value =
157	action.payload.value;
158	});
159
160	return nextState;
161	}
162
163	default:
164	console.log(`unknown action type: ${action.type}`);
165	return state;
166	}
167	};
168
169	const ThemesProvider = (props: ThemesProviderProps) => {
170	const [state, dispatch] = React.useReducer(reducer, initialState);
171
172	const { isLoading, error, data } = useQuery(`getThemes`, () =>
173	fetch(window.vimeographyApiSettings.root + `vimeography/v1/themes`)
174	.then((res) => {
175	return res.json();
176	})
177	.then((payload) => {
178	dispatch({ payload, type: "HYDRATE" });
179	return payload;
180	})
181	);
182
183	return (
184	<ThemesContext.Provider
185	value={{
186	isLoading,
187	error,
188	data,
189	state,
190	dispatch,
191	}}
192	>
193	{props.children}
194	</ThemesContext.Provider>
195	);
196	};
197
198	export default ThemesProvider;
199