loon-bulma-react 2022.1.0 → 2022.1.4

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,12 +462,44 @@ 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.
 
+#### 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:
 
 - op de DataTable props zit de `rowClasses` function voor classes op de `<tr>`.
 - op de DataTableColum props zit de `columnClasses` function voor classes op de `<td>`.
   De gebruikte classes kunnen in een globale css file of in een lokaal geïmporteerde file staan (zoals hieronder).
-  > LET OP: in combinatie met `isStriped: {true}` werkt het zetten van `background-color` ALLEEN in combinatie met `!important`. Anders wordt de achtergrondkleur weer overschreven door Bulma.
+  > #### LET OP!
+  >
+  > in combinatie met `isStriped: {true}` werkt het zetten van `background-color` ALLEEN in combinatie met `!important`. Anders wordt de achtergrondkleur weer overschreven door Bulma.
 
 ```css
 /** datatable.styles.css */
@@ -486,28 +519,28 @@ const nameSortFn = (a: any, b: any) => {
   const aNaam = a.first_name + ' ' + a.last_name;
   const bNaam = b.first_name + ' ' + b.last_name;
   if (aNaam < bNaam) return -1;
-  if (aNaam > bNaam) return 1;
-  return 0;
+  else if (aNaam > bNaam) return 1;
+  else return 0;
 };
 
-const dataTableHeaders = [
+const columns = [
   { sort: true, value: 'id' },
   {
     header: 'Naam',
     sort: nameSortFn,
     value: (v: any) => `${v.first_name} ${v.last_name}`,
   },
-  { header: 'Voornaam', sort: true, value: 'first_name' },
-  { header: 'Achternaam', sort: true, 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: true, value: 'is_active'}
   { header: 'Geslacht', sort: true, value: 'gender' },
   { header: 'Taal', sort: true, value: 'language' },
   {
     header: '',
-    sort: false,
     value: () => <InvertedButton.Danger>DEL</InvertedButton.Danger>,
   },
 ];
@@ -526,7 +559,9 @@ export function DataTableTab() {
     <DataTable
       data={data}
       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"
@@ -535,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/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,5 @@ 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;
 };

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[];