wix-style-react
Version:
wix-style-react
231 lines (230 loc) • 9.75 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _LabelledElement = _interopRequireDefault(require("../LabelledElement/LabelledElement"));
var _Input = _interopRequireDefault(require("../Input"));
var _Text = _interopRequireDefault(require("../Text"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _InputWithLabelSt = require("./InputWithLabel.st.css");
var _dataHooks = _interopRequireDefault(require("./dataHooks"));
var _excluded = ["label", "suffix", "value", "dataHook", "status", "statusMessage", "onChange", "onFocus", "onBlur", "name", "type", "ariaLabel", "autoFocus", "autocomplete", "disabled", "className", "maxLength", "placeholder", "customInput", "border"],
_excluded2 = ["onChange", "onFocus", "onBlur", "className", "getPlaceholder"];
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/InputWithLabel/InputWithLabel.js";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var getSuffixContainer = suffix => suffix.map((item, index) => {
return /*#__PURE__*/_react.default.createElement("div", {
"data-hook": "suffix-container",
key: "suffix-container-".concat(index),
className: _InputWithLabelSt.classes.groupIcon,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 15,
columnNumber: 7
}
}, item);
});
var InputWithLabel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
var {
label,
suffix,
value,
dataHook,
status,
statusMessage = '',
onChange: _onChange,
onFocus: _onFocus,
onBlur: _onBlur,
name,
type,
ariaLabel,
autoFocus,
autocomplete,
disabled,
className,
maxLength,
placeholder,
customInput,
border
} = _ref,
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
var isBottomLineBorder = border === 'bottomLine';
var isWarning = status === _Input.default.StatusWarning;
var showStatusSection = (status === _Input.default.StatusError || isWarning) && statusMessage;
return /*#__PURE__*/_react.default.createElement("div", {
"data-hook": dataHook,
className: status ? undefined : _InputWithLabelSt.classes.statusMessagePlaceholder,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 57,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement(_LabelledElement.default, {
value: value,
label: label,
dataHook: _dataHooks.default.labelledElement,
topLabelGray: isBottomLineBorder,
disabled: disabled,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 61,
columnNumber: 9
}
}, _ref2 => {
var {
onChange: inputOnChange,
onFocus: inputOnFocus,
onBlur: inputOnBlur,
className: inputClassName,
getPlaceholder
} = _ref2,
restInputProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
return /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({
className: (0, _InputWithLabelSt.st)(_InputWithLabelSt.classes.root, inputClassName, className),
ref: ref,
name: name,
type: type,
ariaLabel: ariaLabel,
autoFocus: autoFocus,
autocomplete: autocomplete,
disabled: disabled,
maxLength: maxLength,
placeholder: getPlaceholder(placeholder),
onChange: e => {
inputOnChange(e);
_onChange == null || _onChange(e);
},
onFocus: e => {
inputOnFocus(e);
_onFocus == null || _onFocus(e);
},
onBlur: e => {
inputOnBlur(e);
_onBlur == null || _onBlur(e);
},
dataHook: _dataHooks.default.input,
size: "large",
value: value,
suffix: suffix && getSuffixContainer(suffix),
status: status,
statusMessage: /*#__PURE__*/_react.default.createElement("span", {
style: {
color: '#fff'
},
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 105,
columnNumber: 17
}
}, statusMessage),
customInput: customInput,
border: border,
hideStatusSuffix: true
}, rest, restInputProps, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 76,
columnNumber: 13
}
}));
}), showStatusSection && /*#__PURE__*/_react.default.createElement(_Text.default, {
skin: isWarning ? 'standard' : 'error',
size: "small",
weight: isWarning ? 'thin' : 'normal',
className: _InputWithLabelSt.classes.statusMessage,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 116,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement("span", {
className: (0, _InputWithLabelSt.st)(_InputWithLabelSt.classes.statusMessageIcon, {
warning: isWarning
}),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 122,
columnNumber: 13
}
}, isWarning ? /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.StatusWarningSmall, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 125,
columnNumber: 28
}
}) : /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.StatusAlertSmall, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 125,
columnNumber: 53
}
})), /*#__PURE__*/_react.default.createElement("span", {
"data-hook": _dataHooks.default.errorMessage,
className: _InputWithLabelSt.classes.errorMessageContent,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 127,
columnNumber: 13
}
}, statusMessage)));
});
InputWithLabel.propTypes = _objectSpread(_objectSpread({}, _Input.default.propTypes), {}, {
/** Sets a default value for those who want to use this component uncontrolled */
dataHook: _propTypes.default.string,
/** Pass a component you want to show as the suffix of the input, e.g., text string, icon. */
suffix: _propTypes.default.arrayOf(_propTypes.default.element),
/** Sets the field label */
label: _propTypes.default.string,
/** Sets input value */
value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/** Specifies the status of a field */
status: _propTypes.default.oneOf(['error', 'warning', 'loading']),
/** Defines the message displayed when you hover over the status icon. If not given or empty there will be no tooltip. */
statusMessage: _propTypes.default.node,
/** Defines a standard input onFocus callback */
onFocus: _propTypes.default.func,
/** Defines a standard input onBlur callback */
onBlur: _propTypes.default.func,
/** Defines a standard input onChange callback */
onChange: _propTypes.default.func,
/** Reference element data when a form is submitted */
name: _propTypes.default.string,
/** Specifies the type of `<input/>` element to display. Default is text string. */
type: _propTypes.default.string,
/** Define a string that labels the current element in case where a text label is not visible on the screen */
ariaLabel: _propTypes.default.string,
/** Focus the element on mount (standard React input autoFocus). */
autoFocus: _propTypes.default.bool,
/** Sets the value of native autocomplete attribute (consult the [HTML spec](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-autocomplete) for possible values) */
autocomplete: _propTypes.default.string,
/** Specifies whether the input should be disabled or not */
disabled: _propTypes.default.bool,
/** Specifies a CSS class name to be appended to the component’s root element */
className: _propTypes.default.string,
/** Sets the maximum number of characters that can be entered into a field */
maxLength: _propTypes.default.number,
/** Sets a placeholder message to display */
placeholder: _propTypes.default.string,
/** Render a custom input component instead of the default html input tag */
customInput: _propTypes.default.elementType ? _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node, _propTypes.default.elementType]) : _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
/** Sets the border type */
border: _propTypes.default.oneOf(['standard', 'bottomLine'])
});
var _default = exports.default = InputWithLabel;
//# sourceMappingURL=InputWithLabel.js.map