Skip to content

Commit

Permalink
changes
Browse files Browse the repository at this point in the history
  • Loading branch information
Samvel Baghdasaryan committed Dec 20, 2023
1 parent 89272c2 commit f6e64c4
Show file tree
Hide file tree
Showing 11 changed files with 982 additions and 790 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "beautiful-react-table",
"version": "7.3.0",
"version": "7.3.1",
"description": "My first react typescript package",
"main": "./dist/cjs/index.js",
"module": "./dist/esm/index.js",
Expand Down
224 changes: 131 additions & 93 deletions src/table/MainHeader/Filter/FiltersPerColumn/UiTypes/BetweenDates.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,32 @@
import React, { useState, useEffect } from 'react'
import dayjs, { Dayjs } from 'dayjs'
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
import { LocalizationProvider } from '@mui/x-date-pickers'
import { IComparisonType, ItemFields } from '../../../../../Models/table.models'
import './style.scss'
import { validateRangeColumns } from '../../../../../utils'
import ActionList from '../../../../../components/datePickerActionList/ActionList'
import { inputSize } from '../../../../../Models/table.enum'
import React, { useState, useEffect } from "react";
import dayjs, { Dayjs } from "dayjs";
import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers";
import {
IComparisonType,
ItemFields,
} from "../../../../../Models/table.models";
import "./style.scss";
import { validateRangeColumns } from "../../../../../utils";
import ActionList from "../../../../../components/datePickerActionList/ActionList";
import { inputSize } from "../../../../../Models/table.enum";
interface IPickDate {
columnsSizes: string
item: IComparisonType
advancedSettings: boolean
filterTypeing: ItemFields
columnName: string
isDisabled: boolean
inputSizes: inputSize
translations?: Record<string, any>
setCoulmnName: (name: string) => void
checkIsDisabled: (option: boolean) => void
handleChangeRange(from: any, to: any): void
columnsSizes: string;
item: IComparisonType;
advancedSettings: boolean;
filterTypeing: ItemFields;
columnName: string;
isDisabled: boolean;
inputSizes: inputSize;
translations?: Record<string, any>;
setCoulmnName: (name: string) => void;
checkIsDisabled: (option: boolean) => void;
handleChangeRange(from: any, to: any): void;
}
interface IDateValues {
from: undefined | null | Date | string
to: undefined | null | Date | string
from: undefined | null | Date | string;
to: undefined | null | Date | string;
}
const BetweenDates = ({
columnsSizes,
Expand All @@ -41,124 +44,144 @@ const BetweenDates = ({
const [val, setVal] = useState<IDateValues>({
from: null,
to: null,
})
const [errMessage, setErrMessage] = useState({ from: '', to: '' })
});
const [errMessage, setErrMessage] = useState({ from: "", to: "" });
const [isOpenedModal, setIsOpenedModal] = useState({
from: false,
to: false,
})
});

const handleChangeInputValue = (value: any, name: string) => {
let stateValues = { from: val.from, to: val.to }
let stateValues = { from: val.from, to: val.to };

if (value === null) {
value = ''
value = "";
} else {
value = new Date(value.valueOf() as number | string)
value = new Date(value.valueOf() as number | string);
}
if (stateValues.to === undefined) {
stateValues.to = ''
stateValues.to = "";
}
if (stateValues.from === undefined) {
stateValues.from = ''
stateValues.from = "";
}
setErrMessage({ from: '', to: '' })
setErrMessage({ from: "", to: "" });

if (name === 'to') {
if (!validateRangeColumns(stateValues.from, value, item, setErrMessage, translations?.filterAction.validations)) {
handleChangeRange(stateValues.from, value)
if (name === "to") {
if (
!validateRangeColumns(
stateValues.from,
value,
item,
setErrMessage,
translations?.filterAction.validations
)
) {
handleChangeRange(stateValues.from, value);
} else {
checkIsDisabled(true)
checkIsDisabled(true);
}
} else {
if (!validateRangeColumns(value, stateValues.to, item, setErrMessage, translations?.filterAction.validations)) {
handleChangeRange(value, stateValues.to)
if (
!validateRangeColumns(
value,
stateValues.to,
item,
setErrMessage,
translations?.filterAction.validations
)
) {
handleChangeRange(value, stateValues.to);
} else {
checkIsDisabled(true)
checkIsDisabled(true);
}
}

if (value) {
if (name === 'from') {
stateValues = { from: value, to: val.to }
if (name === "from") {
stateValues = { from: value, to: val.to };
} else {
stateValues = { from: val.from, to: value }
stateValues = { from: val.from, to: value };
}
} else {
if (name === 'from') {
stateValues = { from: undefined, to: val.to }
if (name === "from") {
stateValues = { from: undefined, to: val.to };
} else {
stateValues = { from: val.from, to: undefined }
stateValues = { from: val.from, to: undefined };
}
}
setVal(stateValues)
}
setVal(stateValues);
};
const unFocused = () => {
!isDisabled && setCoulmnName('')
}
!isDisabled && setCoulmnName("");
};
const handleOpenModal = (type: string) => {
setCoulmnName(item.ColumnName)
if (type === 'from') {
setCoulmnName(item.ColumnName);
if (type === "from") {
setIsOpenedModal((prev) => {
return { ...prev, from: true }
})
return { ...prev, from: true };
});
} else {
setIsOpenedModal((prev) => {
return { ...prev, to: true }
})
return { ...prev, to: true };
});
}
}
};
const handleClose = (type: string) => {
!isDisabled && setCoulmnName('')
if (type === 'from') {
!isDisabled && setCoulmnName("");
if (type === "from") {
setIsOpenedModal((prev) => {
return { ...prev, from: false }
})
return { ...prev, from: false };
});
} else {
setIsOpenedModal((prev) => {
return { ...prev, to: false }
})
return { ...prev, to: false };
});
}
}
};

useEffect(() => {
setCoulmnName(item.ColumnName)
}, [val])
setCoulmnName(item.ColumnName);
}, [val]);
useEffect(() => {
if (item.ColumnName === filterTypeing.PropertyName) {
let newValues: string[] = filterTypeing.Values
setVal({ from: newValues[0], to: newValues[1] })
let newValues: string[] = filterTypeing.Values;
setVal({ from: newValues[0], to: newValues[1] });
}
}, [filterTypeing])
}, [filterTypeing]);

return (
<div
className={`G-justify-between ${item.IsBold ? 'IsBold' : ''}`}
className={`G-justify-between ${item.IsBold ? "IsBold" : ""}`}
style={{
width: advancedSettings ? columnsSizes : '100%',
width: advancedSettings ? columnsSizes : "100%",
}}
>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<div
style={{ width: '48%', position: 'relative' }}
style={{ width: "48%", position: "relative" }}
tabIndex={0}
onBlur={unFocused}
className={errMessage.from ? 'date-picker' : ''}
className={errMessage.from ? "date-picker" : ""}
>
<DateTimePicker
open={isOpenedModal.from}
onOpen={() => handleOpenModal('from')}
onClose={() => handleClose('from')}
onOpen={() => handleOpenModal("from")}
onClose={() => handleClose("from")}
closeOnSelect
label={translations?.filterAction.from || 'From'}
label={translations?.filterAction.from || "From"}
ampm={false}
slotProps={{
textField: { size: inputSizes },
}}
format={'LLL'}
views={['year', 'day', 'hours', 'minutes', 'seconds']}
format="YYYY-MM-DD hh:mm:ss"
views={["year", "day", "hours", "minutes", "seconds"]}
maxDateTime={
filterTypeing.Values.length ? dayjs(filterTypeing.Values[1]) : val.to !== undefined ? dayjs(val.to) : null
filterTypeing.Values.length
? dayjs(filterTypeing.Values[1])
: val.to !== undefined
? dayjs(val.to)
: null
}
disabled={isDisabled && item.ColumnName !== columnName}
value={
Expand All @@ -168,26 +191,35 @@ const BetweenDates = ({
? dayjs(val.from)
: null
}
onChange={(newValue: any, e) => handleChangeInputValue(newValue, 'from')}
onChange={(newValue: any, e) =>
handleChangeInputValue(newValue, "from")
}
slots={{
actionBar: ActionList,
}}
/>
{errMessage.from.length ? <div style={{ color: 'red', fontSize: 12 }}>{errMessage.from}</div> : null}
{errMessage.from.length ? (
<div style={{ color: "red", fontSize: 12 }}>{errMessage.from}</div>
) : null}
</div>
</LocalizationProvider>
<div className='G-center'>-</div>
<div className="G-center">-</div>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<div style={{ width: '48%' }} tabIndex={1} onBlur={unFocused} className={errMessage.to ? 'date-picker' : ''}>
<div
style={{ width: "48%" }}
tabIndex={1}
onBlur={unFocused}
className={errMessage.to ? "date-picker" : ""}
>
<DateTimePicker
ampm={false}
label={translations?.filterAction.to || 'To'}
label={translations?.filterAction.to || "To"}
slotProps={{ textField: { size: inputSizes } }}
onOpen={() => handleOpenModal('to')}
onClose={() => handleClose('to')}
onOpen={() => handleOpenModal("to")}
onClose={() => handleClose("to")}
open={isOpenedModal.to}
format={'LLL'}
views={['year', 'day', 'hours', 'minutes', 'seconds']}
format="YYYY-MM-DD hh:mm:ss"
views={["year", "day", "hours", "minutes", "seconds"]}
minDateTime={
filterTypeing.Values.length
? dayjs(filterTypeing.Values[0])
Expand All @@ -197,17 +229,23 @@ const BetweenDates = ({
}
disabled={isDisabled && item.ColumnName !== columnName}
value={
filterTypeing.Values.length ? dayjs(filterTypeing.Values[1]) : val.to !== undefined ? dayjs(val.to) : null
filterTypeing.Values.length
? dayjs(filterTypeing.Values[1])
: val.to !== undefined
? dayjs(val.to)
: null
}
onChange={(newValue: any) => handleChangeInputValue(newValue, 'to')}
onChange={(newValue: any) => handleChangeInputValue(newValue, "to")}
slots={{
actionBar: ActionList,
}}
/>
{errMessage.to.length ? <div style={{ color: 'red', fontSize: 12 }}>{errMessage.to}</div> : null}
{errMessage.to.length ? (
<div style={{ color: "red", fontSize: 12 }}>{errMessage.to}</div>
) : null}
</div>
</LocalizationProvider>
</div>
)
}
export default BetweenDates
);
};
export default BetweenDates;
Loading

0 comments on commit f6e64c4

Please sign in to comment.