oneframe-react/bundle/lib/components/Inputs/Pickers/Time.js

Oneframe React ## Components, Hooks, Helper Functions & State Management

"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 prop_types_1 = __importDefault(require("prop-types"));
const TimeComponent = (props) => {
    const { id, name, value = '', captionActive, variant = 'outlined', autoFocus = false, disabled, readOnly, errorText, helperText, disableUnderline = false, onChange, onRef, leftAdornments, rightAdornments, validate, setValidate, validateMessages, clearable = false, cancelLabel = 'Cancel', clearLabel = 'Clear', todayLabel = 'Today', okLabel = 'OK', dateFormat = 'HH:mm', momentLocale = 'en', addTimeToDate, ampm, minutesStep, className, } = props;
    const input = react_1.useRef();
    const setDate = (time) => {
        const d = addTimeToDate ? new Date(addTimeToDate) : new Date();
        if (time) {
            let HH = lodash_1.split(time, ':')[0];
            HH = Number(lodash_1.trimStart(HH, '0'));
            let MM = lodash_1.split(time, ':')[1] || 0;
            MM = Number(lodash_1.trimStart(MM, '0'));
            let mm = lodash_1.split(time, ':')[2] || 0;
            mm = Number(lodash_1.trimStart(mm, '0'));
            d.setHours(HH);
            d.setMinutes(MM);
            d.setMilliseconds(mm);
        }
        return d;
    };
    const getDate = (time) => {
        let d = time;
        if (time) {
            time = new Date(moment_1.default(time, dateFormat).format());
            const HH = time.getHours();
            const MM = time.getMinutes();
            d = HH + ':' + MM;
        }
        return d;
    };
    const [inputFieldValue, setValue] = react_1.useState(value || '');
    const setValidateData = (value) => {
        !disabled && validate && setValidate && setValidate(id, value, validate, errorText);
        onChange && onChange(utility_1.getTargetTimeValue(id, name, value, setDate(value)));
    };
    const [debounceFunc] = use_debounce_1.useDebouncedCallback((value) => setValidateData(value), 250);
    const handleChange = react_1.useCallback((e) => {
        setValue(getDate(e));
        // eslint-disable-next-line
    }, []);
    react_1.useEffect(() => {
        onRef && onRef(input);
    });
    react_1.useEffect(() => {
        const ge = new Date(moment_1.default(value, dateFormat).format());
        setValue(getDate(ge));
        // eslint-disable-next-line
    }, [value, dateFormat, setValue]);
    react_1.useEffect(() => {
        if (props.hasOwnProperty('momentLocale')) {
            Promise.resolve().then(() => __importStar(require('moment/locale/' + momentLocale + '.js')));
        }
    }, [props, momentLocale, inputFieldValue]);
    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", { className: "oneframe-timepicker" },
            react_1.default.createElement(pickers_1.TimePicker, { value: setDate(inputFieldValue), onChange: handleChange, format: dateFormat, showTodayButton: true, todayLabel: todayLabel, okLabel: okLabel, cancelLabel: cancelLabel, autoOk: true, ampm: ampm || false, disabled: disabled, clearLabel: clearLabel, clearable: clearable, minutesStep: minutesStep, className: `oneframe-form-field ${className}`, 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',
                    'error',
                    'autoComplete',
                    'autoFocus',
                    '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' }), inputProps: {
                        className: 'oneframe-input',
                    }, InputLabelProps: Object.assign(Object.assign({}, (props.hasOwnProperty('captionActive') && captionActive ? { shrink: true } : {})), { className: 'oneframe-input-label' }), inputRef: input }))) }))));
};
TimeComponent.propTypes = {
    ampm: prop_types_1.default.bool,
    minutesStep: prop_types_1.default.number,
    addTimeToDate: prop_types_1.default.any,
    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,
    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,
    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,
    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]),
    })),
    ref: prop_types_1.default.any,
    onChange: prop_types_1.default.any,
    onClick: prop_types_1.default.any,
    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,
    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,
};
exports.TimeTmp = TimeComponent;
const MemoComponent = react_1.default.memo(TimeComponent, (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.required, n.required) &&
    lodash_1.isEqual(p.readOnly, n.readOnly) &&
    lodash_1.isEqual(p.minutesStep, n.minutesStep) &&
    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.error, n.error) &&
    lodash_1.isEqual(p.errorText, n.errorText) &&
    lodash_1.isEqual(p.helperText, n.helperText) &&
    lodash_1.isEqual(p.addTimeToDate, n.addTimeToDate) &&
    lodash_1.isEqual(p.dateFormat, n.dateFormat) &&
    lodash_1.isEqual(p.placeholder, n.placeholder) &&
    lodash_1.isEqual(p.locale, n.locale) &&
    lodash_1.isEqual(p.momentLocale, n.momentLocale) &&
    lodash_1.isEqual(p.ampm, n.ampm) &&
    lodash_1.isEqual(p.captionActive, n.captionActive) &&
    lodash_1.isEqual(p.caption, n.caption));
exports.default = withValidate_1.withValidate(MemoComponent);