← All changes | src/editor/components/HeightPanel.tsx +114 -162 1.28.0 → 1.13.0 View file →

		@@ -1,173 +1,125 @@
1	1	import {
2		- BaseControl,
3		- CheckboxControl,
4		- PanelBody,
5		- TextControl,
	2	+ BaseControl,
	3	+ CheckboxControl,
	4	+ TextControl,
	5	+ PanelBody,
6	6	} from '@wordpress/components';
7	7	import { useEffect, useRef, useState } from '@wordpress/element';
8	8	import { __ } from '@wordpress/i18n';
9		-import { useThemeStore } from '../../state/theme';
10		-import type { AttributesPropsAndSetter } from '../../types';
	9	+import { AttributesPropsAndSetter } from '../../types';
11	10	import { SeeMoreSelect } from './SeeMoreSelect';
12	11
13	12	export const HeightPanel = ({
14		- attributes,
15		- setAttributes,
	13	+ attributes,
	14	+ setAttributes,
16	15	}: 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();
	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);
38	32
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		- ]);
	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	+ ]);
59	49
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		- );
	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	+ );
173	125	};