@talend/react-containers
Version:
Provide connected components aka containers for @talend/react-cmf based on @talend/react-components.
355 lines (351 loc) • 12.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.connectedCellDictionary = exports.DEFAULT_STATE = void 0;
exports.getItems = getItems;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
var _immutable = require("immutable");
var _reactCmf = _interopRequireWildcard(require("@talend/react-cmf"));
var _actionAPI = require("../actionAPI");
var _List = _interopRequireDefault(require("./List.constant"));
var _lodash = require("lodash");
var _reactComponents = require("@talend/react-components");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function mapStateToProps(state, ownProps) {
if (!ownProps.columnData) {
return {};
}
const exp = _reactCmf.default.expression.mapStateToProps(state, ownProps.columnData, {
props: ownProps
});
if (Object.keys(exp).length) {
return {
columnData: {
..._reactCmf.default.expression.mergeProps(ownProps.columnData),
...exp
}
};
}
return {};
}
const ConnectedCellTitle = (0, _reactCmf.cmfConnect)({
mapStateToProps,
omitCMFProps: true,
withComponentRegistry: true,
withDispatch: true,
withDispatchActionCreator: true,
withComponentId: true
})(_reactComponents.VirtualizedList.cellDictionary.title.cellRenderer);
const connectedCellDictionary = exports.connectedCellDictionary = {
title: {
..._reactComponents.VirtualizedList.cellDictionary.title,
cellRenderer: props => /*#__PURE__*/(0, _jsxRuntime.jsx)(ConnectedCellTitle, {
...props
})
}
};
const DEFAULT_STATE = exports.DEFAULT_STATE = new _immutable.Map({
displayMode: 'table',
selectedItems: new _immutable.List(),
searchQuery: '',
itemsPerPage: 10,
startIndex: 1,
totalResults: 0,
sortOn: 'name',
sortAsc: true,
filterDocked: true
});
/**
* merge props.items with actions
* @param {Object} context [description]
* @param {Object} props [description]
* @return {Array} [description]
*/
function getItems(context, props) {
return props.items.toJS().map(item => {
const actionsItems = (0, _lodash.get)(props, 'actions.items', []);
let actions = [];
if (Array.isArray(actionsItems) && actionsItems.every(actionsItem => Array.isArray(actionsItem))) {
actions = actionsItems.map(actionArray => (0, _actionAPI.getActionsProps)(context, actionArray, item));
} else {
// simple array of actions
actions = (0, _actionAPI.getActionsProps)(context, actionsItems, item);
}
return {
...item,
actions,
persistentActions: (0, _actionAPI.getActionsProps)(context, (0, _lodash.get)(props, 'actions.persistentItemsActions', []), item)
};
});
}
function List(props) {
const context = (0, _reactCmf.useCMFContext)();
const state = props.state.toJS();
function onChangePage(startIndex, itemsPerPage) {
props.setState({
startIndex,
itemsPerPage
});
}
function onSelectDisplayMode(event, payload) {
props.setState({
displayMode: payload
});
}
function getSelectedItems() {
return props.state.get('selectedItems', new _immutable.List());
}
function onToggleMultiSelection(event, data) {
const selectedItems = getSelectedItems();
const dataIndex = selectedItems.indexOf(data[props.idKey]);
if (dataIndex > -1) {
props.setState({
selectedItems: selectedItems.splice(dataIndex, 1)
});
} else {
props.setState({
selectedItems: selectedItems.push(data[props.idKey])
});
}
}
function onToggleAllMultiSelection() {
const selectedItems = getSelectedItems();
const items = props.items;
if (selectedItems.size !== items.size) {
props.setState({
selectedItems: items.map(item => item.get(props.idKey))
});
} else {
props.setState({
selectedItems: new _immutable.List([])
});
}
}
function getGenericDispatcher(property) {
return (event, data) => {
props.dispatchActionCreator(property, event, data, context);
};
}
function isSelected(item) {
const selectedItems = getSelectedItems();
return selectedItems.some(itemKey => itemKey === item[props.idKey]);
}
const items = getItems(context, props);
const newProps = {
...(0, _lodash.omit)(props, _reactCmf.cmfConnect.INJECTED_PROPS)
};
if (!newProps.displayMode) {
newProps.displayMode = state.displayMode;
}
if (!newProps.list) {
newProps.list = {};
}
if (!newProps.list.id) {
newProps.list.id = 'list';
}
newProps.list.items = items;
if (!newProps.list.columns) {
newProps.list.columns = [];
}
newProps.list.sort = {
field: state.sortOn,
isDescending: !state.sortAsc,
onChange: (event, data) => {
props.dispatch({
type: _List.default.LIST_CHANGE_SORT_ORDER,
payload: data,
collectionId: props.collectionId,
event
});
}
};
if (!newProps.list.itemProps) {
newProps.list.itemProps = {};
}
if (newProps.rowHeight) {
newProps.rowHeight = newProps.rowHeight[newProps.displayMode];
}
if (newProps.list.titleProps && newProps.actions.title) {
if (newProps.actions.title) {
newProps.list.titleProps.onClick = getGenericDispatcher(newProps.actions.title);
}
if (newProps.actions.editSubmit) {
newProps.list.titleProps.onEditSubmit = getGenericDispatcher(newProps.actions.editSubmit);
}
if (newProps.actions.editCancel) {
newProps.list.titleProps.onEditCancel = getGenericDispatcher(newProps.actions.editCancel);
}
}
const cellDictionary = {
...connectedCellDictionary
};
if (newProps.cellDictionary) {
Object.keys(newProps.cellDictionary).reduce((accumulator, key) => {
const current = newProps.cellDictionary[key];
// eslint-disable-next-line no-param-reassign
accumulator[key] = {
...(0, _lodash.omit)(current, ['component']),
cellRenderer: props.getComponent(current.component)
};
return accumulator;
}, cellDictionary);
}
newProps.list.cellDictionary = cellDictionary;
if (newProps.headerDictionary) {
newProps.list.headerDictionary = Object.keys(newProps.headerDictionary).reduce((accumulator, key) => {
const current = newProps.headerDictionary[key];
// eslint-disable-next-line no-param-reassign
accumulator[key] = {
...(0, _lodash.omit)(current, ['component']),
headerRenderer: props.getComponent(current.component)
};
return accumulator;
}, {});
}
// toolbar
if (newProps.toolbar) {
if (newProps.toolbar.display) {
newProps.toolbar.display = {
...newProps.toolbar.display,
onChange: (event, data) => {
onSelectDisplayMode(event, data);
}
};
}
if (newProps.toolbar.sort) {
newProps.toolbar.sort.isDescending = !state.sortAsc;
newProps.toolbar.sort.field = state.sortOn;
newProps.toolbar.sort.onChange = (event, data) => {
props.dispatch({
type: _List.default.LIST_CHANGE_SORT_ORDER,
payload: data,
collectionId: props.collectionId,
event
});
};
}
if (newProps.toolbar.filter) {
newProps.toolbar.filter.onToggle = (event, data) => {
props.dispatch({
type: _List.default.LIST_TOGGLE_FILTER,
payload: {
...data,
filterDocked: state.filterDocked,
searchQuery: state.searchQuery
},
collectionId: props.collectionId,
event
});
};
newProps.toolbar.filter.onFilter = (event, data) => {
props.dispatch({
type: _List.default.LIST_FILTER_CHANGE,
payload: data,
collectionId: props.collectionId,
event
});
};
newProps.toolbar.filter.docked = state.filterDocked;
newProps.toolbar.filter.value = state.searchQuery;
}
newProps.toolbar.actionBar = {
actions: {},
multiSelectActions: {}
};
// settings up multi selection
if (newProps.multiSelectActions && props.idKey) {
newProps.list.itemProps.onToggle = onToggleMultiSelection;
newProps.list.itemProps.onToggleAll = onToggleAllMultiSelection;
newProps.list.itemProps.isSelected = isSelected;
newProps.toolbar.actionBar.selected = getSelectedItems().size;
}
const actions = newProps.actions;
const multiSelectActions = newProps.multiSelectActions;
if (multiSelectActions) {
if (multiSelectActions.left) {
newProps.toolbar.actionBar.multiSelectActions.left = multiSelectActions.left.map(action => ({
actionId: action
}));
}
if (multiSelectActions.right) {
newProps.toolbar.actionBar.multiSelectActions.right = multiSelectActions.right.map(action => ({
actionId: action
}));
}
}
if (actions) {
if (actions.left) {
newProps.toolbar.actionBar.actions.left = actions.left.map(action => ({
actionId: action
}));
}
if (actions.right) {
newProps.toolbar.actionBar.actions.right = actions.right.map(action => ({
actionId: action
}));
}
}
if (newProps.toolbar.pagination) {
const pagination = newProps.toolbar.pagination;
_extends(newProps.toolbar.pagination, {
...(0, _lodash.pick)(state, ['totalResults', 'itemsPerPage', 'startIndex'])
});
if (!pagination.onChange) {
pagination.onChange = (startIndex, itemsPerPage) => {
onChangePage(startIndex, itemsPerPage);
};
} else if (typeof pagination.onChange === 'string') {
const onChangeActionCreator = pagination.onChange;
pagination.onChange = (startIndex, itemsPerPage) => {
props.dispatchActionCreator(onChangeActionCreator, null, {
startIndex,
itemsPerPage
}, context);
};
}
}
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactComponents.List, {
...newProps
});
}
List.displayName = 'Container(List)';
List.propTypes = {
actions: _propTypes.default.shape({
title: _propTypes.default.string,
left: _propTypes.default.arrayOf(_propTypes.default.string),
right: _propTypes.default.arrayOf(_propTypes.default.string)
}),
multiSelectActions: _propTypes.default.shape({
title: _propTypes.default.string,
left: _propTypes.default.arrayOf(_propTypes.default.string),
right: _propTypes.default.arrayOf(_propTypes.default.string)
}),
idKey: _propTypes.default.string,
list: _propTypes.default.shape({
columns: _propTypes.default.array,
titleProps: _propTypes.default.object
}),
toolbar: _propTypes.default.shape({
sort: _propTypes.default.object,
filter: _propTypes.default.object,
pagination: _propTypes.default.shape({
onChange: _propTypes.default.func
})
}),
cellDictionary: _propTypes.default.object,
displayMode: _propTypes.default.string,
items: _reactImmutableProptypes.default.list.isRequired,
state: _reactCmf.cmfConnect.propTypes.state,
..._reactCmf.cmfConnect.propTypes
};
List.defaultProps = {
state: DEFAULT_STATE
};
var _default = exports.default = List;
//# sourceMappingURL=List.container.js.map