Image formatter, other formatters, number cell

agentlab · Jun 27, 2021 · 8f05d35 · 8f05d35
1 parent 3acefc3
commit 8f05d35
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 21 deletions.
diff --git a/package.json b/package.json
@@ -33,7 +33,7 @@
     "lint-staged": "lint-staged"
   },
   "peerDependencies": {
-    "@agentlab/sparql-jsld-client": ">=5.0.0-rc.8",
+    "@agentlab/sparql-jsld-client": ">=5.0.0-rc.9",
     "@ant-design/icons": ">=4.6.2",
     "@tinymce/tinymce-react": ">=3.12.6",
     "antd": ">=4.16.5",
@@ -55,7 +55,7 @@
     "uri-js": ">=4.4.1"
   },
   "dependencies": {
-    "@agentlab/sparql-jsld-client": "^5.0.0-rc.8",
+    "@agentlab/sparql-jsld-client": "^5.0.0-rc.9",
     "@ant-design/icons": "^4.6.2",
     "@tinymce/tinymce-react": "^3.12.6",
     "@types/react": "^17.0.11",

diff --git a/src/cells/AntdNumberCell.tsx b/src/cells/AntdNumberCell.tsx
@@ -9,7 +9,7 @@
  ********************************************************************************/
 import React from 'react';
 
-import { rankWith, RankedTester, isIntegerControl } from '../testers';
+import { rankWith, RankedTester, isIntegerControl, isNumberControl } from '../testers';
 import { withStoreToCellProps } from '../util/ContextToProps';
 
 import { AntdInputNumber } from '../antd-controls/AntdInputNumber';
@@ -19,10 +19,8 @@ export const AntdNumberCell = (props: any) => {
   return <CellRenderer Cell={AntdInputNumber} {...props} />;
 };
 
-/**
- * Default tester for text-based/string controls.
- * @type {RankedTester}
- */
-export const antdNumberCellTester: RankedTester = rankWith(2, isIntegerControl);
+export const antdIntegerCellTester: RankedTester = rankWith(2, isIntegerControl);
+export const AntdIntegerCellWithStore = withStoreToCellProps(AntdNumberCell);
 
+export const antdNumberCellTester: RankedTester = rankWith(2, isNumberControl);
 export const AntdNumberCellWithStore = withStoreToCellProps(AntdNumberCell);
diff --git a/src/cells/index.ts b/src/cells/index.ts
@@ -10,14 +10,20 @@
 import { CellRendererRegistryEntry } from '../renderers';
 import { antdBooleanCellTester, AntdBooleanCellWithStore } from './AntdBooleanCell';
 import { antdEnumCellTester, AntdEnumCellWithStore } from './AntdEnumCell';
-import { antdNumberCellTester, AntdNumberCellWithStore } from './AntdNumberCell';
+import {
+  antdIntegerCellTester,
+  AntdIntegerCellWithStore,
+  antdNumberCellTester,
+  AntdNumberCellWithStore,
+} from './AntdNumberCell';
 import { antdTextCellTester, AntdTextCellWithStore } from './AntdTextCell';
 import { antdTimeCellTester, AntdTimeCellWithStore } from './AntdTimeCell';
 import { tinyMCECellTester, TinyMCECellWithStore } from './TinyMCECell';
 
 export const antdCells: CellRendererRegistryEntry[] = [
   { tester: antdBooleanCellTester, cell: AntdBooleanCellWithStore },
   { tester: antdEnumCellTester, cell: AntdEnumCellWithStore },
+  { tester: antdIntegerCellTester, cell: AntdIntegerCellWithStore },
   { tester: antdNumberCellTester, cell: AntdNumberCellWithStore },
   { tester: antdTextCellTester, cell: AntdTextCellWithStore },
   { tester: antdTimeCellTester, cell: AntdTimeCellWithStore },

diff --git a/src/data-controls/index.ts b/src/data-controls/index.ts
@@ -13,7 +13,7 @@ import { saveControlTester, AntdSaveControlWithStore } from './SaveControl';
 import { antdSelectControlTester, AntdSelectControlWithStore } from './SelectControl';
 import { antdTabControlTester, AntdTabControlWithStore } from './TabControlRenderer';
 
-export const antdRataControlRenderers: RendererRegistryEntry[] = [
+export const antdDataControlRenderers: RendererRegistryEntry[] = [
   { tester: antdDataControlTester, renderer: AntdDataControlWithStore },
   { tester: saveControlTester, renderer: AntdSaveControlWithStore },
   { tester: antdSelectControlTester, renderer: AntdSelectControlWithStore },

diff --git a/src/formatters/baseFormatters.tsx b/src/formatters/baseFormatters.tsx
@@ -7,9 +7,12 @@
  *
  * SPDX-License-Identifier: GPL-3.0-only
  ********************************************************************************/
+import { isArray } from 'lodash-es';
+import moment from 'moment';
 import React from 'react';
 import { Link } from 'react-router-dom';
-import moment from 'moment';
+import { Image } from 'antd';
+
 import { spriteSheet } from './iconsGreed';
 interface SpriteProps {
   filename: string;
@@ -23,22 +26,33 @@ export const Sprite: React.FC<SpriteProps> = ({ filename, x = 0, y = 0, width =
   if (!filename) {
     return null;
   }
-
   const style: React.CSSProperties = {
     backgroundImage: `url(${filename})`,
     backgroundPosition: `${x * -1}px ${y * -1}px`,
     backgroundRepeat: 'no-repeat',
     width,
     height,
   };
-
   return <div style={style} />;
 };
+
 export const base = ({ value }: any) => <div style={{ margin: '6px' }}>{value}</div>;
+
 export const integer = ({ value }: any) => value.toString();
+
 export const identifier = ({ value }: any) => (
   <Link to={`/artifacts/${value}`}>{value.toString().padStart(5, '0')}</Link>
 );
+
+export const image = ({ value }: any) => (
+  <div style={{ height: 60, float: 'left', paddingRight: '3px', overflow: 'hidden' }}>
+    <Image
+      style={{ height: 60, maxWidth: 60, width: 'auto' }}
+      src={isArray(value) ? (value.length > 0 ? value[0] : '') : value}
+    />
+  </div>
+);
+
 export const artifactTitle = ({ value, type }: any) => {
   const SpriteObj: any = {
     'rmUserTypes:_YwcOsRmREemK5LEaKhoOow_Module': 'allocated-requirement',
@@ -62,6 +76,7 @@ export const artifactTitle = ({ value, type }: any) => {
     </div>
   );
 };
+
 export const dateTime = ({ value }: any) => <span>{moment(value).subtract(10, 'days').calendar()}</span>;
 
-export const link = ({ value, link }: any) => <a href={'/' + link}>{value}</a>;
+export const link = ({ value, link }: any) => <a href={link ? link : value}>{value ? value : link}</a>;
diff --git a/src/formatters/index.ts b/src/formatters/index.ts
@@ -9,7 +9,7 @@
  ********************************************************************************/
 import { JsObject } from '@agentlab/sparql-jsld-client';
 
-import { base, identifier, dateTime, artifactTitle, integer, link } from './baseFormatters';
+import { base, identifier, dateTime, artifactTitle, integer, link, image } from './baseFormatters';
 import { StoreDataFormater } from './StoreDataFormater';
 import { TinyMCE } from './tinyMCE';
 
@@ -18,6 +18,7 @@ export const formatters: JsObject = {
   identifier,
   dateTime,
   artifactTitle,
+  image,
   integer,
   link,
   tinyMCE: TinyMCE,

diff --git a/stories/TreeAndForm.stories.tsx b/stories/TreeAndForm.stories.tsx
@@ -19,7 +19,7 @@ import {
   antdCells,
   antdControlRenderers,
   antdLayoutRenderers,
-  antdRataControlRenderers,
+  antdDataControlRenderers,
   Form,
   MstContextProvider,
   RendererRegistryEntry,
@@ -28,7 +28,7 @@ import {
 const antdRenderers: RendererRegistryEntry[] = [
   ...antdControlRenderers,
   ...antdLayoutRenderers,
-  ...antdRataControlRenderers,
+  ...antdDataControlRenderers,
 ];
 
 const viewDescrs = [

diff --git a/yarn.lock b/yarn.lock
@@ -2,10 +2,10 @@
 # yarn lockfile v1
 
 
-"@agentlab/sparql-jsld-client@^5.0.0-rc.8":
-  version "5.0.0-rc.8"
-  resolved "https://registry.yarnpkg.com/@agentlab/sparql-jsld-client/-/sparql-jsld-client-5.0.0-rc.8.tgz#f0902bd1c298a4f20f1a15f04fde30e74037e6d4"
-  integrity sha512-SjAfHLOn5K0Cbw2QFlSmsWm04vyrzJMOZbPc75hmVToaCUgH+lxaNEGOztjWWiCcac8Sg7McbmSVvEwQI5dJrA==
+"@agentlab/sparql-jsld-client@^5.0.0-rc.9":
+  version "5.0.0-rc.9"
+  resolved "https://registry.yarnpkg.com/@agentlab/sparql-jsld-client/-/sparql-jsld-client-5.0.0-rc.9.tgz#c91316343cdf79da8b5953103998745083a27e60"
+  integrity sha512-oxGBRsJUzZHxqUaeaOTuQx9aNM6UhopW5cVkYOtJi3UUkTwd5ytcS5FKMCnxnfta5UrI+rS2m9mtqJL05E1mWA==
   dependencies:
     "@rdfjs/data-model" "^1.2.0"
     "@types/json-schema" "^7.0.7"