@krowdy-ui/views/Stepper/Stepper.js

React components that implement Google's Material Design.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _clsx = _interopRequireDefault(require("clsx"));

var _core = require("@krowdy-ui/core");

var _icons = require("@material-ui/icons");

var _StepperContainer = _interopRequireDefault(require("./StepperContainer"));

var _StepConnector = _interopRequireDefault(require("./StepConnector"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var Step = function Step(_ref) {
  var active = _ref.active,
      completed = _ref.completed,
      Component = _ref.Component,
      disabled = _ref.disabled,
      isCompleted = _ref.isCompleted,
      label = _ref.label,
      onSelect = _ref.onSelect,
      index = _ref.index,
      orientation = _ref.orientation,
      activeIndex = _ref.activeIndex,
      totalSteps = _ref.totalSteps,
      clickable = _ref.clickable,
      spacing = _ref.spacing,
      height = _ref.height,
      hiddenLabel = _ref.hiddenLabel,
      absolute = _ref.absolute;
  var classes = useStyles({
    absolute: absolute,
    active: active,
    height: height,
    index: index,
    orientation: orientation,
    spacing: spacing,
    totalSteps: totalSteps
  });
  return /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({
    className: (0, _clsx["default"])(classes.step, index && classes.marginStep, clickable && classes.buttonClickable)
  }, clickable && !isCompleted ? {
    onClick: onSelect
  } : {}), /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _clsx["default"])(classes.circle, !isCompleted && [active && classes.selected, disabled && classes.disabled])
  }, completed || isCompleted ? /*#__PURE__*/_react["default"].createElement(_icons.CheckCircleRounded, {
    className: classes.doneStep,
    color: "primary"
  }) : /*#__PURE__*/_react["default"].createElement(_core.Typography, {
    className: classes.indexText,
    color: active ? 'primary' : 'inherit',
    variant: "caption"
  }, index + 1)), /*#__PURE__*/_react["default"].createElement(_core.Typography, {
    className: (0, _clsx["default"])(classes.stepLabel, active && !isCompleted && classes.textActive),
    variant: active && !isCompleted ? 'h6' : 'body2'
  }, active ? label : !hiddenLabel ? label : ''), index !== totalSteps - 1 && orientation ? /*#__PURE__*/_react["default"].createElement("span", {
    className: (0, _clsx["default"])(classes.conector, activeIndex <= index && !isCompleted && classes.disabledLine)
  }) : null);
};

var Stepper = function Stepper(_ref2) {
  var _ref2$steps = _ref2.steps,
      steps = _ref2$steps === void 0 ? [] : _ref2$steps,
      _ref2$orientation = _ref2.orientation,
      orientation = _ref2$orientation === void 0 ? 'vertical' : _ref2$orientation,
      _ref2$activeIndex = _ref2.activeIndex,
      activeIndex = _ref2$activeIndex === void 0 ? 1 : _ref2$activeIndex,
      _ref2$clickable = _ref2.clickable,
      clickable = _ref2$clickable === void 0 ? false : _ref2$clickable,
      _ref2$onChange = _ref2.onChange,
      onChange = _ref2$onChange === void 0 ? function () {} : _ref2$onChange,
      isCompleted = _ref2.isCompleted,
      height = _ref2.height,
      _ref2$spacing = _ref2.spacing,
      spacing = _ref2$spacing === void 0 ? 24 : _ref2$spacing,
      absolute = _ref2.absolute;
  // const orientation = 'vertical'
  var classes = useContainerStyles({
    orientation: orientation,
    totalSteps: steps.length
  });

  var _useState = (0, _react.useState)(orientation !== 'vertical'),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      tooLarge = _useState2[0],
      setTooLarge = _useState2[1];

  var containerRef = (0, _react.useRef)();

  var _handleSelectStep = (0, _react.useCallback)(function (step) {
    return function () {
      onChange(step);
    };
  }, [onChange]);

  (0, _react.useEffect)(function () {
    if (orientation === 'vertical') return;

    if (steps.length > 1) {
      var W = containerRef.current.offsetWidth;
      var _w = 60;
      var v = (W - _w * steps.length) / (steps.length - 1);
      setTooLarge(v <= 10);
    } else {
      setTooLarge(false);
    } // eslint-disable-next-line react-hooks/exhaustive-deps

  }, []);
  return /*#__PURE__*/_react["default"].createElement(_StepperContainer["default"], {
    height: height,
    orientation: orientation
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.container,
    ref: containerRef
  }, steps && steps.length ? steps.map(function (_ref3, index) {
    var _id = _ref3._id,
        label = _ref3.label;
    var completed = activeIndex > index;
    var disabled = activeIndex < index;
    var Component = clickable ? 'button' : 'div';
    var active = activeIndex === index;
    return /*#__PURE__*/_react["default"].createElement(Step, {
      absolute: absolute,
      active: active,
      activeIndex: activeIndex,
      clickable: clickable,
      completed: completed,
      Component: Component,
      disabled: disabled,
      height: height,
      hiddenLabel: tooLarge,
      index: index,
      isCompleted: isCompleted,
      key: _id,
      label: label,
      onSelect: _handleSelectStep(index),
      orientation: orientation,
      spacing: spacing,
      totalSteps: steps.length
    });
  }) : null, absolute && steps.slice(0, steps.length - 1).map(function (step, index) {
    return /*#__PURE__*/_react["default"].createElement(_StepConnector["default"], {
      activeIndex: activeIndex,
      index: index,
      key: "connector-".concat(index),
      totalSteps: steps.length
    });
  })));
};

var useContainerStyles = (0, _core.makeStyles)(function () {
  return {
    container: {
      alignItems: 'start',
      display: 'flex',
      flexDirection: function flexDirection(_ref4) {
        var orientation = _ref4.orientation;
        return orientation === 'vertical' ? 'column' : 'row';
      },
      height: function height(_ref5) {
        var orientation = _ref5.orientation;
        return orientation === 'vertical' ? '100%' : 60;
      },
      justifyContent: function justifyContent(_ref6) {
        var orientation = _ref6.orientation,
            height = _ref6.height;
        return orientation === 'vertical' && !height ? 'inherit' : 'space-between';
      },
      justifyItems: 'start',
      position: 'relative'
    }
  };
}, {
  name: 'Stepper'
});
var useStyles = (0, _core.makeStyles)(function (theme) {
  return {
    buttonClickable: {
      background: 'none',
      border: 'none',
      cursor: 'pointer',
      margin: 0,
      padding: 0
    },
    circle: {
      alignItems: 'center',
      borderRadius: '50%',
      display: 'flex',
      height: 24,
      justifyContent: 'center',
      // position      : 'relative',
      width: 24
    },
    conector: {
      background: theme.palette.primary.main,
      height: function height(_ref7) {
        var orientation = _ref7.orientation,
            _height = _ref7.height,
            spacing = _ref7.spacing;
        return orientation === 'vertical' ? _height ? 'calc(100% - 24px - 4px)' : spacing : 2;
      },
      left: function left(_ref8) {
        var orientation = _ref8.orientation;
        return orientation === 'horizontal' ? 'calc(50% + 14px)' : 12;
      },
      position: 'absolute',
      top: function top(_ref9) {
        var orientation = _ref9.orientation,
            height = _ref9.height,
            spacing = _ref9.spacing;
        return orientation === 'vertical' ? height ? 'calc(100% - (100% - 24px - 4px)/ 2)' : spacing / 2 + 24 + 4 : 12;
      },
      visibility: function visibility(_ref10) {
        var absolute = _ref10.absolute;
        return absolute ? 'hidden' : 'visible';
      },
      width: function width(_ref11) {
        var orientation = _ref11.orientation;
        return orientation === 'horizontal' ? 'calc(100% - 28px)' : 2;
      }
    },
    disabled: {
      border: "3px solid ".concat(theme.palette.grey[400]),
      color: theme.palette.grey[400]
    },
    disabledLine: {
      background: theme.palette.grey[400] // height    : ({ orientation, totalSteps }) => orientation ==='vertical' ? `calc(100% + (100% / ${totalSteps - 1}) + 2px)` : 2,
      // top       : ({ orientation }) => orientation ==='vertical' ? 'calc(100% + 6px)' : 10

    },
    doneStep: {
      fontSize: 24
    },
    indexText: {
      alignItems: 'center',
      // background    : ({ active }) => active ? theme.palette.primary.main: '',
      background: function background(_ref12) {
        var active = _ref12.active;
        return active ? "linear-gradient(to top, ".concat(theme.palette.primary[100], " 0%, ").concat(theme.palette.primary[100], " 50%, white 40%)") : '';
      },
      borderRadius: '50%',
      display: 'flex',
      fontWeight: 500,
      height: 18,
      justifyContent: 'center',
      // opacity       : ({ active }) => active ? '20%': null,
      width: 18
    },
    selected: {
      border: "3px solid ".concat(theme.palette.primary.main)
    },
    step: {
      alignItems: 'center',
      display: 'flex',
      flex: function flex(_ref13) {
        var orientation = _ref13.orientation,
            height = _ref13.height,
            absolute = _ref13.absolute;
        return absolute ? undefined : orientation === 'vertical' && !height ? 'inherit' : 1;
      },
      flexDirection: function flexDirection(_ref14) {
        var orientation = _ref14.orientation;
        return orientation === 'vertical' ? 'row' : 'column';
      },
      height: function height(_ref15) {
        var orientation = _ref15.orientation,
            totalSteps = _ref15.totalSteps,
            _height2 = _ref15.height,
            spacing = _ref15.spacing;
        return orientation === 'vertical' ? _height2 ? "calc(100% / ".concat(totalSteps - 1, " - 28px)") : spacing + 4 + 24 : 2;
      },
      justifyItems: 'center',
      minWidth: 32,
      // paddingBottom: ({ orientation, totalSteps, index }) => orientation ==='vertical' && index < totalSteps-1 ? `calc(100% / ${totalSteps - 1})`: 0,
      position: 'relative'
    },
    stepLabel: {
      color: theme.palette.grey[700],
      fontSize: function fontSize(_ref16) {
        var orientation = _ref16.orientation;
        return orientation === 'horizontal' ? 10 : undefined;
      },
      marginLeft: function marginLeft(_ref17) {
        var orientation = _ref17.orientation;
        return orientation === 'vertical' ? theme.spacing(1.5) : undefined;
      },
      maxWidth: function maxWidth(_ref18) {
        var orientation = _ref18.orientation;
        return orientation === 'horizontal' ? 90 : undefined;
      },
      minWidth: 28,
      position: function position(_ref19) {
        var orientation = _ref19.orientation;
        return orientation === 'horizontal' ? 'absolute' : undefined;
      },
      textAlign: function textAlign(_ref20) {
        var orientation = _ref20.orientation;
        return orientation === 'horizontal' ? 'center' : undefined;
      },
      top: function top(_ref21) {
        var orientation = _ref21.orientation;
        return orientation === 'horizontal' ? 28 : undefined;
      }
    },
    textActive: {
      color: theme.palette.grey[800]
    }
  };
}, {
  name: 'Step'
});
process.env.NODE_ENV !== "production" ? Stepper.propTypes = {
  absolute: _propTypes["default"].bool,
  activeIndex: _propTypes["default"].number,
  classes: _propTypes["default"].object,
  clickable: _propTypes["default"].bool,
  height: _propTypes["default"].number,
  isCompleted: _propTypes["default"].bool,
  onChange: _propTypes["default"].func,
  onchange: _propTypes["default"].func,
  orientation: _propTypes["default"].oneOf(['vertical', 'horizontal']),
  spacing: _propTypes["default"].number,
  steps: _propTypes["default"].array
} : void 0;
Stepper.muiName = 'Stepper';

var _default = (0, _react.memo)(Stepper);

exports["default"] = _default;