@talend/react-containers
Version:
Provide connected components aka containers for @talend/react-cmf based on @talend/react-components.
84 lines • 3.59 kB
JavaScript
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); }
import { Component as RComponent } from 'react';
import PropTypes from 'prop-types';
import { Map } from 'immutable';
import { cmfConnect } from '@talend/react-cmf';
import { fetchProducts, openProduct } from './HeaderBar.actions';
import Constants from './HeaderBar.constant';
import { HeaderBar as Component } from "@talend/react-components";
import { omit } from "lodash";
import { jsx as _jsx } from "react/jsx-runtime";
export const DEFAULT_STATE = new Map({
productsFetchState: Constants.PRODUCTS_NOT_LOADED
});
function sortProductsByLabel(a, b) {
return a.label > b.label ? 1 : -1;
}
class HeaderBar extends RComponent {
componentDidUpdate(prevProps) {
// Trigger product fetch when there's an URL and
// products URL has changed or products have not been loaded yet
const hasProductsUrlChanged = this.props.productsUrl !== prevProps.productsUrl;
const hasProductsNotBeenLoaded = this.props.state.get('productsFetchState') === Constants.PRODUCTS_NOT_LOADED;
if (this.props.productsUrl && (hasProductsNotBeenLoaded || hasProductsUrlChanged)) {
this.props.dispatch(fetchProducts(this.props.productsUrl));
}
}
render() {
const {
productsItems: productsFromState,
productsSort,
prepareProducts,
...props
} = this.props;
const hasFetchedProducts = this.props.state.get('productsFetchState') === Constants.FETCH_PRODUCTS_SUCCESS;
const productsProps = {};
if (hasFetchedProducts && productsFromState) {
const productsFromProps = props.products || {};
const itemsFromProps = (productsFromProps.items ? props.products.items : []).map(item => {
if (item.dispatch) {
return {
...item,
onClickDispatch: item.dispatch
};
}
return item;
});
const items = [...itemsFromProps, ...productsFromState.map(product => ({
'data-feature': `product.${(product.id || '').toLowerCase()}`,
label: product.name,
icon: `talend-${product.icon}-colored`,
onClickDispatch: openProduct(product)
}))];
productsProps.products = {
...productsFromProps,
items
};
productsProps.products.items.sort(productsSort || sortProductsByLabel);
if (prepareProducts) {
productsProps.products.items = prepareProducts(productsProps.products.items);
}
}
return /*#__PURE__*/_jsx(Component, {
...omit(props, cmfConnect.INJECTED_PROPS),
...productsProps
});
}
}
_defineProperty(HeaderBar, "displayName", 'Container(HeaderBar)');
_defineProperty(HeaderBar, "propTypes", {
productsUrl: PropTypes.string,
productsItems: PropTypes.arrayOf(PropTypes.shape({
icon: PropTypes.string,
id: PropTypes.string,
name: PropTypes.string,
url: PropTypes.string
})),
productsSort: PropTypes.func,
prepareProducts: PropTypes.func,
...cmfConnect.propTypes
});
export default HeaderBar;
//# sourceMappingURL=HeaderBar.container.js.map