pixel-react 1.6.8 → 1.7.0

package/src/components/DownloadClient/type.ts

@@ -1,41 +1,33 @@
 export interface DownloadClientProps {
-    /**
-     * Title of the popup.
-     */
-    title: string;
-  
-    /**
-     * Description or body text of the popup.
-     */
-    description: string;
-  
-    /**
-     * Callback for when the "Cancel" icon is clicked.
-     */
-    onCancel: () => void;
-  
-    /**
-     * Callback for when the "Download for Windows" icon is clicked.
-     */
-    onDownloadWindows: () => void;
-  
-    /**
-     * Callback for when the "Download for macOS" icon is clicked.
-     */
-    onDownloadMac: () => void;
-  
-    /**
-     * Optional flag to control whether to display icons for download actions instead of buttons.
-     * Defaults to `false` for buttons.
-     */
-    showIcons?: boolean;
-  }
-  
-export interface DownloadClientProps {
-    onClose?: () => void;
-    onClickWindows: () => void;
-    onClickLinux: () => void;
-    onClickMac: () => void;
-    top?: string;
-    left?: string;
-  }  
+  /**
+   * Close dialog function to close the modal dialog
+   **/
+  onClose: () => void;
+
+  /**
+   * distance between modal dialog and parent from top
+   **/
+  top?: string;
+
+  /**
+   * distance between modal dialog and parent from left
+   **/
+  left?: string;
+
+  /**
+   * To be used custom properties for the modal dialog through className
+   **/
+  className?: string;
+
+  /**
+   * Description of the dialog box
+   **/
+  description?: string;
+
+  /**
+   * Download button function
+   **/
+  onClick?: (os: string) => void;
+
+  optionZIndex?: number;
+}

package/src/components/EditTextField/EditTextField.scss

@@ -9,7 +9,7 @@
   .display-text-container {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 5px;
 
     .edit-button {
       padding: 4px 8px;

package/src/components/EditTextField/EditTextField.tsx

@@ -6,6 +6,7 @@ import HighlightText from '../HighlightText';
 import Icon from '../Icon';
 import Tooltip from '../Tooltip';
 import { capitalize } from '../../utils/capitalize/capitalize';
+import Input from '../Input/Input';
 
 const getErrorMessage = (
   inputValue: string,
@@ -38,8 +39,8 @@ const EditTextField: FC<LabelEditTextFieldTypes> = ({
   cancelIcon,
   editIcon,
   dropdownData = [],
-  width = '300px',
-  height = '22px',
+  // width = '',
+  // height = '',
   isOpen = false,
   confirmAction,
   onClick,
@@ -52,6 +53,7 @@ const EditTextField: FC<LabelEditTextFieldTypes> = ({
   );
   const [showError, setShowError] = useState('');
   const [isTextFieldModified, setIsTextFieldModified] = useState(false);
+  const isThrowingError = showError && isEditing ? true : false;
   const containerRef = useRef<HTMLDivElement | null>(null);
   const cancelRef = useRef<HTMLDivElement | null>(null);
 
@@ -96,27 +98,19 @@ const EditTextField: FC<LabelEditTextFieldTypes> = ({
       {isEditing ? (
         <div className="ff-label-text-field">
           <div className="ff-label-text-field-without-dropdown">
-            <input
-              type="text"
+            <Input
+              name="input"
+              label={label ? label : ''}
+              disabled={false}
+              error={isThrowingError}
+              placeholder="Enter your name"
               value={inputValue}
               onChange={handleTextFieldChange}
-              className={`ff-text-field ${
-                showError && isEditing
-                  ? 'ff-text-field-error-border'
-                  : 'ff-text-field-border'
-              } ${isTextFieldModified ? 'modified' : ''}`}
-              placeholder=" "
-              style={{ width, height }}
+              className={`
+                
+               ${isTextFieldModified ? 'modified' : ''}`}
+              type="text"
             />
-            <label
-              className={`ff-textfield-label  ${
-                showError && isEditing
-                  ? 'ff-text-field-error-text'
-                  : 'ff-text-field-text'
-              }`}
-            >
-              {label}
-            </label>
           </div>
           <div className="ff-icon-container">
             {confirmIcon && (

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

@@ -18,7 +18,7 @@
     // }
 
     .ff-excel-sheet-bar {
-      margin-left: 60px;
+      margin-left: 48px;
       display: flex;
       height: 36px;
       align-items: center;
@@ -27,7 +27,8 @@
       box-shadow: 0px 0px 4px -1px var(--toggle-strip-shadow);
 
       .ff-excel-add-sheet-icon {
-        padding: 4px 6px;
+        margin-top: 4px;
+        padding: 0px 6px;
       }
       .ff-excel-tab-container {
         height: 36px;

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',
     },
   };
 
@@ -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();

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 }}
     />
   );
 };

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

@@ -11,7 +11,7 @@
   --readonly-text-color: var(--toggle-strip-active);
   --outline-color: var(--toggle-strip-active);
   --outline-background-color: var(--overlay-bg);
-  --border-color: var(--toggle-strip-color);
+  --border-color: var(--excel-sheet-border);
   --header-background-color: var(--pop-up-background-blur);
   --elevation: var(--brand-color);
 
@@ -50,16 +50,16 @@
   z-index: 0;
 }
 
-.ff-spreadsheet-active-cell .Selection_dot {
+.ff-spreadsheet-active-cell .select_dot {
   background-color: var(--elevation);
-  height: 7px;
-  width: 7px;
+  height: 10px;
+  width: 10px;
   border-radius: 50%;
   position: absolute;
-  right: -3px;
-  z-index: 10;
-  bottom: -3px;
+  bottom: -5px;
+  right: -5px;
   cursor: crosshair;
+  z-index: 1000;
 }
 
 .ff-spreadsheet-cell--readonly {

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

@@ -46,11 +46,23 @@ 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 const SET_AUTO_FILL = 'SET_AUTO_FILL';
 
 export type BaseAction<T extends string> = {
   type: T;
 };
 
+export type SetAutoFill = BaseAction<typeof SET_AUTO_FILL> & {
+  payload: { autofill: boolean };
+};
+
+export function autoFill(autofill: boolean): SetAutoFill {
+  return {
+    type: SET_AUTO_FILL,
+    payload: { autofill },
+  };
+}
+
 export type SetRowHeight = BaseAction<typeof SET_ROW_HEIGHT> & {
   payload: { row: number; height: number };
 };
@@ -545,4 +557,5 @@ export type Action =
   | DeleteColumn
   | SetRowHeight
   | SetColumnPosition
+  | SetAutoFill
   | BlurAction;

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

@@ -26,6 +26,8 @@ import {
   blur,
   clear,
   commit,
+  dragEndAutoFill,
+  dragEndFormatePainter,
   edit,
   getKeyDownHandler,
   isActiveReadOnly,
@@ -41,6 +43,7 @@ export const INITIAL_STATE: Types.StoreState = {
   lastChanged: null,
   hasPasted: false,
   cut: false,
+  autoFill: { open: false, cellValue: { value: '', style: {} } },
   dragging: false,
   model: new Model(createFormulaParser, []),
   selected: new EmptySelection(),
@@ -56,6 +59,23 @@ export default function reducer(
   action: Actions.Action
 ): Types.StoreState {
   switch (action.type) {
+    case Actions.SET_AUTO_FILL: {
+      const { autofill } = action.payload;
+      const activeCell = state.active;
+      let currentCell: Types.CellBase<any> = { value: '', style: {} };
+      if (activeCell) {
+        currentCell =
+          Matrix.get(
+            { row: activeCell.row, column: activeCell.column },
+            state.model.data
+          ) || currentCell;
+      }
+      return {
+        ...state,
+        autoFill: { open: autofill, cellValue: currentCell },
+      };
+    }
+
     case Actions.ADD_ROW_TOP: {
       let { selectedRow, selectedColumn, model } = state;
       if (checkEmpty(selectedRow)) {
@@ -610,41 +630,48 @@ export default function reducer(
 
     case Actions.DRAG_END: {
       const selectedRange = state.selected.toRange(state.model.data);
-      let currentData = state.model.data;
-
-      if (!state.formattedStyle.open || !selectedRange) {
+      const activeCell = state.active;
+      let updatedData = state.model.data;
+      if (state.formattedStyle.open) {
+        updatedData = dragEndFormatePainter(
+          state.model.data,
+          selectedRange as PointRange,
+          state.formattedStyle
+        );
+      }
+      if (state.autoFill.open) {
+        updatedData = dragEndAutoFill(
+          state.model.data,
+          selectedRange as PointRange,
+          state.autoFill.cellValue,
+          activeCell
+        );
+        let { start, end } = selectedRange as PointRange;
+        const rowCount = start.row - end.row;
+        const columnCount = start.column - end.column;
+        let startPoint = { row: 0, column: 0 };
+        let endPoint = { row: 0, column: 0 };
+
+        if (rowCount > columnCount) {
+          startPoint = { row: activeCell?.row ?? 0, column: start.column };
+          endPoint = { row: activeCell?.row ?? 0, column: end.column };
+        } else {
+          startPoint = { row: start.row, column: activeCell?.column ?? 0 };
+          endPoint = { row: end.row, column: activeCell?.column ?? 0 };
+        }
         return {
           ...state,
           dragging: false,
+          autoFill: { open: false, cellValue: { value: '', style: {} } },
           formattedStyle: { open: false, style: undefined },
+          model: new Model(state.model.createFormulaParser, updatedData),
+          selected: new RangeSelection(new PointRange(startPoint, endPoint)),
         };
       }
-
-      const { start, end } = selectedRange;
-
-      let updatedData = currentData;
-
-      for (let row = start.row; row <= end.row; row++) {
-        for (let col = start.column; col <= end.column; col++) {
-          const currentCell = Matrix.get({ row, column: col }, updatedData);
-          if (!currentCell) {
-            continue;
-          }
-          const updatedCell = {
-            ...currentCell,
-            style: state.formattedStyle.style,
-          };
-
-          updatedData = Matrix.set(
-            { row, column: col },
-            updatedCell,
-            updatedData
-          );
-        }
-      }
       return {
         ...state,
         dragging: false,
+        autoFill: { open: false, cellValue: { value: '', style: {} } },
         formattedStyle: { open: false, style: undefined },
         model: new Model(state.model.createFormulaParser, updatedData),
       };