freemium-ui 1.0.121 → 1.0.125
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/lib/index.cjs.js +36 -29
- package/lib/index.esm.js +37 -30
- package/package.json +1 -1
package/lib/index.cjs.js
CHANGED
|
@@ -16826,7 +16826,7 @@ const DropdownButton = (props) => {
|
|
|
16826
16826
|
onClick: (event) => {
|
|
16827
16827
|
event.stopPropagation();
|
|
16828
16828
|
},
|
|
16829
|
-
}), { isOpen: isOpen, isErrored: isErrored, overrideStyles: overrideStyles, innerRef: (containerEl) => (inputEl = containerEl), onFocus: () => inputEl && inputEl.classList.add('focused'), onBlur: () => inputEl && inputEl.classList.remove('focused'), disabled: disabled }), children ? (children({
|
|
16829
|
+
}), { isOpen: isOpen, isErrored: isErrored, className: "dropdown-button", overrideStyles: overrideStyles, innerRef: (containerEl) => (inputEl = containerEl), onFocus: () => inputEl && inputEl.classList.add('focused'), onBlur: () => inputEl && inputEl.classList.remove('focused'), disabled: disabled }), children ? (children({
|
|
16830
16830
|
label: buttonLabel,
|
|
16831
16831
|
getToggleButtonProps,
|
|
16832
16832
|
isOpen,
|
|
@@ -18195,43 +18195,49 @@ var BoxedRadioGroup$1 = withDefaults(BoxedRadioGroup, defaultProps$6);
|
|
|
18195
18195
|
BoxedRadio$1.Group = BoxedRadioGroup$1;
|
|
18196
18196
|
|
|
18197
18197
|
const Table = (props) => {
|
|
18198
|
-
const { columns = [], data = [], count = 0, offset = 0, limit = 0, next = false, previous = false, showPagination = true, showSelectAllInTable = false, showActions = true, showFilters = true, showOptions = true, rowMenuOptions = [], onRowSelect, onRowClick, onPrevious, onSelectAll, onNext, onMenuOptionSelect, headerComponent, filterComponent, } = props;
|
|
18198
|
+
const { columns = [], data = [], count = 0, offset = 0, limit = 0, next = false, previous = false, selectedRows = {}, showPagination = true, showSelectAllInTable = false, showActions = true, showSelections = true, showFilters = true, showOptions = true, rowMenuOptions = [], onRowSelect, onRowClick, onPrevious, onSelectAll, onNext, onMenuOptionSelect, headerComponent, filterComponent, } = props;
|
|
18199
18199
|
const [showFilterPane, toggleFilterPane] = React__default.useState(showFilters);
|
|
18200
18200
|
const [anchorEl, setAnchorEl] = React__default.useState(null);
|
|
18201
18201
|
const tableInstance = reactTable.useTable({
|
|
18202
18202
|
columns,
|
|
18203
18203
|
data,
|
|
18204
|
+
initialState: {
|
|
18205
|
+
selectedRowIds: selectedRows,
|
|
18206
|
+
},
|
|
18204
18207
|
}, reactTable.useRowSelect, (hooks) => {
|
|
18205
|
-
hooks.visibleColumns.push((c) =>
|
|
18206
|
-
|
|
18207
|
-
|
|
18208
|
-
|
|
18209
|
-
|
|
18210
|
-
|
|
18211
|
-
|
|
18212
|
-
React__default.createElement(
|
|
18213
|
-
|
|
18214
|
-
onSelectAll
|
|
18215
|
-
|
|
18216
|
-
|
|
18217
|
-
|
|
18218
|
-
|
|
18219
|
-
|
|
18220
|
-
|
|
18221
|
-
React__default.createElement(
|
|
18222
|
-
|
|
18223
|
-
|
|
18224
|
-
|
|
18225
|
-
|
|
18208
|
+
hooks.visibleColumns.push((c) => showSelections
|
|
18209
|
+
? [
|
|
18210
|
+
{
|
|
18211
|
+
id: 'selection',
|
|
18212
|
+
disableResizing: true,
|
|
18213
|
+
width: 50,
|
|
18214
|
+
Header: ({ getToggleAllRowsSelectedProps, toggleAllRowsSelected, }) => {
|
|
18215
|
+
return showSelectAllInTable ? (React__default.createElement("div", { className: "table-checkbox" },
|
|
18216
|
+
React__default.createElement(Checkbox, Object.assign({ id: "selectAll", name: "selectAll" }, getToggleAllRowsSelectedProps(), { onChange: (e, v) => {
|
|
18217
|
+
if (onSelectAll)
|
|
18218
|
+
onSelectAll(v);
|
|
18219
|
+
toggleAllRowsSelected(v);
|
|
18220
|
+
} })))) : (React__default.createElement("div", null));
|
|
18221
|
+
},
|
|
18222
|
+
Cell: (cellprop) => {
|
|
18223
|
+
const { row, column } = cellprop;
|
|
18224
|
+
return (React__default.createElement("div", { className: "table-checkbox" },
|
|
18225
|
+
React__default.createElement(Checkbox, Object.assign({ id: "selectRow", name: "selectRow" }, row.getToggleRowSelectedProps(), { onChange: (e, v) => {
|
|
18226
|
+
row.toggleRowSelected(v);
|
|
18227
|
+
} }))));
|
|
18228
|
+
},
|
|
18226
18229
|
},
|
|
18227
|
-
|
|
18228
|
-
|
|
18229
|
-
|
|
18230
|
+
...c,
|
|
18231
|
+
]
|
|
18232
|
+
: [...c]);
|
|
18230
18233
|
});
|
|
18231
|
-
const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, getToggleAllRowsSelectedProps, } = tableInstance;
|
|
18234
|
+
const { getTableProps, getTableBodyProps, headerGroups, rows, state: { selectedRowIds }, prepareRow, getToggleAllRowsSelectedProps, } = tableInstance;
|
|
18235
|
+
reactTable.useMountedLayoutEffect(() => {
|
|
18236
|
+
onRowSelect && onRowSelect(selectedRowIds);
|
|
18237
|
+
}, [onRowSelect, selectedRowIds]);
|
|
18232
18238
|
return (React__default.createElement(TableContainer, { className: "fui-table" },
|
|
18233
18239
|
showActions && (React__default.createElement(TableActions, { className: "table-actions" },
|
|
18234
|
-
React__default.createElement("div", { className: "action" }, !showSelectAllInTable && (React__default.createElement(Checkbox, Object.assign({ id: "selectAll", name: "selectAll" }, getToggleAllRowsSelectedProps()), "Select All"))),
|
|
18240
|
+
React__default.createElement("div", { className: "action" }, !showSelectAllInTable && showSelections && (React__default.createElement(Checkbox, Object.assign({ id: "selectAll", name: "selectAll" }, getToggleAllRowsSelectedProps()), "Select All"))),
|
|
18235
18241
|
headerComponent ? headerComponent : undefined,
|
|
18236
18242
|
React__default.createElement("div", { className: "pagination-actions" },
|
|
18237
18243
|
showPagination && (React__default.createElement(React__default.Fragment, null,
|
|
@@ -18299,7 +18305,8 @@ const TableContainer = Ye.div `
|
|
|
18299
18305
|
const TableWrapper = Ye.div `
|
|
18300
18306
|
padding: 10px;
|
|
18301
18307
|
flex: 1;
|
|
18302
|
-
|
|
18308
|
+
transition: all 0.3s;
|
|
18309
|
+
margin-right: ${({ showFilters }) => (showFilters ? '310px' : '0px')};
|
|
18303
18310
|
`;
|
|
18304
18311
|
const TableActions = Ye.div `
|
|
18305
18312
|
padding: 0 16px;
|
package/lib/index.esm.js
CHANGED
|
@@ -8,7 +8,7 @@ import 'react-dates/initialize';
|
|
|
8
8
|
import { DayPickerSingleDateController } from 'react-dates';
|
|
9
9
|
import { END_DATE, START_DATE } from 'react-dates/constants';
|
|
10
10
|
import { Tooltip as Tooltip$1 } from 'react-tippy';
|
|
11
|
-
import { useTable, useRowSelect, useColumnOrder, useBlockLayout, useResizeColumns, useSortBy, usePagination } from 'react-table';
|
|
11
|
+
import { useTable, useRowSelect, useMountedLayoutEffect, useColumnOrder, useBlockLayout, useResizeColumns, useSortBy, usePagination } from 'react-table';
|
|
12
12
|
|
|
13
13
|
function stylis_min (W) {
|
|
14
14
|
function M(d, c, e, h, a) {
|
|
@@ -16817,7 +16817,7 @@ const DropdownButton = (props) => {
|
|
|
16817
16817
|
onClick: (event) => {
|
|
16818
16818
|
event.stopPropagation();
|
|
16819
16819
|
},
|
|
16820
|
-
}), { isOpen: isOpen, isErrored: isErrored, overrideStyles: overrideStyles, innerRef: (containerEl) => (inputEl = containerEl), onFocus: () => inputEl && inputEl.classList.add('focused'), onBlur: () => inputEl && inputEl.classList.remove('focused'), disabled: disabled }), children ? (children({
|
|
16820
|
+
}), { isOpen: isOpen, isErrored: isErrored, className: "dropdown-button", overrideStyles: overrideStyles, innerRef: (containerEl) => (inputEl = containerEl), onFocus: () => inputEl && inputEl.classList.add('focused'), onBlur: () => inputEl && inputEl.classList.remove('focused'), disabled: disabled }), children ? (children({
|
|
16821
16821
|
label: buttonLabel,
|
|
16822
16822
|
getToggleButtonProps,
|
|
16823
16823
|
isOpen,
|
|
@@ -18186,43 +18186,49 @@ var BoxedRadioGroup$1 = withDefaults(BoxedRadioGroup, defaultProps$6);
|
|
|
18186
18186
|
BoxedRadio$1.Group = BoxedRadioGroup$1;
|
|
18187
18187
|
|
|
18188
18188
|
const Table = (props) => {
|
|
18189
|
-
const { columns = [], data = [], count = 0, offset = 0, limit = 0, next = false, previous = false, showPagination = true, showSelectAllInTable = false, showActions = true, showFilters = true, showOptions = true, rowMenuOptions = [], onRowSelect, onRowClick, onPrevious, onSelectAll, onNext, onMenuOptionSelect, headerComponent, filterComponent, } = props;
|
|
18189
|
+
const { columns = [], data = [], count = 0, offset = 0, limit = 0, next = false, previous = false, selectedRows = {}, showPagination = true, showSelectAllInTable = false, showActions = true, showSelections = true, showFilters = true, showOptions = true, rowMenuOptions = [], onRowSelect, onRowClick, onPrevious, onSelectAll, onNext, onMenuOptionSelect, headerComponent, filterComponent, } = props;
|
|
18190
18190
|
const [showFilterPane, toggleFilterPane] = React__default.useState(showFilters);
|
|
18191
18191
|
const [anchorEl, setAnchorEl] = React__default.useState(null);
|
|
18192
18192
|
const tableInstance = useTable({
|
|
18193
18193
|
columns,
|
|
18194
18194
|
data,
|
|
18195
|
+
initialState: {
|
|
18196
|
+
selectedRowIds: selectedRows,
|
|
18197
|
+
},
|
|
18195
18198
|
}, useRowSelect, (hooks) => {
|
|
18196
|
-
hooks.visibleColumns.push((c) =>
|
|
18197
|
-
|
|
18198
|
-
|
|
18199
|
-
|
|
18200
|
-
|
|
18201
|
-
|
|
18202
|
-
|
|
18203
|
-
React__default.createElement(
|
|
18204
|
-
|
|
18205
|
-
onSelectAll
|
|
18206
|
-
|
|
18207
|
-
|
|
18208
|
-
|
|
18209
|
-
|
|
18210
|
-
|
|
18211
|
-
|
|
18212
|
-
React__default.createElement(
|
|
18213
|
-
|
|
18214
|
-
|
|
18215
|
-
|
|
18216
|
-
|
|
18199
|
+
hooks.visibleColumns.push((c) => showSelections
|
|
18200
|
+
? [
|
|
18201
|
+
{
|
|
18202
|
+
id: 'selection',
|
|
18203
|
+
disableResizing: true,
|
|
18204
|
+
width: 50,
|
|
18205
|
+
Header: ({ getToggleAllRowsSelectedProps, toggleAllRowsSelected, }) => {
|
|
18206
|
+
return showSelectAllInTable ? (React__default.createElement("div", { className: "table-checkbox" },
|
|
18207
|
+
React__default.createElement(Checkbox, Object.assign({ id: "selectAll", name: "selectAll" }, getToggleAllRowsSelectedProps(), { onChange: (e, v) => {
|
|
18208
|
+
if (onSelectAll)
|
|
18209
|
+
onSelectAll(v);
|
|
18210
|
+
toggleAllRowsSelected(v);
|
|
18211
|
+
} })))) : (React__default.createElement("div", null));
|
|
18212
|
+
},
|
|
18213
|
+
Cell: (cellprop) => {
|
|
18214
|
+
const { row, column } = cellprop;
|
|
18215
|
+
return (React__default.createElement("div", { className: "table-checkbox" },
|
|
18216
|
+
React__default.createElement(Checkbox, Object.assign({ id: "selectRow", name: "selectRow" }, row.getToggleRowSelectedProps(), { onChange: (e, v) => {
|
|
18217
|
+
row.toggleRowSelected(v);
|
|
18218
|
+
} }))));
|
|
18219
|
+
},
|
|
18217
18220
|
},
|
|
18218
|
-
|
|
18219
|
-
|
|
18220
|
-
|
|
18221
|
+
...c,
|
|
18222
|
+
]
|
|
18223
|
+
: [...c]);
|
|
18221
18224
|
});
|
|
18222
|
-
const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, getToggleAllRowsSelectedProps, } = tableInstance;
|
|
18225
|
+
const { getTableProps, getTableBodyProps, headerGroups, rows, state: { selectedRowIds }, prepareRow, getToggleAllRowsSelectedProps, } = tableInstance;
|
|
18226
|
+
useMountedLayoutEffect(() => {
|
|
18227
|
+
onRowSelect && onRowSelect(selectedRowIds);
|
|
18228
|
+
}, [onRowSelect, selectedRowIds]);
|
|
18223
18229
|
return (React__default.createElement(TableContainer, { className: "fui-table" },
|
|
18224
18230
|
showActions && (React__default.createElement(TableActions, { className: "table-actions" },
|
|
18225
|
-
React__default.createElement("div", { className: "action" }, !showSelectAllInTable && (React__default.createElement(Checkbox, Object.assign({ id: "selectAll", name: "selectAll" }, getToggleAllRowsSelectedProps()), "Select All"))),
|
|
18231
|
+
React__default.createElement("div", { className: "action" }, !showSelectAllInTable && showSelections && (React__default.createElement(Checkbox, Object.assign({ id: "selectAll", name: "selectAll" }, getToggleAllRowsSelectedProps()), "Select All"))),
|
|
18226
18232
|
headerComponent ? headerComponent : undefined,
|
|
18227
18233
|
React__default.createElement("div", { className: "pagination-actions" },
|
|
18228
18234
|
showPagination && (React__default.createElement(React__default.Fragment, null,
|
|
@@ -18290,7 +18296,8 @@ const TableContainer = Ye.div `
|
|
|
18290
18296
|
const TableWrapper = Ye.div `
|
|
18291
18297
|
padding: 10px;
|
|
18292
18298
|
flex: 1;
|
|
18293
|
-
|
|
18299
|
+
transition: all 0.3s;
|
|
18300
|
+
margin-right: ${({ showFilters }) => (showFilters ? '310px' : '0px')};
|
|
18294
18301
|
`;
|
|
18295
18302
|
const TableActions = Ye.div `
|
|
18296
18303
|
padding: 0 16px;
|