@ucam/design-system
Version:
University of Cambridge Design System
45 lines (42 loc) • 8.73 kB
JavaScript
import { __rest } from 'tslib';
import React from 'react';
import { experimentalStyled } from '@material-ui/core';
import FormControl from '@material-ui/core/FormControl';
import FormHelperText from '@material-ui/core/FormHelperText';
import InputLabel from '@material-ui/core/InputLabel';
import Input from '../Input/Input.js';
import PropTypes from 'prop-types';
import T from '@material-ui/core/Typography';
import { useId } from '@reach/auto-id';
import clsx from 'clsx';
const LabelContainer = experimentalStyled('div')(({ theme }) => ({
marginBottom: theme.spacing(1)
}));
const LabelText = experimentalStyled(InputLabel)(() => ({
position: 'static',
transform: 'none',
color: 'inherit !important',
fontWeight: 600,
textAlign: 'left'
}));
const HintText = (props) => React.createElement(T, Object.assign({ variant: "body2", sx: { mt: 0.5 } }, props));
const FeedbackText = (props) => React.createElement(FormHelperText, Object.assign({ sx: { mt: 1 } }, props));
const TextField = React.forwardRef(function TextField(props, ref) {
const { label, hint, feedback, id, type = 'text', disabled, sx, formControlProps } = props, rest = __rest(props, ["label", "hint", "feedback", "id", "type", "disabled", "sx", "formControlProps"]);
const inputId = 'UCamInput' + useId(id);
const hintTextId = 'UCamHint' + useId();
const feedbackTextId = 'UCamFeedback' + useId();
const labelId = 'UCamLabel' + useId();
return (React.createElement(FormControl, Object.assign({ disabled: disabled, sx: sx }, formControlProps),
React.createElement(LabelContainer, null,
React.createElement(LabelText, { shrink: true, htmlFor: inputId, id: labelId }, label),
hint && React.createElement(HintText, { id: hintTextId }, hint)),
React.createElement(Input, Object.assign({ id: inputId, type: type, inputProps: {
'aria-labelledby': clsx(label && labelId, hint && hintTextId),
'aria-describedby': feedback && feedbackTextId
} }, rest, { ref: ref })),
feedback && (React.createElement(FeedbackText, { id: feedbackTextId, sx: { ml: 0 } }, feedback))));
});
TextField.propTypes = Object.assign({ label: PropTypes.string.isRequired, hint: PropTypes.string, feedback: PropTypes.string }, Input.propTypes);
export { TextField as default };
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGV4dEZpZWxkLmpzIiwic291cmNlcyI6WyIvQHVjYW0vZGVzaWduLXN5c3RlbS9zcmMvVGV4dEZpZWxkL1RleHRGaWVsZC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IEZDIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgZXhwZXJpbWVudGFsU3R5bGVkIGFzIHN0eWxlZCB9IGZyb20gJ0BtYXRlcmlhbC11aS9jb3JlJztcbmltcG9ydCBGb3JtQ29udHJvbCwgeyBGb3JtQ29udHJvbFByb3BzIH0gZnJvbSAnQG1hdGVyaWFsLXVpL2NvcmUvRm9ybUNvbnRyb2wnO1xuaW1wb3J0IEZvcm1IZWxwZXJUZXh0LCB7IEZvcm1IZWxwZXJUZXh0UHJvcHMgfSBmcm9tICdAbWF0ZXJpYWwtdWkvY29yZS9Gb3JtSGVscGVyVGV4dCc7XG5pbXBvcnQgSW5wdXRMYWJlbCBmcm9tICdAbWF0ZXJpYWwtdWkvY29yZS9JbnB1dExhYmVsJztcbmltcG9ydCBJbnB1dCBmcm9tICcuLi9JbnB1dCc7XG5pbXBvcnQgeyBDdXN0b21JbnB1dFByb3BzIH0gZnJvbSAnLi4vSW5wdXQvSW5wdXQnO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCBULCB7IFR5cG9ncmFwaHlQcm9wcyB9IGZyb20gJ0BtYXRlcmlhbC11aS9jb3JlL1R5cG9ncmFwaHknO1xuaW1wb3J0IHsgdXNlSWQgfSBmcm9tICdAcmVhY2gvYXV0by1pZCc7XG5pbXBvcnQgY2xzeCBmcm9tICdjbHN4JztcblxuY29uc3QgTGFiZWxDb250YWluZXIgPSBzdHlsZWQoJ2RpdicpKCh7IHRoZW1lIH0pID0+ICh7XG4gIG1hcmdpbkJvdHRvbTogdGhlbWUuc3BhY2luZygxKVxufSkpO1xuXG5jb25zdCBMYWJlbFRleHQgPSBzdHlsZWQoSW5wdXRMYWJlbCkoKCkgPT4gKHtcbiAgcG9zaXRpb246ICdzdGF0aWMnLFxuICB0cmFuc2Zvcm06ICdub25lJyxcbiAgY29sb3I6ICdpbmhlcml0ICFpbXBvcnRhbnQnLFxuICBmb250V2VpZ2h0OiA2MDAsXG4gIHRleHRBbGlnbjogJ2xlZnQnXG59KSk7XG5cbmNvbnN0IEhpbnRUZXh0OiBGQzxUeXBvZ3JhcGh5UHJvcHM+ID0gKHByb3BzKSA9PiA8VCB2YXJpYW50PVwiYm9keTJcIiBzeD17eyBtdDogMC41IH19IHsuLi5wcm9wc30gLz47XG5jb25zdCBGZWVkYmFja1RleHQ6IEZDPEZvcm1IZWxwZXJUZXh0UHJvcHM+ID0gKHByb3BzKSA9PiA8Rm9ybUhlbHBlclRleHQgc3g9e3sgbXQ6IDEgfX0gey4uLnByb3BzfSAvPjtcblxuZXhwb3J0IHR5cGUgVGV4dEZpZWxkUHJvcHMgPSBDdXN0b21JbnB1dFByb3BzICYge1xuICAvKipcbiAgICogTGFiZWwgdGV4dCBkaXNwbGF5ZWQgdG8gZGVzY3JpYmUgdGhlIFRleHRGaWVsZCdzIGV4cGVjdGVkIGlucHV0XG4gICAqL1xuICBsYWJlbDogc3RyaW5nO1xuICAvKipcbiAgICogSGludCB0ZXh0IGRpc3BsYXllZCB0byBhc3Npc3QgdXNlciBpbiBjb21wbGV0ZWluZyB0aGUgVGV4dEZpZWxkXG4gICAqL1xuICBoaW50Pzogc3RyaW5nO1xuICAvKipcbiAgICogRmVlZGJhY2sgdGV4dCBkaXNwbGF5ZWQgdG8gY29tbXVuaWNhdGUgc3RhdGUgY2hhbmdlc1xuICAgKi9cbiAgZmVlZGJhY2s/OiBzdHJpbmc7XG4gIC8qKlxuICAgKiBQcm9wcyB0byBvdmVycmlkZSBvbiB0aGUgRm9ybUNvbnRyb2wgY29tcG9uZW50XG4gICAqL1xuICBmb3JtQ29udHJvbFByb3BzPzogRm9ybUNvbnRyb2xQcm9wcztcbn07XG5cbmNvbnN0IFRleHRGaWVsZDogRkM8VGV4dEZpZWxkUHJvcHM+ID0gUmVhY3QuZm9yd2FyZFJlZihmdW5jdGlvbiBUZXh0RmllbGQocHJvcHMsIHJlZikge1xuICBjb25zdCB7IGxhYmVsLCBoaW50LCBmZWVkYmFjaywgaWQsIHR5cGUgPSAndGV4dCcsIGRpc2FibGVkLCBzeCwgZm9ybUNvbnRyb2xQcm9wcywgLi4ucmVzdCB9ID0gcHJvcHM7XG5cbiAgY29uc3QgaW5wdXRJZCA9ICdVQ2FtSW5wdXQnICsgdXNlSWQoaWQpO1xuICBjb25zdCBoaW50VGV4dElkID0gJ1VDYW1IaW50JyArIHVzZUlkKCk7XG4gIGNvbnN0IGZlZWRiYWNrVGV4dElkID0gJ1VDYW1GZWVkYmFjaycgKyB1c2VJZCgpO1xuICBjb25zdCBsYWJlbElkID0gJ1VDYW1MYWJlbCcgKyB1c2VJZCgpO1xuXG4gIHJldHVybiAoXG4gICAgPEZvcm1Db250cm9sIGRpc2FibGVkPXtkaXNhYmxlZH0gc3g9e3N4fSB7Li4uZm9ybUNvbnRyb2xQcm9wc30+XG4gICAgICA8TGFiZWxDb250YWluZXI+XG4gICAgICAgIDxMYWJlbFRleHQgc2hyaW5rPXt0cnVlfSBodG1sRm9yPXtpbnB1dElkfSBpZD17bGFiZWxJZH0+XG4gICAgICAgICAge2xhYmVsfVxuICAgICAgICA8L0xhYmVsVGV4dD5cbiAgICAgICAge2hpbnQgJiYgPEhpbnRUZXh0IGlkPXtoaW50VGV4dElkfT57aGludH08L0hpbnRUZXh0Pn1cbiAgICAgIDwvTGFiZWxDb250YWluZXI+XG4gICAgICA8SW5wdXRcbiAgICAgICAgaWQ9e2lucHV0SWR9XG4gICAgICAgIHR5cGU9e3R5cGV9XG4gICAgICAgIGlucHV0UHJvcHM9e3tcbiAgICAgICAgICAnYXJpYS1sYWJlbGxlZGJ5JzogY2xzeChsYWJlbCAmJiBsYWJlbElkLCBoaW50ICYmIGhpbnRUZXh0SWQpLFxuICAgICAgICAgICdhcmlhLWRlc2NyaWJlZGJ5JzogZmVlZGJhY2sgJiYgZmVlZGJhY2tUZXh0SWRcbiAgICAgICAgfX1cbiAgICAgICAgey4uLnJlc3R9XG4gICAgICAgIHJlZj17cmVmfVxuICAgICAgLz5cbiAgICAgIHtmZWVkYmFjayAmJiAoXG4gICAgICAgIDxGZWVkYmFja1RleHQgaWQ9e2ZlZWRiYWNrVGV4dElkfSBzeD17eyBtbDogMCB9fT5cbiAgICAgICAgICB7ZmVlZGJhY2t9XG4gICAgICAgIDwvRmVlZGJhY2tUZXh0PlxuICAgICAgKX1cbiAgICA8L0Zvcm1Db250cm9sPlxuICApO1xufSk7XG5cblRleHRGaWVsZC5wcm9wVHlwZXMgPSB7XG4gIGxhYmVsOiBQcm9wVHlwZXMuc3RyaW5nLmlzUmVxdWlyZWQsXG4gIGhpbnQ6IFByb3BUeXBlcy5zdHJpbmcsXG4gIGZlZWRiYWNrOiBQcm9wVHlwZXMuc3RyaW5nLFxuICAuLi5JbnB1dC5wcm9wVHlwZXNcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFRleHRGaWVsZDtcbiJdLCJuYW1lcyI6WyJzdHlsZWQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7OztBQVlBLE1BQU0sY0FBYyxHQUFHQSxrQkFBTSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsRUFBRSxLQUFLLEVBQUUsTUFBTTtJQUNuRCxZQUFZLEVBQUUsS0FBSyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUM7Q0FDL0IsQ0FBQyxDQUFDLENBQUM7QUFFSixNQUFNLFNBQVMsR0FBR0Esa0JBQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQyxPQUFPO0lBQzFDLFFBQVEsRUFBRSxRQUFRO0lBQ2xCLFNBQVMsRUFBRSxNQUFNO0lBQ2pCLEtBQUssRUFBRSxvQkFBb0I7SUFDM0IsVUFBVSxFQUFFLEdBQUc7SUFDZixTQUFTLEVBQUUsTUFBTTtDQUNsQixDQUFDLENBQUMsQ0FBQztBQUVKLE1BQU0sUUFBUSxHQUF3QixDQUFDLEtBQUssS0FBSyxvQkFBQyxDQUFDLGtCQUFDLE9BQU8sRUFBQyxPQUFPLEVBQUMsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLEdBQUcsRUFBRSxJQUFNLEtBQUssRUFBSSxDQUFDO0FBQ25HLE1BQU0sWUFBWSxHQUE0QixDQUFDLEtBQUssS0FBSyxvQkFBQyxjQUFjLGtCQUFDLEVBQUUsRUFBRSxFQUFFLEVBQUUsRUFBRSxDQUFDLEVBQUUsSUFBTSxLQUFLLEVBQUksQ0FBQztNQXFCaEcsU0FBUyxHQUF1QixLQUFLLENBQUMsVUFBVSxDQUFDLFNBQVMsU0FBUyxDQUFDLEtBQUssRUFBRSxHQUFHO0lBQ2xGLE1BQU0sRUFBRSxLQUFLLEVBQUUsSUFBSSxFQUFFLFFBQVEsRUFBRSxFQUFFLEVBQUUsSUFBSSxHQUFHLE1BQU0sRUFBRSxRQUFRLEVBQUUsRUFBRSxFQUFFLGdCQUFnQixLQUFjLEtBQUssRUFBZCxJQUFJLFVBQUssS0FBSyxFQUE3RixpRkFBcUYsQ0FBUSxDQUFDO0lBRXBHLE1BQU0sT0FBTyxHQUFHLFdBQVcsR0FBRyxLQUFLLENBQUMsRUFBRSxDQUFDLENBQUM7SUFDeEMsTUFBTSxVQUFVLEdBQUcsVUFBVSxHQUFHLEtBQUssRUFBRSxDQUFDO0lBQ3hDLE1BQU0sY0FBYyxHQUFHLGNBQWMsR0FBRyxLQUFLLEVBQUUsQ0FBQztJQUNoRCxNQUFNLE9BQU8sR0FBRyxXQUFXLEdBQUcsS0FBSyxFQUFFLENBQUM7SUFFdEMsUUFDRSxvQkFBQyxXQUFXLGtCQUFDLFFBQVEsRUFBRSxRQUFRLEVBQUUsRUFBRSxFQUFFLEVBQUUsSUFBTSxnQkFBZ0I7UUFDM0Qsb0JBQUMsY0FBYztZQUNiLG9CQUFDLFNBQVMsSUFBQyxNQUFNLEVBQUUsSUFBSSxFQUFFLE9BQU8sRUFBRSxPQUFPLEVBQUUsRUFBRSxFQUFFLE9BQU8sSUFDbkQsS0FBSyxDQUNJO1lBQ1gsSUFBSSxJQUFJLG9CQUFDLFFBQVEsSUFBQyxFQUFFLEVBQUUsVUFBVSxJQUFHLElBQUksQ0FBWSxDQUNyQztRQUNqQixvQkFBQyxLQUFLLGtCQUNKLEVBQUUsRUFBRSxPQUFPLEVBQ1gsSUFBSSxFQUFFLElBQUksRUFDVixVQUFVLEVBQUU7Z0JBQ1YsaUJBQWlCLEVBQUUsSUFBSSxDQUFDLEtBQUssSUFBSSxPQUFPLEVBQUUsSUFBSSxJQUFJLFVBQVUsQ0FBQztnQkFDN0Qsa0JBQWtCLEVBQUUsUUFBUSxJQUFJLGNBQWM7YUFDL0MsSUFDRyxJQUFJLElBQ1IsR0FBRyxFQUFFLEdBQUcsSUFDUjtRQUNELFFBQVEsS0FDUCxvQkFBQyxZQUFZLElBQUMsRUFBRSxFQUFFLGNBQWMsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQUUsQ0FBQyxFQUFFLElBQzVDLFFBQVEsQ0FDSSxDQUNoQixDQUNXLEVBQ2Q7QUFDSixDQUFDLEVBQUU7QUFFSCxTQUFTLENBQUMsU0FBUyxtQkFDakIsS0FBSyxFQUFFLFNBQVMsQ0FBQyxNQUFNLENBQUMsVUFBVSxFQUNsQyxJQUFJLEVBQUUsU0FBUyxDQUFDLE1BQU0sRUFDdEIsUUFBUSxFQUFFLFNBQVMsQ0FBQyxNQUFNLElBQ3ZCLEtBQUssQ0FBQyxTQUFTLENBQ25COzs7OyJ9