@makeen.io/material-ui-kit/distr/atoms/StepItem/index.js

Makeen UI components kit. Based on material-ui.

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";function _templateObject5() {var data = _taggedTemplateLiteral(["\n  fill: ", ";\n  font-size: 15px !important;\n  cursor: ", ";\n"]);_templateObject5 = function _templateObject5() {return data;};return data;}function _templateObject4() {var data = _taggedTemplateLiteral(["\n  stroke-width: 1.5px;\n  fill: ", ";\n  stroke: ", ";\n  cursor: ", ";\n  vector-effect: non-scaling-stroke;\n"]);_templateObject4 = function _templateObject4() {return data;};return data;}function _templateObject3() {var data = _taggedTemplateLiteral(["\n  border-left: ", ";\n  border-left-color: ", ";\n  height: ", ";\n"]);_templateObject3 = function _templateObject3() {return data;};return data;}function _templateObject2() {var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n"]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = _taggedTemplateLiteral(["\n  display: flex;\n  background-color: ", ";\n  padding-top: 1.4em;\n  padding-bottom: 1.4em;\n  margin: ", ";\n  align-items: ", ";\n\n  .StepItemNumberBox {\n    background-color: ", ";\n    font-weight: 600;\n    font-size: 15px;\n    padding: ", ";\n    width: 40px;\n    height: 40px;\n    text-align: center;\n    border: ", ";\n    border-color: ", ";\n    border-radius: ", ";\n    margin: ", ";\n    cursor: ", ";\n\n    span {\n      color: ", ";\n    }\n  }\n\n  .StepItemCircleBox {\n    background-color: ", ";\n    font-weight: 600;\n    font-size: 15px;\n    padding: ", ";\n    width: ", ";\n    height: ", ";\n    text-align: center;\n    border: ", ";\n    border-color: ", ";\n    border-radius: ", ";\n    margin: ", ";\n    cursor: ", ";\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    span {\n      color: ", ";\n    }\n  }\n\n  .StepItemTextWrapper {\n    cursor: ", ";\n    p {\n      &:first-child {\n        color: ", ";\n        font-size: 13px;\n        font-weight: 600;\n        margin-bottom: 0;\n      }\n      &:nth-child(2) {\n        color: ", ";\n        font-size: 12px;\n        font-weight: 400;\n        margin-top: 0;\n      }\n    }\n  }\n"]);_templateObject = function _templateObject() {return data;};return data;}import React, { useCallback } from "react";
import { Icon } from "./..";
import styled from "styled-components";
var WIDTH_OFFSET = 1200;
var changeRegularStepItemBackgroundColor = function changeRegularStepItemBackgroundColor(props) {
  if (props.variant !== "circle") {
    if (props.active) {
      return props.theme.palette.StepItem.activeBackground;
    } else
    {
      return props.theme.palette.StepItem.disabledBackground;
    }
  } else
  {
    return "transparent";
  }
};
var changeNumberBoxBackgroundColor = function changeNumberBoxBackgroundColor(props) {
  if (props.variant !== "circle") {
    if (props.active) {
      return props.theme.palette.StepItem.activeText;
    } else
    {
      return props.theme.palette.StepItem.disabledBox;
    }
  } else
  {
    return "#fff";
  }
};
var RegularStepItem = styled.div(_templateObject(),

function (props) {return changeRegularStepItemBackgroundColor(props);},


function (_ref) {var variant = _ref.variant;return variant === "circle" ? "0" : "0 0.2em";},
function (_ref2) {var variant = _ref2.variant;return variant === "circle" ? "center" : undefined;},


function (props) {return changeNumberBoxBackgroundColor(props);},


function (_ref3) {var variant = _ref3.variant;return variant === "circle" ? "5px 4px" : "10px";},



function (_ref4) {var variant = _ref4.variant;return variant === "circle" ? "4px solid" : undefined;},
function (_ref5) {var active = _ref5.active,completed = _ref5.completed,theme = _ref5.theme;return active || completed ?
  theme.palette.StepItem.activeSuccess :
  theme.palette.StepItem.disabledBasic;},
function (_ref6) {var variant = _ref6.variant;return variant == "circle" ? "50%" : "4px";},
function (_ref7) {var variant = _ref7.variant;return variant === "circle" ? "auto 0 auto 0" : "auto 16px auto 24px";},
function (_ref8) {var isClickable = _ref8.isClickable;return isClickable ? "pointer" : "not-allowed";},


function (_ref9) {var active = _ref9.active,theme = _ref9.theme;return active ?
  theme.palette.StepItem.activeBackground :
  theme.palette.StepItem.disabledText;},




function (props) {return changeNumberBoxBackgroundColor(props);},


function (_ref10) {var variant = _ref10.variant;return variant === "circle" ? "5px 4px" : "10px";},
function (_ref11) {var width = _ref11.width;return width ? "".concat(width, "px") : "40px";},
function (_ref12) {var width = _ref12.width;return width ? "".concat(width, "px") : "40px";},

function (_ref13) {var variant = _ref13.variant,borderWidth = _ref13.borderWidth;return variant === "circle" ? "".concat(
  borderWidth ? borderWidth : 2, "px solid") :
  undefined;},
function (_ref14) {var active = _ref14.active,completed = _ref14.completed,theme = _ref14.theme;return active || completed ?
  theme.palette.StepItem.activeSuccess :
  theme.palette.StepItem.disabledBasic;},
function (_ref15) {var variant = _ref15.variant;return variant == "circle" ? "50%" : "4px";},
function (_ref16) {var variant = _ref16.variant;return variant === "circle" ? "auto 0 auto 0" : "auto 16px auto 24px";},
function (_ref17) {var isClickable = _ref17.isClickable;return isClickable ? "pointer" : "not-allowed";},






function (_ref18) {var active = _ref18.active,theme = _ref18.theme;return active ?
  theme.palette.StepItem.activeBackground :
  theme.palette.StepItem.disabledText;},




function (_ref19) {var isClickable = _ref19.isClickable;return isClickable ? "pointer" : "not-allowed";},


function (_ref20) {var active = _ref20.active,theme = _ref20.theme;return active ?
  theme.palette.StepItem.activeText :
  theme.palette.StepItem.disabledText;},





function (_ref21) {var theme = _ref21.theme;return theme.palette.StepItem.disabledText;});







var CircleStepItemWrapper = styled.div(_templateObject2());



var StepItemConnector = styled.div(_templateObject3(),
function (_ref22) {var first = _ref22.first,widthOffset = _ref22.widthOffset;return first ? undefined : "".concat(widthOffset || 84, "px solid");},
function (_ref23) {var active = _ref23.active,completed = _ref23.completed,theme = _ref23.theme;return active || completed ?
  theme.palette.StepItem.activeSuccess :
  theme.palette.StepItem.disabledBasic;},
function (_ref24) {var widthOffsetStroke = _ref24.widthOffsetStroke;return "".concat(widthOffsetStroke || 2, "px");});

var PolylineWrapper = styled.path(_templateObject4(),

function (_ref25) {var active = _ref25.active,theme = _ref25.theme;return active ? theme.palette.infoLight.main : "#fff";},
function (_ref26) {var active = _ref26.active,theme = _ref26.theme;return active ? theme.palette.infoLight.contrastText : "#ccc";},
function (_ref27) {var isClickable = _ref27.isClickable;return isClickable ? "pointer" : "not-allowed";});


var TextWrapper = styled.text(_templateObject5(),
function (_ref28) {var active = _ref28.active,theme = _ref28.theme;return active ?
  theme.palette.infoLight.contrastText :
  theme.palette.text.secondary;},

function (_ref29) {var isClickable = _ref29.isClickable;return isClickable ? "pointer" : "not-allowed";});

var calculatePoints = function calculatePoints(count, width, first, widthOffset) {
  if (width === 0 || width > (widthOffset || WIDTH_OFFSET)) {
    return first ? "M4,0 L196,0 Q 202 0 204 4 L218,31 Q 220 35 218 39\n        L202,66 Q 200 70 196,70\n        L6,70 Q 0 70 0 64\n        L0,6 Q 0 0 6 0" : "M6,0 L196,0 Q 202 0 204 4 L218,31 Q 220 35 218 39\n        L202,66 Q 200 70 196,70\n        L6,70 Q 0 70 4 64 L4,64\n        L16,40 Q 18 35 16 32\n        L2,4 Q 0 0 6 0";









  } else
  {
    var itemWidth = width / count - 20;
    var height = itemWidth / 3;
    var nip = itemWidth / 10;
    var semiHeight = height / 2;
    return first ? "M4,0 L".concat(
    itemWidth - 4, ",0 Q").concat(itemWidth, " 0 ").concat(itemWidth + 2, " 4\n      L").concat(
    itemWidth + nip - 2, ",").concat(semiHeight - 4, " Q ").concat(itemWidth + nip, " ").concat(semiHeight, " ").concat(itemWidth + nip - 2, ",").concat(semiHeight + 4, "\n      L").concat(
    itemWidth + 4, ",").concat(height - 4, " Q").concat(itemWidth, " ").concat(height, " ").concat(itemWidth - 2, " ").concat(height, "\n      L4,").concat(
    height, " Q0 ").concat(height, " 0 ").concat(height - 6, "\n      L0,4 Q 0 0 4 0") : "M4,0 L".concat(

    itemWidth - 4, ",0 Q").concat(itemWidth, " 0 ").concat(itemWidth + 2, " 4\n        L").concat(
    itemWidth + nip - 2, ",").concat(semiHeight - 4, " Q ").concat(itemWidth + nip, " ").concat(semiHeight, " ").concat(itemWidth + nip - 2, ",").concat(semiHeight + 4, "\n        L").concat(
    itemWidth + 4, ",").concat(height - 4, " Q").concat(itemWidth, " ").concat(height, " ").concat(itemWidth - 2, " ").concat(height, "\n        L4,").concat(
    height, " Q0 ").concat(height, " 4 ").concat(height - 6, "\n        L").concat(
    nip - 4, ",").concat(semiHeight + 6, " Q ").concat(nip, " ").concat(semiHeight, " ").concat(nip - 4, " ").concat(semiHeight - 6, "\n        L2,4 Q 0 0 4 0");

  }
};
var calculateDimensions = function calculateDimensions(count, width, widthOffset) {
  if (width === 0 || width > (widthOffset || WIDTH_OFFSET)) {
    return [225, 70];
  } else
  {
    var itemWidth = width / count;
    return [itemWidth, itemWidth / 3];
  }
};
var checkStepItemIcon = function checkStepItemIcon(count) {
  if (count)
  return count.toString();
};
export default (function (props) {var
    first = props.first,last = props.last,label = props.label,labelSecondary = props.labelSecondary,active = props.active,completed = props.completed,count = props.count,width = props.width,widthOffset = props.widthOffset,isClickable = props.isClickable,handleClick = props.handleClick,variant = props.variant,borderWidth = props.borderWidth,widthOffsetStroke = props.widthOffsetStroke,activeStepIconProps = props.activeStepIconProps,completedStepIconProps = props.completedStepIconProps;
  var points = calculatePoints(count, width, first, widthOffset);var _calculateDimensions =
    calculateDimensions(count, width, widthOffset),_calculateDimensions2 = _slicedToArray(_calculateDimensions, 2),w = _calculateDimensions2[0],h = _calculateDimensions2[1];
  var clickHandler = useCallback(function () {
    if (handleClick && isClickable) {
      handleClick(props);
    }
  }, [handleClick, isClickable]);
  switch (variant) {
    case "arrow":
      return /*#__PURE__*/React.createElement("svg", { style: { overflow: "visible" }, width: "".concat(w), height: "".concat(h), version: "1.1", xmlns: "http://www.w3.org/2000/svg", onClick: clickHandler }, /*#__PURE__*/
      React.createElement(PolylineWrapper, { active: active, d: points, isClickable: isClickable }), /*#__PURE__*/
      React.createElement(TextWrapper, { x: w / 2.3 + 3, y: w / 5.4, active: active, textAnchor: "middle", isClickable: isClickable }, label));
    case "circle":
      return /*#__PURE__*/React.createElement(CircleStepItemWrapper, null, /*#__PURE__*/
      React.createElement(RegularStepItem, { label: label, onClick: clickHandler, isClickable: isClickable, active: active, completed: completed, borderWidth: borderWidth, variant: "circle", width: width }, /*#__PURE__*/
      React.createElement(StepItemConnector, { first: first || false, completed: completed || false, active: active || false, widthOffset: widthOffset, widthOffsetStroke: widthOffsetStroke }), /*#__PURE__*/
      React.createElement("div", { className: "StepItemCircleBox" }, /*#__PURE__*/
      React.createElement(React.Fragment, null, activeStepIconProps && active && /*#__PURE__*/React.createElement(Icon, { group: activeStepIconProps.group, fill: activeStepIconProps.fill, name: activeStepIconProps.name, width: activeStepIconProps.width, height: activeStepIconProps.height, viewBox: activeStepIconProps.viewBox })), /*#__PURE__*/
      React.createElement(React.Fragment, null, completedStepIconProps && completed && !active && /*#__PURE__*/React.createElement(Icon, { width: completedStepIconProps.width, height: completedStepIconProps.height, viewBox: completedStepIconProps.viewBox, group: completedStepIconProps.group, fill: completedStepIconProps.fill, name: completedStepIconProps.name })))));
    default:
      return /*#__PURE__*/React.createElement(RegularStepItem, { label: label, onClick: clickHandler, isClickable: isClickable, active: active, variant: "regular" }, /*#__PURE__*/
      React.createElement("div", { className: "StepItemNumberBox" }, /*#__PURE__*/
      React.createElement("span", null, count && checkStepItemIcon(count))), /*#__PURE__*/
      React.createElement("div", { className: "StepItemTextWrapper" }, /*#__PURE__*/
      React.createElement("p", null, label), /*#__PURE__*/
      React.createElement("p", null, labelSecondary)));}

});
//# sourceMappingURL=index.js.map