@singularsystems/neo-react 1.0.0-alpha.2 → 1.0.0-beta.0

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.
Files changed (196) hide show
  1. package/CHANGELOG.md +98 -0
  2. package/README.md +4 -0
  3. package/dist/Modules/NeoReactModule.d.ts +4 -4
  4. package/dist/Modules/NeoReactModule.js +28 -26
  5. package/dist/Modules/ReactSetup.d.ts +2 -2
  6. package/dist/Modules/ReactSetup.js +17 -17
  7. package/dist/Modules/Types.d.ts +63 -61
  8. package/dist/Modules/Types.js +13 -12
  9. package/dist/React/AutoRunner.d.ts +5 -5
  10. package/dist/React/AutoRunner.js +94 -92
  11. package/dist/React/DataView.d.ts +6 -6
  12. package/dist/React/DataView.js +11 -11
  13. package/dist/React/ReactModelCreator.d.ts +11 -11
  14. package/dist/React/ReactModelCreator.js +165 -162
  15. package/dist/ReactComponents/Button.d.ts +24 -23
  16. package/dist/ReactComponents/Button.js +131 -123
  17. package/dist/ReactComponents/Card.d.ts +24 -23
  18. package/dist/ReactComponents/Card.js +56 -54
  19. package/dist/ReactComponents/Collapsable.d.ts +23 -23
  20. package/dist/ReactComponents/Collapsable.js +38 -38
  21. package/dist/ReactComponents/CollapsableBase.d.ts +13 -13
  22. package/dist/ReactComponents/CollapsableBase.js +42 -42
  23. package/dist/ReactComponents/ColorPicker.d.ts +26 -26
  24. package/dist/ReactComponents/ColorPicker.js +67 -67
  25. package/dist/ReactComponents/ComponentBase.d.ts +17 -17
  26. package/dist/ReactComponents/ComponentBase.js +33 -33
  27. package/dist/ReactComponents/ContextMenu/ContextMenu.d.ts +25 -24
  28. package/dist/ReactComponents/ContextMenu/ContextMenu.js +91 -88
  29. package/dist/ReactComponents/ContextMenu/ContextMenuContainer.d.ts +14 -14
  30. package/dist/ReactComponents/ContextMenu/ContextMenuContainer.js +48 -48
  31. package/dist/ReactComponents/ContextMenu/ContextMenuState.d.ts +8 -7
  32. package/dist/ReactComponents/ContextMenu/ContextMenuState.js +23 -23
  33. package/dist/ReactComponents/DatePicker.d.ts +19 -19
  34. package/dist/ReactComponents/DatePicker.js +53 -53
  35. package/dist/ReactComponents/DropDown/AutoCompleteDropDown.d.ts +93 -83
  36. package/dist/ReactComponents/DropDown/AutoCompleteDropDown.js +222 -188
  37. package/dist/ReactComponents/DropDown/DropDown.d.ts +44 -44
  38. package/dist/ReactComponents/DropDown/DropDown.js +138 -134
  39. package/dist/ReactComponents/DropDown/DropDownBase.d.ts +16 -15
  40. package/dist/ReactComponents/DropDown/DropDownBase.js +86 -108
  41. package/dist/ReactComponents/DropDown/LookupHelper.d.ts +13 -0
  42. package/dist/ReactComponents/DropDown/LookupHelper.js +45 -0
  43. package/dist/ReactComponents/ErrorHandler.d.ts +9 -8
  44. package/dist/ReactComponents/ErrorHandler.js +92 -91
  45. package/dist/ReactComponents/FileManager/FileBasicInput.d.ts +20 -20
  46. package/dist/ReactComponents/FileManager/FileBasicInput.js +70 -70
  47. package/dist/ReactComponents/FileManager/FileContext.d.ts +16 -16
  48. package/dist/ReactComponents/FileManager/FileContext.js +24 -24
  49. package/dist/ReactComponents/FileManager/FileDropArea.d.ts +19 -18
  50. package/dist/ReactComponents/FileManager/FileDropArea.js +66 -64
  51. package/dist/ReactComponents/FileManager/FileInput.d.ts +44 -42
  52. package/dist/ReactComponents/FileManager/FileInput.js +191 -189
  53. package/dist/ReactComponents/FileManager/FileUploadButton.d.ts +17 -17
  54. package/dist/ReactComponents/FileManager/FileUploadButton.js +49 -49
  55. package/dist/ReactComponents/FileManager/FileUploadProgress.d.ts +14 -14
  56. package/dist/ReactComponents/FileManager/FileUploadProgress.js +35 -35
  57. package/dist/ReactComponents/Form.d.ts +19 -18
  58. package/dist/ReactComponents/Form.js +90 -90
  59. package/dist/ReactComponents/FormContext.d.ts +33 -31
  60. package/dist/ReactComponents/FormContext.js +39 -40
  61. package/dist/ReactComponents/FormGroup/FormGroup.d.ts +37 -37
  62. package/dist/ReactComponents/FormGroup/FormGroup.js +83 -84
  63. package/dist/ReactComponents/FormGroup/FormGroupFloating.d.ts +19 -19
  64. package/dist/ReactComponents/FormGroup/FormGroupFloating.js +97 -97
  65. package/dist/ReactComponents/FormGroup/FormGroupInline.d.ts +11 -11
  66. package/dist/ReactComponents/FormGroup/FormGroupInline.js +43 -43
  67. package/dist/ReactComponents/Grid/ButtonColumn.d.ts +47 -47
  68. package/dist/ReactComponents/Grid/ButtonColumn.js +81 -82
  69. package/dist/ReactComponents/Grid/Column.d.ts +47 -47
  70. package/dist/ReactComponents/Grid/Column.js +205 -205
  71. package/dist/ReactComponents/Grid/ColumnHelper.d.ts +12 -12
  72. package/dist/ReactComponents/Grid/ColumnHelper.js +19 -19
  73. package/dist/ReactComponents/Grid/Grid.d.ts +87 -90
  74. package/dist/ReactComponents/Grid/Grid.js +203 -203
  75. package/dist/ReactComponents/Grid/Row.d.ts +81 -81
  76. package/dist/ReactComponents/Grid/Row.js +200 -201
  77. package/dist/ReactComponents/Grid/_Exports.d.ts +5 -5
  78. package/dist/ReactComponents/Grid/_Exports.js +5 -5
  79. package/dist/ReactComponents/GridLayout.d.ts +20 -20
  80. package/dist/ReactComponents/GridLayout.js +38 -38
  81. package/dist/ReactComponents/Icons/FontAwesomeIconFactory.d.ts +23 -0
  82. package/dist/ReactComponents/Icons/FontAwesomeIconFactory.js +43 -0
  83. package/dist/ReactComponents/Icons/IIconFactory.d.ts +21 -0
  84. package/dist/ReactComponents/Icons/IIconFactory.js +1 -0
  85. package/dist/ReactComponents/Icons/IconFactory.d.ts +9 -0
  86. package/dist/ReactComponents/Icons/IconFactory.js +45 -0
  87. package/dist/ReactComponents/Icons/index.d.ts +3 -0
  88. package/dist/ReactComponents/Icons/index.js +2 -0
  89. package/dist/ReactComponents/Input.d.ts +45 -45
  90. package/dist/ReactComponents/Input.js +153 -152
  91. package/dist/ReactComponents/InputHelpers.d.ts +6 -5
  92. package/dist/ReactComponents/InputHelpers.js +29 -33
  93. package/dist/ReactComponents/Link.d.ts +13 -13
  94. package/dist/ReactComponents/Link.js +28 -28
  95. package/dist/ReactComponents/Loader.d.ts +18 -18
  96. package/dist/ReactComponents/Loader.js +57 -57
  97. package/dist/ReactComponents/Misc.d.ts +15 -15
  98. package/dist/ReactComponents/Misc.js +28 -28
  99. package/dist/ReactComponents/Modal/Modal.d.ts +11 -11
  100. package/dist/ReactComponents/Modal/Modal.js +129 -129
  101. package/dist/ReactComponents/Modal/ModalContainer.d.ts +17 -17
  102. package/dist/ReactComponents/Modal/ModalContainer.js +37 -37
  103. package/dist/ReactComponents/Modal/ModalPortal.d.ts +16 -15
  104. package/dist/ReactComponents/Modal/ModalPortal.js +27 -27
  105. package/dist/ReactComponents/Notifications/Alert.d.ts +7 -6
  106. package/dist/ReactComponents/Notifications/Alert.js +38 -35
  107. package/dist/ReactComponents/Notifications/Toast.d.ts +9 -8
  108. package/dist/ReactComponents/Notifications/Toast.js +47 -45
  109. package/dist/ReactComponents/Notifications/ToastContainer.d.ts +8 -8
  110. package/dist/ReactComponents/Notifications/ToastContainer.js +18 -18
  111. package/dist/ReactComponents/NumberInput.d.ts +57 -50
  112. package/dist/ReactComponents/NumberInput.js +260 -246
  113. package/dist/ReactComponents/Paging/BasicPagerControls.d.ts +26 -25
  114. package/dist/ReactComponents/Paging/BasicPagerControls.js +57 -55
  115. package/dist/ReactComponents/Paging/PageSizeControl.d.ts +11 -11
  116. package/dist/ReactComponents/Paging/PageSizeControl.js +21 -21
  117. package/dist/ReactComponents/Paging/Pager.d.ts +24 -24
  118. package/dist/ReactComponents/Paging/Pager.js +41 -41
  119. package/dist/ReactComponents/ProgressBar.d.ts +19 -19
  120. package/dist/ReactComponents/ProgressBar.js +52 -52
  121. package/dist/ReactComponents/PropTypes.d.ts +161 -161
  122. package/dist/ReactComponents/PropTypes.js +253 -236
  123. package/dist/ReactComponents/RadioList.d.ts +29 -29
  124. package/dist/ReactComponents/RadioList.js +59 -77
  125. package/dist/ReactComponents/Slider.d.ts +28 -28
  126. package/dist/ReactComponents/Slider.js +76 -76
  127. package/dist/ReactComponents/StateObserver.d.ts +15 -15
  128. package/dist/ReactComponents/StateObserver.js +35 -35
  129. package/dist/ReactComponents/Tabs/Tab.d.ts +42 -41
  130. package/dist/ReactComponents/Tabs/Tab.js +71 -72
  131. package/dist/ReactComponents/Tabs/TabContainer.d.ts +44 -44
  132. package/dist/ReactComponents/Tabs/TabContainer.js +98 -98
  133. package/dist/ReactComponents/Tabs/TabManager.d.ts +62 -62
  134. package/dist/ReactComponents/Tabs/TabManager.js +154 -154
  135. package/dist/ReactComponents/Tooltip.d.ts +20 -19
  136. package/dist/ReactComponents/Tooltip.js +51 -51
  137. package/dist/ReactComponents/TooltipHelper.d.ts +8 -8
  138. package/dist/ReactComponents/TooltipHelper.js +84 -84
  139. package/dist/ReactComponents/TooltipProvider.d.ts +30 -30
  140. package/dist/ReactComponents/TooltipProvider.js +111 -111
  141. package/dist/ReactComponents/ValidationSummary.d.ts +23 -22
  142. package/dist/ReactComponents/ValidationSummary.js +46 -43
  143. package/dist/ReactComponents/_Exports.d.ts +41 -41
  144. package/dist/ReactComponents/_Exports.js +41 -41
  145. package/dist/ReactComponents/_Managers.d.ts +4 -4
  146. package/dist/ReactComponents/_Managers.js +4 -4
  147. package/dist/Routing/BreadCrumbItem.d.ts +14 -14
  148. package/dist/Routing/BreadCrumbItem.js +12 -12
  149. package/dist/Routing/IRouteChangedProps.d.ts +31 -31
  150. package/dist/Routing/IRouteChangedProps.js +1 -1
  151. package/dist/Routing/IRouteParameter.d.ts +22 -22
  152. package/dist/Routing/IRouteParameter.js +9 -9
  153. package/dist/Routing/MenuRoute.d.ts +25 -24
  154. package/dist/Routing/MenuRoute.js +24 -24
  155. package/dist/Routing/NavigationHelper.d.ts +41 -40
  156. package/dist/Routing/NavigationHelper.js +61 -61
  157. package/dist/Routing/PageLeaveHandler.d.ts +13 -13
  158. package/dist/Routing/PageLeaveHandler.js +74 -74
  159. package/dist/Routing/RouteProvider.d.ts +31 -31
  160. package/dist/Routing/RouteProvider.js +92 -92
  161. package/dist/Routing/RouteView.d.ts +50 -50
  162. package/dist/Routing/RouteView.js +143 -144
  163. package/dist/Routing/RoutingState.d.ts +18 -15
  164. package/dist/Routing/RoutingState.js +45 -40
  165. package/dist/Routing/ViewParameter.d.ts +80 -58
  166. package/dist/Routing/ViewParameter.js +116 -95
  167. package/dist/Routing/ViewParameterList.d.ts +53 -53
  168. package/dist/Routing/ViewParameterList.js +163 -145
  169. package/dist/Routing/index.d.ts +9 -9
  170. package/dist/Routing/index.js +6 -6
  171. package/dist/Services/DisposeHelper.d.ts +15 -15
  172. package/dist/Services/DisposeHelper.js +40 -41
  173. package/dist/Services/IDisposeHelper.d.ts +12 -12
  174. package/dist/Services/IDisposeHelper.js +1 -1
  175. package/dist/Views/EmptyViewModel.d.ts +5 -5
  176. package/dist/Views/EmptyViewModel.js +14 -14
  177. package/dist/Views/IViewModel.d.ts +16 -16
  178. package/dist/Views/IViewModel.js +1 -1
  179. package/dist/Views/PersistentViewBase.d.ts +10 -10
  180. package/dist/Views/PersistentViewBase.js +21 -21
  181. package/dist/Views/ViewBase.d.ts +70 -71
  182. package/dist/Views/ViewBase.js +166 -153
  183. package/dist/Views/ViewComponentBase.d.ts +19 -13
  184. package/dist/Views/ViewComponentBase.js +24 -21
  185. package/dist/Views/ViewModelBase.d.ts +57 -56
  186. package/dist/Views/ViewModelBase.js +122 -118
  187. package/dist/Views/ViewState.d.ts +13 -13
  188. package/dist/Views/ViewState.js +9 -9
  189. package/dist/Views/index.d.ts +5 -5
  190. package/dist/Views/index.js +5 -5
  191. package/dist/index.d.ts +11 -10
  192. package/dist/index.js +10 -9
  193. package/package.json +26 -26
  194. package/styles/DatePicker.scss +2 -2
  195. package/styles/Forms.scss +5 -0
  196. package/styles/Validation.scss +0 -9
@@ -1,81 +1,81 @@
1
- import * as React from 'react';
2
- import { GridContext, GridSection } from './Grid';
3
- import { Model } from '@singularsystems/neo-core';
4
- import { StateObserver } from '../StateObserver';
5
- import ComponentBase from '../ComponentBase';
6
- interface IRowProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement> {
7
- showInHeader?: boolean;
8
- /**
9
- * Note: This only applies to clicks on rows in the body of the grid. (Not rows in the header or footer).
10
- */
11
- onClick?: React.MouseEventHandler<HTMLTableRowElement>;
12
- /**
13
- * Handler for click events on header or footer rows. The section is passed as the first argument.
14
- */
15
- onHeaderClick?: (section: GridSection, e: React.MouseEvent<HTMLTableRowElement, MouseEvent>) => void;
16
- }
17
- interface IState {
18
- isExpanded: boolean;
19
- }
20
- export default class Row<TData> extends ComponentBase<IRowProps> {
21
- static contextType: React.Context<import("./Grid").GridContextParams<unknown>>;
22
- context: React.ContextType<typeof GridContext>;
23
- constructor(props: IRowProps);
24
- static defaultProps: {
25
- showInHeader: boolean;
26
- };
27
- private setGridContext;
28
- section: GridSection;
29
- stateObserver: StateObserver<IState>;
30
- expandProperty?: Model.IPropertyInstance;
31
- firstRowInGroup: boolean;
32
- onFirstRender(): void;
33
- componentWillUnmount(): void;
34
- onExpandClick(): void;
35
- render(): false | JSX.Element;
36
- }
37
- interface INeoChildRowProps extends React.HTMLProps<HTMLTableRowElement> {
38
- /**
39
- * Overrides the value of the isExpanded property, or allows you to control the expansion of the child row manually.
40
- */
41
- isExpanded?: boolean;
42
- /**
43
- * By default, the expand column will cause the child row to be indented.
44
- * Setting this to true will make the child row take the full width of the table.
45
- */
46
- isFullWidth?: boolean;
47
- /**
48
- * Props to apply to the inner child cell.
49
- */
50
- childCellProps?: React.HTMLProps<HTMLTableCellElement>;
51
- }
52
- export declare class ChildRow extends ComponentBase<INeoChildRowProps> {
53
- static contextType: React.Context<import("./Grid").GridContextParams<unknown>>;
54
- context: React.ContextType<typeof GridContext>;
55
- constructor(props: INeoChildRowProps);
56
- wasExpanded: boolean;
57
- lastExpandValue: boolean | null;
58
- expandProperty?: Model.IPropertyInstance;
59
- inBody?: boolean;
60
- containerDiv: React.RefObject<HTMLDivElement>;
61
- private get isExpanded();
62
- protected onFirstRender(): void;
63
- protected afterRender(isInitial: boolean): void;
64
- private afterTransition;
65
- private setHeight;
66
- render(): false | JSX.Element | undefined;
67
- }
68
- interface INeoRowGroupProps {
69
- /**
70
- * If set, will add an expand button to the grid, and will cause ChildRows to be expanded when the property value is true.
71
- * To hide the expand button, return null.
72
- */
73
- expandProperty?: Model.IPropertyInstance<boolean | null>;
74
- children: React.ReactNode;
75
- }
76
- export declare class RowGroup extends React.Component<INeoRowGroupProps> {
77
- static contextType: React.Context<import("./Grid").GridContextParams<unknown>>;
78
- context: React.ContextType<typeof GridContext>;
79
- render(): React.ReactNode;
80
- }
81
- export {};
1
+ import * as React from 'react';
2
+ import { GridContext, GridSection } from './Grid';
3
+ import { Model } from '@singularsystems/neo-core';
4
+ import { StateObserver } from '../StateObserver';
5
+ import ComponentBase from '../ComponentBase';
6
+ interface IRowProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement> {
7
+ showInHeader?: boolean;
8
+ /**
9
+ * Note: This only applies to clicks on rows in the body of the grid. (Not rows in the header or footer).
10
+ */
11
+ onClick?: React.MouseEventHandler<HTMLTableRowElement>;
12
+ /**
13
+ * Handler for click events on header or footer rows. The section is passed as the first argument.
14
+ */
15
+ onHeaderClick?: (section: GridSection, e: React.MouseEvent<HTMLTableRowElement, MouseEvent>) => void;
16
+ }
17
+ interface IState {
18
+ isExpanded: boolean;
19
+ }
20
+ export default class Row<TData> extends ComponentBase<IRowProps> {
21
+ static contextType: React.Context<import("./Grid").GridContextParams<unknown>>;
22
+ context: React.ContextType<typeof GridContext>;
23
+ constructor(props: IRowProps);
24
+ static defaultProps: {
25
+ showInHeader: boolean;
26
+ };
27
+ private setGridContext;
28
+ section: GridSection;
29
+ stateObserver: StateObserver<IState>;
30
+ expandProperty?: Model.IPropertyInstance;
31
+ firstRowInGroup: boolean;
32
+ onFirstRender(): void;
33
+ componentWillUnmount(): void;
34
+ onExpandClick(): void;
35
+ render(): false | JSX.Element;
36
+ }
37
+ interface INeoChildRowProps extends React.HTMLProps<HTMLTableRowElement> {
38
+ /**
39
+ * Overrides the value of the isExpanded property, or allows you to control the expansion of the child row manually.
40
+ */
41
+ isExpanded?: boolean;
42
+ /**
43
+ * By default, the expand column will cause the child row to be indented.
44
+ * Setting this to true will make the child row take the full width of the table.
45
+ */
46
+ isFullWidth?: boolean;
47
+ /**
48
+ * Props to apply to the inner child cell.
49
+ */
50
+ childCellProps?: React.HTMLProps<HTMLTableCellElement>;
51
+ }
52
+ export declare class ChildRow extends ComponentBase<INeoChildRowProps> {
53
+ static contextType: React.Context<import("./Grid").GridContextParams<unknown>>;
54
+ context: React.ContextType<typeof GridContext>;
55
+ constructor(props: INeoChildRowProps);
56
+ wasExpanded: boolean;
57
+ lastExpandValue: boolean | null;
58
+ expandProperty?: Model.IPropertyInstance;
59
+ inBody?: boolean;
60
+ containerDiv: React.RefObject<HTMLDivElement>;
61
+ private get isExpanded();
62
+ protected onFirstRender(): void;
63
+ protected afterRender(isInitial: boolean): void;
64
+ private afterTransition;
65
+ private setHeight;
66
+ render(): false | JSX.Element | undefined;
67
+ }
68
+ interface INeoRowGroupProps {
69
+ /**
70
+ * If set, will add an expand button to the grid, and will cause ChildRows to be expanded when the property value is true.
71
+ * To hide the expand button, return null.
72
+ */
73
+ expandProperty?: Model.IPropertyInstance<boolean | null>;
74
+ children: React.ReactNode;
75
+ }
76
+ export declare class RowGroup extends React.Component<INeoRowGroupProps> {
77
+ static contextType: React.Context<import("./Grid").GridContextParams<unknown>>;
78
+ context: React.ContextType<typeof GridContext>;
79
+ render(): React.ReactNode;
80
+ }
81
+ export {};
@@ -1,201 +1,200 @@
1
- import { __assign, __decorate, __extends, __metadata, __rest } from "tslib";
2
- import * as React from 'react';
3
- import { observer } from 'mobx-react';
4
- import { GridContext } from './Grid';
5
- import { Misc, Components, Utils } from '@singularsystems/neo-core';
6
- import Column from './Column';
7
- import NeoButton from '../Button';
8
- import { StateObserver } from '../StateObserver';
9
- import ComponentBase from '../ComponentBase';
10
- var Row = /** @class */ (function (_super) {
11
- __extends(Row, _super);
12
- function Row(props) {
13
- var _this = _super.call(this, props) || this;
14
- _this.onExpandClick = _this.onExpandClick.bind(_this);
15
- return _this;
16
- }
17
- Row.prototype.setGridContext = function () {
18
- var _this = this;
19
- this.context.inFirstRowInGroup = false;
20
- if (!this.context.doneStaticSetup) {
21
- this.context.doneStaticSetup = true;
22
- React.Children.forEach(this.props.children, function (child) {
23
- if (child) {
24
- _this.context.columnCount += (child.props ? child.props.colSpan || 1 : 1);
25
- if (child.props && (child.props.sum || child.props.footerContent)) {
26
- _this.context.hasSummaries = true;
27
- }
28
- }
29
- });
30
- }
31
- };
32
- Row.prototype.onFirstRender = function () {
33
- var _this = this;
34
- this.section = this.context.section;
35
- this.expandProperty = this.context.inFirstRowInGroup ? this.context.expandProperty : undefined;
36
- this.firstRowInGroup = this.context.inFirstRowInGroup;
37
- if (this.expandProperty && this.section === "body") {
38
- this.stateObserver = new StateObserver(this, function () {
39
- return { isExpanded: _this.expandProperty.value };
40
- });
41
- }
42
- };
43
- Row.prototype.componentWillUnmount = function () {
44
- if (this.stateObserver)
45
- this.stateObserver.dispose();
46
- };
47
- Row.prototype.onExpandClick = function () {
48
- if (this.expandProperty) {
49
- this.expandProperty.value = !this.expandProperty.value;
50
- }
51
- };
52
- Row.prototype.render = function () {
53
- var _this = this;
54
- _super.prototype.onRender.call(this);
55
- var _a = this.props, showInHeader = _a.showInHeader, onHeaderClick = _a.onHeaderClick, domProps = __rest(_a, ["showInHeader", "onHeaderClick"]);
56
- var inBody = this.section === "body";
57
- if (this.stateObserver)
58
- this.stateObserver.observe();
59
- if (!this.context.dataView) {
60
- throw "NeoGrid.Row cannot be used outside of a NeoGrid.";
61
- }
62
- var expandButtonOptions = __assign({}, Misc.Settings.grid.expandButton);
63
- if (inBody && this.expandProperty) {
64
- expandButtonOptions.onClick = this.onExpandClick;
65
- expandButtonOptions.icon = expandButtonOptions.icon.replace("plus", "$").replace("minus", "$").replace("$", (this.expandProperty.value ? "minus" : "plus"));
66
- }
67
- if (!inBody) {
68
- if (onHeaderClick) {
69
- domProps.onClick = function (e) { return onHeaderClick(_this.section, e); };
70
- }
71
- else {
72
- domProps.onClick = undefined;
73
- }
74
- }
75
- var output = ((this.props.showInHeader || inBody) &&
76
- React.createElement("tr", __assign({}, domProps),
77
- this.expandProperty && this.context.expandAll === undefined &&
78
- React.createElement(Column, { className: "neo-grid-expand-column" }, this.firstRowInGroup && inBody && this.expandProperty.value !== null &&
79
- React.createElement(NeoButton, __assign({}, expandButtonOptions))),
80
- this.props.children));
81
- this.setGridContext();
82
- return output;
83
- };
84
- Row.contextType = GridContext;
85
- Row.defaultProps = {
86
- showInHeader: true
87
- };
88
- return Row;
89
- }(ComponentBase));
90
- export default Row;
91
- var ChildRow = /** @class */ (function (_super) {
92
- __extends(ChildRow, _super);
93
- function ChildRow(props) {
94
- var _this = _super.call(this, props) || this;
95
- _this.wasExpanded = false;
96
- _this.lastExpandValue = null;
97
- _this.containerDiv = React.createRef();
98
- _this.afterTransition = _this.afterTransition.bind(_this);
99
- _this.afterRender = _this.afterRender.bind(_this);
100
- return _this;
101
- }
102
- Object.defineProperty(ChildRow.prototype, "isExpanded", {
103
- get: function () {
104
- if (this.props.isExpanded !== undefined) {
105
- return this.props.isExpanded;
106
- }
107
- return !this.expandProperty || this.expandProperty.value;
108
- },
109
- enumerable: false,
110
- configurable: true
111
- });
112
- ChildRow.prototype.onFirstRender = function () {
113
- this.expandProperty = this.context.expandProperty;
114
- this.inBody = this.context.inBody;
115
- };
116
- ChildRow.prototype.afterRender = function (isInitial) {
117
- if (this.inBody) {
118
- var expand = this.isExpanded;
119
- if (!isInitial && expand !== this.lastExpandValue && this.context.expandAll === undefined) {
120
- this.setHeight(expand);
121
- }
122
- this.lastExpandValue = expand;
123
- }
124
- };
125
- ChildRow.prototype.afterTransition = function () {
126
- if (this.containerDiv.current) {
127
- this.containerDiv.current.style.maxHeight = 'none';
128
- this.containerDiv.current.style.overflow = "visible";
129
- if (this.wasExpanded && !this.isExpanded) {
130
- // When collapsing, the child element must be removed after animation.
131
- this.wasExpanded = false;
132
- this.forceUpdate();
133
- }
134
- }
135
- };
136
- ChildRow.prototype.setHeight = function (expand) {
137
- var childDiv = this.containerDiv.current;
138
- if (childDiv) {
139
- var transitionDuration = window.getComputedStyle(childDiv).transitionDuration;
140
- if (transitionDuration) {
141
- // If expand / collapse has a transition, reset the max height after the transition ends.
142
- // Subtract 50ms on collapse to prevent wierd chrome padding animation issue.
143
- var delay = parseFloat(transitionDuration) * 1000;
144
- setTimeout(this.afterTransition, delay - (expand ? 0 : 50));
145
- }
146
- else {
147
- this.afterTransition();
148
- }
149
- childDiv.style.maxHeight = (!expand ? childDiv.scrollHeight : 0) + 'px';
150
- childDiv.style.overflow = "hidden";
151
- Components.AnimationHelper.triggerReflow(childDiv);
152
- childDiv.style.maxHeight = (expand ? childDiv.scrollHeight : 0) + 'px';
153
- }
154
- };
155
- ChildRow.prototype.render = function () {
156
- var _a;
157
- this.onRender();
158
- var _b = this.props, isExpanded = _b.isExpanded, isFullWidth = _b.isFullWidth, childCellProps = _b.childCellProps, domProps = __rest(_b, ["isExpanded", "isFullWidth", "childCellProps"]);
159
- isExpanded = this.inBody && ((_a = this.context.expandAll) !== null && _a !== void 0 ? _a : this.isExpanded);
160
- if (this.context.expandAll !== undefined) {
161
- // Prevent animation on whole table expand change.
162
- this.wasExpanded = false;
163
- }
164
- else if (isExpanded) {
165
- this.wasExpanded = true;
166
- }
167
- domProps.className = Utils.joinWithSpaces(domProps.className, "neo-child-row");
168
- if (childCellProps === undefined) {
169
- childCellProps = {};
170
- }
171
- childCellProps.className = Utils.joinWithSpaces(childCellProps.className, "neo-child-row-cell");
172
- var showExpandButtonColumn = this.context.expandProperty && this.context.expandAll === undefined && !this.props.isFullWidth;
173
- var colSpan = this.context.columnCount + (showExpandButtonColumn ? 0 : 1);
174
- return (this.inBody && (isExpanded || this.wasExpanded) &&
175
- React.createElement("tr", __assign({}, domProps),
176
- showExpandButtonColumn && React.createElement("td", null),
177
- React.createElement("td", __assign({}, childCellProps, { colSpan: colSpan }),
178
- React.createElement("div", { ref: this.containerDiv, className: "neo-child-row-container" }, this.props.children))));
179
- };
180
- ChildRow.contextType = GridContext;
181
- ChildRow = __decorate([
182
- observer,
183
- __metadata("design:paramtypes", [Object])
184
- ], ChildRow);
185
- return ChildRow;
186
- }(ComponentBase));
187
- export { ChildRow };
188
- var RowGroup = /** @class */ (function (_super) {
189
- __extends(RowGroup, _super);
190
- function RowGroup() {
191
- return _super !== null && _super.apply(this, arguments) || this;
192
- }
193
- RowGroup.prototype.render = function () {
194
- this.context.expandProperty = this.props.expandProperty;
195
- this.context.inFirstRowInGroup = true;
196
- return this.props.children;
197
- };
198
- RowGroup.contextType = GridContext;
199
- return RowGroup;
200
- }(React.Component));
201
- export { RowGroup };
1
+ import { __assign, __decorate, __extends, __metadata, __rest } from "tslib";
2
+ import * as React from 'react';
3
+ import { observer } from 'mobx-react';
4
+ import { GridContext } from './Grid';
5
+ import { Misc, Components, Utils } from '@singularsystems/neo-core';
6
+ import Column from './Column';
7
+ import NeoButton from '../Button';
8
+ import { StateObserver } from '../StateObserver';
9
+ import ComponentBase from '../ComponentBase';
10
+ var Row = /** @class */ (function (_super) {
11
+ __extends(Row, _super);
12
+ function Row(props) {
13
+ var _this = _super.call(this, props) || this;
14
+ _this.onExpandClick = _this.onExpandClick.bind(_this);
15
+ return _this;
16
+ }
17
+ Row.prototype.setGridContext = function () {
18
+ var _this = this;
19
+ this.context.inFirstRowInGroup = false;
20
+ if (!this.context.doneStaticSetup) {
21
+ this.context.doneStaticSetup = true;
22
+ React.Children.forEach(this.props.children, function (child) {
23
+ if (child) {
24
+ var childProps = child.props;
25
+ _this.context.columnCount += (childProps ? childProps.colSpan || 1 : 1);
26
+ if (childProps && (childProps.sum || childProps.footerContent)) {
27
+ _this.context.hasSummaries = true;
28
+ }
29
+ }
30
+ });
31
+ }
32
+ };
33
+ Row.prototype.onFirstRender = function () {
34
+ var _this = this;
35
+ this.section = this.context.section;
36
+ this.expandProperty = this.context.inFirstRowInGroup ? this.context.expandProperty : undefined;
37
+ this.firstRowInGroup = this.context.inFirstRowInGroup;
38
+ if (this.expandProperty && this.section === "body") {
39
+ this.stateObserver = new StateObserver(this, function () {
40
+ return { isExpanded: _this.expandProperty.value };
41
+ });
42
+ }
43
+ };
44
+ Row.prototype.componentWillUnmount = function () {
45
+ if (this.stateObserver)
46
+ this.stateObserver.dispose();
47
+ };
48
+ Row.prototype.onExpandClick = function () {
49
+ if (this.expandProperty) {
50
+ this.expandProperty.value = !this.expandProperty.value;
51
+ }
52
+ };
53
+ Row.prototype.render = function () {
54
+ var _this = this;
55
+ _super.prototype.onRender.call(this);
56
+ var _a = this.props, showInHeader = _a.showInHeader, onHeaderClick = _a.onHeaderClick, domProps = __rest(_a, ["showInHeader", "onHeaderClick"]);
57
+ var inBody = this.section === "body";
58
+ if (this.stateObserver)
59
+ this.stateObserver.observe();
60
+ if (!this.context.dataView) {
61
+ throw "NeoGrid.Row cannot be used outside of a NeoGrid.";
62
+ }
63
+ var expandButtonOptions = __assign({}, Misc.Settings.grid.expandButton);
64
+ if (inBody && this.expandProperty) {
65
+ expandButtonOptions.onClick = this.onExpandClick;
66
+ expandButtonOptions.icon = this.expandProperty.value ? Misc.Settings.icons.expanded : Misc.Settings.icons.collapsed;
67
+ }
68
+ if (!inBody) {
69
+ if (onHeaderClick) {
70
+ domProps.onClick = function (e) { return onHeaderClick(_this.section, e); };
71
+ }
72
+ else {
73
+ domProps.onClick = undefined;
74
+ }
75
+ }
76
+ var output = ((this.props.showInHeader || inBody) &&
77
+ React.createElement("tr", __assign({}, domProps),
78
+ this.expandProperty && this.context.expandAll === undefined &&
79
+ React.createElement(Column, { className: "neo-grid-expand-column" }, this.firstRowInGroup && inBody && this.expandProperty.value !== null &&
80
+ React.createElement(NeoButton, __assign({}, expandButtonOptions))),
81
+ this.props.children));
82
+ this.setGridContext();
83
+ return output;
84
+ };
85
+ Row.contextType = GridContext;
86
+ Row.defaultProps = {
87
+ showInHeader: true
88
+ };
89
+ return Row;
90
+ }(ComponentBase));
91
+ export default Row;
92
+ export var ChildRow = /** @class */ (function (_super) {
93
+ __extends(ChildRow, _super);
94
+ function ChildRow(props) {
95
+ var _this = _super.call(this, props) || this;
96
+ _this.wasExpanded = false;
97
+ _this.lastExpandValue = null;
98
+ _this.containerDiv = React.createRef();
99
+ _this.afterTransition = _this.afterTransition.bind(_this);
100
+ _this.afterRender = _this.afterRender.bind(_this);
101
+ return _this;
102
+ }
103
+ Object.defineProperty(ChildRow.prototype, "isExpanded", {
104
+ get: function () {
105
+ if (this.props.isExpanded !== undefined) {
106
+ return this.props.isExpanded;
107
+ }
108
+ return !this.expandProperty || this.expandProperty.value;
109
+ },
110
+ enumerable: false,
111
+ configurable: true
112
+ });
113
+ ChildRow.prototype.onFirstRender = function () {
114
+ this.expandProperty = this.context.expandProperty;
115
+ this.inBody = this.context.inBody;
116
+ };
117
+ ChildRow.prototype.afterRender = function (isInitial) {
118
+ if (this.inBody) {
119
+ var expand = this.isExpanded;
120
+ if (!isInitial && expand !== this.lastExpandValue && this.context.expandAll === undefined) {
121
+ this.setHeight(expand);
122
+ }
123
+ this.lastExpandValue = expand;
124
+ }
125
+ };
126
+ ChildRow.prototype.afterTransition = function () {
127
+ if (this.containerDiv.current) {
128
+ this.containerDiv.current.style.maxHeight = 'none';
129
+ this.containerDiv.current.style.overflow = "visible";
130
+ if (this.wasExpanded && !this.isExpanded) {
131
+ // When collapsing, the child element must be removed after animation.
132
+ this.wasExpanded = false;
133
+ this.forceUpdate();
134
+ }
135
+ }
136
+ };
137
+ ChildRow.prototype.setHeight = function (expand) {
138
+ var childDiv = this.containerDiv.current;
139
+ if (childDiv) {
140
+ var transitionDuration = window.getComputedStyle(childDiv).transitionDuration;
141
+ if (transitionDuration) {
142
+ // If expand / collapse has a transition, reset the max height after the transition ends.
143
+ // Subtract 50ms on collapse to prevent wierd chrome padding animation issue.
144
+ var delay = parseFloat(transitionDuration) * 1000;
145
+ setTimeout(this.afterTransition, delay - (expand ? 0 : 50));
146
+ }
147
+ else {
148
+ this.afterTransition();
149
+ }
150
+ childDiv.style.maxHeight = (!expand ? childDiv.scrollHeight : 0) + 'px';
151
+ childDiv.style.overflow = "hidden";
152
+ Components.AnimationHelper.triggerReflow(childDiv);
153
+ childDiv.style.maxHeight = (expand ? childDiv.scrollHeight : 0) + 'px';
154
+ }
155
+ };
156
+ ChildRow.prototype.render = function () {
157
+ var _a;
158
+ this.onRender();
159
+ var _b = this.props, isExpanded = _b.isExpanded, isFullWidth = _b.isFullWidth, childCellProps = _b.childCellProps, domProps = __rest(_b, ["isExpanded", "isFullWidth", "childCellProps"]);
160
+ isExpanded = this.inBody && ((_a = this.context.expandAll) !== null && _a !== void 0 ? _a : this.isExpanded);
161
+ if (this.context.expandAll !== undefined) {
162
+ // Prevent animation on whole table expand change.
163
+ this.wasExpanded = false;
164
+ }
165
+ else if (isExpanded) {
166
+ this.wasExpanded = true;
167
+ }
168
+ domProps.className = Utils.joinWithSpaces(domProps.className, "neo-child-row");
169
+ if (childCellProps === undefined) {
170
+ childCellProps = {};
171
+ }
172
+ childCellProps.className = Utils.joinWithSpaces(childCellProps.className, "neo-child-row-cell");
173
+ var showExpandButtonColumn = this.context.expandProperty && this.context.expandAll === undefined && !this.props.isFullWidth;
174
+ var colSpan = this.context.columnCount + (showExpandButtonColumn ? 0 : 1);
175
+ return (this.inBody && (isExpanded || this.wasExpanded) &&
176
+ React.createElement("tr", __assign({}, domProps),
177
+ showExpandButtonColumn && React.createElement("td", null),
178
+ React.createElement("td", __assign({}, childCellProps, { colSpan: colSpan }),
179
+ React.createElement("div", { ref: this.containerDiv, className: "neo-child-row-container" }, this.props.children))));
180
+ };
181
+ ChildRow.contextType = GridContext;
182
+ ChildRow = __decorate([
183
+ observer,
184
+ __metadata("design:paramtypes", [Object])
185
+ ], ChildRow);
186
+ return ChildRow;
187
+ }(ComponentBase));
188
+ export var RowGroup = /** @class */ (function (_super) {
189
+ __extends(RowGroup, _super);
190
+ function RowGroup() {
191
+ return _super !== null && _super.apply(this, arguments) || this;
192
+ }
193
+ RowGroup.prototype.render = function () {
194
+ this.context.expandProperty = this.props.expandProperty;
195
+ this.context.inFirstRowInGroup = true;
196
+ return this.props.children;
197
+ };
198
+ RowGroup.contextType = GridContext;
199
+ return RowGroup;
200
+ }(React.Component));
@@ -1,5 +1,5 @@
1
- import Grid from './Grid';
2
- import Column from './Column';
3
- import Row, { RowGroup, ChildRow } from './Row';
4
- import { ButtonColumn } from './ButtonColumn';
5
- export { Grid, Column, RowGroup, Row, ChildRow, ButtonColumn };
1
+ import Grid from './Grid';
2
+ import Column from './Column';
3
+ import Row, { RowGroup, ChildRow } from './Row';
4
+ import { ButtonColumn } from './ButtonColumn';
5
+ export { Grid, Column, RowGroup, Row, ChildRow, ButtonColumn };
@@ -1,5 +1,5 @@
1
- import Grid from './Grid';
2
- import Column from './Column';
3
- import Row, { RowGroup, ChildRow } from './Row';
4
- import { ButtonColumn } from './ButtonColumn';
5
- export { Grid, Column, RowGroup, Row, ChildRow, ButtonColumn };
1
+ import Grid from './Grid';
2
+ import Column from './Column';
3
+ import Row, { RowGroup, ChildRow } from './Row';
4
+ import { ButtonColumn } from './ButtonColumn';
5
+ export { Grid, Column, RowGroup, Row, ChildRow, ButtonColumn };
@@ -1,20 +1,20 @@
1
- import React from 'react';
2
- import { Components } from '@singularsystems/neo-core';
3
- interface ILayoutGridProps extends Components.IColumnCountBreakpoints {
4
- /** Size of gutters between columns. 1 - 5. */
5
- gutterSize?: Components.gutterSize;
6
- /** Vertical space to insert between rows. Specify using a css dimension. */
7
- verticalSpace?: string;
8
- /** Sets verticalSpace to "1rem" for convenience. */
9
- withGaps?: boolean;
10
- alignItems?: Components.flexItemAlign;
11
- formGroupProps?: Components.IColumnWidthBreakpoints;
12
- }
13
- export declare class FormGroupLayoutContextParams {
14
- formGroupProps?: Components.IColumnWidthBreakpoints;
15
- }
16
- export declare const FormGroupLayoutContext: React.Context<FormGroupLayoutContextParams>;
17
- export default class GridLayout extends React.Component<ILayoutGridProps & React.HTMLProps<HTMLDivElement>> {
18
- render(): JSX.Element;
19
- }
20
- export {};
1
+ import React from 'react';
2
+ import { Components } from '@singularsystems/neo-core';
3
+ interface ILayoutGridProps extends Components.IColumnCountBreakpoints {
4
+ /** Size of gutters between columns. 1 - 5. */
5
+ gutterSize?: Components.gutterSize;
6
+ /** Vertical space to insert between rows. Specify using a css dimension. */
7
+ verticalSpace?: string;
8
+ /** Sets verticalSpace to "1rem" for convenience. */
9
+ withGaps?: boolean;
10
+ alignItems?: Components.flexItemAlign;
11
+ formGroupProps?: Components.IColumnWidthBreakpoints;
12
+ }
13
+ export declare class FormGroupLayoutContextParams {
14
+ formGroupProps?: Components.IColumnWidthBreakpoints;
15
+ }
16
+ export declare const FormGroupLayoutContext: React.Context<FormGroupLayoutContextParams>;
17
+ export default class GridLayout extends React.Component<ILayoutGridProps & React.HTMLProps<HTMLDivElement>> {
18
+ render(): JSX.Element;
19
+ }
20
+ export {};