@journeyapps-labs/reactor-mod-data-browser 2.0.0 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@journeyapps-labs/reactor-mod-data-browser",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "main": "./dist/index.js",
   "typings": "./dist/@types/index",
   "publishConfig": {

package/src/core/query/SimpleQuery.tsx

@@ -1,10 +1,10 @@
 import { AbstractQuery, AbstractQueryEncoded } from './AbstractQuery';
 import {
-  ActionSource,
   CheckboxWidget,
   inject,
+  MetadataWidget,
   SmartDateDisplayWidget,
-  System,
+  styled,
   TableColumn
 } from '@journeyapps-labs/reactor-mod';
 import { ConnectionStore } from '../../stores/ConnectionStore';
@@ -14,9 +14,7 @@ import { Page, PageRow } from './Page';
 import { SchemaModelDefinition } from '../SchemaModelDefinition';
 import * as _ from 'lodash';
 import * as React from 'react';
-import styled from '@emotion/styled';
 import { observable } from 'mobx';
-import { DataBrowserEntities } from '../../entities';
 
 export interface SimpleQueryOptions {
   definition?: SchemaModelDefinition;
@@ -119,12 +117,24 @@ namespace S {
   export const Empty = styled.div`
     opacity: 0.2;
   `;
-  export const Container = styled.div``;
 
   export const Preview = styled.img`
     max-height: 40px;
     max-width: 40px;
   `;
+
+  export const pill = styled.div`
+    padding: 2px 4px;
+    background: ${(p) => p.theme.table.pills};
+    border-radius: 3px;
+    font-size: 12px;
+  `;
+
+  export const Pills = styled.div`
+    display: flex;
+    column-gap: 2px;
+    row-gap: 2px;
+  `;
 }
 
 export interface CellDisplayWidgetProps {
@@ -132,6 +142,8 @@ export interface CellDisplayWidgetProps {
   cell: any;
 }
 
+const MAX_NUMBER_OF_ARR_ITEMS_TO_DISPLAY = 3;
+
 export const CellDisplayWidget: React.FC<CellDisplayWidgetProps> = (props) => {
   const { row, cell } = props;
   if (cell == null) {
@@ -141,9 +153,23 @@ export const CellDisplayWidget: React.FC<CellDisplayWidgetProps> = (props) => {
     if (cell.trim() === '') {
       return <S.Empty>empty</S.Empty>;
     }
+    return cell;
   }
   if (_.isArray(cell)) {
-    return cell.join(', ');
+    if (cell.length === 0) {
+      return <S.Empty>empty array</S.Empty>;
+    }
+
+    let items = _.slice(cell, 0, MAX_NUMBER_OF_ARR_ITEMS_TO_DISPLAY);
+
+    return (
+      <S.Pills>
+        {items.map((c) => {
+          return <S.pill key={c}>{c}</S.pill>;
+        })}
+        {items.length !== cell.length ? '...' : null}
+      </S.Pills>
+    );
   }
   if (cell instanceof Date) {
     return <SmartDateDisplayWidget date={cell} />;
@@ -152,6 +178,13 @@ export const CellDisplayWidget: React.FC<CellDisplayWidgetProps> = (props) => {
     return <CheckboxWidget checked={cell} onChange={() => {}} />;
   }
   if (cell instanceof Location) {
+    return (
+      <>
+        <MetadataWidget label={'Lat'} value={`${cell.latitude}`} />
+        <MetadataWidget label={'Long'} value={`${cell.longitude}`} />
+      </>
+    );
+
     return JSON.stringify(cell.toJSON());
   }
   if (cell instanceof Attachment) {