@ansible/ansible-ui-framework 0.0.392 → 0.0.394
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/cjs/PageForm/Inputs/FormGroupSelect.d.ts +3 -2
- package/cjs/PageForm/Inputs/FormGroupSelect.js +2 -3
- package/cjs/PageForm/Inputs/PageFormTextInput.js +5 -5
- package/cjs/PageForm/PageForm.js +58 -4
- package/cjs/PageForm/PageFormSchema.js +1 -1
- package/cjs/PageTable/PageTableCard.js +9 -1
- package/cjs/PageTable/PageToolbar.js +1 -1
- package/cjs/Settings.js +4 -4
- package/cjs/components/Details.js +1 -1
- package/docs/guides/PageTableGuide.md +4 -4
- package/package.json +1 -1
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { SelectProps } from '@patternfly/react-core';
|
|
2
|
+
import React from 'react';
|
|
3
3
|
import { PageFormGroupProps } from './PageFormGroup';
|
|
4
|
-
export type FormGroupSelectProps = Pick<SelectProps, 'footer' | 'isCreatable' | 'isGrouped' | 'onSelect' | '
|
|
4
|
+
export type FormGroupSelectProps = Pick<SelectProps, 'footer' | 'isCreatable' | 'isGrouped' | 'onSelect' | 'placeholderText' | 'value' | 'isDisabled'> & PageFormGroupProps & {
|
|
5
5
|
isReadOnly?: boolean;
|
|
6
|
+
placeholderText: string | React.ReactNode;
|
|
6
7
|
};
|
|
7
8
|
/** A PatternFly FormGroup with a PatternFly Select */
|
|
8
9
|
export declare function FormGroupSelect(props: FormGroupSelectProps): JSX.Element;
|
|
@@ -34,9 +34,8 @@ var react_1 = require("react");
|
|
|
34
34
|
var PageFormGroup_1 = require("./PageFormGroup");
|
|
35
35
|
/** A PatternFly FormGroup with a PatternFly Select */
|
|
36
36
|
function FormGroupSelect(props) {
|
|
37
|
-
var _a;
|
|
38
37
|
var children = props.children, helperTextInvalid = props.helperTextInvalid, isReadOnly = props.isReadOnly, onSelect = props.onSelect, value = props.value;
|
|
39
|
-
var
|
|
38
|
+
var _a = __read((0, react_1.useState)(false), 2), open = _a[0], setOpen = _a[1];
|
|
40
39
|
var onToggle = (0, react_1.useCallback)(function () { return setOpen(function (open) { return !open; }); }, []);
|
|
41
40
|
var onSelectHandler = (0, react_1.useCallback)(function (event, value) {
|
|
42
41
|
if (typeof value === 'string')
|
|
@@ -45,6 +44,6 @@ function FormGroupSelect(props) {
|
|
|
45
44
|
onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, value.toString());
|
|
46
45
|
setOpen(false);
|
|
47
46
|
}, [onSelect]);
|
|
48
|
-
return ((0, jsx_runtime_1.jsx)(PageFormGroup_1.PageFormGroup, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(react_core_1.Select, __assign({}, props, { label: undefined, variant: react_core_1.SelectVariant.single, "aria-describedby": props.id ? "".concat(props.id, "-form-group") : undefined, selections: value, onSelect: onSelectHandler, isOpen: open, onToggle: onToggle, maxHeight: 280, validated: helperTextInvalid ? 'error' : undefined, isDisabled: props.isDisabled || isReadOnly
|
|
47
|
+
return ((0, jsx_runtime_1.jsx)(PageFormGroup_1.PageFormGroup, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(react_core_1.Select, __assign({}, props, { label: undefined, variant: react_core_1.SelectVariant.single, "aria-describedby": props.id ? "".concat(props.id, "-form-group") : undefined, selections: value, onSelect: onSelectHandler, isOpen: open, onToggle: onToggle, maxHeight: 280, validated: helperTextInvalid ? 'error' : undefined, isDisabled: props.isDisabled || isReadOnly }, { children: children })) })));
|
|
49
48
|
}
|
|
50
49
|
exports.FormGroupSelect = FormGroupSelect;
|
|
@@ -20,11 +20,11 @@ function PageFormTextInput(props) {
|
|
|
20
20
|
var _a = (0, react_hook_form_1.useFormContext)(), control = _a.control, isSubmitting = _a.formState.isSubmitting;
|
|
21
21
|
return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: props.name, control: control, render: function (_a) {
|
|
22
22
|
var _b = _a.field, onChange = _b.onChange, value = _b.value, error = _a.fieldState.error;
|
|
23
|
-
return ((0, jsx_runtime_1.jsx)(
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
23
|
+
return ((0, jsx_runtime_1.jsx)(FormGroupTextInput_1.FormGroupTextInput, __assign({}, props, { value: value, onChange: onChange, helperTextInvalid: (error === null || error === void 0 ? void 0 : error.type) === 'required'
|
|
24
|
+
? typeof props.label === 'string'
|
|
25
|
+
? "".concat(props.label, " is required")
|
|
26
|
+
: 'Required'
|
|
27
|
+
: error === null || error === void 0 ? void 0 : error.message, isReadOnly: props.isReadOnly || isSubmitting })));
|
|
28
28
|
} }));
|
|
29
29
|
}
|
|
30
30
|
exports.PageFormTextInput = PageFormTextInput;
|
package/cjs/PageForm/PageForm.js
CHANGED
|
@@ -10,6 +10,42 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
};
|
|
11
11
|
return __assign.apply(this, arguments);
|
|
12
12
|
};
|
|
13
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
14
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
15
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
16
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
17
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
18
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
19
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
20
|
+
});
|
|
21
|
+
};
|
|
22
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
23
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
24
|
+
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
25
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
26
|
+
function step(op) {
|
|
27
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
28
|
+
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
|
29
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
30
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
31
|
+
switch (op[0]) {
|
|
32
|
+
case 0: case 1: t = op; break;
|
|
33
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
34
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
35
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
36
|
+
default:
|
|
37
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
38
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
39
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
40
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
41
|
+
if (t[2]) _.ops.pop();
|
|
42
|
+
_.trys.pop(); continue;
|
|
43
|
+
}
|
|
44
|
+
op = body.call(thisArg, _);
|
|
45
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
46
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
47
|
+
}
|
|
48
|
+
};
|
|
13
49
|
var __read = (this && this.__read) || function (o, n) {
|
|
14
50
|
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
15
51
|
if (!m) return o;
|
|
@@ -37,6 +73,7 @@ var Scrollable_1 = require("../components/Scrollable");
|
|
|
37
73
|
var useBreakPoint_1 = require("../components/useBreakPoint");
|
|
38
74
|
var Settings_1 = require("../Settings");
|
|
39
75
|
function PageForm(props) {
|
|
76
|
+
var _this = this;
|
|
40
77
|
var schema = props.schema, defaultValue = props.defaultValue;
|
|
41
78
|
var form = (0, react_hook_form_1.useForm)({
|
|
42
79
|
defaultValues: defaultValue !== null && defaultValue !== void 0 ? defaultValue : {},
|
|
@@ -62,10 +99,27 @@ function PageForm(props) {
|
|
|
62
99
|
// eslint-disable-next-line @typescript-eslint/no-misused-promises
|
|
63
100
|
, __assign({
|
|
64
101
|
// eslint-disable-next-line @typescript-eslint/no-misused-promises
|
|
65
|
-
onSubmit: handleSubmit(function (data) {
|
|
66
|
-
|
|
67
|
-
return
|
|
68
|
-
|
|
102
|
+
onSubmit: handleSubmit(function (data) { return __awaiter(_this, void 0, void 0, function () {
|
|
103
|
+
var err_1;
|
|
104
|
+
return __generator(this, function (_a) {
|
|
105
|
+
switch (_a.label) {
|
|
106
|
+
case 0:
|
|
107
|
+
setError('');
|
|
108
|
+
_a.label = 1;
|
|
109
|
+
case 1:
|
|
110
|
+
_a.trys.push([1, 3, , 4]);
|
|
111
|
+
return [4 /*yield*/, props.onSubmit(data, setError, setFieldError)];
|
|
112
|
+
case 2:
|
|
113
|
+
_a.sent();
|
|
114
|
+
return [3 /*break*/, 4];
|
|
115
|
+
case 3:
|
|
116
|
+
err_1 = _a.sent();
|
|
117
|
+
setError(err_1 instanceof Error ? err_1.message : 'Unknown error');
|
|
118
|
+
return [3 /*break*/, 4];
|
|
119
|
+
case 4: return [2 /*return*/];
|
|
120
|
+
}
|
|
121
|
+
});
|
|
122
|
+
}); }), isHorizontal: isHorizontal, style: {
|
|
69
123
|
display: 'flex',
|
|
70
124
|
flexDirection: 'column',
|
|
71
125
|
flexGrow: 1,
|
|
@@ -82,7 +82,7 @@ function PageFormSchema(props) {
|
|
|
82
82
|
case 'select': {
|
|
83
83
|
if ('options' in property) {
|
|
84
84
|
var formSelectProps = property;
|
|
85
|
-
p.push((0, jsx_runtime_1.jsx)(PageFormSelectOption_1.PageFormSelectOption, { id: base + propertyName, name: base + propertyName, label: title,
|
|
85
|
+
p.push((0, jsx_runtime_1.jsx)(PageFormSelectOption_1.PageFormSelectOption, { id: base + propertyName, name: base + propertyName, label: title, placeholderText: placeholder, isRequired: required, options: formSelectProps.options, footer: formSelectProps.footer, labelHelpTitle: title, labelHelp: description }, base + propertyName));
|
|
86
86
|
}
|
|
87
87
|
else {
|
|
88
88
|
p.push((0, jsx_runtime_1.jsx)(PageFormTextSelect_1.FormTextSelect, { name: base + propertyName, label: title, placeholder: placeholder, required: required, selectTitle: property.selectTitle, selectValue: property.selectValue, selectOpen: property.selectOpen }, base + propertyName));
|
|
@@ -153,6 +153,14 @@ function useColumnsToTableCardFn(columns, keyFn) {
|
|
|
153
153
|
}
|
|
154
154
|
return pageTableCard;
|
|
155
155
|
};
|
|
156
|
-
}, [
|
|
156
|
+
}, [
|
|
157
|
+
cardColumns,
|
|
158
|
+
countColumns,
|
|
159
|
+
descriptionColumn,
|
|
160
|
+
labelColumn,
|
|
161
|
+
nameColumn,
|
|
162
|
+
subtitleColumn,
|
|
163
|
+
keyFn,
|
|
164
|
+
]);
|
|
157
165
|
}
|
|
158
166
|
exports.useColumnsToTableCardFn = useColumnsToTableCardFn;
|
|
@@ -112,7 +112,7 @@ function PageTableToolbar(props) {
|
|
|
112
112
|
paddingBottom: sm ? undefined : 8,
|
|
113
113
|
paddingTop: sm ? undefined : 8,
|
|
114
114
|
backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
|
|
115
|
-
} }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarContent, { children: [showSelect && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarGroup, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, __assign({ variant: "bulk-select" }, { children: (0, jsx_runtime_1.jsx)(BulkSelector_1.BulkSelector, __assign({}, props)) })) })), toolbarFilters && toolbarFilters.length > 0 && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarToggleGroup, __assign({ toggleIcon: (0, jsx_runtime_1.jsx)(react_icons_1.FilterIcon, {}), breakpoint: "md", style: { zIndex: 302 } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarGroup, __assign({ variant: "filter-group" }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "filter", onSelect: function (_, v) { return setSeletedFilter(v.toString()); }, value: selectedFilter }, { children: toolbarFilters.map(function (filter) { return ((0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: filter.key }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ spaceItems: { default: 'spaceItemsNone' }, alignItems: { default: 'alignItemsCenter' }, flexWrap: { default: 'nowrap' } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.FlexItem, __assign({ style: { paddingLeft: 4, paddingRight: 8 } }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.FilterIcon, {}) })), (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: filter.label })] })) }), filter.key)); }) })) }), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(ToolbarFilterInput, { filter: toolbarFilters.find(function (filter) { return filter.key === selectedFilter; }), addFilter: function (value) {
|
|
115
|
+
} }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarContent, { children: [showSelect && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarGroup, { children: (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, __assign({ variant: "bulk-select" }, { children: (0, jsx_runtime_1.jsx)(BulkSelector_1.BulkSelector, __assign({}, props)) })) })), toolbarFilters && toolbarFilters.length > 0 && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarToggleGroup, __assign({ toggleIcon: (0, jsx_runtime_1.jsx)(react_icons_1.FilterIcon, {}), breakpoint: "md", style: { zIndex: 302 } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarGroup, __assign({ variant: "filter-group" }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "filter", onSelect: function (_, v) { return setSeletedFilter(v.toString()); }, value: selectedFilter, placeholderText: "Select filter" }, { children: toolbarFilters.map(function (filter) { return ((0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: filter.key }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Flex, __assign({ spaceItems: { default: 'spaceItemsNone' }, alignItems: { default: 'alignItemsCenter' }, flexWrap: { default: 'nowrap' } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.FlexItem, __assign({ style: { paddingLeft: 4, paddingRight: 8 } }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.FilterIcon, {}) })), (0, jsx_runtime_1.jsx)(react_core_1.FlexItem, { children: filter.label })] })) }), filter.key)); }) })) }), (0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(ToolbarFilterInput, { filter: toolbarFilters.find(function (filter) { return filter.key === selectedFilter; }), addFilter: function (value) {
|
|
116
116
|
var _a;
|
|
117
117
|
var values = filters === null || filters === void 0 ? void 0 : filters[selectedFilter];
|
|
118
118
|
if (!values)
|
package/cjs/Settings.js
CHANGED
|
@@ -112,12 +112,12 @@ function SettingsDialog(props) {
|
|
|
112
112
|
(0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "primary", onClick: onClose }, { children: translations.closeText }), "close"),
|
|
113
113
|
] }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Form, __assign({ isHorizontal: settings.formLayout === 'horizontal' }, { children: [(0, jsx_runtime_1.jsxs)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "theme", label: "Theme", value: (_a = settings.theme) !== null && _a !== void 0 ? _a : 'system', onSelect: function (_, theme) {
|
|
114
114
|
return setSettings(__assign(__assign({}, settings), { theme: theme }));
|
|
115
|
-
} }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "system" }, { children: 'System default' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "light" }, { children: 'Light' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "dark" }, { children: 'Dark' }))] })), (0, jsx_runtime_1.jsxs)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "table-layout", label: "Table Layout", value: (_b = settings.tableLayout) !== null && _b !== void 0 ? _b : 'comfortable', onSelect: function (_, tableLayout) {
|
|
115
|
+
}, placeholderText: "Select theme" }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "system" }, { children: 'System default' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "light" }, { children: 'Light' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "dark" }, { children: 'Dark' }))] })), (0, jsx_runtime_1.jsxs)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "table-layout", label: "Table Layout", value: (_b = settings.tableLayout) !== null && _b !== void 0 ? _b : 'comfortable', onSelect: function (_, tableLayout) {
|
|
116
116
|
return setSettings(__assign(__assign({}, settings), { tableLayout: tableLayout }));
|
|
117
|
-
} }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "comfortable" }, { children: 'Comfortable' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "compact" }, { children: 'Compact' }))] })), (0, jsx_runtime_1.jsxs)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "form-columns", label: "Form Columns", value: (_c = settings.formColumns) !== null && _c !== void 0 ? _c : 'multiple', onSelect: function (_, formColumns) {
|
|
117
|
+
}, placeholderText: "Select table layout" }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "comfortable" }, { children: 'Comfortable' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "compact" }, { children: 'Compact' }))] })), (0, jsx_runtime_1.jsxs)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "form-columns", label: "Form Columns", value: (_c = settings.formColumns) !== null && _c !== void 0 ? _c : 'multiple', onSelect: function (_, formColumns) {
|
|
118
118
|
return setSettings(__assign(__assign({}, settings), { formColumns: formColumns }));
|
|
119
|
-
} }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "multiple" }, { children: 'Multiple columns' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "single" }, { children: 'Single column' }))] })), (0, jsx_runtime_1.jsxs)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "form-layout", label: "Form Layout", value: (_d = settings.formLayout) !== null && _d !== void 0 ? _d : 'vertical', onSelect: function (_, formLayout) {
|
|
119
|
+
}, placeholderText: "Select form columns" }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "multiple" }, { children: 'Multiple columns' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "single" }, { children: 'Single column' }))] })), (0, jsx_runtime_1.jsxs)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "form-layout", label: "Form Layout", value: (_d = settings.formLayout) !== null && _d !== void 0 ? _d : 'vertical', onSelect: function (_, formLayout) {
|
|
120
120
|
return setSettings(__assign(__assign({}, settings), { formLayout: formLayout }));
|
|
121
|
-
} }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "vertical" }, { children: 'Vertical labels' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "horizontal" }, { children: 'Horizontal labels' }))] })), (0, jsx_runtime_1.jsxs)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "borders", label: "Borders", value: settings.borders ? 'true' : 'false', onSelect: function (_, value) { return setSettings(__assign(__assign({}, settings), { borders: value === 'true' })); } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "true" }, { children: 'Yes' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "false" }, { children: 'No' }))] }))] })) })));
|
|
121
|
+
}, placeholderText: "Select form layout" }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "vertical" }, { children: 'Vertical labels' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "horizontal" }, { children: 'Horizontal labels' }))] })), (0, jsx_runtime_1.jsxs)(FormGroupSelect_1.FormGroupSelect, __assign({ id: "borders", label: "Borders", value: settings.borders ? 'true' : 'false', onSelect: function (_, value) { return setSettings(__assign(__assign({}, settings), { borders: value === 'true' })); }, placeholderText: "Select borders" }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "true" }, { children: 'Yes' })), (0, jsx_runtime_1.jsx)(react_core_1.SelectOption, __assign({ value: "false" }, { children: 'No' }))] }))] })) })));
|
|
122
122
|
}
|
|
123
123
|
exports.SettingsDialog = SettingsDialog;
|
|
@@ -50,7 +50,7 @@ function Detail(props) {
|
|
|
50
50
|
var _a;
|
|
51
51
|
if (!props.children)
|
|
52
52
|
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
|
53
|
-
return ((0, jsx_runtime_1.jsxs)(react_core_1.DescriptionListGroup, { children: [props.label && ((0, jsx_runtime_1.jsx)(react_core_1.DescriptionListTerm, { children:
|
|
53
|
+
return ((0, jsx_runtime_1.jsxs)(react_core_1.DescriptionListGroup, { children: [props.label && ((0, jsx_runtime_1.jsx)(react_core_1.DescriptionListTerm, { children: props.label })), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, __assign({ id: (_a = props.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().split(' ').join('-') }, { children: props.children }))] }));
|
|
54
54
|
}
|
|
55
55
|
exports.Detail = Detail;
|
|
56
56
|
function DetailsSkeleton() {
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
Each table uses a view using a React hook. The view handles the state for the table. Sorting, filtering, pagination, etc...
|
|
8
8
|
|
|
9
9
|
```tsx
|
|
10
|
-
const view = useView()
|
|
10
|
+
const view = useView();
|
|
11
11
|
```
|
|
12
12
|
|
|
13
13
|
For different backends, the view can be wrapped to make a specific view hook for the API.
|
|
@@ -44,7 +44,7 @@ The PageTable component takes in the properties from the view and shows a table
|
|
|
44
44
|
|
|
45
45
|
```tsx
|
|
46
46
|
export function Users() {
|
|
47
|
-
const view = useMyApiView<IUser>({ url: '/api/users' })
|
|
47
|
+
const view = useMyApiView<IUser>({ url: '/api/users' });
|
|
48
48
|
const tableColumns = useMemo<ITableColumn<IUser>[]>(
|
|
49
49
|
() => [
|
|
50
50
|
{
|
|
@@ -54,7 +54,7 @@ export function Users() {
|
|
|
54
54
|
},
|
|
55
55
|
],
|
|
56
56
|
[]
|
|
57
|
-
)
|
|
57
|
+
);
|
|
58
58
|
return (
|
|
59
59
|
<PageLayout>
|
|
60
60
|
<PageHeader title="Users" />
|
|
@@ -62,7 +62,7 @@ export function Users() {
|
|
|
62
62
|
<PageTable<IUser> tableColumns={tableColumns} {...view} />
|
|
63
63
|
</PageBody>
|
|
64
64
|
</PageLayout>
|
|
65
|
-
)
|
|
65
|
+
);
|
|
66
66
|
}
|
|
67
67
|
```
|
|
68
68
|
|