code-block-pro / src / editor / components / HeightPanel.tsx

HeightPanel.tsx in Code Block Pro – Beautiful Syntax Highlighting 1.27.5, at src/editor/components/HeightPanel.tsx

187 lines 7.5 KB

Raw Download Zip

1	import {
2	BaseControl,
3	CheckboxControl,
4	TextControl,
5	PanelBody,
6	} from '@wordpress/components';
7	import { useEffect, useRef, useState } from '@wordpress/element';
8	import { __ } from '@wordpress/i18n';
9	import { useThemeStore } from '../../state/theme';
10	import { AttributesPropsAndSetter } from '../../types';
11	import { SeeMoreSelect } from './SeeMoreSelect';
12
13	export const HeightPanel = ({
14	attributes,
15	setAttributes,
16	}: AttributesPropsAndSetter) => {
17	const [editorHeight, setEditorHeight] = useState(attributes?.editorHeight);
18	const [enableMaxHeight, setEnableMaxHeight] = useState(
19	attributes?.enableMaxHeight ?? false,
20	);
21	const [seeMoreString, setSeeMoreString] = useState(
22	attributes?.seeMoreString ?? '',
23	);
24	const [seeMoreAfterLine, setSeeMoreAfterLine] = useState(
25	attributes?.seeMoreAfterLine ?? '',
26	);
27	const [seeMoreTransition, setSeeMoreTransition] = useState(
28	attributes?.seeMoreTransition ?? false,
29	);
30	const [seeMoreCollapse, setSeeMoreCollapse] = useState(
31	attributes?.seeMoreCollapse ?? false,
32	);
33	const [seeMoreCollapseString, setSeeMoreCollapseString] = useState(
34	attributes?.seeMoreCollapseString ?? '',
35	);
36	const open = useRef(Number(attributes?.editorHeight) > 0);
37	const { updateThemeHistory } = useThemeStore();
38
39	useEffect(() => {
40	setAttributes({
41	editorHeight,
42	seeMoreString,
43	seeMoreAfterLine,
44	seeMoreTransition,
45	seeMoreCollapse,
46	seeMoreCollapseString,
47	enableMaxHeight,
48	});
49	}, [
50	editorHeight,
51	seeMoreString,
52	seeMoreAfterLine,
53	seeMoreTransition,
54	seeMoreCollapse,
55	seeMoreCollapseString,
56	setAttributes,
57	enableMaxHeight,
58	]);
59
60	return (
61	<PanelBody
62	title={__('Max Height', 'code-block-pro')}
63	initialOpen={open.current}>
64	<BaseControl id="code-block-pro-editor-height">
65	<TextControl
66	spellCheck={false}
67	autoComplete="off"
68	data-cy-cbp="editor-height"
69	type="number"
70	label={__(
71	'Max editor height (admin only)',
72	'code-block-pro',
73	)}
74	help={__('Set to 0 to disable.', 'code-block-pro')}
75	placeholder={'0'}
76	onChange={(editorHeight) => {
77	setEditorHeight(editorHeight);
78	}}
79	value={editorHeight}
80	/>
81	</BaseControl>
82	<BaseControl id="code-block-pro-see-more-enabled">
83	<CheckboxControl
84	label={__('Enable frontend max height', 'code-block-pro')}
85	help={__(
86	'Enable this, then select a specific line number below.',
87	'code-block-pro',
88	)}
89	data-cy="enable-max-height"
90	checked={enableMaxHeight}
91	onChange={(enableMaxHeight) => {
92	setEnableMaxHeight(enableMaxHeight);
93	}}
94	/>
95	</BaseControl>
96	{enableMaxHeight && (
97	<>
98	<BaseControl id="code-block-pro-see-more-line">
99	<TextControl
100	data-cy="see-more-line"
101	spellCheck={false}
102	autoComplete="off"
103	label={__('Hide after line', 'code-block-pro')}
104	help={__(
105	'Enter the last visible line number.',
106	'code-block-pro',
107	)}
108	onChange={(seeMoreAfterLine) => {
109	setSeeMoreAfterLine(seeMoreAfterLine);
110	}}
111	value={seeMoreAfterLine}
112	/>
113	</BaseControl>
114	<BaseControl id="code-block-pro-see-more-transition">
115	<CheckboxControl
116	label={__(
117	'Animate height transition',
118	'code-block-pro',
119	)}
120	checked={seeMoreTransition}
121	onChange={(seeMoreTransition) => {
122	setSeeMoreTransition(seeMoreTransition);
123	updateThemeHistory({ seeMoreTransition });
124	}}
125	/>
126	</BaseControl>
127	<BaseControl id="code-block-pro-see-more-text">
128	<TextControl
129	data-cy="see-more-text"
130	spellCheck={false}
131	autoComplete="off"
132	label={__('See more text', 'code-block-pro')}
133	placeholder={__('Expand', 'code-block-pro')}
134	onChange={(seeMoreString) => {
135	setSeeMoreString(seeMoreString);
136	updateThemeHistory({ seeMoreString });
137	}}
138	value={seeMoreString ?? ''}
139	/>
140	</BaseControl>
141	<BaseControl id="code-block-pro-see-more-collapse">
142	<CheckboxControl
143	data-cy="enable-collapse"
144	label={__(
145	'Allow users to collapse',
146	'code-block-pro',
147	)}
148	checked={seeMoreCollapse}
149	onChange={(seeMoreCollapse) => {
150	setSeeMoreCollapse(seeMoreCollapse);
151	updateThemeHistory({ seeMoreCollapse });
152	}}
153	/>
154	</BaseControl>
155	{seeMoreCollapse ? (
156	<BaseControl id="code-block-pro-collapse-text">
157	<TextControl
158	data-cy="collapse-text"
159	spellCheck={false}
160	autoComplete="off"
161	label={__('Collapse text', 'code-block-pro')}
162	placeholder={__('Collapse', 'code-block-pro')}
163	onChange={(seeMoreCollapseString) => {
164	setSeeMoreCollapseString(
165	seeMoreCollapseString,
166	);
167	updateThemeHistory({
168	seeMoreCollapseString,
169	});
170	}}
171	value={seeMoreCollapseString ?? ''}
172	/>
173	</BaseControl>
174	) : null}
175	<SeeMoreSelect
176	attributes={attributes}
177	onClick={(seeMoreType) => {
178	setAttributes({ seeMoreType });
179	updateThemeHistory({ seeMoreType });
180	}}
181	/>
182	</>
183	)}
184	</PanelBody>
185	);
186	};
187