wix-style-react
Version:
wix-style-react
276 lines (273 loc) • 14.2 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.ChangeType = exports.BulkSelectionState = exports.BulkSelectionContextPropTypes = exports.BulkSelectionContext = exports.BulkSelection = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/Table/BulkSelection/BulkSelection.js";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var BulkSelectionContext = exports.BulkSelectionContext = /*#__PURE__*/_react.default.createContext();
var BulkSelectionState = exports.BulkSelectionState = Object.freeze({
ALL: 'ALL',
NONE: 'NONE',
SOME: 'SOME'
});
var ChangeType = exports.ChangeType = Object.freeze({
ALL: 'ALL',
NONE: 'NONE',
SINGLE_TOGGLE: 'SINGLE_TOGGLE'
});
/** Helper for PropTypes for component which consume the BulkSelection context */
var BulkSelectionContextPropTypes = exports.BulkSelectionContextPropTypes = {
isSelected: _propTypes.default.func,
selectedCount: _propTypes.default.number,
getSelectedIds: _propTypes.default.func,
getNotSelectedIds: _propTypes.default.func,
infiniteBulkSelected: _propTypes.default.bool,
bulkSelectionState: _propTypes.default.string,
toggleSelectionById: _propTypes.default.func,
deselectRowsByDefault: _propTypes.default.bool,
toggleAll: _propTypes.default.func,
selectAll: _propTypes.default.func,
deselectAll: _propTypes.default.func,
setSelectedIds: _propTypes.default.func,
selectionDisabled: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.func])
};
/**
* BulkSelection manages the state and logic of bulk selection.
* Given an array of selectable items, it manages a bulk selection state (ALL, SOME, NONE),
* and provides helper methods for modifying the state.
*
* toggleBulkSelection(): changes the bulk state according to these state changes: ALL->NONE, SOME->ALL, NONE->ALL
*/
class BulkSelection extends _react.default.Component {
constructor(_props) {
super(_props);
this.toggleAll = (enable, origin) => {
if (enable) {
if (this.props.hasMoreInBulkSelection) {
this.setNotSelectedIds([], {
type: ChangeType.ALL,
origin
});
} else {
this.setSelectedIds(this.props.allIds, {
type: ChangeType.ALL,
origin
});
}
} else {
this.setSelectedIds([], {
type: ChangeType.NONE,
origin
});
}
};
this.toggleBulkSelection = (deselectRowsByDefault, origin) => {
var bulkSelectionState = this.state.helpers.bulkSelectionState;
if (bulkSelectionState === BulkSelectionState.SOME) {
this.toggleAll(!deselectRowsByDefault, origin);
} else if (bulkSelectionState === BulkSelectionState.ALL) {
this.toggleAll(false, origin);
} else {
this.toggleAll(true, origin);
}
};
this.toggleSelectionById = (id, origin) => {
var newSelectionValue = !this.state.helpers.isSelected(id);
var change = {
type: ChangeType.SINGLE_TOGGLE,
id,
value: newSelectionValue,
origin
};
if (this.state.selectedIds) {
this.setSelectedIds(newSelectionValue ? this.state.selectedIds.concat(id) : this.state.selectedIds.filter(_id => _id !== id), change);
} else {
this.setNotSelectedIds(newSelectionValue ? this.state.notSelectedIds.filter(_id => _id !== id) : this.state.notSelectedIds.concat(id), change);
}
};
this.setSelectedIds = (selectedIds, change, props) => {
if (!Array.isArray(selectedIds)) {
throw new Error('selectedIds must be an array');
}
this.props.onSelectionStarted && this.props.onSelectionStarted();
if (!props) {
props = this.props;
}
var notSelectedIds = null;
this.setState({
selectedIds,
notSelectedIds,
helpers: this.createHelpers(_objectSpread(_objectSpread({}, props), {}, {
selectedIds,
notSelectedIds
}))
}, () => {
this.props.onSelectionChanged && this.props.onSelectionChanged(selectedIds.slice(), change);
});
};
this.setNotSelectedIds = (notSelectedIds, change, props) => {
if (!Array.isArray(notSelectedIds)) {
throw new Error('notSelectedIds must be an array');
}
this.props.onSelectionStarted && this.props.onSelectionStarted();
if (!props) {
props = this.props;
}
var selectedIds = null;
this.setState({
selectedIds,
notSelectedIds,
helpers: this.createHelpers(_objectSpread(_objectSpread({}, props), {}, {
selectedIds,
notSelectedIds
}))
}, () => {
this.props.onSelectionChanged && this.props.onSelectionChanged(null, change);
});
};
this.areSelectedIdsEqual = (selectedIds1, selectedIds2) => {
if (selectedIds1 === selectedIds2) {
return true;
}
return Array.isArray(selectedIds1) && Array.isArray(selectedIds2) && selectedIds1.length === selectedIds2.length && selectedIds1.every((item, index) => item === selectedIds2[index]);
};
var _selectedIds = (_props.selectedIds || []).slice();
var _notSelectedIds = null;
this.state = {
selectedIds: _selectedIds,
// not exposed to context consumers
notSelectedIds: _notSelectedIds,
// not exposed to context consumers
helpers: this.createHelpers(_objectSpread(_objectSpread({}, _props), {}, {
selectedIds: _selectedIds,
notSelectedIds: _notSelectedIds
}))
};
}
UNSAFE_componentWillReceiveProps(nextProps) {
if (nextProps.selectedIds && !this.areSelectedIdsEqual(nextProps.selectedIds, this.state.selectedIds)) {
this.setSelectedIds(nextProps.selectedIds.slice(), undefined, nextProps);
} else if (this.state.selectedIds && this.state.helpers.bulkSelectionState === BulkSelectionState.ALL && !this.areSelectedIdsEqual(nextProps.allIds, this.props.allIds)) {
// change bulkSelectionState after load more
this.setSelectedIds(this.state.selectedIds, undefined, nextProps);
} else if (this.state.notSelectedIds && !nextProps.hasMoreInBulkSelection) {
// cancel infinite bulk selection mode if it is no longer relevant (e.g. when done loading)
var selectedIds = nextProps.allIds.filter(id => !this.state.notSelectedIds.includes(id));
this.setSelectedIds(selectedIds, undefined, nextProps);
} else if (this.props.selectionDisabled !== nextProps.selectionDisabled || !this.areSelectedIdsEqual(this.props.allIds, nextProps.allIds)) {
var {
selectedIds: _selectedIds2,
notSelectedIds
} = this.state;
var nextSelectedIds = _selectedIds2 && _selectedIds2.filter(id => nextProps.allIds.includes(id));
var nextNotSelectedIds = notSelectedIds && notSelectedIds.filter(id => nextProps.allIds.includes(id));
this.setState({
selectedIds: nextSelectedIds,
notSelectedIds: nextNotSelectedIds,
helpers: this.createHelpers(_objectSpread(_objectSpread({}, nextProps), {}, {
selectedIds: nextSelectedIds,
notSelectedIds: nextNotSelectedIds
}))
});
}
}
createHelpers(_ref) {
var {
selectedIds,
notSelectedIds,
allIds,
selectionDisabled,
deselectRowsByDefault,
totalCount = 0
} = _ref;
var selectedCount = selectedIds ? selectedIds.length : totalCount - notSelectedIds.length;
var selectedIdsBulkState = selectedCount === 0 ? BulkSelectionState.NONE : selectedCount === allIds.length ? BulkSelectionState.ALL : BulkSelectionState.SOME;
var notSelectedIdsBulkState = notSelectedIds && notSelectedIds.length === 0 ? BulkSelectionState.ALL : BulkSelectionState.SOME;
var bulkSelectionState = selectedIds ? selectedIdsBulkState : notSelectedIdsBulkState;
return {
// Getters
/** Is the item with the given id selected. (id comes from the rowData.id if exists, if not then it is the rowIndex)
* Note: `selectedIds` and `notSelectedIds` are mutually exclusive and only one of them is defined.
* `notSelectedIds` is defined when `hasMoreInBulkSelection` is selected and user did bulk selection. Otherwise, selectedIds is defined. */
isSelected: id => selectedIds ? selectedIds.includes(id) : !notSelectedIds.includes(id),
/** Number of selected items */
selectedCount,
/** Get a copy (array) of selected ids when `infiniteBulkSelected` is `false`.
* If `infiniteBulkSelected` is true, returns `null` */
getSelectedIds: () => selectedIds && selectedIds.slice(),
/** Get a copy (array) of ids that were deselected after bulk selection was done, when `infiniteBulkSelected` is `true`.
* If `infiniteBulkSelected` is `false`, returns `null`. */
getNotSelectedIds: () => notSelectedIds && notSelectedIds.slice(),
/** Indicates whether bulk selection was done by the user and `hasMoreInBulkSelection` is `true` */
infiniteBulkSelected: selectedIds === null,
/** A string representing the BulkSelection state (not a React state).
* Possible values: ALL, SOME, NONE
*/
bulkSelectionState,
/** Indicates the `toggleAll` behaviour when some rows are selected. `true` means SOME -> NONE, `false` means SOME -> ALL */
deselectRowsByDefault,
/** Can be either a boolean or a function.
* A boolean affects selection of all table rows.
* A function will be called for every row in `data` to specify if its checkbox should be disabled. */
selectionDisabled: selectionDisabled === true || allIds.length === 0 || typeof selectionDisabled === 'function' && selectionDisabled,
// Modifiers
/** Toggle the selection state (selected/not-selected) of an item by id */
toggleSelectionById: this.toggleSelectionById,
/** Toggles the bulk selection state: NONE -> ALL, SOME -> ALL, ALL -> NONE */
toggleAll: this.toggleBulkSelection,
/** Select all items */
selectAll: origin => this.toggleAll(true, origin),
/** Deselect all items (clear selection) */
deselectAll: origin => this.toggleAll(false, origin),
/** Set the selection.
* An optional `change` argument will be passed "as is" to the Table's onSelectionChanged callback.
*/
setSelectedIds: this.setSelectedIds
};
}
render() {
return /*#__PURE__*/_react.default.createElement(BulkSelectionContext.Provider, {
value: this.state.helpers,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 281,
columnNumber: 7
}
}, this.props.children);
}
}
exports.BulkSelection = BulkSelection;
BulkSelection.propTypes = {
/** Array of item selection boolean states. Should correspond in length to the data prop */
selectedIds: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.arrayOf(_propTypes.default.number)]),
/** An array of all selectable item ids (string ids) */
allIds: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.arrayOf(_propTypes.default.number)]).isRequired,
/** Called when item selection changes.
* Receives 2 arguments, the updated selectedIds array, and a `change` object.
* The `change` object has a `type` property with the following possible values: 'ALL', 'NONE', 'SINGLE_TOGGLE'.
* In case of 'SINGLE_TOGGLE' the `change` object will also include an `id` prop with the item's id,
* and a `value` prop with the new boolean selection state of the item.
* The `change` object also contains an `origin` property which indicates what initiated the selection change.
* The `origin` property can be set when selection is updated using a `SelectionContext` method.
* In case `totalSelectableCount` is set and the list is not fully loaded, and the user did bulk selection ("Select All"), the first parameter (selectedIds) will be null.
* You can use the selection context's getNotSelectedIds() method to get the items that the user unselected after selecting all items. */
onSelectionChanged: _propTypes.default.func,
/** Called when item selection triggered but not changed yet. */
onSelectionStarted: _propTypes.default.func,
/** Can be either a boolean or a function.
* If passed a boolean, affects selection for all table rows.
* If passed a function, it will be called for every row in `data` to specify if its checkbox should be disabled. Example: `isRowSelectionDisabled={(rowData) => !rowData.isSelectable}` */
selectionDisabled: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.func]),
/** Indicates whether the table is in infinite bulk selection mode (`infiniteScroll` and `totalSelectableCount` props are set) and there are more items to load (`hasMore` prop is `true`) */
hasMoreInBulkSelection: _propTypes.default.bool,
/** The table's `totalSelectableCount` prop */
totalCount: _propTypes.default.number,
/** Any - can consume the BulkSelectionProvider context */
children: _propTypes.default.any
};
//# sourceMappingURL=BulkSelection.js.map