@smart-react-components/ui
Version:
SRC UI includes React and Styled components.
91 lines (90 loc) • 6.95 kB
JavaScript
"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 element_props_1 = __importDefault(require("@smart-react-components/core/element-props"));
const change_events_1 = __importDefault(require("@smart-react-components/core/element-props/change-events"));
const focus_events_1 = __importDefault(require("@smart-react-components/core/element-props/focus-events"));
const intrinsic_styled_flex_props_1 = __importDefault(require("@smart-react-components/core/element-props/intrinsic-styled-flex-props"));
const intrinsic_styled_margin_props_1 = __importDefault(require("@smart-react-components/core/element-props/intrinsic-styled-margin-props"));
const intrinsic_styled_size_props_1 = __importDefault(require("@smart-react-components/core/element-props/intrinsic-styled-size-props"));
const keyboard_events_1 = __importDefault(require("@smart-react-components/core/element-props/keyboard-events"));
const react_1 = __importDefault(require("react"));
const FormBlockLabel_1 = __importDefault(require("../components/Form/FormBlockLabel"));
const useAddons_1 = __importDefault(require("../hooks/useAddons"));
const useInputMethods_1 = __importDefault(require("../hooks/useInputMethods"));
const InputNumberTemplate_1 = __importDefault(require("../components/Input/InputNumberTemplate"));
const InputWrapper_1 = __importDefault(require("../components/Input/InputWrapper"));
const InputAddon_1 = __importDefault(require("./InputAddon"));
const InputNumber = react_1.default.forwardRef((props, forwardRef) => {
var _a, _b, _c, _d, _e, _f, _g, _h;
/**
* Converts the input string value to number.
* If value cannot be number, returns the current value.
*/
const applyNumberFormat = (value) => {
if (!value.trim()) {
return null;
}
if (isNaN(Number(value))) {
return props.value;
}
const i = parseInt(value);
if (typeof props.min !== 'undefined' && i < props.min) {
return props.value;
}
if (typeof props.max !== 'undefined' && i > props.max) {
return props.value;
}
return i;
};
const { handleOnBlur, handleOnChange, handleOnFocus, isFocused } = (0, useInputMethods_1.default)({
isDisabled: props.isDisabled,
isReadOnly: props.isReadOnly,
onBlur: props.onBlur,
onChange: props.onChange,
onFocus: props.onFocus,
setValue: value => { var _a; return (_a = props.setValue) === null || _a === void 0 ? void 0 : _a.call(props, applyNumberFormat(value)); },
});
const { leftAddon, rightAddon } = (0, useAddons_1.default)({
Component: InputAddon_1.default,
leftAddon: props.leftAddon,
rightAddon: props.rightAddon,
props: {
cursorKey: 'input',
hasBorder: props.hasBorder,
isDisabled: props.isDisabled,
isFocused,
isOutline: props.isOutline,
isSoft: props.isSoft,
palette: props.palette,
shape: props.shape,
size: props.size,
sizeSm: props.sizeSm,
sizeMd: props.sizeMd,
sizeLg: props.sizeLg,
sizeXl: props.sizeXl,
},
});
return (react_1.default.createElement(FormBlockLabel_1.default, Object.assign({}, (0, element_props_1.default)(props, [intrinsic_styled_flex_props_1.default, intrinsic_styled_margin_props_1.default]), { cursorKey: "input", formSize: props.size, formSizeSm: props.sizeSm, formSizeMd: props.sizeMd, formSizeLg: props.sizeLg, formSizeXl: props.sizeXl, isBlock: props.isBlock, isDisabled: props.isDisabled, palette: props.palette }),
props.label && react_1.default.createElement("span", null, props.label),
react_1.default.createElement(Div_1.default, { display: "flex", flex: "1 1 auto" },
((_a = leftAddon === null || leftAddon === void 0 ? void 0 : leftAddon.props) === null || _a === void 0 ? void 0 : _a.isSeparated) && leftAddon,
react_1.default.createElement(InputWrapper_1.default, { hasBorder: props.hasBorder, hasSeparatedLeftAddon: (_b = leftAddon === null || leftAddon === void 0 ? void 0 : leftAddon.props) === null || _b === void 0 ? void 0 : _b.isSeparated, hasSeparatedRightAddon: (_c = rightAddon === null || rightAddon === void 0 ? void 0 : rightAddon.props) === null || _c === void 0 ? void 0 : _c.isSeparated, isDisabled: props.isDisabled, isFocused: isFocused, isOutline: props.isOutline, isSoft: props.isSoft, palette: props.palette, shape: props.shape },
(leftAddon && !((_d = leftAddon === null || leftAddon === void 0 ? void 0 : leftAddon.props) === null || _d === void 0 ? void 0 : _d.isSeparated)) && leftAddon,
react_1.default.cloneElement(props.template, Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (0, element_props_1.default)(props, [change_events_1.default, focus_events_1.default, keyboard_events_1.default, intrinsic_styled_size_props_1.default])), (typeof props.defaultValue !== 'undefined' && { defaultValue: ((_e = props.defaultValue) !== null && _e !== void 0 ? _e : '') })), (props.isDisabled && { disabled: true })), (props.isReadOnly && { readOnly: true })), (props.isRequired && { required: true })), (typeof props.max !== 'undefined' && { max: props.max })), (typeof props.min !== 'undefined' && { min: props.min })), (typeof props.step !== 'undefined' && { step: props.step })), (typeof props.value !== 'undefined' && { value: ((_f = props.value) !== null && _f !== void 0 ? _f : '') })), { hasBorder: props.hasBorder, hasLeftAddon: !!leftAddon, hasRightAddon: !!rightAddon, inputSize: props.size, inputSizeSm: props.sizeSm, inputSizeMd: props.sizeMd, inputSizeLg: props.sizeLg, inputSizeXl: props.sizeXl, isDisabled: props.isDisabled, isFocused, isOutline: props.isOutline, isSoft: props.isSoft, onBlur: handleOnBlur, onChange: handleOnChange, onFocus: handleOnFocus, palette: props.palette, ref: forwardRef, shape: props.shape })),
(rightAddon && !((_g = rightAddon === null || rightAddon === void 0 ? void 0 : rightAddon.props) === null || _g === void 0 ? void 0 : _g.isSeparated)) && rightAddon),
((_h = rightAddon === null || rightAddon === void 0 ? void 0 : rightAddon.props) === null || _h === void 0 ? void 0 : _h.isSeparated) && rightAddon)));
});
InputNumber.defaultProps = {
hasBorder: true,
isBlock: true,
isOutline: true,
palette: 'primary',
shape: 'rectangle',
size: 'medium',
template: react_1.default.createElement(InputNumberTemplate_1.default, null),
};
exports.default = InputNumber;