Skip to content

Commit

Permalink
Merge pull request #331 from qoretechnologies/foxhoundn/bug-custom-mo…
Browse files Browse the repository at this point in the history
…dals-added-330

Foxhoundn/bug-custom-modals-added-330
  • Loading branch information
Foxhoundn authored Sep 7, 2023
2 parents eb99a43 + b6c3885 commit e71029f
Show file tree
Hide file tree
Showing 10 changed files with 182 additions and 128 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@qoretechnologies/reqore",
"version": "0.37.0",
"version": "0.37.1",
"description": "ReQore is a highly theme-able and modular UI library for React",
"main": "dist/index.js",
"types": "dist/index.d.ts",
Expand Down
9 changes: 4 additions & 5 deletions src/components/Collection/item.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import styled, { css } from 'styled-components';
import { changeDarkness, getMainBackgroundColor } from '../../helpers/colors';
import { useReqoreProperty } from '../../hooks/useReqoreContext';
import { useReqoreTheme } from '../../hooks/useTheme';
import { StyledBackdrop } from '../Drawer';
import { ReqoreBackdrop } from '../Drawer/backdrop';
import {
IReqorePanelAction,
IReqorePanelBottomAction,
Expand Down Expand Up @@ -150,7 +150,7 @@ export const ReqoreCollectionItem = ({
);

const renderContent = () => {
const handleItemClick = (event) => {
const handleItemClick = (event?: any) => {
if (expandable) {
if (isSelected) {
setDimensions(originalDimensions.current);
Expand Down Expand Up @@ -194,11 +194,10 @@ export const ReqoreCollectionItem = ({
{position && (
<>
<div style={{ ...originalDimensions.current }} />
<StyledBackdrop
<ReqoreBackdrop
zIndex={getAndIncreaseZIndex()}
blur={5}
closable
onClick={handleItemClick}
onClose={() => handleItemClick()}
/>
</>
)}
Expand Down
43 changes: 43 additions & 0 deletions src/components/Drawer/backdrop.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import { animated } from '@react-spring/web';
import { rgba } from 'polished';
import { memo } from 'react';
import styled from 'styled-components';
import { IReqoreDrawerStyle } from '.';
import { getMainBackgroundColor } from '../../helpers/colors';

export interface IReqoreBackdropProps extends React.HTMLAttributes<HTMLDivElement> {
zIndex?: number;
blur?: number;
onClose?: () => void;
opacity?: number;
}

export const StyledBackdrop = styled(animated.div)<
IReqoreDrawerStyle & { closable: boolean; zIndex?: number }
>`
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
backdrop-filter: ${({ blur }) => (blur ? `blur(${blur}px)` : undefined)};
z-index: ${({ zIndex }) => zIndex};
background-color: ${({ theme }) => rgba(getMainBackgroundColor(theme), 0.3)};
cursor: ${({ closable }) => (closable ? 'pointer' : 'initial')};
`;

export const ReqoreBackdrop = memo(
({ onClose, zIndex, blur, opacity, ...rest }: IReqoreBackdropProps) => (
<StyledBackdrop
{...rest}
className={`${rest.className || ''} reqore-drawer-backdrop`}
onClick={() => onClose?.()}
closable={!!onClose}
zIndex={zIndex}
blur={blur}
style={{
opacity,
}}
/>
)
);
27 changes: 4 additions & 23 deletions src/components/Drawer/index.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { animated, useTransition } from '@react-spring/web';
import { rgba } from 'polished';
import { Resizable } from 're-resizable';
import { useEffect, useMemo, useState } from 'react';
import { createPortal } from 'react-dom';
Expand All @@ -8,12 +7,12 @@ import { useReqoreProperty } from '../..';
import { SPRING_CONFIG, SPRING_CONFIG_NO_ANIMATIONS } from '../../constants/animations';
import { IReqoreTheme } from '../../constants/theme';
import ReqoreThemeProvider from '../../containers/ThemeProvider';
import { getMainBackgroundColor } from '../../helpers/colors';
import useLatestZIndex from '../../hooks/useLatestZIndex';
import { useReqoreTheme } from '../../hooks/useTheme';
import { IReqoreIconName } from '../../types/icons';
import ReqoreButton from '../Button';
import { IReqorePanelAction, IReqorePanelProps, ReqorePanel } from '../Panel';
import { ReqoreBackdrop } from './backdrop';

export type TPosition = 'top' | 'bottom' | 'left' | 'right';

Expand Down Expand Up @@ -97,20 +96,6 @@ export const StyledCloseWrapper = styled.div<IReqoreDrawerStyle>`

export const StyledDrawerResizable = styled(animated.div)``;

export const StyledBackdrop = styled(animated.div)<
IReqoreDrawerStyle & { closable: boolean; zIndex?: number }
>`
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
backdrop-filter: ${({ blur }) => (blur ? `blur(${blur}px)` : undefined)};
z-index: ${({ zIndex }) => zIndex};
background-color: ${({ theme }) => rgba(getMainBackgroundColor(theme), 0.3)};
cursor: ${({ closable }) => (closable ? 'pointer' : 'initial')};
`;

/**
* It returns an icon name based on the position and whether the panel is hidden or not
* @param {'top' | 'bottom' | 'left' | 'right'} position - The position of the panel.
Expand Down Expand Up @@ -245,15 +230,11 @@ export const ReqoreDrawer: React.FC<IReqoreDrawerProps> = ({
item ? (
<ReqoreThemeProvider theme={theme}>
{hasBackdrop && !_isHidden ? (
<StyledBackdrop
className='reqore-drawer-backdrop'
onClick={() => onClose && onClose()}
closable={!!onClose}
<ReqoreBackdrop
onClose={onClose}
zIndex={zIndex}
blur={blur}
style={{
opacity: styles.opacity,
}}
opacity={styles.opacity}
/>
) : null}
<Resizable
Expand Down
1 change: 1 addition & 0 deletions src/components/Navbar/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export interface IReqoreNavbarStyle extends IReqoreNavbarProps {
export const StyledNavbar = styled.div<IReqoreNavbarStyle>`
${({ theme, type }: IReqoreNavbarStyle) => css`
height: 50px;
flex-shrink: 0;
width: 100%;
padding: 0 10px;
color: ${theme[type]?.color ||
Expand Down
7 changes: 3 additions & 4 deletions src/components/Sidebar/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import useLatestZIndex from '../../hooks/useLatestZIndex';
import { useReqoreTheme } from '../../hooks/useTheme';
import { ActiveIconScale, InactiveIconScale, ScaleIconOnHover } from '../../styles';
import { IReqoreIconName } from '../../types/icons';
import { StyledBackdrop } from '../Drawer';
import { ReqoreBackdrop } from '../Drawer/backdrop';
import ReqoreIcon from '../Icon';
import SidebarItem from './item';

Expand Down Expand Up @@ -423,10 +423,9 @@ const ReqoreSidebar: React.FC<IQorusSidebarProps> = ({
return (
<>
{floating && hasFloatingBackdrop && isOpen ? (
<StyledBackdrop
<ReqoreBackdrop
className='reqore-sidebar-backdrop'
onClick={() => onCloseClick?.()}
closable
onClose={() => onCloseClick?.()}
zIndex={zIndex}
/>
) : null}
Expand Down
181 changes: 94 additions & 87 deletions src/containers/ReqoreProvider.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { map, size } from 'lodash';
import React, { useCallback, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import { useMedia } from 'react-use';
import shortid from 'shortid';
import { useContext } from 'use-context-selector';
Expand All @@ -13,6 +14,7 @@ import { IReqoreTheme, TReqoreIntent } from '../constants/theme';
import ReqoreContext from '../context/ReqoreContext';
import ThemeContext from '../context/ThemeContext';
import { IReqoreIconName } from '../types/icons';
import PopoverProvider from './PopoverProvider';
import { IReqoreOptions } from './UIProvider';

export interface IReqoreNotificationData extends IReqoreNotificationProps {
Expand Down Expand Up @@ -159,99 +161,104 @@ const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, options = {}
'closePopoversOnEscPress' in options ? options.closePopoversOnEscPress : true,
}}
>
{size(notifications) > 0 ? (
<ReqoreNotificationsWrapper position={options.notificationsPosition}>
{notifications.map((notification) => (
<ReqoreNotification
{...notification}
key={notification.id}
onClick={
notification.onClick
? () => void notification.onClick(notification.id)
: undefined
}
onClose={() => {
if (notification.onClose) {
notification.onClose(notification.id);
<PopoverProvider uiScale={options?.uiScale}>
{size(notifications) > 0 ? (
<ReqoreNotificationsWrapper position={options.notificationsPosition}>
{notifications.map((notification) => (
<ReqoreNotification
{...notification}
key={notification.id}
onClick={
notification.onClick
? () => void notification.onClick(notification.id)
: undefined
}
onClose={() => {
if (notification.onClose) {
notification.onClose(notification.id);
}

removeNotification(notification.id);
}}
onFinish={() => {
if (notification.onFinish) {
notification.onFinish(notification.id);
}
removeNotification(notification.id);
}}
onFinish={() => {
if (notification.onFinish) {
notification.onFinish(notification.id);
}

removeNotification(notification.id);
}}
/>
))}
</ReqoreNotificationsWrapper>
) : null}
{children}
{confirmationModal.isOpen && (
<ReqoreModal
isOpen
flat
opacity={0.9}
blur={2}
width='500px'
intent={confirmationModal.intent}
label={confirmationModal.title || 'Confirm your action'}
icon='ErrorWarningFill'
className='reqore-confirmation-modal'
bottomActions={[
{
label: confirmationModal.cancelLabel || 'Cancel',
icon: 'CloseLine',
onClick: () => {
confirmationModal?.onCancel?.();
closeConfirmationModal();
removeNotification(notification.id);
}}
/>
))}
</ReqoreNotificationsWrapper>
) : null}
{children}
{confirmationModal.isOpen && (
<ReqoreModal
isOpen
flat
opacity={0.9}
blur={2}
width='500px'
intent={confirmationModal.intent}
label={confirmationModal.title || 'Confirm your action'}
icon='ErrorWarningFill'
className='reqore-confirmation-modal'
bottomActions={[
{
label: confirmationModal.cancelLabel || 'Cancel',
icon: 'CloseLine',
onClick: () => {
confirmationModal?.onCancel?.();
closeConfirmationModal();
},
position: 'left',
},
position: 'left',
},
{
label: confirmationModal.confirmLabel || 'Confirm',
intent: confirmationModal.confirmButtonIntent || 'success',
icon: confirmationModal.confirmIcon || 'CheckLine',
onClick: () => {
confirmationModal?.onConfirm?.();
closeConfirmationModal();
{
label: confirmationModal.confirmLabel || 'Confirm',
intent: confirmationModal.confirmButtonIntent || 'success',
icon: confirmationModal.confirmIcon || 'CheckLine',
onClick: () => {
confirmationModal?.onConfirm?.();
closeConfirmationModal();
},
position: 'right',
},
position: 'right',
},
]}
>
<ReqoreTextEffect
as='p'
effect={{ textAlign: 'center', weight: 'bold', textSize: 'big' }}
]}
>
{confirmationModal.description || 'Are you sure you want to proceed?'}
</ReqoreTextEffect>
</ReqoreModal>
)}
{map(modals, (modal, key) =>
React.isValidElement(modal) ? (
React.cloneElement(modal, {
key,
isOpen: true,
onClose: () => {
removeModal(key);
modal.props.onClose?.();
},
})
) : (
<ReqoreModal
{...modal}
key={key}
isOpen
onClose={() => {
removeModal(key);
modal.onClose?.();
}}
/>
)
)}
<ReqoreTextEffect
as='p'
effect={{ textAlign: 'center', weight: 'bold', textSize: 'big' }}
>
{confirmationModal.description || 'Are you sure you want to proceed?'}
</ReqoreTextEffect>
</ReqoreModal>
)}
{map(modals, (modal, key) =>
React.isValidElement(modal) ? (
createPortal(
React.cloneElement(modal, {
key,
isOpen: true,
onClose: () => {
removeModal(key);
modal.props.onClose?.();
},
}),
document.querySelector('#reqore-portal')!
)
) : (
<ReqoreModal
{...modal}
key={key}
isOpen
onClose={() => {
removeModal(key);
modal.onClose?.();
}}
/>
)
)}
</PopoverProvider>
</ReqoreContext.Provider>
</>
);
Expand Down
Loading

0 comments on commit e71029f

Please sign in to comment.