@cimpress/react-components
Version:
React components to support the MCP styleguide
68 lines • 3.48 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, { Children } from 'react';
import { Step } from './Step';
import cvar from './theme/cvar';
// listed from most severe to least
const stylePriority = ['error', 'warning', 'info', 'success'];
// map of style to its priority, 0 is highest priority
const priorityMap = stylePriority.reduce((agg, curr, index) => {
// eslint-disable-next-line no-param-reassign
agg[curr] = index;
return agg;
}, {});
export const StepGroup = (props) => {
const {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
typeName = 'StepGroup', children, active, partial, completed, connectorColor, index = 0, activeSubStep, className = '', style = {}, overrideStatus: statusOverride, onClick } = props, rest = __rest(props, ["typeName", "children", "active", "partial", "completed", "connectorColor", "index", "activeSubStep", "className", "style", "overrideStatus", "onClick"]);
// get all sub-step (Children.map can return null or undefined)
const overrides = Children.map(children, child => child.props.overrideStatus || 'success');
// find the most severe style that is being passed to the sub-steps by sorting based on style priority
const mostSevereOverride = overrides &&
overrides
.filter(o => o)
.map(o => priorityMap[o])
.sort()
.map(p => stylePriority[p])[0];
const overrideStatus = mostSevereOverride || statusOverride;
let renderedConnectorColor = connectorColor;
if (completed && overrideStatus) {
renderedConnectorColor = cvar(`color-background-${overrideStatus}`) || cvar('color-background');
}
const stepGroupStyle = css `
border-left: 2px dotted ${renderedConnectorColor};
margin: 4px 0 4px 9px;
padding-left: 9px;
flex-direction: column;
`;
const { activeColor, small, vertical } = rest, restProps = __rest(rest, ["activeColor", "small", "vertical"]);
return (React.createElement(React.Fragment, null,
React.createElement(Step, Object.assign({}, props, { overrideStatus: overrideStatus }), rest.contents),
React.createElement("div", Object.assign({ className: cx('crc-stepper-group', stepGroupStyle, className), style: Object.assign({}, style) }, restProps), Children.map(children, (step, stepIndex) => {
const controlProps = {
activeColor,
small: true,
vertical: true,
index: `${index}.${stepIndex}`,
};
if (active && activeSubStep === stepIndex) {
controlProps.active = true;
controlProps.partial = partial;
}
else if (completed || (active && activeSubStep && activeSubStep > stepIndex)) {
controlProps.completed = true;
}
return React.cloneElement(step, Object.assign(Object.assign({}, controlProps), step.props));
}))));
};
//# sourceMappingURL=StepGroup.js.map