Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Release 1.2.31 #272

Merged
merged 6 commits into from
Sep 11, 2024
Merged

Release 1.2.31 #272

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
33d986b
MAT-7405 make dialog actions optional
adongare Sep 10, 2024
aac7dcd
MAT-7405 dialog actions optional
adongare Sep 10, 2024
8e89ad5
MAT-7405 reemove console log
adongare Sep 10, 2024
3dd4f2b
MAT-7405 updated packagelock.json file
sb-prateekkeerthi Sep 10, 2024
a7cbde7
MAT-7405 optional dialog actions
adongare Sep 10, 2024
bc68462
Merge remote-tracking branch 'origin/MAT-7405' into MAT-7405
adongare Sep 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 23 additions & 8 deletions react/components/MadieDialog/MadieDialog.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,17 @@ export const Dialog = () => {

const [form, setForm] = useState(false);
const [required, setRequired] = useState(false);
const [showDialogActions, setShowDialogActions] = useState(false);

const cancelButtonProps = showDialogActions? {
cancelText: "Discard Changes",
"data-testid": "cancel-button",
}: undefined;
const continueButtonProps = showDialogActions? {
continueText: "Save",
"data-testid": "save-button",
}: undefined;

return (
<div className="qpp-u-padding--16" style={{ width: 300 }}>
<FormGroup>
Expand All @@ -57,6 +68,16 @@ export const Dialog = () => {
}
label="Required"
/>
<FormControlLabel
control={
<Switch
checked={showDialogActions}
onChange={(e) => setShowDialogActions(e.target.checked)}
name="actions"
/>
}
label="actions"
/>
</FormGroup>
<Button variant="cyan" onClick={() => setOpen(true)}>
open Dialog
Expand All @@ -70,14 +91,8 @@ export const Dialog = () => {
onClose,
onSubmit: onContinue,
}}
cancelButtonProps={{
cancelText: "Discard Changes",
"data-testid": "cancel-button",
}}
continueButtonProps={{
continueText: "Save",
"data-testid": "save-button",
}}
cancelButtonProps={cancelButtonProps}
continueButtonProps={continueButtonProps}
>
<div>
<Select
Expand Down
131 changes: 65 additions & 66 deletions react/components/MadieDialog/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,52 @@ const DraggablePaper = (props) => {
);
};

const Actions = ({onClose, cancelButtonProps, continueButtonProps}) => {
const {cancelText, cancelIcon, ...otherCancelButtonProps} =
cancelButtonProps;
const {continueText, continueIcon, ...otherContinueButtonProps} =
continueButtonProps;
return (
<>
<Divider sx={{ borderColor: "#8c8c8c" }} />
<DialogActions
sx={{
padding: "16px",
"& >:not(:first-of-type)": {
marginLeft: "16px",
},
}}
>
{cancelButtonProps && (
<Button
variant="secondary"
onClick={onClose}
{...otherCancelButtonProps}
>
<span>
{cancelText}
{cancelIcon}
</span>
</Button>
)}
{continueButtonProps && (
<Button
className="qpp-c-button--cyan"
type="submit"
style={{marginTop: 0}}
{...otherContinueButtonProps}
>
<span>
{continueText}
{continueIcon}
</span>
</Button>
)}
</DialogActions>
</>
)
}

const MadieDialog = ({
/*
Lets make a reusable component
Expand Down Expand Up @@ -66,10 +112,6 @@ const MadieDialog = ({
showRequiredFieldMessage,
...otherDialogProps
} = dialogProps;
const { cancelText, cancelIcon, ...otherCancelButtonProps } =
cancelButtonProps;
const { continueText, continueIcon, ...otherContinueButonProps } =
continueButtonProps;

return (
<Dialog
Expand Down Expand Up @@ -192,37 +234,13 @@ const MadieDialog = ({

{children}
</DialogContent>
<Divider sx={{ borderColor: "#8c8c8c" }} />
<DialogActions
sx={{
padding: "16px",
"& >:not(:first-of-type)": {
marginLeft: "16px",
},
}}
>
<Button
variant="secondary"
onClick={onClose}
{...otherCancelButtonProps}
>
<span>
{cancelText}
{cancelIcon}
</span>
</Button>
<Button
className="qpp-c-button--cyan"
type="submit"
style={{ marginTop: 0 }}
{...otherContinueButonProps}
>
<span>
{continueText}
{continueIcon}
</span>
</Button>
</DialogActions>
{(cancelButtonProps || continueButtonProps) && (
<Actions
onClose={onClose}
continueButtonProps={continueButtonProps}
cancelButtonProps={cancelButtonProps}
/>
)}
</form>
) : (
<>
Expand Down Expand Up @@ -259,37 +277,13 @@ const MadieDialog = ({
<DialogContent sx={{ padding: "32px" }}>
{children}
</DialogContent>
<Divider sx={{ borderColor: "#8c8c8c" }} />
<DialogActions
sx={{
padding: "16px",
"& >:not(:first-of-type)": {
marginLeft: "16px",
},
}}
>
<Button
variant="secondary"
onClick={onClose}
{...otherCancelButtonProps}
>
<span>
{cancelText}
{cancelIcon}
</span>
</Button>
<Button
variant="cyan"
type="submit"
style={{ marginTop: 0 }}
{...otherContinueButonProps}
>
<span>
{continueText}
{continueIcon}
</span>
</Button>
</DialogActions>
{(cancelButtonProps || continueButtonProps) && (
<Actions
onClose={onClose}
continueButtonProps={continueButtonProps}
cancelButtonProps={cancelButtonProps}
/>
)}
</>
)}
</Dialog>
Expand All @@ -310,4 +304,9 @@ DraggablePaper.propTypes = {
children: PropTypes.object,
};

Actions.propTypes = {
onClose: PropTypes.any,
cancelButtonProps: PropTypes.object,
continueButtonProps: PropTypes.object,
}
export default MadieDialog;
Loading
Loading