Merge pull request #1508 from James-Baloyi/james/b/1486

James/b/1486
shesha-io · May 17, 2024 · c4846ee · c4846ee
2 parents 0f79277 + d32328f
commit c4846ee
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 6 deletions.
diff --git a/shesha-reactjs/src/components/dataList/index.tsx b/shesha-reactjs/src/components/dataList/index.tsx
@@ -193,7 +193,13 @@ export const DataList: FC<Partial<IDataListProps>> = ({
   useEffect(() => {
     if (measured?.width === 0) return;
      let res = null;
-if (orientation === 'vertical' || !listItemWidth || (listItemWidth === 'custom' && !customListItemWidth)) {
+    if(orientation === "horizontal" && listItemWidth !== 'custom'){
+      res = ({ width: '100%', minWidth: listItemWidth as unknown as number * 100 + '%' } as React.CSSProperties);
+
+    }else if (orientation === "horizontal" && listItemWidth === "custom") {
+      res = ({width: `${customListItemWidth}px`} as React.CSSProperties);
+
+    }else if (orientation === 'vertical' || !listItemWidth || (listItemWidth === 'custom' && !customListItemWidth)) {
       res =
         selectionMode === 'none'
           ? ({ width: '100%' } as React.CSSProperties)
@@ -555,11 +561,31 @@ if (orientation === 'vertical' || !listItemWidth || (listItemWidth === 'custom'
               <EmptyState noDataIcon={noDataIcon} noDataSecondaryText={noDataSecondaryText} noDataText={noDataText} />
           </Show>
 
-
           <Show when={records?.length > 0}>
-            <div className={orientation === "wrap" ? `${styles.shaDatalistWrapParent} `  : ""} style={{gap: `${cardSpacing}`, gridTemplateColumns: `repeat(auto-fit, minmax(${cardMinWidth}, 1fr))`}}>
-            { content }
-            </div>
+            {orientation === "wrap" &&
+              <div className={styles.shaDatalistWrapParent} style={{gap: `${cardSpacing}`, gridTemplateColumns: `repeat(auto-fit, minmax(${cardMinWidth}, 1fr))`}}>
+                {content}
+              </div>
+            }
+
+
+            {orientation === "horizontal" && 
+              <div className={styles.shaDatalistHorizontal}>
+              {React.Children.map(content, child => {
+              return React.cloneElement(child, { style: itemWidthCalc });
+              })}
+              </div>
+            }
+
+            {orientation === "vertical" && 
+              <div style={itemWidthCalc}>
+              {React.Children.map(content, child => {
+              return React.cloneElement(child, { style: itemWidthCalc });
+              })}
+              </div>
+            }
+
+
           </Show>
         </div>
       </ShaSpin>

diff --git a/shesha-reactjs/src/components/dataList/styles/styles.ts b/shesha-reactjs/src/components/dataList/styles/styles.ts
@@ -13,6 +13,7 @@ export const useStyles = createStyles(({ css, cx, token, prefixCls }) => {
     const shaDatalistCard = "sha-datalist-card";
     const shaDatalistActions = "sha-datalist-actions";
     const shaDatalistCell = "sha-datalist-cell";
+    const shaDatalistHorizontal = "sha-datalist-horizontal";
 
 
     const shaDatalistComponent = cx("sha-datalist-component", css`
@@ -128,6 +129,13 @@ export const useStyles = createStyles(({ css, cx, token, prefixCls }) => {
             overflow: scroll;
         }
 
+        .${shaDatalistHorizontal} {
+            display: flex;
+            flex-direction: row;
+            width: 100%;
+            overflow-x: scroll;
+        }
+
         .${shaDatalistComponentItem} {
             position: relative;
             padding-top: 5px;
@@ -162,6 +170,7 @@ export const useStyles = createStyles(({ css, cx, token, prefixCls }) => {
         shaDatalistActions,
         shaDatalistCell,
         shaDatalistWrapParent,
-        shaDatalistCard
+        shaDatalistCard,
+        shaDatalistHorizontal
     };
 });