@wordpress/components
Version:
UI components for WordPress.
129 lines (123 loc) • 4.07 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _compose = require("@wordpress/compose");
var _element = require("@wordpress/element");
var _backdrop = _interopRequireDefault(require("./backdrop"));
var _label = _interopRequireDefault(require("./label"));
var _inputControlStyles = require("./styles/input-control-styles");
var _context = require("../context");
var _useDeprecatedProps = require("../utils/use-deprecated-props");
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function useUniqueId(idProp) {
const instanceId = (0, _compose.useInstanceId)(InputBase);
const id = `input-base-control-${instanceId}`;
return idProp || id;
}
// Adapter to map props for the new ui/flex component.
function getUIFlexProps(labelPosition) {
const props = {};
switch (labelPosition) {
case 'top':
props.direction = 'column';
props.expanded = false;
props.gap = 0;
break;
case 'bottom':
props.direction = 'column-reverse';
props.expanded = false;
props.gap = 0;
break;
case 'edge':
props.justify = 'space-between';
break;
}
return props;
}
function InputBase(props, ref) {
const {
__next40pxDefaultSize,
__unstableInputWidth,
children,
className,
disabled = false,
hideLabelFromVision = false,
labelPosition,
id: idProp,
isBorderless = false,
label,
prefix,
size = 'default',
suffix,
...restProps
} = (0, _useDeprecatedProps.useDeprecated36pxDefaultSizeProp)((0, _context.useContextSystem)(props, 'InputBase'));
const id = useUniqueId(idProp);
const hideLabel = hideLabelFromVision || !label;
const prefixSuffixContextValue = (0, _element.useMemo)(() => {
return {
InputControlPrefixWrapper: {
__next40pxDefaultSize,
size
},
InputControlSuffixWrapper: {
__next40pxDefaultSize,
size
}
};
}, [__next40pxDefaultSize, size]);
return (
/*#__PURE__*/
// @ts-expect-error The `direction` prop from Flex (FlexDirection) conflicts with legacy SVGAttributes `direction` (string) that come from React intrinsic prop definitions.
(0, _jsxRuntime.jsxs)(_inputControlStyles.Root, {
...restProps,
...getUIFlexProps(labelPosition),
className: className,
gap: 2,
ref: ref,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_label.default, {
className: "components-input-control__label",
hideLabelFromVision: hideLabelFromVision,
labelPosition: labelPosition,
htmlFor: id,
children: label
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_inputControlStyles.Container, {
__unstableInputWidth: __unstableInputWidth,
className: "components-input-control__container",
disabled: disabled,
hideLabel: hideLabel,
labelPosition: labelPosition,
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_context.ContextSystemProvider, {
value: prefixSuffixContextValue,
children: [prefix && /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputControlStyles.Prefix, {
className: "components-input-control__prefix",
children: prefix
}), children, suffix && /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputControlStyles.Suffix, {
className: "components-input-control__suffix",
children: suffix
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_backdrop.default, {
disabled: disabled,
isBorderless: isBorderless
})]
})]
})
);
}
/**
* `InputBase` is an internal component used to style the standard borders for an input,
* as well as handle the layout for prefix/suffix elements.
*/
var _default = exports.default = (0, _context.contextConnect)(InputBase, 'InputBase');
//# sourceMappingURL=input-base.js.map