@dartech/arsenal-ui 1.2.5 → 1.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dartech/arsenal-ui",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "author": "DAR",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/src/utils/ui-utils.tsx

@@ -3,64 +3,37 @@ import SvgIcon from '@mui/material/SvgIcon';
 import Tooltip from '@mui/material/Tooltip';
 import { CopyButton, Status } from '../lib';
 import { format } from 'date-fns';
-import { StatusVariant, TableDataType } from '../interfaces';
+import { StatusVariant } from '../interfaces';
 import JsonTypeCell from '../lib/Table/DataGrid/JsonTypeCell';
 
 export const formatTableRowValue = ({
   value,
-  type,
-  copyText,
-  status,
+  canCopy,
+  copyValue,
+  shortId,
+  fullText,
+  textParams: { displayAs = 'text', dateFormat, statusVariant },
 }: {
   value: any;
-  type?: TableDataType;
-  copyText?: string;
-  status?: StatusVariant;
+  canCopy?: boolean;
+  copyValue?: string;
+  shortId?: boolean;
+  fullText?: boolean;
+  textParams?: {
+    displayAs?:
+      | 'text'
+      | 'boolean'
+      | 'date'
+      | 'status'
+      | 'json_text'
+      | 'json_code'
+      | 'array'
+      | 'number';
+    dateFormat?: string[];
+    statusVariant?: StatusVariant;
+  };
 }) => {
-  switch (type) {
-    case 'id':
-      return (
-        <Box display="flex" alignItems="center" minWidth="100%">
-          <Tooltip title={value}>
-            <Box mr="auto">
-              {value
-                ? `${(value as string).slice(0, 6)}...${(value as string).slice(
-                    -6
-                  )}`
-                : '...'}
-            </Box>
-          </Tooltip>
-
-          <CopyButton copyText={(copyText ? copyText : value) as string} />
-        </Box>
-      );
-    case 'JSON_copy':
-      return <JsonTypeCell value={value} copyButton />;
-    case 'JSON':
-      return <JsonTypeCell value={value} />;
-    case 'JSON_text':
-      return <JsonTypeCell value={value} textField />;
-    case 'copy':
-      return (
-        <Box display="flex" alignItems="center" minWidth="100%">
-          <Tooltip title={value}>
-            <Box
-              mr="auto"
-              overflow="hidden"
-              textOverflow="ellipsis"
-              whiteSpace="nowrap"
-            >
-              {value?.length > 12
-                ? `${(value as string).slice(0, 6)}...${(value as string).slice(
-                    -6
-                  )}`
-                : value}
-            </Box>
-          </Tooltip>
-
-          <CopyButton copyText={(copyText ? copyText : value) as string} />
-        </Box>
-      );
+  switch (displayAs) {
     case 'boolean':
       return value ? (
         <SvgIcon color="primary" fontSize="small">
@@ -73,15 +46,32 @@ export const formatTableRowValue = ({
       );
     case 'date':
       return value ? (
-        <div>
-          <div>{format(new Date(value as string), 'dd.MM.yyyy')}</div>
-          <div>{format(new Date(value as string), 'HH:mm:ss')}</div>
-        </div>
+        dateFormat ? (
+          <Box>
+            {dateFormat.map((formatString) => (
+              <Box>{format(new Date(value as string), formatString)}</Box>
+            ))}
+          </Box>
+        ) : (
+          <Box>
+            <Box>{format(new Date(value as string), 'dd.MM.yyyy')}</Box>
+            <Box>{format(new Date(value as string), 'HH:mm:ss')}</Box>
+          </Box>
+        )
       ) : (
         ''
       );
     case 'status':
-      return <Status text={value as string} status={status} />;
+      return (
+        <Status
+          text={value as string}
+          status={statusVariant ? statusVariant : 'default'}
+        />
+      );
+    case 'json_text':
+      return <JsonTypeCell value={value} textField />;
+    case 'json_code':
+      return <JsonTypeCell value={value} copyButton />;
     case 'array':
       return (
         <Box>
@@ -90,13 +80,53 @@ export const formatTableRowValue = ({
           ))}
         </Box>
       );
-    default:
+    case 'number':
       return (
-        <Tooltip title={value}>
-          <div className="MuiDataGrid-cellContent" title={value}>
-            {value}
-          </div>
-        </Tooltip>
+        <Box display="flex" justifyContent="flex-end">
+          <Box>
+            {value.toLocaleString('ru-Ru', { minimumFractionDigits: 2 })}
+          </Box>
+        </Box>
+      );
+    case 'text':
+    default:
+      return value ? (
+        <Box display="flex" alignItems="center" width="100%">
+          {shortId ? (
+            <Tooltip title={value}>
+              <Box mr="auto">
+                {value
+                  ? `${(value as string).slice(0, 6)}...${(
+                      value as string
+                    ).slice(-6)}`
+                  : '...'}
+              </Box>
+            </Tooltip>
+          ) : fullText ? (
+            <Box sx={{ whiteSpace: 'normal' }} title={value}>
+              {typeof value === 'string' ? value : JSON.stringify(value)}
+            </Box>
+          ) : (
+            <Tooltip title={value}>
+              <Box className="MuiDataGrid-cellContent" title={value}>
+                {typeof value === 'string' ? value : JSON.stringify(value)}
+              </Box>
+            </Tooltip>
+          )}
+          {canCopy && (
+            <CopyButton
+              copyText={
+                copyValue
+                  ? typeof copyValue === 'string'
+                    ? copyValue
+                    : JSON.stringify(copyValue)
+                  : value
+              }
+            />
+          )}
+        </Box>
+      ) : (
+        ''
       );
   }
 };