baseui
Version:
A React Component library implementing the Base design language
340 lines (337 loc) • 14.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _overrides = require("../helpers/overrides");
var _constants = require("./constants");
var _styledComponents = require("./styled-components");
var _utils = require("./utils");
var _hide = _interopRequireDefault(require("../icon/hide"));
var _show = _interopRequireDefault(require("../icon/show"));
var _createEvent = _interopRequireDefault(require("../utils/create-event"));
var _focusVisible = require("../utils/focusVisible");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /*
Copyright (c) Uber Technologies, Inc.
This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/ // eslint-disable-next-line @typescript-eslint/no-unused-vars
/* global window */
// @ts-ignore
const NullComponent = () => null;
class BaseInput extends React.Component {
constructor(...args) {
super(...args);
_defineProperty(this, "inputRef", this.props.inputRef || /*#__PURE__*/React.createRef());
_defineProperty(this, "state", {
isFocused: this.props.autoFocus || false,
isMasked: this.props.type === 'password',
initialType: this.props.type,
isFocusVisibleForClear: false,
isFocusVisibleForMaskToggle: false
});
_defineProperty(this, "onInputKeyDown", e => {
if (this.props.clearOnEscape && e.key === 'Escape' && this.inputRef.current && !this.props.readOnly) {
this.clearValue();
// prevent event from closing modal or doing something unexpected
e.stopPropagation();
}
});
_defineProperty(this, "onClearIconClick", () => {
if (this.inputRef.current) this.clearValue();
// return focus to the input after click
if (this.inputRef.current) this.inputRef.current.focus();
});
_defineProperty(this, "onFocus", e => {
this.setState({
isFocused: true
});
// @ts-ignore
this.props.onFocus(e);
});
_defineProperty(this, "onBlur", e => {
this.setState({
isFocused: false
});
// @ts-ignore
this.props.onBlur(e);
});
_defineProperty(this, "handleFocusForMaskToggle", event => {
if ((0, _focusVisible.isFocusVisible)(event)) {
this.setState({
isFocusVisibleForMaskToggle: true
});
}
});
// eslint-disable-next-line @typescript-eslint/no-unused-vars
_defineProperty(this, "handleBlurForMaskToggle", event => {
if (this.state.isFocusVisibleForMaskToggle !== false) {
this.setState({
isFocusVisibleForMaskToggle: false
});
}
});
_defineProperty(this, "handleFocusForClear", event => {
if ((0, _focusVisible.isFocusVisible)(event)) {
this.setState({
isFocusVisibleForClear: true
});
}
});
// eslint-disable-next-line @typescript-eslint/no-unused-vars
_defineProperty(this, "handleBlurForClear", event => {
if (this.state.isFocusVisibleForClear !== false) {
this.setState({
isFocusVisibleForClear: false
});
}
});
}
componentDidMount() {
const {
autoFocus,
clearable
} = this.props;
if (this.inputRef.current) {
if (autoFocus) {
this.inputRef.current.focus();
}
if (clearable) {
// @ts-ignore
this.inputRef.current.addEventListener('keydown', this.onInputKeyDown);
}
}
}
componentWillUnmount() {
const {
clearable
} = this.props;
if (clearable && this.inputRef.current) {
// @ts-ignore
this.inputRef.current.removeEventListener('keydown', this.onInputKeyDown);
}
}
clearValue() {
// trigger a fake input change event (as if all text was deleted)
const input = this.inputRef.current;
if (input) {
const nativeInputValue = Object.getOwnPropertyDescriptor(this.props.type === _constants.CUSTOM_INPUT_TYPE.textarea ?
// todo(flow->ts): globals, not props of window object
HTMLTextAreaElement.prototype : HTMLInputElement.prototype, 'value');
if (nativeInputValue) {
const nativeInputValueSetter = nativeInputValue.set;
if (nativeInputValueSetter) {
nativeInputValueSetter.call(input, '');
const event = (0, _createEvent.default)('input');
input.dispatchEvent(event);
}
}
}
}
getInputType() {
// If the type prop is equal to "password" we allow the user to toggle between
// masked and non masked text. Internally, we toggle between type "password"
// and "text".
if (this.props.type === 'password') {
return this.state.isMasked ? 'password' : 'text';
} else {
return this.props.type;
}
}
renderMaskToggle() {
if (this.props.type !== 'password') return null;
const [MaskToggleButton, maskToggleButtonProps] = (0, _overrides.getOverrides)(
// @ts-ignore
this.props.overrides.MaskToggleButton, _styledComponents.StyledMaskToggleButton);
const [MaskToggleShowIcon, maskToggleIconShowProps] = (0, _overrides.getOverrides)(
// @ts-ignore
this.props.overrides.MaskToggleShowIcon, _show.default);
const [MaskToggleHideIcon, maskToggleIconHideProps] = (0, _overrides.getOverrides)(
// @ts-ignore
this.props.overrides.MaskToggleHideIcon, _hide.default);
const label = this.state.isMasked ? 'Show password text' : 'Hide password text';
const iconSize = {
[_constants.SIZE.mini]: '12px',
[_constants.SIZE.compact]: '16px',
[_constants.SIZE.default]: '20px',
[_constants.SIZE.large]: '24px'
// @ts-ignore
}[this.props.size];
return /*#__PURE__*/React.createElement(MaskToggleButton, _extends({
$size: this.props.size,
$isFocusVisible: this.state.isFocusVisibleForMaskToggle,
"aria-label": label,
onClick: () => this.setState(state => ({
isMasked: !state.isMasked
})),
title: label,
type: "button"
}, maskToggleButtonProps, {
onFocus: (0, _focusVisible.forkFocus)(maskToggleButtonProps, this.handleFocusForMaskToggle),
onBlur: (0, _focusVisible.forkBlur)(maskToggleButtonProps, this.handleBlurForMaskToggle)
}), this.state.isMasked ? /*#__PURE__*/React.createElement(MaskToggleShowIcon, _extends({
size: iconSize,
title: label
}, maskToggleIconShowProps)) : /*#__PURE__*/React.createElement(MaskToggleHideIcon, _extends({
size: iconSize,
title: label
}, maskToggleIconHideProps)));
}
renderClear() {
const {
clearable,
value,
disabled,
readOnly,
overrides = {}
} = this.props;
if (disabled || readOnly || !clearable || value == null || typeof value === 'string' && value.length === 0) {
return null;
}
const [ClearIconContainer, clearIconContainerProps] = (0, _overrides.getOverrides)(overrides.ClearIconContainer, _styledComponents.StyledClearIconContainer);
const [ClearIcon, clearIconProps] = (0, _overrides.getOverrides)(overrides.ClearIcon, _styledComponents.StyledClearIcon);
const ariaLabel = 'Clear value';
const sharedProps = (0, _utils.getSharedProps)(this.props, this.state);
const iconSize = {
[_constants.SIZE.mini]: '14px',
[_constants.SIZE.compact]: '14px',
[_constants.SIZE.default]: '16px',
[_constants.SIZE.large]: '22px'
// @ts-ignore
}[this.props.size];
return /*#__PURE__*/React.createElement(ClearIconContainer, _extends({
$alignTop: this.props.type === _constants.CUSTOM_INPUT_TYPE.textarea
}, sharedProps, clearIconContainerProps), /*#__PURE__*/React.createElement(ClearIcon, _extends({
size: iconSize,
tabIndex: 0,
title: ariaLabel,
"aria-label": ariaLabel,
onClick: this.onClearIconClick
// @ts-ignore
,
onKeyDown: event => {
if (event.key && (event.key === 'Enter' || event.key === ' ')) {
event.preventDefault();
this.onClearIconClick();
}
},
role: "button",
$isFocusVisible: this.state.isFocusVisibleForClear
}, sharedProps, clearIconProps, {
onFocus: (0, _focusVisible.forkFocus)(clearIconProps, this.handleFocusForClear),
onBlur: (0, _focusVisible.forkBlur)(clearIconProps, this.handleBlurForClear)
})));
}
render() {
const {
overrides: {
// @ts-ignore
InputContainer: InputContainerOverride,
// @ts-ignore
Input: InputOverride,
// @ts-ignore
Before: BeforeOverride,
// @ts-ignore
After: AfterOverride
}
} = this.props;
// more here https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#Preventing_autofilling_with_autocompletenew-password
const autoComplete = this.state.initialType === 'password' && this.props.autoComplete === BaseInput.defaultProps.autoComplete ? 'new-password' : this.props.autoComplete;
const sharedProps = (0, _utils.getSharedProps)(this.props, this.state);
const [InputContainer, inputContainerProps] = (0, _overrides.getOverrides)(InputContainerOverride, _styledComponents.InputContainer);
const [Input, inputProps] = (0, _overrides.getOverrides)(InputOverride, _styledComponents.Input);
const [Before, beforeProps] = (0, _overrides.getOverrides)(BeforeOverride, NullComponent);
const [After, afterProps] = (0, _overrides.getOverrides)(AfterOverride, NullComponent);
return /*#__PURE__*/React.createElement(InputContainer, _extends({
"data-baseweb": this.props['data-baseweb'] || 'base-input'
}, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement(Before, _extends({}, sharedProps, beforeProps)), /*#__PURE__*/React.createElement(Input, _extends({
ref: this.inputRef,
"aria-activedescendant": this.props['aria-activedescendant'],
"aria-autocomplete": this.props['aria-autocomplete'],
"aria-controls": this.props['aria-controls'],
"aria-errormessage": this.props['aria-errormessage'],
"aria-haspopup": this.props['aria-haspopup'],
"aria-label": this.props['aria-label'],
"aria-labelledby": this.props['aria-labelledby'],
"aria-describedby": this.props['aria-describedby'],
"aria-invalid": this.props.error,
"aria-required": this.props.required,
autoComplete: autoComplete,
disabled: this.props.disabled,
readOnly: this.props.readOnly,
id: this.props.id,
inputMode: this.props.inputMode,
maxLength: this.props.maxLength,
name: this.props.name,
onBlur: this.onBlur,
onChange: this.props.onChange,
onFocus: this.onFocus,
onKeyDown: this.props.onKeyDown,
onKeyPress: this.props.onKeyPress,
onKeyUp: this.props.onKeyUp,
pattern: this.props.pattern,
placeholder: this.props.placeholder,
type: this.getInputType(),
required: this.props.required,
role: this.props.role,
value: this.props.value,
min: this.props.min,
max: this.props.max,
step: this.props.step,
rows: this.props.type === _constants.CUSTOM_INPUT_TYPE.textarea ? this.props.rows : null
}, sharedProps, inputProps)), this.renderClear(), this.renderMaskToggle(), /*#__PURE__*/React.createElement(After, _extends({}, sharedProps, afterProps)));
}
}
_defineProperty(BaseInput, "defaultProps", {
// @ts-ignore
'aria-activedescendant': null,
// @ts-ignore
'aria-autocomplete': null,
// @ts-ignore
'aria-controls': null,
// @ts-ignore
'aria-errormessage': null,
// @ts-ignore
'aria-haspopup': null,
// @ts-ignore
'aria-label': null,
// @ts-ignore
'aria-labelledby': null,
// @ts-ignore
'aria-describedby': null,
adjoined: _constants.ADJOINED.none,
autoComplete: 'on',
autoFocus: false,
disabled: false,
error: false,
positive: false,
name: '',
inputMode: 'text',
onBlur: () => {},
onChange: () => {},
onKeyDown: () => {},
onKeyPress: () => {},
onKeyUp: () => {},
onFocus: () => {},
onClear: () => {},
clearable: false,
clearOnEscape: true,
overrides: {},
// @ts-ignore
pattern: null,
placeholder: '',
required: false,
// @ts-ignore
role: null,
size: _constants.SIZE.default,
type: 'text',
readOnly: false
});
var _default = exports.default = BaseInput;