@wix/design-system
Version:
@wix/design-system
268 lines (266 loc) • 13.5 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.ChangeType = exports.BulkSelectionState = exports.BulkSelectionContext = exports.BulkSelection = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireDefault(require("react"));
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Table/BulkSelection/BulkSelection.jsx";
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; }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
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'
});
/**
* 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
*/
var BulkSelection = exports.BulkSelection = /*#__PURE__*/function (_React$Component) {
function BulkSelection(_props) {
var _this;
(0, _classCallCheck2["default"])(this, BulkSelection);
_this = _callSuper(this, BulkSelection, [_props]);
_this.toggleAll = function (enable, origin) {
if (enable) {
if (_this.props.hasMoreInBulkSelection) {
_this.setNotSelectedIds([], {
type: ChangeType.ALL,
origin: origin
});
} else {
_this.setSelectedIds(_this.props.allIds, {
type: ChangeType.ALL,
origin: origin
});
}
} else {
_this.setSelectedIds([], {
type: ChangeType.NONE,
origin: origin
});
}
};
_this.toggleBulkSelection = function (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 = function (id, origin) {
var newSelectionValue = !_this.state.helpers.isSelected(id);
var change = {
type: ChangeType.SINGLE_TOGGLE,
id: id,
value: newSelectionValue,
origin: origin
};
if (_this.state.selectedIds) {
_this.setSelectedIds(newSelectionValue ? _this.state.selectedIds.concat(id) : _this.state.selectedIds.filter(function (_id) {
return _id !== id;
}), change);
} else {
_this.setNotSelectedIds(newSelectionValue ? _this.state.notSelectedIds.filter(function (_id) {
return _id !== id;
}) : _this.state.notSelectedIds.concat(id), change);
}
};
_this.setSelectedIds = function (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: selectedIds,
notSelectedIds: notSelectedIds,
helpers: _this.createHelpers(_objectSpread(_objectSpread({}, props), {}, {
selectedIds: selectedIds,
notSelectedIds: notSelectedIds
}))
}, function () {
_this.props.onSelectionChanged && _this.props.onSelectionChanged(selectedIds.slice(), change);
});
};
_this.setNotSelectedIds = function (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: selectedIds,
notSelectedIds: notSelectedIds,
helpers: _this.createHelpers(_objectSpread(_objectSpread({}, props), {}, {
selectedIds: selectedIds,
notSelectedIds: notSelectedIds
}))
}, function () {
_this.props.onSelectionChanged && _this.props.onSelectionChanged(null, change);
});
};
_this.areSelectedIdsEqual = function (selectedIds1, selectedIds2) {
if (selectedIds1 === selectedIds2) {
return true;
}
return Array.isArray(selectedIds1) && Array.isArray(selectedIds2) && selectedIds1.length === selectedIds2.length && selectedIds1.every(function (item, index) {
return 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
}))
};
return _this;
}
(0, _inherits2["default"])(BulkSelection, _React$Component);
return (0, _createClass2["default"])(BulkSelection, [{
key: "UNSAFE_componentWillReceiveProps",
value: function UNSAFE_componentWillReceiveProps(nextProps) {
var _this2 = this;
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(function (id) {
return !_this2.state.notSelectedIds.includes(id);
});
this.setSelectedIds(selectedIds, undefined, nextProps);
} else if (this.props.selectionDisabled !== nextProps.selectionDisabled || !this.areSelectedIdsEqual(this.props.allIds, nextProps.allIds)) {
var _this$state = this.state,
_selectedIds2 = _this$state.selectedIds,
notSelectedIds = _this$state.notSelectedIds;
var nextSelectedIds = _selectedIds2 && _selectedIds2.filter(function (id) {
return nextProps.allIds.includes(id);
});
var nextNotSelectedIds = notSelectedIds && notSelectedIds.filter(function (id) {
return nextProps.allIds.includes(id);
});
this.setState({
selectedIds: nextSelectedIds,
notSelectedIds: nextNotSelectedIds,
helpers: this.createHelpers(_objectSpread(_objectSpread({}, nextProps), {}, {
selectedIds: nextSelectedIds,
notSelectedIds: nextNotSelectedIds
}))
});
}
}
}, {
key: "createHelpers",
value: function createHelpers(_ref) {
var _this3 = this;
var selectedIds = _ref.selectedIds,
notSelectedIds = _ref.notSelectedIds,
allIds = _ref.allIds,
selectionDisabled = _ref.selectionDisabled,
deselectRowsByDefault = _ref.deselectRowsByDefault,
_ref$totalCount = _ref.totalCount,
totalCount = _ref$totalCount === void 0 ? 0 : _ref$totalCount;
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: function isSelected(id) {
return selectedIds ? selectedIds.includes(id) : !notSelectedIds.includes(id);
},
/** Number of selected items */
selectedCount: selectedCount,
/** Get a copy (array) of selected ids when `infiniteBulkSelected` is `false`.
* If `infiniteBulkSelected` is true, returns `null` */
getSelectedIds: function getSelectedIds() {
return 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: function getNotSelectedIds() {
return 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: bulkSelectionState,
/** Indicates the `toggleAll` behaviour when some rows are selected. `true` means SOME -> NONE, `false` means SOME -> ALL */
deselectRowsByDefault: 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: function selectAll(origin) {
return _this3.toggleAll(true, origin);
},
/** Deselect all items (clear selection) */
deselectAll: function deselectAll(origin) {
return _this3.toggleAll(false, origin);
},
/** Set the selection.
* An optional `change` argument will be passed "as is" to the Table's onSelectionChanged callback.
*/
setSelectedIds: this.setSelectedIds
};
}
}, {
key: "render",
value: function render() {
return /*#__PURE__*/_react["default"].createElement(BulkSelectionContext.Provider, {
value: this.state.helpers,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 262,
columnNumber: 7
}
}, this.props.children);
}
}]);
}(_react["default"].Component);