@kiwicom/orbit-components/es/Stepper/StepperStateless/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from "react";
import styled, { css } from "styled-components";
import mq from "../../utils/mediaQuery";
import Minus from "../../icons/Minus";
import Plus from "../../icons/Plus";
import defaultTheme from "../../defaultTheme";
import Button from "../../primitives/ButtonPrimitive";
import useTheme from "../../hooks/useTheme";

const getMaxWidth = ({
  maxWidth
}) => {
  if (typeof maxWidth === "string") return maxWidth;
  return `${parseInt(maxWidth, 10)}px`;
};

const getOpacity = ({
  isDisabled,
  isActive
}) => {
  if (isDisabled) {
    if (isActive) return "0.3";
    return "0.5";
  }

  return "1";
};

const StyledStepper = styled.div.withConfig({
  displayName: "StepperStateless__StyledStepper",
  componentId: "sc-er9xml-0"
})(["display:flex;width:100%;max-width:", ";flex:1 1 auto;"], getMaxWidth);
const iconMixin = css(["", ""], ({
  theme,
  isActive,
  isDisabled
}) => css(["padding:2px;height:20px;width:20px;opacity:", ";background:", ";border-radius:", ";", ";", ";"], getOpacity, isActive ? theme.orbit.paletteBlueNormal : theme.orbit.paletteCloudDark, theme.orbit.borderRadiusCircle, mq.desktop(css(["height:16px;width:16px;"])), !isDisabled && css(["&:hover{background:", ";}&:focus,&:active{box-shadow:0 0 0 2px ", ";}"], isActive ? theme.orbit.paletteBlueNormalHover : theme.orbit.paletteCloudNormalHover, isActive ? theme.orbit.paletteBlueLightActive : theme.orbit.paletteCloudNormalActive)));
const StyledMinusIcon = styled(Minus).withConfig({
  displayName: "StepperStateless__StyledMinusIcon",
  componentId: "sc-er9xml-1"
})(["", ";"], iconMixin); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledMinusIcon.defaultProps = {
  theme: defaultTheme
};
const StyledPlusIcon = styled(Plus).withConfig({
  displayName: "StepperStateless__StyledPlusIcon",
  componentId: "sc-er9xml-2"
})(["", ";"], iconMixin); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledPlusIcon.defaultProps = {
  theme: defaultTheme
};
const StyledStepperInput = styled.input.withConfig({
  displayName: "StepperStateless__StyledStepperInput",
  componentId: "sc-er9xml-3"
})(["", ""], ({
  theme,
  disabled
}) => css(["width:100%;height:44px;padding:0;border:0;font-size:", ";font-weight:", ";color:", ";text-align:center;min-width:0;opacity:", ";background-color:", ";&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}&:focus{outline:none;}"], theme.orbit.fontSizeTextLarge, theme.orbit.fontWeightMedium, theme.orbit.paletteInkNormal, disabled ? "0.5" : "1", disabled && "transparent")); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledStepperInput.defaultProps = {
  theme: defaultTheme
};

const StepperStateless = ({
  maxWidth = "120px",
  disabled,
  dataTest,
  value,
  active,
  name,
  minValue,
  maxValue,
  onKeyDown,
  onBlur,
  onFocus,
  onIncrement,
  onDecrement,
  titleIncrement,
  titleDecrement,
  disabledIncrement,
  disabledDecrement
}) => {
  const theme = useTheme();
  const commonButtonStyles = {
    background: "transparent",
    width: "44px"
  };
  const iconStyles = {
    foreground: active ? theme.orbit.paletteWhite : theme.orbit.paletteInkNormal
  };
  const isMinusDisabled = disabled || disabledDecrement || typeof value === "number" && value <= +minValue;
  const isPlusDisabled = disabled || disabledIncrement || typeof value === "number" && value >= +maxValue;
  return /*#__PURE__*/React.createElement(StyledStepper, {
    "data-test": dataTest,
    maxWidth: maxWidth
  }, /*#__PURE__*/React.createElement(Button, _extends({
    disabled: isMinusDisabled,
    iconLeft: /*#__PURE__*/React.createElement(StyledMinusIcon, {
      size: "small",
      isActive: active,
      isDisabled: isMinusDisabled
    }),
    onClick: ev => {
      if (onDecrement && !disabled) {
        onDecrement(ev);
      }
    },
    title: titleDecrement,
    icons: iconStyles
  }, commonButtonStyles)), /*#__PURE__*/React.createElement(StyledStepperInput, {
    name: name,
    disabled: disabled,
    type: "text",
    value: value || 0,
    min: minValue,
    max: maxValue,
    onKeyDown: ev => {
      if (onKeyDown) {
        onKeyDown(ev);
      }
    },
    onBlur: onBlur,
    onFocus: onFocus,
    readOnly: true
  }), /*#__PURE__*/React.createElement(Button, _extends({
    disabled: isPlusDisabled,
    iconLeft: /*#__PURE__*/React.createElement(StyledPlusIcon, {
      size: "small",
      isActive: active,
      isDisabled: isPlusDisabled
    }),
    onClick: ev => {
      if (onIncrement && !disabled) {
        onIncrement(ev);
      }
    },
    title: titleIncrement,
    icons: iconStyles
  }, commonButtonStyles)));
};

export default StepperStateless;