@talend/react-containers
Version:
Provide connected components aka containers for @talend/react-cmf based on @talend/react-components.
212 lines (206 loc) • 8.07 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.DISPLAY_NAME = exports.DEFAULT_STATE = void 0;
exports.filter = filter;
exports.filterAll = filterAll;
exports.getById = getById;
var _react = require("react");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactCmf = require("@talend/react-cmf");
var _immutable = _interopRequireWildcard(require("immutable"));
var _SelectObject2 = _interopRequireDefault(require("./SelectObject.component"));
var _lodash = require("lodash");
var _jsxRuntime = require("react/jsx-runtime");
var _SelectObject;
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 _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
const DISPLAY_NAME = exports.DISPLAY_NAME = 'Container(SelectObject)';
const DEFAULT_STATE = exports.DEFAULT_STATE = new _immutable.default.Map({});
function noop() {}
/**
* Internal
* @return item in items found with the id
* @param {Object} options {id, items, idAttr }
*/
function getById(items, id, {
idAttr = 'id'
} = {}) {
let found;
items.forEach(item => {
if (item.get(idAttr) === id) {
found = item.toJS();
} else if (!found && item.get('children', new _immutable.List()).size > 0) {
found = getById(item.get('children'), id, {
idAttr
});
}
});
return found;
}
/**
* Check if an `item` is a leaf element, by checking if it
* has a non empty `children`
* @param {Object} item to be checked if it has children attribute
* @return {Boolean}
*/
function isLeafElement(item) {
return item.get('children', new _immutable.List()).size === 0;
}
/**
* if item match the query it will be concatened into the accumulator
* else the accumulator is returned without modification
* @param {Object} item the item on which the matching will happen
* @param {String} currentPosition the element position inside the parsed tree
* @param {String} query the query element used to match
* @param {String} nameAttr the attribute of item on which should be matched
* @param {callback} onMatch callback to call if match happen
* @param {List<Object>} accumulator
*/
function matchOnLeaf(item, currentPosition, query, nameAttr, onMatch, accumulator) {
const currentElementName = item.get(nameAttr, '');
if (currentElementName.toLowerCase().includes(query.toLowerCase())) {
const withElementPosition = item.set('currentPosition', currentPosition);
onMatch(item);
return accumulator.push(withElementPosition);
}
return accumulator;
}
/**
* apply query only on leaf elements, return them on a single list,
* not taking into account the deepth of matched elements.
* @return item in items found with the id
* @param {Object} options {query, items, idAttr }
*/
function filter(items = new _immutable.List(), query = '', {
nameAttr = 'name',
onMatch = noop
} = {}, currentPosition = 'root') {
if (query) {
return items.reduce((accumulator, item) => {
if (isLeafElement(item)) {
return matchOnLeaf(item, currentPosition, query, nameAttr, onMatch, accumulator);
}
const currentElementName = item.get(nameAttr, '');
const result = filter(item.get('children'), query, {
nameAttr
}, `${currentPosition} > ${currentElementName}`);
return accumulator.concat(result);
}, new _immutable.List());
}
return items;
}
/**
* apply query on every elements, return them on a single list,
* @return item in items found with the id
* @param {Object} options {query, items, idAttr }
*/
function filterAll(items = new _immutable.List(), query = '', {
nameAttr = 'name',
onMatch = noop
} = {}, currentPosition = 'root') {
const result = new _immutable.List();
if (query) {
return items.reduce((acc, item) => {
const name = item.get(nameAttr, '');
const children = item.get('children', null);
let results = acc;
if (name.toLowerCase().includes(query.toLowerCase())) {
onMatch(item);
results = acc.push(item.set('currentPosition', currentPosition));
}
if (children) {
results = results.concat(filterAll(children, query, {
nameAttr
}, `${currentPosition} > ${name}`));
}
return results;
}, result);
}
return result;
}
class SelectObject extends _react.Component {
constructor(props) {
super(props);
this.state = {};
this.filter = filter;
this.filterAll = filterAll;
this.getById = getById;
this.onTreeClick = this.onTreeClick.bind(this);
this.onResultsClick = this.onResultsClick.bind(this);
}
onTreeClick(data) {
this.props.setState({
selectedId: data[this.props.idAttr]
});
}
onResultsClick(event, item) {
this.props.setState({
selectedId: item.get(this.props.idAttr)
});
}
render() {
const state = this.props.state || DEFAULT_STATE;
const props = (0, _lodash.omit)(this.props, _reactCmf.cmfConnect.INJECTED_PROPS);
const filterMethod = this.props.filterMode === SelectObject.FILTER_MODE.ALL ? this.filterAll : this.filter;
const matches = [];
let selectedId = state.get('selectedId') || props.selectedId;
function addMatch(item) {
matches.push(item);
}
if (props.query) {
props.filteredData = filterMethod(props.sourceData, props.query, {
...props,
onMatch: addMatch
}, props.breadCrumbsRootLabel);
delete props.tree;
if (!selectedId && matches.length === 1) {
selectedId = matches[0].get('id');
}
props.results = {
onClick: this.onResultsClick,
idAttr: this.props.idAttr,
nameAttr: this.props.nameAttr,
selectedId
};
}
if (selectedId) {
props.selected = this.getById(props.sourceData, selectedId, props);
}
if (props.tree) {
props.tree.selectedId = selectedId;
props.tree.onSelect = this.onTreeClick;
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectObject2.default, {
...props
});
}
}
_SelectObject = SelectObject;
_defineProperty(SelectObject, "displayName", DISPLAY_NAME);
_defineProperty(SelectObject, "FILTER_MODE", {
ALL: 'ALL',
LEAF: 'LEAF'
});
_defineProperty(SelectObject, "propTypes", {
..._reactCmf.cmfConnect.propTypes,
// sourceData: PropTypes.array,
selectedId: _propTypes.default.string,
tree: _propTypes.default.object,
idAttr: _propTypes.default.string,
nameAttr: _propTypes.default.string,
breadCrumbsRootLabel: _propTypes.default.string,
filterMode: _propTypes.default.oneOf([_SelectObject.FILTER_MODE.ALL, _SelectObject.FILTER_MODE.LEAF])
});
_defineProperty(SelectObject, "defaultProps", {
sourceData: new _immutable.default.List(),
idAttr: 'id',
nameAttr: 'name',
breadCrumbsRootLabel: 'root'
});
var _default = exports.default = SelectObject;
//# sourceMappingURL=SelectObject.container.js.map