pixel-react-excel-sheet 1.0.11 → 1.0.13

package/src/components/DatePicker/DatePicker.tsx

@@ -217,6 +217,40 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
     }
   };
 
+  const isDisabledDate = (
+    year: number | null,
+    month: number | null,
+    minDate?: Date,
+    maxDate?: Date
+  ): boolean => {
+    const isMinDateValid = minDate instanceof Date && !isNaN(minDate.getTime());
+    const isMaxDateValid = maxDate instanceof Date && !isNaN(maxDate.getTime());
+
+    if (isMinDateValid) {
+      if (year !== null && year < minDate.getFullYear()) return true;
+      if (
+        year !== null &&
+        month !== null &&
+        year === minDate.getFullYear() &&
+        month < minDate.getMonth()
+      )
+        return true;
+    }
+
+    if (isMaxDateValid) {
+      if (year !== null && year > maxDate.getFullYear()) return true;
+      if (
+        year !== null &&
+        month !== null &&
+        year === maxDate.getFullYear() &&
+        month > maxDate.getMonth()
+      )
+        return true;
+    }
+
+    return false;
+  };
+
   useEffect(() => {
     if (isPickerOpen && view === 'years') {
       const currentYear =
@@ -255,17 +289,28 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
   const CustomMonthGrid: React.FC = () => {
     return (
       <div className="ff-custom-month_grid">
-        {months.map((month: string, index: number) => (
-          <div
-            key={index}
-            onClick={() => handleMonthSelect(index)}
-            className={classNames('ff-custom-month', {
-              'ff-custom-month--selected': index === selectedMonth?.getMonth(),
-            })}
-          >
-            <Typography>{month}</Typography>
-          </div>
-        ))}
+        {months.map((month: string, index: number) => {
+          const isDisabled = isDisabledDate(
+            selectedMonth?.getFullYear() || null,
+            index,
+            minDate,
+            maxDate
+          );
+
+          return (
+            <div
+              key={index}
+              onClick={() => !isDisabled && handleMonthSelect(index)}
+              className={classNames('ff-custom-month', {
+                'ff-custom-month--selected':
+                  index === selectedMonth?.getMonth(),
+                'ff-custom-month--disabled': isDisabled,
+              })}
+            >
+              <Typography>{month}</Typography>
+            </div>
+          );
+        })}
       </div>
     );
   };
@@ -303,17 +348,23 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
   const CustomYearGrid: React.FC = () => {
     return (
       <div className="ff-custom-year_grid">
-        {years.map((year: number) => (
-          <div
-            key={year}
-            onClick={() => handleYearSelect(year)}
-            className={classNames('ff-custom-year', {
-              'ff-custom-year--selected': year === selectedMonth?.getFullYear(),
-            })}
-          >
-            <Typography>{year}</Typography>
-          </div>
-        ))}
+        {years.map((year: number) => {
+          const isDisabled = isDisabledDate(year, null, minDate, maxDate);
+
+          return (
+            <div
+              key={year}
+              onClick={() => !isDisabled && handleYearSelect(year)}
+              className={classNames('ff-custom-year', {
+                'ff-custom-year--selected':
+                  year === selectedMonth?.getFullYear(),
+                'ff-custom-year--disabled': isDisabled,
+              })}
+            >
+              <Typography>{year}</Typography>
+            </div>
+          );
+        })}
       </div>
     );
   };

package/src/components/Drawer/Drawer.scss

@@ -19,7 +19,6 @@
     right: 0;
     bottom: 0;
     top: 87px;
-    min-width: 450px;
     background-color: var(--primary-button-text-color);
     z-index: 999;
     transform: translateX(100%);
@@ -78,7 +77,7 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        gap: 12px;
+        gap: 8px;
         height: 24px;
 
         .ff-action-button {
@@ -101,6 +100,7 @@
           .ff-custom-header {
             background-color: var(--drawer-footer-bg);
             padding: 4px 8px;
+            width: 100%;
           }
         }
       }
@@ -123,6 +123,7 @@
       z-index: 1000;
       background-color: var(--base-bg-color);
       transform: translateY(3px);
+      border-radius: 0 0 4px 4px;
 
       .button-container {
         display: flex;

package/src/components/Drawer/Drawer.stories.tsx

@@ -115,7 +115,6 @@ export const WithTertiaryButtons: Story = {
   },
 };
 
-
 export const WithCustomZIndex: Story = {
   args: {
     ...defaultArgs,

package/src/components/Drawer/Drawer.tsx

@@ -36,6 +36,9 @@ const Drawer: FC<DrawerProps> = ({
   zIndex = 999,
   secondLayerZIndex = false,
   top,
+  height,
+  width,
+  right = 0,
 }: DrawerProps) => {
   const [isExpanded, setIsExpanded] = useState(false);
 
@@ -85,7 +88,7 @@ const Drawer: FC<DrawerProps> = ({
         className={classNames('ff-drawer', `ff-drawer--${drawerSize}`, {
           'ff-drawer--open': isOpen,
         })}
-        style={{ zIndex, top }}
+        style={{ zIndex, top, height, width, right }}
       >
         {showHeader && (
           <div

package/src/components/Drawer/Types.ts

@@ -141,4 +141,17 @@ export interface DrawerProps {
    * Custom top for the drawer
    */
   top?: string;
+  /**
+   * Height of the drawer
+   */
+  height?: string;
+  /**
+   *
+   * width of the drawer
+   */
+  width?: string;
+  /**
+   * Position from right
+   */
+  right?: string | number;
 }

package/src/components/Editor/Editor.stories.tsx

@@ -2,7 +2,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import Editor from './Editor';
 import { EditorProps } from './types';
-import { varibaleList } from './constants';
+import { variableList } from './constants';
 import { useState } from 'react';
 
 const meta: Meta<EditorProps> = {
@@ -49,6 +49,6 @@ export const Default: Story = {
     width: '100%',
     height: '90vh',
     readOnly: false,
-    variableOptionsList: varibaleList,
+    variableOptionsList: variableList,
   },
 };

package/src/components/Editor/Editor.tsx

@@ -115,8 +115,8 @@ const Editor = forwardRef<any, EditorProps>(
         option?.type === 'GLOBAL'
           ? 'GV'
           : option?.type === 'LOCAL'
-            ? 'LV'
-            : 'PEV'
+          ? 'LV'
+          : 'PEV'
       );
     };
 
@@ -235,6 +235,8 @@ const Editor = forwardRef<any, EditorProps>(
         />
         {showDropdown && dropdownPosition && (
           <VariableDropdown
+            position="absolute"
+            width="300px"
             optionsList={variableOptionsList}
             onSelectVariable={handleSelectVariable}
             dropdownPosition={dropdownPosition}

package/src/components/Editor/VariableDropdown.scss

@@ -1,6 +1,4 @@
 .ff-variable-dropdown {
-  position: absolute;
-  width: 200px;
   height: 300px;
   display: flex;
   flex-direction: column;
@@ -8,6 +6,14 @@
   border: 1px solid var(--border-color);
   border-radius: 3px;
   z-index: 9999;
+  overflow: hidden;
+  overflow-y: auto;
+  &.absolute {
+    position: absolute;
+  }
+  &.relative {
+    position: relative;
+  }
 }
 .ff-variable-option {
   display: flex;

package/src/components/Editor/VariableDropdown.tsx

@@ -3,19 +3,27 @@ import { VariableDropdownProps, DyanamicObj } from './types';
 import Icon from '../Icon';
 import './VariableDropdown.scss';
 import Typography from '../Typography';
+import cx from 'classnames';
 
 const VariableDropdown: FC<VariableDropdownProps> = ({
   optionsList = [],
   onSelectVariable,
   dropdownPosition,
+  position = 'relative',
+  width = '300px',
 }): ReactNode => {
   return (
     <div
-      className="ff-variable-dropdown"
-      style={{
-        top: dropdownPosition.top + 30,
-        left: dropdownPosition.left - 30,
-      }}
+      className={cx('ff-variable-dropdown', position)}
+      style={
+        dropdownPosition
+          ? {
+              top: dropdownPosition.top + 30,
+              left: dropdownPosition.left - 30,
+              width,
+            }
+          : { width }
+      }
     >
       {optionsList?.map((option: DyanamicObj): ReactNode => {
         return (
@@ -32,8 +40,8 @@ const VariableDropdown: FC<VariableDropdownProps> = ({
                 option?.type === 'LOCAL'
                   ? 'local_variable_icon'
                   : option?.type === 'GLOBAL'
-                    ? 'global_variable_icon'
-                    : 'project_env_variable_icon'
+                  ? 'global_variable_icon'
+                  : 'project_env_variable_icon'
               }
               height={16}
               width={16}

package/src/components/Editor/constants.ts

@@ -8,7 +8,7 @@ export const optionsList: option[] = [
   { label: 'Plain Text', value: 'plaintext' },
 ];
 
-export const varibaleList: DyanamicObj[] = [
+export const variableList: DyanamicObj[] = [
   {
     createdBy: 'USR1428',
     modifiedBy: '--',

package/src/components/Editor/types.ts

@@ -58,10 +58,20 @@ export interface dropdownPositionType {
 }
 
 export interface VariableDropdownProps {
+  /**
+   * Position whether absoloute or relative
+   */
+  position: 'absolute' | 'relative';
+
+  /**
+   * Dropdown width
+   */
+  width: string;
+
   /**
    * List of variables
    */
-  optionsList: {}[];
+  optionsList: DyanamicObj[];
 
   /**
    * Function to handle click on variable
@@ -71,7 +81,7 @@ export interface VariableDropdownProps {
   /**
    * Dropdown postion used for dropdown placement
    */
-  dropdownPosition: dropdownPositionType;
+  dropdownPosition?: dropdownPositionType;
 }
 
 export interface option {

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

@@ -6,7 +6,6 @@
     .ff-excel-sheet {
       position: static;
       top: 0;
-      height: auto;
     }
 
     .ff-excel-sheet-bar {

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

@@ -9,7 +9,10 @@ import { toast } from '../../Toastify/Toastify';
 import { ContextMenuState } from './ExcelFileComponents/types';
 import ExcelContextMenu from '../ExcelContextMenu/ExcelContextMenu';
 import Typography from '../../Typography';
-import { convertStyleToBackend, convertStyleToFrontend } from '../dataConversion';
+import {
+  convertStyleToBackend,
+  convertStyleToFrontend,
+} from '../dataConversion';
 import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty';
 
 interface ExcelFileProps {
@@ -34,7 +37,9 @@ interface ExcelFileProps {
 
 const ExcelFile: React.FC<ExcelFileProps> = ({
   excelData,
-  onSave = (saveData) => {saveData()},
+  onSave = (saveData) => {
+    saveData();
+  },
 }) => {
   const [sheetNames, setSheetNames] = useState<string[]>([]);
   const [contextMenu, setContextMenu] = React.useState<ContextMenuState>({
@@ -46,11 +51,19 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
   const EmptyRow: CellBase = {
     value: '',
     style: {
-      color: 'var(--text-color)',
+      color: 'var(--input-hover-border-color)',
       backgroundColor: 'var(--drawer-footer-bg)',
-      borderColor: 'var(--toggle-strip-color)',
-      textDecoration: 'none',
-      textDecorationStyle: 'solid',
+      borderColor: 'var(--excel-sheet-border)',
+      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)`,
+      fontSize: '15px',
+      fontWeight: 'normal',
+      fontStyle: 'normal',
+      fontFamily: 'Times New Roman',
+      textAlign: 'center',
     },
   };
 
@@ -110,9 +123,9 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
     payload.sheets.forEach((sheet) => {
       const sheetName = sheet.sheetName;
       const json = sheet.data;
-      const maxRows = Math.max(15, json.length + 2);
+      const maxRows = Math.max(26, json.length + 2);
       const maxCols = Math.max(
-        15,
+        26,
         Math.max(...json.map((row) => row.length)) + 2
       );
 
@@ -128,7 +141,7 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
             }
             spreadsheetData[rowIndex][colIndex] = {
               value: checkVal(cell.value),
-              style: convertStyleToFrontend(cell?.style) ,
+              style: convertStyleToFrontend(cell?.style),
               type: true,
             };
           }
@@ -153,7 +166,7 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
     },
     [onSave]
   );
-  
+
   React.useEffect(() => {
     document.addEventListener('keydown', handleSave);
     return () => {
@@ -176,18 +189,21 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
             }, -1);
 
             const filteredRow = row
-            .map((cell, index) => {
-              if (cell && cell.value !== null) {
-                return {
-                  value: cell.value,
-                  styles: convertStyleToBackend(cell.style ?? {}),
-                };
-              } else if (cell && cell.type || index <= lastIndex) {
-                return { value: '', styles: convertStyleToBackend(cell?.style ?? {}) };
-              }
-              return null;
-            })
-            .filter((cell) => cell !== null);
+              .map((cell, index) => {
+                if (cell && cell.value !== null) {
+                  return {
+                    value: cell.value,
+                    styles: convertStyleToBackend(cell.style ?? {}),
+                  };
+                } else if ((cell && cell.type) || index <= lastIndex) {
+                  return {
+                    value: '',
+                    styles: convertStyleToBackend(cell?.style ?? {}),
+                  };
+                }
+                return null;
+              })
+              .filter((cell) => cell !== null);
 
             return filteredRow.length > 0 ? filteredRow : [];
           }) || [];
@@ -208,7 +224,7 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
     onSave(savedData);
     toast.success('File saved successfully!');
   };
-  
+
   const onEvaluateChange = (data: Matrix.Matrix<CellBase>) => {
     setWorksheetsData((prev) => ({ ...prev, [pageRef.current]: data }));
     onSaveWorksheetData();
@@ -232,8 +248,8 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
     const baseName = 'NewSheet';
     const existingSheetNames = sheetNames;
     const newSheetName = generateUniqueSheetName(baseName, existingSheetNames);
-    const newSheetData = Array.from({ length: 15 }, () =>
-      Array.from({ length: 15 }, () => EmptyRow)
+    const newSheetData = Array.from({ length: 26 }, () =>
+      Array.from({ length: 26 }, () => EmptyRow)
     );
     setSheetNames((prev) => [...prev, newSheetName]);
     setSelectedSheet({ index: sheetNames?.length, name: newSheetName });

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

@@ -21,6 +21,10 @@ const ActiveCell: React.FC<Props> = (props) => {
     [dispatch]
   );
   const edit = React.useCallback(() => dispatch(Actions.edit()), [dispatch]);
+  const autoFill = React.useCallback(
+    (value: boolean) => dispatch(Actions.autoFill(value)),
+    [dispatch]
+  );
   const commit = React.useCallback(
     (changes: Types.CommitChanges<Types.CellBase>) =>
       dispatch(Actions.commit(changes)),
@@ -103,6 +107,10 @@ const ActiveCell: React.FC<Props> = (props) => {
   const DataEditor = (cell && cell.DataEditor) || props.DataEditor;
   const readOnly = cell && cell.readOnly;
 
+  const handleMouseDown = React.useCallback(() => {
+    mode === 'view' ? autoFill(true) : autoFill(false);
+  }, [mode, autoFill]);
+
   return hidden ? null : (
     <div
       ref={rootRef}
@@ -124,6 +132,10 @@ const ActiveCell: React.FC<Props> = (props) => {
           exitEditMode={view}
         />
       )}
+      <div
+        onMouseDown={handleMouseDown}
+        className="select_dot"
+      ></div>
     </div>
   );
 };

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

@@ -24,8 +24,6 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
   setCellData,
   setContextMenu,
 }): React.ReactElement => {
-  const [isDotDragging, setIsDotDragging] = React.useState(false);
-  const [first, setFirst] = React.useState(true);
   const rootRef = React.useRef<HTMLTableCellElement | null>(null);
   const point = React.useMemo(
     (): Point.Point => ({
@@ -69,37 +67,12 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
 
   const handleMouseOver = React.useCallback(
     (event: React.MouseEvent<HTMLTableCellElement>) => {
-      if (dragging && first && !isDotDragging) {
+      if (dragging) {
         setCellDimensions(point, getOffsetRect(event.currentTarget));
         select(point);
       }
     },
-    [setCellDimensions, select, dragging, point, first, isDotDragging]
-  );
-
-  const handleDotDown = React.useCallback(
-    (event: React.MouseEvent<HTMLTableCellElement>) => {
-      setIsDotDragging(true);
-      setCellDimensions(point, getOffsetRect(event.currentTarget));
-
-      if (event.shiftKey) {
-        select(point);
-      } else {
-        activate(point);
-      }
-    },
-    [setCellDimensions, point, select, activate]
-  );
-
-  const handleDotOver = React.useCallback(
-    (event: React.MouseEvent<HTMLTableCellElement>) => {
-      setFirst(false);
-      if (dragging && isDotDragging) {
-        setCellDimensions(point, getOffsetRect(event.currentTarget));
-        select(point);
-      }
-    },
-    [setCellDimensions, select, dragging, point, isDotDragging]
+    [setCellDimensions, select, dragging, point]
   );
 
   const contextClick = React.useCallback(
@@ -153,11 +126,6 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
         evaluatedCell={evaluatedData}
         setCellData={setCellData}
       />
-      <div
-        // className="Selection_dot" TODO
-        onMouseOver={handleDotOver}
-        onMouseDown={handleDotDown}
-      ></div>
     </td>
   );
 };

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

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import classnames from 'classnames';
 import * as Types from './types';
+import useSelector from './use-selector';
+import { getCellDimensions } from './util';
 
 export type Props = {
   variant?: string;
@@ -15,7 +17,30 @@ const FloatingRect: React.FC<Props> = ({
   hidden,
   variant,
 }) => {
+  const active = useSelector((state) => state.active);
+  const autoFill = useSelector((state) => state.autoFill);
+  const FixedVal = useSelector((state) =>
+    active
+      ? getCellDimensions(active, state.rowDimensions, state.columnDimensions)
+      : undefined
+  );
+
   const { width, height, top, left } = dimensions || {};
+
+  let sampleHeight = FixedVal?.height ?? 0;
+  let sampleWidth = FixedVal?.width ?? 0;
+  let adjustedWidth = width;
+  let adjustedHeight = height;
+  if (autoFill.open && width && height && FixedVal) {
+    if (width - sampleWidth > height - sampleHeight) {
+      adjustedWidth = width;
+      adjustedHeight = FixedVal.height;
+    } else {
+      adjustedHeight = height;
+      adjustedWidth = FixedVal.width;
+    }
+  }
+
   return (
     <div
       className={classnames('ff-spreadsheet-floating-rect', {
@@ -23,7 +48,7 @@ const FloatingRect: React.FC<Props> = ({
         'ff-spreadsheet-floating-rect--dragging': dragging,
         'ff-spreadsheet-floating-rect--hidden': hidden,
       })}
-      style={{ width, height, top, left }}
+      style={{ width: adjustedWidth, height: adjustedHeight, top, left }}
     />
   );
 };