react-base-guide/lib/components/datepicker/index.js

react ui components

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const dateformat_1 = __importDefault(require("dateformat"));
const input_1 = __importDefault(require("../input"));
const dropdown_menu_1 = __importDefault(require("../dropdown-menu"));
const DatepickerRoot_1 = __importDefault(require("./DatepickerRoot"));
const day_of_weeks_1 = __importDefault(require("./day-of-weeks"));
const selectors_1 = __importDefault(require("./selectors"));
const days_1 = __importDefault(require("./days"));
const config_1 = __importDefault(require("./config"));
const setDay = ({ day, month, year, setOpen, onChange }) => {
    let value = new Date(year, month - 1, day);
    onChange(value);
    setOpen(false);
};
const displayDate = (value, month, year) => {
    let result = new Date(value);
    result.setFullYear(year, month);
    return result;
};
const onBlur = (e, setOpen, containerRef) => {
    if (!e.relatedTarget || !containerRef.current.contains(e.relatedTarget)) {
        setOpen(false);
    }
};
const Datepicker = (props, ref) => {
    const value = props.value || new Date();
    const [open, setOpen] = (0, react_1.useState)(false);
    const [year, setYear] = (0, react_1.useState)(+(0, dateformat_1.default)(value, "yyyy"));
    const [month, setMonth] = (0, react_1.useState)(+(0, dateformat_1.default)(value, "m"));
    const date = displayDate(value, month - 1, year);
    const format = props.config || config_1.default;
    const containerRef = (0, react_1.useRef)(null);
    return ((0, jsx_runtime_1.jsxs)(DatepickerRoot_1.default, Object.assign({ ref: containerRef, tabIndex: props.tabIndex || 0, "$styled": props.styled, onBlur: e => onBlur(e, setOpen, containerRef) }, { children: [(0, jsx_runtime_1.jsx)(input_1.default, { ref: ref, className: props.className, label: props.label, placeholder: props.placeholder, value: props.value ? (0, dateformat_1.default)(props.value, format.input) : "", id: props.id, name: props.name, disabled: props.disabled, readOnly: true, autoComplete: props.autoComplete, autoFocus: props.autoFocus, onClick: () => setOpen(true), onMouseUp: props.onMouseUp, onMouseDown: props.onMouseDown, onKeyUp: props.onKeyUp, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, clear: props.clear, onClear: (e) => {
                    props.onClear && props.onClear(e);
                    props.onChange(null);
                }, error: props.error, warning: props.warning, success: props.success, message: props.message, styled: {
                    display: "block",
                    width: "100%"
                } }), open && (0, jsx_runtime_1.jsxs)(dropdown_menu_1.default, Object.assign({ open: open, menuWidth: props.menuWidth || "270px", menuHeight: props.menuHeight, right: props.right, up: props.up }, { children: [(0, jsx_runtime_1.jsx)(selectors_1.default, { month: month, months: format.months, setMonth: m => setMonth(m), year: year, setYear: y => setYear(y), min: props.min || 1970, max: props.max || new Date().getFullYear() }), (0, jsx_runtime_1.jsx)(day_of_weeks_1.default, { days: format.daysOfWeek }), (0, jsx_runtime_1.jsx)(days_1.default, { value: props.value, date: date, setDay: (day) => setDay({
                            day,
                            month,
                            year,
                            setOpen,
                            onChange: props.onChange,
                        }) })] }))] })));
};
exports.default = (0, react_1.forwardRef)(Datepicker);
//# sourceMappingURL=index.js.map