@elice/material-assignment 1.220803.0

package/README.md

@@ -0,0 +1,3 @@
+# elice-material-assignment
+
+User view and editing components of Elice material assignment.

package/cjs/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './material-assignment-admin';
+export * from './material-assignment';

package/cjs/components/material-assignment/MaterialAssignment.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface MaterialAssignmentProps {
+    materialAssignmentId: number;
+    userId: number;
+    className?: string;
+    locale?: string;
+}
+declare const MaterialAssignment: React.FC<MaterialAssignmentProps>;
+export default MaterialAssignment;

package/cjs/components/material-assignment/MaterialAssignment.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var React = require('react');
+var reactIntl = require('react-intl');
+var designTokens = require('@elice/design-tokens');
+var classnames = require('classnames');
+var styled = require('styled-components');
+var locales = require('./locales.js');
+var MaterialAssignmentContent = require('./MaterialAssignmentContent.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledMaterialAssignmentWrapper = styled__default["default"].div.withConfig({
+  componentId: "sc-1kcyh7u-0"
+})(["display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;padding:3.625rem;background-color:", ";"], designTokens.base.color.navy9);
+
+const MaterialAssignment = ({
+  className,
+  materialAssignmentId,
+  userId,
+  locale = 'en'
+}) => {
+  const prefixCls = 'em-material-assignment';
+  return React__default["default"].createElement(StyledMaterialAssignmentWrapper, {
+    className: classnames__default["default"](prefixCls, className)
+  }, React__default["default"].createElement(reactIntl.IntlProvider, {
+    locale: locale,
+    defaultLocale: "en",
+    messages: locale in locales ? locales[locale] : locales.en
+  }, React__default["default"].createElement(MaterialAssignmentContent, {
+    materialAssignmentId: materialAssignmentId,
+    userId: userId
+  })));
+};
+
+module.exports = MaterialAssignment;

package/cjs/components/material-assignment/MaterialAssignmentContent.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface MaterialAssignmentContentProps {
+    materialAssignmentId: number;
+    userId: number;
+}
+declare const MaterialAssignmentContent: React.FC<MaterialAssignmentContentProps>;
+export default MaterialAssignmentContent;

package/cjs/components/material-assignment/MaterialAssignmentContent.js

@@ -0,0 +1,397 @@
+'use strict';
+
+var React = require('react');
+var reactIntl = require('react-intl');
+var apiClient = require('@elice/api-client');
+var blocks = require('@elice/blocks');
+var materialSharedUtils = require('@elice/material-shared-utils');
+var MaterialAssignmentContainer = require('../shared/MaterialAssignmentContainer.js');
+var MaterialAssignmentUploadModal = require('./MaterialAssignmentUploadModal.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const GRADE_LIST_COUNT = 20;
+
+const MaterialAssignmentContent = ({
+  materialAssignmentId,
+  userId
+}) => {
+  const intl = reactIntl.useIntl();
+  const [assignmentGetStatus, setAssignmentGetStatus] = React__default["default"].useState('idle');
+  const [assignmentGradeListGetStatus, setAssignmentGradeListGetStatus] = React__default["default"].useState('idle');
+  const [assignmentGradeResultGetStatus, setAssignmentGradeResultGetStatus] = React__default["default"].useState('idle');
+  const [assignmentSubmissionGetStatus, setAssignmentSubmissionGetStatus] = React__default["default"].useState('idle');
+  const [materialAssignment, setMaterialAssignment] = React__default["default"].useState();
+  const [materialAssignmentSubmission, setMaterialAssignmentSubmission] = React__default["default"].useState();
+  const [materialAssignmentGradeResult, setMaterialAssignmentGradeResult] = React__default["default"].useState();
+  const [materialAssignmentGradeList, setMaterialAssignmentGradeList] = React__default["default"].useState();
+  /** Is confirm modal visible? */
+
+  const [showAssignmentSubmitModal, setShowAssignmentSubmitModal] = React__default["default"].useState(false);
+  const isAssignmentSubmitted = Boolean(materialAssignment === null || materialAssignment === void 0 ? void 0 : materialAssignment.lastAssignmentSubmissionId);
+  const isAssignmentClosed = materialAssignment && Boolean(materialAssignment.closeDatetime < Date.now());
+  const isAssignmentResultVisible = Boolean(materialAssignment === null || materialAssignment === void 0 ? void 0 : materialAssignment.scoreFinalizedDatetime);
+  const isReady = materialSharedUtils.useMaterialConfigApiClientUpdate(apiClient.config.init);
+  /**
+   *
+   */
+
+  const doGetOrgMaterialAssignmentGet = React__default["default"].useCallback(() => {
+    setAssignmentGetStatus('pending');
+    return apiClient.getOrgMaterialAssignmentGet({
+      materialAssignmentId
+    }).then(({
+      materialAssignment
+    }) => {
+      setAssignmentGetStatus('resolved');
+      setMaterialAssignment(materialAssignment);
+    }).catch(error => {
+      setAssignmentGetStatus('rejected');
+      console.error(error);
+    });
+  }, [materialAssignmentId]); //
+  //
+  //
+
+  /**
+   * Get assignment info
+   */
+
+  React__default["default"].useEffect(() => {
+    if (!isReady) {
+      return;
+    }
+
+    void doGetOrgMaterialAssignmentGet();
+  }, [doGetOrgMaterialAssignmentGet, isReady]);
+  /**
+   * When Grade_result exist, a comment list is called.
+   */
+
+  React__default["default"].useEffect(() => {
+    if (!isReady) {
+      return;
+    }
+
+    if (!isAssignmentResultVisible) {
+      return;
+    }
+
+    setAssignmentGradeListGetStatus('pending');
+    apiClient.getOrgMaterialAssignmentGradeList({
+      offset: 0,
+      count: GRADE_LIST_COUNT,
+      materialAssignmentId,
+      filterConditions: {
+        userId
+      }
+    }).then(({
+      materialAssignmentGrades,
+      materialAssignmentGradeCount
+    }) => {
+      setAssignmentGradeListGetStatus('resolved');
+      setMaterialAssignmentGradeList(materialAssignmentGrades);
+    }).catch(error => {
+      console.error(error);
+      setAssignmentGradeListGetStatus('rejected');
+    });
+  }, [isAssignmentResultVisible, isReady, materialAssignmentId, userId]);
+  /**
+   * When Grade_result exist, a score is called.
+   */
+
+  React__default["default"].useEffect(() => {
+    if (!isReady) {
+      return;
+    }
+
+    if (!isAssignmentResultVisible) {
+      return;
+    }
+
+    setAssignmentGradeResultGetStatus('pending');
+    apiClient.getOrgMaterialAssignmentGradeResultGet({
+      materialAssignmentId,
+      userId
+    }).then(({
+      materialAssignmentGradeResult
+    }) => {
+      setAssignmentGradeResultGetStatus('resolved');
+      setMaterialAssignmentGradeResult(materialAssignmentGradeResult);
+    }).catch(error => {
+      console.error(error);
+      setAssignmentGradeResultGetStatus('rejected');
+    });
+  }, [isAssignmentResultVisible, isReady, materialAssignmentId, userId]);
+  /**
+   * Get information on the assignment submitted
+   */
+
+  React__default["default"].useEffect(() => {
+    var _a;
+
+    if (!isReady) {
+      return;
+    } // Get assignment response according to `lastAssignmentSubmissionId` of material.
+
+
+    if (!isAssignmentSubmitted) {
+      setMaterialAssignmentSubmission(undefined);
+      return;
+    }
+
+    setAssignmentSubmissionGetStatus('pending');
+    apiClient.getOrgMaterialAssignmentSubmissionGet({
+      materialAssignmentSubmissionId: (_a = materialAssignment === null || materialAssignment === void 0 ? void 0 : materialAssignment.lastAssignmentSubmissionId) !== null && _a !== void 0 ? _a : 0
+    }).then(({
+      materialAssignmentSubmission
+    }) => {
+      setAssignmentSubmissionGetStatus('resolved');
+      setMaterialAssignmentSubmission(materialAssignmentSubmission);
+    }).catch(error => {
+      console.error(error);
+      setAssignmentSubmissionGetStatus('rejected');
+      setMaterialAssignmentSubmission(undefined);
+    });
+  }, [isAssignmentSubmitted, isReady, materialAssignment]);
+
+  if (assignmentGetStatus === 'pending' || assignmentGradeListGetStatus === 'pending' || assignmentGradeResultGetStatus === 'pending' || assignmentSubmissionGetStatus === 'pending') {
+    return React__default["default"].createElement(blocks.Spinner, null);
+  }
+
+  if (!materialAssignment || assignmentGetStatus === 'rejected') {
+    return React__default["default"].createElement(blocks.Text, {
+      role: "white"
+    }, intl.formatMessage({
+      id: 'materialAssignment.error'
+    }));
+  }
+  /**
+   *
+   */
+
+
+  const renderAssignmentInfo = () => {
+    const assignmentFilename = decodeURIComponent((materialAssignmentSubmission === null || materialAssignmentSubmission === void 0 ? void 0 : materialAssignmentSubmission.assignmentFileUrl) && new URL(materialAssignmentSubmission.assignmentFileUrl).pathname.split('/').pop() || '');
+
+    const renderAssignmentStatus = () => {
+      if (!isAssignmentSubmitted && isAssignmentClosed) {
+        return React__default["default"].createElement(blocks.Text, {
+          bold: true,
+          role: "danger",
+          size: "small"
+        }, intl.formatMessage({
+          id: 'materialAssignment.status.deadlineExpired'
+        }));
+      }
+
+      if (isAssignmentResultVisible) {
+        return React__default["default"].createElement(blocks.Text, {
+          bold: true,
+          role: "lightpurple",
+          size: "small"
+        }, intl.formatMessage({
+          id: 'materialAssignment.status.graded'
+        }));
+      }
+
+      if (isAssignmentSubmitted) {
+        return React__default["default"].createElement(blocks.Text, {
+          bold: true,
+          role: "success",
+          size: "small"
+        }, intl.formatMessage({
+          id: 'materialAssignment.status.submitted'
+        }));
+      }
+
+      return React__default["default"].createElement(blocks.Text, {
+        bold: true,
+        role: "warning",
+        size: "small"
+      }, intl.formatMessage({
+        id: 'materialAssignment.status.noSubmitted'
+      }));
+    };
+
+    const renderAssignmentScore = () => {
+      var _a;
+
+      return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(blocks.Text, {
+        bold: true,
+        role: "white",
+        size: "small"
+      }, intl.formatMessage({
+        id: 'materialAssignment.table.column.score'
+      }, {
+        score: (_a = materialAssignmentGradeResult === null || materialAssignmentGradeResult === void 0 ? void 0 : materialAssignmentGradeResult.score) !== null && _a !== void 0 ? _a : '--'
+      })), React__default["default"].createElement(blocks.Hspace, {
+        width: 0.25
+      }));
+    };
+
+    const renderAssignmentAttachment = () => {
+      if (materialAssignmentSubmission === null || materialAssignmentSubmission === void 0 ? void 0 : materialAssignmentSubmission.assignmentFileUrl) {
+        return React__default["default"].createElement("a", {
+          href: materialAssignmentSubmission.assignmentFileUrl,
+          download: assignmentFilename,
+          target: "_blank",
+          rel: "noopener noreferrer"
+        }, React__default["default"].createElement(blocks.Text, {
+          hoverable: true,
+          underline: true,
+          role: "white",
+          size: "small"
+        }, assignmentFilename));
+      }
+
+      if (materialAssignmentSubmission === null || materialAssignmentSubmission === void 0 ? void 0 : materialAssignmentSubmission.assignmentUrl) {
+        return React__default["default"].createElement("a", {
+          href: materialAssignmentSubmission.assignmentUrl,
+          target: "_blank",
+          rel: "noopener noreferrer"
+        }, React__default["default"].createElement(blocks.Text, {
+          hoverable: true,
+          underline: true,
+          role: "white",
+          size: "small"
+        }, materialAssignmentSubmission.assignmentUrl));
+      }
+
+      return '--';
+    };
+
+    return React__default["default"].createElement(blocks.InfoTable, {
+      dark: true
+    }, React__default["default"].createElement("tbody", null, React__default["default"].createElement("tr", null, React__default["default"].createElement("td", {
+      style: {
+        width: '19%'
+      }
+    }, intl.formatMessage({
+      id: 'materialAssignment.table.column.status'
+    })), React__default["default"].createElement("td", null, renderAssignmentStatus())), React__default["default"].createElement("tr", null, React__default["default"].createElement("td", null, intl.formatMessage({
+      id: 'materialAssignment.table.column.deadlineDatetime'
+    })), React__default["default"].createElement("td", null, React__default["default"].createElement(reactIntl.FormattedDate, {
+      value: materialAssignment.closeDatetime,
+      dateStyle: "medium",
+      timeStyle: "short",
+      hour12: false
+    }))), React__default["default"].createElement("tr", null, React__default["default"].createElement("td", null, intl.formatMessage({
+      id: 'materialAssignment.table.column.lastSubmitDatetime'
+    })), React__default["default"].createElement("td", null, (materialAssignmentSubmission === null || materialAssignmentSubmission === void 0 ? void 0 : materialAssignmentSubmission.createdDatetime) ? React__default["default"].createElement(reactIntl.FormattedDate, {
+      value: materialAssignmentSubmission.createdDatetime,
+      dateStyle: "medium",
+      timeStyle: "short",
+      hour12: false
+    }) : '--')), React__default["default"].createElement("tr", null, React__default["default"].createElement("td", null, intl.formatMessage({
+      id: 'materialAssignment.table.column.uploadedFile'
+    })), React__default["default"].createElement("td", null, React__default["default"].createElement("div", null, renderAssignmentAttachment(), React__default["default"].createElement(blocks.Vspace, {
+      height: 0.75
+    }), React__default["default"].createElement(blocks.Button, {
+      size: "tiny",
+      role: "lightpurple",
+      disabled: [isAssignmentResultVisible, !materialAssignment.isResubmitEnabled && isAssignmentSubmitted, isAssignmentClosed].some(Boolean),
+      onClick: () => setShowAssignmentSubmitModal(true)
+    }, intl.formatMessage({
+      id: 'materialAssignment.button.upload'
+    }))))), React__default["default"].createElement("tr", null, React__default["default"].createElement("td", null, intl.formatMessage({
+      id: 'materialAssignment.table.column.assignmentScore'
+    })), React__default["default"].createElement("td", null, renderAssignmentScore(), React__default["default"].createElement(blocks.Text, {
+      role: "navy4",
+      size: "small"
+    }, intl.formatMessage({
+      id: 'materialAssignment.table.column.totalPoint'
+    }, {
+      point: materialAssignment.point
+    }))))));
+  };
+  /**
+   *
+   */
+
+
+  const renderAssignmentFeedback = () => {
+    var _a;
+
+    const tableColumns = [{
+      Header: intl.formatMessage({
+        id: 'materialAssignment.table.header.index'
+      }),
+      accessor: 'index',
+      width: 50
+    }, {
+      Header: intl.formatMessage({
+        id: 'materialAssignment.table.header.feedback'
+      }),
+      accessor: 'feedback'
+    }];
+    const tableData = (_a = materialAssignmentGradeList === null || materialAssignmentGradeList === void 0 ? void 0 : materialAssignmentGradeList.filter(grade => grade.comment.length).map((grade, index) => ({
+      index: index + 1,
+      feedback: React__default["default"].createElement(blocks.Text, {
+        preWrap: true,
+        size: "small",
+        role: "navy1"
+      }, grade.comment)
+    }))) !== null && _a !== void 0 ? _a : [];
+    return React__default["default"].createElement(blocks.TableNext, {
+      dark: true,
+      columns: tableColumns,
+      data: tableData,
+      emptyMessage: intl.formatMessage({
+        id: isAssignmentResultVisible ? 'materialAssignment.table.empty.noFeedback' : 'materialAssignment.table.empty.noAssignment'
+      })
+    });
+  };
+  /**
+   *
+   */
+
+
+  const renderAssignmentUploadModal = () => {
+    if (!showAssignmentSubmitModal) {
+      return null;
+    }
+
+    return React__default["default"].createElement(MaterialAssignmentUploadModal, {
+      materialAssignment: materialAssignment,
+      onClose: () => setShowAssignmentSubmitModal(false),
+      onSubmitCallback: doGetOrgMaterialAssignmentGet
+    });
+  };
+
+  return React__default["default"].createElement(MaterialAssignmentContainer, {
+    title: materialAssignment.title
+  }, React__default["default"].createElement(blocks.Text, {
+    bold: true,
+    block: true,
+    role: "white"
+  }, intl.formatMessage({
+    id: 'materialAssignment.label.general'
+  })), React__default["default"].createElement(blocks.Text, {
+    role: "navy3",
+    size: "tiny"
+  }, intl.formatMessage({
+    id: 'materialAssignment.description.general'
+  })), React__default["default"].createElement(blocks.Vspace, {
+    height: 0.75
+  }), renderAssignmentInfo(), React__default["default"].createElement(blocks.Vspace, {
+    height: 1.5
+  }), React__default["default"].createElement(blocks.Text, {
+    bold: true,
+    block: true,
+    role: "white"
+  }, intl.formatMessage({
+    id: 'materialAssignment.label.feedback'
+  })), React__default["default"].createElement(blocks.Text, {
+    role: "navy3",
+    size: "tiny"
+  }, intl.formatMessage({
+    id: 'materialAssignment.description.feedback'
+  })), React__default["default"].createElement(blocks.Vspace, {
+    height: 0.75
+  }), renderAssignmentFeedback(), renderAssignmentUploadModal());
+};
+
+module.exports = MaterialAssignmentContent;

package/cjs/components/material-assignment/MaterialAssignmentUploadModal.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { GetOrgMaterialAssignmentGetResponses } from '@elice/types';
+interface MaterialAssignmentUploadModalProps {
+    materialAssignment: GetOrgMaterialAssignmentGetResponses['materialAssignment'];
+    onClose: () => void;
+    onSubmitCallback?: () => void;
+}
+declare const MaterialAssignmentUploadModal: React.FC<MaterialAssignmentUploadModalProps>;
+export default MaterialAssignmentUploadModal;

package/cjs/components/material-assignment/MaterialAssignmentUploadModal.js

@@ -0,0 +1,201 @@
+'use strict';
+
+var React = require('react');
+var reactHookForm = require('react-hook-form');
+var reactIntl = require('react-intl');
+var apiClient = require('@elice/api-client');
+var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
+var utils = require('@elice/utils');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledAssignmentContentFiles = styled__default["default"](blocks.Files).withConfig({
+  componentId: "sc-9bizrf-0"
+})(["width:100%;.eb-files__choose-button{border-color:", ";background-color:", ";}"], designTokens.base.color.primary5, designTokens.base.color.primary5);
+
+const MaterialAssignmentUploadModal = ({
+  materialAssignment,
+  onClose,
+  onSubmitCallback
+}) => {
+  const intl = reactIntl.useIntl();
+  const abortCtrl = React__default["default"].useRef(new AbortController());
+  /** Select submission method */
+
+  const [assignmentMode, setAssignmentMode] = React__default["default"].useState('attachment');
+  /** Check "Once you submit it, you cannot submit it again." */
+
+  const [isAgreedSubmit, setAgreedSubmit] = React__default["default"].useState(false);
+  /** Check if the submission time is past */
+
+  const isAssignmentClosed = Boolean(materialAssignment.closeDatetime < Date.now());
+  /** Check if it is possible to resubmit */
+
+  const isAssignmentResubmitEnabled = Boolean(materialAssignment.isResubmitEnabled);
+  const {
+    control,
+    formState,
+    handleSubmit,
+    reset
+  } = reactHookForm.useForm({
+    mode: 'onChange'
+  });
+  /**
+   * Submit assignment.
+   */
+
+  const submitAssignment = handleSubmit(async data => {
+    var _a;
+
+    try {
+      await apiClient.postOrgMaterialAssignmentSubmissionAdd(Object.assign(Object.assign({}, data), {
+        materialAssignmentId: (_a = materialAssignment === null || materialAssignment === void 0 ? void 0 : materialAssignment.id) !== null && _a !== void 0 ? _a : 0
+      }), {
+        signal: abortCtrl.current.signal
+      });
+      onClose();
+      blocks.Notification.success(intl.formatMessage({
+        id: 'materialAssignment.notification.submit.success'
+      }));
+
+      if (typeof onSubmitCallback === 'function') {
+        onSubmitCallback();
+      }
+    } catch (error) {
+      if (error.name === 'AbortError') {
+        return blocks.Notification.error(intl.formatMessage({
+          id: 'materialAssignment.notification.submit.cancel'
+        }));
+      }
+
+      blocks.Notification.error(intl.formatMessage({
+        id: 'materialAssignment.notification.submit.failure'
+      }));
+    }
+  }); //
+  //
+  //
+
+  React__default["default"].useEffect(() => {
+    const _abortCtrl = abortCtrl.current;
+    return () => {
+      _abortCtrl.abort();
+    };
+  }, []);
+  return React__default["default"].createElement(blocks.Modal, {
+    title: intl.formatMessage({
+      id: 'materialAssignment.modal.title'
+    }),
+    footerButtons: [{
+      label: intl.formatMessage({
+        id: 'materialAssignment.modal.button.submit'
+      }),
+      loading: formState.isSubmitting,
+      disabled: [!isAssignmentResubmitEnabled && !isAgreedSubmit, formState.isSubmitting, !formState.isValid].some(Boolean),
+      onClick: submitAssignment
+    }, {
+      label: intl.formatMessage({
+        id: 'materialAssignment.modal.button.cancel'
+      }),
+      role: 'gray1',
+      onClick: onClose
+    }],
+    onHide: onClose
+  }, React__default["default"].createElement(blocks.Alert, {
+    role: isAssignmentResubmitEnabled ? 'primary' : 'warning'
+  }, intl.formatMessage({
+    id: isAssignmentResubmitEnabled ? 'materialAssignment.alert.oftenSubmit' : 'materialAssignment.alert.onceSubmit'
+  })), React__default["default"].createElement(blocks.Vspace, {
+    height: 1.5
+  }), React__default["default"].createElement(blocks.Radio, {
+    purpleWhite: true,
+    borderRound: true,
+    value: assignmentMode,
+    onChange: value => {
+      reset();
+      setAgreedSubmit(false);
+      setAssignmentMode(value);
+    }
+  }, React__default["default"].createElement(blocks.RadioButton, {
+    value: "attachment"
+  }, intl.formatMessage({
+    id: 'materialAssignment.radio.option.attachment'
+  })), React__default["default"].createElement(blocks.RadioButton, {
+    value: "url"
+  }, intl.formatMessage({
+    id: 'materialAssignment.radio.option.url'
+  }))), React__default["default"].createElement(blocks.Vspace, {
+    height: 1
+  }), assignmentMode === 'attachment' ? React__default["default"].createElement(reactHookForm.Controller, {
+    control: control,
+    name: "assignmentFile",
+    rules: {
+      required: true
+    },
+    render: ({
+      field
+    }) => React__default["default"].createElement(StyledAssignmentContentFiles, Object.assign({}, field, {
+      files: field.value ? [field.value] : undefined,
+      accept: "*",
+      maxCount: 1,
+      maxSize: 300,
+      disabled: isAssignmentClosed,
+      dropMessage: intl.formatMessage({
+        id: 'materialAssignment.attachment.dropMessage'
+      }),
+      buttonMessage: intl.formatMessage({
+        id: 'materialAssignment.attachment.button'
+      }),
+      maxSizeMessage: intl.formatMessage({
+        id: 'materialAssignment.attachment.maxSizeMessage'
+      }),
+      onChange: newFiles => {
+        if (Array.isArray(newFiles) && newFiles[0] instanceof File) {
+          field.onChange(newFiles[0]);
+        } else {
+          field.onChange(undefined);
+        }
+      }
+    }))
+  }) : React__default["default"].createElement(reactHookForm.Controller, {
+    control: control,
+    name: "assignmentUrl",
+    rules: {
+      required: true,
+      validate: url => utils.validateUrl(url !== null && url !== void 0 ? url : '') ? true : intl.formatMessage({
+        id: 'materialAssignment.input.invalid'
+      })
+    },
+    render: ({
+      field,
+      fieldState
+    }) => {
+      var _a;
+
+      return React__default["default"].createElement(blocks.Input, Object.assign({}, field, {
+        width: "full",
+        size: "small",
+        placeholder: "http(s)://",
+        invalid: fieldState.invalid,
+        invalidText: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message
+      }));
+    }
+  }), isAssignmentResubmitEnabled ? null : React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(blocks.Vspace, {
+    height: 1
+  }), React__default["default"].createElement(blocks.Checkbox, {
+    size: "small",
+    value: isAgreedSubmit,
+    onChange: setAgreedSubmit
+  }, React__default["default"].createElement(blocks.Text, {
+    size: "small"
+  }, intl.formatMessage({
+    id: 'materialAssignment.attachment.checkbox.onceSubmit'
+  })))));
+};
+
+module.exports = MaterialAssignmentUploadModal;

package/cjs/components/material-assignment/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MaterialAssignment } from './MaterialAssignment';
+export type { MaterialAssignmentProps } from './MaterialAssignment';