@cimpress/react-components
Version:
React components to support the MCP styleguide
320 lines (312 loc) • 13.3 kB
JavaScript
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;
};
import { css, cx } from '@emotion/css';
import React, { useEffect, useRef, useState } from 'react';
import useId from '@accessible/use-id';
import * as colors from '../colors';
import cvar from '../theme/cvar';
import CloseSvg from '../icons/CloseSvg';
import { CheckSvg } from '../icons/CheckSvg';
import PencilSvg from '../icons/PencilSvg';
import { useFeatureFlags } from '../FeatureFlags';
const inlineEditInactiveTextColorVariable = '--crc-inline-edit-inactive-text-color';
const inlineEditBorderVariable = '--crc-inline-edit-border';
const validationMessageStyles = css `
color: ${cvar('color-background-error')};
margin-top: 4px;
font-size: 12px;
`;
const rootStyles = css `
${`${inlineEditInactiveTextColorVariable}: ${colors.cobalt.base};`}
${`${inlineEditBorderVariable}: ${cvar('color-inline-edit-border')};`}
`;
const disabledStyles = css `
${`${inlineEditInactiveTextColorVariable}: ${colors.disabled.darker};`}
${`${inlineEditBorderVariable}: ${colors.disabled.darker};`}
`;
const marginBottomStyles = css `
margin-bottom: 20px;
`;
const resetButtonStyles = css `
background-color: transparent;
border-width: 0;
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
line-height: inherit;
padding: 0;
`;
const editButtonStyles = css `
display: flex;
align-items: center;
color: var(${inlineEditInactiveTextColorVariable});
padding: 4px;
border-bottom: 1px dashed var(${inlineEditBorderVariable});
text-align: left;
/* font size * line height + padding + border */
min-height: calc(1em * var(--crc-inline-edit-line-height) + 8px + 1px);
&:not(:disabled):hover {
cursor: pointer;
background-color: ${cvar('color-button-secondary-hover')};
> svg {
display: inline-block;
}
}
&:disabled {
cursor: not-allowed;
}
> svg {
display: none;
margin-left: 8px;
}
`;
const inputStyles = css `
border: 0;
padding: 4px;
border-bottom: 1px solid var(${inlineEditBorderVariable});
&::placeholder {
color: var(${inlineEditInactiveTextColorVariable});
}
&:focus {
outline: none;
}
`;
const measureTextStyles = css `
position: absolute;
top: -9999px;
left: -9999px;
visibility: hidden;
top: 0;
left: 0;
padding: 4px;
line-height: 1.5;
height: 0;
white-space: pre;
overflow-x: scroll;
> svg {
margin-left: 8px;
}
`;
const inputWrapperStyles = css `
display: flex;
align-items: flex-end;
`;
const inputButtonStyles = css `
display: inline-flex;
align-items: center;
background: ${cvar('color-button-default')};
color: ${cvar('color-inline-edit-border')};
font-size: 14px;
border-radius: 2px;
border: none;
padding: 5px;
margin-bottom: 1px;
box-shadow: 0px 1px 2px 0px rgba(58, 65, 76, 0.5);
&:hover {
cursor: pointer;
background-color: ${cvar('color-button-secondary-active')};
}
`;
const labelStyles = css `
position: relative;
display: block;
color: ${cvar('color-text-label')};
font-size: 14px;
line-height: 1.5;
`;
const redAsterixStyles = css `
color: ${cvar('color-required-asterisk')};
`;
const sizeDefaultsStyles = css `
margin-top: 0;
margin-bottom: 0;
line-height: var(--crc-inline-edit-line-height);
`;
const textStylesMap = {
default: css `
--crc-inline-edit-line-height: 1.5;
font-size: 14px;
`,
small: css `
--crc-inline-edit-line-height: 1.5;
font-size: 85%;
`,
h1: css `
--crc-inline-edit-line-height: 1.15;
font: ${cvar('text-h1')};
`,
h2: css `
--crc-inline-edit-line-height: 1.15;
font: ${cvar('text-h2')};
`,
h3: css `
--crc-inline-edit-line-height: 1.15;
font: ${cvar('text-h3')};
`,
h4: css `
--crc-inline-edit-line-height: 1.15;
font: ${cvar('text-h4')};
`,
h5: css `
--crc-inline-edit-line-height: 1.15;
font: ${cvar('text-h5')};
`,
h6: css `
--crc-inline-edit-line-height: 1.15;
font: ${cvar('text-h6')};
`,
};
const buttonsWrapperStyles = css `
margin-left: 8px;
display: flex;
gap: 4px;
`;
export function InlineEdit(_a) {
var { id, label, name, value, placeholder, onSave, onCancel, minWidth = 130, required, requiredWarningMessage = 'This Field is Required', size = 'default', validateInput, onEditStateChange } = _a, props = __rest(_a, ["id", "label", "name", "value", "placeholder", "onSave", "onCancel", "minWidth", "required", "requiredWarningMessage", "size", "validateInput", "onEditStateChange"]);
const { v17_noOuterSpacing } = useFeatureFlags();
const [showInput, setShowInput] = useState(false);
const [localValue, setLocalValue] = useState(() => value !== null && value !== void 0 ? value : '');
const [committedValue, setCommittedValue] = useState(() => localValue);
const editButtonRef = useRef(null);
const inputRef = useRef(null);
const measureTextRef = useRef(null);
const [inputWidth, setInputWidth] = useState(() => { var _a, _b; return (_b = (_a = editButtonRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0; });
const inputId = useId(id);
const [validationMessage, setValidationMessage] = useState();
function save(e) {
if (!validate(localValue)) {
return;
}
setCommittedValue(localValue);
setShowInput(false);
onSave === null || onSave === void 0 ? void 0 : onSave({ value: localValue, name }, e);
}
function cancel(e) {
setLocalValue(committedValue);
setShowInput(false);
onCancel === null || onCancel === void 0 ? void 0 : onCancel({ value: committedValue, name }, e);
}
const previousIsValid = useRef(true);
function validate(value) {
var _a, _b, _c, _d, _e;
const isValid = ((_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checkValidity()) !== null && _b !== void 0 ? _b : true) && (validateInput === null || validateInput === void 0 ? void 0 : validateInput(value)) == null;
previousIsValid.current = isValid;
const htmlIsValid = (_d = (_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.checkValidity()) !== null && _d !== void 0 ? _d : true;
const customIsValid = (validateInput === null || validateInput === void 0 ? void 0 : validateInput(value)) == null;
if (!htmlIsValid) {
if ((_e = inputRef.current) === null || _e === void 0 ? void 0 : _e.validity.valueMissing) {
setValidationMessage(requiredWarningMessage);
}
}
const customValidationMessage = validateInput === null || validateInput === void 0 ? void 0 : validateInput(value);
if (customValidationMessage) {
setValidationMessage(customValidationMessage);
}
if (htmlIsValid && customIsValid) {
setValidationMessage('');
}
return htmlIsValid && customIsValid;
}
function handleKeyDown(e) {
e.stopPropagation();
if (e.key === 'Enter') {
save(e);
}
if (e.key === 'Escape') {
cancel(e);
}
}
useEffect(() => {
var _a, _b;
setInputWidth((_b = (_a = editButtonRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0);
}, []);
useEffect(() => {
var _a, _b;
setInputWidth((_b = (_a = measureTextRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) !== null && _b !== void 0 ? _b : 0);
}, [localValue, size, minWidth]);
useEffect(() => {
var _a;
if (showInput && props.type === 'textarea' && inputRef.current && inputRef.current.textContent) {
// Set the cursor to the end of the text and scroll to the end
inputRef.current.setSelectionRange((_a = inputRef.current.textContent) === null || _a === void 0 ? void 0 : _a.length, inputRef.current.textContent.length);
inputRef.current.scrollTop = inputRef.current.scrollHeight;
}
}, [props.type, showInput]);
const onEditStateChangeRef = useRef(onEditStateChange);
useEffect(() => {
onEditStateChangeRef.current = onEditStateChange;
}, [onEditStateChange]);
useEffect(() => {
var _a;
(_a = onEditStateChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onEditStateChangeRef, showInput);
}, [showInput]);
useEffect(() => {
setLocalValue(value !== null && value !== void 0 ? value : '');
setCommittedValue(value !== null && value !== void 0 ? value : '');
}, [value]);
const sizeStyles = cx(textStylesMap[size], sizeDefaultsStyles);
let inputOrTextAreaElement;
if (props.type === 'textarea') {
const { type, onChange, onBlur, onKeyDown } = props, textAreaProps = __rest(props, ["type", "onChange", "onBlur", "onKeyDown"]);
inputOrTextAreaElement = (React.createElement("textarea", Object.assign({}, textAreaProps, { id: inputId, ref: inputRef, className: cx(sizeStyles, inputStyles), style: { width: inputWidth, minWidth },
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus: true, placeholder: placeholder, value: localValue, name: name, required: required, onBlur: e => {
validate(e.currentTarget.value);
onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
}, onChange: e => {
setLocalValue(e.currentTarget.value);
validate(e.currentTarget.value);
onChange === null || onChange === void 0 ? void 0 : onChange(e);
}, onKeyDown: e => {
handleKeyDown(e);
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
} })));
}
else {
const { onChange, onBlur, onKeyDown } = props, inputProps = __rest(props, ["onChange", "onBlur", "onKeyDown"]);
inputOrTextAreaElement = (React.createElement("input", Object.assign({}, inputProps, { id: inputId, ref: inputRef, className: cx(sizeStyles, inputStyles), style: { width: inputWidth, minWidth },
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus: true, placeholder: placeholder, value: localValue, name: name, required: required, onBlur: e => {
validate(e.currentTarget.value);
onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
}, onChange: e => {
setLocalValue(e.currentTarget.value);
validate(e.currentTarget.value);
onChange === null || onChange === void 0 ? void 0 : onChange(e);
}, onKeyDown: e => {
handleKeyDown(e);
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
} })));
}
const children = showInput ? (React.createElement("div", { className: inputWrapperStyles },
inputOrTextAreaElement,
React.createElement("div", { className: buttonsWrapperStyles },
React.createElement("button", { className: inputButtonStyles, onClick: save, "aria-label": "Save" },
React.createElement(CheckSvg, { color: cvar('color-inline-edit-border') })),
React.createElement("button", { className: inputButtonStyles, onClick: cancel, "aria-label": "Cancel" },
React.createElement(CloseSvg, { color: cvar('color-inline-edit-border'), width: "1em", height: "1em" }))))) : (React.createElement("button", { className: cx(resetButtonStyles, sizeStyles, editButtonStyles), onClick: () => setShowInput(true), style: { minWidth }, ref: editButtonRef, disabled: props.disabled },
localValue || placeholder,
(label === '' || label == null) && required && React.createElement("sup", { className: redAsterixStyles }, "*"),
React.createElement(PencilSvg, { size: "14px", color: cvar('color-inline-edit-border') })));
return (React.createElement("div", { className: cx(rootStyles, props.disabled && disabledStyles, !v17_noOuterSpacing && marginBottomStyles) },
label && (React.createElement("label", { className: labelStyles, htmlFor: inputId },
label,
required && React.createElement("sup", { className: redAsterixStyles }, "*"))),
children,
validationMessage && React.createElement("p", { className: validationMessageStyles }, validationMessage),
React.createElement("div", { ref: measureTextRef, className: cx(sizeStyles, measureTextStyles), style: { minWidth } },
localValue || placeholder,
(label === '' || label == null) && required && React.createElement("sup", { className: redAsterixStyles }, "*"),
React.createElement(PencilSvg, { size: "14px", color: cvar('color-inline-edit-border') }))));
}
//# sourceMappingURL=InlineEdit.js.map