@momentum-ui/react-collaboration
Version:
Cisco Momentum UI Framework for React Collaboration Applications
302 lines • 14.5 kB
JavaScript
/** @component input */
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React from 'react';
import PropTypes from 'prop-types';
import omit from 'lodash/omit';
import toLower from 'lodash/toLower';
import { Icon } from '@momentum-ui/react-collaboration';
import InputHelper from '../InputHelper';
import InputMessage from '../InputMessage';
import InputSection from '../InputSection';
import Label from '../Label';
import IconNext from '../../components/Icon';
var determineMessageType = function (array) {
return array.reduce(function (agg, e) {
return agg === 'error' ? agg : e.type || '';
}, '');
};
var filterMessagesByType = function (array, value) {
return array.reduce(function (agg, e) { return (e.type === value ? agg.concat(e.message) : agg); }, []);
};
/** Text input with integrated label to enforce consistency in layout, error display, label placement, and required field marker. */
/**
* @deprecated - Components in the legacy folder (/src/legacy) are deprecated. Please use a component from the components folder (/src/components) instead. Legacy components may not follow accessibility standards.
**/
var Input = /** @class */ (function (_super) {
__extends(Input, _super);
function Input() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
isEditing: false,
value: _this.props.value || _this.props.defaultValue,
};
_this.setValue = function (value) {
_this.setState({
value: value,
});
};
_this.handleKeyDown = function (e) {
var onKeyDown = _this.props.onKeyDown;
onKeyDown && onKeyDown(e);
};
_this.handleFocus = function (e) {
var _a = _this.props, onFocus = _a.onFocus, disabled = _a.disabled;
if (disabled) {
e.stopPropagation();
return;
}
if (onFocus) {
onFocus(e);
}
_this.setState({
isEditing: true,
});
};
_this.handleMouseDown = function (e) {
var _a = _this.props, onMouseDown = _a.onMouseDown, disabled = _a.disabled;
if (disabled) {
e.stopPropagation();
return;
}
if (onMouseDown) {
onMouseDown(e);
}
_this.setState({
isEditing: true,
});
};
_this.handleChange = function (e) {
var onChange = _this.props.onChange;
var value = e.target.value;
e.persist();
_this.setState(function () {
onChange && onChange(e);
return { value: value };
});
};
_this.handleBlur = function (e) {
var onDoneEditing = _this.props.onDoneEditing;
var value = e.target.value;
if (e.which === 27 || e.which === 13 || e.type === 'blur') {
_this.setState({ isEditing: false }, function () { return onDoneEditing && onDoneEditing(e, value); });
}
e.stopPropagation();
};
_this.handleClear = function (e) {
var value = '';
e.target.value = value;
e.persist();
_this.input.focus();
_this.handleChange(e);
};
_this.setInputRef = function (input) {
var _a = _this.props, clear = _a.clear, inputRef = _a.inputRef;
if (clear)
_this.input = input;
if (inputRef)
return inputRef(input);
};
return _this;
}
Input.prototype.componentDidUpdate = function (prevProps) {
var value = this.props.value;
value !== prevProps.value && this.setValue(value);
};
Input.prototype.render = function () {
var _this = this;
var _a = this.props, ariaDescribedBy = _a.ariaDescribedBy, ariaLabel = _a.ariaLabel, className = _a.className, clear = _a.clear, clearAriaLabel = _a.clearAriaLabel, containerSize = _a.containerSize, disabled = _a.disabled, messageArr = _a.messageArr, htmlId = _a.htmlId, id = _a.id, inputClassName = _a.inputClassName, helpText = _a.helpText, inputSize = _a.inputSize, label = _a.label, multiline = _a.multiline, nestedLevel = _a.nestedLevel, placeholder = _a.placeholder, readOnly = _a.readOnly, secondaryLabel = _a.secondaryLabel, shape = _a.shape, type = _a.type, props = __rest(_a, ["ariaDescribedBy", "ariaLabel", "className", "clear", "clearAriaLabel", "containerSize", "disabled", "messageArr", "htmlId", "id", "inputClassName", "helpText", "inputSize", "label", "multiline", "nestedLevel", "placeholder", "readOnly", "secondaryLabel", "shape", "type"]);
delete props.isFilled;
var _b = this.state, isEditing = _b.isEditing, value = _b.value;
var otherProps = omit(__assign({}, props), [
'defaultValue',
'inputAfter',
'inputBefore',
'inputRef',
'onChange',
'onDoneEditing',
'onFocus',
'onKeyDown',
'onMouseDown',
'ref',
'value',
]);
var messageType = (messageArr.length > 0 && determineMessageType(messageArr)) || '';
var messages = (messageType && filterMessagesByType(messageArr, messageType)) || null;
var clearButton = clear && !disabled && value && (React.createElement(InputSection, { position: "after" },
React.createElement(Icon, { onClick: this.handleClear, ariaLabel: clearAriaLabel || 'clear input', buttonClassName: "md-input__icon-clear", icon: React.createElement(IconNext, { scale: 18, name: "cancel", weight: "bold" }) })));
var inputSection = function (position) {
return _this.props["input".concat(position)] && (React.createElement(InputSection, { position: toLower(position) }, _this.props["input".concat(position)]));
};
var inputLeft = inputSection('Before');
var inputRight = clearButton || inputSection('After');
var InputTag = multiline ? 'textarea' : 'input';
var inputElement = (React.createElement("div", { className: 'md-input__wrapper' + "".concat(inputSize ? " columns ".concat(inputSize) : '') },
inputLeft,
React.createElement(InputTag, __assign({ className: 'md-input' +
"".concat(multiline ? ' md-input--multiline' : '') +
"".concat(shape ? " md-input--".concat(shape) : '') +
"".concat(inputLeft ? " md-input--before" : '') +
"".concat(inputRight ? " md-input--after" : '') +
"".concat(isEditing ? " md-active" : '') +
"".concat(inputClassName ? " ".concat(inputClassName) : '') +
"".concat(readOnly ? ' md-read-only' : '') +
"".concat(disabled ? ' md-disabled' : '') +
"".concat(value ? " md-dirty" : ''), onBlur: this.handleBlur, onChange: this.handleChange, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, onMouseDown: this.handleMouseDown, ref: this.setInputRef, tabIndex: 0, type: type, value: value }, (ariaDescribedBy && { 'aria-describedby': ariaDescribedBy }), (ariaLabel && { 'aria-label': ariaLabel }), (disabled && { disabled: disabled }), ((htmlId || id) && { id: htmlId || id }), otherProps, (placeholder && { placeholder: placeholder }), (readOnly && { readOnly: readOnly }))),
inputRight));
return (React.createElement("div", { className: "md-input-container" +
"".concat(containerSize ? " columns ".concat(containerSize) : '') +
"".concat(readOnly ? ' md-read-only' : '') +
"".concat(disabled ? ' md-disabled' : '') +
"".concat(messageType ? " md-".concat(messageType) : '') +
"".concat((nestedLevel && " md-input--nested-".concat(nestedLevel)) || '') +
"".concat(className ? " ".concat(className) : '') },
label && React.createElement(Label, { className: "md-input__label", htmlFor: htmlId || id, label: label }),
inputElement,
secondaryLabel && (React.createElement(Label, { className: "md-input__secondary-label", htmlFor: htmlId || id, label: secondaryLabel })),
helpText && React.createElement(InputHelper, { message: helpText }),
messages && (React.createElement("div", { className: "md-input__messages" }, messages.map(function (m, i) { return (React.createElement(InputMessage, { message: m, key: "input-message-".concat(i) })); })))));
};
return Input;
}(React.Component));
Input.propTypes = {
/** @prop ID to reference for blindness accessibility feature | null */
ariaDescribedBy: PropTypes.string,
/** @prop Text to display for blindness accessibility features | null */
ariaLabel: PropTypes.string,
/** @prop Optional css class name | '' */
className: PropTypes.string,
/** @prop Clears Input values | false */
clear: PropTypes.bool,
/** @prop Optional aria label on the clear button | null */
clearAriaLabel: PropTypes.string,
/** @prop Overall input container size | '' */
containerSize: PropTypes.string,
/** @prop Default Value same as value but used when onChange isn't invoked | '' */
defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/*** @prop Sets the disabled attribute of the Input | false */
disabled: PropTypes.bool,
/** @prop Array of Objects with message and type [{error: '', type: 'error, success, warning'}] to display error message and assign class | [] */
messageArr: PropTypes.array,
/** @prop Unique HTML ID used for tying label to HTML input for automated testing | null */
htmlId: PropTypes.string,
/** Optional Icon node that overrides right section of input | null */
inputAfter: PropTypes.node,
/** Optional Icon node that overrides left section of input | null */
inputBefore: PropTypes.node,
/** Unique HTML ID used for tying label to HTML input | null */
id: PropTypes.string,
/** @prop Input css class name string | '' */
inputClassName: PropTypes.string,
/** @prop Help Text to show form validation rules | '' */
helpText: PropTypes.string,
/*** @prop Optional Input ref prop type | null */
inputRef: PropTypes.func,
/** @prop Overall input wrapper size | '' */
inputSize: PropTypes.string,
/*** @prop Applies the filled attribute of the Input | false */
isFilled: PropTypes.bool,
/** @prop Input label text | '' */
label: PropTypes.string,
/** @prop Input is multiline(textarea) | false */
multiline: PropTypes.bool,
/*** @prop Optional Input name prop type | null */
name: PropTypes.string,
/** @prop Set the level of nested Input components | 0 */
nestedLevel: PropTypes.number,
/** @prop Callback function invoked when user types into the Input field | null */
onChange: PropTypes.func,
/*** @prop Callback function invoked when user is done editing Input field | null */
onDoneEditing: PropTypes.func,
/*** @prop Callback function invoked when user focuses on the Input field | null */
onFocus: PropTypes.func,
/*** @prop Callback function invoked when user presses any key | null */
onKeyDown: PropTypes.func,
/*** @prop Callback function invoked when user clicks on the mouse/trackpad | null */
onMouseDown: PropTypes.func,
/** @prop Placeholder text to display when Input is empty | '' */
placeholder: PropTypes.string,
/*** @prop Determines if Input can be edited | false */
readOnly: PropTypes.bool,
/** @prop Secondary Input label | '' */
secondaryLabel: PropTypes.string,
/** @prop Input shape property | '' */
shape: PropTypes.string,
/** @prop Input type | 'text' */
type: PropTypes.oneOf(['text', 'number', 'password', 'email']),
/** @prop Input value | '' */
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
};
Input.defaultProps = {
ariaDescribedBy: null,
ariaLabel: null,
className: '',
clear: false,
clearAriaLabel: null,
containerSize: '',
defaultValue: '',
disabled: false,
messageArr: [],
htmlId: null,
inputAfter: null,
inputBefore: null,
id: null,
inputClassName: '',
helpText: '',
inputRef: null,
inputSize: '',
isFilled: false,
label: '',
multiline: false,
name: null,
nestedLevel: 0,
onChange: null,
onDoneEditing: null,
onFocus: null,
onKeyDown: null,
onMouseDown: null,
placeholder: '',
readOnly: false,
secondaryLabel: '',
shape: '',
type: 'text',
value: '',
};
Input.displayName = 'Input';
export default Input;
//# sourceMappingURL=index.js.map