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

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

126 lines 4.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 { AttributesPropsAndSetter } from '../../types';
10	import { SeeMoreSelect } from './SeeMoreSelect';
11
12	export const HeightPanel = ({
13	attributes,
14	setAttributes,
15	}: AttributesPropsAndSetter) => {
16	const [editorHeight, setEditorHeight] = useState(
17	attributes?.editorHeight ?? false,
18	);
19	const [enableMaxHeight, setEnableMaxHeight] = useState(
20	attributes?.enableMaxHeight ?? false,
21	);
22	const [seeMoreString, setSeeMoreString] = useState(
23	attributes?.seeMoreString ?? '',
24	);
25	const [seeMoreAfterLine, setSeeMoreAfterLine] = useState(
26	attributes?.seeMoreAfterLine ?? '',
27	);
28	const [seeMoreTransition, setSeeMoreTransition] = useState(
29	attributes?.seeMoreTransition ?? false,
30	);
31	const open = useRef(Number(attributes?.editorHeight) > 0);
32
33	useEffect(() => {
34	setAttributes({
35	editorHeight,
36	seeMoreString,
37	seeMoreAfterLine,
38	seeMoreTransition,
39	enableMaxHeight,
40	});
41	}, [
42	editorHeight,
43	seeMoreString,
44	seeMoreAfterLine,
45	seeMoreTransition,
46	setAttributes,
47	enableMaxHeight,
48	]);
49
50	return (
51	<PanelBody
52	title={__('Max Height', 'code-block-pro')}
53	initialOpen={open.current}>
54	<BaseControl id="code-block-pro-editor-height">
55	<TextControl
56	spellCheck={false}
57	autoComplete="off"
58	data-cy-cbp="editor-height"
59	type="number"
60	label={__('Max editor height', 'code-block-pro')}
61	help={__(
62	'Admin only. Set to 0 to disable.',
63	'code-block-pro',
64	)}
65	placeholder={'0'}
66	onChange={setEditorHeight}
67	value={editorHeight}
68	/>
69	</BaseControl>
70	<BaseControl id="code-block-pro-see-more-enabled">
71	<CheckboxControl
72	label={__('Enable max height', 'code-block-pro')}
73	data-cy="enable-max-height"
74	checked={enableMaxHeight}
75	onChange={setEnableMaxHeight}
76	/>
77	</BaseControl>
78	{enableMaxHeight && (
79	<>
80	<BaseControl id="code-block-pro-see-more-text">
81	<TextControl
82	data-cy="see-more-text"
83	spellCheck={false}
84	autoComplete="off"
85	label={__('See more text', 'code-block-pro')}
86	placeholder={__('Expand', 'code-block-pro')}
87	onChange={setSeeMoreString}
88	value={seeMoreString ?? ''}
89	/>
90	</BaseControl>
91	<BaseControl id="code-block-pro-see-more-line">
92	<TextControl
93	data-cy="see-more-line"
94	spellCheck={false}
95	autoComplete="off"
96	label={__('Hide after line', 'code-block-pro')}
97	help={__(
98	'Enter the last visible line number.',
99	'code-block-pro',
100	)}
101	onChange={setSeeMoreAfterLine}
102	value={seeMoreAfterLine}
103	/>
104	</BaseControl>
105	<BaseControl id="code-block-pro-see-more-transition">
106	<CheckboxControl
107	label={__(
108	'Animate height transition',
109	'code-block-pro',
110	)}
111	checked={seeMoreTransition}
112	onChange={setSeeMoreTransition}
113	/>
114	</BaseControl>
115	<SeeMoreSelect
116	attributes={attributes}
117	onClick={(seeMoreType) => {
118	setAttributes({ seeMoreType });
119	}}
120	/>
121	</>
122	)}
123	</PanelBody>
124	);
125	};
126