From 0b4b46b201986cc240224142a308e76186133821 Mon Sep 17 00:00:00 2001
From: Gaby Zifferman <gabyzif@gmail.com>
Date: Wed, 18 Sep 2024 19:05:32 +0200
Subject: [PATCH] feat: add datepicker example (#408)

---
 .../DatePicker/DatePicker.stories.tsx         | 125 +++++++++++++++++-
 1 file changed, 123 insertions(+), 2 deletions(-)

diff --git a/src/components/data-entry/DatePicker/DatePicker.stories.tsx b/src/components/data-entry/DatePicker/DatePicker.stories.tsx
index 24ee64261..fa0f9313b 100644
--- a/src/components/data-entry/DatePicker/DatePicker.stories.tsx
+++ b/src/components/data-entry/DatePicker/DatePicker.stories.tsx
@@ -1,9 +1,59 @@
-import { DatePicker } from 'src/components/data-entry/DatePicker/DatePicker'
+import { DatePicker, Tooltip } from 'src/components'
+import dayjs, { type Dayjs } from 'dayjs'
+import React, { useState } from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
+import { type CellRender as RcPickerCellRender, type CellRenderInfo } from 'rc-picker/lib/interface'
+
+const DatePickerWithDisabledYears: React.FC = () => {
+  const [selectedDate, setSelectedDate] = useState<Dayjs | null>(null)
+  const disabledDate = (current: Dayjs): boolean => current && current.year() < 2023
+  const handleChange = (date: Dayjs | null) => {
+    if (date && disabledDate(date)) {
+      setSelectedDate(null)
+    } else {
+      setSelectedDate(date)
+    }
+  }
+
+  const cellRender: RcPickerCellRender<Dayjs> = (current, info: CellRenderInfo<Dayjs>) => {
+    if (!dayjs.isDayjs(current)) {
+      return info.originNode
+    }
+
+    const isDisabled = disabledDate(current)
+
+    const handleInteraction = (e: React.SyntheticEvent) => {
+      if (isDisabled) {
+        e.preventDefault()
+        e.stopPropagation()
+      }
+    }
+    if (info.type === 'year') {
+      return isDisabled ? (
+        <Tooltip title="Data is only available for years 2023 and onwards.">
+          <div
+            className="ant-picker-cell-inner"
+            style={{ color: 'rgba(0, 0, 0, 0.25)', cursor: 'not-allowed' }}
+            onClick={handleInteraction}
+            onMouseDown={handleInteraction}
+            onKeyDown={handleInteraction}>
+            {current.year()}
+          </div>
+        </Tooltip>
+      ) : (
+        info.originNode
+      )
+    }
+
+    return info.originNode
+  }
+
+  return <DatePicker picker="year" cellRender={cellRender} value={selectedDate} onChange={handleChange} />
+}
+
 const meta: Meta<typeof DatePicker> = {
   title: 'Aquarium/Data Entry/Date Picker',
   component: DatePicker,
-
   args: {},
 }
 export default meta
@@ -11,3 +61,74 @@ export default meta
 type Story = StoryObj<typeof DatePicker>
 
 export const Primary: Story = {}
+
+export const WithDatePickerWithDisabledYears: Story = {
+  render: () => <DatePickerWithDisabledYears />,
+}
+
+WithDatePickerWithDisabledYears.parameters = {
+  docs: {
+    source: {
+      code: `
+import React from 'react';
+import { DatePicker } from 'antd';
+import dayjs, { Dayjs } from 'dayjs';
+import { Tooltip } from 'src/components';
+
+const DatePickerWithDisabledYears: React.FC = () => {
+  const [selectedDate, setSelectedDate] = React.useState<Dayjs | null>(null);
+
+  const disabledDate = (current: Dayjs): boolean => current && current.year() < 2023;
+
+  const handleChange = (date: Dayjs | null) => {
+    if (date && disabledDate(date)) {
+      setSelectedDate(null);
+    } else {
+      setSelectedDate(date);
+    }
+  };
+
+  const cellRender = (current: Dayjs, info: any) => {
+    const isDisabled = disabledDate(current);
+
+    const handleInteraction = (e: React.SyntheticEvent) => {
+      if (isDisabled) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
+
+    if (info.type === 'year') {
+      return isDisabled ? (
+        <Tooltip title="Data is only available for years 2023 and onwards.">
+          <div
+            className="ant-picker-cell-inner"
+            style={{ color: 'rgba(0, 0, 0, 0.25)', cursor: 'not-allowed' }}
+            onClick={handleInteraction}
+            onMouseDown={handleInteraction}
+            onKeyDown={handleInteraction}
+          >
+            {current.year()}
+          </div>
+        </Tooltip>
+      ) : (
+        info.originNode
+      );
+    }
+
+    return info.originNode;
+  };
+
+  return (
+    <DatePicker
+      picker="year"
+      cellRender={cellRender}
+      value={selectedDate}
+      onChange={handleChange}
+    />
+  );
+};
+      `,
+    },
+  },
+}