Merge pull request #4 from agentlab/issue-3-antdcardcell-layout

GH-3 antdcardcell layout
agentlab · Jul 6, 2021 · 865544c · 865544c
2 parents fc94158 + 64b290e
commit 865544c
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 31 deletions.
diff --git a/src/cells/AntdCellG2.tsx b/src/cells/AntdCellG2.tsx
@@ -11,8 +11,7 @@ const template: any = {
   'https://www.wildberries.ru/catalog/18247707/detail.aspx': '/img/chart_4.png',
 };
 export const AntdCellG2 = (props: any) => {
-  console.log('PROPS', props);
-  return <Image src={template[props.data['@id']]} />;
+  return <Image style={{ height: '217px' }} src={template[props.data['@id']]} />;
 };
 
 /**

diff --git a/src/data-controls/GridRenderer.tsx b/src/data-controls/GridRenderer.tsx
@@ -8,7 +8,7 @@
  * SPDX-License-Identifier: GPL-3.0-only
  ********************************************************************************/
 import React, { useState, useEffect } from 'react';
-import { Row, Col, Pagination } from 'antd';
+import { List, Row, Col, Pagination } from 'antd';
 import { ViewElement } from '../models/uischema';
 
 import { DispatchCell } from '../DispatchCell';
@@ -21,6 +21,8 @@ const divStyle: React.CSSProperties = {
 
 export const GridRenderer: React.FC<any> = (props) => {
   const { child, onSelect, viewElement, uischema, view, schema } = props;
+  const grid = viewElement?.options?.grid || { gutter: 16, column: 4 };
+  console.log('UISCEMA', uischema);
   const template = viewElement?.options?.elementTemplate || null;
   const createCell = (data: any, id: string | number) =>
     template ? (
@@ -39,32 +41,7 @@ export const GridRenderer: React.FC<any> = (props) => {
     ) : (
       <span key={id}>{data['@id']}</span>
     );
-  const createCol = (data: any, idx: number) => (
-    <Col span={6} style={{ height: '100%' }} key={idx}>
-      {createCell(data, idx)}
-    </Col>
-  );
-  const createGrid = () =>
-    child.reduce((acc: any, e: any, idx: number) => {
-      const remainder = (idx + 1) % 4;
-      if (remainder === 0 || idx === child.length - 1) {
-        const newColl = createCol(e, idx);
-        const colls = remainder === 1 ? [] : acc.splice(remainder === 0 ? -3 : 1 - remainder);
-        colls.push(newColl);
-        acc.push(
-          <Row style={{ height: '100px' }} key={idx / 4} gutter={[10, 10]}>
-            {colls}
-          </Row>,
-        );
-      } else {
-        acc.push(createCol(e, idx));
-      }
-      return acc;
-    }, []);
   return (
-    <React.Fragment>
-      {createGrid()}
-      <Pagination />
-    </React.Fragment>
+    <List grid={grid} dataSource={child} renderItem={(item, idx) => <List.Item>{createCell(item, idx)}</List.Item>} />
   );
 };
diff --git a/stories/AntdCardCell.stories.tsx b/stories/AntdCardCell.stories.tsx
@@ -62,6 +62,15 @@ const viewDescrs = [
         resultsScope: 'rm:Cards_Coll',
         options: {
           renderType: 'grid',
+          grid: {
+            gutter: 16,
+            xs: 2,
+            sm: 2,
+            md: 3,
+            lg: 3,
+            xl: 4,
+            xxl: 7,
+          },
           elementTemplate: [
             {
               type: 'CardLayout',
@@ -74,6 +83,7 @@ const viewDescrs = [
                   type: 'Control',
                   scope: 'name',
                   options: {
+                    editable: false,
                     style: {
                       height: '3.5em',
                       textAlign: 'left',
@@ -87,6 +97,9 @@ const viewDescrs = [
                 {
                   type: 'Rate',
                   scope: 'starsValue',
+                  options: {
+                    editable: false,
+                  },
                 },
                 {
                   type: 'CellHorizontalLayout',
@@ -99,6 +112,7 @@ const viewDescrs = [
                       scope: 'price',
                       options: {
                         formater: 'labeledValue',
+                        editable: false,
                         label: 'Цена',
                         specialChar: '₽',
                         style: {
@@ -113,6 +127,7 @@ const viewDescrs = [
                       scope: 'totalSales',
                       options: {
                         formater: 'labeledValue',
+                        editable: false,
                         label: 'Всего продано',
                         style: {
                           textAlign: 'right',
@@ -127,6 +142,7 @@ const viewDescrs = [
                   type: 'Control',
                   scope: 'lastMonthSalesAmount',
                   options: {
+                    editable: false,
                     formater: 'сomparison',
                     dataToFormater: {
                       prevValue: 'prevMonthSalesAmount',
@@ -144,6 +160,7 @@ const viewDescrs = [
                   scope: 'lastMonthSalesValue',
                   options: {
                     formater: 'сomparison',
+                    editable: false,
                     dataToFormater: {
                       prevValue: 'prevMonthSalesValue',
                     },
@@ -264,8 +281,8 @@ export const Empty: Story<{}> = () => (
     <MstContextProvider store={rootStore} renderers={antdRenderers} cells={antdCells}>
       <div
         style={{
-          height: '1000px',
-          width: '1000px',
+          //height: '1000px',
+          width: '100%',
           backgroundColor: 'rgba(230, 235, 242, 0.5)',
           margin: '0 auto',
           padding: '5px',