@helpdice/ui 1.5.8 → 1.5.9

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 (5) hide show
  1. package/dist/index.js +96 -101
  2. package/dist/table/index.js +96 -101
  3. package/esm/table/data-table.js +92 -100
  4. package/esm/table/table-head.js +4 -4
  5. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -26318,10 +26318,6 @@ var makeColgroup = function makeColgroup(width, columns) {
26318
26318
  };
26319
26319
  var TableHead = function TableHead(props) {
26320
26320
  var theme = useTheme();
26321
- var _React$useState = React$1.useState({}),
26322
- _React$useState2 = _slicedToArray(_React$useState, 2),
26323
- filters = _React$useState2[0],
26324
- setFilters = _React$useState2[1];
26325
26321
  var _ref = props,
26326
26322
  columns = _ref.columns,
26327
26323
  width = _ref.width,
@@ -26337,6 +26333,10 @@ var TableHead = function TableHead(props) {
26337
26333
  if (!isScalableWidth) return /*#__PURE__*/React$1.createElement("colgroup", null);
26338
26334
  return makeColgroup(width, columns);
26339
26335
  }, [isScalableWidth, width]);
26336
+ var _React$useState = React$1.useState(),
26337
+ _React$useState2 = _slicedToArray(_React$useState, 2),
26338
+ filters = _React$useState2[0],
26339
+ setFilters = _React$useState2[1];
26340
26340
  var handleFilterChange = function handleFilterChange(name, value) {
26341
26341
  setFilters(function (prevFilters) {
26342
26342
  var updatedFilters = _objectSpread2(_objectSpread2({}, prevFilters), {}, _defineProperty$1({}, name, value));
@@ -44270,6 +44270,9 @@ function Placeholder(_ref) {
44270
44270
  }, msg));
44271
44271
  }
44272
44272
 
44273
+ // import Input from '../input';
44274
+ // import Select from '../select';
44275
+
44273
44276
  function DataTable(_ref) {
44274
44277
  var _ref$cols = _ref.cols,
44275
44278
  cols = _ref$cols === void 0 ? [] : _ref$cols,
@@ -44292,7 +44295,7 @@ function DataTable(_ref) {
44292
44295
  window.history.back();
44293
44296
  } : _ref$onBack,
44294
44297
  onRefresh = _ref.onRefresh,
44295
- onFilters = _ref.onFilters,
44298
+ _onFilters = _ref.onFilters,
44296
44299
  onSelectedDelete = _ref.onSelectedDelete,
44297
44300
  onSelectedEdit = _ref.onSelectedEdit,
44298
44301
  onSelected = _ref.onSelected,
@@ -44343,13 +44346,13 @@ function DataTable(_ref) {
44343
44346
  });
44344
44347
 
44345
44348
  // State for filter values
44346
- var _useState7 = React$1.useState(COLUMNS.reduce(function (acc, col) {
44347
- acc[col.filter] = '';
44348
- return acc;
44349
- }, {})),
44350
- _useState8 = _slicedToArray(_useState7, 2),
44351
- filterValues = _useState8[0],
44352
- setFilterValues = _useState8[1];
44349
+ // const [filterValues, setFilterValues] = useState(
44350
+ // COLUMNS.reduce((acc, col) => {
44351
+ // acc[col.filter] = '';
44352
+ // return acc;
44353
+ // }, {})
44354
+ // );
44355
+
44353
44356
  function handleShowFilter() {
44354
44357
  return setOpenFilter(!openFilter);
44355
44358
  }
@@ -44419,80 +44422,72 @@ function DataTable(_ref) {
44419
44422
  // // '& tr': { borderBottom: '1px solid #ccc !important' }
44420
44423
  // };
44421
44424
 
44422
- var handleFilterChange = function handleFilterChange(name, value) {
44423
- setFilterValues(_objectSpread2(_objectSpread2({}, filterValues), {}, _defineProperty$1({}, name, value)));
44424
- };
44425
- var generateFilterInputs = function generateFilterInputs() {
44426
- return COLUMNS.map(function (col) {
44427
- var _String4, _filterValues$filterN;
44428
- var Header = col.name,
44429
- accessor = col.filter,
44430
- options = col.options;
44431
- var filterName = (_String4 = String(col === null || col === void 0 ? void 0 : col.name)) === null || _String4 === void 0 ? void 0 : _String4.replace(' ', '_').toLowerCase();
44432
- // const unq_accessor = _.uniqueId(filterName);
44433
- // if (Header === 'actions') {
44434
- // return (
44435
- // <th style={{ margin: '3px' }} data-column={Header} key={unq_accessor}>
44436
- // <Button onClick={applyFilters} auto px={0.6} scale={2 / 3}>Apply</Button>
44437
- // </th>
44438
- // )
44439
- // }
44440
- return /*#__PURE__*/React$1.createElement(Popover.Item, {
44441
- style: {
44442
- padding: '3px'
44443
- },
44444
- "data-column": Header
44445
- }, accessor === 'fixed' && /*#__PURE__*/React$1.createElement(Select
44446
- // key={filterName}
44447
- , {
44448
- name: filterName,
44449
- value: (_filterValues$filterN = filterValues[filterName]) !== null && _filterValues$filterN !== void 0 ? _filterValues$filterN : 'All',
44450
- onChange: function onChange(newValue) {
44451
- return handleFilterChange(filterName, newValue);
44452
- }
44453
- }, /*#__PURE__*/React$1.createElement(Select.Option, {
44454
- value: "All"
44455
- }, "All ", Header), options ? options.map(function (option) {
44456
- return /*#__PURE__*/React$1.createElement(Select.Option, {
44457
- value: option.value
44458
- }, option.name);
44459
- }) : null), accessor === 'date' && /*#__PURE__*/React$1.createElement(Input
44460
- // id={`filter-date-${filterName}`}
44461
- // key={filterName}
44462
- , {
44463
- htmlType: "date",
44464
- name: filterName,
44465
- value: filterValues[filterName],
44466
- onChange: function onChange(e) {
44467
- return handleFilterChange(filterName, e.target.value);
44468
- }
44469
- }), accessor === 'search' && /*#__PURE__*/React$1.createElement(Input
44470
- // id={`filter-search-${filterName}`}
44471
- // key={filterName}
44472
- , {
44473
- htmlType: "text",
44474
- autoComplete: "off"
44475
- // ref={filterRefs.current[filterName]} // Dynamically set ref}
44476
- ,
44477
- name: filterName,
44478
- style: {
44479
- height: 30,
44480
- minWidth: 160
44481
- },
44482
- value: filterValues[filterName],
44483
- onChange: function onChange(e) {
44484
- return handleFilterChange(filterName, e.target.value);
44485
- },
44486
- placeholder: "Search...",
44487
- fullWidth: true
44488
- }));
44489
- });
44490
- };
44425
+ // const handleFilterChange = (name: string, value?: any) => {
44426
+ // setFilterValues({ ...filterValues, [name]: value });
44427
+ // };
44428
+
44429
+ // const generateFilterInputs = () => {
44430
+ // return COLUMNS.map((col) => {
44431
+ // const { name: Header, filter: accessor, options } = col;
44432
+ // const filterName = String(col?.name)?.replace(' ', '_').toLowerCase();
44433
+ // // const unq_accessor = _.uniqueId(filterName);
44434
+ // // if (Header === 'actions') {
44435
+ // // return (
44436
+ // // <th style={{ margin: '3px' }} data-column={Header} key={unq_accessor}>
44437
+ // // <Button onClick={applyFilters} auto px={0.6} scale={2 / 3}>Apply</Button>
44438
+ // // </th>
44439
+ // // )
44440
+ // // }
44441
+ // return (
44442
+ // <Popover.Item style={{ padding: '3px' }} data-column={Header}>
44443
+ // {accessor === 'fixed' && (
44444
+ // <Select
44445
+ // // key={filterName}
44446
+ // name={filterName}
44447
+ // value={filterValues[filterName] ?? 'All'}
44448
+ // onChange={(newValue) => handleFilterChange(filterName, newValue)}
44449
+ // >
44450
+ // <Select.Option value="All">All {Header}</Select.Option>
44451
+ // {options ? options.map((option: any) => (
44452
+ // <Select.Option value={option.value}>{option.name}</Select.Option>
44453
+ // )) : null}
44454
+ // </Select>
44455
+ // )}
44456
+ // {accessor === 'date' && (
44457
+ // <Input
44458
+ // // id={`filter-date-${filterName}`}
44459
+ // // key={filterName}
44460
+ // htmlType="date"
44461
+ // name={filterName}
44462
+ // value={filterValues[filterName]}
44463
+ // onChange={(e) => handleFilterChange(filterName, e.target.value)}
44464
+ // />
44465
+ // )}
44466
+ // {accessor === 'search' && (
44467
+ // <Input
44468
+ // // id={`filter-search-${filterName}`}
44469
+ // // key={filterName}
44470
+ // htmlType="text"
44471
+ // autoComplete="off"
44472
+ // // ref={filterRefs.current[filterName]} // Dynamically set ref}
44473
+ // name={filterName}
44474
+ // style={{ height: 30, minWidth: 160 }}
44475
+ // value={filterValues[filterName]}
44476
+ // onChange={(e) => handleFilterChange(filterName, e.target.value)}
44477
+ // placeholder="Search..."
44478
+ // fullWidth
44479
+ // />
44480
+ // )}
44481
+ // </Popover.Item>
44482
+ // );
44483
+ // });
44484
+ // };
44485
+
44491
44486
  var content = function content() {
44492
44487
  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, cols.map(function (option, _index) {
44493
- var _String5;
44488
+ var _String4;
44494
44489
  // const colunqid = _.uniqueId(`${option.name}-${index}`);
44495
- var dataName = (_String5 = String(option.name)) === null || _String5 === void 0 ? void 0 : _String5.replace(' ', '_').toLowerCase();
44490
+ var dataName = (_String4 = String(option.name)) === null || _String4 === void 0 ? void 0 : _String4.replace(' ', '_').toLowerCase();
44496
44491
  var isSelected = !hideColumn.includes(dataName);
44497
44492
  return /*#__PURE__*/React$1.createElement(Popover.Item, {
44498
44493
  selected: isSelected
@@ -44504,15 +44499,18 @@ function DataTable(_ref) {
44504
44499
  }, /*#__PURE__*/React$1.createElement("span", null, option.name));
44505
44500
  }));
44506
44501
  };
44507
- var filterContent = function filterContent() {
44508
- return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, generateFilterInputs(), /*#__PURE__*/React$1.createElement(Popover.Item, null, /*#__PURE__*/React$1.createElement(Button, {
44509
- onClick: function onClick() {
44510
- if (onFilters) {
44511
- onFilters(filterValues);
44512
- }
44513
- }
44514
- }, "Apply")));
44515
- };
44502
+
44503
+ // const filterContent = () => (
44504
+ // <>
44505
+ // {generateFilterInputs()}
44506
+ // <Popover.Item>
44507
+ // <Button onClick={() => {
44508
+ // if (onFilters) {
44509
+ // onFilters(filterValues)
44510
+ // }
44511
+ // }}>Apply</Button></Popover.Item></>
44512
+ // )
44513
+
44516
44514
  return /*#__PURE__*/React$1.createElement(GridContainer, {
44517
44515
  className: "helpdice-ui-data-table-container",
44518
44516
  direction: "column"
@@ -44597,13 +44595,8 @@ function DataTable(_ref) {
44597
44595
  scale: 2 / 3,
44598
44596
  px: 0.6,
44599
44597
  iconRight: /*#__PURE__*/React$1.createElement(Refresh$1, null)
44600
- })) : null, onFilters && filter ? /*#__PURE__*/React$1.createElement(Popover, {
44601
- hideArrow: true,
44602
- disableItemsAutoClose: true,
44603
- placement: "bottomEnd",
44604
- child: filterContent
44605
- }, /*#__PURE__*/React$1.createElement(Tooltip, {
44606
- text: "Filters",
44598
+ })) : null, _onFilters && filter ? /*#__PURE__*/React$1.createElement(Tooltip, {
44599
+ text: "Columns",
44607
44600
  placement: "bottomEnd",
44608
44601
  font: 0.8,
44609
44602
  px: 0.6,
@@ -44616,7 +44609,7 @@ function DataTable(_ref) {
44616
44609
  scale: 2 / 3,
44617
44610
  px: 0.6,
44618
44611
  iconRight: /*#__PURE__*/React$1.createElement(Filters, null)
44619
- }))) : null, !disableViewColumn && /*#__PURE__*/React$1.createElement(Tooltip, {
44612
+ })) : null, !disableViewColumn && /*#__PURE__*/React$1.createElement(Tooltip, {
44620
44613
  text: "Columns",
44621
44614
  placement: "bottomEnd",
44622
44615
  font: 0.8,
@@ -44683,7 +44676,9 @@ function DataTable(_ref) {
44683
44676
  }
44684
44677
  },
44685
44678
  onFilters: function onFilters(filters) {
44686
- console.log(filters);
44679
+ if (_onFilters) {
44680
+ _onFilters(filters);
44681
+ }
44687
44682
  },
44688
44683
  onRow: onRowClick,
44689
44684
  rowDraggable: rowDraggable,
package/dist/table/index.js CHANGED
@@ -3180,10 +3180,6 @@ var makeColgroup = function makeColgroup(width, columns) {
3180
3180
  };
3181
3181
  var TableHead = function TableHead(props) {
3182
3182
  var theme = useTheme();
3183
- var _React$useState = React.useState({}),
3184
- _React$useState2 = _slicedToArray(_React$useState, 2),
3185
- filters = _React$useState2[0],
3186
- setFilters = _React$useState2[1];
3187
3183
  var _ref = props,
3188
3184
  columns = _ref.columns,
3189
3185
  width = _ref.width,
@@ -3199,6 +3195,10 @@ var TableHead = function TableHead(props) {
3199
3195
  if (!isScalableWidth) return /*#__PURE__*/React.createElement("colgroup", null);
3200
3196
  return makeColgroup(width, columns);
3201
3197
  }, [isScalableWidth, width]);
3198
+ var _React$useState = React.useState(),
3199
+ _React$useState2 = _slicedToArray(_React$useState, 2),
3200
+ filters = _React$useState2[0],
3201
+ setFilters = _React$useState2[1];
3202
3202
  var handleFilterChange = function handleFilterChange(name, value) {
3203
3203
  setFilters(function (prevFilters) {
3204
3204
  var updatedFilters = _objectSpread2(_objectSpread2({}, prevFilters), {}, _defineProperty({}, name, value));
@@ -31558,6 +31558,9 @@ var PopoverItem = withScale(PopoverItemComponent);
31558
31558
  Popover.Item = PopoverItem;
31559
31559
  Popover.Option = PopoverItem;
31560
31560
 
31561
+ // import Input from '../input';
31562
+ // import Select from '../select';
31563
+
31561
31564
  function DataTable(_ref) {
31562
31565
  var _ref$cols = _ref.cols,
31563
31566
  cols = _ref$cols === void 0 ? [] : _ref$cols,
@@ -31580,7 +31583,7 @@ function DataTable(_ref) {
31580
31583
  window.history.back();
31581
31584
  } : _ref$onBack,
31582
31585
  onRefresh = _ref.onRefresh,
31583
- onFilters = _ref.onFilters,
31586
+ _onFilters = _ref.onFilters,
31584
31587
  onSelectedDelete = _ref.onSelectedDelete,
31585
31588
  onSelectedEdit = _ref.onSelectedEdit,
31586
31589
  onSelected = _ref.onSelected,
@@ -31631,13 +31634,13 @@ function DataTable(_ref) {
31631
31634
  });
31632
31635
 
31633
31636
  // State for filter values
31634
- var _useState7 = React.useState(COLUMNS.reduce(function (acc, col) {
31635
- acc[col.filter] = '';
31636
- return acc;
31637
- }, {})),
31638
- _useState8 = _slicedToArray(_useState7, 2),
31639
- filterValues = _useState8[0],
31640
- setFilterValues = _useState8[1];
31637
+ // const [filterValues, setFilterValues] = useState(
31638
+ // COLUMNS.reduce((acc, col) => {
31639
+ // acc[col.filter] = '';
31640
+ // return acc;
31641
+ // }, {})
31642
+ // );
31643
+
31641
31644
  function handleShowFilter() {
31642
31645
  return setOpenFilter(!openFilter);
31643
31646
  }
@@ -31707,80 +31710,72 @@ function DataTable(_ref) {
31707
31710
  // // '& tr': { borderBottom: '1px solid #ccc !important' }
31708
31711
  // };
31709
31712
 
31710
- var handleFilterChange = function handleFilterChange(name, value) {
31711
- setFilterValues(_objectSpread2(_objectSpread2({}, filterValues), {}, _defineProperty({}, name, value)));
31712
- };
31713
- var generateFilterInputs = function generateFilterInputs() {
31714
- return COLUMNS.map(function (col) {
31715
- var _String4, _filterValues$filterN;
31716
- var Header = col.name,
31717
- accessor = col.filter,
31718
- options = col.options;
31719
- var filterName = (_String4 = String(col === null || col === void 0 ? void 0 : col.name)) === null || _String4 === void 0 ? void 0 : _String4.replace(' ', '_').toLowerCase();
31720
- // const unq_accessor = _.uniqueId(filterName);
31721
- // if (Header === 'actions') {
31722
- // return (
31723
- // <th style={{ margin: '3px' }} data-column={Header} key={unq_accessor}>
31724
- // <Button onClick={applyFilters} auto px={0.6} scale={2 / 3}>Apply</Button>
31725
- // </th>
31726
- // )
31727
- // }
31728
- return /*#__PURE__*/React.createElement(Popover.Item, {
31729
- style: {
31730
- padding: '3px'
31731
- },
31732
- "data-column": Header
31733
- }, accessor === 'fixed' && /*#__PURE__*/React.createElement(Select
31734
- // key={filterName}
31735
- , {
31736
- name: filterName,
31737
- value: (_filterValues$filterN = filterValues[filterName]) !== null && _filterValues$filterN !== void 0 ? _filterValues$filterN : 'All',
31738
- onChange: function onChange(newValue) {
31739
- return handleFilterChange(filterName, newValue);
31740
- }
31741
- }, /*#__PURE__*/React.createElement(Select.Option, {
31742
- value: "All"
31743
- }, "All ", Header), options ? options.map(function (option) {
31744
- return /*#__PURE__*/React.createElement(Select.Option, {
31745
- value: option.value
31746
- }, option.name);
31747
- }) : null), accessor === 'date' && /*#__PURE__*/React.createElement(Input
31748
- // id={`filter-date-${filterName}`}
31749
- // key={filterName}
31750
- , {
31751
- htmlType: "date",
31752
- name: filterName,
31753
- value: filterValues[filterName],
31754
- onChange: function onChange(e) {
31755
- return handleFilterChange(filterName, e.target.value);
31756
- }
31757
- }), accessor === 'search' && /*#__PURE__*/React.createElement(Input
31758
- // id={`filter-search-${filterName}`}
31759
- // key={filterName}
31760
- , {
31761
- htmlType: "text",
31762
- autoComplete: "off"
31763
- // ref={filterRefs.current[filterName]} // Dynamically set ref}
31764
- ,
31765
- name: filterName,
31766
- style: {
31767
- height: 30,
31768
- minWidth: 160
31769
- },
31770
- value: filterValues[filterName],
31771
- onChange: function onChange(e) {
31772
- return handleFilterChange(filterName, e.target.value);
31773
- },
31774
- placeholder: "Search...",
31775
- fullWidth: true
31776
- }));
31777
- });
31778
- };
31713
+ // const handleFilterChange = (name: string, value?: any) => {
31714
+ // setFilterValues({ ...filterValues, [name]: value });
31715
+ // };
31716
+
31717
+ // const generateFilterInputs = () => {
31718
+ // return COLUMNS.map((col) => {
31719
+ // const { name: Header, filter: accessor, options } = col;
31720
+ // const filterName = String(col?.name)?.replace(' ', '_').toLowerCase();
31721
+ // // const unq_accessor = _.uniqueId(filterName);
31722
+ // // if (Header === 'actions') {
31723
+ // // return (
31724
+ // // <th style={{ margin: '3px' }} data-column={Header} key={unq_accessor}>
31725
+ // // <Button onClick={applyFilters} auto px={0.6} scale={2 / 3}>Apply</Button>
31726
+ // // </th>
31727
+ // // )
31728
+ // // }
31729
+ // return (
31730
+ // <Popover.Item style={{ padding: '3px' }} data-column={Header}>
31731
+ // {accessor === 'fixed' && (
31732
+ // <Select
31733
+ // // key={filterName}
31734
+ // name={filterName}
31735
+ // value={filterValues[filterName] ?? 'All'}
31736
+ // onChange={(newValue) => handleFilterChange(filterName, newValue)}
31737
+ // >
31738
+ // <Select.Option value="All">All {Header}</Select.Option>
31739
+ // {options ? options.map((option: any) => (
31740
+ // <Select.Option value={option.value}>{option.name}</Select.Option>
31741
+ // )) : null}
31742
+ // </Select>
31743
+ // )}
31744
+ // {accessor === 'date' && (
31745
+ // <Input
31746
+ // // id={`filter-date-${filterName}`}
31747
+ // // key={filterName}
31748
+ // htmlType="date"
31749
+ // name={filterName}
31750
+ // value={filterValues[filterName]}
31751
+ // onChange={(e) => handleFilterChange(filterName, e.target.value)}
31752
+ // />
31753
+ // )}
31754
+ // {accessor === 'search' && (
31755
+ // <Input
31756
+ // // id={`filter-search-${filterName}`}
31757
+ // // key={filterName}
31758
+ // htmlType="text"
31759
+ // autoComplete="off"
31760
+ // // ref={filterRefs.current[filterName]} // Dynamically set ref}
31761
+ // name={filterName}
31762
+ // style={{ height: 30, minWidth: 160 }}
31763
+ // value={filterValues[filterName]}
31764
+ // onChange={(e) => handleFilterChange(filterName, e.target.value)}
31765
+ // placeholder="Search..."
31766
+ // fullWidth
31767
+ // />
31768
+ // )}
31769
+ // </Popover.Item>
31770
+ // );
31771
+ // });
31772
+ // };
31773
+
31779
31774
  var content = function content() {
31780
31775
  return /*#__PURE__*/React.createElement(React.Fragment, null, cols.map(function (option, _index) {
31781
- var _String5;
31776
+ var _String4;
31782
31777
  // const colunqid = _.uniqueId(`${option.name}-${index}`);
31783
- var dataName = (_String5 = String(option.name)) === null || _String5 === void 0 ? void 0 : _String5.replace(' ', '_').toLowerCase();
31778
+ var dataName = (_String4 = String(option.name)) === null || _String4 === void 0 ? void 0 : _String4.replace(' ', '_').toLowerCase();
31784
31779
  var isSelected = !hideColumn.includes(dataName);
31785
31780
  return /*#__PURE__*/React.createElement(Popover.Item, {
31786
31781
  selected: isSelected
@@ -31792,15 +31787,18 @@ function DataTable(_ref) {
31792
31787
  }, /*#__PURE__*/React.createElement("span", null, option.name));
31793
31788
  }));
31794
31789
  };
31795
- var filterContent = function filterContent() {
31796
- return /*#__PURE__*/React.createElement(React.Fragment, null, generateFilterInputs(), /*#__PURE__*/React.createElement(Popover.Item, null, /*#__PURE__*/React.createElement(Button, {
31797
- onClick: function onClick() {
31798
- if (onFilters) {
31799
- onFilters(filterValues);
31800
- }
31801
- }
31802
- }, "Apply")));
31803
- };
31790
+
31791
+ // const filterContent = () => (
31792
+ // <>
31793
+ // {generateFilterInputs()}
31794
+ // <Popover.Item>
31795
+ // <Button onClick={() => {
31796
+ // if (onFilters) {
31797
+ // onFilters(filterValues)
31798
+ // }
31799
+ // }}>Apply</Button></Popover.Item></>
31800
+ // )
31801
+
31804
31802
  return /*#__PURE__*/React.createElement(GridContainer, {
31805
31803
  className: "helpdice-ui-data-table-container",
31806
31804
  direction: "column"
@@ -31885,13 +31883,8 @@ function DataTable(_ref) {
31885
31883
  scale: 2 / 3,
31886
31884
  px: 0.6,
31887
31885
  iconRight: /*#__PURE__*/React.createElement(Refresh$1, null)
31888
- })) : null, onFilters && filter ? /*#__PURE__*/React.createElement(Popover, {
31889
- hideArrow: true,
31890
- disableItemsAutoClose: true,
31891
- placement: "bottomEnd",
31892
- child: filterContent
31893
- }, /*#__PURE__*/React.createElement(Tooltip, {
31894
- text: "Filters",
31886
+ })) : null, _onFilters && filter ? /*#__PURE__*/React.createElement(Tooltip, {
31887
+ text: "Columns",
31895
31888
  placement: "bottomEnd",
31896
31889
  font: 0.8,
31897
31890
  px: 0.6,
@@ -31904,7 +31897,7 @@ function DataTable(_ref) {
31904
31897
  scale: 2 / 3,
31905
31898
  px: 0.6,
31906
31899
  iconRight: /*#__PURE__*/React.createElement(Filters, null)
31907
- }))) : null, !disableViewColumn && /*#__PURE__*/React.createElement(Tooltip, {
31900
+ })) : null, !disableViewColumn && /*#__PURE__*/React.createElement(Tooltip, {
31908
31901
  text: "Columns",
31909
31902
  placement: "bottomEnd",
31910
31903
  font: 0.8,
@@ -31971,7 +31964,9 @@ function DataTable(_ref) {
31971
31964
  }
31972
31965
  },
31973
31966
  onFilters: function onFilters(filters) {
31974
- console.log(filters);
31967
+ if (_onFilters) {
31968
+ _onFilters(filters);
31969
+ }
31975
31970
  },
31976
31971
  onRow: onRowClick,
31977
31972
  rowDraggable: rowDraggable,
package/esm/table/data-table.js CHANGED
@@ -1,4 +1,3 @@
1
- import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
2
1
  import _extends from "@babel/runtime/helpers/esm/extends";
3
2
  import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
4
3
  import React, { memo, useEffect, useState } from 'react';
@@ -13,8 +12,9 @@ import Button from '../button';
13
12
  import Tooltip from '../tooltip';
14
13
  import Table from './table';
15
14
  import Popover from '../popover';
16
- import Input from '../input';
17
- import Select from '../select';
15
+ // import Input from '../input';
16
+ // import Select from '../select';
17
+
18
18
  function DataTable(_ref) {
19
19
  var _ref$cols = _ref.cols,
20
20
  cols = _ref$cols === void 0 ? [] : _ref$cols,
@@ -37,7 +37,7 @@ function DataTable(_ref) {
37
37
  window.history.back();
38
38
  } : _ref$onBack,
39
39
  onRefresh = _ref.onRefresh,
40
- onFilters = _ref.onFilters,
40
+ _onFilters = _ref.onFilters,
41
41
  onSelectedDelete = _ref.onSelectedDelete,
42
42
  onSelectedEdit = _ref.onSelectedEdit,
43
43
  onSelected = _ref.onSelected,
@@ -88,13 +88,13 @@ function DataTable(_ref) {
88
88
  });
89
89
 
90
90
  // State for filter values
91
- var _useState7 = useState(COLUMNS.reduce(function (acc, col) {
92
- acc[col.filter] = '';
93
- return acc;
94
- }, {})),
95
- _useState8 = _slicedToArray(_useState7, 2),
96
- filterValues = _useState8[0],
97
- setFilterValues = _useState8[1];
91
+ // const [filterValues, setFilterValues] = useState(
92
+ // COLUMNS.reduce((acc, col) => {
93
+ // acc[col.filter] = '';
94
+ // return acc;
95
+ // }, {})
96
+ // );
97
+
98
98
  function handleShowFilter() {
99
99
  return setOpenFilter(!openFilter);
100
100
  }
@@ -164,80 +164,72 @@ function DataTable(_ref) {
164
164
  // // '& tr': { borderBottom: '1px solid #ccc !important' }
165
165
  // };
166
166
 
167
- var handleFilterChange = function handleFilterChange(name, value) {
168
- setFilterValues(_extends({}, filterValues, _defineProperty({}, name, value)));
169
- };
170
- var generateFilterInputs = function generateFilterInputs() {
171
- return COLUMNS.map(function (col) {
172
- var _String4, _filterValues$filterN;
173
- var Header = col.name,
174
- accessor = col.filter,
175
- options = col.options;
176
- var filterName = (_String4 = String(col === null || col === void 0 ? void 0 : col.name)) === null || _String4 === void 0 ? void 0 : _String4.replace(' ', '_').toLowerCase();
177
- // const unq_accessor = _.uniqueId(filterName);
178
- // if (Header === 'actions') {
179
- // return (
180
- // <th style={{ margin: '3px' }} data-column={Header} key={unq_accessor}>
181
- // <Button onClick={applyFilters} auto px={0.6} scale={2 / 3}>Apply</Button>
182
- // </th>
183
- // )
184
- // }
185
- return /*#__PURE__*/React.createElement(Popover.Item, {
186
- style: {
187
- padding: '3px'
188
- },
189
- "data-column": Header
190
- }, accessor === 'fixed' && /*#__PURE__*/React.createElement(Select
191
- // key={filterName}
192
- , {
193
- name: filterName,
194
- value: (_filterValues$filterN = filterValues[filterName]) !== null && _filterValues$filterN !== void 0 ? _filterValues$filterN : 'All',
195
- onChange: function onChange(newValue) {
196
- return handleFilterChange(filterName, newValue);
197
- }
198
- }, /*#__PURE__*/React.createElement(Select.Option, {
199
- value: "All"
200
- }, "All ", Header), options ? options.map(function (option) {
201
- return /*#__PURE__*/React.createElement(Select.Option, {
202
- value: option.value
203
- }, option.name);
204
- }) : null), accessor === 'date' && /*#__PURE__*/React.createElement(Input
205
- // id={`filter-date-${filterName}`}
206
- // key={filterName}
207
- , {
208
- htmlType: "date",
209
- name: filterName,
210
- value: filterValues[filterName],
211
- onChange: function onChange(e) {
212
- return handleFilterChange(filterName, e.target.value);
213
- }
214
- }), accessor === 'search' && /*#__PURE__*/React.createElement(Input
215
- // id={`filter-search-${filterName}`}
216
- // key={filterName}
217
- , {
218
- htmlType: "text",
219
- autoComplete: "off"
220
- // ref={filterRefs.current[filterName]} // Dynamically set ref}
221
- ,
222
- name: filterName,
223
- style: {
224
- height: 30,
225
- minWidth: 160
226
- },
227
- value: filterValues[filterName],
228
- onChange: function onChange(e) {
229
- return handleFilterChange(filterName, e.target.value);
230
- },
231
- placeholder: "Search...",
232
- fullWidth: true
233
- }));
234
- });
235
- };
167
+ // const handleFilterChange = (name: string, value?: any) => {
168
+ // setFilterValues({ ...filterValues, [name]: value });
169
+ // };
170
+
171
+ // const generateFilterInputs = () => {
172
+ // return COLUMNS.map((col) => {
173
+ // const { name: Header, filter: accessor, options } = col;
174
+ // const filterName = String(col?.name)?.replace(' ', '_').toLowerCase();
175
+ // // const unq_accessor = _.uniqueId(filterName);
176
+ // // if (Header === 'actions') {
177
+ // // return (
178
+ // // <th style={{ margin: '3px' }} data-column={Header} key={unq_accessor}>
179
+ // // <Button onClick={applyFilters} auto px={0.6} scale={2 / 3}>Apply</Button>
180
+ // // </th>
181
+ // // )
182
+ // // }
183
+ // return (
184
+ // <Popover.Item style={{ padding: '3px' }} data-column={Header}>
185
+ // {accessor === 'fixed' && (
186
+ // <Select
187
+ // // key={filterName}
188
+ // name={filterName}
189
+ // value={filterValues[filterName] ?? 'All'}
190
+ // onChange={(newValue) => handleFilterChange(filterName, newValue)}
191
+ // >
192
+ // <Select.Option value="All">All {Header}</Select.Option>
193
+ // {options ? options.map((option: any) => (
194
+ // <Select.Option value={option.value}>{option.name}</Select.Option>
195
+ // )) : null}
196
+ // </Select>
197
+ // )}
198
+ // {accessor === 'date' && (
199
+ // <Input
200
+ // // id={`filter-date-${filterName}`}
201
+ // // key={filterName}
202
+ // htmlType="date"
203
+ // name={filterName}
204
+ // value={filterValues[filterName]}
205
+ // onChange={(e) => handleFilterChange(filterName, e.target.value)}
206
+ // />
207
+ // )}
208
+ // {accessor === 'search' && (
209
+ // <Input
210
+ // // id={`filter-search-${filterName}`}
211
+ // // key={filterName}
212
+ // htmlType="text"
213
+ // autoComplete="off"
214
+ // // ref={filterRefs.current[filterName]} // Dynamically set ref}
215
+ // name={filterName}
216
+ // style={{ height: 30, minWidth: 160 }}
217
+ // value={filterValues[filterName]}
218
+ // onChange={(e) => handleFilterChange(filterName, e.target.value)}
219
+ // placeholder="Search..."
220
+ // fullWidth
221
+ // />
222
+ // )}
223
+ // </Popover.Item>
224
+ // );
225
+ // });
226
+ // };
227
+
236
228
  var content = function content() {
237
229
  return /*#__PURE__*/React.createElement(React.Fragment, null, cols.map(function (option, _index) {
238
- var _String5;
230
+ var _String4;
239
231
  // const colunqid = _.uniqueId(`${option.name}-${index}`);
240
- var dataName = (_String5 = String(option.name)) === null || _String5 === void 0 ? void 0 : _String5.replace(' ', '_').toLowerCase();
232
+ var dataName = (_String4 = String(option.name)) === null || _String4 === void 0 ? void 0 : _String4.replace(' ', '_').toLowerCase();
241
233
  var isSelected = !hideColumn.includes(dataName);
242
234
  return /*#__PURE__*/React.createElement(Popover.Item, {
243
235
  selected: isSelected
@@ -249,15 +241,18 @@ function DataTable(_ref) {
249
241
  }, /*#__PURE__*/React.createElement("span", null, option.name));
250
242
  }));
251
243
  };
252
- var filterContent = function filterContent() {
253
- return /*#__PURE__*/React.createElement(React.Fragment, null, generateFilterInputs(), /*#__PURE__*/React.createElement(Popover.Item, null, /*#__PURE__*/React.createElement(Button, {
254
- onClick: function onClick() {
255
- if (onFilters) {
256
- onFilters(filterValues);
257
- }
258
- }
259
- }, "Apply")));
260
- };
244
+
245
+ // const filterContent = () => (
246
+ // <>
247
+ // {generateFilterInputs()}
248
+ // <Popover.Item>
249
+ // <Button onClick={() => {
250
+ // if (onFilters) {
251
+ // onFilters(filterValues)
252
+ // }
253
+ // }}>Apply</Button></Popover.Item></>
254
+ // )
255
+
261
256
  return /*#__PURE__*/React.createElement(Container, {
262
257
  className: "helpdice-ui-data-table-container",
263
258
  direction: "column"
@@ -342,13 +337,8 @@ function DataTable(_ref) {
342
337
  scale: 2 / 3,
343
338
  px: 0.6,
344
339
  iconRight: /*#__PURE__*/React.createElement(Refresh, null)
345
- })) : null, onFilters && filter ? /*#__PURE__*/React.createElement(Popover, {
346
- hideArrow: true,
347
- disableItemsAutoClose: true,
348
- placement: "bottomEnd",
349
- child: filterContent
350
- }, /*#__PURE__*/React.createElement(Tooltip, {
351
- text: "Filters",
340
+ })) : null, _onFilters && filter ? /*#__PURE__*/React.createElement(Tooltip, {
341
+ text: "Columns",
352
342
  placement: "bottomEnd",
353
343
  font: 0.8,
354
344
  px: 0.6,
@@ -361,7 +351,7 @@ function DataTable(_ref) {
361
351
  scale: 2 / 3,
362
352
  px: 0.6,
363
353
  iconRight: /*#__PURE__*/React.createElement(Filters, null)
364
- }))) : null, !disableViewColumn && /*#__PURE__*/React.createElement(Tooltip, {
354
+ })) : null, !disableViewColumn && /*#__PURE__*/React.createElement(Tooltip, {
365
355
  text: "Columns",
366
356
  placement: "bottomEnd",
367
357
  font: 0.8,
@@ -428,7 +418,9 @@ function DataTable(_ref) {
428
418
  }
429
419
  },
430
420
  onFilters: function onFilters(filters) {
431
- console.log(filters);
421
+ if (_onFilters) {
422
+ _onFilters(filters);
423
+ }
432
424
  },
433
425
  onRow: onRowClick,
434
426
  rowDraggable: rowDraggable,
package/esm/table/table-head.js CHANGED
@@ -25,10 +25,6 @@ var makeColgroup = function makeColgroup(width, columns) {
25
25
  };
26
26
  var TableHead = function TableHead(props) {
27
27
  var theme = useTheme();
28
- var _React$useState = React.useState({}),
29
- _React$useState2 = _slicedToArray(_React$useState, 2),
30
- filters = _React$useState2[0],
31
- setFilters = _React$useState2[1];
32
28
  var _ref = props,
33
29
  columns = _ref.columns,
34
30
  width = _ref.width,
@@ -44,6 +40,10 @@ var TableHead = function TableHead(props) {
44
40
  if (!isScalableWidth) return /*#__PURE__*/React.createElement("colgroup", null);
45
41
  return makeColgroup(width, columns);
46
42
  }, [isScalableWidth, width]);
43
+ var _React$useState = React.useState(),
44
+ _React$useState2 = _slicedToArray(_React$useState, 2),
45
+ filters = _React$useState2[0],
46
+ setFilters = _React$useState2[1];
47
47
  var handleFilterChange = function handleFilterChange(name, value) {
48
48
  setFilters(function (prevFilters) {
49
49
  var updatedFilters = _extends({}, prevFilters, _defineProperty({}, name, value));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@helpdice/ui",
3
- "version": "1.5.8",
3
+ "version": "1.5.9",
4
4
  "main": "dist/index.js",
5
5
  "types": "esm/index.d.ts",
6
6
  "unpkg": "dist/index.min.js",