admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix IO-2533

Browse Source 
Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
Dave Richer
2024-01-08 14:11:49 -05:00
parent 6e377f98a7
commit 213a02d5f2
1 changed files with 91 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
client/src/components/form-date-picker/form-date-picker.component.jsx
View File

@@ -1,100 +1,105 @@
import { DatePicker } from "antd"; import {DatePicker} from "antd";
import dayjs from "../../utils/day"; import dayjs from "../../utils/day";
import React, { useRef } from "react"; import React, {useRef} from "react";
import {connect} from "react-redux";
import {createStructuredSelector} from "reselect";
import {selectBodyshop} from "../../redux/user/user.selectors";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop, bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
//setUserLanguage: language => dispatch(setUserLanguage(language))
}); });
const mapDispatchToProps = (dispatch) => ({});
export default connect(mapStateToProps, mapDispatchToProps)(FormDatePicker); export default connect(mapStateToProps, mapDispatchToProps)(FormDatePicker);
const dateFormat = "MM/DD/YYYY"; const dateFormat = "MM/DD/YYYY";
// TODO, this is causing a dirty change when it should not (click the picker, click off the picker)
export function FormDatePicker({ export function FormDatePicker({
bodyshop, bodyshop,
value, value,
onChange, onChange,
onBlur, onBlur,
onlyFuture, onlyFuture,
isDateOnly = true, isDateOnly = true,
...restProps ...restProps
}) { }) {
const ref = useRef(); const ref = useRef();
const handleChange = (newDate) => { const handleChange = (newDate) => {
if (value !== newDate && onChange) { if (value !== newDate && onChange) {
onChange(isDateOnly ? newDate && newDate.format("YYYY-MM-DD") : newDate); onChange(isDateOnly ? newDate && newDate.format("YYYY-MM-DD") : newDate);
}
};
const handleKeyDown = (e) => {
if (e.key.toLowerCase() === "t") {
if (onChange) {
onChange(isDateOnly ? dayjs().format("YYYY-MM-DD") : dayjs());
}
} else if (e.key.toLowerCase() === "enter") {
if (ref.current && ref.current.blur) ref.current.blur();
}
};
const handleBlur = (e) => {
const v = e.target.value;
if (!v) return;
const _a = dayjs(
v,
["MMDDYY", "MMDDYYYY", "MMDD", "MM/DD/YY"],
"en",
false
);
if (
_a.isValid()
&& value
&& value.isValid
&& value.isValid()
) {
_a.set({
hours: value.hours(),
minutes: value.minutes(),
seconds: value.seconds(),
milliseconds: value.milliseconds(),
});
}
if (_a.isValid() && onChange) {
if (onlyFuture) {
if (dayjs().subtract(1, "day").isBefore(_a)) {
onChange(isDateOnly ? _a.format("YYYY-MM-DD") : _a);
} else {
onChange(isDateOnly ? dayjs().format("YYYY-MM-DD") : dayjs());
} }
} else { };
onChange(isDateOnly ? _a.format("YYYY-MM-DD") : _a);
}
}
};
return ( const handleKeyDown = (e) => {
<div onKeyDown={handleKeyDown}> if (e.key.toLowerCase() === "t") {
<DatePicker if (onChange) {
ref={ref} onChange(isDateOnly ? dayjs().format("YYYY-MM-DD") : dayjs());
value={value ? dayjs(value) : null} }
onChange={handleChange} } else if (e.key.toLowerCase() === "enter") {
format={dateFormat} if (ref.current && ref.current.blur) ref.current.blur();
onBlur={onBlur || handleBlur} }
showToday={false} };
disabledTime
{...(onlyFuture && { const handleBlur = (e) => {
disabledDate: (d) => dayjs().subtract(1, "day").isAfter(d), const v = e.target.value;
})} if (!v) return;
{...restProps}
/> const formats = ["MMDDYY", "MMDDYYYY", "MMDD", "MM/DD/YY", "MM/DD/YYYY"];
</div> let _a;
);
// Iterate through formats to find the correct one
for (let format of formats) {
_a = dayjs(v, format);
if (v === _a.format(format)) {
break;
}
}
if (
_a.isValid()
&& value
&& value.isValid
&& value.isValid()
) {
_a.set({
hours: value.hours(),
minutes: value.minutes(),
seconds: value.seconds(),
milliseconds: value.milliseconds(),
});
}
if (_a.isValid() && onChange) {
if (onlyFuture) {
if (dayjs().subtract(1, "day").isBefore(_a)) {
onChange(isDateOnly ? _a.format("YYYY-MM-DD") : _a);
} else {
onChange(isDateOnly ? dayjs().format("YYYY-MM-DD") : dayjs());
}
} else {
onChange(isDateOnly ? _a.format("YYYY-MM-DD") : _a);
}
}
};
return (
<div onKeyDown={handleKeyDown}>
<DatePicker
ref={ref}
value={value ? dayjs(value) : null}
onChange={handleChange}
format={dateFormat}
onBlur={onBlur || handleBlur}
showToday={false}
disabledTime
{...(onlyFuture && {
disabledDate: (d) => dayjs().subtract(1, "day").isAfter(d),
})}
{...restProps}
/>
</div>
);
} }