Skip to content

Commit 0a50124

Browse files
julioflimajulioflima
committed
Merge new fixes.
1 parent da582c0 commit 0a50124

File tree

13 files changed

+70
-58
lines changed

13 files changed

+70
-58
lines changed

‎src/components/Calendar/Days.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import React, { useCallback, useContext } from "react";
44

55
import { BG_COLOR, TEXT_COLOR } from "../../constants";
66
import DatepickerContext from "../../contexts/DatepickerContext";
7-
import { formatDate, nextMonth, previousMonth, classNames as cn } from "../../helpers";
7+
import { classNames as cn, formatDate, nextMonth, previousMonth } from "../../helpers";
88
import { Period } from "../../types";
99

1010
dayjs.extend(isBetween);
@@ -344,7 +344,7 @@ const Days: React.FC<Props> = ({
344344
);
345345

346346
return (
347-
<div className="grid grid-cols-7 gap-y-0.5 my-1">
347+
<div className="my-1 grid grid-cols-7 gap-y-0.5">
348348
{calendarData.days.previous.map((item, index) => (
349349
<button
350350
type="button"

‎src/components/Calendar/Months.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const Months: React.FC<Props> = ({ currentMonth, clickMonth }) => {
1515
const { i18n } = useContext(DatepickerContext);
1616
loadLanguageModule(i18n);
1717
return (
18-
<div className="w-full grid grid-cols-2 gap-2 mt-2">
18+
<div className="mt-2 grid w-full grid-cols-2 gap-2">
1919
{MONTHS.map(item => (
2020
<RoundedButton
2121
key={item}

‎src/components/Calendar/Week.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,12 @@ const Week: React.FC = () => {
3333
}, [startWeekOn]);
3434

3535
return (
36-
<div className="grid grid-cols-7 border-b border-gray-300 dark:border-gray-700 py-2">
36+
<div className="grid grid-cols-7 border-b border-gray-300 py-2 dark:border-gray-700">
3737
{DAYS.map(item => (
38-
<div key={item} className="tracking-wide text-gray-500 text-center">
38+
<div key={item} className="text-center tracking-wide text-gray-500">
3939
{ucFirst(
4040
shortString(
41-
dayjs(`2022-11-${6 + (item + startDateModifier)}`)
41+
dayjs(`2022-11-${6 + (item + startDateModifier)}` as any)
4242
.locale(i18n)
4343
.format("ddd")
4444
)

‎src/components/Calendar/Years.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import React, { useContext } from "react";
22

3+
import DatepickerContext from "../../contexts/DatepickerContext";
34
import { generateArrayNumber } from "../../helpers";
45
import { RoundedButton } from "../utils";
56

6-
import DatepickerContext from "contexts/DatepickerContext";
7-
87
interface Props {
98
year: number;
109
currentYear: number;
@@ -36,7 +35,7 @@ const Years: React.FC<Props> = ({ year, currentYear, minYear, maxYear, clickYear
3635
}
3736

3837
return (
39-
<div className="w-full grid grid-cols-2 gap-2 mt-2">
38+
<div className="mt-2 grid w-full grid-cols-2 gap-2">
4039
{generateArrayNumber(startDate, endDate).map((item, index) => (
4140
<RoundedButton
4241
key={index}

‎src/components/Calendar/index.tsx

+3-4
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
nextMonth,
1616
previousMonth
1717
} from "../../helpers";
18+
import { DateType } from "../../types";
1819
import {
1920
ChevronLeftIcon,
2021
ChevronRightIcon,
@@ -28,8 +29,6 @@ import Months from "./Months";
2829
import Week from "./Week";
2930
import Years from "./Years";
3031

31-
import { DateType } from "types";
32-
3332
interface Props {
3433
date: dayjs.Dayjs;
3534
minDate?: DateType | null;
@@ -256,7 +255,7 @@ const Calendar: React.FC<Props> = ({
256255

257256
return (
258257
<div className="w-full md:w-[296px] md:min-w-[296px]">
259-
<div className="flex items-center space-x-1.5 border border-gray-300 dark:border-gray-700 rounded-md px-2 py-1.5">
258+
<div className="flex items-center space-x-1.5 rounded-md border border-gray-300 px-2 py-1.5 dark:border-gray-700">
260259
{!showMonths && !showYears && (
261260
<div className="flex-none">
262261
<RoundedButton roundedFull={true} onClick={onClickPrevious}>
@@ -324,7 +323,7 @@ const Calendar: React.FC<Props> = ({
324323
)}
325324
</div>
326325

327-
<div className="px-0.5 sm:px-2 mt-0.5 min-h-[285px]">
326+
<div className="mt-0.5 min-h-[285px] px-0.5 sm:px-2">
328327
{showMonths && (
329328
<Months currentMonth={calendarData.date.month() + 1} clickMonth={clickMonth} />
330329
)}

‎src/components/Datepicker.tsx

+8-9
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@ import Calendar from "../components/Calendar";
55
import Footer from "../components/Footer";
66
import Input from "../components/Input";
77
import Shortcuts from "../components/Shortcuts";
8-
import Time from "../components/Time";
98
import { COLORS, DATE_FORMAT, DEFAULT_COLOR, LANGUAGE } from "../constants";
109
import DatepickerContext from "../contexts/DatepickerContext";
1110
import { formatDate, nextMonth, previousMonth } from "../helpers";
1211
import useOnClickOutside from "../hooks";
13-
import { Period, DatepickerType, ColorKeys, PeriodDay } from "../types";
12+
import { ColorKeys, DatepickerType, Period, PeriodDay } from "../types";
1413

14+
import Time from "./Time";
1515
import { Arrow, VerticalDash } from "./utils";
1616

1717
const Datepicker: React.FC<DatepickerType> = ({
@@ -63,9 +63,9 @@ const Datepicker: React.FC<DatepickerType> = ({
6363
const [inputText, setInputText] = useState<string>("");
6464
const [inputRef, setInputRef] = useState(React.createRef<HTMLInputElement>());
6565

66-
const [hour, setHour] = useState<string>("1");
66+
const [hour, setHour] = useState<string>("8");
6767
const [minute, setMinute] = useState<string>("00");
68-
const [periodDay, setPeriodDay] = useState<PeriodDay>("PM");
68+
const [periodDay, setPeriodDay] = useState<PeriodDay>("AM");
6969

7070
// Custom Hooks use
7171
useOnClickOutside(containerRef, () => {
@@ -361,17 +361,17 @@ const Datepicker: React.FC<DatepickerType> = ({
361361
<Input setContextRef={setInputRef} />
362362

363363
<div
364-
className="transition-all ease-out duration-300 absolute z-10 mt-[1px] text-sm lg:text-xs 2xl:text-sm translate-y-4 opacity-0 hidden"
364+
className="absolute z-10 mt-[1px] hidden translate-y-4 text-sm opacity-0 transition-all duration-300 ease-out lg:text-xs 2xl:text-sm"
365365
ref={calendarContainerRef}
366366
>
367367
<Arrow ref={arrowRef} />
368368

369-
<div className="mt-2.5 shadow-sm border border-gray-300 px-1 py-0.5 bg-white dark:bg-slate-800 dark:text-white dark:border-slate-600 rounded-lg">
370-
<div className="flex flex-col lg:flex-row py-2">
369+
<div className="mt-2.5 rounded-lg border border-gray-300 bg-white px-1 py-0.5 shadow-sm dark:border-slate-600 dark:bg-slate-800 dark:text-white">
370+
<div className="flex flex-col py-2 lg:flex-row">
371371
{showShortcuts && <Shortcuts />}
372372

373373
<div
374-
className={`flex items-stretch flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-1.5 ${
374+
className={`flex flex-col items-stretch space-y-4 md:flex-row md:space-x-1.5 md:space-y-0 ${
375375
showShortcuts ? "md:pl-2" : "md:pl-1"
376376
} pr-2 lg:pr-1`}
377377
>
@@ -393,7 +393,6 @@ const Datepicker: React.FC<DatepickerType> = ({
393393
<div className="flex items-center">
394394
<VerticalDash />
395395
</div>
396-
397396
<Calendar
398397
date={secondDate}
399398
onClickPrevious={previousMonthSecond}

‎src/components/Footer.tsx

+17-6
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,23 @@ import React, { useCallback, useContext } from "react";
33

44
import { DATE_FORMAT } from "../constants";
55
import DatepickerContext from "../contexts/DatepickerContext";
6+
import { formatDateTimeToISO } from "../helpers";
67

78
import { PrimaryButton, SecondaryButton } from "./utils";
89

910
const Footer: React.FC = () => {
1011
// Contexts
11-
const { asTimePicker, period, configs, classNames, changeDatepickerValue, hideDatepicker } =
12-
useContext(DatepickerContext);
12+
const {
13+
asTimePicker,
14+
period,
15+
hour,
16+
minute,
17+
periodDay,
18+
configs,
19+
classNames,
20+
changeDatepickerValue,
21+
hideDatepicker
22+
} = useContext(DatepickerContext);
1323

1424
// Functions
1525
const getClassName = useCallback(() => {
@@ -22,7 +32,7 @@ const Footer: React.FC = () => {
2232

2333
return (
2434
<div className={getClassName()}>
25-
<div className="w-full md:w-auto flex items-center justify-center space-x-3">
35+
<div className="flex w-full items-center justify-center space-x-3 md:w-auto">
2636
<SecondaryButton
2737
onClick={() => {
2838
hideDatepicker();
@@ -35,12 +45,13 @@ const Footer: React.FC = () => {
3545
if (period.start && period.end) {
3646
changeDatepickerValue({
3747
startDate: asTimePicker
38-
? dayjs(period.start).toISOString()
48+
? formatDateTimeToISO(period.start, hour, minute, periodDay)
3949
: dayjs(period.start).format(DATE_FORMAT),
4050
endDate: asTimePicker
41-
? dayjs(period.end).toISOString()
42-
: dayjs(period.start).format(DATE_FORMAT)
51+
? formatDateTimeToISO(period.end, hour, minute, periodDay)
52+
: dayjs(period.end).format(DATE_FORMAT)
4353
});
54+
4455
hideDatepicker();
4556
}
4657
}}

‎src/components/Input.tsx

+16-7
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,27 @@
11
import dayjs from "dayjs";
2-
import React, { useCallback, useContext, useEffect, useRef } from "react";
2+
import {
3+
ChangeEvent,
4+
FC,
5+
KeyboardEvent,
6+
RefObject,
7+
useCallback,
8+
useContext,
9+
useEffect,
10+
useRef
11+
} from "react";
312

413
import { BORDER_COLOR, DATE_FORMAT, RING_COLOR } from "../constants";
514
import DatepickerContext from "../contexts/DatepickerContext";
615
import { dateIsValid, parseFormattedDate } from "../helpers";
716

817
import ToggleButton from "./ToggleButton";
18+
const ENTER = "Enter";
919

1020
type Props = {
11-
setContextRef?: (ref: React.RefObject<HTMLInputElement>) => void;
21+
setContextRef?: (ref: RefObject<HTMLInputElement>) => void;
1222
};
1323

14-
const Input: React.FC<Props> = (e: Props) => {
24+
const Input: FC<Props> = (e: Props) => {
1525
// Context
1626
const {
1727
primaryColor,
@@ -66,7 +76,7 @@ const Input: React.FC<Props> = (e: Props) => {
6676
}, [inputRef, classNames, primaryColor, inputClassName]);
6777

6878
const handleInputChange = useCallback(
69-
(e: React.ChangeEvent<HTMLInputElement>) => {
79+
(e: ChangeEvent<HTMLInputElement>) => {
7080
const inputValue = e.target.value;
7181

7282
const dates = [];
@@ -127,8 +137,8 @@ const Input: React.FC<Props> = (e: Props) => {
127137
);
128138

129139
const handleInputKeyDown = useCallback(
130-
(e: React.KeyboardEvent<HTMLInputElement>) => {
131-
if (e.key === "Enter") {
140+
(e: KeyboardEvent<HTMLInputElement>) => {
141+
if (e.key === ENTER) {
132142
const input = inputRef.current;
133143
if (input) {
134144
input.blur();
@@ -295,7 +305,6 @@ const Input: React.FC<Props> = (e: Props) => {
295305
onChange={handleInputChange}
296306
onKeyDown={handleInputKeyDown}
297307
/>
298-
299308
<button
300309
type="button"
301310
ref={buttonRef}

‎src/components/Shortcuts.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ const Shortcuts: React.FC = () => {
9393
}
9494

9595
return Object.entries(configs.shortcuts).flatMap(([key, customConfig]) => {
96-
if (Object.prototype.hasOwnProperty.call(DEFAULT_SHORTCUTS, key)) {
96+
if (Object.prototype.hasOwnProperty?.call(DEFAULT_SHORTCUTS, key)) {
9797
return [[key, DEFAULT_SHORTCUTS[key]]];
9898
}
9999

@@ -132,8 +132,8 @@ const Shortcuts: React.FC = () => {
132132
}, []);
133133

134134
return shortcutOptions?.length ? (
135-
<div className="md:border-b mb-3 lg:mb-0 lg:border-r lg:border-b-0 border-gray-300 dark:border-gray-700 pr-1">
136-
<ul className="w-full tracking-wide flex flex-wrap lg:flex-col pb-1 lg:pb-0">
135+
<div className="mb-3 border-gray-300 pr-1 dark:border-gray-700 md:border-b lg:mb-0 lg:border-b-0 lg:border-r">
136+
<ul className="flex w-full flex-wrap pb-1 tracking-wide lg:flex-col lg:pb-0">
137137
{shortcutOptions.map(([key, item], index: number) =>
138138
Array.isArray(item) ? (
139139
item.map((item, index) => (

‎src/components/Time.tsx

+5-9
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, { ChangeEvent, useContext } from "react";
22

3-
import { RING_COLOR } from "../constants";
43
import DatepickerContext from "../contexts/DatepickerContext";
54
import { classNames as cn, formatDateTimeToISO } from "../helpers";
65
import { PeriodDay } from "../types";
@@ -12,15 +11,12 @@ const Time: React.FC = () => {
1211
minute,
1312
periodDay,
1413
period,
15-
primaryColor,
1614
changeDatepickerValue,
1715
changeHour,
1816
changeMinute,
1917
changePeriodDay
2018
} = useContext(DatepickerContext);
2119

22-
const ringFocusColor = RING_COLOR.focus[primaryColor as keyof typeof RING_COLOR.focus];
23-
2420
const svgString = `
2521
<svg
2622
class="flex-shrink-0 w-3 h-3"
@@ -45,8 +41,7 @@ const Time: React.FC = () => {
4541
"bg-[right_0.5rem_center]",
4642
"!bg-no-repeat !appearance-none !bg-transparent !text-sm !text-center !outline-none !focus:outline-none",
4743
"!pl-2 !pr-6 !py-1 rounded-[8px] !w-fit",
48-
"!border border-gray-300 focus:border-none",
49-
`${ringFocusColor}`
44+
"!border border-gray-300 focus:border-primary-blue-100"
5045
);
5146

5247
const HOURS = Array.from({ length: 12 });
@@ -88,12 +83,13 @@ const Time: React.FC = () => {
8883
};
8984

9085
return (
91-
<div className="w-full md:w-auto flex items-center justify-center space-x-3">
92-
<div className="pb-6">
86+
<div className="flex w-full items-center justify-center space-x-3 focus:ring-primary-blue-100 md:w-auto">
87+
<div className="pb-2">
9388
<select
9489
name="hour"
9590
className={selectClassname}
9691
onChange={handleChangeHour}
92+
value={hour}
9793
style={{
9894
backgroundImage: "url(" + dataUri + ")"
9995
}}
@@ -107,7 +103,7 @@ const Time: React.FC = () => {
107103
);
108104
})}
109105
</select>
110-
<span className="text-xl mx-3">:</span>
106+
<span className="mx-3 text-xl">:</span>
111107
<select
112108
name="minute"
113109
className={cn(selectClassname, "mr-4")}

‎src/components/utils.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ export const Arrow = React.forwardRef<HTMLDivElement, {}>((props, ref) => {
123123
return (
124124
<div
125125
ref={ref}
126-
className="absolute z-20 h-4 w-4 rotate-45 mt-0.5 ml-[1.2rem] border-l border-t border-gray-300 bg-white dark:bg-slate-800 dark:border-slate-600"
126+
className="absolute z-20 ml-[1.2rem] mt-0.5 h-4 w-4 rotate-45 border-l border-t border-gray-300 bg-white dark:border-slate-600 dark:bg-slate-800"
127127
/>
128128
);
129129
});
@@ -204,5 +204,5 @@ export const VerticalDash = () => {
204204
const { primaryColor } = useContext(DatepickerContext);
205205
const bgColor = BG_COLOR["500"][primaryColor as keyof (typeof BG_COLOR)["500"]];
206206

207-
return <div className={`bg-blue-500 h-7 w-1 rounded-full hidden md:block ${bgColor}`} />;
207+
return <div className={`h-7 w-1 rounded-full bg-blue-500 md:block ${bgColor}`} />;
208208
};

‎src/contexts/DatepickerContext.ts

+7-7
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@ import React, { createContext } from "react";
33

44
import { DATE_FORMAT, LANGUAGE, START_WEEK } from "../constants";
55
import {
6-
Configs,
7-
Period,
8-
DateValueType,
9-
DateType,
10-
DateRangeType,
116
ClassNamesTypeProp,
12-
PopoverDirectionType,
137
ColorKeys,
14-
PeriodDay
8+
Configs,
9+
DateRangeType,
10+
DateType,
11+
DateValueType,
12+
Period,
13+
PeriodDay,
14+
PopoverDirectionType
1515
} from "../types";
1616

1717
interface DatepickerStore {

‎src/helpers/index.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,11 @@ import customParseFormat from "dayjs/plugin/customParseFormat";
33
import weekday from "dayjs/plugin/weekday";
44

55
import { DATE_FORMAT, LANGUAGE } from "../constants";
6+
import { PeriodDay } from "../types";
67

78
dayjs.extend(weekday);
89
dayjs.extend(customParseFormat);
910

10-
import { PeriodDay } from "types";
11-
1211
export function classNames(...classes: (false | null | undefined | string)[]) {
1312
return classes.filter(Boolean).join(" ");
1413
}

0 commit comments

Comments
 (0)