oa-componentbook 1.0.1-stage.451 → 1.0.1-stage.453

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 (4) hide show
  1. package/build/components/oa-component-document-details-panel/DocumentDetailsPanel.js +1 -1
  2. package/build/components/oa-component-table-with-search-and-filter/TableWithSearchAndFilter.js +52 -6
  3. package/build/components/oa-component-table-with-search-and-filter/styles.js +6 -4
  4. package/package.json +1 -1
package/build/components/oa-component-document-details-panel/DocumentDetailsPanel.js CHANGED
@@ -15,7 +15,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
15
15
  /**
16
16
  * Styled container for the details panel
17
17
  */
18
- const PanelContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background: var(--color-background, #fff);\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n .panel-title {\n margin: 0 0 24px 0;\n }\n\n .table-container {\n border: 1px solid var(--color-border, #e8e8e8);\n border-radius: 4px;\n overflow: hidden;\n margin-bottom: 24px;\n }\n\n .section-header {\n background: var(--color-background-secondary, #f5f5f5);\n padding: 12px 16px;\n margin: 0;\n border-bottom: 1px solid var(--color-border, #e8e8e8);\n }\n\n .details-table {\n width: 100%;\n margin: 0;\n border-collapse: collapse;\n background: var(--color-background, #fff);\n }\n\n .details-row {\n border-bottom: 1px solid var(--color-border-light, #f0f0f0);\n }\n\n .details-row:last-child {\n border-bottom: none;\n }\n\n .details-label {\n width: 140px;\n min-width: 140px;\n padding: 16px;\n padding-right: 16px;\n text-align: left;\n vertical-align: top;\n }\n\n .details-value {\n padding: 16px;\n word-break: break-word;\n font-weight: 500;\n vertical-align: top;\n }\n\n .details-actions {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n gap: 16px;\n margin-top: 0;\n padding-top: 0;\n border-top: none;\n }\n\n .details-actions button {\n padding: 0;\n }\n\n .children-container {\n margin-top: 24px;\n }\n"])));
18
+ const PanelContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background: var(--color-background, #fff);\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n .panel-title {\n margin: 0 0 24px 0;\n }\n\n .table-container {\n border: 1px solid var(--color-border, #e8e8e8);\n border-radius: 4px;\n overflow: hidden;\n margin-bottom: 24px;\n }\n\n .section-header {\n background: var(--color-background-secondary, #f5f5f5);\n padding: 12px 16px;\n margin: 0;\n border-bottom: 1px solid var(--color-border, #e8e8e8);\n }\n\n .details-table {\n width: 100%;\n margin: 0;\n border-collapse: collapse;\n background: var(--color-background, #fff);\n }\n\n .details-row {\n border-bottom: 1px solid var(--color-border-light, #f0f0f0);\n }\n\n .details-row:last-child {\n border-bottom: none;\n }\n\n .details-label {\n width: 140px;\n min-width: 140px;\n padding: 16px;\n padding-right: 16px;\n text-align: left;\n vertical-align: top;\n }\n\n .details-value {\n padding: 16px;\n word-break: break-word;\n font-weight: 500;\n vertical-align: top;\n }\n\n .details-actions {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n gap: 16px;\n margin-top: 0;\n padding-top: 0;\n border-top: none;\n }\n\n .details-actions button {\n padding: 0;\n color: #1890ff !important;\n }\n .details-actions button:hover {\n color: #1890ff !important;\n }\n\n .children-container {\n margin-top: 24px;\n }\n"])));
19
19
 
20
20
  /**
21
21
  * DocumentDetailsPanel Component
package/build/components/oa-component-table-with-search-and-filter/TableWithSearchAndFilter.js CHANGED
@@ -116,6 +116,7 @@ function TableWithSearchAndFilter(_ref) {
116
116
  // Filter drawer state
117
117
  const [isFilterDrawerVisible, setIsFilterDrawerVisible] = (0, _react.useState)(false);
118
118
  const [filterValues, setFilterValues] = (0, _react.useState)({});
119
+ const [appliedFilters, setAppliedFilters] = (0, _react.useState)({});
119
120
 
120
121
  // Search handlers
121
122
  const handleSearchChange = e => {
@@ -134,8 +135,16 @@ function TableWithSearchAndFilter(_ref) {
134
135
  };
135
136
 
136
137
  // Filter handlers
137
- const handleOpenFilterDrawer = () => setIsFilterDrawerVisible(true);
138
- const handleCloseFilterDrawer = () => setIsFilterDrawerVisible(false);
138
+ const handleOpenFilterDrawer = () => {
139
+ // Sync filterValues with appliedFilters when opening drawer
140
+ setFilterValues(appliedFilters);
141
+ setIsFilterDrawerVisible(true);
142
+ };
143
+ const handleCloseFilterDrawer = () => {
144
+ // Revert filterValues to appliedFilters when closing without applying
145
+ setFilterValues(appliedFilters);
146
+ setIsFilterDrawerVisible(false);
147
+ };
139
148
  const handleFilterChange = function handleFilterChange(key, value) {
140
149
  let action = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'change';
141
150
  // Normalize empty values: convert empty string to null for consistency
@@ -152,12 +161,15 @@ function TableWithSearchAndFilter(_ref) {
152
161
  };
153
162
  const handleApplyFilters = () => {
154
163
  setIsFilterDrawerVisible(false);
164
+ // Save applied filters
165
+ setAppliedFilters(filterValues);
155
166
  if (onFiltersApply) {
156
167
  onFiltersApply(filterValues);
157
168
  }
158
169
  };
159
170
  const handleClearFilters = () => {
160
171
  setFilterValues({});
172
+ setAppliedFilters({});
161
173
  if (onFiltersClear) {
162
174
  onFiltersClear();
163
175
  }
@@ -226,6 +238,36 @@ function TableWithSearchAndFilter(_ref) {
226
238
  });
227
239
  }, [requiredKeys, requiredFieldsSignature, filterValues]);
228
240
 
241
+ // Helper function to check if a value is non-empty
242
+ const isValueNonEmpty = value => {
243
+ if (value === undefined || value === null || value === '') {
244
+ return false;
245
+ }
246
+
247
+ // Handle arrays
248
+ if (Array.isArray(value)) {
249
+ return value.length > 0;
250
+ }
251
+
252
+ // Handle objects (but allow Date objects and other valid objects)
253
+ if (typeof value === 'object' && !(value instanceof Date)) {
254
+ return Object.keys(value).length > 0;
255
+ }
256
+ return true;
257
+ };
258
+
259
+ // Helper function to check if filters are applied
260
+ const hasAppliedFilters = (0, _react.useMemo)(() => {
261
+ // Check if filters were actually applied (Apply Filter button was clicked)
262
+ const appliedFilterKeys = Object.keys(appliedFilters);
263
+ if (appliedFilterKeys.length === 0) {
264
+ return false;
265
+ }
266
+
267
+ // Check if any applied filter has a non-empty value
268
+ return appliedFilterKeys.some(key => isValueNonEmpty(appliedFilters[key]));
269
+ }, [appliedFilters]);
270
+
229
271
  // Helper function to determine notFoundContent message
230
272
  const getNotFoundContent = (isApiCallInProgress, query) => {
231
273
  if (!isApiCallInProgress && (query === null || query === void 0 ? void 0 : query.length) < 3) {
@@ -321,9 +363,9 @@ function TableWithSearchAndFilter(_ref) {
321
363
  case 'radio':
322
364
  return renderRadioGroup(key, filter);
323
365
  case 'select':
324
- return renderSelect(key, filter);
366
+ return /*#__PURE__*/_react.default.createElement(_styles.FilterSubField, null, renderSelect(key, filter));
325
367
  case 'date':
326
- return renderDatePicker(key, filter);
368
+ return /*#__PURE__*/_react.default.createElement(_styles.FilterSubField, null, renderDatePicker(key, filter));
327
369
  case 'dateRange':
328
370
  return /*#__PURE__*/_react.default.createElement(_styles.DateRangeContainer, null, fields.map(field => /*#__PURE__*/_react.default.createElement(_styles.FilterSubField, {
329
371
  key: field.key
@@ -369,7 +411,7 @@ function TableWithSearchAndFilter(_ref) {
369
411
  width: SEARCH_INPUT_WIDTH,
370
412
  flexShrink: 0
371
413
  }
372
- }), showFilters && /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
414
+ }), showFilters && /*#__PURE__*/_react.default.createElement(_styles.FilterButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
373
415
  label: filterButtonLabel,
374
416
  onClick: handleOpenFilterDrawer,
375
417
  type: "secondary",
@@ -379,8 +421,12 @@ function TableWithSearchAndFilter(_ref) {
379
421
  icon: _FilterList.default
380
422
  }),
381
423
  position: 'left'
424
+ },
425
+ style: {
426
+ borderColor: '#1890ff',
427
+ color: '#1890ff'
382
428
  }
383
- })), showFilters && /*#__PURE__*/_react.default.createElement(_CustomDrawer.default, {
429
+ }), hasAppliedFilters && /*#__PURE__*/_react.default.createElement(_styles.FilterIndicatorDot, null))), showFilters && /*#__PURE__*/_react.default.createElement(_CustomDrawer.default, {
384
430
  title: filterDrawerTitle,
385
431
  placement: "right",
386
432
  isBaseDrawer: true,
package/build/components/oa-component-table-with-search-and-filter/styles.js CHANGED
@@ -3,13 +3,13 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.Toolbar = exports.TableWithSearchAndFilterContainer = exports.RequiredMark = exports.PaginationContainer = exports.FilterSubLabelText = exports.FilterSubLabel = exports.FilterSubField = exports.FilterSection = exports.FilterLabel = exports.FilterGroup = exports.FilterDrawerContent = exports.FilterDrawerBody = exports.DateRangeContainer = void 0;
6
+ exports.Toolbar = exports.TableWithSearchAndFilterContainer = exports.RequiredMark = exports.PaginationContainer = exports.FilterSubLabelText = exports.FilterSubLabel = exports.FilterSubField = exports.FilterSection = exports.FilterLabel = exports.FilterIndicatorDot = exports.FilterGroup = exports.FilterDrawerContent = exports.FilterDrawerBody = exports.FilterButtonWrapper = exports.DateRangeContainer = void 0;
7
7
  var _styledComponents = _interopRequireDefault(require("styled-components"));
8
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
8
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
9
9
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
10
10
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
11
11
  const TableWithSearchAndFilterContainer = exports.TableWithSearchAndFilterContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n"])));
12
- const Toolbar = exports.Toolbar = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n gap: 16px;\n\n @media screen and (max-width: 768px) {\n flex-direction: column;\n align-items: stretch;\n }\n"])));
12
+ const Toolbar = exports.Toolbar = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n gap: 16px;\n\n button.secondary {\n border-color: #1890ff !important;\n color: #1890ff !important;\n }\n button.secondary:hover {\n border-color: #1890ff !important;\n color: #1890ff !important;\n }\n\n @media screen and (max-width: 768px) {\n flex-direction: column;\n align-items: stretch;\n }\n"])));
13
13
  const FilterSection = exports.FilterSection = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n margin-bottom: 24px;\n"])));
14
14
  const FilterLabel = exports.FilterLabel = _styledComponents.default.label(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n font-weight: 600;\n font-size: 14px;\n color: var(--color-primary-content, #212121);\n margin-bottom: 12px;\n"])));
15
15
  const RequiredMark = exports.RequiredMark = _styledComponents.default.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n color: #ff4d4f;\n margin-left: 2px;\n font-weight: 400;\n"])));
@@ -20,4 +20,6 @@ const FilterGroup = exports.FilterGroup = _styledComponents.default.div(_templat
20
20
  const FilterSubField = exports.FilterSubField = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n gap: 8px;\n"])));
21
21
  const FilterSubLabel = exports.FilterSubLabel = _styledComponents.default.label(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 14px;\n color: var(--color-primary-content, #212121);\n"])));
22
22
  const FilterSubLabelText = exports.FilterSubLabelText = _styledComponents.default.span(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n color: var(--color-primary-content, #212121);\n"])));
23
- const DateRangeContainer = exports.DateRangeContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
23
+ const DateRangeContainer = exports.DateRangeContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
24
+ const FilterButtonWrapper = exports.FilterButtonWrapper = _styledComponents.default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n position: relative;\n"])));
25
+ const FilterIndicatorDot = exports.FilterIndicatorDot = _styledComponents.default.span(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n width: 12px;\n height: 12px;\n background: #de350b;\n position: absolute;\n top: -4px;\n right: -4px;\n border-radius: 50%;\n z-index: 1;\n"])));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oa-componentbook",
3
- "version": "1.0.1-stage.451",
3
+ "version": "1.0.1-stage.453",
4
4
  "private": false,
5
5
  "description": "Reusable components",
6
6
  "main": "build/index.js",