@wordpress/components
Version:
UI components for WordPress.
129 lines (124 loc) • 4.47 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DimensionControl = DimensionControl;
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _i18n = require("@wordpress/i18n");
var _icon = _interopRequireDefault(require("../icon"));
var _selectControl = _interopRequireDefault(require("../select-control"));
var _sizes = _interopRequireWildcard(require("./sizes"));
var _context = require("../context");
var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
var _deprecated36pxSize = require("../utils/deprecated-36px-size");
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const CONTEXT_VALUE = {
BaseControl: {
// Temporary during deprecation grace period: Overrides the underlying `__associatedWPComponentName`
// via the context system to override the value set by SelectControl.
_overrides: {
__associatedWPComponentName: 'DimensionControl'
}
}
};
/**
* `DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions.
*
* @deprecated
*
* ```jsx
* import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';
* import { useState } from '@wordpress/element';
*
* export default function MyCustomDimensionControl() {
* const [ paddingSize, setPaddingSize ] = useState( '' );
*
* return (
* <DimensionControl
* __next40pxDefaultSize
* __nextHasNoMarginBottom
* label={ 'Padding' }
* icon={ 'desktop' }
* onChange={ ( value ) => setPaddingSize( value ) }
* value={ paddingSize }
* />
* );
* }
* ```
*/
function DimensionControl(props) {
const {
__next40pxDefaultSize = false,
__nextHasNoMarginBottom = false,
label,
value,
sizes = _sizes.default,
icon,
onChange,
className = ''
} = props;
(0, _deprecated.default)('wp.components.DimensionControl', {
since: '6.7',
version: '7.0'
});
(0, _deprecated36pxSize.maybeWarnDeprecated36pxSize)({
componentName: 'DimensionControl',
__next40pxDefaultSize,
size: undefined
});
const onChangeSpacingSize = val => {
const theSize = (0, _sizes.findSizeBySlug)(sizes, val);
if (!theSize || value === theSize.slug) {
onChange?.(undefined);
} else if (typeof onChange === 'function') {
onChange(theSize.slug);
}
};
const formatSizesAsOptions = theSizes => {
const options = theSizes.map(({
name,
slug
}) => ({
label: name,
value: slug
}));
return [{
label: (0, _i18n.__)('Default'),
value: ''
}, ...options];
};
const selectLabel = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.default, {
icon: icon
}), label]
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.ContextSystemProvider, {
value: CONTEXT_VALUE,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectControl.default, {
__next40pxDefaultSize: __next40pxDefaultSize,
__shouldNotWarnDeprecated36pxSize: true,
__nextHasNoMarginBottom: __nextHasNoMarginBottom,
className: (0, _clsx.default)(className, 'block-editor-dimension-control'),
label: selectLabel,
hideLabelFromVision: false,
value: value,
onChange: onChangeSpacingSize,
options: formatSizesAsOptions(sizes)
})
});
}
var _default = exports.default = DimensionControl;
//# sourceMappingURL=index.js.map