Add select box to choose path type – custom path is just one option

WordPress · Jul 17, 2024 · a0427f8 · a0427f8
1 parent e8242bd
commit a0427f8
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 10 deletions.
diff --git a/packages/playground/components/src/PathMappingControl/PathMappingControl.tsx b/packages/playground/components/src/PathMappingControl/PathMappingControl.tsx
@@ -9,6 +9,7 @@ import {
 	// @ts-expect-error
 	__experimentalInputControl as InputControl,
 	Button,
+	SelectControl,
 } from '@wordpress/components';
 import { Icon, chevronRight, chevronDown } from '@wordpress/icons';
 import '@wordpress/components/build-style/style.css';
@@ -30,6 +31,7 @@ type MappingNodeStates = Record<string, MappingNodeState>;
 
 type MappingNodeState = {
 	isOpen?: boolean;
+	pathType?: string;
 	playgroundPath?: string;
 };
 
@@ -115,7 +117,11 @@ const NodeRow: React.FC<{
 	parentMapping = '',
 }) => {
 	const path = generatePath(node, parentPath);
-	const nodeState = nodeStates[path] || { isOpen: false, playgroundPath: '' };
+	const nodeState = nodeStates[path] || {
+		isOpen: false,
+		playgroundPath: '',
+		pathType: '',
+	};
 	const nodeMapping = computeMapping({
 		node,
 		nodeState,
@@ -130,6 +136,33 @@ const NodeRow: React.FC<{
 		updateNodeState(path, { playgroundPath: value });
 	};
 
+	const handlePathSelectChange = (pathType: string) => {
+		switch (pathType) {
+			case 'plugin':
+				updateNodeState(path, {
+					pathType,
+					playgroundPath:
+						'/wordpress/wp-content/plugins/' + node.name,
+				});
+				break;
+			case 'theme':
+				updateNodeState(path, {
+					pathType,
+					playgroundPath: '/wordpress/wp-content/themes/' + node.name,
+				});
+				break;
+			case 'wp-content':
+				updateNodeState(path, {
+					pathType,
+					playgroundPath: '/wordpress/wp-content',
+				});
+				break;
+			default:
+				updateNodeState(path, { pathType, playgroundPath: '' });
+				break;
+		}
+	};
+
 	const handleKeyDown = (event: any) => {
 		if (event.key === 'ArrowLeft') {
 			if (nodeState.isOpen) {
@@ -190,15 +223,42 @@ const NodeRow: React.FC<{
 				<TreeGridCell>
 					{() => (
 						<>
-							<InputControl
-								disabled={parentMapping}
-								value={nodeMapping}
-								onChange={handlePathChange}
-								onDrag={function noRefCheck() {}}
-								onDragEnd={function noRefCheck() {}}
-								onDragStart={function noRefCheck() {}}
-								onValidate={function noRefCheck() {}}
-							/>
+							{!parentMapping && (
+								<SelectControl
+									label="Path"
+									value={nodeState.pathType}
+									onChange={handlePathSelectChange}
+									options={[
+										{ label: 'Select a path', value: '' },
+										{ label: 'Plugin', value: 'plugin' },
+										{ label: 'Theme', value: 'theme' },
+										{
+											label: 'wp-content',
+											value: 'wp-content',
+										},
+										{
+											label: 'Custom path',
+											value: 'custom-path',
+										},
+									]}
+								/>
+							)}
+							{(parentMapping || nodeState.pathType !== '') && (
+								<InputControl
+									disabled={
+										parentMapping ||
+										(nodeState.pathType?.trim() !== '' &&
+											nodeState.pathType !==
+												'custom-path')
+									}
+									value={nodeMapping}
+									onChange={handlePathChange}
+									onDrag={function noRefCheck() {}}
+									onDragEnd={function noRefCheck() {}}
+									onDragStart={function noRefCheck() {}}
+									onValidate={function noRefCheck() {}}
+								/>
+							)}
 						</>
 					)}
 				</TreeGridCell>

diff --git a/packages/playground/components/src/PathMappingControl/demo.tsx b/packages/playground/components/src/PathMappingControl/demo.tsx
@@ -35,6 +35,11 @@ export default function PathMappingControlDemo() {
 	const [mapping, setMapping] = React.useState({});
 	return (
 		<div>
+			<style>
+				{`.path-mapping-control td:last-child {
+					width: 500px;
+				}`}
+			</style>
 			<PathMappingControl
 				files={fileStructure}
 				initialState={{ '/': { isOpen: true } }}