pixel-react-excel-sheet 1.0.31 → 1.0.32

package/src/components/ConnectingBranch/{data.ts → data.tsx}

@@ -11,7 +11,15 @@ const machineData = {
             globalVariableSetId: 'UUID',
             testDataSetId: 'UUID',
           },
-
+          machineInstances: [],
+        },
+        {
+          clientId: 'flinko-client-win-daa67320-d70c-438e-b417-62d76669e7a2',
+          executionDataSet: {
+            peVariableSetId: 'UUID',
+            globalVariableSetId: 'UUID',
+            testDataSetId: 'UUID',
+          },
           machineInstances: [
             {
               clientId:
@@ -26,7 +34,22 @@ const machineData = {
                 osVersion: '10.0.22000',
                 hostName: 'LAPTOP-T793RVQN',
               },
-              deviceInfo: [],
+              deviceInfo: [
+                {
+                  version: '10.0',
+                  name: 'Samsung Galaxy Note 20 Ultra',
+                  type: 'local',
+                  subType: 'device',
+                  platform: 'android',
+                },
+                {
+                  version: '18',
+                  name: 'iPhone 14',
+                  type: 'local',
+                  subType: 'device',
+                  platform: 'ios',
+                },
+              ],
               headless: false,
               runLevelExecutionDataSets: [
                 {
@@ -34,18 +57,57 @@ const machineData = {
                   globalVariableSetId: 'UUID',
                   testDataSetId: 'UUID',
                   runScriptCount: 12,
+                  browserRenderer: `<div>browser</div>`,
+                },
+              ],
+            },
+          ],
+        },
+        {
+          clientId: 'flinko-client-win-daa67320-d70c-438e-b417-62d76669e7a2',
+          executionDataSet: {
+            peVariableSetId: 'UUID',
+            globalVariableSetId: 'UUID',
+            testDataSetId: 'UUID',
+          },
+          machineInstances: [
+            {
+              clientId:
+                'flinko-client-win-daa67320-d70c-438e-b417-62d76669e7a2',
+              numberOfRuns: '3',
+              executionEnv: 'Local',
+              browserName: 'Google Chrome',
+              browserVersion: '107.0.5304.88',
+              systemUrl: '',
+              machineInfo: {
+                osName: 'Windows 11 Home Single Language',
+                osVersion: '10.0.22000',
+                hostName: 'LAPTOP-T793RVQN',
+              },
+              deviceInfo: [
+                {
+                  version: '10.0',
+                  name: 'Samsung Galaxy Note 20 Ultra',
+                  type: 'local',
+                  subType: 'device',
+                  platform: 'android',
                 },
                 {
-                  peVariableSetId: 'UUID_1',
-                  globalVariableSetId: 'UUID',
-                  testDataSetId: 'UUID',
-                  runScriptCount: 12,
+                  version: '18',
+                  name: 'iPhone 14',
+                  type: 'local',
+                  subType: 'device',
+                  platform: 'ios',
                 },
+              ],
+              headless: false,
+              runLevelExecutionDataSets: [
                 {
                   peVariableSetId: 'UUID_1',
                   globalVariableSetId: 'UUID',
                   testDataSetId: 'UUID',
                   runScriptCount: 12,
+                  browserRenderer: `<div>browser</div>`,
                 },
               ],
             },
@@ -62,13 +124,30 @@ const machineData = {
                 osVersion: '10.0.22000',
                 hostName: 'LAPTOP-T793RVQN',
               },
-              deviceInfo: [],
+              deviceInfo: [
+                {
+                  version: '10.0',
+                  name: 'Samsung Galaxy Note 20 Ultra',
+                  type: 'local',
+                  subType: 'device',
+                  platform: 'android',
+                },
+                {
+                  version: '18',
+                  name: 'iPhone 14',
+                  type: 'local',
+                  subType: 'device',
+                  platform: 'ios',
+                },
+              ],
               headless: false,
               runLevelExecutionDataSets: [
                 {
                   peVariableSetId: 'UUID_1',
                   globalVariableSetId: 'UUID',
                   testDataSetId: 'UUID',
+                  runScriptCount: 12,
+                  executionDataSetId: 'uuid',
                 },
               ],
             },
@@ -81,7 +160,6 @@ const machineData = {
             globalVariableSetId: 'UUID',
             testDataSetId: 'UUID',
           },
-          totalScript: 250,
           machineInstances: [
             {
               clientId:
@@ -96,33 +174,44 @@ const machineData = {
                 osVersion: '10.0.22000',
                 hostName: 'LAPTOP-T793RVQN',
               },
-              deviceInfo: [],
-              headless: false,
-              runLevelExecutionDataSets: [
+              deviceInfo: [
                 {
-                  peVariableSetId: 'UUID_1',
-                  globalVariableSetId: 'UUID',
-                  testDataSetId: 'UUID',
+                  version: '10.0',
+                  name: 'Samsung Galaxy Note 20 Ultra',
+                  type: 'local',
+                  subType: 'device',
+                  platform: 'android',
                 },
                 {
-                  peVariableSetId: 'UUID_1',
-                  globalVariableSetId: 'UUID',
-                  testDataSetId: 'UUID',
+                  version: '18',
+                  name: 'iPhone 14',
+                  type: 'local',
+                  subType: 'device',
+                  platform: 'ios',
                 },
+              ],
+              headless: false,
+              runLevelExecutionDataSets: [
                 {
                   peVariableSetId: 'UUID_1',
                   globalVariableSetId: 'UUID',
                   testDataSetId: 'UUID',
+                  runScriptCount: 12,
+                  browserRenderer: `<div>browser</div>`,
                 },
                 {
                   peVariableSetId: 'UUID_1',
                   globalVariableSetId: 'UUID',
                   testDataSetId: 'UUID',
+                  runScriptCount: 12,
+                  browserRenderer: `<div>browser</div>`,
                 },
                 {
                   peVariableSetId: 'UUID_1',
                   globalVariableSetId: 'UUID',
                   testDataSetId: 'UUID',
+                  runScriptCount: 12,
+                  browserRenderer: `<div>browser</div>`,
                 },
               ],
             },

package/src/components/ConnectingBranch/types.ts

@@ -1,3 +1,5 @@
+import { ReactElement } from 'react';
+
 type MachineInstanceData = any;
 export interface MachineInstance {
   [key: string]: MachineInstanceData;
@@ -9,13 +11,32 @@ export interface MachineData {
   [key: string]: machineDataObj;
 }
 export interface MachineInstancesProps {
+  parentNode: number;
   data: MachineData;
   verticalLineHeight: number;
   datasetHeight: number;
   curveHeights: number[];
   itemRefs: React.MutableRefObject<(HTMLDivElement | null)[]>;
   datasetRef: React.RefObject<HTMLDivElement>;
+  getChildNodeComponent: (
+    isButton: boolean,
+    ...args: any[]
+  ) => ReactElement<any, any>;
 }
 
 export type indexType = number;
 export type rowType = number;
+
+export interface ConnectBranchProps {
+  data: MachineData;
+  childNodeCurveHeight?: number;
+  getParentNodeComponent: (
+    isMultiSelect: boolean,
+    ...args: any[]
+  ) => ReactElement<any, any>;
+  getParentNodeComponentActionItems: (...args: any[]) => ReactElement<any, any>;
+  getChildNodeComponent: (
+    isButton: boolean,
+    ...args: any[]
+  ) => ReactElement<any, any>;
+}

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

@@ -430,7 +430,7 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
     setContextMenu({
       open: true,
       position: {
-        x: event.pageX - 50,
+        x: event.pageX - 200,
         y: event.pageY - 250,
       },
       options: options,

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

@@ -118,7 +118,12 @@ const ActiveCell: React.FC<Props> = (props) => {
         'ff-spreadsheet-active-cell',
         `ff-spreadsheet-active-cell--${mode}`
       )}
-      style={dimensions}
+      style={{
+        top: dimensions?.top || 0,
+        height: (dimensions?.height ?? 0) + 1,
+        left: dimensions?.left || 0,
+        width: (dimensions?.width ?? 0) + 1,
+      }}
       onClick={mode === 'view' && !readOnly ? edit : undefined}
       tabIndex={0}
     >
@@ -132,10 +137,7 @@ const ActiveCell: React.FC<Props> = (props) => {
           exitEditMode={view}
         />
       )}
-      <div
-        onMouseDown={handleMouseDown}
-        className="select_dot"
-      ></div>
+      <div onMouseDown={handleMouseDown} className="select_dot"></div>
     </div>
   );
 };

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

@@ -48,7 +48,12 @@ const FloatingRect: React.FC<Props> = ({
         'ff-spreadsheet-floating-rect--dragging': dragging,
         'ff-spreadsheet-floating-rect--hidden': hidden,
       })}
-      style={{ width: adjustedWidth, height: adjustedHeight, top, left }}
+      style={{
+        width: (adjustedWidth ?? 0) + 1,
+        height: (adjustedHeight ?? 0) + 1,
+        top,
+        left,
+      }}
     />
   );
 };

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

@@ -3,6 +3,7 @@
 .ff-excel {
   display: flex;
   flex-direction: column;
+  height: 100%;
 
   .ff-excel-toolbar-container {
     position: relative;
@@ -12,7 +13,7 @@
     margin-bottom: 20px;
   }
 
-  .ff-spreadsheet {
+  .ff-excel-spreadsheet {
     --background-color: var(--drawer-footer-bg);
     --text-color: var(--text-color);
     --readonly-text-color: var(--toggle-strip-active);
@@ -30,10 +31,29 @@
     display: inline-block;
   }
 
+  .ff-excel-header-hider {
+    position: absolute;
+    background-color: var(--excel-header-border);
+    z-index: 500;
+    left: -1px;
+    top: 59px;
+  }
+
+  .ff-excel-header-column-hider {
+    height: 34px;
+    width: 100%;
+  }
+
+  .ff-excel-header-row-hider {
+    bottom: 0px;
+    width: 60px;
+  }
+
   .ff-spreadsheet-active-cell {
     position: absolute;
-    border: 2px solid var(--outline-color);
+    border: 1px solid var(--outline-color);
     box-sizing: border-box;
+    z-index: 100;
   }
 
   .ff-spreadsheet-active-cell--edit {
@@ -87,7 +107,6 @@
   }
 
   .ff-spreadsheet-header {
-    border: 0.1px solid var(--border-color);
     background-color: var(--header-background-color);
     color: var(--readonly-text-color);
     text-align: center;
@@ -99,7 +118,8 @@
 
   .ff-spreadsheet-corner-header {
     position: fixed;
-    z-index: 3000;
+    z-index: 2000;
+    border: 2px solid var(--border-color);
   }
 
   .ff-spreadsheet-row-header {
@@ -107,16 +127,15 @@
   }
 
   .corner-header {
-    border: 1px solid var(--border-color);
     background-color: var(--header-background-color);
     position: absolute;
     display: flex;
     align-items: center;
     justify-content: center;
-    z-index: 1100;
-    top: -1px;
-    width: 60px;
-    height: 34px;
+    z-index: 1500;
+    top: -2px;
+    width: 58px;
+    height: 32px;
     left: -1px;
   }
 
@@ -169,7 +188,7 @@
 
   .ff-spreadsheet-floating-rect--selected {
     background: var(--outline-background-color);
-    border: 2px var(--outline-color) solid;
+    border: 1px var(--outline-color) solid;
   }
 
   .ff-spreadsheet-floating-rect--dragging {
@@ -177,6 +196,6 @@
   }
 
   .ff-spreadsheet-floating-rect--copied {
-    border: 2px var(--outline-color) dashed;
+    border: 1px var(--outline-color) dashed;
   }
 }

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

@@ -15,6 +15,7 @@ import {
   calculateSpreadsheetSize,
   getCSV,
   shouldHandleClipboardEvent,
+  isFocusedWithin,
 } from './util';
 
 import DefaultTable from './Table';
@@ -98,7 +99,7 @@ export type Props<CellType extends Types.CellBase> = {
   /** Callback called when the Spreadsheet's evaluated data changes. */
   onEvaluatedDataChange?: (data: Matrix.Matrix<CellType>) => void;
   setContextMenu: React.Dispatch<React.SetStateAction<Types.ContextMenuState>>;
-    /** Set your dynamic sheet Height*/
+  /** Set your dynamic sheet Height*/
   sheetHeight: string;
 };
 
@@ -119,6 +120,8 @@ const Spreadsheet = <CellType extends Types.CellBase>(
     HeaderRow = DefaultHeaderRow,
     DataEditor = DefaultDataEditor,
     DataViewer = DefaultDataViewer,
+    onSelect = () => {},
+    onActivate = () => {},
     onEvaluatedDataChange = () => {},
   } = props;
   type State = Types.StoreState<CellType>;
@@ -162,6 +165,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
   const copy = useAction(Actions.copy);
   const paste = useAction(Actions.paste);
   const onKeyDownAction = useAction(Actions.keyDown);
+  const onKeyPress = useAction(Actions.keyPress);
   const onDragStart = useAction(Actions.dragStart);
   const onDragEnd = useAction(Actions.dragEnd);
   const setData = useAction(Actions.setData);
@@ -183,6 +187,23 @@ const Spreadsheet = <CellType extends Types.CellBase>(
   const deleteRow = useAction(Actions.deleteRow);
   const deleteColumn = useAction(Actions.deleteColumn);
 
+  // Track active
+  const prevActiveRef = React.useRef<Point.Point | null>(state.active);
+  React.useEffect(() => {
+    if (state.active !== prevActiveRef.current) {
+      if (state.active) {
+        onActivate(state.active);
+      } else {
+        const root = rootRef.current;
+        if (root && isFocusedWithin(root) && document.activeElement) {
+          (document.activeElement as HTMLElement).blur();
+        }
+      }
+    }
+
+    prevActiveRef.current = state.active;
+  }, [onActivate, state.active]);
+
   const prevEvaluatedDataRef = React.useRef<Matrix.Matrix<CellType>>(
     state.model.evaluatedData
   );
@@ -194,6 +215,17 @@ const Spreadsheet = <CellType extends Types.CellBase>(
     prevEvaluatedDataRef.current = state.model.evaluatedData;
   }, [state?.model?.evaluatedData, onEvaluatedDataChange]);
 
+  const prevSelectedRef = React.useRef<Selection>(state.selected);
+  React.useEffect(() => {
+    if (!state.selected.equals(prevSelectedRef.current)) {
+      if (!props.selected || !state.selected.equals(props.selected)) {
+        onSelect(state.selected);
+      }
+    }
+
+    prevSelectedRef.current = state.selected;
+  }, [state.selected, onSelect, props.selected]);
+
   // Update selection when props.selected changes
   const prevSelectedPropRef = React.useRef<Selection | undefined>(
     props.selected
@@ -446,25 +478,32 @@ const Spreadsheet = <CellType extends Types.CellBase>(
   const rootNode = React.useMemo(
     () => (
       <div className="ff-excel">
-      <div className="ff-excel-toolbar-container">
-        <ExcelToolBar
-          onBold={onBold}
-          onItalic={onItalic}
-          setUnderlineType={setUnderlineType}
-          setColor={setColor}
-          setBorderType={setBorderType}
-          setFontSize={setFontSize}
-          setFontFamily={setFontFamily}
-          setTextAlign={setTextAlign}
-          setBackgroundColor={setBackgroundColor}
-          setFormatePainter={setFormatePainter}
-        />
-      </div>
+        <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">
+          <ExcelToolBar
+            onBold={onBold}
+            onItalic={onItalic}
+            setUnderlineType={setUnderlineType}
+            setColor={setColor}
+            setBorderType={setBorderType}
+            setFontSize={setFontSize}
+            setFontFamily={setFontFamily}
+            setTextAlign={setTextAlign}
+            setBackgroundColor={setBackgroundColor}
+            setFormatePainter={setFormatePainter}
+          />
+        </div>
         <div
           ref={rootRef}
-          style={{height:sheetHeight}}
-          className={classNames('ff-spreadsheet', className)}
-          onKeyDown={handleKeyDown}
+          style={{ height: sheetHeight }}
+          className={classNames('ff-excel-spreadsheet', className)}
+          onKeyPress={(e) => {
+            onKeyPress(e);
+          }}
+          onKeyDown={(e) => {
+            handleKeyDown(e);
+          }}
           onMouseMove={handleMouseMove}
         >
           {tableNode}
@@ -474,7 +513,14 @@ const Spreadsheet = <CellType extends Types.CellBase>(
         </div>
       </div>
     ),
-    [className, handleKeyDown, handleMouseMove, tableNode, activeCellNode]
+    [
+      className,
+      onKeyPress,
+      handleKeyDown,
+      handleMouseMove,
+      tableNode,
+      activeCellNode,
+    ]
   );
 
   return (

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

@@ -298,6 +298,19 @@ export type SetDataAction = BaseAction<typeof SET_DATA> & {
   };
 };
 
+export type KeyPressAction = BaseAction<typeof KEY_PRESS> & {
+  payload: {
+    event: React.KeyboardEvent;
+  };
+};
+
+export function keyPress(event: React.KeyboardEvent): KeyPressAction {
+  return {
+    type: KEY_PRESS,
+    payload: { event },
+  };
+}
+
 export function setData(data: Matrix<CellBase>): SetDataAction {
   return {
     type: SET_DATA,
@@ -544,6 +557,7 @@ export type Action =
   | UnderlineTypeStyle
   | FontSize
   | FontFamily
+  | KeyPressAction
   | TextAlignType
   | BorderType
   | ItalicStyle

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

@@ -582,6 +582,22 @@ export default function reducer(
       return blur(state);
     }
 
+    case Actions.KEY_PRESS: {
+      const { event } = action.payload;
+
+      if (isActiveReadOnly(state) || event.metaKey) {
+        return state;
+      }
+      if (state.mode === 'view' && state.active) {
+        const selectedRange = state.selected.toRange(state.model.data);
+        if (selectedRange?.size() === 1) {
+          return edit(clear(state));
+        }
+        return edit(state);
+      }
+      return state;
+    }
+
     case Actions.KEY_DOWN: {
       const { event } = action.payload;
       const handler = getKeyDownHandler(state, event);

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

@@ -123,8 +123,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
       value: 'double_border',
       label: 'Double Underline',
       icon: 'double_underline',
-    },
-    { value: 'line-through', label: 'Strikethrough', icon: 'strike_through' },
+    }
   ];
 
   const fontFamily = [
@@ -415,8 +414,10 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
           </div>
         </Tooltip>
       </div>
-      <div className="ff-excel-toolbar-divider"></div>
-      <div className="ff-excel-toolbar-menu">
+
+  
+      {/* <div className="ff-excel-toolbar-divider"></div>  TODO */}
+      {/* <div className="ff-excel-toolbar-menu"> 
         <Tooltip placement="top" title={'Formula'}>
           <Icon
             hoverEffect
@@ -425,7 +426,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
             name="formula_icon"
           />
         </Tooltip>
-      </div>
+      </div>  TODO */}
     </div>
   );
 };

package/src/components/FileDropzone/Dropzone.tsx

@@ -24,6 +24,7 @@ const Dropzone: FC<DroppableProps> = ({
   setSelectedFile,
   handleRemoveFile,
   isDisable,
+  setShowDrawer,
 }) => {
   const isWebServiceFile = selectedFile?.name && isWebServiceFileDropZone;
   return (
@@ -42,6 +43,8 @@ const Dropzone: FC<DroppableProps> = ({
           onFileRemoveClick={handleRemoveFile}
           onFileReplaceClick={setSelectedFile}
           setSelectedFile={setSelectedFile}
+          selectedRadioOption={selectedRadioOption}
+          setShowDrawer={setShowDrawer}
         />
       ) : (
         <>

package/src/components/FileDropzone/FileDropzone.scss

@@ -4,6 +4,12 @@
   gap: $gap;
 }
 
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 @mixin center {
   display: grid;
   place-items: center;
@@ -160,4 +166,16 @@
 .ff-disable-file-dropzone-wrapper {
   opacity: 0.5;
   cursor: not-allowed;
+}
+.footer_basic_button {
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  @include flex-center;
+  justify-content: flex-end;
+  gap: 16px;
+  border-top: 1px solid var(--border-color);
+  padding: 4px 8px;
+  background-color: var(--primary-icon-color);
 }