From 7a259fcfcf4f318237735269aeeb4fd6143a8b5e Mon Sep 17 00:00:00 2001 From: Chinnawat Chimdee Date: Fri, 6 Sep 2024 17:05:40 +0700 Subject: [PATCH 1/3] [Edited] - Migrated ts, but untested with nextjs (must be test before merge) --- package.json | 88 +- .../{CustomHeader.jsx => CustomHeader.tsx} | 40 +- src/components/CustomInputWrapped.tsx | 44 + ...{NavigateButton.jsx => NavigateButton.tsx} | 7 +- src/components/NavigateSelect.jsx | 16 - src/components/NavigateSelect.tsx | 17 + .../index.test.tsx} | 50 +- src/components/index.tsx | 178 + src/config/{constants.js => constants.ts} | 2 +- .../locale/{typings.d.ts => index.d.ts} | 0 ...lesheet.test.js => useStylesheet.test.tsx} | 3 + .../{useStylesheet.js => useStylesheet.ts} | 10 +- src/index.jsx | 215 - src/index.ts | 3 + src/setupTests.js | 5 - src/setupTests.ts | 2 + src/typings.d.ts | 3 + ...ator.test.js => YearListGenerator.test.ts} | 0 ...rListGenerator.js => YearListGenerator.ts} | 10 +- src/utils/{index.test.js => index.test.ts} | 0 src/utils/{index.js => index.ts} | 2 +- tsconfig.json | 23 + yarn.lock | 4802 +++++++++-------- 23 files changed, 3086 insertions(+), 2434 deletions(-) rename src/components/{CustomHeader.jsx => CustomHeader.tsx} (68%) create mode 100644 src/components/CustomInputWrapped.tsx rename src/components/{NavigateButton.jsx => NavigateButton.tsx} (72%) delete mode 100644 src/components/NavigateSelect.jsx create mode 100644 src/components/NavigateSelect.tsx rename src/{index.test.js => components/index.test.tsx} (70%) create mode 100644 src/components/index.tsx rename src/config/{constants.js => constants.ts} (87%) rename src/config/locale/{typings.d.ts => index.d.ts} (100%) rename src/hooks/{useStylesheet.test.js => useStylesheet.test.tsx} (84%) rename src/hooks/{useStylesheet.js => useStylesheet.ts} (76%) delete mode 100644 src/index.jsx create mode 100644 src/index.ts delete mode 100644 src/setupTests.js create mode 100644 src/setupTests.ts create mode 100644 src/typings.d.ts rename src/utils/{YearListGenerator.test.js => YearListGenerator.test.ts} (100%) rename src/utils/{YearListGenerator.js => YearListGenerator.ts} (77%) rename src/utils/{index.test.js => index.test.ts} (100%) rename src/utils/{index.js => index.ts} (81%) create mode 100644 tsconfig.json diff --git a/package.json b/package.json index 87a7bf1..09f9434 100644 --- a/package.json +++ b/package.json @@ -1,28 +1,25 @@ { - "author": "buildingwatsize", - "dependencies": { - "date-fns": "^3.6.0", - "dayjs": "^1.11.12", - "react-datepicker": "^7.3.0" - }, + "name": "thaidatepicker-react", + "version": "1.3.6", "description": "Thaidatepicker-react is a component for ReactJS that likes other DatePicker, but all we need is Buddhist Year (25XX - aka Thai Year) come with the right render day (example: Sat, 29 Feb 2020 must be equal to Sat, 29 Feb 2563) so I wish this component will be a useful thing to you :D. Happy Coding.", - "devDependencies": { - "@testing-library/jest-dom": "^6.4.8", - "@testing-library/react": "^16.0.0", - "cross-env": "^7.0.3", - "microbundle": "^0.15.1", - "mockdate": "^3.0.5", - "prop-types": "^15.8.1", - "react": "^18.3.1", - "react-dom": "^18.3.1", - "react-scripts": "^5.0.1" + "type": "module", + "directories": { + "doc": "docs", + "example": "example" }, - "engines": { - "node": ">=14" + "scripts": { + "build": "yarn run clean && microbundle --format cjs,modern --css inline --jsx React.createElement", + "clean": "rm -rf ./dist/* ./example/*/dist", + "initial": "yarn install && cd ./example/with-vite-antd-tailwind && yarn install", + "predeploy": "yarn run build && cd ./example/with-vite-antd-tailwind && yarn run build", + "start": "yarn run clean && microbundle watch --no-compress --format cjs,modern --css inline --jsx React.createElement", + "test": "cross-env CI=1 tsc && react-scripts test --env=jsdom", + "test-coverage": "cross-env CI=1 tsc && react-scripts test --env=jsdom --coverage" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/buildingwatsize/thaidatepicker-react.git" }, - "files": [ - "dist" - ], "keywords": [ "react", "datepicker", @@ -32,25 +29,42 @@ "year", "date" ], + "author": "buildingwatsize", "license": "MIT", - "main": "./dist/index.cjs", - "types": "./dist/index.d.ts", - "module": "./dist/index.modern.js", - "name": "thaidatepicker-react", + "bugs": { + "url": "https://github.com/buildingwatsize/thaidatepicker-react/issues" + }, + "homepage": "https://github.com/buildingwatsize/thaidatepicker-react#readme", + "dependencies": { + "dayjs": "^1.11.13", + "react-datepicker": "^7.3.0" + }, + "devDependencies": { + "@testing-library/dom": "^10.4.0", + "@testing-library/jest-dom": "^6.5.0", + "@testing-library/react": "^16.0.1", + "@types/jest": "^29.5.12", + "@types/react": "^18.3.5", + "@types/react-dom": "^18.3.0", + "cross-env": "^7.0.3", + "microbundle": "^0.15.1", + "mockdate": "^3.0.5", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "react-scripts": "^5.0.1", + "typescript": "^5.5.4" + }, "peerDependencies": { "react": "^18.3.1" }, - "repository": "buildingwatsize/thaidatepicker-react", - "scripts": { - "build": "yarn run clean && microbundle --format cjs,modern --css inline --jsx React.createElement", - "clean": "rm -rf ./dist/* ./example/with-vite-antd-tailwind/dist", - "initial": "yarn install && cd ./example/with-vite-antd-tailwind && yarn install", - "predeploy": "yarn run build && cd ./example/with-vite-antd-tailwind && yarn run build", - "start": "yarn run clean && microbundle watch --no-compress --format cjs,modern --css inline --jsx React.createElement", - "test": "cross-env CI=1 react-scripts test --env=jsdom", - "test-coverage": "cross-env CI=1 react-scripts test --env=jsdom --coverage" + "engines": { + "node": ">=14" }, - "source": "src/index.jsx", - "type": "module", - "version": "1.3.6" + "files": [ + "dist" + ], + "source": "src/index.ts", + "main": "dist/index.cjs", + "module": "dist/index.modern.js", + "types": "dist/index.d.ts" } \ No newline at end of file diff --git a/src/components/CustomHeader.jsx b/src/components/CustomHeader.tsx similarity index 68% rename from src/components/CustomHeader.jsx rename to src/components/CustomHeader.tsx index 0613403..576580e 100644 --- a/src/components/CustomHeader.jsx +++ b/src/components/CustomHeader.tsx @@ -1,13 +1,15 @@ import dayjs from "dayjs"; -import React from "react"; - -import NavigateButton from "./NavigateButton"; -import NavigateSelect from "./NavigateSelect"; +import React, { PropsWithChildren } from "react"; +import { type ReactDatePickerCustomHeaderProps } from "react-datepicker"; import { THAI_MONTH_LIST } from "../config/constants"; import { ConvertToThaiYear } from "../utils"; +import NavigateButton from "./NavigateButton"; +import NavigateSelect from "./NavigateSelect"; -const HeaderContainer = ({ children }) => ( +export const HeaderContainer: React.FC = ({ + children, +}: PropsWithChildren) => (
(
); -const CustomHeader = ( - prevButtonIcon, - nextButtonIcon, - prevButtonClassName, - nextButtonClassName, - monthSelectClassName, - yearSelectClassName, - yearOptions = [] +export const CustomHeader = ( + prevButtonIcon: React.ReactNode = "<", + nextButtonIcon: React.ReactNode = ">", + prevButtonClassName: string = "", + nextButtonClassName: string = "", + monthSelectClassName: string = "", + yearSelectClassName: string = "", + yearOptions: Array = [] ) => { return ({ date, @@ -36,7 +38,7 @@ const CustomHeader = ( increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, - }) => { + }: ReactDatePickerCustomHeaderProps) => { return ( - {prevButtonIcon ? prevButtonIcon : "<"} + {prevButtonIcon} changeYear(target.value)} + onChange={({ target }) => changeYear(Number(target.value))} > {yearOptions.map((option) => ( - ))} @@ -78,11 +80,9 @@ const CustomHeader = ( disabled={nextMonthButtonDisabled} onClick={increaseMonth} > - {nextButtonIcon ? nextButtonIcon : ">"} + {nextButtonIcon} ); }; }; - -export default CustomHeader; diff --git a/src/components/CustomInputWrapped.tsx b/src/components/CustomInputWrapped.tsx new file mode 100644 index 0000000..27fdca0 --- /dev/null +++ b/src/components/CustomInputWrapped.tsx @@ -0,0 +1,44 @@ +import dayjs from "dayjs"; +import React, { forwardRef, useMemo } from "react"; +import { ConvertToThaiYear } from "../utils"; + +export const CustomInputWrapped = ( + InputComponent?: React.ComponentType, + inputProps?: React.InputHTMLAttributes, + displayFormat?: string +) => + forwardRef(({ value, ...props }: any, ref) => { + const thaiDate = useMemo(() => { + if (value) { + const date = dayjs(value); + const thaiYear = ConvertToThaiYear(date.year()); + if (displayFormat) { + let wrappedDisplayFormat = displayFormat + .replace(/YYYY/, `${thaiYear}`) + .replace(/YY/, `${thaiYear % 100}`); + return `${date.format(wrappedDisplayFormat)}`; + } + return `${thaiYear}${date.format("-MM-DD")}`; + } + return ""; + }, [value]); + return ( +
+ {InputComponent ? ( + + ) : ( + + )} +
+ ); + }); diff --git a/src/components/NavigateButton.jsx b/src/components/NavigateButton.tsx similarity index 72% rename from src/components/NavigateButton.jsx rename to src/components/NavigateButton.tsx index b688594..579a9a9 100644 --- a/src/components/NavigateButton.jsx +++ b/src/components/NavigateButton.tsx @@ -2,15 +2,16 @@ import React from "react"; const NavigateButton = ({ className, + type = "button", disabled, onClick, children, ...props -}) => { +}: React.ComponentProps<"button">) => { return (