Merge branch 'develop'

Author: shahabyazdi

build/browser.min.js

@@ -1,6 +1,6 @@
 {
   "name": "react-multi-date-picker",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "a simple React datepicker component for work with gregorian, persian, arabic and indian calendars",
   "main": "./build/index.js",
   "types": "index.d.ts",
@@ -24,7 +24,7 @@
     "arabic",
     "english",
     "hindi",
-    "locals",
+    "locales",
     "datetime",
     "gregorian-calendar",
     "persian-calendar",
@@ -52,13 +52,13 @@
     "postcss": "8.2.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "rollup": "^2.35.1",
+    "rollup": "^2.36.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.0",
     "rollup-plugin-terser": "^7.0.2"
   },
   "dependencies": {
-    "react-date-object": "^1.1.8"
+    "react-date-object": "^1.2.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

build/browser_plugins.min.js

@@ -2,4 +2,5 @@ export { default as Settings } from "./all/settings/settings"
 export { default as DatePickerHeader } from "./all/date_picker_header/date_picker_header"
 export { default as MultiColors } from "./all/mutli_colors/multi_colors"
 export { default as DatePanel } from "./all/date_panel/date_panel"
-export { default as Weekends } from "./all/weekends/weekends"
+export { default as Weekends } from "./all/weekends/weekends"
+export { default as Toolbar } from "./all/toolbar/toolbar"

build/index.js

@@ -17,7 +17,7 @@ export default function DatePanel({
 }) {
     let header = { en: "Dates", fa: "تاریخ ها", ar: "تواریخ", hi: "खजूर" },
         dates = [],
-        { multiple, range, inRangeDates, selectedDate, date: { local } } = state,
+        { multiple, range, inRangeDates, selectedDate, date: { locale } } = state,
         { formattingIgnoreList } = calendarProps,
         classNames = ["rmpd-panel", position]
 
@@ -84,7 +84,7 @@ export default function DatePanel({
             }}
             {...props}
         >
-            <div className="rmdp-panel-header">{header[local]}</div>
+            <div className="rmdp-panel-header">{header[locale]}</div>
             <div style={{ position: "relative", overflow: "auto", height: ["top", "bottom"].includes(position) ? "100px" : "" }}>
                 <ul className="rmdp-panel-body">
                     {Array.isArray(dates) && dates.map((object, index) => {

package-lock.json

@@ -8,7 +8,7 @@ export default function DatePickerHeader({
     size = "big",
     nodes,
     calendar = state.calendar,
-    local = state.local,
+    locale = state.locale,
     className = "",
     ...props
 }) {
@@ -23,7 +23,7 @@ export default function DatePickerHeader({
         selectedDate = new DateObject()
     }
 
-    selectedDate = new DateObject(selectedDate).set({ calendar, local })
+    selectedDate = new DateObject(selectedDate).set({ calendar, locale })
 
     let classNames = ["rmdp-header-plugin", position, size]
 

package.json

@@ -26,7 +26,7 @@ export default function MultiColors({
 
             for (let i = 0; i < state.selectedDate.length; i++) {
                 let date = state.selectedDate[i],
-                    value = new DateObject(date).setLocal("en").format("YYYYMMDD"),
+                    value = new DateObject(date).setLocale("en").format("YYYYMMDD"),
                     color = date.color || activeColor
 
                 if (!date.color) state.selectedDate[i].color = color
@@ -123,7 +123,7 @@ function getMapDays(selectedDate, range, ref, activeColor) {
 
         if (Array.isArray(selectedDate)) {
             //not single mode
-            let value = new DateObject(date).setLocal("en").format("YYYYMMDD")
+            let value = new DateObject(date).setLocale("en").format("YYYYMMDD")
 
             if (ref.current.stringValues.includes(value)) color = ref.current.colors[value]
         }

plugins/all.js

@@ -24,7 +24,7 @@
   border-radius: 15px;
   background-color: #0074d9;
   color: white;
-  box-shadow: 0 0 3px 1px #ccc;
+  box-shadow: 0 0 3px 1px var(--rmdp-shadow);
   display: flex;
   transition: 0.4s;
   margin: auto 3px;
@@ -63,7 +63,7 @@
 
 .setting.active .items {
   flex: 1;
-  box-shadow: inset 0 0 3px #ccc;
+  box-shadow: inset 0 0 3px var(--rmdp-shadow);
   visibility: visible;
   flex: 1;
   display: flex;
@@ -83,7 +83,7 @@
 
 .items .item {
   background-color: rgb(126, 166, 240);
-  box-shadow: 0 0 3px 1px #ccc;
+  box-shadow: 0 0 3px 1px var(--rmdp-shadow);
   width: 16px;
   height: 16px;
   margin: auto 0;
@@ -94,7 +94,7 @@
 }
 
 .items .item.active {
-  background-color: #0074d9;
+  background-color: var(--rmdp-primary);
   color: white;
 }