glass-app-manager

Version:
Informatica's Glass Framework CLI for bootstrapping
89 lines (73 loc) • 2.34 kB
JavaScript
// @flow

import React from "react";
import type { Node } from "react";

export type StepStatus = "current" | "enabled" | "disabled";

export type Props = {
    /**
     * The internal representation of the page. Usually zero-based indexes
     * like arrays. If `step` is not defined, then the label inside the circle
     * will be `index + 1`.
     */
    index: number,

    /**
     * Number to show inside of the circle. By default
     * this will be `index + 1`.
     */
    step?: number,

    /**
     * The status of the step in the roadmap.
     * This can either be enabled, current or disabled
     */
    status: StepStatus,

    /**
     * The name to show the user (e.g. Step 1, Step 2, etc.).
     * This can also be additional JSX to render.
     */
    name: Node,

    /**
     * Custom class selectors to pass.
     */
    className?: string,

    /**
     * Title attribute to add for the node.
     * Appears as tooltip on the roadmap step
     */
    title?: string,

    /**
     * The onClick handler when the user clicks on the step.
     * This callback is called only when the status of the step is NOT disabled.
     */
    onClick: () => void,
};

const getName = (name: Node): Node => {
    if (typeof name === "string") {
        return <span className="roadmap__step__label">{name}</span>;
    }

    return name;
};

const getClassNameByStatus = (status: StepStatus) => {
    return status === "current" ? "" : `roadmap__step--${status}`;
};

/**
 * A UI only component that renders a step and it's status.
 * This component should be rendered as a child of a `Roadmap` component.
 */
function RoadmapStep(props: Props) {
    return (
        <span
            onClick={props.status === "disabled" ? null : props.onClick}
            className={`roadmap__step ${getClassNameByStatus(props.status)}`}
            role="link"
            tabIndex={0}
            onKeyDown={() => {}}
            title={props.title}>
            <span className="roadmap__step__circle">{props.step || props.index + 1}</span>
            {props.name ? getName(props.name) : null}
        </span>
    );
}

RoadmapStep.displayName = "Roadmap.Step";
RoadmapStep.defaultProps = {
    status: "disabled",
};

export default RoadmapStep;