Merge pull request toggle-corp#752 from toggle-corp/feature/add-grid-…

…item-renderer-params Add grid item renderer params
Bihan · Feb 22, 2021 · b8b8d86 · b8b8d86
2 parents cd12078 + cd038bc
commit b8b8d86
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 20 deletions.
diff --git a/components/View/GridViewLayout/GridItem/index.js b/components/View/GridViewLayout/GridItem/index.js
@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import { _cs } from '@togglecorp/fujs';
 import React from 'react';
 
 import styles from './styles.scss';
@@ -39,17 +40,11 @@ export default class GridItem extends React.PureComponent {
 
     render() {
         const {
-            className: classNameFromProps,
+            className,
             layoutSelector,
             datum,
         } = this.props;
 
-        const className = `
-            ${classNameFromProps}
-            grid-item
-            ${styles.gridItem}
-        `;
-
         const Header = this.renderHeader;
         const Content = this.renderContent;
         const layout = layoutSelector(datum);
@@ -61,7 +56,7 @@ export default class GridItem extends React.PureComponent {
 
         return (
             <div
-                className={className}
+                className={_cs(styles.gridItem, className, 'grid-item')}
                 style={style}
             >
                 <Header />

diff --git a/components/View/GridViewLayout/GridItem/styles.scss b/components/View/GridViewLayout/GridItem/styles.scss
@@ -1,4 +1,3 @@
-
 .grid-item {
     position: absolute;
     top: 0;

diff --git a/components/View/GridViewLayout/index.js b/components/View/GridViewLayout/index.js
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { _cs } from '@togglecorp/fujs';
 
 import List from '../List';
 import GridItem from './GridItem';
@@ -18,12 +19,14 @@ const propTypes = {
     itemContentModifier: PropTypes.func.isRequired,
     layoutSelector: PropTypes.func.isRequired,
     keySelector: PropTypes.func.isRequired,
+    itemRendererParams: PropTypes.func,
 };
 
 const defaultProps = {
     className: '',
     itemClassName: '',
     data: [],
+    itemRendererParams: undefined,
 };
 
 
@@ -68,37 +71,35 @@ export default class GridViewLayout extends React.PureComponent {
             layoutSelector,
             itemHeaderModifier: headerModifier,
             itemContentModifier: contentModifier,
+            itemRendererParams,
         } = this.props;
 
+        const newParams = itemRendererParams ? itemRendererParams(key, datum) : {};
+
         return {
             layoutSelector,
             headerModifier,
             contentModifier,
             datum,
+            ...newParams,
         };
     }
 
     render() {
         const {
-            className: classNameFromProps,
+            className,
             keySelector,
             itemClassName,
         } = this.props;
 
-        const className = `
-            ${classNameFromProps}
-            ${styles.gridViewLayout}
-            'grid-view-layout'
-        `;
-
         const style = {
             width: `${this.bounds.width}px`,
             height: `${this.bounds.height}px`,
         };
 
         return (
             <div
-                className={className}
+                className={_cs(className, styles.gridViewLayout, 'grid-view-layout')}
                 style={style}
             >
                 <List

diff --git a/components/View/GridViewLayout/styles.scss b/components/View/GridViewLayout/styles.scss
@@ -1,4 +1,3 @@
-
 .grid-view-layout {
     position: relative;
 }
diff --git a/components/View/List/index.js b/components/View/List/index.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { listToGroupList } from '@togglecorp/fujs';
+import { _cs, listToGroupList } from '@togglecorp/fujs';
 import { FaramListElement } from '@togglecorp/faram';
 
 import ListItem from './ListItem';
@@ -79,9 +79,9 @@ export class NormalList extends React.Component {
 
             return (
                 <Renderer
-                    className={rendererClassName}
                     key={finalKey}
                     {...extraProps}
+                    className={_cs(rendererClassName, extraProps?.className)}
                 />
             );
         }