pixel-react-excel-sheet 1.0.38 → 1.0.40

package/src/components/MobileSkin/MobileSkin.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import './MobileSkin.scss';
+import Icon from '../Icon';
+import Tooltip from '../Tooltip';
+import { MobileSkinProps } from './MobileSkinInterface';
+
+const MobileSkin: React.FC<MobileSkinProps> = ({
+  children,
+  orientation = '',
+  type = '',
+  navBarIcons,
+  mobileHeight = 448,
+  mobileWidth = 220,
+}) => {
+  const notchHeight = (mobileHeight / 448) * 20;
+  const notchWidth = (mobileWidth / 220) * 60;
+
+  const isPortrait = orientation === 'portrait';
+  const isIos = type === 'ios';
+  const containerHeight = isPortrait ? mobileHeight : mobileWidth;
+  const containerWidth = isPortrait ? mobileWidth : mobileHeight;
+
+  return (
+    <div
+      className={`ff-mobileskin-wrapper ${
+        isPortrait ? 'portrait' : 'landscape'
+      }`}
+    >
+      <div
+        className="ff-mobileskin-container"
+        style={{
+          height: containerHeight + 16,
+          width: containerWidth + 16,
+        }}
+      >
+        <div
+          className="ff-mobile-container"
+          style={{
+            width: containerWidth,
+            height: containerHeight,
+          }}
+        >
+          <div className="ff-mobile-image-container">
+            {React.isValidElement(children) ? (
+              children
+            ) : (
+              <img
+                src={children as string}
+                alt="Mobile content"
+                style={{
+                  width: isPortrait ? '100%' : `${mobileWidth * 2.1}px`,
+                  height: isPortrait ? '100%' : `${mobileHeight * 0.5}px`,
+                }}
+              />
+            )}
+          </div>
+        </div>
+
+        <div
+          className={`ff-notch ${!isIos ? 'android-notch' : ''}`}
+          style={{
+            height: !isIos ? 15 : isPortrait ? notchHeight : notchWidth,
+            width: !isIos ? 15 : isPortrait ? notchWidth : notchHeight,
+            transform: isPortrait
+              ? `translate(${mobileWidth * 0.01}px, ${mobileHeight * -0.43}px)`
+              : `translate(${containerWidth * -0.46}px, ${
+                  containerHeight * -0.01
+                }px)`,
+          }}
+        ></div>
+      </div>
+      <div className="ff-nav-bar">
+        {navBarIcons.map((icon, index) => (
+          <div
+            key={index}
+            className={`ff-nav-bar-icon ${icon?.className || ''} ${
+              index === navBarIcons.length - 1 ? 'last-icon' : ''
+            }`}
+            onClick={icon.onClick}
+          >
+            <Tooltip title={icon?.title} children={<Icon {...icon} />} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default MobileSkin;

package/src/components/MobileSkin/MobileSkinInterface.ts

@@ -0,0 +1,13 @@
+interface NavBarIcon {
+  name: string;
+  [key: string]: any;
+}
+
+export interface MobileSkinProps {
+  children: React.ReactNode | string;
+  orientation?: 'portrait' | 'landscape';
+  type: 'ios' | 'android';
+  navBarIcons: NavBarIcon[];
+  mobileHeight?: number;
+  mobileWidth?: number;
+}

package/src/components/MobileSkin/index.ts

@@ -0,0 +1 @@
+export { default } from './MobileSkin';

package/src/components/MobileSkin/types.ts

@@ -0,0 +1,32 @@
+export interface iconDetails {
+  /**
+   * details of each icon
+   */
+  [key: string]: any;
+}
+export interface MobileSkinProps {
+  /**
+   * The content inside the mobile skin component
+   */
+  children: React.ReactNode | string;
+  /**
+   *    Portrait or landScape View of the Mobile
+   */
+  orientation: "portrait" | "landscape";
+  /**
+   * type either it will be ios or android
+   */
+  type: string;
+  /**
+   *   height of the MobileSkin
+   */
+  mobileHeight?: number;
+  /**
+   *   width of the MobileSkin
+   */
+  mobileWidth?: number;
+  /**
+   * takes the icons details like icon name , title, onClick event, height , width, etc
+   */
+  navbarIcons: Array<iconDetails>;
+}

package/src/components/Modal/Modal.stories.tsx

@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import Modal from './Modal';
 import Button from '../Button';
+import { useKeyboardActions } from '../../utils/keyBoardActionUtil/UseKeyboardActions';
 
 const meta: Meta<typeof Modal> = {
   title: 'Components/Modal',
@@ -34,6 +35,12 @@ export const DefaultModalStory: Story = {
 export const Controlled: Story = {
   render: () => {
     const [openModal, setModal] = useState(false);
+    useKeyboardActions([
+      {
+        key: 'Enter',
+        action: () => alert('Enter key was pressed.'),
+      },
+    ]);
     return (
       <>
         <Button

package/src/components/Modal/Modal.tsx

@@ -1,9 +1,10 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useContext } from 'react';
 import { createPortal } from 'react-dom';
 import './modal.scss';
 import { ModalProps } from './types';
 import { ThemeContext } from '../ThemeProvider/ThemeProvider';
 import classNames from 'classnames';
+import { useKeyboardActions } from '../../utils/keyBoardActionUtil/UseKeyboardActions';
 
 const Modal: React.FC<ModalProps> = ({
   isOpen,
@@ -26,27 +27,23 @@ const Modal: React.FC<ModalProps> = ({
   border = '',
   background='',
 }) => {
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && shouldCloseOnEsc) {
-        onClose();
-      }
-    };
 
-    if (isOpen) {
-      document.addEventListener('keydown', handleKeyDown);
-      if (ariaHideApp) {
-        document.body.style.overflow = 'hidden';
-      }
-    }
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-      if (ariaHideApp) {
-        document.body.style.overflow = '';
-      }
-    };
-  }, [isOpen, onClose, ariaHideApp, shouldCloseOnEsc]);
+ useKeyboardActions(
+   shouldCloseOnEsc && isOpen
+     ? [
+         {
+           key: 'Escape',
+           action: onClose,
+         },
+       ]
+     : []
+ );
 
+ if (!isOpen) return null;
+
+ if (ariaHideApp) {
+   document.body.style.overflow = isOpen ? 'hidden' : '';
+ }
   if (!isOpen) return null;
   const themeContext = useContext(ThemeContext);
   const currentTheme = themeContext?.currentTheme;

package/src/components/Search/Search.scss

@@ -86,12 +86,20 @@
       cursor: pointer;
       width: 22px;
       padding-top: 1px;
+
+      &.showClose {
+        display: none
+      }
     }
 
     .ff-search-close-icon {
       margin: 4px;
       cursor: pointer;
 
+      &.showClose {
+        display: none
+      }
+
       .ff-icon-container {
         svg {
           path {

package/src/components/Search/Search.tsx

@@ -16,12 +16,13 @@ const Search = ({
   isExpand = false,
   onClose,
   onExpand,
+  showClose = true,
 }: SearchProps) => {
   const [searchValue, setSearchValue] = useState<string>(value);
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
-    if (isExpand && inputRef.current) {
+    if (isExpand && inputRef.current && showClose) {
       inputRef.current.focus();
     }
     setSearchValue('');
@@ -45,7 +46,7 @@ const Search = ({
     if (label === 'Close') {
       onClose?.();
     }
-    if (label === 'Clear' && isExpand && inputRef.current) {
+    if (label === 'Clear' && isExpand && inputRef.current && showClose) {
       inputRef.current.focus();
     }
   };
@@ -57,8 +58,12 @@ const Search = ({
   };
   const handleChange = (data: string) => {
     setSearchValue(data);
-    if (data === '') {
-      onSearch('');
+    if (showClose) {
+      if (data === '') {
+        onSearch('');
+      }
+    } else {
+      onSearch(data);
     }
   };
 
@@ -105,7 +110,9 @@ const Search = ({
       {isExpand && (
         <>
           <div
-            className="ff-search-clear-button"
+            className={classNames('ff-search-clear-button', {
+              showClose: !showClose,
+            })}
             onClick={() => handleSearchClearAndClose('Clear')}
           >
             {searchValue !== '' && (
@@ -117,7 +124,11 @@ const Search = ({
             )}
           </div>
           <Tooltip title="Close">
-            <div className="ff-search-close-icon">
+            <div
+              className={classNames('ff-search-close-icon', {
+                showClose: !showClose,
+              })}
+            >
               <Icon
                 height={6}
                 width={6}

package/src/components/Search/types.ts

@@ -16,4 +16,5 @@ export interface SearchProps {
   isExpand: boolean;
   onClose: () => void;
   onExpand: (isExpand: boolean) => void;
+  showClose?:boolean
 }

package/src/components/Select/Select.stories.tsx

@@ -352,4 +352,89 @@ export const IconOptionSelection: Story = {
   },
 };
 
+export const SelectWithPlaceHolder: Story = {
+  render: () => {
+    const optionsList = [
+      {
+        label: 'fire-flink-LIC4900-onPrem',
+        value: 'fire-flink-LIC4900-onPrem',
+      },
+      {
+        label: 'fire-flink-LIC3179',
+        value: 'fire-flink-LIC3179',
+      },
+      {
+        label: 'fire-flink-LIC4937',
+        value: 'fire-flink-LIC4937',
+      },
+      {
+        label: 'fire-flink-LIC4999',
+        value: 'fire-flink-LIC4999',
+      },
+    ];
+
+    const [selectedOption, setSelectedOption] = useState<Option>({
+      label: '',
+      value: '',
+    });
+
+    const handleChange = (option: Option) => {
+      setSelectedOption(option);
+    };
+
+    return (
+      <Select
+        optionsList={optionsList}
+        selectedOption={selectedOption}
+        onChange={handleChange}
+        placeHolder="Search"
+        showLabel={false}
+        label="test"
+      />
+    );
+  },
+};
+
+export const SelectWithToolTip: Story = {
+  render: () => {
+    const optionsList = [
+      {
+        label: 'fire-flink-LIC4900-onPrem',
+        value: 'fire-flink-LIC4900-onPrem',
+      },
+      {
+        label: 'fire-flink-LIC3179',
+        value: 'fire-flink-LIC3179',
+      },
+      {
+        label: 'fire-flink-LIC4937',
+        value: 'fire-flink-LIC4937',
+      },
+      {
+        label: 'fire-flink-LIC4999',
+        value: 'fire-flink-LIC4999',
+      },
+    ];
+
+    const [selectedOption, setSelectedOption] = useState<Option>({
+      label: '',
+      value: '',
+    });
+
+    const handleChange = (option: Option) => {
+      setSelectedOption(option);
+    };
+
+    return (
+      <Select
+        optionsList={optionsList}
+        selectedOption={selectedOption}
+        onChange={handleChange}
+        label="Select Option"
+        showToolTip={true}
+      />
+    );
+  },
+};
+
 export default meta;

package/src/components/Select/Select.tsx

@@ -2,7 +2,7 @@ import { ChangeEvent, FC, useEffect, useRef, useState } from 'react';
 import './Select.scss';
 import Icon from '../Icon';
 import Typography from '../Typography';
-import { DrowdownPosition, Option, SelectProps } from './types';
+import { DropdownPosition, Option, SelectProps } from './types';
 import classNames from 'classnames';
 import { createPortal } from 'react-dom';
 import Dropdown from './components/Dropdown';
@@ -31,6 +31,8 @@ const Select: FC<SelectProps> = ({
   onBlur = () => {},
   disableInput = false,
   showIcon = false,
+  placeHolder = '',
+  showToolTip = false,
 }) => {
   const selectWidth = typeof width === 'number' ? `${width}px` : width;
 
@@ -41,7 +43,7 @@ const Select: FC<SelectProps> = ({
   });
   const { searchedText, searchedIcon } = searchedOption;
   const [selectOptionList, setSelectOptionList] = useState<Option[] | []>([]);
-  const [dropdownPosition, setDropdownPosition] = useState<DrowdownPosition>({
+  const [dropdownPosition, setDropdownPosition] = useState<DropdownPosition>({
     positionX: 0,
     positionY: 0,
     width: 0,
@@ -170,6 +172,10 @@ const Select: FC<SelectProps> = ({
     setSelectOptionList(optionsList);
   }, [optionsList]);
 
+  if (showLabel) {
+    placeHolder = '';
+  }
+
   return (
     <div
       className={`ff-select-wrapper ${className}`}
@@ -206,6 +212,7 @@ const Select: FC<SelectProps> = ({
           disabled={disabled}
           onChange={handleChange}
           readOnly={disableInput}
+          placeholder={placeHolder}
         />
         {optionsRequired && (
           <div
@@ -266,6 +273,7 @@ const Select: FC<SelectProps> = ({
                 heightFromTop={height}
                 selectedOption={searchedText}
                 showIcon={showIcon}
+                showToolTip={showToolTip}
               />,
               document.body
             )}

package/src/components/Select/components/Dropdown.tsx

@@ -12,6 +12,7 @@ import {
 } from '../../../utils/getSelectOptionValue/getSelectOptionValue';
 import useClickOutside from '../../../hooks/useClickOutside';
 import Icon from '../../Icon';
+import Tooltip from '../../Tooltip';
 
 const Dropdown: FC<DropdownProps> = ({
   options = [],
@@ -26,6 +27,7 @@ const Dropdown: FC<DropdownProps> = ({
   selectedOption,
   valueAccessor,
   showIcon = false,
+  showToolTip = false,
 }) => {
   const themeContext = useContext(ThemeContext);
   const currentTheme = themeContext?.currentTheme;
@@ -72,22 +74,28 @@ const Dropdown: FC<DropdownProps> = ({
       return label;
     }
     return (
-      <Typography
-        as="div"
-        lineHeight="30px"
-        color="var(--ff-select-text-color)"
-        className={classNames({
-          'ff-select-dropdown-icon-container': showIcon,
-        })}
+      <Tooltip
+        placement="bottom"
+        title={showToolTip ? label : ''}
+        zIndex={optionZIndex + 1}
       >
-        {showIcon && (
-          <Icon
-            name={icon}
-            className="ff-select-dropdown-icon-container__icon"
-          />
-        )}
-        {label}
-      </Typography>
+        <Typography
+          as="div"
+          lineHeight="30px"
+          color="var(--ff-select-text-color)"
+          className={classNames({
+            'ff-select-dropdown-icon-container': showIcon,
+          })}
+        >
+          {showIcon && (
+            <Icon
+              name={icon}
+              className="ff-select-dropdown-icon-container__icon"
+            />
+          )}
+          {label}
+        </Typography>
+      </Tooltip>
     );
   };
 

package/src/components/Select/components/types.ts

@@ -1,9 +1,9 @@
-import { DrowdownPosition, Option } from '../types';
+import { DropdownPosition, Option } from '../types';
 import { RefObject } from 'react';
 
 export interface DropdownProps {
   options: Option[];
-  dropdownPosition: DrowdownPosition;
+  dropdownPosition: DropdownPosition;
   optionZIndex: number;
   labelAccessor?: string;
   valueAccessor?: string;
@@ -14,6 +14,7 @@ export interface DropdownProps {
   heightFromTop: number;
   selectedOption?: Option;
   showIcon?: boolean;
+  showToolTip?: boolean
 }
 
 export const dropdownDefaultCSSData = {

package/src/components/Select/types.ts

@@ -108,9 +108,19 @@ export interface SelectProps {
    *  Provide the icon name for the select
    */
   iconName?: string;
+
+  /**
+   * Provide the placehoder for the select
+   */
+  placeHolder?: string;
+
+  /**
+   * Provide the boolean value if tooltip is reuired or not
+   */
+  showToolTip?: boolean
 }
 
-export interface DrowdownPosition {
+export interface DropdownPosition {
   positionX: number;
   positionY: number;
   width: number;
@@ -124,7 +134,7 @@ export interface SelectState {
   showOptions: boolean;
   options: Option[];
   option: string;
-  dropdownPosition: DrowdownPosition;
+  dropdownPosition: DropdownPosition;
 }
 
 type OptionValue = any;

package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx

@@ -30,6 +30,7 @@ const SequentialConnectingBranch: FC<SequentialConnectingBranchProps> = ({
   addInstanceLabel = 'Add Environment',
   scriptType = 'Automation',
   projectType = 'Web',
+  readOnly = true,
 }) => {
   const [selectedMachineInstance, setSelectedMachineInstance] = useState({});
   const selectButtonRef = useRef<HTMLButtonElement>(null);
@@ -174,6 +175,7 @@ const SequentialConnectingBranch: FC<SequentialConnectingBranchProps> = ({
             addInstanceLabel={addInstanceLabel}
             scriptType={scriptType}
             projectType={projectType}
+            readOnly={readOnly}
           />
         )}
       </div>