@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 +1 -1
- package/src/FilterCellDropdown.tsx +54 -0
- package/src/GenericDropdown.tsx +110 -0
- package/src/MultiSelectDropdown.tsx +105 -0
- package/{PropTypes.d.ts → src/PropTypes.ts} +1 -0
- package/src/Toolbar.tsx +16 -0
- package/{Utility.js → src/Utility.ts} +1 -1
- package/src/commandCell/CommandCellCheckbox.tsx +25 -0
- package/src/commandCell/CommandCellDate.tsx +33 -0
- package/src/commandCell/CommandCellDropdown.tsx +26 -0
- package/src/commandCell/CommandCellPrice.tsx +9 -0
- package/src/commandCell/CommandCellSwitch.tsx +14 -0
- package/tsconfig.json +13 -0
- package/FilterCellDropdown.d.ts +0 -9
- package/FilterCellDropdown.js +0 -31
- package/GenericDropdown.d.ts +0 -16
- package/GenericDropdown.js +0 -62
- package/MultiSelectDropdown.d.ts +0 -8
- package/MultiSelectDropdown.js +0 -55
- package/PropTypes.js +0 -1
- package/Toolbar.d.ts +0 -10
- package/Toolbar.js +0 -4
- package/Utility.d.ts +0 -1
- package/commandCell/CommandCellCheckbox.d.ts +0 -5
- package/commandCell/CommandCellCheckbox.js +0 -13
- package/commandCell/CommandCellDate.d.ts +0 -6
- package/commandCell/CommandCellDate.js +0 -12
- package/commandCell/CommandCellDropdown.d.ts +0 -11
- package/commandCell/CommandCellDropdown.js +0 -9
- package/commandCell/CommandCellPrice.d.ts +0 -3
- package/commandCell/CommandCellPrice.js +0 -10
- package/commandCell/CommandCellSwitch.d.ts +0 -5
- package/commandCell/CommandCellSwitch.js +0 -5
- package/index.js +0 -9
- /package/{index.d.ts → src/index.ts} +0 -0
package/package.json
CHANGED
@@ -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
|
+
}
|
package/src/Toolbar.tsx
ADDED
@@ -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
package/FilterCellDropdown.d.ts
DELETED
@@ -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 {};
|
package/FilterCellDropdown.js
DELETED
@@ -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
|
-
}
|
package/GenericDropdown.d.ts
DELETED
@@ -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;
|
package/GenericDropdown.js
DELETED
@@ -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
|
-
}
|
package/MultiSelectDropdown.d.ts
DELETED
@@ -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;
|
package/MultiSelectDropdown.js
DELETED
@@ -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
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,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,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 { 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
|