loon-bulma-react 2023.0.23 → 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/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 };

package/dist/index.js

@@ -712,20 +712,22 @@ function useHotkeys(hotkeys) {
   }, [hotkeys]);
 }
 
-function serializeJSON(value) {
+function deserializeJSON(value) {
   try {
-    return JSON.stringify(value);
+    return JSON.parse(value);
   } catch (error) {
-    throw new Error("useLocalState failed to serialize the value: " + error.message);
+    throw new Error("useLocalState failed to deserialize the value: " + error.message);
   }
 }
-function deserializeJSON(value) {
+
+function serializeJSON(value) {
   try {
-    return JSON.parse(value);
+    return JSON.stringify(value);
   } catch (error) {
-    throw new Error("useLocalState failed to deserialize the value: " + error.message);
+    throw new Error("useLocalState failed to serialize the value: " + error.message);
   }
 }
+
 function useLocalStoredState(_ref) {
   var key = _ref.key,
     initialValue = _ref.initialValue,
@@ -916,6 +918,43 @@ function useValidatedState(initialValue, validation) {
   }, onChange];
 }
 
+function useSessionStoredState(_ref) {
+  var key = _ref.key,
+    initialValue = _ref.initialValue,
+    _ref$deserialize = _ref.deserialize,
+    deserialize = _ref$deserialize === void 0 ? deserializeJSON : _ref$deserialize,
+    _ref$serialize = _ref.serialize,
+    serialize = _ref$serialize === void 0 ? serializeJSON : _ref$serialize;
+  var _React$useState = React__default.useState(function () {
+      if (typeof window === "undefined") return initialValue;
+      try {
+        var item = window.sessionStorage.getItem(key);
+        return item ? deserialize(item) : initialValue;
+      } catch (error) {
+        console.error("useLocalState failed to get the value: " + error.message);
+        return initialValue;
+      }
+    }),
+    storedValue = _React$useState[0],
+    setStoredValue = _React$useState[1];
+  var setValue = React__default.useCallback(function (value) {
+    try {
+      var val = value instanceof Function ? value(storedValue) : value;
+      setStoredValue(val);
+      if (typeof window !== "undefined") window.sessionStorage.setItem(key, serialize(val));
+    } catch (error) {
+      console.error("useLocalState failed to store the value: " + error.message);
+    }
+  }, []);
+  var remove = React__default.useCallback(function () {
+    if (typeof window !== "undefined") window.sessionStorage.removeItem(key);
+  }, []);
+  return [
+  storedValue,
+  setValue,
+  remove];
+}
+
 function dataTableReducer(state, action) {
   switch (action.type) {
     case 'SET':
@@ -6280,6 +6319,7 @@ function TextInput(props) {
     touched: state.touched,
     outsideError: errorMsg
   });
+  var startIcon = state.type === 'text' ? freeSolidSvgIcons.faKeyboard : state.type === 'tel' ? freeSolidSvgIcons.faPhone : freeSolidSvgIcons.faLink;
   return React__default.createElement(InputContainer, {
     size: props.size,
     label: label,
@@ -6310,7 +6350,10 @@ function TextInput(props) {
     onKeyDown: props.onKeyDown,
     disabled: props.disabled
   }), React__default.createElement(InputIcons, {
-    icons: props.icons,
+    icons: _extends({}, {
+      start: startIcon,
+      end: undefined
+    }, props.icons),
     valid: state.valid,
     touched: state.touched,
     defaultIcon: freeSolidSvgIcons.faKeyboard
@@ -7655,6 +7698,7 @@ exports.useHotkeys = useHotkeys;
 exports.useLocalStoredState = useLocalStoredState;
 exports.useNotifier = useNotifier;
 exports.usePagination = usePagination;
+exports.useSessionStoredState = useSessionStoredState;
 exports.useToggle = useToggle;
 exports.useUncontrolled = useUncontrolled;
 exports.useValidatedState = useValidatedState;