@smart-react-components/ui
Version:
SRC UI includes React and Styled components.
85 lines (84 loc) • 7.12 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DatePickerTimeType = exports.DatePickerType = void 0;
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_core_props_1 = __importDefault(require("@smart-react-components/core/element-props/intrinsic-styled-core-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 InputElement_1 = __importDefault(require("../components/Input/InputElement"));
const InputWrapper_1 = __importDefault(require("../components/Input/InputWrapper"));
const useAddons_1 = __importDefault(require("../hooks/useAddons"));
const props_1 = require("../util/props");
const FixedBox_1 = __importDefault(require("../FixedBox"));
const InputAddon_1 = __importDefault(require("./InputAddon"));
const DatePicker_1 = __importDefault(require("../DatePicker"));
var date_picker_1 = require("../constants/date-picker");
Object.defineProperty(exports, "DatePickerType", { enumerable: true, get: function () { return date_picker_1.DatePickerType; } });
Object.defineProperty(exports, "DatePickerTimeType", { enumerable: true, get: function () { return date_picker_1.DatePickerTimeType; } });
const InputDatePicker = react_1.default.forwardRef((props, forwardRef) => {
var _a, _b, _c, _d, _e, _f, _g, _h;
const ref = react_1.default.useRef(null);
const [status, setStatus] = react_1.default.useState(() => false);
const { leftAddon, rightAddon } = (0, useAddons_1.default)({
Component: InputAddon_1.default,
leftAddon: props.leftAddon,
rightAddon: props.rightAddon,
props: {
cursorKey: 'selectBox',
hasBorder: props.hasBorder,
isDisabled: props.isDisabled,
isFocused: status,
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 handleBlur = () => {
var _a;
const value = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.value;
if (value) {
props.setValue(new Date(value));
}
else {
props.setValue(null);
}
};
react_1.default.useEffect(() => {
var _a, _b;
ref.current.value = (_b = (_a = props.value) === null || _a === void 0 ? void 0 : _a.toDateString()) !== null && _b !== void 0 ? _b : '';
}, [props.value]);
return (react_1.default.createElement(FormBlockLabel_1.default, Object.assign({}, (0, element_props_1.default)(props, [intrinsic_styled_core_props_1.default]), { cursorKey: "selectBox", 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: false, 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.createElement(FixedBox_1.default, { elementProps: Object.assign(Object.assign({}, (0, props_1.applyResponsiveStyledProp)(props, 'size', 'width', v => `$size.colorPicker.${v}.width`)), { background: '$color.dynamic.background', borderRadius: '$radius.colorPicker', boxShadow: '0 0 10px 1px {color.dynamic.shadow}', height: ['auto', true] }), maxWidth: -1, minWidth: -1, setStatus: setStatus, status: status },
react_1.default.createElement(InputElement_1.default, Object.assign({}, (!props.isDisabled && (0, element_props_1.default)(props, [change_events_1.default, focus_events_1.default, keyboard_events_1.default])), (!props.isDisabled && {
onBlur: handleBlur,
}), (props.isDisabled && { disabled: true }), (props.isReadOnly && { readOnly: true }), (props.isRequired && { required: true }), (typeof props.placeholder !== 'undefined' && { placeholder: props.placeholder }), { defaultValue: (_f = (_e = props.value) === null || _e === void 0 ? void 0 : _e.toDateString()) !== null && _f !== void 0 ? _f : '', hasLeftAddon: !!leftAddon, hasRightAddon: !!rightAddon, inputSize: props.size, inputSizeSm: props.sizeSm, inputSizeMd: props.sizeMd, inputSizeLg: props.sizeLg, inputSizeXl: props.sizeXl, isDisabled: props.isDisabled, isFocused: status, isOutline: props.isOutline, isSoft: props.isSoft, palette: props.palette, ref: forwardRef !== null && forwardRef !== void 0 ? forwardRef : ref })),
react_1.default.createElement(DatePicker_1.default, Object.assign({}, (0, props_1.applyResponsiveStyledProp)(props, 'size', 'size', v => v), { hasCloseIcon: true, onClose: () => setStatus(false), isSoft: props.isSoft, palette: props.palette, pickerType: props.pickerType, timeType: props.timeType, setValue: props.setValue, value: props.value }))),
(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)));
});
InputDatePicker.defaultProps = {
hasBorder: true,
isOutline: true,
palette: 'primary',
shape: 'rectangle',
size: 'medium',
};
exports.default = InputDatePicker;