pixel-react-excel-sheet 1.0.1 → 1.1.9

package/src/components/ExcelFile/ExcelToolBar/ExcelToolBar.tsx

@@ -6,23 +6,41 @@ import Tooltip from '../../Tooltip';
 import Icon from '../../Icon';
 import classNames from 'classnames';
 import Select from '../../Select';
+import { CellBase } from '../ExcelFile/Excel';
+import * as Matrix from '../ExcelFile/Excel/matrix';
+
+interface ExcelToolBarProps {
+  toolbar?: 'show' | 'disable' | 'hide';
+  data: Matrix.Matrix<CellBase>;
+  onBold: (data: Matrix.Matrix<CellBase>) => void;
+  onItalic: (data: Matrix.Matrix<CellBase>) => void;
+  onUnderline: (data: Matrix.Matrix<CellBase>) => void;
+  setColor: (data: Matrix.Matrix<CellBase>, value: string) => void;
+  setBackgroundColor: (data: Matrix.Matrix<CellBase>, value: string) => void;
+  setFormatePainter: (data: Matrix.Matrix<CellBase>) => void;
+}
 
 const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
   toolbar = 'show',
-  applyStyle,
-  formatePaint,
+  data,
+  onBold,
+  onItalic,
+  onUnderline,
+  setColor,
+  setBackgroundColor,
+  setFormatePainter,
 }) => {
   const [borderType, setBorderType] = useState<string>('All Border');
   const [textAlign, setTextAlign] = useState<string>('Text Left');
   const [colorContainer, setColorPicker] = useState<ColorContainer>({
-    color:"var(--brand-color)" ,
-    backgroundColor:"var(--brand-color)" ,
-    borderColor:"var(--brand-color)" ,
+    color: 'var(--error-light)',
+    backgroundColor: 'var(--error-light)',
+    borderColor: 'var(--text-color)',
   });
-  const [formatePainter, setFormatePainter] = useState<boolean>(false);
-
-  const borderTypeIcon = () =>{
+  const [formatePainterState, setFormatePainterState] =
+    useState<boolean>(false);
 
+  const borderTypeIcon = () => {
     return [
       { value: 'border-all-sides', label: 'All Border', icon: 'all_borders' },
       { value: 'border-bottom', label: 'Border Bottom', icon: 'border_bottom' },
@@ -30,15 +48,23 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
       { value: 'border-right', label: 'Border Right', icon: 'border_right' },
       { value: 'border-top', label: 'Border Top', icon: 'border_top' },
       { value: 'border-none', label: 'No Border', icon: 'no_border' },
-    ]
-  }
-    const TextAlignIcon = () => {
-      return [
-        { label: 'Text Left', value: 'text-align-left', icon: 'text_align_left' },
-        { label: 'Text Center', value: 'text-align-center', icon: 'text_align_center' },
-        { label: 'Text Right', value: 'text-align-right', icon: 'text_align_right' },
-      ];
-    };
+    ];
+  };
+  const TextAlignIcon = () => {
+    return [
+      { label: 'Text Left', value: 'text-align-left', icon: 'text_align_left' },
+      {
+        label: 'Text Center',
+        value: 'text-align-center',
+        icon: 'text_align_center',
+      },
+      {
+        label: 'Text Right',
+        value: 'text-align-right',
+        icon: 'text_align_right',
+      },
+    ];
+  };
 
   const getTextColor = (color: string) => {
     setColorPicker((prev) => ({ ...prev, color }));
@@ -50,8 +76,8 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
 
   useEffect(() => {
     let timeGap = setTimeout(() => {
-      applyStyle('color', colorContainer.color);
-    }, 800);
+      setColor(data, colorContainer.color);
+    }, 0);
     return () => {
       clearTimeout(timeGap);
     };
@@ -59,8 +85,8 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
 
   useEffect(() => {
     let timeGap = setTimeout(() => {
-      applyStyle('backgroundColor', colorContainer.backgroundColor);
-    }, 800);
+      setBackgroundColor(data, colorContainer.backgroundColor);
+    }, 0);
     return () => {
       clearTimeout(timeGap);
     };
@@ -76,7 +102,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
         <Icon
           disabled={toolbar === 'disable'}
           onClick={() => {
-            applyStyle('bold', true);
+            onBold(data);
           }}
           name="bold"
         />
@@ -85,148 +111,142 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
         <Icon
           disabled={toolbar === 'disable'}
           onClick={() => {
-            applyStyle('italic', true);
+            onItalic(data);
           }}
           name="italic"
         />
       </Tooltip>
 
       <Select
-      className='textType'
-  label="Text type"
-  onChange={()=>{}}
-  optionsList={[
-    {
-      label: 'Option 1',
-      value: '1'
-    },
-    {
-      label: 'Option 2',
-      value: '2'
-    },
-    {
-      label: 'Option 3',
-      value: '3'
-    }
-  ]}
-  selectedOption={{
-    label: 'Option 2',
-    value: 'Arial'
-  }}
-/>
-      <Select
-  label="Text Size"
-  onChange={()=>{}}
-  optionsList={[
-    {
-      label: 'Option 1',
-      value: '1'
-    },
-    {
-      label: 'Option 2',
-      value: '2'
-    },
-    {
-      label: 'Option 3',
-      value: '3'
-    }
-  ]}
-  selectedOption={{
-    label: 'Option 2',
-    value: '11'
-  }}
-/>
-<div style={{display:"flex",alignItems:'center'}}>
-<Tooltip placement="top" title={'Formate Painter'}>
-        <div className={formatePainter ? 'formate-painter-active' : ''}>
-          <Icon
-            disabled={toolbar === 'disable'}
-            onClick={() => {
-              setFormatePainter((prev) => !prev);
-              formatePaint();
-            }}
-            name="all_borders"
-          />
-        </div>
-      </Tooltip>
-      <MenuOption
-        iconName="more"
-        options={borderTypeIcon()}
-        tooltipTitle="Border Type"
-        tooltipPlacement="top"
-        onOptionClick={(e) => {          
-          setBorderType(borderType);
-          applyStyle('border', e.label);
+        className="textType"
+        label="Text type"
+        onChange={() => {}}
+        optionsList={[
+          {
+            label: 'Option 1',
+            value: '1',
+          },
+          {
+            label: 'Option 2',
+            value: '2',
+          },
+          {
+            label: 'Option 3',
+            value: '3',
+          },
+        ]}
+        selectedOption={{
+          label: 'Option 2',
+          value: 'Arial',
         }}
       />
-      </div>
-      <div style={{display:"flex",alignItems:'center'}}>
-      <Tooltip placement="top" title={'Formate Painter'}>
-        <div className={formatePainter ? 'formate-painter-active' : ''}>
-          <Icon
-            disabled={toolbar === 'disable'}
-            onClick={() => {
-              setFormatePainter((prev) => !prev);
-              formatePaint();
-            }}
-            name="text_align_left"
-          />
-        </div>
-      </Tooltip>
-      <MenuOption
-        iconName="more"
-        options={TextAlignIcon()}
-        tooltipTitle="Text Align"
-        tooltipPlacement="top"
-        onOptionClick={(e) => {
-          setTextAlign(textAlign);
-          applyStyle('alignment', e.label);
+      <Select
+        label="Text Size"
+        onChange={() => {}}
+        optionsList={[
+          {
+            label: 'Option 1',
+            value: '1',
+          },
+          {
+            label: 'Option 2',
+            value: '2',
+          },
+          {
+            label: 'Option 3',
+            value: '3',
+          },
+        ]}
+        selectedOption={{
+          label: 'Option 2',
+          value: '11',
         }}
       />
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <Tooltip placement="top" title={'Formate Painter'}>
+          <div className={formatePainterState ? 'formate-painter-active' : ''}>
+            <Icon
+              disabled={toolbar === 'disable'}
+              onClick={() => {
+                setFormatePainterState((prev) => !prev);
+              }}
+              name="all_borders"
+            />
+          </div>
+        </Tooltip>
+        <MenuOption
+          iconName="more"
+          options={borderTypeIcon()}
+          tooltipTitle="Border Type"
+          tooltipPlacement="top"
+          onOptionClick={() => {
+            setBorderType(borderType);
+          }}
+        />
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <Tooltip placement="top" title={'Formate Painter'}>
+          <div className={formatePainterState ? 'formate-painter-active' : ''}>
+            <Icon
+              disabled={toolbar === 'disable'}
+              onClick={() => {
+                setFormatePainter(data);
+                setFormatePainterState((prev) => !prev);
+              }}
+              name="text_align_left"
+            />
+          </div>
+        </Tooltip>
+        <MenuOption
+          iconName="more"
+          options={TextAlignIcon()}
+          tooltipTitle="Text Align"
+          tooltipPlacement="top"
+          onOptionClick={() => {
+            setTextAlign(textAlign);
+          }}
+        />
       </div>
       <Tooltip placement="top" title={'Formate Painter'}>
-        <div className={formatePainter ? 'formate-painter-active' : ''}>
+        <div className={formatePainterState ? 'formate-painter-active' : ''}>
           <Icon
             disabled={toolbar === 'disable'}
             onClick={() => {
-              setFormatePainter((prev) => !prev);
-              formatePaint();
+              setFormatePainterState((prev) => !prev);
             }}
             name="formate_painter"
           />
         </div>
       </Tooltip>
       <Tooltip placement="top" title={'Formate Painter'}>
-        <div className={formatePainter ? 'formate-painter-active' : ''}>
+        <div className={formatePainterState ? 'formate-painter-active' : ''}>
           <Icon
             disabled={toolbar === 'disable'}
             onClick={() => {
-              setFormatePainter((prev) => !prev);
-              formatePaint();
+              setFormatePainterState((prev) => !prev);
+              // formatePaint();
             }}
             name="strike_through"
           />
         </div>
       </Tooltip>
-      <Tooltip placement="top" title={'Formate Painter'}>
-        <div className={formatePainter ? 'formate-painter-active' : ''}>
+      <Tooltip placement="top" title={'Underline'}>
+        <div>
           <Icon
             disabled={toolbar === 'disable'}
             onClick={() => {
-              setFormatePainter((prev) => !prev);
-              formatePaint();
+              onUnderline(data);
             }}
             name="underline"
           />
         </div>
       </Tooltip>
       <Tooltip placement="top" title={'Formate Painter'}>
-        <div className={formatePainter ? 'formate-painter-active' : ''}>
+        <div className={formatePainterState ? 'formate-painter-active' : ''}>
           <Icon
             disabled={toolbar === 'disable'}
             onClick={() => {
-              setFormatePainter((prev) => !prev);
-              formatePaint();
+              setFormatePainterState((prev) => !prev);
             }}
             name="double_underline"
           />
@@ -237,7 +257,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
           <Icon
             disabled={toolbar === 'disable'}
             onClick={() => {
-              applyStyle('color', colorContainer.color);
+              setColor(data, colorContainer.color);
             }}
             name="text_color"
           />
@@ -252,7 +272,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
           <Icon
             disabled={toolbar === 'disable'}
             onClick={() => {
-              applyStyle('backgroundColor', colorContainer.backgroundColor);
+              setBackgroundColor(data, colorContainer.backgroundColor);
             }}
             name="fill_color"
           />

package/src/components/ExcelFile/Types.ts

@@ -109,17 +109,6 @@ interface SelectedValue {
   /** The sheet name where the cell is located */
   sheet: string;
 }
-interface ExcelToolBarProps {
-  /** use this to hide/show/disable the toolbar */
-  toolbar?: 'show' | 'disable' | 'hide';
-
-  /** function to apply styles */
-  applyStyle: (styleType: string, value: any) => void;
-
-  /** function to trigger format painter */
-  formatePaint: () => void;
-}
-
 interface ExcelSheetBarProps {
   /** Object containing details about the file, including sheet names */
   fileDetails: {

package/src/components/ExcelFile/index.ts

@@ -1 +1 @@
-export { default } from './ExcelFile/ExcelFile';
+export { default } from './ExcelFile/ExcelFile';

package/src/components/Icon/Icon.stories.tsx

@@ -6,6 +6,12 @@ const meta: Meta<typeof Icon> = {
   title: 'Components/Icon',
   component: Icon,
   tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: ['light', 'dark'],
+    },
+  },
 };
 
 type Story = StoryObj<typeof Icon>;
@@ -34,4 +40,25 @@ export const AllIcons: Story = {
   },
 };
 
+export const DarkVariantIcons: Story = {
+  args: {
+    name: 'hamburger_menu',
+    color: 'var(--ff-icon-color-dark-variant)',
+    variant: 'dark',
+    hoverEffect: true, 
+  },
+  render: (args) => {
+    const backgroundColor = args.variant === 'dark' ? '#000' : '#fff';
+    const iconColor = args.variant === 'dark' ? 'var(--ff-icon-color-dark-variant)' : 'var(--brand-color)';
+
+    return (
+      <div style={{ backgroundColor, padding: '20px' }}>
+        <Icon {...args} color={iconColor} height={16} width={16} />
+      </div>
+    );
+  },
+};
+
+
+
 export default meta;

package/src/components/Icon/Icon.tsx

@@ -15,6 +15,7 @@ const Icon = forwardRef<HTMLSpanElement, IconProps>(
       hoverEffect = false,
       className = '',
       disabled = false,
+      variant = "light",
       ...props
     },
     ref
@@ -28,6 +29,8 @@ const Icon = forwardRef<HTMLSpanElement, IconProps>(
       return null;
     }
 
+    const iconColor = variant === "dark" ? 'var(--ff-icon-color-dark-variant)'  : color;
+
     return (
       <span
         ref={ref}
@@ -36,11 +39,12 @@ const Icon = forwardRef<HTMLSpanElement, IconProps>(
         className={classNames('ff-icon-container', {
           'ff-icon-click': !!hoverEffect,
           'ff-icon-disabled': disabled,
+          'ff-icon-dark': variant === "dark",
           [className]: !!className,
         })}
         {...props}
       >
-        <IconComponent height="100%" width="100%" style={{ color: color }} />
+        <IconComponent height="100%" width="100%" style={{ color: iconColor }} />
       </span>
     );
   }

package/src/components/Icon/Icons.scss

@@ -1,13 +1,24 @@
-
 .ff-icon-container {
   display: flex;
   justify-content: center;
   align-items: center;
+  padding: 4px;
+  &.ff-icon-dark {
+    background-color: var(--brand-color);
+    &.ff-icon-click {
+      &:hover {
+        border-radius: 4px;
+        background-color: white;
+        svg path {
+          fill: var(--brand-color);
+        }
+      }
+    }
+  }
 }
 
 .ff-icon-click {
   cursor: pointer;
-  padding: 4px;
   box-sizing: content-box;
   &:hover {
     border-radius: 4px;

package/src/components/Icon/types.ts

@@ -7,4 +7,5 @@ export interface IconProps {
   onClick?: (data?: any) => void;
   hoverEffect?: boolean;
   disabled?: boolean;
+  variant?: "dark" | "light";
 }

package/src/components/ExcelFile/ChangeExcelStyles.tsx

@@ -1,66 +0,0 @@
-import { CellBase } from "./ExcelFile/Excel";
-
-interface ChangeExcelStylesOptions {
-  sheetName: string;
-  styleType: string;
-  value: string;  
-  selectedCell: { row: number; column: number }[];
-}
-
-export default function ChangeExcelStyles(
-  setWorksheetsData: React.Dispatch<React.SetStateAction<{ [key: string]: Matrix<CellBase>; }>>,
-  options: ChangeExcelStylesOptions
-) {
-  const { sheetName, styleType, value, selectedCell } = options;
-
-  setWorksheetsData((prev) => {
-    if (!prev[sheetName]) {
-      return prev;
-    }
-
-    const sheetData = prev[sheetName]!;
-    const selectedCells = new Set(
-      selectedCell.map(({ row, column }) => `${row}-${column}`)
-    );
-
-    const updatedSheetData: Matrix<CellBase> = sheetData.map((row, rowIndex) =>
-      row.map((cell, columnIndex) => {
-        const isSelected = selectedCells.has(`${rowIndex}-${columnIndex}`);
-        if (isSelected&&cell!==undefined) {
-          let newStyle = { ...cell.style };
-    
-          switch (styleType) {
-            case 'color':
-              newStyle = handleColorChange(newStyle, value);              
-              break;
-            case 'backgroundColor':
-              newStyle = handleBackgroundColorChange(newStyle, value);
-              break;
-            default:
-              break;
-          }
-    
-          const newValue = cell.value ?? "";
-          
-          return { ...cell, style: newStyle, value: newValue };
-        }
-        return cell;
-      })
-    );
-    
-    
-
-    return { ...prev, [sheetName]: updatedSheetData };
-  });
-}
-
-function handleColorChange(style:any, value: string) {
-  return { ...style, color: `#${value}` };
-}
-
-function handleBackgroundColorChange(
-  style: any,
-  value: string
-) {
-  return { ...style, backgroundColor: `#${value}` };
-}