[Fix] Changed readonly to readOnly

[Fix] Stop calendar from showing when `readOnly`

Author: JefteCaro

src/components/Datepicker.tsx

@@ -47,7 +47,7 @@ interface Props {
     inputClassName?: string | null;
     containerClassName?: string | null;
     displayFormat?: string;
-    readonly?: boolean;
+    readOnly?: boolean;
 }
 
 const Datepicker: React.FC<Props> = ({
@@ -67,7 +67,7 @@ const Datepicker: React.FC<Props> = ({
     inputClassName = null,
     containerClassName = null,
     displayFormat = "YYYY-MM-DD",
-    readonly = false
+    readOnly = false
 }) => {
     // Ref
     const containerRef = useRef<HTMLDivElement>(null);
@@ -264,7 +264,7 @@ const Datepicker: React.FC<Props> = ({
             disabled,
             inputClassName,
             containerClassName,
-            readonly
+            readOnly
         };
     }, [
         asSingle,
@@ -284,7 +284,7 @@ const Datepicker: React.FC<Props> = ({
         disabled,
         inputClassName,
         containerClassName,
-        readonly
+        readOnly
     ]);
 
     return (

src/components/Input.tsx

@@ -25,7 +25,7 @@ const Input: React.FC = () => {
         separator,
         disabled,
         inputClassName,
-        readonly
+        readOnly
     } = useContext(DatepickerContext);
 
     // UseRefs
@@ -84,7 +84,7 @@ const Input: React.FC = () => {
             e.stopPropagation();
             if (inputRef?.current) {
                 inputRef.current.focus();
-                if (inputText) {
+                if (inputText && !readOnly) {
                     changeInputText("");
                     if (dayHover) {
                         changeDayHover(null);
@@ -124,7 +124,7 @@ const Input: React.FC = () => {
         const arrow = arrowContainer?.current;
 
         function showCalendarContainer() {
-            if (arrow && div && div.classList.contains("hidden")) {
+            if (arrow && div && div.classList.contains("hidden") && !readOnly) {
                 div.classList.remove("hidden");
                 div.classList.add("block");
                 // window.innerWidth === 767
@@ -168,7 +168,7 @@ const Input: React.FC = () => {
                 type="text"
                 className={getClassName()}
                 disabled={disabled}
-                readOnly={readonly}
+                readOnly={readOnly}
                 placeholder={
                     placeholder
                         ? placeholder

src/contexts/DatepickerContext.ts

@@ -31,7 +31,7 @@ interface DatepickerStore {
     disabled?: boolean;
     inputClassName?: string | null;
     containerClassName?: string | null;
-    readonly?: boolean;
+    readOnly?: boolean;
 }
 
 const DatepickerContext = createContext<DatepickerStore>({
@@ -59,7 +59,7 @@ const DatepickerContext = createContext<DatepickerStore>({
     disabled: false,
     inputClassName: "",
     containerClassName: "",
-    readonly: false
+    readOnly: false
 });
 
 export default DatepickerContext;