oneframe-react
Version:
Oneframe React ## Components, Hooks, Helper Functions & State Management
177 lines (176 loc) • 10 kB
JavaScript
"use strict";
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result["default"] = mod;
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const TextInput_1 = __importDefault(require("../Input/TextInput"));
const moment_1 = __importDefault(require("moment"));
const lodash_1 = require("lodash");
const moment_2 = __importDefault(require("@date-io/moment"));
const pickers_1 = require("@material-ui/pickers");
const withValidate_1 = require("../../Form/withValidate");
const utility_1 = require("../../../utility");
const use_debounce_1 = require("use-debounce");
const fast_memoize_1 = __importDefault(require("fast-memoize"));
const prop_types_1 = __importDefault(require("prop-types"));
const DateComponent = (props) => {
const { id, name, value = '', captionActive, variant = 'outlined', autoFocus = false, disabled, readOnly, errorText, helperText, disableUnderline = false, onChange, onRef, leftAdornments, rightAdornments, validate, setValidate, validateMessages, maxDate, maxDateMessage, minDate, minDateMessage, clearable = false, cancelLabel = 'Cancel', clearLabel = 'Clear', todayLabel = 'Today', okLabel = 'OK', disablePast, disableFuture, disableToolbar, shouldDisableDate, dateFormat = 'DD.MM.YYYY', momentLocale = 'en', className, } = props;
const input = react_1.useRef();
const [inputFieldValue, setValue] = react_1.useState(value ? new Date(moment_1.default(value, dateFormat).format()) : '');
const setValidateData = fast_memoize_1.default((value) => {
!disabled && validate && setValidate && setValidate(id, value, validate, errorText);
onChange && onChange(utility_1.getTargetValue(id, name, value));
});
const [debounceFunc] = use_debounce_1.useDebouncedCallback((value) => setValidateData(value), 150);
const handleChange = react_1.useCallback((e) => {
setValue(new Date(moment_1.default(e, dateFormat).format()));
}, [dateFormat]);
react_1.useEffect(() => {
onRef && onRef(input);
});
react_1.useEffect(() => {
if (props.hasOwnProperty('momentLocale')) {
Promise.resolve().then(() => __importStar(require('moment/locale/' + momentLocale + '.js')));
}
}, [props, setValidateData, momentLocale, inputFieldValue]);
react_1.useEffect(() => {
setValue(value);
}, [value]);
react_1.useEffect(() => {
debounceFunc(inputFieldValue);
}, [inputFieldValue, debounceFunc, disabled]);
return (react_1.default.createElement(pickers_1.MuiPickersUtilsProvider, { utils: moment_2.default, locale: momentLocale },
react_1.default.createElement("div", null,
react_1.default.createElement(pickers_1.DatePicker, { value: inputFieldValue, onChange: handleChange, format: dateFormat, showTodayButton: true, todayLabel: todayLabel, okLabel: okLabel, cancelLabel: cancelLabel, autoOk: true, disabled: disabled, disableFuture: disableFuture, disablePast: disablePast, disableToolbar: disableToolbar, maxDate: maxDate ? new Date(moment_1.default(maxDate, dateFormat).format()) : new Date('2200'), maxDateMessage: maxDateMessage, minDate: minDate ? new Date(moment_1.default(minDate, dateFormat).format()) : new Date('1900'), minDateMessage: minDateMessage, shouldDisableDate: shouldDisableDate, clearLabel: clearLabel, clearable: clearable, TextFieldComponent: (dateProps) => (react_1.default.createElement(TextInput_1.default, Object.assign({ id: id, name: name }, lodash_1.omit(props, [
'onChange',
'dateFormat',
'locale',
'showTodayButton',
'autoOk',
'todayLabel',
'okLabel',
'cancelLabel',
'autoComplete',
'autoFocus',
'className',
]), { className: `oneframe-form-field oneframe-datepicker ${className}`, error: utility_1.getErrorStatus(validateMessages, id, errorText), helperText: utility_1.getErrorMessage(validateMessages, id, errorText, helperText), onClick: dateProps.onClick, value: value ? dateProps.value : '', autoComplete: 'no-date', autoFocus: autoFocus, InputProps: Object.assign(Object.assign({}, utility_1.getAdornments(leftAdornments, rightAdornments, variant, disableUnderline, false, false)), { readOnly, className: 'oneframe-input-base' }), InputLabelProps: Object.assign(Object.assign({}, (props.hasOwnProperty('captionActive') && captionActive ? { shrink: true } : {})), { className: 'oneframe-input-label' }), inputProps: {
className: 'oneframe-input',
}, inputRef: input }))) }))));
};
DateComponent.propTypes = {
id: prop_types_1.default.string.isRequired,
name: prop_types_1.default.string.isRequired,
dateFormat: prop_types_1.default.string,
locale: prop_types_1.default.string,
todayLabel: prop_types_1.default.string,
okLabel: prop_types_1.default.string,
cancelLabel: prop_types_1.default.string,
emptyLabel: prop_types_1.default.string,
initialFocusedDate: prop_types_1.default.string,
invalidLabel: prop_types_1.default.string,
maxDate: prop_types_1.default.string,
maxDateMessage: prop_types_1.default.string,
minDate: prop_types_1.default.string,
minDateMessage: prop_types_1.default.string,
clearLabel: prop_types_1.default.string,
className: prop_types_1.default.string,
momentLocale: prop_types_1.default.string,
errorText: prop_types_1.default.string,
helperText: prop_types_1.default.string,
caption: prop_types_1.default.string,
type: prop_types_1.default.string,
defaultValue: prop_types_1.default.string,
autoComplete: prop_types_1.default.string,
placeholder: prop_types_1.default.string,
variant: prop_types_1.default.oneOf(['standard', 'filled', 'outlined']),
showTodayButton: prop_types_1.default.bool,
disableFuture: prop_types_1.default.bool,
disablePast: prop_types_1.default.bool,
disableToolbar: prop_types_1.default.bool,
autoOk: prop_types_1.default.bool,
clearable: prop_types_1.default.bool,
captionActive: prop_types_1.default.bool,
autoFocus: prop_types_1.default.bool,
disabled: prop_types_1.default.bool,
required: prop_types_1.default.bool,
readOnly: prop_types_1.default.bool,
disableUnderline: prop_types_1.default.bool,
submitStatus: prop_types_1.default.bool,
fullWidth: prop_types_1.default.bool,
invalidDateMessage: prop_types_1.default.node,
ref: prop_types_1.default.any,
onChange: prop_types_1.default.any,
onClick: prop_types_1.default.any,
shouldDisableDate: prop_types_1.default.any,
setValidate: prop_types_1.default.any,
validateMessages: prop_types_1.default.any,
error: prop_types_1.default.any,
InputProps: prop_types_1.default.any,
InputLabelProps: prop_types_1.default.any,
inputProps: prop_types_1.default.any,
inputRef: prop_types_1.default.any,
leftAdornments: prop_types_1.default.oneOfType([prop_types_1.default.func]),
rightAdornments: prop_types_1.default.oneOfType([prop_types_1.default.func]),
validate: prop_types_1.default.arrayOf(prop_types_1.default.shape({
required: prop_types_1.default.oneOf([
'required',
'maxSelect',
'minSelect',
'min',
'max',
'maxLength',
'minLength',
'custom',
'email',
'pattern',
'url',
'creditcard',
'number',
]),
message: prop_types_1.default.string,
regex: prop_types_1.default.any,
validate: prop_types_1.default.oneOfType([prop_types_1.default.func, prop_types_1.default.bool]),
value: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]),
})),
onRef: prop_types_1.default.func,
onBlur: prop_types_1.default.func,
onKeyPress: prop_types_1.default.func,
onKeyDown: prop_types_1.default.func,
onKeyUp: prop_types_1.default.func,
};
exports.DatePickerTmp = DateComponent;
const MemoComponent = react_1.default.memo(DateComponent, (p, n) => lodash_1.isEqual(p.value, n.value) &&
lodash_1.isEqual(p.validateMessages, n.validateMessages) &&
lodash_1.isEqual(p.disabled, n.disabled) &&
lodash_1.isEqual(p.readOnly, n.readOnly) &&
lodash_1.isEqual(p.dateFormat, n.dateFormat) &&
lodash_1.isEqual(p.maxDate, n.maxDate) &&
lodash_1.isEqual(p.maxDateMessage, n.maxDateMessage) &&
lodash_1.isEqual(p.minDate, n.minDate) &&
lodash_1.isEqual(p.minDateMessage, n.minDateMessage) &&
lodash_1.isEqual(p.className, n.className) &&
lodash_1.isEqual(p.errorText, n.errorText) &&
lodash_1.isEqual(p.error, n.error) &&
lodash_1.isEqual(p.helperText, n.helperText) &&
lodash_1.isEqual(p.placeholder, n.placeholder) &&
lodash_1.isEqual(p.disableFuture, n.disableFuture) &&
lodash_1.isEqual(p.disablePast, n.disablePast) &&
lodash_1.isEqual(p.momentLocale, n.momentLocale) &&
lodash_1.isEqual(p.disableToolbar, n.disableToolbar) &&
lodash_1.isEqual(p.required, n.required) &&
lodash_1.isEqual(p.shouldDisableDate, n.shouldDisableDate) &&
lodash_1.isEqual(p.leftAdornments, n.leftAdornments) &&
lodash_1.isEqual(p.rightAdornments, n.rightAdornments) &&
lodash_1.isEqual(p.onChange, n.onChange) &&
lodash_1.isEqual(p.onClick, n.onClick) &&
lodash_1.isEqual(p.captionActive, n.captionActive) &&
lodash_1.isEqual(p.caption, n.caption));
exports.default = withValidate_1.withValidate(MemoComponent);