code-snippets / js / Edit / fields / ScopeInput.tsx

ScopeInput.tsx in Code Snippets 3.5.0, at js/Edit/fields/ScopeInput.tsx

166 lines 5.4 KB

Raw Download Zip

1	import { ExternalLink } from '@wordpress/components'
2	import { __ } from '@wordpress/i18n'
3	import React, { Dispatch, SetStateAction, useState } from 'react'
4	import { SnippetInputProps } from '../../types/SnippetInputProps'
5	import { SNIPPET_TYPE_SCOPES, SNIPPET_TYPES, SnippetScope } from '../../types/Snippet'
6	import { isNetworkAdmin } from '../../utils/general'
7	import { buildShortcodeTag, ShortcodeAtts } from '../../utils/shortcodes'
8	import { getSnippetType } from '../../utils/snippets'
9	import { CopyToClipboardButton } from '../../common/CopyToClipboardButton'
10
11	const SHORTCODE_TAG = 'code_snippet'
12
13	const SCOPE_ICONS: Record<SnippetScope, string> = {
14	'global': 'admin-site',
15	'admin': 'admin-tools',
16	'front-end': 'admin-appearance',
17	'single-use': 'clock',
18	'content': 'shortcode',
19	'head-content': 'editor-code',
20	'footer-content': 'editor-code',
21	'admin-css': 'dashboard',
22	'site-css': 'admin-customizer',
23	'site-head-js': 'media-code',
24	'site-footer-js': 'media-code'
25	}
26
27	const SCOPE_DESCRIPTIONS: Record<SnippetScope, string> = {
28	'global': __('Run snippet everywhere', 'code-snippets'),
29	'admin': __('Only run in administration area', 'code-snippets'),
30	'front-end': __('Only run on site front-end', 'code-snippets'),
31	'single-use': __('Only run once', 'code-snippets'),
32	'content': __('Only display when inserted into a post or page.', 'code-snippets'),
33	'head-content': __('Display in site <head> section.', 'code-snippets'),
34	'footer-content': __('Display at the end of the <body> section, in the footer.', 'code-snippets'),
35	'site-css': __('Site front-end styles', 'code-snippets'),
36	'admin-css': __('Administration area styles', 'code-snippets'),
37	'site-footer-js': __('Load JS at the end of the <body> section', 'code-snippets'),
38	'site-head-js': __('Load JS in the <head> section', 'code-snippets')
39	}
40
41	interface ShortcodeOptions {
42	php: boolean
43	format: boolean
44	shortcodes: boolean
45	}
46
47	const ShortcodeTag: React.FC<{ atts: ShortcodeAtts }> = ({ atts }) =>
48	<p>
49	<code className="shortcode-tag">{buildShortcodeTag(SHORTCODE_TAG, atts)}</code>
50
51	<CopyToClipboardButton
52	title={__('Copy shortcode to clipboard', 'code-snippets')}
53	text={buildShortcodeTag(SHORTCODE_TAG, atts)}
54	/>
55	</p>
56
57	interface ShortcodeOptionsProps {
58	optionLabels: [keyof ShortcodeOptions, string][]
59	options: ShortcodeOptions
60	setOptions: Dispatch<SetStateAction<ShortcodeOptions>>
61	isReadOnly: boolean
62	}
63
64	const ShortcodeOptions: React.FC<ShortcodeOptionsProps> = ({
65	optionLabels,
66	options,
67	setOptions,
68	isReadOnly
69	}) =>
70	<p className="html-shortcode-options">
71	<strong>{__('Shortcode Options: ', 'code-snippets')}</strong>
72	{optionLabels.map(([option, label]) =>
73	<label key={option}>
74	<input
75	type="checkbox"
76	value={option}
77	checked={options[option]}
78	disabled={isReadOnly}
79	onChange={event =>
80	setOptions(previous => ({ ...previous, [option]: event.target.checked }))}
81	/>
82	{` ${label}`}
83	</label>
84	)}
85	</p>
86
87	const ShortcodeInfo: React.FC<SnippetInputProps> = ({ snippet, isReadOnly }) => {
88	const [options, setOptions] = useState<ShortcodeOptions>(() => ({
89	php: snippet.code.includes('<?'),
90	format: true,
91	shortcodes: false
92	}))
93
94	return 'content' === snippet.scope ?
95	<>
96	<p className="description">
97	{__('There are multiple options for inserting this snippet into a post, page or other content.', 'code-snippets')}
98	{' '}
99	{snippet.id ?
100	// eslint-disable-next-line max-len
101	__('You can copy the below shortcode, or use the Classic Editor button, Block editor (Pro) or Elementor widget (Pro).', 'code-snippets') :
102	// eslint-disable-next-line max-len
103	__('After saving, you can copy a shortcode, or use the Classic Editor button, Block editor (Pro) or Elementor widget (Pro).', 'code-snippets')}
104	{' '}
105	<ExternalLink
106	href={__('https://help.codesnippets.pro/article/50-inserting-snippets', 'code-snippets')}
107	>
108	{__('Learn more', 'code-snippets')}
109	</ExternalLink>
110	</p>
111
112	{snippet.id ?
113	<>
114	<ShortcodeTag atts={{
115	id: snippet.id,
116	network: snippet.network \|\| isNetworkAdmin(),
117	...options
118	}} />
119
120	<ShortcodeOptions
121	options={options}
122	setOptions={setOptions}
123	isReadOnly={isReadOnly}
124	optionLabels={[
125	['php', __('Evaluate PHP code', 'code-snippets')],
126	['format', __('Add paragraphs and formatting', 'code-snippets')],
127	['shortcodes', __('Evaluate additional shortcode tags', 'code-snippets')]
128	]}
129	/>
130	</> : null}
131	</> : null
132	}
133
134	export const ScopeInput: React.FC<SnippetInputProps> = ({ snippet, setSnippet, isReadOnly }) =>
135	<>
136	<h2 className="screen-reader-text">{__('Scope', 'code-snippets')}</h2>
137
138	{SNIPPET_TYPES
139	.filter(type => !snippet.id \|\| type === getSnippetType(snippet))
140	.map(type =>
141	<p key={type} className={`snippet-scope ${type}-scopes-list`}>
142	{SNIPPET_TYPE_SCOPES[type].map(scope =>
143	<label key={scope}>
144	<input
145	type="radio"
146	name="snippet_scope"
147	value={scope}
148	checked={scope === snippet.scope}
149	onChange={event =>
150	event.target.checked && setSnippet(previous => ({
151	...previous,
152	scope
153	}))
154	}
155	disabled={isReadOnly}
156	/>
157	{' '}
158	<span className={`dashicons dashicons-${SCOPE_ICONS[scope]}`}></span>
159	{` ${SCOPE_DESCRIPTIONS[scope]}`}
160	</label>)}
161
162	{'html' === type ? <ShortcodeInfo {...{ snippet, setSnippet, isReadOnly }} /> : null}
163	</p>
164	)}
165	</>
166