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

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

174 lines 5.0 KB

Raw Download Zip

1	import {
2	BaseControl,
3	CheckboxControl,
4	PanelBody,
5	TextControl,
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 type { 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	>
65	<BaseControl id="code-block-pro-editor-height">
66	<TextControl
67	spellCheck={false}
68	autoComplete="off"
69	data-cy-cbp="editor-height"
70	type="number"
71	label={__('Max editor height (admin only)', 'code-block-pro')}
72	help={__('Set to 0 to disable.', 'code-block-pro')}
73	placeholder={'0'}
74	onChange={(editorHeight) => {
75	setEditorHeight(editorHeight);
76	}}
77	value={editorHeight}
78	/>
79	</BaseControl>
80	<BaseControl id="code-block-pro-see-more-enabled">
81	<CheckboxControl
82	label={__('Enable frontend max height', 'code-block-pro')}
83	help={__(
84	'Enable this, then select a specific line number below.',
85	'code-block-pro',
86	)}
87	data-cy="enable-max-height"
88	checked={enableMaxHeight}
89	onChange={(enableMaxHeight) => {
90	setEnableMaxHeight(enableMaxHeight);
91	}}
92	/>
93	</BaseControl>
94	{enableMaxHeight && (
95	<>
96	<BaseControl id="code-block-pro-see-more-line">
97	<TextControl
98	data-cy="see-more-line"
99	spellCheck={false}
100	autoComplete="off"
101	label={__('Hide after line', 'code-block-pro')}
102	help={__('Enter the last visible line number.', 'code-block-pro')}
103	onChange={(seeMoreAfterLine) => {
104	setSeeMoreAfterLine(seeMoreAfterLine);
105	}}
106	value={seeMoreAfterLine}
107	/>
108	</BaseControl>
109	<BaseControl id="code-block-pro-see-more-transition">
110	<CheckboxControl
111	label={__('Animate height transition', 'code-block-pro')}
112	checked={seeMoreTransition}
113	onChange={(seeMoreTransition) => {
114	setSeeMoreTransition(seeMoreTransition);
115	updateThemeHistory({ seeMoreTransition });
116	}}
117	/>
118	</BaseControl>
119	<BaseControl id="code-block-pro-see-more-text">
120	<TextControl
121	data-cy="see-more-text"
122	spellCheck={false}
123	autoComplete="off"
124	label={__('See more text', 'code-block-pro')}
125	placeholder={__('Expand', 'code-block-pro')}
126	onChange={(seeMoreString) => {
127	setSeeMoreString(seeMoreString);
128	updateThemeHistory({ seeMoreString });
129	}}
130	value={seeMoreString ?? ''}
131	/>
132	</BaseControl>
133	<BaseControl id="code-block-pro-see-more-collapse">
134	<CheckboxControl
135	data-cy="enable-collapse"
136	label={__('Allow users to collapse', 'code-block-pro')}
137	checked={seeMoreCollapse}
138	onChange={(seeMoreCollapse) => {
139	setSeeMoreCollapse(seeMoreCollapse);
140	updateThemeHistory({ seeMoreCollapse });
141	}}
142	/>
143	</BaseControl>
144	{seeMoreCollapse ? (
145	<BaseControl id="code-block-pro-collapse-text">
146	<TextControl
147	data-cy="collapse-text"
148	spellCheck={false}
149	autoComplete="off"
150	label={__('Collapse text', 'code-block-pro')}
151	placeholder={__('Collapse', 'code-block-pro')}
152	onChange={(seeMoreCollapseString) => {
153	setSeeMoreCollapseString(seeMoreCollapseString);
154	updateThemeHistory({
155	seeMoreCollapseString,
156	});
157	}}
158	value={seeMoreCollapseString ?? ''}
159	/>
160	</BaseControl>
161	) : null}
162	<SeeMoreSelect
163	attributes={attributes}
164	onClick={(seeMoreType) => {
165	setAttributes({ seeMoreType });
166	updateThemeHistory({ seeMoreType });
167	}}
168	/>
169	</>
170	)}
171	</PanelBody>
172	);
173	};
174