@wordpress/components
Version:
UI components for WordPress.
8 lines (7 loc) • 4.06 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../src/tree-select/index.tsx"],
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { decodeEntities } from '@wordpress/html-entities';\n\n/**\n * Internal dependencies\n */\nimport { SelectControl } from '../select-control';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction getSelectOptions(tree, level = 0) {\n return tree.flatMap(treeNode => [{\n value: treeNode.id,\n label: '\\u00A0'.repeat(level * 3) + decodeEntities(treeNode.name)\n }, ...getSelectOptions(treeNode.children || [], level + 1)]);\n}\n\n/**\n * Generates a hierarchical select input.\n *\n * ```jsx\n * import { useState } from 'react';\n * import { TreeSelect } from '@wordpress/components';\n *\n * const MyTreeSelect = () => {\n * \tconst [ page, setPage ] = useState( 'p21' );\n *\n * \treturn (\n * \t\t<TreeSelect\n * \t\t\t__next40pxDefaultSize\n * \t\t\tlabel=\"Parent page\"\n * \t\t\tnoOptionLabel=\"No parent page\"\n * \t\t\tonChange={ ( newPage ) => setPage( newPage ) }\n * \t\t\tselectedId={ page }\n * \t\t\ttree={ [\n * \t\t\t\t{\n * \t\t\t\t\tname: 'Page 1',\n * \t\t\t\t\tid: 'p1',\n * \t\t\t\t\tchildren: [\n * \t\t\t\t\t\t{ name: 'Descend 1 of page 1', id: 'p11' },\n * \t\t\t\t\t\t{ name: 'Descend 2 of page 1', id: 'p12' },\n * \t\t\t\t\t],\n * \t\t\t\t},\n * \t\t\t\t{\n * \t\t\t\t\tname: 'Page 2',\n * \t\t\t\t\tid: 'p2',\n * \t\t\t\t\tchildren: [\n * \t\t\t\t\t\t{\n * \t\t\t\t\t\t\tname: 'Descend 1 of page 2',\n * \t\t\t\t\t\t\tid: 'p21',\n * \t\t\t\t\t\t\tchildren: [\n * \t\t\t\t\t\t\t\t{\n * \t\t\t\t\t\t\t\t\tname: 'Descend 1 of Descend 1 of page 2',\n * \t\t\t\t\t\t\t\t\tid: 'p211',\n * \t\t\t\t\t\t\t\t},\n * \t\t\t\t\t\t\t],\n * \t\t\t\t\t\t},\n * \t\t\t\t\t],\n * \t\t\t\t},\n * \t\t\t] }\n * \t\t/>\n * \t);\n * }\n * ```\n */\nexport function TreeSelect(props) {\n const {\n __nextHasNoMarginBottom: _,\n // Prevent passing to internal component\n label,\n noOptionLabel,\n onChange,\n selectedId,\n tree = [],\n ...restProps\n } = useDeprecated36pxDefaultSizeProp(props);\n const options = useMemo(() => {\n return [noOptionLabel && {\n value: '',\n label: noOptionLabel\n }, ...getSelectOptions(tree)].filter(option => !!option);\n }, [noOptionLabel, tree]);\n maybeWarnDeprecated36pxSize({\n componentName: 'TreeSelect',\n size: restProps.size,\n __next40pxDefaultSize: restProps.__next40pxDefaultSize\n });\n return (\n /*#__PURE__*/\n // Disable reason: the parent component already takes case of the `__next40pxDefaultSize` prop.\n // eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop\n _jsx(SelectControl, {\n __shouldNotWarnDeprecated36pxSize: true,\n label,\n options,\n onChange,\n value: selectedId,\n ...restProps\n })\n );\n}\nexport default TreeSelect;"],
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAwB;AACxB,2BAA+B;AAK/B,4BAA8B;AAC9B,kCAAiD;AACjD,kCAA4C;AAC5C,yBAA4B;AAC5B,SAAS,iBAAiB,MAAM,QAAQ,GAAG;AACzC,SAAO,KAAK,QAAQ,cAAY,CAAC;AAAA,IAC/B,OAAO,SAAS;AAAA,IAChB,OAAO,OAAS,OAAO,QAAQ,CAAC,QAAI,qCAAe,SAAS,IAAI;AAAA,EAClE,GAAG,GAAG,iBAAiB,SAAS,YAAY,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;AAC7D;AAkDO,SAAS,WAAW,OAAO;AAChC,QAAM;AAAA,IACJ,yBAAyB;AAAA;AAAA,IAEzB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,CAAC;AAAA,IACR,GAAG;AAAA,EACL,QAAI,8DAAiC,KAAK;AAC1C,QAAM,cAAU,wBAAQ,MAAM;AAC5B,WAAO,CAAC,iBAAiB;AAAA,MACvB,OAAO;AAAA,MACP,OAAO;AAAA,IACT,GAAG,GAAG,iBAAiB,IAAI,CAAC,EAAE,OAAO,YAAU,CAAC,CAAC,MAAM;AAAA,EACzD,GAAG,CAAC,eAAe,IAAI,CAAC;AACxB,+DAA4B;AAAA,IAC1B,eAAe;AAAA,IACf,MAAM,UAAU;AAAA,IAChB,uBAAuB,UAAU;AAAA,EACnC,CAAC;AACD;AAAA;AAAA;AAAA,IAIE,uCAAAA,KAAK,qCAAe;AAAA,MAClB,mCAAmC;AAAA,MACnC;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP,GAAG;AAAA,IACL,CAAC;AAAA;AAEL;AACA,IAAO,sBAAQ;",
"names": ["_jsx"]
}