baseui
Version:
A React Component library implementing the Base design language
183 lines (178 loc) • 9.16 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _overrides = require("../helpers/overrides");
var _reactUid = require("react-uid");
var _icon = require("../icon");
var _styledComponents = require("./styled-components");
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.
*/
function chooseRenderedHint(caption, error, positive, sharedProps) {
if (!!error && typeof error !== 'boolean') {
return typeof error === 'function' ? error(sharedProps) : error;
}
if (!!positive && typeof positive !== 'boolean') {
return typeof positive === 'function' ? positive(sharedProps) : positive;
}
if (caption) {
return typeof caption === 'function' ? caption(sharedProps) : caption;
}
return null;
}
// @ts-ignore
function chooseRenderedHintIcon(hint, error, positive) {
if (!hint) {
return null;
}
if (!!error) {
if (typeof error === 'function') {
return null;
}
return /*#__PURE__*/React.createElement(_icon.Alert, {
size: 12,
"aria-hidden": "true",
title: ""
});
}
if (!!positive) {
if (typeof positive === 'function') {
return null;
}
return /*#__PURE__*/React.createElement(_icon.Check, {
size: 12,
"aria-hidden": "true",
title: ""
});
}
return null;
}
class FormControl extends React.Component {
render() {
const {
overrides: {
// @ts-ignore
Label: LabelOverride,
// @ts-ignore
LabelEndEnhancer: LabelEndEnhancerOverride,
// @ts-ignore
LabelContainer: LabelContainerOverride,
// @ts-ignore
Caption: CaptionOverride,
// @ts-ignore
CaptionMessage: CaptionMessageOverride,
// @ts-ignore
CaptionIcon: CaptionIconOverride,
// @ts-ignore
ControlContainer: ControlContainerOverride
},
label,
caption,
disabled,
error,
positive,
htmlFor,
children,
counter
} = this.props;
// @ts-expect-error todo(flow->ts): looks dangerous
const onlyChildProps = React.Children.only(children).props;
const sharedProps = {
$disabled: !!disabled,
$error: !!error,
$positive: !!positive
};
const Label = (0, _overrides.getOverride)(LabelOverride) || _styledComponents.Label;
const LabelEndEnhancer = (0, _overrides.getOverride)(LabelEndEnhancerOverride) || _styledComponents.LabelEndEnhancer;
const LabelContainer = (0, _overrides.getOverride)(LabelContainerOverride) || _styledComponents.LabelContainer;
const Caption = (0, _overrides.getOverride)(CaptionOverride) || _styledComponents.Caption;
const CaptionMessage = (0, _overrides.getOverride)(CaptionMessageOverride) || _styledComponents.CaptionMessage;
const CaptionIcon = (0, _overrides.getOverride)(CaptionIconOverride) || _styledComponents.CaptionIcon;
const ControlContainer = (0, _overrides.getOverride)(ControlContainerOverride) || _styledComponents.ControlContainer;
const hint = chooseRenderedHint(caption, error, positive, sharedProps);
const hintIcon = chooseRenderedHintIcon(hint, error, positive);
if (process.env.NODE_ENV !== "production") {
if (error && positive) {
// eslint-disable-next-line no-console
console.warn(`[FormControl] \`error\` and \`positive\` are both set to \`true\`. \`error\` will take precedence but this may not be what you want.`);
}
}
let labelEndEnhancer = this.props.labelEndEnhancer;
if (counter) {
// inferred values are preferred but if the user specifies the value
// that is then used as the default.
let maxLength = null;
let length = null;
let counterError = null;
if (typeof counter === 'object') {
length = counter.length;
maxLength = counter.maxLength;
counterError = counter.error;
}
maxLength = maxLength ? maxLength : onlyChildProps.maxLength;
if (length == null && typeof onlyChildProps.value === 'string') {
length = onlyChildProps.value.length;
}
if (length == null) {
length = 0;
if (process.env.NODE_ENV !== "production") {
console.warn(`[FromControl] \`length\` must either be explicitly set via \`counter\` object property, or \`value\` string property on the child component.`);
}
}
sharedProps.$length = length;
if (maxLength == null) {
if (!labelEndEnhancer) labelEndEnhancer = `${length}`;
} else {
sharedProps.$maxLength = length;
if (!labelEndEnhancer) labelEndEnhancer = `${length}/${maxLength}`;
if (length > maxLength && counterError == null) counterError = true;
}
if (counterError) {
sharedProps.$error = true;
sharedProps.$counterError = true;
}
}
return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(LabelContainer, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(LabelContainerOverride)), /*#__PURE__*/React.createElement(Label, _extends({
"data-baseweb": "form-control-label",
htmlFor: htmlFor || onlyChildProps.id
}, sharedProps, (0, _overrides.getOverrideProps)(LabelOverride)), typeof label === 'function' ? label(sharedProps) : label), !!labelEndEnhancer && /*#__PURE__*/React.createElement(LabelEndEnhancer, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(LabelEndEnhancerOverride)), typeof labelEndEnhancer === 'function' ? labelEndEnhancer(sharedProps) : labelEndEnhancer)), /*#__PURE__*/React.createElement(_reactUid.UIDConsumer, null, captionId => /*#__PURE__*/React.createElement(ControlContainer, _extends({
"data-baseweb": "form-control-container"
}, sharedProps, (0, _overrides.getOverrideProps)(ControlContainerOverride)), React.Children.map(children, (child, index) => {
if (!child) return;
// @ts-expect-error
const key = child.key || String(index);
// @ts-expect-error todo(flow->ts): looks dangerous -- can be possible error
return /*#__PURE__*/React.cloneElement(child, {
key,
'aria-errormessage': error ? captionId : null,
'aria-describedby': caption || positive ? captionId : null,
disabled: onlyChildProps.disabled || disabled,
error: typeof onlyChildProps.error !== 'undefined' ? onlyChildProps.error : sharedProps.$error === false ? undefined : sharedProps.$error,
positive: typeof onlyChildProps.positive !== 'undefined' ? onlyChildProps.positive : sharedProps.$positive === false ? undefined : sharedProps.$positive
});
}), hint && /*#__PURE__*/React.createElement(Caption, _extends({
"data-baseweb": "form-control-caption",
id: captionId
}, sharedProps, (0, _overrides.getOverrideProps)(CaptionOverride)), hintIcon && /*#__PURE__*/React.createElement(CaptionIcon, null, hintIcon), /*#__PURE__*/React.createElement(CaptionMessage, null, hint)))));
}
}
exports.default = FormControl;
_defineProperty(FormControl, "defaultProps", {
overrides: {},
// @ts-ignore
label: null,
// @ts-ignore
caption: null,
disabled: false,
counter: false
});