Skip to content

Commit f82dbad

Browse files
t0m3kt0m3k
authored
Merge pull request onesine#143 from poshiemaaat/add-is-forward-looking-prop
Add prop for setting year selector position
2 parents 46298c9 + fd557e2 commit f82dbad

File tree

9 files changed

+78
-11
lines changed

9 files changed

+78
-11
lines changed

‎pages/index.js‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Datepicker from "../src";
22
import { useState } from "react";
3-
import { COLORS } from "../src/constants";
3+
import { COLORS, DATE_LOOKING_OPTIONS } from "../src/constants";
44
import dayjs from "dayjs";
55
import Head from "next/head";
66

@@ -25,6 +25,7 @@ export default function Playground() {
2525
const [readOnly, setReadOnly] = useState(false);
2626
const [minDate, setMinDate] = useState("");
2727
const [maxDate, setMaxDate] = useState("");
28+
const [dateLooking, setDateLooking] = useState(true);
2829
const [disabledDates, setDisabledDates] = useState([]);
2930
const [newDisabledDates, setNewDisabledDates] = useState({ startDate: "", endDate: "" });
3031
const [startFrom, setStartFrom] = useState("2023-03-01");
@@ -104,6 +105,7 @@ export default function Playground() {
104105
readOnly={readOnly}
105106
minDate={minDate}
106107
maxDate={maxDate}
108+
dateLooking={dateLooking}
107109
disabledDates={disabledDates}
108110
startWeekOn={startWeekOn}
109111
toggleIcon={isEmpty => {
@@ -298,6 +300,25 @@ export default function Playground() {
298300
}}
299301
/>
300302
</div>
303+
<div className="mb-2">
304+
<label className="block" htmlFor="dateLooking">
305+
Date Looking
306+
</label>
307+
<select
308+
className="rounded block w-full border-gray-200 border px-4 py-2"
309+
id="dateLooking"
310+
value={dateLooking}
311+
onChange={e => {
312+
setDateLooking(e.target.value);
313+
}}
314+
>
315+
{DATE_LOOKING_OPTIONS.map((option, i) => (
316+
<option key={i} value={option}>
317+
{option}
318+
</option>
319+
))}
320+
</select>
321+
</div>
301322
</div>
302323
<div className="w-full sm:w-1/3 pr-2 flex flex-col">
303324
<div className="mb-2">

‎src/components/Calendar/Months.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,11 @@ import { loadLanguageModule } from "../../helpers";
77
import { RoundedButton } from "../utils";
88

99
interface Props {
10+
currentMonth: number;
1011
clickMonth: (month: number) => void;
1112
}
1213

13-
const Months: React.FC<Props> = ({ clickMonth }) => {
14+
const Months: React.FC<Props> = ({ currentMonth, clickMonth }) => {
1415
const { i18n } = useContext(DatepickerContext);
1516
loadLanguageModule(i18n);
1617
return (
@@ -22,6 +23,7 @@ const Months: React.FC<Props> = ({ clickMonth }) => {
2223
onClick={() => {
2324
clickMonth(item);
2425
}}
26+
active={currentMonth === item}
2527
>
2628
<>{dayjs(`2022-${item}-01`).locale(i18n).format("MMM")}</>
2729
</RoundedButton>

‎src/components/Calendar/Years.tsx‎

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,50 @@
1-
import React from "react";
1+
import React, { useContext } from "react";
22

33
import { generateArrayNumber } from "../../helpers";
44
import { RoundedButton } from "../utils";
55

6+
import DatepickerContext from "contexts/DatepickerContext";
7+
68
interface Props {
79
year: number;
10+
currentYear: number;
811
minYear: number | null;
912
maxYear: number | null;
1013
clickYear: (data: number) => void;
1114
}
1215

13-
const Years: React.FC<Props> = ({ year, minYear, maxYear, clickYear }) => {
16+
const Years: React.FC<Props> = ({ year, currentYear, minYear, maxYear, clickYear }) => {
17+
const { dateLooking } = useContext(DatepickerContext);
18+
19+
let startDate = 0;
20+
let endDate = 0;
21+
22+
switch (dateLooking) {
23+
case "backward":
24+
startDate = year - 11;
25+
endDate = year;
26+
break;
27+
case "middle":
28+
startDate = year - 4;
29+
endDate = year + 7;
30+
break;
31+
case "forward":
32+
default:
33+
startDate = year;
34+
endDate = year + 11;
35+
break;
36+
}
37+
1438
return (
1539
<div className="w-full grid grid-cols-2 gap-2 mt-2">
16-
{generateArrayNumber(year, year + 11).map((item, index) => (
40+
{generateArrayNumber(startDate, endDate).map((item, index) => (
1741
<RoundedButton
1842
key={index}
1943
padding="py-3"
2044
onClick={() => {
2145
clickYear(item);
2246
}}
47+
active={currentYear === item}
2348
disabled={
2449
(maxYear !== null && item > maxYear) || (minYear !== null && item < minYear)
2550
}

‎src/components/Calendar/index.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -312,10 +312,18 @@ const Calendar: React.FC<Props> = ({
312312
</div>
313313

314314
<div className="px-0.5 sm:px-2 mt-0.5 min-h-[285px]">
315-
{showMonths && <Months clickMonth={clickMonth} />}
315+
{showMonths && (
316+
<Months currentMonth={calendarData.date.month() + 1} clickMonth={clickMonth} />
317+
)}
316318

317319
{showYears && (
318-
<Years year={year} minYear={minYear} maxYear={maxYear} clickYear={clickYear} />
320+
<Years
321+
year={year}
322+
minYear={minYear}
323+
maxYear={maxYear}
324+
currentYear={calendarData.date.year()}
325+
clickYear={clickYear}
326+
/>
319327
)}
320328

321329
{!showMonths && !showYears && (

‎src/components/Datepicker.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ const Datepicker: React.FC<DatepickerType> = ({
3535
readOnly = false,
3636
minDate = null,
3737
maxDate = null,
38+
dateLooking = "forward",
3839
disabledDates = null,
3940
inputId,
4041
inputName,
@@ -261,6 +262,7 @@ const Datepicker: React.FC<DatepickerType> = ({
261262
displayFormat,
262263
minDate,
263264
maxDate,
265+
dateLooking,
264266
disabledDates,
265267
inputId,
266268
inputName,
@@ -293,6 +295,7 @@ const Datepicker: React.FC<DatepickerType> = ({
293295
displayFormat,
294296
minDate,
295297
maxDate,
298+
dateLooking,
296299
disabledDates,
297300
inputId,
298301
inputName,

‎src/components/utils.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ interface Button {
1313
disabled?: boolean;
1414
roundedFull?: boolean;
1515
padding?: string;
16+
active?: boolean;
1617
}
1718

1819
export const DateIcon: React.FC<IconProps> = ({ className = "w-6 h-6" }) => {
@@ -171,23 +172,25 @@ export const RoundedButton: React.FC<Button> = ({
171172
onClick,
172173
disabled,
173174
roundedFull = false,
174-
padding = "py-[0.55rem]"
175+
padding = "py-[0.55rem]",
176+
active = false
175177
}) => {
176178
// Contexts
177179
const { primaryColor } = useContext(DatepickerContext);
178180

179181
// Functions
180182
const getClassName = useCallback(() => {
181183
const darkClass = "dark:text-white/70 dark:hover:bg-white/10 dark:focus:bg-white/10";
184+
const activeClass = active ? "font-semibold bg-gray-50 dark:bg-white/5" : "";
182185
const defaultClass = !roundedFull
183-
? `w-full tracking-wide ${darkClass} transition-all duration-300 px-3 ${padding} uppercase hover:bg-gray-100 rounded-md focus:ring-1`
184-
: `${darkClass} transition-all duration-300 hover:bg-gray-100 rounded-full p-[0.45rem] focus:ring-1`;
186+
? `w-full tracking-wide ${darkClass} ${activeClass} transition-all duration-300 px-3 ${padding} uppercase hover:bg-gray-100 rounded-md focus:ring-1`
187+
: `${darkClass} ${activeClass} transition-all duration-300 hover:bg-gray-100 rounded-full p-[0.45rem] focus:ring-1`;
185188
const buttonFocusColor =
186189
BUTTON_COLOR.focus[primaryColor as keyof typeof BUTTON_COLOR.focus];
187190
const disabledClass = disabled ? "line-through" : "";
188191

189192
return `${defaultClass} ${buttonFocusColor} ${disabledClass}`;
190-
}, [disabled, padding, primaryColor, roundedFull]);
193+
}, [disabled, padding, primaryColor, roundedFull, active]);
191194

192195
return (
193196
<button type="button" className={getClassName()} onClick={onClick} disabled={disabled}>

‎src/constants/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ export const DATE_FORMAT = "YYYY-MM-DD";
2929

3030
export const START_WEEK = "sun";
3131

32+
export const DATE_LOOKING_OPTIONS = ["forward", "backward", "middle"];
33+
3234
export const DAYS = [0, 1, 2, 3, 4, 5, 6];
3335

3436
export const MONTHS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

‎src/contexts/DatepickerContext.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ interface DatepickerStore {
4444
displayFormat: string;
4545
minDate?: DateType | null;
4646
maxDate?: DateType | null;
47+
dateLooking?: "forward" | "backward" | "middle";
4748
disabledDates?: DateRangeType[] | null;
4849
inputId?: string;
4950
inputName?: string;
@@ -83,6 +84,7 @@ const DatepickerContext = createContext<DatepickerStore>({
8384
displayFormat: DATE_FORMAT,
8485
minDate: null,
8586
maxDate: null,
87+
dateLooking: "forward",
8688
disabledDates: null,
8789
inputId: undefined,
8890
inputName: undefined,

‎src/types/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ export interface DatepickerType {
7878
readOnly?: boolean;
7979
minDate?: Date | null;
8080
maxDate?: Date | null;
81+
dateLooking?: "forward" | "backward" | "middle";
8182
disabledDates?: DateRangeType[] | null;
8283
startWeekOn?: string | null;
8384
popoverDirection?: PopoverDirectionType;

0 commit comments

Comments
 (0)