smart-react-components
Version:
React UI library, wide variety of editable ready to use Styled and React components.
124 lines (119 loc) • 6.45 kB
JavaScript
;
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var index = require('../index-6d498b59.js');
var DOMHelper = require('../DOMHelper-c0bd5a29.js');
var React = require('react');
var React__default = _interopDefault(React);
require('styled-components');
require('../index-56ba89df.js');
require('../element/Div.js');
require('../element/Svg.js');
require('../element/Span.js');
require('../element/A.js');
require('react-dom');
require('../WaveEffect-96d9007c.js');
require('../Element-d9208356.js');
require('../Transition-48c5648c.js');
require('../CSSTransition-5a3ab124.js');
require('../Loading-679f1816.js');
require('../Button-0d381a87.js');
require('../Overlay-95b8c50b.js');
var FixedBox = require('../FixedBox-a18d2049.js');
var UseInputOutput = require('../UseInputOutput-6af67949.js');
require('../SlideTransition-b2e129ec.js');
require('../element/Label.js');
require('../element/Input.js');
var InputElement = require('../InputElement-def827fe.js');
var DatePicker = require('../DatePicker-5fffa461.js');
require('../TransitionSwitch-c80def34.js');
const InputDatePicker = ({ size = "default", sizeSm, sizeMd, sizeLg, sizeXl, containerProps = index.DV.JSX_ELEMENT_PROPS, inputProps = index.DV.JSX_ELEMENT_PROPS, labelProps = index.DV.JSX_ELEMENT_PROPS, label, value, setValue, type, fill, border, shape = "default", leftAddon, leftAddonProps = index.DV.JSX_ELEMENT_PROPS, leftAddonAbsolute, rightAddon, rightAddonProps = index.DV.JSX_ELEMENT_PROPS, rightAddonAbsolute, pickerSize, pickerSizeSm, pickerSizeMd = "small", pickerSizeLg = "default", pickerSizeXl, pickerElementProps, pickerThemeType, pickerType = DatePicker.DATE_HOUR, dateType = DatePicker.MDY, hourType = DatePicker.$12, showButtons = true, weekStartDay, orientation, lang = DatePicker.DEFAULT_LANGUAGE }) => {
const getValue$ = () => {
const valueObject = DatePicker.DatePickerHelper.getValueObject(value, pickerType, hourType);
let result = "";
if (valueObject) {
if (valueObject.date) {
if (dateType == DatePicker.DMY)
result += `${DatePicker.StringHelper.renderNumber(valueObject.date.day, 2, "0")}/${DatePicker.StringHelper.renderNumber(valueObject.date.month + 1, 2, "0")}/${DatePicker.StringHelper.renderNumber(valueObject.date.year, 4, "0")}`;
else
result += `${DatePicker.StringHelper.renderNumber(valueObject.date.month + 1, 2, "0")}/${DatePicker.StringHelper.renderNumber(valueObject.date.day, 2, "0")}/${DatePicker.StringHelper.renderNumber(valueObject.date.year, 4, "0")}`;
}
if (valueObject.hour) {
if (result)
result += " ";
result += `${DatePicker.StringHelper.renderNumber(valueObject.hour.hour, 2, "0")}:${DatePicker.StringHelper.renderNumber(valueObject.hour.minute, 2, "0")}`;
if (hourType == DatePicker.$12)
result += ` ${lang[valueObject.hour.am ? "am" : "pm"]}`;
}
}
return result;
};
const [status, setStatus] = React__default.useState(false);
const [value$, setValue$] = React__default.useState(() => getValue$());
const inputEl = React__default.useRef(null);
const valueInit = React__default.useRef(false);
/**
* Converts the given string value to the original value format.
*
* @param _value
*/
const convertValue = (_value) => {
if (dateType == DatePicker.DMY) {
const valueSplit = _value.split("/");
if (valueSplit.length == 3)
_value = `${valueSplit[1]}/${valueSplit[0]}/${valueSplit[2]}`;
}
if (typeof value === "string")
return _value;
else if (value.constructor == Date)
return new Date(_value);
else
return DatePicker.DatePickerHelper.getValueObject(_value, pickerType, hourType);
};
/**
* Prevents event, if it is mobile.
*
* @param e
*/
const inputFocus = (e) => {
if (DOMHelper.DOMHelper.isMobile)
e.target.blur();
};
/**
* Sets value, if it is not mobile.
*
* @param e
*/
const inputBlur = (e) => {
if (!DOMHelper.DOMHelper.isMobile)
setValue(convertValue(e.target.value));
};
/**
* When enter is pressed, changes value.
*
* @param e
*/
const inputKeyDown = (e) => {
if (e.keyCode == 13)
setValue(convertValue(e.target.value));
};
/**
* Closes box.
*/
const close = () => setStatus(false);
React__default.useEffect(() => {
if (!valueInit.current)
valueInit.current = true;
else
setValue$(getValue$());
}, [value, pickerType, hourType]);
React__default.useEffect(() => {
inputEl.current.value = value$;
}, [value$]);
return (React__default.createElement(FixedBox.FixedBox, { boxProps: { width: ["auto", true] }, status: status, setStatus: setStatus },
UseInputOutput.useInputOutput({
element: React__default.createElement(InputElement.Input, Object.assign({}, inputProps, { ref: inputEl, defaultValue: value$, tabIndex: -1, onFocus: inputFocus, onBlur: inputBlur, onKeyDown: inputKeyDown, "size$": size, "size$Sm": sizeSm, "size$Md": sizeMd, "size$Lg": sizeLg, "size$Xl": sizeXl, "type$": type, "fill$": fill, "border$": border, shape: shape, leftAddon: leftAddon ? true : false, leftAddonAbsolute: leftAddonAbsolute, rightAddon: rightAddon ? true : false, rightAddonAbsolute: rightAddonAbsolute })),
containerProps, inputProps, labelProps, label, shape, leftAddon, leftAddonProps, leftAddonAbsolute, rightAddon, rightAddonProps, rightAddonAbsolute
}),
React__default.createElement(DatePicker.DatePicker, { size: pickerSize, sizeSm: pickerSizeSm, sizeMd: pickerSizeMd, sizeLg: pickerSizeLg, sizeXl: pickerSizeXl, elementProps: pickerElementProps, value: value, setValue: setValue, type: pickerThemeType, pickerType: pickerType, hourType: hourType, showCloseIcon: true, showButtons: showButtons, weekStartDay: weekStartDay, orientation: orientation, lang: lang, onClose: close, onSave: close, onCancel: close })));
};
module.exports = InputDatePicker;