@rehookify/datepicker - npm Package Compare versions

Comparing version 0.0.3 to 0.1.0

dist/constants.d.ts

 import { Dayjs } from 'dayjs';
-import { CalendarMonth } from './types';
+import { CalendarConfig, YearsConfig } from './types';
 export declare const DAYS_ARRAY: number[];
 export declare const NOW: Dayjs;
 export declare const DAYS_NAMES: string[];
-export declare const MONTHS_NAMES: CalendarMonth[];
+export declare const MONTHS_NAMES: number[];
+export declare const NUMBER_OF_YEARS_DISPLAYED = 12;
+export declare const DEFAULT_CALENDAR_CONFIG: CalendarConfig;
+export declare const DEFAULT_CONFIG_YEARS: YearsConfig;
 //# sourceMappingURL=constants.d.ts.map

dist/index.cjs.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react");function e(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var a=e(require("dayjs"));const o=Array(42).fill(1),r=a.default(),n=Array(7).fill(1).map(((t,e)=>r.day(t+e).format("ddd"))),d=Array(12).fill(0).map(((t,e)=>({name:r.month(e).format("MMMM"),index:e}))),i=(t,e,o)=>({$day:t,date:t.format("DD.MM.YYYY"),day:t.format("DD"),month:t.format("MM"),year:t.format("YYYY"),currentDisplayedMonth:t.format("MM")===e.format("MM"),isToday:a.default().isSame(t,"day"),isSelected:t.isSame(o,"day")}),s=t=>!(!t||"function"!=typeof t);exports.useDatepicker=()=>{const[e,a]=t.useState(r),[u,m]=t.useState(e),f=Number(u.date(0).format("d")),l=o.map(((t,a)=>i(u.date(t+a-f),u,e))),y=()=>m(u.add(1,"month")),M=()=>m(u.subtract(1,"month")),c=t=>{a(t),m(t)};return{today:i(r,u,e),weekDays:n,months:d,month:u.format("MMMM"),year:u.format("YYYY"),calendar:l,getNextMonthButtonProps:()=>({onClick:y}),getPreviousMonthButtonProps:()=>({onClick:M}),getDayButtonProps:(t,{onClick:e,...a})=>({onClick(){c(t.$day),e&&s(e)&&e(t.$day)},"aria-role":"button",...a}),getMonthButtonProps:({index:t},{onClick:e,...a})=>({onClick(){const a=u.month(t);m(a),e&&s(e)&&e(a)},"aria-role":"button",...a}),reset:t=>c(t||e)}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=t(require("dayjs"));const r=Array(42).fill(1),n=a.default(),o=Array(7).fill(1).map(((e,t)=>n.day(e+t).format("ddd"))),s=Array(12).fill(0),i={mode:"static",selectNow:!1},d={numberOfYearsDisplayed:12,pagination:"decade",disablePagination:!1},m=(e,t,r)=>({$day:e,date:e.format("DD.MM.YYYY"),day:e.format("DD"),month:e.format("MM"),year:e.format("YYYY"),currentDisplayedMonth:e.format("MM")===t.format("MM"),isToday:a.default().isSame(e,"day"),isSelected:e.isSame(r||"","day")}),l=e=>{if(!e)return null;const{day:t,month:a,year:r}=e;if(!t||!a||!r)throw new Error("The date should have day, month and year");const o=n.month(a-1).year(r);if(t>o.daysInMonth())throw new Error(`${o.format("MMMM")} has maximum of ${o.daysInMonth()} days`);return o.date(t)},u=e=>({role:"button",tabIndex:0,...e&&{disabled:e,"aria-disabled":e}}),c=e=>e-e%10-1,y=e=>!(!e||"function"!=typeof e);exports.useDatepicker=t=>{const a=(({calendar:e,years:t,minDate:a,maxDate:r}={})=>({calendar:{...i,...e},years:{...d,...t},minDate:l(a),maxDate:l(r)}))(t),[f,D]=e.useState(a.calendar.selectNow?n:null),[M,Y]=e.useState(f||n),[h,b]=e.useState((()=>c(Number(M.format("YYYY"))))),x=Number(M.date(0).format("d")),p=r.map(((e,t)=>m(M.date(e+t-x),M,f))),k=Array(a.years.numberOfYearsDisplayed).fill(1).map(((e,t)=>((e,t,a)=>{const r=t+e;return{$day:a.year(r),value:r,isSelected:Number(a.format("YYYY"))===r}})(t,h,M))),C=s.map(((e,t)=>((e,t)=>{const a=t.month(e),r=a.format("MMMM");return{$day:a,name:r,isSelected:t.format("MMMM")===r}})(t,M))),B=e=>{Y(e),b(c(Number(e.format("YYYY"))))},$=e=>{D(e),B(e)},v=e=>Y(e),A=()=>b((e=>e+10)),N=()=>b((e=>e-10)),S=B;return{data:{today:m(n,M,f),weekDays:o,month:M.format("MMMM"),months:C,year:M.format("YYYY"),years:k,calendar:p},propGetters:{nextMonthButton:({onClick:e,disabled:t,...r}={})=>{const n=M.add(1,"month"),o=!!t||a.maxDate&&n.isAfter(a.maxDate);return{onClick(t){o||(B(n),e&&y(e)&&e(n,t))},...u(o),...r}},previousMonthButton:({onClick:e,disabled:t,...r}={})=>{const n=M.subtract(1,"month"),o=!!t||a.minDate&&n.isBefore(a.minDate);return{onClick(t){o||(B(n),e&&y(e)&&e(n,t))},...u(o),...r}},dayButton:({$day:e},{onClick:t,disabled:r,...n}={})=>{const o=!!r||!!a.minDate&&e.isBefore(a.minDate)||!!a.maxDate&&e.isAfter(a.maxDate);return{onClick(a){o||($(e),t&&y(t)&&t(e,a))},...u(o),...n}},monthButton:({$day:e},{onClick:t,disabled:r,...n}={})=>{const o=!!r||a.minDate&&e.isBefore(a.minDate)||a.maxDate&&e.isAfter(a.maxDate);return{onClick(a){o||(v(e),t&&y(t)&&t(e,a))},...u(o),...n}},yearButton:({$day:e},{onClick:t,disabled:r,...n}={})=>{const o=!!r||a.minDate&&e.isBefore(a.minDate)||a.maxDate&&e.isAfter(a.maxDate);return{onClick(a){o||(B(e),t&&y(t)&&t(e,a))},...u(o),...n}},nextYearsButton:({onClick:e,disabled:t,...r}={})=>{const n=!!t||a.years.disablePagination||a.maxDate&&k[k.length-1].$day.isAfter(a.maxDate);return{onClick(t){n||(A(),e&&y(e)&&e(t))},...u(n),...r}},previousYearsButton:({onClick:e,disabled:t,...r}={})=>{const n=!!t||a.years.disablePagination||a.minDate&&k[0].$day.isBefore(a.minDate);return{onClick(t){n||(N(),e&&y(e)&&e(t))},...u(n),...r}}},actions:{reset:e=>{const t=e||n;D(e||null),B(t)},setNextYears:A,setPreviousYears:N,setNextMonth:()=>B(M.add(1,"month")),setPreviousMonth:()=>B(M.subtract(1,"month")),setDay:$,setMonth:v,setYear:S}}};
 //# sourceMappingURL=index.cjs.js.map

dist/index.umd.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("dayjs")):"function"==typeof define&&define.amd?define(["exports","react","dayjs"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).RehookifyDatepicker={},t.React,t.dayjs)}(this,(function(t,e,o){"use strict";function a(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var r=a(o);const n=Array(42).fill(1),d=r.default(),i=Array(7).fill(1).map(((t,e)=>d.day(t+e).format("ddd"))),f=Array(12).fill(0).map(((t,e)=>({name:d.month(e).format("MMMM"),index:e}))),s=(t,e,o)=>({$day:t,date:t.format("DD.MM.YYYY"),day:t.format("DD"),month:t.format("MM"),year:t.format("YYYY"),currentDisplayedMonth:t.format("MM")===e.format("MM"),isToday:r.default().isSame(t,"day"),isSelected:t.isSame(o,"day")}),u=t=>!(!t||"function"!=typeof t);t.useDatepicker=()=>{const[t,o]=e.useState(d),[a,r]=e.useState(t),l=Number(a.date(0).format("d")),y=n.map(((e,o)=>s(a.date(e+o-l),a,t))),c=()=>r(a.add(1,"month")),m=()=>r(a.subtract(1,"month")),M=t=>{o(t),r(t)};return{today:s(d,a,t),weekDays:i,months:f,month:a.format("MMMM"),year:a.format("YYYY"),calendar:y,getNextMonthButtonProps:()=>({onClick:c}),getPreviousMonthButtonProps:()=>({onClick:m}),getDayButtonProps:(t,{onClick:e,...o})=>({onClick(){M(t.$day),e&&u(e)&&e(t.$day)},"aria-role":"button",...o}),getMonthButtonProps:({index:t},{onClick:e,...o})=>({onClick(){const o=a.month(t);r(o),e&&u(e)&&e(o)},"aria-role":"button",...o}),reset:e=>M(e||t)}},Object.defineProperty(t,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("dayjs")):"function"==typeof define&&define.amd?define(["exports","react","dayjs"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).RehookifyDatepicker={},e.React,e.dayjs)}(this,(function(e,t,a){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=n(a);const o=Array(42).fill(1),i=r.default(),s=Array(7).fill(1).map(((e,t)=>i.day(e+t).format("ddd"))),d=Array(12).fill(0),m={mode:"static",selectNow:!1},l={numberOfYearsDisplayed:12,pagination:"decade",disablePagination:!1},u=(e,t,a)=>({$day:e,date:e.format("DD.MM.YYYY"),day:e.format("DD"),month:e.format("MM"),year:e.format("YYYY"),currentDisplayedMonth:e.format("MM")===t.format("MM"),isToday:r.default().isSame(e,"day"),isSelected:e.isSame(a||"","day")}),f=e=>{if(!e)return null;const{day:t,month:a,year:n}=e;if(!t||!a||!n)throw new Error("The date should have day, month and year");const r=i.month(a-1).year(n);if(t>r.daysInMonth())throw new Error(`${r.format("MMMM")} has maximum of ${r.daysInMonth()} days`);return r.date(t)},c=e=>({role:"button",tabIndex:0,...e&&{disabled:e,"aria-disabled":e}}),y=e=>e-e%10-1,D=e=>!(!e||"function"!=typeof e);e.useDatepicker=e=>{const a=(({calendar:e,years:t,minDate:a,maxDate:n}={})=>({calendar:{...m,...e},years:{...l,...t},minDate:f(a),maxDate:f(n)}))(e),[n,r]=t.useState(a.calendar.selectNow?i:null),[M,h]=t.useState(n||i),[Y,b]=t.useState((()=>y(Number(M.format("YYYY"))))),p=Number(M.date(0).format("d")),x=o.map(((e,t)=>u(M.date(e+t-p),M,n))),k=Array(a.years.numberOfYearsDisplayed).fill(1).map(((e,t)=>((e,t,a)=>{const n=t+e;return{$day:a.year(n),value:n,isSelected:Number(a.format("YYYY"))===n}})(t,Y,M))),C=d.map(((e,t)=>((e,t)=>{const a=t.month(e),n=a.format("MMMM");return{$day:a,name:n,isSelected:t.format("MMMM")===n}})(t,M))),B=e=>{h(e),b(y(Number(e.format("YYYY"))))},$=e=>{r(e),B(e)},A=e=>h(e),v=()=>b((e=>e+10)),N=()=>b((e=>e-10)),S=B;return{data:{today:u(i,M,n),weekDays:s,month:M.format("MMMM"),months:C,year:M.format("YYYY"),years:k,calendar:x},propGetters:{nextMonthButton:({onClick:e,disabled:t,...n}={})=>{const r=M.add(1,"month"),o=!!t||a.maxDate&&r.isAfter(a.maxDate);return{onClick(t){o||(B(r),e&&D(e)&&e(r,t))},...c(o),...n}},previousMonthButton:({onClick:e,disabled:t,...n}={})=>{const r=M.subtract(1,"month"),o=!!t||a.minDate&&r.isBefore(a.minDate);return{onClick(t){o||(B(r),e&&D(e)&&e(r,t))},...c(o),...n}},dayButton:({$day:e},{onClick:t,disabled:n,...r}={})=>{const o=!!n||!!a.minDate&&e.isBefore(a.minDate)||!!a.maxDate&&e.isAfter(a.maxDate);return{onClick(a){o||($(e),t&&D(t)&&t(e,a))},...c(o),...r}},monthButton:({$day:e},{onClick:t,disabled:n,...r}={})=>{const o=!!n||a.minDate&&e.isBefore(a.minDate)||a.maxDate&&e.isAfter(a.maxDate);return{onClick(a){o||(A(e),t&&D(t)&&t(e,a))},...c(o),...r}},yearButton:({$day:e},{onClick:t,disabled:n,...r}={})=>{const o=!!n||a.minDate&&e.isBefore(a.minDate)||a.maxDate&&e.isAfter(a.maxDate);return{onClick(a){o||(B(e),t&&D(t)&&t(e,a))},...c(o),...r}},nextYearsButton:({onClick:e,disabled:t,...n}={})=>{const r=!!t||a.years.disablePagination||a.maxDate&&k[k.length-1].$day.isAfter(a.maxDate);return{onClick(t){r||(v(),e&&D(e)&&e(t))},...c(r),...n}},previousYearsButton:({onClick:e,disabled:t,...n}={})=>{const r=!!t||a.years.disablePagination||a.minDate&&k[0].$day.isBefore(a.minDate);return{onClick(t){r||(N(),e&&D(e)&&e(t))},...c(r),...n}}},actions:{reset:e=>{const t=e||i;r(e||null),B(t)},setNextYears:v,setPreviousYears:N,setNextMonth:()=>B(M.add(1,"month")),setPreviousMonth:()=>B(M.subtract(1,"month")),setDay:$,setMonth:A,setYear:S}}},Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=index.umd.js.map

dist/types/index.d.ts

 import type { Dayjs } from 'dayjs';
-export interface CalendarMonth {
-    name: string;
-    index: number;
-}
+import type { MouseEvent } from 'react';
 export interface CalendarDay {
@@ -15,6 +12,42 @@ $day: Dayjs;
 }
-export declare type CreateCalendarDay = (day: Dayjs, currentDate: Dayjs, selectedDate: Dayjs) => CalendarDay;
+export interface CalendarMonth {
+    name: string;
+    $day: Dayjs;
+    isSelected: boolean;
+}
+export interface CalendarYear {
+    value: number;
+    $day: Dayjs;
+    isSelected: boolean;
+}
+export declare type CreateCalendarDay = (day: Dayjs, currentDate: Dayjs, selectedDate: Dayjs | null) => CalendarDay;
+export declare type CreateCalendarMonth = (index: number, currentDate: Dayjs) => CalendarMonth;
+export declare type CreateCalendarYear = (offset: number, currentYear: number, currentDate: Dayjs) => CalendarYear;
 export interface PropsGetterConfig extends Record<string, unknown> {
-    onClick?(day: Dayjs): void;
+    onClick?(day?: Dayjs, evt?: MouseEvent<HTMLElement>): void;
+    onClick?(evt?: MouseEvent<HTMLElement>): void;
+    disabled?: boolean;
 }
+export declare type CalendarMode = 'static' | 'fluid';
+export interface CalendarConfig {
+    mode?: CalendarMode;
+    selectNow?: boolean;
+}
+export declare type YearsPagination = 'decade' | 'centered';
+export interface YearsConfig {
+    numberOfYearsDisplayed?: number;
+    pagination?: YearsPagination;
+    disablePagination?: boolean;
+}
+export interface MinMaxDate {
+    day: number;
+    month: number;
+    year: number;
+}
+export interface DatePickerConfig {
+    calendar?: CalendarConfig;
+    years?: YearsConfig;
+    minDate?: MinMaxDate | undefined;
+    maxDate?: MinMaxDate | undefined;
+}
 //# sourceMappingURL=index.d.ts.map

dist/use-datepicker.d.ts

 import { Dayjs } from 'dayjs';
-import { CalendarDay, CalendarMonth, PropsGetterConfig } from './types';
-export declare const useDatepicker: () => {
-    today: CalendarDay;
-    weekDays: string[];
-    months: CalendarMonth[];
-    month: string;
-    year: string;
-    calendar: CalendarDay[];
-    getNextMonthButtonProps: () => {
-        onClick: () => void;
+import { MouseEvent } from 'react';
+import { CalendarDay, CalendarMonth, CalendarYear, PropsGetterConfig, DatePickerConfig } from './types';
+export declare const useDatepicker: (userConfig?: DatePickerConfig) => {
+    data: {
+        today: CalendarDay;
+        weekDays: string[];
+        month: string;
+        months: CalendarMonth[];
+        year: string;
+        years: CalendarYear[];
+        calendar: CalendarDay[];
     };
-    getPreviousMonthButtonProps: () => {
-        onClick: () => void;
+    propGetters: {
+        nextMonthButton: ({ onClick, disabled: disabledProps, ...rest }?: PropsGetterConfig) => {
+            disabled?: true | undefined;
+            'aria-disabled'?: true | undefined;
+            role: string;
+            tabIndex: number;
+            onClick(evt: MouseEvent<HTMLElement>): void;
+        };
+        previousMonthButton: ({ onClick, disabled: disabledProps, ...rest }?: PropsGetterConfig) => {
+            disabled?: true | undefined;
+            'aria-disabled'?: true | undefined;
+            role: string;
+            tabIndex: number;
+            onClick(evt: MouseEvent<HTMLElement>): void;
+        };
+        dayButton: ({ $day }: CalendarDay, { onClick, disabled: disabledProps, ...rest }?: PropsGetterConfig) => {
+            disabled?: true | undefined;
+            'aria-disabled'?: true | undefined;
+            role: string;
+            tabIndex: number;
+            onClick(evt: MouseEvent<HTMLElement>): void;
+        };
+        monthButton: ({ $day }: CalendarMonth, { onClick, disabled: disabledProps, ...rest }?: PropsGetterConfig) => {
+            disabled?: true | undefined;
+            'aria-disabled'?: true | undefined;
+            role: string;
+            tabIndex: number;
+            onClick(evt: MouseEvent<HTMLElement>): void;
+        };
+        yearButton: ({ $day }: CalendarYear, { onClick, disabled: disabledProps, ...rest }?: PropsGetterConfig) => {
+            disabled?: true | undefined;
+            'aria-disabled'?: true | undefined;
+            role: string;
+            tabIndex: number;
+            onClick(evt: MouseEvent<HTMLElement>): void;
+        };
+        nextYearsButton: ({ onClick, disabled: disabledProps, ...rest }?: PropsGetterConfig) => {
+            disabled?: true | undefined;
+            'aria-disabled'?: true | undefined;
+            role: string;
+            tabIndex: number;
+            onClick(evt: MouseEvent<HTMLElement>): void;
+        };
+        previousYearsButton: ({ onClick, disabled: disabledProps, ...rest }?: PropsGetterConfig) => {
+            disabled?: true | undefined;
+            'aria-disabled'?: true | undefined;
+            role: string;
+            tabIndex: number;
+            onClick(evt: MouseEvent<HTMLElement>): void;
+        };
     };
-    getDayButtonProps: (day: CalendarDay, { onClick, ...rest }: PropsGetterConfig) => {
-        onClick(): void;
-        'aria-role': string;
+    actions: {
+        reset: (day?: Dayjs) => void;
+        setNextYears: () => void;
+        setPreviousYears: () => void;
+        setNextMonth: () => void;
+        setPreviousMonth: () => void;
+        setDay: (day: Dayjs) => void;
+        setMonth: (day: Dayjs) => void;
+        setYear: (day: Dayjs) => void;
     };
-    getMonthButtonProps: ({ index }: CalendarMonth, { onClick, ...rest }: PropsGetterConfig) => {
-        onClick(): void;
-        'aria-role': string;
-    };
-    reset: (day?: Dayjs) => void;
 };
 //# sourceMappingURL=use-datepicker.d.ts.map

dist/utils/predicates.d.ts

 export declare const isFunction: (fn: unknown) => boolean;
+export declare const isBoolean: (bool: unknown) => boolean;
 //# sourceMappingURL=predicates.d.ts.map

package.json

 {
   "name": "@rehookify/datepicker",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "description": "React hook for ui-independent datepicker logic",
@@ -5,0 +5,0 @@ "main": "dist/index.cjs.js",

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

93617

increased by175.07%

Number of package files

35

increased by66.67%

Lines of code

494

increased by201.22%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes