@helpdice/ui 1.5.8 → 1.6.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 (5) hide show
  1. package/dist/index.js +101 -101
  2. package/dist/table/index.js +101 -101
  3. package/esm/table/data-table.js +92 -100
  4. package/esm/table/table-head.js +9 -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,15 @@ 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(columns.reduce(function (acc, col) {
26337
+ if (col.filter) {
26338
+ acc["".concat(col.filter)] = col.filter === 'date' ? null : '';
26339
+ }
26340
+ return acc;
26341
+ }, {})),
26342
+ _React$useState2 = _slicedToArray(_React$useState, 2),
26343
+ filters = _React$useState2[0],
26344
+ setFilters = _React$useState2[1];
26340
26345
  var handleFilterChange = function handleFilterChange(name, value) {
26341
26346
  setFilters(function (prevFilters) {
26342
26347
  var updatedFilters = _objectSpread2(_objectSpread2({}, prevFilters), {}, _defineProperty$1({}, name, value));
@@ -44270,6 +44275,9 @@ function Placeholder(_ref) {
44270
44275
  }, msg));
44271
44276
  }
44272
44277
 
44278
+ // import Input from '../input';
44279
+ // import Select from '../select';
44280
+
44273
44281
  function DataTable(_ref) {
44274
44282
  var _ref$cols = _ref.cols,
44275
44283
  cols = _ref$cols === void 0 ? [] : _ref$cols,
@@ -44292,7 +44300,7 @@ function DataTable(_ref) {
44292
44300
  window.history.back();
44293
44301
  } : _ref$onBack,
44294
44302
  onRefresh = _ref.onRefresh,
44295
- onFilters = _ref.onFilters,
44303
+ _onFilters = _ref.onFilters,
44296
44304
  onSelectedDelete = _ref.onSelectedDelete,
44297
44305
  onSelectedEdit = _ref.onSelectedEdit,
44298
44306
  onSelected = _ref.onSelected,
@@ -44343,13 +44351,13 @@ function DataTable(_ref) {
44343
44351
  });
44344
44352
 
44345
44353
  // 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];
44354
+ // const [filterValues, setFilterValues] = useState(
44355
+ // COLUMNS.reduce((acc, col) => {
44356
+ // acc[col.filter] = '';
44357
+ // return acc;
44358
+ // }, {})
44359
+ // );
44360
+
44353
44361
  function handleShowFilter() {
44354
44362
  return setOpenFilter(!openFilter);
44355
44363
  }
@@ -44419,80 +44427,72 @@ function DataTable(_ref) {
44419
44427
  // // '& tr': { borderBottom: '1px solid #ccc !important' }
44420
44428
  // };
44421
44429
 
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
- };
44430
+ // const handleFilterChange = (name: string, value?: any) => {
44431
+ // setFilterValues({ ...filterValues, [name]: value });
44432
+ // };
44433
+
44434
+ // const generateFilterInputs = () => {
44435
+ // return COLUMNS.map((col) => {
44436
+ // const { name: Header, filter: accessor, options } = col;
44437
+ // const filterName = String(col?.name)?.replace(' ', '_').toLowerCase();
44438
+ // // const unq_accessor = _.uniqueId(filterName);
44439
+ // // if (Header === 'actions') {
44440
+ // // return (
44441
+ // // <th style={{ margin: '3px' }} data-column={Header} key={unq_accessor}>
44442
+ // // <Button onClick={applyFilters} auto px={0.6} scale={2 / 3}>Apply</Button>
44443
+ // // </th>
44444
+ // // )
44445
+ // // }
44446
+ // return (
44447
+ // <Popover.Item style={{ padding: '3px' }} data-column={Header}>
44448
+ // {accessor === 'fixed' && (
44449
+ // <Select
44450
+ // // key={filterName}
44451
+ // name={filterName}
44452
+ // value={filterValues[filterName] ?? 'All'}
44453
+ // onChange={(newValue) => handleFilterChange(filterName, newValue)}
44454
+ // >
44455
+ // <Select.Option value="All">All {Header}</Select.Option>
44456
+ // {options ? options.map((option: any) => (
44457
+ // <Select.Option value={option.value}>{option.name}</Select.Option>
44458
+ // )) : null}
44459
+ // </Select>
44460
+ // )}
44461
+ // {accessor === 'date' && (
44462
+ // <Input
44463
+ // // id={`filter-date-${filterName}`}
44464
+ // // key={filterName}
44465
+ // htmlType="date"
44466
+ // name={filterName}
44467
+ // value={filterValues[filterName]}
44468
+ // onChange={(e) => handleFilterChange(filterName, e.target.value)}
44469
+ // />
44470
+ // )}
44471
+ // {accessor === 'search' && (
44472
+ // <Input
44473
+ // // id={`filter-search-${filterName}`}
44474
+ // // key={filterName}
44475
+ // htmlType="text"
44476
+ // autoComplete="off"
44477
+ // // ref={filterRefs.current[filterName]} // Dynamically set ref}
44478
+ // name={filterName}
44479
+ // style={{ height: 30, minWidth: 160 }}
44480
+ // value={filterValues[filterName]}
44481
+ // onChange={(e) => handleFilterChange(filterName, e.target.value)}
44482
+ // placeholder="Search..."
44483
+ // fullWidth
44484
+ // />
44485
+ // )}
44486
+ // </Popover.Item>
44487
+ // );
44488
+ // });
44489
+ // };
44490
+
44491
44491
  var content = function content() {
44492
44492
  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, cols.map(function (option, _index) {
44493
- var _String5;
44493
+ var _String4;
44494
44494
  // const colunqid = _.uniqueId(`${option.name}-${index}`);
44495
- var dataName = (_String5 = String(option.name)) === null || _String5 === void 0 ? void 0 : _String5.replace(' ', '_').toLowerCase();
44495
+ var dataName = (_String4 = String(option.name)) === null || _String4 === void 0 ? void 0 : _String4.replace(' ', '_').toLowerCase();
44496
44496
  var isSelected = !hideColumn.includes(dataName);
44497
44497
  return /*#__PURE__*/React$1.createElement(Popover.Item, {
44498
44498
  selected: isSelected
@@ -44504,15 +44504,18 @@ function DataTable(_ref) {
44504
44504
  }, /*#__PURE__*/React$1.createElement("span", null, option.name));
44505
44505
  }));
44506
44506
  };
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
- };
44507
+
44508
+ // const filterContent = () => (
44509
+ // <>
44510
+ // {generateFilterInputs()}
44511
+ // <Popover.Item>
44512
+ // <Button onClick={() => {
44513
+ // if (onFilters) {
44514
+ // onFilters(filterValues)
44515
+ // }
44516
+ // }}>Apply</Button></Popover.Item></>
44517
+ // )
44518
+
44516
44519
  return /*#__PURE__*/React$1.createElement(GridContainer, {
44517
44520
  className: "helpdice-ui-data-table-container",
44518
44521
  direction: "column"
@@ -44597,13 +44600,8 @@ function DataTable(_ref) {
44597
44600
  scale: 2 / 3,
44598
44601
  px: 0.6,
44599
44602
  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",
44603
+ })) : null, _onFilters && filter ? /*#__PURE__*/React$1.createElement(Tooltip, {
44604
+ text: "Columns",
44607
44605
  placement: "bottomEnd",
44608
44606
  font: 0.8,
44609
44607
  px: 0.6,
@@ -44616,7 +44614,7 @@ function DataTable(_ref) {
44616
44614
  scale: 2 / 3,
44617
44615
  px: 0.6,
44618
44616
  iconRight: /*#__PURE__*/React$1.createElement(Filters, null)
44619
- }))) : null, !disableViewColumn && /*#__PURE__*/React$1.createElement(Tooltip, {
44617
+ })) : null, !disableViewColumn && /*#__PURE__*/React$1.createElement(Tooltip, {
44620
44618
  text: "Columns",
44621
44619
  placement: "bottomEnd",
44622
44620
  font: 0.8,
@@ -44683,7 +44681,9 @@ function DataTable(_ref) {
44683
44681
  }
44684
44682
  },
44685
44683
  onFilters: function onFilters(filters) {
44686
- console.log(filters);
44684
+ if (_onFilters) {
44685
+ _onFilters(filters);
44686
+ }
44687
44687
  },
44688
44688
  onRow: onRowClick,
44689
44689
  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,15 @@ 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(columns.reduce(function (acc, col) {
3199
+ if (col.filter) {
3200
+ acc["".concat(col.filter)] = col.filter === 'date' ? null : '';
3201
+ }
3202
+ return acc;
3203
+ }, {})),
3204
+ _React$useState2 = _slicedToArray(_React$useState, 2),
3205
+ filters = _React$useState2[0],
3206
+ setFilters = _React$useState2[1];
3202
3207
  var handleFilterChange = function handleFilterChange(name, value) {
3203
3208
  setFilters(function (prevFilters) {
3204
3209
  var updatedFilters = _objectSpread2(_objectSpread2({}, prevFilters), {}, _defineProperty({}, name, value));
@@ -31558,6 +31563,9 @@ var PopoverItem = withScale(PopoverItemComponent);
31558
31563
  Popover.Item = PopoverItem;
31559
31564
  Popover.Option = PopoverItem;
31560
31565
 
31566
+ // import Input from '../input';
31567
+ // import Select from '../select';
31568
+
31561
31569
  function DataTable(_ref) {
31562
31570
  var _ref$cols = _ref.cols,
31563
31571
  cols = _ref$cols === void 0 ? [] : _ref$cols,
@@ -31580,7 +31588,7 @@ function DataTable(_ref) {
31580
31588
  window.history.back();
31581
31589
  } : _ref$onBack,
31582
31590
  onRefresh = _ref.onRefresh,
31583
- onFilters = _ref.onFilters,
31591
+ _onFilters = _ref.onFilters,
31584
31592
  onSelectedDelete = _ref.onSelectedDelete,
31585
31593
  onSelectedEdit = _ref.onSelectedEdit,
31586
31594
  onSelected = _ref.onSelected,
@@ -31631,13 +31639,13 @@ function DataTable(_ref) {
31631
31639
  });
31632
31640
 
31633
31641
  // 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];
31642
+ // const [filterValues, setFilterValues] = useState(
31643
+ // COLUMNS.reduce((acc, col) => {
31644
+ // acc[col.filter] = '';
31645
+ // return acc;
31646
+ // }, {})
31647
+ // );
31648
+
31641
31649
  function handleShowFilter() {
31642
31650
  return setOpenFilter(!openFilter);
31643
31651
  }
@@ -31707,80 +31715,72 @@ function DataTable(_ref) {
31707
31715
  // // '& tr': { borderBottom: '1px solid #ccc !important' }
31708
31716
  // };
31709
31717
 
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
- };
31718
+ // const handleFilterChange = (name: string, value?: any) => {
31719
+ // setFilterValues({ ...filterValues, [name]: value });
31720
+ // };
31721
+
31722
+ // const generateFilterInputs = () => {
31723
+ // return COLUMNS.map((col) => {
31724
+ // const { name: Header, filter: accessor, options } = col;
31725
+ // const filterName = String(col?.name)?.replace(' ', '_').toLowerCase();
31726
+ // // const unq_accessor = _.uniqueId(filterName);
31727
+ // // if (Header === 'actions') {
31728
+ // // return (
31729
+ // // <th style={{ margin: '3px' }} data-column={Header} key={unq_accessor}>
31730
+ // // <Button onClick={applyFilters} auto px={0.6} scale={2 / 3}>Apply</Button>
31731
+ // // </th>
31732
+ // // )
31733
+ // // }
31734
+ // return (
31735
+ // <Popover.Item style={{ padding: '3px' }} data-column={Header}>
31736
+ // {accessor === 'fixed' && (
31737
+ // <Select
31738
+ // // key={filterName}
31739
+ // name={filterName}
31740
+ // value={filterValues[filterName] ?? 'All'}
31741
+ // onChange={(newValue) => handleFilterChange(filterName, newValue)}
31742
+ // >
31743
+ // <Select.Option value="All">All {Header}</Select.Option>
31744
+ // {options ? options.map((option: any) => (
31745
+ // <Select.Option value={option.value}>{option.name}</Select.Option>
31746
+ // )) : null}
31747
+ // </Select>
31748
+ // )}
31749
+ // {accessor === 'date' && (
31750
+ // <Input
31751
+ // // id={`filter-date-${filterName}`}
31752
+ // // key={filterName}
31753
+ // htmlType="date"
31754
+ // name={filterName}
31755
+ // value={filterValues[filterName]}
31756
+ // onChange={(e) => handleFilterChange(filterName, e.target.value)}
31757
+ // />
31758
+ // )}
31759
+ // {accessor === 'search' && (
31760
+ // <Input
31761
+ // // id={`filter-search-${filterName}`}
31762
+ // // key={filterName}
31763
+ // htmlType="text"
31764
+ // autoComplete="off"
31765
+ // // ref={filterRefs.current[filterName]} // Dynamically set ref}
31766
+ // name={filterName}
31767
+ // style={{ height: 30, minWidth: 160 }}
31768
+ // value={filterValues[filterName]}
31769
+ // onChange={(e) => handleFilterChange(filterName, e.target.value)}
31770
+ // placeholder="Search..."
31771
+ // fullWidth
31772
+ // />
31773
+ // )}
31774
+ // </Popover.Item>
31775
+ // );
31776
+ // });
31777
+ // };
31778
+
31779
31779
  var content = function content() {
31780
31780
  return /*#__PURE__*/React.createElement(React.Fragment, null, cols.map(function (option, _index) {
31781
- var _String5;
31781
+ var _String4;
31782
31782
  // const colunqid = _.uniqueId(`${option.name}-${index}`);
31783
- var dataName = (_String5 = String(option.name)) === null || _String5 === void 0 ? void 0 : _String5.replace(' ', '_').toLowerCase();
31783
+ var dataName = (_String4 = String(option.name)) === null || _String4 === void 0 ? void 0 : _String4.replace(' ', '_').toLowerCase();
31784
31784
  var isSelected = !hideColumn.includes(dataName);
31785
31785
  return /*#__PURE__*/React.createElement(Popover.Item, {
31786
31786
  selected: isSelected
@@ -31792,15 +31792,18 @@ function DataTable(_ref) {
31792
31792
  }, /*#__PURE__*/React.createElement("span", null, option.name));
31793
31793
  }));
31794
31794
  };
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
- };
31795
+
31796
+ // const filterContent = () => (
31797
+ // <>
31798
+ // {generateFilterInputs()}
31799
+ // <Popover.Item>
31800
+ // <Button onClick={() => {
31801
+ // if (onFilters) {
31802
+ // onFilters(filterValues)
31803
+ // }
31804
+ // }}>Apply</Button></Popover.Item></>
31805
+ // )
31806
+
31804
31807
  return /*#__PURE__*/React.createElement(GridContainer, {
31805
31808
  className: "helpdice-ui-data-table-container",
31806
31809
  direction: "column"
@@ -31885,13 +31888,8 @@ function DataTable(_ref) {
31885
31888
  scale: 2 / 3,
31886
31889
  px: 0.6,
31887
31890
  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",
31891
+ })) : null, _onFilters && filter ? /*#__PURE__*/React.createElement(Tooltip, {
31892
+ text: "Columns",
31895
31893
  placement: "bottomEnd",
31896
31894
  font: 0.8,
31897
31895
  px: 0.6,
@@ -31904,7 +31902,7 @@ function DataTable(_ref) {
31904
31902
  scale: 2 / 3,
31905
31903
  px: 0.6,
31906
31904
  iconRight: /*#__PURE__*/React.createElement(Filters, null)
31907
- }))) : null, !disableViewColumn && /*#__PURE__*/React.createElement(Tooltip, {
31905
+ })) : null, !disableViewColumn && /*#__PURE__*/React.createElement(Tooltip, {
31908
31906
  text: "Columns",
31909
31907
  placement: "bottomEnd",
31910
31908
  font: 0.8,
@@ -31971,7 +31969,9 @@ function DataTable(_ref) {
31971
31969
  }
31972
31970
  },
31973
31971
  onFilters: function onFilters(filters) {
31974
- console.log(filters);
31972
+ if (_onFilters) {
31973
+ _onFilters(filters);
31974
+ }
31975
31975
  },
31976
31976
  onRow: onRowClick,
31977
31977
  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,15 @@ 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(columns.reduce(function (acc, col) {
44
+ if (col.filter) {
45
+ acc["".concat(col.filter)] = col.filter === 'date' ? null : '';
46
+ }
47
+ return acc;
48
+ }, {})),
49
+ _React$useState2 = _slicedToArray(_React$useState, 2),
50
+ filters = _React$useState2[0],
51
+ setFilters = _React$useState2[1];
47
52
  var handleFilterChange = function handleFilterChange(name, value) {
48
53
  setFilters(function (prevFilters) {
49
54
  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.6.0",
4
4
  "main": "dist/index.js",
5
5
  "types": "esm/index.d.ts",
6
6
  "unpkg": "dist/index.min.js",