pixel-react 1.10.15 → 1.10.16

package/src/components/MiniModal/MiniModal.tsx

@@ -1,346 +0,0 @@
-import { useEffect, useRef, useState, useCallback, forwardRef } from 'react';
-import { createPortal } from 'react-dom';
-import { MiniEditModalProps, Rect, AvailableSpace } from './types.js';
-import Button from '../Button/Button.js';
-import useEscapeKey from '../../hooks/keyboardevents/useEscKeyEvent.js';
-import useClickOutside from '../../hooks/useClickOutside';
-import classNames from 'classnames';
-import './MiniModal.scss';
-import Typography from '../Typography';
-
-const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
-  (
-    {
-      anchorRef,
-      headerProps,
-      childContent,
-      cancelButtonProps = () => {},
-      proceedButtonProps = () => {},
-      footerContent,
-      isWrapped = false,
-      isAnimated = false,
-      isPopOver = false,
-      modalPosition = 'bottom',
-      leftTopArrow = false,
-      firstAnchorRef,
-      anchorRefLeftNum,
-      modalProperties,
-      anchorLeftDistanceForWrapper = 170,
-      extraTopSpace,
-      extraRightSpace,
-      extraLeftSpace,
-      isIconModel,
-      wrapperProperties,
-      arrowProperties,
-      arrowZIndex,
-      overlay,
-      outSideClick,
-    },
-    ref
-  ) => {
-    const [modalPositionState, setModalPositionState] = useState({
-      top: 0,
-      left: 0,
-    });
-    const [isVisible, setIsVisible] = useState(false);
-    const modalRef = useRef<HTMLDivElement>(null);
-    const {
-      width: modalWidth,
-      height: modalHeight,
-      borderRadius: modalBorderRadius = 4,
-      zIndex: modalZIndex = 99,
-      boxShadow: modalBoxShadow,
-      left: modalLeft,
-      top: modalTop,
-      padding: modalPadding,
-    } = modalProperties || {};
-
-    const {
-      left: popOverLeft,
-      top: popOverTop,
-      size: popOverSize = 10,
-    } = arrowProperties || {};
-    // Function to calculate available space
-    const getAvailableSpace = (rect: Rect): AvailableSpace => {
-      const { top, left, bottom, right } = rect;
-      const viewportWidth = window.innerWidth;
-      const viewportHeight = window.innerHeight;
-
-      return {
-        spaceTop: top,
-        spaceLeft: left,
-        spaceRight: viewportWidth - right,
-        spaceBottom: viewportHeight - bottom,
-      };
-    };
-
-    // Helper function to get the anchor element
-    const getAnchorElement = () => {
-      if (typeof anchorRef === 'string') {
-        return document.getElementById(anchorRef);
-      }
-      return anchorRef?.current || null;
-    };
-
-    const anchorElement = getAnchorElement();
-    const anchorRect = anchorElement?.getBoundingClientRect();
-
-    if (!isWrapped && anchorRect) {
-      const availableSpace = getAvailableSpace(anchorRect);
-      switch (modalPosition) {
-        case 'top':
-          if (availableSpace.spaceTop < (modalProperties?.height ?? 150)) {
-            modalPosition = 'bottom';
-          }
-          break;
-        case 'left':
-          if (availableSpace.spaceLeft < (modalProperties?.width ?? 480)) {
-            modalPosition = 'right';
-          }
-          break;
-        case 'right':
-          if (availableSpace.spaceRight < (modalProperties?.width ?? 480)) {
-            modalPosition = 'left';
-          }
-          break;
-        case 'bottom':
-          if (availableSpace.spaceBottom < (modalProperties?.height ?? 150)) {
-            modalPosition = 'top';
-          }
-          break;
-        default:
-          break;
-      }
-    }
-
-    // Specify for the wrapper div left position
-    const calculateAnchorRefLeft = (anchorRefLeftNum?: number) => {
-      if (anchorRefLeftNum) {
-        return anchorRefLeftNum;
-      }
-      return 0;
-    };
-
-    // Specify for the arrow position in left or top
-    const getArrowClassName = () => {
-      if (leftTopArrow && modalPosition === 'right') {
-        return 'left-top-arrow';
-      }
-      return modalPosition === 'right' ? 'left-middle-arrow' : '';
-    };
-    const calculatedAnchorRefLeft = calculateAnchorRefLeft(anchorRefLeftNum);
-
-    // Specify specific wrapper modal position
-    const firstAnchor =
-      firstAnchorRef?.current &&
-      firstAnchorRef?.current?.getBoundingClientRect().left -
-        anchorLeftDistanceForWrapper;
-
-    // Specifying the modal top
-    const calculateModalTop = () => {
-      const safeHeight = modalProperties?.height ?? 0;
-      if (modalPosition === 'bottom') {
-        return isWrapped
-          ? modalPositionState.top + (extraTopSpace?.wrappedModal ?? 5)
-          : modalPositionState.top + (extraTopSpace?.normalModal ?? 10);
-      } else if (modalPosition === 'right') {
-        return leftTopArrow
-          ? modalPositionState.top - (extraRightSpace?.leftTopArrow ?? 30)
-          : modalPositionState?.top -
-              safeHeight / (extraRightSpace?.middleLeftArrow ?? 3.5);
-      } else if (modalPosition === 'top') {
-        return (
-          modalPositionState.top -
-          (safeHeight + (extraTopSpace?.normalModal ?? 10))
-        );
-      }
-      return modalPositionState.top - safeHeight / 1.5;
-    };
-    const calculatedModalTop = calculateModalTop();
-
-    // Specifying the modal left
-    const calculateModalLeft = () => {
-      if (modalPosition === 'right') {
-        return (
-          modalPositionState.left + (extraLeftSpace?.rightAlignModal ?? 40)
-        );
-      } else if (firstAnchorRef) {
-        return firstAnchor;
-      } else if (modalPosition === 'left') {
-        return modalPositionState.left - (modalProperties?.width ?? 404) - 15;
-      } else {
-        return modalPositionState.left - (extraLeftSpace?.normal ?? 30);
-      }
-    };
-    const calculatedModalLeft = calculateModalLeft();
-
-    // Handle escape and enter functionality
-    const handleEsc = useEscapeKey('Escape');
-    const handleEnter = useEscapeKey('Enter');
-    handleEsc(outSideClick);
-    handleEnter(proceedButtonProps?.onClick);
-    useClickOutside(modalRef, outSideClick);
-
-    // Calculate the modal position
-    const calculatePosition = useCallback(() => {
-      const anchorRect = anchorElement?.getBoundingClientRect();
-      if (anchorRect) {
-        const { bottom, left } = anchorRect;
-        const { scrollX, scrollY } = window;
-        let topPosition = bottom + scrollY;
-        let leftPosition = left + scrollX;
-
-        setModalPositionState({
-          top: topPosition,
-          left: leftPosition,
-        });
-      }
-    }, [anchorElement]);
-
-    useEffect(() => {
-      const timeoutId = setTimeout(() => {
-        setIsVisible(true);
-        calculatePosition();
-      }, 100);
-      window.addEventListener('resize', calculatePosition);
-      window.addEventListener('scroll', calculatePosition);
-
-      return () => {
-        window.removeEventListener('resize', calculatePosition);
-        clearTimeout(timeoutId);
-        window.removeEventListener('scroll', calculatePosition);
-      };
-    }, [calculatePosition]);
-
-    const {
-      width: wrapperWidth = 35,
-      zIndex: wrapperZIndex = 101,
-      boxShadow: wrapperBoxShadow,
-    } = wrapperProperties || {};
-    const { isOverlay, backgroundColorOverlay, zIndexOverlay } = overlay || {};
-
-    if (isWrapped && isPopOver) {
-      return null;
-    }
-
-    return createPortal(
-      <>
-        {isOverlay && (
-          <div
-            className={classNames('ff-mini-modal-overlay')}
-            style={{
-              zIndex: zIndexOverlay ?? 98,
-              backgroundColor: backgroundColorOverlay ?? 'transparent',
-            }}
-            onClick={cancelButtonProps?.onClick}
-          ></div>
-        )}
-        <div
-          ref={ref || modalRef}
-          className={classNames('ff-mini-edit-modal-container', {
-            modalVisible: isVisible,
-            animatedModal: isAnimated,
-          })}
-          style={{
-            top: `${modalTop ?? calculatedModalTop}px`,
-            left: `${modalLeft ?? calculatedModalLeft}px`,
-          }}
-        >
-          {isPopOver && (
-            <div
-              className={`popover-arrow popover-arrow-${
-                modalPosition === 'right'
-                  ? 'left'
-                  : modalPosition === 'top'
-                  ? 'bottom'
-                  : modalPosition === 'left'
-                  ? 'right'
-                  : 'top'
-              } ${getArrowClassName()}`}
-              style={{
-                zIndex: `${arrowZIndex}`,
-                top: `${popOverTop && popOverTop}px`,
-                left: `${popOverLeft && popOverLeft}px`,
-                borderWidth: `${
-                  modalPosition === 'right'
-                    ? `${popOverSize}px ${popOverSize}px ${popOverSize}px 0`
-                    : modalPosition === 'top'
-                    ? `${popOverSize}px ${popOverSize}px 0 ${popOverSize}px`
-                    : modalPosition === 'left'
-                    ? `${popOverSize}px 0 ${popOverSize}px ${popOverSize}px`
-                    : `0 ${popOverSize}px ${popOverSize}px ${popOverSize}px`
-                }`,
-              }}
-            />
-          )}
-          {isWrapped && (
-            <div
-              className={'wrapped-div'}
-              style={{
-                left: `${calculatedAnchorRefLeft}px`,
-                width: `${wrapperWidth}px`,
-                zIndex: `${wrapperZIndex}`,
-                boxShadow:
-                  wrapperBoxShadow ??
-                  `0px -3px 4px 0px var(--ff-mini-modal-box-shadow)`,
-              }}
-            ></div>
-          )}
-          <div
-            className={classNames('mini-edit-modal', {
-              'mini-edit-modal-wrapper-shadow': !!isWrapped && !modalBoxShadow,
-              'mini-edit-modal-arrow-shadow': !!isPopOver && !modalBoxShadow,
-            })}
-            style={{
-              minWidth: isWrapped ? '358px' : '',
-              width: `${modalWidth}px`,
-              height: `${modalHeight}px`,
-              borderRadius: `${modalBorderRadius}px`,
-              zIndex: `${modalZIndex}`,
-              boxShadow: `${
-                modalBoxShadow ??
-                '0px 4px 8px var(--ff-mini-modal-arrow-shadow)'
-              }`,
-              padding: `${modalPadding ?? 4}px`,
-            }}
-          >
-            {headerProps ? (
-              <Typography as="div">{headerProps}</Typography>
-            ) : isIconModel ? (
-              <></>
-            ) : (
-              <Typography as="header">
-                <Typography as="h2">Header text</Typography>
-                <hr />
-              </Typography>
-            )}
-            {childContent}
-            {footerContent ? (
-              <Typography as="footer">{footerContent}</Typography>
-            ) : isIconModel ? (
-              <></>
-            ) : (
-              <footer className="modal-footer">
-                <Button
-                  variant="primary"
-                  className="btn-cancel"
-                  onClick={cancelButtonProps?.onClick}
-                  label={cancelButtonProps?.text}
-                />
-                <Button
-                  variant="secondary"
-                  className="btn-proceed"
-                  label={proceedButtonProps?.text}
-                  onClick={proceedButtonProps?.onClick}
-                />
-              </footer>
-            )}
-          </div>
-        </div>
-      </>,
-      document.body
-    );
-  }
-);
-
-export default MiniModal;

package/src/components/MiniModal/index.ts

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

package/src/components/MiniModal/types.ts

@@ -1,125 +0,0 @@
-import { ReactNode, RefObject } from 'react';
-interface ModalDimensions {
-  width?: number;
-  height?: number;
-  borderRadius?: number;
-  zIndex?: number;
-  boxShadow?: string;
-  left?: number;
-  top?: number;
-  padding?: number;
-}
-export interface MiniEditModalProps {
-  /**
-   * A reference to the button element that triggers the modal.
-   */
-  anchorRef?: RefObject<HTMLButtonElement> | string;
-  id?: string | number;
-  /**
-   * Optional properties for configuring the modal header.
-   */
-  headerProps?: ReactNode;
-  /**
-   * The main content to be displayed inside the modal
-   */
-  childContent: ReactNode;
-  /**
-   * Props for the cancel button inside the modal
-   */
-  cancelButtonProps?: any;
-  /**
-   * Props for the proceed button inside the modal.
-   */
-  proceedButtonProps?: any;
-  /**
-   * Optional content for the footer of the modal.
-   */
-  footerContent?: ReactNode;
-  /**
-   * Determines if the modal should be wrapped inside a container element.
-   */
-  isWrapped?: boolean;
-  /**
-   * Determines if the modal should have an animation when displayed.
-   */
-  isAnimated?: boolean;
-  /**
-   * Specifies if the modal should behave as a popover with an arrow.
-   */
-  isPopOver?: boolean;
-  /**
-   * Specifies if the modal should behave as a popover with an arrow.
-   */
-  isIconModel?: boolean;
-  /**
-   * Sets the position of the modal relative to its anchor.
-   * bottom: The modal appears below the anchor.
-   * right: The modal appears to the right of the anchor.
-   */
-  modalPosition?: 'bottom' | 'right' | 'top' | 'left';
-  /**
-   * Adds a top-left aligned arrow to the modal when its position is set to `'right'`.
-   */
-  leftTopArrow?: boolean;
-  /**
-   * A reference to an additional anchor element for positioning the modal.
-   */
-  firstAnchorRef?: RefObject<HTMLButtonElement>;
-  /**
-   * A numeric value representing the left position of the anchor element, used to calculate the modal's left position.
-   */
-  anchorRefLeftNum?: number;
-  /**
-   * Optional properties for configuring the modal's dimensions.
-   * width: The width of the modal.
-   * height: The height of the modal.
-   */
-  modalProperties?: ModalDimensions;
-  /**distance for the wrapper model from align alignments */
-  anchorLeftDistanceForWrapper?: number;
-  /**extra top space added from anchor */
-  extraTopSpace?: {
-    wrappedModal?: number;
-    normalModal?: number;
-  };
-  /**extra right space added from anchor */
-  extraRightSpace?: {
-    leftTopArrow?: number;
-    middleLeftArrow?: number;
-  };
-  /**extra left space added from anchor */
-  extraLeftSpace?: {
-    normal?: number;
-    rightAlignModal?: number;
-  };
-  wrapperProperties?: {
-    width?: number;
-    zIndex?: number;
-    boxShadow?: string;
-  };
-  arrowZIndex?: number;
-  arrowProperties?: {
-    left?: number;
-    top?: number;
-    size?: number;
-  };
-  overlay?: {
-    isOverlay?: boolean;
-    zIndexOverlay?: number;
-    backgroundColorOverlay?: string;
-  };
-  outSideClick?: any;
-}
-export interface Rect {
-  top: number;
-  left: number;
-  bottom: number;
-  right: number;
-}
-
-export interface AvailableSpace {
-  spaceTop: number;
-  spaceLeft: number;
-  spaceRight: number;
-  spaceBottom: number;
-}

package/src/components/MobileSkin/MobileSkin.stories.tsx

@@ -1,94 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import MobileSkin from './MobileSkin';
-import React from 'react';
-
-const meta: Meta<typeof MobileSkin> = {
-  title: 'Components/MobileSkin',
-  component: MobileSkin,
-  parameters: {
-    layout: 'padded',
-  },
-  tags: ['autodocs'],
-};
-
-const navBarIcons = [
-  {
-    title: 'Forward',
-    name: 'right_arrow_icon',
-    onClick: () => {},
-    height: 16,
-    width: 16,
-  },
-  {
-    title: 'Backward',
-    name: 'left_arrow_icon',
-    onClick: () => {},
-    height: 16,
-    width: 16,
-  },
-  {
-    title: 'Refresh',
-    name: 'refresh_icon',
-    onClick: () => {},
-    height: 16,
-    width: 16,
-  },
-  {
-    title: 'Capture',
-    name: 'minimize_script',
-    onClick: () => {},
-    height: 16,
-    width: 16,
-  },
-  {
-    title: 'Rotate',
-    name: 'replace_icon',
-    onClick: () => {},
-    height: 16,
-    width: 16,
-  },
-];
-const randomImage: string =
-  'https://plus.unsplash.com/premium_photo-1664303228186-a61e7dc91597?q=80&w=1384&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';
-
-type Story = StoryObj<typeof MobileSkin>;
-
-const defaultArgs = {
-  navBarIcons: navBarIcons,
-  mobileWidth: 220,
-  mobileHeight: 448,
-  children: <p>No Data Found</p>,
-};
-
-export const PortraitView: Story = {
-  args: {
-    ...defaultArgs,
-    orientation: 'portrait',
-  },
-};
-
-export const LandscapeView: Story = {
-  args: {
-    ...defaultArgs,
-    orientation: 'landscape',
-  },
-};
-
-export const PortraitViewWithNavbar: Story = {
-  args: {
-    ...defaultArgs,
-    orientation: 'portrait',
-    UtilityBar: true,
-    navBarIcons: navBarIcons,
-  },
-};
-
-export const LandscapeViewWithNavbar: Story = {
-  args: {
-    ...defaultArgs,
-    orientation: 'landscape',
-    UtilityBar: true,
-    navBarIcons: navBarIcons,
-  },
-};
-export default meta;

package/src/components/MobileSkin/MobileSkin.tsx

@@ -1,74 +0,0 @@
-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 = '',
-  navBarIcons,
-  mobileHeight = 448,
-  mobileWidth = 220,
-  UtilityBar,
-}) => {
-  const isPortrait = orientation === 'portrait';
-  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>
-      {UtilityBar && (
-        <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

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

package/src/components/MobileSkin/index.ts

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

package/src/components/MobileSkin/types.ts

@@ -1,33 +0,0 @@
-export interface iconDetails {
-  /**
-   * details of each icon in which name must be there
-   */
-  name: string;
-  [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';
-  /**
-   *   height of the MobileSkin
-   */
-  mobileHeight?: number;
-  /**
-   *   width of the MobileSkin
-   */
-  mobileWidth?: number;
-  /**
-   * if you need the lower navbar below the mobileSkin you pass this prop
-   */
-  UtilityBar?: boolean;
-  /**
-   * takes the icons details like icon name , title, onClick event, height , width, etc but name is must
-   */
-  navbarIcons?: Array<iconDetails>;
-}