Merge pull request #84 from ebs-integrator/development

Development
ebs-integrator · Feb 22, 2021 · 87911e2 · 87911e2
2 parents 39d680e + 44282e1
commit 87911e2
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 26 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ebs-integrator/react-ebs-ui",
-  "version": "0.0.1-beta.28",
+  "version": "0.0.1-beta.29",
   "description": "Basic React UI elements.",
   "author": "EBS Integrator",
   "maintainers": [

diff --git a/src/components/organisms/Table/Table.tsx b/src/components/organisms/Table/Table.tsx
@@ -1,7 +1,9 @@
 import * as React from 'react';
 import cn from 'classnames';
 import OldTable from 'rc-table';
+import { RenderedCell } from 'rc-table/lib/interface';
 import { Icon } from 'components/atoms';
+import { isObject } from 'libs';
 import { GenericObject } from 'types';
 
 const types: ['desc', 'asc'] = ['desc', 'asc'];
@@ -12,7 +14,7 @@ export interface Column<T> {
   className?: string;
   width?: string | number;
   onFilter?: (type: 'asc' | 'desc') => void;
-  render?: (value: T) => React.ReactNode;
+  render?: (value: T, row: GenericObject, index: number) => React.ReactNode | RenderedCell<GenericObject>;
   mobileRender?: (data: T) => React.ReactNode;
   children?: Column<T>[];
   action?: boolean;
@@ -113,15 +115,20 @@ export const Table = <T extends object>({
         {data.map((item: any) => (
           <div key={item.key} className="ebs-table__mobile-item">
             <div className="ebs-table__mobile-item-key">{item.key}</div>
-            {columns.map((column) => {
+            {columns.map((column, i) => {
               const render =
                 column.mobileRender !== undefined
-                  ? column.mobileRender(item as T)
+                  ? column.mobileRender(item)
                   : column.render !== undefined
-                  ? column.render(item as T)
+                  ? column.render(item, column, i)
                   : column.dataIndex !== undefined
-                  ? (item[column.dataIndex] as T)
+                  ? item[column.dataIndex]
                   : '---';
+              const renderChildren = !isObject(render)
+                ? render
+                : render && !isObject(render.children)
+                ? render.children
+                : render && render.children[column.dataIndex!];
 
               return (
                 <React.Fragment key={column.key}>
@@ -138,14 +145,12 @@ export const Table = <T extends object>({
                     >
                       {column.key > 1 && <span className="ebs-table__mobile-item-child-title">{column.title}:</span>}
 
-                      {render}
+                      {renderChildren}
                     </div>
                   ) : (
-                    render && (
-                      <div className="ebs-table__mobile-item-action" key={column.key}>
-                        {render}
-                      </div>
-                    )
+                    <div className="ebs-table__mobile-item-action" key={column.key}>
+                      {renderChildren}
+                    </div>
                   )}
                 </React.Fragment>
               );

diff --git a/src/libs/object/object.ts b/src/libs/object/object.ts
@@ -15,3 +15,5 @@ export const validate = (errors: string[] | { [key: string]: string[] }): string
 
   return [];
 };
+
+export const isObject = (val: any): boolean => typeof val === 'object'
diff --git a/src/styles/global-styles.scss b/src/styles/global-styles.scss
@@ -8,21 +8,20 @@
 
 html,
 body {
-  display: block;
-  font-size: $font-size-base;
-  line-height: $line-height-base;
-  color: $text-color;
   @include fontMedium;
+  display: block;
   margin: 0;
+  font-size: rem($font-size-base);
+  line-height: rem($line-height-base);
+  color: $text-color;
 
-  // TODO: Move to font-size to variables as responsive
-  // @include mq($until: desktop) {
-  //   font-size: rem(13px);
-  // }
+  @include mq($until: desktop) {
+    font-size: rem(12.5px);
+  }
 
-  // @include mq($until: small-desktop) {
-  //   font-size: rem(12px);
-  // }
+  @include mq($until: small-desktop) {
+    font-size: rem(10px);
+  }
 }
 
 * {

diff --git a/src/styles/mixins/rem-to-px.scss b/src/styles/mixins/rem-to-px.scss
@@ -1,5 +1,4 @@
 // rems to pixels
-$rem-baseline: $font-size-base !default;
 $rem-fallback: true !default;
 $rem-px-only: false !default;
 
@@ -20,9 +19,9 @@ $rem-px-only: false !default;
   $separator: rem-separator($values);
   @each $value in $values {
     @if type-of($value) == 'number' and unit($value) == 'rem' and $to== 'px' {
-      $result: append($result, $value / 1rem * $rem-baseline, $separator);
+      $result: append($result, $value / 1rem * $font-size-base, $separator);
     } @else if type-of($value) == 'number' and unit($value) == 'px' and $to== 'rem' {
-      $result: append($result, $value / ($rem-baseline / 1rem), $separator);
+      $result: append($result, $value / ($font-size-base / 1rem), $separator);
     } @else if type-of($value) == 'list' {
       $result: append($result, rem-convert($to, $value...), $separator);
     } @else {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -15,3 +15,5 @@ export const validate = (errors: string[] \| { [key: string]: string[] }): string

		return [];
		};

		export const isObject = (val: any): boolean => typeof val === 'object'