← All changes | src/editor/controls/BlurControl.tsx +71 -65 1.28.0 → 1.13.0 View file →

		@@ -1,74 +1,80 @@
1	1	import {
2		- BaseControl,
3		- CheckboxControl,
4		- TextControl,
	2	+ BaseControl,
	3	+ CheckboxControl,
	4	+ TextControl,
5	5	} from '@wordpress/components';
6	6	import { useEffect, useRef } from '@wordpress/element';
7		-import { __, sprintf } from '@wordpress/i18n';
8		-import type { AttributesPropsAndSetter } from '../../types';
	7	+import { sprintf, __ } from '@wordpress/i18n';
	8	+import { AttributesPropsAndSetter } from '../../types';
9	9	import { parseStringArrayWithSingleNestedArray } from '../../util/arrayHelpers';
10	10
11	11	export const BlurControl = ({
12		- attributes,
13		- setAttributes,
	12	+ attributes,
	13	+ setAttributes,
14	14	}: AttributesPropsAndSetter) => {
15		- const inputRef = useRef<HTMLInputElement>(null);
16		- useEffect(() => {
17		- try {
18		- parseStringArrayWithSingleNestedArray(attributes.lineBlurs);
19		- inputRef.current
20		- ?.querySelector('input')
21		- ?.classList.remove('cbp-input-error');
22		- } catch (e) {
23		- console.error(e);
24		- inputRef.current
25		- ?.querySelector('input')
26		- ?.classList.add('cbp-input-error');
27		- }
28		- }, [attributes.lineBlurs]);
	15	+ const inputRef = useRef<HTMLInputElement>(null);
	16	+ useEffect(() => {
	17	+ try {
	18	+ parseStringArrayWithSingleNestedArray(attributes.lineBlurs);
	19	+ inputRef.current
	20	+ ?.querySelector('input')
	21	+ ?.classList.remove('cbp-input-error');
	22	+ } catch (e) {
	23	+ console.error(e);
	24	+ inputRef.current
	25	+ ?.querySelector('input')
	26	+ ?.classList.add('cbp-input-error');
	27	+ }
	28	+ }, [attributes.lineBlurs]);
29	29
30		- return (
31		- <BaseControl id="code-block-pro-show-blurring">
32		- <CheckboxControl
33		- data-cy="enable-blur"
34		- label={__('Line blurring', 'code-block-pro')}
35		- help={__(
36		- 'Blur surrounding code to focus on specific lines.',
37		- 'code-block-pro',
38		- )}
39		- checked={attributes.enableBlurring ?? false}
40		- onChange={(enableBlurring) => {
41		- setAttributes({ enableBlurring });
42		- }}
43		- />
44		- {attributes.enableBlurring && (
45		- <BaseControl id="code-block-pro-show-blurred-lines">
46		- <div ref={inputRef}>
47		- <TextControl
48		- id="code-block-pro-show-blurred-lines"
49		- spellCheck={false}
50		- autoComplete="off"
51		- label={__('Focus on the following', 'code-block-pro')}
52		- help={sprintf(
53		- __('Try %1$s or %2$s for a range.', 'code-block-pro'),
54		- '1,5',
55		- '1,[3,5]',
56		- )}
57		- onChange={(lineBlurs) => {
58		- setAttributes({ lineBlurs });
59		- }}
60		- value={attributes?.lineBlurs ?? ''}
61		- />
62		- </div>
63		- <CheckboxControl
64		- label={__('Remove blur on hover', 'code-block-pro')}
65		- checked={attributes.removeBlurOnHover ?? false}
66		- onChange={(removeBlurOnHover) => {
67		- setAttributes({ removeBlurOnHover });
68		- }}
69		- />
70		- </BaseControl>
71		- )}
72		- </BaseControl>
73		- );
	30	+ return (
	31	+ <BaseControl id="code-block-pro-show-blurring">
	32	+ <CheckboxControl
	33	+ data-cy="enable-blur"
	34	+ label={__('Enable blur emphesis', 'code-block-pro')}
	35	+ help={__(
	36	+ 'Blur surrounding code to focus on specific lines.',
	37	+ 'code-block-pro',
	38	+ )}
	39	+ checked={attributes.enableBlurring ?? false}
	40	+ onChange={(enableBlurring) => {
	41	+ setAttributes({ enableBlurring });
	42	+ }}
	43	+ />
	44	+ {attributes.enableBlurring && (
	45	+ <BaseControl id="code-block-pro-show-blurred-lines">
	46	+ <div ref={inputRef}>
	47	+ <TextControl
	48	+ id="code-block-pro-show-blurred-lines"
	49	+ spellCheck={false}
	50	+ autoComplete="off"
	51	+ label={__(
	52	+ 'Focus on the following',
	53	+ 'code-block-pro',
	54	+ )}
	55	+ help={sprintf(
	56	+ __(
	57	+ 'Try %1$s or %2$s for a range.',
	58	+ 'code-block-pro',
	59	+ ),
	60	+ '1,5',
	61	+ '1,[3,5]',
	62	+ )}
	63	+ onChange={(lineBlurs) => {
	64	+ setAttributes({ lineBlurs });
	65	+ }}
	66	+ value={attributes?.lineBlurs ?? ''}
	67	+ />
	68	+ </div>
	69	+ <CheckboxControl
	70	+ label={__('Remove blur on hover', 'code-block-pro')}
	71	+ checked={attributes.removeBlurOnHover ?? false}
	72	+ onChange={(removeBlurOnHover) => {
	73	+ setAttributes({ removeBlurOnHover });
	74	+ }}
	75	+ />
	76	+ </BaseControl>
	77	+ )}
	78	+ </BaseControl>
	79	+ );
74	80	};