Skip to content

Commit

Permalink
fix: PR review
Browse files Browse the repository at this point in the history
  • Loading branch information
@adamviktora
adamviktora committed Oct 8, 2024
1 parent 3de93ef commit 7fd529c
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 19 deletions.
18 changes: 9 additions & 9 deletions packages/module/patternfly-docs/content/examples/Basic.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,34 +40,34 @@ export const DeleteModalBasic: React.FunctionComponent = () => {
</Stack>

<DeleteModal
title="Delete user group?"
deleteName="123"
title="Delete [item]?"
deleteName="item-name"
onDelete={() => handleModalRecoverableToggle(undefined)}
deleteVariant="easily-recoverable"
isOpen={isModalRecoverableOpen}
onClose={handleModalRecoverableToggle}
>
User group 123 will be deleted.
The <strong>item-name</strong> item will be deleted.
</DeleteModal>
<DeleteModal
title="Delete experiment?"
deleteName="cool-exp"
title="Delete [item]?"
deleteName="item-name"
onDelete={() => handleModalDestructiveToggle(undefined)}
deleteVariant="destructive"
isOpen={isModalDestructiveOpen}
onClose={handleModalDestructiveToggle}
>
Experiment cool-exp will be deleted.
The <strong>item-name</strong> item will be deleted. [Brief sentence describing consequence of action].
</DeleteModal>
<DeleteModal
title="Delete project?"
deleteName="RedHatAwesome"
title="Delete [item]?"
deleteName="item-name"
onDelete={() => handleModalExtraDestructiveToggle(undefined)}
deleteVariant="extra-destructive"
isOpen={isModalExtraDestructiveOpen}
onClose={handleModalExtraDestructiveToggle}
>
Project RedHatAwesome will be deleted.
The <strong>item-name</strong> item will be deleted. [Brief sentence describing consequence of action].
</DeleteModal>
</>
);
Expand Down
4 changes: 2 additions & 2 deletions packages/module/patternfly-docs/generated/extensions/ai-infra-ui-components/react.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,11 +121,11 @@ pageData.liveContext = {
};
pageData.examples = {
'Example': props =>
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { Button, Stack, StackItem } from '@patternfly/react-core';\nimport { DeleteModal } from '@patternfly/ai-infra-ui-components';\n\nexport const DeleteModalBasic: React.FunctionComponent = () => {\n const [isModalRecoverableOpen, setIsModalRecoverableOpen] = React.useState(false);\n const [isModalDestructiveOpen, setIsModalDestructiveOpen] = React.useState(false);\n const [isModalExtraDestructiveOpen, setIsModalExtraDestructiveOpen] = React.useState(false);\n\n const handleModalRecoverableToggle = (_event: KeyboardEvent | React.MouseEvent | undefined) => {\n setIsModalRecoverableOpen(!isModalRecoverableOpen);\n };\n\n const handleModalDestructiveToggle = (_event: KeyboardEvent | React.MouseEvent | undefined) => {\n setIsModalDestructiveOpen(!isModalDestructiveOpen);\n };\n\n const handleModalExtraDestructiveToggle = (_event: KeyboardEvent | React.MouseEvent | undefined) => {\n setIsModalExtraDestructiveOpen(!isModalExtraDestructiveOpen);\n };\n\n return (\n <>\n <Stack hasGutter style={{ marginBottom: '2rem' }}>\n <StackItem>\n <Button variant=\"primary\" onClick={handleModalRecoverableToggle}>\n Show delete modal (Easily recoverable)\n </Button>\n </StackItem>\n <StackItem>\n <Button variant=\"primary\" onClick={handleModalDestructiveToggle}>\n Show delete modal (Destructive)\n </Button>\n </StackItem>\n <StackItem>\n <Button variant=\"primary\" onClick={handleModalExtraDestructiveToggle}>\n Show delete modal (Extra destructive)\n </Button>\n </StackItem>\n </Stack>\n\n <DeleteModal\n title=\"Delete user group?\"\n deleteName=\"123\"\n onDelete={() => handleModalRecoverableToggle(undefined)}\n deleteVariant=\"easily-recoverable\"\n isOpen={isModalRecoverableOpen}\n onClose={handleModalRecoverableToggle}\n >\n User group 123 will be deleted.\n </DeleteModal>\n <DeleteModal\n title=\"Delete experiment?\"\n deleteName=\"cool-exp\"\n onDelete={() => handleModalDestructiveToggle(undefined)}\n deleteVariant=\"destructive\"\n isOpen={isModalDestructiveOpen}\n onClose={handleModalDestructiveToggle}\n >\n Experiment cool-exp will be deleted.\n </DeleteModal>\n <DeleteModal\n title=\"Delete project?\"\n deleteName=\"RedHatAwesome\"\n onDelete={() => handleModalExtraDestructiveToggle(undefined)}\n deleteVariant=\"extra-destructive\"\n isOpen={isModalExtraDestructiveOpen}\n onClose={handleModalExtraDestructiveToggle}\n >\n Project RedHatAwesome will be deleted.\n </DeleteModal>\n </>\n );\n};\n","title":"Example","lang":"js","className":""}}>
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { Button, Stack, StackItem } from '@patternfly/react-core';\nimport { DeleteModal } from '@patternfly/ai-infra-ui-components';\n\nexport const DeleteModalBasic: React.FunctionComponent = () => {\n const [isModalRecoverableOpen, setIsModalRecoverableOpen] = React.useState(false);\n const [isModalDestructiveOpen, setIsModalDestructiveOpen] = React.useState(false);\n const [isModalExtraDestructiveOpen, setIsModalExtraDestructiveOpen] = React.useState(false);\n\n const handleModalRecoverableToggle = (_event: KeyboardEvent | React.MouseEvent | undefined) => {\n setIsModalRecoverableOpen(!isModalRecoverableOpen);\n };\n\n const handleModalDestructiveToggle = (_event: KeyboardEvent | React.MouseEvent | undefined) => {\n setIsModalDestructiveOpen(!isModalDestructiveOpen);\n };\n\n const handleModalExtraDestructiveToggle = (_event: KeyboardEvent | React.MouseEvent | undefined) => {\n setIsModalExtraDestructiveOpen(!isModalExtraDestructiveOpen);\n };\n\n return (\n <>\n <Stack hasGutter style={{ marginBottom: '2rem' }}>\n <StackItem>\n <Button variant=\"primary\" onClick={handleModalRecoverableToggle}>\n Show delete modal (Easily recoverable)\n </Button>\n </StackItem>\n <StackItem>\n <Button variant=\"primary\" onClick={handleModalDestructiveToggle}>\n Show delete modal (Destructive)\n </Button>\n </StackItem>\n <StackItem>\n <Button variant=\"primary\" onClick={handleModalExtraDestructiveToggle}>\n Show delete modal (Extra destructive)\n </Button>\n </StackItem>\n </Stack>\n\n <DeleteModal\n title=\"Delete [item]?\"\n deleteName=\"item-name\"\n onDelete={() => handleModalRecoverableToggle(undefined)}\n deleteVariant=\"easily-recoverable\"\n isOpen={isModalRecoverableOpen}\n onClose={handleModalRecoverableToggle}\n >\n The <strong>item-name</strong> item will be deleted.\n </DeleteModal>\n <DeleteModal\n title=\"Delete [item]?\"\n deleteName=\"item-name\"\n onDelete={() => handleModalDestructiveToggle(undefined)}\n deleteVariant=\"destructive\"\n isOpen={isModalDestructiveOpen}\n onClose={handleModalDestructiveToggle}\n >\n The <strong>item-name</strong> item will be deleted. [Brief sentence describing consequence of action].\n </DeleteModal>\n <DeleteModal\n title=\"Delete [item]?\"\n deleteName=\"item-name\"\n onDelete={() => handleModalExtraDestructiveToggle(undefined)}\n deleteVariant=\"extra-destructive\"\n isOpen={isModalExtraDestructiveOpen}\n onClose={handleModalExtraDestructiveToggle}\n >\n The <strong>item-name</strong> item will be deleted. [Brief sentence describing consequence of action].\n </DeleteModal>\n </>\n );\n};\n","title":"Example","lang":"js","className":""}}>

</Example>,
'Fullscreen example': props =>
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { Button, Stack, StackItem } from '@patternfly/react-core';\nimport { DeleteModal } from '@patternfly/ai-infra-ui-components';\n\nexport const DeleteModalBasic: React.FunctionComponent = () => {\n const [isModalRecoverableOpen, setIsModalRecoverableOpen] = React.useState(false);\n const [isModalDestructiveOpen, setIsModalDestructiveOpen] = React.useState(false);\n const [isModalExtraDestructiveOpen, setIsModalExtraDestructiveOpen] = React.useState(false);\n\n const handleModalRecoverableToggle = (_event: KeyboardEvent | React.MouseEvent | undefined) => {\n setIsModalRecoverableOpen(!isModalRecoverableOpen);\n };\n\n const handleModalDestructiveToggle = (_event: KeyboardEvent | React.MouseEvent | undefined) => {\n setIsModalDestructiveOpen(!isModalDestructiveOpen);\n };\n\n const handleModalExtraDestructiveToggle = (_event: KeyboardEvent | React.MouseEvent | undefined) => {\n setIsModalExtraDestructiveOpen(!isModalExtraDestructiveOpen);\n };\n\n return (\n <>\n <Stack hasGutter style={{ marginBottom: '2rem' }}>\n <StackItem>\n <Button variant=\"primary\" onClick={handleModalRecoverableToggle}>\n Show delete modal (Easily recoverable)\n </Button>\n </StackItem>\n <StackItem>\n <Button variant=\"primary\" onClick={handleModalDestructiveToggle}>\n Show delete modal (Destructive)\n </Button>\n </StackItem>\n <StackItem>\n <Button variant=\"primary\" onClick={handleModalExtraDestructiveToggle}>\n Show delete modal (Extra destructive)\n </Button>\n </StackItem>\n </Stack>\n\n <DeleteModal\n title=\"Delete user group?\"\n deleteName=\"123\"\n onDelete={() => handleModalRecoverableToggle(undefined)}\n deleteVariant=\"easily-recoverable\"\n isOpen={isModalRecoverableOpen}\n onClose={handleModalRecoverableToggle}\n >\n User group 123 will be deleted.\n </DeleteModal>\n <DeleteModal\n title=\"Delete experiment?\"\n deleteName=\"cool-exp\"\n onDelete={() => handleModalDestructiveToggle(undefined)}\n deleteVariant=\"destructive\"\n isOpen={isModalDestructiveOpen}\n onClose={handleModalDestructiveToggle}\n >\n Experiment cool-exp will be deleted.\n </DeleteModal>\n <DeleteModal\n title=\"Delete project?\"\n deleteName=\"RedHatAwesome\"\n onDelete={() => handleModalExtraDestructiveToggle(undefined)}\n deleteVariant=\"extra-destructive\"\n isOpen={isModalExtraDestructiveOpen}\n onClose={handleModalExtraDestructiveToggle}\n >\n Project RedHatAwesome will be deleted.\n </DeleteModal>\n </>\n );\n};\n","title":"Fullscreen example","lang":"js","isFullscreen":true,"className":""}}>
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { Button, Stack, StackItem } from '@patternfly/react-core';\nimport { DeleteModal } from '@patternfly/ai-infra-ui-components';\n\nexport const DeleteModalBasic: React.FunctionComponent = () => {\n const [isModalRecoverableOpen, setIsModalRecoverableOpen] = React.useState(false);\n const [isModalDestructiveOpen, setIsModalDestructiveOpen] = React.useState(false);\n const [isModalExtraDestructiveOpen, setIsModalExtraDestructiveOpen] = React.useState(false);\n\n const handleModalRecoverableToggle = (_event: KeyboardEvent | React.MouseEvent | undefined) => {\n setIsModalRecoverableOpen(!isModalRecoverableOpen);\n };\n\n const handleModalDestructiveToggle = (_event: KeyboardEvent | React.MouseEvent | undefined) => {\n setIsModalDestructiveOpen(!isModalDestructiveOpen);\n };\n\n const handleModalExtraDestructiveToggle = (_event: KeyboardEvent | React.MouseEvent | undefined) => {\n setIsModalExtraDestructiveOpen(!isModalExtraDestructiveOpen);\n };\n\n return (\n <>\n <Stack hasGutter style={{ marginBottom: '2rem' }}>\n <StackItem>\n <Button variant=\"primary\" onClick={handleModalRecoverableToggle}>\n Show delete modal (Easily recoverable)\n </Button>\n </StackItem>\n <StackItem>\n <Button variant=\"primary\" onClick={handleModalDestructiveToggle}>\n Show delete modal (Destructive)\n </Button>\n </StackItem>\n <StackItem>\n <Button variant=\"primary\" onClick={handleModalExtraDestructiveToggle}>\n Show delete modal (Extra destructive)\n </Button>\n </StackItem>\n </Stack>\n\n <DeleteModal\n title=\"Delete [item]?\"\n deleteName=\"item-name\"\n onDelete={() => handleModalRecoverableToggle(undefined)}\n deleteVariant=\"easily-recoverable\"\n isOpen={isModalRecoverableOpen}\n onClose={handleModalRecoverableToggle}\n >\n The <strong>item-name</strong> item will be deleted.\n </DeleteModal>\n <DeleteModal\n title=\"Delete [item]?\"\n deleteName=\"item-name\"\n onDelete={() => handleModalDestructiveToggle(undefined)}\n deleteVariant=\"destructive\"\n isOpen={isModalDestructiveOpen}\n onClose={handleModalDestructiveToggle}\n >\n The <strong>item-name</strong> item will be deleted. [Brief sentence describing consequence of action].\n </DeleteModal>\n <DeleteModal\n title=\"Delete [item]?\"\n deleteName=\"item-name\"\n onDelete={() => handleModalExtraDestructiveToggle(undefined)}\n deleteVariant=\"extra-destructive\"\n isOpen={isModalExtraDestructiveOpen}\n onClose={handleModalExtraDestructiveToggle}\n >\n The <strong>item-name</strong> item will be deleted. [Brief sentence describing consequence of action].\n </DeleteModal>\n </>\n );\n};\n","title":"Fullscreen example","lang":"js","isFullscreen":true,"className":""}}>

</Example>,
'DeleteModal implementation': props =>
Expand Down
16 changes: 8 additions & 8 deletions packages/module/src/DeleteModal/DeleteModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,31 +67,31 @@ export const DeleteModal: React.FunctionComponent<DeleteModalProps> = ({
isOpen,
...props
}: DeleteModalProps) => {
const [confirmationText, setConfirmationText] = React.useState('');
const confirmed = deleteVariant === 'extra-destructive' ? confirmationText.trim() === deleteName : true;
const [inputValue, setInputValue] = React.useState('');
const confirmed = deleteVariant === 'extra-destructive' ? inputValue.trim() === deleteName : true;

React.useEffect(() => {
if (!isOpen) {
setConfirmationText('');
setInputValue('');
}
}, [isOpen]);

return (
<Modal variant="small" onClose={onClose} isOpen={isOpen} data-testid={testId || 'delete-modal'} {...props}>
<Modal variant="small" onClose={onClose} isOpen={isOpen} data-testid={testId ?? 'delete-modal'} {...props}>
<ModalHeader title={title} titleIconVariant={deleteVariant !== 'easily-recoverable' ? 'warning' : undefined} />
<ModalBody>
<Stack hasGutter>
<StackItem>{children}</StackItem>
{deleteVariant === 'extra-destructive' && (
<StackItem>
<Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsSm' }}>
<FlexItem>{confirmationMessage(deleteName)}</FlexItem>
<FlexItem id="confirmation-message">{confirmationMessage(deleteName)}</FlexItem>
<TextInput
id={textInputProps?.id ?? 'delete-modal-input'}
data-testid={textInputProps?.id ?? 'delete-modal-input'}
aria-label={textInputProps?.['aria-label'] ?? 'Delete modal input'}
value={confirmationText}
onChange={(_e, value) => setConfirmationText(value)}
aria-labelledby="confirmation-message"
value={inputValue}
onChange={(_e, value) => setInputValue(value)}
onKeyDown={(event) => {
if (event.key === 'Enter' && confirmed && !isDeleting) {
event.preventDefault();
Expand Down

0 comments on commit 7fd529c

Please sign in to comment.