loon-bulma-react 2022.1.5 → 2022.2.1

package/README.md

@@ -19,6 +19,8 @@
     - [Section](#layout-section)
     - [ScrollArea](#layout-scrollarea)
   - [Button & ButtonGroup](#component-button)
+  - [Calendar](#components-calendar)
+    - [MonthView](#components-calendar-monthview)
   - [DataTable](#component-datatable)
   - [Footer](#component-footer)
   - [Icons (FontAwesome)](#component-icons)
@@ -458,6 +460,81 @@ import { ButtonGroup, Bttn, Button, LightButton, InvertedButton, OutlinedButton
 </ButtonGroup>;
 ```
 
+### Calendar <a id="components-calendar"></a>
+
+De Calendar Component toont events in een grid-view. Er zijn 2 verschillende soorten events:
+
+- Events met een start-tijd
+- Events zonder starttijd of met allday = true
+
+Events hebben het onderstaande type nodig. Daarvan zijn `id`, `title`, `startDateTime` de 3 verplichte properties, de rest is optioneel. De `evtColor` en de `txtColor` hebben de default waarden resp `#ee8000` en `#ffffff`. Voor deze waarden kunnen alleen hex-waarden worden gebruikt.
+
+```ts
+export type BaseEventProps = {
+  id: number | string | (() => number | string);
+  title: string | (() => string);
+  startDateTime: Date;
+  endDateTime?: Date;
+  allDay?: boolean;
+  description?: string | (() => string);
+  evtColor?: string | (() => string);
+  txtColor?: string | (() => string);
+};
+```
+
+Op dit moment is er alleen nog een `MonthView`-component.
+
+De opties voor het instellen van de calendar zijn:
+
+```ts
+export type CalendarOptions<T> = {
+  dayNames?: string[]; // default = [Ma Di Wo Do Vr Za Zo]
+  monthNames?: string[]; // default = [Jan Feb Mrt Apr Mei Jun Jul Aug Sep Okt Nov Dec]
+  visibleDays?: Set<number>; // default = 1,2,3,4,5,6,7 (ma = 1, di = 2,... zo = 7)
+  event?: {
+    allday?: {
+      evtColor?: string | ((e: T) => string); // default = #ee8000dd (with alpha dd)
+      evtHoverColor?: string | ((e: T) => string); // #defaul = #ee8000ff (with alpha ff)
+      txtColor?: string | ((e: T) => string); // default = #555555
+      txtHoverColor?: string | ((e: T) => string); // default =  #555555
+    };
+    timed?: {
+      evtColor?: string | ((e: T) => string); // default = #ee8000dd (with alpha dd)
+      evtHoverColor?: string | ((e: T) => string); // #defaul = #ee8000ff (with alpha ff)
+      txtColor?: string | ((e: T) => string); // default = #555555
+      txtHoverColor?: string | ((e: T) => string); // default =  #555555
+    };
+  };
+  today?: {
+    bgColor?: string | ((d?: Date) => string); // default = #2f47bc
+    bgHoverColor?: string | ((d?: Date) => string); // default = #3b59ec
+    txtColor?: string | ((d?: Date) => string); // default  #ffffff
+    txtHoverColor?: string | ((d?: Date) => string); // default = #ffffff
+    doNotMarkToday: boolean; // default = false
+  };
+};
+```
+
+##### MonthView <a id="components-calendar-monthview"></a>
+
+Deze component toont een maand + de rest van de weken die maar deels in een maand zitten. De maand wordt getoond in een grid-view.
+
+- `events`: een array met events.
+- `viewDate`: de datum waarop de maand wordt getoond.
+- `options`: optional settings voor de maand .
+- `onEventClick()`: callback die wordt aangeroepen als er op een event wordt geklikt.
+- `onDayClick()`: callback die wordt aangeroepen als er op een dag-datum wordt geklikt.
+
+```tsx
+<Calendar.MonthView
+  events={events}
+  viewDate={viewDate}
+  options={options}
+  onEventClick={(evt, clck) => console.log(evt, clck)}
+  onDayClick={(evt, clck) => console.log(evt, clck)}
+/>
+```
+
 ### DataTable <a id="component-datatable"></a>
 
 Een DataTable is een tabel met een maximaal aantal rijen waarin je kan zoeken en sorteren. Voor een gewone, saaie, normale tabel kan je de [Table](#component-table) gebruiken. Voor re-renderen van de tabel moet de `data`-prop wel state zijn, anders werkt het rerenderen niet. Hetzelfde geld voor de `columns`-prop.

package/dist/components/Calendar/CalendarItems/AlldayEvent.d.ts

@@ -0,0 +1,16 @@
+import { MouseEvent } from 'react';
+import { BaseEventProps } from '..';
+import { EventOptions } from '../Props';
+/**
+ * Component voor een event dat de hele dag duurt
+ * @param props
+ * @returns
+ */
+export declare function AlldayEvent<T extends BaseEventProps>(props: {
+    /** het event */
+    event: T;
+    /** opties voor events */
+    options?: EventOptions<T>;
+    /** onclick handler voor het event */
+    onClick?: (event: T, clickEvent: MouseEvent<HTMLElement>) => void;
+}): JSX.Element;

package/dist/components/Calendar/CalendarItems/MoreEvents.d.ts

@@ -0,0 +1,19 @@
+import { MouseEvent } from 'react';
+import { BaseEventProps } from '..';
+import { EventOptions } from '../Props';
+/**
+ * expandable events als er meer dan 5 events op een dag vallen
+ * @param props
+ * @returns
+ */
+export declare function MoreEventsView<T extends BaseEventProps>(props: {
+    /** de events op deze dag */
+    events: T[];
+    /** event-click handling */
+    onEventClick?: (event: T, clickEvent: MouseEvent<HTMLElement>) => void;
+    /** global event options */
+    options?: {
+        allday?: EventOptions<T>;
+        timed?: EventOptions<T>;
+    };
+}): JSX.Element;

package/dist/components/Calendar/CalendarItems/TimedEvent.d.ts

@@ -0,0 +1,16 @@
+import { MouseEvent } from 'react';
+import { BaseEventProps } from '..';
+import { EventOptions } from '../Props';
+/**
+ * Component voor een event met een tijdstip en NIET de hele dag duurt
+ * @param props
+ * @returns
+ */
+export declare function TimedEvent<T extends BaseEventProps>(props: {
+    /** het event */
+    event: T;
+    /** opties voor events */
+    options?: EventOptions<T>;
+    /** onclick handler */
+    onClick?: (event: T, clickEvent: MouseEvent<HTMLElement>) => void;
+}): JSX.Element;

package/dist/components/Calendar/CalendarItems/base-styles.d.ts

@@ -0,0 +1,13 @@
+/** default style van events */
+export declare const baseEventStyles: {
+    transition: string;
+    fontSize: string;
+    height: string;
+    margin: string;
+    borderRadius: string;
+    textAlign: string;
+    paddingLeft: string;
+    paddingRight: string;
+    overflow: string;
+    textOverflow: string;
+};

package/dist/components/Calendar/CalendarItems/utils.d.ts

@@ -0,0 +1,20 @@
+import { BaseEventProps } from "../Props";
+/** default style van events */
+export declare const baseEventStyles: {
+    transition: string;
+    fontSize: string;
+    height: string;
+    margin: string;
+    borderRadius: string;
+    textAlign: string;
+    paddingLeft: string;
+    paddingRight: string;
+    overflow: string;
+    textOverflow: string;
+};
+/**
+ * Maak een tooltip aan bij dit event als er nog geen tooltip is.
+ * @param event het event
+ * @returns de tooltip-string
+ */
+export declare function createTooltip<T extends BaseEventProps>(event: T): string;

package/dist/components/Calendar/EventProps.d.ts

@@ -0,0 +1,8 @@
+export declare type BaseEventProps = {
+    id: number | string | (() => number | string);
+    title: string | (() => string);
+    startDateTime: Date;
+    endDateTime?: Date | (() => Date);
+    description?: string | (() => string);
+    bgColor?: string | (() => string);
+};

package/dist/components/Calendar/Month/Cal.Month.View.d.ts

@@ -0,0 +1,20 @@
+import { MouseEvent } from 'react';
+import { BaseEventProps, CalendarOptions } from '../Props';
+export declare type MonthViewProps<T> = {
+    /** events voor deze view */
+    events: T[] | (() => T[]);
+    /** opties voor deze view */
+    options?: CalendarOptions<T>;
+    /** event aangeklikt */
+    onEventClick?: (e: T, event: MouseEvent<HTMLElement>) => void;
+    /** dag-datum geklikt? */
+    onDayClick?: (date: Date, event: MouseEvent<HTMLElement>) => void;
+    /** huidige geselecteerde datum */
+    viewDate: Date;
+};
+/**
+ * maak een maand-view (grid) met events
+ * @param props
+ * @returns
+ */
+export declare function MonthView<T extends BaseEventProps>(props: MonthViewProps<T>): JSX.Element;

package/dist/components/Calendar/Month/DayContainer.d.ts

@@ -0,0 +1,22 @@
+import { MouseEvent } from 'react';
+import { BaseEventProps } from '..';
+import { CalendarOptions } from '../Props';
+/**
+ * Component voor de dag-container in de maand-view
+ * @param props
+ * @returns
+ */
+export declare function DayContainer<T extends BaseEventProps>(props: {
+    /** events op deze dag */
+    events: T[];
+    /** de namen van de maanden */
+    monthNames: string[];
+    /** wat te doen als een event aangeklikt wordt */
+    onEventClick?: (event: T, clickEvent: MouseEvent<HTMLElement>) => void;
+    /** wat te doen als een dag aangeklikt wordt */
+    onDayClick?: (date: Date, clickEvent: MouseEvent<HTMLElement>) => void;
+    /** opties voor deze container */
+    options?: CalendarOptions<T>;
+    /** de datum voor de container */
+    date: Date;
+}): JSX.Element;

package/dist/components/Calendar/Props.d.ts

@@ -0,0 +1,58 @@
+export declare type BaseEventProps = {
+    /** id van een event */
+    id: number | string | (() => number | string);
+    /** title van een event */
+    title: string | (() => string);
+    /** start datetime or date event */
+    startDateTime: Date;
+    /** (optional) end datetime */
+    endDateTime?: Date;
+    /** is event an allday-event (hide starttime) */
+    allDay?: boolean;
+    /** event description */
+    description?: string | (() => string);
+    /** background-color for event (hexColors, default = #ee8000) */
+    evtColor?: string | (() => string);
+    /** text-color for event (hexColors, default = #ffffff) */
+    txtColor?: string | (() => string);
+    /** (optionele) tooltip tekst */
+    tooltip?: string | (() => string);
+};
+export declare type CalendarOptions<T> = {
+    /** dag-namen, default = [Ma Di Wo Do Vr Za Zo] */
+    dayNames?: string[];
+    /** maand-namen, default = [Jan Feb Mrt Apr Mei Jun Jul Aug Sep Okt Nov Dec] */
+    monthNames?: string[];
+    /** zichtbare dagen als set (default 1,2,3,4,5,6,7 (ma = 1, di = 2,... zo = 7)) */
+    visibleDays?: Set<number>;
+    /** settings for events */
+    event?: {
+        /** settings for allday events */
+        allday?: EventOptions<T>;
+        /** settings for timed events */
+        timed?: EventOptions<T>;
+    };
+    /** settings for today */
+    today?: {
+        /** background color for today (HexColors, default = #3b59ec) */
+        bgColor?: string | ((d?: Date) => string);
+        /** background color for today when hovering (HexColors, default = #3b59ec) */
+        bgHoverColor?: string | ((d?: Date) => string);
+        /** text color for today (HexColors, default = #ffffff) */
+        txtColor?: string | ((d?: Date) => string);
+        /** text color for today (HexColors, default = #ffffff) */
+        txtHoverColor?: string | ((d?: Date) => string);
+        /** do not show which day is today */
+        doNotMarkToday: boolean;
+    };
+};
+export declare type EventOptions<T> = {
+    /** background color for event (HexColors, default = #ee8000dd) */
+    evtColor?: string | ((e: T) => string);
+    /** background color for today (HexColors, default = #ee8000ff) */
+    evtHoverColor?: string | ((e: T) => string);
+    /** background color for today (HexColors, default = #555555) */
+    txtColor?: string | ((e: T) => string);
+    /** background color for today (HexColors, default = #555555) */
+    txtHoverColor?: string | ((e: T) => string);
+};

package/dist/components/Calendar/date-utils.d.ts

@@ -0,0 +1,94 @@
+/**
+ * find the first day of the Month for a given date
+ * @param dt date
+ * @returns first day of the month
+ */
+export declare const startOfMonth: (dt: Date) => Date;
+/**
+ * find the last day of the Month for a given date
+ * @param dt date
+ * @returns last day of the month
+ */
+export declare const endOfMonth: (dt: Date) => Date;
+/**
+ * find the first day of the Week for a given date
+ * @param dt date
+ * @returns first day of the week
+ */
+export declare const startOfWeek: (dt: Date) => Date;
+/**
+ * find the las day of the Week for a given date
+ * @param dt date
+ * @returns last day of the week
+ */
+export declare const endOfWeek: (dt: Date) => Date;
+/**
+ * Find start of the day
+ * @param dt date
+ * @returns new date at start of the day
+ */
+export declare const startOfDay: (dt: Date) => Date;
+/**
+ * Find end of the day
+ * @param dt date
+ * @returns new date at end of the day
+ */
+export declare const endOfDay: (dt: Date) => Date;
+/**
+ * Gets week number for a given date
+ * @param dt date
+ * @returns week number
+ */
+export declare const weekNrForDate: (dt: Date) => number;
+/**
+ * Check if date is between 2 other dates
+ * @param dt the date to check
+ * @param start starting date of period (inclusive)
+ * @param end ending date of period (exclusive)
+ * @returns boolean
+ */
+export declare const isBetween: (dt: Date, start: Date, end: Date) => boolean;
+export declare const isToday: (dt: Date) => boolean;
+/**
+ * Adds n days to a date
+ * @param dt current date
+ * @param n number of days to add
+ * @returns date with days added
+ */
+export declare const addDays: (dt: Date, n: number) => Date;
+/**
+ * Adds n hours to a date
+ * @param dt current date
+ * @param n number of days to add
+ * @returns date with days added
+ */
+export declare const addHours: (dt: Date, n: number) => Date;
+/**
+ * gets month name for a given Date
+ * @param dt date or monthNumber (jan = 1, feb = 2, ..., dec = 12)
+ * @param size short version or long(default) version
+ * @returns month name string
+ */
+export declare const monthName: (dt: Date | number, size?: 'short' | 'long') => string;
+/**
+ * gets weekday name for a given Date
+ * @param dt date or dayNumber (monday = 1, tue = 2 ... sun = 7)
+ * @param size short version or long(default) version
+ * @returns month name string
+ */
+export declare const dayName: (dt: Date | number, size?: 'short' | 'long') => string;
+/**
+ * Formats a date to a string
+ * year: yy (22) | yyyy (2022)
+ * month: M (1) | MM (01) | MMM (Jan) | MMMM (Januari)
+ * day: D (30, 9)| DD (30, 09)
+ * weekday: d (3)| dd (03) | ddd  (Woe) | dddd (Woensdag)
+ * hour: HH (23, 09) | H (23, 9)
+ * minute: mm (59, 09) | m (59, 9)
+ * second: ss (59, 09)| s (59, 9)
+ * millisecond: SSS (999, 099, 009) | S (999, 99, 9)
+ * @param dt date
+ * @param format format string (default = yyyy-MM-dd HH:mm:ss)
+ * @returns formatted date string
+ */
+export declare const formatDate: (dt: Date, format?: string) => string;

package/dist/components/Calendar/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Month/Cal.Month.View';
+export type { MonthViewProps } from './Month/Cal.Month.View';
+export type { BaseEventProps } from './Props';

package/dist/components/Calendar/utils.d.ts

@@ -0,0 +1,70 @@
+/**
+ * find the first day of the Month for a given date
+ * @param dt date
+ * @returns first day of the month
+ */
+export declare const startOfMonth: (dt: Date) => Date;
+/**
+ * find the last day of the Month for a given date
+ * @param dt date
+ * @returns last day of the month
+ */
+export declare const endOfMonth: (dt: Date) => Date;
+/**
+ * find the first day of the Week for a given date
+ * @param dt date
+ * @returns first day of the week
+ */
+export declare const startOfWeek: (dt: Date) => Date;
+/**
+ * find the las day of the Week for a given date
+ * @param dt date
+ * @returns last day of the week
+ */
+export declare const endOfWeek: (dt: Date) => Date;
+/**
+ * Find start of the day
+ * @param dt date
+ * @returns new date at start of the day
+ */
+export declare const startOfDay: (dt: Date) => Date;
+/**
+ * Find end of the day
+ * @param dt date
+ * @returns new date at end of the day
+ */
+export declare const endOfDay: (dt: Date) => Date;
+/**
+ * Gets week number for a given date
+ * @param dt date
+ * @returns week number
+ */
+export declare const weekNrForDate: (dt: Date) => number;
+/**
+ * Adds n days to a date
+ * @param dt current date
+ * @param n number of days to add
+ * @returns date with days added
+ */
+export declare const addDays: (dt: Date, n: number) => Date;
+/**
+ * Adds n hours to a date
+ * @param dt current date
+ * @param n number of days to add
+ * @returns date with days added
+ */
+export declare const addHours: (dt: Date, n: number) => Date;
+/**
+ * gets month name for a given Date
+ * @param dt date or monthNumber (jan = 1, feb = 2, ..., dec = 12)
+ * @param size short version or long(default) version
+ * @returns month name string
+ */
+export declare const monthName: (dt: Date | number, size?: 'short' | 'long') => string;
+/**
+ * gets weekday name for a given Date
+ * @param dt date or dayNumber (monday = 1, tue = 2 ... sun = 7)
+ * @param size short version or long(default) version
+ * @returns month name string
+ */
+export declare const dayName: (dt: Date | number, size?: 'short' | 'long') => string;

package/dist/components/DataTable/DataTableProps.d.ts

@@ -14,7 +14,7 @@ export declare type DataTableProps<T extends unknown> = {
      * - als string: de property die uniek is: obj.<string>
      * - als function: stel een string samen die uniek is.
      */
-    rowIdentifier?: number | string | ((item: T) => number | string);
+    rowIdentifier?: string | ((item: T) => string);
     /** een functie om de classes op een row te zetten, op basis van het object */
     rowClasses?: (item: T, index?: number) => string;
     /** moet de tabel zichzelf wat kleiner maken ? */

package/dist/components/Layout/ScrollArea/ScrollArea.d.ts

@@ -21,6 +21,16 @@ export declare function Horizontal(props: {
     };
     /** alignment van de items (default = 'l') */
     alignment?: AlignmentProp;
+    /** max width van een item in de horizontal scroll area
+     * - number: aantal px
+     * - string: '160x', '10em', etc.
+     */
+    maxItemWidth?: number | string;
+    /** max width van een item in de horizontal scroll area
+     * - number: aantal px
+     * - string: '160x', '10em', etc.
+     */
+    minItemWidth?: number | string;
 }): JSX.Element;
 /** maak een verticale flexbox container om items onder elkaar (default van boven naar beneden) neer te zetten, met of zonder wrappen */
 export declare function Vertical(props: {

package/dist/components/ToolTip/ToolTip.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function ToolTip(): React.ReactPortal;

package/dist/components/ToolTip/ToolTipContext.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+declare type ContextProps = {
+    show: boolean;
+    setShow: (value: boolean) => void;
+    top: number;
+    setTop: (value: number) => void;
+    left: number;
+    setLeft: (value: number) => void;
+    content: string;
+    setContent: (value: string) => void;
+};
+declare type TooltipProviderProps = {
+    children: any;
+};
+export declare const TooltipContext: React.Context<ContextProps>;
+export declare function ToolTipProvider({ children }: TooltipProviderProps): JSX.Element;
+export {};

package/dist/components/ToolTip/useToolTip.d.ts

@@ -0,0 +1,8 @@
+export declare function useTooltip(): {
+    showTooltip: (top: number, left: number, content: string) => void;
+    hideTooltip: () => void;
+    isTooltipVisible: boolean;
+    top: number;
+    left: number;
+    content: string;
+};

package/dist/index.d.ts

@@ -60,3 +60,6 @@ export * from './components/Form/TimeInput';
 export * from './components/Form/DateTimeInput';
 export { NotifierProvider, useNotifier } from './contexts/Notifier/NotifierProvider';
 export type { NotifierItemProps } from './contexts/Notifier/NotifierProps';
+export * as Calendar from './components/Calendar';
+export type { BaseEventProps, CalendarOptions } from './components/Calendar/Props';
+export type { MonthViewProps } from './components/Calendar/Month/Cal.Month.View';