2020-10-16 13:16:01 +00:00
|
|
|
import React from "react";
|
2021-02-08 08:04:27 +00:00
|
|
|
|
2020-08-06 07:00:41 +00:00
|
|
|
import PropTypes from "prop-types";
|
2020-08-14 06:05:07 +00:00
|
|
|
import Button from "../button";
|
|
|
|
import Text from "../text";
|
2021-02-08 08:04:27 +00:00
|
|
|
import StyledSaveCancelButtons from "./styled-save-cancel-buttons";
|
2020-07-31 08:35:14 +00:00
|
|
|
|
2020-08-14 06:35:07 +00:00
|
|
|
const ButtonKeys = Object.freeze({
|
2020-10-16 13:16:01 +00:00
|
|
|
enter: 13,
|
|
|
|
esc: 27,
|
2020-08-14 06:35:07 +00:00
|
|
|
});
|
|
|
|
|
2020-08-14 06:05:07 +00:00
|
|
|
class SaveCancelButtons extends React.Component {
|
2020-10-16 13:16:01 +00:00
|
|
|
componentDidMount() {
|
|
|
|
document.addEventListener("keydown", this.onKeydown, false);
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
|
document.removeEventListener("keydown", this.onKeydown, false);
|
|
|
|
}
|
|
|
|
|
|
|
|
onKeydown = (e) => {
|
|
|
|
const { onSaveClick, onCancelClick } = this.props;
|
|
|
|
|
|
|
|
switch (e.keyCode) {
|
|
|
|
case ButtonKeys.enter:
|
|
|
|
onSaveClick();
|
|
|
|
break;
|
|
|
|
case ButtonKeys.esc:
|
|
|
|
onCancelClick();
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
break;
|
2020-07-31 08:35:14 +00:00
|
|
|
}
|
2020-10-16 13:16:01 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
render() {
|
|
|
|
const {
|
|
|
|
onSaveClick,
|
|
|
|
onCancelClick,
|
2022-02-09 18:12:06 +00:00
|
|
|
displaySettings,
|
2020-10-16 13:16:01 +00:00
|
|
|
showReminder,
|
|
|
|
reminderTest,
|
|
|
|
saveButtonLabel,
|
|
|
|
cancelButtonLabel,
|
2022-03-22 10:27:30 +00:00
|
|
|
hasScroll,
|
2022-04-03 15:32:33 +00:00
|
|
|
isFirstWelcomePageSettings,
|
2020-10-16 13:16:01 +00:00
|
|
|
className,
|
|
|
|
id,
|
2022-04-13 12:03:59 +00:00
|
|
|
isSaving,
|
2020-10-16 13:16:01 +00:00
|
|
|
} = this.props;
|
2022-02-14 10:13:55 +00:00
|
|
|
|
2022-04-03 15:32:33 +00:00
|
|
|
const cancelButtonDisabled =
|
|
|
|
isFirstWelcomePageSettings === "true" ? false : !showReminder;
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
return (
|
2022-02-09 18:12:06 +00:00
|
|
|
<StyledSaveCancelButtons
|
|
|
|
className={className}
|
|
|
|
id={id}
|
|
|
|
displaySettings={displaySettings}
|
2022-02-13 16:33:20 +00:00
|
|
|
showReminder={showReminder}
|
2022-03-22 10:27:30 +00:00
|
|
|
hasScroll={hasScroll}
|
2022-02-09 18:12:06 +00:00
|
|
|
>
|
2022-02-10 14:07:50 +00:00
|
|
|
<div className="buttons-flex">
|
2020-10-16 13:16:01 +00:00
|
|
|
<Button
|
|
|
|
className="save-button"
|
2022-03-11 10:41:20 +00:00
|
|
|
size="normal"
|
2022-03-24 17:46:53 +00:00
|
|
|
isDisabled={!showReminder}
|
2020-10-16 13:16:01 +00:00
|
|
|
primary
|
|
|
|
onClick={onSaveClick}
|
|
|
|
label={saveButtonLabel}
|
2022-03-24 17:46:53 +00:00
|
|
|
minwidth={displaySettings && "auto"}
|
2022-04-13 12:03:59 +00:00
|
|
|
isLoading={isSaving}
|
2020-10-16 13:16:01 +00:00
|
|
|
/>
|
|
|
|
<Button
|
2021-04-13 19:51:43 +00:00
|
|
|
className="cancel-button"
|
2022-03-11 10:41:20 +00:00
|
|
|
size="normal"
|
2022-04-13 12:03:59 +00:00
|
|
|
isDisabled={cancelButtonDisabled || isSaving}
|
2020-10-16 13:16:01 +00:00
|
|
|
onClick={onCancelClick}
|
|
|
|
label={cancelButtonLabel}
|
2022-03-24 17:46:53 +00:00
|
|
|
minwidth={displaySettings && "auto"}
|
2020-10-16 13:16:01 +00:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
{showReminder && (
|
|
|
|
<Text className="unsaved-changes"> {reminderTest} </Text>
|
|
|
|
)}
|
|
|
|
</StyledSaveCancelButtons>
|
|
|
|
);
|
|
|
|
}
|
2020-07-31 08:35:14 +00:00
|
|
|
}
|
|
|
|
|
2020-08-06 07:00:41 +00:00
|
|
|
SaveCancelButtons.propTypes = {
|
2021-03-10 11:31:39 +00:00
|
|
|
/** Accepts css id */
|
2020-10-16 13:16:01 +00:00
|
|
|
id: PropTypes.string,
|
2021-03-10 11:31:39 +00:00
|
|
|
/** Accepts css class */
|
2020-10-16 13:16:01 +00:00
|
|
|
className: PropTypes.string,
|
2021-03-10 11:31:39 +00:00
|
|
|
/** Text reminding of unsaved changes */
|
2020-10-16 13:16:01 +00:00
|
|
|
reminderTest: PropTypes.string,
|
2021-03-10 11:31:39 +00:00
|
|
|
/** Save button label */
|
2020-10-16 13:16:01 +00:00
|
|
|
saveButtonLabel: PropTypes.string,
|
2021-03-10 11:31:39 +00:00
|
|
|
/** Cancel button label */
|
2020-10-16 13:16:01 +00:00
|
|
|
cancelButtonLabel: PropTypes.string,
|
2021-03-10 11:31:39 +00:00
|
|
|
/** What the save button will trigger when clicked */
|
2020-10-16 13:16:01 +00:00
|
|
|
onSaveClick: PropTypes.func,
|
2021-03-10 11:31:39 +00:00
|
|
|
/** What the cancel button will trigger when clicked */
|
2020-10-16 13:16:01 +00:00
|
|
|
onCancelClick: PropTypes.func,
|
2021-03-10 11:31:39 +00:00
|
|
|
/** Show message about unsaved changes (Only shown on desktops) */
|
2020-10-16 13:16:01 +00:00
|
|
|
showReminder: PropTypes.bool,
|
2022-03-24 17:56:51 +00:00
|
|
|
/** Tells when the button should present a disabled state */
|
2022-02-09 18:12:06 +00:00
|
|
|
displaySettings: PropTypes.bool,
|
2022-03-22 10:27:30 +00:00
|
|
|
hasScroll: PropTypes.bool,
|
2022-03-24 17:46:53 +00:00
|
|
|
minwidth: PropTypes.string,
|
2022-04-03 15:32:33 +00:00
|
|
|
isFirstWelcomePageSettings: PropTypes.string,
|
2022-04-13 12:03:59 +00:00
|
|
|
isSaving: PropTypes.bool,
|
2020-08-06 07:00:41 +00:00
|
|
|
};
|
|
|
|
|
2020-08-06 07:50:04 +00:00
|
|
|
SaveCancelButtons.defaultProps = {
|
2020-10-16 13:16:01 +00:00
|
|
|
saveButtonLabel: "Save",
|
|
|
|
cancelButtonLabel: "Cancel",
|
|
|
|
};
|
2020-08-06 07:50:04 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
export default SaveCancelButtons;
|