@wordpress/components/build-module/tree-select/index.js

UI components for WordPress.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement } from "@wordpress/element";

/**
 * WordPress dependencies
 */
import { useMemo } from '@wordpress/element';
import { decodeEntities } from '@wordpress/html-entities';
/**
 * Internal dependencies
 */

import { SelectControl } from '../select-control';

function getSelectOptions(tree) {
  let level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
  return tree.flatMap(treeNode => [{
    value: treeNode.id,
    label: '\u00A0'.repeat(level * 3) + decodeEntities(treeNode.name)
  }, ...getSelectOptions(treeNode.children || [], level + 1)]);
}
/**
 * TreeSelect component is used to generate select input fields.
 *
 * @example
 * ```jsx
 * import { TreeSelect } from '@wordpress/components';
 * import { useState } from '@wordpress/element';
 *
 * const MyTreeSelect = () => {
 * 	const [ page, setPage ] = useState( 'p21' );
 *
 * 	return (
 * 		<TreeSelect
 * 			label="Parent page"
 * 			noOptionLabel="No parent page"
 * 			onChange={ ( newPage ) => setPage( newPage ) }
 * 			selectedId={ page }
 * 			tree={ [
 * 				{
 * 					name: 'Page 1',
 * 					id: 'p1',
 * 					children: [
 * 						{ name: 'Descend 1 of page 1', id: 'p11' },
 * 						{ name: 'Descend 2 of page 1', id: 'p12' },
 * 					],
 * 				},
 * 				{
 * 					name: 'Page 2',
 * 					id: 'p2',
 * 					children: [
 * 						{
 * 							name: 'Descend 1 of page 2',
 * 							id: 'p21',
 * 							children: [
 * 								{
 * 									name: 'Descend 1 of Descend 1 of page 2',
 * 									id: 'p211',
 * 								},
 * 							],
 * 						},
 * 					],
 * 				},
 * 			] }
 * 		/>
 * 	);
 * }
 * ```
 */


export function TreeSelect(_ref) {
  let {
    label,
    noOptionLabel,
    onChange,
    selectedId,
    tree = [],
    ...props
  } = _ref;
  const options = useMemo(() => {
    return [noOptionLabel && {
      value: '',
      label: noOptionLabel
    }, ...getSelectOptions(tree)].filter(option => !!option);
  }, [noOptionLabel, tree]);
  return createElement(SelectControl, _extends({
    label,
    options,
    onChange,
    value: selectedId
  }, props));
}
export default TreeSelect;
//# sourceMappingURL=index.js.map