@scheels-softdev/kendoreact-generics 1.6.14 → 1.7.0

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scheels-softdev/kendoreact-generics",
3
- "version": "1.6.14",
3
+ "version": "1.7.0",
4
4
  "main": "index.js",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1",
@@ -0,0 +1,54 @@
1
+ import { ComboBoxChangeEvent } from "@progress/kendo-react-dropdowns";
2
+ import { GridFilterCellProps } from "@progress/kendo-react-grid";
3
+ import { Button } from "@progress/kendo-react-buttons";
4
+ import { GenericDropdown } from "./GenericDropdown";
5
+
6
+ interface DropdownFilterCellProps<T> extends GridFilterCellProps {
7
+ defaultItem?: any;
8
+ data: T[];
9
+ descriptionKeys: (keyof T)[];
10
+ separator?: string;
11
+ }
12
+
13
+ // Define the DropdownFilterCell component with props of type DropdownFilterCellProps
14
+ export function FilterCellDropdown<T>(props: DropdownFilterCellProps<T>) {
15
+ // Define a function that returns true if a value is not undefined or null, and is different from the default item
16
+ let hasValue: any = (value: string) => Boolean(value && value !== props.defaultItem);
17
+
18
+ // Define an onChange function that will be called when the ComboBox value changes
19
+ const onChange = (event: ComboBoxChangeEvent) => {
20
+ // Update the hasValue variable based on the new value of the ComboBox
21
+ hasValue = hasValue(event.target.value.id);
22
+ // Call the onChange function passed down as a prop, passing a filter object with the new value and operator
23
+ props.onChange({
24
+ value: hasValue ? event.target.value.id : "", // Use the ID of the selected value as the filter value
25
+ operator: hasValue ? "eq" : "", // Use the "eq" operator if the value is non-empty, otherwise use an empty string
26
+ syntheticEvent: event.syntheticEvent,
27
+ });
28
+ };
29
+
30
+ // Define an onClearButtonClick function that will be called when the Clear button is clicked
31
+ const onClearButtonClick = (event: any) => {
32
+ event.preventDefault();
33
+ // Call the onChange function passed down as a prop, passing a filter object with empty values
34
+ props.onChange({
35
+ value: "", // Set the filter value to an empty string
36
+ operator: "", // Set the operator to an empty string
37
+ syntheticEvent: event,
38
+ });
39
+ };
40
+
41
+ // Render a div containing a GenericDropdownWithSearch component and a Clear button
42
+ return (
43
+ <div className="k-filtercell" data-testid="dropdownFilter">
44
+ <GenericDropdown
45
+ data={props.data}
46
+ changeEvent={onChange}
47
+ selectedId={props.value}
48
+ textFields={[...props.descriptionKeys]}
49
+ separator={props.separator}
50
+ />
51
+ <Button title="Clear" disabled={!hasValue(props.value)} onClick={onClearButtonClick} icon="filter-clear" />
52
+ </div>
53
+ );
54
+ }
@@ -0,0 +1,110 @@
1
+ import { ComboBox, ComboBoxFilterChangeEvent, ComboBoxPageChangeEvent } from "@progress/kendo-react-dropdowns";
2
+ import { filterBy } from "@progress/kendo-data-query";
3
+ import { useEffect, useRef, useState } from "react";
4
+ import { getTextValue } from "./Utility";
5
+
6
+ // component that renders a dropdown with a search filter
7
+ export function GenericDropdown<T>({
8
+ data, // array of data objects
9
+ selectedId, // id of the selected data object
10
+ changeEvent, // function to call when the selected value changes
11
+ textFields, // array of field names to use for text values
12
+ separator, // optional separator to use for concatenating text values
13
+ disabled, // boolean to disable the dropdown
14
+ idField,
15
+ title,
16
+ }: {
17
+ data: T[];
18
+ selectedId: number;
19
+ changeEvent: Function;
20
+ textFields: (keyof T)[];
21
+ separator?: string;
22
+ idField?: keyof T;
23
+ disabled?: boolean;
24
+ title?: string;
25
+ }) {
26
+ //local state
27
+ const pageSize = 8;
28
+ const [dataList, setDataList] = useState(
29
+ data.map((x) => {
30
+ return {
31
+ ...x,
32
+ textValue: getTextValue(
33
+ x,
34
+ textFields.map((x) => x.toString()),
35
+ separator
36
+ ),
37
+ };
38
+ })
39
+ );
40
+ const [state, setState] = useState({
41
+ skip: 0,
42
+ total: dataList.length,
43
+ subsetData: dataList.slice(0, pageSize),
44
+ });
45
+
46
+ //external function variables
47
+ const filteredData = useRef(dataList.slice());
48
+ //function creation
49
+ // function to handle filter changes
50
+ const onFilterChange = (event: ComboBoxFilterChangeEvent) => {
51
+ if (event.filter.value?.length) filteredData.current = filterBy(dataList.slice(), event.filter);
52
+ else filteredData.current = dataList;
53
+ const newData = filteredData.current.slice(0, pageSize);
54
+ setState({
55
+ subsetData: newData,
56
+ skip: 0,
57
+ total: filteredData.current.length,
58
+ });
59
+ };
60
+ // function to handle page changes for virtualization
61
+ const pageChange = (event: ComboBoxPageChangeEvent) => {
62
+ const skip = event.page.skip;
63
+ const take = event.page.take;
64
+ const newSubsetData = filteredData.current.slice(skip, skip + take);
65
+ setState({ ...state, subsetData: newSubsetData, skip: skip });
66
+ };
67
+
68
+ //change event listeners
69
+ useEffect(() => {
70
+ setDataList(
71
+ data.map((x) => {
72
+ return {
73
+ ...x,
74
+ textValue: getTextValue(
75
+ x,
76
+ textFields.map((x) => x.toString()),
77
+ separator
78
+ ),
79
+ };
80
+ })
81
+ );
82
+ }, [data, textFields, separator]);
83
+
84
+ return (
85
+ <div data-testid={"dropdown"}>
86
+ <ComboBox
87
+ style={{ width: "100%" }}
88
+ label={title}
89
+ disabled={disabled}
90
+ data={state.subsetData} // data to display in the dropdown
91
+ textField={"textValue"} // name of the field to use for display text
92
+ virtual={{
93
+ // enable virtualization for large datasets
94
+ total: state.total,
95
+ pageSize: pageSize,
96
+ skip: state.skip,
97
+ }}
98
+ onPageChange={pageChange} // handle page changes for virtualization
99
+ filterable={true} // enable filter
100
+ onFilterChange={onFilterChange} // handle filter changes
101
+ popupSettings={{
102
+ height: "210px",
103
+ }}
104
+ onChange={(e) => e.value && changeEvent(e)}
105
+ onBlur={(e) => e.nativeEvent.preventDefault()}
106
+ value={dataList.find((item: any) => selectedId === item[idField || "id"])}
107
+ />
108
+ </div>
109
+ );
110
+ }
@@ -0,0 +1,105 @@
1
+ import React, { useEffect, useRef, useState } from "react";
2
+ import { filterBy } from "@progress/kendo-data-query";
3
+ import { MultiSelect, MultiSelectPageChangeEvent, MultiSelectFilterChangeEvent } from "@progress/kendo-react-dropdowns";
4
+ import { FilterDescriptor } from "@progress/kendo-react-dropdowns/dist/npm/common/filterDescriptor";
5
+ import { getTextValue } from "./Utility";
6
+
7
+ const pageSize = 10;
8
+ export function MultiSelectDropdown<T>({
9
+ data,
10
+ selectedData,
11
+ textFields,
12
+ selectEvent,
13
+ title,
14
+ separator,
15
+ }: {
16
+ data: T[];
17
+ selectedData: T[];
18
+ textFields: (keyof T)[];
19
+ selectEvent: Function;
20
+ title: string;
21
+ separator?: string;
22
+ }) {
23
+ //local state
24
+ const pageSize = 8;
25
+ const [dataList, setDataList] = useState(
26
+ data.map((x) => {
27
+ return {
28
+ ...x,
29
+ textValue: getTextValue(
30
+ x,
31
+ textFields.map((x) => x.toString()),
32
+ separator
33
+ ),
34
+ };
35
+ })
36
+ );
37
+ const [state, setState] = useState({
38
+ skip: 0,
39
+ total: dataList.length,
40
+ subsetData: dataList.slice(0, pageSize),
41
+ });
42
+
43
+ //external function variables
44
+ const filteredData = useRef(dataList.slice());
45
+ //function creation
46
+ // function to handle filter changes
47
+ const onFilterChange = (event: MultiSelectFilterChangeEvent) => {
48
+ if (event.filter.value?.length) filteredData.current = filterBy(dataList.slice(), event.filter);
49
+ else filteredData.current = dataList;
50
+ const newData = filteredData.current.slice(0, pageSize);
51
+ setState({
52
+ subsetData: newData,
53
+ skip: 0,
54
+ total: filteredData.current.length,
55
+ });
56
+ };
57
+ // function to handle page changes for virtualization
58
+ const pageChange = (event: MultiSelectPageChangeEvent) => {
59
+ const skip = event.page.skip;
60
+ const take = event.page.take;
61
+ const newSubsetData = filteredData.current.slice(skip, skip + take);
62
+ setState({ ...state, subsetData: newSubsetData, skip: skip });
63
+ };
64
+
65
+ //change event listeners
66
+ useEffect(() => {
67
+ setDataList(
68
+ data.map((x) => {
69
+ return {
70
+ ...x,
71
+ textValue: getTextValue(
72
+ x,
73
+ textFields.map((x) => x.toString()),
74
+ separator
75
+ ),
76
+ };
77
+ })
78
+ );
79
+ }, [data, textFields, separator]);
80
+
81
+ return (
82
+ <div data-testid={"multiselect"} style={{ width: "100%" }}>
83
+ <MultiSelect
84
+ label={title}
85
+ data={state.subsetData}
86
+ textField={"textValue"} // name of the field to use for display text
87
+ style={{ width: "100%" }}
88
+ virtual={{
89
+ total: state.total,
90
+ pageSize: pageSize,
91
+ skip: state.skip,
92
+ }}
93
+ onPageChange={pageChange}
94
+ filterable={true}
95
+ onFilterChange={onFilterChange}
96
+ popupSettings={{
97
+ height: "210px",
98
+ }}
99
+ onChange={(e) => selectEvent(e.value)}
100
+ autoClose={false}
101
+ value={selectedData} ///right now: clears selected values whenever selected Vendor Value changes. This will need to be changed to something better in the future
102
+ />
103
+ </div>
104
+ );
105
+ }
@@ -2,6 +2,7 @@ export type CommonProps = {
2
2
  isEditing?: boolean;
3
3
  id: number;
4
4
  };
5
+
5
6
  export type GridChangeEvent = {
6
7
  value: any;
7
8
  field?: string;
@@ -0,0 +1,16 @@
1
+ type CommonProps = {
2
+ id: number;
3
+ isEditing?: boolean;
4
+ };
5
+ export function ToolbarButton<T extends CommonProps>({ item, data, setData }: { item: T; data: T[]; setData: Function }) {
6
+ return (
7
+ <button
8
+ title="Add new"
9
+ className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary"
10
+ onClick={() => setData([{ ...item, isEditing: true, id: 0 }, ...data])}
11
+ disabled={data.find((x) => x.isEditing) ? true : false}
12
+ >
13
+ Add Another
14
+ </button>
15
+ );
16
+ }
@@ -1,5 +1,5 @@
1
1
  // function to concatenate text values from dataItem using specified fields and separator
2
- export const getTextValue = (dataItem, fields, separator) => {
2
+ export const getTextValue = (dataItem: any, fields: string[], separator?: string) => {
3
3
  let textValue = "";
4
4
  fields.forEach((field, index) => (textValue += index > 0 ? (separator ? separator : " ") + dataItem[field] : dataItem[field]));
5
5
  return textValue;
@@ -0,0 +1,25 @@
1
+ import { Checkbox } from "@progress/kendo-react-inputs";
2
+
3
+ export function CommandCellCheckBox({
4
+ checked,
5
+ functionToRunOnCheck,
6
+ functionToRunOnUncheck,
7
+ }: {
8
+ checked: boolean;
9
+ functionToRunOnCheck: Function;
10
+ functionToRunOnUncheck: Function;
11
+ }) {
12
+ const functionToRun = () => {
13
+ if (checked) {
14
+ functionToRunOnUncheck();
15
+ } else {
16
+ functionToRunOnCheck();
17
+ }
18
+ };
19
+
20
+ return (
21
+ <td className="justify-content-center" data-testid="checkbox">
22
+ <Checkbox checked={checked} onChange={functionToRun} />
23
+ </td>
24
+ );
25
+ }
@@ -0,0 +1,33 @@
1
+ import { DatePicker } from "@progress/kendo-react-dateinputs";
2
+ import moment from "moment";
3
+ import { CommonProps, GridChangeEvent } from "../PropTypes";
4
+ export function CommandCellDate<T extends CommonProps>({
5
+ dataItem,
6
+ chgFn: changeFunction,
7
+ field,
8
+ }: {
9
+ dataItem: T;
10
+ chgFn: (e: GridChangeEvent) => void;
11
+ field: keyof T;
12
+ }) {
13
+ let valString = "" + dataItem[field];
14
+ let date = moment(valString).format("MM/DD/YY");
15
+ return (
16
+ <td data-testid="date">
17
+ {valString === undefined || dataItem.isEditing ? (
18
+ <DatePicker
19
+ value={new Date(moment(valString).format("MMMM, DD YYYY"))}
20
+ onChange={(e) =>
21
+ changeFunction({
22
+ field: field.toString(),
23
+ value: moment(e.value),
24
+ dataItem: dataItem,
25
+ })
26
+ }
27
+ />
28
+ ) : (
29
+ date
30
+ )}
31
+ </td>
32
+ );
33
+ }
@@ -0,0 +1,26 @@
1
+ import { ComboBoxChangeEvent } from "@progress/kendo-react-dropdowns";
2
+ import { GenericDropdown } from "../GenericDropdown";
3
+ import { CommonProps } from "../PropTypes";
4
+
5
+ // This exports a function component called "CommandCellDropdown"
6
+ // It takes in various props that are used to render a dropdown in a table cell
7
+ export function CommandCellDropdown<T extends CommonProps>(props: {
8
+ data: T[];
9
+ selectedId: number;
10
+ textFields: (keyof T)[];
11
+ changeEvent: (e: ComboBoxChangeEvent) => void;
12
+ separator?: string;
13
+ checkEditField?: boolean;
14
+ isEditing?: boolean;
15
+ }) {
16
+ return (
17
+ <td>
18
+ {props.checkEditField && !props.isEditing ? (
19
+ props.textFields.map((x) => props.data.find((y) => y.id === props.selectedId)![x]).join(props.separator || " ")
20
+ ) : (
21
+ // If "props.checkEditField" is false or "props.isEditing" is true, render the GenericDropdownWithSearch component with the "props" passed to it
22
+ <GenericDropdown {...props} />
23
+ )}
24
+ </td>
25
+ );
26
+ }
@@ -0,0 +1,9 @@
1
+ export function CommandCellPrice({ cost }: { cost: number }) {
2
+ let formattedCost: any = new Intl.NumberFormat("en", {
3
+ style: "currency",
4
+ currency: "USD",
5
+ minimumSignificantDigits: 2,
6
+ maximumFractionDigits: 3,
7
+ }).format(cost);
8
+ return <td data-testid="price">{formattedCost}</td>;
9
+ }
@@ -0,0 +1,14 @@
1
+ import { GridCellProps } from "@progress/kendo-react-grid";
2
+ import { Switch } from "@progress/kendo-react-inputs";
3
+
4
+ export function CommandCellSwitch({ props, changeFunction }: { props: GridCellProps; changeFunction: Function }) {
5
+ return (
6
+ <td data-testid="switch">
7
+ {props.dataItem.isEditing ? (
8
+ <Switch onChange={() => changeFunction()} checked={props.dataItem[props.field!]} />
9
+ ) : (
10
+ props.dataItem[props.field!].toString()
11
+ )}
12
+ </td>
13
+ );
14
+ }
package/tsconfig.json ADDED
@@ -0,0 +1,13 @@
1
+ {
2
+ "compilerOptions": {
3
+ "strict": true,
4
+ "jsx": "react-jsx",
5
+ "declaration": true,
6
+ "esModuleInterop": true,
7
+ "outDir": "dist",
8
+ "target": "es6",
9
+ "module": "es6",
10
+ "moduleResolution": "node"
11
+ },
12
+ "include": ["src"]
13
+ }
@@ -1,9 +0,0 @@
1
- import { GridFilterCellProps } from "@progress/kendo-react-grid";
2
- interface DropdownFilterCellProps<T> extends GridFilterCellProps {
3
- defaultItem?: any;
4
- data: T[];
5
- descriptionKeys: (keyof T)[];
6
- separator?: string;
7
- }
8
- export declare function FilterCellDropdown<T>(props: DropdownFilterCellProps<T>): import("react/jsx-runtime").JSX.Element;
9
- export {};
@@ -1,31 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Button } from "@progress/kendo-react-buttons";
3
- import { GenericDropdown } from "./GenericDropdown";
4
- // Define the DropdownFilterCell component with props of type DropdownFilterCellProps
5
- export function FilterCellDropdown(props) {
6
- // Define a function that returns true if a value is not undefined or null, and is different from the default item
7
- let hasValue = (value) => Boolean(value && value !== props.defaultItem);
8
- // Define an onChange function that will be called when the ComboBox value changes
9
- const onChange = (event) => {
10
- // Update the hasValue variable based on the new value of the ComboBox
11
- hasValue = hasValue(event.target.value.id);
12
- // Call the onChange function passed down as a prop, passing a filter object with the new value and operator
13
- props.onChange({
14
- value: hasValue ? event.target.value.id : "",
15
- operator: hasValue ? "eq" : "",
16
- syntheticEvent: event.syntheticEvent,
17
- });
18
- };
19
- // Define an onClearButtonClick function that will be called when the Clear button is clicked
20
- const onClearButtonClick = (event) => {
21
- event.preventDefault();
22
- // Call the onChange function passed down as a prop, passing a filter object with empty values
23
- props.onChange({
24
- value: "",
25
- operator: "",
26
- syntheticEvent: event,
27
- });
28
- };
29
- // Render a div containing a GenericDropdownWithSearch component and a Clear button
30
- return (_jsxs("div", Object.assign({ className: "k-filtercell", "data-testid": "dropdownFilter" }, { children: [_jsx(GenericDropdown, { data: props.data, changeEvent: onChange, selectedId: props.value, textFields: [...props.descriptionKeys], separator: props.separator }), _jsx(Button, { title: "Clear", disabled: !hasValue(props.value), onClick: onClearButtonClick, icon: "filter-clear" })] })));
31
- }
@@ -1,16 +0,0 @@
1
- export declare function GenericDropdown<T>({ data, // array of data objects
2
- selectedId, // id of the selected data object
3
- changeEvent, // function to call when the selected value changes
4
- textFields, // array of field names to use for text values
5
- separator, // optional separator to use for concatenating text values
6
- disabled, // boolean to disable the dropdown
7
- idField, title, }: {
8
- data: T[];
9
- selectedId: number;
10
- changeEvent: Function;
11
- textFields: (keyof T)[];
12
- separator?: string;
13
- idField?: keyof T;
14
- disabled?: boolean;
15
- title?: string;
16
- }): import("react/jsx-runtime").JSX.Element;
@@ -1,62 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { ComboBox } from "@progress/kendo-react-dropdowns";
3
- import { filterBy } from "@progress/kendo-data-query";
4
- import { useEffect, useRef, useState } from "react";
5
- import { getTextValue } from "./Utility";
6
- // component that renders a dropdown with a search filter
7
- export function GenericDropdown({ data, // array of data objects
8
- selectedId, // id of the selected data object
9
- changeEvent, // function to call when the selected value changes
10
- textFields, // array of field names to use for text values
11
- separator, // optional separator to use for concatenating text values
12
- disabled, // boolean to disable the dropdown
13
- idField, title, }) {
14
- //local state
15
- const pageSize = 8;
16
- const [dataList, setDataList] = useState(data.map((x) => {
17
- return Object.assign(Object.assign({}, x), { textValue: getTextValue(x, textFields.map((x) => x.toString()), separator) });
18
- }));
19
- const [state, setState] = useState({
20
- skip: 0,
21
- total: dataList.length,
22
- subsetData: dataList.slice(0, pageSize),
23
- });
24
- //external function variables
25
- const filteredData = useRef(dataList.slice());
26
- //function creation
27
- // function to handle filter changes
28
- const onFilterChange = (event) => {
29
- var _a;
30
- if ((_a = event.filter.value) === null || _a === void 0 ? void 0 : _a.length)
31
- filteredData.current = filterBy(dataList.slice(), event.filter);
32
- else
33
- filteredData.current = dataList;
34
- const newData = filteredData.current.slice(0, pageSize);
35
- setState({
36
- subsetData: newData,
37
- skip: 0,
38
- total: filteredData.current.length,
39
- });
40
- };
41
- // function to handle page changes for virtualization
42
- const pageChange = (event) => {
43
- const skip = event.page.skip;
44
- const take = event.page.take;
45
- const newSubsetData = filteredData.current.slice(skip, skip + take);
46
- setState(Object.assign(Object.assign({}, state), { subsetData: newSubsetData, skip: skip }));
47
- };
48
- //change event listeners
49
- useEffect(() => {
50
- setDataList(data.map((x) => {
51
- return Object.assign(Object.assign({}, x), { textValue: getTextValue(x, textFields.map((x) => x.toString()), separator) });
52
- }));
53
- }, [data, textFields, separator]);
54
- return (_jsx("div", Object.assign({ "data-testid": "dropdown" }, { children: _jsx(ComboBox, { label: title, disabled: disabled, data: state.subsetData, textField: "textValue", virtual: {
55
- // enable virtualization for large datasets
56
- total: state.total,
57
- pageSize: pageSize,
58
- skip: state.skip,
59
- }, onPageChange: pageChange, filterable: true, onFilterChange: onFilterChange, popupSettings: {
60
- height: "210px",
61
- }, onChange: (e) => e.value && changeEvent(e), onBlur: (e) => e.nativeEvent.preventDefault(), value: dataList.find((item) => selectedId === item[idField || "id"]) }) })));
62
- }
@@ -1,8 +0,0 @@
1
- export declare function MultiSelectDropdown<T>({ data, selectedData, textFields, selectEvent, title, separator, }: {
2
- data: T[];
3
- selectedData: T[];
4
- textFields: (keyof T)[];
5
- selectEvent: Function;
6
- title: string;
7
- separator?: string;
8
- }): import("react/jsx-runtime").JSX.Element;
@@ -1,55 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { useEffect, useRef, useState } from "react";
3
- import { filterBy } from "@progress/kendo-data-query";
4
- import { MultiSelect } from "@progress/kendo-react-dropdowns";
5
- import { getTextValue } from "./Utility";
6
- const pageSize = 10;
7
- export function MultiSelectDropdown({ data, selectedData, textFields, selectEvent, title, separator, }) {
8
- //local state
9
- const pageSize = 8;
10
- const [dataList, setDataList] = useState(data.map((x) => {
11
- return Object.assign(Object.assign({}, x), { textValue: getTextValue(x, textFields.map((x) => x.toString()), separator) });
12
- }));
13
- const [state, setState] = useState({
14
- skip: 0,
15
- total: dataList.length,
16
- subsetData: dataList.slice(0, pageSize),
17
- });
18
- //external function variables
19
- const filteredData = useRef(dataList.slice());
20
- //function creation
21
- // function to handle filter changes
22
- const onFilterChange = (event) => {
23
- var _a;
24
- if ((_a = event.filter.value) === null || _a === void 0 ? void 0 : _a.length)
25
- filteredData.current = filterBy(dataList.slice(), event.filter);
26
- else
27
- filteredData.current = dataList;
28
- const newData = filteredData.current.slice(0, pageSize);
29
- setState({
30
- subsetData: newData,
31
- skip: 0,
32
- total: filteredData.current.length,
33
- });
34
- };
35
- // function to handle page changes for virtualization
36
- const pageChange = (event) => {
37
- const skip = event.page.skip;
38
- const take = event.page.take;
39
- const newSubsetData = filteredData.current.slice(skip, skip + take);
40
- setState(Object.assign(Object.assign({}, state), { subsetData: newSubsetData, skip: skip }));
41
- };
42
- //change event listeners
43
- useEffect(() => {
44
- setDataList(data.map((x) => {
45
- return Object.assign(Object.assign({}, x), { textValue: getTextValue(x, textFields.map((x) => x.toString()), separator) });
46
- }));
47
- }, [data, textFields, separator]);
48
- return (_jsx("div", Object.assign({ "data-testid": "multiselect", style: { width: "100%" } }, { children: _jsx(MultiSelect, { label: title, data: state.subsetData, textField: "textValue", style: { width: "100%" }, virtual: {
49
- total: state.total,
50
- pageSize: pageSize,
51
- skip: state.skip,
52
- }, onPageChange: pageChange, filterable: true, onFilterChange: onFilterChange, popupSettings: {
53
- height: "210px",
54
- }, onChange: (e) => selectEvent(e.value), autoClose: false, value: selectedData }) })));
55
- }
package/PropTypes.js DELETED
@@ -1 +0,0 @@
1
- export {};
package/Toolbar.d.ts DELETED
@@ -1,10 +0,0 @@
1
- type CommonProps = {
2
- id: number;
3
- isEditing?: boolean;
4
- };
5
- export declare function ToolbarButton<T extends CommonProps>({ item, data, setData }: {
6
- item: T;
7
- data: T[];
8
- setData: Function;
9
- }): import("react/jsx-runtime").JSX.Element;
10
- export {};
package/Toolbar.js DELETED
@@ -1,4 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- export function ToolbarButton({ item, data, setData }) {
3
- return (_jsx("button", Object.assign({ title: "Add new", className: "k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary", onClick: () => setData([Object.assign(Object.assign({}, item), { isEditing: true, id: 0 }), ...data]), disabled: data.find((x) => x.isEditing) ? true : false }, { children: "Add Another" })));
4
- }
package/Utility.d.ts DELETED
@@ -1 +0,0 @@
1
- export declare const getTextValue: (dataItem: any, fields: string[], separator?: string) => string;
@@ -1,5 +0,0 @@
1
- export declare function CommandCellCheckBox({ checked, functionToRunOnCheck, functionToRunOnUncheck, }: {
2
- checked: boolean;
3
- functionToRunOnCheck: Function;
4
- functionToRunOnUncheck: Function;
5
- }): import("react/jsx-runtime").JSX.Element;
@@ -1,13 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { Checkbox } from "@progress/kendo-react-inputs";
3
- export function CommandCellCheckBox({ checked, functionToRunOnCheck, functionToRunOnUncheck, }) {
4
- const functionToRun = () => {
5
- if (checked) {
6
- functionToRunOnUncheck();
7
- }
8
- else {
9
- functionToRunOnCheck();
10
- }
11
- };
12
- return (_jsx("td", Object.assign({ className: "justify-content-center", "data-testid": "checkbox" }, { children: _jsx(Checkbox, { checked: checked, onChange: functionToRun }) })));
13
- }
@@ -1,6 +0,0 @@
1
- import { CommonProps, GridChangeEvent } from "../PropTypes";
2
- export declare function CommandCellDate<T extends CommonProps>({ dataItem, chgFn: changeFunction, field, }: {
3
- dataItem: T;
4
- chgFn: (e: GridChangeEvent) => void;
5
- field: keyof T;
6
- }): import("react/jsx-runtime").JSX.Element;
@@ -1,12 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { DatePicker } from "@progress/kendo-react-dateinputs";
3
- import moment from "moment";
4
- export function CommandCellDate({ dataItem, chgFn: changeFunction, field, }) {
5
- let valString = "" + dataItem[field];
6
- let date = moment(valString).format("MM/DD/YY");
7
- return (_jsx("td", Object.assign({ "data-testid": "date" }, { children: valString === undefined || dataItem.isEditing ? (_jsx(DatePicker, { value: new Date(moment(valString).format("MMMM, DD YYYY")), onChange: (e) => changeFunction({
8
- field: field.toString(),
9
- value: moment(e.value),
10
- dataItem: dataItem,
11
- }) })) : (date) })));
12
- }
@@ -1,11 +0,0 @@
1
- import { ComboBoxChangeEvent } from "@progress/kendo-react-dropdowns";
2
- import { CommonProps } from "../PropTypes";
3
- export declare function CommandCellDropdown<T extends CommonProps>(props: {
4
- data: T[];
5
- selectedId: number;
6
- textFields: (keyof T)[];
7
- changeEvent: (e: ComboBoxChangeEvent) => void;
8
- separator?: string;
9
- checkEditField?: boolean;
10
- isEditing?: boolean;
11
- }): import("react/jsx-runtime").JSX.Element;
@@ -1,9 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { GenericDropdown } from "../GenericDropdown";
3
- // This exports a function component called "CommandCellDropdown"
4
- // It takes in various props that are used to render a dropdown in a table cell
5
- export function CommandCellDropdown(props) {
6
- return (_jsx("td", { children: props.checkEditField && !props.isEditing ? (props.textFields.map((x) => props.data.find((y) => y.id === props.selectedId)[x]).join(props.separator || " ")) : (
7
- // If "props.checkEditField" is false or "props.isEditing" is true, render the GenericDropdownWithSearch component with the "props" passed to it
8
- _jsx(GenericDropdown, Object.assign({}, props))) }));
9
- }
@@ -1,3 +0,0 @@
1
- export declare function CommandCellPrice({ cost }: {
2
- cost: number;
3
- }): import("react/jsx-runtime").JSX.Element;
@@ -1,10 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- export function CommandCellPrice({ cost }) {
3
- let formattedCost = new Intl.NumberFormat("en", {
4
- style: "currency",
5
- currency: "USD",
6
- minimumSignificantDigits: 2,
7
- maximumFractionDigits: 3,
8
- }).format(cost);
9
- return _jsx("td", Object.assign({ "data-testid": "price" }, { children: formattedCost }));
10
- }
@@ -1,5 +0,0 @@
1
- import { GridCellProps } from "@progress/kendo-react-grid";
2
- export declare function CommandCellSwitch({ props, changeFunction }: {
3
- props: GridCellProps;
4
- changeFunction: Function;
5
- }): import("react/jsx-runtime").JSX.Element;
@@ -1,5 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { Switch } from "@progress/kendo-react-inputs";
3
- export function CommandCellSwitch({ props, changeFunction }) {
4
- return (_jsx("td", Object.assign({ "data-testid": "switch" }, { children: props.dataItem.isEditing ? (_jsx(Switch, { onChange: () => changeFunction(), checked: props.dataItem[props.field] })) : (props.dataItem[props.field].toString()) })));
5
- }
package/index.js DELETED
@@ -1,9 +0,0 @@
1
- export { CommandCellCheckBox } from "./commandCell/CommandCellCheckbox";
2
- export { CommandCellDate } from "./commandCell/CommandCellDate";
3
- export { CommandCellDropdown } from "./commandCell/CommandCellDropdown";
4
- export { CommandCellPrice } from "./commandCell/CommandCellPrice";
5
- export { CommandCellSwitch } from "./commandCell/CommandCellSwitch";
6
- export { FilterCellDropdown } from "./FilterCellDropdown";
7
- export { ToolbarButton } from "./Toolbar";
8
- export { GenericDropdown } from "./GenericDropdown";
9
- export { MultiSelectDropdown } from "./MultiSelectDropdown";
File without changes