feat: add classname and styles for select and option, add language fo…

…r month list
WenLonG12345 · Oct 11, 2023 · dc75f09 · dc75f09 · vercel · Oct 11, 2023
1 parent 9a3770c
commit dc75f09
Show file tree

Hide file tree

Showing 11 changed files with 2,576 additions and 1,203 deletions.
diff --git a/README.md b/README.md
@@ -15,19 +15,25 @@ yarn add react-date-dropdown
 ---
 
 #### DateDropdown
-```js
+```ts
 interface IDateDropdown {
   /** Required. Callback for date change: Format: YYYY-MM-DD */
   onDateChange: (date: string) => void;
   /** Default Date set: Format: YYYY-MM-DD */
   defaultDate?: string;
 
-  /** className for container */
-  containerClass?: string;
-  /** className for <option/> */
-  optionClass?: string;
-  /** className for <select/> */
-  selectClass?: string;
+  /** ClassName */
+  className?: {
+    container?: string;
+    select?: string;
+    option?: string;
+  };
+  /** Styles */
+  styles?: {
+    container?: React.CSSProperties;
+    select?: React.CSSProperties;
+    option?: React.CSSProperties;
+  };
 
   /** Placeholder for <select/> input */
   selectPlaceholder?: {
@@ -43,12 +49,10 @@ interface IDateDropdown {
 
 import DateDropdownPicker from 'react-date-dropdown';
 
-<DateDropdown
-  onDateChange={() => {}}
-/>
+<DateDr
 ```
 #### YearPicker
-```js
+```ts
 interface IYearPicker {
   /** Required. Callback for year change: Format: YYYY */
   onYearChange: (year: number) => void;
@@ -60,10 +64,16 @@ interface IYearPicker {
   start?: number;
   /** Ending year: Format: YYYY */
   end?: number;
-  /** className for <select/> */
-  selectClass?: string;
-  /** className for <option/> */
-  optionClass?: string;
+  /** ClassName */
+  className?: {
+    select?: string;
+    option?: string;
+  };
+  /** Styles */
+  styles?: {
+    select?: React.CSSProperties;
+    option?: React.CSSProperties;
+  };
 }
 
 import {YearPicker} from 'react-date-dropdown';
@@ -74,18 +84,24 @@ import {YearPicker} from 'react-date-dropdown';
 ```
 
 #### MonthPicker
-```js
+```ts
 interface IMonthPicker {
   /** Required. Callback for month change: Format: MM */
   onMonthChange: (month: number) => void;
   /** Default year: Format: MM */
   selectedMonth?: number;
   /** Placeholder for <select/> input */
   placeholder?: string;
-  /** className for <select/> */
-  selectClass?: string;
-  /** className for <option/> */
-  optionClass?: string;
+  /** ClassName */
+  className?: {
+    select?: string;
+    option?: string;
+  };
+  /** Styles */
+  styles?: {
+    select?: React.CSSProperties;
+    option?: React.CSSProperties;
+  };
 }
 
 import {MonthPicker} from 'react-date-dropdown';
@@ -96,7 +112,7 @@ import {MonthPicker} from 'react-date-dropdown';
 ```
 
 #### DayPicker
-```js
+```ts
 interface IDayPicker {
   /** Required. Callback for day change: Format: DD */
   onDayChange: (day: number) => void;
@@ -108,10 +124,16 @@ interface IDayPicker {
   day?: number;
   /** Placeholder for <select/> input */
   placeholder?: string;
-  /** className for <select/> */
-  selectClass?: string;
-  /** className for <option/> */
-  optionClass?: string;
+  /** ClassName */
+  className?: {
+    select?: string;
+    option?: string;
+  };
+  /** Styles */
+  styles?: {
+    select?: React.CSSProperties;
+    option?: React.CSSProperties;
+  };
 }
 
 import {DayPicker} from 'react-date-dropdown';

diff --git a/package.json b/package.json
@@ -29,14 +29,14 @@
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-terser": "^0.4.3",
     "@rollup/plugin-typescript": "^11.1.1",
-    "@storybook/addon-essentials": "7.0.18",
-    "@storybook/addon-interactions": "7.0.18",
-    "@storybook/addon-links": "7.0.18",
-    "@storybook/blocks": "7.0.18",
-    "@storybook/preset-create-react-app": "7.0.18",
-    "@storybook/react": "7.0.18",
-    "@storybook/react-webpack5": "7.0.18",
-    "@storybook/testing-library": "0.0.14-next.2",
+    "@storybook/addon-essentials": "7.4.6",
+    "@storybook/addon-interactions": "7.4.6",
+    "@storybook/addon-links": "7.4.6",
+    "@storybook/blocks": "7.4.6",
+    "@storybook/preset-create-react-app": "7.4.6",
+    "@storybook/react": "7.4.6",
+    "@storybook/react-webpack5": "7.4.6",
+    "@storybook/testing-library": "0.2.2",
     "@types/jest": "^27.5.2",
     "@types/node": "^18.0.6",
     "@types/react": "^18.0.15",
@@ -54,7 +54,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.12",
+    "eslint-plugin-storybook": "^0.6.15",
     "prettier": "^2.7.1",
     "prop-types": "15.8.1",
     "react": "18.2.0",
@@ -64,7 +64,7 @@
     "rollup": "^3.23.0",
     "rollup-plugin-dts": "^5.3.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "storybook": "7.0.18",
+    "storybook": "7.4.6",
     "ts-node": "^10.9.1",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "tslib": "^2.5.2",

diff --git a/src/components/date-dropdown.tsx b/src/components/date-dropdown.tsx
@@ -1,21 +1,27 @@
-import React, { useEffect, useState } from "react";
-import DayPicker from "./day-picker";
-import { zeroPad } from "./utils";
-import MonthPicker from "./month-picker";
-import YearPicker from "./year-picker";
+import React, { useEffect, useState } from 'react';
+import DayPicker from './day-picker';
+import { zeroPad } from './utils';
+import MonthPicker from './month-picker';
+import YearPicker from './year-picker';
 
 export interface IDateDropdown {
   /** Required. Callback for date change: Format: YYYY-MM-DD */
   onDateChange: (date: string) => void;
   /** Default date: Format: YYYY-MM-DD */
   defaultDate?: string;
 
-  /** styles for container */
-  containerClass?: string;
-  /** className for <option/> */
-  optionClass?: string;
-  /** className for <select/> */
-  selectClass?: string;
+  /** ClassName */
+  className?: {
+    container?: string;
+    select?: string;
+    option?: string;
+  };
+  /** Styles */
+  styles?: {
+    container?: React.CSSProperties;
+    select?: React.CSSProperties;
+    option?: React.CSSProperties;
+  };
 
   /** Placeholder for <select/> input */
   selectPlaceholder?: {
@@ -27,18 +33,23 @@ export interface IDateDropdown {
   yearStart?: number;
   /** Ending year: Format: YYYY */
   yearEnd?: number;
-}
 
+  /** Language for Month Strings. Default: EN */
+  language?: 'EN' | 'CN' | 'BM';
+  /** array of Month Strings, starting from Jan to Dec. limited to 12 string only */
+  arrayMonthList?: string[];
+}
 
 const DateDropdown: React.FC<IDateDropdown> = ({
   onDateChange,
   defaultDate,
-  optionClass,
-  selectClass,
-  containerClass,
+  className,
+  styles,
   selectPlaceholder,
   yearStart,
   yearEnd,
+  language,
+  arrayMonthList,
 }) => {
   const selDate = defaultDate ? new Date(defaultDate) : null;
 
@@ -68,30 +79,32 @@ const DateDropdown: React.FC<IDateDropdown> = ({
   }, [selectedDay, selectedMonth, selectedYear]);
 
   return (
-    <div className={containerClass}>
+    <div className={className?.container}>
       <YearPicker
         selectedYear={selectedYear}
         onYearChange={setSelectedYear}
-        selectClass={selectClass}
-        optionClass={optionClass}
+        className={className}
+        styles={styles}
         placeholder={selectPlaceholder?.year}
         start={yearStart}
         end={yearEnd}
       />
       <MonthPicker
         selectedMonth={selectedMonth}
         onMonthChange={setSelectedMonth}
-        selectClass={selectClass}
-        optionClass={optionClass}
+        className={className}
+        styles={styles}
         placeholder={selectPlaceholder?.month}
+        language={language}
+        arrayMonthList={arrayMonthList}
       />
       <DayPicker
         year={selectedYear}
         month={selectedMonth}
         day={selectedDay}
         onDayChange={setSelectedDay}
-        selectClass={selectClass}
-        optionClass={optionClass}
+        className={className}
+        styles={styles}
         placeholder={selectPlaceholder?.day}
       />
     </div>

diff --git a/src/components/day-picker.tsx b/src/components/day-picker.tsx
@@ -12,14 +12,16 @@ export interface IDayPicker {
   day?: number;
   /** Placeholder for <select/> input */
   placeholder?: string;
-  /** className for <select/> */
-  selectClass?: string;
-  /** style for <select/> */
-  selectStyle?: React.CSSProperties;
-  /** className for <option/> */
-  optionClass?: string;
-  /** className for <option/> */
-  optionStyle?: React.CSSProperties;
+  /** ClassName */
+  className?: {
+    select?: string;
+    option?: string;
+  };
+  /** Styles */
+  styles?: {
+    select?: React.CSSProperties;
+    option?: React.CSSProperties;
+  };
 }
 
 const DayPicker: React.FC<IDayPicker> = ({
@@ -28,23 +30,33 @@ const DayPicker: React.FC<IDayPicker> = ({
   month = 1,
   year = 1991,
   placeholder = "DD",
-  selectClass,
-  optionClass,
-  selectStyle,
-  optionStyle,
+  className,
+  styles,
 }) => {
   const renderDayOptions = () => {
     let days = month ? getDaysInMonth(year, month) : 31;
 
     const dayOptions: JSX.Element[] = [];
     dayOptions.push(
-      <option value={-1} key={-1} disabled selected className={optionClass} style={optionStyle}>
-        {placeholder ? placeholder : ""}
+      <option
+        value={-1}
+        key={-1}
+        disabled
+        selected
+        className={className?.option}
+        style={styles?.option}
+      >
+        {placeholder ? placeholder : ''}
       </option>
     );
     for (let i = 1; i <= days; ++i) {
       dayOptions.push(
-        <option value={i} key={i} className={optionClass} style={optionStyle}>
+        <option
+          value={i}
+          key={i}
+          className={className?.option}
+          style={styles?.option}
+        >
           {i}
         </option>
       );
@@ -54,8 +66,8 @@ const DayPicker: React.FC<IDayPicker> = ({
 
   return (
     <select
-      className={selectClass}
-      style={selectStyle}
+      className={className?.select}
+      style={styles?.select}
       onChange={(e: any) => onDayChange(e.target.value)}
       value={day}
     >