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

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

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