@dnanpm/styleguide/build/cjs/components/AmountSelector/AmountSelector.js

DNA Styleguide repository provides the set of components and theme object used in various DNA projects.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib = require('tslib');
var icons = require('@dnanpm/icons');
var React = require('react');
var styledComponents = require('styled-components');
var theme = require('../../themes/theme.js');
var styledUtils = require('../../utils/styledUtils.js');
var ButtonArrow = require('../ButtonArrow/ButtonArrow.js');

function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefaultCompat(React);

const Container = styledComponents.styled.div `
    display: flex;
    width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 12)};
`;
const Button = styledComponents.styled(ButtonArrow.default) `
    display: inline-flex;
    width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 4)};
    height: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 4)};
    border-radius: 0;

    &:first-of-type {
        border-top-left-radius: ${theme.default.radius.s};
        border-bottom-left-radius: ${theme.default.radius.s};

        &:focus {
            z-index: 2;
        }
    }

    &:last-of-type {
        border-top-right-radius: ${theme.default.radius.s};
        border-bottom-right-radius: ${theme.default.radius.s};
    }

    &:disabled,
    &[disabled] {
        background-color: ${theme.default.color.background.sand.E02 + theme.default.color.transparency.T30};
        border: 1px solid ${theme.default.color.line.L01};
        pointer-events: auto;
        cursor: not-allowed;
        svg {
            opacity: 0.3;
        }
    }
`;
const Input = styledComponents.styled.input `
    width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 4)};
    height: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 4)};
    font-family: ${theme.default.fontFamily.default};
    font-size: ${theme.default.fontSize.default};
    text-align: center;
    border: 0 none;
    border-radius: 0;
    border-top: 1px solid ${theme.default.color.line.L01};
    border-bottom: 1px solid ${theme.default.color.line.L01};

    &:focus {
        border: 2px solid ${theme.default.color.focus.light};
        box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.dark};
        outline: none;
        z-index: 2;
    }

    &:disabled,
    &[disabled] {
        background-color: ${theme.default.color.background.sand.E02 + theme.default.color.transparency.T30};
        border: 1px solid ${theme.default.color.transparency.T30 + theme.default.color.line.L01};
        svg {
            opacity: 0.3;
        }
    }

    &:read-only {
        pointer-events: none;
    }

    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
        display: none;
    }

    -webkit-appearance: none;
    -moz-appearance: textfield;
`;
/** @visibleName Amount Selector */
const AmountSelector = (_a) => {
    var { onChange, value = 1, step = 1, min = 1, max, disabled = false, readonly = true, 'data-testid': dataTestId, increaseButtonAriaLabel, decreaseButtonAriaLabel, removeButtonAriaLabel, inputAriaLabel } = _a, props = tslib.__rest(_a, ["onChange", "value", "step", "min", "max", "disabled", "readonly", 'data-testid', "increaseButtonAriaLabel", "decreaseButtonAriaLabel", "removeButtonAriaLabel", "inputAriaLabel"]);
    const isMinReached = (val) => val < min;
    const isMaxReached = (val) => Boolean(max && val > max);
    const isInRange = (val) => !isMinReached(val) && !isMaxReached(val);
    const increase = () => {
        const newValue = value + step;
        if (!isMaxReached(newValue) && !disabled) {
            onChange(newValue);
        }
    };
    const decrease = () => {
        const newValue = value - step;
        if (!disabled && (!isMinReached(newValue) || props.removable)) {
            onChange(newValue);
        }
    };
    const handleChange = (event) => {
        if (event.target.value) {
            const integerInputValue = parseInt(event.target.value, 10);
            if (isInRange(integerInputValue)) {
                onChange(integerInputValue);
            }
            else {
                onChange(max && isMaxReached(integerInputValue) ? max : min);
            }
        }
        else {
            onChange(min);
        }
    };
    const getMinButtonAriaLabel = () => {
        if (props.removable && isMinReached(value - step)) {
            return removeButtonAriaLabel;
        }
        if (decreaseButtonAriaLabel) {
            return decreaseButtonAriaLabel;
        }
        return undefined;
    };
    const handleKeyDown = (e) => {
        const allowedKeys = new Set(['Tab', 'Backspace', 'Delete', 'ArrowLeft', 'ArrowRight']);
        if (/^[0-9]$/.test(e.key) || allowedKeys.has(e.key)) {
            return;
        }
        if (e.key === 'ArrowUp') {
            e.preventDefault();
            if (!isMaxReached(value + step)) {
                onChange(value + step);
            }
            return;
        }
        if (e.key === 'ArrowDown') {
            e.preventDefault();
            if (!isMinReached(value - step)) {
                onChange(value - step);
            }
            return;
        }
        e.preventDefault();
    };
    return (React__default.default.createElement(Container, { "data-testid": dataTestId, className: props.className },
        React__default.default.createElement(Button, { icon: props.removable && isMinReached(value - step) ? (React__default.default.createElement(icons.Trash, { size: styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2) })) : (React__default.default.createElement(icons.Minus, { size: styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2) })), variant: "secondary", onClick: decrease, disabled: disabled || (isMinReached(value - step) && !props.removable), type: "button", "aria-label": getMinButtonAriaLabel(), "data-testid": dataTestId &&
                `${dataTestId}${props.removable && isMinReached(value - step) ? '-remove' : '-decrease'}` }),
        React__default.default.createElement(Input, { id: props.id, name: props.name, type: "number", onChange: handleChange, value: value, min: min, max: max, step: step, readOnly: readonly || disabled, disabled: disabled, "aria-label": inputAriaLabel, onKeyDown: handleKeyDown, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value }),
        React__default.default.createElement(Button, { icon: React__default.default.createElement(icons.Plus, { size: styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2) }), variant: "secondary", onClick: increase, disabled: disabled || isMaxReached(value + step), type: "button", "aria-label": increaseButtonAriaLabel || undefined, "data-testid": dataTestId ? `${dataTestId}-increase` : undefined })));
};

exports.default = AmountSelector;