@activecollab/components
Version:
ActiveCollab Components
50 lines • 3.11 kB
JavaScript
import React, { useCallback } from "react";
import { StepActionButton } from "./StepActionButton";
import { StyledStepTitle, StyledStepHeaderLeft, StyledStepHeader, StyledCustomStep } from "./Styles";
import { Dialog } from "../Dialog";
import { IconButton } from "../IconButton";
import { ArrowBackMobileIcon, CancelCrossIcon } from "../Icons";
import { Caption2, Header3 } from "../Typography";
export const Step = _ref => {
let index = _ref.index,
isLast = _ref.isLast,
subtitle = _ref.subtitle,
title = _ref.title,
onNextButtonClick = _ref.onNextButtonClick,
onPreviousButtonClick = _ref.onPreviousButtonClick,
onClose = _ref.onClose,
children = _ref.children,
_ref$actionLabel = _ref.actionLabel,
actionLabel = _ref$actionLabel === void 0 ? "Proceed" : _ref$actionLabel,
_ref$shouldRenderNext = _ref.shouldRenderNextButton,
shouldRenderNextButton = _ref$shouldRenderNext === void 0 ? true : _ref$shouldRenderNext,
_ref$changingStepInPr = _ref.changingStepInProgress,
changingStepInProgress = _ref$changingStepInPr === void 0 ? false : _ref$changingStepInPr,
_ref$disableBackButto = _ref.disableBackButton,
disableBackButton = _ref$disableBackButto === void 0 ? false : _ref$disableBackButto,
customRightHeader = _ref.customRightHeader,
_ref$skip = _ref.skip,
skip = _ref$skip === void 0 ? false : _ref$skip;
const onActionButtonClick = useCallback(() => {
if (isLast && onClose) {
return onClose();
}
return onNextButtonClick && onNextButtonClick();
}, [isLast, onClose, onNextButtonClick]);
return !skip ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledStepHeader, null, /*#__PURE__*/React.createElement(StyledStepHeaderLeft, null, !disableBackButton && index && index > 0 ? /*#__PURE__*/React.createElement(IconButton, {
onClick: onPreviousButtonClick,
variant: "text gray",
className: "tw--ml-3 tw-mr-2",
disabled: changingStepInProgress
}, /*#__PURE__*/React.createElement(ArrowBackMobileIcon, null)) : null, /*#__PURE__*/React.createElement(StyledStepTitle, null, /*#__PURE__*/React.createElement(Caption2, null, title), /*#__PURE__*/React.createElement(Header3, null, subtitle))), customRightHeader ? customRightHeader : /*#__PURE__*/React.createElement(IconButton, {
onClick: onClose,
variant: "text gray",
disabled: changingStepInProgress
}, /*#__PURE__*/React.createElement(CancelCrossIcon, null))), /*#__PURE__*/React.createElement(Dialog.ContentDivider, null), shouldRenderNextButton ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dialog.Content, null, children), /*#__PURE__*/React.createElement(Dialog.ContentDivider, null), /*#__PURE__*/React.createElement(Dialog.Actions, null, /*#__PURE__*/React.createElement(StepActionButton, {
isLast: isLast,
actionLabel: actionLabel,
onNextButtonClick: onActionButtonClick
}))) : /*#__PURE__*/React.createElement(StyledCustomStep, null, children)) : null;
};
Step.displayName = "Step";
//# sourceMappingURL=Step.js.map