pixel-react 1.10.4 → 1.10.6

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

@@ -15,6 +15,8 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
   setContextMenu,
   deleteColumn,
   addColumnLeft,
+  addColumnRight,
+  columnContextEnable,
   data,
 }) => {
   const dispatch = useDispatch();
@@ -25,14 +27,23 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
 
   const options = [
     {
-      label: 'Add Column',
-      value: 'Add Column',
+      label: 'Add Column Left',
+      value: 'Add Column Left',
       iconName: 'plus_icon',
       action: () => {
         addColumnLeft(data);
       },
       disable: false,
     },
+    {
+      label: 'Add Column Right',
+      value: 'Add Column Right',
+      iconName: 'plus_icon',
+      action: () => {
+        addColumnRight(data);
+      },
+      disable: false,
+    },
     {
       label: 'Delete Column',
       value: 'Delete Column',
@@ -92,7 +103,7 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
       onSelect(column, event.shiftKey);
 
       setContextMenu({
-        open: true,
+        open: columnContextEnable,
         position: {
           x: event.pageX,
           y: event.pageY,

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

@@ -32,6 +32,7 @@ const DataEditor: React.FC<Types.DataEditorProps> = ({ onChange, cell }) => {
         onChange={handleChange}
         value={value}
         autoFocus
+        disabled={cell?.isDisable}
       />
     </div>
   );

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

@@ -14,7 +14,9 @@ const RowIndicator: Types.RowIndicatorComponent = ({
   onSelect,
   setContextMenu,
   addRowTop,
+  addRowBottom,
   deleteRow,
+  rowContextEnable,
   data,
 }) => {
   const dispatch = useDispatch();
@@ -24,14 +26,23 @@ const RowIndicator: Types.RowIndicatorComponent = ({
 
   const options = [
     {
-      label: 'Add Row',
-      value: 'Add Row',
+      label: 'Add Row Top',
+      value: 'Add Row Top',
       iconName: 'plus_icon',
       action: () => {
         addRowTop(data);
       },
       disable: false,
     },
+    {
+      label: 'Add Row Bottom',
+      value: 'Add Row Bottom',
+      iconName: 'plus_icon',
+      action: () => {
+        addRowBottom(data);
+      },
+      disable: false,
+    },
     {
       label: 'Delete Row',
       value: 'Delete Row',
@@ -90,10 +101,10 @@ const RowIndicator: Types.RowIndicatorComponent = ({
       onSelect(row, event.shiftKey);
 
       setContextMenu({
-        open: true,
+        open: rowContextEnable,
         position: {
-          x: event.pageX ,
-          y: event.pageY ,
+          x: event.pageX,
+          y: event.pageY,
         },
         options: options,
       });

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

@@ -12,6 +12,10 @@
     padding: 4px 8px;
     margin-bottom: 20px;
   }
+  
+  .ff-excel-toolbar-container-hide {
+    display: none;
+  }
 
   .ff-excel-spreadsheet {
     --background-color: var(--drawer-footer-bg);
@@ -19,7 +23,7 @@
     --readonly-text-color: var(--toggle-strip-active);
     --outline-color: var(--toggle-strip-active);
     --outline-background-color: var(--overlay-bg);
-    --border-color: var(--excel-sheet-border);
+    --border-color: var(--excel-header-border);
     --header-background-color: var(--excel-header-bg);
     --elevation: var(--brand-color);
 
@@ -39,6 +43,13 @@
     top: 59px;
   }
 
+  .ff-excel-header-hider-remover {
+    position: absolute;
+    background-color: var(--excel-header-border);
+    z-index: 500;
+    left: -1px;
+  }
+
   .ff-excel-header-column-hider {
     height: 34px;
     width: 100%;

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

@@ -101,6 +101,7 @@ export type Props<CellType extends Types.CellBase> = {
   setContextMenu: React.Dispatch<React.SetStateAction<Types.ContextMenuState>>;
   /** Set your dynamic sheet Height*/
   sheetHeight: string;
+  toolbar?: 'show' | 'hide';
   contextOption?: {
     open: boolean;
     options: {
@@ -110,6 +111,8 @@ export type Props<CellType extends Types.CellBase> = {
       action: () => void;
     }[];
   };
+  columnContextEnable: boolean;
+  rowContextEnable: boolean;
 };
 
 /**
@@ -122,6 +125,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
     className,
     columnLabels,
     rowLabels,
+    toolbar,
     onKeyDown,
     Table = DefaultTable,
     Row = DefaultRow,
@@ -193,7 +197,9 @@ const Spreadsheet = <CellType extends Types.CellBase>(
   const setFormatePainter = useAction(Actions.formatePainter);
 
   const addRowTop = useAction(Actions.addRowTop);
+  const addRowBottom = useAction(Actions.addRowBottom);
   const addColumnLeft = useAction(Actions.addColumnLeft);
+  const addColumnRight = useAction(Actions.addColumnRight);
   const deleteRow = useAction(Actions.deleteRow);
   const deleteColumn = useAction(Actions.deleteColumn);
 
@@ -409,7 +415,9 @@ const Spreadsheet = <CellType extends Types.CellBase>(
                 }
                 deleteColumn={deleteColumn}
                 addColumnLeft={addColumnLeft}
+                addColumnRight={addColumnRight}
                 data={props.data}
+                columnContextEnable={props.columnContextEnable}
               />
             ) : (
               <ColumnIndicator
@@ -418,7 +426,9 @@ const Spreadsheet = <CellType extends Types.CellBase>(
                 setContextMenu={props.setContextMenu}
                 deleteColumn={deleteColumn}
                 addColumnLeft={addColumnLeft}
+                addColumnRight={addColumnRight}
                 data={props.data}
+                columnContextEnable={props.columnContextEnable}
               />
             )
           )}
@@ -431,8 +441,10 @@ const Spreadsheet = <CellType extends Types.CellBase>(
                 label={rowNumber in rowLabels ? rowLabels[rowNumber] : null}
                 row={rowNumber}
                 addRowTop={addRowTop}
-                setContextMenu={props.setContextMenu}
+                addRowBottom={addRowBottom}
                 deleteRow={deleteRow}
+                setContextMenu={props.setContextMenu}
+                rowContextEnable={props.rowContextEnable}
                 data={props.data}
               />
             ) : (
@@ -440,8 +452,10 @@ const Spreadsheet = <CellType extends Types.CellBase>(
                 key={rowNumber}
                 row={rowNumber}
                 addRowTop={addRowTop}
-                setContextMenu={props.setContextMenu}
+                addRowBottom={addRowBottom}
                 deleteRow={deleteRow}
+                setContextMenu={props.setContextMenu}
+                rowContextEnable={props.rowContextEnable}
                 data={props.data}
               />
             )}
@@ -489,10 +503,22 @@ const Spreadsheet = <CellType extends Types.CellBase>(
   const rootNode = React.useMemo(
     () => (
       <div className="ff-excel">
-        <div className="ff-excel-header-hider ff-excel-header-column-hider"></div>
-        <div className="ff-excel-header-hider ff-excel-header-row-hider"></div>
-        <div className="ff-excel-toolbar-container">
+        <div
+          className={classNames('ff-excel-header-column-hider', {
+            'ff-excel-header-hider-remover': toolbar === 'hide',
+            'ff-excel-header-hider': toolbar !== 'hide',
+          })}
+        />
+        <div className="ff-excel-header-hider ff-excel-header-row-hider" />
+        <div
+          className={
+            toolbar === 'hide'
+              ? 'ff-excel-toolbar-container-hide'
+              : 'ff-excel-toolbar-container'
+          }
+        >
           <ExcelToolBar
+            toolbar={toolbar}
             onBold={onBold}
             onItalic={onItalic}
             setUnderlineType={setUnderlineType}

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

@@ -41,7 +41,9 @@ export const COLOR = 'COLOR';
 export const BACKGROUND_COLOR = 'BACKGROUND_COLOR';
 export const FORMATE_PAINTER = 'FORMATE_PAINTER';
 export const ADD_ROW_TOP = 'ADD_ROW_TOP';
+export const ADD_ROW_BOTTOM = 'ADD_ROW_BOTTOM';
 export const ADD_COLUMN_LEFT = 'ADD_COLUMN_LEFT';
+export const ADD_COLUMN_RIGHT = 'ADD_COLUMN_RIGHT';
 export const DELETE_ROW = 'DELETE_ROW';
 export const DELETE_COLUMN = 'DELETE_COLUMN';
 export const SET_ROW_HEIGHT = 'SET_ROW_HEIGHT';
@@ -253,6 +255,19 @@ export function addRowTop(data: Matrix<CellBase>): AddRowTop {
     payload: { data },
   };
 }
+export type AddRowBottom = BaseAction<typeof ADD_ROW_BOTTOM> & {
+  payload: {
+    data: Matrix<CellBase>;
+  };
+};
+
+export function addRowBottom(data: Matrix<CellBase>): AddRowBottom {
+  return {
+    type: ADD_ROW_BOTTOM,
+    payload: { data },
+  };
+}
+
 export type AddColumnLeft = BaseAction<typeof ADD_COLUMN_LEFT> & {
   payload: {
     data: Matrix<CellBase>;
@@ -266,6 +281,19 @@ export function addColumnLeft(data: Matrix<CellBase>): AddColumnLeft {
   };
 }
 
+export type AddColumnRight = BaseAction<typeof ADD_COLUMN_RIGHT> & {
+  payload: {
+    data: Matrix<CellBase>;
+  };
+};
+
+export function addColumnRight(data: Matrix<CellBase>): AddColumnRight {
+  return {
+    type: ADD_COLUMN_RIGHT,
+    payload: { data },
+  };
+}
+
 export type DeleteRow = BaseAction<typeof DELETE_ROW> & {
   payload: {
     data: Matrix<CellBase>;
@@ -566,7 +594,9 @@ export type Action =
   | BackgroundStyle
   | FormatePainterStyle
   | AddRowTop
+  | AddRowBottom
   | AddColumnLeft
+  | AddColumnRight
   | DeleteRow
   | DeleteColumn
   | SetRowHeight

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

@@ -97,6 +97,27 @@ export default function reducer(
       };
     }
 
+    case Actions.ADD_ROW_BOTTOM: {
+      let { selectedRow, selectedColumn, model } = state;
+      if (checkEmpty(selectedRow)) {
+        return state;
+      }
+      selectedRow = selectedRow as number;
+      let updatedData = [...model.data];
+      const newRow = Array(updatedData[0]?.length || 0).fill({
+        value: undefined,
+      });
+      updatedData.splice(selectedRow + 1, 0, newRow);
+      const updatedModel = new Model(model.createFormulaParser, updatedData);
+
+      return {
+        ...state,
+        model: updatedModel,
+        selectedRow: selectedRow + 1,
+        selectedColumn: selectedColumn,
+      };
+    }
+
     case Actions.ADD_COLUMN_LEFT: {
       let { selectedRow, selectedColumn, model } = state;
       if (checkEmpty(selectedColumn)) {
@@ -123,6 +144,32 @@ export default function reducer(
       };
     }
 
+    case Actions.ADD_COLUMN_RIGHT: {
+      let { selectedRow, selectedColumn, model } = state;
+      if (checkEmpty(selectedColumn)) {
+        return state;
+      }
+      selectedColumn = selectedColumn as number;
+      let updatedData = [...model.data];
+      updatedData = updatedData.map((row) => {
+        const newCell = { value: undefined };
+        return [
+          ...row.slice(0, selectedColumn + 1),
+          newCell,
+          ...row.slice(selectedColumn + 1),
+        ];
+      });
+
+      const updatedModel = new Model(model.createFormulaParser, updatedData);
+
+      return {
+        ...state,
+        model: updatedModel,
+        selectedRow: selectedRow,
+        selectedColumn: selectedColumn + 1,
+      };
+    }
+
     case Actions.DELETE_ROW: {
       let { selectedRow, selectedColumn, model } = state;
       if (checkEmpty(selectedRow)) {

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

@@ -218,10 +218,10 @@ export function applyBorderToCells(
         case 'border-none':
           updatedCell.style = {
             ...currentCell.style,
-            borderRight: `1px solid var(--excel-sheet-border)`,
-            borderLeft: `1px solid var(--excel-sheet-border)`,
-            borderTop: `1px solid var(--excel-sheet-border)`,
-            borderBottom: `1px solid var(--excel-sheet-border)`,
+            borderRight: `1px solid var(--excel-header-border)`,
+            borderLeft: `1px solid var(--excel-header-border)`,
+            borderTop: `1px solid var(--excel-header-border)`,
+            borderBottom: `1px solid var(--excel-header-border)`,
           };
           break;
         case 'border-right':

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

@@ -23,6 +23,7 @@ export type CellBase<Value = any> = {
   DataEditor?: DataEditorComponent<CellBase<Value>>;
   /** Custom component to render when the cell is viewed, if not defined would default to the component defined for the Spreadsheet */
   DataViewer?: DataViewerComponent<CellBase<Value>>;
+  isDisable?: boolean;
 };
 
 /**
@@ -195,6 +196,9 @@ export type RowIndicatorProps = {
 
   addRowTop: (data: MatrixValue.Matrix<CellBase>) => void;
 
+  addRowBottom: (data: MatrixValue.Matrix<CellBase>) => void;
+  rowContextEnable: boolean;
+
   data: MatrixValue.Matrix<CellBase>;
 };
 
@@ -236,6 +240,8 @@ export type ColumnIndicatorProps = {
 
   addColumnLeft: (data: MatrixValue.Matrix<CellBase>) => void;
 
+  addColumnRight: (data: MatrixValue.Matrix<CellBase>) => void;
+  columnContextEnable: boolean;
   data: MatrixValue.Matrix<CellBase>;
 };
 

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

@@ -55,6 +55,7 @@ export const Default: Story = {
                   wrapText: false,
                 },
               },
+              isDisable:true,
             },
             {
               value: 'Test Data 2',
@@ -134,7 +135,12 @@ export const Default: Story = {
         ],
       },
     ],
-    toolbar: 'show',
+    toolbar: 'hide',
+    sheetBar: 'hide',
+    colCount: 10,
+    rowCount: 10,
+    columnContextEnable: true,
+    rowContextEnable: true,
     contextOption: {
       open: true,
       options: [
@@ -155,7 +161,9 @@ export const Default: Story = {
     contextHeightPositioning: -220,
     contextWidthPositioning: -180,
     sheetHeight: '300px',
-    onSave: () => {},
+    onSave: (val) => {
+      console.log(val);
+    },
   },
 };
 

package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx

@@ -53,19 +53,19 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
 
   // Default style to Excel
   const basicStyle: React.CSSProperties = {
-    color: 'var(--input-hover-border-color)',
-    backgroundColor: 'var(--drawer-footer-bg)',
-    borderColor: 'var(--excel-sheet-border)',
+    color: '#e42525', // Needed hexacode for backend
+    backgroundColor: '#e42525', // Needed hexacode for backend
+    borderColor: '#c9c9c9', // Needed hexacode for backend
     textDecoration: 'none solid',
-    borderRight: `1px solid var(--excel-sheet-border)`,
-    borderLeft: `1px solid var(--excel-sheet-border)`,
-    borderTop: `1px solid var(--excel-sheet-border)`,
-    borderBottom: `1px solid var(--excel-sheet-border)`,
+    borderRight: `1px solid var(--excel-header-border)`,
+    borderLeft: `1px solid var(--excel-header-border)`,
+    borderTop: `1px solid var(--excel-header-border)`,
+    borderBottom: `1px solid var(--excel-header-border)`,
     fontSize: '15px',
     fontWeight: 'normal',
     fontStyle: 'normal',
     fontFamily: 'Times New Roman',
-    textAlign: 'center',
+    textAlign: 'left',
   };
 
   const [cellStyle, setCellStyle] = useState(cell?.style || basicStyle);
@@ -103,9 +103,9 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
     value: '11',
   });
   const [colorContainer, setColorPicker] = useState<ColorContainer>({
-    color: 'var(--error-light)',
-    backgroundColor: 'var(--error-light)',
-    borderColor: 'var(--input-hover-border-color)',
+    color: '#e42525', // Needed hexacode for backend
+    backgroundColor: '#e42525', // Needed hexacode for backend
+    borderColor: '#c9c9c9', // Needed hexacode for backend
   });
 
   const borderTypeIcon = [

package/src/components/Excel/Types.ts

@@ -33,6 +33,7 @@ interface WorkData {
   /** Styling options for the cell */
   styles: BackendStyle; //TODO remove 's' for Style
   type?: boolean;
+  isDisable?: boolean;
 }
 
 type BackendStyle = {

package/src/components/Excel/dataConversion.ts

@@ -2,13 +2,13 @@ const getTextAlignment = (
   alignment: string
 ): 'left' | 'right' | 'center' | 'justify' => {
   switch (alignment.toLowerCase()) {
-    case 'left':
+    case 'LEFT':
       return 'left';
-    case 'right':
+    case 'RIGHT':
       return 'right';
-    case 'center':
+    case 'CENTER':
       return 'center';
-    case 'justify':
+    case 'JUSTIFY':
       return 'justify';
     default:
       return 'left';
@@ -40,15 +40,15 @@ const getTextAlignmentBack = (
 ): string => {
   switch (alignment) {
     case 'left':
-      return 'left';
+      return 'LEFT';
     case 'right':
-      return 'right';
+      return 'RIGHT';
     case 'center':
-      return 'center';
+      return 'CENTER';
     case 'justify':
-      return 'justify';
+      return 'JUSTIFY';
     default:
-      return 'left';
+      return 'LEFT';
   }
 };
 
@@ -85,25 +85,25 @@ export function convertStyleToFrontend(
     borderTop =
       border.top === 'MEDIUM'
         ? '2px solid var(--input-hover-border-color)'
-        : '1px solid var(--excel-sheet-border)';
+        : '1px solid var(--excel-header-border)';
   }
   if (border.right !== 'THIN') {
     borderRight =
       border.right === 'MEDIUM'
         ? '2px solid var(--input-hover-border-color)'
-        : '1px solid var(--excel-sheet-border)';
+        : '1px solid var(--excel-header-border)';
   }
   if (border.bottom !== 'THIN') {
     borderBottom =
       border.bottom === 'MEDIUM'
         ? '2px solid var(--input-hover-border-color)'
-        : '1px solid var(--excel-sheet-border)';
+        : '1px solid var(--excel-header-border)';
   }
   if (border.left !== 'THIN') {
     borderLeft =
       border.left === 'MEDIUM'
         ? '2px solid var(--input-hover-border-color)'
-        : '1px solid var(--excel-sheet-border)';
+        : '1px solid var(--excel-header-border)';
   }
 
   return {
@@ -128,18 +128,16 @@ const getBorderStyle = (
   border: string | undefined
 ): 'NONE' | 'THIN' | 'MEDIUM' | 'THICK' => {
   if (!border || border === 'none') {
-    return 'NONE';
+    return 'THIN';
   }
   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')) {
+    if (border.includes('2px') || border.includes('medium')) {
       return 'MEDIUM';
-    } else if (border.includes('4px') || border.includes('thick')) {
+    } else if (border.includes('3px') || border.includes('medium')) {
       return 'THICK';
     }
   }
@@ -151,7 +149,7 @@ export const convertStyleToBackend = (
 ): BackendStyle => {
   return {
     name: frontendStyle.fontFamily || 'Arial',
-    size: parseInt(frontendStyle.fontSize?.toString() || '11', 10),
+    size: parseInt(frontendStyle.fontSize?.toString() || '11', 11),
     bold: frontendStyle.fontWeight === 'bold',
     italic: frontendStyle.fontStyle === 'italic',
     underline: 'solid',

package/src/components/MenuOption/MenuOption.tsx

@@ -129,6 +129,7 @@ const MenuOption = ({
   dropdownPlacement = 'down',
   optionCardVariant,
   targetRef,
+  treeRowRef,
 }: MenuOptionProps) => {
   const [isClicked, setIsClicked] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
@@ -148,6 +149,9 @@ const MenuOption = ({
   };
 
   const handleOptionClick = (option: OptionClick) => {
+    const actionContainer = treeRowRef?.current?.children[0]
+      ?.children[2] as HTMLElement;
+    actionContainer.classList.remove('table-row-add-button');
     onOptionClick(option);
     closeDropDown();
   };

package/src/components/MenuOption/types.ts

@@ -209,6 +209,7 @@ interface MenuOptionProps {
    */
   optionCardVariant?: 'primary';
   targetRef?: string | React.RefObject<HTMLElement>;
+  treeRowRef?: React.RefObject<any | null>;
 }
 
 interface OptionProps {

package/src/components/MiniModal/MiniModal.scss

@@ -167,3 +167,11 @@
   border: 2px solid var(--ff-mini-modal-box-shadow);
   border-radius: 4px;
 }
+.ff-mini-modal-loop {
+  display: flex;
+  flex-wrap: wrap;
+}
+.ff-mini-modal-loop-div {
+  width: 500px;
+  height: 300px;
+}