pixel-react 1.5.4 → 1.5.5

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

@@ -1,342 +1,342 @@
-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 { Col, Row } from '../../GridLayout/GridLayout';
-import ColorBarSelector from '../ColorBarSelector/ColorBarSelector';
-
-interface ExcelToolBarProps {
-  toolbar?: 'show' | 'disable' | 'hide';
-  data: Matrix.Matrix<CellBase>;
-  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',
-  data,
-  onBold,
-  onItalic,
-  setUnderlineType,
-  setColor,
-  setFontSize,
-  setFontFamily,
-  setTextAlign,
-  setBackgroundColor,
-  setBorderType,
-  setFormatePainter,
-}) => {
-  const [border, setBorder] = useState<string>('border-all-sides');
-  const [underLine, setUnderLine] = useState<string>('underline');
-  const [colorContainer, setColorPicker] = useState<ColorContainer>({
-    color: 'var(--error-light)',
-    backgroundColor: 'var(--error-light)',
-    borderColor: 'var(--text-color)',
-  });
-
-  const [formatePainterState, setFormatePainterState] =
-    useState<boolean>(false);
-
-  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]);
-
-  return (
-    <Row className="excel-row" gap="40px">
-      <Col size={3}>
-        <div className="excel-toolbar">
-          <Select
-            className="textType"
-            onChange={(e) => {
-              setFontFamily(data, e.value as string);
-            }}
-            optionsList={fontFamily}
-            selectedOption={{
-              label: 'Times New Roman',
-              value: '"Times New Roman"',
-            }}
-          />
-          <Select
-            className="selectTag"
-            onChange={(e) => {
-              setFontSize(data, e.value as string);
-            }}
-            optionsList={fontSize}
-          />
-        </div>
-      </Col>
-      <Col size={2}>
-        <div className="excel-toolbar-center">
-          <Icon
-            hoverEffect
-            disabled={toolbar === 'disable'}
-            onClick={() => {
-              setTextAlign(data, 'left');
-            }}
-            name="text_align_left"
-          />
-          <Icon
-            hoverEffect
-            disabled={toolbar === 'disable'}
-            onClick={() => {
-              setTextAlign(data, 'center');
-            }}
-            name="text_align_center"
-          />
-          <Icon
-            hoverEffect
-            disabled={toolbar === 'disable'}
-            onClick={() => {
-              setTextAlign(data, 'right');
-            }}
-            name="text_align_right"
-          />
-        </div>
-      </Col>
-      <Col size={2}>
-        <div className="excel-toolbar-center">
-          <Tooltip placement="top" title={'Bold'}>
-            <Icon
-              hoverEffect
-              disabled={toolbar === 'disable'}
-              onClick={() => {
-                onBold(data);
-              }}
-              name="bold"
-            />
-          </Tooltip>
-          <Tooltip placement="top" title={'Italic'}>
-            <Icon
-              hoverEffect
-              disabled={toolbar === 'disable'}
-              onClick={() => {
-                onItalic(data);
-              }}
-              name="italic"
-            />
-          </Tooltip>
-          <Tooltip placement="top" title={'Underline'}>
-            <div className="excel-toolbar-menu">
-              <Tooltip placement="top" title={'Formate Painter'}>
-                <div
-                  className={
-                    formatePainterState ? 'formate-painter-active' : ''
-                  }
-                >
-                  <Icon
-                    hoverEffect
-                    disabled={toolbar === 'disable'}
-                    onClick={() => {
-                      setUnderlineType(data, underLine, true);
-                    }}
-                    name="underline"
-                  />
-                </div>
-              </Tooltip>
-              <MenuOption
-                iconName="arrow_down"
-                options={underlineTypeIcon}
-                tooltipTitle="Border Type"
-                tooltipPlacement="top"
-                variant="light"
-                onOptionClick={(e) => {
-                  setUnderlineType(data, e.value as string, true);
-                  setUnderLine(e.value as string);
-                }}
-              />
-            </div>
-          </Tooltip>
-        </div>
-      </Col>
-      <Col size={2}>
-        <div className="excel-toolbar-center">
-          <Tooltip placement="top" title={'Formate Painter'}>
-            <div
-              className={formatePainterState ? 'formate-painter-active' : ''}
-            >
-              <Icon
-                hoverEffect
-                disabled={toolbar === 'disable'}
-                onClick={() => {
-                  setFormatePainter(data);
-                  setFormatePainterState((prev) => !prev);
-                }}
-                name="formate_painter"
-              />
-            </div>
-          </Tooltip>
-          <div className="menu-option">
-            <Tooltip placement="top" title={'Text Color'}>
-              <Icon
-                hoverEffect
-                disabled={toolbar === 'disable'}
-                onClick={() => {
-                  setColor(data, colorContainer.color);
-                }}
-                name="text_color"
-              />
-              <ColorBarSelector
-                disabled={toolbar === 'disable'}
-                getColorValue={getTextColor}
-              />
-            </Tooltip>
-          </div>
-          <div className="menu-option">
-            <Tooltip placement="top" title={'Background Color'}>
-              <Icon
-                hoverEffect
-                disabled={toolbar === 'disable'}
-                onClick={() => {
-                  setBackgroundColor(data, colorContainer.backgroundColor);
-                }}
-                name="fill_color"
-              />
-            </Tooltip>
-            <ColorBarSelector
-              disabled={toolbar === 'disable'}
-              getColorValue={getBackgroundColor}
-            />
-          </div>
-        </div>
-      </Col>
-      <Col size={1}>
-        <div className="excel-toolbar-menu">
-          <Tooltip placement="top" title={'Formate Painter'}>
-            <div
-              className={formatePainterState ? 'formate-painter-active' : ''}
-            >
-              <Icon
-                hoverEffect
-                disabled={toolbar === 'disable'}
-                onClick={() => {
-                  setBorderType(data, border, 'black');
-                }}
-                name="all_borders"
-              />
-            </div>
-          </Tooltip>
-          <MenuOption
-            iconName="arrow_down"
-            options={borderTypeIcon}
-            tooltipTitle="Border Type"
-            tooltipPlacement="top"
-            variant="light"
-            onOptionClick={(e) => {
-              setBorder(e.value as string);
-              setBorderType(data, e.value as string, 'black');
-            }}
-          />
-        </div>
-      </Col>
-    </Row>
-  );
-};
-
-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 { Col, Row } from '../../GridLayout/GridLayout';
+import ColorBarSelector from '../ColorBarSelector/ColorBarSelector';
+
+interface ExcelToolBarProps {
+  toolbar?: 'show' | 'disable' | 'hide';
+  data: Matrix.Matrix<CellBase>;
+  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',
+  data,
+  onBold,
+  onItalic,
+  setUnderlineType,
+  setColor,
+  setFontSize,
+  setFontFamily,
+  setTextAlign,
+  setBackgroundColor,
+  setBorderType,
+  setFormatePainter,
+}) => {
+  const [border, setBorder] = useState<string>('border-all-sides');
+  const [underLine, setUnderLine] = useState<string>('underline');
+  const [colorContainer, setColorPicker] = useState<ColorContainer>({
+    color: 'var(--error-light)',
+    backgroundColor: 'var(--error-light)',
+    borderColor: 'var(--text-color)',
+  });
+
+  const [formatePainterState, setFormatePainterState] =
+    useState<boolean>(false);
+
+  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]);
+
+  return (
+    <Row className="excel-row" gap="40px">
+      <Col size={3}>
+        <div className="excel-toolbar">
+          <Select
+            className="textType"
+            onChange={(e) => {
+              setFontFamily(data, e.value as string);
+            }}
+            optionsList={fontFamily}
+            selectedOption={{
+              label: 'Times New Roman',
+              value: '"Times New Roman"',
+            }}
+          />
+          <Select
+            className="selectTag"
+            onChange={(e) => {
+              setFontSize(data, e.value as string);
+            }}
+            optionsList={fontSize}
+          />
+        </div>
+      </Col>
+      <Col size={2}>
+        <div className="excel-toolbar-center">
+          <Icon
+            hoverEffect
+            disabled={toolbar === 'disable'}
+            onClick={() => {
+              setTextAlign(data, 'left');
+            }}
+            name="text_align_left"
+          />
+          <Icon
+            hoverEffect
+            disabled={toolbar === 'disable'}
+            onClick={() => {
+              setTextAlign(data, 'center');
+            }}
+            name="text_align_center"
+          />
+          <Icon
+            hoverEffect
+            disabled={toolbar === 'disable'}
+            onClick={() => {
+              setTextAlign(data, 'right');
+            }}
+            name="text_align_right"
+          />
+        </div>
+      </Col>
+      <Col size={2}>
+        <div className="excel-toolbar-center">
+          <Tooltip placement="top" title={'Bold'}>
+            <Icon
+              hoverEffect
+              disabled={toolbar === 'disable'}
+              onClick={() => {
+                onBold(data);
+              }}
+              name="bold"
+            />
+          </Tooltip>
+          <Tooltip placement="top" title={'Italic'}>
+            <Icon
+              hoverEffect
+              disabled={toolbar === 'disable'}
+              onClick={() => {
+                onItalic(data);
+              }}
+              name="italic"
+            />
+          </Tooltip>
+          <Tooltip placement="top" title={'Underline'}>
+            <div className="excel-toolbar-menu">
+              <Tooltip placement="top" title={'Formate Painter'}>
+                <div
+                  className={
+                    formatePainterState ? 'formate-painter-active' : ''
+                  }
+                >
+                  <Icon
+                    hoverEffect
+                    disabled={toolbar === 'disable'}
+                    onClick={() => {
+                      setUnderlineType(data, underLine, true);
+                    }}
+                    name="underline"
+                  />
+                </div>
+              </Tooltip>
+              <MenuOption
+                iconName="arrow_down"
+                options={underlineTypeIcon}
+                tooltipTitle="Border Type"
+                tooltipPlacement="top"
+                variant="light"
+                onOptionClick={(e) => {
+                  setUnderlineType(data, e.value as string, true);
+                  setUnderLine(e.value as string);
+                }}
+              />
+            </div>
+          </Tooltip>
+        </div>
+      </Col>
+      <Col size={2}>
+        <div className="excel-toolbar-center">
+          <Tooltip placement="top" title={'Formate Painter'}>
+            <div
+              className={formatePainterState ? 'formate-painter-active' : ''}
+            >
+              <Icon
+                hoverEffect
+                disabled={toolbar === 'disable'}
+                onClick={() => {
+                  setFormatePainter(data);
+                  setFormatePainterState((prev) => !prev);
+                }}
+                name="formate_painter"
+              />
+            </div>
+          </Tooltip>
+          <div className="menu-option">
+            <Tooltip placement="top" title={'Text Color'}>
+              <Icon
+                hoverEffect
+                disabled={toolbar === 'disable'}
+                onClick={() => {
+                  setColor(data, colorContainer.color);
+                }}
+                name="text_color"
+              />
+              <ColorBarSelector
+                disabled={toolbar === 'disable'}
+                getColorValue={getTextColor}
+              />
+            </Tooltip>
+          </div>
+          <div className="menu-option">
+            <Tooltip placement="top" title={'Background Color'}>
+              <Icon
+                hoverEffect
+                disabled={toolbar === 'disable'}
+                onClick={() => {
+                  setBackgroundColor(data, colorContainer.backgroundColor);
+                }}
+                name="fill_color"
+              />
+            </Tooltip>
+            <ColorBarSelector
+              disabled={toolbar === 'disable'}
+              getColorValue={getBackgroundColor}
+            />
+          </div>
+        </div>
+      </Col>
+      <Col size={1}>
+        <div className="excel-toolbar-menu">
+          <Tooltip placement="top" title={'Formate Painter'}>
+            <div
+              className={formatePainterState ? 'formate-painter-active' : ''}
+            >
+              <Icon
+                hoverEffect
+                disabled={toolbar === 'disable'}
+                onClick={() => {
+                  setBorderType(data, border, 'black');
+                }}
+                name="all_borders"
+              />
+            </div>
+          </Tooltip>
+          <MenuOption
+            iconName="arrow_down"
+            options={borderTypeIcon}
+            tooltipTitle="Border Type"
+            tooltipPlacement="top"
+            variant="light"
+            onOptionClick={(e) => {
+              setBorder(e.value as string);
+              setBorderType(data, e.value as string, 'black');
+            }}
+          />
+        </div>
+      </Col>
+    </Row>
+  );
+};
+
+export default ExcelToolBar;