@flowplatform/ui - npm Package Compare versions

Comparing version 0.31.0 to 0.32.0

dist/components/table/columns/avatar-column.d.ts

@@ -6,3 +6,3 @@ import * as React from 'react';
 }> {
-    cellRender(value: any, record: any): string | JSX.Element | undefined;
+    cellRender(value: string, record: any): JSX.Element;
 }

dist/components/table/columns/avatar-column.js

 import * as React from 'react';
+import styled from 'styled-components';
 import { AlignedAvatar, AvatarColumnWrapper } from '../components';
 import { FormattedValue, hasValue } from '../utils';
+const StyledColumnWrapper = styled(AvatarColumnWrapper) `
+  ${_ => ({
+    cursor: _.clickable ? 'pointer' : 'default'
+})}
+`;
 export class AvatarColumn extends React.Component {
@@ -8,4 +14,4 @@ cellRender(value, record) {
         if (!hasValue(value))
-            return noValuePlaceholder;
-        return (React.createElement(AvatarColumnWrapper, null,
+            return React.createElement(FormattedValue, Object.assign({}, this.props, { text: noValuePlaceholder }));
+        return (React.createElement(StyledColumnWrapper, { clickable: !!(this.props.onCell && this.props.onCell(record)?.onClick) },
             React.createElement(AlignedAvatar, { src: avatarKey ? record[avatarKey] : undefined, size: 24, name: value }),
@@ -12,0 +18,0 @@ React.createElement(FormattedValue, Object.assign({}, this.props, { text: value }))));

dist/components/table/columns/column.d.ts

@@ -7,4 +7,4 @@ import * as React from 'react';
 export declare class Column extends React.Component<ColumnProps & ColumnExtraProps> {
-    cellRender(value: any): string | JSX.Element | null | undefined;
+    cellRender(value: any): JSX.Element | null;
 }
 export {};

dist/components/table/columns/column.js

@@ -8,6 +8,4 @@ import * as React from 'react';
             return null;
-        if (!hasValue(value))
-            return noValuePlaceholder;
-        return React.createElement(FormattedValue, Object.assign({}, this.props, { text: value }));
+        return (React.createElement(FormattedValue, Object.assign({}, this.props, { text: hasValue(value) ? value : noValuePlaceholder })));
     }
 }

dist/components/table/columns/date-time-column.d.ts

@@ -9,3 +9,3 @@ import * as React from 'react';
 export declare class DateTimeColumn extends React.Component<DateTimeColumnProps> {
-    cellRender(value: number | string | Date): string | JSX.Element | undefined;
+    cellRender(value: number | string | Date): JSX.Element;
 }

dist/components/table/columns/date-time-column.js

@@ -8,8 +8,8 @@ import * as React from 'react';
         const timeSeparator = this.props.timeSeparator || ':';
-        if (!hasValue)
-            return this.props.noValuePlaceholder;
-        const formattedValue = dayjs(value).format(this.props.format ||
-            `DD ${dateSeparator} MM ${dateSeparator} YYYY HH${timeSeparator}mm`);
+        let formattedValue = this.props.noValuePlaceholder;
+        if (hasValue(value))
+            formattedValue = dayjs(value).format(this.props.format ||
+                `DD ${dateSeparator} MM ${dateSeparator} YYYY HH${timeSeparator}mm`);
         return React.createElement(FormattedValue, Object.assign({}, this.props, { text: formattedValue }));
     }
 }

dist/components/table/columns/finance-column.d.ts

@@ -7,3 +7,3 @@ import * as React from 'react';
 export declare class FinanceColumn extends React.Component<FinanceColumnProps> {
-    cellRender(value: number, record: any): string | JSX.Element | undefined;
+    cellRender(value: number, record: any): JSX.Element;
 }

dist/components/table/columns/finance-column.js

@@ -8,3 +8,3 @@ import * as React from 'react';
         if (!hasValue(value))
-            return noValuePlaceholder;
+            return React.createElement(FormattedValue, Object.assign({}, this.props, { text: noValuePlaceholder }));
         const intent = value < 0 ? 'danger' : undefined;
@@ -11,0 +11,0 @@ return (React.createElement(React.Fragment, null,

dist/components/table/columns/fraction-column.d.ts

@@ -8,3 +8,3 @@ import * as React from 'react';
 export declare class FractionColumn extends React.Component<FractionColumnProps> {
-    cellRender(value: any, record: any): string | JSX.Element | undefined;
+    cellRender(value: any): JSX.Element;
 }

dist/components/table/columns/fraction-column.js

@@ -5,6 +5,6 @@ import * as React from 'react';
 export class FractionColumn extends React.Component {
-    cellRender(value, record) {
+    cellRender(value) {
         const { noValuePlaceholder, maxValue, suffix } = this.props;
         if (!hasValue(value))
-            return noValuePlaceholder;
+            return React.createElement(FormattedValue, Object.assign({}, this.props, { text: noValuePlaceholder }));
         const extractedValue = typeof value === 'object' ? value.value : value;
@@ -14,5 +14,5 @@ const extractedMaxValue = typeof value === 'object' ? value.maxValue : maxValue;
             React.createElement(FormattedValue, Object.assign({}, this.props, { text: extractedValue })),
-            extractedMaxValue && (React.createElement(MutedText, null, ` / ${extractedMaxValue}`)),
+            extractedMaxValue !== null && extractedMaxValue !== undefined && (React.createElement(MutedText, null, ` / ${extractedMaxValue}`)),
             React.createElement(MutedText, null, ` ${suffix || 'h'}`)));
     }
 }

dist/components/table/columns/hour-column.d.ts

 import * as React from 'react';
 import { ColumnProps } from '../types';
 export declare class HourColumn extends React.Component<ColumnProps> {
-    cellRender(value: string | number): string | JSX.Element | undefined;
+    cellRender(value: string | number): JSX.Element;
 }

dist/components/table/columns/hour-column.js

@@ -7,3 +7,3 @@ import * as React from 'react';
         if (!hasValue(value))
-            return this.props.noValuePlaceholder;
+            return (React.createElement(FormattedValue, Object.assign({}, this.props, { text: this.props.noValuePlaceholder })));
         return (React.createElement(React.Fragment, null,
@@ -10,0 +10,0 @@ React.createElement(FormattedValue, Object.assign({}, this.props, { text: value })),

dist/components/table/columns/multi-avatar-column.d.ts

@@ -12,4 +12,4 @@ import * as React from 'react';
 }> {
-    cellRender(value: AvatarUser[]): string | JSX.Element | undefined;
+    cellRender(value: AvatarUser[]): JSX.Element | null;
 }
 export {};

dist/components/table/columns/multi-avatar-column.js

 import * as React from 'react';
 import { StyledAvatar, StyledAvatarStack } from '../components';
-import { hasValue } from '../utils';
+import { hasValue, FormattedValue } from '../utils';
 export class MultiAvatarColumn extends React.Component {
     cellRender(value) {
         const { avatarKey = 'image', nameKey = 'name' } = this.props;
-        if (!hasValue(value) || !value.length)
-            return this.props.noValuePlaceholder;
+        if (!hasValue(value) || !value.length) {
+            if (!this.props.noValuePlaceholder)
+                return null;
+            return (React.createElement(FormattedValue, Object.assign({}, this.props, { text: this.props.noValuePlaceholder })));
+        }
         return (React.createElement(StyledAvatarStack, { limit: 9, size: 24, hasBorder: false, showMore: true }, value.map((val, i) => (React.createElement(StyledAvatar, { name: val[nameKey], src: val[avatarKey], zIndex: -i, key: i })))));
     }
 }

dist/components/table/components/bubble-hour-column.js

@@ -9,3 +9,3 @@ import styled from 'styled-components';
   align-items: center;
-  height: inherit;
+  height: 100%;
   position: relative;
@@ -12,0 +12,0 @@ z-index: 1;

dist/components/table/index.d.ts

 import RCTable from 'rc-table';
 import * as React from 'react';
 export * from './columns/avatar-column';
-export * from './columns/multi-avatar-column';
+export * from './columns/bubble-hour-column';
 export * from './columns/column';
+export * from './columns/date-time-column';
+export * from './columns/day-hour-column';
+export * from './columns/diagram-legend-column';
+export * from './columns/dictionary-column';
 export * from './columns/finance-column';
+export * from './columns/fraction-column';
 export * from './columns/hour-column';
-export * from './columns/fraction-column';
-export * from './columns/bubble-hour-column';
-export * from './columns/date-time-column';
+export * from './columns/multi-avatar-column';
 export declare type TableProps = React.ComponentProps<typeof RCTable> & {
@@ -12,0 +15,0 @@ activeId?: number;

dist/components/table/index.js

@@ -7,9 +7,12 @@ import RCTable from 'rc-table';
 export * from './columns/avatar-column';
-export * from './columns/multi-avatar-column';
+export * from './columns/bubble-hour-column';
 export * from './columns/column';
+export * from './columns/date-time-column';
+export * from './columns/day-hour-column';
+export * from './columns/diagram-legend-column';
+export * from './columns/dictionary-column';
 export * from './columns/finance-column';
+export * from './columns/fraction-column';
 export * from './columns/hour-column';
-export * from './columns/fraction-column';
-export * from './columns/bubble-hour-column';
-export * from './columns/date-time-column';
+export * from './columns/multi-avatar-column';
 export const Table = props => {
@@ -16,0 +19,0 @@ const [expandedRowKeys, setExpandedRowKeys] = React.useState([]);

dist/components/table/types.d.ts

 import * as React from 'react';
 import { Column as RCColumn } from 'rc-table';
-import { TextColor } from '@smashing/typography';
+import { TextColor, TextIntent } from '@smashing/typography';
 export declare type TextVariant = 'strong' | 'regular';
@@ -12,3 +12,4 @@ export declare type ColumnProps = React.ComponentProps<typeof RCColumn> & {
     color?: TextColor;
+    intent?: TextIntent;
     variant?: TextVariant;
 };

dist/components/table/utils/formatted-value.js

 import React from 'react';
 import { Strong, Text } from '@smashing/typography';
-export const FormattedValue = ({ text, variant, color, intent }) => {
+export const FormattedValue = ({ text = '', variant, color, intent, }) => {
     const textProps = {
         color: color || 'intense',
-        intent
+        intent,
     };
     return variant === 'regular' ? (React.createElement(Text, Object.assign({}, textProps), String(text))) : (React.createElement(Strong, Object.assign({}, textProps), String(text)));
 };

dist/components/table/utils/has-value.js

@@ -1,1 +0,1 @@
-export const hasValue = value => value !== undefined && value !== null;
+export const hasValue = (value) => value !== undefined && value !== null;

package.json

 {
   "name": "@flowplatform/ui",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "main": "dist/index.js",
@@ -5,0 +5,0 @@ "types": "dist/index.d.ts",

No alert changes

Improved metrics

Total package byte prevSize

1039002

increased by0.45%

Number of package files

166

increased by3.75%

Lines of code

3349

increased by3.56%

No dependency changes