styled-hook-form
Version:
React form library for styled-components based on grommet and react-hook-form
152 lines (151 loc) • 8.25 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TimePicker = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const grommet_1 = require("grommet");
const react_1 = require("react");
const numeric_updown_1 = require("../numeric-updown");
// @ts-ignore
const styles_1 = require("grommet/utils/styles");
const styled_components_1 = __importStar(require("styled-components"));
const InputBox = styled_components_1.default(grommet_1.Box) `
${styles_1.inputStyle}
`;
const to12Hour = (date) => {
let hours = date.getHours();
let minutes = date.getMinutes();
let seconds = date.getSeconds();
let ampm = hours >= 12 ? "PM" : "AM";
hours = hours % 12;
hours = hours ? hours : 12;
return [hours, minutes, seconds, ampm];
};
const to24Hour = (hours, minutes, second, ampm) => {
if (ampm === "PM" && hours < 12)
hours = hours + 12;
if (ampm === "AM" && hours === 12)
hours = hours - 12;
return [hours, minutes, second];
};
const pad2 = (num) => num.toString().padStart(2, "0");
const TimePicker = (props) => {
const [second, setSecond] = react_1.useState(0);
const [min, setMin] = react_1.useState(0);
const [hour, setHour] = react_1.useState(0);
const [AMPM, setAMPM] = react_1.useState("AM");
const [hasFocus, setHasFocus] = react_1.useState(false);
const [localValue, setLocalValue] = react_1.useState(null);
const { value: valueProp, onChange } = props;
const inputRef = react_1.useRef(null);
const updateValue = react_1.useCallback((hour, minute, second, ampm) => {
setLocalValue((lv) => {
if (lv instanceof Date) {
let [_hour, _min, _second] = to24Hour(hour, minute, second, ampm);
lv.setHours(_hour, _min, _second);
}
else {
lv.seconds = second;
lv.hours = hour;
lv.minutes = min;
lv.XM = ampm;
}
return lv instanceof Date ? new Date(lv) : Object.assign({}, lv);
});
onChange && onChange(localValue);
}, [localValue, min, onChange]);
react_1.useEffect(() => {
let value = valueProp !== null && valueProp !== void 0 ? valueProp : new Date();
if (value instanceof Date) {
let [_hours, _mins, _seconds, _ampm] = to12Hour(value);
setSecond(_seconds);
setMin(_mins);
setHour(_hours);
setAMPM(_ampm);
}
else {
setSecond(value.seconds);
setMin(value.minutes);
setHour(value.hours);
setAMPM(value.XM);
}
setLocalValue(value);
}, [valueProp]);
react_1.useEffect(() => {
if (localValue) {
updateValue(hour, min, second, AMPM);
}
}, [min, hour, second, AMPM, localValue, updateValue]);
const handleHourChange = (h) => {
if (h > 0 && h < 12) {
setHour(h);
}
};
const handleMinChange = (m) => {
if (m >= 0 && m < 60) {
setMin(m);
}
};
const handleSecondChange = (s) => {
if (s >= 0 && s < 60) {
setSecond(s);
}
};
const handleFocus = react_1.useCallback(() => {
setHasFocus(true);
}, []);
const handleBlur = react_1.useCallback(() => {
setHasFocus(false);
}, []);
let themeContext = react_1.useContext(styled_components_1.ThemeContext);
return (jsx_runtime_1.jsxs(grommet_1.Box, { children: [jsx_runtime_1.jsx(grommet_1.Box, Object.assign({ direction: "row" }, { children: jsx_runtime_1.jsxs(InputBox, Object.assign({ direction: "row", justify: "start", ref: inputRef, align: "center", onClick: handleFocus }, { children: [jsx_runtime_1.jsx(grommet_1.Box, { children: jsx_runtime_1.jsx(grommet_1.Text, { children: pad2(hour) }, void 0) }, void 0),
jsx_runtime_1.jsx("span", { children: " : " }, void 0),
jsx_runtime_1.jsx(grommet_1.Box, { children: jsx_runtime_1.jsx(grommet_1.Text, { children: pad2(min) }, void 0) }, void 0),
jsx_runtime_1.jsx("span", { children: " : " }, void 0),
jsx_runtime_1.jsx(grommet_1.Box, { children: jsx_runtime_1.jsx(grommet_1.Text, { children: pad2(second) }, void 0) }, void 0),
jsx_runtime_1.jsx(grommet_1.Box, Object.assign({ margin: { start: "0.5em" } }, { children: jsx_runtime_1.jsx(grommet_1.Text, { children: AMPM }, void 0) }), void 0)] }), void 0) }), void 0),
(inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) && hasFocus && (jsx_runtime_1.jsx(grommet_1.Drop, Object.assign({ target: inputRef.current, onClickOutside: handleBlur, stretch: false, align: Object.assign({ top: "bottom" }, (themeContext.dir === "rtl"
? {
right: "right",
}
: {
left: "left",
})), plain: true }, { children: jsx_runtime_1.jsxs(grommet_1.Box, Object.assign({ margin: {
bottom: "0.5em",
}, width: "10em", align: "center", border: "all", pad: "small", round: "xsmall", background: "light-1" }, { children: [jsx_runtime_1.jsxs(grommet_1.Box, Object.assign({ direction: "row", align: "center", margin: {
vertical: "1em",
} }, { children: [jsx_runtime_1.jsx(grommet_1.Box, { children: jsx_runtime_1.jsx(numeric_updown_1.NumericUpDown, { value: hour, minValue: 1, maxValue: 23, changeTreshold: 80, onChange: handleHourChange }, void 0) }, void 0),
jsx_runtime_1.jsx(grommet_1.Box, Object.assign({ margin: {
horizontal: "xsmall",
} }, { children: jsx_runtime_1.jsx(numeric_updown_1.NumericUpDown, { value: min, onChange: handleMinChange, changeTreshold: 80, minValue: 0, maxValue: 59 }, void 0) }), void 0),
jsx_runtime_1.jsx(grommet_1.Box, { children: jsx_runtime_1.jsx(numeric_updown_1.NumericUpDown, { value: second, minValue: 0, maxValue: 59, changeTreshold: 80, onChange: handleSecondChange }, void 0) }, void 0)] }), void 0),
jsx_runtime_1.jsx(grommet_1.Box, { children: jsx_runtime_1.jsx(grommet_1.Box, { children: jsx_runtime_1.jsx(grommet_1.RadioButtonGroup, Object.assign({ direction: "row", name: "ampm", value: AMPM, options: ["AM", "PM"], onChange: (e) => setAMPM(e.target.value) }, { children: (option, { checked, hover }) => {
let background;
if (checked)
background = "brand";
else if (hover)
background = "light-4";
else
background = "light-3";
return (jsx_runtime_1.jsx(grommet_1.Box, Object.assign({ background: background, pad: "xsmall" }, { children: option }), void 0));
} }), void 0) }, void 0) }, void 0)] }), void 0) }), void 0))] }, void 0));
};
exports.TimePicker = TimePicker;