pixel-react 1.8.4 → 1.8.6

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

@@ -1,434 +1,434 @@
-import { useEffect, useRef, 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);
-  const underLineMenuRef = useRef<HTMLSpanElement>(null);
-  const borderMenuRef = useRef<HTMLSpanElement>(null);
-
-  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 [selectedFontSize, setSelectedFontSize] = useState<{
-    label: string;
-    value: string;
-  }>({
-    label: '11',
-    value: '11',
-  });
-  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',
-    }
-  ];
-
-  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}
-              optionZIndex={1000}
-              onChange={(e) => {
-                setSelectedFontFamily({ label: e.label, value: e.label });
-                setFontFamily(data, e.value);
-              }}
-              required={false}
-              optionsList={fontFamily}
-              selectedOption={selectedFontFamily}
-            />
-          </div>
-        </Tooltip>
-        <Tooltip placement="top" title={'Font Size'}>
-          <div className="ff-excel-toolbar-font-size">
-            <Select
-              showLabel={false}
-              optionZIndex={1000}
-              required={false}
-              onChange={(e) => {
-                setSelectedFontSize({ label: e.label, value: e.value });
-                setFontSize(data, e.value);
-              }}
-              optionsList={fontSize}
-              selectedOption={selectedFontSize}
-            />
-          </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()}
-            />
-            <span ref={underLineMenuRef}>
-              <MenuOption
-                targetRef={underLineMenuRef}
-                iconName="arrow_down"
-                zIndex={1000}
-                iconSize={12}
-                options={underlineTypeIcon}
-                tooltipPlacement="top"
-                variant="light"
-                onOptionClick={(e) => {
-                  let selectedValue = e.value as string;
-                  setUnderlineType(data, selectedValue, true);
-                  setUnderLine(selectedValue);
-                }}
-              />
-            </span>
-          </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()}
-            />
-            <span ref={borderMenuRef}>
-              <MenuOption
-                iconName="arrow_down"
-                targetRef={borderMenuRef}
-                iconSize={12}
-                zIndex={1000}
-                options={borderTypeIcon}
-                tooltipPlacement="top"
-                variant="light"
-                onOptionClick={(e) => {
-                  let selectedValue = e.value as string;
-                  setBorderType(data, selectedValue, 'black');
-                  setBorder(selectedValue);
-                }}
-              />
-            </span>
-          </div>
-        </Tooltip>
-      </div>
-
-  
-      {/* <div className="ff-excel-toolbar-divider"></div>  TODO */}
-      {/* <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>  TODO */}
-    </div>
-  );
-};
-
-export default ExcelToolBar;
+import { useEffect, useRef, 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);
+  const underLineMenuRef = useRef<HTMLSpanElement>(null);
+  const borderMenuRef = useRef<HTMLSpanElement>(null);
+
+  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 [selectedFontSize, setSelectedFontSize] = useState<{
+    label: string;
+    value: string;
+  }>({
+    label: '11',
+    value: '11',
+  });
+  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',
+    }
+  ];
+
+  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}
+              optionZIndex={1000}
+              onChange={(e) => {
+                setSelectedFontFamily({ label: e.label, value: e.label });
+                setFontFamily(data, e.value);
+              }}
+              required={false}
+              optionsList={fontFamily}
+              selectedOption={selectedFontFamily}
+            />
+          </div>
+        </Tooltip>
+        <Tooltip placement="top" title={'Font Size'}>
+          <div className="ff-excel-toolbar-font-size">
+            <Select
+              showLabel={false}
+              optionZIndex={1000}
+              required={false}
+              onChange={(e) => {
+                setSelectedFontSize({ label: e.label, value: e.value });
+                setFontSize(data, e.value);
+              }}
+              optionsList={fontSize}
+              selectedOption={selectedFontSize}
+            />
+          </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()}
+            />
+            <span ref={underLineMenuRef}>
+              <MenuOption
+                targetRef={underLineMenuRef}
+                iconName="arrow_down"
+                zIndex={1000}
+                iconSize={12}
+                options={underlineTypeIcon}
+                tooltipPlacement="top"
+                variant="light"
+                onOptionClick={(e) => {
+                  let selectedValue = e.value as string;
+                  setUnderlineType(data, selectedValue, true);
+                  setUnderLine(selectedValue);
+                }}
+              />
+            </span>
+          </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()}
+            />
+            <span ref={borderMenuRef}>
+              <MenuOption
+                iconName="arrow_down"
+                targetRef={borderMenuRef}
+                iconSize={12}
+                zIndex={1000}
+                options={borderTypeIcon}
+                tooltipPlacement="top"
+                variant="light"
+                onOptionClick={(e) => {
+                  let selectedValue = e.value as string;
+                  setBorderType(data, selectedValue, 'black');
+                  setBorder(selectedValue);
+                }}
+              />
+            </span>
+          </div>
+        </Tooltip>
+      </div>
+
+  
+      {/* <div className="ff-excel-toolbar-divider"></div>  TODO */}
+      {/* <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>  TODO */}
+    </div>
+  );
+};
+
+export default ExcelToolBar;