@teamsnap/teamsnap-ui
Version:
a CSS component library for TeamSnap
135 lines (134 loc) • 6.2 kB
JavaScript
"use strict";
/**
* @name Field
*
* @description
* The Field component is used when you're wanting to render any type of form field. It supports labels and captions for all types of fields,
* and offers detailed levels of support for specific field types. Please refer to the storybook examples to see the many different ways in which
* you can work with fields.
*
* @example
* <Field
* isDisabled={true}
* label={"Email Address"}
* name="Sample"
* formFieldProps={{
* placeholder: "Placeholder Text",
* size: Sizes.SMALL
* }}
* status={Statuses.ERROR}
* />
*/
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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
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;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var PropTypes = __importStar(require("prop-types"));
var FieldGroup_1 = require("../FieldGroup");
var FieldLabel_1 = require("../FieldLabel");
var FieldMessage_1 = require("../FieldMessage");
var Input_1 = require("../Input");
var types_1 = require("../../types");
var Checkbox_1 = require("../Checkbox");
var Radio_1 = require("../Radio");
var checkboxShape = PropTypes.shape({
text: PropTypes.string,
checked: types_1.CheckboxState.PropType,
onClick: PropTypes.func,
isIndeterminate: PropTypes.bool,
});
var inputShape = PropTypes.shape({
placeholder: PropTypes.string,
leftIcon: PropTypes.node,
rightIcon: PropTypes.node,
size: types_1.Size.PropType,
showStatus: PropTypes.bool,
showClear: PropTypes.bool,
onClearClicked: PropTypes.func,
inputProps: PropTypes.any,
});
var fieldPropTypes = {
type: PropTypes.oneOf(['toggle', 'select', 'input', 'checkbox', 'date']).isRequired,
formFieldProps: PropTypes.oneOfType([checkboxShape, inputShape]),
name: PropTypes.string.isRequired,
label: PropTypes.string,
caption: PropTypes.string,
mods: PropTypes.string,
status: types_1.Status.PropType,
ref: PropTypes.any,
otherProps: PropTypes.any,
isDisabled: PropTypes.bool,
isInline: PropTypes.bool,
style: PropTypes.any,
testId: PropTypes.string,
};
var Field = function (_a) {
var type = _a.type, name = _a.name, label = _a.label, caption = _a.caption, ref = _a.ref, status = _a.status, isDisabled = _a.isDisabled, formFieldProps = _a.formFieldProps, isInline = _a.isInline, style = _a.style, testId = _a.testId, otherProps = __rest(_a, ["type", "name", "label", "caption", "ref", "status", "isDisabled", "formFieldProps", "isInline", "style", "testId"]);
return (React.createElement(FieldGroup_1.FieldGroup, { style: style, isInline: isInline, status: status, isDisabled: isDisabled, "data-testid": testId },
label && React.createElement(FieldLabel_1.FieldLabel, { name: name }, label),
(function (fieldProps) {
var _a = fieldProps, text = _a.text, checked = _a.checked, onClick = _a.onClick, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, placeholder = _a.placeholder, size = _a.size, showStatus = _a.showStatus, showClear = _a.showClear, onClearClicked = _a.onClearClicked, inputProps = _a.inputProps;
switch (type) {
case 'checkbox':
return (React.createElement(Checkbox_1.Checkbox, { name: name, inputProps: {
checked: checked,
onClick: onClick,
disabled: isDisabled,
}, label: text, isInline: true }));
case 'radio':
return (React.createElement(Radio_1.Radio, { name: name, inputProps: {
checked: checked,
onClick: onClick,
disabled: isDisabled,
}, label: text, isInline: true }));
default:
return (React.createElement(Input_1.Input, __assign({ size: size, placeholder: placeholder, name: name, type: type || 'text', inputProps: inputProps, status: status, rightIcon: rightIcon, leftIcon: leftIcon, showStatus: showStatus, showClear: showClear, onClearClicked: onClearClicked, isDisabled: isDisabled }, otherProps)));
}
})(formFieldProps),
caption && React.createElement(FieldMessage_1.FieldMessage, { status: status }, caption)));
};
Field.propTypes = fieldPropTypes;
Field.defaultProps = {};
Field.CheckboxStates = types_1.CheckboxStates;
Field.Label = FieldLabel_1.FieldLabel;
Field.Caption = FieldMessage_1.FieldMessage;
exports.default = Field;