wix-style-react/dist/src/Stepper/components/Step.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(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 _StepSt = require("./Step.st.css");
var _excluded = ["type", "styleType", "active", "last", "number", "text", "className"];
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/Stepper/components/Step.js";
class Step extends _react.default.PureComponent {
  constructor() {
    super(...arguments);
    this.state = {
      isHovered: false,
      // Used to update <Text ellipsis> when CSS transition has ended
      // (otherwise the logic to show/hide tooltip will not be applied)
      transitionSequence: 1
    };
    this._handleMouseEnter = () => {
      this.setState({
        isHovered: true
      });
    };
    this._handleMouseLeave = () => {
      this.setState({
        isHovered: false
      });
    };
    this._handleTransitionEnd = event => {
      var {
        transitionSequence
      } = this.state;
      if (event.propertyName === 'flex-shrink') {
        this.setState({
          transitionSequence: transitionSequence + 1
        });
      }
    };
    this._handleClick = () => {
      this._isClickable() && this.props.onClick();
    };
    this._isClickable = () => {
      var {
        onClick,
        type,
        active
      } = this.props;
      return type !== _constants.StepType.Disabled && !active && !!onClick;
    };
    this._getFocusProps = () => {
      var {
        onClick,
        focusableOnFocus,
        focusableOnBlur,
        type
      } = this.props;
      if (onClick && type !== _constants.StepType.Disabled) {
        return {
          onFocus: focusableOnFocus,
          onBlur: focusableOnBlur,
          tabIndex: 0
        };
      }
      return {
        tabIndex: -1
      };
    };
  }
  render() {
    var _this$props = this.props,
      {
        type,
        styleType,
        active,
        last,
        number,
        text,
        className
      } = _this$props,
      otherProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
    var {
      isHovered,
      transitionSequence
    } = this.state;
    var isClickable = this._isClickable();
    return /*#__PURE__*/_react.default.createElement("button", (0, _extends2.default)({
      className: (0, _StepSt.st)(_StepSt.classes.root, {
        type,
        styleType,
        selected: active,
        hovered: isHovered,
        clickable: isClickable
      }, className),
      "data-hook": _constants.DataHook.Step,
      "data-type": type,
      "data-active": active,
      onMouseEnter: this._handleMouseEnter,
      onMouseLeave: this._handleMouseLeave,
      onClick: this._handleClick,
      onTransitionEnd: this._handleTransitionEnd
    }, this._getFocusProps(), {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 76,
        columnNumber: 7
      }
    }), /*#__PURE__*/_react.default.createElement("div", {
      className: _StepSt.classes.content,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 97,
        columnNumber: 9
      }
    }, /*#__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: 98,
        columnNumber: 11
      }
    }), /*#__PURE__*/_react.default.createElement(_Text.default, {
      key: transitionSequence,
      ellipsis: true,
      weight: "thin",
      size: styleType === _constants.Type.Text ? 'medium' : 'small',
      showTooltip: !active,
      dataHook: _constants.DataHook.StepText,
      className: _StepSt.classes.text,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 106,
        columnNumber: 11
      }
    }, text)), !last && /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.ChevronRight, {
      className: _StepSt.classes.arrow,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 118,
        columnNumber: 19
      }
    }));
  }
}
Step.displayName = 'Step';
Step.defaultProps = {
  type: _constants.StepType.Normal
};
var _default = exports.default = (0, _Focusable.withFocusable)(Step);
//# sourceMappingURL=Step.js.map