Feat: Add style option

sandypockets · Dec 9, 2023 · 00c4af9 · 00c4af9
1 parent 011e3d0
commit 00c4af9
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 11 deletions.
diff --git a/__tests__/datePicker.test.js b/__tests__/datePicker.test.js
@@ -1,10 +1,10 @@
 import DatePicker from "../src/datePicker";
 
 jest.useFakeTimers();
+let datePicker;
+const containerId = 'test-container';
 
 describe('DatePicker', () => {
-  let datePicker;
-  const containerId = 'test-container';
 
   beforeEach(() => {
     document.body.innerHTML = `<div id="${containerId}"></div>`;
@@ -64,4 +64,37 @@ describe('DatePicker', () => {
       expect(datePicker.currentDate.getMonth()).toBe(6); // July
     });
   });
+
+
+  describe('Corner Style', () => {
+    test('applies round style by default', () => {
+      datePicker = new DatePicker(containerId, {});
+      datePicker.init();
+      expect(document.getElementById(containerId).classList.contains('round')).toBe(true);
+    });
+
+    test('applies round style when specified', () => {
+      datePicker = new DatePicker(containerId, { cornerStyle: 'round' });
+      datePicker.init();
+      expect(document.getElementById(containerId).classList.contains('round')).toBe(true);
+    });
+
+    test('applies square style when specified', () => {
+      datePicker = new DatePicker(containerId, { cornerStyle: 'square' });
+      datePicker.init();
+      expect(document.getElementById(containerId).classList.contains('square')).toBe(true);
+    });
+
+    test('does not apply round style when square is specified', () => {
+      datePicker = new DatePicker(containerId, { cornerStyle: 'square' });
+      datePicker.init();
+      expect(document.getElementById(containerId).classList.contains('round')).toBe(false);
+    });
+
+    test('does not apply square style when round is specified', () => {
+      datePicker = new DatePicker(containerId, { cornerStyle: 'round' });
+      datePicker.init();
+      expect(document.getElementById(containerId).classList.contains('square')).toBe(false);
+    });
+  });
 });
diff --git a/dist/datepicker.bundle.js b/dist/datepicker.bundle.js
diff --git a/dist/datepicker.css b/dist/datepicker.css
diff --git a/example/index.html b/example/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="th">
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width" />
@@ -29,6 +29,7 @@
           language: 'en', // language ISO code, defaults to en -> ignored if usePageLanguage is true
           usePageLanguage: true, // Looks for a lang attribute on the page, and if the language is supported, uses it
           usePageLanguageFallback: 'en', // If usePageLanguage is true, and the page language is not supported, use this language
+          cornerStyle: 'round', // Square or round
         };
 
         const datePicker = new DatePicker('easy-dates-picker', options);

diff --git a/src/datePicker.js b/src/datePicker.js
@@ -24,9 +24,19 @@ export default function DatePicker(elementId, options) {
     textInputPlaceholder:
       options?.textInputPlaceholder ??
       inputPlaceholderTranslations[options?.usePageLanguage ? getPageLanguage() : options?.language ?? 'en'],
+    cornerStyle: options?.cornerStyle ?? 'round',
   };
   this.init = function () {
     if (this.options.darkMode) this.element.classList.add('dark');
+    if (this.options.cornerStyle === 'round') {
+      this.element.classList.add('round');
+      this.element.classList.remove('square');
+    }
+    if (this.options.cornerStyle === 'square') {
+      this.element.classList.add('square');
+      this.element.classList.remove('round');
+    }
+
     this.calendarContainer = generateCalendarContainer(
       this.currentDate,
       this.isDateSelected.bind(this),

diff --git a/src/styles/darkmode.css b/src/styles/darkmode.css
@@ -32,7 +32,7 @@
 }
 
 .dark .datepicker-day-names {
-  background-color: #3a5fd8;
+  background-color: #4a4c52;
 }
 
 .dark .datepicker-day-names > div {
@@ -41,7 +41,7 @@
 
 .dark button.prev-month,
 .dark button.next-month {
-  background-color: #3a5fd8;
+  background-color: #4a4c52;
   color: #ccc;
 }
 

diff --git a/src/styles/datepicker.css b/src/styles/datepicker.css
@@ -2,13 +2,15 @@
 @import 'lightmode.css';
 @import 'darkmode.css';
 @import 'locales.css';
+@import 'square.css';
+@import 'round.css';
 
 .datepicker-input {
   display: inline-block;
   border: 1px solid #ddd;
   height: 20px;
-  padding: 3px 7px;
   border-radius: 5px;
+  padding: 3px 7px;
   font-family: 'Roboto', sans-serif;
 }
 
@@ -31,12 +33,9 @@
 
 .datepicker-day {
   display: inline-block;
-  width: 30px;
-  height: 30px;
   line-height: 30px;
   text-align: center;
   cursor: pointer;
-  border-radius: 50%;
   margin: 0 0 5px 5px;
 }
 
@@ -63,6 +62,7 @@
 
 button.prev-month,
 button.next-month {
+  cursor: pointer;
   border-radius: 5px;
   border: none;
   padding: 5px 12px;

diff --git a/src/styles/round.css b/src/styles/round.css
@@ -0,0 +1,12 @@
+.round .datepicker-day {
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+}
+
+.round button.prev-month,
+.round button.next-month {
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+}
diff --git a/src/styles/square.css b/src/styles/square.css
@@ -0,0 +1,3 @@
+.square .datepicker-day {
+  border-radius: 5px;
+}