feat: add "disabled" prop

Sqrrl · Nov 12, 2022 · e0e6f6d · e0e6f6d
1 parent 90bf58b
commit e0e6f6d
Show file tree

Hide file tree

Showing 7 changed files with 167 additions and 6 deletions.
diff --git a/.changeset/long-windows-rescue.md b/.changeset/long-windows-rescue.md
@@ -0,0 +1,5 @@
+---
+'wc-datepicker': minor
+---
+
+Add "disabled" property
diff --git a/docs/index.html b/docs/index.html
@@ -118,6 +118,20 @@ <h2 id="demo">Demo</h2>
                 </tr>
               </thead>
               <tbody>
+                <tr>
+                  <td>
+                    <code id="disabled-label">disabled</code><br />
+                    <small>Disable the datepicker</small>
+                  </td>
+                  <td>
+                    <input
+                      aria-labelledby="disabled-label"
+                      id="disabled"
+                      type="checkbox"
+                      value="disabled"
+                    />
+                  </td>
+                </tr>
                 <tr>
                   <td>
                     <code id="first-day-of-week-label">first-day-of-week</code
@@ -363,6 +377,12 @@ <h2 id="options">Options</h2>
             </tr>
           </thead>
           <tbody>
+            <tr>
+              <td><code>disabled</code></td>
+              <td><code>boolean</code></td>
+              <td><code>false</code></td>
+              <td>Disable the datepicker.</td>
+            </tr>
             <tr>
               <td><code>disableDate</code></td>
               <td><code>(date: Date) => boolean</code></td>
@@ -527,6 +547,10 @@ <h2 id="styling">Styling</h2>
               <td><code>.wc-datepicker</code></td>
               <td>Outer element of the datepicker</td>
             </tr>
+            <tr>
+              <td><code>.wc-datepicker--disabled</code></td>
+              <td>Outer element of the disabled datepicker</td>
+            </tr>
             <tr>
               <td><code>.wc-datepicker__header</code></td>
               <td>
@@ -759,6 +783,7 @@ <h2 id="license">License</h2>
 
       const demoCodeContainer = document.getElementById('demo-code');
 
+      const disabledInput = document.getElementById('disabled');
       const firstDayOfWeekInput = document.getElementById('first-day-of-week');
       const localeInput = document.getElementById('locale');
       const rangeInput = document.getElementById('range');
@@ -798,6 +823,11 @@ <h2 id="license">License</h2>
         valueInput.value = event.detail ? JSON.stringify(event.detail) : '';
       });
 
+      disabledInput.addEventListener('change', (event) => {
+        datepicker.setAttribute('disabled', String(event.target.checked));
+        updateDemoCode();
+      });
+
       firstDayOfWeekInput.addEventListener('change', (event) => {
         datepicker.setAttribute('first-day-of-week', event.target.value);
         updateDemoCode();

diff --git a/src/components.d.ts b/src/components.d.ts
@@ -10,6 +10,7 @@ export namespace Components {
     interface WcDatepicker {
         "clearButtonContent"?: string;
         "disableDate"?: (date: Date) => boolean;
+        "disabled"?: boolean;
         "elementClassName"?: string;
         "firstDayOfWeek"?: number;
         "labels"?: WCDatepickerLabels;
@@ -47,6 +48,7 @@ declare namespace LocalJSX {
     interface WcDatepicker {
         "clearButtonContent"?: string;
         "disableDate"?: (date: Date) => boolean;
+        "disabled"?: boolean;
         "elementClassName"?: string;
         "firstDayOfWeek"?: number;
         "labels"?: WCDatepickerLabels;

diff --git a/src/components/wc-datepicker/wc-datepicker.spec.tsx b/src/components/wc-datepicker/wc-datepicker.spec.tsx
@@ -453,4 +453,33 @@ describe('wc-datepicker', () => {
 
     expect(spy.mock.calls[1][0].detail).toBe(undefined);
   });
+
+  it('can be disabled', async () => {
+    const page = await newSpecPage({
+      components: [WCDatepicker],
+      html: `<wc-datepicker disabled></wc-datepicker>`,
+      language: 'en'
+    });
+
+    const spy = jest.fn();
+
+    page.root.startDate = new Date('2022-01-01');
+    page.root.addEventListener('selectDate', spy);
+    page.root.addEventListener('changeMonth', spy);
+
+    await page.waitForChanges();
+
+    page.root
+      .querySelector<HTMLTableCellElement>('.wc-datepicker__date')
+      .click();
+
+    triggerKeyDown(page, 'ArrowRight');
+    triggerKeyDown(page, 'Space');
+
+    expect(
+      page.root.children[0].classList.contains('wc-datepicker--disabled')
+    ).toBeTruthy();
+
+    expect(spy).not.toHaveBeenCalled();
+  });
 });
diff --git a/src/components/wc-datepicker/wc-datepicker.tsx b/src/components/wc-datepicker/wc-datepicker.tsx
@@ -69,6 +69,7 @@ export class WCDatepicker {
   @Element() el: HTMLElement;
 
   @Prop() clearButtonContent?: string;
+  @Prop() disabled?: boolean = false;
   @Prop() disableDate?: (date: Date) => boolean = () => false;
   @Prop() elementClassName?: string = 'wc-datepicker';
   @Prop() firstDayOfWeek?: number = 0;
@@ -284,6 +285,10 @@ export class WCDatepicker {
   };
 
   private onClick = (event: Event) => {
+    if (this.disabled) {
+      return;
+    }
+
     const target = (event.target as HTMLElement).closest<HTMLElement>(
       '[data-date]'
     );
@@ -317,6 +322,10 @@ export class WCDatepicker {
   };
 
   private onKeyDown = (event: KeyboardEvent) => {
+    if (this.disabled) {
+      return;
+    }
+
     if (event.code === 'ArrowLeft') {
       event.preventDefault();
       this.updateCurrentDate(getPreviousDay(this.currentDate), true);
@@ -358,6 +367,10 @@ export class WCDatepicker {
   };
 
   private onMouseEnter = (event: MouseEvent) => {
+    if (this.disabled) {
+      return;
+    }
+
     const date = new Date(
       (event.target as HTMLElement).closest('td').dataset.date
     );
@@ -375,8 +388,12 @@ export class WCDatepicker {
     return (
       <Host>
         <div
+          aria-disabled={String(this.disabled)}
           aria-label={this.labels.picker}
-          class={this.getClassName()}
+          class={{
+            [this.getClassName()]: true,
+            [`${this.getClassName()}--disabled`]: this.disabled
+          }}
           role="group"
         >
           <div class={this.getClassName('header')}>
@@ -387,6 +404,7 @@ export class WCDatepicker {
               <button
                 aria-label={this.labels.previousYearButton}
                 class={this.getClassName('previous-year-button')}
+                disabled={this.disabled}
                 innerHTML={this.previousYearButtonContent || undefined}
                 onClick={this.previousYear}
                 type="button"
@@ -410,6 +428,7 @@ export class WCDatepicker {
               <button
                 aria-label={this.labels.previousMonthButton}
                 class={this.getClassName('previous-month-button')}
+                disabled={this.disabled}
                 innerHTML={this.previousMonthButtonContent || undefined}
                 onClick={this.previousMonth}
                 type="button"
@@ -432,6 +451,7 @@ export class WCDatepicker {
               <select
                 aria-label={this.labels.monthSelect}
                 class={this.getClassName('month-select')}
+                disabled={this.disabled}
                 name="month"
                 onChange={this.onMonthSelect}
               >
@@ -448,6 +468,7 @@ export class WCDatepicker {
               <input
                 aria-label={this.labels.yearSelect}
                 class={this.getClassName('year-select')}
+                disabled={this.disabled}
                 max={9999}
                 min={1}
                 name="year"
@@ -460,6 +481,7 @@ export class WCDatepicker {
               <button
                 aria-label={this.labels.nextMonthButton}
                 class={this.getClassName('next-month-button')}
+                disabled={this.disabled}
                 innerHTML={this.nextMonthButtonContent || undefined}
                 onClick={this.nextMonth}
                 type="button"
@@ -482,6 +504,7 @@ export class WCDatepicker {
               <button
                 aria-label={this.labels.nextYearButton}
                 class={this.getClassName('next-year-button')}
+                disabled={this.disabled}
                 innerHTML={this.nextYearButtonContent || undefined}
                 onClick={this.nextYear}
                 type="button"
@@ -585,7 +608,11 @@ export class WCDatepicker {
                             onMouseEnter={this.onMouseEnter}
                             onMouseLeave={this.onMouseLeave}
                             role="gridcell"
-                            tabIndex={isSameDay(day, this.currentDate) ? 0 : -1}
+                            tabIndex={
+                              isSameDay(day, this.currentDate) && !this.disabled
+                                ? 0
+                                : -1
+                            }
                           >
                             <Tag aria-hidden="true">{day.getDate()}</Tag>
                             <span class="visually-hidden">
@@ -609,6 +636,7 @@ export class WCDatepicker {
               {this.showTodayButton && (
                 <button
                   class={this.getClassName('today-button')}
+                  disabled={this.disabled}
                   innerHTML={this.todayButtonContent || undefined}
                   onClick={this.showToday}
                   type="button"
@@ -619,6 +647,7 @@ export class WCDatepicker {
               {this.showClearButton && (
                 <button
                   class={this.getClassName('clear-button')}
+                  disabled={this.disabled}
                   innerHTML={this.clearButtonContent || undefined}
                   onClick={this.clear}
                   type="button"

diff --git a/src/themes/dark.css b/src/themes/dark.css
@@ -28,6 +28,38 @@ wc-datepicker {
   line-height: 1.5;
 }
 
+.wc-datepicker--disabled *:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.wc-datepicker--disabled .wc-datepicker__weekday {
+  color: #767676;
+}
+
+.wc-datepicker--disabled .wc-datepicker__date:focus > * {
+  outline: none;
+  box-shadow: none;
+}
+
+.wc-datepicker--disabled .wc-datepicker__date {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.wc-datepicker--disabled .wc-datepicker__date:hover > * {
+  background-color: transparent;
+}
+
+.wc-datepicker--disabled .wc-datepicker__date--in-range:hover > * {
+  background-color: #2b2d37;
+}
+
+.wc-datepicker--disabled .wc-datepicker__date--selected:hover > * {
+  color: #14171e;
+  background-color: #ffbf00;
+}
+
 .wc-datepicker__header {
   display: flex;
   padding: 0.75rem;
@@ -159,7 +191,7 @@ wc-datepicker {
   box-shadow: inset 0 0 0 0.125rem #fff, inset 0 0 0 0.25rem #ffbf00;
 }
 
-.wc-datepicker__date--disabled {
+.wc-datepicker__date--disabled:not(.wc-datepicker__date--selected):not(.wc-datepicker__date--in-range) {
   color: #767676;
   cursor: default;
 }
@@ -168,7 +200,8 @@ wc-datepicker {
   background-color: transparent;
 }
 
-.wc-datepicker__date--disabled.wc-datepicker__date--in-range > * {
+.wc-datepicker__date--disabled.wc-datepicker__date--in-range:not(.wc-datepicker__date--selected):not(.wc-datepicker__date--in-range)
+  > * {
   background-color: transparent;
 }
 

diff --git a/src/themes/light.css b/src/themes/light.css
@@ -27,6 +27,37 @@ wc-datepicker {
   line-height: 1.5;
 }
 
+.wc-datepicker--disabled *:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.wc-datepicker--disabled .wc-datepicker__weekday {
+  color: #767676;
+}
+
+.wc-datepicker--disabled .wc-datepicker__date:focus > * {
+  outline: none;
+}
+
+.wc-datepicker--disabled .wc-datepicker__date {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.wc-datepicker--disabled .wc-datepicker__date:hover > * {
+  background-color: transparent;
+}
+
+.wc-datepicker--disabled .wc-datepicker__date--in-range:hover > * {
+  background-color: #f2f3f5;
+}
+
+.wc-datepicker--disabled .wc-datepicker__date--selected:hover > * {
+  color: #fff;
+  background-color: #0000ff;
+}
+
 .wc-datepicker__header {
   display: flex;
   padding: 0.75rem;
@@ -158,11 +189,13 @@ wc-datepicker {
   cursor: default;
 }
 
-.wc-datepicker__date--disabled:hover > * {
+.wc-datepicker__date--disabled:not(.wc-datepicker__date--selected):not(.wc-datepicker__date--in-range):hover
+  > * {
   background-color: transparent;
 }
 
-.wc-datepicker__date--disabled.wc-datepicker__date--in-range > * {
+.wc-datepicker__date--disabled.wc-datepicker__date--in-range:not(.wc-datepicker__date--selected):not(.wc-datepicker__date--in-range)
+  > * {
   background-color: transparent;
 }