@scheels-softdev/kendoreact-generics 1.4.2 → 1.4.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.
- package/FilterCellDropdown.d.ts +10 -0
- package/FilterCellDropdown.js +31 -0
- package/GenericDropdown.d.ts +14 -0
- package/GenericDropdown.js +70 -0
- package/{src/PropTypes.ts → PropTypes.d.ts} +0 -1
- package/PropTypes.js +1 -0
- package/Toolbar.d.ts +11 -0
- package/Toolbar.js +4 -0
- package/commandCell/CommandCellCheckbox.d.ts +6 -0
- package/commandCell/CommandCellCheckbox.js +13 -0
- package/commandCell/CommandCellDate.d.ts +7 -0
- package/commandCell/CommandCellDate.js +12 -0
- package/commandCell/CommandCellDropdown.d.ts +12 -0
- package/commandCell/CommandCellDropdown.js +9 -0
- package/commandCell/CommandCellPrice.d.ts +4 -0
- package/commandCell/CommandCellPrice.js +10 -0
- package/commandCell/CommandCellSwitch.d.ts +6 -0
- package/commandCell/CommandCellSwitch.js +5 -0
- package/index.js +8 -0
- package/package.json +1 -1
- package/src/FilterCellDropdown.tsx +0 -54
- package/src/GenericDropdown.tsx +0 -115
- package/src/Toolbar.tsx +0 -15
- package/src/commandCell/CommandCellCheckbox.tsx +0 -25
- package/src/commandCell/CommandCellDate.tsx +0 -33
- package/src/commandCell/CommandCellDropdown.tsx +0 -26
- package/src/commandCell/CommandCellPrice.tsx +0 -9
- package/src/commandCell/CommandCellSwitch.tsx +0 -14
- package/tsconfig.json +0 -13
- /package/{src/index.ts → index.d.ts} +0 -0
@@ -0,0 +1,10 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import { GridFilterCellProps } from "@progress/kendo-react-grid";
|
3
|
+
interface DropdownFilterCellProps<T> extends GridFilterCellProps {
|
4
|
+
defaultItem?: any;
|
5
|
+
data: T[];
|
6
|
+
descriptionKeys: (keyof T)[];
|
7
|
+
separator?: string;
|
8
|
+
}
|
9
|
+
export declare function FilterCellDropdown<T>(props: DropdownFilterCellProps<T>): JSX.Element;
|
10
|
+
export {};
|
@@ -0,0 +1,31 @@
|
|
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
|
+
}
|
@@ -0,0 +1,14 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
export declare function GenericDropdown<T>({ data, // array of data objects
|
3
|
+
selectedId, // id of the selected data object
|
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, }: {
|
8
|
+
data: T[];
|
9
|
+
selectedId: number;
|
10
|
+
changeEvent: Function;
|
11
|
+
textFields: (keyof T)[];
|
12
|
+
separator?: string;
|
13
|
+
disabled?: boolean;
|
14
|
+
}): JSX.Element;
|
@@ -0,0 +1,70 @@
|
|
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
|
+
// function to concatenate text values from dataItem using specified fields and separator
|
6
|
+
const getTextValue = (dataItem, fields, separator) => {
|
7
|
+
let textValue = "";
|
8
|
+
fields.forEach((field, index) => (textValue += index > 0 ? (separator ? separator : " ") + dataItem[field] : dataItem[field]));
|
9
|
+
return textValue;
|
10
|
+
};
|
11
|
+
// component that renders a dropdown with a search filter
|
12
|
+
export function GenericDropdown({ data, // array of data objects
|
13
|
+
selectedId, // id of the selected data object
|
14
|
+
changeEvent, // function to call when the selected value changes
|
15
|
+
textFields, // array of field names to use for text values
|
16
|
+
separator, // optional separator to use for concatenating text values
|
17
|
+
disabled, // boolean to disable the dropdown
|
18
|
+
}) {
|
19
|
+
//redux state
|
20
|
+
//local state
|
21
|
+
const pageSize = 8;
|
22
|
+
const [dataList, setDataList] = useState(data.map((x) => {
|
23
|
+
return Object.assign(Object.assign({}, x), { textValue: getTextValue(x, textFields.map((x) => x.toString()), separator) });
|
24
|
+
}));
|
25
|
+
const [state, setState] = useState({
|
26
|
+
skip: 0,
|
27
|
+
total: dataList.length,
|
28
|
+
subsetData: dataList.slice(0, pageSize),
|
29
|
+
});
|
30
|
+
//external function variables
|
31
|
+
const filteredData = useRef(dataList.slice());
|
32
|
+
//function creation
|
33
|
+
// function to handle filter changes
|
34
|
+
const onFilterChange = (event) => {
|
35
|
+
var _a;
|
36
|
+
if ((_a = event.filter.value) === null || _a === void 0 ? void 0 : _a.length)
|
37
|
+
filteredData.current = filterBy(dataList.slice(), event.filter);
|
38
|
+
else
|
39
|
+
filteredData.current = dataList;
|
40
|
+
const newData = filteredData.current.slice(0, pageSize);
|
41
|
+
setState({
|
42
|
+
subsetData: newData,
|
43
|
+
skip: 0,
|
44
|
+
total: filteredData.current.length,
|
45
|
+
});
|
46
|
+
};
|
47
|
+
// function to handle page changes for virtualization
|
48
|
+
const pageChange = (event) => {
|
49
|
+
const skip = event.page.skip;
|
50
|
+
const take = event.page.take;
|
51
|
+
const newSubsetData = filteredData.current.slice(skip, skip + take);
|
52
|
+
setState(Object.assign(Object.assign({}, state), { subsetData: newSubsetData, skip: skip }));
|
53
|
+
};
|
54
|
+
//change event listeners
|
55
|
+
useEffect(() => {
|
56
|
+
setDataList(data.map((x) => {
|
57
|
+
return Object.assign(Object.assign({}, x), { textValue: getTextValue(x, textFields.map((x) => x.toString()), separator) });
|
58
|
+
}));
|
59
|
+
}, [data, textFields, separator]);
|
60
|
+
return (_jsx("div", Object.assign({ "data-testid": "dropdown" }, { children: _jsx(ComboBox, { disabled: disabled, style: {
|
61
|
+
maxWidth: "var(--app-nav-width)",
|
62
|
+
}, data: state.subsetData, textField: "textValue", virtual: {
|
63
|
+
// enable virtualization for large datasets
|
64
|
+
total: state.total,
|
65
|
+
pageSize: pageSize,
|
66
|
+
skip: state.skip,
|
67
|
+
}, onPageChange: pageChange, filterable: true, onFilterChange: onFilterChange, popupSettings: {
|
68
|
+
height: "210px",
|
69
|
+
}, onChange: (e) => e.value && changeEvent(e), onBlur: (e) => e.nativeEvent.preventDefault(), value: dataList.find((item) => selectedId === item.id) }) })));
|
70
|
+
}
|
package/PropTypes.js
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
package/Toolbar.d.ts
ADDED
@@ -0,0 +1,11 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
type CommonProps = {
|
3
|
+
id: number;
|
4
|
+
isEditing?: boolean;
|
5
|
+
};
|
6
|
+
export declare function ToolbarButton<T extends CommonProps>({ item, data, setData }: {
|
7
|
+
item: T;
|
8
|
+
data: T[];
|
9
|
+
setData: Function;
|
10
|
+
}): JSX.Element;
|
11
|
+
export {};
|
package/Toolbar.js
ADDED
@@ -0,0 +1,4 @@
|
|
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
|
+
}
|
@@ -0,0 +1,13 @@
|
|
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
|
+
}
|
@@ -0,0 +1,7 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import { CommonProps, GridChangeEvent } from "../PropTypes";
|
3
|
+
export declare function CommandCellDate<T extends CommonProps>({ dataItem, chgFn: changeFunction, field, }: {
|
4
|
+
dataItem: T;
|
5
|
+
chgFn: (e: GridChangeEvent) => void;
|
6
|
+
field: keyof T;
|
7
|
+
}): JSX.Element;
|
@@ -0,0 +1,12 @@
|
|
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
|
+
}
|
@@ -0,0 +1,12 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import { ComboBoxChangeEvent } from "@progress/kendo-react-dropdowns";
|
3
|
+
import { CommonProps } from "../PropTypes";
|
4
|
+
export declare function CommandCellDropdown<T extends CommonProps>(props: {
|
5
|
+
data: T[];
|
6
|
+
selectedId: number;
|
7
|
+
textFields: (keyof T)[];
|
8
|
+
changeEvent: (e: ComboBoxChangeEvent) => void;
|
9
|
+
separator?: string;
|
10
|
+
checkEditField?: boolean;
|
11
|
+
isEditing?: boolean;
|
12
|
+
}): JSX.Element;
|
@@ -0,0 +1,9 @@
|
|
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
|
+
}
|
@@ -0,0 +1,10 @@
|
|
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
|
+
}
|
@@ -0,0 +1,5 @@
|
|
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
ADDED
@@ -0,0 +1,8 @@
|
|
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";
|
package/package.json
CHANGED
@@ -1,54 +0,0 @@
|
|
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
|
-
}
|
package/src/GenericDropdown.tsx
DELETED
@@ -1,115 +0,0 @@
|
|
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
|
-
|
5
|
-
// function to concatenate text values from dataItem using specified fields and separator
|
6
|
-
const getTextValue = (dataItem: any, fields: string[], separator?: string) => {
|
7
|
-
let textValue = "";
|
8
|
-
fields.forEach((field, index) => (textValue += index > 0 ? (separator ? separator : " ") + dataItem[field] : dataItem[field]));
|
9
|
-
return textValue;
|
10
|
-
};
|
11
|
-
|
12
|
-
// component that renders a dropdown with a search filter
|
13
|
-
export function GenericDropdown<T>({
|
14
|
-
data, // array of data objects
|
15
|
-
selectedId, // id of the selected data object
|
16
|
-
changeEvent, // function to call when the selected value changes
|
17
|
-
textFields, // array of field names to use for text values
|
18
|
-
separator, // optional separator to use for concatenating text values
|
19
|
-
disabled, // boolean to disable the dropdown
|
20
|
-
}: {
|
21
|
-
data: T[];
|
22
|
-
selectedId: number;
|
23
|
-
changeEvent: Function;
|
24
|
-
textFields: (keyof T)[];
|
25
|
-
separator?: string;
|
26
|
-
disabled?: boolean;
|
27
|
-
}) {
|
28
|
-
//redux state
|
29
|
-
|
30
|
-
//local state
|
31
|
-
const pageSize = 8;
|
32
|
-
const [dataList, setDataList] = useState(
|
33
|
-
data.map((x) => {
|
34
|
-
return {
|
35
|
-
...x,
|
36
|
-
textValue: getTextValue(
|
37
|
-
x,
|
38
|
-
textFields.map((x) => x.toString()),
|
39
|
-
separator
|
40
|
-
),
|
41
|
-
};
|
42
|
-
})
|
43
|
-
);
|
44
|
-
const [state, setState] = useState({
|
45
|
-
skip: 0,
|
46
|
-
total: dataList.length,
|
47
|
-
subsetData: dataList.slice(0, pageSize),
|
48
|
-
});
|
49
|
-
|
50
|
-
//external function variables
|
51
|
-
const filteredData = useRef(dataList.slice());
|
52
|
-
//function creation
|
53
|
-
// function to handle filter changes
|
54
|
-
const onFilterChange = (event: ComboBoxFilterChangeEvent) => {
|
55
|
-
if (event.filter.value?.length) filteredData.current = filterBy(dataList.slice(), event.filter);
|
56
|
-
else filteredData.current = dataList;
|
57
|
-
const newData = filteredData.current.slice(0, pageSize);
|
58
|
-
setState({
|
59
|
-
subsetData: newData,
|
60
|
-
skip: 0,
|
61
|
-
total: filteredData.current.length,
|
62
|
-
});
|
63
|
-
};
|
64
|
-
// function to handle page changes for virtualization
|
65
|
-
const pageChange = (event: ComboBoxPageChangeEvent) => {
|
66
|
-
const skip = event.page.skip;
|
67
|
-
const take = event.page.take;
|
68
|
-
const newSubsetData = filteredData.current.slice(skip, skip + take);
|
69
|
-
setState({ ...state, subsetData: newSubsetData, skip: skip });
|
70
|
-
};
|
71
|
-
|
72
|
-
//change event listeners
|
73
|
-
useEffect(() => {
|
74
|
-
setDataList(
|
75
|
-
data.map((x) => {
|
76
|
-
return {
|
77
|
-
...x,
|
78
|
-
textValue: getTextValue(
|
79
|
-
x,
|
80
|
-
textFields.map((x) => x.toString()),
|
81
|
-
separator
|
82
|
-
),
|
83
|
-
};
|
84
|
-
})
|
85
|
-
);
|
86
|
-
}, [data, textFields, separator]);
|
87
|
-
|
88
|
-
return (
|
89
|
-
<div data-testid={"dropdown"}>
|
90
|
-
<ComboBox
|
91
|
-
disabled={disabled}
|
92
|
-
style={{
|
93
|
-
maxWidth: "var(--app-nav-width)",
|
94
|
-
}}
|
95
|
-
data={state.subsetData} // data to display in the dropdown
|
96
|
-
textField={"textValue"} // name of the field to use for display text
|
97
|
-
virtual={{
|
98
|
-
// enable virtualization for large datasets
|
99
|
-
total: state.total,
|
100
|
-
pageSize: pageSize,
|
101
|
-
skip: state.skip,
|
102
|
-
}}
|
103
|
-
onPageChange={pageChange} // handle page changes for virtualization
|
104
|
-
filterable={true} // enable filter
|
105
|
-
onFilterChange={onFilterChange} // handle filter changes
|
106
|
-
popupSettings={{
|
107
|
-
height: "210px",
|
108
|
-
}}
|
109
|
-
onChange={(e) => e.value && changeEvent(e)}
|
110
|
-
onBlur={(e) => e.nativeEvent.preventDefault()}
|
111
|
-
value={dataList.find((item: any) => selectedId === item.id)}
|
112
|
-
/>
|
113
|
-
</div>
|
114
|
-
);
|
115
|
-
}
|
package/src/Toolbar.tsx
DELETED
@@ -1,15 +0,0 @@
|
|
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
|
-
>
|
12
|
-
Add Another
|
13
|
-
</button>
|
14
|
-
);
|
15
|
-
}
|
@@ -1,25 +0,0 @@
|
|
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
|
-
}
|
@@ -1,33 +0,0 @@
|
|
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
|
-
}
|
@@ -1,26 +0,0 @@
|
|
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
|
-
}
|
@@ -1,9 +0,0 @@
|
|
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
|
-
}
|
@@ -1,14 +0,0 @@
|
|
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
DELETED
File without changes
|