pixel-react-excel-sheet 1.0.14 → 1.0.16

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixel-react-excel-sheet",
   "description": "Great for pixel-perfect, design-focused components in React",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.scss

@@ -7,7 +7,7 @@
   min-height: 32px;
   min-width: 111px;
   white-space: nowrap;
-  z-index: 200;
+  z-index: 2000;
 
   .ff-excel-menu-options {
     color: var(--text-color);

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

@@ -33,10 +33,14 @@ interface ExcelFileProps {
 
   /** Callback function to save the Excel data */
   onSave?: (saveData: any) => void;
+
+  /** Set your dynamic sheet Height*/
+  sheetHeight?: string;
 }
 
 const ExcelFile: React.FC<ExcelFileProps> = ({
   excelData,
+  sheetHeight = '100%',
   onSave = (saveData) => {
     saveData();
   },
@@ -426,8 +430,8 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
     setContextMenu({
       open: true,
       position: {
-        x: event.pageX - 50,
-        y: event.pageY - 350,
+        x: event.pageX - 0,
+        y: event.pageY - 50,
       },
       options: options,
     });
@@ -440,6 +444,7 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
           {contextMenu.open && <ExcelContextMenu contextMenu={contextMenu} />}
           <div ref={sheetRef} className="ff-excel-sheet">
             <Spreadsheet
+              sheetHeight={sheetHeight}
               setContextMenu={setContextMenu}
               data={selectedSheetData}
               onEvaluatedDataChange={onEvaluateChange}
@@ -500,7 +505,7 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
           <Toastify />
         </div>
       )}
-      </>
+    </>
   );
 };
 

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

@@ -24,7 +24,6 @@
 
     position: relative;
     overflow: scroll;
-    height: 365px;
     background: var(--background-color);
     color: var(--text-color);
     scrollbar-width: none;

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

@@ -98,6 +98,8 @@ 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*/
+    sheetHeight: string;
 };
 
 /**
@@ -113,6 +115,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
     onKeyDown,
     Table = DefaultTable,
     Row = DefaultRow,
+    sheetHeight,
     HeaderRow = DefaultHeaderRow,
     DataEditor = DefaultDataEditor,
     DataViewer = DefaultDataViewer,
@@ -457,9 +460,9 @@ const Spreadsheet = <CellType extends Types.CellBase>(
           setFormatePainter={setFormatePainter}
         />
       </div>
-
         <div
           ref={rootRef}
+          style={{height:sheetHeight}}
           className={classNames('ff-spreadsheet', className)}
           onKeyDown={handleKeyDown}
           onMouseMove={handleMouseMove}

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

@@ -160,6 +160,7 @@ export const Default: Story = {
         action: () => {},
       },
     ],
+    sheetHeight:"",
     onSave: () => {},
   },
 };

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

@@ -91,7 +91,14 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
     value: string;
   }>({
     label: 'Times New Roman',
-    value: '"Times New Roman"',
+    value: 'Times New Roman',
+  });
+  const [selectedFontSize, setSelectedFontSize] = useState<{
+    label: string;
+    value: string;
+  }>({
+    label: '11',
+    value: '11',
   });
   const [colorContainer, setColorPicker] = useState<ColorContainer>({
     color: 'var(--error-light)',
@@ -219,8 +226,10 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
           <div className="ff-excel-toolbar-font-family">
             <Select
               showLabel={false}
+              optionZIndex={1000}
               onChange={(e) => {
-                setSelectedFontFamily({ label: e.label, value: e.value });
+                console.log(e);
+                setSelectedFontFamily({ label: e.label, value: e.label });
                 setFontFamily(data, e.label);
               }}
               required={false}
@@ -233,13 +242,14 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
           <div className="ff-excel-toolbar-font-size">
             <Select
               showLabel={false}
+              optionZIndex={1000}
               required={false}
-              onChange={(e) => setFontSize(data, e.value)}
-              optionsList={fontSize}
-              selectedOption={{
-                label: '11',
-                value: '11',
+              onChange={(e) => {
+                setSelectedFontSize({ label: e.label, value: e.value });
+                setFontSize(data, e.value);
               }}
+              optionsList={fontSize}
+              selectedOption={selectedFontSize}
             />
           </div>
         </Tooltip>
@@ -308,6 +318,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
             />
             <MenuOption
               iconName="arrow_down"
+              zIndex={1000}
               iconSize={12}
               options={underlineTypeIcon}
               tooltipPlacement="top"
@@ -384,6 +395,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
             <MenuOption
               iconName="arrow_down"
               iconSize={12}
+              zIndex={1000}
               options={borderTypeIcon}
               tooltipPlacement="top"
               variant="light"