loon-bulma-react 2022.1.1 → 2022.1.5

package/README.md

@@ -91,9 +91,10 @@ Dan wordt altijd de laatste versie van die tag geïnstalleerd, in plaats van de
 > De Major versies beginnen met het jaar waar ze bijhoren. dus de versie voor Loon-2021 is `2021.*.*`
 > Er zijn nu 3 major versies.
 >
-> - y2020 --> Testversie voor 2020, installeren met `npm install loon-bulma-react@y2021`.
-> - y2021 --> Versie is voor 2021, installeren met `npm install loon-bulma-react@y2021`. Zelfde als `latest`
-> - latest --> Default versie die geïnstalleerd wordt met `npm install loon-bulma-react`
+> - `@y2020` --> Testversie voor **2020**, installeren met `npm install loon-bulma-react@y2021`.
+> - `@y2021` --> Versie voor **2021**, installeren met `npm install loon-bulma-react@y2021`.
+> - `@y2022` --> Versie voor **2022**, installeren met `npm install loon-bulma-react@y2022`. Zelfde als `latest`
+> - `@latest` --> Default versie die geïnstalleerd wordt met `npm install loon-bulma-react`
 
 ## Gebruik <a id="gebruik"></a>
 
@@ -461,16 +462,35 @@ import { ButtonGroup, Bttn, Button, LightButton, InvertedButton, OutlinedButton
 
 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.
 
-> #### LET OP!
->
-> Het sorteren is aangepast. Om een column sorteerbaar te maken, moet je een van de onderstaande 4 waarden opgeven:
->
-> - `'string'`: sorteer deze kolom alfabetisch
-> - `'boolean'`: sorteer deze kolom als een boolean (true/false)
-> - `'number'`: sorteer deze kolom numeriek
-> - `'function'`: sorteer deze kolom met deze `function`<sup>\*</sup>.
->
-> <i> <sup>\*</sup>: Als deze kolom JSX-Elementen bevat, werkt het sorteren _NIET_. Dan _MOET_ er een sort-function worden opgegeven om wel te kunnen sorteren.</i>
+#### Sorteren
+
+Het sorteren is aangepast. Om een column sorteerbaar te maken, moet je een van de onderstaande 4 waarden opgeven:
+
+- false: deze kolom is **niet** sorteerbaar _(default)_
+- true: deze kolom is sorteerbaar.
+- `'function'`: sorteer deze kolom met deze `function`.
+
+##### <em>LET OP
+
+Als deze kolom JSX-Elementen bevat, _MOET_ er een sort-function worden opgegeven om wel te kunnen sorteren.</em>
+
+#### Search
+
+Er is een ingebouwde zoekfunctie die _alle_ kolommen doorzoekt voor gefilterede items. Het is ook mogelijk om een _eigen_ zoek-function toe te voegen. Als die is gedefinieerd wordt de default zoek-methode _niet_ gebruikt. Door op de props van de `<DataTable />` de prop `onSearch` aan te vullen met een function, gebruik je je eigen zoekfunctie. De Zoekfunctie ziet er zo uit:
+
+```ts
+type search = (searchTerm: string, items: T[]) => T[];
+
+const mySearch = (s: string, users: IUser[]): IUser[] => {
+  return users.filter((u) => u.name.toLowerCase().includes(s.toLowerCase()));
+};
+```
+
+- _@param_ searchTerm: de zoekterm in het zoek-veld van de datatable
+- _@param_ items: de items waarin gezocht / gefilterd moet worden
+- _@returns_: de gefilterde items
+
+#### Custom classes
 
 Om eigen classes toe te voegen aan rows en aan columns zijn er methodes:
 
@@ -504,21 +524,21 @@ const nameSortFn = (a: any, b: any) => {
 };
 
 const columns = [
-  { sort: 'number', value: 'id' },
+  { sort: true, value: 'id' },
   {
     header: 'Naam',
     sort: nameSortFn,
     value: (v: any) => `${v.first_name} ${v.last_name}`,
   },
-  { header: 'Voornaam', sort: 'string', value: 'first_name' },
-  { header: 'Achternaam', sort: 'string', value: 'last_name' },
+  { header: 'Voornaam', sort: false, value: 'first_name' },
+  { header: 'Achternaam', sort: true value: 'last_name' },
   {
     value: 'email',
     columnClasses: (usr) => (usr.email.includes('.com') ? 'is-marked' : ''),
   },
-  { header: 'Active', sort: 'boolean', value: 'is_active'}
-  { header: 'Geslacht', sort: 'string', value: 'gender' },
-  { header: 'Taal', sort: 'string', value: 'language' },
+  { header: 'Active', sort: true, value: 'is_active'}
+  { header: 'Geslacht', sort: true, value: 'gender' },
+  { header: 'Taal', sort: true, value: 'language' },
   {
     header: '',
     value: () => <InvertedButton.Danger>DEL</InvertedButton.Danger>,
@@ -538,13 +558,10 @@ export function DataTableTab() {
   return (
     <DataTable
       data={data}
-      headerContent={
-        <Button.Primary>Add</Button.Primary>
-        <Button.Warning>Change</Button.Warning>
-        <Button.Success>Refresh</Button.Success>
-      }
       columns={columns}
+      onSearch={(term: string, users: IUser[]) => users.filter((u) => u.language.startsWith(term))}
       onRowSelected={(i, r) => handleRowClick(i, r)}
+      defaultSortCol="Naam"
       rowClasses={(item: IUser) => (item.first_name.startsWith('C') ? 'is-dangerous' : '')}
       searchTxt="Zoek een persoon ..."
       rowIdentifier="id"
@@ -553,6 +570,11 @@ export function DataTableTab() {
       narrow={false}
       maxRows={20}
       bordered={false}
+      headerContent={
+        <Button.Primary>Add</Button.Primary>
+        <Button.Warning>Change</Button.Warning>
+        <Button.Success>Refresh</Button.Success>
+      }
     />
   );
 }

package/dist/components/Button/ButtonBase.d.ts

@@ -8,7 +8,7 @@ import { ButtonProps } from './ButtonProps';
  * @returns
  */
 export declare function BaseButton(props: {
-    action?(e: any): any | void;
+    onClick?(e: any): any | void;
     children?: ReactNode;
     type?: 'submit' | 'button' | 'reset' | undefined;
     disabled?: boolean | undefined;

package/dist/components/Button/ButtonProps.d.ts

@@ -9,7 +9,7 @@ export declare type ButtonProps = {
     /** wat moet er op de button komen (text, icons etc.) */
     children?: ReactNode;
     /** button type: <button type="..."> */
-    type?: 'submit' | 'button' | 'reset' | undefined;
+    type?: 'submit' | 'button' | 'reset';
     /** de grootte van de button */
     size?: SizeProp;
     /** is de buttton disabled? */

package/dist/components/ButtonGroup/ButtonGroup.d.ts

@@ -5,16 +5,8 @@ export declare type ButtonGroupProps = {
     children?: ReactNode;
     /** Moeten de buttons aan elkaar vast gezet worden (default = false) */
     merge?: boolean;
-    /** aan welke kant moeten de buttons aligned worden (default = (l)eft)
-     * @deprecated use alignment
-     */
-    align?: AlignmentProp | undefined;
     /** aan welke kant moeten de buttons aligned worden (default = l) */
     alignment?: AlignmentProp | undefined;
-    /** hoe groot moeten de buttons worden (default = normal)
-     * @deprecated: use 'size'
-     */
-    sizing?: SizeProp;
     /** hoe groot moeten de buttons worden (default = normal) */
     size?: SizeProp;
 };

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

@@ -4,6 +4,9 @@ import { AlignmentProp } from '../..';
 export declare type DataTableProps<T extends unknown> = {
     /** Titels voor de kolommen als die afwijken van de object-properties */
     columns: DataTableColumn<T>[];
+    /** header-name van de default-sorteer-kolom (default: 1e kolom die 'sortable' is) */
+    defaultSortCol?: string;
+    /** (optionele) content voor de header. Verschijnt links van de search-bar */
     headerContent?: React.ReactNode;
     /** De array met daarin de data voor de datatabel */
     data: T[];
@@ -28,6 +31,13 @@ export declare type DataTableProps<T extends unknown> = {
     maxRows?: number;
     /** placeholder voor zoekveld. Als er geen placeholder is (undefined or emptystring), is er geen zoek-veld */
     searchTxt?: string;
+    /**
+     * (Optionele) eigen zoek-functie. De default-zoek-functie wordt dan vervangen.
+     * @param searchTerm de content van het zoekveld
+     * @param items de items waarbinnen gezocht moet worden
+     * @returns een array met de gefilterde items
+     */
+    onSearch?: (searchTerm: string, items: T[]) => T[];
     /** terugkoppeling voor een geselecteerde rij.
      * @param item: Het geselecteerde item
      * @param row: de tabel-rij waarop geklikt is (<tr> tag). Om de row 'selected' te laten lijken: toggle de 'is-selected' class
@@ -70,7 +80,7 @@ export declare type DataTableColumn<T> = {
      * - boolean: sorteer op true/false
      * - function: een eigen sorteermechanisme
      */
-    sort?: 'string' | 'number' | 'boolean' | ((a: T, B: T) => -1 | 0 | 1 | number);
+    sort?: true | false | ((a: T, B: T) => -1 | 0 | 1 | number);
     /** Wat is de object property die bij deze kolom hoort als je wil sorteren
      * - string: de object-property-key --> obj['colValue']
      * - function: samenstellen van de waarde.

package/dist/components/Form/BaseInputProps.d.ts

@@ -44,5 +44,33 @@ export declare type FormValidationType = {
      * @param val de nieuwe te valideren waarde
      * @returns een string met daarin de foutmelding OF een lege string voor een valid waarde.
      */
-    onValidate?: (val: string | string[] | number | boolean | Date) => string;
+    onValidate?: (val: string | string[] | number | number[] | boolean | Date) => string;
+};
+export declare type BaseState = {
+    /** de naam die in foutmeldingen komt */
+    description: string;
+    /** de fout-melding, '' voor valid */
+    invalidMsg: string;
+    /** is de waarde invalid */
+    valid: boolean;
+    /** is de input aangeraakt */
+    touched: boolean;
+    /** validatie-object voor deze input */
+    validation?: FormValidationType;
+};
+export declare type BaseChangeStateType = {
+    type: 'CHANGE';
+    invalidMsg: string;
+};
+export declare type BaseTouchStateType = {
+    type: 'TOUCH';
+    touched: boolean;
+};
+export declare type BaseSetStateType = {
+    type: 'SET';
+    validation?: FormValidationType;
+};
+export declare type BaseFocusStateType = {
+    type: 'FOCUS';
+    focus: boolean;
 };

package/dist/components/Form/FormProps.d.ts

@@ -1,3 +1,4 @@
+import { ColorProp } from '../../loon-react-bulma-types';
 import { FormValidationType } from './BaseInputProps';
 import { SelectOptionGroupType, SelectOptionType } from './SelectProps';
 /** Props voor de Form-component */
@@ -43,6 +44,8 @@ export declare type FormFieldProps = {
     label?: string;
     /** is het field gevalideerd en wat is daar de uitkomst van. */
     placeholder?: string;
+    /** (optioneel) id van een field. Anders wordt de "name" gebruikt  */
+    id?: string;
     valid?: boolean;
     /** de waarde van de input.
      * Voor multi-range-inputs: een number[] van twee waarden: [valueA, valueB]
@@ -55,7 +58,7 @@ export declare type FormFieldProps = {
     /** object gebruikt voot validatie */
     validation?: FormValidationType;
     /** input type: <input type="..." /> */
-    type: 'text' | 'number' | 'email' | 'password' | 'date' | 'datetime' | 'time' | 'textarea' | 'select' | 'checkbox' | 'tel' | 'url' | 'range' | 'multirange' | 'hidden';
+    type: 'text' | 'number' | 'email' | 'password' | 'date' | 'datetime' | 'time' | 'textarea' | 'select' | 'multiselect' | 'checkbox' | 'tel' | 'url' | 'range' | 'multirange' | 'hidden';
     /** voor type 'number', 'time', 'range' en 'multirange' kan er een step-grootte worden opgegeven */
     step?: number;
     /** autocomplete voor gebruik met wachtwoorden, usernames & wachtwoordmanagers */
@@ -72,7 +75,7 @@ export declare type FormButton = {
     /** button type <button type="..." */
     type: 'submit' | 'reset' | 'button';
     /** button color: s: success-button, d: danger-button, n: primarycolor button */
-    color?: 'success' | 's' | 'danger' | 'd' | 'neutral' | 'n';
+    color?: ColorProp;
     /** wat als er op de button geklikt wordt? (optional) */
     onClick(e: MouseEvent): any | void;
 };

package/dist/components/Form/MultiSelect.d.ts

@@ -7,6 +7,7 @@ export declare type MultiSelectInputProps = BaseInputProps & {
     value?: string[];
     /** de values voor de options. DEZE MOETEN UNIEK ZIJN! */
     options: string[] | SelectOptionType[] | SelectOptionGroupType[];
+    /** de grootte van de multi-select */
     size?: SizeProp;
     /** aantal zichtbare rijen zonder scrollen */
     rows?: number;

package/dist/components/Form/Select.d.ts

@@ -17,7 +17,7 @@ export declare type SelectInputProps = BaseInputProps & {
     onValueChanged?(newVal: string | number, valid: boolean): void;
 };
 /**
- * Een sselect-input om een waarde te selecteren uit een lijstje
+ * Een select-input om een waarde te selecteren uit een lijstje
  * - lijstje van strings
  * - lijstje van {value: string, label: string, disabled: boolean}
  * - lijstje van {value: string, label: string, disabled: boolean} per group (<optgroup>)

package/dist/components/Form/SelectProps.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare type SelectOptionType = {
     /** de waarde van een option */
     value: number | string;
@@ -12,3 +13,9 @@ export declare type SelectOptionGroupType = {
     /** De options */
     selectOptions: SelectOptionType[];
 };
+/**
+ * Maak een <optgroup>...</optgroup> of <option>...</option> array voor een <select> of een multiselect
+ * @param options de options
+ * @returns JSX-elementen-array
+ */
+export declare function createSelectOptions(options: string[] | SelectOptionType[] | SelectOptionGroupType[]): JSX.Element[];