@sap-ux/ui-components 1.8.0 → 1.8.2
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/dist/components/Icons.d.ts +139 -139
- package/dist/components/Icons.js +582 -582
- package/dist/components/UIActionCallout/UIActionCallout.d.ts +61 -61
- package/dist/components/UIActionCallout/UIActionCallout.js +63 -63
- package/dist/components/UIActionCallout/UIActionCallout.scss +31 -31
- package/dist/components/UIActionCallout/index.d.ts +1 -1
- package/dist/components/UIActionCallout/index.js +17 -17
- package/dist/components/UIBreadcrumb/UIBreadcrumb.d.ts +23 -23
- package/dist/components/UIBreadcrumb/UIBreadcrumb.js +38 -38
- package/dist/components/UIBreadcrumb/index.d.ts +1 -1
- package/dist/components/UIBreadcrumb/index.js +17 -17
- package/dist/components/UIButton/UIActionButton.d.ts +23 -23
- package/dist/components/UIButton/UIActionButton.js +89 -89
- package/dist/components/UIButton/UIDefaultButton.d.ts +23 -23
- package/dist/components/UIButton/UIDefaultButton.js +229 -229
- package/dist/components/UIButton/UIIconButton.d.ts +37 -37
- package/dist/components/UIButton/UIIconButton.js +106 -106
- package/dist/components/UIButton/UISmallButton.d.ts +34 -34
- package/dist/components/UIButton/UISmallButton.js +115 -115
- package/dist/components/UIButton/UISplitButton.d.ts +36 -36
- package/dist/components/UIButton/UISplitButton.js +71 -71
- package/dist/components/UIButton/index.d.ts +7 -7
- package/dist/components/UIButton/index.js +21 -21
- package/dist/components/UICallout/UICallout.d.ts +37 -37
- package/dist/components/UICallout/UICallout.js +90 -90
- package/dist/components/UICallout/index.d.ts +1 -1
- package/dist/components/UICallout/index.js +17 -17
- package/dist/components/UICheckbox/UICheckbox.d.ts +34 -34
- package/dist/components/UICheckbox/UICheckbox.js +135 -135
- package/dist/components/UICheckbox/index.d.ts +1 -1
- package/dist/components/UICheckbox/index.js +17 -17
- package/dist/components/UIChoiceGroup/UIChoiceGroup.d.ts +28 -28
- package/dist/components/UIChoiceGroup/UIChoiceGroup.js +182 -182
- package/dist/components/UIChoiceGroup/index.d.ts +1 -1
- package/dist/components/UIChoiceGroup/index.js +17 -17
- package/dist/components/UIComboBox/Callout.scss +7 -7
- package/dist/components/UIComboBox/UIComboBox.d.ts +198 -198
- package/dist/components/UIComboBox/UIComboBox.js +516 -516
- package/dist/components/UIComboBox/UIComboBox.scss +268 -268
- package/dist/components/UIComboBox/_mixins.scss +32 -32
- package/dist/components/UIComboBox/index.d.ts +1 -1
- package/dist/components/UIComboBox/index.js +17 -17
- package/dist/components/UIContextualMenu/UIContextualMenu.d.ts +31 -31
- package/dist/components/UIContextualMenu/UIContextualMenu.js +123 -123
- package/dist/components/UIContextualMenu/UIContextualMenu.scss +211 -211
- package/dist/components/UIContextualMenu/UIHighlightMenuOption.d.ts +19 -19
- package/dist/components/UIContextualMenu/UIHighlightMenuOption.js +50 -50
- package/dist/components/UIContextualMenu/UIHighlightMenuOption.scss +23 -23
- package/dist/components/UIContextualMenu/_variables.scss +30 -30
- package/dist/components/UIContextualMenu/index.d.ts +2 -2
- package/dist/components/UIContextualMenu/index.js +18 -18
- package/dist/components/UIDatePicker/UIDatePicker.d.ts +49 -49
- package/dist/components/UIDatePicker/UIDatePicker.js +72 -72
- package/dist/components/UIDatePicker/UIDatePicker.scss +38 -38
- package/dist/components/UIDatePicker/index.d.ts +1 -1
- package/dist/components/UIDatePicker/index.js +17 -17
- package/dist/components/UIDialog/UIDialog.d.ts +116 -116
- package/dist/components/UIDialog/UIDialog.js +279 -279
- package/dist/components/UIDialog/index.d.ts +1 -1
- package/dist/components/UIDialog/index.js +17 -17
- package/dist/components/UIDropdown/UIDropdown.d.ts +90 -90
- package/dist/components/UIDropdown/UIDropdown.js +216 -216
- package/dist/components/UIDropdown/UIDropdown.scss +115 -115
- package/dist/components/UIDropdown/index.d.ts +2 -2
- package/dist/components/UIDropdown/index.js +18 -18
- package/dist/components/UIDropdown/utils.d.ts +8 -8
- package/dist/components/UIDropdown/utils.js +20 -20
- package/dist/components/UIFlexibleTable/RowActions.d.ts +16 -16
- package/dist/components/UIFlexibleTable/RowActions.js +73 -73
- package/dist/components/UIFlexibleTable/RowData.d.ts +16 -16
- package/dist/components/UIFlexibleTable/RowData.js +111 -111
- package/dist/components/UIFlexibleTable/UIFlexibleTable.d.ts +11 -11
- package/dist/components/UIFlexibleTable/UIFlexibleTable.js +280 -280
- package/dist/components/UIFlexibleTable/UIFlexibleTable.scss +433 -433
- package/dist/components/UIFlexibleTable/UIFlexibleTableActionButton.d.ts +20 -20
- package/dist/components/UIFlexibleTable/UIFlexibleTableActionButton.js +20 -20
- package/dist/components/UIFlexibleTable/UIFlexibleTableRow.d.ts +26 -26
- package/dist/components/UIFlexibleTable/UIFlexibleTableRow.js +165 -165
- package/dist/components/UIFlexibleTable/UIFlexibleTableRowActionButton.d.ts +20 -20
- package/dist/components/UIFlexibleTable/UIFlexibleTableRowActionButton.js +19 -19
- package/dist/components/UIFlexibleTable/UIFlexibleTableRowNoData.d.ts +15 -15
- package/dist/components/UIFlexibleTable/UIFlexibleTableRowNoData.js +28 -28
- package/dist/components/UIFlexibleTable/index.d.ts +5 -5
- package/dist/components/UIFlexibleTable/index.js +21 -21
- package/dist/components/UIFlexibleTable/types.d.ts +142 -142
- package/dist/components/UIFlexibleTable/types.js +14 -14
- package/dist/components/UIFlexibleTable/utils.d.ts +25 -25
- package/dist/components/UIFlexibleTable/utils.js +49 -49
- package/dist/components/UIFocusZone/UIFocusTrapZone.d.ts +22 -22
- package/dist/components/UIFocusZone/UIFocusTrapZone.js +33 -33
- package/dist/components/UIFocusZone/UIFocusZone.d.ts +23 -23
- package/dist/components/UIFocusZone/UIFocusZone.js +35 -35
- package/dist/components/UIFocusZone/index.d.ts +2 -2
- package/dist/components/UIFocusZone/index.js +18 -18
- package/dist/components/UIIcon/UIIcon.d.ts +24 -24
- package/dist/components/UIIcon/UIIcon.js +37 -37
- package/dist/components/UIIcon/UIIcon.scss +3 -3
- package/dist/components/UIIcon/index.d.ts +1 -1
- package/dist/components/UIIcon/index.js +17 -17
- package/dist/components/UIInput/UITextInput.d.ts +48 -48
- package/dist/components/UIInput/UITextInput.js +238 -238
- package/dist/components/UIInput/index.d.ts +1 -1
- package/dist/components/UIInput/index.js +17 -17
- package/dist/components/UILabel/UILabel.d.ts +30 -30
- package/dist/components/UILabel/UILabel.js +64 -64
- package/dist/components/UILabel/index.d.ts +1 -1
- package/dist/components/UILabel/index.js +17 -17
- package/dist/components/UILink/UILink.d.ts +25 -25
- package/dist/components/UILink/UILink.js +71 -71
- package/dist/components/UILink/index.d.ts +1 -1
- package/dist/components/UILink/index.js +17 -17
- package/dist/components/UIList/UIList.d.ts +31 -31
- package/dist/components/UIList/UIList.js +120 -120
- package/dist/components/UIList/UIList.scss +16 -16
- package/dist/components/UIList/index.d.ts +1 -1
- package/dist/components/UIList/index.js +17 -17
- package/dist/components/UILoader/UILoader.d.ts +27 -27
- package/dist/components/UILoader/UILoader.js +78 -78
- package/dist/components/UILoader/UILoader.scss +32 -32
- package/dist/components/UILoader/index.d.ts +1 -1
- package/dist/components/UILoader/index.js +17 -17
- package/dist/components/UIMessageBar/UIMessageBar.d.ts +25 -25
- package/dist/components/UIMessageBar/UIMessageBar.js +56 -56
- package/dist/components/UIMessageBar/index.d.ts +1 -1
- package/dist/components/UIMessageBar/index.js +17 -17
- package/dist/components/UIModal/UIModal.d.ts +23 -23
- package/dist/components/UIModal/UIModal.js +43 -43
- package/dist/components/UIModal/index.d.ts +1 -1
- package/dist/components/UIModal/index.js +17 -17
- package/dist/components/UIOverlay/UIOverlay.d.ts +22 -22
- package/dist/components/UIOverlay/UIOverlay.js +38 -38
- package/dist/components/UIOverlay/index.d.ts +1 -1
- package/dist/components/UIOverlay/index.js +17 -17
- package/dist/components/UIPersona/UIPersona.d.ts +27 -27
- package/dist/components/UIPersona/UIPersona.js +48 -48
- package/dist/components/UIPersona/index.d.ts +1 -1
- package/dist/components/UIPersona/index.js +17 -17
- package/dist/components/UISearchBox/UISearchBox.d.ts +22 -22
- package/dist/components/UISearchBox/UISearchBox.js +153 -153
- package/dist/components/UISearchBox/index.d.ts +3 -3
- package/dist/components/UISearchBox/index.js +17 -17
- package/dist/components/UISection/UISection.d.ts +34 -34
- package/dist/components/UISection/UISection.js +44 -44
- package/dist/components/UISection/UISection.scss +76 -76
- package/dist/components/UISection/UISections.d.ts +249 -249
- package/dist/components/UISection/UISections.js +707 -707
- package/dist/components/UISection/UISections.scss +62 -62
- package/dist/components/UISection/UISplitter.d.ts +96 -96
- package/dist/components/UISection/UISplitter.js +220 -220
- package/dist/components/UISection/UISplitter.scss +212 -212
- package/dist/components/UISection/_mixins.scss +14 -14
- package/dist/components/UISection/_variables.scss +1 -1
- package/dist/components/UISection/index.d.ts +3 -3
- package/dist/components/UISection/index.js +19 -19
- package/dist/components/UISeparator/UISeparator.d.ts +25 -25
- package/dist/components/UISeparator/UISeparator.js +65 -65
- package/dist/components/UISeparator/index.d.ts +1 -1
- package/dist/components/UISeparator/index.js +17 -17
- package/dist/components/UITable/UITable-helper.d.ts +79 -79
- package/dist/components/UITable/UITable-helper.js +259 -259
- package/dist/components/UITable/UITable.d.ts +212 -212
- package/dist/components/UITable/UITable.d.ts.map +1 -1
- package/dist/components/UITable/UITable.js +775 -773
- package/dist/components/UITable/UITable.js.map +1 -1
- package/dist/components/UITable/UITable.scss +194 -194
- package/dist/components/UITable/index.d.ts +2 -2
- package/dist/components/UITable/index.js +18 -18
- package/dist/components/UITable/types.d.ts +77 -77
- package/dist/components/UITable/types.js +28 -28
- package/dist/components/UITabs/UITabs.d.ts +28 -28
- package/dist/components/UITabs/UITabs.js +70 -70
- package/dist/components/UITabs/index.d.ts +1 -1
- package/dist/components/UITabs/index.js +17 -17
- package/dist/components/UIToggle/UIToggle.d.ts +39 -39
- package/dist/components/UIToggle/UIToggle.js +181 -181
- package/dist/components/UIToggle/index.d.ts +1 -1
- package/dist/components/UIToggle/index.js +17 -17
- package/dist/components/UIToggleGroup/UIToggleGroup.d.ts +31 -31
- package/dist/components/UIToggleGroup/UIToggleGroup.js +136 -136
- package/dist/components/UIToggleGroup/UIToggleGroup.scss +13 -13
- package/dist/components/UIToggleGroup/UIToggleGroup.types.d.ts +22 -22
- package/dist/components/UIToggleGroup/UIToggleGroup.types.js +2 -2
- package/dist/components/UIToggleGroup/UIToggleGroupOption/UIToggleGroupOption.d.ts +25 -25
- package/dist/components/UIToggleGroup/UIToggleGroupOption/UIToggleGroupOption.js +77 -77
- package/dist/components/UIToggleGroup/UIToggleGroupOption/UIToggleGroupOption.scss +74 -74
- package/dist/components/UIToggleGroup/UIToggleGroupOption/UIToggleGroupOption.types.d.ts +10 -10
- package/dist/components/UIToggleGroup/UIToggleGroupOption/UIToggleGroupOption.types.js +2 -2
- package/dist/components/UIToggleGroup/UIToggleGroupOption/index.d.ts +2 -2
- package/dist/components/UIToggleGroup/UIToggleGroupOption/index.js +18 -18
- package/dist/components/UIToggleGroup/index.d.ts +2 -2
- package/dist/components/UIToggleGroup/index.js +18 -18
- package/dist/components/UIToolbar/UIToolbar.d.ts +36 -36
- package/dist/components/UIToolbar/UIToolbar.js +104 -104
- package/dist/components/UIToolbar/UIToolbar.scss +48 -48
- package/dist/components/UIToolbar/UIToolbarColumn.d.ts +7 -7
- package/dist/components/UIToolbar/UIToolbarColumn.js +33 -33
- package/dist/components/UIToolbar/UIToolbarDivider.d.ts +27 -27
- package/dist/components/UIToolbar/UIToolbarDivider.js +56 -56
- package/dist/components/UIToolbar/index.d.ts +3 -3
- package/dist/components/UIToolbar/index.js +19 -19
- package/dist/components/UITooltip/UITooltip.d.ts +29 -29
- package/dist/components/UITooltip/UITooltip.js +77 -77
- package/dist/components/UITooltip/UITooltipUtils.d.ts +17 -17
- package/dist/components/UITooltip/UITooltipUtils.js +45 -45
- package/dist/components/UITooltip/index.d.ts +2 -2
- package/dist/components/UITooltip/index.js +18 -18
- package/dist/components/UITranslationInput/UIFormattedText.d.ts +46 -46
- package/dist/components/UITranslationInput/UIFormattedText.js +121 -121
- package/dist/components/UITranslationInput/UILoadButton.d.ts +52 -52
- package/dist/components/UITranslationInput/UILoadButton.js +109 -109
- package/dist/components/UITranslationInput/UILoadButton.scss +14 -14
- package/dist/components/UITranslationInput/UITranslationButton.d.ts +14 -14
- package/dist/components/UITranslationInput/UITranslationButton.js +88 -88
- package/dist/components/UITranslationInput/UITranslationButton.types.d.ts +67 -67
- package/dist/components/UITranslationInput/UITranslationButton.types.js +21 -21
- package/dist/components/UITranslationInput/UITranslationInput.d.ts +25 -25
- package/dist/components/UITranslationInput/UITranslationInput.js +169 -169
- package/dist/components/UITranslationInput/UITranslationInput.scss +40 -40
- package/dist/components/UITranslationInput/UITranslationUtils.d.ts +64 -64
- package/dist/components/UITranslationInput/UITranslationUtils.js +168 -168
- package/dist/components/UITranslationInput/defaults.d.ts +2 -2
- package/dist/components/UITranslationInput/defaults.js +15 -15
- package/dist/components/UITranslationInput/index.d.ts +2 -2
- package/dist/components/UITranslationInput/index.js +18 -18
- package/dist/components/UITreeDropdown/UITreeDropdown.d.ts +265 -265
- package/dist/components/UITreeDropdown/UITreeDropdown.js +661 -661
- package/dist/components/UITreeDropdown/UITreeDropdown.scss +64 -64
- package/dist/components/UITreeDropdown/index.d.ts +1 -1
- package/dist/components/UITreeDropdown/index.js +17 -17
- package/dist/components/UIVerticalDivider/UIVerticalDivider.d.ts +23 -23
- package/dist/components/UIVerticalDivider/UIVerticalDivider.js +41 -41
- package/dist/components/UIVerticalDivider/index.d.ts +1 -1
- package/dist/components/UIVerticalDivider/index.js +17 -17
- package/dist/components/UIVirtualList/UIAutoSizer.d.ts +22 -22
- package/dist/components/UIVirtualList/UIAutoSizer.js +33 -33
- package/dist/components/UIVirtualList/UICellMeasurer.d.ts +23 -23
- package/dist/components/UIVirtualList/UICellMeasurer.js +33 -33
- package/dist/components/UIVirtualList/UIVirtualList.d.ts +43 -43
- package/dist/components/UIVirtualList/UIVirtualList.js +70 -70
- package/dist/components/UIVirtualList/index.d.ts +3 -3
- package/dist/components/UIVirtualList/index.js +19 -19
- package/dist/components/index.d.ts +37 -37
- package/dist/components/index.js +53 -53
- package/dist/helper/ValidationMessage/MessageWrapper.d.ts +17 -17
- package/dist/helper/ValidationMessage/MessageWrapper.js +34 -34
- package/dist/helper/ValidationMessage/MessageWrapper.scss +44 -44
- package/dist/helper/ValidationMessage/index.d.ts +2 -2
- package/dist/helper/ValidationMessage/index.js +18 -18
- package/dist/helper/ValidationMessage/utils.d.ts +31 -31
- package/dist/helper/ValidationMessage/utils.js +121 -121
- package/dist/index.d.ts +2 -2
- package/dist/index.js +18 -18
- package/dist/styles/_mixins.scss +15 -15
- package/dist/styles/_typography.scss +72 -72
- package/dist/styles/_variables.scss +26 -26
- package/dist/styles/ui-components.scss +3 -3
- package/dist/utilities/DeepMerge.d.ts +10 -10
- package/dist/utilities/DeepMerge.js +48 -48
- package/dist/utilities/Focus.d.ts +4 -4
- package/dist/utilities/Focus.js +7 -7
- package/dist/utilities/Id.d.ts +2 -2
- package/dist/utilities/Id.js +5 -5
- package/dist/utilities/Keys.d.ts +2 -2
- package/dist/utilities/Keys.js +5 -5
- package/dist/utilities/index.d.ts +3 -3
- package/dist/utilities/index.js +19 -19
- package/package.json +1 -1
- package/storybook/{308.3ef1252cf4e6f4ea4f87.manager.bundle.js → 275.a8ff63b0ed4a5d620142.manager.bundle.js} +1 -1
- package/storybook/{775.2c32f5dec8245bf06a35.manager.bundle.js → 453.af4e8cc44257a27c435f.manager.bundle.js} +1 -1
- package/storybook/{151.f31eae3b7704470d2f0c.manager.bundle.js → 458.a8cb7c68775e3858b342.manager.bundle.js} +1 -1
- package/storybook/594.4816ff3f4edb5b8b0949.manager.bundle.js +1 -0
- package/storybook/637.173c8d06.iframe.bundle.js +1 -0
- package/storybook/713.ec72f301.iframe.bundle.js +292 -0
- package/storybook/{822.55c0b8c38a0421b3fdcb.manager.bundle.js → 756.edf22bba3c06d7815c54.manager.bundle.js} +8 -8
- package/storybook/{527.5ad8ca17f37f0faebdb5.manager.bundle.js → 966.bc8dd3d7eec539544b33.manager.bundle.js} +1 -1
- package/storybook/{869.9c11e9955598ae6cadd2.manager.bundle.js → 987.81102a5d201c9f5a1528.manager.bundle.js} +1 -1
- package/storybook/iframe.html +17 -17
- package/storybook/index.html +119 -119
- package/storybook/main.4bf0e1ff.iframe.bundle.js +99 -0
- package/storybook/{main.8a2df1189b7472718896.manager.bundle.js → main.73db1398c1704e93ba73.manager.bundle.js} +1 -1
- package/storybook/project.json +1 -1
- package/storybook/{runtime~main.ded4beec.iframe.bundle.js → runtime~main.769376b3.iframe.bundle.js} +2 -2
- package/storybook/runtime~main.eabd5638d9f3e40b3501.manager.bundle.js +2 -0
- package/storybook/215.f4718a88.iframe.bundle.js +0 -292
- package/storybook/24.699b5db7d897cafb43de.manager.bundle.js +0 -1
- package/storybook/851.7748d349.iframe.bundle.js +0 -1
- package/storybook/main.3b29bdd5.iframe.bundle.js +0 -99
- package/storybook/runtime~main.3b601f8d200b50936280.manager.bundle.js +0 -2
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { UiIcons } from '..';
|
|
3
|
-
export interface UIFlexibleTableActionProps {
|
|
4
|
-
actionName: string;
|
|
5
|
-
className?: string;
|
|
6
|
-
iconName: UiIcons;
|
|
7
|
-
disabled?: boolean;
|
|
8
|
-
tableId: string;
|
|
9
|
-
title?: string;
|
|
10
|
-
onClick?: () => void;
|
|
11
|
-
onFocus?: () => void;
|
|
12
|
-
}
|
|
13
|
-
/**
|
|
14
|
-
* UIFlexibleTableActionButton component.
|
|
15
|
-
*
|
|
16
|
-
* @exports
|
|
17
|
-
* @param {UIFlexibleTableActionProps} props
|
|
18
|
-
* @returns { React.ReactElement}
|
|
19
|
-
*/
|
|
20
|
-
export declare function UIFlexibleTableActionButton(props: UIFlexibleTableActionProps): React.ReactElement;
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { UiIcons } from '..';
|
|
3
|
+
export interface UIFlexibleTableActionProps {
|
|
4
|
+
actionName: string;
|
|
5
|
+
className?: string;
|
|
6
|
+
iconName: UiIcons;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
tableId: string;
|
|
9
|
+
title?: string;
|
|
10
|
+
onClick?: () => void;
|
|
11
|
+
onFocus?: () => void;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* UIFlexibleTableActionButton component.
|
|
15
|
+
*
|
|
16
|
+
* @exports
|
|
17
|
+
* @param {UIFlexibleTableActionProps} props
|
|
18
|
+
* @returns { React.ReactElement}
|
|
19
|
+
*/
|
|
20
|
+
export declare function UIFlexibleTableActionButton(props: UIFlexibleTableActionProps): React.ReactElement;
|
|
21
21
|
//# sourceMappingURL=UIFlexibleTableActionButton.d.ts.map
|
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.UIFlexibleTableActionButton = void 0;
|
|
7
|
-
const react_1 = __importDefault(require("react"));
|
|
8
|
-
const __1 = require("..");
|
|
9
|
-
const utils_1 = require("./utils");
|
|
10
|
-
/**
|
|
11
|
-
* UIFlexibleTableActionButton component.
|
|
12
|
-
*
|
|
13
|
-
* @exports
|
|
14
|
-
* @param {UIFlexibleTableActionProps} props
|
|
15
|
-
* @returns { React.ReactElement}
|
|
16
|
-
*/
|
|
17
|
-
function UIFlexibleTableActionButton(props) {
|
|
18
|
-
return (react_1.default.createElement(__1.UIIconButton, { id: (0, utils_1.getTableActionButtonId)(props.tableId, props.actionName), className: `flexible-table-actions-${props.actionName}${props.className ? ' ' + props.className : ''}`, onClick: props.onClick, onFocus: props.onFocus, disabled: props.disabled, iconProps: { iconName: props.iconName }, title: props.title }));
|
|
19
|
-
}
|
|
20
|
-
exports.UIFlexibleTableActionButton = UIFlexibleTableActionButton;
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.UIFlexibleTableActionButton = void 0;
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const __1 = require("..");
|
|
9
|
+
const utils_1 = require("./utils");
|
|
10
|
+
/**
|
|
11
|
+
* UIFlexibleTableActionButton component.
|
|
12
|
+
*
|
|
13
|
+
* @exports
|
|
14
|
+
* @param {UIFlexibleTableActionProps} props
|
|
15
|
+
* @returns { React.ReactElement}
|
|
16
|
+
*/
|
|
17
|
+
function UIFlexibleTableActionButton(props) {
|
|
18
|
+
return (react_1.default.createElement(__1.UIIconButton, { id: (0, utils_1.getTableActionButtonId)(props.tableId, props.actionName), className: `flexible-table-actions-${props.actionName}${props.className ? ' ' + props.className : ''}`, onClick: props.onClick, onFocus: props.onFocus, disabled: props.disabled, iconProps: { iconName: props.iconName }, title: props.title }));
|
|
19
|
+
}
|
|
20
|
+
exports.UIFlexibleTableActionButton = UIFlexibleTableActionButton;
|
|
21
21
|
//# sourceMappingURL=UIFlexibleTableActionButton.js.map
|
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { UIFlexibleTableProps, NodeDragAndDropSortingParams } from './types';
|
|
3
|
-
export interface UIFlexibleTableRowProps<T> {
|
|
4
|
-
dragAndDropParams: NodeDragAndDropSortingParams;
|
|
5
|
-
rowActions: React.ReactElement;
|
|
6
|
-
rowData: React.ReactElement;
|
|
7
|
-
rowRef?: React.RefObject<HTMLDivElement>;
|
|
8
|
-
tableProps: UIFlexibleTableProps<T>;
|
|
9
|
-
className?: string;
|
|
10
|
-
}
|
|
11
|
-
/**
|
|
12
|
-
* On render title row.
|
|
13
|
-
*
|
|
14
|
-
* @param {UIFlexibleTableProps<T>} props
|
|
15
|
-
* @param {number} paddingRight
|
|
16
|
-
* @returns {React.ReactNode}
|
|
17
|
-
*/
|
|
18
|
-
export declare function renderTitleRow<T>(props: UIFlexibleTableProps<T>, paddingRight: number): React.ReactNode;
|
|
19
|
-
/**
|
|
20
|
-
* UIFlexibleTableRow component.
|
|
21
|
-
*
|
|
22
|
-
* @exports
|
|
23
|
-
* @param {UIFlexibleTableRowProps} props
|
|
24
|
-
* @returns {JSX.Element}
|
|
25
|
-
*/
|
|
26
|
-
export declare function UIFlexibleTableRow<T>(props: UIFlexibleTableRowProps<T>): JSX.Element;
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { UIFlexibleTableProps, NodeDragAndDropSortingParams } from './types';
|
|
3
|
+
export interface UIFlexibleTableRowProps<T> {
|
|
4
|
+
dragAndDropParams: NodeDragAndDropSortingParams;
|
|
5
|
+
rowActions: React.ReactElement;
|
|
6
|
+
rowData: React.ReactElement;
|
|
7
|
+
rowRef?: React.RefObject<HTMLDivElement>;
|
|
8
|
+
tableProps: UIFlexibleTableProps<T>;
|
|
9
|
+
className?: string;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* On render title row.
|
|
13
|
+
*
|
|
14
|
+
* @param {UIFlexibleTableProps<T>} props
|
|
15
|
+
* @param {number} paddingRight
|
|
16
|
+
* @returns {React.ReactNode}
|
|
17
|
+
*/
|
|
18
|
+
export declare function renderTitleRow<T>(props: UIFlexibleTableProps<T>, paddingRight: number): React.ReactNode;
|
|
19
|
+
/**
|
|
20
|
+
* UIFlexibleTableRow component.
|
|
21
|
+
*
|
|
22
|
+
* @exports
|
|
23
|
+
* @param {UIFlexibleTableRowProps} props
|
|
24
|
+
* @returns {JSX.Element}
|
|
25
|
+
*/
|
|
26
|
+
export declare function UIFlexibleTableRow<T>(props: UIFlexibleTableRowProps<T>): JSX.Element;
|
|
27
27
|
//# sourceMappingURL=UIFlexibleTableRow.d.ts.map
|
|
@@ -1,166 +1,166 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.UIFlexibleTableRow = exports.renderTitleRow = void 0;
|
|
7
|
-
const react_1 = __importDefault(require("react"));
|
|
8
|
-
const __1 = require("..");
|
|
9
|
-
const types_1 = require("./types");
|
|
10
|
-
const utils_1 = require("./utils");
|
|
11
|
-
/**
|
|
12
|
-
* Render row title.
|
|
13
|
-
*
|
|
14
|
-
* @param {UIFlexibleTableProps<T>} props
|
|
15
|
-
* @param {UIFlexibleTableRowType<T>} row
|
|
16
|
-
* @param {number | undefined} rowIndex
|
|
17
|
-
* @param {React.ReactElement} rowActions
|
|
18
|
-
* @returns {React.ReactNode}
|
|
19
|
-
*/
|
|
20
|
-
function renderRowTitle(props, row, rowIndex, rowActions) {
|
|
21
|
-
return (react_1.default.createElement("div", { className: "flexible-table-content-table-row-header" },
|
|
22
|
-
react_1.default.createElement("div", { className: "flexible-table-content-table-row-header-text-content", title: row.tooltip }, row.title || react_1.default.createElement("span", null)),
|
|
23
|
-
props.layout === types_1.UIFlexibleTableLayout.Wrapping &&
|
|
24
|
-
getActionsContainer(false, rowIndex, rowActions, 'flexible-table-content-table-row-header-actions')));
|
|
25
|
-
}
|
|
26
|
-
/**
|
|
27
|
-
*
|
|
28
|
-
* @param {boolean} useFocusZone
|
|
29
|
-
* @param {number | undefined} rowIndex
|
|
30
|
-
* @param {React.ReactElement} rowActions
|
|
31
|
-
* @param {string} className
|
|
32
|
-
* @returns {JSX.Element}
|
|
33
|
-
*/
|
|
34
|
-
function getActionsContainer(useFocusZone, rowIndex, rowActions, className) {
|
|
35
|
-
return useFocusZone ? (react_1.default.createElement(__1.UIFocusZone, { as: "div", key: `cell-actions-${rowIndex ?? 'unknown'}`, className: className, direction: __1.UIFocusZoneDirection.horizontal, isCircularNavigation: true, shouldEnterInnerZone: (ev) => ev.key === 'Enter' }, rowActions)) : (react_1.default.createElement("div", { className: className }, rowActions));
|
|
36
|
-
}
|
|
37
|
-
/**
|
|
38
|
-
* On render title row.
|
|
39
|
-
*
|
|
40
|
-
* @param {UIFlexibleTableProps<T>} props
|
|
41
|
-
* @param {number} paddingRight
|
|
42
|
-
* @returns {React.ReactNode}
|
|
43
|
-
*/
|
|
44
|
-
function renderTitleRow(props, paddingRight) {
|
|
45
|
-
const rowCells = [];
|
|
46
|
-
if (props.showIndexColumn) {
|
|
47
|
-
if (props.onRenderTitleColumnCell) {
|
|
48
|
-
const { content, cellClassNames, tooltip } = props.onRenderTitleColumnCell({
|
|
49
|
-
isIndexColumn: true
|
|
50
|
-
});
|
|
51
|
-
const className = (0, utils_1.composeClassNames)('flexible-table-content-table-title-row-item-index', [cellClassNames]);
|
|
52
|
-
rowCells.push(react_1.default.createElement("div", { key: "title-cell-index", className: className, title: tooltip }, content));
|
|
53
|
-
}
|
|
54
|
-
else {
|
|
55
|
-
rowCells.push(react_1.default.createElement("div", { key: "title-cell-index", className: "flexible-table-content-table-title-row-item-index" },
|
|
56
|
-
react_1.default.createElement("span", { className: "flexible-table-content-table-title-row-item-index-value" }, "#")));
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
const rowCellsData = [];
|
|
60
|
-
const tableId = props.id;
|
|
61
|
-
for (let i = 0; i < props.columns.length; i++) {
|
|
62
|
-
const column = props.columns[i];
|
|
63
|
-
if (column.hidden) {
|
|
64
|
-
continue;
|
|
65
|
-
}
|
|
66
|
-
const key = column.key;
|
|
67
|
-
if (props.onRenderTitleColumnCell) {
|
|
68
|
-
const { content, isSpan, cellClassNames, tooltip } = props.onRenderTitleColumnCell({
|
|
69
|
-
colIndex: i,
|
|
70
|
-
colKey: key
|
|
71
|
-
});
|
|
72
|
-
const className = (0, utils_1.composeClassNames)('flexible-table-content-table-title-row-item-data-cells-value', [
|
|
73
|
-
cellClassNames,
|
|
74
|
-
column.className
|
|
75
|
-
]);
|
|
76
|
-
if (isSpan) {
|
|
77
|
-
rowCellsData.push(react_1.default.createElement("div", { key: `title-cell-unknown`, className: className, title: tooltip || column.tooltip, id: `${tableId}-header-column-${key}` }, content));
|
|
78
|
-
break;
|
|
79
|
-
}
|
|
80
|
-
else {
|
|
81
|
-
rowCellsData.push(react_1.default.createElement("div", { key: `cell-${key}-${i}`, className: className, title: tooltip || column.tooltip, id: `${tableId}-header-column-${key}` }, content));
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
else {
|
|
85
|
-
const className = (0, utils_1.composeClassNames)('flexible-table-content-table-title-row-item-data-cells-value', [
|
|
86
|
-
column.className
|
|
87
|
-
]);
|
|
88
|
-
rowCellsData.push(react_1.default.createElement("div", { key: `title-cell-${key}-${i}`, className: className, title: column.tooltip, id: `${tableId}-header-column-${key}` }, column.title));
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
// Add data cells titles
|
|
92
|
-
rowCells.push(react_1.default.createElement("div", { key: `flexible-table-content-table-title-row-item-data-cells}`, className: `flexible-table-content-table-title-row-item-data-cells in-row` }, rowCellsData));
|
|
93
|
-
// Add actions title
|
|
94
|
-
if (props.onRenderTitleColumnCell) {
|
|
95
|
-
const { content, cellClassNames, tooltip } = props.onRenderTitleColumnCell({
|
|
96
|
-
isActionsColumn: true
|
|
97
|
-
});
|
|
98
|
-
const className = (0, utils_1.composeClassNames)('flexible-table-content-table-title-row-item-actions', [cellClassNames]);
|
|
99
|
-
rowCells.push(react_1.default.createElement("div", { key: "title-row", className: className, title: tooltip }, content));
|
|
100
|
-
}
|
|
101
|
-
else {
|
|
102
|
-
rowCells.push(react_1.default.createElement("div", { key: `title-cell-actions`, className: "flexible-table-content-table-title-row-item-actions" }));
|
|
103
|
-
}
|
|
104
|
-
return (react_1.default.createElement("div", { className: "flexible-table-content-table-title-row", key: "title-row", style: { paddingRight }, tabIndex: -1 },
|
|
105
|
-
react_1.default.createElement("div", { className: "flexible-table-content-table-title-row-wrapper" },
|
|
106
|
-
react_1.default.createElement("div", { className: "flexible-table-content-table-title-row-wrapper-cells" }, rowCells))));
|
|
107
|
-
}
|
|
108
|
-
exports.renderTitleRow = renderTitleRow;
|
|
109
|
-
/**
|
|
110
|
-
* UIFlexibleTableRow component.
|
|
111
|
-
*
|
|
112
|
-
* @exports
|
|
113
|
-
* @param {UIFlexibleTableRowProps} props
|
|
114
|
-
* @returns {JSX.Element}
|
|
115
|
-
*/
|
|
116
|
-
function UIFlexibleTableRow(props) {
|
|
117
|
-
const { dragAndDropParams: params, rowData, rowActions, rowRef, tableProps, className: dynamicClassName } = props;
|
|
118
|
-
const row = params.value;
|
|
119
|
-
const rowIndex = params.index;
|
|
120
|
-
const rowCells = [];
|
|
121
|
-
const { isDragged, isSelected, isOutOfBounds } = params;
|
|
122
|
-
const isRow = row && rowIndex !== undefined;
|
|
123
|
-
if (isRow) {
|
|
124
|
-
rowCells.push(rowData);
|
|
125
|
-
if (tableProps.layout === types_1.UIFlexibleTableLayout.InlineFlex) {
|
|
126
|
-
// Add row actions
|
|
127
|
-
rowCells.push(getActionsContainer(true, rowIndex, rowActions, 'flexible-table-content-table-row-item-actions'));
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
let parityClassName = '';
|
|
131
|
-
if (rowIndex !== undefined) {
|
|
132
|
-
// Index is zero based - odd/even opposite
|
|
133
|
-
parityClassName = rowIndex % 2 === 0 ? 'odd' : 'even';
|
|
134
|
-
}
|
|
135
|
-
const rowClassName = (0, utils_1.composeClassNames)('flexible-table-content-table-row', [
|
|
136
|
-
tableProps.noRowBackground ? 'no-background' : '',
|
|
137
|
-
isDragged ? 'dragged' : '',
|
|
138
|
-
isSelected ? 'selected' : '',
|
|
139
|
-
isOutOfBounds ? 'out-of-bounds' : '',
|
|
140
|
-
row.className ?? '',
|
|
141
|
-
tableProps.lockVertically ? 'locked-axis' : 'unlocked-axis',
|
|
142
|
-
parityClassName,
|
|
143
|
-
tableProps.reverseBackground && !tableProps.noRowBackground ? 'reverse-background' : '',
|
|
144
|
-
dynamicClassName
|
|
145
|
-
]);
|
|
146
|
-
const rowWrapperClassNames = [
|
|
147
|
-
'flexible-table-content-table-row-wrapper',
|
|
148
|
-
tableProps.layout === types_1.UIFlexibleTableLayout.InlineFlex ? 'inline-layout' : 'wrapping-layout'
|
|
149
|
-
].join(' ');
|
|
150
|
-
const showRowTitle = isRow && (tableProps.showRowTitles || tableProps.layout === types_1.UIFlexibleTableLayout.Wrapping);
|
|
151
|
-
const style = {
|
|
152
|
-
...params.props.style,
|
|
153
|
-
pointerEvents: 'all',
|
|
154
|
-
cursor: isDragged ? 'grabbing' : 'inherit'
|
|
155
|
-
};
|
|
156
|
-
if (tableProps.isContentLoading) {
|
|
157
|
-
style.pointerEvents = 'none';
|
|
158
|
-
style.cursor = 'none';
|
|
159
|
-
}
|
|
160
|
-
return (react_1.default.createElement("li", { ...params.props, className: rowClassName, "data-movable-handle": true, key: `row-${rowIndex}`, id: `row-${rowIndex}`, style: style },
|
|
161
|
-
react_1.default.createElement("div", { className: rowWrapperClassNames, ref: rowRef },
|
|
162
|
-
showRowTitle && renderRowTitle(tableProps, row, rowIndex, rowActions),
|
|
163
|
-
react_1.default.createElement("div", { className: "flexible-table-content-table-row-wrapper-cells" }, rowCells))));
|
|
164
|
-
}
|
|
165
|
-
exports.UIFlexibleTableRow = UIFlexibleTableRow;
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.UIFlexibleTableRow = exports.renderTitleRow = void 0;
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const __1 = require("..");
|
|
9
|
+
const types_1 = require("./types");
|
|
10
|
+
const utils_1 = require("./utils");
|
|
11
|
+
/**
|
|
12
|
+
* Render row title.
|
|
13
|
+
*
|
|
14
|
+
* @param {UIFlexibleTableProps<T>} props
|
|
15
|
+
* @param {UIFlexibleTableRowType<T>} row
|
|
16
|
+
* @param {number | undefined} rowIndex
|
|
17
|
+
* @param {React.ReactElement} rowActions
|
|
18
|
+
* @returns {React.ReactNode}
|
|
19
|
+
*/
|
|
20
|
+
function renderRowTitle(props, row, rowIndex, rowActions) {
|
|
21
|
+
return (react_1.default.createElement("div", { className: "flexible-table-content-table-row-header" },
|
|
22
|
+
react_1.default.createElement("div", { className: "flexible-table-content-table-row-header-text-content", title: row.tooltip }, row.title || react_1.default.createElement("span", null)),
|
|
23
|
+
props.layout === types_1.UIFlexibleTableLayout.Wrapping &&
|
|
24
|
+
getActionsContainer(false, rowIndex, rowActions, 'flexible-table-content-table-row-header-actions')));
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
*
|
|
28
|
+
* @param {boolean} useFocusZone
|
|
29
|
+
* @param {number | undefined} rowIndex
|
|
30
|
+
* @param {React.ReactElement} rowActions
|
|
31
|
+
* @param {string} className
|
|
32
|
+
* @returns {JSX.Element}
|
|
33
|
+
*/
|
|
34
|
+
function getActionsContainer(useFocusZone, rowIndex, rowActions, className) {
|
|
35
|
+
return useFocusZone ? (react_1.default.createElement(__1.UIFocusZone, { as: "div", key: `cell-actions-${rowIndex ?? 'unknown'}`, className: className, direction: __1.UIFocusZoneDirection.horizontal, isCircularNavigation: true, shouldEnterInnerZone: (ev) => ev.key === 'Enter' }, rowActions)) : (react_1.default.createElement("div", { className: className }, rowActions));
|
|
36
|
+
}
|
|
37
|
+
/**
|
|
38
|
+
* On render title row.
|
|
39
|
+
*
|
|
40
|
+
* @param {UIFlexibleTableProps<T>} props
|
|
41
|
+
* @param {number} paddingRight
|
|
42
|
+
* @returns {React.ReactNode}
|
|
43
|
+
*/
|
|
44
|
+
function renderTitleRow(props, paddingRight) {
|
|
45
|
+
const rowCells = [];
|
|
46
|
+
if (props.showIndexColumn) {
|
|
47
|
+
if (props.onRenderTitleColumnCell) {
|
|
48
|
+
const { content, cellClassNames, tooltip } = props.onRenderTitleColumnCell({
|
|
49
|
+
isIndexColumn: true
|
|
50
|
+
});
|
|
51
|
+
const className = (0, utils_1.composeClassNames)('flexible-table-content-table-title-row-item-index', [cellClassNames]);
|
|
52
|
+
rowCells.push(react_1.default.createElement("div", { key: "title-cell-index", className: className, title: tooltip }, content));
|
|
53
|
+
}
|
|
54
|
+
else {
|
|
55
|
+
rowCells.push(react_1.default.createElement("div", { key: "title-cell-index", className: "flexible-table-content-table-title-row-item-index" },
|
|
56
|
+
react_1.default.createElement("span", { className: "flexible-table-content-table-title-row-item-index-value" }, "#")));
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
const rowCellsData = [];
|
|
60
|
+
const tableId = props.id;
|
|
61
|
+
for (let i = 0; i < props.columns.length; i++) {
|
|
62
|
+
const column = props.columns[i];
|
|
63
|
+
if (column.hidden) {
|
|
64
|
+
continue;
|
|
65
|
+
}
|
|
66
|
+
const key = column.key;
|
|
67
|
+
if (props.onRenderTitleColumnCell) {
|
|
68
|
+
const { content, isSpan, cellClassNames, tooltip } = props.onRenderTitleColumnCell({
|
|
69
|
+
colIndex: i,
|
|
70
|
+
colKey: key
|
|
71
|
+
});
|
|
72
|
+
const className = (0, utils_1.composeClassNames)('flexible-table-content-table-title-row-item-data-cells-value', [
|
|
73
|
+
cellClassNames,
|
|
74
|
+
column.className
|
|
75
|
+
]);
|
|
76
|
+
if (isSpan) {
|
|
77
|
+
rowCellsData.push(react_1.default.createElement("div", { key: `title-cell-unknown`, className: className, title: tooltip || column.tooltip, id: `${tableId}-header-column-${key}` }, content));
|
|
78
|
+
break;
|
|
79
|
+
}
|
|
80
|
+
else {
|
|
81
|
+
rowCellsData.push(react_1.default.createElement("div", { key: `cell-${key}-${i}`, className: className, title: tooltip || column.tooltip, id: `${tableId}-header-column-${key}` }, content));
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
else {
|
|
85
|
+
const className = (0, utils_1.composeClassNames)('flexible-table-content-table-title-row-item-data-cells-value', [
|
|
86
|
+
column.className
|
|
87
|
+
]);
|
|
88
|
+
rowCellsData.push(react_1.default.createElement("div", { key: `title-cell-${key}-${i}`, className: className, title: column.tooltip, id: `${tableId}-header-column-${key}` }, column.title));
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
// Add data cells titles
|
|
92
|
+
rowCells.push(react_1.default.createElement("div", { key: `flexible-table-content-table-title-row-item-data-cells}`, className: `flexible-table-content-table-title-row-item-data-cells in-row` }, rowCellsData));
|
|
93
|
+
// Add actions title
|
|
94
|
+
if (props.onRenderTitleColumnCell) {
|
|
95
|
+
const { content, cellClassNames, tooltip } = props.onRenderTitleColumnCell({
|
|
96
|
+
isActionsColumn: true
|
|
97
|
+
});
|
|
98
|
+
const className = (0, utils_1.composeClassNames)('flexible-table-content-table-title-row-item-actions', [cellClassNames]);
|
|
99
|
+
rowCells.push(react_1.default.createElement("div", { key: "title-row", className: className, title: tooltip }, content));
|
|
100
|
+
}
|
|
101
|
+
else {
|
|
102
|
+
rowCells.push(react_1.default.createElement("div", { key: `title-cell-actions`, className: "flexible-table-content-table-title-row-item-actions" }));
|
|
103
|
+
}
|
|
104
|
+
return (react_1.default.createElement("div", { className: "flexible-table-content-table-title-row", key: "title-row", style: { paddingRight }, tabIndex: -1 },
|
|
105
|
+
react_1.default.createElement("div", { className: "flexible-table-content-table-title-row-wrapper" },
|
|
106
|
+
react_1.default.createElement("div", { className: "flexible-table-content-table-title-row-wrapper-cells" }, rowCells))));
|
|
107
|
+
}
|
|
108
|
+
exports.renderTitleRow = renderTitleRow;
|
|
109
|
+
/**
|
|
110
|
+
* UIFlexibleTableRow component.
|
|
111
|
+
*
|
|
112
|
+
* @exports
|
|
113
|
+
* @param {UIFlexibleTableRowProps} props
|
|
114
|
+
* @returns {JSX.Element}
|
|
115
|
+
*/
|
|
116
|
+
function UIFlexibleTableRow(props) {
|
|
117
|
+
const { dragAndDropParams: params, rowData, rowActions, rowRef, tableProps, className: dynamicClassName } = props;
|
|
118
|
+
const row = params.value;
|
|
119
|
+
const rowIndex = params.index;
|
|
120
|
+
const rowCells = [];
|
|
121
|
+
const { isDragged, isSelected, isOutOfBounds } = params;
|
|
122
|
+
const isRow = row && rowIndex !== undefined;
|
|
123
|
+
if (isRow) {
|
|
124
|
+
rowCells.push(rowData);
|
|
125
|
+
if (tableProps.layout === types_1.UIFlexibleTableLayout.InlineFlex) {
|
|
126
|
+
// Add row actions
|
|
127
|
+
rowCells.push(getActionsContainer(true, rowIndex, rowActions, 'flexible-table-content-table-row-item-actions'));
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
let parityClassName = '';
|
|
131
|
+
if (rowIndex !== undefined) {
|
|
132
|
+
// Index is zero based - odd/even opposite
|
|
133
|
+
parityClassName = rowIndex % 2 === 0 ? 'odd' : 'even';
|
|
134
|
+
}
|
|
135
|
+
const rowClassName = (0, utils_1.composeClassNames)('flexible-table-content-table-row', [
|
|
136
|
+
tableProps.noRowBackground ? 'no-background' : '',
|
|
137
|
+
isDragged ? 'dragged' : '',
|
|
138
|
+
isSelected ? 'selected' : '',
|
|
139
|
+
isOutOfBounds ? 'out-of-bounds' : '',
|
|
140
|
+
row.className ?? '',
|
|
141
|
+
tableProps.lockVertically ? 'locked-axis' : 'unlocked-axis',
|
|
142
|
+
parityClassName,
|
|
143
|
+
tableProps.reverseBackground && !tableProps.noRowBackground ? 'reverse-background' : '',
|
|
144
|
+
dynamicClassName
|
|
145
|
+
]);
|
|
146
|
+
const rowWrapperClassNames = [
|
|
147
|
+
'flexible-table-content-table-row-wrapper',
|
|
148
|
+
tableProps.layout === types_1.UIFlexibleTableLayout.InlineFlex ? 'inline-layout' : 'wrapping-layout'
|
|
149
|
+
].join(' ');
|
|
150
|
+
const showRowTitle = isRow && (tableProps.showRowTitles || tableProps.layout === types_1.UIFlexibleTableLayout.Wrapping);
|
|
151
|
+
const style = {
|
|
152
|
+
...params.props.style,
|
|
153
|
+
pointerEvents: 'all',
|
|
154
|
+
cursor: isDragged ? 'grabbing' : 'inherit'
|
|
155
|
+
};
|
|
156
|
+
if (tableProps.isContentLoading) {
|
|
157
|
+
style.pointerEvents = 'none';
|
|
158
|
+
style.cursor = 'none';
|
|
159
|
+
}
|
|
160
|
+
return (react_1.default.createElement("li", { ...params.props, className: rowClassName, "data-movable-handle": true, key: `row-${rowIndex}`, id: `row-${rowIndex}`, style: style },
|
|
161
|
+
react_1.default.createElement("div", { className: rowWrapperClassNames, ref: rowRef },
|
|
162
|
+
showRowTitle && renderRowTitle(tableProps, row, rowIndex, rowActions),
|
|
163
|
+
react_1.default.createElement("div", { className: "flexible-table-content-table-row-wrapper-cells" }, rowCells))));
|
|
164
|
+
}
|
|
165
|
+
exports.UIFlexibleTableRow = UIFlexibleTableRow;
|
|
166
166
|
//# sourceMappingURL=UIFlexibleTableRow.js.map
|
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { UiIcons } from '..';
|
|
3
|
-
export interface UIFlexibleTableRowActionProps {
|
|
4
|
-
actionName: string;
|
|
5
|
-
className?: string;
|
|
6
|
-
iconName: UiIcons;
|
|
7
|
-
disabled?: boolean;
|
|
8
|
-
rowNumber: number;
|
|
9
|
-
tableId: string;
|
|
10
|
-
title?: string;
|
|
11
|
-
onClick?: () => void;
|
|
12
|
-
onFocus?: () => void;
|
|
13
|
-
}
|
|
14
|
-
/**
|
|
15
|
-
* UIFlexibleTableRowActionButton Component.
|
|
16
|
-
*
|
|
17
|
-
* @param {UIFlexibleTableRowActionProps} props
|
|
18
|
-
* @returns {React.ReactElement}
|
|
19
|
-
*/
|
|
20
|
-
export declare function UIFlexibleTableRowActionButton(props: UIFlexibleTableRowActionProps): React.ReactElement;
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { UiIcons } from '..';
|
|
3
|
+
export interface UIFlexibleTableRowActionProps {
|
|
4
|
+
actionName: string;
|
|
5
|
+
className?: string;
|
|
6
|
+
iconName: UiIcons;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
rowNumber: number;
|
|
9
|
+
tableId: string;
|
|
10
|
+
title?: string;
|
|
11
|
+
onClick?: () => void;
|
|
12
|
+
onFocus?: () => void;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* UIFlexibleTableRowActionButton Component.
|
|
16
|
+
*
|
|
17
|
+
* @param {UIFlexibleTableRowActionProps} props
|
|
18
|
+
* @returns {React.ReactElement}
|
|
19
|
+
*/
|
|
20
|
+
export declare function UIFlexibleTableRowActionButton(props: UIFlexibleTableRowActionProps): React.ReactElement;
|
|
21
21
|
//# sourceMappingURL=UIFlexibleTableRowActionButton.d.ts.map
|
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.UIFlexibleTableRowActionButton = void 0;
|
|
7
|
-
const react_1 = __importDefault(require("react"));
|
|
8
|
-
const __1 = require("..");
|
|
9
|
-
const utils_1 = require("./utils");
|
|
10
|
-
/**
|
|
11
|
-
* UIFlexibleTableRowActionButton Component.
|
|
12
|
-
*
|
|
13
|
-
* @param {UIFlexibleTableRowActionProps} props
|
|
14
|
-
* @returns {React.ReactElement}
|
|
15
|
-
*/
|
|
16
|
-
function UIFlexibleTableRowActionButton(props) {
|
|
17
|
-
return (react_1.default.createElement(__1.UIIconButton, { id: (0, utils_1.getRowActionButtonId)(props.tableId, props.rowNumber, props.actionName), key: `table-row-${props.rowNumber}-actions-${props.actionName}`, className: `flexible-table-content-table-row-item-actions-${props.actionName}${props.className ? ' ' + props.className : ''}`, onClick: props.onClick, onFocus: props.onFocus, disabled: props.disabled, iconProps: { iconName: props.iconName }, title: props.title }));
|
|
18
|
-
}
|
|
19
|
-
exports.UIFlexibleTableRowActionButton = UIFlexibleTableRowActionButton;
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.UIFlexibleTableRowActionButton = void 0;
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const __1 = require("..");
|
|
9
|
+
const utils_1 = require("./utils");
|
|
10
|
+
/**
|
|
11
|
+
* UIFlexibleTableRowActionButton Component.
|
|
12
|
+
*
|
|
13
|
+
* @param {UIFlexibleTableRowActionProps} props
|
|
14
|
+
* @returns {React.ReactElement}
|
|
15
|
+
*/
|
|
16
|
+
function UIFlexibleTableRowActionButton(props) {
|
|
17
|
+
return (react_1.default.createElement(__1.UIIconButton, { id: (0, utils_1.getRowActionButtonId)(props.tableId, props.rowNumber, props.actionName), key: `table-row-${props.rowNumber}-actions-${props.actionName}`, className: `flexible-table-content-table-row-item-actions-${props.actionName}${props.className ? ' ' + props.className : ''}`, onClick: props.onClick, onFocus: props.onFocus, disabled: props.disabled, iconProps: { iconName: props.iconName }, title: props.title }));
|
|
18
|
+
}
|
|
19
|
+
exports.UIFlexibleTableRowActionButton = UIFlexibleTableRowActionButton;
|
|
20
20
|
//# sourceMappingURL=UIFlexibleTableRowActionButton.js.map
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { UIFlexibleTableNoDataAlignment } from './types';
|
|
3
|
-
export interface UIFlexibleTableRowNoDataProps {
|
|
4
|
-
children?: string | React.ReactElement;
|
|
5
|
-
align?: UIFlexibleTableNoDataAlignment;
|
|
6
|
-
noRowBackground?: boolean;
|
|
7
|
-
reverseBackground?: boolean;
|
|
8
|
-
}
|
|
9
|
-
/**
|
|
10
|
-
* Visualize a table row without data.
|
|
11
|
-
*
|
|
12
|
-
* @param props {UIFlexibleTableRowNoDataProps}
|
|
13
|
-
* @returns {React.Component}
|
|
14
|
-
*/
|
|
15
|
-
export declare function UIFlexibleTableRowNoData(props: UIFlexibleTableRowNoDataProps): JSX.Element;
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { UIFlexibleTableNoDataAlignment } from './types';
|
|
3
|
+
export interface UIFlexibleTableRowNoDataProps {
|
|
4
|
+
children?: string | React.ReactElement;
|
|
5
|
+
align?: UIFlexibleTableNoDataAlignment;
|
|
6
|
+
noRowBackground?: boolean;
|
|
7
|
+
reverseBackground?: boolean;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* Visualize a table row without data.
|
|
11
|
+
*
|
|
12
|
+
* @param props {UIFlexibleTableRowNoDataProps}
|
|
13
|
+
* @returns {React.Component}
|
|
14
|
+
*/
|
|
15
|
+
export declare function UIFlexibleTableRowNoData(props: UIFlexibleTableRowNoDataProps): JSX.Element;
|
|
16
16
|
//# sourceMappingURL=UIFlexibleTableRowNoData.d.ts.map
|
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.UIFlexibleTableRowNoData = void 0;
|
|
7
|
-
const react_1 = __importDefault(require("react"));
|
|
8
|
-
const types_1 = require("./types");
|
|
9
|
-
const utils_1 = require("./utils");
|
|
10
|
-
/**
|
|
11
|
-
* Visualize a table row without data.
|
|
12
|
-
*
|
|
13
|
-
* @param props {UIFlexibleTableRowNoDataProps}
|
|
14
|
-
* @returns {React.Component}
|
|
15
|
-
*/
|
|
16
|
-
function UIFlexibleTableRowNoData(props) {
|
|
17
|
-
const { align = types_1.UIFlexibleTableNoDataAlignment.Center, noRowBackground, reverseBackground } = props;
|
|
18
|
-
const rowClassName = (0, utils_1.composeClassNames)('flexible-table-content-table-row-no-data', [
|
|
19
|
-
noRowBackground ? 'no-background' : '',
|
|
20
|
-
reverseBackground && !noRowBackground ? 'reverse-background' : '',
|
|
21
|
-
'odd'
|
|
22
|
-
]);
|
|
23
|
-
return (react_1.default.createElement("li", { className: rowClassName, style: {
|
|
24
|
-
textAlign: align,
|
|
25
|
-
cursor: 'default'
|
|
26
|
-
} }, props.children));
|
|
27
|
-
}
|
|
28
|
-
exports.UIFlexibleTableRowNoData = UIFlexibleTableRowNoData;
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.UIFlexibleTableRowNoData = void 0;
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const types_1 = require("./types");
|
|
9
|
+
const utils_1 = require("./utils");
|
|
10
|
+
/**
|
|
11
|
+
* Visualize a table row without data.
|
|
12
|
+
*
|
|
13
|
+
* @param props {UIFlexibleTableRowNoDataProps}
|
|
14
|
+
* @returns {React.Component}
|
|
15
|
+
*/
|
|
16
|
+
function UIFlexibleTableRowNoData(props) {
|
|
17
|
+
const { align = types_1.UIFlexibleTableNoDataAlignment.Center, noRowBackground, reverseBackground } = props;
|
|
18
|
+
const rowClassName = (0, utils_1.composeClassNames)('flexible-table-content-table-row-no-data', [
|
|
19
|
+
noRowBackground ? 'no-background' : '',
|
|
20
|
+
reverseBackground && !noRowBackground ? 'reverse-background' : '',
|
|
21
|
+
'odd'
|
|
22
|
+
]);
|
|
23
|
+
return (react_1.default.createElement("li", { className: rowClassName, style: {
|
|
24
|
+
textAlign: align,
|
|
25
|
+
cursor: 'default'
|
|
26
|
+
} }, props.children));
|
|
27
|
+
}
|
|
28
|
+
exports.UIFlexibleTableRowNoData = UIFlexibleTableRowNoData;
|
|
29
29
|
//# sourceMappingURL=UIFlexibleTableRowNoData.js.map
|