react-calendar-datetime 1.3.1 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +100 -74
  2. package/dist/index.cjs +2 -0
  3. package/dist/index.d.cts +21 -0
  4. package/dist/index.d.ts +21 -0
  5. package/dist/index.js +2 -1
  6. package/package.json +35 -33
  7. package/dist/index.es.js +0 -1
package/README.md CHANGED
@@ -1,74 +1,100 @@
1
- # Calendar component for React
2
-
3
- ---
4
- [![npm version](https://badge.fury.io/js/react-calendar-datetime.svg)](https://badge.fury.io/js/react-calendar-datetime) ![npm](https://img.shields.io/npm/dw/react-calendar-datetime)
5
-
6
- ### [Demo](https://alex-webstart.xyz/calendar/)
7
- [![N|Solid](https://s6.gifyu.com/images/QOg983dxWR.gif)](https://alex-webstart.xyz/calendar/)
8
-
9
-
10
- 📅 date and **time** picker, include presets
11
-
12
- <div style="display:flex;width:80vw">
13
- <img src="https://i.ibb.co/y5wg5Gp/browser-lg-Azxu6-JLE.png" alt="time" width="45%"/>
14
- <img src="https://i.ibb.co/y5WgThj/browser-m-WUa-EXd1-GT.png" width="45%" alt="dark" >
15
- </div>
16
-
17
- ___
18
-
19
-
20
- ## 🔨 How to install:
21
-
22
- ```javascript
23
-
24
- npm install react-calendar-datetime
25
-
26
- or
27
-
28
- yarn add react-calendar-datetime
29
-
30
- ```
31
-
32
- ## 📆 How to use:
33
-
34
- ```javascript
35
- import React from "react";
36
-
37
- import { Calendar } from "react-calendar-datetime";
38
-
39
- const App = () => {
40
- const [date, setDate] = useState(new Date());
41
- return <Calendar date={date} onChangeDate={setDate} />;
42
- };
43
- ```
44
-
45
- Easy and simple :+1:
46
-
47
- ## Props:
48
-
49
- | Property | Type | Default | Description |
50
- | :----------- | :------: | -----------: | --------------------------------------------------------------------: |
51
- | date | Date | `new Date()` | accepts the date in the normal format |
52
- | onChangeDate | function | ----- | callback, called when the calendar changes and return the new date |
53
- | locale | string | '_en-gb_' | locale name, currently supported: `en-gb`,`ru`,`de`,`uk`,`zh-cn`,`fr` |
54
- | presets | boolean | `false` | presets mode |
55
- | time | boolean | `false` | timepicker mode |
56
- | width | string | `null` | any _css-lang_ string measure |
57
- | height | string | `null` | any _css-lang_ string measure |
58
- | dark | boolean | false | dark theme |
59
-
60
- ## ✅ Patch note:
61
-
62
- ---
63
-
64
- v 1.3.1
65
-
66
- - add year picker
67
- - add dark theme 🌙
68
- [![N|Solids](https://s6.gifyu.com/images/dtfEBi6mpI.gif)](https://alex-webstart.xyz/calendar/?path=/story/calendar-react--dark-theme)
69
- - add locales:
70
- - `zh-cn`
71
- - `fr`
72
-
73
-
74
-
1
+ [![npm version](https://badge.fury.io/js/react-calendar-datetime.svg)](https://badge.fury.io/js/react-calendar-datetime) ![npm](https://img.shields.io/npm/dw/react-calendar-datetime)
2
+
3
+ # Calendar component for React
4
+
5
+ ---
6
+
7
+ 📅 Date and **time** picker, include presets
8
+ [Demo](https://lovecss.site/calendar/)
9
+ [![N|Solid](https://i.ibb.co/d0G4xXF7/image.png)](https://react-calendar-datetime.vercel.app/?story=components--calendar--base)
10
+
11
+ <div style="display:flex;width:80vw">
12
+ <img src="https://i.ibb.co/rGGX6sSj/image.png" alt="time" width="45%"/>
13
+ <img src="https://i.ibb.co/DPZWq2Tn/image.png" width="45%" alt="dark" >
14
+ </div>
15
+
16
+ ---
17
+
18
+ ## 🔨 How to install:
19
+
20
+ ```javascript
21
+
22
+ npm install react-calendar-datetime
23
+
24
+ or
25
+
26
+ yarn add react-calendar-datetime
27
+
28
+ ```
29
+
30
+ ## 📆 How to use:
31
+
32
+ ```javascript
33
+ import React from "react";
34
+
35
+ import { Calendar } from "react-calendar-datetime";
36
+
37
+ const App = () => {
38
+ const [date, setDate] = useState < Date > new Date();
39
+ return <Calendar date={date} onChangeDate={setDate} />;
40
+ };
41
+ ```
42
+
43
+ ## Props:
44
+
45
+ | Property | Type | Default | Description |
46
+ | :--------------- | :-------------- | :----------- | :---------------------------------------------------------------- |
47
+ | **date** | `Date \| Dayjs` | `new Date()` | Accepts native Date, string, number or Dayjs instance |
48
+ | **onChangeDate** | `function` | ----- | Callback returns new native Date object on change |
49
+ | **locale** | `string` | `'en'` | Supported: `en`, `ru`, `ua`, `de`, `fr`, `zh-cn`, `es`, `sr` |
50
+ | **theme** | `string` | `'light'` | Styles: `light`, `dark`, `midnight`, `sandstone`, `mint_blue` |
51
+ | **presets** | `boolean` | `false` | Enables quick date selection (today, yesterday, etc.) |
52
+ | **time** | `boolean` | `false` | Enables time picker mode |
53
+ | **months** | `boolean` | `true` | Toggle side month-selector. If `false`, day-grid fills full width |
54
+ | **width** | `string` | `null` | Any CSS width measure (e.g. `'450px'` or `'100%'`) |
55
+ | **height** | `string` | `null` | Any CSS height measure |
56
+
57
+ ## 🛠 Scripts
58
+
59
+ Basic commands for development and building:
60
+
61
+ - `npm run dev` — Starts **tsup** in watch mode. Use this for active development.
62
+ - `npm run build` — Compiles the library into the `dist` folder for production.
63
+ - `npm run start` — Launches **Ladle** to preview your components and themes in isolation.
64
+
65
+ ---
66
+
67
+ ## ✅ Patch notes:
68
+
69
+ ### v 2.0.0 — The "Performance & Style" Update 🚀
70
+
71
+ **Optimization & Refactoring:**
72
+
73
+ - **Dependency Swap:** Migrated from `classnames` to **`clsx`** — package is now lighter and faster.
74
+ - **Architecture Refactor:** Months and weekdays are now pre-generated in the core component, significantly reducing `dayjs` overhead in child components.
75
+ - **Modern Bundler Support:** Fixed dynamic locale loading
76
+ - **Type Safety:** Added strict `LocaleKey` and `Theme` types for better developer experience.
77
+
78
+ **New Features:**
79
+
80
+ - **Weekday Headers:** Added localized day-of-week labels (Mon, Tue, etc.) above the date grid.
81
+ - **Built-in Themes:** Introduced 5 color palettes using CSS variables.
82
+ - **Flexible Layout:** New `showMonths` prop allows the date grid to adapt and fill the container width.
83
+ - **Expanded Locales:** Added `es` (Spanish) and `sr` (Serbian) support.
84
+ - **Smart Presets:** Labels like "yesterday" or "month ago" are now fully localized via a dedicated i18n engine.
85
+
86
+ ---
87
+
88
+ ### v 1.3.1
89
+
90
+ - Added year picker
91
+ - Added dark theme 🌙
92
+ - Added locales: `zh-cn`, `fr`
93
+
94
+ ---
95
+
96
+ ### v 1.0.0
97
+
98
+ - Base version of the calendar
99
+ - Date and time selection
100
+ - Basic presets
package/dist/index.cjs ADDED
@@ -0,0 +1,2 @@
1
+ "use strict";var na=Object.create;var N=Object.defineProperty;var la=Object.getOwnPropertyDescriptor;var ca=Object.getOwnPropertyNames;var ia=Object.getPrototypeOf,sa=Object.prototype.hasOwnProperty;var da=(a,t)=>{for(var n in t)N(a,n,{get:t[n],enumerable:!0})},G=(a,t,n,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of ca(t))!sa.call(a,e)&&e!==n&&N(a,e,{get:()=>t[e],enumerable:!(o=la(t,e))||o.enumerable});return a};var p=(a,t,n)=>(n=a!=null?na(ia(a)):{},G(t||!a||!a.__esModule?N(n,"default",{value:a,enumerable:!0}):n,a)),ma=a=>G(N({},"__esModule",{value:!0}),a);var wa={};da(wa,{Calendar:()=>ka});module.exports=ma(wa);var aa=p(require("clsx"),1),M=require("react");var J=p(require("#style-inject"));(0,J.default)(`:root{--cal-accent: #ffffff;--cal-backdrop: #ffffff;--cal-highlight: #1a1a1c;--cal-tone: #f4f4f4;--cal-color-text: #1a1a1c;--cal-border-color: #f0f0f0}[data-theme=dark]{--cal-accent: #1a1a1c;--cal-backdrop: #1a1a1c;--cal-highlight: #ffffff;--cal-tone: #2d2d2d;--cal-color-text: #f0f0f0;--cal-border-color: #333333}[data-theme=midnight]{--cal-accent: #141721;--cal-backdrop: #1e2333;--cal-highlight: #3559e0;--cal-tone: #252a3d;--cal-color-text: #ffffff;--cal-border-color: #2d3246}[data-theme=sandstone]{--cal-accent: #1c1a17;--cal-backdrop: #24211c;--cal-highlight: #e3ae5c;--cal-tone: #332f28;--cal-color-text: #fdfbf7;--cal-border-color: #3d372e}[data-theme=mint_blue]{--cal-accent: #ffffff;--cal-backdrop: #f8f9fc;--cal-highlight: #60d276;--cal-tone: #eaedf4;--cal-color-text: #171827;--cal-border-color: #eef0f5}.calendar{min-width:450px;min-height:10vh;max-height:100vh;background:var(--cal-accent);color:var(--cal-color-text);display:grid;grid-template-columns:2fr 5fr;grid-template-rows:60px auto;grid-template-areas:"YY YY" "MM DD";user-select:none;box-sizing:border-box;font-family:system-ui,-apple-system,sans-serif;border-radius:16px;border:1px solid var(--cal-border-color);box-shadow:0 4px 20px #00000008;overflow:hidden;&.with_presets:not(.with_time){grid-template-rows:60px auto 50px;grid-template-areas:"YY YY" "MM DD" "PRESETS PRESETS"}&.with_time:not(.with_presets){grid-template-columns:2fr 5fr 2fr;grid-template-areas:"YY YY YY" "MM DD TIME"}&.with_time.with_presets{grid-template-columns:2fr 5fr 2fr;grid-template-rows:60px auto 50px;grid-template-areas:"YY YY YY" "MM DD TIME" "PRESETS PRESETS PRESETS"}&.no_months{grid-template-columns:1fr;grid-template-areas:"YY" "DD";&.with_time{grid-template-columns:5fr 2fr;grid-template-areas:"YY YY" "DD TIME"}&.with_presets{grid-template-areas:"YY" "DD" "PRESETS";&.with_time{grid-template-areas:"YY YY" "DD TIME" "PRESETS PRESETS"}}}&.years_picker{grid-template-columns:1fr!important;grid-template-rows:1fr!important}:is(.calendar-button,.calendar-yearPicker-arrow,.calendar-yearPicker-year,.calendar-presets-preset,.calendar-time-half-cell,.calendar-years-arrow,.calendar-months-month,.calendar-days-day){border:none;color:var(--cal-color-text);display:flex;align-items:center;justify-content:center;border-radius:8px;transition:all .2s ease;&:not([disabled]):is(:hover,:active){background:var(--cal-tone);cursor:pointer}&[disabled]{cursor:not-allowed;filter:opacity(.4)}& svg{width:23px;height:23px;fill:currentColor;stroke-width:1.4;flex-shrink:0;display:block;margin:auto}}}.calendar-years{grid-area:YY;display:flex;background:var(--cal-accent);border-bottom:1px solid var(--cal-border-color);justify-content:space-between;.calendar-years-current{flex:4;font:700 21px system-ui;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:background .2s ease,color .2s ease;&:hover{cursor:pointer;background:var(--cal-tone)}}.calendar-years-arrow{flex-grow:1}}.calendar-months{grid-area:MM;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(6,1fr);padding:15px 10px;gap:4px;border-right:1px solid var(--cal-border-color);background:var(--cal-backdrop);.calendar-months-month{font-size:13px;padding:10px 5px;justify-content:center}}.calendar-days{grid-area:DD;background:var(--cal-backdrop);display:grid;grid-template-columns:repeat(7,1fr);padding:15px;gap:5px}.calendar-time{grid-area:TIME;display:flex;padding-left:1px;border-left:1px solid var(--cal-border-color);.calendar-time-half{flex:1;width:50%;display:grid;grid-template-rows:repeat(7,1fr);background:var(--cal-backdrop);.calendar-time-half-cell:is(:first-child,:last-child){background:var(--cal-accent)}.calendar-time-half-cell:nth-child(4){position:relative;background:var(--cal-highlight);color:var(--cal-accent)}}}.calendar-days-header{display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--cal-color-text);opacity:.5;text-transform:uppercase;user-select:none}.calendar-presets{grid-area:PRESETS;display:flex;border-top:1px solid var(--cal-border-color);padding:5px 7px;gap:5px;.calendar-presets-preset{flex:1;text-align:center;font-size:13px;padding:3px;background:var(--cal-tone)}}.calendar-yearPicker{background:var(--cal-backdrop);display:grid;grid-template-columns:50px repeat(5,1fr) 50px;grid-template-rows:repeat(5,1fr);animation:fadeIn .2s linear forwards;.calendar-yearPicker-arrow{background:var(--cal-accent);&:first-child{grid-area:1/1/6/2}&:last-child{grid-area:1/7/6/7}}.calendar-yearPicker-year{background:var(--cal-backdrop);opacity:0;&.year_anim{animation:fadeIn .3s forwards}}}.calendar_active{background:var(--cal-highlight)!important;color:var(--cal-accent)!important}.dividerhour:after{content:":";position:absolute;top:50%;transform:translateY(-55%);right:0;animation:fadeIn 1.1s infinite}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}
2
+ `);var k=p(require("dayjs"),1),ea=p(require("dayjs/plugin/localeData"),1),oe=require("dayjs/locale/en"),ne=require("dayjs/locale/es"),le=require("dayjs/locale/ru"),ce=require("dayjs/locale/de"),ie=require("dayjs/locale/sr"),se=require("dayjs/locale/fr");var T=p(require("dayjs"),1);var u=require("react/jsx-runtime"),R=()=>(0,u.jsx)("svg",{height:"256",viewBox:"0 0 64 64",width:"256",xmlns:"http://www.w3.org/2000/svg",children:(0,u.jsx)("path",{d:"m54 30h-39.899l15.278-14.552c.8-.762.831-2.028.069-2.828-.761-.799-2.027-.831-2.828-.069l-17.448 16.62c-.755.756-1.172 1.76-1.172 2.829 0 1.068.417 2.073 1.207 2.862l17.414 16.586c.387.369.883.552 1.379.552.528 0 1.056-.208 1.449-.621.762-.8.731-2.065-.069-2.827l-15.342-14.552h39.962c1.104 0 2-.896 2-2s-.896-2-2-2z"})}),E=()=>(0,u.jsx)("svg",{height:"256",viewBox:"0 0 64 64",width:"256",xmlns:"http://www.w3.org/2000/svg",children:(0,u.jsx)("path",{d:"m37.379 12.552c-.799-.761-2.066-.731-2.827.069-.762.8-.73 2.066.069 2.828l15.342 14.551h-39.963c-1.104 0-2 .896-2 2s-.896 2 2 2h39.899l-15.278 14.552c-.8.762-.831 2.028-.069 2.828.393.412.92.62 1.448.62.496 0 .992-.183 1.379-.552l17.449-16.62c.756-.755 1.172-1.759 1.172-2.828s-.416-2.073-1.207-2.862z"})}),S=()=>(0,u.jsx)("svg",{viewBox:"0 0 492.002 492.002",xmlns:"http://www.w3.org/2000/svg",children:(0,u.jsx)("path",{d:"M484.136,328.473L264.988,109.329c-5.064-5.064-11.816-7.844-19.172-7.844c-7.208,0-13.964,2.78-19.02,7.844 L7.852,328.265C2.788,333.333,0,340.089,0,347.297c0,7.208,2.784,13.968,7.852,19.032l16.124,16.124 c5.064,5.064,11.824,7.86,19.032,7.86s13.964-2.796,19.032-7.86l183.852-183.852l184.056,184.064 c5.064,5.06,11.82,7.852,19.032,7.852c7.208,0,13.96-2.792,19.028-7.852l16.128-16.132 C494.624,356.041,494.624,338.965,484.136,328.473z"})}),I=()=>(0,u.jsx)("svg",{viewBox:"0 0 256 256",xmlns:"http://www.w3.org/2000/svg",children:(0,u.jsx)("polygon",{points:"225.813,48.907 128,146.72 30.187,48.907 0,79.093 128,207.093 256,79.093"})});var v=require("react/jsx-runtime"),fa=({date:a,toggleYearPicker:t,changeAction:n})=>{let o=()=>{n((0,T.default)(a).subtract(1,"year"))},e=()=>{n((0,T.default)(a).add(1,"year"))};return(0,v.jsxs)("div",{className:"calendar-years",children:[(0,v.jsx)("div",{tabIndex:0,role:"button",className:"calendar-years-arrow",onClick:o,onKeyDown:l=>{(l.key==="Enter"||l.key===" ")&&o()},children:(0,v.jsx)(R,{})}),(0,v.jsx)("div",{onClick:t,className:"calendar-years-current",role:"button",tabIndex:0,children:(0,T.default)(a).format("YYYY")}),(0,v.jsx)("div",{onClick:e,role:"button",tabIndex:0,className:"calendar-years-arrow",onKeyDown:l=>{(l.key==="Enter"||l.key===" ")&&e()},children:(0,v.jsx)(E,{})})]})},L=fa;var Y=require("react"),q=p(require("clsx"),1),j=p(require("dayjs"),1);var b=require("react/jsx-runtime"),pa=({toggleYearPicker:a,date:t,changeAction:n})=>{let[o,e]=(0,Y.useState)((0,j.default)(t)),[l,r]=(0,Y.useState)(!0),i=o.year(),h=Array.from({length:25},(d,_)=>i-12+_),s=d=>{d?.preventDefault(),n((0,j.default)(o)),a()},y=d=>{n((0,j.default)(o).year(d)),a()},g=d=>`${(Math.abs(i-d)*.1/2).toFixed(2)}s`;return(0,Y.useEffect)(()=>{r(!1);let d=setTimeout(()=>r(!0),50);return()=>clearTimeout(d)},[o]),(0,b.jsxs)("div",{className:"calendar-yearPicker",onContextMenu:s,children:[(0,b.jsx)("button",{disabled:i<1925,onClick:()=>e(o.subtract(25,"y")),className:"calendar-yearPicker-arrow",children:(0,b.jsx)(R,{})}),h.map(d=>(0,b.jsx)("button",{disabled:d>2100||d<1900,onClick:()=>y(d),className:(0,q.default)("calendar-yearPicker-year",{year_anim:l,calendar_active:i===d}),style:{animationDelay:g(d),animationIterationCount:1},children:d},d)),(0,b.jsx)("button",{className:"calendar-yearPicker-arrow",disabled:i>2075,onClick:()=>e(o.add(25,"y")),children:(0,b.jsx)(E,{})})]})},H=pa;var Q=p(require("clsx"),1),A=require("react/jsx-runtime"),ya=({date:a,monthsNames:t,changeAction:n})=>{let o=a.month();return(0,A.jsx)("div",{className:"calendar-months",children:t.map((e,l)=>(0,A.jsx)("div",{className:(0,Q.default)("calendar-months-month",{calendar_active:l===o}),onClick:()=>n(a.month(l)),children:e},l))})},F=ya;var V=p(require("clsx"),1),X=require("react"),P=require("react/jsx-runtime"),ha=({date:a,changeAction:t,weekdays:n})=>{let o=a.date(),e=(0,X.useMemo)(()=>{let r=a.daysInMonth();return Array.from({length:r},(i,h)=>h+1)},[a]),l=r=>{r!==o&&t(a.date(r))};return(0,P.jsxs)("div",{className:"calendar-days",children:[n.map(r=>(0,P.jsx)("div",{className:"calendar-days-header",children:r},r)),e.map(r=>(0,P.jsx)("div",{onClick:()=>l(r),onKeyDown:i=>{(i.key==="Enter"||i.key===" ")&&l(r)},tabIndex:0,role:"button",className:(0,V.default)("calendar-days-day",{calendar_active:r===o}),children:r},r))]})},K=ha;var C=require("react"),m=p(require("dayjs"),1);var c=require("react/jsx-runtime"),ua=({date:a,changeAction:t})=>{let[n,o]=(0,C.useState)((0,m.default)(a).format("HH")),[e,l]=(0,C.useState)((0,m.default)(a).format("mm")),r=(s,y)=>{t((0,m.default)(a).add(s,y))},i=(s,y)=>{t((0,m.default)(a).subtract(s,y))},h=(s,y)=>{let g="deltaY"in s?s.deltaY:0;g<0?t((0,m.default)(a).subtract(1,y)):g>0&&t((0,m.default)(a).add(1,y))};return(0,C.useEffect)(()=>{let s=(0,m.default)(a);o(s.format("HH")),l(s.format("mm"))},[a]),(0,c.jsxs)("div",{className:"calendar-time",children:[(0,c.jsxs)("div",{className:"calendar-time-half hours",onWheel:s=>h(s,"h"),children:[(0,c.jsx)("div",{className:"calendar-time-half-cell",onClick:()=>i(1,"h"),children:(0,c.jsx)(S,{})}),(0,c.jsx)("div",{onClick:()=>i(2,"h"),className:"calendar-time-half-cell",children:(0,m.default)(a).subtract(2,"h").format("HH")}),(0,c.jsx)("div",{onClick:()=>i(1,"h"),className:"calendar-time-half-cell",children:(0,m.default)(a).subtract(1,"h").format("HH")}),(0,c.jsx)("div",{className:"calendar-time-half-cell dividerhour",children:n}),(0,c.jsx)("div",{onClick:()=>r(1,"h"),className:"calendar-time-half-cell",children:(0,m.default)(a).add(1,"h").format("HH")}),(0,c.jsx)("div",{onClick:()=>r(2,"h"),className:"calendar-time-half-cell",children:(0,m.default)(a).add(2,"h").format("HH")}),(0,c.jsx)("div",{className:"calendar-time-half-cell",onClick:()=>r(1,"h"),children:(0,c.jsx)(I,{})})]}),(0,c.jsxs)("div",{className:"calendar-time-half",onWheel:s=>h(s,"m"),children:[(0,c.jsx)("div",{className:"calendar-time-half-cell",onClick:()=>i(1,"m"),children:(0,c.jsx)(S,{})}),(0,c.jsx)("div",{onClick:()=>i(2,"m"),className:"calendar-time-half-cell",children:(0,m.default)(a).subtract(2,"m").format("mm")}),(0,c.jsx)("div",{onClick:()=>i(1,"m"),className:"calendar-time-half-cell",children:(0,m.default)(a).subtract(1,"m").format("mm")}),(0,c.jsx)("div",{className:"calendar-time-half-cell",children:e}),(0,c.jsx)("div",{onClick:()=>r(1,"m"),className:"calendar-time-half-cell",children:(0,m.default)(a).add(1,"m").format("mm")}),(0,c.jsx)("div",{onClick:()=>r(2,"m"),className:"calendar-time-half-cell",children:(0,m.default)(a).add(2,"m").format("mm")}),(0,c.jsx)("div",{onClick:()=>r(1,"m"),className:"calendar-time-half-cell",children:(0,c.jsx)(I,{})})]})]})},z=ua;var Z=p(require("dayjs"),1);var ga={ru:{t:"\u0441\u0435\u0433\u043E\u0434\u043D\u044F",y:"\u0432\u0447\u0435\u0440\u0430",wa:"\u043D\u0435\u0434\u0435\u043B\u044E \u043D\u0430\u0437\u0430\u0434",ma:"\u043C\u0435\u0441\u044F\u0446 \u043D\u0430\u0437\u0430\u0434",ya:"\u0433\u043E\u0434 \u043D\u0430\u0437\u0430\u0434"},en:{t:"today",y:"yesterday",wa:"week ago",ma:"month ago",ya:"year ago"},ua:{t:"\u0441\u044C\u043E\u0433\u043E\u0434\u043D\u0456",y:"\u0432\u0447\u043E\u0440\u0430",wa:"\u0442\u0438\u0436\u0434\u0435\u043D\u044C \u0442\u043E\u043C\u0443",ma:"\u043C\u0456\u0441\u044F\u0446\u044C \u0442\u043E\u043C\u0443",ya:"\u0440\u0456\u043A \u0442\u043E\u043C\u0443"},de:{t:"heute",y:"gestern",wa:"vor 1 Woche",ma:"vor 1 Monat",ya:"vor 1 Jahr"},"zh-cn":{t:"\u4ECA\u5929",y:"\u6628\u5929",wa:"\u4E00\u5468\u524D",ma:"\u4E00\u4E2A\u6708\u524D",ya:"\u4E00\u5E74\u524D"},fr:{t:"aujourd'hui",y:"hier",wa:"il y a une semaine",ma:"il y a un mois",ya:"il y a un an"},es:{t:"hoy",y:"ayer",wa:"hace una semana",ma:"hace un mes",ya:"hace un a\xF1o"},sr:{t:"danas",y:"ju\u010De",wa:"pre nedelju dana",ma:"pre mesec dana",ya:"pre godinu dana"}},W=ga;var B=require("react/jsx-runtime"),va=[{key:"t",amount:0,unit:"day"},{key:"y",amount:1,unit:"day"},{key:"wa",amount:1,unit:"week"},{key:"ma",amount:1,unit:"month"},{key:"ya",amount:1,unit:"year"}],ba=({locale:a,changeAction:t})=>{let n=W[a]||W.en,o=(e,l)=>{t((0,Z.default)().subtract(e,l).startOf("day"))};return(0,B.jsx)("div",{className:"calendar-presets",children:va.map(({key:e,amount:l,unit:r})=>(0,B.jsx)("div",{onClick:()=>o(l,r),onKeyDown:i=>{(i.key==="Enter"||i.key===" ")&&o(l,r)},tabIndex:0,role:"button",className:"calendar-presets-preset",children:n[e]},e))})},O=ba;var f=require("react/jsx-runtime");k.default.extend(ea.default);var ka=({presets:a=!1,months:t=!0,date:n=new Date,time:o=!1,locale:e="en",onChangeDate:l,width:r=null,height:i=null,theme:h="light"})=>{let[s,y]=(0,M.useState)(!1),[g,d]=(0,M.useState)(!1),_=s?e:"en",D=(0,k.default)(n).locale(_),$=()=>d(!g),w=x=>{l?l(x.toDate()):console.warn('Must provide an "onChangeDate" function')},ta=s?Array.from({length:12},(x,U)=>(0,k.default)().locale(e).month(U).format("MMMM")):[];(0,M.useEffect)(()=>{let x=!0;return(async()=>{try{e==="en"?k.default.locale("en"):(await import(`dayjs/locale/${e}.js`),x&&k.default.locale(e))}catch(oa){console.warn(`Could not load locale: ${e}`,oa)}finally{x&&y(!0)}})(),()=>{x=!1}},[e]);let ra=s?(0,k.default)().locale(e).localeData().weekdaysMin():[];return(0,f.jsx)("div",{style:{width:r??void 0,height:i??void 0},className:(0,aa.default)("calendar",{with_time:o,with_presets:a,years_picker:g,no_months:!t}),"data-theme":h!=="light"?h:void 0,children:g?(0,f.jsx)(H,{date:D,changeAction:w,toggleYearPicker:$}):(0,f.jsxs)(f.Fragment,{children:[(0,f.jsx)(L,{date:D,toggleYearPicker:$,changeAction:w}),t&&(0,f.jsx)(F,{monthsNames:ta,date:D,changeAction:w}),s&&(0,f.jsx)(K,{date:D,changeAction:w,weekdays:ra}),o&&(0,f.jsx)(z,{date:D,changeAction:w}),a&&(0,f.jsx)(O,{locale:e,changeAction:w})]})})};
package/dist/index.d.cts ADDED
@@ -0,0 +1,21 @@
1
+ import React from 'react';
2
+ import { Dayjs } from 'dayjs';
3
+
4
+ type CalendarTheme = "light" | "dark" | "midnight" | "sandstone" | "mint_blue";
5
+
6
+ type LocaleKey = "ru" | "en" | "ua" | "de" | "zh-cn" | "fr" | "es" | "sr";
7
+
8
+ interface CalendarProps {
9
+ presets?: boolean;
10
+ months?: boolean;
11
+ date?: Date | string | number | Dayjs;
12
+ time?: boolean;
13
+ locale?: LocaleKey;
14
+ onChangeDate?: (date: Date) => void;
15
+ width?: string | number | null;
16
+ height?: string | number | null;
17
+ theme?: CalendarTheme;
18
+ }
19
+ declare const Calendar: React.FC<CalendarProps>;
20
+
21
+ export { Calendar, type CalendarProps };
package/dist/index.d.ts ADDED
@@ -0,0 +1,21 @@
1
+ import React from 'react';
2
+ import { Dayjs } from 'dayjs';
3
+
4
+ type CalendarTheme = "light" | "dark" | "midnight" | "sandstone" | "mint_blue";
5
+
6
+ type LocaleKey = "ru" | "en" | "ua" | "de" | "zh-cn" | "fr" | "es" | "sr";
7
+
8
+ interface CalendarProps {
9
+ presets?: boolean;
10
+ months?: boolean;
11
+ date?: Date | string | number | Dayjs;
12
+ time?: boolean;
13
+ locale?: LocaleKey;
14
+ onChangeDate?: (date: Date) => void;
15
+ width?: string | number | null;
16
+ height?: string | number | null;
17
+ theme?: CalendarTheme;
18
+ }
19
+ declare const Calendar: React.FC<CalendarProps>;
20
+
21
+ export { Calendar, type CalendarProps };
package/dist/index.js CHANGED
@@ -1 +1,2 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("classnames"),a=require("react"),t=require("moment");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function r(e){if(e&&e.__esModule)return e;var a=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var l=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,l.get?l:{enumerable:!0,get:function(){return e[t]}})}})),a.default=e,Object.freeze(a)}var n=l(e),d=l(a),c=l(t);function i(){return d.default.createElement("svg",{id:"Layer",enableBackground:"new 0 0 64 64",height:"256",viewBox:"0 0 64 64",width:"256",xmlns:"http://www.w3.org/2000/svg"},d.default.createElement("path",{d:"m54 30h-39.899l15.278-14.552c.8-.762.831-2.028.069-2.828-.761-.799-2.027-.831-2.828-.069l-17.448 16.62c-.755.756-1.172 1.76-1.172 2.829 0 1.068.417 2.073 1.207 2.862l17.414 16.586c.387.369.883.552 1.379.552.528 0 1.056-.208 1.449-.621.762-.8.731-2.065-.069-2.827l-15.342-14.552h39.962c1.104 0 2-.896 2-2s-.896-2-2-2z"}))}function s(){return d.default.createElement("svg",{id:"Layer",enableBackground:"new 0 0 64 64",height:"256",viewBox:"0 0 64 64",width:"256",xmlns:"http://www.w3.org/2000/svg"},d.default.createElement("path",{d:"m37.379 12.552c-.799-.761-2.066-.731-2.827.069-.762.8-.73 2.066.069 2.828l15.342 14.551h-39.963c-1.104 0-2 .896-2 2s.896 2 2 2h39.899l-15.278 14.552c-.8.762-.831 2.028-.069 2.828.393.412.92.62 1.448.62.496 0 .992-.183 1.379-.552l17.449-16.62c.756-.755 1.172-1.759 1.172-2.828s-.416-2.073-1.207-2.862z"}))}function o(){return d.default.createElement("svg",{version:"1.1",id:"Layer_1",xmlns:"http://www.w3.org/2000/svg",x:"0px",y:"0px",viewBox:"0 0 492.002 492.002",xml:"preserve"},d.default.createElement("g",null,d.default.createElement("g",null,d.default.createElement("path",{d:"M484.136,328.473L264.988,109.329c-5.064-5.064-11.816-7.844-19.172-7.844c-7.208,0-13.964,2.78-19.02,7.844\r L7.852,328.265C2.788,333.333,0,340.089,0,347.297c0,7.208,2.784,13.968,7.852,19.032l16.124,16.124\r c5.064,5.064,11.824,7.86,19.032,7.86s13.964-2.796,19.032-7.86l183.852-183.852l184.056,184.064\r c5.064,5.06,11.82,7.852,19.032,7.852c7.208,0,13.96-2.792,19.028-7.852l16.128-16.132\r C494.624,356.041,494.624,338.965,484.136,328.473z"}))),d.default.createElement("g",null),d.default.createElement("g",null),d.default.createElement("g",null),d.default.createElement("g",null),d.default.createElement("g",null),d.default.createElement("g",null),d.default.createElement("g",null),d.default.createElement("g",null),d.default.createElement("g",null),d.default.createElement("g",null),d.default.createElement("g",null),d.default.createElement("g",null),d.default.createElement("g",null),d.default.createElement("g",null),d.default.createElement("g",null))}function m(){return d.default.createElement("svg",{version:"1.1",id:"Capa_1",xmlns:"http://www.w3.org/2000/svg",x:"0px",y:"0px",viewBox:"0 0 256 256",xml:"preserve"},d.default.createElement("g",null,d.default.createElement("g",null,d.default.createElement("polygon",{points:"225.813,48.907 128,146.72 30.187,48.907 0,79.093 128,207.093 256,79.093 \t\t"}))),d.default.createElement("g",null),d.default.createElement("g",null),d.default.createElement("g",null),d.default.createElement("g",null),d.default.createElement("g",null),d.default.createElement("g",null),d.default.createElement("g",null),d.default.createElement("g",null),d.default.createElement("g",null),d.default.createElement("g",null),d.default.createElement("g",null),d.default.createElement("g",null),d.default.createElement("g",null),d.default.createElement("g",null),d.default.createElement("g",null))}!function(e,a){void 0===a&&(a={});var t=a.insertAt;if(e&&"undefined"!=typeof document){var l=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&l.firstChild?l.insertBefore(r,l.firstChild):l.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}('.calendar{--accent:#d8d6d6;--backdrop:#eeebe7;--highlight:#b1aa48;--tone:#9c9999;--color-text:#333;min-width:60vh;min-height:60vh;max-height:100vh;background:var(--accent);color:var(--color-text);display:grid;grid-template-columns:2fr 5fr;grid-template-rows:50px auto;grid-template-areas:"YY YY" "MM DD";user-select:none;font-family:sans-serif}.calendar.dark_calendar{--accent:#645d55;--backdrop:#6c6e6a;--highlight:#2c281e;--tone:#21282e;--color-text:#e9e6e6}.calendar.with_presets:not(.with_time){min-height:60vh;grid-template-columns:2fr 5fr;grid-template-rows:50px auto 50px;grid-template-areas:"YY YY" "MM DD" "PRESETS PRESETS"}.calendar.with_time:not(.with_presets){min-width:75vh;grid-template-columns:2fr 5fr 2fr;grid-template-rows:50px auto;grid-template-areas:"YY YY YY" "MM DD TIME";column-gap:2px}.calendar.with_presets,.calendar.with_time{grid-template-columns:2fr 5fr 2fr;grid-template-rows:50px auto 50px;grid-template-areas:"YY YY YY" "MM DD TIME" "PRESETS PRESETS PRESETS"}.calendar.years_picker{grid-template-columns:1fr!important;grid-template-rows:1fr!important}.calendar-yearspicker{background:var(--backdrop);display:grid;grid-template-columns:50px repeat(5,1fr) 50px;grid-template-rows:repeat(5,1fr);animation:fadeIn 1 .2s linear 0 forwards}.calendar-yearspicker-arrow{background:var(--accent)}.calendar-yearspicker-arrow:first-child{grid-area:1/1/6/2}.calendar-yearspicker-arrow:last-child{grid-area:1/7/6/7}.calendar-yearspicker-year{background:var(--backdrop);opacity:0}.calendar-yearspicker-year.year_anim{animation-name:fadeIn;animation-duration:.3s;animation-iteration-count:1;animation-fill-mode:forwards}.calendar-presets{grid-area:PRESETS;display:flex;width:100%}.calendar-presets-preset{text-align:center;font-size:13px;padding:3px;width:20%;background:var(--tone);border-right:1px solid var(--backdrop)}.calendar-presets-preset:last-child{border:none}.calendar-time{grid-area:TIME;display:flex;padding-left:1px}.calendar-time-half{width:50%;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(7,1fr);background:var(--backdrop)}.calendar-time-half-cell:first-child,.calendar-time-half-cell:last-child{background:var(--accent)}.calendar-time-half-cell:nth-child(4){position:relative}.calendar-time-half-cell svg{fill:var(--color-text);max-width:20%;min-height:10px;min-width:10px}.calendar-years{grid-area:YY;display:flex;background:var(--tone);justify-content:space-between}.calendar-years-current{width:60%;height:100%;text-align:center;font:700 21px sans-serif}.calendar-years-current:hover{cursor:pointer}.calendar-years-arrow{width:50px;height:100%}.calendar-months{grid-area:MM;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(6,1fr)}.calendar-months-month{height:100%;padding:1px}.calendar-days{grid-area:DD;background:var(--backdrop);display:grid;grid-template-columns:repeat(7,1fr)}.calendar-time-half-cell:nth-child(4),.calendar_active{background:var(--highlight)}.calendar-button,.calendar-days-day,.calendar-months-month,.calendar-presets-preset,.calendar-time-half-cell,.calendar-years-arrow,.calendar-yearspicker-arrow,.calendar-yearspicker-year{border:none;color:var(--color-text)}.calendar-button:not([disabled]):active,.calendar-button:not([disabled]):hover,.calendar-days-day:not([disabled]):active,.calendar-days-day:not([disabled]):hover,.calendar-months-month:not([disabled]):active,.calendar-months-month:not([disabled]):hover,.calendar-presets-preset:not([disabled]):active,.calendar-presets-preset:not([disabled]):hover,.calendar-time-half-cell:not([disabled]):active,.calendar-time-half-cell:not([disabled]):hover,.calendar-years-arrow:not([disabled]):active,.calendar-years-arrow:not([disabled]):hover,.calendar-yearspicker-arrow:not([disabled]):active,.calendar-yearspicker-arrow:not([disabled]):hover,.calendar-yearspicker-year:not([disabled]):active,.calendar-yearspicker-year:not([disabled]):hover{background:var(--highlight);cursor:pointer}.calendar-button[disabled],.calendar-days-day[disabled],.calendar-months-month[disabled],.calendar-presets-preset[disabled],.calendar-time-half-cell[disabled],.calendar-years-arrow[disabled],.calendar-yearspicker-arrow[disabled],.calendar-yearspicker-year[disabled]{cursor:not-allowed;filter:opacity(.4)}.calendar-button svg,.calendar-days-day svg,.calendar-months-month svg,.calendar-presets-preset svg,.calendar-time-half-cell svg,.calendar-years-arrow svg,.calendar-yearspicker-arrow svg,.calendar-yearspicker-year svg{fill:var(--color-text);max-height:50%;min-height:10px;min-width:10px}.calendar-days-day,.calendar-fcc,.calendar-months-month,.calendar-presets-preset,.calendar-time-half-cell,.calendar-years-arrow,.calendar-years-current,.calendar-yearspicker-arrow,.calendar-yearspicker-year{display:flex;align-items:center;justify-content:center}.dividerhour:after{content:":";position:absolute;top:50%;transform:translateY(-55%);right:0;opacity:1;animation:fadeIn 1.1s infinite}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}');const u=({date:e,toggleYearsPicker:a,changeAction:t})=>d.default.createElement("div",{className:"calendar-years"},d.default.createElement("div",{tabIndex:"0",role:"button",className:"calendar-years-arrow",onClick:()=>{t(c.default(e).subtract(1,"Y"))}},i()),d.default.createElement("div",{onClick:a,className:"calendar-years-current"},c.default(e).format("YYYY")),d.default.createElement("div",{onClick:()=>{t(c.default(e).add(1,"Y"))},role:"button",tabIndex:"0",className:"calendar-years-arrow"},s())),f=({toggleYearsPicker:e,date:t,changeAction:l})=>{const[r,o]=a.useState([]),[m,u]=a.useState(0),[f,h]=a.useState(!0);return a.useEffect((()=>{u(c.default(t))}),[t]),a.useEffect((()=>{o(new Array(25).fill(+c.default(m).format("YYYY")-12).map(((e,a)=>e+a))),h(!1),setTimeout((()=>{h(!0)}),50)}),[m]),d.default.createElement("div",{className:"calendar-yearspicker",onContextMenu:(a=null)=>{a&&a.preventDefault(),l(c.default(m)),e()}},d.default.createElement("button",{disabled:+c.default(m).format("YYYY")<1925,onClick:()=>u(c.default(m).subtract(25,"y")),className:"calendar-yearspicker-arrow"},i()),r&&r.map((a=>{return d.default.createElement("button",{key:a,disabled:a>2100||a<1900,onClick:()=>{return t=a,l(c.default(m).year(t)),void e();var t},className:n.default("calendar-yearspicker-year",{year_anim:f,calendar_active:+c.default(m).format("YYYY")===a}),style:{animationDelay:(t=a,`\n ${(.1*Math.abs(+c.default(m).format("YYYY")-t)/2).toFixed(2)}s`),animationIterationCount:1}},a);var t})),d.default.createElement("button",{className:"calendar-yearspicker-arrow",disabled:+c.default(m).format("YYYY")>2075,onClick:()=>u(c.default(m).add(25,"y"))},s()))},h=({date:e,changeAction:a})=>{let t=Array.from({length:12},((e,a)=>a));return d.default.createElement("div",{className:"calendar-months"},t.map((t=>d.default.createElement("div",{key:t,tabIndex:"0",role:"button",className:n.default("calendar-months-month",{calendar_active:t+1===+c.default(e).format("M")}),onClick:()=>{var l;(l=t)+1!==+c.default(e).format("M")&&a(c.default(e).month(l))}},c.default().month(t).format("MMMM")))))},g=({date:e,changeAction:t})=>{const[l,r]=a.useState([]);return a.useEffect((()=>{let a=c.default(e).daysInMonth();r(Array.from({length:a},((e,a)=>a+1)))}),[e]),d.default.createElement("div",{className:"calendar-days"},l.map((a=>d.default.createElement("div",{key:a,onClick:()=>{var l;(l=a)!==c.default(e).date()&&t(c.default(e).set("date",l))},tabIndex:"0",role:"button",className:n.default("calendar-days-day",{calendar_active:c.default(e).date()===a})},a))))},p=({date:e,changeAction:t})=>{const[l,r]=a.useState(+c.default(e).format("HH")),[n,i]=a.useState(+c.default(e).format("mm")),s=(a,l)=>{t(c.default(e).add(a,l))},u=(a,l)=>{t(c.default(e).subtract(a,l))},f=({deltaY:a},l)=>{t(a<0?c.default(e).subtract(1,l):c.default(e).add(1,l))};return a.useEffect((()=>{r(c.default(e).format("HH")),i(c.default(e).format("mm"))}),[e]),a.useEffect((()=>(document.addEventListener("scroll",f),()=>{document.removeEventListener("scroll",f)})),[]),d.default.createElement("div",{className:"calendar-time"},d.default.createElement("div",{className:"calendar-time-half hours",onWheel:e=>f(e,"H")},d.default.createElement("div",{className:"calendar-time-half-cell",onClick:()=>u(1,"H")},o()),d.default.createElement("div",{onClick:()=>u(2,"H"),className:"calendar-time-half-cell"},c.default(e).subtract(2,"H").format("HH")),d.default.createElement("div",{onClick:()=>u(1,"H"),className:"calendar-time-half-cell"},c.default(e).subtract(1,"H").format("HH")),d.default.createElement("div",{className:"calendar-time-half-cell dividerhour"},l),d.default.createElement("div",{onClick:()=>s(1,"H"),className:"calendar-time-half-cell"},c.default(e).add(1,"H").format("HH")),d.default.createElement("div",{onClick:()=>s(2,"H"),className:"calendar-time-half-cell"},c.default(e).add(2,"H").format("HH")),d.default.createElement("div",{className:"calendar-time-half-cell",onClick:()=>s(1,"H")},m())),d.default.createElement("div",{className:"calendar-time-half",onWheel:e=>f(e,"m")},d.default.createElement("div",{className:"calendar-time-half-cell",onClick:()=>u(1,"m")},o()),d.default.createElement("div",{onClick:()=>u(2,"m"),className:"calendar-time-half-cell"},c.default(e).subtract(2,"m").format("mm")),d.default.createElement("div",{onClick:()=>u(1,"m"),className:"calendar-time-half-cell"},c.default(e).subtract(1,"m").format("mm")),d.default.createElement("div",{className:"calendar-time-half-cell"},n),d.default.createElement("div",{onClick:()=>s(1,"m"),className:"calendar-time-half-cell"},c.default(e).add(1,"m").format("mm")),d.default.createElement("div",{onClick:()=>s(2,"m"),className:"calendar-time-half-cell"},c.default(e).add(2,"m").format("mm")),d.default.createElement("div",{onClick:()=>s(1,"m"),className:"calendar-time-half-cell"},m())))},y={ru:{t:"сегодня",y:"вчера",wa:"неделю назад",ma:"месяц назад",ya:"год назад"},"en-gb":{t:"today",y:"yesterday",wa:"week ago",ma:"month ago",ya:"year ago"},uk:{t:"сьогодні",y:"вчора",wa:"тиждень тому",ma:"місяць тому",ya:"рік тому"},de:{t:"heute",y:"gestern",wa:"vor 1 woche",ma:"vor 1 Monat",ya:"мor 1 Jahr"},"zh-cn":{t:"今天",y:"昨天",wa:"一周前",ma:"一个月前",ya:"一年前"},fr:{t:"jour",y:"hier",wa:"il y a une semaine",ma:"il y a un mois",ya:"il y a un an"}},v=[{id:1,title:"t",func:e=>{e(c.default())}},{id:2,title:"y",func:e=>{e(c.default().subtract(1,"d"))}},{id:3,title:"wa",func:e=>{e(c.default().subtract(1,"w"))}},{id:4,title:"ma",func:e=>{e(c.default().subtract(1,"M"))}},{id:0,title:"ya",func:e=>{e(c.default().subtract(1,"y"))}}],E=({locale:e,changeAction:a})=>{let t=y[e||"en-gb"];return d.default.createElement("div",{className:"calendar-presets"},v.map((({id:e,title:l,func:r})=>d.default.createElement("div",{key:e,onClick:()=>r(a),className:"calendar-presets-preset"},t[l]))))};exports.Calendar=({presets:e=!1,date:t=new Date,time:l=!1,locale:c="en-gb",onChangeDate:i,width:s=null,height:o=null,dark:m=!1})=>{const[y,v]=a.useState(!c),[b,w]=a.useState(!1),k=()=>{w(!b)},x=e=>{i?i(e.toDate()):console.warn('Must be a handle function "onChangeDate"')};return a.useEffect((()=>{c&&"string"==typeof c&&Promise.resolve().then((function(){return r(require(`moment/locale/${c}`))})).then((()=>{v(!0)}))}),[]),d.default.createElement("div",{style:{width:s,height:o},className:n.default("calendar",{with_time:l,with_presets:e,years_picker:b,dark_calendar:m})},b?d.default.createElement(f,{date:t,changeAction:x,toggleYearsPicker:k}):d.default.createElement(d.default.Fragment,null,d.default.createElement(u,{date:t,toggleYearsPicker:k,changeAction:x}),y&&d.default.createElement(h,{date:t,changeAction:x}),d.default.createElement(g,{date:t,changeAction:x}),l&&d.default.createElement(p,{date:t,changeAction:x}),e&&d.default.createElement(E,{locale:c,date:t,changeAction:x})))};
1
+ import ya from"clsx";import{useEffect as ha,useState as $}from"react";import q from"#style-inject";q(`:root{--cal-accent: #ffffff;--cal-backdrop: #ffffff;--cal-highlight: #1a1a1c;--cal-tone: #f4f4f4;--cal-color-text: #1a1a1c;--cal-border-color: #f0f0f0}[data-theme=dark]{--cal-accent: #1a1a1c;--cal-backdrop: #1a1a1c;--cal-highlight: #ffffff;--cal-tone: #2d2d2d;--cal-color-text: #f0f0f0;--cal-border-color: #333333}[data-theme=midnight]{--cal-accent: #141721;--cal-backdrop: #1e2333;--cal-highlight: #3559e0;--cal-tone: #252a3d;--cal-color-text: #ffffff;--cal-border-color: #2d3246}[data-theme=sandstone]{--cal-accent: #1c1a17;--cal-backdrop: #24211c;--cal-highlight: #e3ae5c;--cal-tone: #332f28;--cal-color-text: #fdfbf7;--cal-border-color: #3d372e}[data-theme=mint_blue]{--cal-accent: #ffffff;--cal-backdrop: #f8f9fc;--cal-highlight: #60d276;--cal-tone: #eaedf4;--cal-color-text: #171827;--cal-border-color: #eef0f5}.calendar{min-width:450px;min-height:10vh;max-height:100vh;background:var(--cal-accent);color:var(--cal-color-text);display:grid;grid-template-columns:2fr 5fr;grid-template-rows:60px auto;grid-template-areas:"YY YY" "MM DD";user-select:none;box-sizing:border-box;font-family:system-ui,-apple-system,sans-serif;border-radius:16px;border:1px solid var(--cal-border-color);box-shadow:0 4px 20px #00000008;overflow:hidden;&.with_presets:not(.with_time){grid-template-rows:60px auto 50px;grid-template-areas:"YY YY" "MM DD" "PRESETS PRESETS"}&.with_time:not(.with_presets){grid-template-columns:2fr 5fr 2fr;grid-template-areas:"YY YY YY" "MM DD TIME"}&.with_time.with_presets{grid-template-columns:2fr 5fr 2fr;grid-template-rows:60px auto 50px;grid-template-areas:"YY YY YY" "MM DD TIME" "PRESETS PRESETS PRESETS"}&.no_months{grid-template-columns:1fr;grid-template-areas:"YY" "DD";&.with_time{grid-template-columns:5fr 2fr;grid-template-areas:"YY YY" "DD TIME"}&.with_presets{grid-template-areas:"YY" "DD" "PRESETS";&.with_time{grid-template-areas:"YY YY" "DD TIME" "PRESETS PRESETS"}}}&.years_picker{grid-template-columns:1fr!important;grid-template-rows:1fr!important}:is(.calendar-button,.calendar-yearPicker-arrow,.calendar-yearPicker-year,.calendar-presets-preset,.calendar-time-half-cell,.calendar-years-arrow,.calendar-months-month,.calendar-days-day){border:none;color:var(--cal-color-text);display:flex;align-items:center;justify-content:center;border-radius:8px;transition:all .2s ease;&:not([disabled]):is(:hover,:active){background:var(--cal-tone);cursor:pointer}&[disabled]{cursor:not-allowed;filter:opacity(.4)}& svg{width:23px;height:23px;fill:currentColor;stroke-width:1.4;flex-shrink:0;display:block;margin:auto}}}.calendar-years{grid-area:YY;display:flex;background:var(--cal-accent);border-bottom:1px solid var(--cal-border-color);justify-content:space-between;.calendar-years-current{flex:4;font:700 21px system-ui;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:background .2s ease,color .2s ease;&:hover{cursor:pointer;background:var(--cal-tone)}}.calendar-years-arrow{flex-grow:1}}.calendar-months{grid-area:MM;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(6,1fr);padding:15px 10px;gap:4px;border-right:1px solid var(--cal-border-color);background:var(--cal-backdrop);.calendar-months-month{font-size:13px;padding:10px 5px;justify-content:center}}.calendar-days{grid-area:DD;background:var(--cal-backdrop);display:grid;grid-template-columns:repeat(7,1fr);padding:15px;gap:5px}.calendar-time{grid-area:TIME;display:flex;padding-left:1px;border-left:1px solid var(--cal-border-color);.calendar-time-half{flex:1;width:50%;display:grid;grid-template-rows:repeat(7,1fr);background:var(--cal-backdrop);.calendar-time-half-cell:is(:first-child,:last-child){background:var(--cal-accent)}.calendar-time-half-cell:nth-child(4){position:relative;background:var(--cal-highlight);color:var(--cal-accent)}}}.calendar-days-header{display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--cal-color-text);opacity:.5;text-transform:uppercase;user-select:none}.calendar-presets{grid-area:PRESETS;display:flex;border-top:1px solid var(--cal-border-color);padding:5px 7px;gap:5px;.calendar-presets-preset{flex:1;text-align:center;font-size:13px;padding:3px;background:var(--cal-tone)}}.calendar-yearPicker{background:var(--cal-backdrop);display:grid;grid-template-columns:50px repeat(5,1fr) 50px;grid-template-rows:repeat(5,1fr);animation:fadeIn .2s linear forwards;.calendar-yearPicker-arrow{background:var(--cal-accent);&:first-child{grid-area:1/1/6/2}&:last-child{grid-area:1/7/6/7}}.calendar-yearPicker-year{background:var(--cal-backdrop);opacity:0;&.year_anim{animation:fadeIn .3s forwards}}}.calendar_active{background:var(--cal-highlight)!important;color:var(--cal-accent)!important}.dividerhour:after{content:":";position:absolute;top:50%;transform:translateY(-55%);right:0;animation:fadeIn 1.1s infinite}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}
2
+ `);import b from"dayjs";import ua from"dayjs/plugin/localeData";import"dayjs/locale/en";import"dayjs/locale/es";import"dayjs/locale/ru";import"dayjs/locale/de";import"dayjs/locale/sr";import"dayjs/locale/fr";import N from"dayjs";import{jsx as h}from"react/jsx-runtime";var D=()=>h("svg",{height:"256",viewBox:"0 0 64 64",width:"256",xmlns:"http://www.w3.org/2000/svg",children:h("path",{d:"m54 30h-39.899l15.278-14.552c.8-.762.831-2.028.069-2.828-.761-.799-2.027-.831-2.828-.069l-17.448 16.62c-.755.756-1.172 1.76-1.172 2.829 0 1.068.417 2.073 1.207 2.862l17.414 16.586c.387.369.883.552 1.379.552.528 0 1.056-.208 1.449-.621.762-.8.731-2.065-.069-2.827l-15.342-14.552h39.962c1.104 0 2-.896 2-2s-.896-2-2-2z"})}),Y=()=>h("svg",{height:"256",viewBox:"0 0 64 64",width:"256",xmlns:"http://www.w3.org/2000/svg",children:h("path",{d:"m37.379 12.552c-.799-.761-2.066-.731-2.827.069-.762.8-.73 2.066.069 2.828l15.342 14.551h-39.963c-1.104 0-2 .896-2 2s-.896 2 2 2h39.899l-15.278 14.552c-.8.762-.831 2.028-.069 2.828.393.412.92.62 1.448.62.496 0 .992-.183 1.379-.552l17.449-16.62c.756-.755 1.172-1.759 1.172-2.828s-.416-2.073-1.207-2.862z"})}),C=()=>h("svg",{viewBox:"0 0 492.002 492.002",xmlns:"http://www.w3.org/2000/svg",children:h("path",{d:"M484.136,328.473L264.988,109.329c-5.064-5.064-11.816-7.844-19.172-7.844c-7.208,0-13.964,2.78-19.02,7.844 L7.852,328.265C2.788,333.333,0,340.089,0,347.297c0,7.208,2.784,13.968,7.852,19.032l16.124,16.124 c5.064,5.064,11.824,7.86,19.032,7.86s13.964-2.796,19.032-7.86l183.852-183.852l184.056,184.064 c5.064,5.06,11.82,7.852,19.032,7.852c7.208,0,13.96-2.792,19.028-7.852l16.128-16.132 C494.624,356.041,494.624,338.965,484.136,328.473z"})}),M=()=>h("svg",{viewBox:"0 0 256 256",xmlns:"http://www.w3.org/2000/svg",children:h("polygon",{points:"225.813,48.907 128,146.72 30.187,48.907 0,79.093 128,207.093 256,79.093"})});import{jsx as w,jsxs as V}from"react/jsx-runtime";var Q=({date:a,toggleYearPicker:s,changeAction:d})=>{let o=()=>{d(N(a).subtract(1,"year"))},t=()=>{d(N(a).add(1,"year"))};return V("div",{className:"calendar-years",children:[w("div",{tabIndex:0,role:"button",className:"calendar-years-arrow",onClick:o,onKeyDown:r=>{(r.key==="Enter"||r.key===" ")&&o()},children:w(D,{})}),w("div",{onClick:s,className:"calendar-years-current",role:"button",tabIndex:0,children:N(a).format("YYYY")}),w("div",{onClick:t,role:"button",tabIndex:0,className:"calendar-years-arrow",onKeyDown:r=>{(r.key==="Enter"||r.key===" ")&&t()},children:w(Y,{})})]})},R=Q;import{useEffect as X,useState as K}from"react";import Z from"clsx";import E from"dayjs";import{jsx as x,jsxs as ea}from"react/jsx-runtime";var aa=({toggleYearPicker:a,date:s,changeAction:d})=>{let[o,t]=K(E(s)),[r,e]=K(!0),n=o.year(),p=Array.from({length:25},(c,P)=>n-12+P),l=c=>{c?.preventDefault(),d(E(o)),a()},f=c=>{d(E(o).year(c)),a()},y=c=>`${(Math.abs(n-c)*.1/2).toFixed(2)}s`;return X(()=>{e(!1);let c=setTimeout(()=>e(!0),50);return()=>clearTimeout(c)},[o]),ea("div",{className:"calendar-yearPicker",onContextMenu:l,children:[x("button",{disabled:n<1925,onClick:()=>t(o.subtract(25,"y")),className:"calendar-yearPicker-arrow",children:x(D,{})}),p.map(c=>x("button",{disabled:c>2100||c<1900,onClick:()=>f(c),className:Z("calendar-yearPicker-year",{year_anim:r,calendar_active:n===c}),style:{animationDelay:y(c),animationIterationCount:1},children:c},c)),x("button",{className:"calendar-yearPicker-arrow",disabled:n>2075,onClick:()=>t(o.add(25,"y")),children:x(Y,{})})]})},T=aa;import ta from"clsx";import{jsx as z}from"react/jsx-runtime";var ra=({date:a,monthsNames:s,changeAction:d})=>{let o=a.month();return z("div",{className:"calendar-months",children:s.map((t,r)=>z("div",{className:ta("calendar-months-month",{calendar_active:r===o}),onClick:()=>d(a.month(r)),children:t},r))})},j=ra;import oa from"clsx";import{useMemo as na}from"react";import{jsx as W,jsxs as ca}from"react/jsx-runtime";var la=({date:a,changeAction:s,weekdays:d})=>{let o=a.date(),t=na(()=>{let e=a.daysInMonth();return Array.from({length:e},(n,p)=>p+1)},[a]),r=e=>{e!==o&&s(a.date(e))};return ca("div",{className:"calendar-days",children:[d.map(e=>W("div",{className:"calendar-days-header",children:e},e)),t.map(e=>W("div",{onClick:()=>r(e),onKeyDown:n=>{(n.key==="Enter"||n.key===" ")&&r(e)},tabIndex:0,role:"button",className:oa("calendar-days-day",{calendar_active:e===o}),children:e},e))]})},_=la;import{useEffect as ia,useState as B}from"react";import m from"dayjs";import{jsx as i,jsxs as S}from"react/jsx-runtime";var sa=({date:a,changeAction:s})=>{let[d,o]=B(m(a).format("HH")),[t,r]=B(m(a).format("mm")),e=(l,f)=>{s(m(a).add(l,f))},n=(l,f)=>{s(m(a).subtract(l,f))},p=(l,f)=>{let y="deltaY"in l?l.deltaY:0;y<0?s(m(a).subtract(1,f)):y>0&&s(m(a).add(1,f))};return ia(()=>{let l=m(a);o(l.format("HH")),r(l.format("mm"))},[a]),S("div",{className:"calendar-time",children:[S("div",{className:"calendar-time-half hours",onWheel:l=>p(l,"h"),children:[i("div",{className:"calendar-time-half-cell",onClick:()=>n(1,"h"),children:i(C,{})}),i("div",{onClick:()=>n(2,"h"),className:"calendar-time-half-cell",children:m(a).subtract(2,"h").format("HH")}),i("div",{onClick:()=>n(1,"h"),className:"calendar-time-half-cell",children:m(a).subtract(1,"h").format("HH")}),i("div",{className:"calendar-time-half-cell dividerhour",children:d}),i("div",{onClick:()=>e(1,"h"),className:"calendar-time-half-cell",children:m(a).add(1,"h").format("HH")}),i("div",{onClick:()=>e(2,"h"),className:"calendar-time-half-cell",children:m(a).add(2,"h").format("HH")}),i("div",{className:"calendar-time-half-cell",onClick:()=>e(1,"h"),children:i(M,{})})]}),S("div",{className:"calendar-time-half",onWheel:l=>p(l,"m"),children:[i("div",{className:"calendar-time-half-cell",onClick:()=>n(1,"m"),children:i(C,{})}),i("div",{onClick:()=>n(2,"m"),className:"calendar-time-half-cell",children:m(a).subtract(2,"m").format("mm")}),i("div",{onClick:()=>n(1,"m"),className:"calendar-time-half-cell",children:m(a).subtract(1,"m").format("mm")}),i("div",{className:"calendar-time-half-cell",children:t}),i("div",{onClick:()=>e(1,"m"),className:"calendar-time-half-cell",children:m(a).add(1,"m").format("mm")}),i("div",{onClick:()=>e(2,"m"),className:"calendar-time-half-cell",children:m(a).add(2,"m").format("mm")}),i("div",{onClick:()=>e(1,"m"),className:"calendar-time-half-cell",children:i(M,{})})]})]})},I=sa;import ma from"dayjs";var da={ru:{t:"\u0441\u0435\u0433\u043E\u0434\u043D\u044F",y:"\u0432\u0447\u0435\u0440\u0430",wa:"\u043D\u0435\u0434\u0435\u043B\u044E \u043D\u0430\u0437\u0430\u0434",ma:"\u043C\u0435\u0441\u044F\u0446 \u043D\u0430\u0437\u0430\u0434",ya:"\u0433\u043E\u0434 \u043D\u0430\u0437\u0430\u0434"},en:{t:"today",y:"yesterday",wa:"week ago",ma:"month ago",ya:"year ago"},ua:{t:"\u0441\u044C\u043E\u0433\u043E\u0434\u043D\u0456",y:"\u0432\u0447\u043E\u0440\u0430",wa:"\u0442\u0438\u0436\u0434\u0435\u043D\u044C \u0442\u043E\u043C\u0443",ma:"\u043C\u0456\u0441\u044F\u0446\u044C \u0442\u043E\u043C\u0443",ya:"\u0440\u0456\u043A \u0442\u043E\u043C\u0443"},de:{t:"heute",y:"gestern",wa:"vor 1 Woche",ma:"vor 1 Monat",ya:"vor 1 Jahr"},"zh-cn":{t:"\u4ECA\u5929",y:"\u6628\u5929",wa:"\u4E00\u5468\u524D",ma:"\u4E00\u4E2A\u6708\u524D",ya:"\u4E00\u5E74\u524D"},fr:{t:"aujourd'hui",y:"hier",wa:"il y a une semaine",ma:"il y a un mois",ya:"il y a un an"},es:{t:"hoy",y:"ayer",wa:"hace una semana",ma:"hace un mes",ya:"hace un a\xF1o"},sr:{t:"danas",y:"ju\u010De",wa:"pre nedelju dana",ma:"pre mesec dana",ya:"pre godinu dana"}},L=da;import{jsx as O}from"react/jsx-runtime";var fa=[{key:"t",amount:0,unit:"day"},{key:"y",amount:1,unit:"day"},{key:"wa",amount:1,unit:"week"},{key:"ma",amount:1,unit:"month"},{key:"ya",amount:1,unit:"year"}],pa=({locale:a,changeAction:s})=>{let d=L[a]||L.en,o=(t,r)=>{s(ma().subtract(t,r).startOf("day"))};return O("div",{className:"calendar-presets",children:fa.map(({key:t,amount:r,unit:e})=>O("div",{onClick:()=>o(r,e),onKeyDown:n=>{(n.key==="Enter"||n.key===" ")&&o(r,e)},tabIndex:0,role:"button",className:"calendar-presets-preset",children:d[t]},t))})},H=pa;import{Fragment as ga,jsx as u,jsxs as va}from"react/jsx-runtime";b.extend(ua);var Re=({presets:a=!1,months:s=!0,date:d=new Date,time:o=!1,locale:t="en",onChangeDate:r,width:e=null,height:n=null,theme:p="light"})=>{let[l,f]=$(!1),[y,c]=$(!1),P=l?t:"en",k=b(d).locale(P),A=()=>c(!y),g=v=>{r?r(v.toDate()):console.warn('Must provide an "onChangeDate" function')},U=l?Array.from({length:12},(v,F)=>b().locale(t).month(F).format("MMMM")):[];ha(()=>{let v=!0;return(async()=>{try{t==="en"?b.locale("en"):(await import(`dayjs/locale/${t}.js`),v&&b.locale(t))}catch(J){console.warn(`Could not load locale: ${t}`,J)}finally{v&&f(!0)}})(),()=>{v=!1}},[t]);let G=l?b().locale(t).localeData().weekdaysMin():[];return u("div",{style:{width:e??void 0,height:n??void 0},className:ya("calendar",{with_time:o,with_presets:a,years_picker:y,no_months:!s}),"data-theme":p!=="light"?p:void 0,children:y?u(T,{date:k,changeAction:g,toggleYearPicker:A}):va(ga,{children:[u(R,{date:k,toggleYearPicker:A,changeAction:g}),s&&u(j,{monthsNames:U,date:k,changeAction:g}),l&&u(_,{date:k,changeAction:g,weekdays:G}),o&&u(I,{date:k,changeAction:g}),a&&u(H,{locale:t,changeAction:g})]})})};export{Re as Calendar};
package/package.json CHANGED
@@ -1,47 +1,49 @@
1
1
  {
2
2
  "name": "react-calendar-datetime",
3
- "version": "1.3.1",
3
+ "version": "2.0.1",
4
4
  "description": "React date and time calendar component (with presets and locale)",
5
- "main": "dist/index.js",
6
- "module": "dist/index.es.js",
5
+ "type": "module",
6
+ "main": "./dist/index.cjs",
7
+ "module": "./dist/index.js",
8
+ "types": "./dist/index.d.ts",
9
+ "exports": {
10
+ ".": {
11
+ "import": "./dist/index.js",
12
+ "require": "./dist/index.cjs"
13
+ },
14
+ "./style.css": "./dist/index.css"
15
+ },
7
16
  "repository": {
8
17
  "type": "git",
9
18
  "url": "git+https://github.com/kirilinsky/react-calendar-datetime"
10
19
  },
11
20
  "homepage": "https://github.com/kirilinsky/react-calendar-datetime/",
21
+ "bugs": {
22
+ "url": "https://github.com/kirilinsky/react-calendar-datetime/issues"
23
+ },
12
24
  "files": [
13
25
  "dist"
14
26
  ],
15
27
  "scripts": {
16
- "storybook": "start-storybook -p 6006",
17
- "build-storybook": "build-storybook",
18
- "build-lib": "rollup -c"
28
+ "start": "ladle serve",
29
+ "dev": "tsup --watch",
30
+ "build": "tsup",
31
+ "build:demo": "ladle build",
32
+ "lint": "tsc --noEmit",
33
+ "clean": "rm -rf dist"
19
34
  },
20
35
  "peerDependencies": {
21
- "react": "^17.0.2",
22
- "react-dom": "^17.0.2", "classnames": "^2.3.1",
23
- "moment": "^2.29.1"
36
+ "react": "^19.2.4",
37
+ "react-dom": "^19.2.4"
24
38
  },
25
39
  "devDependencies": {
26
- "@babel/core": "^7.12.10",
27
- "@babel/preset-react": "^7.14.5",
28
- "@rollup/plugin-node-resolve": "^11.1.1",
29
- "@storybook/addon-actions": "^6.1.16",
30
- "@storybook/addon-essentials": "^6.1.16",
31
- "@storybook/addon-links": "^6.1.16",
32
- "@storybook/react": "^6.1.16",
33
- "babel-loader": "^8.2.2",
34
- "classnames": "^2.3.1",
35
- "moment": "^2.29.1",
36
- "react": "^17.0.2",
37
- "react-dom": "^17.0.2",
38
- "rollup": "^2.38.4",
39
- "rollup-plugin-babel": "^4.4.0",
40
- "rollup-plugin-peer-deps-external": "^2.2.4",
41
- "rollup-plugin-postcss": "^4.0.0",
42
- "rollup-plugin-react-svg": "^3.0.3",
43
- "rollup-plugin-svg": "^2.0.0",
44
- "rollup-plugin-terser": "^7.0.2"
40
+ "@ladle/react": "^5.1.1",
41
+ "@types/react": "^19.2.14",
42
+ "@types/react-dom": "^19.2.3",
43
+ "react": "^19",
44
+ "react-dom": "^19",
45
+ "tsup": "^8.5.1",
46
+ "typescript": "^5.9.3"
45
47
  },
46
48
  "keywords": [
47
49
  "react datepicker",
@@ -51,12 +53,12 @@
51
53
  "calendar locale react datetimepicker"
52
54
  ],
53
55
  "engines": {
54
- "node": ">=12"
56
+ "node": ">=18.0.0"
55
57
  },
56
- "author": "kirilinsky",
58
+ "author": "Kirilinsky (https://github.com/kirilinsky)",
57
59
  "license": "MIT",
58
60
  "dependencies": {
59
- "classnames": "^2.3.1",
60
- "moment": "^2.29.1"
61
+ "clsx": "^2.1.1",
62
+ "dayjs": "^1.11.20"
61
63
  }
62
- }
64
+ }
package/dist/index.es.js DELETED
@@ -1 +0,0 @@
1
- import e from"classnames";import a,{useState as t,useEffect as r}from"react";import l from"moment";function n(){return a.createElement("svg",{id:"Layer",enableBackground:"new 0 0 64 64",height:"256",viewBox:"0 0 64 64",width:"256",xmlns:"http://www.w3.org/2000/svg"},a.createElement("path",{d:"m54 30h-39.899l15.278-14.552c.8-.762.831-2.028.069-2.828-.761-.799-2.027-.831-2.828-.069l-17.448 16.62c-.755.756-1.172 1.76-1.172 2.829 0 1.068.417 2.073 1.207 2.862l17.414 16.586c.387.369.883.552 1.379.552.528 0 1.056-.208 1.449-.621.762-.8.731-2.065-.069-2.827l-15.342-14.552h39.962c1.104 0 2-.896 2-2s-.896-2-2-2z"}))}function c(){return a.createElement("svg",{id:"Layer",enableBackground:"new 0 0 64 64",height:"256",viewBox:"0 0 64 64",width:"256",xmlns:"http://www.w3.org/2000/svg"},a.createElement("path",{d:"m37.379 12.552c-.799-.761-2.066-.731-2.827.069-.762.8-.73 2.066.069 2.828l15.342 14.551h-39.963c-1.104 0-2 .896-2 2s.896 2 2 2h39.899l-15.278 14.552c-.8.762-.831 2.028-.069 2.828.393.412.92.62 1.448.62.496 0 .992-.183 1.379-.552l17.449-16.62c.756-.755 1.172-1.759 1.172-2.828s-.416-2.073-1.207-2.862z"}))}function d(){return a.createElement("svg",{version:"1.1",id:"Layer_1",xmlns:"http://www.w3.org/2000/svg",x:"0px",y:"0px",viewBox:"0 0 492.002 492.002",xml:"preserve"},a.createElement("g",null,a.createElement("g",null,a.createElement("path",{d:"M484.136,328.473L264.988,109.329c-5.064-5.064-11.816-7.844-19.172-7.844c-7.208,0-13.964,2.78-19.02,7.844\r L7.852,328.265C2.788,333.333,0,340.089,0,347.297c0,7.208,2.784,13.968,7.852,19.032l16.124,16.124\r c5.064,5.064,11.824,7.86,19.032,7.86s13.964-2.796,19.032-7.86l183.852-183.852l184.056,184.064\r c5.064,5.06,11.82,7.852,19.032,7.852c7.208,0,13.96-2.792,19.028-7.852l16.128-16.132\r C494.624,356.041,494.624,338.965,484.136,328.473z"}))),a.createElement("g",null),a.createElement("g",null),a.createElement("g",null),a.createElement("g",null),a.createElement("g",null),a.createElement("g",null),a.createElement("g",null),a.createElement("g",null),a.createElement("g",null),a.createElement("g",null),a.createElement("g",null),a.createElement("g",null),a.createElement("g",null),a.createElement("g",null),a.createElement("g",null))}function i(){return a.createElement("svg",{version:"1.1",id:"Capa_1",xmlns:"http://www.w3.org/2000/svg",x:"0px",y:"0px",viewBox:"0 0 256 256",xml:"preserve"},a.createElement("g",null,a.createElement("g",null,a.createElement("polygon",{points:"225.813,48.907 128,146.72 30.187,48.907 0,79.093 128,207.093 256,79.093 \t\t"}))),a.createElement("g",null),a.createElement("g",null),a.createElement("g",null),a.createElement("g",null),a.createElement("g",null),a.createElement("g",null),a.createElement("g",null),a.createElement("g",null),a.createElement("g",null),a.createElement("g",null),a.createElement("g",null),a.createElement("g",null),a.createElement("g",null),a.createElement("g",null),a.createElement("g",null))}!function(e,a){void 0===a&&(a={});var t=a.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===t&&r.firstChild?r.insertBefore(l,r.firstChild):r.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}('.calendar{--accent:#d8d6d6;--backdrop:#eeebe7;--highlight:#b1aa48;--tone:#9c9999;--color-text:#333;min-width:60vh;min-height:60vh;max-height:100vh;background:var(--accent);color:var(--color-text);display:grid;grid-template-columns:2fr 5fr;grid-template-rows:50px auto;grid-template-areas:"YY YY" "MM DD";user-select:none;font-family:sans-serif}.calendar.dark_calendar{--accent:#645d55;--backdrop:#6c6e6a;--highlight:#2c281e;--tone:#21282e;--color-text:#e9e6e6}.calendar.with_presets:not(.with_time){min-height:60vh;grid-template-columns:2fr 5fr;grid-template-rows:50px auto 50px;grid-template-areas:"YY YY" "MM DD" "PRESETS PRESETS"}.calendar.with_time:not(.with_presets){min-width:75vh;grid-template-columns:2fr 5fr 2fr;grid-template-rows:50px auto;grid-template-areas:"YY YY YY" "MM DD TIME";column-gap:2px}.calendar.with_presets,.calendar.with_time{grid-template-columns:2fr 5fr 2fr;grid-template-rows:50px auto 50px;grid-template-areas:"YY YY YY" "MM DD TIME" "PRESETS PRESETS PRESETS"}.calendar.years_picker{grid-template-columns:1fr!important;grid-template-rows:1fr!important}.calendar-yearspicker{background:var(--backdrop);display:grid;grid-template-columns:50px repeat(5,1fr) 50px;grid-template-rows:repeat(5,1fr);animation:fadeIn 1 .2s linear 0 forwards}.calendar-yearspicker-arrow{background:var(--accent)}.calendar-yearspicker-arrow:first-child{grid-area:1/1/6/2}.calendar-yearspicker-arrow:last-child{grid-area:1/7/6/7}.calendar-yearspicker-year{background:var(--backdrop);opacity:0}.calendar-yearspicker-year.year_anim{animation-name:fadeIn;animation-duration:.3s;animation-iteration-count:1;animation-fill-mode:forwards}.calendar-presets{grid-area:PRESETS;display:flex;width:100%}.calendar-presets-preset{text-align:center;font-size:13px;padding:3px;width:20%;background:var(--tone);border-right:1px solid var(--backdrop)}.calendar-presets-preset:last-child{border:none}.calendar-time{grid-area:TIME;display:flex;padding-left:1px}.calendar-time-half{width:50%;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(7,1fr);background:var(--backdrop)}.calendar-time-half-cell:first-child,.calendar-time-half-cell:last-child{background:var(--accent)}.calendar-time-half-cell:nth-child(4){position:relative}.calendar-time-half-cell svg{fill:var(--color-text);max-width:20%;min-height:10px;min-width:10px}.calendar-years{grid-area:YY;display:flex;background:var(--tone);justify-content:space-between}.calendar-years-current{width:60%;height:100%;text-align:center;font:700 21px sans-serif}.calendar-years-current:hover{cursor:pointer}.calendar-years-arrow{width:50px;height:100%}.calendar-months{grid-area:MM;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(6,1fr)}.calendar-months-month{height:100%;padding:1px}.calendar-days{grid-area:DD;background:var(--backdrop);display:grid;grid-template-columns:repeat(7,1fr)}.calendar-time-half-cell:nth-child(4),.calendar_active{background:var(--highlight)}.calendar-button,.calendar-days-day,.calendar-months-month,.calendar-presets-preset,.calendar-time-half-cell,.calendar-years-arrow,.calendar-yearspicker-arrow,.calendar-yearspicker-year{border:none;color:var(--color-text)}.calendar-button:not([disabled]):active,.calendar-button:not([disabled]):hover,.calendar-days-day:not([disabled]):active,.calendar-days-day:not([disabled]):hover,.calendar-months-month:not([disabled]):active,.calendar-months-month:not([disabled]):hover,.calendar-presets-preset:not([disabled]):active,.calendar-presets-preset:not([disabled]):hover,.calendar-time-half-cell:not([disabled]):active,.calendar-time-half-cell:not([disabled]):hover,.calendar-years-arrow:not([disabled]):active,.calendar-years-arrow:not([disabled]):hover,.calendar-yearspicker-arrow:not([disabled]):active,.calendar-yearspicker-arrow:not([disabled]):hover,.calendar-yearspicker-year:not([disabled]):active,.calendar-yearspicker-year:not([disabled]):hover{background:var(--highlight);cursor:pointer}.calendar-button[disabled],.calendar-days-day[disabled],.calendar-months-month[disabled],.calendar-presets-preset[disabled],.calendar-time-half-cell[disabled],.calendar-years-arrow[disabled],.calendar-yearspicker-arrow[disabled],.calendar-yearspicker-year[disabled]{cursor:not-allowed;filter:opacity(.4)}.calendar-button svg,.calendar-days-day svg,.calendar-months-month svg,.calendar-presets-preset svg,.calendar-time-half-cell svg,.calendar-years-arrow svg,.calendar-yearspicker-arrow svg,.calendar-yearspicker-year svg{fill:var(--color-text);max-height:50%;min-height:10px;min-width:10px}.calendar-days-day,.calendar-fcc,.calendar-months-month,.calendar-presets-preset,.calendar-time-half-cell,.calendar-years-arrow,.calendar-years-current,.calendar-yearspicker-arrow,.calendar-yearspicker-year{display:flex;align-items:center;justify-content:center}.dividerhour:after{content:":";position:absolute;top:50%;transform:translateY(-55%);right:0;opacity:1;animation:fadeIn 1.1s infinite}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}');const o=({date:e,toggleYearsPicker:t,changeAction:r})=>a.createElement("div",{className:"calendar-years"},a.createElement("div",{tabIndex:"0",role:"button",className:"calendar-years-arrow",onClick:()=>{r(l(e).subtract(1,"Y"))}},n()),a.createElement("div",{onClick:t,className:"calendar-years-current"},l(e).format("YYYY")),a.createElement("div",{onClick:()=>{r(l(e).add(1,"Y"))},role:"button",tabIndex:"0",className:"calendar-years-arrow"},c())),s=({toggleYearsPicker:d,date:i,changeAction:o})=>{const[s,m]=t([]),[h,g]=t(0),[p,u]=t(!0);return r((()=>{g(l(i))}),[i]),r((()=>{m(new Array(25).fill(+l(h).format("YYYY")-12).map(((e,a)=>e+a))),u(!1),setTimeout((()=>{u(!0)}),50)}),[h]),a.createElement("div",{className:"calendar-yearspicker",onContextMenu:(e=null)=>{e&&e.preventDefault(),o(l(h)),d()}},a.createElement("button",{disabled:+l(h).format("YYYY")<1925,onClick:()=>g(l(h).subtract(25,"y")),className:"calendar-yearspicker-arrow"},n()),s&&s.map((t=>{return a.createElement("button",{key:t,disabled:t>2100||t<1900,onClick:()=>{return e=t,o(l(h).year(e)),void d();var e},className:e("calendar-yearspicker-year",{year_anim:p,calendar_active:+l(h).format("YYYY")===t}),style:{animationDelay:(r=t,`\n ${(.1*Math.abs(+l(h).format("YYYY")-r)/2).toFixed(2)}s`),animationIterationCount:1}},t);var r})),a.createElement("button",{className:"calendar-yearspicker-arrow",disabled:+l(h).format("YYYY")>2075,onClick:()=>g(l(h).add(25,"y"))},c()))},m=({date:t,changeAction:r})=>{let n=Array.from({length:12},((e,a)=>a));return a.createElement("div",{className:"calendar-months"},n.map((n=>a.createElement("div",{key:n,tabIndex:"0",role:"button",className:e("calendar-months-month",{calendar_active:n+1===+l(t).format("M")}),onClick:()=>{var e;(e=n)+1!==+l(t).format("M")&&r(l(t).month(e))}},l().month(n).format("MMMM")))))},h=({date:n,changeAction:c})=>{const[d,i]=t([]);return r((()=>{let e=l(n).daysInMonth();i(Array.from({length:e},((e,a)=>a+1)))}),[n]),a.createElement("div",{className:"calendar-days"},d.map((t=>a.createElement("div",{key:t,onClick:()=>{var e;(e=t)!==l(n).date()&&c(l(n).set("date",e))},tabIndex:"0",role:"button",className:e("calendar-days-day",{calendar_active:l(n).date()===t})},t))))},g=({date:e,changeAction:n})=>{const[c,o]=t(+l(e).format("HH")),[s,m]=t(+l(e).format("mm")),h=(a,t)=>{n(l(e).add(a,t))},g=(a,t)=>{n(l(e).subtract(a,t))},p=({deltaY:a},t)=>{n(a<0?l(e).subtract(1,t):l(e).add(1,t))};return r((()=>{o(l(e).format("HH")),m(l(e).format("mm"))}),[e]),r((()=>(document.addEventListener("scroll",p),()=>{document.removeEventListener("scroll",p)})),[]),a.createElement("div",{className:"calendar-time"},a.createElement("div",{className:"calendar-time-half hours",onWheel:e=>p(e,"H")},a.createElement("div",{className:"calendar-time-half-cell",onClick:()=>g(1,"H")},d()),a.createElement("div",{onClick:()=>g(2,"H"),className:"calendar-time-half-cell"},l(e).subtract(2,"H").format("HH")),a.createElement("div",{onClick:()=>g(1,"H"),className:"calendar-time-half-cell"},l(e).subtract(1,"H").format("HH")),a.createElement("div",{className:"calendar-time-half-cell dividerhour"},c),a.createElement("div",{onClick:()=>h(1,"H"),className:"calendar-time-half-cell"},l(e).add(1,"H").format("HH")),a.createElement("div",{onClick:()=>h(2,"H"),className:"calendar-time-half-cell"},l(e).add(2,"H").format("HH")),a.createElement("div",{className:"calendar-time-half-cell",onClick:()=>h(1,"H")},i())),a.createElement("div",{className:"calendar-time-half",onWheel:e=>p(e,"m")},a.createElement("div",{className:"calendar-time-half-cell",onClick:()=>g(1,"m")},d()),a.createElement("div",{onClick:()=>g(2,"m"),className:"calendar-time-half-cell"},l(e).subtract(2,"m").format("mm")),a.createElement("div",{onClick:()=>g(1,"m"),className:"calendar-time-half-cell"},l(e).subtract(1,"m").format("mm")),a.createElement("div",{className:"calendar-time-half-cell"},s),a.createElement("div",{onClick:()=>h(1,"m"),className:"calendar-time-half-cell"},l(e).add(1,"m").format("mm")),a.createElement("div",{onClick:()=>h(2,"m"),className:"calendar-time-half-cell"},l(e).add(2,"m").format("mm")),a.createElement("div",{onClick:()=>h(1,"m"),className:"calendar-time-half-cell"},i())))},p={ru:{t:"сегодня",y:"вчера",wa:"неделю назад",ma:"месяц назад",ya:"год назад"},"en-gb":{t:"today",y:"yesterday",wa:"week ago",ma:"month ago",ya:"year ago"},uk:{t:"сьогодні",y:"вчора",wa:"тиждень тому",ma:"місяць тому",ya:"рік тому"},de:{t:"heute",y:"gestern",wa:"vor 1 woche",ma:"vor 1 Monat",ya:"мor 1 Jahr"},"zh-cn":{t:"今天",y:"昨天",wa:"一周前",ma:"一个月前",ya:"一年前"},fr:{t:"jour",y:"hier",wa:"il y a une semaine",ma:"il y a un mois",ya:"il y a un an"}},u=[{id:1,title:"t",func:e=>{e(l())}},{id:2,title:"y",func:e=>{e(l().subtract(1,"d"))}},{id:3,title:"wa",func:e=>{e(l().subtract(1,"w"))}},{id:4,title:"ma",func:e=>{e(l().subtract(1,"M"))}},{id:0,title:"ya",func:e=>{e(l().subtract(1,"y"))}}],y=({locale:e,changeAction:t})=>{let r=p[e||"en-gb"];return a.createElement("div",{className:"calendar-presets"},u.map((({id:e,title:l,func:n})=>a.createElement("div",{key:e,onClick:()=>n(t),className:"calendar-presets-preset"},r[l]))))},f=({presets:l=!1,date:n=new Date,time:c=!1,locale:d="en-gb",onChangeDate:i,width:p=null,height:u=null,dark:f=!1})=>{const[v,E]=t(!d),[w,b]=t(!1),k=()=>{b(!w)},x=e=>{i?i(e.toDate()):console.warn('Must be a handle function "onChangeDate"')};return r((()=>{d&&"string"==typeof d&&import(`moment/locale/${d}`).then((()=>{E(!0)}))}),[]),a.createElement("div",{style:{width:p,height:u},className:e("calendar",{with_time:c,with_presets:l,years_picker:w,dark_calendar:f})},w?a.createElement(s,{date:n,changeAction:x,toggleYearsPicker:k}):a.createElement(a.Fragment,null,a.createElement(o,{date:n,toggleYearsPicker:k,changeAction:x}),v&&a.createElement(m,{date:n,changeAction:x}),a.createElement(h,{date:n,changeAction:x}),c&&a.createElement(g,{date:n,changeAction:x}),l&&a.createElement(y,{locale:d,date:n,changeAction:x})))};export{f as Calendar};