@keyvaluesystems/react-stepper
Version:
A fully customizable stepper component
19 lines • 1.42 kB
JavaScript
import React from "react";
import whiteTick from "../assets/white-tick.svg";
import styles from "./styles.module.scss";
/**
* Represents each node in the stepper
* Handles style addition to each node separately
* Handles click event of each node
* @param {INodeProps} props
* @returns {FC}
*/
var Node = function (props) {
var step = props.step, renderNode = props.renderNode, index = props.index, currentStepIndex = props.currentStepIndex, handleStepClick = props.handleStepClick, showCursor = props.showCursor, getStyles = props.getStyles, nodeStyle = props.nodeStyle;
var isCompleted = step.completed;
var isActive = index === currentStepIndex;
return (React.createElement("div", { className: "".concat(styles.eachNode, "\n ").concat(showCursor && styles.cursorPointer, "\n ").concat(isActive && styles.activeStepNode, "\n ").concat(!isCompleted && !isActive && styles.inactiveStepNode, "\n ").concat(isCompleted && !isActive && styles.completedStepNode, "\n "), style: nodeStyle, onClick: function () { return handleStepClick && handleStepClick(); }, role: "presentation", id: "stepper-node" }, (renderNode && renderNode(step, index))
|| (React.createElement(React.Fragment, null, isCompleted ? (React.createElement("img", { src: whiteTick, className: styles.whiteTickImg, alt: "" })) : (index + 1)))));
};
export default Node;
//# sourceMappingURL=node.js.map