← All changes | src/editor/components/SeeMoreSelect.tsx +63 -60 1.28.0 → 1.13.0 View file →

		@@ -1,75 +1,78 @@
1	1	import { BaseControl } from '@wordpress/components';
2		-import { __, sprintf } from '@wordpress/i18n';
3		-import type { Attributes } from '../../types';
	2	+import { sprintf, __ } from '@wordpress/i18n';
	3	+import { Attributes } from '../../types';
4	4	import { BlockLeft } from './seemore/BlockLeft';
5	5	import { BlockRight } from './seemore/BlockRight';
6	6	import { RoundCenter } from './seemore/RoundCenter';
7	7
8	8	type SeeMoreSelectProps = {
9		- attributes: Attributes;
10		- onClick: (slug: string) => void;
	9	+ attributes: Attributes;
	10	+ onClick: (slug: string) => void;
11	11	};
12	12	export const SeeMoreSelect = ({ attributes, onClick }: SeeMoreSelectProps) => {
13		- const { seeMoreType, ...attributesWithoutSeeMoreType }: Partial<Attributes> =
14		- attributes;
15		- const { bgColor } = attributes;
16		- const types = {
17		- none: __('None', 'code-block-pro'),
18		- roundCenter: __('See more center', 'code-block-pro'),
19		- blockLeft: __('See more left', 'code-block-pro'),
20		- blockRight: __('See more right', 'code-block-pro'),
21		- };
	13	+ const {
	14	+ seeMoreType,
	15	+ ...attributesWithoutSeeMoreType
	16	+ }: Partial<Attributes> = attributes;
	17	+ const { bgColor } = attributes;
	18	+ const types = {
	19	+ none: __('None', 'code-block-pro'),
	20	+ roundCenter: __('See more center', 'code-block-pro'),
	21	+ blockLeft: __('See more left', 'code-block-pro'),
	22	+ blockRight: __('See more right', 'code-block-pro'),
	23	+ };
22	24
23		- return (
24		- <div className="code-block-pro-editor">
25		- {Object.entries(types).map(([slug, type]) => (
26		- <BaseControl
27		- id={`code-block-pro-see-more-${slug}`}
28		- label={
29		- seeMoreType === slug || (!seeMoreType && slug === 'none')
30		- ? sprintf(__('%s (current)', 'code-block-pro'), type)
31		- : type
32		- }
33		- key={slug}
34		- >
35		- <button
36		- id={`code-block-pro-see-more-${slug}`}
37		- type="button"
38		- onClick={() => onClick(slug)}
39		- className="p-0 border flex items-start w-full text-left outline-none cursor-pointer no-underline ring-offset-2 ring-offset-white focus:shadow-none focus:ring-wp overflow-x-auto"
40		- >
41		- <span className="pointer-events-none w-full">
42		- <span
43		- className="block w-full h-8"
44		- style={{ backgroundColor: bgColor }}
45		- />
46		- <SeeMoreType
47		- seeMoreType={slug}
48		- context="editor"
49		- {...attributesWithoutSeeMoreType}
50		- />
51		- </span>
52		- </button>
53		- </BaseControl>
54		- ))}
55		- </div>
56		- );
	25	+ return (
	26	+ <div className="code-block-pro-editor">
	27	+ {Object.entries(types).map(([slug, type]) => (
	28	+ <BaseControl
	29	+ id={`code-block-pro-see-more-${slug}`}
	30	+ label={
	31	+ seeMoreType === slug || !seeMoreType
	32	+ ? sprintf(
	33	+ __('%s (current)', 'code-block-pro'),
	34	+ type,
	35	+ )
	36	+ : type
	37	+ }
	38	+ key={slug}>
	39	+ <button
	40	+ id={`code-block-pro-see-more-${slug}`}
	41	+ type="button"
	42	+ onClick={() => onClick(slug)}
	43	+ className="p-0 border flex items-start w-full text-left outline-none cursor-pointer no-underline ring-offset-2 ring-offset-white focus:shadow-none focus:ring-wp overflow-x-auto">
	44	+ <span className="pointer-events-none w-full">
	45	+ <span
	46	+ className="block w-full h-8"
	47	+ style={{ backgroundColor: bgColor }}
	48	+ />
	49	+ <SeeMoreType
	50	+ seeMoreType={slug}
	51	+ context="editor"
	52	+ {...attributesWithoutSeeMoreType}
	53	+ />
	54	+ </span>
	55	+ </button>
	56	+ </BaseControl>
	57	+ ))}
	58	+ </div>
	59	+ );
57	60	};
58	61
59	62	export const SeeMoreType = (
60		- props: Partial<Attributes> & { context?: string },
	63	+ props: Partial<Attributes> & { context?: string },
61	64	) => {
62		- const { seeMoreType, enableMaxHeight, context } = props;
63		- if (!enableMaxHeight) return null;
64		- if (seeMoreType === 'roundCenter') {
65		- return <RoundCenter {...props} context={context} />;
66		- }
67		- if (seeMoreType === 'blockLeft') {
68		- return <BlockLeft {...props} context={context} />;
69		- }
70		- if (seeMoreType === 'blockRight') {
71		- return <BlockRight {...props} context={context} />;
72		- }
	65	+ const { seeMoreType, enableMaxHeight, context } = props;
	66	+ if (!enableMaxHeight) return null;
	67	+ if (seeMoreType === 'roundCenter') {
	68	+ return <RoundCenter {...props} context={context} />;
	69	+ }
	70	+ if (seeMoreType === 'blockLeft') {
	71	+ return <BlockLeft {...props} context={context} />;
	72	+ }
	73	+ if (seeMoreType === 'blockRight') {
	74	+ return <BlockRight {...props} context={context} />;
	75	+ }
73	76
74		- return null;
	77	+ return null;
75	78	};