@wix/design-system/dist/cjs/Stepper/components/Step.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
exports.__esModule = true;
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _Focusable = require("../../common/Focusable");
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _Text = _interopRequireDefault(require("../../Text"));
var _StepMarker = _interopRequireDefault(require("./StepMarker"));
var _constants = require("../constants");
var _useHover2 = require("../../common/useHover");
var _StepSt = require("./Step.st.css.js");
var _IconThemeContext = require("../../WixDesignSystemIconThemeProvider/IconThemeContext");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Stepper/components/Step.jsx",
  _this = void 0;
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var Step = function Step(_ref) {
  var _ref$type = _ref.type,
    type = _ref$type === void 0 ? _constants.StepType.Normal : _ref$type,
    styleType = _ref.styleType,
    active = _ref.active,
    last = _ref.last,
    number = _ref.number,
    text = _ref.text,
    className = _ref.className,
    size = _ref.size,
    onClick = _ref.onClick,
    focusableOnFocus = _ref.focusableOnFocus,
    focusableOnBlur = _ref.focusableOnBlur;
  var _useHover = (0, _useHover2.useHover)(),
    isHovered = _useHover.hovered,
    hoverProps = _useHover.hoverProps;
  // Used to update <Text ellipsis> when CSS transition has ended
  // (otherwise the logic to show/hide tooltip will not be applied)
  var _useState = (0, _react.useState)(1),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    transitionSequence = _useState2[0],
    setTransitionSequence = _useState2[1];
  var isClickable = type !== _constants.StepType.Disabled && !active && !!onClick;
  var handleClick = (0, _react.useCallback)(function () {
    if (isClickable) {
      onClick();
    }
  }, [isClickable, onClick]);
  var handleTransitionEnd = (0, _react.useCallback)(function (event) {
    if (event.propertyName === 'flex-shrink') {
      setTransitionSequence(function (prev) {
        return prev + 1;
      });
    }
  }, []);
  var focusProps = onClick && type !== _constants.StepType.Disabled ? {
    onFocus: focusableOnFocus,
    onBlur: focusableOnBlur,
    tabIndex: 0
  } : {
    tabIndex: -1
  };
  return /*#__PURE__*/_react["default"].createElement(_IconThemeContext.IconThemeContext.Consumer, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 53,
      columnNumber: 5
    }
  }, function (_ref2) {
    var _themeIcons$Step;
    var _ref2$icons = _ref2.icons,
      themeIcons = _ref2$icons === void 0 ? {} : _ref2$icons;
    var icons = {
      ChevronRight: ((_themeIcons$Step = themeIcons.Step) == null ? void 0 : _themeIcons$Step.ChevronRight) || _wixUiIconsCommon.ChevronRight
    };
    return /*#__PURE__*/_react["default"].createElement("button", (0, _extends2["default"])({
      className: (0, _StepSt.st)(_StepSt.classes.root, {
        type: type,
        styleType: styleType,
        size: size,
        selected: active,
        hovered: isHovered,
        clickable: isClickable
      }, className),
      "data-hook": _constants.DataHook.Step,
      "data-type": type,
      "data-size": size,
      "data-active": active
    }, hoverProps, {
      onClick: handleClick,
      onTransitionEnd: handleTransitionEnd
    }, focusProps, {
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 60,
        columnNumber: 11
      }
    }), /*#__PURE__*/_react["default"].createElement("div", {
      className: _StepSt.classes.content,
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 82,
        columnNumber: 13
      }
    }, /*#__PURE__*/_react["default"].createElement(_StepMarker["default"], {
      number: number,
      active: active,
      type: type,
      styleType: styleType,
      hovered: isHovered && isClickable,
      className: _StepSt.classes.marker,
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 83,
        columnNumber: 15
      }
    }), /*#__PURE__*/_react["default"].createElement(_Text["default"], {
      key: transitionSequence,
      ellipsis: true,
      weight: "thin",
      size: size,
      showTooltip: !active,
      dataHook: _constants.DataHook.StepText,
      className: _StepSt.classes.text,
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 91,
        columnNumber: 15
      }
    }, text)), !last && /*#__PURE__*/_react["default"].createElement(icons.ChevronRight, {
      className: _StepSt.classes.arrow,
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 103,
        columnNumber: 23
      }
    }));
  });
};
Step.displayName = 'Step';
var _default = exports["default"] = (0, _Focusable.withFocusable)(Step);