UNPKG

@wordpress/block-library

Version:
148 lines (147 loc) 4.68 kB
/** * WordPress dependencies */ import { __ } from '@wordpress/i18n'; import { InspectorControls } from '@wordpress/block-editor'; import { TextControl, PanelBody, ToggleControl, SelectControl, __experimentalToolsPanel as ToolsPanel, __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components'; import { Platform } from '@wordpress/element'; /** * Internal dependencies */ import { useToolsPanelDropdownMenuProps } from '../utils/hooks'; import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; const LIST_STYLE_OPTIONS = [{ label: __('Numbers'), value: 'decimal' }, { label: __('Uppercase letters'), value: 'upper-alpha' }, { label: __('Lowercase letters'), value: 'lower-alpha' }, { label: __('Uppercase Roman numerals'), value: 'upper-roman' }, { label: __('Lowercase Roman numerals'), value: 'lower-roman' }]; const OrderedListSettings = ({ setAttributes, reversed, start, type }) => { const dropdownMenuProps = useToolsPanelDropdownMenuProps(); return /*#__PURE__*/_jsx(InspectorControls, { children: Platform.isNative ? /*#__PURE__*/_jsxs(PanelBody, { title: __('Settings'), children: [/*#__PURE__*/_jsx(SelectControl, { __next40pxDefaultSize: true, __nextHasNoMarginBottom: true, label: __('List style'), options: LIST_STYLE_OPTIONS, value: type, onChange: newValue => setAttributes({ type: newValue }) }), /*#__PURE__*/_jsx(TextControl, { __next40pxDefaultSize: true, __nextHasNoMarginBottom: true, label: __('Start value'), type: "number", onChange: value => { const int = parseInt(value, 10); setAttributes({ // It should be possible to unset the value, // e.g. with an empty string. start: isNaN(int) ? undefined : int }); }, value: Number.isInteger(start) ? start.toString(10) : '', step: "1" }), /*#__PURE__*/_jsx(ToggleControl, { __nextHasNoMarginBottom: true, label: __('Reverse order'), checked: reversed || false, onChange: value => { setAttributes({ // Unset the attribute if not reversed. reversed: value || undefined }); } })] }) : /*#__PURE__*/_jsxs(ToolsPanel, { label: __('Settings'), resetAll: () => { setAttributes({ type: undefined, start: undefined, reversed: undefined }); }, dropdownMenuProps: dropdownMenuProps, children: [/*#__PURE__*/_jsx(ToolsPanelItem, { label: __('List style'), isShownByDefault: true, hasValue: () => !!type, onDeselect: () => setAttributes({ type: undefined }), children: /*#__PURE__*/_jsx(SelectControl, { __next40pxDefaultSize: true, __nextHasNoMarginBottom: true, label: __('List style'), options: LIST_STYLE_OPTIONS, value: type || 'decimal', onChange: newValue => setAttributes({ type: newValue }) }) }), /*#__PURE__*/_jsx(ToolsPanelItem, { label: __('Start value'), isShownByDefault: true, hasValue: () => !!start, onDeselect: () => setAttributes({ start: undefined }), children: /*#__PURE__*/_jsx(TextControl, { __next40pxDefaultSize: true, __nextHasNoMarginBottom: true, label: __('Start value'), type: "number", onChange: value => { const int = parseInt(value, 10); setAttributes({ // It should be possible to unset the value, // e.g. with an empty string. start: isNaN(int) ? undefined : int }); }, value: Number.isInteger(start) ? start.toString(10) : '', step: "1" }) }), /*#__PURE__*/_jsx(ToolsPanelItem, { label: __('Reverse order'), isShownByDefault: true, hasValue: () => !!reversed, onDeselect: () => setAttributes({ reversed: undefined }), children: /*#__PURE__*/_jsx(ToggleControl, { __nextHasNoMarginBottom: true, label: __('Reverse order'), checked: reversed || false, onChange: value => { setAttributes({ // Unset the attribute if not reversed. reversed: value || undefined }); } }) })] }) }); }; export default OrderedListSettings; //# sourceMappingURL=ordered-list-settings.js.map