pixel-react 1.4.3 → 1.4.5

package/src/components/Editor/Editor.tsx

@@ -1,217 +1,248 @@
-import React, { useRef, useState, useEffect } from 'react';
-import MonacoEditor, { OnMount } from '@monaco-editor/react';
 import {
-  dropdownPositionType,
-  EditorProps,
-  option,
-  DyanamicObj,
-} from './types';
-import Icon from '../Icon';
+  useRef,
+  useState,
+  useEffect,
+  forwardRef,
+  useImperativeHandle,
+} from 'react';
+import MonacoEditor, { OnMount } from '@monaco-editor/react';
+import { js as beautifyJS, html as beautifyHTML } from 'js-beautify';
+import { dropdownPositionType, EditorProps, DyanamicObj } from './types';
 import './Editor.scss';
-import Select from '../Select';
-import Button from '../Button';
 import VariableDropdown from './VariableDropdown';
-import Drawer from '../Drawer';
-import FileDropzone from '../FileDropzone';
-import Tooltip from '../Tooltip';
-import { optionsList } from './constants';
 
-const Editor: React.FC<EditorProps> = ({
-  width,
-  height,
-  showToolbar,
-  readOnly,
-  value = '',
-  handleChange,
-  setValue,
-  variableOptionsList = [],
-  language = 'javascript',
-  theme = 'light',
-}) => {
-  const editorRef = useRef<Parameters<OnMount>[0] | null>(null);
-  const decorationsRef = useRef<string[]>([]);
-  const [contentType, setContentType] = useState<string>(language);
-  const [currentLine, setCurrentLine] = useState<number>(0);
-  const [showDropdown, setShowDropdown] = useState<boolean>(false);
-  const [showDrawer, setShowDrawer] = useState<boolean>(false);
-  const [selectedOption, setSelectedOption] = useState<option>({
-    label: 'JSON',
-    value: 'json',
-  });
-  const [dropdownPosition, setDropdownPosition] =
-    useState<dropdownPositionType>({ top: 0, left: 0 });
+const Editor = forwardRef<any, EditorProps>(
+  (
+    {
+      width,
+      height,
+      readOnly,
+      value = '',
+      handleChange,
+      setValue,
+      variableOptionsList = [],
+      language = 'json',
+      theme = 'light',
+    },
+    ref
+  ) => {
+    const editorRef = useRef<Parameters<OnMount>[0] | null>(null);
+    const decorationsRef = useRef<string[]>([]);
+    const [currentLine, setCurrentLine] = useState<number>(0);
+    const [showDropdown, setShowDropdown] = useState<boolean>(false);
+    const [dropdownPosition, setDropdownPosition] =
+      useState<dropdownPositionType>({ top: 0, left: 0 });
 
-  const editorOptions = {
-    lineNumbers: 'on',
-    wordWrap: 'on',
-    autoClosingBrackets: 'always',
-    scrollBeyondLastLine: false,
-    readOnly,
-    fontFamily: 'font-poppins',
-    theme,
-  };
+    const handleEditorDidMount: OnMount = (editor: any) => {
+      editorRef.current = editor;
 
-  const handleEditorDidMount: OnMount = (editor: any) => {
-    editorRef.current = editor;
+      editor.onDidChangeCursorPosition((e: any) => {
+        setCurrentLine(e.position.lineNumber);
+      });
 
-    editor.onDidChangeCursorPosition((e: any) => {
-      setCurrentLine(e.position.lineNumber);
-    });
+      editor.onDidChangeModelContent(() => {
+        const content = editor.getValue();
+        setValue(content);
 
-    editor.onDidChangeModelContent(() => {
-      const content = editor.getValue();
-      setValue(content);
-
-      const position = editor.getPosition();
-      const model = editor.getModel();
-      if (position && model) {
-        const currentLineContent = model.getLineContent(position.lineNumber);
-        if (currentLineContent[position.column - 2] === '$') {
-          const visiblePosition = editor.getScrolledVisiblePosition(position);
-          if (visiblePosition) {
-            setDropdownPosition({
-              top: visiblePosition.top,
-              left: visiblePosition.left,
-            });
-            setShowDropdown(true);
+        const position = editor.getPosition();
+        const model = editor.getModel();
+        if (position && model) {
+          const currentLineContent = model.getLineContent(position.lineNumber);
+          if (currentLineContent[position.column - 2] === '$') {
+            const visiblePosition = editor.getScrolledVisiblePosition(position);
+            if (visiblePosition) {
+              setDropdownPosition({
+                top: visiblePosition.top,
+                left: visiblePosition.left,
+              });
+              setShowDropdown(true);
+            }
+          } else {
+            setShowDropdown(false);
           }
-        } else {
-          setShowDropdown(false);
         }
-      }
-    });
-  };
+      });
+    };
 
-  useEffect(() => {
-    if (editorRef.current && currentLine) {
-      // Define decoration for the current line
-      const decorations = [
-        {
-          range: {
-            startLineNumber: currentLine,
-            startColumn: 1,
-            endLineNumber: currentLine,
-            endColumn: 1,
-          },
-          options: {
-            isWholeLine: true,
-            className: 'current-line-background', // Custom CSS class for background color
+    useEffect(() => {
+      if (editorRef.current && currentLine) {
+        const decorations = [
+          {
+            range: {
+              startLineNumber: currentLine,
+              startColumn: 1,
+              endLineNumber: currentLine,
+              endColumn: 1,
+            },
+            options: {
+              isWholeLine: true,
+              className: 'current-line-background',
+            },
           },
-        },
-      ];
+        ];
 
-      // Apply decorations
-      decorationsRef.current = editorRef.current.deltaDecorations(
-        decorationsRef.current,
-        decorations
-      );
-    }
-  }, [currentLine]);
-
-  const handleBeautify = () => {
-    let beautifiedContent = value;
-    if (contentType === 'json') {
-      try {
-        beautifiedContent = JSON.stringify(JSON.parse(value), null, 2);
-      } catch (e) {
-        alert('Invalid JSON format');
+        decorationsRef.current = editorRef.current.deltaDecorations(
+          decorationsRef.current,
+          decorations
+        );
       }
-    }
-    setValue(beautifiedContent);
-  };
+    }, [currentLine]);
 
-  const handleSelectSuggestion = (suggestion: string, type: string) => {
-    if (editorRef.current) {
-      const editor = editorRef.current;
-      const position = editor.getPosition();
-      if (position) {
-        editor.executeEdits('', [
-          {
-            range: {
-              startLineNumber: position.lineNumber,
-              startColumn: position.column,
-              endLineNumber: position.lineNumber,
-              endColumn: position.column,
+    const handleSelectSuggestion = (suggestion: string, type: string) => {
+      if (editorRef.current) {
+        const editor = editorRef.current;
+        const position = editor.getPosition();
+        if (position) {
+          editor.executeEdits('', [
+            {
+              range: {
+                startLineNumber: position.lineNumber,
+                startColumn: position.column,
+                endLineNumber: position.lineNumber,
+                endColumn: position.column,
+              },
+              text: `{${type}_${suggestion}}`,
             },
-            text: `{${type}_${suggestion}}`,
-          },
-        ]);
-        setShowDropdown(false);
+          ]);
+          setShowDropdown(false);
+        }
       }
-    }
-  };
+    };
 
-  const handleFileUpload = () => {
-    setShowDrawer(true);
-  };
+    const handleSelectVariable = (option: DyanamicObj) => {
+      handleSelectSuggestion(
+        option?.name,
+        option?.type === 'GLOBAL'
+          ? 'GV'
+          : option?.type === 'LOCAL'
+            ? 'LV'
+            : 'PEV'
+      );
+    };
 
-  const onDropdownChangeHandler = (option: option) => {
-    setContentType(option.value);
-    setSelectedOption(option);
-  };
+    const mapLanguageToContentType = (language: string | undefined): string => {
+      switch (language) {
+        case 'javascript':
+        case 'typescript':
+          return 'javascript';
+        case 'json':
+          return 'json';
+        case 'html':
+          return 'html';
+        case 'xml':
+          return 'xml';
+        default:
+          return 'plain text';
+      }
+    };
 
-  const handleSelectVariable = (option: DyanamicObj) => {
-    handleSelectSuggestion(
-      option?.name,
-      option?.type === 'GLOBAL' ? 'GV' : option?.type === 'LOCAL' ? 'LV' : 'PEV'
-    );
-  };
+    const beautifyContent = (content: string, language: string): string => {
+      switch (language) {
+        case 'json':
+          return beautifyJS(content, {
+            indent_size: 4,
+            indent_char: ' ',
+            max_preserve_newlines: 5,
+            preserve_newlines: true,
+            keep_array_indentation: true,
+            break_chained_methods: true,
+            brace_style: 'collapse',
+            space_before_conditional: true,
+            unescape_strings: true,
+            jslint_happy: true,
+            end_with_newline: true,
+            wrap_line_length: 0,
+            comma_first: true,
+            e4x: true,
+            indent_empty_lines: true,
+          });
+        case 'javascript':
+          return beautifyJS(content, {
+            indent_size: 4,
+            indent_char: ' ',
+            max_preserve_newlines: 5,
+            preserve_newlines: true,
+            keep_array_indentation: true,
+            break_chained_methods: true,
+            brace_style: 'collapse',
+            space_before_conditional: true,
+            unescape_strings: true,
+            jslint_happy: true,
+            end_with_newline: true,
+            wrap_line_length: 0,
+            comma_first: true,
+            e4x: true,
+            indent_empty_lines: true,
+          });
+        case 'html':
+          return beautifyHTML(content, {
+            indent_size: 4,
+            indent_char: ' ',
+            max_preserve_newlines: 5,
+            preserve_newlines: true,
+            end_with_newline: true,
+            wrap_line_length: 0,
+            indent_empty_lines: true,
+          });
+        case 'xml':
+          return beautifyHTML(content, {
+            indent_size: 4,
+            indent_char: ' ',
+            max_preserve_newlines: 5,
+            preserve_newlines: true,
+            end_with_newline: true,
+            wrap_line_length: 0,
+            indent_empty_lines: true,
+          });
+        case 'plain text':
+          return content;
+        default:
+          return content;
+      }
+    };
 
-  return (
-    <div style={{ width, height }} className="ff-editor-container">
-      {showToolbar && (
-        <div className="ff-top-toolbar">
-          <Tooltip title="Beautify">
-            <Icon name="beautify_icon" hoverEffect onClick={handleBeautify} />
-          </Tooltip>
-          <Select
-            labelAccessor="label"
-            valueAccessor="value"
-            optionsList={optionsList}
-            selectedOption={selectedOption}
-            showBorder={true}
-            onChange={onDropdownChangeHandler}
-            showLabel={true}
-            height={24}
-            width={98}
-          />
-          <Button
-            onClick={handleFileUpload}
-            variant="secondary"
-            label="Choose File"
-          />
-        </div>
-      )}
-      <MonacoEditor
-        height="90%"
-        width="100%"
-        language={contentType}
-        value={value}
-        options={editorOptions}
-        onMount={handleEditorDidMount}
-        onChange={(newValue, event) => handleChange(newValue, event)}
-      />
-      {showDrawer && (
-        <Drawer
-          title="Choose File"
-          isOpen={showDrawer}
-          onClose={() => setShowDrawer(false)}
-        >
-          <FileDropzone
-            buttonLabel="Upload"
-            accept={['.json', '.js', '.html']}
-          />
-        </Drawer>
-      )}
-      {showDropdown && dropdownPosition && (
-        <VariableDropdown
-          optionsList={variableOptionsList}
-          onSelectVariable={handleSelectVariable}
-          dropdownPosition={dropdownPosition}
+    // Expose editorRef and helper functions to parent via forwarded ref
+    useImperativeHandle(ref, () => ({
+      getEditorInstance: () => editorRef.current,
+      beautify: () => {
+        if (editorRef.current) {
+          const content = editorRef.current.getValue();
+          const lang = editorRef.current.getModel()?.getLanguageId();
+          const language = mapLanguageToContentType(lang);
+          const beautifiedContent = beautifyContent(content, language);
+          editorRef.current.setValue(beautifiedContent);
+        }
+      },
+    }));
+
+    return (
+      <div style={{ width, height }} className="ff-editor-container">
+        <MonacoEditor
+          height="90%"
+          width="100%"
+          language={language}
+          value={value}
+          options={{
+            lineNumbers: 'on',
+            wordWrap: 'on',
+            autoClosingBrackets: 'always',
+            scrollBeyondLastLine: false,
+            readOnly,
+          }}
+          onMount={handleEditorDidMount}
+          onChange={(newValue, event) => handleChange(newValue, event)}
+          theme={theme}
         />
-      )}
-    </div>
-  );
-};
+        {showDropdown && dropdownPosition && (
+          <VariableDropdown
+            optionsList={variableOptionsList}
+            onSelectVariable={handleSelectVariable}
+            dropdownPosition={dropdownPosition}
+          />
+        )}
+      </div>
+    );
+  }
+);
 
 export default Editor;

package/src/components/Editor/types.ts

@@ -5,7 +5,7 @@ export interface EditorProps {
   /**
    * Editor Content Type
    */
-  language?: 'javascript' | 'html' | 'json' | 'plaintext' | 'xml';
+  language: 'javascript' | 'html' | 'json' | 'plain text' | 'xml';
 
   /**
    *
@@ -18,10 +18,6 @@ export interface EditorProps {
    */
   height: string;
 
-  /**
-   * Show toolbar
-   */
-  showToolbar?: boolean;
 
   /**
    * read only

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

@@ -0,0 +1,39 @@
+@use '../../../assets/styles/fonts';
+
+
+.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-disable-option {
+      opacity: 0.5;
+      cursor: no-drop;
+      label {
+        cursor: no-drop;
+      }
+    }
+  }

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

@@ -0,0 +1,51 @@
+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';
+
+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"
+      style={{ left: contextMenu.position.x, top: contextMenu.position.y }}
+    >
+      {contextMenu.options.map((option) => (
+        <div
+          className={'ff-options'}
+          onClick={() => {
+            option.action();
+          }}
+        >
+          {option.iconName && (
+            <Icon
+              name={option.iconName}
+              height={16}
+              width={16}
+              color={
+                option.label.includes('Delete')
+                  ? 'var(--label-edit-error-text)'
+                  : 'var(--brand-color)'
+              }
+            />
+          )}
+          <Typography as="label">{option.label}</Typography>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default ExcelContextMenu;

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

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { CellBase } from './ExcelFileComponents/index';
+import Spreadsheet, { CellBase } from './ExcelFileComponents/index';
 import * as Matrix from './ExcelFileComponents/matrix';
 import './ExcelFile.scss';
 import { Col, Row } from '../../GridLayout/GridLayout';
@@ -71,7 +71,6 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
       pageRef.current = sheetNames[0] ? sheetNames[0] : '';
       setSelectedSheet({ name: sheetNames[0] ? sheetNames[0] : '', index: 0 });
     }
-    onSave()
     const newWorksheetsData: { [key: string]: Matrix.Matrix<CellBase> } = {};
     payload.sheets.forEach((sheet) => {
       const sheetName = sheet.sheetName;
@@ -110,10 +109,10 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
     }
   }, []);
 
-  // const onEvaluateChange = (data: Matrix.Matrix<CellBase>) => {
-  //   setWorksheetsData((prev) => ({ ...prev, [pageRef.current]: data }));
-  //   onSave()
-  // };
+  const onEvaluateChange = (data: Matrix.Matrix<CellBase>) => {
+    setWorksheetsData((prev) => ({ ...prev, [pageRef.current]: data }));
+    onSave()
+  };
 
   const [editingSheet, setEditingSheet] = useState<number | null>(null);
 
@@ -245,10 +244,10 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
       {sheetNames.length > 0 && (
         <div className="excel-book">
           <div ref={sheetRef} className="excel-sheet">
-            {/* <Spreadsheet
+            <Spreadsheet
               data={selectedSheetData}
               onEvaluatedDataChange={onEvaluateChange}
-            /> */}
+            />
           </div>
           <Row className="sheet-bar">
             <Col size={0} className="add-sheet-icon">

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

@@ -22,6 +22,7 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
   activate,
   setCellDimensions,
   setCellData,
+  setContextMenu,
 }): React.ReactElement => {
   const [isDotDragging, setIsDotDragging] = React.useState(false);
   const [first, setFirst] = React.useState(true);
@@ -34,6 +35,23 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
     [row, column]
   );
 
+  let options = [
+    {
+      label: 'Get data from Header',
+      value: 'Get data from Header',
+      iconName: 'success',
+      disable: false,
+      action: () => {},
+    },
+    {
+      label: 'Get Cell Value',
+      value: 'Get Cell Value',
+      iconName: 'success',
+      disable: false,
+      action: () => {},
+    },
+  ];
+
   const handleMouseDown = React.useCallback(
     (event: React.MouseEvent<HTMLTableCellElement>) => {
       if (mode === 'view') {
@@ -84,6 +102,22 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
     [setCellDimensions, select, dragging, point, isDotDragging]
   );
 
+  const contextClick = React.useCallback(
+    (event: React.MouseEvent) => {
+      event.preventDefault();
+      select(point);
+      setContextMenu({
+        open: true,
+        position: {
+          x: event.clientX,
+          y: event.clientY - 50,
+        },
+        options: options,
+      });
+    },
+    [setContextMenu]
+  );
+
   React.useEffect(() => {
     const root = rootRef.current;
     if (selected && root) {
@@ -108,6 +142,7 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
       })}
       onMouseEnter={handleMouseOver}
       onMouseDown={handleMouseDown}
+      onContextMenu={contextClick}
       tabIndex={0}
     >
       <DataViewer