baseui
Version:
A React Component library implementing the Base design language
216 lines (214 loc) • 8.99 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 _styledComponents = require("./styled-components");
var _constants = require("./constants");
var _focusVisible = require("../utils/focusVisible");
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.
*/
// @ts-ignore
const stopPropagation = e => e.stopPropagation();
class StatelessCheckbox extends React.Component {
constructor(...args) {
super(...args);
_defineProperty(this, "inputRef", this.props.inputRef || /*#__PURE__*/React.createRef());
_defineProperty(this, "state", {
isFocused: this.props.autoFocus || false,
isFocusVisible: false,
isHovered: false,
isActive: false
});
_defineProperty(this, "onMouseEnter", e => {
this.setState({
isHovered: true
});
// @ts-ignore
this.props.onMouseEnter(e);
});
_defineProperty(this, "onMouseLeave", e => {
this.setState({
isHovered: false,
isActive: false
});
// @ts-ignore
this.props.onMouseLeave(e);
});
_defineProperty(this, "onMouseDown", e => {
this.setState({
isActive: true
});
// @ts-ignore
this.props.onMouseDown(e);
});
_defineProperty(this, "onMouseUp", e => {
this.setState({
isActive: false
});
// @ts-ignore
this.props.onMouseUp(e);
});
_defineProperty(this, "onFocus", e => {
this.setState({
isFocused: true
});
// @ts-ignore
this.props.onFocus(e);
if ((0, _focusVisible.isFocusVisible)(e)) {
this.setState({
isFocusVisible: true
});
}
});
_defineProperty(this, "onBlur", e => {
this.setState({
isFocused: false
});
// @ts-ignore
this.props.onBlur(e);
if (this.state.isFocusVisible !== false) {
this.setState({
isFocusVisible: false
});
}
});
}
componentDidMount() {
const {
autoFocus,
isIndeterminate
} = this.props;
// @ts-ignore
if (autoFocus && this.inputRef.current) {
// @ts-ignore
this.inputRef.current.focus();
}
if (this.inputRef.current) {
this.inputRef.current.indeterminate = Boolean(isIndeterminate);
}
}
componentDidUpdate(prevProps) {
const {
isIndeterminate
} = this.props;
if (this.inputRef.current && isIndeterminate !== prevProps.isIndeterminate) {
this.inputRef.current.indeterminate = Boolean(isIndeterminate);
}
}
render() {
const {
overrides = {},
onChange,
labelPlacement = this.props.checkmarkType === _constants.STYLE_TYPE.toggle ? 'left' : 'right',
isIndeterminate,
error,
disabled,
value,
id,
name,
checked,
children,
required,
title
} = this.props;
const {
Root: RootOverride,
Checkmark: CheckmarkOverride,
Label: LabelOverride,
Input: InputOverride,
Toggle: ToggleOverride,
ToggleTrack: ToggleTrackOverride
} = overrides;
const Root = (0, _overrides.getOverride)(RootOverride) || _styledComponents.Root;
const Checkmark = (0, _overrides.getOverride)(CheckmarkOverride) || _styledComponents.Checkmark;
const Label = (0, _overrides.getOverride)(LabelOverride) || _styledComponents.Label;
const Input = (0, _overrides.getOverride)(InputOverride) || _styledComponents.Input;
const Toggle = (0, _overrides.getOverride)(ToggleOverride) || _styledComponents.Toggle;
const ToggleTrack = (0, _overrides.getOverride)(ToggleTrackOverride) || _styledComponents.ToggleTrack;
const inputEvents = {
onChange,
onFocus: this.onFocus,
onBlur: this.onBlur
};
const mouseEvents = {
onMouseEnter: this.onMouseEnter,
onMouseLeave: this.onMouseLeave,
onMouseDown: this.onMouseDown,
onMouseUp: this.onMouseUp
};
const sharedProps = {
$isFocused: this.state.isFocused,
$isFocusVisible: this.state.isFocusVisible,
$isHovered: this.state.isHovered,
$isActive: this.state.isActive,
$error: error,
$checked: checked,
$isIndeterminate: isIndeterminate,
$required: required,
$disabled: disabled,
$value: value
};
const labelComp = children && /*#__PURE__*/React.createElement(Label, _extends({
$labelPlacement: labelPlacement
}, sharedProps, (0, _overrides.getOverrideProps)(LabelOverride)), this.props.containsInteractiveElement ?
/*#__PURE__*/
// Prevents the event from bubbling up to the label and moving focus to the radio button
// eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
React.createElement("div", {
onClick: e => e.preventDefault()
}, children) : children);
return /*#__PURE__*/React.createElement(Root, _extends({
"data-baseweb": "checkbox",
title: title || null,
$labelPlacement: labelPlacement
}, sharedProps, mouseEvents, (0, _overrides.getOverrideProps)(RootOverride)), (labelPlacement === 'top' || labelPlacement === 'left') && labelComp, this.props.checkmarkType === _constants.STYLE_TYPE.toggle ? /*#__PURE__*/React.createElement(ToggleTrack, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(ToggleTrackOverride)), /*#__PURE__*/React.createElement(Toggle, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(ToggleOverride)))) : /*#__PURE__*/React.createElement(Checkmark, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(CheckmarkOverride))), /*#__PURE__*/React.createElement(Input, _extends({
value: value,
id: id,
name: name,
checked: checked,
required: required,
"aria-label": this.props['aria-label'] || this.props.ariaLabel,
"aria-describedby": this.props['aria-describedby'],
"aria-errormessage": this.props['aria-errormessage'],
"aria-invalid": error || null,
"aria-required": required || null,
disabled: disabled,
type: "checkbox",
ref: this.inputRef
// Prevent a second click event from firing when label is clicked.
// See https://github.com/uber/baseweb/issues/3847
,
onClick: stopPropagation
}, sharedProps, inputEvents, (0, _overrides.getOverrideProps)(InputOverride))), (labelPlacement === 'bottom' || labelPlacement === 'right') && labelComp);
}
}
_defineProperty(StatelessCheckbox, "defaultProps", {
overrides: {},
// todo(flow->ts): missing field in flow types
checked: false,
containsInteractiveElement: false,
disabled: false,
autoFocus: false,
isIndeterminate: false,
error: false,
checkmarkType: _constants.STYLE_TYPE.default,
onChange: () => {},
onMouseEnter: () => {},
onMouseLeave: () => {},
onMouseDown: () => {},
onMouseUp: () => {},
onFocus: () => {},
onBlur: () => {}
});
var _default = exports.default = StatelessCheckbox;