@capillarytech/creatives-library 2.0.36 → 2.0.37

package/components/CardGrid/index.js

@@ -7,7 +7,7 @@
 import PropTypes from 'prop-types';
 
 import React from 'react';
-import { Row, Col } from 'antd';
+import {CapSpin, CapRow, CapColumn} from '@capillarytech/cap-ui-library';
 import CustomCard from '../Card';
 
 class CardGrid extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -37,15 +37,18 @@ class CardGrid extends React.Component { // eslint-disable-line react/prefer-sta
     return (
       <div className={this.props.className}>
         <div style={{ marginBottom: '16px' }}>{this.props.filterContent}</div>
-        <div className={this.props.enablePagination ? 'pagination-container' : ''}>
-          <Row gutter={this.props.gutterSize}>
-            { this.props.listItem.length > 0 ? this.props.listItem.map( (item) => (
-              <Col style={{ width: `${100 / this.props.colNumber}%`, paddingBottom: '16px'}} key={item.id} span={parseInt(24 / this.props.colNumber, 10)}>
-                <CustomCard id={item.id} onHover={this.handleOnItemHover} onClick={this.handleOnItemClick} content={item.content} footer={item.footer} height={item.footer ? "312px" : "258px"}></CustomCard>
-              </Col>
-            )) : ''}
-          </Row>
-        </div>
+        <CapSpin spinning={this.props.isLoading} tip={this.props.loadingTip}>
+          <div className={this.props.enablePagination ? 'pagination-container' : ''}>
+            <CapRow gutter={this.props.gutterSize}>
+              { this.props.listItem.length > 0 ? this.props.listItem.map( (item) => (
+                <CapColumn style={{ width: `${100 / this.props.colNumber}%`, paddingBottom: '16px'}} key={item.id} span={parseInt(24 / this.props.colNumber, 10)}>
+                  <CustomCard id={item.id} onHover={this.handleOnItemHover} onClick={this.handleOnItemClick} content={item.content} footer={item.footer} height={item.footer ? "312px" : "258px"}></CustomCard>
+                </CapColumn>
+              )) : ''}
+            </CapRow>
+          </div>
+        </CapSpin>
+
       </div>
     );
   }
@@ -60,6 +63,8 @@ CardGrid.propTypes = {
   onItemClick: PropTypes.func,
   className: PropTypes.string,
   enablePagination: PropTypes.bool,
+  isLoading: PropTypes.bool,
+  loadingTip: PropTypes.string,
 };
 
 CardGrid.defaultProps = {