@smart-react-components/ui/components/Input/InputNumberTemplate.js

SRC UI includes React and Styled components.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const Div_1 = __importDefault(require("@smart-react-components/core/Element/Div"));
const react_1 = __importDefault(require("react"));
const CaretDown_1 = __importDefault(require("../../icons/CaretDown"));
const CaretUp_1 = __importDefault(require("../../icons/CaretUp"));
const types_1 = require("../../types");
const InputAddon_1 = __importDefault(require("../../Input/InputAddon"));
const InputElement_1 = __importDefault(require("./InputElement"));
const InputNumberTemplateElement_1 = __importDefault(require("./InputNumberTemplateElement"));
const InputNumberTemplate = props => {
    const el = react_1.default.useRef(null);
    const toggleValue = (isInc) => {
        if (props.isDisabled) {
            return;
        }
        let value = props.value;
        if (value !== null) {
            if (isInc) {
                value++;
            }
            else {
                value--;
            }
        }
        else {
            value = props.min;
            if (isInc) {
                value++;
            }
        }
        const e = { target: { value: String(value) } };
        props.onChange(e);
    };
    const addonProps = {
        hasBorder: props.hasBorder,
        isDisabled: props.isDisabled,
        isFocused: props.isFocused,
        isOutline: props.isOutline,
        isSeparated: false,
        isSoft: props.isSoft,
        palette: props.palette,
        position: types_1.OrderPosition.RIGHT,
        shape: props.shape,
        size: props.inputSize,
        sizeSm: props.inputSizeSm,
        sizeMd: props.inputSizeMd,
        sizeLg: props.inputSizeLg,
        sizeXl: props.inputSizeXl,
    };
    return (react_1.default.createElement(InputNumberTemplateElement_1.default, { inputSize: props.inputSize, inputSizeSm: props.inputSizeSm, inputSizeMd: props.inputSizeMd, inputSizeLg: props.inputSizeLg, inputSizeXl: props.inputSizeXl, ref: el },
        react_1.default.createElement(InputElement_1.default, Object.assign({}, props, { hasRightAddon: true, type: "number" })),
        react_1.default.createElement(InputAddon_1.default, Object.assign({}, addonProps),
            react_1.default.createElement(Div_1.default, { alignItems: "flex-end", onClick: () => toggleValue(true) },
                react_1.default.createElement(CaretUp_1.default, null)),
            react_1.default.createElement(Div_1.default, { alignItems: "flex-start", onClick: () => toggleValue(false) },
                react_1.default.createElement(CaretDown_1.default, null)))));
};
exports.default = InputNumberTemplate;