@dvrd/dvr-controls 1.1.32 → 1.1.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "1.1.32",
+  "version": "1.1.34",
   "description": "Custom web controls",
   "main": "index.ts",
   "files": [
@@ -12,6 +12,10 @@
   },
   "author": "Dave van Rijn",
   "license": "ISC",
+  "scripts": {
+    "build": "yarn typecheck && npm publish",
+    "typecheck": "tsc --noEmit"
+  },
   "browserslist": {
     "production": [
       ">0.2%",

package/src/js/date/dvrdDatePicker.tsx

@@ -5,15 +5,7 @@ import './style/dvrdDatePicker.scss';
 
 import classNames from 'classnames';
 import React, {
-    ForwardedRef,
-    forwardRef,
-    Fragment,
-    MouseEventHandler,
-    useEffect,
-    useImperativeHandle,
-    useMemo,
-    useRef,
-    useState
+    ForwardedRef, forwardRef, Fragment, MouseEventHandler, useEffect, useImperativeHandle, useMemo, useRef, useState
 } from 'react';
 import {ChangeFunction, DatePickerTimeMode, ErrorType} from '../util/interfaces';
 import AwesomeIcon from '../icon/awesomeIcon';
@@ -21,7 +13,7 @@ import WithBackground from '../popup/withBackground';
 import DvrdButton from '../button/dvrdButton';
 import {generateComponentId} from '../util/componentUtil';
 import IDate from '@dvrd/idate';
-import {pad} from '../util/controlUtil';
+import {pad, padNum} from '../util/controlUtil';
 import {Swiper, SwiperClass, SwiperSlide} from 'swiper/react';
 import {FreeMode, Mousewheel} from 'swiper/modules';
 import 'swiper/css';
@@ -45,7 +37,7 @@ interface Props {
     pickersOnly?: boolean;
 }
 
-export type DVRDDatePickerRef = { onOpen: VoidFunction; onClose: VoidFunction; }
+export type DVRDDatePickerRef = {onOpen: VoidFunction; onClose: VoidFunction;}
 
 function DvrdDatePicker(props: Props, ref: ForwardedRef<DVRDDatePickerRef>) {
     const {
@@ -138,38 +130,72 @@ interface DatePickerProps {
     min?: IDate | string;
 }
 
+type Day = {
+    number: number;
+    value: IDate;
+    currentMonth: boolean;
+}
+
+const beforePadDays = [6, 0, 1, 2, 3, 4, 5];
+
+function buildFirstDaysRow(firstDay: IDate): [Array<Day> | null, IDate] {
+    const padBeforeDays = beforePadDays[firstDay.weekday()];
+    if (!padBeforeDays) return [null, firstDay];
+    const firstRow: Array<Day> = [];
+    for (let offset = padBeforeDays; offset >= 1; offset -= 1) {
+        const dayValue = firstDay.subtract(offset, 'days');
+        firstRow.push({
+            number: dayValue.day(),
+            value: dayValue,
+            currentMonth: false
+        });
+    }
+    let secondRowFirstDay = firstDay.clone();
+    while (firstRow.length < 7) {
+        firstRow.push({
+            number: secondRowFirstDay.day(),
+            value: secondRowFirstDay,
+            currentMonth: true
+        });
+        secondRowFirstDay = secondRowFirstDay.add(1, 'day');
+    }
+    return [firstRow, secondRowFirstDay];
+}
+
+function buildDay(value: IDate, year: number, month: number): Day {
+    return {
+        number: value.day(),
+        value,
+        currentMonth: value.year() === year && value.month() === month
+    };
+}
+
+const daysToRender = 42; // Always render 6 rows of days
+
 function DatePicker(props: DatePickerProps) {
     const {min, max, alwaysShowArrows, open, onClose, value, onChange} = props;
     const divRef = useRef<HTMLDivElement>(null);
     const pickerValue = useMemo(() => value?.clone() ?? IDate.now(), [value]);
-    const [padBeforeDays, days, padAfterDays] = useMemo(() => {
-        const daysInMonth = pickerValue.daysInMonth();
-        const days: number[] = [];
-        const padBeforeDays: number[] = [];
-        const padAfterDays: number[] = [];
-        for (let i = 1; i <= daysInMonth; i++) days.push(i);
-        let firstMonthDay = pickerValue.day(1).weekday();
-        if (!firstMonthDay) firstMonthDay = 7;
-        const padDaysBefore = firstMonthDay - 1;
-        let dayBefore = pickerValue.add(-1, 'month').daysInMonth();
-        for (let i = 0; i < padDaysBefore; i++)
-            padBeforeDays.splice(0, 0, dayBefore--);
-
-        const lastWeekDay = pickerValue.day(daysInMonth).weekday();
-        const padDaysAfter = 7 - lastWeekDay;
-        for (let i = 0; i < padDaysAfter; i++)
-            padAfterDays.push(i + 1);
-
-        if (Math.ceil(padAfterDays.concat(days).concat(padBeforeDays).length / 7) < 6) {
-            let dayAfter = padAfterDays[padAfterDays.length - 1] + 1;
-            for (let i = 0; i < 7; i++)
-                padAfterDays.push(dayAfter++);
+    const days: Array<Day> = useMemo(() => {
+        const month = pickerValue.month();
+        const year = pickerValue.year();
+        const days: Array<Day> = [];
+        let firstDay = new IDate(`${year}-${padNum(month)}-01`);
+        const [firstRow, nextFirstDay] = buildFirstDaysRow(firstDay);
+        if (firstRow) days.push(...firstRow);
+        firstDay = nextFirstDay;
+        while (days.length < daysToRender) {
+            for (let ix = 0; ix < 7; ix++) {
+                days.push(buildDay(firstDay, year, month));
+                firstDay = firstDay.add(1, 'day');
+            }
         }
-        return [padBeforeDays, days, padAfterDays];
+
+        return days;
     }, [pickerValue]);
 
     function onReduce(key: 'year' | 'month') {
-        return function () {
+        return function() {
             let value = pickerValue.clone();
             value = value.add(-1, key);
             value = value.day(Math.min(value.daysInMonth(), value.day()));
@@ -178,7 +204,7 @@ function DatePicker(props: DatePickerProps) {
     }
 
     function onAdd(key: 'year' | 'month') {
-        return function () {
+        return function() {
             let value = pickerValue.clone();
             value = value.add(1, key);
             value = value.day(Math.min(value.daysInMonth(), value.day()));
@@ -187,7 +213,7 @@ function DatePicker(props: DatePickerProps) {
     }
 
     function onResetSwitcher(key: 'year' | 'month') {
-        return function () {
+        return function() {
             let value = pickerValue.clone();
             if (key === 'year') value = value.year(IDate.now().year());
             else value = value.month(IDate.now().month());
@@ -200,25 +226,9 @@ function DatePicker(props: DatePickerProps) {
         onChange(true)(IDate.now());
     }
 
-    function onSelectDay(day: number, month?: number, year?: number) {
-        return function () {
-            let pickValue = pickerValue.clone();
-            if (day || value === null) {
-                pickValue = pickValue.day(day);
-                if (month !== undefined) pickValue = pickValue.month(month);
-                if (year !== undefined) pickValue = pickValue.year(year);
-                onChange(true)(pickValue);
-            }
-        };
-    }
-
-    function onSelectPadDay(day: number, kind: 'prev' | 'next') {
-        return function () {
-            let value = pickerValue.clone();
-            if (kind === 'prev') value = value.add(-1, 'month');
-            else value = value.add(1, 'month');
-            value = value.day(day);
-            onChange(true)(value);
+    function onSelectDay(day: Day) {
+        return function() {
+            onChange(true)(day.value);
         };
     }
 
@@ -267,14 +277,10 @@ function DatePicker(props: DatePickerProps) {
             divRef.current?.classList.remove('switch-mount');
     }
 
-    function dateIsDisabled(day: number, month?: number, year?: number) {
+    function dateIsDisabled(day: Day) {
         if (!min && !max) return false;
-        let pickValue = pickerValue.clone();
-        pickValue = pickValue.day(day);
-        if (month !== undefined) pickValue = pickValue.month(month);
-        if (year !== undefined) pickValue = pickValue.year(year);
-        if (min && new IDate(min).isAfter(pickValue, 'day')) return true;
-        else if (max && new IDate(max).isBefore(pickValue, 'day')) return true;
+        if (min && new IDate(min).isAfter(day.value, 'day')) return true;
+        else if (max && new IDate(max).isBefore(day.value, 'day')) return true;
         return false;
     }
 
@@ -356,25 +362,17 @@ function DatePicker(props: DatePickerProps) {
         } else {
             document.removeEventListener('keydown', keyListener);
         }
-        return function () {
+        return function() {
             document.removeEventListener('keydown', keyListener);
         };
     }, [open]);
 
-    function renderDay(day: number, index: number, onClick: MouseEventHandler, className?: string,
-                       type?: 'prev' | 'next') {
-        let pickValue = pickerValue.clone();
-        if (type === 'prev')
-            pickValue = pickValue.subtract(1, 'month');
-        else if (type === 'next')
-            pickValue = pickValue.add(1, 'month');
-        const month = pickValue.month();
-        const year = pickValue.year();
-        const disabled = dateIsDisabled(day, month, year);
+    function renderDay(day: Day, index: number, onClick: MouseEventHandler, className?: string) {
+        const disabled = dateIsDisabled(day);
         return (
             <div className={classNames('day', disabled && 'disabled', className)}
                  onClick={disabled ? undefined : onClick} key={index}>
-                <span className='day-label'>{day}</span>
+                <span className='day-label'>{day.number}</span>
             </div>
         );
     }
@@ -420,16 +418,11 @@ function DatePicker(props: DatePickerProps) {
                     <div className='day no-select'>
                         <span className='day-label'>Zo</span>
                     </div>
-                    {padBeforeDays.map((day: number, index: number) => {
-                        return renderDay(day, index, onSelectPadDay(day, 'prev'), 'pad', 'prev');
-                    })}
-                    {days.map((day: number, index: number) => {
-                        const isSelected = day === pickerValue.day();
+                    {days.map((day: Day, index: number) => {
+                        const isSelected = day.value.isAt(pickerValue, 'day');
                         return renderDay(day, index, onSelectDay(day),
-                            classNames(isSelected && 'selected', day === 0 && 'hide'));
-                    })}
-                    {padAfterDays.map((day: number, index: number) => {
-                        return renderDay(day, index, onSelectPadDay(day, 'next'), 'pad', 'next');
+                            classNames(isSelected && 'selected', day.number === 0 && 'hide',
+                                !day.currentMonth && 'pad'));
                     })}
                 </div>
                 <div className='actions-container'>
@@ -461,7 +454,7 @@ function TimePicker(props: TimePickerProps) {
     }
 
     function onSlideChange(key: 'hour' | 'minute' | 'second') {
-        return function (swiper: SwiperClass) {
+        return function(swiper: SwiperClass) {
             if (key === 'hour') internalValue.current = internalValue.current.hours(swiper.realIndex);
             if (key === 'minute') internalValue.current = internalValue.current.minutes(swiper.realIndex);
             if (key === 'second') internalValue.current = internalValue.current.seconds(swiper.realIndex);

package/src/js/pdf/element/pdfElement.tsx

@@ -6,7 +6,7 @@ import './style/pdfElement.scss';
 import React, {MouseEventHandler, PropsWithChildren, PureComponent} from 'react';
 import {DraggableData, HandleClasses, HandleStyles, ResizeEnable, Rnd} from 'react-rnd';
 import {
-    CustomAppEvent, ElementPosition, IndexedObject, PDFElementDimensions, PDFElementParams, PDFElementPersist, PdfFont,
+    CustomAppEvent, ElementPosition, PDFElementDimensions, PDFElementParams, PDFElementPersist, PdfFont,
     RNDDimensions
 } from "../../util/interfaces";
 import {generateComponentId} from "../../util/componentUtil";
@@ -17,7 +17,7 @@ import NumberString from "../../util/numberString";
 
 interface State {
     dragging: boolean;
-    settings: IndexedObject<any>;
+    settings: Record<string, any>;
 }
 
 interface SharedProps {

package/src/js/pdf/image/pdfImage.tsx

@@ -5,7 +5,7 @@ import './style/pdfImage.scss';
 
 import React, {MouseEventHandler} from 'react';
 import {
-    ElementPosition, IndexedObject, PDFDisplay, PDFElementParams, PDFElementPersist, PDFElementType, PDFImageParams
+    ElementPosition, PDFDisplay, PDFElementParams, PDFElementPersist, PDFElementType, PDFImageParams
 } from "../../util/interfaces";
 import {PDFDraggable, PdfElement} from "../element/pdfElement";
 import {nullify} from "../../util/miscUtil";
@@ -14,7 +14,7 @@ import {AwesomeIcon, directTimeout, PAGE_HEIGHT, PAGE_WIDTH} from "../../../../i
 interface Props {
     onDelete: MouseEventHandler;
     onSaveHistory: VoidFunction;
-    values: IndexedObject<string>;
+    values: Record<string, string>;
     defaultSettings?: Partial<PDFImageParams>;
     id?: string;
     defaultPosition: { x: number; y: number };

package/src/js/pdf/pdfTemplateCreator.tsx

@@ -11,7 +11,6 @@ import {
     dispatchCustomEvent,
     DvrdButton,
     generateUUID,
-    IndexedObject,
     PDFElementParams,
     PDFElementPersist,
     PDFElementType,
@@ -37,7 +36,7 @@ interface Props {
     onPreview?: PDFSubmitHandler;
     onSubmit: PDFSubmitHandler;
     onChangeFont: (font: PdfFont, callback?: VoidFunction) => void;
-    values: IndexedObject<string>;
+    values: Record<string, string>;
     defaultItems?: DefaultPDFElementParams<any, any>[];
     resetItems: DefaultPDFElementParams<any, any>[];
     customVariables?: PDFTextVariables;
@@ -53,7 +52,7 @@ interface Props {
 }
 
 interface State {
-    elements: IndexedObject<{ element: React.ReactElement, config: DefaultPDFElementParams<any, any> }>;
+    elements: Record<string, { element: React.ReactElement, config: DefaultPDFElementParams<any, any> }>;
     focusedElement: PdfElement | null;
     canUndo: boolean;
     canRedo: boolean;
@@ -66,12 +65,12 @@ export default class PDFTemplateCreator extends PureComponent<Props, State> {
         supportMultiPage: false,
         singleImage: false,
     };
-    private refObjects: IndexedObject<PdfElement>;
+    private refObjects: Record<string, PdfElement>;
 
     constructor(props: Props) {
         super(props);
         this.refObjects = {};
-        const elements: IndexedObject<{
+        const elements: Record<string, {
             element: React.ReactElement,
             config: DefaultPDFElementParams<any, any>
         }> = this.processItems(props.defaultItems);
@@ -79,7 +78,7 @@ export default class PDFTemplateCreator extends PureComponent<Props, State> {
     }
 
     reloadTemplate(items: DefaultPDFElementParams<any, any>[]) {
-        const elements: IndexedObject<{
+        const elements: Record<string, {
             element: React.ReactElement,
             config: DefaultPDFElementParams<any, any>
         }> = this.processItems(items);
@@ -87,11 +86,11 @@ export default class PDFTemplateCreator extends PureComponent<Props, State> {
     }
 
     processItems = (items?: DefaultPDFElementParams<any, any>[],
-                    convertUnits: boolean = true): IndexedObject<{
+                    convertUnits: boolean = true): Record<string, {
         element: React.ReactElement,
         config: DefaultPDFElementParams<any, any>
     }> => {
-        const elements: IndexedObject<{ element: React.ReactElement, config: DefaultPDFElementParams<any, any> }> = {};
+        const elements: Record<string, { element: React.ReactElement, config: DefaultPDFElementParams<any, any> }> = {};
         if (items?.length) {
             items = JSON.parse(JSON.stringify(items));
             if (items) {

package/src/js/pdf/settings/text/pdfTextSettings.tsx

@@ -6,13 +6,7 @@ import './style/pdfTextSettings.scss';
 import React, {PureComponent} from 'react';
 import PdfText from "../../text/pdfText";
 import {
-    ElementPosition,
-    IndexedObject,
-    PDFDisplay,
-    PdfFont,
-    PDFTextParams,
-    PDFTextVariables,
-    SelectItemShape
+    ElementPosition, PDFDisplay, PdfFont, PDFTextParams, PDFTextVariables, SelectItemShape
 } from "../../../util/interfaces";
 import {ColorPicker, DVRDNumberInput, DvrdSelect, fontItems, getPdfVariables} from "../../../../../index";
 import classNames from 'classnames';
@@ -24,7 +18,7 @@ interface Props {
     supportMultiPage: boolean;
 }
 
-interface State extends IndexedObject<any> {
+interface State extends Record<string, any> {
     openVariables: keyof PDFTextVariables;
     bold: boolean;
     underline: boolean;
@@ -134,7 +128,7 @@ export default class PdfTextSettings extends PureComponent<Props, State> {
         )
     };
 
-    renderVariables = (type: keyof PDFTextVariables, title: string, variables: IndexedObject<string>) => (
+    renderVariables = (type: keyof PDFTextVariables, title: string, variables: Record<string, string>) => (
         <div className={classNames('variables-container', this.state.openVariables === type && 'open')}>
             <label className='variables-title' onClick={this.onClickVariablesTitle(type)}>{title}</label>
             <div className='variables-main-container'>

package/src/js/pdf/text/pdfText.tsx

@@ -6,7 +6,6 @@ import './style/pdfText.scss';
 import React, {CSSProperties, MouseEventHandler} from 'react';
 import {
     CustomAppEvent,
-    IndexedObject,
     PDFDisplay,
     PDFElementParams,
     PDFElementPersist,
@@ -25,7 +24,7 @@ import {remToPx, WithEvents} from "../../../../";
 interface Props {
     onDelete: MouseEventHandler;
     onSaveHistory: VoidFunction;
-    values: IndexedObject<string>;
+    values: Record<string, string>;
     defaultSettings?: Partial<PDFTextParams>;
     id?: string;
     customVariables?: PDFTextVariables;

package/src/js/util/interfaces.ts

@@ -36,10 +36,6 @@ export interface PasswordRule {
     validator: (password: string) => boolean;
 }
 
-export interface IndexedObject<T> {
-    [key: string]: T;
-}
-
 export interface ColorSet {
     base: string;
     contrast: string;
@@ -51,7 +47,7 @@ export interface OrnamentShape {
     allowPropagation?: boolean;
 }
 
-export interface ResponseData extends IndexedObject<any> {
+export interface ResponseData extends Record<string, any> {
     status: string;
     message?: string;
     success?: boolean;
@@ -197,7 +193,7 @@ export type ModelResponse<T> = (obj: T, success: boolean | undefined, data: Resp
 export type StrengthGauge = {validator: (password: string) => boolean};
 export type PDFSetting = {key: string; label: string; type: PDFSettingType; value: any};
 
-export type PDFElementParams<T extends PDFElementType, O extends IndexedObject<any>> = {
+export type PDFElementParams<T extends PDFElementType, O extends Record<string, any>> = {
     key: string;
     type: T;
     sub_type?: PDFElementSubType | null;
@@ -206,7 +202,7 @@ export type PDFElementParams<T extends PDFElementType, O extends IndexedObject<a
     persistent?: PDFElementPersist;
     linkedID?: string;
 }
-export type DefaultPDFElementParams<T extends PDFElementType, O extends IndexedObject<any>> = Partial<{
+export type DefaultPDFElementParams<T extends PDFElementType, O extends Record<string, any>> = Partial<{
     type: T;
     dimensions: Partial<{left: number; top: number; width: number; height: number}>;
     options: O;
@@ -246,9 +242,9 @@ export type PDFInvoiceTableParams = {
 };
 export type PDFInvoiceWidths = {name: number; price: number; quantity: number; subtotal: number}
 export type PDFTextVariables = {
-    company: IndexedObject<string>;
-    client: IndexedObject<string>;
-    invoice: IndexedObject<string>;
+    company: Record<string, string>;
+    client: Record<string, string>;
+    invoice: Record<string, string>;
 }
 export type PDFSubmitHandler = (items: PDFElementParams<any, any>[], callback?: VoidFunction) => void;
 export type PDFElementDimensions = {left: number; top: number; width: number; height: number};

package/src/js/util/miscUtil.ts

@@ -4,13 +4,12 @@
 
 import DOMPurify from 'dompurify';
 import React from 'react';
-import {IndexedObject} from './interfaces';
 
 declare global {
     // noinspection JSUnusedGlobalSymbols
     interface Window {
         log: Function;
-        settings: IndexedObject<any>;
+        settings: Record<string, any>;
         allowCookies: boolean;
         gtag?: Function;
         gapi?: any;
@@ -18,7 +17,7 @@ declare global {
 }
 
 export const getSetting = (name: string): any => {
-    const settings: IndexedObject<any> = window.settings;
+    const settings: Record<string, any> = window.settings;
     if (settings.hasOwnProperty(name))
         return settings[name];
     console.warn(`Global settings does not contain a value for '${name}'`);

package/src/js/util/pdfUtil.ts

@@ -2,7 +2,7 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-import {DefaultPDFElementParams, IndexedObject, PdfFont, PDFTextVariables, SelectItemShape} from "./interfaces";
+import {DefaultPDFElementParams, PdfFont, PDFTextVariables, SelectItemShape} from "./interfaces";
 
 export const mmToPt = (mm: number) => Math.round(pxToPt(mmToPx(mm)));
 export const mmToPx = (mm: number, toTens: boolean = true) => {
@@ -70,7 +70,7 @@ export const getPdfVariables = (customVariables?: PDFTextVariables): PDFTextVari
     return variables;
 }
 
-export const setPdfVariables = (text: string, values: IndexedObject<string>) => {
+export const setPdfVariables = (text: string, values: Record<string, string>) => {
     for (const key of Object.keys(values)) {
         const value = values[key];
         if (text.includes(`{${key}}`) && value.length) text =