From d9a1b9c407fe5ca787ab42b003e269558d0d09e5 Mon Sep 17 00:00:00 2001 From: Lucas Pereira Luiz Date: Tue, 8 Jan 2019 16:48:04 -0200 Subject: [PATCH 1/9] Add options prop to TabbedShowLayout --- packages/ra-ui-materialui/src/detail/TabbedShowLayout.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js b/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js index e45fe80e75..6b3918fbf2 100644 --- a/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js +++ b/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js @@ -31,6 +31,7 @@ const getTabFullPath = (tab, index, baseUrl) => * * Receives the current `record` from the parent `` component, * and passes it to its childen. Children should be Tab components. + * The object passed as `options` props is passed to the material-ui component * * @example * // in src/posts.js @@ -77,6 +78,7 @@ export class TabbedShowLayout extends Component { translate, version, value, + options, ...rest } = this.props; @@ -91,6 +93,7 @@ export class TabbedShowLayout extends Component { // so we can use it as a way to determine the current tab value={location.pathname} indicatorColor="primary" + {...options} > {Children.map(children, (tab, index) => { if (!tab) return null; @@ -144,6 +147,7 @@ TabbedShowLayout.propTypes = { value: PropTypes.number, version: PropTypes.number, translate: PropTypes.func, + options: PropTypes.object, }; const enhance = compose( From 0440d87eb3b12bd64f0056f29848777d6dbb7df9 Mon Sep 17 00:00:00 2001 From: Lucas Pereira Luiz Date: Thu, 10 Jan 2019 16:17:12 -0200 Subject: [PATCH 2/9] Use tabs prop to pass a material-ui's Tabs element Instead of using an "options" prop to pass props to the in , now a whole custom component can be passed through the new "tabs" prop. --- .../src/detail/TabbedShowLayout.js | 33 +++++++++++-------- .../src/detail/TabbedShowLayoutTabs.js | 25 ++++++++++++++ 2 files changed, 45 insertions(+), 13 deletions(-) create mode 100644 packages/ra-ui-materialui/src/detail/TabbedShowLayoutTabs.js diff --git a/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js b/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js index 6b3918fbf2..e224a4e1f5 100644 --- a/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js +++ b/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js @@ -7,6 +7,7 @@ import compose from 'recompose/compose'; import { translate } from 'ra-core'; import CardContentInner from '../layout/CardContentInner'; +import TabbedShowLayoutTabs from './TabbedShowLayoutTabs'; const sanitizeRestProps = ({ children, @@ -18,6 +19,7 @@ const sanitizeRestProps = ({ initialValues, staticContext, translate, + tabs, ...rest }) => rest; @@ -31,7 +33,7 @@ const getTabFullPath = (tab, index, baseUrl) => * * Receives the current `record` from the parent `` component, * and passes it to its childen. Children should be Tab components. - * The object passed as `options` props is passed to the material-ui component + * The component passed as `tabs` props replaces the default material-ui's component. * * @example * // in src/posts.js @@ -78,7 +80,7 @@ export class TabbedShowLayout extends Component { translate, version, value, - options, + tabs, ...rest } = this.props; @@ -88,14 +90,15 @@ export class TabbedShowLayout extends Component { key={version} {...sanitizeRestProps(rest)} > - - {Children.map(children, (tab, index) => { + {React.cloneElement( + tabs, + { + // The location pathname will contain the page path including the current tab path + // so we can use it as a way to determine the current tab + value: location.pathname, + match + }, + Children.map(children, (tab, index) => { if (!tab) return null; // Builds the full tab tab which is the concatenation of the last matched route in the @@ -108,8 +111,8 @@ export class TabbedShowLayout extends Component { context: 'header', value: tabPath, }); - })} - + }) + )} {Children.map( @@ -147,7 +150,11 @@ TabbedShowLayout.propTypes = { value: PropTypes.number, version: PropTypes.number, translate: PropTypes.func, - options: PropTypes.object, + tabs: PropTypes.element.required +}; + +TabbedShowLayout.defaultProps = { + tabs: }; const enhance = compose( diff --git a/packages/ra-ui-materialui/src/detail/TabbedShowLayoutTabs.js b/packages/ra-ui-materialui/src/detail/TabbedShowLayoutTabs.js new file mode 100644 index 0000000000..1977f412ae --- /dev/null +++ b/packages/ra-ui-materialui/src/detail/TabbedShowLayoutTabs.js @@ -0,0 +1,25 @@ +import React, { Component, Children, cloneElement } from "react"; +import PropTypes from "prop-types"; +import Tabs from "@material-ui/core/Tabs"; +import Divider from "@material-ui/core/Divider"; +import { withRouter, Route } from "react-router-dom"; +import compose from "recompose/compose"; +import { translate } from "ra-core"; + +import CardContentInner from "../layout/CardContentInner"; + +const TabbedShowLayoutTabs = ({ value, children, ...rest }) => ( + + {children} + +); + +TabbedShowLayoutTabs.propTypes = { + children: PropTypes.node, + value: PropTypes.number +}; + +export default TabbedShowLayoutTabs; From 9ea0e2949b9ee60d5f7f73a81312ba78d535209f Mon Sep 17 00:00:00 2001 From: Lucas Pereira Luiz Date: Tue, 8 Jan 2019 16:48:04 -0200 Subject: [PATCH 3/9] Add options prop to TabbedShowLayout --- packages/ra-ui-materialui/src/detail/TabbedShowLayout.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js b/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js index e45fe80e75..6b3918fbf2 100644 --- a/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js +++ b/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js @@ -31,6 +31,7 @@ const getTabFullPath = (tab, index, baseUrl) => * * Receives the current `record` from the parent `` component, * and passes it to its childen. Children should be Tab components. + * The object passed as `options` props is passed to the material-ui component * * @example * // in src/posts.js @@ -77,6 +78,7 @@ export class TabbedShowLayout extends Component { translate, version, value, + options, ...rest } = this.props; @@ -91,6 +93,7 @@ export class TabbedShowLayout extends Component { // so we can use it as a way to determine the current tab value={location.pathname} indicatorColor="primary" + {...options} > {Children.map(children, (tab, index) => { if (!tab) return null; @@ -144,6 +147,7 @@ TabbedShowLayout.propTypes = { value: PropTypes.number, version: PropTypes.number, translate: PropTypes.func, + options: PropTypes.object, }; const enhance = compose( From f02f749333db42ce3c8a9c4dd1674dd480f0936a Mon Sep 17 00:00:00 2001 From: Lucas Pereira Luiz Date: Thu, 10 Jan 2019 16:17:12 -0200 Subject: [PATCH 4/9] Use tabs prop to pass a material-ui's Tabs element Instead of using an "options" prop to pass props to the in , now a whole custom component can be passed through the new "tabs" prop. --- .../src/detail/TabbedShowLayout.js | 33 +++++++++++-------- .../src/detail/TabbedShowLayoutTabs.js | 25 ++++++++++++++ 2 files changed, 45 insertions(+), 13 deletions(-) create mode 100644 packages/ra-ui-materialui/src/detail/TabbedShowLayoutTabs.js diff --git a/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js b/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js index 6b3918fbf2..e224a4e1f5 100644 --- a/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js +++ b/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js @@ -7,6 +7,7 @@ import compose from 'recompose/compose'; import { translate } from 'ra-core'; import CardContentInner from '../layout/CardContentInner'; +import TabbedShowLayoutTabs from './TabbedShowLayoutTabs'; const sanitizeRestProps = ({ children, @@ -18,6 +19,7 @@ const sanitizeRestProps = ({ initialValues, staticContext, translate, + tabs, ...rest }) => rest; @@ -31,7 +33,7 @@ const getTabFullPath = (tab, index, baseUrl) => * * Receives the current `record` from the parent `` component, * and passes it to its childen. Children should be Tab components. - * The object passed as `options` props is passed to the material-ui component + * The component passed as `tabs` props replaces the default material-ui's component. * * @example * // in src/posts.js @@ -78,7 +80,7 @@ export class TabbedShowLayout extends Component { translate, version, value, - options, + tabs, ...rest } = this.props; @@ -88,14 +90,15 @@ export class TabbedShowLayout extends Component { key={version} {...sanitizeRestProps(rest)} > - - {Children.map(children, (tab, index) => { + {React.cloneElement( + tabs, + { + // The location pathname will contain the page path including the current tab path + // so we can use it as a way to determine the current tab + value: location.pathname, + match + }, + Children.map(children, (tab, index) => { if (!tab) return null; // Builds the full tab tab which is the concatenation of the last matched route in the @@ -108,8 +111,8 @@ export class TabbedShowLayout extends Component { context: 'header', value: tabPath, }); - })} - + }) + )} {Children.map( @@ -147,7 +150,11 @@ TabbedShowLayout.propTypes = { value: PropTypes.number, version: PropTypes.number, translate: PropTypes.func, - options: PropTypes.object, + tabs: PropTypes.element.required +}; + +TabbedShowLayout.defaultProps = { + tabs: }; const enhance = compose( diff --git a/packages/ra-ui-materialui/src/detail/TabbedShowLayoutTabs.js b/packages/ra-ui-materialui/src/detail/TabbedShowLayoutTabs.js new file mode 100644 index 0000000000..1977f412ae --- /dev/null +++ b/packages/ra-ui-materialui/src/detail/TabbedShowLayoutTabs.js @@ -0,0 +1,25 @@ +import React, { Component, Children, cloneElement } from "react"; +import PropTypes from "prop-types"; +import Tabs from "@material-ui/core/Tabs"; +import Divider from "@material-ui/core/Divider"; +import { withRouter, Route } from "react-router-dom"; +import compose from "recompose/compose"; +import { translate } from "ra-core"; + +import CardContentInner from "../layout/CardContentInner"; + +const TabbedShowLayoutTabs = ({ value, children, ...rest }) => ( + + {children} + +); + +TabbedShowLayoutTabs.propTypes = { + children: PropTypes.node, + value: PropTypes.number +}; + +export default TabbedShowLayoutTabs; From c2dd91d80f392fe0480745a0b2f9218d42f0fb26 Mon Sep 17 00:00:00 2001 From: Lucas Pereira Luiz Date: Tue, 15 Jan 2019 10:09:39 -0200 Subject: [PATCH 5/9] Remove grandchildren mapping from TabbedShowLayout Also fix linting. --- .../src/detail/TabbedShowLayout.js | 34 ++++------------ .../src/detail/TabbedShowLayoutTabs.js | 39 ++++++++++++------- 2 files changed, 32 insertions(+), 41 deletions(-) diff --git a/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js b/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js index e224a4e1f5..b90d003d09 100644 --- a/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js +++ b/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js @@ -1,6 +1,5 @@ import React, { Component, Children, cloneElement } from 'react'; import PropTypes from 'prop-types'; -import Tabs from '@material-ui/core/Tabs'; import Divider from '@material-ui/core/Divider'; import { withRouter, Route } from 'react-router-dom'; import compose from 'recompose/compose'; @@ -85,33 +84,16 @@ export class TabbedShowLayout extends Component { } = this.props; return ( -
- {React.cloneElement( +
+ {cloneElement( tabs, { - // The location pathname will contain the page path including the current tab path - // so we can use it as a way to determine the current tab - value: location.pathname, - match + // The location pathname will contain the page path including the current tab path + // so we can use it as a way to determine the current tab + value: location.pathname, + match, }, - Children.map(children, (tab, index) => { - if (!tab) return null; - - // Builds the full tab tab which is the concatenation of the last matched route in the - // TabbedShowLayout hierarchy (ex: '/posts/create', '/posts/12', , '/posts/12/show') - // and the tab path. - // This will be used as the Tab's value - const tabPath = getTabFullPath(tab, index, match.url); - - return cloneElement(tab, { - context: 'header', - value: tabPath, - }); - }) + [...children], )} @@ -150,7 +132,7 @@ TabbedShowLayout.propTypes = { value: PropTypes.number, version: PropTypes.number, translate: PropTypes.func, - tabs: PropTypes.element.required + tabs: PropTypes.element.required }; TabbedShowLayout.defaultProps = { diff --git a/packages/ra-ui-materialui/src/detail/TabbedShowLayoutTabs.js b/packages/ra-ui-materialui/src/detail/TabbedShowLayoutTabs.js index 1977f412ae..45c3086da9 100644 --- a/packages/ra-ui-materialui/src/detail/TabbedShowLayoutTabs.js +++ b/packages/ra-ui-materialui/src/detail/TabbedShowLayoutTabs.js @@ -1,25 +1,34 @@ -import React, { Component, Children, cloneElement } from "react"; -import PropTypes from "prop-types"; -import Tabs from "@material-ui/core/Tabs"; -import Divider from "@material-ui/core/Divider"; -import { withRouter, Route } from "react-router-dom"; -import compose from "recompose/compose"; -import { translate } from "ra-core"; +import React, { Children, cloneElement } from 'react'; +import PropTypes from 'prop-types'; +import Tabs from '@material-ui/core/Tabs'; -import CardContentInner from "../layout/CardContentInner"; +const getTabFullPath = (tab, index, baseUrl) => + `${baseUrl}${ + tab.props.path ? `/${tab.props.path}` : index > 0 ? `/${index}` : '' + }`; -const TabbedShowLayoutTabs = ({ value, children, ...rest }) => ( - - {children} +const TabbedShowLayoutTabs = ({ value, children, match, ...rest }) => ( + + {Children.map(children, (tab, index) => { + if (!tab) return null; + + // Builds the full tab tab which is the concatenation of the last matched route in the + // TabbedShowLayout hierarchy (ex: '/posts/create', '/posts/12', , '/posts/12/show') + // and the tab path. + // This will be used as the Tab's value + const tabPath = getTabFullPath(tab, index, match.url); + + return cloneElement(tab, { + context: 'header', + value: tabPath, + }); + })} ); TabbedShowLayoutTabs.propTypes = { children: PropTypes.node, - value: PropTypes.number + value: PropTypes.number, }; export default TabbedShowLayoutTabs; From 67a550205066f582da840b324a118ef7298efdf5 Mon Sep 17 00:00:00 2001 From: Lucas Pereira Luiz Date: Tue, 15 Jan 2019 11:06:55 -0200 Subject: [PATCH 6/9] Remove unused props and fix misused spread operator --- packages/ra-ui-materialui/src/detail/TabbedShowLayout.js | 2 +- packages/ra-ui-materialui/src/detail/TabbedShowLayoutTabs.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js b/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js index b90d003d09..8807e73857 100644 --- a/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js +++ b/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js @@ -93,7 +93,7 @@ export class TabbedShowLayout extends Component { value: location.pathname, match, }, - [...children], + children, )} diff --git a/packages/ra-ui-materialui/src/detail/TabbedShowLayoutTabs.js b/packages/ra-ui-materialui/src/detail/TabbedShowLayoutTabs.js index 45c3086da9..8edd79a026 100644 --- a/packages/ra-ui-materialui/src/detail/TabbedShowLayoutTabs.js +++ b/packages/ra-ui-materialui/src/detail/TabbedShowLayoutTabs.js @@ -7,7 +7,7 @@ const getTabFullPath = (tab, index, baseUrl) => tab.props.path ? `/${tab.props.path}` : index > 0 ? `/${index}` : '' }`; -const TabbedShowLayoutTabs = ({ value, children, match, ...rest }) => ( +const TabbedShowLayoutTabs = ({ value, children, match }) => ( {Children.map(children, (tab, index) => { if (!tab) return null; From 7246272e10dcd7141b19220e00adefa9a4e8746e Mon Sep 17 00:00:00 2001 From: Lucas Pereira Luiz Date: Tue, 15 Jan 2019 11:17:54 -0200 Subject: [PATCH 7/9] Pass the rest of the TabbedShowLayoutTabs props to its children --- packages/ra-ui-materialui/src/detail/TabbedShowLayoutTabs.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/ra-ui-materialui/src/detail/TabbedShowLayoutTabs.js b/packages/ra-ui-materialui/src/detail/TabbedShowLayoutTabs.js index 8edd79a026..6edf93b321 100644 --- a/packages/ra-ui-materialui/src/detail/TabbedShowLayoutTabs.js +++ b/packages/ra-ui-materialui/src/detail/TabbedShowLayoutTabs.js @@ -7,7 +7,7 @@ const getTabFullPath = (tab, index, baseUrl) => tab.props.path ? `/${tab.props.path}` : index > 0 ? `/${index}` : '' }`; -const TabbedShowLayoutTabs = ({ value, children, match }) => ( +const TabbedShowLayoutTabs = ({ value, children, match, ...rest }) => ( {Children.map(children, (tab, index) => { if (!tab) return null; @@ -21,6 +21,7 @@ const TabbedShowLayoutTabs = ({ value, children, match }) => ( return cloneElement(tab, { context: 'header', value: tabPath, + ...rest, }); })} From 1cd2b554237e47630632d72ac9935c04568a1fcc Mon Sep 17 00:00:00 2001 From: Lucas Pereira Luiz Date: Tue, 15 Jan 2019 11:47:44 -0200 Subject: [PATCH 8/9] Pass TabbedShowLayoutTabs rest props to Tabs Previously it was being passed to its children. --- packages/ra-ui-materialui/src/detail/TabbedShowLayoutTabs.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/ra-ui-materialui/src/detail/TabbedShowLayoutTabs.js b/packages/ra-ui-materialui/src/detail/TabbedShowLayoutTabs.js index 6edf93b321..f6cdba424f 100644 --- a/packages/ra-ui-materialui/src/detail/TabbedShowLayoutTabs.js +++ b/packages/ra-ui-materialui/src/detail/TabbedShowLayoutTabs.js @@ -7,8 +7,8 @@ const getTabFullPath = (tab, index, baseUrl) => tab.props.path ? `/${tab.props.path}` : index > 0 ? `/${index}` : '' }`; -const TabbedShowLayoutTabs = ({ value, children, match, ...rest }) => ( - +const TabbedShowLayoutTabs = ({ children, match, ...rest }) => ( + {Children.map(children, (tab, index) => { if (!tab) return null; @@ -21,7 +21,6 @@ const TabbedShowLayoutTabs = ({ value, children, match, ...rest }) => ( return cloneElement(tab, { context: 'header', value: tabPath, - ...rest, }); })} From 179bd891c74494d360e6563548704c8df406b44d Mon Sep 17 00:00:00 2001 From: Lucas Pereira Luiz Date: Tue, 15 Jan 2019 11:56:11 -0200 Subject: [PATCH 9/9] Fix propTypes --- packages/ra-ui-materialui/src/detail/TabbedShowLayout.js | 2 +- packages/ra-ui-materialui/src/detail/TabbedShowLayoutTabs.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js b/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js index 8807e73857..22c72cccd4 100644 --- a/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js +++ b/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js @@ -132,7 +132,7 @@ TabbedShowLayout.propTypes = { value: PropTypes.number, version: PropTypes.number, translate: PropTypes.func, - tabs: PropTypes.element.required + tabs: PropTypes.element.isRequired, }; TabbedShowLayout.defaultProps = { diff --git a/packages/ra-ui-materialui/src/detail/TabbedShowLayoutTabs.js b/packages/ra-ui-materialui/src/detail/TabbedShowLayoutTabs.js index f6cdba424f..27d4b62f3d 100644 --- a/packages/ra-ui-materialui/src/detail/TabbedShowLayoutTabs.js +++ b/packages/ra-ui-materialui/src/detail/TabbedShowLayoutTabs.js @@ -11,7 +11,6 @@ const TabbedShowLayoutTabs = ({ children, match, ...rest }) => ( {Children.map(children, (tab, index) => { if (!tab) return null; - // Builds the full tab tab which is the concatenation of the last matched route in the // TabbedShowLayout hierarchy (ex: '/posts/create', '/posts/12', , '/posts/12/show') // and the tab path. @@ -28,7 +27,8 @@ const TabbedShowLayoutTabs = ({ children, match, ...rest }) => ( TabbedShowLayoutTabs.propTypes = { children: PropTypes.node, - value: PropTypes.number, + match: PropTypes.object, + value: PropTypes.string, }; export default TabbedShowLayoutTabs;