qbs-react-grid 1.0.42 → 1.0.44
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/es/qbsTable/Toolbar.js +3 -2
- package/es/qbsTable/commontypes.d.ts +2 -0
- package/es/qbsTable/utilities/ColumShowHide.js +1 -1
- package/es/qbsTable/utilities/ToolTip.js +1 -1
- package/lib/qbsTable/Toolbar.js +3 -2
- package/lib/qbsTable/commontypes.d.ts +2 -0
- package/lib/qbsTable/utilities/ColumShowHide.js +1 -1
- package/package.json +1 -1
- package/src/qbsTable/Toolbar.tsx +12 -7
- package/src/qbsTable/commontypes.ts +2 -0
- package/src/qbsTable/utilities/ColumShowHide.tsx +45 -41
- package/src/qbsTable/utilities/ToolTip.tsx +2 -1
package/es/qbsTable/Toolbar.js
CHANGED
|
@@ -67,13 +67,14 @@ var ToolBar = function ToolBar(_ref) {
|
|
|
67
67
|
return onSelect === null || onSelect === void 0 ? void 0 : onSelect([]);
|
|
68
68
|
}
|
|
69
69
|
}, "Clear"), selectedRowActions === null || selectedRowActions === void 0 ? void 0 : selectedRowActions.map(function (actions, index) {
|
|
70
|
-
return /*#__PURE__*/React.createElement("button", {
|
|
70
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, !actions.hidden && /*#__PURE__*/React.createElement("button", {
|
|
71
71
|
key: index.toString(),
|
|
72
72
|
className: "btn",
|
|
73
|
+
disabled: actions.disabled,
|
|
73
74
|
onClick: function onClick() {
|
|
74
75
|
return actions === null || actions === void 0 ? void 0 : actions.action(checkedKeys);
|
|
75
76
|
}
|
|
76
|
-
}, actions.actionTitle);
|
|
77
|
+
}, actions.actionTitle));
|
|
77
78
|
}))) : /*#__PURE__*/React.createElement("div", null, pagination && paginationProps && /*#__PURE__*/React.createElement("div", {
|
|
78
79
|
className: "rows-count"
|
|
79
80
|
}, getRowDisplayRange((_paginationProps$tota = paginationProps.total) != null ? _paginationProps$tota : 0, (_paginationProps$rows = paginationProps.rowsPerPage) != null ? _paginationProps$rows : 0, (_paginationProps$curr = paginationProps.currentPage) != null ? _paginationProps$curr : 0)))));
|
|
@@ -87,6 +87,7 @@ export interface QbsTableProps {
|
|
|
87
87
|
actionTitle?: string;
|
|
88
88
|
action: (checked: (number | string)[]) => void;
|
|
89
89
|
disabled?: boolean;
|
|
90
|
+
hidden?: boolean;
|
|
90
91
|
}[];
|
|
91
92
|
selectedRows?: (number | string)[];
|
|
92
93
|
classes?: {
|
|
@@ -120,6 +121,7 @@ export interface QbsTableToolbarProps {
|
|
|
120
121
|
actionTitle?: string;
|
|
121
122
|
action: (checked: (number | string)[]) => void;
|
|
122
123
|
disabled?: boolean;
|
|
124
|
+
hidden?: boolean;
|
|
123
125
|
}[];
|
|
124
126
|
}
|
|
125
127
|
export {};
|
|
@@ -145,7 +145,7 @@ var ColumnToggle = function ColumnToggle(_ref) {
|
|
|
145
145
|
onClick: function onClick() {
|
|
146
146
|
return setIsOpen(!isOpen);
|
|
147
147
|
}
|
|
148
|
-
}, /*#__PURE__*/React.createElement(SettingsIcon, null)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
|
|
148
|
+
}, /*#__PURE__*/React.createElement(SettingsIcon, null)), isOpen && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
|
|
149
149
|
className: "qbs-table-column-popup",
|
|
150
150
|
ref: popupRef
|
|
151
151
|
}, /*#__PURE__*/React.createElement("div", {
|
package/lib/qbsTable/Toolbar.js
CHANGED
|
@@ -74,13 +74,14 @@ var ToolBar = function ToolBar(_ref) {
|
|
|
74
74
|
return onSelect === null || onSelect === void 0 ? void 0 : onSelect([]);
|
|
75
75
|
}
|
|
76
76
|
}, "Clear"), selectedRowActions === null || selectedRowActions === void 0 ? void 0 : selectedRowActions.map(function (actions, index) {
|
|
77
|
-
return /*#__PURE__*/_react["default"].createElement("button", {
|
|
77
|
+
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !actions.hidden && /*#__PURE__*/_react["default"].createElement("button", {
|
|
78
78
|
key: index.toString(),
|
|
79
79
|
className: "btn",
|
|
80
|
+
disabled: actions.disabled,
|
|
80
81
|
onClick: function onClick() {
|
|
81
82
|
return actions === null || actions === void 0 ? void 0 : actions.action(checkedKeys);
|
|
82
83
|
}
|
|
83
|
-
}, actions.actionTitle);
|
|
84
|
+
}, actions.actionTitle));
|
|
84
85
|
}))) : /*#__PURE__*/_react["default"].createElement("div", null, pagination && paginationProps && /*#__PURE__*/_react["default"].createElement("div", {
|
|
85
86
|
className: "rows-count"
|
|
86
87
|
}, (0, _tablecalc.getRowDisplayRange)((_paginationProps$tota = paginationProps.total) != null ? _paginationProps$tota : 0, (_paginationProps$rows = paginationProps.rowsPerPage) != null ? _paginationProps$rows : 0, (_paginationProps$curr = paginationProps.currentPage) != null ? _paginationProps$curr : 0)))));
|
|
@@ -87,6 +87,7 @@ export interface QbsTableProps {
|
|
|
87
87
|
actionTitle?: string;
|
|
88
88
|
action: (checked: (number | string)[]) => void;
|
|
89
89
|
disabled?: boolean;
|
|
90
|
+
hidden?: boolean;
|
|
90
91
|
}[];
|
|
91
92
|
selectedRows?: (number | string)[];
|
|
92
93
|
classes?: {
|
|
@@ -120,6 +121,7 @@ export interface QbsTableToolbarProps {
|
|
|
120
121
|
actionTitle?: string;
|
|
121
122
|
action: (checked: (number | string)[]) => void;
|
|
122
123
|
disabled?: boolean;
|
|
124
|
+
hidden?: boolean;
|
|
123
125
|
}[];
|
|
124
126
|
}
|
|
125
127
|
export {};
|
|
@@ -151,7 +151,7 @@ var ColumnToggle = function ColumnToggle(_ref) {
|
|
|
151
151
|
onClick: function onClick() {
|
|
152
152
|
return setIsOpen(!isOpen);
|
|
153
153
|
}
|
|
154
|
-
}, /*#__PURE__*/_react["default"].createElement(_icons.SettingsIcon, null)), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
|
|
154
|
+
}, /*#__PURE__*/_react["default"].createElement(_icons.SettingsIcon, null)), isOpen && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
|
|
155
155
|
className: "qbs-table-column-popup",
|
|
156
156
|
ref: popupRef
|
|
157
157
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
package/package.json
CHANGED
package/src/qbsTable/Toolbar.tsx
CHANGED
|
@@ -74,13 +74,18 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
|
|
|
74
74
|
Clear
|
|
75
75
|
</button>
|
|
76
76
|
{selectedRowActions?.map((actions, index: number) => (
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
77
|
+
<>
|
|
78
|
+
{!actions.hidden && (
|
|
79
|
+
<button
|
|
80
|
+
key={index.toString()}
|
|
81
|
+
className="btn"
|
|
82
|
+
disabled={actions.disabled}
|
|
83
|
+
onClick={() => actions?.action(checkedKeys)}
|
|
84
|
+
>
|
|
85
|
+
{actions.actionTitle}
|
|
86
|
+
</button>
|
|
87
|
+
)}
|
|
88
|
+
</>
|
|
84
89
|
))}
|
|
85
90
|
</div>
|
|
86
91
|
</div>
|
|
@@ -92,6 +92,7 @@ export interface QbsTableProps {
|
|
|
92
92
|
actionTitle?: string;
|
|
93
93
|
action: (checked: (number | string)[]) => void;
|
|
94
94
|
disabled?: boolean;
|
|
95
|
+
hidden?: boolean;
|
|
95
96
|
}[];
|
|
96
97
|
selectedRows?: (number | string)[];
|
|
97
98
|
classes?: { [key: string]: any };
|
|
@@ -124,5 +125,6 @@ export interface QbsTableToolbarProps {
|
|
|
124
125
|
actionTitle?: string;
|
|
125
126
|
action: (checked: (number | string)[]) => void;
|
|
126
127
|
disabled?: boolean;
|
|
128
|
+
hidden?: boolean;
|
|
127
129
|
}[];
|
|
128
130
|
}
|
|
@@ -166,60 +166,64 @@ const ColumnToggle: React.FC<ColumnToggleProps> = ({
|
|
|
166
166
|
<button onClick={() => setIsOpen(!isOpen)}>
|
|
167
167
|
<SettingsIcon />
|
|
168
168
|
</button>
|
|
169
|
-
{
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
169
|
+
{isOpen && (
|
|
170
|
+
<div>
|
|
171
|
+
<div className="qbs-table-column-popup" ref={popupRef}>
|
|
172
|
+
<div className="qbs-table-popup-container">
|
|
173
|
+
<div className="qbs-table-popup-item">
|
|
174
|
+
<div className="qbs-table-popup-label">FIXED COLUMNS</div>
|
|
175
|
+
<div className="qbs-table-columns-container">
|
|
176
|
+
<div className="qbs-table-column">
|
|
177
|
+
{columns.map((column, index) =>
|
|
178
|
+
column.fixed ? renderFixedColumn(column, index) : ''
|
|
179
|
+
)}
|
|
180
|
+
</div>
|
|
180
181
|
</div>
|
|
181
182
|
</div>
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
183
|
+
<div className="qbs-table-divider"></div>
|
|
184
|
+
<div className="qbs-table-popup-item">
|
|
185
|
+
<div className="qbs-table-popup-label">VISIBLE COLUMNS</div>
|
|
186
|
+
<div className="qbs-table-columns-container">
|
|
187
|
+
<div className="qbs-table-column">
|
|
188
|
+
{columns.map((column, index) =>
|
|
189
|
+
column.isVisible && !column.fixed ? renderColumn(column, index) : ''
|
|
190
|
+
)}
|
|
191
|
+
</div>
|
|
191
192
|
</div>
|
|
192
193
|
</div>
|
|
194
|
+
{handleAvailableColumns() && (
|
|
195
|
+
<>
|
|
196
|
+
<div className="qbs-table-divider"></div>
|
|
197
|
+
<div className="qbs-table-popup-item">
|
|
198
|
+
<div className="qbs-table-popup-label">AVAILABLE COLUMNS</div>
|
|
199
|
+
<div className="qbs-table-columns-container">
|
|
200
|
+
<div className="qbs-table-column">
|
|
201
|
+
{columns.map((column, index) =>
|
|
202
|
+
!column.isVisible && !column.fixed ? renderFixedColumn(column, index) : ''
|
|
203
|
+
)}
|
|
204
|
+
</div>
|
|
205
|
+
</div>
|
|
206
|
+
</div>
|
|
207
|
+
</>
|
|
208
|
+
)}
|
|
193
209
|
</div>
|
|
194
|
-
{
|
|
210
|
+
{handleResetColumns && (
|
|
195
211
|
<>
|
|
196
212
|
<div className="qbs-table-divider"></div>
|
|
197
213
|
<div className="qbs-table-popup-item">
|
|
198
|
-
<
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
</div>
|
|
214
|
+
<a
|
|
215
|
+
className="qbs-table-reset-link"
|
|
216
|
+
href="#"
|
|
217
|
+
onClick={() => handleResetColumns?.()}
|
|
218
|
+
>
|
|
219
|
+
Reset to default
|
|
220
|
+
</a>
|
|
206
221
|
</div>
|
|
207
222
|
</>
|
|
208
223
|
)}
|
|
209
224
|
</div>
|
|
210
|
-
{handleResetColumns && (
|
|
211
|
-
<>
|
|
212
|
-
<div className="qbs-table-divider"></div>
|
|
213
|
-
<div className="qbs-table-popup-item">
|
|
214
|
-
<a className="qbs-table-reset-link" href="#" onClick={() => handleResetColumns?.()}>
|
|
215
|
-
Reset to default
|
|
216
|
-
</a>
|
|
217
|
-
</div>
|
|
218
|
-
</>
|
|
219
|
-
)}
|
|
220
225
|
</div>
|
|
221
|
-
|
|
222
|
-
{/* )} */}
|
|
226
|
+
)}
|
|
223
227
|
</div>
|
|
224
228
|
);
|
|
225
229
|
};
|