feat(datetime-picker): add disabled state to datetime picker component

Signed-off-by: Wanjin Noh <[email protected]>
cloudforet-io · Dec 3, 2024 · f18fdbd · f18fdbd
1 parent 076d837
commit f18fdbd
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 11 deletions.
diff --git a/packages/mirinae/src/controls/datetime-picker/PDatetimePicker.mdx b/packages/mirinae/src/controls/datetime-picker/PDatetimePicker.mdx
@@ -44,6 +44,12 @@ Please refer to the table below. <br/>
 <br/>
 <br/>
 
+## Disabled
+<Canvas of={PDatetimePickerStories.DisabledDatetimePicker} />
+
+<br/>
+<br/>
+
 ## Default With Time Picker
 <Canvas of={PDatetimePickerStories.DefaultWithTimePicker} />
 

diff --git a/packages/mirinae/src/controls/datetime-picker/PDatetimePicker.stories.ts b/packages/mirinae/src/controls/datetime-picker/PDatetimePicker.stories.ts
@@ -108,6 +108,37 @@ export const InvalidDatetimePicker: Story = {
     }),
 };
 
+export const DisabledDatetimePicker: Story = {
+    render: () => ({
+        components: { PDatetimePicker },
+        i18n: I18nConnector.i18n,
+        template: `
+            <table style="border-collapse: separate; border-spacing: 16px;">
+            <tr>
+                <td><p-datetime-picker disabled :selected-dates.sync="selectedDates" /></td>
+                <td><p-datetime-picker disabled style-type="text" :selected-dates.sync="selectedDates" /></td>
+            </tr>
+            <tr>
+                <td><p-datetime-picker disabled data-type="yearToTime" :selected-dates.sync="selectedDates" /></td>
+                <td><p-datetime-picker disabled data-type="yearToTime" style-type="text" :selected-dates.sync="selectedDates" /></td>
+            </tr>
+            <tr>
+                <td><p-datetime-picker disabled data-type="time" /></td>
+                <td><p-datetime-picker disabled data-type="time" style-type="text" /></td>
+            </tr>
+            </table>
+        `,
+        setup() {
+            const state = reactive({
+                selectedDates: ['2021-10-01T00:00:00+09:00'],
+            });
+            return {
+                ...toRefs(state),
+            };
+        },
+    }),
+};
+
 export const DefaultWithTimePicker: Story = {
     render: () => ({
         components: { PDatetimePicker },

diff --git a/packages/mirinae/src/controls/datetime-picker/PDatetimePicker.vue b/packages/mirinae/src/controls/datetime-picker/PDatetimePicker.vue
@@ -6,12 +6,14 @@
              open : visiblePicker,
              'time-type': dataType === DATA_TYPE.time,
              invalid,
+             disabled,
          }"
     >
         <div class="input-sizer">
             <input type="text"
                    :placeholder="dataType === DATA_TYPE.time ? $t('COMPONENT.DATETIME_PICKER.SELECT_TIME') : $t('COMPONENT.DATETIME_PICKER.SELECT_DATE')"
                    data-input
+                   :disabled="disabled"
             >
         </div>
         <p-i :name="dataType === DATA_TYPE.time ? 'ic_alarm-clock' : 'ic_calendar'"
@@ -78,6 +80,14 @@ export default {
             default: STYLE_TYPE.default,
             validator: (styleType) => Object.values(STYLE_TYPE).includes(styleType as string),
         },
+        invalid: {
+            type: Boolean,
+            default: false,
+        },
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
         minDate: {
             type: [String, Date],
             default: undefined,
@@ -96,10 +106,6 @@ export default {
             default: DATA_TYPE.yearToDate,
             validator: (dataType: any) => Object.values(DATA_TYPE).includes(dataType),
         },
-        invalid: {
-            type: Boolean,
-            default: false,
-        },
     },
     setup(props: DatetimePickerProps, { emit }) {
         const state = reactive({
@@ -211,10 +217,10 @@ export default {
             }
         };
 
-        watch(() => state.datePickerRef, (datePickerRef) => {
-            if (datePickerRef) {
+        watch([() => state.datePickerRef, () => props.disabled], ([datePickerRef, disabled]) => {
+            if (datePickerRef && !disabled) {
                 createDatePicker(datePickerRef);
-            }
+            } else if (disabled && state.datePicker) state.datePicker = null;
         });
         watch([() => props.minDate, () => props.maxDate], () => {
             if (state.datePickerRef) {
@@ -242,6 +248,15 @@ export default {
     padding-right: 0.5rem;
     font-size: 0.875rem;
     letter-spacing: -0.01rem;
+    &.disabled {
+        @apply cursor-not-allowed text-gray-300;
+        input {
+            @apply cursor-not-allowed;
+            &:disabled {
+                @apply bg-transparent border-0;
+            }
+        }
+    }
     .input-sizer {
         width: 100%;
         height: 100%;
@@ -266,15 +281,15 @@ export default {
     }
 
     /* active */
-    &:hover,
-    &.open,
-    &:focus-within {
+    &:hover:not(.disabled),
+    &.open:not(.disabled),
+    &:focus-within:not(.disabled) {
         @apply text-secondary border-secondary;
         cursor: pointer;
     }
 
     /* invalid */
-    &.invalid {
+    &.invalid:not(.disabled) {
         @apply border-red-500;
         color: initial;
 

diff --git a/packages/mirinae/src/controls/datetime-picker/story-helper.ts b/packages/mirinae/src/controls/datetime-picker/story-helper.ts
@@ -7,6 +7,7 @@ export const getDatetimePickerArgs = (): Args => ({
     selectedDates: [],
     styleType: STYLE_TYPE.default,
     invalid: false,
+    disabled: false,
     minDate: undefined,
     maxDate: undefined,
     selectMode: SELECT_MODE.single,
@@ -67,6 +68,21 @@ export const getDatetimePickerArgTypes = (): ArgTypes => ({
         },
         control: 'boolean',
     },
+    disabled: {
+        name: 'disabled',
+        type: { name: 'boolean' },
+        description: 'Whether to disable datetime picker or not.',
+        table: {
+            type: {
+                summary: 'boolean',
+            },
+            category: 'props',
+            defaultValue: {
+                summary: false,
+            },
+        },
+        control: 'boolean',
+    },
     minDate: {
         name: 'minDate',
         type: { name: 'string' },

diff --git a/packages/mirinae/src/controls/datetime-picker/type.ts b/packages/mirinae/src/controls/datetime-picker/type.ts
@@ -26,6 +26,8 @@ export type STYLE_TYPE = typeof STYLE_TYPE[keyof typeof STYLE_TYPE];
 export interface DatetimePickerProps {
     selectedDates: string[];
     styleType: STYLE_TYPE;
+    invalid?: boolean;
+    disabled?: boolean;
     minDate?: DateOption;
     maxDate?: DateOption;
     selectMode: SELECT_MODE;