-
Notifications
You must be signed in to change notification settings - Fork 39
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: pending update confirmation modal (#1450)
* feat: pending update confirmation modal * feat: reuse confirmation modal in other modals * refactor: remove duplicated classes * fix: hide edit update button on non-authored updates * fix: delete update closing on delete * feat: change texts when last update * fix: child descendant from a error
- Loading branch information
Showing
28 changed files
with
348 additions
and
286 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,13 @@ | ||
| .CalendarAlertModal__SelectorContainer { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| text-align: center; | ||
| margin-bottom: 25px; | ||
| } | ||
|
|
||
| .ui.button.basic.CalendarAlertModal__CancelButton { | ||
| color: var(--black-600) !important; | ||
| .CalendarAlertModal__NumberSelector { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| @media (min-width: 768px) { | ||
| .ConfirmationModal__Container { | ||
| margin: 48px 64px 32px 64px !important; | ||
| } | ||
| } | ||
|
|
||
| .ConfirmationModal__Text { | ||
| margin-bottom: 26px; | ||
| } | ||
|
|
||
| .ConfirmationModal__Title { | ||
| margin-bottom: 12px !important; | ||
| } | ||
|
|
||
| .ConfirmationModal__Text, | ||
| .ConfirmationModal__Text * { | ||
| text-align: center; | ||
| white-space: pre-line; | ||
| } | ||
|
|
||
| .ConfirmationModal__Link { | ||
| color: var(--black-800); | ||
| pointer-events: none; | ||
| cursor: default; | ||
| overflow-wrap: break-word; | ||
| } | ||
|
|
||
| .ConfirmationModal__Actions button:not(:last-child) { | ||
| margin-bottom: 15px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| import { Button } from 'decentraland-ui/dist/components/Button/Button' | ||
| import { Close } from 'decentraland-ui/dist/components/Close/Close' | ||
| import { Modal } from 'decentraland-ui/dist/components/Modal/Modal' | ||
|
|
||
| import Heading from '../Common/Typography/Heading' | ||
| import Text from '../Common/Typography/Text' | ||
|
|
||
| import './ConfirmationModal.css' | ||
|
|
||
| interface Props { | ||
| isOpen: boolean | ||
| isLoading?: boolean | ||
| isDisabled?: boolean | ||
| title: string | ||
| description: React.ReactNode | string | ||
| onClose: () => void | ||
| onPrimaryClick: () => void | ||
| onSecondaryClick: () => void | ||
| primaryButtonHref?: string | ||
| primaryButtonText: string | ||
| secondaryButtonText: string | ||
| } | ||
|
|
||
| export default function ConfirmationModal({ | ||
| isOpen, | ||
| isLoading, | ||
| isDisabled, | ||
| title, | ||
| description, | ||
| onClose, | ||
| onPrimaryClick, | ||
| onSecondaryClick, | ||
| primaryButtonText, | ||
| primaryButtonHref, | ||
| secondaryButtonText, | ||
| }: Props) { | ||
| return ( | ||
| <Modal open={isOpen} size="tiny" closeIcon={<Close />} onClose={onClose}> | ||
| <Modal.Content className="ConfirmationModal__Container"> | ||
| <div className="ConfirmationModal__Text"> | ||
| <Heading className="ConfirmationModal__Title" size="xs" weight="semi-bold"> | ||
| {title} | ||
| </Heading> | ||
| {typeof description === 'string' ? <Text>{description}</Text> : description} | ||
| </div> | ||
| <div className="ConfirmationModal__Actions"> | ||
| <Button | ||
| fluid | ||
| primary | ||
| className="ConfirmationModal__Button" | ||
| onClick={onPrimaryClick} | ||
| disabled={isLoading || isDisabled} | ||
| loading={isLoading} | ||
| href={primaryButtonHref} | ||
| as={primaryButtonHref ? 'a' : undefined} | ||
| target={primaryButtonHref ? '_blank' : undefined} | ||
| > | ||
| {primaryButtonText} | ||
| </Button> | ||
| <Button fluid basic className="ConfirmationModal__Button" onClick={onSecondaryClick} disabled={isLoading}> | ||
| {secondaryButtonText} | ||
| </Button> | ||
| </div> | ||
| </Modal.Content> | ||
| </Modal> | ||
| ) | ||
| } |
51 changes: 18 additions & 33 deletions
51
src/components/Modal/DeleteProposalModal/DeleteProposalModal.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,42 +1,27 @@ | ||
| import classNames from 'classnames' | ||
| import { Button } from 'decentraland-ui/dist/components/Button/Button' | ||
| import { Close } from 'decentraland-ui/dist/components/Close/Close' | ||
| import { Header } from 'decentraland-ui/dist/components/Header/Header' | ||
| import { Modal, ModalProps } from 'decentraland-ui/dist/components/Modal/Modal' | ||
|
|
||
| import useFormatMessage from '../../../hooks/useFormatMessage' | ||
| import Text from '../../Common/Typography/Text' | ||
| import '../ProposalModal.css' | ||
| import ConfirmationModal from '../ConfirmationModal' | ||
|
|
||
| export type DeleteProposalModalProps = Omit<ModalProps, 'children'> & { | ||
| loading?: boolean | ||
| onClickAccept?: (e: React.MouseEvent<unknown>) => void | ||
| interface Props { | ||
| onClickAccept: () => void | ||
| onClose: () => void | ||
| open: boolean | ||
| loading: boolean | ||
| } | ||
|
|
||
| export function DeleteProposalModal({ onClickAccept, loading, ...props }: DeleteProposalModalProps) { | ||
| export function DeleteProposalModal({ onClickAccept, onClose, open, loading }: Props) { | ||
| const t = useFormatMessage() | ||
|
|
||
| return ( | ||
| <Modal | ||
| {...props} | ||
| size="tiny" | ||
| className={classNames('GovernanceActionModal', 'ProposalModal', props.className)} | ||
| closeIcon={<Close />} | ||
| > | ||
| <Modal.Content> | ||
| <div className="ProposalModal__Title"> | ||
| <Header>{t('modal.delete_proposal.title')}</Header> | ||
| <Text size="lg">{t('modal.delete_proposal.description')}</Text> | ||
| </div> | ||
| <div> | ||
| <Button fluid primary onClick={onClickAccept} loading={loading}> | ||
| {t('modal.delete_proposal.accept')} | ||
| </Button> | ||
| <Button fluid className="cancel" onClick={props.onClose}> | ||
| {t('modal.delete_proposal.reject')} | ||
| </Button> | ||
| </div> | ||
| </Modal.Content> | ||
| </Modal> | ||
| <ConfirmationModal | ||
| isOpen={open} | ||
| isLoading={loading} | ||
| title={t('modal.delete_proposal.title')} | ||
| description={t('modal.delete_proposal.description')} | ||
| onPrimaryClick={onClickAccept} | ||
| onSecondaryClick={onClose} | ||
| onClose={onClose} | ||
| primaryButtonText={t('modal.delete_proposal.accept')} | ||
| secondaryButtonText={t('modal.delete_proposal.reject')} | ||
| /> | ||
| ) | ||
| } |
49 changes: 17 additions & 32 deletions
49
src/components/Modal/DeleteUpdateModal/DeleteUpdateModal.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,42 +1,27 @@ | ||
| import classNames from 'classnames' | ||
| import { Button } from 'decentraland-ui/dist/components/Button/Button' | ||
| import { Close } from 'decentraland-ui/dist/components/Close/Close' | ||
| import { Header } from 'decentraland-ui/dist/components/Header/Header' | ||
| import { Modal, ModalProps } from 'decentraland-ui/dist/components/Modal/Modal' | ||
|
|
||
| import useFormatMessage from '../../../hooks/useFormatMessage' | ||
| import Text from '../../Common/Typography/Text' | ||
| import '../ProposalModal.css' | ||
| import ConfirmationModal from '../ConfirmationModal' | ||
|
|
||
| export type DeleteUpdateModal = Omit<ModalProps, 'children'> & { | ||
| type Props = { | ||
| loading?: boolean | ||
| onClickAccept?: (e: React.MouseEvent<unknown>) => void | ||
| open: boolean | ||
| onClickAccept: () => void | ||
| onClose: () => void | ||
| } | ||
|
|
||
| export function DeleteUpdateModal({ onClickAccept, loading, ...props }: DeleteUpdateModal) { | ||
| export function DeleteUpdateModal({ onClickAccept, onClose, loading, open }: Props) { | ||
| const t = useFormatMessage() | ||
|
|
||
| return ( | ||
| <Modal | ||
| {...props} | ||
| size="tiny" | ||
| className={classNames('GovernanceActionModal', 'ProposalModal', props.className)} | ||
| closeIcon={<Close />} | ||
| > | ||
| <Modal.Content> | ||
| <div className="ProposalModal__Title"> | ||
| <Header>{t('modal.delete_update.title')}</Header> | ||
| <Text size="lg">{t('modal.delete_update.description')}</Text> | ||
| </div> | ||
| <div> | ||
| <Button fluid primary onClick={onClickAccept} loading={loading}> | ||
| {t('modal.delete_update.accept')} | ||
| </Button> | ||
| <Button fluid className="cancel" onClick={props.onClose}> | ||
| {t('modal.delete_update.reject')} | ||
| </Button> | ||
| </div> | ||
| </Modal.Content> | ||
| </Modal> | ||
| <ConfirmationModal | ||
| isOpen={open} | ||
| isLoading={loading} | ||
| title={t('modal.delete_update.title')} | ||
| description={t('modal.delete_update.description')} | ||
| onPrimaryClick={onClickAccept} | ||
| onSecondaryClick={onClose} | ||
| onClose={onClose} | ||
| primaryButtonText={t('modal.delete_update.accept')} | ||
| secondaryButtonText={t('modal.delete_update.reject')} | ||
| /> | ||
| ) | ||
| } |
Oops, something went wrong.