UNPKG

@wordpress/editor

Version:
8 lines (7 loc) 13.3 kB
{ "version": 3, "sources": ["../../../src/components/post-taxonomies/flat-term-selector.js"], "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, _x, sprintf } from '@wordpress/i18n';\nimport { useEffect, useMemo, useState } from '@wordpress/element';\nimport {\n\tFormTokenField,\n\twithFilters,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useDebounce } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\nimport { store as noticesStore } from '@wordpress/notices';\n\n/**\n * Internal dependencies\n */\nimport { store as editorStore } from '../../store';\nimport { unescapeString, unescapeTerm } from '../../utils/terms';\nimport MostUsedTerms from './most-used-terms';\n\n/**\n * Shared reference to an empty array for cases where it is important to avoid\n * returning a new array reference on every invocation.\n *\n * @type {Array<any>}\n */\nconst EMPTY_ARRAY = [];\n\n/**\n * How the max suggestions limit was chosen:\n * - Matches the `per_page` range set by the REST API.\n * - Can't use \"unbound\" query. The `FormTokenField` needs a fixed number.\n * - Matches default for `FormTokenField`.\n */\nconst MAX_TERMS_SUGGESTIONS = 100;\nconst DEFAULT_QUERY = {\n\tper_page: MAX_TERMS_SUGGESTIONS,\n\t_fields: 'id,name',\n\tcontext: 'view',\n};\n\nconst isSameTermName = ( termA, termB ) =>\n\tunescapeString( termA ).toLowerCase() ===\n\tunescapeString( termB ).toLowerCase();\n\nconst termNamesToIds = ( names, terms ) => {\n\treturn names\n\t\t.map(\n\t\t\t( termName ) =>\n\t\t\t\tterms.find( ( term ) => isSameTermName( term.name, termName ) )\n\t\t\t\t\t?.id\n\t\t)\n\t\t.filter( ( id ) => id !== undefined );\n};\n\n/**\n * Renders a flat term selector component.\n *\n * @param {Object} props The component props.\n * @param {string} props.slug The slug of the taxonomy.\n *\n * @return {React.ReactNode} The rendered flat term selector component.\n */\nexport function FlatTermSelector( { slug } ) {\n\tconst [ values, setValues ] = useState( [] );\n\tconst [ search, setSearch ] = useState( '' );\n\tconst debouncedSearch = useDebounce( setSearch, 500 );\n\n\tconst {\n\t\tterms,\n\t\ttermIds,\n\t\ttaxonomy,\n\t\thasAssignAction,\n\t\thasCreateAction,\n\t\thasResolvedTerms,\n\t} = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getCurrentPost, getEditedPostAttribute } =\n\t\t\t\tselect( editorStore );\n\t\t\tconst { getEntityRecords, getEntityRecord, hasFinishedResolution } =\n\t\t\t\tselect( coreStore );\n\t\t\tconst post = getCurrentPost();\n\t\t\tconst _taxonomy = getEntityRecord( 'root', 'taxonomy', slug );\n\t\t\tconst _termIds = _taxonomy\n\t\t\t\t? getEditedPostAttribute( _taxonomy.rest_base )\n\t\t\t\t: EMPTY_ARRAY;\n\n\t\t\tconst query = {\n\t\t\t\t...DEFAULT_QUERY,\n\t\t\t\tinclude: _termIds?.join( ',' ),\n\t\t\t\tper_page: -1,\n\t\t\t};\n\n\t\t\treturn {\n\t\t\t\thasCreateAction: _taxonomy\n\t\t\t\t\t? post._links?.[\n\t\t\t\t\t\t\t'wp:action-create-' + _taxonomy.rest_base\n\t\t\t\t\t ] ?? false\n\t\t\t\t\t: false,\n\t\t\t\thasAssignAction: _taxonomy\n\t\t\t\t\t? post._links?.[\n\t\t\t\t\t\t\t'wp:action-assign-' + _taxonomy.rest_base\n\t\t\t\t\t ] ?? false\n\t\t\t\t\t: false,\n\t\t\t\ttaxonomy: _taxonomy,\n\t\t\t\ttermIds: _termIds,\n\t\t\t\tterms: _termIds?.length\n\t\t\t\t\t? getEntityRecords( 'taxonomy', slug, query )\n\t\t\t\t\t: EMPTY_ARRAY,\n\t\t\t\thasResolvedTerms: hasFinishedResolution( 'getEntityRecords', [\n\t\t\t\t\t'taxonomy',\n\t\t\t\t\tslug,\n\t\t\t\t\tquery,\n\t\t\t\t] ),\n\t\t\t};\n\t\t},\n\t\t[ slug ]\n\t);\n\n\tconst { searchResults } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getEntityRecords } = select( coreStore );\n\n\t\t\treturn {\n\t\t\t\tsearchResults: !! search\n\t\t\t\t\t? getEntityRecords( 'taxonomy', slug, {\n\t\t\t\t\t\t\t...DEFAULT_QUERY,\n\t\t\t\t\t\t\tsearch,\n\t\t\t\t\t } )\n\t\t\t\t\t: EMPTY_ARRAY,\n\t\t\t};\n\t\t},\n\t\t[ search, slug ]\n\t);\n\n\t// Update terms state only after the selectors are resolved.\n\t// We're using this to avoid terms temporarily disappearing on slow networks\n\t// while core data makes REST API requests.\n\tuseEffect( () => {\n\t\tif ( hasResolvedTerms ) {\n\t\t\tconst newValues = ( terms ?? [] ).map( ( term ) =>\n\t\t\t\tunescapeString( term.name )\n\t\t\t);\n\n\t\t\tsetValues( newValues );\n\t\t}\n\t}, [ terms, hasResolvedTerms ] );\n\n\tconst suggestions = useMemo( () => {\n\t\treturn ( searchResults ?? [] ).map( ( term ) =>\n\t\t\tunescapeString( term.name )\n\t\t);\n\t}, [ searchResults ] );\n\n\tconst { editPost } = useDispatch( editorStore );\n\tconst { saveEntityRecord } = useDispatch( coreStore );\n\tconst { createErrorNotice } = useDispatch( noticesStore );\n\n\tif ( ! hasAssignAction ) {\n\t\treturn null;\n\t}\n\n\tasync function findOrCreateTerm( term ) {\n\t\ttry {\n\t\t\tconst newTerm = await saveEntityRecord( 'taxonomy', slug, term, {\n\t\t\t\tthrowOnError: true,\n\t\t\t} );\n\t\t\treturn unescapeTerm( newTerm );\n\t\t} catch ( error ) {\n\t\t\tif ( error.code !== 'term_exists' ) {\n\t\t\t\tthrow error;\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tid: error.data.term_id,\n\t\t\t\tname: term.name,\n\t\t\t};\n\t\t}\n\t}\n\n\tfunction onUpdateTerms( newTermIds ) {\n\t\teditPost( { [ taxonomy.rest_base ]: newTermIds } );\n\t}\n\n\tfunction onChange( termNames ) {\n\t\tconst availableTerms = [\n\t\t\t...( terms ?? [] ),\n\t\t\t...( searchResults ?? [] ),\n\t\t];\n\t\tconst uniqueTerms = termNames.reduce( ( acc, name ) => {\n\t\t\tif (\n\t\t\t\t! acc.some( ( n ) => n.toLowerCase() === name.toLowerCase() )\n\t\t\t) {\n\t\t\t\tacc.push( name );\n\t\t\t}\n\t\t\treturn acc;\n\t\t}, [] );\n\n\t\tconst newTermNames = uniqueTerms.filter(\n\t\t\t( termName ) =>\n\t\t\t\t! availableTerms.find( ( term ) =>\n\t\t\t\t\tisSameTermName( term.name, termName )\n\t\t\t\t)\n\t\t);\n\n\t\t// Optimistically update term values.\n\t\t// The selector will always re-fetch terms later.\n\t\tsetValues( uniqueTerms );\n\n\t\tif ( newTermNames.length === 0 ) {\n\t\t\tonUpdateTerms( termNamesToIds( uniqueTerms, availableTerms ) );\n\t\t\treturn;\n\t\t}\n\n\t\tif ( ! hasCreateAction ) {\n\t\t\treturn;\n\t\t}\n\n\t\tPromise.all(\n\t\t\tnewTermNames.map( ( termName ) =>\n\t\t\t\tfindOrCreateTerm( { name: termName } )\n\t\t\t)\n\t\t)\n\t\t\t.then( ( newTerms ) => {\n\t\t\t\tconst newAvailableTerms = availableTerms.concat( newTerms );\n\t\t\t\tonUpdateTerms(\n\t\t\t\t\ttermNamesToIds( uniqueTerms, newAvailableTerms )\n\t\t\t\t);\n\t\t\t} )\n\t\t\t.catch( ( error ) => {\n\t\t\t\tcreateErrorNotice( error.message, {\n\t\t\t\t\ttype: 'snackbar',\n\t\t\t\t} );\n\t\t\t\t// In case of a failure, try assigning available terms.\n\t\t\t\t// This will invalidate the optimistic update.\n\t\t\t\tonUpdateTerms( termNamesToIds( uniqueTerms, availableTerms ) );\n\t\t\t} );\n\t}\n\n\tfunction appendTerm( newTerm ) {\n\t\tif ( termIds.includes( newTerm.id ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst newTermIds = [ ...termIds, newTerm.id ];\n\t\tconst defaultName = slug === 'post_tag' ? __( 'Tag' ) : __( 'Term' );\n\t\tconst termAddedMessage = sprintf(\n\t\t\t/* translators: %s: term name. */\n\t\t\t_x( '%s added', 'term' ),\n\t\t\ttaxonomy?.labels?.singular_name ?? defaultName\n\t\t);\n\n\t\tspeak( termAddedMessage, 'assertive' );\n\t\tonUpdateTerms( newTermIds );\n\t}\n\n\tconst newTermLabel =\n\t\ttaxonomy?.labels?.add_new_item ??\n\t\t( slug === 'post_tag' ? __( 'Add Tag' ) : __( 'Add Term' ) );\n\tconst singularName =\n\t\ttaxonomy?.labels?.singular_name ??\n\t\t( slug === 'post_tag' ? __( 'Tag' ) : __( 'Term' ) );\n\tconst termAddedLabel = sprintf(\n\t\t/* translators: %s: term name. */\n\t\t_x( '%s added', 'term' ),\n\t\tsingularName\n\t);\n\tconst termRemovedLabel = sprintf(\n\t\t/* translators: %s: term name. */\n\t\t_x( '%s removed', 'term' ),\n\t\tsingularName\n\t);\n\tconst removeTermLabel = sprintf(\n\t\t/* translators: %s: term name. */\n\t\t_x( 'Remove %s', 'term' ),\n\t\tsingularName\n\t);\n\n\treturn (\n\t\t<VStack spacing={ 4 }>\n\t\t\t<FormTokenField\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tvalue={ values }\n\t\t\t\tsuggestions={ suggestions }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tonInputChange={ debouncedSearch }\n\t\t\t\tmaxSuggestions={ MAX_TERMS_SUGGESTIONS }\n\t\t\t\tlabel={ newTermLabel }\n\t\t\t\tmessages={ {\n\t\t\t\t\tadded: termAddedLabel,\n\t\t\t\t\tremoved: termRemovedLabel,\n\t\t\t\t\tremove: removeTermLabel,\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<MostUsedTerms taxonomy={ taxonomy } onSelect={ appendTerm } />\n\t\t</VStack>\n\t);\n}\n\nexport default withFilters( 'editor.PostTaxonomyType' )( FlatTermSelector );\n"], "mappings": "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", "names": ["editorStore", "coreStore", "noticesStore", "VStack", "MostUsedTerms"] }