@scheels-softdev/kendoreact-generics 1.6.2 → 1.6.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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scheels-softdev/kendoreact-generics",
3
- "version": "1.6.2",
3
+ "version": "1.6.3",
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,115 @@
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
+ }
@@ -1,17 +1,30 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
1
  import React, { useEffect } from "react";
3
2
  import { filterBy } from "@progress/kendo-data-query";
4
- import { MultiSelect } from "@progress/kendo-react-dropdowns";
3
+ import { MultiSelect, MultiSelectPageChangeEvent, MultiSelectFilterChangeEvent } from "@progress/kendo-react-dropdowns";
4
+ import { FilterDescriptor } from "@progress/kendo-react-dropdowns/dist/npm/common/filterDescriptor";
5
+
5
6
  const pageSize = 10;
6
- export function MultiSelectDropdown({ data, selectedData, field, selectEvent, title, }) {
7
+ export function MultiSelectDropdown<T>({
8
+ data,
9
+ selectedData,
10
+ field,
11
+ selectEvent,
12
+ title,
13
+ }: {
14
+ data: T[];
15
+ selectedData: T[];
16
+ field: keyof T;
17
+ selectEvent: Function;
18
+ title: string;
19
+ }) {
7
20
  const filteredData = React.useRef(data.slice());
8
21
  const [state, setState] = React.useState({
9
22
  subsetData: data.slice(0, pageSize),
10
23
  skip: 0,
11
24
  total: data.length,
12
25
  });
13
- const [filter, setFilter] = React.useState({ field: field.toString(), operator: "contains", ignoreCase: true, value: "" });
14
- const onFilterChange = (event) => {
26
+ const [filter, setFilter] = React.useState<FilterDescriptor>({ field: field.toString(), operator: "contains", ignoreCase: true, value: "" });
27
+ const onFilterChange = (event: MultiSelectFilterChangeEvent) => {
15
28
  event.filter.ignoreCase = true;
16
29
  setFilter(event.filter);
17
30
  filteredData.current = filterBy(data.slice(), event.filter);
@@ -33,11 +46,17 @@ export function MultiSelectDropdown({ data, selectedData, field, selectEvent, ti
33
46
  });
34
47
  }
35
48
  }, [data]); // eslint-disable-line react-hooks/exhaustive-deps
36
- const pageChange = (event) => {
49
+
50
+ const pageChange = (event: MultiSelectPageChangeEvent) => {
37
51
  const skip = event.page.skip;
38
52
  const take = event.page.take;
39
53
  const newsubsetData = filteredData.current.slice(skip, skip + take);
40
- setState(Object.assign(Object.assign({}, state), { subsetData: newsubsetData, skip: skip }));
54
+
55
+ setState({
56
+ ...state,
57
+ subsetData: newsubsetData,
58
+ skip: skip,
59
+ });
41
60
  };
42
61
  useEffect(() => {
43
62
  if (data.length > 0 && filteredData.current.length === 0) {
@@ -54,9 +73,26 @@ export function MultiSelectDropdown({ data, selectedData, field, selectEvent, ti
54
73
  }
55
74
  // I disabled on purpose otherwise we will create a redundant update stack if we track state
56
75
  }, [data]); // eslint-disable-line react-hooks/exhaustive-deps
57
- return (_jsx(MultiSelect, { label: title, dataItemKey: field.toString(), textField: field.toString(), data: state.subsetData, value: selectedData, virtual: {
58
- total: state.total,
59
- pageSize: pageSize,
60
- skip: state.skip,
61
- }, onChange: (e) => selectEvent(e.value), onPageChange: pageChange, filterable: true, filter: filter.value, onFilterChange: onFilterChange, autoClose: false, style: { width: "100%" } }));
76
+
77
+ return (
78
+ <MultiSelect
79
+ label={title}
80
+ dataItemKey={field.toString()}
81
+ textField={field.toString()}
82
+ data={state.subsetData}
83
+ value={selectedData} ///right now: clears selected values whenever selected Vendor Value changes. This will need to be changed to something better in the future
84
+ virtual={{
85
+ total: state.total,
86
+ pageSize: pageSize,
87
+ skip: state.skip,
88
+ }}
89
+ onChange={(e) => selectEvent(e.value)}
90
+ onPageChange={pageChange}
91
+ filterable={true}
92
+ filter={filter.value}
93
+ onFilterChange={onFilterChange}
94
+ autoClose={false}
95
+ style={{ width: "100%" }}
96
+ />
97
+ );
62
98
  }
@@ -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,33 @@
1
+ import { State } from "@progress/kendo-data-query";
2
+
3
+ type CommonProps = {
4
+ id: number;
5
+ isEditing?: boolean;
6
+ };
7
+ export function ToolbarButton<T extends CommonProps>({
8
+ item,
9
+ data,
10
+ setData,
11
+ dataState,
12
+ setDataState,
13
+ }: {
14
+ item: T;
15
+ data: T[];
16
+ setData: Function;
17
+ dataState: State;
18
+ setDataState: Function;
19
+ }) {
20
+ return (
21
+ <button
22
+ title="Add new"
23
+ className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary"
24
+ onClick={() => {
25
+ setData([{ ...item, isEditing: true, id: 0 }, ...data]);
26
+ setDataState({ ...dataState, sort: { field: "id", dir: "asc" } });
27
+ }}
28
+ disabled={data.find((x) => x.isEditing) ? true : false}
29
+ >
30
+ Add Another
31
+ </button>
32
+ );
33
+ }
@@ -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,10 +0,0 @@
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 {};
@@ -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,14 +0,0 @@
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;
@@ -1,70 +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
- // 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
- }
@@ -1,8 +0,0 @@
1
- /// <reference types="react" />
2
- export declare function MultiSelectDropdown<T>({ data, selectedData, field, selectEvent, title, }: {
3
- data: T[];
4
- selectedData: T[];
5
- field: keyof T;
6
- selectEvent: Function;
7
- title: string;
8
- }): JSX.Element;
package/PropTypes.js DELETED
@@ -1 +0,0 @@
1
- export {};
package/Toolbar.d.ts DELETED
@@ -1,12 +0,0 @@
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, setDataState }: {
7
- item: T;
8
- data: T[];
9
- setData: Function;
10
- setDataState: Function;
11
- }): JSX.Element;
12
- export {};
package/Toolbar.js DELETED
@@ -1,7 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- export function ToolbarButton({ item, data, setData, setDataState }) {
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: () => {
4
- setData([Object.assign(Object.assign({}, item), { isEditing: true, id: 0 }), ...data]);
5
- setDataState({ take: 50, sort: { field: "id", dir: "asc" } });
6
- }, disabled: data.find((x) => x.isEditing) ? true : false }, { children: "Add Another" })));
7
- }
@@ -1,6 +0,0 @@
1
- /// <reference types="react" />
2
- export declare function CommandCellCheckBox({ checked, functionToRunOnCheck, functionToRunOnUncheck, }: {
3
- checked: boolean;
4
- functionToRunOnCheck: Function;
5
- functionToRunOnUncheck: Function;
6
- }): 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,7 +0,0 @@
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;
@@ -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,12 +0,0 @@
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;
@@ -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,4 +0,0 @@
1
- /// <reference types="react" />
2
- export declare function CommandCellPrice({ cost }: {
3
- cost: number;
4
- }): 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,6 +0,0 @@
1
- /// <reference types="react" />
2
- import { GridCellProps } from "@progress/kendo-react-grid";
3
- export declare function CommandCellSwitch({ props, changeFunction }: {
4
- props: GridCellProps;
5
- changeFunction: Function;
6
- }): 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