@woocommerce/components
Version:
UI components for WooCommerce.
113 lines (112 loc) • 4.58 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
/**
* External dependencies
*/
const element_1 = require("@wordpress/element");
const compose_1 = require("@wordpress/compose");
const prop_types_1 = __importDefault(require("prop-types"));
const components_1 = require("@wordpress/components");
const clsx_1 = __importDefault(require("clsx"));
/**
* This component is essentially a wrapper (really a reimplementation) around the
* TextControl component that adds support for affixes, i.e. the ability to display
* a fixed part either at the beginning or at the end of the text input.
*/
class TextControlWithAffixes extends element_1.Component {
constructor(props) {
super(props);
this.state = {
isFocused: false,
};
}
handleFocusOutside() {
this.setState({ isFocused: false });
}
handleOnClick(event, onClick) {
this.setState({ isFocused: true });
if (typeof onClick === 'function') {
onClick(event);
}
}
render() {
const { label, value, help, className, instanceId, onChange, onClick, prefix, suffix, type, disabled, ...props } = this.props;
const { isFocused } = this.state;
const id = `inspector-text-control-with-affixes-${instanceId}`;
const onChangeValue = (event) => onChange(event.target.value);
const describedby = [];
if (help) {
describedby.push(`${id}__help`);
}
if (prefix) {
describedby.push(`${id}__prefix`);
}
if (suffix) {
describedby.push(`${id}__suffix`);
}
const baseControlClasses = (0, clsx_1.default)(className, {
'with-value': value !== '',
empty: value === '',
active: isFocused && !disabled,
});
const affixesClasses = (0, clsx_1.default)('text-control-with-affixes', {
'text-control-with-prefix': prefix,
'text-control-with-suffix': suffix,
disabled,
});
return ((0, element_1.createElement)(components_1.BaseControl, { label: label, id: id, help: help, className: baseControlClasses, onClick: (event) => this.handleOnClick(event, onClick) },
(0, element_1.createElement)("div", { className: affixesClasses },
prefix && ((0, element_1.createElement)("span", { id: `${id}__prefix`, className: "text-control-with-affixes__prefix" }, prefix)),
(0, element_1.createElement)("input", { className: "components-text-control__input", type: type, id: id, value: value, onChange: onChangeValue, "aria-describedby": describedby.join(' '), disabled: disabled, onFocus: () => this.setState({ isFocused: true }), ...props }),
suffix && ((0, element_1.createElement)("span", { id: `${id}__suffix`, className: "text-control-with-affixes__suffix" }, suffix)))));
}
}
TextControlWithAffixes.defaultProps = {
type: 'text',
};
TextControlWithAffixes.propTypes = {
/**
* If this property is added, a label will be generated using label property as the content.
*/
label: prop_types_1.default.string,
/**
* If this property is added, a help text will be generated using help property as the content.
*/
help: prop_types_1.default.string,
/**
* Type of the input element to render. Defaults to "text".
*/
type: prop_types_1.default.string,
/**
* The current value of the input.
*/
value: prop_types_1.default.string.isRequired,
/**
* The class that will be added with "components-base-control" to the classes of the wrapper div.
* If no className is passed only components-base-control is used.
*/
className: prop_types_1.default.string,
/**
* A function that receives the value of the input.
*/
onChange: prop_types_1.default.func.isRequired,
/**
* Markup to be inserted at the beginning of the input.
*/
prefix: prop_types_1.default.node,
/**
* Markup to be appended at the end of the input.
*/
suffix: prop_types_1.default.node,
/**
* Whether or not the input is disabled.
*/
disabled: prop_types_1.default.bool,
};
exports.default = (0, compose_1.compose)([
compose_1.withInstanceId,
components_1.withFocusOutside, // this MUST be the innermost HOC as it calls handleFocusOutside
])(TextControlWithAffixes);