@hhgtech/hhg-components
Version:
Hello Health Group common components
261 lines (236 loc) • 10.2 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var tslib_es6 = require('./tslib.es6-af09a0ba.js');
var React = require('react');
var throttle = require('lodash/throttle');
var styled = require('@emotion/styled');
var miscTheme = require('./miscTheme.js');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefault(React);
var throttle__default = /*#__PURE__*/_interopDefault(throttle);
var styled__default = /*#__PURE__*/_interopDefault(styled);
const StyledSlider = styled__default["default"].div `
position: relative;
width: 100%;
& div[role='slider'] {
-webkit-text-size-adjust: none;
-webkit-user-select: none;
&:focus {
outline: none;
}
}
`;
const StyledStep = styled__default["default"].div `
position: absolute;
top: 19px;
width: 24px;
height: 24px;
color: ${miscTheme.theme.colors.white};
border: 2px solid ${miscTheme.theme.colors.white};
border-radius: 50%;
transform: translateY(-50%) translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background-color: ${miscTheme.theme.colors.white};
color: ${miscTheme.theme.colors.gray300};
border: 1px solid ${miscTheme.theme.colors.gray300};
&[data-is-active='true'] {
background-color: ${miscTheme.theme.colors.primaryBase};
color: ${miscTheme.theme.colors.white};
border: none;
}
`;
const StyledTrackContainer = styled__default["default"].div `
display: flex;
width: 100%;
height: 36px;
&[data-track-type='detail'] {
margin-top: 0;
}
&[data-track-type='detail'][data-step-passed='true'] > div {
border: 1px solid ${miscTheme.theme.colors.primaryBase};
height: 0px;
}
&[data-track-type='detail'] > div {
border: 1px solid ${miscTheme.theme.colors.gray200};
height: 0px;
}
`;
const StyledTrack = styled__default["default"].div `
width: 100%;
height: 5px;
align-self: center;
border-radius: 4px;
background-color: ${miscTheme.theme.colors.gray200};
`;
const StyledStepLabel = styled__default["default"].div `
position: absolute;
top: 32px;
min-width: 100px;
text-align: center;
color: ${miscTheme.theme.colors.gray500};
font-size: ${miscTheme.theme.sizes.fsCaption2};
font-weight: ${miscTheme.theme.sizes.fwBold};
&[data-step-passed='true'] {
color: ${miscTheme.theme.colors.gray800};
}
`;
const StyledBreadcrumbContainer = styled__default["default"].div `
display: flex;
align-items: center;
`;
const StyledBreadcrumbWrapper = styled__default["default"].div `
display: flex;
align-items: center;
font-size: ${miscTheme.theme.sizes.fsCaption2};
font-weight: ${miscTheme.theme.sizes.fwBold};
color: ${miscTheme.theme.colors.gray500};
cursor: pointer;
& > svg {
height: 10px;
width: 10px;
margin: 0 14px;
}
& > svg > path {
stroke: ${miscTheme.theme.colors.gray500};
}
&[data-selected='true'] {
color: ${miscTheme.theme.colors.primaryBase};
}
`;
const StyledDetailStep = styled__default["default"].div `
position: absolute;
left: 0;
top: 19px;
height: 24px;
cursor: pointer;
transform: translateY(-50%);
display: flex;
align-items: center;
padding: 8px;
background-color: ${miscTheme.theme.colors.white};
`;
const StyledDetailStepIndicator = styled__default["default"].div `
min-width: 24px;
height: 24px;
border: 2px solid ${miscTheme.theme.colors.white};
border-radius: 50%;
margin-right: 8px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background-color: ${miscTheme.theme.colors.white};
color: ${miscTheme.theme.colors.gray300};
border: 1px solid ${miscTheme.theme.colors.gray300};
&[data-is-active='true'] {
border: none;
background-color: ${miscTheme.theme.colors.primaryBase};
color: ${miscTheme.theme.colors.white};
}
`;
const StyledDetailStepIndicatorExternal = styled__default["default"].div `
display: flex;
align-items: center;
justify-content: center;
& > svg {
height: 20px;
width: 20px;
margin-right: 8px;
& > path {
stroke: ${miscTheme.theme.colors.gray500};
}
}
`;
const StyledDetailStepLabel = styled__default["default"].div `
color: ${miscTheme.theme.colors.gray400};
font-size: ${miscTheme.theme.sizes.fsCaption2};
font-weight: ${miscTheme.theme.sizes.fwBold};
margin-right: 8px;
flex: 0 0 auto;
&[data-step-passed='true'] {
color: ${miscTheme.theme.colors.gray800};
}
`;
const StyledDetailStepDescription = styled__default["default"].div `
position: absolute;
top: 32px;
font-weight: ${miscTheme.theme.sizes.fwRegular};
color: ${miscTheme.theme.colors.gray400};
padding-right: 16px;
`;
const ProgressBar = ({ type, numberOfStep, activeStep, labelPrefix, detailSteps, className, onChange, }) => {
const [trackLength, setTrackLength] = React.useState(0);
const Track = (_a) => {
var { trackClassName } = _a, props = tslib_es6.__rest(_a, ["trackClassName"]);
return (React__default["default"].createElement(StyledTrackContainer, Object.assign({}, props, { className: trackClassName }),
React__default["default"].createElement(StyledTrack, null)));
};
// step track
const Steps = ({ trackLength, activeStep, labelPrefix = 'Step', onChange, }) => {
return (React__default["default"].createElement(React__default["default"].Fragment, null, Array.from({ length: numberOfStep }, (v, i) => i).map((_, step) => (React__default["default"].createElement(StyledStep, { "data-is-active": step === activeStep, "data-label": step, style: { left: (step * trackLength) / (numberOfStep - 1) }, onClick: () => {
onChange && onChange(step);
}, key: step },
step + 1,
React__default["default"].createElement(StyledStepLabel, { "data-step-passed": step <= activeStep }, labelPrefix + ' ' + (step + 1)))))));
};
const stepTrack = (React__default["default"].createElement(StyledSlider, { className: className + ' progress-bar' },
React__default["default"].createElement(Track, null),
React__default["default"].createElement(Steps, { trackLength: trackLength, activeStep: activeStep, labelPrefix: labelPrefix, onChange: onChange })));
// breadcrumb
const breadcrumbIcon = (React__default["default"].createElement("svg", { "data-name": "Layer 1", viewBox: "0 0 5.5 9.5" },
React__default["default"].createElement("title", null, 'chevron-right'),
React__default["default"].createElement("path", { d: "M.75 8.75l4-4-4-4", fill: "none",
// stroke="#000"
strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5 })));
const breadcrumb = (React__default["default"].createElement(StyledBreadcrumbContainer, null, detailSteps &&
Array.from({ length: detailSteps.length }, (v, i) => i).map((_, step_index) => {
var _a;
return (React__default["default"].createElement(StyledBreadcrumbWrapper, { key: step_index, "data-selected": step_index === activeStep, onClick: () => {
onChange && onChange(step_index);
} }, (_a = detailSteps[step_index]) === null || _a === void 0 ? void 0 :
_a.text,
' ',
step_index < detailSteps.length - 1 && breadcrumbIcon));
})));
// detail track
const DetailStepsGroup = ({ detailSteps, activeStep, onChange, }) => {
return (React__default["default"].createElement(React__default["default"].Fragment, null, Array.from({ length: detailSteps.length }, (v, i) => i).map((step, step_index) => (React__default["default"].createElement(StyledDetailStep, { key: step_index, style: {
left: (100 / detailSteps.length) * step_index + '%',
width: 100 / detailSteps.length + '%',
}, onClick: () => {
onChange && onChange(step_index);
} },
detailSteps[step_index].icon ? (React__default["default"].createElement(StyledDetailStepIndicatorExternal, { onClick: () => {
onChange && onChange(step_index);
} }, detailSteps[step_index].icon)) : (React__default["default"].createElement(StyledDetailStepIndicator, { "data-is-active": step_index === activeStep, "data-label": step, onClick: () => {
onChange && onChange(step_index);
}, key: step_index }, step_index + 1)),
React__default["default"].createElement(StyledDetailStepLabel, { "data-step-passed": step_index < activeStep + 1 },
detailSteps[step_index].text,
React__default["default"].createElement(StyledDetailStepDescription, null, detailSteps[step_index].description)),
step_index < detailSteps.length - 1 && (React__default["default"].createElement(Track, { "data-step-passed": step_index < activeStep, trackClassName: 'progress-track', "data-track-type": "detail" })))))));
};
const detailTrack = (React__default["default"].createElement(StyledSlider, { className: className + ' progress-bar' },
React__default["default"].createElement(DetailStepsGroup, { activeStep: activeStep, detailSteps: detailSteps, onChange: onChange })));
const resizeTrack = React.useCallback(throttle__default["default"](() => {
const progressTrack = document.querySelector('.progress-bar');
progressTrack && setTrackLength(progressTrack.offsetWidth);
}, 1000), []);
React.useEffect(() => {
const track = document.querySelector('.progress-bar');
setTrackLength(track === null || track === void 0 ? void 0 : track.offsetWidth);
window.addEventListener('resize', resizeTrack, {
passive: true,
});
return () => {
window.removeEventListener('resize', resizeTrack);
};
}, []);
return ((type === 'step-track' && stepTrack) ||
(type === 'breadcrumb' && breadcrumb) ||
(type === 'detail-track' && detailTrack));
};
exports.ProgressBar = ProgressBar;