@wix/design-system
Version:
@wix/design-system
438 lines (433 loc) • 16.2 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = exports.Input = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _InputSt = require("./Input.st.css.js");
var _InputContext = require("./InputContext");
var _StatusIndicator = require("../StatusIndicator/StatusIndicator.constants");
var _Input = require("./Input.constants");
var _Ticker = _interopRequireDefault(require("./components/Ticker"));
var _IconAffix = _interopRequireDefault(require("./components/IconAffix"));
var _Affix = _interopRequireDefault(require("./components/Affix"));
var _Group = _interopRequireDefault(require("./components/Group"));
var _context = require("../WixStyleReactMaskingProvider/context");
var _WixStyleReactDefaultsOverrideProvider = require("../WixStyleReactDefaultsOverrideProvider");
var _StatusContext = require("../FormField/StatusContext");
var _useAutoFocusAndSelect = require("./hooks/useAutoFocusAndSelect");
var _transformAriaKebabCase = require("./utils/transformAriaKebabCase");
var _Suffix = require("./components/Suffix/Suffix");
var _excluded = ["role", "autoSelect", "textOverflow", "size", "hideStatusSuffix", "clearButton", "focusOnClearClick", "border", "maxLength", "autoFocus", "onFocus", "onBlur", "value", "customInput", "min", "max", "step", "inputRef", "id", "name", "disabled", "defaultValue", "onChange", "type", "onKeyDown", "onEnterPressed", "onEscapePressed", "onPaste", "onCopy", "placeholder", "tabIndex", "onInputClicked", "onKeyUp", "readOnly", "disableEditing", "required", "autocomplete", "onCompositionChange", "pattern", "prefix", "suffix", "className", "status", "statusMessage", "onClear", "menuArrow", "rtl", "dataHook", "forceFocus", "noRightBorderRadius", "noLeftBorderRadius", "forceHover", "tooltipPlacement", "clearButtonTooltipContent", "clearButtonTooltipProps", "clearButtonAriaLabel", "statusMessageTooltipProps"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Input/Input.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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 Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
var {
input: inputPropsDefaults
} = (0, _react.useContext)(_WixStyleReactDefaultsOverrideProvider.WixStyleReactDefaultsOverrideContext);
var {
role,
autoSelect = true,
textOverflow = 'clip',
size = inputPropsDefaults.size,
hideStatusSuffix = false,
clearButton = false,
focusOnClearClick = true,
border = 'standard',
maxLength = 524288,
autoFocus,
onFocus,
onBlur,
value,
customInput,
min,
max,
step,
inputRef,
id,
name,
disabled,
defaultValue,
onChange,
type,
onKeyDown,
onEnterPressed,
onEscapePressed,
onPaste,
onCopy,
placeholder,
tabIndex,
onInputClicked,
onKeyUp,
readOnly,
disableEditing,
required,
autocomplete,
onCompositionChange,
pattern,
prefix,
suffix,
className,
status,
statusMessage,
onClear,
menuArrow,
rtl,
dataHook,
forceFocus,
noRightBorderRadius,
noLeftBorderRadius,
forceHover,
tooltipPlacement,
clearButtonTooltipContent,
clearButtonTooltipProps,
clearButtonAriaLabel,
statusMessageTooltipProps
} = props,
rest = (0, _objectWithoutProperties2.default)(props, _excluded);
var isComposing = (0, _react.useRef)(false);
var localInputRef = (0, _react.useRef)(null);
var {
maskingClassNames
} = (0, _react.useContext)(_context.WixStyleReactMaskingContext);
var statusContext = (0, _react.useContext)(_StatusContext.StatusContext);
var {
_onFocus,
_onBlur,
isFocused
} = (0, _useAutoFocusAndSelect.useAutoFocusAndSelect)({
localInputRef,
onFocus,
onBlur,
autoFocus,
autoSelect,
value
});
(0, _react.useImperativeHandle)(ref, () => ({
/**
* Sets focus on the input element
*/
focus: function focus() {
var _localInputRef$curren;
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
return (_localInputRef$curren = localInputRef.current) == null ? void 0 : _localInputRef$curren.focus(options);
},
/**
* Removes focus from the input element
*/
blur: () => {
var _localInputRef$curren2;
return (_localInputRef$curren2 = localInputRef.current) == null ? void 0 : _localInputRef$curren2.blur();
},
/**
* Selects the text in the input element
*/
select: () => {
var _localInputRef$curren3;
return (_localInputRef$curren3 = localInputRef.current) == null ? void 0 : _localInputRef$curren3.select();
},
/**
* Sets the start and end positions of the current text selection in the input element
*/
setSelectionRange: (start, end) => {
var _localInputRef$curren4;
return (_localInputRef$curren4 = localInputRef.current) == null ? void 0 : _localInputRef$curren4.setSelectionRange(start, end);
},
/**
* Clears the input value
*/
clear: event => {
// If the value is undefined, we are dealing with an uncontrolled input
if (value === undefined && localInputRef.current) {
localInputRef.current.value = '';
}
onClear == null || onClear(event);
},
/**
* Gets the input DOM element.
*/
input: localInputRef.current
}));
/**
* Legacy reason to still support inputRef prop as prop.
*/
(0, _react.useEffect)(() => {
if (inputRef && localInputRef.current) {
inputRef(localInputRef.current);
}
}, [inputRef]);
var isValid = (0, _react.useCallback)(val => {
if (type === 'number') {
/*
* Limit our number input to contain only:
* - \d - digits
* - . - a dot
* - , - a comma
* - \- - a hyphen minus
* - + - a plus sign
*/
return /^[\d.,\-+]*$/.test(val);
}
return true;
}, [type]);
var _onChange = (0, _react.useCallback)(event => {
if (isValid(event.target.value)) {
onChange == null || onChange(event);
}
}, [isValid, onChange]);
var _onKeyPress = (0, _react.useCallback)(event => {
if (!isValid(event.currentTarget.value + event.key)) {
event.preventDefault();
}
}, [isValid]);
var _onWheel = (0, _react.useCallback)(() => {
if (type === 'number') {
var _localInputRef$curren5;
(_localInputRef$curren5 = localInputRef.current) == null || _localInputRef$curren5.blur();
}
}, [type]);
var _onKeyDown = (0, _react.useCallback)(event => {
if (isComposing.current) {
return;
}
// On key event
onKeyDown == null || onKeyDown(event);
// Enter
if (event.key === 'Enter' || event.keyCode === 13) {
onEnterPressed == null || onEnterPressed(event);
}
// Escape
if (event.key === 'Escape' || event.keyCode === 27) {
onEscapePressed == null || onEscapePressed(event);
}
}, [isComposing, onEnterPressed, onEscapePressed, onKeyDown]);
var _onClick = (0, _react.useCallback)(event => onInputClicked == null ? void 0 : onInputClicked(event), [onInputClicked]);
var _onCompositionChange = (0, _react.useCallback)(composing => {
isComposing.current = composing;
onCompositionChange == null || onCompositionChange(composing);
}, [onCompositionChange]);
var commonProps = _objectSpread(_objectSpread({
role,
id,
min,
max,
step,
'data-mask': !!maskingClassNames,
className: (0, _InputSt.st)(_InputSt.classes.input, {}, maskingClassNames),
style: {
textOverflow
},
name,
disabled,
defaultValue,
value,
onFocus: _onFocus,
onBlur: _onBlur,
onChange: _onChange,
onKeyPress: _onKeyPress,
onWheel: _onWheel,
onKeyDown: _onKeyDown,
onClick: _onClick,
onPaste,
onCopy,
placeholder,
tabIndex,
onKeyUp,
readOnly: readOnly || disableEditing,
type,
required,
autoComplete: autocomplete,
onCompositionStart: () => _onCompositionChange(true),
onCompositionEnd: () => _onCompositionChange(false),
pattern,
maxLength
}, (0, _StatusContext.getAriaAttributesFromContext)(statusContext)), (0, _transformAriaKebabCase.transformAriaKebabCase)(rest));
var CustomInputComponent = customInput;
var inputElement = customInput ? /*#__PURE__*/_react.default.createElement(CustomInputComponent, (0, _extends2.default)({
"data-hook": "wsr-custom-input",
ref: localInputRef
}, commonProps, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 279,
columnNumber: 7
}
})) : /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
"data-hook": "wsr-input",
ref: localInputRef
}, commonProps, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 285,
columnNumber: 7
}
}));
var dataAttributes = {
[_Input.DATA_ATTR.ROOT]: true,
[_Input.DATA_ATTR.SIZE]: size,
[_Input.DATA_ATTR.STATUS]: (0, _StatusContext.getStatusFromContext)(statusContext, status),
[_Input.DATA_ATTR.PREFIX]: !!prefix,
[_Input.DATA_ATTR.DISABLED]: disabled,
[_Input.DATA_ATTR.HOVER]: forceHover,
[_Input.DATA_ATTR.FOCUS]: forceFocus || isFocused,
[_Input.DATA_ATTR.LEFTBORDERRADIUS]: noLeftBorderRadius,
[_Input.DATA_ATTR.RIGHTBORDERRADIUS]: noRightBorderRadius
};
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
className: (0, _InputSt.st)(_InputSt.classes.root, {
size,
hasFocus: forceFocus || isFocused,
status: (0, _StatusContext.getStatusFromContext)(statusContext, status),
forceHover,
readOnly,
disabled,
border,
noRightBorderRadius,
noLeftBorderRadius
}, className),
dir: rtl ? 'rtl' : undefined,
"data-hook": dataHook
}, dataAttributes, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 301,
columnNumber: 7
}
}), /*#__PURE__*/_react.default.createElement("div", {
className: _InputSt.classes.wrapper,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 321,
columnNumber: 9
}
}, prefix && /*#__PURE__*/_react.default.createElement(_InputContext.InputContext.Provider, {
value: _objectSpread(_objectSpread({}, props), {}, {
size,
inPrefix: true
}),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 323,
columnNumber: 13
}
}, prefix), inputElement, /*#__PURE__*/_react.default.createElement(_InputContext.InputContext.Provider, {
value: _objectSpread(_objectSpread({}, props), {}, {
size,
inSuffix: true
}),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 330,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement(_Suffix.Suffix, {
statusMessage: statusMessage,
status: status,
disabled: disabled,
menuArrow: menuArrow,
suffix: suffix,
tooltipPlacement: tooltipPlacement,
clearButtonTooltipContent: clearButtonTooltipContent,
clearButtonTooltipProps: clearButtonTooltipProps,
clearButtonAriaLabel: clearButtonAriaLabel,
statusMessageTooltipProps: statusMessageTooltipProps,
hideStatusSuffix: hideStatusSuffix,
onClear: onClear,
clearButton: clearButton,
value: value,
size: size,
onInputClicked: onInputClicked,
focusOnClearClick: focusOnClearClick,
inputElementRef: localInputRef,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 331,
columnNumber: 13
}
}))));
});
Input.propTypes = {
role: _propTypes.default.any,
dataHook: _propTypes.default.any,
className: _propTypes.default.any,
id: _propTypes.default.any,
ariaControls: _propTypes.default.any,
ariaDescribedby: _propTypes.default.any,
ariaLabel: _propTypes.default.any,
autoFocus: _propTypes.default.any,
autocomplete: _propTypes.default.any,
defaultValue: _propTypes.default.any,
disabled: _propTypes.default.any,
status: _propTypes.default.any,
statusMessage: _propTypes.default.any,
hideStatusSuffix: _propTypes.default.any,
forceFocus: _propTypes.default.any,
forceHover: _propTypes.default.any,
maxLength: _propTypes.default.any,
menuArrow: _propTypes.default.any,
clearButton: _propTypes.default.any,
name: _propTypes.default.any,
border: _propTypes.default.any,
noLeftBorderRadius: _propTypes.default.any,
noRightBorderRadius: _propTypes.default.any,
onBlur: _propTypes.default.any,
onChange: _propTypes.default.any,
onClear: _propTypes.default.any,
onCompositionChange: _propTypes.default.any,
onEnterPressed: _propTypes.default.any,
onEscapePressed: _propTypes.default.any,
onFocus: _propTypes.default.any,
onInputClicked: _propTypes.default.any,
onKeyDown: _propTypes.default.any,
onKeyUp: _propTypes.default.any,
onPaste: _propTypes.default.any,
onCopy: _propTypes.default.any,
placeholder: _propTypes.default.any,
prefix: _propTypes.default.any,
readOnly: _propTypes.default.any,
disableEditing: _propTypes.default.any,
size: _propTypes.default.any,
suffix: _propTypes.default.any,
tabIndex: _propTypes.default.any,
textOverflow: _propTypes.default.any,
/**
* @deprecated use statusMessageTooltipProps instead
*/
tooltipPlacement: _propTypes.default.any,
type: _propTypes.default.any,
value: _propTypes.default.any,
required: _propTypes.default.any,
min: _propTypes.default.any,
max: _propTypes.default.any,
step: _propTypes.default.any,
customInput: _propTypes.default.any,
pattern: _propTypes.default.any,
focusOnClearClick: _propTypes.default.any,
clearButtonTooltipContent: _propTypes.default.any,
clearButtonTooltipProps: _propTypes.default.any,
clearButtonAriaLabel: _propTypes.default.any,
statusMessageTooltipProps: _propTypes.default.any
};
Input.displayName = 'Input';
var _default = exports.default = Object.assign(Input, {
Ticker: _Ticker.default,
IconAffix: _IconAffix.default,
Affix: _Affix.default,
Group: _Group.default,
StatusError: _StatusIndicator.STATUS.ERROR,
StatusWarning: _StatusIndicator.STATUS.WARNING,
StatusLoading: _StatusIndicator.STATUS.LOADING
});
//# sourceMappingURL=Input.js.map