@smart-react-components/ui
Version:
SRC UI includes React and Styled components.
103 lines (102 loc) • 6.16 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 intrinsic_styled_core_props_1 = __importDefault(require("@smart-react-components/core/element-props/intrinsic-styled-core-props"));
const react_1 = __importDefault(require("react"));
const FormBlockLabel_1 = __importDefault(require("../components/Form/FormBlockLabel"));
const useAddons_1 = __importDefault(require("../hooks/useAddons"));
const InputFileTemplate_1 = __importDefault(require("../components/Input/InputFileTemplate"));
const HiddenInput_1 = __importDefault(require("../components/Form/HiddenInput"));
const InputWrapper_1 = __importDefault(require("../components/Input/InputWrapper"));
const useInputMethods_1 = __importDefault(require("../hooks/useInputMethods"));
const InputAddon_1 = __importDefault(require("./InputAddon"));
const InputFile = react_1.default.forwardRef((props, forwardRef) => {
var _a, _b, _c, _d, _e, _f;
const ref = react_1.default.useRef(null);
const { handleOnBlur, handleOnFocus, isFocused } = (0, useInputMethods_1.default)({
isDisabled: props.isDisabled,
isReadOnly: false,
});
const { leftAddon, rightAddon } = (0, useAddons_1.default)({
Component: InputAddon_1.default,
leftAddon: props.leftAddon,
rightAddon: props.rightAddon,
props: {
cursorKey: 'inputFile',
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,
},
});
const handleOnChange = (e) => {
if (props.isDisabled) {
return;
}
if (!Array.isArray(props.value)) {
setValue(e.target.files[0]);
}
else {
setValue([...props.value, ...e.target.files].filter(i => !!i));
}
};
const setValue = (value) => {
if (!value || value.length === 0) {
const el = (forwardRef !== null && forwardRef !== void 0 ? forwardRef : ref).current;
el.value = '';
}
props.setValue(value);
};
return (react_1.default.createElement(FormBlockLabel_1.default, Object.assign({}, (0, element_props_1.default)(props, [intrinsic_styled_core_props_1.default]), { cursorKey: "inputFile", 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, {
children: (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(HiddenInput_1.default, Object.assign({}, (props.accept && { accept: props.accept }), (props.isDisabled && { disabled: true }), (props.isRequired && { required: true }), { multiple: Array.isArray(props.value), onBlur: handleOnBlur, onChange: handleOnChange, onFocus: handleOnFocus, ref: forwardRef !== null && forwardRef !== void 0 ? forwardRef : ref, type: "file" })),
props.template.props.children)),
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,
palette: props.palette,
placeholder: props.placeholder,
setValue,
shape: props.shape,
value: props.value,
}),
(rightAddon && !((_e = rightAddon === null || rightAddon === void 0 ? void 0 : rightAddon.props) === null || _e === void 0 ? void 0 : _e.isSeparated)) && rightAddon),
((_f = rightAddon === null || rightAddon === void 0 ? void 0 : rightAddon.props) === null || _f === void 0 ? void 0 : _f.isSeparated) && rightAddon)));
});
InputFile.defaultProps = {
hasBorder: true,
isBlock: true,
isOutline: true,
palette: 'primary',
shape: 'rectangle',
size: 'medium',
template: react_1.default.createElement(InputFileTemplate_1.default, null),
};
exports.default = InputFile;