@wordpress/block-library
Version:
Block library for the WordPress editor.
148 lines (147 loc) • 4.68 kB
JavaScript
/**
* 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