UNPKG

@talend/react-containers

Version:

Provide connected components aka containers for @talend/react-cmf based on @talend/react-components.

84 lines 3.59 kB
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