@cimpress/react-components
Version:
React components to support the MCP styleguide
249 lines (241 loc) • 9.79 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TextArea = exports.TextField = exports.controlLabelCss = exports.formGroupActiveCss = exports.formGroupCss = void 0;
const react_1 = __importStar(require("react"));
const css_1 = require("@emotion/css");
const utils_1 = require("./utils");
const cvar_1 = __importDefault(require("./theme/cvar"));
const SuccessSvg_1 = __importDefault(require("./icons/SuccessSvg"));
const WarningSvg_1 = __importDefault(require("./icons/WarningSvg"));
const ErrorSvg_1 = __importDefault(require("./icons/ErrorSvg"));
const isTextTruthy = (val) => val !== undefined && val !== null && val.toString() !== '';
exports.formGroupCss = (0, css_1.css) `
position: relative;
margin-bottom: ${(0, cvar_1.default)('spacing-16')};
input {
box-shadow: none;
padding: ${(0, cvar_1.default)('spacing-16')};
transition: all 0.2s ease-out;
&:focus {
outline: none;
box-shadow: none;
border-color: ${(0, cvar_1.default)('color-border-interactive')};
}
}
textarea {
box-shadow: none;
padding: ${(0, cvar_1.default)('spacing-24')} ${(0, cvar_1.default)('spacing-16')} ${(0, cvar_1.default)('spacing-12')};
height: auto;
&:focus {
outline: none;
box-shadow: none;
border-color: ${(0, cvar_1.default)('color-border-interactive')};
}
}
label {
color: ${(0, cvar_1.default)('color-text-label')};
font-weight: normal;
position: absolute;
left: ${(0, cvar_1.default)('spacing-16')};
top: ${(0, cvar_1.default)('spacing-16')};
line-height: 16px;
margin-bottom: 0;
transition: all 0.2s ease-out;
z-index: 5;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 90%;
}
`;
exports.formGroupActiveCss = (0, css_1.css) `
input {
padding: ${(0, cvar_1.default)('spacing-24')} ${(0, cvar_1.default)('spacing-16')} ${(0, cvar_1.default)('spacing-8')};
}
textarea {
padding-top: ${(0, cvar_1.default)('spacing-24')};
}
label {
top: ${(0, cvar_1.default)('spacing-4')};
font-size: 12px;
}
`;
exports.controlLabelCss = (0, css_1.css) `
margin-bottom: 0;
font-size: inherit;
line-height: 1.5;
`;
const textAreaLabel = (0, css_1.css) `
top: 1px;
z-index: 5;
background-color: ${(0, cvar_1.default)('color-background')};
padding: 4px;
`;
const isRequired = (0, css_1.css) `
label:after {
content: ' *';
color: ${(0, cvar_1.default)('color-required-asterisk')};
}
`;
const isDisabled = (0, css_1.css) `
input {
color: ${(0, cvar_1.default)('color-text-label')};
background: ${(0, cvar_1.default)('color-textfield-disabled')};
}
`;
const formControl = (0, css_1.css) `
height: ${(0, cvar_1.default)('spacing-48')};
border: 1px solid ${(0, cvar_1.default)('color-border-default')};
`;
const inputGroup = (0, css_1.css) `
zindex: 0;
position: relative;
display: flex;
flex-wrap: wrap;
align-items: stretch;
width: 100%;
> .crc-text-field {
position: relative;
flex: 1 1 auto;
width: 1%;
margin-bottom: 0;
+ .crc-text-field {
margin-left: 1px;
}
}
`;
const inputGroupButton = (0, css_1.css) `
> button {
padding: ${(0, cvar_1.default)('spacing-12')} ${(0, cvar_1.default)('spacing-24')};
border-bottom-right-radius: ${(0, cvar_1.default)('spacing-2')};
border-top-right-radius: ${(0, cvar_1.default)('spacing-2')};
line-height: 18px;
height: ${(0, cvar_1.default)('spacing-48')};
border-bottom-left-radius: 0px;
border-top-left-radius: 0px;
}
`;
const helpBlock = (0, css_1.css) `
display: block;
margin-top: ${(0, cvar_1.default)('spacing-4')};
`;
const textfieldColorMap = {
success: 'color-border-success',
warning: 'color-border-warning',
error: 'color-border-error',
};
const statusIconSvg = {
success: react_1.default.createElement(SuccessSvg_1.default, null),
warning: react_1.default.createElement(WarningSvg_1.default, null),
error: react_1.default.createElement(ErrorSvg_1.default, null),
};
const statusCss = (status) => (0, css_1.css) `
input {
box-shadow: none;
padding-right: ${(0, cvar_1.default)('spacing-32')};
&:focus {
border-color: ${(0, cvar_1.default)(textfieldColorMap[status])};
}
}
.crc-text-field {
border-color: ${(0, cvar_1.default)(textfieldColorMap[status])};
}
svg {
position: absolute;
right: ${(0, cvar_1.default)('spacing-12')};
top: ${(0, cvar_1.default)('spacing-16')};
color: ${(0, cvar_1.default)(textfieldColorMap[status])};
transition: all 0.2s ease-out;
}
`;
const TextInputBase = react_1.default.forwardRef((_a, ref) => {
var { autoFocus, className, disabled, helpText, id, inputStyle, label, name, onBlur, onChange, onClick, onFocus, onKeyDown, placeholder, required, rightAddon, status, style, type, value, pattern } = _a, rest = __rest(_a, ["autoFocus", "className", "disabled", "helpText", "id", "inputStyle", "label", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "placeholder", "required", "rightAddon", "status", "style", "type", "value", "pattern"]);
const [float, setFloat] = (0, react_1.useState)(isTextTruthy(value));
const uniqueId = (0, utils_1.useMemoizedId)({ label: `${name}-${placeholder}-${label}`, id });
(0, react_1.useEffect)(() => {
setFloat(isTextTruthy(value));
}, [setFloat, value]);
const handleBlur = (e) => {
setFloat(isTextTruthy(value));
onBlur && onBlur(e);
};
const handleFocus = (e) => {
setFloat(true);
onFocus && onFocus(e);
};
const handleChange = (e) => {
const isValid = !pattern || !!e.target.value.match(new RegExp(`^${pattern}$`));
onChange && onChange(Object.assign(Object.assign({}, e), { isValid }));
};
const inputId = id || uniqueId;
const isTextArea = type === 'textarea';
const wrapperClassNames = (0, css_1.cx)('crc-text-input', exports.formGroupCss, className, {
[exports.formGroupActiveCss]: !!label && float,
[statusCss(status)]: !!status,
[isRequired]: !!required,
[isDisabled]: !!disabled,
});
const inputProps = Object.assign(Object.assign({}, rest), { autoFocus,
disabled, id: inputId, name, onBlur: handleBlur, onChange: handleChange, onClick, onFocus: handleFocus, onKeyDown,
placeholder,
required, style: inputStyle, value,
pattern, type: !isTextArea ? type : undefined });
const inputElement = isTextArea ? (react_1.default.createElement("textarea", Object.assign({}, inputProps, { className: (0, css_1.cx)(formControl, 'crc-text-field'), ref: ref }))) : (react_1.default.createElement("input", Object.assign({}, inputProps, { className: (0, css_1.cx)(formControl, 'crc-text-field'), ref: ref })));
const labelElement = label ? (react_1.default.createElement("label", { className: (0, css_1.cx)(exports.controlLabelCss, { [textAreaLabel]: isTextArea }), htmlFor: inputId, title: label }, label)) : null;
return (react_1.default.createElement("div", { className: wrapperClassNames, style: style },
react_1.default.createElement("div", { className: inputGroup },
inputElement,
labelElement,
rightAddon && react_1.default.createElement("span", { className: inputGroupButton }, rightAddon)),
!!status && statusIconSvg[status],
helpText ? react_1.default.createElement("small", { className: helpBlock }, helpText) : null));
});
TextInputBase.displayName = 'TextField';
TextInputBase.defaultProps = {
autoFocus: false,
className: '',
disabled: false,
required: false,
type: 'text',
value: '',
};
exports.TextField = react_1.default.forwardRef((props, ref) => (react_1.default.createElement(TextInputBase, Object.assign({}, props, { onChange: props.onChange, ref: ref }))));
exports.TextArea = react_1.default.forwardRef((props, ref) => (react_1.default.createElement(TextInputBase, Object.assign({}, props, { type: "textarea", onChange: props.onChange, ref: ref }))));
//# sourceMappingURL=TextInput.js.map