pixel-react 1.6.9 → 1.7.0

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

@@ -1,397 +1,414 @@
-import { useEffect, useState } from 'react';
-import './ExcelToolBar.scss';
-import MenuOption from '../../MenuOption';
-import Tooltip from '../../Tooltip';
-import Icon from '../../Icon';
-import Select from '../../Select';
-import { CellBase } from '../ExcelFile/ExcelFileComponents';
-import * as Matrix from '../ExcelFile/ExcelFileComponents/matrix';
-import ColorBarSelector from '../ColorBarSelector/ColorBarSelector';
-import useSelector from '../ExcelFile/ExcelFileComponents/use-selector';
-import { convertStyleToBackend } from '../dataConversion';
-
-interface ExcelToolBarProps {
-  toolbar?: 'show' | 'disable' | 'hide';
-  onBold: (data: Matrix.Matrix<CellBase>) => void;
-  onItalic: (data: Matrix.Matrix<CellBase>) => void;
-  setUnderlineType: (
-    data: Matrix.Matrix<CellBase>,
-    value: string,
-    active: boolean
-  ) => void;
-  setColor: (data: Matrix.Matrix<CellBase>, value: string) => void;
-  setBackgroundColor: (data: Matrix.Matrix<CellBase>, value: string) => void;
-  setFormatePainter: (data: Matrix.Matrix<CellBase>) => void;
-  setTextAlign: (data: Matrix.Matrix<CellBase>, value: string) => void;
-  setFontSize: (data: Matrix.Matrix<CellBase>, value: string) => void;
-  setFontFamily: (data: Matrix.Matrix<CellBase>, value: string) => void;
-  setBorderType: (
-    data: Matrix.Matrix<CellBase>,
-    value: string,
-    color: string
-  ) => void;
-}
-
-const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
-  toolbar = 'show',
-  onBold,
-  onItalic,
-  setUnderlineType,
-  setColor,
-  setFontSize,
-  setFontFamily,
-  setTextAlign,
-  setBackgroundColor,
-  setBorderType,
-  setFormatePainter,
-}) => {
-  const cell = useSelector((state) =>
-    state.active ? Matrix.get(state.active, state.model.data) : null
-  );
-  const data = useSelector((state) => state.model.data);
-  const formattedStyle = useSelector((state) => state.formattedStyle.open);
-
-  const [cellStyle, setCellStyle] = useState(
-    cell?.style || {
-      color: 'var(--text-color)',
-      backgroundColor: 'var(--drawer-footer-bg)',
-      borderColor: 'var(--toggle-strip-color)',
-    }
-  );
-
-  useEffect(() => {
-    setCellStyle(
-      cell?.style || {
-        color: 'var(--text-color)',
-        backgroundColor: 'var(--drawer-footer-bg)',
-        borderColor: 'var(--toggle-strip-color)',
-      }
-    );
-  }, [cell]);
-
-  useEffect(() => {
-    if (
-      cell?.style &&
-      JSON.stringify(cell.style) !== JSON.stringify(cellStyle)
-    ) {
-      setCellStyle(cell.style);
-    }
-  }, [cell]);
-
-  const styleBackend = convertStyleToBackend(cellStyle);
-  
-
-  const [border, setBorder] = useState<string>('border-none');
-  const [underLine, setUnderLine] = useState<string>('underline');
-  const [selectedFontFamily, setSelectedFontFamily] = useState<{
-    label: string;
-    value: string;
-  }>({
-    label: 'Times New Roman',
-    value: '"Times New Roman"',
-  });
-  const [colorContainer, setColorPicker] = useState<ColorContainer>({
-    color: 'var(--error-light)',
-    backgroundColor: 'var(--error-light)',
-    borderColor: 'var(--text-color)',
-  });
-
-  const borderTypeIcon = [
-    { value: 'border-all-sides', label: 'All Border', icon: 'all_borders' },
-    { value: 'border-bottom', label: 'Border Bottom', icon: 'border_bottom' },
-    { value: 'border-left', label: 'Border Left', icon: 'border_left' },
-    { 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 underlineTypeIcon = [
-    { value: 'underline', label: 'Underline', icon: 'underline' },
-    {
-      value: 'double_border',
-      label: 'Double Underline',
-      icon: 'double_underline',
-    },
-    { value: 'line-through', label: 'Strikethrough', icon: 'strike_through' },
-  ];
-
-  const fontFamily = [
-    {
-      label: 'Times New Roman',
-      value: '"Times New Roman"',
-    },
-    {
-      label: 'Arial',
-      value: 'Arial',
-    },
-    {
-      label: 'Courier New',
-      value: '"Courier New"',
-    },
-  ];
-
-  const fontSize = [
-    {
-      label: '5',
-      value: '5',
-    },
-    {
-      label: '9',
-      value: '9',
-    },
-    {
-      label: '11',
-      value: '11',
-    },
-    {
-      label: '12',
-      value: '12',
-    },
-    {
-      label: '14',
-      value: '14',
-    },
-    {
-      label: '16',
-      value: '16',
-    },
-    {
-      label: '18',
-      value: '18',
-    },
-  ];
-
-  const getTextColor = (color: string) => {
-    setColorPicker((prev) => ({ ...prev, color: color }));
-  };
-
-  const getBackgroundColor = (color: string) => {
-    setColorPicker((prev) => ({ ...prev, backgroundColor: color }));
-  };
-
-  useEffect(() => {
-    let timeGap = setTimeout(() => {
-      setColor(data, colorContainer.color);
-    }, 0);
-    return () => {
-      clearTimeout(timeGap);
-    };
-  }, [colorContainer.color]);
-
-  useEffect(() => {
-    let timeGap = setTimeout(() => {
-      setBackgroundColor(data, colorContainer.backgroundColor);
-    }, 0);
-    return () => {
-      clearTimeout(timeGap);
-    };
-  }, [colorContainer.backgroundColor]);
-
-  let getUnderlineIcon = () => {
-    const selectedIcon = underlineTypeIcon.find((e) => e.value === underLine);
-    return selectedIcon ? selectedIcon.icon : '';
-  };
-
-  let getBorderIcon = () => {
-    const selectedIcon = borderTypeIcon.find((e) => e.value === border);
-    return selectedIcon ? selectedIcon.icon : '';
-  };
-
-  return (
-    <div className="ff-excel-toolbar">
-      <div className="ff-excel-toolbar-font ">
-        <Tooltip placement="top" title={'Font Family'}>
-          <div className="ff-excel-toolbar-font-family">
-            <Select
-              showLabel={false}
-              onChange={(e) => {
-                setSelectedFontFamily({ label: e.label, value: e.value });
-                setFontFamily(data, e.label);
-              }}
-              required={false}
-              optionsList={fontFamily}
-              selectedOption={selectedFontFamily}
-            />
-          </div>
-        </Tooltip>
-        <Tooltip placement="top" title={'Font Size'}>
-          <div className="ff-excel-toolbar-font-size">
-            <Select
-              showLabel={false}
-              required={false}
-              onChange={(e) => setFontSize(data, e.value)}
-              optionsList={fontSize}
-              selectedOption={{
-                label: '11',
-                value: '11',
-              }}
-            />
-          </div>
-        </Tooltip>
-      </div>
-      <div className="ff-excel-toolbar-divider"></div>
-      <div className="ff-excel-toolbar-icon">
-        <Tooltip placement="top" title={'Text Left'}>
-          <Icon
-            variant={cellStyle.textAlign === 'left' ? 'dark' : 'light'}
-            hoverEffect
-            disabled={toolbar === 'disable'}
-            onClick={() => setTextAlign(data, 'left')}
-            name="text_align_left"
-          />
-        </Tooltip>
-        <Tooltip placement="top" title={'Text Center'}>
-          <Icon
-            variant={cellStyle.textAlign === 'center' ? 'dark' : 'light'}
-            hoverEffect
-            disabled={toolbar === 'disable'}
-            onClick={() => setTextAlign(data, 'center')}
-            name="text_align_center"
-          />
-        </Tooltip>
-
-        <Tooltip placement="top" title={'Text Right'}>
-          <Icon
-            variant={cellStyle.textAlign === 'right' ? 'dark' : 'light'}
-            hoverEffect
-            disabled={toolbar === 'disable'}
-            onClick={() => setTextAlign(data, 'right')}
-            name="text_align_right"
-          />
-        </Tooltip>
-      </div>
-      <div className="ff-excel-toolbar-divider"></div>
-      <div className="ff-excel-toolbar-text">
-        <Tooltip placement="top" title={'Bold'}>
-          <Icon
-            variant={styleBackend.bold ? 'dark' : 'light'}
-            hoverEffect
-            disabled={toolbar === 'disable'}
-            onClick={() => onBold(data)}
-            name="bold"
-          />
-        </Tooltip>
-        <Tooltip placement="top" title={'Italic'}>
-          <Icon
-            hoverEffect
-            variant={styleBackend.italic ? 'dark' : 'light'}
-            disabled={toolbar === 'disable'}
-            onClick={() => onItalic(data)}
-            name="italic"
-          />
-        </Tooltip>
-        <Tooltip placement="top" title={'Underline Type'}>
-          <div className="ff-excel-toolbar-icon-underline">
-            <Icon
-              variant={cellStyle.textDecoration===underLine?'dark' : 'light'}
-              hoverEffect
-              disabled={toolbar === 'disable'}
-              onClick={() => setUnderlineType(data, underLine, true)}
-              name={getUnderlineIcon()}
-            />
-            <MenuOption
-              iconName="arrow_down"
-              iconSize={12}
-              options={underlineTypeIcon}
-              tooltipPlacement="top"
-              variant="light"
-              onOptionClick={(e) => {
-                let selectedValue = e.value as string;
-                setUnderlineType(data, selectedValue, true);
-                setUnderLine(selectedValue);
-              }}
-            />
-          </div>
-        </Tooltip>
-      </div>
-      <div className="ff-excel-toolbar-divider"></div>
-      <div className="ff-excel-toolbar-icon">
-        <Tooltip placement="top" title={'Format Painter'}>
-          <Icon
-          variant={formattedStyle?'dark':'light'}
-            hoverEffect
-            disabled={toolbar === 'disable'}
-            onClick={() => {
-              setFormatePainter(data);
-            }}
-            name="formate_painter"
-          />
-        </Tooltip>
-        <Tooltip placement="top" title={'Text Color'}>
-          <div className="ff-excel-toolbar-icon-color">
-            <Icon
-              hoverEffect
-              width={12}
-              height={12}
-              disabled={toolbar === 'disable'}
-              onClick={() => {
-                setColor(data, colorContainer.color);
-              }}
-              name="text_color"
-            />
-            <ColorBarSelector
-              disabled={toolbar === 'disable'}
-              getColorValue={getTextColor}
-            />
-          </div>
-        </Tooltip>
-        <Tooltip placement="top" title={'Background Color'}>
-          <div className="ff-excel-toolbar-icon-color">
-            <Icon
-              hoverEffect
-              width={12}
-              height={12}
-              disabled={toolbar === 'disable'}
-              onClick={() =>
-                setBackgroundColor(data, colorContainer.backgroundColor)
-              }
-              name="fill_color"
-            />
-            <ColorBarSelector
-              disabled={toolbar === 'disable'}
-              getColorValue={getBackgroundColor}
-            />
-          </div>
-        </Tooltip>
-      </div>
-      <div className="ff-excel-toolbar-divider"></div>
-      <div className="ff-excel-toolbar-menu">
-        <Tooltip placement="top" title={'Border Type'}>
-          <div className="ff-excel-toolbar-menu-option">
-            <Icon
-              hoverEffect
-              disabled={toolbar === 'disable'}
-              onClick={() => setBorderType(data, border, 'black')}
-              name={getBorderIcon()}
-            />
-            <MenuOption
-              iconName="arrow_down"
-              iconSize={12}
-              options={borderTypeIcon}
-              tooltipPlacement="top"
-              variant="light"
-              onOptionClick={(e) => {
-                let selectedValue = e.value as string;
-                setBorderType(data, selectedValue, 'black');
-                setBorder(selectedValue);
-              }}
-            />
-          </div>
-        </Tooltip>
-      </div>
-      <div className="ff-excel-toolbar-divider"></div>
-      <div className="ff-excel-toolbar-menu">
-        <Tooltip placement="top" title={'Formula'}>
-          <Icon
-            hoverEffect
-            disabled={toolbar === 'disable'}
-            onClick={() => setBorderType(data, border, 'black')}
-            name="formula_icon"
-          />
-        </Tooltip>
-      </div>
-    </div>
-  );
-};
-
-export default ExcelToolBar;
+import { useEffect, useState } from 'react';
+import './ExcelToolBar.scss';
+import MenuOption from '../../MenuOption';
+import Tooltip from '../../Tooltip';
+import Icon from '../../Icon';
+import Select from '../../Select';
+import { CellBase } from '../ExcelFile/ExcelFileComponents';
+import * as Matrix from '../ExcelFile/ExcelFileComponents/matrix';
+import ColorBarSelector from '../ColorBarSelector/ColorBarSelector';
+import useSelector from '../ExcelFile/ExcelFileComponents/use-selector';
+import { convertStyleToBackend } from '../dataConversion';
+
+interface ExcelToolBarProps {
+  toolbar?: 'show' | 'disable' | 'hide';
+  onBold: (data: Matrix.Matrix<CellBase>) => void;
+  onItalic: (data: Matrix.Matrix<CellBase>) => void;
+  setUnderlineType: (
+    data: Matrix.Matrix<CellBase>,
+    value: string,
+    active: boolean
+  ) => void;
+  setColor: (data: Matrix.Matrix<CellBase>, value: string) => void;
+  setBackgroundColor: (data: Matrix.Matrix<CellBase>, value: string) => void;
+  setFormatePainter: (data: Matrix.Matrix<CellBase>) => void;
+  setTextAlign: (data: Matrix.Matrix<CellBase>, value: string) => void;
+  setFontSize: (data: Matrix.Matrix<CellBase>, value: string) => void;
+  setFontFamily: (data: Matrix.Matrix<CellBase>, value: string) => void;
+  setBorderType: (
+    data: Matrix.Matrix<CellBase>,
+    value: string,
+    color: string
+  ) => void;
+}
+
+const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
+  toolbar = 'show',
+  onBold,
+  onItalic,
+  setUnderlineType,
+  setColor,
+  setFontSize,
+  setFontFamily,
+  setTextAlign,
+  setBackgroundColor,
+  setBorderType,
+  setFormatePainter,
+}) => {
+  const cell = useSelector((state) =>
+    state.active ? Matrix.get(state.active, state.model.data) : null
+  );
+  const data = useSelector((state) => state.model.data);
+  const formattedStyle = useSelector((state) => state.formattedStyle.open);
+
+  // Default style to Excel
+  const basicStyle: React.CSSProperties = {
+    color: 'var(--input-hover-border-color)',
+    backgroundColor: 'var(--drawer-footer-bg)',
+    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',
+  };
+
+  const [cellStyle, setCellStyle] = useState(cell?.style || basicStyle);
+
+  useEffect(() => {
+    setCellStyle(cell?.style || basicStyle);
+  }, [cell]);
+
+  useEffect(() => {
+    if (
+      cell?.style &&
+      JSON.stringify(cell.style) !== JSON.stringify(cellStyle)
+    ) {
+      setCellStyle(cell.style);
+    }
+  }, [cell]);
+
+  const styleBackend = convertStyleToBackend(cellStyle);
+  const [border, setBorder] = useState<string>('border-none');
+  const [underLine, setUnderLine] = useState<string>('underline');
+  const [selectedFontFamily, setSelectedFontFamily] = useState<{
+    label: string;
+    value: string;
+  }>({
+    label: 'Times New Roman',
+    value: '"Times New Roman"',
+  });
+  const [colorContainer, setColorPicker] = useState<ColorContainer>({
+    color: 'var(--error-light)',
+    backgroundColor: 'var(--error-light)',
+    borderColor: 'var(--input-hover-border-color)',
+  });
+
+  const borderTypeIcon = [
+    { value: 'border-all-sides', label: 'All Border', icon: 'all_borders' },
+    { value: 'border-bottom', label: 'Border Bottom', icon: 'border_bottom' },
+    { value: 'border-left', label: 'Border Left', icon: 'border_left' },
+    { 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 underlineTypeIcon = [
+    { value: 'underline', label: 'Underline', icon: 'underline' },
+    {
+      value: 'double_border',
+      label: 'Double Underline',
+      icon: 'double_underline',
+    },
+    { value: 'line-through', label: 'Strikethrough', icon: 'strike_through' },
+  ];
+
+  const fontFamily = [
+    {
+      label: 'Times New Roman',
+      value: '"Times New Roman"',
+    },
+    {
+      label: 'Arial',
+      value: 'Arial',
+    },
+    {
+      label: 'fantasy',
+      value: 'fantasy',
+    },
+    {
+      label: 'cursive',
+      value: 'cursive',
+    },
+    {
+      label: 'Poppins',
+      value: 'Poppins',
+    },
+    {
+      label: 'Courier New',
+      value: '"Courier New"',
+    },
+  ];
+
+  const fontSize = [
+    {
+      label: '5',
+      value: '5',
+    },
+    {
+      label: '9',
+      value: '9',
+    },
+    {
+      label: '11',
+      value: '11',
+    },
+    {
+      label: '12',
+      value: '12',
+    },
+    {
+      label: '14',
+      value: '14',
+    },
+    {
+      label: '16',
+      value: '16',
+    },
+    {
+      label: '18',
+      value: '18',
+    },
+  ];
+
+  const getTextColor = (color: string) => {
+    setColorPicker((prev) => ({ ...prev, color: color }));
+  };
+
+  const getBackgroundColor = (color: string) => {
+    setColorPicker((prev) => ({ ...prev, backgroundColor: color }));
+  };
+
+  useEffect(() => {
+    let timeGap = setTimeout(() => {
+      setColor(data, colorContainer.color);
+    }, 0);
+    return () => {
+      clearTimeout(timeGap);
+    };
+  }, [colorContainer.color]);
+
+  useEffect(() => {
+    let timeGap = setTimeout(() => {
+      setBackgroundColor(data, colorContainer.backgroundColor);
+    }, 0);
+    return () => {
+      clearTimeout(timeGap);
+    };
+  }, [colorContainer.backgroundColor]);
+
+  let getUnderlineIcon = () => {
+    const selectedIcon = underlineTypeIcon.find((e) => e.value === underLine);
+    return selectedIcon ? selectedIcon.icon : '';
+  };
+
+  let getBorderIcon = () => {
+    const selectedIcon = borderTypeIcon.find((e) => e.value === border);
+    return selectedIcon ? selectedIcon.icon : '';
+  };
+
+  return (
+    <div className="ff-excel-toolbar">
+      <div className="ff-excel-toolbar-font ">
+        <Tooltip placement="top" title={'Font Family'}>
+          <div className="ff-excel-toolbar-font-family">
+            <Select
+              showLabel={false}
+              onChange={(e) => {
+                setSelectedFontFamily({ label: e.label, value: e.value });
+                setFontFamily(data, e.label);
+              }}
+              required={false}
+              optionsList={fontFamily}
+              selectedOption={selectedFontFamily}
+            />
+          </div>
+        </Tooltip>
+        <Tooltip placement="top" title={'Font Size'}>
+          <div className="ff-excel-toolbar-font-size">
+            <Select
+              showLabel={false}
+              required={false}
+              onChange={(e) => setFontSize(data, e.value)}
+              optionsList={fontSize}
+              selectedOption={{
+                label: '11',
+                value: '11',
+              }}
+            />
+          </div>
+        </Tooltip>
+      </div>
+      <div className="ff-excel-toolbar-divider"></div>
+      <div className="ff-excel-toolbar-icon">
+        <Tooltip placement="top" title={'Text Left'}>
+          <Icon
+            variant={cellStyle.textAlign === 'left' ? 'dark' : 'light'}
+            hoverEffect
+            disabled={toolbar === 'disable'}
+            onClick={() => setTextAlign(data, 'left')}
+            name="text_align_left"
+          />
+        </Tooltip>
+        <Tooltip placement="top" title={'Text Center'}>
+          <Icon
+            variant={cellStyle.textAlign === 'center' ? 'dark' : 'light'}
+            hoverEffect
+            disabled={toolbar === 'disable'}
+            onClick={() => setTextAlign(data, 'center')}
+            name="text_align_center"
+          />
+        </Tooltip>
+
+        <Tooltip placement="top" title={'Text Right'}>
+          <Icon
+            variant={cellStyle.textAlign === 'right' ? 'dark' : 'light'}
+            hoverEffect
+            disabled={toolbar === 'disable'}
+            onClick={() => setTextAlign(data, 'right')}
+            name="text_align_right"
+          />
+        </Tooltip>
+      </div>
+      <div className="ff-excel-toolbar-divider"></div>
+      <div className="ff-excel-toolbar-text">
+        <Tooltip placement="top" title={'Bold'}>
+          <Icon
+            variant={styleBackend.bold ? 'dark' : 'light'}
+            hoverEffect
+            disabled={toolbar === 'disable'}
+            onClick={() => onBold(data)}
+            name="bold"
+          />
+        </Tooltip>
+        <Tooltip placement="top" title={'Italic'}>
+          <Icon
+            hoverEffect
+            variant={styleBackend.italic ? 'dark' : 'light'}
+            disabled={toolbar === 'disable'}
+            onClick={() => onItalic(data)}
+            name="italic"
+          />
+        </Tooltip>
+        <Tooltip placement="top" title={'Underline Type'}>
+          <div className="ff-excel-toolbar-icon-underline">
+            <Icon
+              variant={
+                cellStyle.textDecoration === underLine ? 'dark' : 'light'
+              }
+              hoverEffect
+              disabled={toolbar === 'disable'}
+              onClick={() => setUnderlineType(data, underLine, true)}
+              name={getUnderlineIcon()}
+            />
+            <MenuOption
+              iconName="arrow_down"
+              iconSize={12}
+              options={underlineTypeIcon}
+              tooltipPlacement="top"
+              variant="light"
+              onOptionClick={(e) => {
+                let selectedValue = e.value as string;
+                setUnderlineType(data, selectedValue, true);
+                setUnderLine(selectedValue);
+              }}
+            />
+          </div>
+        </Tooltip>
+      </div>
+      <div className="ff-excel-toolbar-divider"></div>
+      <div className="ff-excel-toolbar-icon">
+        <Tooltip placement="top" title={'Format Painter'}>
+          <Icon
+            variant={formattedStyle ? 'dark' : 'light'}
+            hoverEffect
+            disabled={toolbar === 'disable'}
+            onClick={() => {
+              setFormatePainter(data);
+            }}
+            name="formate_painter"
+          />
+        </Tooltip>
+        <Tooltip placement="top" title={'Text Color'}>
+          <div className="ff-excel-toolbar-icon-color">
+            <Icon
+              hoverEffect
+              width={12}
+              height={12}
+              disabled={toolbar === 'disable'}
+              onClick={() => {
+                setColor(data, colorContainer.color);
+              }}
+              name="text_color"
+            />
+            <ColorBarSelector
+              disabled={toolbar === 'disable'}
+              getColorValue={getTextColor}
+            />
+          </div>
+        </Tooltip>
+        <Tooltip placement="top" title={'Background Color'}>
+          <div className="ff-excel-toolbar-icon-color">
+            <Icon
+              hoverEffect
+              width={12}
+              height={12}
+              disabled={toolbar === 'disable'}
+              onClick={() =>
+                setBackgroundColor(data, colorContainer.backgroundColor)
+              }
+              name="fill_color"
+            />
+            <ColorBarSelector
+              disabled={toolbar === 'disable'}
+              getColorValue={getBackgroundColor}
+            />
+          </div>
+        </Tooltip>
+      </div>
+      <div className="ff-excel-toolbar-divider"></div>
+      <div className="ff-excel-toolbar-menu">
+        <Tooltip placement="top" title={'Border Type'}>
+          <div className="ff-excel-toolbar-menu-option">
+            <Icon
+              hoverEffect
+              disabled={toolbar === 'disable'}
+              onClick={() => setBorderType(data, border, 'black')}
+              name={getBorderIcon()}
+            />
+            <MenuOption
+              iconName="arrow_down"
+              iconSize={12}
+              options={borderTypeIcon}
+              tooltipPlacement="top"
+              variant="light"
+              onOptionClick={(e) => {
+                let selectedValue = e.value as string;
+                setBorderType(data, selectedValue, 'black');
+                setBorder(selectedValue);
+              }}
+            />
+          </div>
+        </Tooltip>
+      </div>
+      <div className="ff-excel-toolbar-divider"></div>
+      <div className="ff-excel-toolbar-menu">
+        <Tooltip placement="top" title={'Formula'}>
+          <Icon
+            hoverEffect
+            disabled={toolbar === 'disable'}
+            onClick={() => setBorderType(data, border, 'black')}
+            name="formula_icon"
+          />
+        </Tooltip>
+      </div>
+    </div>
+  );
+};
+
+export default ExcelToolBar;