styled-hook-form/lib/components/form-builder/editors/date-editor/date-input.js

React form library for styled-components based on grommet and react-hook-form

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DateEditor = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_hook_form_1 = require("react-hook-form");
const grommet_1 = require("grommet");
const grommet_icons_1 = require("grommet-icons");
const context_1 = require("../../../../context");
const react_2 = require("react");
const DateEditor = (props) => {
    var _a;
    let vrules = props.validationRules || {};
    let { name, label, defaultValue: initialValue, shouldUnregister, dateInputProps, minDate, maxDate, required, methods, } = props;
    const { translate: T, locale } = context_1.useFormBuilderContext();
    const theme = react_2.useContext(grommet_1.ThemeContext);
    let control = methods === null || methods === void 0 ? void 0 : methods.control;
    if (required) {
        vrules.required = {
            value: required,
            message: T("required-msg", { name: label }),
        };
    }
    if (minDate) {
        vrules.min = {
            value: minDate,
            message: T("date-input-min-msg", { name: label, value: minDate }),
        };
    }
    if (maxDate) {
        vrules.max = {
            value: maxDate,
            message: T("date-input-max-msg", { name: label, value: maxDate }),
        };
    }
    const resetValue = react_1.useCallback((field) => () => {
        field.onChange("");
    }, []);
    const dateFormat = ((_a = theme.dateInput) === null || _a === void 0 ? void 0 : _a.dateFormat) || (dateInputProps === null || dateInputProps === void 0 ? void 0 : dateInputProps.format) || "yyyy/mm/dd";
    const normalValue = !initialValue
        ? initialValue
        : typeof initialValue === "string"
            ? initialValue
            : initialValue.toISOString();
    return (jsx_runtime_1.jsx(react_hook_form_1.Controller, { name: name, defaultValue: normalValue, rules: vrules, control: control, shouldUnregister: shouldUnregister, render: ({ field }) => {
            console.log(field.value);
            return (jsx_runtime_1.jsx(grommet_1.Box, Object.assign({ fill: true, align: "stretch", justify: "stretch" }, { children: jsx_runtime_1.jsx(grommet_1.Box, Object.assign({ justify: "stretch" }, { children: jsx_runtime_1.jsxs(grommet_1.Box, Object.assign({ direction: "row" }, { children: [jsx_runtime_1.jsx(grommet_1.DateInput, Object.assign({}, dateInputProps, { calendarProps: Object.assign(Object.assign({}, dateInputProps === null || dateInputProps === void 0 ? void 0 : dateInputProps.calendarProps), { locale }), defaultValue: field.value, value: field.value, format: dateFormat, onChange: (e) => {
                                    field.onChange(e.value ? e.value : "");
                                } }), void 0),
                            field.value && (jsx_runtime_1.jsx(grommet_1.Button, { icon: jsx_runtime_1.jsx(grommet_icons_1.SubtractCircle, {}, void 0), focusIndicator: false, onClick: resetValue(field) }, void 0))] }), void 0) }), void 0) }), void 0));
        } }, void 0));
};
exports.DateEditor = DateEditor;