pixel-react 1.5.8 → 1.6.0

package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import * as Actions from './actions';
+import * as Point from './point';
 import * as Types from './types';
 import useDispatch from './use-dispatch';
 import useSelector from './use-selector';
@@ -15,7 +16,10 @@ const RowIndicator: Types.RowIndicatorComponent = ({
   deleteRow,
   data,
 }) => {
-  const [height, setHeight] = React.useState(0);
+  const dispatch = useDispatch();
+  const rowHeight = useSelector(
+    (state) => state.rowDimensions[row]?.height || 28
+  );
 
   const options = [
     {
@@ -38,37 +42,38 @@ const RowIndicator: Types.RowIndicatorComponent = ({
     },
   ];
 
-  const onMouseDown = (e: React.MouseEvent) => {
-    const startY = e.clientY;
+  const onMouseDown = React.useCallback(
+    (event: React.MouseEvent) => {
+      onSelect(row, event.shiftKey);
 
-    const onMouseMove = (moveEvent: MouseEvent) => {
-      const newHeight = height + (moveEvent.clientY - startY);
-      setHeight(newHeight);
+      const startY = event.clientY;
+      const initialHeight = rowHeight;
 
-      const selectedAllRow = document.querySelector(
-        '.ff-spreadsheet-floating-rect--selected'
-      );
-      const selectedSingleRow = document.querySelector(
-        '.ff-spreadsheet-active-cell'
-      );
+      const onMouseMove = (moveEvent: MouseEvent) => {
+        const newHeight = Math.max(
+          28,
+          initialHeight + (moveEvent.clientY - startY)
+        );
+        dispatch(Actions.setRowHeight(row, newHeight));
+      };
 
-      if (
-        selectedAllRow instanceof HTMLElement &&
-        selectedSingleRow instanceof HTMLElement
-      ) {
-        selectedAllRow.style.height = `${newHeight}px`;
-        selectedSingleRow.style.height = `${newHeight}px`;
-      }
-    };
+      const onMouseUp = () => {
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp);
+        dispatch(Actions.dragEnd());
+      };
 
-    const onMouseUp = () => {
-      document.removeEventListener('mousemove', onMouseMove);
-      document.removeEventListener('mouseup', onMouseUp);
-    };
+      document.addEventListener('mousemove', onMouseMove);
+      document.addEventListener('mouseup', onMouseUp);
+      dispatch(Actions.dragEnd());
+    },
+    [onSelect, rowHeight, row]
+  );
 
-    document.addEventListener('mousemove', onMouseMove);
-    document.addEventListener('mouseup', onMouseUp);
-  };
+  const activate = React.useCallback(
+    (point: Point.Point) => dispatch(Actions.activate(point)),
+    [dispatch]
+  );
 
   const handleClick = React.useCallback(
     (event: React.MouseEvent) => {
@@ -97,7 +102,7 @@ const RowIndicator: Types.RowIndicatorComponent = ({
 
   return (
     <th
-      style={{ height: `${height}px`, minWidth: '60px', position: 'relative' }}
+      style={{ height: `${rowHeight}px`, position: 'relative' }} //Dynamic value, Inline Styling required
       className={classNames('ff-spreadsheet-header', {
         'ff-spreadsheet-header--selected': selected,
       })}
@@ -108,6 +113,7 @@ const RowIndicator: Types.RowIndicatorComponent = ({
       {label !== undefined ? label : row + 1}
       <div
         onMouseDown={onMouseDown}
+        onClick={() => activate({ row, column: -1 })}
         style={{
           zIndex: 'inherit',
           height: '2px',

package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss

@@ -75,35 +75,6 @@
   text-align: left;
   box-sizing: border-box;
   user-select: none;
-
-  .ff-option-card {
-    position: absolute;
-    border: 1px solid var(--option-card-border-color);
-    background: var(--option-card-bg-color);
-    border-radius: 4px;
-    margin: 2px;
-    min-height: 32px;
-    min-width: 111px;
-    z-index: 100000;
-    white-space: nowrap;
-
-    .ff-options {
-      @extend .fontSm;
-      cursor: pointer;
-      border-radius: 4px;
-      display: flex;
-      align-items: center;
-      padding: 8px;
-      line-height: 16px;
-      gap: 8px;
-      &:hover {
-        background-color: var(--hover-color);
-      }
-      label {
-        cursor: pointer;
-      }
-    }
-  }
 }
 
 .ff-spreadsheet-header {

package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts

@@ -44,11 +44,38 @@ export const ADD_ROW_TOP = 'ADD_ROW_TOP';
 export const ADD_COLUMN_LEFT = 'ADD_COLUMN_LEFT';
 export const DELETE_ROW = 'DELETE_ROW';
 export const DELETE_COLUMN = 'DELETE_COLUMN';
+export const SET_ROW_HEIGHT = 'SET_ROW_HEIGHT';
+export const SET_COLUMN_POSITION = 'SET_COLUMN_POSITION';
 
 export type BaseAction<T extends string> = {
   type: T;
 };
 
+export type SetRowHeight = BaseAction<typeof SET_ROW_HEIGHT> & {
+  payload: { row: number; height: number };
+};
+
+export function setRowHeight(row: number, height: number): SetRowHeight {
+  return {
+    type: SET_ROW_HEIGHT,
+    payload: { row, height },
+  };
+}
+
+export type SetColumnPosition = BaseAction<typeof SET_COLUMN_POSITION> & {
+  payload: { column: number; width: number };
+};
+
+export function setColumnPosition(
+  column: number,
+  width: number
+): SetColumnPosition {
+  return {
+    type: SET_COLUMN_POSITION,
+    payload: { column, width },
+  };
+}
+
 export type BoldStyle = BaseAction<typeof BOLD> & {
   payload: {
     data: Matrix<CellBase>;
@@ -516,4 +543,6 @@ export type Action =
   | AddColumnLeft
   | DeleteRow
   | DeleteColumn
+  | SetRowHeight
+  | SetColumnPosition
   | BlurAction;

package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts

@@ -571,6 +571,39 @@ export default function reducer(
       return state;
     }
 
+    case Actions.SET_ROW_HEIGHT: {
+      const { row, height } = action.payload;
+      const prevDimensions = state.rowDimensions[row] || { top: 0, height: 0 };
+      return {
+        ...state,
+        rowDimensions: {
+          ...state.rowDimensions,
+          [row]: {
+            top: prevDimensions.top,
+            height,
+          },
+        },
+      };
+    }
+
+    case Actions.SET_COLUMN_POSITION: {
+      const { column, width } = action.payload;
+      const prevDimensions = state.columnDimensions[column] || {
+        left: 0,
+        width: 0,
+      };
+      return {
+        ...state,
+        columnDimensions: {
+          ...state.columnDimensions,
+          [column]: {
+            left: prevDimensions.left,
+            width,
+          },
+        },
+      };
+    }
+
     case Actions.DRAG_START: {
       return { ...state, dragging: true };
     }

package/src/components/Excel/ExcelFile.stories.tsx

@@ -30,91 +30,101 @@ export const Default: Story = {
     excelData: {
       sheets: [
         {
-          sheetName: 'Sheet1',
+          sheetName: 'fireflink',
           data: [
             [
               {
-                value: 'A1',
+                value: 'Test Sample Data 1',
                 style: {
-                  fontSize: '12px',
-                  fontFamily: 'Arial',
-                  color: 'var(--drawer-footer-bg)',
-                  backgroundColor: 'var(--text-bg-highlight)',
+                  name: 'Arial',
+                  size: 11,
+                  bold: true,
+                  italic: false,
+                  color: 'ffffff', // Sample data from backend without #
+                  backgroundColor: '434db8', // Sample data from backend without #
+                  borderColor: 'F2F2F2', // Sample data from backend without #
+                  border: {
+                    top: 'NONE',
+                    bottom: 'NONE',
+                    left: 'NONE',
+                    right: 'NONE',
+                  },
+                  alignment: {
+                    horizontal: 'GENERAL',
+                    vertical: 'BOTTOM',
+                    wrapText: false,
+                  },
                 },
               },
               {
-                value: 'SUM(A1+B1)',
-                // isFormula:true,
+                value: 'Test Data 2',
                 style: {
-                  fontSize: '12px',
-                  fontFamily: 'Arial',
-                  color: 'var(--text-bg-highlight)',
-                  backgroundColor: 'var(--ff-card-passed-status-bg-color)',
+                  name: 'Arial',
+                  size: 12,
+                  bold: true,
+                  italic: true,
+                  color: 'EB5B00', // Sample data from backend without #
+                  backgroundColor: '88C273', // Sample data from backend without #
+                  borderColor: 'F2F2F2', // Sample data from backend without #
+                  border: {
+                    top: 'NONE',
+                    bottom: 'NONE',
+                    left: 'NONE',
+                    right: 'NONE',
+                  },
+                  alignment: {
+                    horizontal: 'GENERAL',
+                    vertical: 'BOTTOM',
+                    wrapText: false,
+                  },
                 },
               },
             ],
             [
               {
-                value: 'A2',
+                value: 'Test Data 3',
                 style: {
-                  fontSize: '12px',
-                  fontFamily: 'Arial',
-                  color: 'var(--drawer-footer-bg)',
-                  backgroundColor: 'var(--ff-card-passed-status-bg-color)',
+                  name: 'Arial',
+                  size: 11,
+                  bold: false,
+                  italic: false,
+                  color: '000000', // Sample data from backend without #
+                  backgroundColor: 'EB5B00', // Sample data from backend without #
+                  borderColor: 'F2F2F2', // Sample data from backend without #
+                  border: {
+                    top: 'NONE',
+                    bottom: 'NONE',
+                    left: 'NONE',
+                    right: 'NONE',
+                  },
+                  alignment: {
+                    horizontal: 'GENERAL',
+                    vertical: 'BOTTOM',
+                    wrapText: false,
+                  },
                 },
               },
               {
-                value: 'B2',
+                value: 'Test Sample Data 4',
                 style: {
-                  fontSize: '12px',
-                  fontFamily: 'Arial',
-                  color: 'var(--ff-card-passed-status-bg-color)',
-                  backgroundColor: 'var(--text-bg-highlight)',
-                },
-              },
-            ],
-          ],
-        },
-        {
-          sheetName: 'Sheet2',
-          data: [
-            [
-              {
-                value: 'Thaneshwaran',
-                style: {
-                  fontSize: '12px',
-                  fontFamily: 'Arial',
-                  color: 'var(--text-bg-highlight)',
-                  backgroundColor: 'var(--tooltip-bg-color)',
-                },
-              },
-              {
-                value: 'waran',
-                style: {
-                  fontSize: '12px',
-                  fontFamily: 'Arial',
-                  color: 'var(--text-bg-highlight)',
-                  backgroundColor: 'var(--ff-card-passed-status-bg-color)',
-                },
-              },
-            ],
-            [
-              {
-                value: 'Sheet',
-                style: {
-                  fontSize: '12px',
-                  fontFamily: 'Arial',
-                  color: 'var(--drawer-footer-bg)',
-                  backgroundColor: 'var(--ff-card-passed-status-bg-color)',
-                },
-              },
-              {
-                value: 'Two',
-                style: {
-                  fontSize: '12px',
-                  fontFamily: 'Arial',
-                  color: 'var(--ff-card-passed-status-bg-color)',
-                  backgroundColor: 'var(--text-bg-highlight)',
+                  name: 'Arial',
+                  size: 11,
+                  bold: false,
+                  italic: false,
+                  color: '3D0301', // Sample data from backend without #
+                  backgroundColor: 'C6E7FF', // Sample data from backend without #
+                  borderColor: 'F2F2F2', // Sample data from backend without #
+                  border: {
+                    top: 'NONE',
+                    bottom: 'NONE',
+                    left: 'NONE',
+                    right: 'NONE',
+                  },
+                  alignment: {
+                    horizontal: 'GENERAL',
+                    vertical: 'BOTTOM',
+                    wrapText: false,
+                  },
                 },
               },
             ],

package/src/components/Excel/Types.ts

@@ -31,10 +31,32 @@ interface WorkData {
   value: string;
 
   /** Styling options for the cell */
-  style: React.CSSProperties;
+  style: BackendStyle;
   type?: boolean;
 }
 
+type BackendStyle = {
+  name: string;
+  size: number;
+  bold: boolean;
+  italic: boolean;
+  color: string;
+  backgroundColor: string;
+  borderColor: string;
+  underline:string;
+  border: {
+    top: string;
+    bottom: string;
+    left: string;
+    right: string;
+  };
+  alignment: {
+    horizontal: string;
+    vertical: string;
+    wrapText: boolean;
+  };
+};
+
 /** A generic type to represent a 2D matrix of any type (or undefined values) */
 type Matrix<T> = (T | undefined)[][];
 

package/src/components/Excel/dataConversion.ts

@@ -0,0 +1,173 @@
+const getTextAlignment = (
+  alignment: string
+): 'left' | 'right' | 'center' | 'justify' => {
+  switch (alignment.toLowerCase()) {
+    case 'left':
+      return 'left';
+    case 'right':
+      return 'right';
+    case 'center':
+      return 'center';
+    case 'justify':
+      return 'justify';
+    default:
+      return 'left';
+  }
+};
+
+const getTextDecoration = (
+  textDecoration: string
+): 'solid' | 'double' | 'dotted' | 'dashed' | 'wavy' => {
+  if (!textDecoration) {
+    return 'solid';
+  }
+  switch (textDecoration.toLowerCase()) {
+    case 'solid':
+      return 'solid';
+    case 'dotted':
+      return 'dotted';
+    case 'dashed':
+      return 'dashed';
+    case 'wavy':
+      return 'wavy';
+    default:
+      return 'solid';
+  }
+};
+
+const getTextAlignmentBack = (
+  alignment: 'left' | 'right' | 'center' | 'justify'
+): string => {
+  switch (alignment) {
+    case 'left':
+      return 'left';
+    case 'right':
+      return 'right';
+    case 'center':
+      return 'center';
+    case 'justify':
+      return 'justify';
+    default:
+      return 'left';
+  }
+};
+
+export const getTextDecorationBack = (
+  textDecoration: string
+): 'solid' | 'dotted' | 'dashed' | 'wavy' | 'NONE' => {  
+  switch (textDecoration.toLowerCase()) {
+    case 'solid':
+      return 'solid';
+    case 'dotted':
+      return 'dotted';
+    case 'dashed':
+      return 'dashed';
+    case 'wavy':
+      return 'wavy';
+    case 'underline':
+      return 'NONE';
+    default:
+      return 'solid';
+  }
+};
+
+export function convertStyleToFrontend(
+  backendStyle: BackendStyle
+): React.CSSProperties {
+  return {
+    fontSize: `${backendStyle.size}px`,
+    fontFamily: backendStyle.name,
+    color: `#${backendStyle.color}`,
+    backgroundColor: `#${backendStyle.backgroundColor}`,
+    fontWeight: backendStyle.bold ? 'bold' : 'normal',
+    fontStyle: backendStyle.italic ? 'italic' : 'normal',
+    textDecoration: backendStyle.underline ? 'underline' : 'value',
+    textDecorationStyle: getTextDecoration(backendStyle.underline),
+    borderTop:
+      backendStyle.border.top === 'NONE'
+        ? 'none'
+        : `1px solid ${backendStyle.borderColor}`,
+    borderRight:
+      backendStyle.border.right === 'NONE'
+        ? 'none'
+        : `1px solid ${backendStyle.borderColor}`,
+    borderBottom:
+      backendStyle.border.bottom === 'NONE'
+        ? 'none'
+        : `1px solid ${backendStyle.borderColor}`,
+    borderLeft:
+      backendStyle.border.left === 'NONE'
+        ? 'none'
+        : `1px solid ${backendStyle.borderColor}`,
+    textAlign: getTextAlignment(backendStyle.alignment.horizontal),
+  };
+}
+
+const getBorderStyle = (
+  border: string | undefined
+): 'NONE' | 'THIN' | 'MEDIUM' | 'THICK' => {
+  if (!border || border === 'none') {
+    return 'NONE';
+  }
+  if (
+    border.includes('solid') ||
+    border.includes('dashed') ||
+    border.includes('dotted')
+  ) {
+    if (border.includes('2px') || border.includes('thin')) {
+      return 'THIN';
+    } else if (border.includes('3px') || border.includes('medium')) {
+      return 'MEDIUM';
+    } else if (border.includes('4px') || border.includes('thick')) {
+      return 'THICK';
+    }
+  }
+  return 'THIN';
+};
+
+export const convertStyleToBackend = (
+  frontendStyle: React.CSSProperties
+): BackendStyle => {
+  return {
+    name: frontendStyle.fontFamily || 'Arial',
+    size: parseInt(frontendStyle.fontSize?.toString() || '11', 10),
+    bold: frontendStyle.fontWeight === 'bold',
+    italic: frontendStyle.fontStyle === 'italic',
+    underline:"solid",
+    color: frontendStyle.color?.replace('#', '') || '000000',
+    backgroundColor:
+      frontendStyle.backgroundColor?.replace('#', '') || 'FFFFFF',
+    borderColor:
+      frontendStyle.borderTop &&
+      frontendStyle.borderTop.toString().includes('solid')
+        ? 'F2F2F2'
+        : '000000',
+    border: {
+      top: getBorderStyle(
+        frontendStyle.borderTop ? frontendStyle.borderTop.toString() : undefined
+      ),
+      right: getBorderStyle(
+        frontendStyle.borderRight
+          ? frontendStyle.borderRight.toString()
+          : undefined
+      ),
+      bottom: getBorderStyle(
+        frontendStyle.borderBottom
+          ? frontendStyle.borderBottom.toString()
+          : undefined
+      ),
+      left: getBorderStyle(
+        frontendStyle.borderLeft
+          ? frontendStyle.borderLeft.toString()
+          : undefined
+      ),
+    },
+    alignment: {
+      horizontal: getTextAlignmentBack(
+        frontendStyle.textAlign as 'left' | 'right' | 'center' | 'justify'
+      ),
+      vertical: 'BOTTOM',
+      wrapText: false,
+    },
+  };
+};

package/src/components/FieldSet/FieldSet.scss

@@ -0,0 +1,9 @@
+.ff_fieldSet_container {
+  .ff_fieldSet {
+    border-color: var(--ff-connecting-branch-modal-border);
+    border-radius: 5px;
+    .ff_legend_container{
+        display: flex;
+    }
+  }
+}