loon-bulma-react 2023.0.22 → 2023.0.24

package/README.md

@@ -2,6 +2,7 @@
 
 > ## Aanpassingen
 >
+> - `useSessionStoredState()`-hook gemaakt. Gebruik session-storage in plaats van local-storage om gegevens te verwijderen bij het sluiten van de tab/browser.
 > - `<CB>`-component gemaakt. Een kale checkbox met een label. Geen wrapper, geen direction, geen form.
 > - `<RB>`-component gemaakt. Een Radio-button met een label. Geen wrapper, geen direction, geen form.
 > - `ColorProp` uitgebreid met `"is-${`_string_`}"`-template literal. Als _Bulma_ nog andere kleuren gebruikt dan de standaard-kleuren, kan je die op die manier gebruiken.
@@ -80,7 +81,7 @@
   - [useDebouncedValue](#hooks-use-debounced-value)
   - [useEventListener](#hooks-use-event-listener)
   - [useHotkeys](#hooks-use-hotkeys)
-  - [useLocalStoredState](#hooks-use-local-stored-state)
+  - [useLocalStoredState & useSessionStoredState](#hooks-use-local-stored-state)
   - [usePagination](#hooks-use-pagination)
   - [useToggle & useBoolToggle](#hooks-use-toggle)
   - [useUncontrolled](#hooks-use-uncontrolled)
@@ -1934,7 +1935,7 @@ Het resultaat van deze form komt via de `onSubmit()` methode naar buiten. Als de
   - [useDebouncedValue](#hooks-use-debounced-value)
   - [useEventListener](#hooks-use-event-listener)
   - [useHotkeys](#hooks-use-hotkeys)
-  - [useLocalStoredState](#hooks-use-local-stored-state)
+  - [useLocalStoredState & useSessionStoredState](#hooks-use-local-stored-state)
   - [usePagination](#hooks-use-pagination)
   - [useToggle & useBoolToggle](#hooks-use-toggle)
   - [useUncontrolled](#hooks-use-uncontrolled)
@@ -2085,19 +2086,35 @@ function HotkeysExample() {
 }
 ```
 
-#### useLocalStoredState() <a id="hooks-use-local-stored-state"></a>
+#### useLocalStoredState() en useSessionStoredState() <a id="hooks-use-local-stored-state"></a>
 
-de `useLocalStoredState()`-hook werkt hetzelfde als de `React.useState()`-hook. Het enige verschil is dat de state **ook** in _Local Storage_ wordt opgeslagen, zodat de waarde na een refresh nog steeds beschikbaar is. Data wordt in _Local Storage_ opgeslagen in JSON-formaat. De return-waarde is een tuple met 3 variabelen: `[value, setValue, remove]`
-
-- `value`: de waarde van type `T`
-- `setValue(val: T)`: een functie die de waarde als parameter ontvangt.
-- `remove()`: verwijder de waarde (als die nog bestaat) uit _Local Storage_
+De `useLocalStoredState()`- en de `useSessionStoredState()`-hook werkt hetzelfde als de `React.useState()`-hook. Het enige verschil is dat de state **ook** in _Local Storage_ of de _Session Storage_ wordt opgeslagen, zodat de waarde na een refresh nog steeds beschikbaar is. Data wordt in _Local Storage_ of de _Session Storage_ opgeslagen in JSON-formaat. De return-waarde is een tuple met 3 variabelen: `[value, setValue, remove]`
 
 De hook gebruik je op bijna dezelfde manier als `useState()`:
+| Property | Type | Description |
+|----------------|----------------------|-----------------------------------------------------------------------------------------|
+| `key` | `string` | de key waar de waarde in _Local Storage_ wordt opgeslagen |
+| `defaultValue` | `T` | de waarde die gebruikt wordt als default |
+| `serialize` | `(val: T) => string` | (optioneel) de functie die de waarde `T` omzet naar een string om die te kunnen opslaan |
+| `deserialize` | `(val: string) => T` | (optioneel) de functie die eenstring uit _Local Storage_ omzet naar een waarde `T` |
+
+Het verschil tussen de _Local Storage_ en de _Session Storage_ is simpel:
+
+- _Local Storage_:de data blijft bewaard tot deze wordt verwijderd.
+- _Session Storage_: de data wordt verwijderd als de **browser** of de **tab** wordt gesloten.
 
 ```tsx
 function UseLocalStoredStateDemo() {
-  const [value, setValue, remove] = useLocalStoredState({ key: 'my-special-key', defaultValue: '' });
+  const [value, setValue, remove] = useLocalStoredState({ key: 'my-special-key-local-storage', defaultValue: '' });
+  return (
+    <>
+      <Input value={value} onChange={(e) => setValue(e.target.value)} />
+      <Button.Primary onClick={() => remove()}>Remove value</Button.Primary>
+    </>
+  );
+
+  function UseSessionStoredStateDemo() {
+  const [value, setValue, remove] = useSessionStoredState({ key: 'my-special-key-session-storage', defaultValue: '' });
   return (
     <>
       <Input value={value} onChange={(e) => setValue(e.target.value)} />
@@ -2107,13 +2124,7 @@ function UseLocalStoredStateDemo() {
 }
 ```
 
-Om te zien dat de waarde in _Local Storage_ bewaard blijft, moet je de pagina refreshen nadat je de waarde hebt gewijzigd. Dan wordt de waarde uit _Local Storage_ gevuld. Anders wordt de `defaultValue` gebruikt. Het object dat als parameter wordt meegegeven aan de `useLocalStoredState()`-hook is een object met de volgende properties:
-| Property | Type | Description |
-|----------------|----------------------|--------------------------------------------------------------------------|
-| `key` | `string` | de key waar de waarde in _Local Storage_ wordt opgeslagen |
-| `defaultValue` | `T` | de waarde die gebruikt wordt als default |
-| `serialize` | `(val: T) => string` | (optioneel) de functie die de waarde `T` omzet naar een string om die te kunnen opslaan |
-| `deserialize` | `(val: string) => T` | (optioneel) de functie die eenstring uit _Local Storage_ omzet naar een waarde `T` |
+Om te zien dat de waarde in de _Storage_ bewaard blijft, moet je de pagina refreshen nadat je de waarde hebt gewijzigd. Dan wordt de waarde uit _Storage_ gevuld. Anders wordt de `defaultValue` gebruikt. Als je de waarde wilt verwijderen, dan kan dat met de `remove()`-functie. Om het verschil tussen _Local_ en _Session_ te zien, moet je de tab of de browser sluiten. De waarde in _Local Storage_ blijft bewaard, de waarde in _Session Storage_ wordt verwijderd.
 
 De functies `serialize` en `deserialize` hoef je alleen te implementeren als je een waarde hebt die geen gebruik van `JSON.stringify()` en `JSON.parse()` kan maken, of als er meer nodig is om dat te kunnen doen.
 

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

@@ -1,4 +1,4 @@
-import React, { MouseEvent } from 'react';
+import { MouseEvent } from 'react';
 import { EventOptions, BaseEventProps } from '../Props';
 declare type CalendarColoredItemProps<T extends BaseEventProps> = {
     /** Het event */
@@ -8,12 +8,11 @@ declare type CalendarColoredItemProps<T extends BaseEventProps> = {
     options?: EventOptions<T>;
     /** Onclick handler voor het event */
     onClick?: (event: T, clickEvent: MouseEvent<HTMLElement>) => void;
-    tooltip?: React.ReactNode;
 };
 /**
  * Component voor een event dat de hele dag duurt
  * @param props
  * @returns
  */
-export declare function CalendarColoredItem<T extends BaseEventProps>({ event, options, tooltip, onClick, desc, }: CalendarColoredItemProps<T>): JSX.Element;
+export declare function CalendarColoredItem<T extends BaseEventProps>({ event, options, onClick, desc, }: CalendarColoredItemProps<T>): JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-import React, { MouseEvent } from 'react';
+import { MouseEvent } from 'react';
 import { EventOptions, BaseEventProps } from '../Props';
 declare type CalendarItemProps<T extends BaseEventProps> = {
     desc: (event: T) => JSX.Element;
@@ -8,12 +8,11 @@ declare type CalendarItemProps<T extends BaseEventProps> = {
     options?: EventOptions<T>;
     /** Onclick handler */
     onClick?: (event: T, clickEvent: MouseEvent<HTMLElement>) => void;
-    tooltip?: React.ReactNode;
 };
 /**
  * Component voor een event met een tijdstip en NIET de hele dag duurt
  * @param props
  * @returns
  */
-export declare function CalendarItem<T extends BaseEventProps>({ event, options, tooltip, onClick, desc, }: CalendarItemProps<T>): JSX.Element;
+export declare function CalendarItem<T extends BaseEventProps>({ event, options, onClick, desc, }: CalendarItemProps<T>): JSX.Element;
 export {};

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { BaseEventProps, CalendarOptions } from './Props';
 import { JSDateTime } from '~/utils';
+import { ColorProp } from '~/loon-react-bulma-types';
 declare type DayContainerProps<T extends BaseEventProps> = {
     /** Events op deze dag */
     events: T[];
@@ -14,11 +15,12 @@ declare type DayContainerProps<T extends BaseEventProps> = {
     date: JSDateTime;
     /** Behoort deze dag tot de huidige maand ? */
     isCurrentMonth?: boolean;
+    tooltipColor: ColorProp;
 };
 /**
  * Component voor de dag-container in de maand-view
  * @param props
  * @returns
  */
-export declare function DayContainer<T extends BaseEventProps>({ options, date, onDayClick, onEventClick, events, isCurrentMonth, }: DayContainerProps<T>): JSX.Element;
+export declare function DayContainer<T extends BaseEventProps>({ options, date, onDayClick, onEventClick, events, tooltipColor, isCurrentMonth, }: DayContainerProps<T>): JSX.Element;
 export {};

package/dist/components/Calendar/Week/AlldayContainer.d.ts

@@ -1,16 +1,18 @@
 import React from 'react';
 import { BaseEventProps, CalendarOptions } from '../Props';
+import { ColorProp } from '~/loon-react-bulma-types';
 declare type AlldayContainerProps<T extends BaseEventProps> = {
     events: T[];
     /** Wat te doen als een event aangeklikt wordt */
     onEventClick?: (event: T, clickEvent: React.MouseEvent<HTMLElement>) => void;
     /** Wat te doen als een dag aangeklikt wordt */
     options?: CalendarOptions<T>;
+    tooltipColor: ColorProp;
 };
 /**
  * Component voor allday objects in de calendar
  * @param props
  * @returns
  */
-export declare function AlldayContainer<T extends BaseEventProps>({ options, events, onEventClick }: AlldayContainerProps<T>): JSX.Element;
+export declare function AlldayContainer<T extends BaseEventProps>({ options, events, onEventClick, tooltipColor, }: AlldayContainerProps<T>): JSX.Element;
 export {};

package/dist/components/Calendar/Week/HourRow.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { ColorProp } from '../../../loon-react-bulma-types';
 import { BaseEventProps, CalendarOptions } from '../Props';
 /**
  * Component om een uur-nummer weer te geven.
@@ -15,11 +16,12 @@ declare type HourSlotProps<T extends BaseEventProps> = {
     onEventClick?: (event: T, clickEvent: React.MouseEvent<HTMLElement>) => void;
     /** Options bij de calendar */
     options?: CalendarOptions<T>;
+    tooltipColor?: ColorProp;
 };
 /**
  * Component voor een uur-slot.
  * @param param0
  * @returns
  */
-export declare function HourSlot<T extends BaseEventProps>({ events, onEventClick, options }: HourSlotProps<T>): JSX.Element;
+export declare function HourSlot<T extends BaseEventProps>({ events, onEventClick, options, tooltipColor, }: HourSlotProps<T>): JSX.Element;
 export {};

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

@@ -1,17 +1,6 @@
 import { CSSProperties } from "react";
 /** default style van events */
-export declare const eventStylesBase: {
-    transition: string;
-    fontSize: string;
-    height: string;
-    margin: string;
-    borderRadius: string;
-    textAlign: string;
-    paddingLeft: string;
-    paddingRight: string;
-    overflow: string;
-    textOverflow: string;
-};
+export declare const eventStylesBase: CSSProperties;
 /** default styling van de header */
 export declare const headerContainerStylesBase: CSSProperties;
 /** default styling van de grid */

package/dist/components/Tooltip/Tooltip.d.ts

@@ -2,13 +2,16 @@ import React from 'react';
 import { ColorProp } from '~/loon-react-bulma-types';
 declare type PositionProp = 'bottom';
 export declare class Tooltip extends React.Component<{
-    content: React.ReactNode;
+    content?: React.ReactNode;
     color?: ColorProp;
     children: React.ReactNode;
+    display?: 'block' | 'inline';
 }> {
     static defaultProps: {
         position: PositionProp;
         color: ColorProp;
+        content: React.ReactNode;
+        display: 'block' | 'inline';
     };
     state: {
         active: boolean;

package/dist/hooks/index.d.ts

@@ -6,3 +6,4 @@ export * from './usePagination';
 export * from './useToggle';
 export * from './useUncontrolled';
 export * from './useValidatedState';
+export * from './useSessionStoredState';

package/dist/hooks/useLocalStoredState.d.ts

@@ -1,7 +1,3 @@
-/** Default serializer met `JSON.stringify` van de waar `T` naar een `string` */
-declare function serializeJSON<T>(value: T): string;
-/** Default deserializer met `JSON.parse` van een `string` naar de waarde `T` */
-declare function deserializeJSON<T>(value: string): T;
 declare type UseLocalStoredStateFn<T = string> = {
     /** Key to store the value with in Local Storage */
     key: string;
@@ -15,6 +11,7 @@ declare type UseLocalStoredStateFn<T = string> = {
 /**
  * Hook die werkt als `React.useState<T|undefined>()`, maar waarbij de waarde ook wordt opgeslagen in Local Storage.
  * De waarde blijft dan bij het refreshen van de pagina aanwezig. Als de pagina dan ververst wordt, word de al bestaande waarde gebruikt, niet de initialValue.
+ * Om de waarde te bewaren bij afsluiten van de browser, gebruik je de hook `{@link useSessionStoredState}`.
  * @param {UseLocalStoredStateFn} params voor de hook
  * @returns {[T, (value: T) => void]} tuple met een value en een setValue-function (net als React.useState)
  * @description
@@ -23,7 +20,7 @@ declare type UseLocalStoredStateFn<T = string> = {
  * | key          | `string`   | De key waaronder de waarde in Local Storage wordt opgeslagen. |
  * | initialValue | `T`        | De initiale waarde.                                           |
  * | serialize    | `function` | (optional) functie om de waarde om te zetten naar een string. Implementeer als de waarde __GEEN__ gebruik kan maken van `JSON.stringify()`! |
- * | deserialize  | `function` | De functie die een string omzet naar de waarde. Implementeer als de waarde __GEEN__ gebruik kan maken van `JSON.parse()`! |
+ * | deserialize  | `function` | (optional) De functie die een string omzet naar de waarde. Implementeer als de waarde __GEEN__ gebruik kan maken van `JSON.parse()`! |
  * @example
  * import { useLocalStoredState } from 'loon-bulma-react';
  * const [ value, setValue, removeFromLocalStorage ] = useLocalStoredState({ key: 'myKey', initialValue: 'Oompa Loompa' });
@@ -34,4 +31,4 @@ declare type UseLocalStoredStateFn<T = string> = {
  * // 5. you can also check the value in Local Storage in devtools.
  */
 declare function useLocalStoredState<T extends unknown>({ key, initialValue, deserialize, serialize }: UseLocalStoredStateFn<T>): readonly [T | undefined, (value: T) => void, () => void];
-export { useLocalStoredState, serializeJSON, deserializeJSON };
+export { useLocalStoredState };

package/dist/hooks/useSessionStoredState.d.ts

@@ -0,0 +1,38 @@
+declare type UseSessionStoredState<T = string> = {
+    /** Key to store the value with in Session Storage */
+    key: string;
+    /** Initial value (if its non-existent in Session Storage) */
+    initialValue: T;
+    /** Your own serializing-function. Implement when you cannot use `JSON.stringify` */
+    serialize?: (value: T, replacer?: (key: string, value: any) => any, space?: string | number) => string;
+    /** Your own deserializing-funtion. Implement when you cannot use `JSON.parse` */
+    deserialize?: (value: string, reviver?: (key: string, value: any) => any) => T;
+};
+/**
+ * Hook die werkt als `React.useState<T|undefined>()`, maar waarbij de waarde ook wordt opgeslagen in Session Storage.
+ * De waarde blijft dan bij het refreshen van de pagina aanwezig.
+ * Als de pagina dan ververst wordt, word de al bestaande waarde gebruikt, niet de initialValue.
+ *  Maar als de tab of de browser gesloten wordt, dan wordt de inhoud van de session storage gewist.
+ * Om de waarde te bewaren bij afsluiten van de browser, gebruik je de hook `{@link useLocalStoredState}`.
+ * @param {UseSessionStoredState} params voor de hook
+ * @returns {[T, (value: T) => void]} tuple met een `value` en een `setValue`-function (net als `React.useState`)
+ * @description
+ * | Property     | Type       | Description                                                   |
+ * |--------------|------------|---------------------------------------------------------------|
+ * | key          | `string`   | De key waaronder de waarde in Session Storage wordt opgeslagen. |
+ * | initialValue | `T`        | De initiale waarde.                                           |
+ * | serialize    | `function` | (optional) functie om de waarde om te zetten naar een string. Implementeer als de waarde __GEEN__ gebruik kan maken van `JSON.stringify()`! |
+ * | deserialize  | `function` | (optional) De functie die een string omzet naar de waarde. Implementeer als de waarde __GEEN__ gebruik kan maken van `JSON.parse()`! |
+ * @example
+ * import { useSessionStoredState } from 'loon-bulma-react';
+ * const [ value, setValue, removeFromSessionStorage ] = useSessionStoredState({ key: 'myKey', initialValue: 'Oompa Loompa' });
+ * // 1. value is 'Oompa Loompa', put it somewhere on the screen
+ * // 2. change the value to something else
+ * // 3. refresh the page.
+ * // 4. see te new value on the page.
+ * // 5. you can also check the value in Local Storage in devtools.
+ * // 6. close the browser / tab
+ * // 7. check the value in session storage. it should be gone.
+ */
+declare function useSessionStoredState<T extends unknown>({ key, initialValue, deserialize, serialize }: UseSessionStoredState<T>): readonly [T | undefined, (value: T) => void, () => void];
+export { useSessionStoredState };