@scheels-softdev/kendoreact-generics 2.2.2 → 2.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -28,5 +28,5 @@ export function FilterCellDropdown(props) {
28
28
  });
29
29
  };
30
30
  // Render a div containing a GenericDropdownWithSearch component and a Clear button
31
- return (_jsxs("div", Object.assign({ className: "k-filtercell", "data-testid": "dropdownFilter" }, { children: [_jsx(GenericDropdown, { data: props.data, changeEvent: onChange, selectedId: props.value, textFields: [...props.textFields], separator: props.separator }), _jsx(Button, { title: "Clear", disabled: !hasValue(props.value), onClick: onClearButtonClick, icon: "filter-clear" })] })));
31
+ return (_jsxs("div", Object.assign({ className: "k-filtercell", "data-testid": "dropdownFilter" }, { children: [_jsx(GenericDropdown, { data: props.data, onChange: onChange, selectedId: props.value, textFields: [...props.textFields], separator: props.separator }), _jsx(Button, { title: "Clear", disabled: !hasValue(props.value), onClick: onClearButtonClick, icon: "filter-clear" })] })));
32
32
  }
@@ -1,19 +1,30 @@
1
- export declare function GenericDropdown<T>({ data, // array of data objects
2
- selectedId, // id of the selected data object
3
- selectedData, //if there is no identity key in the object and you need to compare the entire object, use this instead of selectedId
4
- changeEvent, // function to call when the selected value changes
5
- textFields, // array of field names to use for text values
6
- separator, // optional separator to use for concatenating text values
7
- disabled, // boolean to disable the dropdown
8
- idField, title, showClearButton, }: {
1
+ import { CSSProperties } from "react";
2
+ /**
3
+ * JSX Component for displaying selected images in a fullscreen Modal
4
+ * @param {object} props
5
+ @param {T[]} props.data array of data objects
6
+ @param {number?} props.selectedId id of the selected data object
7
+ @param {T?} props.selectedData if there is no identity key in the object and you need to compare the entire object, use this instead of selectedId
8
+ @param {Function} props.onChange function to call when the selected value changes
9
+ @param {(keyof T)[]?} props.textFields array of field names to use for text values
10
+ @param {string?} props.separator optional separator to use for concatenating text values
11
+ @param {object?} props.disabled boolean to disable the dropdown
12
+ @param {keyof T?} props.idField if the id field to look at isn't 'id', what is it?
13
+ @param {string?} props.title the label of the dropdown
14
+ @param {boolean?} props.showClearButton set to false if you want to hide clear button
15
+ @param {CSSProperties?} props.style the CSS Properties you want to use. It is generally recommended to do styling in your App.css file but if necessary this prop is available to you
16
+ * @returns
17
+ */
18
+ export declare function GenericDropdown<T>({ data, selectedId, selectedData, onChange, textFields, separator, disabled, idField, title, hideClearButton, style, }: {
9
19
  data: T[];
10
20
  selectedId?: number;
11
21
  selectedData?: T;
12
- changeEvent: Function;
22
+ onChange: Function;
13
23
  textFields: (keyof T)[];
14
24
  separator?: string;
15
25
  idField?: keyof T;
16
26
  disabled?: boolean;
17
27
  title?: string;
18
- showClearButton?: boolean;
28
+ hideClearButton?: boolean;
29
+ style?: CSSProperties;
19
30
  }): import("react/jsx-runtime").JSX.Element;
@@ -5,16 +5,24 @@ import { useEffect, useRef, useState } from "react";
5
5
  import { getTextValue } from "./Utility";
6
6
  //TODO add a style property
7
7
  //TODO add metadata documentation
8
- // TODO change changeEvent to onChange
9
8
  // component that renders a dropdown with a search filter
10
- export function GenericDropdown({ data, // array of data objects
11
- selectedId, // id of the selected data object
12
- selectedData, //if there is no identity key in the object and you need to compare the entire object, use this instead of selectedId
13
- changeEvent, // function to call when the selected value changes
14
- textFields, // array of field names to use for text values
15
- separator, // optional separator to use for concatenating text values
16
- disabled, // boolean to disable the dropdown
17
- idField, title, showClearButton, }) {
9
+ /**
10
+ * JSX Component for displaying selected images in a fullscreen Modal
11
+ * @param {object} props
12
+ @param {T[]} props.data array of data objects
13
+ @param {number?} props.selectedId id of the selected data object
14
+ @param {T?} props.selectedData if there is no identity key in the object and you need to compare the entire object, use this instead of selectedId
15
+ @param {Function} props.onChange function to call when the selected value changes
16
+ @param {(keyof T)[]?} props.textFields array of field names to use for text values
17
+ @param {string?} props.separator optional separator to use for concatenating text values
18
+ @param {object?} props.disabled boolean to disable the dropdown
19
+ @param {keyof T?} props.idField if the id field to look at isn't 'id', what is it?
20
+ @param {string?} props.title the label of the dropdown
21
+ @param {boolean?} props.showClearButton set to false if you want to hide clear button
22
+ @param {CSSProperties?} props.style the CSS Properties you want to use. It is generally recommended to do styling in your App.css file but if necessary this prop is available to you
23
+ * @returns
24
+ */
25
+ export function GenericDropdown({ data, selectedId, selectedData, onChange, textFields, separator, disabled, idField, title, hideClearButton, style, }) {
18
26
  if (selectedId !== undefined && selectedData !== undefined) {
19
27
  throw new Error("You cannot provide both selectedData and selectedId to GenericDropdown.");
20
28
  }
@@ -73,12 +81,12 @@ idField, title, showClearButton, }) {
73
81
  console.log(returnVal);
74
82
  return returnVal;
75
83
  };
76
- return (_jsx("div", Object.assign({ "data-testid": "dropdown" }, { children: _jsx(ComboBox, { style: { width: "100%" }, label: title, disabled: disabled, data: state.subsetData, textField: "textValue", virtual: {
84
+ return (_jsx("div", Object.assign({ "data-testid": "dropdown" }, { children: _jsx(ComboBox, { style: style, label: title, disabled: disabled, data: state.subsetData, textField: "textValue", virtual: {
77
85
  // enable virtualization for large datasets
78
86
  total: state.total,
79
87
  pageSize: pageSize,
80
88
  skip: state.skip,
81
89
  }, suggest: true, onPageChange: pageChange, filterable: true, onFilterChange: onFilterChange, popupSettings: {
82
90
  height: "210px",
83
- }, onChange: (e) => changeEvent(e), onBlur: (e) => e.nativeEvent.preventDefault(), clearButton: showClearButton, value: !selectedId && !selectedData ? null : findByIndex(selectedId, idField, dataList) || findByValue(selectedData, dataList) || null }) })));
91
+ }, onChange: (e) => onChange(e), onBlur: (e) => e.nativeEvent.preventDefault(), clearButton: !hideClearButton, value: !selectedId && !selectedData ? null : findByIndex(selectedId, idField, dataList) || findByValue(selectedData, dataList) || null }) })));
84
92
  }
package/README.md CHANGED
@@ -35,7 +35,7 @@ Note: This package has only been tested with typescript. if you're using javascr
35
35
  data: T[];
36
36
  selectedId: number;
37
37
  selectedData?: T;
38
- changeEvent: event: (ComboBoxChangeEvent) => void;
38
+ onChange: event: (ComboBoxChangeEvent) => void;
39
39
  textFields: (keyof T)[];
40
40
  separator?: string;
41
41
  idField?: keyof T;
@@ -47,7 +47,7 @@ Note: This package has only been tested with typescript. if you're using javascr
47
47
 
48
48
  - Array of T. the Definition of what T is matters for the "textFields" prop
49
49
 
50
- #### changeEvent
50
+ #### onChange
51
51
 
52
52
  - Event passed is a ComboBoxChangeEvent (from kendo-react-dropdowns)
53
53
 
@@ -171,7 +171,7 @@ Note: This package has only been tested with typescript. if you're using javascr
171
171
  data: T[];
172
172
  selectedId: number;
173
173
  textFields: (keyof T)[];
174
- changeEvent: (e: ComboBoxChangeEvent) => void;
174
+ onChange: (e: ComboBoxChangeEvent) => void;
175
175
  separator?: string;
176
176
  checkEditField?: boolean;
177
177
  isEditing?: boolean;
@@ -189,7 +189,7 @@ Note: This package has only been tested with typescript. if you're using javascr
189
189
  - This is defined as (keyof T)[].
190
190
  - For example, if my dropdown is fed a list of employee Statuses, I could feed it a "StatusName" field (assuming my Status objects have that key) and it could display something like "Active", "Terminated", or "On Leave"
191
191
 
192
- #### changeEvent
192
+ #### onChange
193
193
 
194
194
  - Pass what you want the event to do. the event you will be passed is a ComboBoxChangeEvent. The relevant information you're likely to need is stored in e.target.value
195
195
 
@@ -288,7 +288,7 @@ cost: number
288
288
  data: T[]
289
289
  selectedData: T
290
290
  textFields: (keyof T)[]
291
- changeEvent: (e: ComboBoxChangeEvent) => void
291
+ onChange: (e: ComboBoxChangeEvent) => void
292
292
  separator?: string
293
293
  checkEditField?: boolean
294
294
  isEditing?: boolean
@@ -307,7 +307,7 @@ showClearButton?: boolean
307
307
  - This is defined as (keyof T)[].
308
308
  - For example, if my dropdown is fed a list of employee objects with a `firstName`, `lastName`, and `id` key, I would pass `["firstName","lastName"]` to see "John Williams", or `["firstName","lastName","id"]` to see "John Doe 19382032141".
309
309
 
310
- #### changeEvent
310
+ #### onChange
311
311
 
312
312
  - Pass what you want the event to do. The event you will be passed is a ComboBoxChangeEvent. The relevant information you're likely to need is stored in `e.target.value`.
313
313
 
@@ -3,7 +3,7 @@ export declare function CommandCellDDWithoutId<T>(props: {
3
3
  data: T[];
4
4
  selectedData: T;
5
5
  textFields: (keyof T)[];
6
- changeEvent: (e: ComboBoxChangeEvent) => void;
6
+ onChange: (e: ComboBoxChangeEvent) => void;
7
7
  separator?: string;
8
8
  checkEditField?: boolean;
9
9
  isEditing?: boolean;
@@ -3,7 +3,7 @@ export declare function CommandCellDropdown<T>(props: {
3
3
  data: T[];
4
4
  selectedId: number;
5
5
  textFields: (keyof T)[];
6
- changeEvent: (e: ComboBoxChangeEvent) => void;
6
+ onChange: (e: ComboBoxChangeEvent) => void;
7
7
  separator?: string;
8
8
  checkEditField?: boolean;
9
9
  isEditing?: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scheels-softdev/kendoreact-generics",
3
- "version": "2.2.2",
3
+ "version": "2.2.3",
4
4
  "main": "index.js",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1",