refactor the code

pimcore · Oct 1, 2024 · c20f5ce · c20f5ce
1 parent f7d7c85
commit c20f5ce
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 39 deletions.
diff --git a/assets/js/src/core/components/tag-list/tag-list.styles.ts b/assets/js/src/core/components/tag-list/tag-list.styles.ts
@@ -13,7 +13,12 @@
 
 import { createStyles } from 'antd-style'
 
-export const useStyles = createStyles(({ css, token }, props: { itemRowGap?: number, itemColGap?: number }) => {
+interface StylesProps {
+  itemRowGap?: number
+  itemColGap?: number
+}
+
+export const useStyles = createStyles(({ css, token }, props: StylesProps) => {
   return {
     tagListGroup: css`
       row-gap: ${props.itemRowGap ?? token.Tag.rowGapXXS}px;

diff --git a/assets/js/src/core/components/workflow-card/workflow-card.tsx b/assets/js/src/core/components/workflow-card/workflow-card.tsx
@@ -60,48 +60,46 @@ export const WorkflowCard = ({ workflow }: IWorkflowCardProps): React.JSX.Elemen
   }
 
   return (
-    <>
-      <Card
-        className={ styles.workflowCard }
-        extra={ <DropdownButton /> }
-        title={ (
-          <>
-            <p>{workflow.workflowName}</p>
+    <Card
+      className={ styles.workflowCard }
+      extra={ <DropdownButton /> }
+      title={ (
+        <>
+          <p>{workflow.workflowName}</p>
 
-            {workflow.workflowStatus !== undefined && workflow.workflowStatus?.length > 0 && (
-              workflow.workflowStatus.map((status, index) => (
-                <Tag
-                  className={ status.colorInverted ? 'color-inverted' : '' }
-                  icon={
-                    <Badge
-                      color={ status.color }
-                      styles={ status.colorInverted
-                        ? { indicator: { outline: `1px solid ${status.color}4D` } }
-                        : {}
+          {workflow.workflowStatus !== undefined && workflow.workflowStatus?.length > 0 && (
+            workflow.workflowStatus.map((status, index) => (
+              <Tag
+                className={ status.colorInverted ? 'color-inverted' : '' }
+                icon={
+                  <Badge
+                    color={ status.color }
+                    styles={ status.colorInverted
+                      ? { indicator: { outline: `1px solid ${status.color}4D` } }
+                      : {}
                     }
-                    />
+                  />
                 }
-                  key={ index }
-                  style={ status.colorInverted
-                    ? { backgroundColor: `${status.color}33` }
-                    : {}
+                key={ index }
+                style={ status.colorInverted
+                  ? { backgroundColor: `${status.color}33` }
+                  : {}
                 }
-                  title={ status.title }
-                >
-                  {status.label}
-                </Tag>
-              ))
-            )}
-          </>
+                title={ status.title }
+              >
+                {status.label}
+              </Tag>
+            ))
+          )}
+        </>
       ) }
-      >
-        {workflow.graph !== undefined && (
-          <img
-            alt={ 'workflow' }
-            src={ `data:image/svg+xml;utf8,${encodeURIComponent(workflow.graph)}` }
-          />
-        )}
-      </Card>
-    </>
+    >
+      {workflow.graph !== undefined && (
+      <img
+        alt={ 'workflow' }
+        src={ `data:image/svg+xml;utf8,${encodeURIComponent(workflow.graph)}` }
+      />
+      )}
+    </Card>
   )
 }