import { useState, useEffect, useCallback } from '@wordpress/element';
|
import { FormTokenField } from '@wordpress/components';
|
import apiFetch from '@wordpress/api-fetch';
|
import { addQueryArgs } from '@wordpress/url';
|
|
const resolveSubtype = (field) => field.subtype || field.type; // 'taxonomy' | 'user' | 'post'
|
|
const searchPath = (field) => {
|
const subtype = resolveSubtype(field);
|
if (subtype === 'user') {
|
return (search) => addQueryArgs('/wp/v2/users', { search, per_page: 20 });
|
}
|
if (subtype === 'taxonomy') {
|
// Assumes taxonomy rest_base matches the (unprefixed) taxonomy slug.
|
return (search) => addQueryArgs(`/wp/v2/${field.taxonomy}`, { search, per_page: 20, hide_empty: false });
|
}
|
return (search) => addQueryArgs('/wp/v2/search', { search, type: 'post', subtype: field.post_type, per_page: 20 });
|
};
|
|
const createPayload = (field, subtype, name) =>
|
subtype === 'post' ? { title: name, status: 'publish', postType: field.post_type } : { name };
|
|
const labelOf = (item, subtype) => (subtype === 'user' ? item.name : item.title?.rendered ?? item.title ?? item.name);
|
|
const SelectorField = ({ field, value, onChange }) => {
|
const subtype = resolveSubtype(field);
|
const canCreate = subtype === 'taxonomy';
|
|
const buildPath = searchPath(field);
|
const ids = Array.isArray(value) ? value : value ? value.split(',') : [];
|
|
const [tokens, setTokens] = useState([]); // display strings
|
const [idByLabel, setIdByLabel] = useState({});
|
const [options, setOptions] = useState({}); // label -> id, from last search
|
const [search, setSearch] = useState('');
|
const [creating, setCreating] = useState(false);
|
|
const createLabel = search ? `Not found. Create "${search}"?` : null;
|
|
|
// Resolve current IDs to labels on mount / value change
|
useEffect(() => {
|
onInputChange('');
|
let cancelled = false;
|
if (!ids.length) {
|
setTokens([]);
|
return;
|
}
|
Promise.all(ids.map((id) => apiFetch({ path: buildPath('') + `&include=${id}` })))
|
.then((results) => {
|
if (cancelled) return;
|
const map = {};
|
const labels = [];
|
results.flat().forEach((item) => {
|
const label = labelOf(item, subtype);
|
map[label] = item.id;
|
labels.push(label);
|
});
|
setIdByLabel((prev) => ({ ...prev, ...map }));
|
setTokens(labels);
|
})
|
.catch(() => {});
|
return () => { cancelled = true; };
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
}, [JSON.stringify(ids)]);
|
|
const onInputChange = useCallback((search) => {
|
setSearch(search);
|
|
apiFetch({ path: buildPath(search) })
|
.then((results) => {
|
const map = {};
|
results.forEach((item) => { map[labelOf(item, subtype)] = item.id; });
|
setOptions(map);
|
})
|
.catch(() => {});
|
}, [buildPath, subtype]);
|
|
const commitIds = (newIds) => {
|
const isSingle = field.max === 1;
|
if (isSingle) {
|
onChange(newIds[newIds.length - 1] ?? 0);
|
} else {
|
onChange((field.max ? newIds.slice(0, field.max) : newIds).join(','));
|
}
|
};
|
|
const onChangeTokens = (newTokens) => {
|
const pendingCreate = newTokens.find((t) => t === createLabel);
|
|
if (pendingCreate && canCreate && !creating) {
|
setCreating(true);
|
apiFetch({ path: `/wp/v2/${field.taxonomy}`, method: 'POST', data: createPayload(subtype, search) })
|
.then((item) => {
|
const label = labelOf(item, subtype);
|
const finalTokens = tokens.filter((t) => t !== createLabel).concat(label);
|
const newIds = finalTokens
|
.map((l) => idByLabel[l] ?? options[l] ?? (l === label ? item.id : undefined))
|
.filter((id) => id !== undefined);
|
|
setIdByLabel((prev) => ({ ...prev, [label]: item.id }));
|
setTokens(finalTokens);
|
commitIds(newIds);
|
})
|
.catch(() => {})
|
.finally(() => setCreating(false));
|
return;
|
}
|
|
const resolved = newTokens.filter(
|
(label) => idByLabel[label] !== undefined || options[label] !== undefined
|
);
|
const newIds = resolved.map((label) => idByLabel[label] ?? options[label]);
|
setTokens(resolved);
|
setIdByLabel((prev) => ({ ...prev, ...options }));
|
commitIds(newIds);
|
};
|
|
const noMatch = search && !Object.keys(options).some((l) => l.toLowerCase() === search.toLowerCase());
|
const suggestions = field.max === 1 && tokens.length
|
? []
|
: [...Object.keys(options), ...(canCreate && noMatch ? [createLabel] : [])];
|
|
|
return (
|
<FormTokenField
|
label={field.label}
|
help={field.description}
|
value={tokens}
|
suggestions={suggestions}
|
onChange={onChangeTokens}
|
onInputChange={onInputChange}
|
maxLength={field.max || undefined}
|
id={field.name}
|
__experimentalExpandOnFocus
|
/>
|
);
|
};
|
|
export default SelectorField;
|
