Merge pull request #2 from agentlab/issue-1-add-cardcell-and-gridlayout

GH-1 add cardcell and gridlayout

package.json

@@ -27,7 +27,7 @@
     "test:ci": "cross-env NODE_ENV=--experimental-vm-modules jest --ci --coverage --maxWorkers=2",
     "lint": "eslint \"{src,stories,test}**/*.{js,jsx,ts,tsx}\"",
     "prepare": "husky install && yarn build",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "start-storybook -s ./stories/public -p 6006",
     "build-storybook": "build-storybook",
     "format": "./node_modules/.bin/prettier --write \"{src,stories,test}/**/*.{js,jsx,ts,tsx,json,css,less,scss,md}\"",
     "lint-staged": "lint-staged"

src/cells/AntdButtonCell.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { uiTypeIs, rankWith, RankedTester } from '../testers';
+import { withStoreToCellProps } from '../util/ContextToProps';
+import { Button } from 'antd';
+
+export const AntdButtonCell = (props: any) => {
+  const options = props.uiOptions;
+  return (
+    <Button size={'small'} style={options.style}>
+      {options.label}
+    </Button>
+  );
+};
+
+/**
+ * Default tester for text-based/string controls.
+ * @type {RankedTester}
+ */
+export const antdButtonCellTester: RankedTester = rankWith(2, uiTypeIs('Button'));
+
+export const AntdButtonCellWithStore = withStoreToCellProps(AntdButtonCell);

src/cells/AntdCellCardLayout.tsx

@@ -0,0 +1,47 @@
+/********************************************************************************
+ * Copyright (c) 2020 Agentlab and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the GNU General Public License v. 3.0 which is available at
+ * https://www.gnu.org/licenses/gpl-3.0.html.
+ *
+ * SPDX-License-Identifier: GPL-3.0-only
+ ********************************************************************************/
+import React from 'react';
+
+import { rankWith, RankedTester, uiTypeIs } from '../testers';
+import { get } from 'lodash-es';
+
+import { ViewElement } from '../models/uischema';
+import { Card } from 'antd';
+import { DispatchCell } from '../DispatchCell';
+import './cell.css';
+
+export const AntdCellCardLayout = (props: any) => {
+  const { viewElement, view, schema, uischema, data, id } = props;
+  const createCardChilds = () =>
+    viewElement.elements
+      ? viewElement.elements.map((e: ViewElement, idx: number) => {
+          const newSchema = e.scope ? get(schema, 'properties.' + e.scope.replace(/\//, '.properties.')) : schema;
+          return (
+            <DispatchCell
+              id={id + String(idx)}
+              key={id + String(idx)}
+              view={view}
+              data={data}
+              rowData={data}
+              schema={newSchema || schema}
+              viewElement={e}
+              uischema={uischema}
+            />
+          );
+        })
+      : null;
+  return <Card hoverable>{createCardChilds()}</Card>;
+};
+
+/**
+ * Default tester for text-based/string controls.
+ * @type {RankedTester}
+ */
+export const antdCellCardLayoutTester: RankedTester = rankWith(2, uiTypeIs('CardLayout'));

src/cells/AntdCellG2.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { uiTypeIs, rankWith, RankedTester } from '../testers';
+import { withStoreToCellProps } from '../util/ContextToProps';
+import { Image } from 'antd';
+
+const template: any = {
+  'https://www.wildberries.ru/catalog/15570386/detail.aspx': '/img/chart_1.png',
+  'https://www.wildberries.ru/catalog/15622789/detail.aspx': '/img/chart_2.png',
+  'https://www.wildberries.ru/catalog/16170086/detail.aspx': '/img/chart_3.png',
+  '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']]} />;
+};
+
+/**
+ * Default tester for text-based/string controls.
+ * @type {RankedTester}
+ */
+export const antdCellG2Tester: RankedTester = rankWith(2, uiTypeIs('G2'));
+
+export const AntdCellG2WithStore = withStoreToCellProps(AntdCellG2);

src/cells/AntdCellHorizontalLayout.tsx

@@ -0,0 +1,83 @@
+/********************************************************************************
+ * Copyright (c) 2020 Agentlab and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the GNU General Public License v. 3.0 which is available at
+ * https://www.gnu.org/licenses/gpl-3.0.html.
+ *
+ * SPDX-License-Identifier: GPL-3.0-only
+ ********************************************************************************/
+import React from 'react';
+import { Row, Col } from 'antd';
+
+import { DispatchCell } from '../DispatchCell';
+import { DispatchCellProps } from '../Form';
+import { ViewElement } from '../models/uischema';
+import { rankWith, uiTypeIs, RankedTester } from '../testers';
+import { get } from 'lodash-es';
+
+import { Idx } from '../util/layout';
+
+export const AntdHorizontalLayoutRenderer: React.FC<DispatchCellProps> = ({
+  uischema,
+  viewElement,
+  view,
+  data,
+  schema,
+}) => {
+  //const layout = viewElement as Layout;
+  const Render: React.FC<DispatchCellProps & Idx> = ({
+    idx,
+    schema,
+    uischema,
+    viewElement,
+    view,
+    data,
+    enabled,
+    parent,
+    form,
+  }) => {
+    const options = viewElement.options || {};
+    //const style: any = options.style;
+    const span = options.contentSize || !viewElement.elements ? undefined : Math.ceil(24 / viewElement.elements.length);
+    const newSchema = viewElement.scope
+      ? get(schema, 'properties.' + viewElement.scope.replace(/\//, '.properties.'))
+      : schema;
+    return (
+      <Col key={idx} span={span}>
+        <DispatchCell
+          id={String(idx)}
+          data={data}
+          viewElement={viewElement}
+          view={view}
+          rowData={data}
+          schema={newSchema || schema}
+          uischema={uischema}
+          enabled={enabled}
+          parent={parent}
+          form={form}
+        />
+      </Col>
+    );
+  };
+  const justify: any = viewElement.options ? viewElement.options.justify : 'center';
+  const rowStyle: any = { flexWrap: 'nowrap' };
+  if (viewElement.options && viewElement.options.width === 'all-empty-space') rowStyle.width = '100%';
+  return (
+    <Row justify={justify} style={rowStyle} align={'middle'}>
+      {(viewElement.elements || []).map((e: ViewElement, idx: number) => (
+        <Render
+          viewElement={e}
+          schema={schema}
+          uischema={uischema}
+          idx={idx}
+          data={data}
+          id={String(idx)}
+          view={view}
+        />
+      ))}
+    </Row>
+  );
+};
+
+export const antdHorizontalLayoutTester: RankedTester = rankWith(2, uiTypeIs('CellHorizontalLayout'));

src/cells/AntdCellRateWidget.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { withStoreToCellProps } from '../util/ContextToProps';
+import { Rate } from 'antd';
+
+import { uiTypeIs, rankWith, RankedTester } from '../testers';
+
+export const AntdCellRateWidget = (props: any /*: EnumCellProps & WithClassname*/) => {
+  return (
+    <React.Fragment>
+      <Rate
+        style={{ fontSize: '14px', color: 'rgb(255,140,0)', marginTop: '7px' }}
+        allowHalf
+        disabled
+        defaultValue={props.data}
+      />
+      <span style={{ padding: '4px', fontSize: '12px', fontWeight: 500 }}>{`(${props.data})`}</span>
+    </React.Fragment>
+  );
+};
+
+/**
+ * Default tester for enum controls.
+ * @type {RankedTester}
+ */
+export const antdCellRateWidgetTester: RankedTester = rankWith(5, uiTypeIs('Rate'));
+
+export const AntdCellRateWidgetWithStore = withStoreToCellProps(AntdCellRateWidget);

src/cells/AntdImageCell.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { uiTypeIs, rankWith, RankedTester } from '../testers';
+import { withStoreToCellProps } from '../util/ContextToProps';
+import { Image } from 'antd';
+import { useEffect } from '@storybook/addons';
+import './cell.css';
+
+export const AntdImageCell = (props: any) => {
+  const { data } = props;
+  return <Image style={{ height: '100%', width: '100%' }} src={data[0]} />;
+};
+
+/**
+ * Default tester for text-based/string controls.
+ * @type {RankedTester}
+ */
+export const antdImageCellTester: RankedTester = rankWith(2, uiTypeIs('ImageCell'));
+
+export const AntdImageCellWithStore = withStoreToCellProps(AntdImageCell);

src/cells/CellRenderer.tsx

@@ -66,7 +66,7 @@ export const CellRenderer: React.FC<ControlComponent & WithCell> = ({
   }
   //console.log('RENDER', props.data);
   return (
-    <div style={{ margin: '5px', display: 'block', alignSelf: 'start', width: width }}>
+    <div style={{ margin: '5px', display: 'block', alignSelf: 'start', width: width, ...uiOptions.style }}>
       {editable ? (
         editing ? (
           <Cell inputRef={inputRef} value={currentData} handleChange={save} {...props} />
@@ -76,14 +76,22 @@ export const CellRenderer: React.FC<ControlComponent & WithCell> = ({
               myRef={myRef}
               query={query}
               propKey={uiOptions.key}
+              options={uiOptions}
               value={currentData}
               {...specialProps}
               {...props}
             />
           </div>
         )
       ) : (
-        <Formater value={props.data} query={query} propKey={uiOptions.key} {...specialProps} {...props} />
+        <Formater
+          value={props.data}
+          query={query}
+          propKey={uiOptions.key}
+          options={uiOptions}
+          {...specialProps}
+          {...props}
+        />
       )}
     </div>
   );

src/cells/cell.css

@@ -25,3 +25,18 @@
 [data-theme='dark'] .editable-row:hover .editable-cell-value-wrap {
   border: 1px solid #434343;
 }
+
+.ant-card-body {
+  padding: 8px !important;
+}
+
+.image-wrapper {
+  position: relative;
+  background-color: #fe0;
+  width: 100%;
+}
+.image-wrapper {
+  content: '';
+  padding-top: 100%;
+  display: block;
+}

src/cells/index.ts

@@ -19,6 +19,12 @@ import {
 import { antdTextCellTester, AntdTextCellWithStore } from './AntdTextCell';
 import { antdTimeCellTester, AntdTimeCellWithStore } from './AntdTimeCell';
 import { tinyMCECellTester, TinyMCECellWithStore } from './TinyMCECell';
+import { antdImageCellTester, AntdImageCellWithStore } from './AntdImageCell';
+import { antdCellCardLayoutTester, AntdCellCardLayout } from './AntdCellCardLayout';
+import { antdHorizontalLayoutTester, AntdHorizontalLayoutRenderer } from './AntdCellHorizontalLayout';
+import { antdCellRateWidgetTester, AntdCellRateWidgetWithStore } from './AntdCellRateWidget';
+import { antdCellG2Tester, AntdCellG2 } from './AntdCellG2';
+import { antdButtonCellTester, AntdButtonCellWithStore } from './AntdButtonCell';
 
 export const antdCells: CellRendererRegistryEntry[] = [
   { tester: antdBooleanCellTester, cell: AntdBooleanCellWithStore },
@@ -28,6 +34,12 @@ export const antdCells: CellRendererRegistryEntry[] = [
   { tester: antdTextCellTester, cell: AntdTextCellWithStore },
   { tester: antdTimeCellTester, cell: AntdTimeCellWithStore },
   { tester: tinyMCECellTester, cell: TinyMCECellWithStore },
+  { tester: antdImageCellTester, cell: AntdImageCellWithStore },
+  { tester: antdCellCardLayoutTester, cell: AntdCellCardLayout },
+  { tester: antdHorizontalLayoutTester, cell: AntdHorizontalLayoutRenderer },
+  { tester: antdCellRateWidgetTester, cell: AntdCellRateWidgetWithStore },
+  { tester: antdCellG2Tester, cell: AntdCellG2 },
+  { tester: antdButtonCellTester, cell: AntdButtonCellWithStore },
 ];
 
 export * from './AntdBooleanCell';

src/data-controls/DataControl.tsx

@@ -13,10 +13,12 @@ import { rankWith, RankedTester, uiTypeIs } from '../testers';
 import { withStoreToDataControlProps, treeify, strcmp } from '../util/ContextToProps';
 import { TableRenderer } from './TableRenderer';
 import { TreeRenderer } from './TreeRenderer';
+import { GridRenderer } from './GridRenderer';
 
 const renderType: any = {
   tree: TreeRenderer,
   table: TableRenderer,
+  grid: GridRenderer,
 };
 
 export const AntdDataLayout: React.FC<any> = (props) => {
@@ -36,7 +38,6 @@ export const AntdDataLayout: React.FC<any> = (props) => {
     onRename,
   } = props;
   const data = treeify(dataSource, '@id', viewElement?.options.treeNodeParentKey || 'parent', 'children', strcmp);
-
   const onSelect = (selected: { [key: string]: any }) => {
     handleChange(selected);
   };