pixel-react 1.5.5 → 1.5.7

package/src/components/DatePicker/DatePicker.tsx

@@ -26,6 +26,7 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
   timeFormat = 'hh:mm a',
   error,
   helperText = '',
+  dateOnly = false,
 }) => {
   const [timeValue, setTimeValue] = useState<string>('');
   const [selectedDate, setSelectedDate] = useState<Date | undefined>();
@@ -121,17 +122,23 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
   };
 
   const handleDaySelect = (date: Date | undefined) => {
-    if (!timeValue || !date) {
-      // if need to set time to current time in case no time selected
-      const now = new Date();
-      date?.setHours(now.getHours(), now.getMinutes(), now.getSeconds());
-
+    if (dateOnly) {
       setSelectedDate(date);
+      onChange(date);
+      resetAndCloseDatePicker();
     } else {
-      const [hoursStr, minutesStr] = timeValue.split(':');
-      date.setHours(parseInt(hoursStr ? hoursStr : '0', 10) || 0);
-      date.setMinutes(parseInt(minutesStr ? minutesStr : '0', 10) || 0);
-      setSelectedDate(date);
+      if (!timeValue || !date) {
+        // if need to set time to current time in case no time selected
+        const now = new Date();
+        date?.setHours(now.getHours(), now.getMinutes(), now.getSeconds());
+
+        setSelectedDate(date);
+      } else {
+        const [hoursStr, minutesStr] = timeValue.split(':');
+        date.setHours(parseInt(hoursStr ? hoursStr : '0', 10) || 0);
+        date.setMinutes(parseInt(minutesStr ? minutesStr : '0', 10) || 0);
+        setSelectedDate(date);
+      }
     }
   };
 
@@ -273,7 +280,7 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
         onClick={onClick}
         disabled={disabled}
       >
-        <Icon name="left_arrow_icon" height={12} width={12} />
+        <Icon name="left_arrow_icon" height={20} width={20} />
       </button>
     );
   };
@@ -287,7 +294,7 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
         onClick={onClick}
         disabled={disabled}
       >
-        <Icon name="right_arrow_icon" height={12} width={12} />
+        <Icon name="right_arrow_icon" height={20} width={20} />
       </button>
     );
   };
@@ -340,22 +347,24 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
           )}
         </div>
 
-        <div className="ff-input-with-icon ff-time-input-field">
-          <Icon
-            name={'clock_icon'}
-            hoverEffect={false}
-            className="ff-clock-icon"
-          />
-          <input
-            type="text"
-            placeholder="Select time"
-            className="ff-time-input"
-            value={value ? formatInTimeZone(value, timezone, timeFormat) : ''}
-            disabled={disabled}
-            onClick={handleDateInputClick}
-            readOnly
-          />
-        </div>
+        {!dateOnly && (
+          <div className="ff-input-with-icon ff-time-input-field">
+            <Icon
+              name={'clock_icon'}
+              hoverEffect={false}
+              className="ff-clock-icon"
+            />
+            <input
+              type="text"
+              placeholder="Select time"
+              className="ff-time-input"
+              value={value ? formatInTimeZone(value, timezone, timeFormat) : ''}
+              disabled={disabled}
+              onClick={handleDateInputClick}
+              readOnly
+            />
+          </div>
+        )}
       </div>
 
       {isPickerOpen && (
@@ -406,29 +415,33 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
                   : {}),
               }}
             />
-            <TimePicker
-              value={timeValue}
-              onChange={handleTimeChange}
-              minTime={minTime}
-              maxTime={maxTime}
-              onErrorChange={setTimeError}
-            />
-          </div>
-          <div className="ff-date-picker-controls">
-            <Button
-              className="ff-date-picker-button"
-              variant="secondary"
-              onClick={handleCancel}
-              label="Cancel"
-            />
-            <Button
-              className="ff-date-picker-button"
-              variant="primary"
-              onClick={handleSave}
-              label="Save"
-              disabled={timeError}
-            />
+            {!dateOnly && (
+              <TimePicker
+                value={timeValue}
+                onChange={handleTimeChange}
+                minTime={minTime}
+                maxTime={maxTime}
+                onErrorChange={setTimeError}
+              />
+            )}
           </div>
+          {!dateOnly && (
+            <div className="ff-date-picker-controls">
+              <Button
+                className="ff-date-picker-button"
+                variant="secondary"
+                onClick={handleCancel}
+                label="Cancel"
+              />
+              <Button
+                className="ff-date-picker-button"
+                variant="primary"
+                onClick={handleSave}
+                label="Save"
+                disabled={timeError}
+              />
+            </div>
+          )}
         </div>
       )}
     </div>

package/src/components/DatePicker/types.ts

@@ -58,6 +58,11 @@ export interface DatePickerProps {
    * Helper text to display below the input field, used for error messages or instructions.
    */
   helperText?: string | undefined;
+
+  /**
+   * Select only date .
+   */
+  dateOnly?: boolean;
 }
 
 export type DateValue = Date | undefined;

package/src/components/Excel/ColorBarSelector/ColorBarSelector.scss

@@ -1,8 +1,12 @@
-.color-bar {
+.ff-excel-color-selector {
+  position: absolute;
   background-color: var(--error_light);
-  width: 100%;
-  height: 4px;
-  .colorPicker {
+  width: 14px;
+  height: 3px;
+  bottom: 3px;
+  z-index: 200;
+  cursor: pointer;
+  .ff-excel-color-selector-picker {
     width: 100%;
     height: 0;
     padding: 0;

package/src/components/Excel/ColorBarSelector/ColorBarSelector.tsx

@@ -20,7 +20,7 @@ const ColorBarSelector: React.FC<ColorBarSelectorProps> = ({
 
   return (
     <div
-      className="color-bar"
+      className="ff-excel-color-selector"
       style={{
         backgroundColor: `${color}`,
       }}
@@ -29,7 +29,7 @@ const ColorBarSelector: React.FC<ColorBarSelectorProps> = ({
       <input
         type="color"
         disabled={disabled}
-        className="colorPicker"
+        className="ff-excel-color-selector-picker"
         ref={colorInputRef}
         onChange={(e) => {
           setColor(e.target.value);

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

@@ -1,39 +1,27 @@
-@use '../../../assets/styles/fonts';
+.ff-excel-menu {
+  position: absolute;
+  border: 1px solid var(--option-card-border-color);
+  background: var(--option-card-bg-color);
+  border-radius: 4px;
+  margin: 2px;
+  min-height: 32px;
+  min-width: 111px;
+  white-space: nowrap;
+  z-index: 100;
 
-
-.ff-option-card {
-    position: absolute;
-    border: 1px solid var(--option-card-border-color);
-    background: var(--option-card-bg-color);
-    border-radius: 4px;
-    margin: 2px;
-    min-height: 32px;
-    min-width: 111px;
-    white-space: nowrap;
-    z-index: 100;
-
-    .ff-options {
-      @extend .fontSm;
-      cursor: pointer;
-      border-radius: 4px;
-      display: flex;
-      align-items: center;
-      padding: 8px;
-      line-height: 16px;
-      gap: 8px;
-      &:hover {
-        background-color: var(--hover-color);
-      }
-      label {
-        cursor: pointer;
-      }
+  .ff-excel-menu-options {
+    color: var(--text-color);
+    cursor: pointer;
+    border-radius: 3px;
+    display: flex;
+    align-items: center;
+    padding: 4px;
+    gap: 8px;
+    &:hover {
+      background-color: var(--hover-color);
     }
-
-    .ff-disable-option {
-      opacity: 0.5;
-      cursor: no-drop;
-      label {
-        cursor: no-drop;
-      }
+    label {
+      cursor: pointer;
     }
   }
+}

package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.tsx

@@ -1,30 +1,21 @@
 import Icon from '../../Icon';
 import './ExcelContextMenu.scss';
 import Typography from '../../Typography';
-import * as Matrix from '../ExcelFile/ExcelFileComponents/matrix';
-import {
-  CellBase,
-  ContextMenuState,
-} from '../ExcelFile/ExcelFileComponents/types';
+import { ContextMenuState } from '../ExcelFile/ExcelFileComponents/types';
 
 type ExcelContextMenuProps = {
-  data: Matrix.Matrix<CellBase>;
   contextMenu: ContextMenuState;
-  addRowTop: (data: Matrix.Matrix<CellBase>) => void;
-  addColumnLeft: (data: Matrix.Matrix<CellBase>) => void;
-  deleteRow: (data: Matrix.Matrix<CellBase>) => void;
-  deleteColumn: (data: Matrix.Matrix<CellBase>) => void;
 };
 
 const ExcelContextMenu: React.FC<ExcelContextMenuProps> = ({ contextMenu }) => {
   return (
     <div
-      className="ff-option-card"
+      className="ff-excel-menu"
       style={{ left: contextMenu.position.x, top: contextMenu.position.y }}
     >
       {contextMenu.options.map((option) => (
         <div
-          className={'ff-options'}
+          className={'ff-excel-menu-options'}
           onClick={() => {
             option.action();
           }}

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

@@ -1,31 +1,41 @@
-.excel-page {
+.ff-excel-page {
   width: 100%;
   display: flex;
+  margin-top: 40px;
   flex-direction: column;
   align-items: center;
 
-  .excel-book {
+  .ff-excel-book {
     position: relative;
     width: 100%;
-    .excel-sheet {
-      overflow: auto;
-      scrollbar-width: thin;
-    }
 
-    .sheet-bar {
-      margin-top: 5px;
-      padding: 0p 20px;
+    // .ff-excel-sheet { TODO
+    //   overflow: auto;
+    //   scrollbar-width: none;
+    //   &::-webkit-scrollbar {
+    //     height: 0px;
+    //   }
+    // }
+
+    .ff-excel-sheet-bar {
+      margin-left: 83px;
+      display: flex;
+      height: 36px;
       align-items: center;
-      .add-sheet-icon {
-        display: flex;
-        align-items: start;
-        justify-content: center;
+      color: var(--brand2-color);
+      margin-top: -2px;
+      box-shadow: 0px 0px 4px -1px var(--toggle-strip-shadow);
+
+      .ff-excel-add-sheet-icon {
+        padding: 4px 6px;
       }
-      .excel-tab-container {
+      .ff-excel-tab-container {
+        height: 36px;
+        width: 860px;
         display: flex;
         overflow-x: auto;
         align-items: center;
-        scrollbar-width: thin;
+        scrollbar-width: none;
         scrollbar-color: var(--hover-color) transparent;
         &::-webkit-scrollbar-track {
           background-color: transparent;
@@ -33,12 +43,15 @@
         &::-webkit-scrollbar-thumb {
           border-radius: 5px;
         }
-        .excel-tab-list {
-          padding: 10px 20px;
+        &::-webkit-scrollbar {
+          height: 0px;
+        }
+        .ff-excel-tab-list {
+          margin-top: 2px;
+          padding: 10px 9px;
           min-width: max-content;
           cursor: pointer;
           display: flex;
-          font-weight: bold;
           background-color: var(--hover-color);
           &.active {
             background-color: var(--excel-sheet-button-color);
@@ -53,10 +66,3 @@
     }
   }
 }
-.menu-list {
-  display: flex;
-  align-items: center;
-  .menu-title {
-    padding-left: 5px;
-  }
-}

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

@@ -2,11 +2,13 @@ import React, { useState, useRef, useEffect } from 'react';
 import Spreadsheet, { CellBase } from './ExcelFileComponents/index';
 import * as Matrix from './ExcelFileComponents/matrix';
 import './ExcelFile.scss';
-import { Col, Row } from '../../GridLayout/GridLayout';
 import Tooltip from '../../Tooltip';
 import Icon from '../../Icon';
 import Toastify from '../../Toastify';
 import { toast } from '../../Toastify/Toastify';
+import { ContextMenuState } from './ExcelFileComponents/types';
+import ExcelContextMenu from '../ExcelContextMenu/ExcelContextMenu';
+import Typography from '../../Typography';
 
 interface ExcelFileProps {
   /** The Excel data containing sheets and their content */
@@ -33,6 +35,12 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
   onSave = () => {},
 }) => {
   const [sheetNames, setSheetNames] = useState<string[]>([]);
+  const [contextMenu, setContextMenu] = React.useState<ContextMenuState>({
+    open: false,
+    position: { x: 0, y: 0 },
+    options: [{ label: '', value: '', iconName: '', action: () => {} }],
+  });
+
   const EmptyRow: CellBase = {
     value: '',
     style: {
@@ -41,6 +49,7 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
       borderColor: 'var(--toggle-strip-color)',
     },
   };
+
   const [selectedSheet, setSelectedSheet] = useState<{
     name: string;
     index: number;
@@ -54,15 +63,37 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
     Matrix.Matrix<CellBase>
   >([[EmptyRow]]);
 
-  let pageRef = useRef<string>('');
+  const pageRef = useRef<string>('');
   const sheetRef = useRef<HTMLDivElement | null>(null);
 
-  let checkVal = (val: any) => {
+  const checkVal = (val: any) => {
     if (val === undefined || val === null) {
       return null;
     }
     return val;
   };
+
+  const options = [
+    {
+      label: 'Add Sheet',
+      value: 'Add Sheet',
+      iconName: 'plus_icon',
+      action: () => {
+        handleAddSheet();
+      },
+      disable: false,
+    },
+    {
+      label: 'Delete Sheet',
+      value: 'Delete Sheet',
+      iconName: 'delete',
+      action: () => {
+        handleDeleteSheet();
+      },
+      disable: false,
+    },
+  ];
+
   useEffect(() => {
     const payload = excelData;
     const sheetNames = payload.sheets.map((e) => e.sheetName);
@@ -111,7 +142,7 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
 
   const onEvaluateChange = (data: Matrix.Matrix<CellBase>) => {
     setWorksheetsData((prev) => ({ ...prev, [pageRef.current]: data }));
-    onSave()
+    onSave();
   };
 
   const [editingSheet, setEditingSheet] = useState<number | null>(null);
@@ -142,6 +173,38 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
     pageRef.current = newSheetName;
   };
 
+  useEffect(() => {
+    const selectedData = worksheetsData[selectedSheet.name];
+    if (selectedData !== undefined) {
+      setSelectedSheetData(selectedData);
+    } else {
+      setSelectedSheetData([]);
+    }
+  }, [selectedSheet.name, worksheetsData]);
+
+  const handleDeleteSheet = () => {
+    const { index, name } = selectedSheet;
+
+    if (sheetNames.length > 1) {
+      let updatedSheetNames = sheetNames.slice();
+      updatedSheetNames.splice(index, 1);
+
+      const updatedWorksheetsData = { ...worksheetsData };
+
+      delete updatedWorksheetsData[name];
+      const newIndex = Math.min(index, updatedSheetNames.length - 1);
+
+      setSheetNames(updatedSheetNames);
+      setWorksheetsData(updatedWorksheetsData);
+      setSelectedSheet({
+        index: newIndex,
+        name: updatedSheetNames[newIndex] ? updatedSheetNames[newIndex] : '',
+      });
+    } else {
+      toast.warning('Cannot delete the last sheet.');
+    }
+  };
+
   const handleNameChange = (
     event: React.SyntheticEvent<HTMLDivElement>,
     index: number,
@@ -214,6 +277,9 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
   }
 
   const handleSheetChange = (name: string, index: number) => {
+    if (name === selectedSheet.name || index === selectedSheet.index) {
+      return;
+    }
     setSelectedSheet({ index, name });
     setSheetNames((prev: string[]) => {
       const updatedSheetNames = [...prev];
@@ -239,18 +305,63 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
     selection?.addRange(range);
   };
 
+  const handleClickOutside = React.useCallback(
+    (event: MouseEvent) => {
+      if (contextMenu.open) {
+        event.preventDefault();
+        event.stopPropagation();
+        setContextMenu({
+          open: false,
+          position: { x: 0, y: 0 },
+          options: [{ label: '', value: '', iconName: '', action: () => {} }],
+        });
+      }
+    },
+    [contextMenu.open]
+  );
+
+  React.useEffect(() => {
+    document.addEventListener('click', handleClickOutside);
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, [handleClickOutside]);
+
+  const contextClick = (event: React.MouseEvent) => {
+    event.preventDefault();
+    const target = event.target as HTMLElement;
+    const selectedSheetName = target.innerText;
+
+    sheetNames.map((name, index) => {
+      if (selectedSheetName === name) {
+        handleSheetChange(name, index);
+      }
+    });
+
+    setContextMenu({
+      open: true,
+      position: {
+        x: event.pageX - 50,
+        y: event.pageY - 350,
+      },
+      options: options,
+    });
+  };
+
   return (
-    <div className="excel-page">
+    <div className="ff-excel-page">
       {sheetNames.length > 0 && (
-        <div className="excel-book">
-          <div ref={sheetRef} className="excel-sheet">
+        <div className="ff-excel-book">
+          {contextMenu.open && <ExcelContextMenu contextMenu={contextMenu} />}
+          <div ref={sheetRef} className="ff-excel-sheet">
             <Spreadsheet
+              setContextMenu={setContextMenu}
               data={selectedSheetData}
               onEvaluatedDataChange={onEvaluateChange}
             />
           </div>
-          <Row className="sheet-bar">
-            <Col size={0} className="add-sheet-icon">
+          <div className="ff-excel-sheet-bar">
+            <div className="ff-excel-add-sheet-icon">
               <Tooltip title="Add Sheet" placement="top">
                 <Icon
                   className="cursor-pointer ml-1"
@@ -263,45 +374,44 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
                   width={20}
                 />
               </Tooltip>
-            </Col>
-            <Col size={10}>
-              <div className="excel-tab-container">
-                {sheetNames.map((name, index) => (
-                  <div
-                    key={name}
-                    className={`excel-tab-list ${
-                      name === selectedSheet.name ? 'active' : ''
-                    }`}
-                    onClick={() => {
-                      handleSheetChange(name, index);
-                    }}
-                    suppressContentEditableWarning={editingSheet === index}
-                    onDoubleClick={(e) => {
-                      setEditingSheet(index);
-                      if (editingSheet === null) {
-                        setTimeout(
-                          () => setCursorToEnd(e.target as HTMLDivElement),
-                          0
-                        );
-                      }
-                    }}
-                    contentEditable={editingSheet === index}
-                    onBlur={(e) => {
+            </div>
+            <div className="ff-excel-tab-container">
+              {sheetNames.map((name, index) => (
+                <div
+                  key={name}
+                  onContextMenu={contextClick}
+                  className={`ff-excel-tab-list ${
+                    name === selectedSheet.name ? 'active' : ''
+                  }`}
+                  onClick={() => {
+                    handleSheetChange(name, index);
+                  }}
+                  suppressContentEditableWarning={editingSheet === index}
+                  onDoubleClick={(e) => {
+                    setEditingSheet(index);
+                    if (editingSheet === null) {
+                      setTimeout(
+                        () => setCursorToEnd(e.target as HTMLDivElement),
+                        0
+                      );
+                    }
+                  }}
+                  contentEditable={editingSheet === index}
+                  onBlur={(e) => {
+                    handleNameChange(e, index, name);
+                  }}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') {
+                      e.preventDefault();
                       handleNameChange(e, index, name);
-                    }}
-                    onKeyDown={(e) => {
-                      if (e.key === 'Enter') {
-                        e.preventDefault();
-                        handleNameChange(e, index, name);
-                      }
-                    }}
-                  >
-                    {name}
-                  </div>
-                ))}
-              </div>
-            </Col>
-          </Row>
+                    }
+                  }}
+                >
+                  <Typography>{name}</Typography>
+                </div>
+              ))}
+            </div>
+          </div>
         </div>
       )}
       <Toastify />