Resolve conflicts.

Author: julioflima

CONTRIBUTING.md

@@ -40,7 +40,7 @@ yarn pret:fix
 **Using npm**
 
 ```sh
-npm pret:fix
+npm run pret:fix
 ```
 
 ## Running playground
@@ -60,7 +60,7 @@ yarn dev
 **Using npm**
 
 ```sh
-npm dev
+npm run dev
 ```
 
 ## Before you make a Pull Request

README.md

@@ -51,13 +51,13 @@ Go to [full documentation](https://react-tailwindcss-datepicker.vercel.app/)
 ### Install via npm
 
 ```
-$ npm install react-tailwindcss-datepicker
+npm install react-tailwindcss-datepicker
 ```
 
 ### Install via yarn
 
 ```
-$ yarn add react-tailwindcss-datepicker
+yarn add react-tailwindcss-datepicker
 ```
 
 Make sure you have installed the peer dependencies as well with the below versions.

package.json

@@ -73,10 +73,11 @@
     },
     "lint-staged": {
         "*.{ts,tsx}": [
-            "npm run lint"
+            "eslint",
+            "prettier --write"
         ],
-        "*.{ts,tsx,css,scss,md}": [
-            "npm run pret:fix"
+        "*.{css,scss,json,md}": [
+            "prettier --write"
         ]
     }
 }

pages/index.js

@@ -32,6 +32,7 @@ export default function Playground() {
     const [newDisabledDates, setNewDisabledDates] = useState({ startDate: "", endDate: "" });
     const [startFrom, setStartFrom] = useState("2023-03-01");
     const [startWeekOn, setStartWeekOn] = useState("");
+    const [required, setRequired] = useState(false);
 
     const handleChange = (value, e) => {
         setValue(value);
@@ -115,6 +116,7 @@ export default function Playground() {
                         return isEmpty ? "Select Date" : "Clear";
                     }}
                     popoverDirection={"down"}
+                    required={required}
                     // classNames={{
                     //     input: ({ disabled, readOnly, className }) => {
                     //         if (disabled) {
@@ -231,6 +233,20 @@ export default function Playground() {
                             </label>
                         </div>
                     </div>
+                    <div className="mb-2 w-1/2 sm:w-full">
+                        <div className="inline-flex items-center">
+                            <input
+                                type="checkbox"
+                                className="mr-2 rounded"
+                                id="required"
+                                checked={required}
+                                onChange={e => setRequired(e.target.checked)}
+                            />
+                            <label className="block" htmlFor="required">
+                                Required
+                            </label>
+                        </div>
+                    </div>
                 </div>
                 <div className="w-full sm:w-1/3 pr-2 flex flex-col">
                     <div className="mb-2">

src/components/Calendar/Days.tsx

@@ -23,12 +23,10 @@ interface Props {
     onClickNextDays: (day: number) => void;
 }
 
-const Days: React.FC<Props> = ({
-    calendarData,
-    onClickPreviousDays,
-    onClickDay,
-    onClickNextDays
-}) => {
+const Days: React.FC<Props> = props => {
+    // Props
+    const { calendarData, onClickPreviousDays, onClickDay, onClickNextDays } = props;
+
     // Contexts
     const {
         primaryColor,

src/components/Calendar/index.tsx

@@ -39,15 +39,10 @@ interface Props {
     changeYear: (year: number) => void;
 }
 
-const Calendar: React.FC<Props> = ({
-    date,
-    minDate,
-    maxDate,
-    onClickPrevious,
-    onClickNext,
-    changeMonth,
-    changeYear
-}) => {
+const Calendar: React.FC<Props> = props => {
+    // Props
+    const { date, minDate, maxDate, onClickPrevious, onClickNext, changeMonth, changeYear } = props;
+
     // Contexts
     const {
         hour,
@@ -71,6 +66,7 @@ const Calendar: React.FC<Props> = ({
     const [showMonths, setShowMonths] = useState(false);
     const [showYears, setShowYears] = useState(false);
     const [year, setYear] = useState(date.year());
+
     // Functions
     const previous = useCallback(() => {
         return getLastDaysInMonth(
@@ -157,7 +153,9 @@ const Calendar: React.FC<Props> = ({
                 newStart = fullDay;
                 if (asSingle) {
                     newEnd = fullDay;
-                    chosePeriod(fullDay, fullDay);
+                    if (!showFooter) {
+                        chosePeriod(fullDay, fullDay);
+                    }
                 }
             } else {
                 if (period.start && !period.end) {

src/components/Datepicker.tsx

@@ -14,43 +14,48 @@ import { ColorKeys, DatepickerType, Period, PeriodDay } from "../types";
 import Time from "./Time";
 import { Arrow, VerticalDash } from "./utils";
 
-const Datepicker: React.FC<DatepickerType> = ({
-    primaryColor = "blue",
-    value = null,
-    onChange,
-    useRange = true,
-    showFooter = false,
-    showShortcuts = false,
-    configs = undefined,
-    asSingle = false,
-    asTimePicker = false,
-    placeholder = null,
-    separator = "~",
-    startFrom = null,
-    i18n = LANGUAGE,
-    disabled = false,
-    inputClassName = null,
-    containerClassName = null,
-    toggleClassName = null,
-    toggleIcon = undefined,
-    displayFormat = DATE_FORMAT,
-    readOnly = false,
-    minDate = null,
-    maxDate = null,
-    dateLooking = "forward",
-    disabledDates = null,
-    inputId,
-    inputName,
-    startWeekOn = "sun",
-    classNames = undefined,
-    popoverDirection = undefined
-}) => {
-    // Ref
+const Datepicker = (props: DatepickerType) => {
+    // Props
+    const {
+        primaryColor = "blue",
+        value = null,
+        onChange,
+        useRange = true,
+        showFooter = false,
+        showShortcuts = false,
+        configs = undefined,
+        asSingle = false,
+        placeholder = null,
+        separator = "~",
+        startFrom = null,
+        asTimePicker = false,
+        i18n = LANGUAGE,
+        disabled = false,
+        inputClassName = null,
+        containerClassName = null,
+        toggleClassName = null,
+        popupClassName = null,
+        toggleIcon = undefined,
+        displayFormat = DATE_FORMAT,
+        readOnly = false,
+        minDate = null,
+        maxDate = null,
+        dateLooking = "forward",
+        disabledDates = null,
+        inputId,
+        inputName,
+        startWeekOn = "sun",
+        classNames = undefined,
+        popoverDirection = undefined,
+        required = false
+    } = props;
+
+    // Refs
     const containerRef = useRef<HTMLDivElement | null>(null);
     const calendarContainerRef = useRef<HTMLDivElement | null>(null);
     const arrowRef = useRef<HTMLDivElement | null>(null);
 
-    // State
+    // States
     const [firstDate, setFirstDate] = useState<dayjs.Dayjs>(
         startFrom && dayjs(startFrom).isValid() ? dayjs(startFrom) : dayjs()
     );
@@ -258,6 +263,7 @@ const Datepicker: React.FC<DatepickerType> = ({
         }
         return DEFAULT_COLOR;
     }, [primaryColor]);
+
     const contextValues = useMemo(() => {
         return {
             asSingle,
@@ -303,7 +309,8 @@ const Datepicker: React.FC<DatepickerType> = ({
             classNames,
             onChange,
             input: inputRef,
-            popoverDirection
+            popoverDirection,
+            required
         };
     }, [
         asSingle,
@@ -343,6 +350,7 @@ const Datepicker: React.FC<DatepickerType> = ({
         classNames,
         inputRef,
         popoverDirection,
+        required,
         firstGotoDate
     ]);
 
@@ -355,15 +363,22 @@ const Datepicker: React.FC<DatepickerType> = ({
             : defaultContainerClassName;
     }, [containerClassName]);
 
+    const popupClassNameOverload = useMemo(() => {
+        const defaultPopupClassName =
+            "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";
+        return typeof popupClassName === "function"
+            ? popupClassName(defaultPopupClassName)
+            : typeof popupClassName === "string" && popupClassName !== ""
+            ? popupClassName
+            : defaultPopupClassName;
+    }, [popupClassName]);
+
     return (
         <DatepickerContext.Provider value={contextValues}>
             <div className={containerClassNameOverload} ref={containerRef}>
                 <Input setContextRef={setInputRef} />
 
-                <div
-                    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"
-                    ref={calendarContainerRef}
-                >
+                <div className={popupClassNameOverload} ref={calendarContainerRef}>
                     <Arrow ref={arrowRef} />
 
                     <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">

src/components/Input.tsx

@@ -47,7 +47,8 @@ const Input: FC<Props> = (e: Props) => {
         inputId,
         inputName,
         classNames,
-        popoverDirection
+        popoverDirection,
+        required
     } = useContext(DatepickerContext);
 
     // UseRefs
@@ -292,6 +293,7 @@ const Input: FC<Props> = (e: Props) => {
                 className={getClassName()}
                 disabled={disabled}
                 readOnly={readOnly}
+                required={required}
                 placeholder={
                     placeholder
                         ? placeholder

src/components/Shortcuts.tsx

@@ -1,13 +1,13 @@
 import dayjs from "dayjs";
-import React, { useCallback, useContext, useMemo } from "react";
+import React, { ReactNode, useCallback, useContext, useMemo } from "react";
 
 import { DATE_FORMAT, TEXT_COLOR } from "../constants";
 import DEFAULT_SHORTCUTS from "../constants/shortcuts";
 import DatepickerContext from "../contexts/DatepickerContext";
 import { Period, ShortcutsItem } from "../types";
 
 interface ItemTemplateProps {
-    children: JSX.Element;
+    children: ReactNode;
     key: number;
     item: ShortcutsItem | ShortcutsItem[];
 }
@@ -26,7 +26,7 @@ const ItemTemplate = React.memo((props: ItemTemplateProps) => {
     } = useContext(DatepickerContext);
 
     // Functions
-    const getClassName: () => string = useCallback(() => {
+    const getClassName = useCallback(() => {
         const textColor = TEXT_COLOR["600"][primaryColor as keyof (typeof TEXT_COLOR)["600"]];
         const textColorHover = TEXT_COLOR.hover[primaryColor as keyof typeof TEXT_COLOR.hover];
         return `whitespace-nowrap w-1/2 md:w-1/3 lg:w-auto transition-all duration-300 hover:bg-gray-100 dark:hover:bg-white/10 p-2 rounded cursor-pointer ${textColor} ${textColorHover}`;
@@ -132,9 +132,9 @@ const Shortcuts: React.FC = () => {
     }, []);
 
     return shortcutOptions?.length ? (
-        <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">
-            <ul className="flex w-full flex-wrap pb-1 tracking-wide lg:flex-col lg:pb-0">
-                {shortcutOptions.map(([key, item], index: number) =>
+        <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">
+            <ul className="w-full tracking-wide flex flex-wrap lg:flex-col pb-1 lg:pb-0">
+                {shortcutOptions.map(([key, item], index) =>
                     Array.isArray(item) ? (
                         item.map((item, index) => (
                             <ItemTemplate key={index} item={item}>

src/components/utils.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext } from "react";
+import React, { ReactNode, useCallback, useContext } from "react";
 
 import { BG_COLOR, BORDER_COLOR, BUTTON_COLOR, RING_COLOR } from "../constants";
 import DatepickerContext from "../contexts/DatepickerContext";
@@ -8,7 +8,7 @@ interface IconProps {
 }
 
 interface Button {
-    children: JSX.Element | JSX.Element[];
+    children: ReactNode;
     onClick: React.MouseEventHandler<HTMLButtonElement>;
     disabled?: boolean;
     roundedFull?: boolean;
@@ -204,5 +204,5 @@ export const VerticalDash = () => {
     const { primaryColor } = useContext(DatepickerContext);
     const bgColor = BG_COLOR["500"][primaryColor as keyof (typeof BG_COLOR)["500"]];
 
-    return <div className={`h-7 w-1 rounded-full bg-blue-500 md:block ${bgColor}`} />;
+    return <div className={`h-7 w-1 rounded-full hidden md:block ${bgColor || "bg-blue-500"}`} />;
 };