@uxf/data-grid
Advanced tools
Comparing version 11.25.1 to 11.26.0
@@ -37,2 +37,3 @@ "use strict"; | ||
const use_data_grid_fetching_1 = require("./use-data-grid-fetching"); | ||
const merge_schema_with_config_1 = require("./utils/merge-schema-with-config"); | ||
const actionCell = { | ||
@@ -61,2 +62,11 @@ width: 100, | ||
}; | ||
const schemaWithFrontendConfig = (0, merge_schema_with_config_1.mergeSchemaWithConfig)(schema_1.schema, { | ||
perPage: 100, | ||
columns: { | ||
bool: { width: 80 }, | ||
}, | ||
filters: { | ||
text: { placeholder: "Custom placeholder ..." }, | ||
}, | ||
}); | ||
function Default() { | ||
@@ -82,5 +92,5 @@ const [noBorder, setNoBorder] = (0, react_1.useState)(false); | ||
react_1.default.createElement(toggle_1.Toggle, { label: "No border", value: noBorder, onChange: (value) => setNoBorder(!!value), name: "noBorder" }), | ||
react_1.default.createElement(data_grid_1.DataGrid, { onReload: onReload, state: state, actions: actions, data: data, isLoading: isLoading, error: error, schema: schema_1.schema, onCsvDownload: console.log, isRowSelectable: true, actionCell: actionCell }), | ||
react_1.default.createElement(data_grid_1.DataGrid, { onReload: onReload, state: state, actions: actions, data: data, isLoading: isLoading, error: error, schema: schemaWithFrontendConfig, onCsvDownload: console.log, isRowSelectable: true, actionCell: actionCell }), | ||
react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state }))); | ||
} | ||
exports.Default = Default; |
@@ -11,6 +11,7 @@ "use strict"; | ||
Input(props) { | ||
var _a; | ||
return (react_1.default.createElement(select_1.Select, { options: [ | ||
{ id: 1, label: "Ano" }, | ||
{ id: 0, label: "Ne" }, | ||
], label: props.filter.label, value: props.value, onChange: (value) => props.onChange(value), isClearable: true, name: props.filter.name })); | ||
], label: props.filter.label, value: props.value, onChange: (value) => props.onChange(value), isClearable: true, name: props.filter.name, placeholder: (_a = props.filter.config) === null || _a === void 0 ? void 0 : _a.placeholder })); | ||
}, | ||
@@ -17,0 +18,0 @@ ListItem(props) { |
@@ -14,3 +14,3 @@ "use strict"; | ||
Input(props) { | ||
var _a, _b, _c, _d, _e, _f; | ||
var _a, _b, _c, _d, _e, _f, _g, _h; | ||
const onChangeFrom = (value) => { | ||
@@ -29,4 +29,4 @@ var _a; | ||
return (react_1.default.createElement("div", { className: "uxf-data-grid__filter uxf-data-grid__filter--date" }, | ||
react_1.default.createElement(date_picker_input_1.DatePickerInput, { value: (_b = (_a = props.value) === null || _a === void 0 ? void 0 : _a.from) !== null && _b !== void 0 ? _b : null, onChange: onChangeFrom, label: `${props.filter.label} (od)`, name: props.filter.name, maxDate: (_c = props.value) === null || _c === void 0 ? void 0 : _c.to, isClearable: true }), | ||
react_1.default.createElement(date_picker_input_1.DatePickerInput, { value: (_e = (_d = props.value) === null || _d === void 0 ? void 0 : _d.to) !== null && _e !== void 0 ? _e : null, onChange: onChangeTo, label: `${props.filter.label} (do)`, name: props.filter.name, minDate: (_f = props.value) === null || _f === void 0 ? void 0 : _f.from, isClearable: true }))); | ||
react_1.default.createElement(date_picker_input_1.DatePickerInput, { value: (_b = (_a = props.value) === null || _a === void 0 ? void 0 : _a.from) !== null && _b !== void 0 ? _b : null, onChange: onChangeFrom, label: `${props.filter.label} (od)`, name: props.filter.name, maxDate: (_c = props.value) === null || _c === void 0 ? void 0 : _c.to, placeholder: (_d = props.filter.config) === null || _d === void 0 ? void 0 : _d.placeholder, isClearable: true }), | ||
react_1.default.createElement(date_picker_input_1.DatePickerInput, { value: (_f = (_e = props.value) === null || _e === void 0 ? void 0 : _e.to) !== null && _f !== void 0 ? _f : null, onChange: onChangeTo, label: `${props.filter.label} (do)`, name: props.filter.name, minDate: (_g = props.value) === null || _g === void 0 ? void 0 : _g.from, placeholder: (_h = props.filter.config) === null || _h === void 0 ? void 0 : _h.placeholder, isClearable: true }))); | ||
}, | ||
@@ -33,0 +33,0 @@ ListItem: function (props) { |
@@ -14,6 +14,6 @@ "use strict"; | ||
Input(props) { | ||
var _a, _b, _c, _d, _e, _f; | ||
var _a, _b, _c, _d, _e, _f, _g, _h; | ||
return (react_1.default.createElement("div", { className: "uxf-data-grid__filter uxf-data-grid__filter--datetime" }, | ||
react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { value: (_b = (_a = props.value) === null || _a === void 0 ? void 0 : _a.from) !== null && _b !== void 0 ? _b : null, onChange: (value) => props.onChange({ ...props.value, from: value !== null && value !== void 0 ? value : undefined }), label: `${props.filter.label} (od)`, name: props.filter.name, maxDate: (_c = props.value) === null || _c === void 0 ? void 0 : _c.to, isClearable: true }), | ||
react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { value: (_e = (_d = props.value) === null || _d === void 0 ? void 0 : _d.to) !== null && _e !== void 0 ? _e : null, onChange: (value) => props.onChange({ ...props.value, to: value !== null && value !== void 0 ? value : undefined }), label: `${props.filter.label} (do)`, name: props.filter.name, minDate: (_f = props.value) === null || _f === void 0 ? void 0 : _f.from, isClearable: true }))); | ||
react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { value: (_b = (_a = props.value) === null || _a === void 0 ? void 0 : _a.from) !== null && _b !== void 0 ? _b : null, onChange: (value) => props.onChange({ ...props.value, from: value !== null && value !== void 0 ? value : undefined }), label: `${props.filter.label} (od)`, name: props.filter.name, maxDate: (_c = props.value) === null || _c === void 0 ? void 0 : _c.to, placeholder: (_d = props.filter.config) === null || _d === void 0 ? void 0 : _d.placeholder, isClearable: true }), | ||
react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { value: (_f = (_e = props.value) === null || _e === void 0 ? void 0 : _e.to) !== null && _f !== void 0 ? _f : null, onChange: (value) => props.onChange({ ...props.value, to: value !== null && value !== void 0 ? value : undefined }), label: `${props.filter.label} (do)`, name: props.filter.name, minDate: (_g = props.value) === null || _g === void 0 ? void 0 : _g.from, placeholder: (_h = props.filter.config) === null || _h === void 0 ? void 0 : _h.placeholder, isClearable: true }))); | ||
}, | ||
@@ -20,0 +20,0 @@ ListItem: function (props) { |
@@ -14,3 +14,4 @@ "use strict"; | ||
Input(props) { | ||
return (react_1.default.createElement(multi_combobox_1.MultiCombobox, { loadOptions: (term) => { var _a; return (0, _api_1.dataGridAutocomplete)((_a = props.filter.autocomplete) !== null && _a !== void 0 ? _a : "", term); }, label: props.filter.label, value: props.value, onChange: (value) => props.onChange(value), name: props.filter.name })); | ||
var _a; | ||
return (react_1.default.createElement(multi_combobox_1.MultiCombobox, { loadOptions: (term) => { var _a; return (0, _api_1.dataGridAutocomplete)((_a = props.filter.autocomplete) !== null && _a !== void 0 ? _a : "", term); }, label: props.filter.label, value: props.value, onChange: (value) => props.onChange(value), name: props.filter.name, placeholder: (_a = props.filter.config) === null || _a === void 0 ? void 0 : _a.placeholder })); | ||
}, | ||
@@ -17,0 +18,0 @@ ListItem(props) { |
@@ -12,3 +12,4 @@ "use strict"; | ||
Input(props) { | ||
return (react_1.default.createElement(combobox_1.Combobox, { loadOptions: (term) => { var _a; return (0, _api_1.dataGridAutocomplete)((_a = props.filter.autocomplete) !== null && _a !== void 0 ? _a : "", term); }, label: props.filter.label, value: props.value, onChange: (value) => props.onChange(value), isClearable: true, name: props.filter.name })); | ||
var _a; | ||
return (react_1.default.createElement(combobox_1.Combobox, { loadOptions: (term) => { var _a; return (0, _api_1.dataGridAutocomplete)((_a = props.filter.autocomplete) !== null && _a !== void 0 ? _a : "", term); }, label: props.filter.label, value: props.value, onChange: (value) => props.onChange(value), name: props.filter.name, placeholder: (_a = props.filter.config) === null || _a === void 0 ? void 0 : _a.placeholder, isClearable: true })); | ||
}, | ||
@@ -15,0 +16,0 @@ ListItem(props) { |
@@ -12,6 +12,7 @@ "use strict"; | ||
Input(props) { | ||
var _a; | ||
const onChange = (value) => props.onChange(value !== null && value !== void 0 ? value : ""); | ||
return (react_1.default.createElement("div", { key: props.filter.name }, | ||
react_1.default.createElement("div", { className: "uxf-data-grid__filter uxf-data-grid__filter--interval" }, | ||
react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { label: props.filter.label, name: props.filter.name, onChange: onChange, value: props.value })))); | ||
react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { label: props.filter.label, name: props.filter.name, onChange: onChange, value: props.value, placeholder: (_a = props.filter.config) === null || _a === void 0 ? void 0 : _a.placeholder })))); | ||
}, | ||
@@ -18,0 +19,0 @@ ListItem(props) { |
@@ -12,7 +12,7 @@ "use strict"; | ||
Input(props) { | ||
var _a; | ||
var _a, _b; | ||
const onChange = (value) => { | ||
props.onChange(Array.isArray(value) && !(0, is_empty_1.isEmpty)(value) ? value : null); | ||
}; | ||
return (react_1.default.createElement(multi_select_1.MultiSelect, { options: (_a = props.filter.options) !== null && _a !== void 0 ? _a : [], label: props.filter.label, value: props.value, onChange: onChange, name: props.filter.name })); | ||
return (react_1.default.createElement(multi_select_1.MultiSelect, { options: (_a = props.filter.options) !== null && _a !== void 0 ? _a : [], label: props.filter.label, value: props.value, onChange: onChange, name: props.filter.name, placeholder: (_b = props.filter.config) === null || _b === void 0 ? void 0 : _b.placeholder })); | ||
}, | ||
@@ -19,0 +19,0 @@ ListItem(props) { |
@@ -11,4 +11,4 @@ "use strict"; | ||
Input(props) { | ||
var _a; | ||
return (react_1.default.createElement(select_1.Select, { options: (_a = props.filter.options) !== null && _a !== void 0 ? _a : [], label: props.filter.label, value: props.value, onChange: (value) => props.onChange(value), isClearable: true, name: props.filter.name })); | ||
var _a, _b; | ||
return (react_1.default.createElement(select_1.Select, { options: (_a = props.filter.options) !== null && _a !== void 0 ? _a : [], label: props.filter.label, value: props.value, onChange: (value) => props.onChange(value), isClearable: true, name: props.filter.name, placeholder: (_b = props.filter.config) === null || _b === void 0 ? void 0 : _b.placeholder })); | ||
}, | ||
@@ -15,0 +15,0 @@ ListItem(props) { |
@@ -13,4 +13,4 @@ "use strict"; | ||
Input(props) { | ||
var _a; | ||
return (react_1.default.createElement(text_input_1.TextInput, { label: props.filter.label, value: (_a = props.value) !== null && _a !== void 0 ? _a : "", onChange: (value) => props.onChange(value), name: props.filter.name })); | ||
var _a, _b; | ||
return (react_1.default.createElement(text_input_1.TextInput, { label: props.filter.label, value: (_a = props.value) !== null && _a !== void 0 ? _a : "", onChange: (value) => props.onChange(value), name: props.filter.name, placeholder: (_b = props.filter.config) === null || _b === void 0 ? void 0 : _b.placeholder })); | ||
}, | ||
@@ -17,0 +17,0 @@ ListItem(props) { |
@@ -5,1 +5,2 @@ export * from "./data-grid"; | ||
export { decodeFilter, encodeFilter } from "./utils"; | ||
export { mergeSchemaWithConfig } from "./utils/merge-schema-with-config"; |
@@ -17,3 +17,3 @@ "use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.encodeFilter = exports.decodeFilter = void 0; | ||
exports.mergeSchemaWithConfig = exports.encodeFilter = exports.decodeFilter = void 0; | ||
__exportStar(require("./data-grid"), exports); | ||
@@ -25,1 +25,3 @@ __exportStar(require("./hooks/useCallbackRef"), exports); | ||
Object.defineProperty(exports, "encodeFilter", { enumerable: true, get: function () { return utils_1.encodeFilter; } }); | ||
var merge_schema_with_config_1 = require("./utils/merge-schema-with-config"); | ||
Object.defineProperty(exports, "mergeSchemaWithConfig", { enumerable: true, get: function () { return merge_schema_with_config_1.mergeSchemaWithConfig; } }); |
{ | ||
"name": "@uxf/data-grid", | ||
"version": "11.25.1", | ||
"version": "11.26.0", | ||
"description": "UXF DataGrid", | ||
@@ -28,3 +28,3 @@ "homepage": "https://gitlab.com/uxf-npm/data-grid#readme", | ||
"gen:icons": "icons-gen", | ||
"gen:data-grid": "node bin/uxf-data-grid-generator.js -s _generator/test/data-grid-schema -o _generator/test/data-grid --requiredLoader", | ||
"gen:data-grid": "node bin/uxf-data-grid-generator.js -s _generator/__generator_tests__/data-grid-schema -o _generator/__generator_tests__/data-grid --requiredLoader", | ||
"lint": "./node_modules/.bin/eslint -c .eslintrc.js \"./**/*.ts*\"", | ||
@@ -31,0 +31,0 @@ "test": "npm run-script typecheck", |
@@ -93,1 +93,32 @@ # DataGrid | ||
``` | ||
### FrontendConfig | ||
```tsx | ||
import { useDataGridControl } from "@uxf/data-grid/use-data-grid-control"; | ||
import { mergeSchemaWithConfig } from "@uxf/data-grid"; | ||
const schema = mergeSchemaWithConfig( | ||
dataGridSchema_ExampleGrid, | ||
{ | ||
columns: { | ||
id: { width: 100, isHidden: true }, | ||
}, | ||
filters: { | ||
id: { placeholder: "Hledejte podle ID..." } | ||
}, | ||
perPage: 100, | ||
} | ||
); | ||
function Example_1(props) { | ||
const { state, actions } = useDataGridControl({ | ||
schema, | ||
initialUserConfig: props.userConfig, | ||
}) | ||
return <Table schema={schema}/> | ||
} | ||
``` | ||
@@ -29,2 +29,5 @@ import { ReactElement } from "react"; | ||
}; | ||
export type FilterConfig = { | ||
placeholder?: string; | ||
}; | ||
export type ColumnConfig = { | ||
@@ -48,6 +51,7 @@ isHidden?: boolean; | ||
autocomplete?: string | null; | ||
config?: FilterConfig; | ||
} | ||
export interface Schema<GritType extends BaseGridType> { | ||
export interface Schema<GridType extends BaseGridType> { | ||
name?: string; | ||
columns: Columns<GritType["columns"]>[]; | ||
columns: Columns<GridType["columns"]>[]; | ||
filters: Filter[]; | ||
@@ -54,0 +58,0 @@ tabs?: Tab[]; |
import { RequestFilter } from "./api"; | ||
import { BaseGridType, DataGridSort } from "./schema"; | ||
import { BaseGridType, ColumnConfig, DataGridSort, FilterConfig } from "./schema"; | ||
export type GridRequest = { | ||
@@ -11,7 +11,2 @@ f: RequestFilter[]; | ||
}; | ||
interface ColumnConfig { | ||
isHidden?: boolean; | ||
width?: number; | ||
minWidth?: number; | ||
} | ||
export interface DataGridUserConfig<GridType extends BaseGridType> { | ||
@@ -21,2 +16,5 @@ columns?: Partial<Record<keyof GridType["columns"], ColumnConfig>>; | ||
} | ||
export interface DataGridFrontendConfig<GridType extends BaseGridType> extends DataGridUserConfig<GridType> { | ||
filters?: Partial<Record<keyof GridType["filters"], FilterConfig>>; | ||
} | ||
export interface DataGridState<GridType extends BaseGridType> { | ||
@@ -30,2 +28,1 @@ request: GridRequest; | ||
} | ||
export {}; |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
240225
266
5093
124