@onesy/ui-react/Stepper/Stepper.js

UI for React

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _styleReact = require("@onesy/style-react");
var _Divider = _interopRequireDefault(require("../Divider"));
var _Line = _interopRequireDefault(require("../Line"));
var _utils = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["gap", "tonal", "color", "version", "iconColor", "iconColorActive", "dividerColor", "dividerColorActive", "active", "completed", "stepDirection", "orientation", "dividerActive", "individualDividers", "free", "DividerProps", "Component", "className", "style", "children"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
const useStyle = (0, _styleReact.style)(theme => ({
  root: {},
  orientation_horizontal: {
    width: '100%',
    overflow: 'auto hidden',
    '& > *': {
      flex: '0 0 auto'
    }
  },
  inactive: {
    pointerEvents: 'none',
    cursor: 'default'
  },
  divider: {
    margin: '0',
    '&.onesy-Divider-root': {
      transition: theme.methods.transitions.make(['background', 'width', 'height'])
    }
  },
  divider_active: {
    '&.onesy-Divider-root': {
      opacity: '1'
    }
  },
  divider_orientation_horizontal: {
    '&.onesy-Divider-root': {
      minWidth: '14px'
    }
  },
  divider_orientation_vertical: {
    alignSelf: 'flex-start',
    transform: 'translateX(-50%)',
    '&.onesy-Divider-root': {
      minHeight: 14,
      marginInlineStart: '20px'
    }
  },
  divider_orientation_vertical_stepDirection_column: {
    alignSelf: 'center',
    '&.onesy-Divider-root': {
      margin: '0px'
    }
  },
  divider_active_orientation_horizontal: {
    '&.onesy-Divider-root': {
      height: '2px'
    }
  },
  divider_active_orientation_vertical: {
    '&.onesy-Divider-root': {
      width: '2px'
    }
  }
}), {
  name: 'onesy-Stepper'
});
const Stepper = props_ => {
  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2;
  const theme = (0, _styleReact.useOnesyTheme)();
  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyStepper) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
  const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
  const Divider = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Divider) || _Divider.default;
  const {
      gap = 2,
      tonal = true,
      color = 'default',
      version = 'text',
      iconColor = 'inverted',
      iconColorActive = 'primary',
      dividerColor = 'inverted',
      dividerColorActive = 'primary',
      active = 0,
      completed,
      stepDirection = 'row',
      orientation = 'horizontal',
      dividerActive = true,
      individualDividers = props.stepDirection === 'column' && orientation !== 'vertical',
      free,
      DividerProps,
      Component = 'div',
      className,
      style,
      children
    } = props,
    other = (0, _objectWithoutProperties2.default)(props, _excluded);
  const {
    classes
  } = useStyle();
  const steps = _react.default.Children.toArray(children);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({
    gap: gap,
    direction: orientation === 'horizontal' ? 'row' : 'column',
    justify: "flex-start",
    align: orientation === 'vertical' ? 'flex-start' : 'center',
    Component: Component,
    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('Stepper', theme) && ['onesy-Stepper-root'], className, classes.root, classes[`orientation_${orientation}`]]),
    style: style
  }, other), {}, {
    children: steps.map((item, index) => {
      const active_ = active === index;
      const other_ = {};
      if (!active_ && !free) other_.disabled = true;
      return /*#__PURE__*/_react.default.cloneElement(item, {
        step: index + 1,
        tonal,
        color,
        version,
        activeStep: active,
        active: active_,
        iconColor: item.props.iconColor !== undefined ? item.props.iconColor : iconColor,
        iconColorActive: item.props.iconColorActive !== undefined ? item.props.iconColorActive : iconColorActive,
        dividerColor: item.props.dividerColor !== undefined ? item.props.dividerColor : dividerColor,
        dividerColorActive: item.props.dividerColorActive !== undefined ? item.props.dividerColorActive : dividerColorActive,
        orientation: item.props.orientation !== undefined ? item.props.orientation : orientation,
        stepDirection: item.props.stepDirection !== undefined ? item.props.stepDirection : stepDirection,
        completed: item.props.completed !== undefined ? item.props.completed : completed === null || completed === void 0 ? void 0 : completed[index],
        divider: item.props.divider !== undefined ? item.props.divider : individualDividers,
        className: (0, _styleReact.classNames)([!active_ && !free && classes.inactive]),
        style: _objectSpread({}, item.props.style)
      });
    }).flatMap((item_0, index_0) => {
      const active__0 = active >= index_0 + 1;
      const values = [item_0];
      if (!individualDividers && index_0 !== children.length - 1) values.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, _objectSpread(_objectSpread({
        orientation: orientation,
        color: active__0 ? dividerColorActive : dividerColor,
        flex: true
      }, DividerProps), {}, {
        className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('Stepper', theme) && ['onesy-Stepper-divider', active__0 && dividerActive && `onesy-Stepper-divider-active`], DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.className, classes.divider, classes[`divider_orientation_${orientation}`], classes[`divider_orientation_${orientation}_stepDirection_${stepDirection}`], active__0 && dividerActive && [classes.divider_active, classes[`divider_active_orientation_${orientation}`]]])
      })));
      return values;
    }).map((item_1, index_1) => (/*#__PURE__*/_react.default.cloneElement(item_1, {
      key: index_1
    })))
  }));
};
Stepper.displayName = 'onesy-Stepper';
var _default = exports.default = Stepper;