@eastgate/react-multi-date-picker 1.0.0

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@eastgate/react-multi-date-picker",
+  "version": "1.0.0",
+  "description": "a simple React datepicker component for working with gregorian, persian, arabic and indian calendars with the ability to select the date by single, multiple and range pickers.",
+  "main": "./build/index.js",
+  "types": "index.d.ts",
+  "scripts": {
+    "build": "rollup -c",
+    "test": "jest ./test"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:longvh2003/react-multi-date-picker.git"
+  },
+  "keywords": [
+    "react",
+    "multi",
+    "date",
+    "picker",
+    "datepicker",
+    "rangepicker",
+    "timepicker",
+    "date picker",
+    "range picker",
+    "time picker",
+    "multiple",
+    "range",
+    "time",
+    "gregorian",
+    "calendar",
+    "persian",
+    "jalali",
+    "hijri",
+    "indian",
+    "farsi",
+    "arabic",
+    "english",
+    "hindi",
+    "locales",
+    "datetime",
+    "component"
+  ],
+  "author": "Shahab Yazdi <sh.yazdi@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/shahabyazdi/react-multi-date-picker/issues"
+  },
+  "homepage": "https://shahabyazdi.github.io/react-multi-date-picker/",
+  "devDependencies": {
+    "@babel/core": "^7.16.0",
+    "@babel/preset-env": "^7.16.4",
+    "@babel/preset-react": "^7.16.0",
+    "@babel/preset-typescript": "^7.16.0",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "@rollup/plugin-node-resolve": "^13.0.6",
+    "@rollup/plugin-url": "^6.1.0",
+    "@svgr/rollup": "^6.1.0",
+    "@tabler/icons": "^1.46.0",
+    "@testing-library/jest-dom": "^5.16.0",
+    "@testing-library/react": "^12.1.2",
+    "jest": "^27.4.3",
+    "postcss": "8.4.4",
+    "postcss-css-variables": "^0.18.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "rollup": "^2.60.2",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-terser": "^7.0.2"
+  },
+  "dependencies": {
+    "react-date-object": "^2.1.5",
+    "react-element-popper": "^2.1.6"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  }
+}

package/styles/backgrounds/bg-brown.css

@@ -0,0 +1,44 @@
+.bg-brown.rmdp-wrapper,
+.bg-brown .rmdp-month-picker,
+.bg-brown .rmdp-year-picker,
+.bg-brown .rmdp-time-picker div input,
+.rmdp-container .bg-brown.ep-arrow::after {
+  background-color: #5d4037;
+  color: #d7ccc8;
+}
+
+.bg-brown .rmdp-day:not(.rmdp-deactive),
+.bg-brown .rmdp-time-picker div .rmdp-am,
+.bg-brown .rmdp-header-values,
+.bg-brown .rmdp-panel-header {
+  color: #d7ccc8;
+}
+
+.bg-brown .rmdp-day.rmdp-range {
+  color: white;
+}
+
+.bg-brown .rmdp-panel-body li {
+  color: #f5f5f5;
+}
+
+.bg-brown .rmdp-day.rmdp-deactive,
+.bg-brown .rmdp-day.rmdp-disabled {
+  color: #998580;
+}
+
+.rmdp-container .bg-brown.ep-arrow[direction="top"] {
+  border-bottom: 1px solid #5d4037;
+}
+
+.rmdp-container .bg-brown.ep-arrow[direction="left"] {
+  border-right: 1px solid #5d4037;
+}
+
+.rmdp-container .bg-brown.ep-arrow[direction="right"] {
+  border-left: 1px solid #5d4037;
+}
+
+.rmdp-container .bg-brown.ep-arrow[direction="bottom"] {
+  border-top: 1px solid #5d4037;
+}

package/styles/backgrounds/bg-dark.css

@@ -0,0 +1,44 @@
+.bg-dark.rmdp-wrapper,
+.bg-dark .rmdp-month-picker,
+.bg-dark .rmdp-year-picker,
+.bg-dark .rmdp-time-picker div input,
+.rmdp-container .bg-dark.ep-arrow::after {
+  background-color: #312f2f;
+  color: #c4c7ca;
+}
+
+.bg-dark .rmdp-day:not(.rmdp-deactive),
+.bg-dark .rmdp-time-picker div .rmdp-am,
+.bg-dark .rmdp-header-values,
+.bg-dark .rmdp-panel-header {
+  color: #c4c7ca;
+}
+
+.bg-dark .rmdp-day.rmdp-range {
+  color: white;
+}
+
+.bg-dark .rmdp-panel-body li {
+  color: #f5f5f5;
+}
+
+.bg-dark .rmdp-day.rmdp-deactive,
+.bg-dark .rmdp-day.rmdp-disabled {
+  color: #87898b;
+}
+
+.rmdp-container .bg-dark.ep-arrow[direction="top"] {
+  border-bottom: 1px solid #312f2f;
+}
+
+.rmdp-container .bg-dark.ep-arrow[direction="left"] {
+  border-right: 1px solid #312f2f;
+}
+
+.rmdp-container .bg-dark.ep-arrow[direction="right"] {
+  border-left: 1px solid #312f2f;
+}
+
+.rmdp-container .bg-dark.ep-arrow[direction="bottom"] {
+  border-top: 1px solid #312f2f;
+}

package/styles/backgrounds/bg-gray.css

@@ -0,0 +1,39 @@
+.bg-gray.rmdp-wrapper,
+.bg-gray .rmdp-month-picker,
+.bg-gray .rmdp-year-picker,
+.rmdp-container .bg-gray.ep-arrow::after {
+  background-color: #b1abab;
+  color: white;
+}
+
+.bg-gray .rmdp-day,
+.bg-gray .rmdp-time-picker div .rmdp-am,
+.bg-gray .rmdp-header-values,
+.bg-gray .rmdp-panel-header {
+  color: white;
+}
+
+.bg-gray .rmdp-day.rmdp-deactive {
+  color: #e3e5e9;
+}
+
+.bg-gray .rmdp-time-picker div input {
+  background-color: #b1abab;
+  color: white;
+}
+
+.rmdp-container .bg-gray.ep-arrow[direction="top"] {
+  border-bottom: 1px solid #b1abab;
+}
+
+.rmdp-container .bg-gray.ep-arrow[direction="left"] {
+  border-right: 1px solid #b1abab;
+}
+
+.rmdp-container .bg-gray.ep-arrow[direction="right"] {
+  border-left: 1px solid #b1abab;
+}
+
+.rmdp-container .bg-gray.ep-arrow[direction="bottom"] {
+  border-top: 1px solid #b1abab;
+}

package/styles/colors/analog_time_picker_green.css

@@ -0,0 +1,18 @@
+.green .rmdp-analog-clock {
+  background-color: #01ff70;
+  border: 5px solid #39795c;
+}
+
+.green .rmdp-analog-clock .dial-lines {
+  background-color: #3d9970;
+}
+
+.green .rmdp-analog-clock .dial-lines:nth-of-type(5n) {
+  width: 3px;
+  height: 8px;
+  background-color: #39795c;
+}
+
+.green .rmdp-analog-clock .rmdp-second {
+  background-color: #2a644a;
+}

package/styles/colors/analog_time_picker_purple.css

@@ -0,0 +1,18 @@
+.purple .rmdp-analog-clock {
+  background-color: #ec9efa;
+  border: 5px solid #7b1fa2;
+}
+
+.purple .rmdp-analog-clock .dial-lines {
+  background-color: #ba68c8;
+}
+
+.purple .rmdp-analog-clock .dial-lines:nth-of-type(5n) {
+  width: 3px;
+  height: 8px;
+  background-color: #8e24aa;
+}
+
+.purple .rmdp-analog-clock .rmdp-second {
+  background-color: #8e24aa;
+}

package/styles/colors/analog_time_picker_red.css

@@ -0,0 +1,18 @@
+.red .rmdp-analog-clock {
+  background-color: #fa8075;
+  border: 5px solid #af1738;
+}
+
+.red .rmdp-analog-clock .dial-lines {
+  background-color: #d11941;
+}
+
+.red .rmdp-analog-clock .dial-lines:nth-of-type(5n) {
+  width: 3px;
+  height: 8px;
+  background-color: #aa0428;
+}
+
+.red .rmdp-analog-clock .rmdp-second {
+  background-color: #d1012e;
+}

package/styles/colors/analog_time_picker_teal.css

@@ -0,0 +1,18 @@
+.teal .rmdp-analog-clock {
+  background-color: #1de9b6;
+  border: 5px solid #00695c;
+}
+
+.teal .rmdp-analog-clock .dial-lines {
+  background-color: #4db6ac;
+}
+
+.teal .rmdp-analog-clock .dial-lines:nth-of-type(5n) {
+  width: 3px;
+  height: 8px;
+  background-color: #00796b;
+}
+
+.teal .rmdp-analog-clock .rmdp-second {
+  background-color: #00695c;
+}

package/styles/colors/analog_time_picker_yellow.css

@@ -0,0 +1,18 @@
+.yellow .rmdp-analog-clock {
+  background-color: #ffdd1f;
+  border: 5px solid#cca701;
+}
+
+.yellow .rmdp-analog-clock .dial-lines {
+  background-color: #d1b309;
+}
+
+.yellow .rmdp-analog-clock .dial-lines:nth-of-type(5n) {
+  width: 3px;
+  height: 8px;
+  background-color: #978105;
+}
+
+.yellow .rmdp-analog-clock .rmdp-second {
+  background-color: #c7a901;
+}

package/styles/colors/green.css

@@ -0,0 +1,80 @@
+:root {
+  --rmdp-primary-green: #009999;
+  --rmdp-secondary-green: #87ad92;
+  --rmdp-shadow-green: #87ad92;
+  --rmdp-today-green: #0ce197;
+  --rmdp-hover-green: #2ba8a8;
+  --rmdp-deselect-green: #39795c;
+}
+
+.green .rmdp-wrapper {
+  border: 1px solid var(--rmdp-secondary-green);
+  box-shadow: 0 0 5px var(--rmdp-secondary-green);
+}
+
+.green .rmdp-panel-body li {
+  background-color: var(--rmdp-primary-green);
+  box-shadow: 0 0 2px var(--rmdp-secondary-green);
+}
+
+.green .rmdp-week-day {
+  color: var(--rmdp-primary-green);
+}
+
+.green .rmdp-day.rmdp-deactive {
+  color: var(--rmdp-secondary-green);
+}
+
+.green .rmdp-range {
+  background-color: var(--rmdp-primary-green);
+  box-shadow: 0 0 3px var(--rmdp-shadow-green);
+}
+
+.green .rmdp-arrow {
+  border: solid var(--rmdp-primary-green);
+  border-width: 0 2px 2px 0;
+}
+
+.green .rmdp-arrow-container:hover {
+  background-color: var(--rmdp-primary-green);
+  box-shadow: 0 0 3px var(--rmdp-secondary-green);
+}
+
+.green .rmdp-panel-body::-webkit-scrollbar-thumb {
+  background: var(--rmdp-primary-green);
+}
+
+.green .rmdp-day.rmdp-today span {
+  background-color: var(--rmdp-today-green);
+}
+
+.green .rmdp-rtl .rmdp-panel {
+  border-left: unset;
+  border-right: 1px solid var(--rmdp-secondary-green);
+}
+
+.green .rmdp-day.rmdp-selected span:not(.highlight) {
+  background-color: var(--rmdp-primary-green);
+  box-shadow: 0 0 3px var(--rmdp-shadow-green);
+}
+
+.green .rmdp-day:not(.rmdp-day-hidden) span:hover {
+  background-color: var(--rmdp-hover-green) !important;
+}
+
+.green .b-deselect {
+  color: var(--rmdp-deselect-green);
+  background-color: white;
+}
+
+.green .rmdp-action-button {
+  color: var(--rmdp-primary-green);
+}
+
+.green .rmdp-button:not(.rmdp-action-button) {
+  background-color: var(--rmdp-primary-green);
+}
+
+.green .rmdp-button:not(.rmdp-action-button):hover {
+  background-color: var(--rmdp-deselect-green);
+}

package/styles/colors/purple.css

@@ -0,0 +1,80 @@
+:root {
+  --rmdp-primary-purple: #9c27b0;
+  --rmdp-secondary-purple: #7b1fa2;
+  --rmdp-shadow-purple: #8e24aa;
+  --rmdp-today-purple: #e040fb;
+  --rmdp-hover-purple: #d500f9;
+  --rmdp-deselect-purple: #ba68c8;
+}
+
+.purple .rmdp-wrapper {
+  border: 1px solid var(--rmdp-secondary-purple);
+  box-shadow: 0 0 5px var(--rmdp-secondary-purple);
+}
+
+.purple .rmdp-panel-body li {
+  background-color: var(--rmdp-primary-purple);
+  box-shadow: 0 0 2px var(--rmdp-secondary-purple);
+}
+
+.purple .rmdp-week-day {
+  color: var(--rmdp-primary-purple);
+}
+
+.purple .rmdp-day.rmdp-deactive {
+  color: var(--rmdp-secondary-purple);
+}
+
+.purple .rmdp-range {
+  background-color: var(--rmdp-primary-purple);
+  box-shadow: 0 0 3px var(--rmdp-shadow-purple);
+}
+
+.purple .rmdp-arrow {
+  border: solid var(--rmdp-primary-purple);
+  border-width: 0 2px 2px 0;
+}
+
+.purple .rmdp-arrow-container:hover {
+  background-color: var(--rmdp-primary-purple);
+  box-shadow: 0 0 3px var(--rmdp-secondary-purple);
+}
+
+.purple .rmdp-panel-body::-webkit-scrollbar-thumb {
+  background: var(--rmdp-primary-purple);
+}
+
+.purple .rmdp-day.rmdp-today span {
+  background-color: var(--rmdp-today-purple);
+}
+
+.purple .rmdp-rtl .rmdp-panel {
+  border-left: unset;
+  border-right: 1px solid var(--rmdp-secondary-purple);
+}
+
+.purple .rmdp-day.rmdp-selected span:not(.highlight) {
+  background-color: var(--rmdp-primary-purple);
+  box-shadow: 0 0 3px var(--rmdp-shadow-purple);
+}
+
+.purple .rmdp-day:not(.rmdp-day-hidden) span:hover {
+  background-color: var(--rmdp-hover-purple) !important;
+}
+
+.purple .b-deselect {
+  color: var(--rmdp-deselect-purple);
+  background-color: white;
+}
+
+.purple .rmdp-action-button {
+  color: var(--rmdp-primary-purple);
+}
+
+.purple .rmdp-button:not(.rmdp-action-button) {
+  background-color: var(--rmdp-primary-purple);
+}
+
+.purple .rmdp-button:not(.rmdp-action-button):hover {
+  background-color: var(--rmdp-deselect-purple);
+}

package/styles/colors/red.css

@@ -0,0 +1,80 @@
+:root {
+  --rmdp-primary-red: #ea0034;
+  --rmdp-secondary-red: #ad8787;
+  --rmdp-shadow-red: #cfb6b6;
+  --rmdp-today-red: #ff5638;
+  --rmdp-hover-red: #ff6687;
+  --rmdp-deselect-red: #af1738;
+}
+
+.red .rmdp-wrapper {
+  border: 1px solid var(--rmdp-secondary-red);
+  box-shadow: 0 0 5px var(--rmdp-secondary-red);
+}
+
+.red .rmdp-panel-body li {
+  background-color: var(--rmdp-primary-red);
+  box-shadow: 0 0 2px var(--rmdp-secondary-red);
+}
+
+.red .rmdp-week-day {
+  color: var(--rmdp-primary-red);
+}
+
+.red .rmdp-day.rmdp-deactive {
+  color: var(--rmdp-secondary-red);
+}
+
+.red .rmdp-range {
+  background-color: var(--rmdp-primary-red);
+  box-shadow: 0 0 3px var(--rmdp-shadow-red);
+}
+
+.red .rmdp-arrow {
+  border: solid var(--rmdp-primary-red);
+  border-width: 0 2px 2px 0;
+}
+
+.red .rmdp-arrow-container:hover {
+  background-color: var(--rmdp-primary-red);
+  box-shadow: 0 0 3px var(--rmdp-secondary-red);
+}
+
+.red .rmdp-panel-body::-webkit-scrollbar-thumb {
+  background: var(--rmdp-primary-red);
+}
+
+.red .rmdp-day.rmdp-today span {
+  background-color: var(--rmdp-today-red);
+}
+
+.red .rmdp-rtl .rmdp-panel {
+  border-left: unset;
+  border-right: 1px solid var(--rmdp-secondary-red);
+}
+
+.red .rmdp-day.rmdp-selected span:not(.highlight) {
+  background-color: var(--rmdp-primary-red);
+  box-shadow: 0 0 3px var(--rmdp-shadow-red);
+}
+
+.red .rmdp-day:not(.rmdp-day-hidden) span:hover {
+  background-color: var(--rmdp-hover-red) !important;
+}
+
+.red .b-deselect {
+  color: var(--rmdp-deselect-red);
+  background-color: white;
+}
+
+.red .rmdp-action-button {
+  color: var(--rmdp-primary-red);
+}
+
+.red .rmdp-button:not(.rmdp-action-button) {
+  background-color: var(--rmdp-primary-red);
+}
+
+.red .rmdp-button:not(.rmdp-action-button):hover {
+  background-color: var(--rmdp-deselect-red);
+}

package/styles/colors/teal.css

@@ -0,0 +1,80 @@
+:root {
+  --rmdp-primary-teal: #009688;
+  --rmdp-secondary-teal: #00796b;
+  --rmdp-shadow-teal: #26a69a;
+  --rmdp-today-teal: #1de9b6;
+  --rmdp-hover-teal: #4db6ac;
+  --rmdp-deselect-teal: #00695c;
+}
+
+.teal .rmdp-wrapper {
+  border: 1px solid var(--rmdp-secondary-teal);
+  box-shadow: 0 0 5px var(--rmdp-secondary-teal);
+}
+
+.teal .rmdp-panel-body li {
+  background-color: var(--rmdp-primary-teal);
+  box-shadow: 0 0 2px var(--rmdp-secondary-teal);
+}
+
+.teal .rmdp-week-day {
+  color: var(--rmdp-primary-teal);
+}
+
+.teal .rmdp-day.rmdp-deactive {
+  color: var(--rmdp-secondary-teal);
+}
+
+.teal .rmdp-range {
+  background-color: var(--rmdp-primary-teal);
+  box-shadow: 0 0 3px var(--rmdp-shadow-teal);
+}
+
+.teal .rmdp-arrow {
+  border: solid var(--rmdp-primary-teal);
+  border-width: 0 2px 2px 0;
+}
+
+.teal .rmdp-arrow-container:hover {
+  background-color: var(--rmdp-primary-teal);
+  box-shadow: 0 0 3px var(--rmdp-secondary-teal);
+}
+
+.teal .rmdp-panel-body::-webkit-scrollbar-thumb {
+  background: var(--rmdp-primary-teal);
+}
+
+.teal .rmdp-day.rmdp-today span {
+  background-color: var(--rmdp-today-teal);
+}
+
+.teal .rmdp-rtl .rmdp-panel {
+  border-left: unset;
+  border-right: 1px solid var(--rmdp-secondary-teal);
+}
+
+.teal .rmdp-day.rmdp-selected span:not(.highlight) {
+  background-color: var(--rmdp-primary-teal);
+  box-shadow: 0 0 3px var(--rmdp-shadow-teal);
+}
+
+.teal .rmdp-day:not(.rmdp-day-hidden) span:hover {
+  background-color: var(--rmdp-hover-teal) !important;
+}
+
+.teal .b-deselect {
+  color: var(--rmdp-deselect-teal);
+  background-color: white;
+}
+
+.teal .rmdp-action-button {
+  color: var(--rmdp-primary-teal);
+}
+
+.teal .rmdp-button:not(.rmdp-action-button) {
+  background-color: var(--rmdp-primary-teal);
+}
+
+.teal .rmdp-button:not(.rmdp-action-button):hover {
+  background-color: var(--rmdp-deselect-teal);
+}

package/styles/colors/yellow.css

@@ -0,0 +1,80 @@
+:root {
+  --rmdp-primary-yellow: #f7da37;
+  --rmdp-secondary-yellow: #c0b025;
+  --rmdp-shadow-yellow: #dfdd61;
+  --rmdp-today-yellow: #afac02;
+  --rmdp-hover-yellow: #ffeb3b;
+  --rmdp-deselect-yellow: #cca701;
+}
+
+.yellow .rmdp-wrapper {
+  border: 1px solid var(--rmdp-secondary-yellow);
+  box-shadow: 0 0 5px var(--rmdp-secondary-yellow);
+}
+
+.yellow .rmdp-panel-body li {
+  background-color: var(--rmdp-primary-yellow);
+  box-shadow: 0 0 2px var(--rmdp-secondary-yellow);
+}
+
+.yellow .rmdp-week-day {
+  color: var(--rmdp-primary-yellow);
+}
+
+.yellow .rmdp-day.rmdp-deactive {
+  color: var(--rmdp-secondary-yellow);
+}
+
+.yellow .rmdp-range {
+  background-color: var(--rmdp-primary-yellow);
+  box-shadow: 0 0 3px var(--rmdp-shadow-yellow);
+}
+
+.yellow .rmdp-arrow {
+  border: solid var(--rmdp-primary-yellow);
+  border-width: 0 2px 2px 0;
+}
+
+.yellow .rmdp-arrow-container:hover {
+  background-color: var(--rmdp-primary-yellow);
+  box-shadow: 0 0 3px var(--rmdp-secondary-yellow);
+}
+
+.yellow .rmdp-panel-body::-webkit-scrollbar-thumb {
+  background: var(--rmdp-primary-yellow) !important;
+}
+
+.yellow .rmdp-day.rmdp-today span {
+  background-color: var(--rmdp-today-yellow);
+}
+
+.yellow .rmdp-rtl .rmdp-panel {
+  border-left: unset;
+  border-right: 1px solid var(--rmdp-secondary-yellow);
+}
+
+.yellow .rmdp-day.rmdp-selected span:not(.highlight) {
+  background-color: var(--rmdp-primary-yellow);
+  box-shadow: 0 0 3px var(--rmdp-shadow-yellow);
+}
+
+.yellow .rmdp-day:not(.rmdp-day-hidden) span:hover {
+  background-color: var(--rmdp-hover-yellow) !important;
+}
+
+.yellow .b-deselect {
+  color: var(--rmdp-deselect-yellow);
+  background-color: white;
+}
+
+.yellow .rmdp-action-button {
+  color: var(--rmdp-primary-yellow);
+}
+
+.yellow .rmdp-button:not(.rmdp-action-button) {
+  background-color: var(--rmdp-primary-yellow);
+}
+
+.yellow .rmdp-button:not(.rmdp-action-button):hover {
+  background-color: var(--rmdp-deselect-yellow);
+}