diff --git a/components/View/GridViewLayout/GridItem/index.js b/components/View/GridViewLayout/GridItem/index.js index abc171c2e..2443c0f15 100644 --- 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 (
diff --git a/components/View/GridViewLayout/GridItem/styles.scss b/components/View/GridViewLayout/GridItem/styles.scss index d24083f1a..35615c499 100644 --- 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 index 24f05b3ad..36aa6eee7 100644 --- 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,29 +71,27 @@ 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`, @@ -98,7 +99,7 @@ export default class GridViewLayout extends React.PureComponent { return (
); }