@wordpress/fields 0.2.0 → 0.3.0

package/src/fields/featured-image/featured-image-edit.tsx

@@ -0,0 +1,122 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, __experimentalGrid as Grid } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useCallback, useRef } from '@wordpress/element';
+// @ts-ignore
+import { MediaUpload } from '@wordpress/media-utils';
+import { lineSolid } from '@wordpress/icons';
+import { store as coreStore } from '@wordpress/core-data';
+import type { DataFormControlProps } from '@wordpress/dataviews';
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+import { __ } from '@wordpress/i18n';
+
+export const FeaturedImageEdit = ( {
+	data,
+	field,
+	onChange,
+}: DataFormControlProps< BasePost > ) => {
+	const { id } = field;
+
+	const value = field.getValue( { item: data } );
+
+	const media = useSelect(
+		( select ) => {
+			const { getEntityRecord } = select( coreStore );
+			return getEntityRecord( 'root', 'media', value );
+		},
+		[ value ]
+	);
+
+	const onChangeControl = useCallback(
+		( newValue: number ) =>
+			onChange( {
+				[ id ]: newValue,
+			} ),
+		[ id, onChange ]
+	);
+
+	const url = media?.source_url;
+	const title = media?.title?.rendered;
+	const ref = useRef( null );
+
+	return (
+		<fieldset className="fields-controls__featured-image">
+			<div className="fields-controls__featured-image-container">
+				<MediaUpload
+					onSelect={ ( selectedMedia: { id: number } ) => {
+						onChangeControl( selectedMedia.id );
+					} }
+					allowedTypes={ [ 'image' ] }
+					render={ ( { open }: { open: () => void } ) => {
+						return (
+							<div
+								ref={ ref }
+								role="button"
+								tabIndex={ -1 }
+								onClick={ () => {
+									open();
+								} }
+								onKeyDown={ open }
+							>
+								<Grid
+									rowGap={ 0 }
+									columnGap={ 8 }
+									templateColumns="24px 1fr 24px"
+								>
+									{ url && (
+										<>
+											<img
+												className="fields-controls__featured-image-image"
+												alt=""
+												width={ 24 }
+												height={ 24 }
+												src={ url }
+											/>
+											<span className="fields-controls__featured-image-title">
+												{ title }
+											</span>
+										</>
+									) }
+									{ ! url && (
+										<>
+											<span
+												className="fields-controls__featured-image-placeholder"
+												style={ {
+													width: '24px',
+													height: '24px',
+												} }
+											/>
+											<span className="fields-controls__featured-image-title">
+												{ __( 'Choose an image…' ) }
+											</span>
+										</>
+									) }
+									{ url && (
+										<>
+											<Button
+												size="small"
+												className="fields-controls__featured-image-remove-button"
+												icon={ lineSolid }
+												onClick={ (
+													event: React.MouseEvent< HTMLButtonElement >
+												) => {
+													event.stopPropagation();
+													onChangeControl( 0 );
+												} }
+											/>
+										</>
+									) }
+								</Grid>
+							</div>
+						);
+					} }
+				/>
+			</div>
+		</fieldset>
+	);
+};

package/src/fields/featured-image/featured-image-view.tsx

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+import type { DataViewRenderFieldProps } from '@wordpress/dataviews';
+
+export const FeaturedImageView = ( {
+	item,
+}: DataViewRenderFieldProps< BasePost > ) => {
+	const mediaId = item.featured_media;
+
+	const media = useSelect(
+		( select ) => {
+			const { getEntityRecord } = select( coreStore );
+			return mediaId ? getEntityRecord( 'root', 'media', mediaId ) : null;
+		},
+		[ mediaId ]
+	);
+	const url = media?.source_url;
+
+	if ( url ) {
+		return (
+			<img
+				className="fields-controls__featured-image-image"
+				src={ url }
+				alt=""
+			/>
+		);
+	}
+
+	return <span className="fields-controls__featured-image-placeholder" />;
+};

package/src/fields/featured-image/index.ts

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+import { __ } from '@wordpress/i18n';
+import { FeaturedImageEdit } from './featured-image-edit';
+import { FeaturedImageView } from './featured-image-view';
+
+const featuredImageField: Field< BasePost > = {
+	id: 'featured_media',
+	type: 'text',
+	label: __( 'Featured Image' ),
+	getValue: ( { item } ) => item.featured_media,
+	Edit: FeaturedImageEdit,
+	render: FeaturedImageView,
+	enableSorting: false,
+};
+
+export default featuredImageField;

package/src/fields/featured-image/style.scss

@@ -0,0 +1,95 @@
+.fields-controls__featured-image-placeholder {
+	border-radius: $radius-small;
+	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+	display: inline-block;
+	padding: 0;
+	background:
+		$white
+		linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
+}
+
+.fields-controls__featured-image-title {
+	width: 100%;
+	color: $gray-900;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
+.fields-controls__featured-image-image {
+	width: 100%;
+	height: 100%;
+	border-radius: $radius-small;
+	align-self: center;
+}
+
+.fields-controls__featured-image-container {
+	.fields-controls__featured-image-placeholder {
+		margin: 0;
+	}
+
+	span {
+		margin-right: auto;
+	}
+}
+
+fieldset.fields-controls__featured-image {
+	.fields-controls__featured-image-container {
+		border: $border-width solid $gray-300;
+		border-radius: $radius-small;
+		padding: 8px 12px;
+		cursor: pointer;
+		&:hover {
+			background-color: $gray-100;
+		}
+	}
+
+	.fields-controls__featured-image-placeholder {
+		width: 24px;
+		height: 24px;
+	}
+
+	span {
+		align-self: center;
+		text-align: start;
+		white-space: nowrap;
+	}
+
+	.fields-controls__featured-image-upload-button {
+		padding: 0;
+		height: fit-content;
+		&:hover,
+		&:focus {
+			border: 0;
+			color: unset;
+		}
+	}
+
+	.fields-controls__featured-image-remove-button {
+		place-self: end;
+	}
+}
+
+.dataforms-layouts-panel__field-control {
+	.fields-controls__featured-image-image {
+		width: 16px;
+		height: 16px;
+	}
+
+	.fields-controls__featured-image-placeholder {
+		width: 16px;
+		height: 16px;
+	}
+}
+
+.dataviews-view-table__cell-content-wrapper {
+	.fields-controls__featured-image-image {
+		width: 32px;
+		height: 32px;
+	}
+
+	.fields-controls__featured-image-placeholder {
+		width: 32px;
+		height: 32px;
+	}
+}

package/src/fields/index.ts

@@ -1,2 +1,5 @@
+export { default as slugField } from './slug';
 export { default as titleField } from './title';
 export { default as orderField } from './order';
+export { default as featuredImageField } from './featured-image';
+export { default as parentField } from './parent';

package/src/fields/parent/index.ts

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+import { __ } from '@wordpress/i18n';
+import { ParentEdit } from './parent-edit';
+import { ParentView } from './parent-view';
+
+const parentField: Field< BasePost > = {
+	id: 'parent',
+	type: 'text',
+	label: __( 'Parent' ),
+	getValue: ( { item } ) => item.parent,
+	Edit: ParentEdit,
+	render: ParentView,
+	enableSorting: true,
+};
+
+/**
+ * This field is used to display the post parent.
+ */
+export default parentField;

package/src/fields/parent/parent-edit.tsx

@@ -0,0 +1,348 @@
+/**
+ * WordPress dependencies
+ */
+import { ComboboxControl, ExternalLink } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import {
+	createInterpolateElement,
+	useCallback,
+	useMemo,
+	useState,
+} from '@wordpress/element';
+// @ts-ignore
+import { store as coreStore } from '@wordpress/core-data';
+import type { DataFormControlProps } from '@wordpress/dataviews';
+
+/**
+ * External dependencies
+ */
+import removeAccents from 'remove-accents';
+
+/**
+ * Internal dependencies
+ */
+import { debounce } from '@wordpress/compose';
+import { decodeEntities } from '@wordpress/html-entities';
+import { __, sprintf } from '@wordpress/i18n';
+import type { BasePost } from '../../types';
+import { getTitleWithFallbackName } from './utils';
+import { filterURLForDisplay } from '@wordpress/url';
+
+type TreeBase = {
+	id: number;
+	name: string;
+	[ key: string ]: any;
+};
+
+type TreeWithParent = TreeBase & {
+	parent: number;
+};
+
+type TreeWithoutParent = TreeBase & {
+	parent: null;
+};
+
+type Tree = TreeWithParent | TreeWithoutParent;
+
+function buildTermsTree( flatTerms: Tree[] ) {
+	const flatTermsWithParentAndChildren = flatTerms.map( ( term ) => {
+		return {
+			children: [],
+			...term,
+		};
+	} );
+
+	// All terms should have a `parent` because we're about to index them by it.
+	if (
+		flatTermsWithParentAndChildren.some(
+			( { parent } ) => parent === null || parent === undefined
+		)
+	) {
+		return flatTermsWithParentAndChildren as TreeWithParent[];
+	}
+
+	const termsByParent = (
+		flatTermsWithParentAndChildren as TreeWithParent[]
+	 ).reduce(
+		( acc, term ) => {
+			const { parent } = term;
+			if ( ! acc[ parent ] ) {
+				acc[ parent ] = [];
+			}
+			acc[ parent ].push( term );
+			return acc;
+		},
+		{} as Record< string, Array< TreeWithParent > >
+	);
+
+	const fillWithChildren = (
+		terms: Array< TreeWithParent >
+	): Array< TreeWithParent > => {
+		return terms.map( ( term ) => {
+			const children = termsByParent[ term.id ];
+			return {
+				...term,
+				children:
+					children && children.length
+						? fillWithChildren( children )
+						: [],
+			};
+		} );
+	};
+
+	return fillWithChildren( termsByParent[ '0' ] || [] );
+}
+
+export const getItemPriority = ( name: string, searchValue: string ) => {
+	const normalizedName = removeAccents( name || '' ).toLowerCase();
+	const normalizedSearch = removeAccents( searchValue || '' ).toLowerCase();
+	if ( normalizedName === normalizedSearch ) {
+		return 0;
+	}
+
+	if ( normalizedName.startsWith( normalizedSearch ) ) {
+		return normalizedName.length;
+	}
+
+	return Infinity;
+};
+
+export function PageAttributesParent( {
+	data,
+	onChangeControl,
+}: {
+	data: BasePost;
+	onChangeControl: ( newValue: number ) => void;
+} ) {
+	const [ fieldValue, setFieldValue ] = useState< null | string >( null );
+
+	const pageId = data.parent;
+	const postId = data.id;
+	const postTypeSlug = data.type;
+
+	const { parentPostTitle, pageItems, isHierarchical } = useSelect(
+		( select ) => {
+			// @ts-expect-error getPostType is not typed
+			const { getEntityRecord, getEntityRecords, getPostType } =
+				select( coreStore );
+
+			const postTypeInfo = getPostType( postTypeSlug );
+
+			const postIsHierarchical =
+				postTypeInfo?.hierarchical && postTypeInfo.viewable;
+
+			const parentPost = pageId
+				? getEntityRecord< BasePost >(
+						'postType',
+						postTypeSlug,
+						pageId
+				  )
+				: null;
+
+			const query = {
+				per_page: 100,
+				exclude: postId,
+				parent_exclude: postId,
+				orderby: 'menu_order',
+				order: 'asc',
+				_fields: 'id,title,parent',
+				...( fieldValue !== null && {
+					search: fieldValue,
+				} ),
+			};
+
+			return {
+				isHierarchical: postIsHierarchical,
+				parentPostTitle: parentPost
+					? getTitleWithFallbackName( parentPost )
+					: '',
+				pageItems: postIsHierarchical
+					? getEntityRecords< BasePost >(
+							'postType',
+							postTypeSlug,
+							query
+					  )
+					: null,
+			};
+		},
+		[ fieldValue, pageId, postId, postTypeSlug ]
+	);
+
+	/**
+	 * This logic has been copied from https://github.com/WordPress/gutenberg/blob/0249771b519d5646171fb9fae422006c8ab773f2/packages/editor/src/components/page-attributes/parent.js#L106.
+	 */
+	const parentOptions = useMemo( () => {
+		const getOptionsFromTree = (
+			tree: Array< Tree >,
+			level = 0
+		): Array< {
+			value: number;
+			label: string;
+			rawName: string;
+		} > => {
+			const mappedNodes = tree.map( ( treeNode ) => [
+				{
+					value: treeNode.id,
+					label:
+						'— '.repeat( level ) + decodeEntities( treeNode.name ),
+					rawName: treeNode.name,
+				},
+				...getOptionsFromTree( treeNode.children || [], level + 1 ),
+			] );
+
+			const sortedNodes = mappedNodes.sort( ( [ a ], [ b ] ) => {
+				const priorityA = getItemPriority(
+					a.rawName,
+					fieldValue ?? ''
+				);
+				const priorityB = getItemPriority(
+					b.rawName,
+					fieldValue ?? ''
+				);
+				return priorityA >= priorityB ? 1 : -1;
+			} );
+
+			return sortedNodes.flat();
+		};
+
+		if ( ! pageItems ) {
+			return [];
+		}
+
+		let tree = pageItems.map( ( item ) => ( {
+			id: item.id as number,
+			parent: item.parent ?? null,
+			name: getTitleWithFallbackName( item ),
+		} ) );
+
+		// Only build a hierarchical tree when not searching.
+		if ( ! fieldValue ) {
+			tree = buildTermsTree( tree );
+		}
+
+		const opts = getOptionsFromTree( tree );
+
+		// Ensure the current parent is in the options list.
+		const optsHasParent = opts.find( ( item ) => item.value === pageId );
+		if ( pageId && parentPostTitle && ! optsHasParent ) {
+			opts.unshift( {
+				value: pageId,
+				label: parentPostTitle,
+				rawName: '',
+			} );
+		}
+		return opts.map( ( option ) => ( {
+			...option,
+			value: option.value.toString(),
+		} ) );
+	}, [ pageItems, fieldValue, parentPostTitle, pageId ] );
+
+	if ( ! isHierarchical ) {
+		return null;
+	}
+
+	/**
+	 * Handle user input.
+	 *
+	 * @param {string} inputValue The current value of the input field.
+	 */
+	const handleKeydown = ( inputValue: string ) => {
+		setFieldValue( inputValue );
+	};
+
+	/**
+	 * Handle author selection.
+	 *
+	 * @param {Object} selectedPostId The selected Author.
+	 */
+	const handleChange = ( selectedPostId: string | null | undefined ) => {
+		if ( selectedPostId ) {
+			return onChangeControl( parseInt( selectedPostId, 10 ) ?? 0 );
+		}
+
+		onChangeControl( 0 );
+	};
+
+	return (
+		<ComboboxControl
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+			label={ __( 'Parent' ) }
+			help={ __( 'Choose a parent page.' ) }
+			value={ pageId?.toString() }
+			options={ parentOptions }
+			onFilterValueChange={ debounce(
+				( value: unknown ) => handleKeydown( value as string ),
+				300
+			) }
+			onChange={ handleChange }
+			hideLabelFromVision
+		/>
+	);
+}
+
+export const ParentEdit = ( {
+	data,
+	field,
+	onChange,
+}: DataFormControlProps< BasePost > ) => {
+	const { id } = field;
+
+	const homeUrl = useSelect( ( select ) => {
+		// @ts-expect-error getEntityRecord is not typed with unstableBase as argument.
+		return select( coreStore ).getEntityRecord< {
+			home: string;
+		} >( 'root', '__unstableBase' )?.home as string;
+	}, [] );
+
+	const onChangeControl = useCallback(
+		( newValue?: number ) =>
+			onChange( {
+				[ id ]: newValue,
+			} ),
+		[ id, onChange ]
+	);
+
+	return (
+		<fieldset className="fields-controls__parent">
+			<div>
+				{ createInterpolateElement(
+					sprintf(
+						/* translators: %1$s The home URL of the WordPress installation without the scheme. */
+						__(
+							'Child pages inherit characteristics from their parent, such as URL structure. For instance, if "Pricing" is a child of "Services", its URL would be %1$s<wbr />/services<wbr />/pricing.'
+						),
+						filterURLForDisplay( homeUrl ).replace(
+							/([/.])/g,
+							'<wbr />$1'
+						)
+					),
+					{
+						wbr: <wbr />,
+					}
+				) }
+				<p>
+					{ createInterpolateElement(
+						__(
+							'They also show up as sub-items in the default navigation menu. <a>Learn more.</a>'
+						),
+						{
+							a: (
+								<ExternalLink
+									href={ __(
+										'https://wordpress.org/documentation/article/page-post-settings-sidebar/#page-attributes'
+									) }
+									children={ undefined }
+								/>
+							),
+						}
+					) }
+				</p>
+				<PageAttributesParent
+					data={ data }
+					onChangeControl={ onChangeControl }
+				/>
+			</div>
+		</fieldset>
+	);
+};

package/src/fields/parent/parent-view.tsx

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+import type { DataViewRenderFieldProps } from '@wordpress/dataviews';
+import { getTitleWithFallbackName } from './utils';
+import { __ } from '@wordpress/i18n';
+
+export const ParentView = ( {
+	item,
+}: DataViewRenderFieldProps< BasePost > ) => {
+	const parent = useSelect(
+		( select ) => {
+			const { getEntityRecord } = select( coreStore );
+			return item?.parent
+				? getEntityRecord( 'postType', item.type, item.parent )
+				: null;
+		},
+		[ item.parent, item.type ]
+	);
+
+	if ( parent ) {
+		return <>{ getTitleWithFallbackName( parent ) }</>;
+	}
+
+	return <>{ __( 'None' ) }</>;
+};

package/src/fields/parent/utils.ts

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { decodeEntities } from '@wordpress/html-entities';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+
+export function getTitleWithFallbackName( post: BasePost ) {
+	return typeof post.title === 'object' &&
+		'rendered' in post.title &&
+		post.title.rendered
+		? decodeEntities( post.title.rendered )
+		: `#${ post?.id } (${ __( 'no title' ) })`;
+}