@ucam/design-system
Version:
University of Cambridge Design System
48 lines (45 loc) • 6.42 kB
JavaScript
import React from 'react';
import InputBase from '@material-ui/core/InputBase';
import { experimentalStyled } from '@material-ui/core';
import { alpha } from '@material-ui/core/styles';
import PropTypes from 'prop-types';
/* eslint-disable react/prop-types */
const InputRoot = experimentalStyled(InputBase, {
shouldForwardProp: (prop) => prop !== 'characterWidth'
})(({ theme, characterWidth }) => {
const borderColor = '#878B8F';
return {
'& input': Object.assign({ lineHeight: 1.5, height: '1.5em', padding: 0 }, (characterWidth ? { width: `${characterWidth + 1}ch` } : {})),
border: `1px solid ${borderColor}`,
borderRadius: theme.shape.borderRadius,
padding: '11px 7px',
'&:hover': {
borderColor: theme.palette.text.primary
},
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
'&:hover': {
borderColor
}
},
'&.Mui-focused': {
borderColor: theme.palette.primary.main,
boxShadow: `0 0 0 0.2rem ${alpha(theme.palette.primary.main, 0.2)}`
},
'&.Mui-error': {
borderColor: theme.palette.error.main,
'&.Mui-focused': {
boxShadow: `0 0 0 0.2rem ${alpha(theme.palette.error.main, 0.2)}`
}
},
'&.Mui-disabled': {
borderColor: theme.palette.action.disabled
}
};
});
const Input = React.forwardRef(function Input(props, ref) {
return React.createElement(InputRoot, Object.assign({}, props, { ref: ref }));
});
Input.propTypes = Object.assign(Object.assign({}, InputBase.propTypes), { characterWidth: PropTypes.number });
export { Input as default };
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSW5wdXQuanMiLCJzb3VyY2VzIjpbIi9AdWNhbS9kZXNpZ24tc3lzdGVtL3NyYy9JbnB1dC9JbnB1dC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiLyogZXNsaW50LWRpc2FibGUgcmVhY3QvcHJvcC10eXBlcyAqL1xuaW1wb3J0IFJlYWN0LCB7IEZDIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IElucHV0QmFzZSwgeyBJbnB1dEJhc2VQcm9wcyB9IGZyb20gJ0BtYXRlcmlhbC11aS9jb3JlL0lucHV0QmFzZSc7XG5pbXBvcnQgeyBleHBlcmltZW50YWxTdHlsZWQgYXMgc3R5bGVkIH0gZnJvbSAnQG1hdGVyaWFsLXVpL2NvcmUnO1xuaW1wb3J0IHsgYWxwaGEgfSBmcm9tICdAbWF0ZXJpYWwtdWkvY29yZS9zdHlsZXMnO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcblxuLy8gV2UgZG9uJ3QgY3VycmVudGx5IHN1cHBvcnQgYSBzZWNvbmRhcnkgY29sb3VyIHBhbGV0dGUsIHNvIHdlIHJlbW92ZSB0aGlzIG9wdGlvbiBmb3Igbm93XG5leHBvcnQgdHlwZSBJbnB1dFByb3BzID0gT21pdDxJbnB1dEJhc2VQcm9wcywgJ2NvbG9yJz47XG5cbmV4cG9ydCBpbnRlcmZhY2UgQ3VzdG9tSW5wdXRQcm9wcyBleHRlbmRzIElucHV0UHJvcHMge1xuICAvKipcbiAgICogVXNlZCB0byBzcGVjaWZ5IGEgd2lkdGggb2YgdGhlIGlucHV0IGJhc2VkIG9uIHRoZSBleHBlY3RlZCBudW1iZXIgb2YgY2hhcmFjdGVyc1xuICAgKi9cbiAgY2hhcmFjdGVyV2lkdGg/OiBudW1iZXI7XG59XG5cbmNvbnN0IElucHV0Um9vdCA9IHN0eWxlZChJbnB1dEJhc2UsIHtcbiAgc2hvdWxkRm9yd2FyZFByb3A6IChwcm9wKSA9PiBwcm9wICE9PSAnY2hhcmFjdGVyV2lkdGgnXG59KTxDdXN0b21JbnB1dFByb3BzPigoeyB0aGVtZSwgY2hhcmFjdGVyV2lkdGggfSkgPT4ge1xuICBjb25zdCBib3JkZXJDb2xvciA9ICcjODc4QjhGJztcbiAgcmV0dXJuIHtcbiAgICAnJiBpbnB1dCc6IHtcbiAgICAgIGxpbmVIZWlnaHQ6IDEuNSxcbiAgICAgIGhlaWdodDogJzEuNWVtJyxcbiAgICAgIHBhZGRpbmc6IDAsXG4gICAgICAuLi4oY2hhcmFjdGVyV2lkdGggPyB7IHdpZHRoOiBgJHtjaGFyYWN0ZXJXaWR0aCArIDF9Y2hgIH0gOiB7fSlcbiAgICB9LFxuICAgIGJvcmRlcjogYDFweCBzb2xpZCAke2JvcmRlckNvbG9yfWAsXG4gICAgYm9yZGVyUmFkaXVzOiB0aGVtZS5zaGFwZS5ib3JkZXJSYWRpdXMsXG4gICAgcGFkZGluZzogJzExcHggN3B4JyxcbiAgICAnJjpob3Zlcic6IHtcbiAgICAgIGJvcmRlckNvbG9yOiB0aGVtZS5wYWxldHRlLnRleHQucHJpbWFyeVxuICAgIH0sXG4gICAgLy8gUmVzZXQgb24gdG91Y2ggZGV2aWNlcywgaXQgZG9lc24ndCBhZGQgc3BlY2lmaWNpdHlcbiAgICAnQG1lZGlhIChob3Zlcjogbm9uZSknOiB7XG4gICAgICAnJjpob3Zlcic6IHtcbiAgICAgICAgYm9yZGVyQ29sb3JcbiAgICAgIH1cbiAgICB9LFxuICAgICcmLk11aS1mb2N1c2VkJzoge1xuICAgICAgYm9yZGVyQ29sb3I6IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWluLFxuICAgICAgYm94U2hhZG93OiBgMCAwIDAgMC4ycmVtICR7YWxwaGEodGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW4sIDAuMil9YFxuICAgIH0sXG4gICAgJyYuTXVpLWVycm9yJzoge1xuICAgICAgYm9yZGVyQ29sb3I6IHRoZW1lLnBhbGV0dGUuZXJyb3IubWFpbixcbiAgICAgICcmLk11aS1mb2N1c2VkJzoge1xuICAgICAgICBib3hTaGFkb3c6IGAwIDAgMCAwLjJyZW0gJHthbHBoYSh0aGVtZS5wYWxldHRlLmVycm9yLm1haW4sIDAuMil9YFxuICAgICAgfVxuICAgIH0sXG4gICAgJyYuTXVpLWRpc2FibGVkJzoge1xuICAgICAgYm9yZGVyQ29sb3I6IHRoZW1lLnBhbGV0dGUuYWN0aW9uLmRpc2FibGVkXG4gICAgfVxuICB9O1xufSk7XG5cbmNvbnN0IElucHV0OiBGQzxDdXN0b21JbnB1dFByb3BzPiA9IFJlYWN0LmZvcndhcmRSZWYoZnVuY3Rpb24gSW5wdXQocHJvcHMsIHJlZikge1xuICByZXR1cm4gPElucHV0Um9vdCB7Li4ucHJvcHN9IHJlZj17cmVmfSAvPjtcbn0pO1xuXG5JbnB1dC5wcm9wVHlwZXMgPSB7XG4gIC4uLihJbnB1dEJhc2UgYXMgRkM8Q3VzdG9tSW5wdXRQcm9wcz4pLnByb3BUeXBlcyxcbiAgY2hhcmFjdGVyV2lkdGg6IFByb3BUeXBlcy5udW1iZXJcbn07XG5cbmV4cG9ydCBkZWZhdWx0IElucHV0O1xuIl0sIm5hbWVzIjpbInN0eWxlZCJdLCJtYXBwaW5ncyI6Ijs7Ozs7O0FBQUE7QUFpQkEsTUFBTSxTQUFTLEdBQUdBLGtCQUFNLENBQUMsU0FBUyxFQUFFO0lBQ2xDLGlCQUFpQixFQUFFLENBQUMsSUFBSSxLQUFLLElBQUksS0FBSyxnQkFBZ0I7Q0FDdkQsQ0FBQyxDQUFtQixDQUFDLEVBQUUsS0FBSyxFQUFFLGNBQWMsRUFBRTtJQUM3QyxNQUFNLFdBQVcsR0FBRyxTQUFTLENBQUM7SUFDOUIsT0FBTztRQUNMLFNBQVMsa0JBQ1AsVUFBVSxFQUFFLEdBQUcsRUFDZixNQUFNLEVBQUUsT0FBTyxFQUNmLE9BQU8sRUFBRSxDQUFDLEtBQ04sY0FBYyxHQUFHLEVBQUUsS0FBSyxFQUFFLEdBQUcsY0FBYyxHQUFHLENBQUMsSUFBSSxFQUFFLEdBQUcsRUFBRSxFQUMvRDtRQUNELE1BQU0sRUFBRSxhQUFhLFdBQVcsRUFBRTtRQUNsQyxZQUFZLEVBQUUsS0FBSyxDQUFDLEtBQUssQ0FBQyxZQUFZO1FBQ3RDLE9BQU8sRUFBRSxVQUFVO1FBQ25CLFNBQVMsRUFBRTtZQUNULFdBQVcsRUFBRSxLQUFLLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxPQUFPO1NBQ3hDOztRQUVELHNCQUFzQixFQUFFO1lBQ3RCLFNBQVMsRUFBRTtnQkFDVCxXQUFXO2FBQ1o7U0FDRjtRQUNELGVBQWUsRUFBRTtZQUNmLFdBQVcsRUFBRSxLQUFLLENBQUMsT0FBTyxDQUFDLE9BQU8sQ0FBQyxJQUFJO1lBQ3ZDLFNBQVMsRUFBRSxnQkFBZ0IsS0FBSyxDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUMsT0FBTyxDQUFDLElBQUksRUFBRSxHQUFHLENBQUMsRUFBRTtTQUNwRTtRQUNELGFBQWEsRUFBRTtZQUNiLFdBQVcsRUFBRSxLQUFLLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxJQUFJO1lBQ3JDLGVBQWUsRUFBRTtnQkFDZixTQUFTLEVBQUUsZ0JBQWdCLEtBQUssQ0FBQyxLQUFLLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxJQUFJLEVBQUUsR0FBRyxDQUFDLEVBQUU7YUFDbEU7U0FDRjtRQUNELGdCQUFnQixFQUFFO1lBQ2hCLFdBQVcsRUFBRSxLQUFLLENBQUMsT0FBTyxDQUFDLE1BQU0sQ0FBQyxRQUFRO1NBQzNDO0tBQ0YsQ0FBQztBQUNKLENBQUMsQ0FBQyxDQUFDO01BRUcsS0FBSyxHQUF5QixLQUFLLENBQUMsVUFBVSxDQUFDLFNBQVMsS0FBSyxDQUFDLEtBQUssRUFBRSxHQUFHO0lBQzVFLE9BQU8sb0JBQUMsU0FBUyxvQkFBSyxLQUFLLElBQUUsR0FBRyxFQUFFLEdBQUcsSUFBSSxDQUFDO0FBQzVDLENBQUMsRUFBRTtBQUVILEtBQUssQ0FBQyxTQUFTLG1DQUNULFNBQWtDLENBQUMsU0FBUyxLQUNoRCxjQUFjLEVBQUUsU0FBUyxDQUFDLE1BQU0sR0FDakM7Ozs7In0=