pixel-react-excel-sheet 1.0.31 → 1.0.33

package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts

@@ -298,6 +298,19 @@ export type SetDataAction = BaseAction<typeof SET_DATA> & {
   };
 };
 
+export type KeyPressAction = BaseAction<typeof KEY_PRESS> & {
+  payload: {
+    event: React.KeyboardEvent;
+  };
+};
+
+export function keyPress(event: React.KeyboardEvent): KeyPressAction {
+  return {
+    type: KEY_PRESS,
+    payload: { event },
+  };
+}
+
 export function setData(data: Matrix<CellBase>): SetDataAction {
   return {
     type: SET_DATA,
@@ -544,6 +557,7 @@ export type Action =
   | UnderlineTypeStyle
   | FontSize
   | FontFamily
+  | KeyPressAction
   | TextAlignType
   | BorderType
   | ItalicStyle

package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts

@@ -582,6 +582,22 @@ export default function reducer(
       return blur(state);
     }
 
+    case Actions.KEY_PRESS: {
+      const { event } = action.payload;
+
+      if (isActiveReadOnly(state) || event.metaKey) {
+        return state;
+      }
+      if (state.mode === 'view' && state.active) {
+        const selectedRange = state.selected.toRange(state.model.data);
+        if (selectedRange?.size() === 1) {
+          return edit(clear(state));
+        }
+        return edit(state);
+      }
+      return state;
+    }
+
     case Actions.KEY_DOWN: {
       const { event } = action.payload;
       const handler = getKeyDownHandler(state, event);

package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts

@@ -190,10 +190,12 @@ export function applyBorderToCells(
     return currentData;
   }
 
-  const { start, end } = selectedRange;
-
   let updatedData = currentData;
 
+  const { start, end } = selectedRange;
+  const startRow = start.row;
+  const startCol = start.column;
+
   for (let row = start.row; row <= end.row; row++) {
     for (let col = start.column; col <= end.column; col++) {
       const currentCell = Matrix.get({ row, column: col }, updatedData);
@@ -202,17 +204,47 @@ export function applyBorderToCells(
         continue;
       }
 
+      const adjacentCell = (
+        row: number,
+        col: number,
+        borderType: string,
+        borderColor: string
+      ) => {
+        const adjacentCell = Matrix.get({ row: row, column: col }, updatedData);
+        if (adjacentCell) {
+          let updatedCell = { ...adjacentCell };
+          updatedCell.style = {
+            ...adjacentCell.style,
+            [borderType]: `1px solid ${borderColor}`,
+          };
+          console.log(updatedCell);
+          updatedData = Matrix.set(
+            { row: row, column: col },
+            updatedCell,
+            updatedData
+          );
+        }
+      };
+
       let updatedCell = { ...currentCell };
 
       switch (value) {
         case 'border-all-sides':
           updatedCell.style = {
             ...currentCell.style,
-            borderRight: `2px solid ${color}`,
-            borderLeft: `2px solid ${color}`,
-            borderTop: `2px solid ${color}`,
-            borderBottom: `2px solid ${color}`,
+            borderRight: `1px solid ${color}`,
+            borderLeft: `1px solid ${color}`,
+            borderTop: `1px solid ${color}`,
+            borderBottom: `1px solid ${color}`,
           };
+
+          if (row === startRow) {
+            adjacentCell(row - 1, col, 'borderBottom', color);
+          }
+          if (col === startCol) {
+            adjacentCell(row, col - 1, 'borderRight', color);
+          }
+
           break;
         case 'border-none':
           updatedCell.style = {
@@ -222,29 +254,64 @@ export function applyBorderToCells(
             borderTop: `1px solid var(--excel-sheet-border)`,
             borderBottom: `1px solid var(--excel-sheet-border)`,
           };
+
+          if (row === startRow) {
+            adjacentCell(
+              row - 1,
+              col,
+              'borderBottom',
+              'var(--excel-sheet-border)'
+            );
+          }
+          if (col === startCol) {
+            adjacentCell(
+              row,
+              col - 1,
+              'borderRight',
+              'var(--excel-sheet-border)'
+            );
+          }
           break;
+
         case 'border-right':
           updatedCell.style = {
             ...currentCell.style,
-            borderRight: `2px solid ${color}`,
+            borderRight: `1px solid ${color}`,
           };
           break;
+
         case 'border-left':
           updatedCell.style = {
             ...currentCell.style,
-            borderLeft: `2px solid ${color}`,
+            borderLeft: `1px solid ${color}`,
           };
+          if (col === startCol) {
+            adjacentCell(
+              row,
+              col - 1,
+              'borderRight',
+              'var(--excel-sheet-border)'
+            );
+          }
           break;
         case 'border-top':
           updatedCell.style = {
             ...currentCell.style,
-            borderTop: `2px solid ${color}`,
+            borderTop: `1px solid ${color}`,
           };
+          if (row === startRow) {
+            adjacentCell(
+              row - 1,
+              col,
+              'borderBottom',
+              'var(--excel-sheet-border)'
+            );
+          }
           break;
         case 'border-bottom':
           updatedCell.style = {
             ...currentCell.style,
-            borderBottom: `2px solid ${color}`,
+            borderBottom: `1px solid ${color}`,
           };
           break;
         default:

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

@@ -123,8 +123,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
       value: 'double_border',
       label: 'Double Underline',
       icon: 'double_underline',
-    },
-    { value: 'line-through', label: 'Strikethrough', icon: 'strike_through' },
+    }
   ];
 
   const fontFamily = [
@@ -415,8 +414,10 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
           </div>
         </Tooltip>
       </div>
-      <div className="ff-excel-toolbar-divider"></div>
-      <div className="ff-excel-toolbar-menu">
+
+  
+      {/* <div className="ff-excel-toolbar-divider"></div>  TODO */}
+      {/* <div className="ff-excel-toolbar-menu"> 
         <Tooltip placement="top" title={'Formula'}>
           <Icon
             hoverEffect
@@ -425,7 +426,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
             name="formula_icon"
           />
         </Tooltip>
-      </div>
+      </div>  TODO */}
     </div>
   );
 };

package/src/components/FileDropzone/Dropzone.tsx

@@ -24,6 +24,7 @@ const Dropzone: FC<DroppableProps> = ({
   setSelectedFile,
   handleRemoveFile,
   isDisable,
+  setShowDrawer,
 }) => {
   const isWebServiceFile = selectedFile?.name && isWebServiceFileDropZone;
   return (
@@ -42,6 +43,8 @@ const Dropzone: FC<DroppableProps> = ({
           onFileRemoveClick={handleRemoveFile}
           onFileReplaceClick={setSelectedFile}
           setSelectedFile={setSelectedFile}
+          selectedRadioOption={selectedRadioOption}
+          setShowDrawer={setShowDrawer}
         />
       ) : (
         <>

package/src/components/FileDropzone/FileDropzone.scss

@@ -4,6 +4,12 @@
   gap: $gap;
 }
 
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 @mixin center {
   display: grid;
   place-items: center;
@@ -160,4 +166,16 @@
 .ff-disable-file-dropzone-wrapper {
   opacity: 0.5;
   cursor: not-allowed;
+}
+.footer_basic_button {
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  @include flex-center;
+  justify-content: flex-end;
+  gap: 16px;
+  border-top: 1px solid var(--border-color);
+  padding: 4px 8px;
+  background-color: var(--primary-icon-color);
 }

package/src/components/FileDropzone/FileDropzone.stories.tsx

@@ -5,8 +5,10 @@ import Toaster from '../Toast';
 import { useState } from 'react';
 import { RadioOption } from './types';
 import Drawer from '../Drawer/Drawer';
-import Typography from '../Typography';
+import ConditionalDropdown from '../ConditionalDropdown/ConditionalDropdown';
 import './FileDropzone.scss';
+import { DynamicObj } from '../CreateVariable/types';
+import Button from '../Button';
 
 const meta: Meta<typeof FileDropzone> = {
   title: 'Components/FileDropzone',
@@ -107,8 +109,12 @@ export const WithRadioButton: Story = {
 
     const [selectedRadioOption, setSelectedRadioOption] =
       useState<RadioOption>();
-    const [selectedFile, setSelectedFile] = useState<File | null>(null);
-
+    const [selectedFile, setSelectedFile] = useState<File | DynamicObj | null>(
+      null
+    );
+    const [testDataSelectedFile, setTestDataSelectedFile] = useState<
+      DynamicObj | File | null
+    >(null);
 
     const drawerArgs = {
       primaryButtonProps: {
@@ -156,6 +162,42 @@ export const WithRadioButton: Story = {
       }, 2000);
     };
 
+    const testData = [
+      {
+        _id: '1',
+        name: 'File1.txt',
+        actualPath: '/documents/File1.txt',
+        searchKey: 'file1',
+        parentId: 'root',
+      },
+      {
+        _id: '2',
+        name: 'File2.doc',
+        actualPath: '/documents/File2.doc',
+        searchKey: 'file2',
+        parentId: 'root',
+      },
+      {
+        _id: '3',
+        name: 'Image1.png',
+        actualPath: '/images/Image1.png',
+        searchKey: 'image1',
+        parentId: 'folder1',
+      },
+      {
+        _id: '4',
+        name: 'Presentation.ppt',
+        actualPath: '/presentations/Presentation.ppt',
+        searchKey: 'presentation',
+        parentId: 'folder2',
+      },
+    ];
+
+    const handleSaveButton = () => {
+      setSelectedFile(testDataSelectedFile);
+      setShowModal(false);
+    };
+
     return (
       <>
         <FileDropzone
@@ -176,6 +218,7 @@ export const WithRadioButton: Story = {
           selectedFile={selectedFile}
           handleFileChange={handleFileChange}
           handleRemoveFile={handleRemoveFile}
+          setShowDrawer={setShowModal}
         />
         {showToaster && (
           <Toaster
@@ -185,18 +228,43 @@ export const WithRadioButton: Story = {
             toastMessage={'Max 5 files can be uploaded'}
           />
         )}
-        {selectedRadioOption?.value === 'Local File' &&
+        {selectedRadioOption?.value === 'Test Data' && (
           <Drawer
             {...drawerArgs}
             isOpen={showModal}
             onClose={() => setShowModal(false)}
-            isFooterRequired={true}
+            isFooterRequired={false}
             _isExpanded={false}
             size="small"
+            
           >
-            <Typography>Upload TestData Files Here</Typography>
+            <ConditionalDropdown
+              label="Select Path Using #"
+              placeholder="Enter # to search files"
+              isHash
+              dataFiles={testData}
+              dropdownWidth="auto"
+              setHashInputValue={setTestDataSelectedFile}
+            />
+            <div className="footer_basic_button">
+              <Button
+                type="button"
+                variant="secondary"
+                size="small"
+                onClick={() => setShowModal(false)}
+                label={'Cancel'}
+              />
+
+              <Button
+                type={'button'}
+                variant="primary"
+                size="small"
+                label={'Save'}
+                onClick={handleSaveButton}
+              />
+            </div>
           </Drawer>
-        }
+        )}
       </>
     );
   },

package/src/components/FileDropzone/FileDropzone.tsx

@@ -38,6 +38,7 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
   handleRemoveFile,
   isApiResponseError = false,
   isDisable = false,
+  setShowDrawer,
 }) => {
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const {
@@ -131,6 +132,7 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
         handleRemoveFile={handleRemoveFile}
         setSelectedFile={setSelectedFile}
         isDisable={isDisable}
+        setShowDrawer={setShowDrawer}
       />
 
       {isWebServiceFileDropZone && (

package/src/components/FileDropzone/RadioFilePreview.tsx

@@ -8,14 +8,18 @@ import { useRef } from 'react';
 const RadioFilePreview: React.FC<RadioFilePreviewProps> = ({
   selectedFile,
   onFileRemoveClick,
-  onFileReplaceClick
+  onFileReplaceClick,
+  selectedRadioOption,
+  setShowDrawer,
 }) => {
   const fileInputRef = useRef<HTMLInputElement | null>(null);
 
   const handleReplaceClick = () => {
-    if (fileInputRef.current) {
-      fileInputRef.current.click();
+    if (selectedRadioOption?.value === 'Test Data') {
+      setShowDrawer?.(true);
+      return;
     }
+    fileInputRef.current?.click();
   };
 
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {

package/src/components/FileDropzone/types.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { DynamicObj } from '../CreateVariable/types';
 export interface RadioOption {
   label: string;
   value: string;
@@ -93,12 +94,12 @@ export interface FileDropzoneProps {
   /**
    *  Its the File Name of File Selected from Local File.
    **/
-  setSelectedFile?: (file: File | null) => void;
+  setSelectedFile?: (file: File | DynamicObj | null) => void;
 
   /**
    *  Its the File Name of File Selected from Local File.
    **/
-  selectedFile?: File | null;
+  selectedFile?: File | DynamicObj | null;
 
   /**
    *  Its the function which updates the Selected file from Local Directory.
@@ -120,6 +121,11 @@ export interface FileDropzoneProps {
    **/
   isDisable?: boolean;
 
+   /**
+   *  Its the boolean value setted when the replace is clicked for TestData radio option .
+   **/
+  setShowDrawer?: (value: boolean | ((prevState: boolean) => boolean)) => void;
+
 }
 export interface FileState {
   accepted: File[];
@@ -176,11 +182,12 @@ export interface DroppableProps {
   selectedRadioOption?: Option, 
   radioOptions?: RadioOption[],
   handleOptionChange?: (option: RadioOption)=> void,
-  selectedFile?: File | null,
-  setSelectedFile?: (file: File | null) => void;
+  selectedFile?: File | DynamicObj | null,
+  setSelectedFile?: (file: File | DynamicObj | null) => void;
   handleFileChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   handleRemoveFile?: () => void;
   isDisable?: boolean;
+  setShowDrawer?: (value: boolean | ((prevState: boolean) => boolean)) => void;
 }
 
 export interface FilePreviewProps {
@@ -196,4 +203,6 @@ export interface RadioFilePreviewProps {
   onFileRemoveClick?: () => void;
   onFileReplaceClick?: (file: File | null) => void;
   setSelectedFile?: (file: File | null) => void;
+  selectedRadioOption?: Option,
+  setShowDrawer?: (value: boolean | ((prevState: boolean) => boolean)) => void
 }

package/src/components/Icon/iconList.ts

@@ -45,7 +45,7 @@ import ManualLocator from '../../assets/icons/manual_locator.svg?react';
 import LicenseIcon from '../../assets/icons/active_license_icon.svg?react';
 import DeleteIcon from '../../assets/icons/delete.svg?react';
 import DetailsIcon from '../../assets/icons/details.svg?react';
-import ImpactListIcon from '../../assets/icons/impactList.svg?react';
+import ImpactListIcon from '../../assets/icons/impact_list.svg?react';
 import Export from '../../assets/icons/export.svg?react';
 import FormatePainter from '../../assets/icons/formate_painter.svg?react';
 import Bold from '../../assets/icons/bold.svg?react';
@@ -252,6 +252,7 @@ import machineDisableIcon from '../../assets/icons/machine_disable_icon.svg?reac
 import suitesIcon from '../../assets/icons/suites_icon.svg?react'; 
 import executionsIcon from '../../assets/icons/executions_icon.svg?react';
 import ImportIcon from '../../assets/icons/import_icon.svg?react';
+import Settings from '../../assets/icons/settings.svg?react';
 
 Components['success'] = ToastSuccessIcon;
 Components['alert'] = Alert;
@@ -295,7 +296,7 @@ Components['run_icon'] = RunIcon;
 Components['license'] = LicenseIcon;
 Components['delete'] = DeleteIcon;
 Components['details'] = DetailsIcon;
-Components['impactList'] = ImpactListIcon;
+Components['impact_list'] = ImpactListIcon;
 Components['beautify_icon'] = BeautifyIcon;
 Components['add_variable_icon'] = AddVariable;
 Components['replace_file'] = ReplaceFile;
@@ -499,5 +500,6 @@ Components['machine_disable_icon'] = machineDisableIcon;
 Components['executions_icon'] = executionsIcon;
 Components['suites_icon'] = suitesIcon;
 Components['import_icon'] = ImportIcon;
+Components['settings'] = Settings
 
 export default Components;

package/src/components/InputWithDropdown/InputWithDropdown.tsx

@@ -18,7 +18,7 @@ const InputWithDropdown = forwardRef<HTMLInputElement, InputWithDropdownProps>(
       error,
       helperText,
       optionsList,
-      selectedOption,
+      selectedOption = { label: '', value: '' },
       autoComplete = 'off',
       onDropdownChangeHandler = () => {},
       onInputChangeHandler,

package/src/components/LabelEditTextField/LabelEditTextField.scss

@@ -77,6 +77,10 @@
     .cancel-icon {
       cursor: pointer;
     }
+    .disabled-confirm-icon {
+      cursor: default;
+      opacity: 0.5;
+    }
   }
 
   .error-text {

package/src/components/LabelEditTextField/LabelEditTextField.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import LabelEditTextField from './LabelEditTextField';
 import '../../assets/styles/_colors.scss';
@@ -155,16 +155,20 @@ export const textFieldWithHighlight: Story = {
 };
 export const openLabelEditTextField: Story = {
   render: () => {
+    const [demoText, setDemoText] = useState('Verify The');
     const handleConfirmAction = (inputValue: string, dropdownValue: string) => {
       //DEMO: we are getting that value from LabelEditTextField
-
+      setDemoText(inputValue);
       console.info(
         'Confirmed input value and dropdown value:',
         inputValue,
         dropdownValue
       );
     };
-    let demoText = 'Verify The';
+    const handleInputChange = (newInputValue: string) => {
+      setDemoText(newInputValue); // Update parent state
+    };
+    console.log('demoText: ', demoText);
     return (
       <LabelEditTextField
         label="Add Module"
@@ -181,6 +185,7 @@ export const openLabelEditTextField: Story = {
         width="400px"
         height="22px"
         confirmAction={handleConfirmAction}
+        onInputChange={handleInputChange}
         isOpen={true}
         customError="text is too long"
         customErrorCondition={demoText?.length > 10}