Merge pull request #128 from oarepo/mirekys-forms-components

feat(forms): refactor button components from nr-docs

oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/ConfirmationModal/ConfirmationModal.jsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { Modal, Icon, Message } from "semantic-ui-react";
+import PropTypes from "prop-types";
+
+export function ConfirmationModal({
+  header,
+  content,
+  trigger,
+  actions,
+  isOpen,
+  close,
+}) {
+  return (
+    <>
+      {trigger}
+      <Modal
+        open={isOpen}
+        onClose={close}
+        size="small"
+        closeIcon
+        closeOnDimmerClick={false}
+      >
+        <Modal.Header>{header}</Modal.Header>
+        {content && (
+          <Modal.Content>
+            <Message visible warning>
+              <p>
+                <Icon name="warning sign" /> {content}
+              </p>
+            </Message>
+          </Modal.Content>
+        )}
+        <Modal.Actions>{actions}</Modal.Actions>
+      </Modal>
+    </>
+  );
+}
+
+ConfirmationModal.propTypes = {
+  header: PropTypes.string,
+  content: PropTypes.string,
+  trigger: PropTypes.element,
+  actions: PropTypes.node,
+  isOpen: PropTypes.bool,
+  close: PropTypes.func,
+};
+
+export default ConfirmationModal;

oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/ConfirmationModal/index.js

@@ -0,0 +1,2 @@
+export * from './ConfirmationModal';
+export { default } from './ConfirmationModal';

oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/DeleteButton/DeleteButton.jsx

@@ -0,0 +1,87 @@
+import React from "react";
+import { Button } from "semantic-ui-react";
+import { i18next } from "@translations/i18next";
+import {
+  useConfirmationModal,
+  useFormConfig,
+  useDepositApiClient,
+  ConfirmationModal,
+} from "@js/oarepo_ui";
+import PropTypes from "prop-types";
+
+export const DeleteButton = React.memo(
+  ({ modalMessage, modalHeader, redirectUrl }) => {
+    const {
+      isOpen: isModalOpen,
+      close: closeModal,
+      open: openModal,
+    } = useConfirmationModal();
+    const {
+      formConfig: { permissions },
+    } = useFormConfig();
+    const { values, isSubmitting, _delete, isDeleting } = useDepositApiClient();
+
+    return (
+      <>
+        {values.id && permissions?.can_delete_draft && (
+          <ConfirmationModal
+            header={modalHeader}
+            content={modalMessage}
+            isOpen={isModalOpen}
+            close={closeModal}
+            trigger={
+              <Button
+                name="delete"
+                color="red"
+                onClick={openModal}
+                icon="delete"
+                labelPosition="left"
+                content={i18next.t("Delete")}
+                type="button"
+                disabled={isSubmitting}
+                loading={isDeleting}
+                fluid
+              />
+            }
+            actions={
+              <>
+                <Button onClick={closeModal} floated="left">
+                  {i18next.t("Cancel")}
+                </Button>
+                <Button
+                  name="delete"
+                  disabled={isSubmitting}
+                  loading={isDeleting}
+                  color="red"
+                  onClick={() => {
+                    _delete(redirectUrl);
+                    closeModal();
+                  }}
+                  icon="delete"
+                  labelPosition="left"
+                  content={i18next.t("Delete")}
+                  type="button"
+                />
+              </>
+            }
+          />
+        )}
+      </>
+    );
+  }
+);
+
+DeleteButton.propTypes = {
+  modalMessage: PropTypes.string,
+  modalHeader: PropTypes.string,
+  redirectUrl: PropTypes.string,
+};
+
+DeleteButton.defaultProps = {
+  modalHeader: i18next.t("Are you sure you wish delete this draft?"),
+  modalMessage: i18next.t(
+    "If you delete the draft, the work you have done on it will be lost."
+  ),
+};
+
+export default DeleteButton;

oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/DeleteButton/index.js

@@ -0,0 +1,2 @@
+export * from './DeleteButton';
+export { default } from './DeleteButton';

oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/FormikStateLogger/FormikStateLogger.jsx

@@ -1,12 +1,30 @@
-import { useFormikContext } from "formik";
 import React from "react";
+import { useFormikContext } from "formik";
+import { Message } from "semantic-ui-react";
+import PropTypes from "prop-types";
 
 // component to visualize formik state on screen during development
-
-export const FormikStateLogger = () => {
+export const FormikStateLogger = ({ render = false }) => {
   const state = useFormikContext();
+  if (process.env.NODE_ENV !== "development") {
+    return;
+  }
+
+  if (render) {
+    return (
+      <Message>
+        <Message.Header>Current record state</Message.Header>
+        <pre>{JSON.stringify(state.values, null, 2)}</pre>
+      </Message>
+    );
+  }
 
   console.debug("[form state]: ", state, "\n[form values]:", state.values);
+  return <></>;
+};
 
-  return <></>
+FormikStateLogger.propTypes = {
+  render: PropTypes.bool,
 };
+
+export default FormikStateLogger;

oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/PreviewButton/PreviewButton.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Button } from "semantic-ui-react";
+import { i18next } from "@translations/oarepo_ui/i18next";
+import { useFormikContext } from "formik";
+
+export const PreviewButton = React.memo(({ ...uiProps }) => {
+  const { handleSubmit, isSubmitting } = useFormikContext();
+  return (
+    <Button
+      name="preview"
+      disabled
+      loading={isSubmitting}
+      color="grey"
+      onClick={handleSubmit}
+      icon="eye"
+      labelPosition="left"
+      content={i18next.t("Preview")}
+      type="button"
+      {...uiProps}
+    />
+  );
+});
+
+export default PreviewButton;

oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/PreviewButton/index.js

@@ -0,0 +1,2 @@
+export * from "./PreviewButton";
+export { default } from './PreviewButton';

oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/PublishButton/PublishButton.jsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { Button } from "semantic-ui-react";
+import { i18next } from "@translations/oarepo_ui/i18next";
+import {
+  useConfirmationModal,
+  useDepositApiClient,
+  ConfirmationModal,
+} from "@js/oarepo_ui";
+import PropTypes from "prop-types";
+
+export const PublishButton = React.memo(({ modalMessage, modalHeader }) => {
+  const {
+    isOpen: isModalOpen,
+    close: closeModal,
+    open: openModal,
+  } = useConfirmationModal();
+  const { isSubmitting, publish } = useDepositApiClient();
+
+  return (
+    <ConfirmationModal
+      header={modalHeader}
+      content={modalMessage}
+      isOpen={isModalOpen}
+      close={closeModal}
+      trigger={
+        <Button
+          name="publish"
+          color="green"
+          onClick={openModal}
+          icon="upload"
+          labelPosition="left"
+          content={i18next.t("Publish")}
+          type="button"
+          disabled={isSubmitting}
+          loading={isSubmitting}
+          fluid
+        />
+      }
+      actions={
+        <>
+          <Button onClick={closeModal} floated="left">
+            {i18next.t("Cancel")}
+          </Button>
+          <Button
+            name="publish"
+            disabled={isSubmitting}
+            loading={isSubmitting}
+            color="green"
+            onClick={() => {
+              publish();
+              closeModal();
+            }}
+            icon="upload"
+            labelPosition="left"
+            content={i18next.t("Publish")}
+            type="submit"
+          />
+        </>
+      }
+    />
+  );
+});
+
+PublishButton.propTypes = {
+  modalMessage: PropTypes.string,
+  modalHeader: PropTypes.string,
+};
+
+PublishButton.defaultProps = {
+  modalHeader: i18next.t("Are you sure you wish to publish this draft?"),
+};
+
+export default PublishButton;

oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/PublishButton/index.js

@@ -0,0 +1,2 @@
+export * from './PublishButton';
+export { default } from './PublishButton';

oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/SaveButton/SaveButton.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Button } from "semantic-ui-react";
+import { i18next } from "@translations/oarepo_ui/i18next";
+import { useDepositApiClient } from "@js/oarepo_ui";
+
+export const SaveButton = React.memo(({ ...uiProps }) => {
+  const { isSubmitting, save } = useDepositApiClient();
+  return (
+    <Button
+      name="save"
+      disabled={isSubmitting}
+      loading={isSubmitting}
+      color="grey"
+      onClick={() => save()}
+      icon="save"
+      labelPosition="left"
+      content={i18next.t("Save")}
+      type="submit"
+      {...uiProps}
+    />
+  );
+});
+
+export default SaveButton;

oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/SaveButton/index.js

@@ -0,0 +1,2 @@
+export * from './SaveButton';
+export { default } from './SaveButton';

oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/ValidateButton/ValidateButton.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { useFormikContext } from "formik";
+import { Button } from "semantic-ui-react";
+import { i18next } from "@translations/oarepo_ui/i18next";
+
+export const ValidateButton = React.memo(() => {
+  const { isSubmitting, validateForm } = useFormikContext();
+  return (
+    <Button
+      fluid
+      disabled={isSubmitting}
+      loading={isSubmitting}
+      color="green"
+      onClick={() => validateForm()}
+      icon="check"
+      labelPosition="left"
+      content={i18next.t("Validate form")}
+      type="button"
+    />
+  );
+});
+
+export default ValidateButton;

oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/ValidateButton/index.js

@@ -0,0 +1,2 @@
+export * from './ValidateButton';
+export { default } from './ValidateButton';

oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/index.js

@@ -9,3 +9,9 @@ export * from "./BaseForm";
 export * from "./FormFeedback";
 export * from "./ArrayFieldItem";
 export * from "./EDTFDatePickerField";
+export * from "./DeleteButton";
+export * from "./PreviewButton";
+export * from "./PublishButton";
+export * from "./SaveButton";
+export * from "./ValidateButton";
+export * from "./ConfirmationModal";