sp-app-react/lib/SPWorkflowSteps.js

React based Controls and Utilities for building applications in SharePoint

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SPWorkflowSteps = void 0;
var react_1 = __importDefault(require("react"));
var react_2 = require("@fluentui/react");
var radium_1 = __importDefault(require("radium"));
function SPWorkflowSteps(props) {
    var stepStyle = {
        boxShadow: react_2.DefaultEffects.elevation8,
    };
    var getActiveSteps = function () {
        return props.workflowSteps.filter(function (i) { return i.condition ? i.condition(props.state) : true; });
    };
    var isStepBeforeCurrentStep = function (stepName) {
        var stepNames = props.workflowSteps.map(function (i) { return i.name; });
        var currentStepIndex = stepNames.indexOf(props.currentStep);
        return stepNames.indexOf(stepName) < currentStepIndex;
    };
    var isStepAfterCurrentStep = function (stepName) {
        var stepNames = props.workflowSteps.map(function (i) { return i.name; });
        var currentStepIndex = stepNames.indexOf(props.currentStep);
        return stepNames.indexOf(stepName) > currentStepIndex;
    };
    return react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement(react_2.Stack, { horizontal: true, className: "step-ctr" }, getActiveSteps().map(function (i, index) {
            return react_1.default.createElement(SPWorkflowStep, { key: index, item: i, index: index, isStepBeforeCurrentStep: isStepBeforeCurrentStep, getActiveSteps: getActiveSteps, parentProps: props });
        }
        // <Stack key={index} horizontal verticalAlign="center">
        //   <Stack style={i.name == props.currentStep ? styles.workflowStep : {...styles.workflowStep, ...styles.activeStep}} onClick={() => props.onClick(i)} horizontal verticalAlign="center">
        //     <Text style={{fontWeight: 600, color: i.name == props.currentStep ? "white" : "auto"}}>
        //       {i.name}
        //       {/* {isStepAfterCurrentStep(i.name) ? "+" : null}         */}
        //     </Text>
        //     {i.name == props.currentStepAssigned ? <Icon iconName="Error" style={{marginLeft:10}}></Icon> : null}
        //     {i.name == props.currentStep && props.currentStepRejected ? <Icon iconName="ErrorBadge" style={{marginLeft:10}}></Icon> : null}
        //     {isStepBeforeCurrentStep(i.name) ? <Icon iconName="Accept" style={{color: "green", fontWeight: 600, marginLeft:10}}></Icon> : null}
        //   </Stack>
        //   {index+1 != getActiveSteps().length ? <Icon iconName="ChevronRight"></Icon> : null}
        // </Stack> 
        )));
}
exports.SPWorkflowSteps = SPWorkflowSteps;
var SPWorkflowStep = radium_1.default(function (props) {
    var item = props.item, index = props.index, isStepBeforeCurrentStep = props.isStepBeforeCurrentStep, getActiveSteps = props.getActiveSteps, parentProps = props.parentProps;
    var styles = {
        workflowStep: {
            boxShadow: react_2.DefaultEffects.elevation8,
            color: "#605e5c",
            backgroundColor: "#ffffff",
            margin: "10px",
            padding: "15px",
            cursor: "pointer",
            maxWidth: "300px",
            transitionProperty: "background, border, border-color",
            transitionDuration: "200ms",
            transitionTimingFunction: "cubic-bezier(0.4, 0, 0.23, 1)",
            ":hover": {
                backgroundColor: "#f3f2f1"
            }
        },
        activeStep: {
            color: "white",
            backgroundColor: "#0078d4",
            ":hover": {
                backgroundColor: "#106ebe"
            }
        },
        rejectedStep: {
            color: "white",
            backgroundColor: "#a4262c",
            ":hover": {
                backgroundColor: "#932227"
            }
        },
    };
    return react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement(react_2.Stack, { key: index, horizontal: true, verticalAlign: "center" },
            react_1.default.createElement(react_2.Stack
            //style={item.name == parentProps.currentStep ? styles.workflowStep : {...styles.workflowStep, ...styles.activeStep}}           
            , { 
                //style={item.name == parentProps.currentStep ? styles.workflowStep : {...styles.workflowStep, ...styles.activeStep}}           
                onClick: function () { return parentProps.onClick(item); }, horizontal: true, verticalAlign: "center" },
                react_1.default.createElement("div", { style: item.name == parentProps.currentStep ? [styles.workflowStep, parentProps.currentStepRejected ? styles.rejectedStep : styles.activeStep] : styles.workflowStep },
                    react_1.default.createElement(react_2.Text, { style: { fontWeight: 600, color: item.name == parentProps.currentStep ? "white" : "#323130" } }, item.name),
                    item.name == parentProps.currentStepAssigned ? react_1.default.createElement(react_2.Icon, { iconName: "Error", style: { marginLeft: 10 } }) : null,
                    item.name == parentProps.currentStep && parentProps.currentStepRejected ? react_1.default.createElement(react_2.Icon, { iconName: "ErrorBadge", style: { marginLeft: 10 } }) : null,
                    isStepBeforeCurrentStep(item.name) ? react_1.default.createElement(react_2.Icon, { iconName: "Accept", style: { color: "green", fontWeight: 600, marginLeft: 10 } }) : null)),
            index + 1 != getActiveSteps().length ? react_1.default.createElement(react_2.Icon, { iconName: "ChevronRight" }) : null));
});