From 94fdfd5bfb7ebc5d31f4de684903745a3ae0a4ee Mon Sep 17 00:00:00 2001 From: MaTeMaTuK Date: Tue, 27 Sep 2022 15:18:26 +0200 Subject: [PATCH 1/3] MonthFormats has added --- README.md | 16 +- example/package-lock.json | 528 +++++++++---------- example/src/App.tsx | 2 + package-lock.json | 110 +--- package.json | 2 +- src/components/calendar/calendar.tsx | 40 +- src/components/gantt/gantt.tsx | 12 +- src/components/task-list/task-list-table.tsx | 20 +- src/components/task-list/task-list.tsx | 6 +- src/helpers/date-helper.ts | 10 +- src/types/date-setup.ts | 3 +- src/types/public-types.ts | 3 + 12 files changed, 354 insertions(+), 398 deletions(-) diff --git a/README.md b/README.md index bec63821..a7c83f9d 100644 --- a/README.md +++ b/README.md @@ -84,13 +84,15 @@ npm start ### DisplayOption -| Parameter Name | Type | Description | -| :------------- | :------ | :---------------------------------------------------------------------------------------------------------- | -| viewMode | enum | Specifies the time scale. Hour, Quarter Day, Half Day, Day, Week(ISO-8601, 1st day is Monday), Month, Year. | -| viewDate | date | Specifies display date and time for display. | -| preStepsCount | number | Specifies empty space before the fist task | -| locale | string | Specifies the month name language. Able formats: ISO 639-2, Java Locale. | -| rtl | boolean | Sets rtl mode. | +| Parameter Name | Type | Description | +| :------------------ | :------ | :---------------------------------------------------------------------------------------------------------- | +| viewMode | enum | Specifies the time scale. Hour, Quarter Day, Half Day, Day, Week(ISO-8601, 1st day is Monday), Month, Year. | +| viewDate | date | Specifies display date and time for display. | +| preStepsCount | number | Specifies empty space before the fist task | +| locale | string | Specifies the month name language. Able formats: ISO 639-2, Java Locale. | +| monthCalendarFormat | string | Specifies the month display on calendar | +| monthTaskListFormat | string | Specifies the month display on list. | +| rtl | boolean | Sets rtl mode. | ### StylingOption diff --git a/example/package-lock.json b/example/package-lock.json index d5c5e547..f4c876c4 100644 --- a/example/package-lock.json +++ b/example/package-lock.json @@ -56,7 +56,7 @@ } }, "../node_modules/@testing-library/jest-dom": { - "version": "5.16.4", + "version": "5.16.1", "license": "MIT", "dependencies": { "@babel/runtime": "^7.9.2", @@ -117,7 +117,7 @@ "license": "MIT" }, "../node_modules/@types/react": { - "version": "18.0.9", + "version": "17.0.38", "license": "MIT", "dependencies": { "@types/prop-types": "*", @@ -126,153 +126,149 @@ } }, "../node_modules/@types/react-dom": { - "version": "18.0.4", + "version": "17.0.11", "license": "MIT", "dependencies": { "@types/react": "*" } }, "../node_modules/postcss-preset-env": { - "version": "7.5.0", + "version": "7.2.3", "license": "CC0-1.0", "dependencies": { - "@csstools/postcss-color-function": "^1.1.0", - "@csstools/postcss-font-format-keywords": "^1.0.0", - "@csstools/postcss-hwb-function": "^1.0.0", - "@csstools/postcss-ic-unit": "^1.0.0", - "@csstools/postcss-is-pseudo-class": "^2.0.2", - "@csstools/postcss-normalize-display-values": "^1.0.0", - "@csstools/postcss-oklab-function": "^1.1.0", - "@csstools/postcss-progressive-custom-properties": "^1.3.0", - "@csstools/postcss-stepped-value-functions": "^1.0.0", - "@csstools/postcss-unset-value": "^1.0.0", - "autoprefixer": "^10.4.6", - "browserslist": "^4.20.3", - "css-blank-pseudo": "^3.0.3", - "css-has-pseudo": "^3.0.4", - "css-prefers-color-scheme": "^6.0.3", - "cssdb": "^6.6.1", + "autoprefixer": "^10.4.2", + "browserslist": "^4.19.1", + "caniuse-lite": "^1.0.30001299", + "css-blank-pseudo": "^3.0.2", + "css-has-pseudo": "^3.0.3", + "css-prefers-color-scheme": "^6.0.2", + "cssdb": "^5.0.0", "postcss-attribute-case-insensitive": "^5.0.0", - "postcss-clamp": "^4.1.0", - "postcss-color-functional-notation": "^4.2.2", - "postcss-color-hex-alpha": "^8.0.3", + "postcss-color-functional-notation": "^4.2.1", + "postcss-color-hex-alpha": "^8.0.2", "postcss-color-rebeccapurple": "^7.0.2", "postcss-custom-media": "^8.0.0", - "postcss-custom-properties": "^12.1.7", + "postcss-custom-properties": "^12.1.2", "postcss-custom-selectors": "^6.0.0", - "postcss-dir-pseudo-class": "^6.0.4", - "postcss-double-position-gradients": "^3.1.1", - "postcss-env-function": "^4.0.6", - "postcss-focus-visible": "^6.0.4", - "postcss-focus-within": "^5.0.4", + "postcss-dir-pseudo-class": "^6.0.3", + "postcss-double-position-gradients": "^3.0.4", + "postcss-env-function": "^4.0.4", + "postcss-focus-visible": "^6.0.3", + "postcss-focus-within": "^5.0.3", "postcss-font-variant": "^5.0.0", - "postcss-gap-properties": "^3.0.3", - "postcss-image-set-function": "^4.0.6", + "postcss-gap-properties": "^3.0.2", + "postcss-image-set-function": "^4.0.4", "postcss-initial": "^4.0.1", - "postcss-lab-function": "^4.2.0", - "postcss-logical": "^5.0.4", + "postcss-lab-function": "^4.0.3", + "postcss-logical": "^5.0.3", "postcss-media-minmax": "^5.0.0", - "postcss-nesting": "^10.1.4", - "postcss-opacity-percentage": "^1.1.2", - "postcss-overflow-shorthand": "^3.0.3", + "postcss-nesting": "^10.1.2", + "postcss-overflow-shorthand": "^3.0.2", "postcss-page-break": "^3.0.4", - "postcss-place": "^7.0.4", - "postcss-pseudo-class-any-link": "^7.1.2", + "postcss-place": "^7.0.3", + "postcss-pseudo-class-any-link": "^7.0.2", "postcss-replace-overflow-wrap": "^4.0.0", - "postcss-selector-not": "^5.0.0", - "postcss-value-parser": "^4.2.0" + "postcss-selector-not": "^5.0.0" }, "engines": { "node": "^12 || ^14 || >=16" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, "peerDependencies": { "postcss": "^8.4" } }, "../node_modules/react": { - "version": "18.1.0", + "version": "17.0.2", "license": "MIT", "dependencies": { - "loose-envify": "^1.1.0" + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" }, "engines": { "node": ">=0.10.0" } }, "../node_modules/react-dom": { - "version": "18.1.0", + "version": "17.0.2", "license": "MIT", "dependencies": { "loose-envify": "^1.1.0", - "scheduler": "^0.22.0" + "object-assign": "^4.1.1", + "scheduler": "^0.20.2" }, "peerDependencies": { - "react": "^18.1.0" + "react": "17.0.2" } }, "../node_modules/react-scripts": { - "version": "2.1.8", + "version": "5.0.0", "license": "MIT", "dependencies": { - "@babel/core": "7.2.2", - "@svgr/webpack": "4.1.0", - "babel-core": "7.0.0-bridge.0", - "babel-eslint": "9.0.0", - "babel-jest": "23.6.0", - "babel-loader": "8.0.5", - "babel-plugin-named-asset-import": "^0.3.1", - "babel-preset-react-app": "^7.0.2", - "bfj": "6.1.1", - "case-sensitive-paths-webpack-plugin": "2.2.0", - "css-loader": "1.0.0", - "dotenv": "6.0.0", - "dotenv-expand": "4.2.0", - "eslint": "5.12.0", - "eslint-config-react-app": "^3.0.8", - "eslint-loader": "2.1.1", - "eslint-plugin-flowtype": "2.50.1", - "eslint-plugin-import": "2.14.0", - "eslint-plugin-jsx-a11y": "6.1.2", - "eslint-plugin-react": "7.12.4", - "file-loader": "2.0.0", - "fs-extra": "7.0.1", - "html-webpack-plugin": "4.0.0-alpha.2", - "identity-obj-proxy": "3.0.0", - "jest": "23.6.0", - "jest-pnp-resolver": "1.0.2", - "jest-resolve": "23.6.0", - "jest-watch-typeahead": "^0.2.1", - "mini-css-extract-plugin": "0.5.0", - "optimize-css-assets-webpack-plugin": "5.0.1", - "pnp-webpack-plugin": "1.2.1", - "postcss-flexbugs-fixes": "4.1.0", - "postcss-loader": "3.0.0", - "postcss-preset-env": "6.5.0", - "postcss-safe-parser": "4.0.1", - "react-app-polyfill": "^0.2.2", - "react-dev-utils": "^8.0.0", - "resolve": "1.10.0", - "sass-loader": "7.1.0", - "style-loader": "0.23.1", - "terser-webpack-plugin": "1.2.2", - "url-loader": "1.1.2", - "webpack": "4.28.3", - "webpack-dev-server": "3.1.14", - "webpack-manifest-plugin": "2.0.4", - "workbox-webpack-plugin": "3.6.3" + "@babel/core": "^7.16.0", + "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3", + "@svgr/webpack": "^5.5.0", + "babel-jest": "^27.4.2", + "babel-loader": "^8.2.3", + "babel-plugin-named-asset-import": "^0.3.8", + "babel-preset-react-app": "^10.0.1", + "bfj": "^7.0.2", + "browserslist": "^4.18.1", + "camelcase": "^6.2.1", + "case-sensitive-paths-webpack-plugin": "^2.4.0", + "css-loader": "^6.5.1", + "css-minimizer-webpack-plugin": "^3.2.0", + "dotenv": "^10.0.0", + "dotenv-expand": "^5.1.0", + "eslint": "^8.3.0", + "eslint-config-react-app": "^7.0.0", + "eslint-webpack-plugin": "^3.1.1", + "file-loader": "^6.2.0", + "fs-extra": "^10.0.0", + "html-webpack-plugin": "^5.5.0", + "identity-obj-proxy": "^3.0.0", + "jest": "^27.4.3", + "jest-resolve": "^27.4.2", + "jest-watch-typeahead": "^1.0.0", + "mini-css-extract-plugin": "^2.4.5", + "postcss": "^8.4.4", + "postcss-flexbugs-fixes": "^5.0.2", + "postcss-loader": "^6.2.1", + "postcss-normalize": "^10.0.1", + "postcss-preset-env": "^7.0.1", + "prompts": "^2.4.2", + "react-app-polyfill": "^3.0.0", + "react-dev-utils": "^12.0.0", + "react-refresh": "^0.11.0", + "resolve": "^1.20.0", + "resolve-url-loader": "^4.0.0", + "sass-loader": "^12.3.0", + "semver": "^7.3.5", + "source-map-loader": "^3.0.0", + "style-loader": "^3.3.1", + "tailwindcss": "^3.0.2", + "terser-webpack-plugin": "^5.2.5", + "webpack": "^5.64.4", + "webpack-dev-server": "^4.6.0", + "webpack-manifest-plugin": "^4.0.2", + "workbox-webpack-plugin": "^6.4.1" }, "bin": { "react-scripts": "bin/react-scripts.js" }, "engines": { - "node": ">=8.10" + "node": ">=14.0.0" }, "optionalDependencies": { - "fsevents": "1.2.4" + "fsevents": "^2.3.2" + }, + "peerDependencies": { + "react": ">= 16", + "typescript": "^3.2.1 || ^4" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } } }, "node_modules/@testing-library/jest-dom": { @@ -402,7 +398,7 @@ }, "dependencies": { "@testing-library/jest-dom": { - "version": "5.16.4", + "version": "5.16.1", "requires": { "@babel/runtime": "^7.9.2", "@types/testing-library__jest-dom": "^5.9.1", @@ -439,7 +435,7 @@ "version": "15.14.9" }, "@types/react": { - "version": "18.0.9", + "version": "17.0.38", "requires": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -447,124 +443,115 @@ } }, "@types/react-dom": { - "version": "18.0.4", + "version": "17.0.11", "requires": { "@types/react": "*" } }, "postcss-preset-env": { - "version": "7.5.0", + "version": "7.2.3", "requires": { - "@csstools/postcss-color-function": "^1.1.0", - "@csstools/postcss-font-format-keywords": "^1.0.0", - "@csstools/postcss-hwb-function": "^1.0.0", - "@csstools/postcss-ic-unit": "^1.0.0", - "@csstools/postcss-is-pseudo-class": "^2.0.2", - "@csstools/postcss-normalize-display-values": "^1.0.0", - "@csstools/postcss-oklab-function": "^1.1.0", - "@csstools/postcss-progressive-custom-properties": "^1.3.0", - "@csstools/postcss-stepped-value-functions": "^1.0.0", - "@csstools/postcss-unset-value": "^1.0.0", - "autoprefixer": "^10.4.6", - "browserslist": "^4.20.3", - "css-blank-pseudo": "^3.0.3", - "css-has-pseudo": "^3.0.4", - "css-prefers-color-scheme": "^6.0.3", - "cssdb": "^6.6.1", + "autoprefixer": "^10.4.2", + "browserslist": "^4.19.1", + "caniuse-lite": "^1.0.30001299", + "css-blank-pseudo": "^3.0.2", + "css-has-pseudo": "^3.0.3", + "css-prefers-color-scheme": "^6.0.2", + "cssdb": "^5.0.0", "postcss-attribute-case-insensitive": "^5.0.0", - "postcss-clamp": "^4.1.0", - "postcss-color-functional-notation": "^4.2.2", - "postcss-color-hex-alpha": "^8.0.3", + "postcss-color-functional-notation": "^4.2.1", + "postcss-color-hex-alpha": "^8.0.2", "postcss-color-rebeccapurple": "^7.0.2", "postcss-custom-media": "^8.0.0", - "postcss-custom-properties": "^12.1.7", + "postcss-custom-properties": "^12.1.2", "postcss-custom-selectors": "^6.0.0", - "postcss-dir-pseudo-class": "^6.0.4", - "postcss-double-position-gradients": "^3.1.1", - "postcss-env-function": "^4.0.6", - "postcss-focus-visible": "^6.0.4", - "postcss-focus-within": "^5.0.4", + "postcss-dir-pseudo-class": "^6.0.3", + "postcss-double-position-gradients": "^3.0.4", + "postcss-env-function": "^4.0.4", + "postcss-focus-visible": "^6.0.3", + "postcss-focus-within": "^5.0.3", "postcss-font-variant": "^5.0.0", - "postcss-gap-properties": "^3.0.3", - "postcss-image-set-function": "^4.0.6", + "postcss-gap-properties": "^3.0.2", + "postcss-image-set-function": "^4.0.4", "postcss-initial": "^4.0.1", - "postcss-lab-function": "^4.2.0", - "postcss-logical": "^5.0.4", + "postcss-lab-function": "^4.0.3", + "postcss-logical": "^5.0.3", "postcss-media-minmax": "^5.0.0", - "postcss-nesting": "^10.1.4", - "postcss-opacity-percentage": "^1.1.2", - "postcss-overflow-shorthand": "^3.0.3", + "postcss-nesting": "^10.1.2", + "postcss-overflow-shorthand": "^3.0.2", "postcss-page-break": "^3.0.4", - "postcss-place": "^7.0.4", - "postcss-pseudo-class-any-link": "^7.1.2", + "postcss-place": "^7.0.3", + "postcss-pseudo-class-any-link": "^7.0.2", "postcss-replace-overflow-wrap": "^4.0.0", - "postcss-selector-not": "^5.0.0", - "postcss-value-parser": "^4.2.0" + "postcss-selector-not": "^5.0.0" } }, "react": { - "version": "18.1.0", + "version": "17.0.2", "requires": { - "loose-envify": "^1.1.0" + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" } }, "react-dom": { - "version": "18.1.0", + "version": "17.0.2", "requires": { "loose-envify": "^1.1.0", - "scheduler": "^0.22.0" + "object-assign": "^4.1.1", + "scheduler": "^0.20.2" } }, "react-scripts": { - "version": "2.1.8", + "version": "5.0.0", "requires": { - "@babel/core": "7.2.2", - "@svgr/webpack": "4.1.0", - "babel-core": "7.0.0-bridge.0", - "babel-eslint": "9.0.0", - "babel-jest": "23.6.0", - "babel-loader": "8.0.5", - "babel-plugin-named-asset-import": "^0.3.1", - "babel-preset-react-app": "^7.0.2", - "bfj": "6.1.1", - "case-sensitive-paths-webpack-plugin": "2.2.0", - "css-loader": "1.0.0", - "dotenv": "6.0.0", - "dotenv-expand": "4.2.0", - "eslint": "5.12.0", - "eslint-config-react-app": "^3.0.8", - "eslint-loader": "2.1.1", - "eslint-plugin-flowtype": "2.50.1", - "eslint-plugin-import": "2.14.0", - "eslint-plugin-jsx-a11y": "6.1.2", - "eslint-plugin-react": "7.12.4", - "file-loader": "2.0.0", - "fs-extra": "7.0.1", - "fsevents": "1.2.4", - "html-webpack-plugin": "4.0.0-alpha.2", - "identity-obj-proxy": "3.0.0", - "jest": "23.6.0", - "jest-pnp-resolver": "1.0.2", - "jest-resolve": "23.6.0", - "jest-watch-typeahead": "^0.2.1", - "mini-css-extract-plugin": "0.5.0", - "optimize-css-assets-webpack-plugin": "5.0.1", - "pnp-webpack-plugin": "1.2.1", - "postcss-flexbugs-fixes": "4.1.0", - "postcss-loader": "3.0.0", - "postcss-preset-env": "6.5.0", - "postcss-safe-parser": "4.0.1", - "react-app-polyfill": "^0.2.2", - "react-dev-utils": "^8.0.0", - "resolve": "1.10.0", - "sass-loader": "7.1.0", - "style-loader": "0.23.1", - "terser-webpack-plugin": "1.2.2", - "url-loader": "1.1.2", - "webpack": "4.28.3", - "webpack-dev-server": "3.1.14", - "webpack-manifest-plugin": "2.0.4", - "workbox-webpack-plugin": "3.6.3" + "@babel/core": "^7.16.0", + "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3", + "@svgr/webpack": "^5.5.0", + "babel-jest": "^27.4.2", + "babel-loader": "^8.2.3", + "babel-plugin-named-asset-import": "^0.3.8", + "babel-preset-react-app": "^10.0.1", + "bfj": "^7.0.2", + "browserslist": "^4.18.1", + "camelcase": "^6.2.1", + "case-sensitive-paths-webpack-plugin": "^2.4.0", + "css-loader": "^6.5.1", + "css-minimizer-webpack-plugin": "^3.2.0", + "dotenv": "^10.0.0", + "dotenv-expand": "^5.1.0", + "eslint": "^8.3.0", + "eslint-config-react-app": "^7.0.0", + "eslint-webpack-plugin": "^3.1.1", + "file-loader": "^6.2.0", + "fs-extra": "^10.0.0", + "fsevents": "^2.3.2", + "html-webpack-plugin": "^5.5.0", + "identity-obj-proxy": "^3.0.0", + "jest": "^27.4.3", + "jest-resolve": "^27.4.2", + "jest-watch-typeahead": "^1.0.0", + "mini-css-extract-plugin": "^2.4.5", + "postcss": "^8.4.4", + "postcss-flexbugs-fixes": "^5.0.2", + "postcss-loader": "^6.2.1", + "postcss-normalize": "^10.0.1", + "postcss-preset-env": "^7.0.1", + "prompts": "^2.4.2", + "react-app-polyfill": "^3.0.0", + "react-dev-utils": "^12.0.0", + "react-refresh": "^0.11.0", + "resolve": "^1.20.0", + "resolve-url-loader": "^4.0.0", + "sass-loader": "^12.3.0", + "semver": "^7.3.5", + "source-map-loader": "^3.0.0", + "style-loader": "^3.3.1", + "tailwindcss": "^3.0.2", + "terser-webpack-plugin": "^5.2.5", + "webpack": "^5.64.4", + "webpack-dev-server": "^4.6.0", + "webpack-manifest-plugin": "^4.0.2", + "workbox-webpack-plugin": "^6.4.1" } } } @@ -572,116 +559,107 @@ "postcss-preset-env": { "version": "file:../node_modules/postcss-preset-env", "requires": { - "@csstools/postcss-color-function": "^1.1.0", - "@csstools/postcss-font-format-keywords": "^1.0.0", - "@csstools/postcss-hwb-function": "^1.0.0", - "@csstools/postcss-ic-unit": "^1.0.0", - "@csstools/postcss-is-pseudo-class": "^2.0.2", - "@csstools/postcss-normalize-display-values": "^1.0.0", - "@csstools/postcss-oklab-function": "^1.1.0", - "@csstools/postcss-progressive-custom-properties": "^1.3.0", - "@csstools/postcss-stepped-value-functions": "^1.0.0", - "@csstools/postcss-unset-value": "^1.0.0", - "autoprefixer": "^10.4.6", - "browserslist": "^4.20.3", - "css-blank-pseudo": "^3.0.3", - "css-has-pseudo": "^3.0.4", - "css-prefers-color-scheme": "^6.0.3", - "cssdb": "^6.6.1", + "autoprefixer": "^10.4.2", + "browserslist": "^4.19.1", + "caniuse-lite": "^1.0.30001299", + "css-blank-pseudo": "^3.0.2", + "css-has-pseudo": "^3.0.3", + "css-prefers-color-scheme": "^6.0.2", + "cssdb": "^5.0.0", "postcss-attribute-case-insensitive": "^5.0.0", - "postcss-clamp": "^4.1.0", - "postcss-color-functional-notation": "^4.2.2", - "postcss-color-hex-alpha": "^8.0.3", + "postcss-color-functional-notation": "^4.2.1", + "postcss-color-hex-alpha": "^8.0.2", "postcss-color-rebeccapurple": "^7.0.2", "postcss-custom-media": "^8.0.0", - "postcss-custom-properties": "^12.1.7", + "postcss-custom-properties": "^12.1.2", "postcss-custom-selectors": "^6.0.0", - "postcss-dir-pseudo-class": "^6.0.4", - "postcss-double-position-gradients": "^3.1.1", - "postcss-env-function": "^4.0.6", - "postcss-focus-visible": "^6.0.4", - "postcss-focus-within": "^5.0.4", + "postcss-dir-pseudo-class": "^6.0.3", + "postcss-double-position-gradients": "^3.0.4", + "postcss-env-function": "^4.0.4", + "postcss-focus-visible": "^6.0.3", + "postcss-focus-within": "^5.0.3", "postcss-font-variant": "^5.0.0", - "postcss-gap-properties": "^3.0.3", - "postcss-image-set-function": "^4.0.6", + "postcss-gap-properties": "^3.0.2", + "postcss-image-set-function": "^4.0.4", "postcss-initial": "^4.0.1", - "postcss-lab-function": "^4.2.0", - "postcss-logical": "^5.0.4", + "postcss-lab-function": "^4.0.3", + "postcss-logical": "^5.0.3", "postcss-media-minmax": "^5.0.0", - "postcss-nesting": "^10.1.4", - "postcss-opacity-percentage": "^1.1.2", - "postcss-overflow-shorthand": "^3.0.3", + "postcss-nesting": "^10.1.2", + "postcss-overflow-shorthand": "^3.0.2", "postcss-page-break": "^3.0.4", - "postcss-place": "^7.0.4", - "postcss-pseudo-class-any-link": "^7.1.2", + "postcss-place": "^7.0.3", + "postcss-pseudo-class-any-link": "^7.0.2", "postcss-replace-overflow-wrap": "^4.0.0", - "postcss-selector-not": "^5.0.0", - "postcss-value-parser": "^4.2.0" + "postcss-selector-not": "^5.0.0" } }, "react": { "version": "file:../node_modules/react", "requires": { - "loose-envify": "^1.1.0" + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" } }, "react-dom": { "version": "file:../node_modules/react-dom", "requires": { "loose-envify": "^1.1.0", - "scheduler": "^0.22.0" + "object-assign": "^4.1.1", + "scheduler": "^0.20.2" } }, "react-scripts": { "version": "file:../node_modules/react-scripts", "requires": { - "@babel/core": "7.2.2", - "@svgr/webpack": "4.1.0", - "babel-core": "7.0.0-bridge.0", - "babel-eslint": "9.0.0", - "babel-jest": "23.6.0", - "babel-loader": "8.0.5", - "babel-plugin-named-asset-import": "^0.3.1", - "babel-preset-react-app": "^7.0.2", - "bfj": "6.1.1", - "case-sensitive-paths-webpack-plugin": "2.2.0", - "css-loader": "1.0.0", - "dotenv": "6.0.0", - "dotenv-expand": "4.2.0", - "eslint": "5.12.0", - "eslint-config-react-app": "^3.0.8", - "eslint-loader": "2.1.1", - "eslint-plugin-flowtype": "2.50.1", - "eslint-plugin-import": "2.14.0", - "eslint-plugin-jsx-a11y": "6.1.2", - "eslint-plugin-react": "7.12.4", - "file-loader": "2.0.0", - "fs-extra": "7.0.1", - "fsevents": "1.2.4", - "html-webpack-plugin": "4.0.0-alpha.2", - "identity-obj-proxy": "3.0.0", - "jest": "23.6.0", - "jest-pnp-resolver": "1.0.2", - "jest-resolve": "23.6.0", - "jest-watch-typeahead": "^0.2.1", - "mini-css-extract-plugin": "0.5.0", - "optimize-css-assets-webpack-plugin": "5.0.1", - "pnp-webpack-plugin": "1.2.1", - "postcss-flexbugs-fixes": "4.1.0", - "postcss-loader": "3.0.0", - "postcss-preset-env": "6.5.0", - "postcss-safe-parser": "4.0.1", - "react-app-polyfill": "^0.2.2", - "react-dev-utils": "^8.0.0", - "resolve": "1.10.0", - "sass-loader": "7.1.0", - "style-loader": "0.23.1", - "terser-webpack-plugin": "1.2.2", - "url-loader": "1.1.2", - "webpack": "4.28.3", - "webpack-dev-server": "3.1.14", - "webpack-manifest-plugin": "2.0.4", - "workbox-webpack-plugin": "3.6.3" + "@babel/core": "^7.16.0", + "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3", + "@svgr/webpack": "^5.5.0", + "babel-jest": "^27.4.2", + "babel-loader": "^8.2.3", + "babel-plugin-named-asset-import": "^0.3.8", + "babel-preset-react-app": "^10.0.1", + "bfj": "^7.0.2", + "browserslist": "^4.18.1", + "camelcase": "^6.2.1", + "case-sensitive-paths-webpack-plugin": "^2.4.0", + "css-loader": "^6.5.1", + "css-minimizer-webpack-plugin": "^3.2.0", + "dotenv": "^10.0.0", + "dotenv-expand": "^5.1.0", + "eslint": "^8.3.0", + "eslint-config-react-app": "^7.0.0", + "eslint-webpack-plugin": "^3.1.1", + "file-loader": "^6.2.0", + "fs-extra": "^10.0.0", + "fsevents": "^2.3.2", + "html-webpack-plugin": "^5.5.0", + "identity-obj-proxy": "^3.0.0", + "jest": "^27.4.3", + "jest-resolve": "^27.4.2", + "jest-watch-typeahead": "^1.0.0", + "mini-css-extract-plugin": "^2.4.5", + "postcss": "^8.4.4", + "postcss-flexbugs-fixes": "^5.0.2", + "postcss-loader": "^6.2.1", + "postcss-normalize": "^10.0.1", + "postcss-preset-env": "^7.0.1", + "prompts": "^2.4.2", + "react-app-polyfill": "^3.0.0", + "react-dev-utils": "^12.0.0", + "react-refresh": "^0.11.0", + "resolve": "^1.20.0", + "resolve-url-loader": "^4.0.0", + "sass-loader": "^12.3.0", + "semver": "^7.3.5", + "source-map-loader": "^3.0.0", + "style-loader": "^3.3.1", + "tailwindcss": "^3.0.2", + "terser-webpack-plugin": "^5.2.5", + "webpack": "^5.64.4", + "webpack-dev-server": "^4.6.0", + "webpack-manifest-plugin": "^4.0.2", + "workbox-webpack-plugin": "^6.4.1" } } } diff --git a/example/src/App.tsx b/example/src/App.tsx index c2ab602e..a20f9f84 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -92,6 +92,8 @@ const App = () => { = 4.0.0" } }, - "node_modules/atob": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz", - "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==", - "dev": true, - "bin": { - "atob": "bin/atob.js" - }, - "engines": { - "node": ">= 4.5.0" - } - }, "node_modules/autoprefixer": { "version": "9.8.8", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.8.tgz", @@ -6110,17 +6104,6 @@ "node": ">=8" } }, - "node_modules/css": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz", - "integrity": "sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==", - "dev": true, - "dependencies": { - "inherits": "^2.0.4", - "source-map": "^0.6.1", - "source-map-resolve": "^0.6.0" - } - }, "node_modules/css-blank-pseudo": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-3.0.3.tgz", @@ -7525,15 +7508,6 @@ "integrity": "sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ==", "dev": true }, - "node_modules/decode-uri-component": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz", - "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=", - "dev": true, - "engines": { - "node": ">=0.10" - } - }, "node_modules/dedent": { "version": "0.7.0", "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz", @@ -18493,17 +18467,6 @@ "webpack": "^5.0.0" } }, - "node_modules/source-map-resolve": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz", - "integrity": "sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==", - "deprecated": "See https://github.com/lydell/source-map-resolve#deprecated", - "dev": true, - "dependencies": { - "atob": "^2.1.2", - "decode-uri-component": "^0.2.0" - } - }, "node_modules/source-map-support": { "version": "0.5.21", "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz", @@ -20772,6 +20735,12 @@ } }, "dependencies": { + "@adobe/css-tools": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.0.1.tgz", + "integrity": "sha512-+u76oB43nOHrF4DDWRLWDCtci7f3QJoEBigemIdIeTi1ODqjx6Tad9NCVnPRwewWlKkVab5PlK8DCtPTyX7S8g==", + "dev": true + }, "@ampproject/remapping": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz", @@ -23188,16 +23157,16 @@ } }, "@testing-library/jest-dom": { - "version": "5.16.4", - "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.16.4.tgz", - "integrity": "sha512-Gy+IoFutbMQcky0k+bqqumXZ1cTGswLsFqmNLzNdSKkU9KGV2u9oXhukCbbJ9/LRPKiqwxEE8VpV/+YZlfkPUA==", + "version": "5.16.5", + "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.16.5.tgz", + "integrity": "sha512-N5ixQ2qKpi5OLYfwQmUb/5mSV9LneAcaUfp32pn4yCnpb8r/Yz0pXFPck21dIicKmi+ta5WRAknkZCfA8refMA==", "dev": true, "requires": { + "@adobe/css-tools": "^4.0.1", "@babel/runtime": "^7.9.2", "@types/testing-library__jest-dom": "^5.9.1", "aria-query": "^5.0.0", "chalk": "^3.0.0", - "css": "^3.0.0", "css.escape": "^1.5.1", "dom-accessibility-api": "^0.5.6", "lodash": "^4.17.15", @@ -24241,12 +24210,6 @@ "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==", "dev": true }, - "atob": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz", - "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==", - "dev": true - }, "autoprefixer": { "version": "9.8.8", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.8.tgz", @@ -25297,17 +25260,6 @@ "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==", "dev": true }, - "css": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz", - "integrity": "sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==", - "dev": true, - "requires": { - "inherits": "^2.0.4", - "source-map": "^0.6.1", - "source-map-resolve": "^0.6.0" - } - }, "css-blank-pseudo": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-3.0.3.tgz", @@ -26285,12 +26237,6 @@ "integrity": "sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ==", "dev": true }, - "decode-uri-component": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz", - "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=", - "dev": true - }, "dedent": { "version": "0.7.0", "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz", @@ -34746,16 +34692,6 @@ "source-map-js": "^1.0.1" } }, - "source-map-resolve": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz", - "integrity": "sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==", - "dev": true, - "requires": { - "atob": "^2.1.2", - "decode-uri-component": "^0.2.0" - } - }, "source-map-support": { "version": "0.5.21", "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz", diff --git a/package.json b/package.json index a0097baa..481b575d 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,7 @@ "react": "^18.0.0" }, "devDependencies": { - "@testing-library/jest-dom": "^5.16.4", + "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.3.0", "@testing-library/user-event": "^14.2.1", "@types/jest": "^27.5.1", diff --git a/src/components/calendar/calendar.tsx b/src/components/calendar/calendar.tsx index a001188e..6cca020e 100644 --- a/src/components/calendar/calendar.tsx +++ b/src/components/calendar/calendar.tsx @@ -14,7 +14,6 @@ import styles from "./calendar.module.css"; export type CalendarProps = { dateSetup: DateSetup; locale: string; - viewMode: ViewMode; rtl: boolean; headerHeight: number; columnWidth: number; @@ -25,7 +24,6 @@ export type CalendarProps = { export const Calendar: React.FC = ({ dateSetup, locale, - viewMode, rtl, headerHeight, columnWidth, @@ -82,7 +80,11 @@ export const Calendar: React.FC = ({ const topDefaultHeight = headerHeight * 0.5; for (let i = 0; i < dateSetup.dates.length; i++) { const date = dateSetup.dates[i]; - const bottomValue = getLocaleMonth(date, locale); + const bottomValue = getLocaleMonth( + date, + locale, + dateSetup.monthCalendarFormat + ); bottomValues.push( = ({ let topValue = ""; if (i === 0 || date.getMonth() !== dates[i - 1].getMonth()) { // top - topValue = `${getLocaleMonth(date, locale)}, ${date.getFullYear()}`; + topValue = `${getLocaleMonth( + date, + locale, + dateSetup.monthCalendarFormat + )}, ${date.getFullYear()}`; } // bottom const bottomValue = `W${getWeekNumberISO8601(date)}`; @@ -194,7 +200,11 @@ export const Calendar: React.FC = ({ i + 1 !== dates.length && date.getMonth() !== dates[i + 1].getMonth() ) { - const topValue = getLocaleMonth(date, locale); + const topValue = getLocaleMonth( + date, + locale, + dateSetup.monthCalendarFormat + ); topValues.push( = ({ const getCalendarValuesForPartOfDay = () => { const topValues: ReactChild[] = []; const bottomValues: ReactChild[] = []; - const ticks = viewMode === ViewMode.HalfDay ? 2 : 4; + const ticks = dateSetup.viewMode === ViewMode.HalfDay ? 2 : 4; const topDefaultHeight = headerHeight * 0.5; const dates = dateSetup.dates; for (let i = 0; i < dates.length; i++) { @@ -245,7 +255,11 @@ export const Calendar: React.FC = ({ date, locale, "short" - )}, ${date.getDate()} ${getLocaleMonth(date, locale)}`; + )}, ${date.getDate()} ${getLocaleMonth( + date, + locale, + dateSetup.monthCalendarFormat + )}`; topValues.push( = ({ displayDate, locale, "long" - )}, ${displayDate.getDate()} ${getLocaleMonth(displayDate, locale)}`; + )}, ${displayDate.getDate()} ${getLocaleMonth( + displayDate, + locale, + dateSetup.monthCalendarFormat + )}`; const topPosition = (date.getHours() - 24) / 2; topValues.push( = ({ [topValues, bottomValues] = getCalendarValuesForYear(); break; case ViewMode.Month: - [topValues, bottomValues] = getCalendarValuesForMonth(); - break; - case ViewMode.Week: + [topValues, bottomValues] = getCalendarValuesForMonth(); + break; + case ViewMode.Week: [topValues, bottomValues] = getCalendarValuesForWeek(); break; case ViewMode.Day: diff --git a/src/components/gantt/gantt.tsx b/src/components/gantt/gantt.tsx index b90483f3..5e01ba7f 100644 --- a/src/components/gantt/gantt.tsx +++ b/src/components/gantt/gantt.tsx @@ -34,6 +34,8 @@ export const Gantt: React.FunctionComponent = ({ viewMode = ViewMode.Day, preStepsCount = 1, locale = "en-GB", + monthCalendarFormat = "long", + monthTaskListFormat = "long", barFill = 60, barCornerRadius = 3, barProgressColor = "#a3a3ff", @@ -70,7 +72,11 @@ export const Gantt: React.FunctionComponent = ({ const taskListRef = useRef(null); const [dateSetup, setDateSetup] = useState(() => { const [startDate, endDate] = ganttDateRange(tasks, viewMode, preStepsCount); - return { viewMode, dates: seedDates(startDate, endDate, viewMode) }; + return { + viewMode, + monthCalendarFormat, + dates: seedDates(startDate, endDate, viewMode), + }; }); const [currentViewDate, setCurrentViewDate] = useState( undefined @@ -119,7 +125,7 @@ export const Gantt: React.FunctionComponent = ({ setScrollX(newDates.length * columnWidth); } } - setDateSetup({ dates: newDates, viewMode }); + setDateSetup({ dates: newDates, viewMode, monthCalendarFormat }); setBarTasks( convertToBarTasks( filteredTasks, @@ -399,7 +405,6 @@ export const Gantt: React.FunctionComponent = ({ const calendarProps: CalendarProps = { dateSetup, locale, - viewMode, headerHeight, columnWidth, fontFamily, @@ -438,6 +443,7 @@ export const Gantt: React.FunctionComponent = ({ fontSize, tasks: barTasks, locale, + monthFormat: monthTaskListFormat, headerHeight, scrollY, ganttHeight, diff --git a/src/components/task-list/task-list-table.tsx b/src/components/task-list/task-list-table.tsx index b165f600..17e4abbe 100644 --- a/src/components/task-list/task-list-table.tsx +++ b/src/components/task-list/task-list-table.tsx @@ -1,12 +1,12 @@ import React, { useMemo } from "react"; import styles from "./task-list-table.module.css"; -import { Task } from "../../types/public-types"; +import { MonthFormats, Task } from "../../types/public-types"; const localeDateStringCache = {}; const toLocaleDateStringFactory = (locale: string) => (date: Date, dateTimeOptions: Intl.DateTimeFormatOptions) => { - const key = date.toString(); + const key = date.toString() + dateTimeOptions.month; let lds = localeDateStringCache[key]; if (!lds) { lds = date.toLocaleDateString(locale, dateTimeOptions); @@ -14,12 +14,6 @@ const toLocaleDateStringFactory = } return lds; }; -const dateTimeOptions: Intl.DateTimeFormatOptions = { - weekday: "short", - year: "numeric", - month: "long", - day: "numeric", -}; export const TaskListTableDefault: React.FC<{ rowHeight: number; @@ -27,6 +21,7 @@ export const TaskListTableDefault: React.FC<{ fontFamily: string; fontSize: string; locale: string; + monthFormat: MonthFormats; tasks: Task[]; selectedTaskId: string; setSelectedTask: (taskId: string) => void; @@ -38,13 +33,20 @@ export const TaskListTableDefault: React.FC<{ fontFamily, fontSize, locale, + monthFormat, onExpanderClick, }) => { + const dateTimeOptions: Intl.DateTimeFormatOptions = { + weekday: "short", + year: "numeric", + day: "numeric", + month: monthFormat, + }; + debugger; const toLocaleDateString = useMemo( () => toLocaleDateStringFactory(locale), [locale] ); - return (
; horizontalContainerClass?: string; @@ -29,6 +30,7 @@ export type TaskListProps = { fontFamily: string; fontSize: string; locale: string; + monthFormat: MonthFormats; tasks: Task[]; selectedTaskId: string; setSelectedTask: (taskId: string) => void; @@ -48,6 +50,7 @@ export const TaskList: React.FC = ({ setSelectedTask, onExpanderClick, locale, + monthFormat, ganttHeight, taskListRef, horizontalContainerClass, @@ -75,6 +78,7 @@ export const TaskList: React.FC = ({ fontSize, tasks, locale, + monthFormat, selectedTaskId: selectedTaskId, setSelectedTask, onExpanderClick, diff --git a/src/helpers/date-helper.ts b/src/helpers/date-helper.ts index be6a9703..df0aa389 100644 --- a/src/helpers/date-helper.ts +++ b/src/helpers/date-helper.ts @@ -1,4 +1,4 @@ -import { Task, ViewMode } from "../types/public-types"; +import { MonthFormats, Task, ViewMode } from "../types/public-types"; import DateTimeFormatOptions = Intl.DateTimeFormatOptions; import DateTimeFormat = Intl.DateTimeFormat; @@ -171,9 +171,13 @@ export const seedDates = ( return dates; }; -export const getLocaleMonth = (date: Date, locale: string) => { +export const getLocaleMonth = ( + date: Date, + locale: string, + monthFormat: MonthFormats +) => { let bottomValue = getCachedDateTimeFormat(locale, { - month: "long", + month: monthFormat, }).format(date); bottomValue = bottomValue.replace( bottomValue[0], diff --git a/src/types/date-setup.ts b/src/types/date-setup.ts index 81115ece..8ba0e3b9 100644 --- a/src/types/date-setup.ts +++ b/src/types/date-setup.ts @@ -1,6 +1,7 @@ -import { ViewMode } from "./public-types"; +import { MonthFormats, ViewMode } from "./public-types"; export interface DateSetup { dates: Date[]; viewMode: ViewMode; + monthCalendarFormat: MonthFormats; } diff --git a/src/types/public-types.ts b/src/types/public-types.ts index f4c641a6..6dbe7cf4 100644 --- a/src/types/public-types.ts +++ b/src/types/public-types.ts @@ -8,6 +8,7 @@ export enum ViewMode { Month = "Month", Year = "Year", } +export type MonthFormats = "numeric" | "2-digit" | "long" | "short" | "narrow"; export type TaskType = "task" | "milestone" | "project"; export interface Task { id: string; @@ -81,6 +82,8 @@ export interface DisplayOption { * Specifies the month name language. Able formats: ISO 639-2, Java Locale */ locale?: string; + monthCalendarFormat?: MonthFormats; + monthTaskListFormat?: MonthFormats; rtl?: boolean; } From 79b1a6db8d13adee226f997cbeef766ab77205eb Mon Sep 17 00:00:00 2001 From: Edgar Gonzalez Date: Thu, 25 May 2023 08:18:59 +0200 Subject: [PATCH 2/3] fix (date-helper). Add default to switch to prevent from entering infinite loop is viewMode is null --- src/helpers/date-helper.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/helpers/date-helper.ts b/src/helpers/date-helper.ts index 79b5e721..6fb9a29a 100644 --- a/src/helpers/date-helper.ts +++ b/src/helpers/date-helper.ts @@ -174,6 +174,9 @@ export const seedDates = ( case ViewMode.Hour: currentDate = addToDate(currentDate, 1, "hour"); break; + default: + currentDate = addToDate(currentDate, 1, "day"); + break; } dates.push(currentDate); } From 8ad2cbd2979df8a1405ade8b60b26871585141d0 Mon Sep 17 00:00:00 2001 From: Edgar Gonzalez Date: Thu, 25 May 2023 08:19:35 +0200 Subject: [PATCH 3/3] fix (bar helper). Set x coordinate to 0 if date grater than xDate - 1 is not found --- src/helpers/bar-helper.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/helpers/bar-helper.ts b/src/helpers/bar-helper.ts index ba5f987c..a14ae142 100644 --- a/src/helpers/bar-helper.ts +++ b/src/helpers/bar-helper.ts @@ -248,7 +248,7 @@ const convertToMilestone = ( const taskXCoordinate = (xDate: Date, dates: Date[], columnWidth: number) => { const index = dates.findIndex(d => d.getTime() >= xDate.getTime()) - 1; - + if (index < 0) return 0; const remainderMillis = xDate.getTime() - dates[index].getTime(); const percentOfInterval = remainderMillis / (dates[index + 1].getTime() - dates[index].getTime());