create NoteForm component (#498)

CHANGELOG.md

@@ -6,6 +6,7 @@
 * Accept `props.onCloseNewRecord` so clients can do what they choose. Refs UIREQ-244.
 * Pass `clientGeneratePk` prop into manifest option, supporting server-side modules that supply IDs of new records.
 * `<ControlledVocab>` accepts optional `limitParam` prop, for when that parameter is not called `limit`.
+* Create `NoteForm` component
 
 ## [2.5.0](https://github.com/folio-org/stripes-smart-components/tree/v2.5.0) (2019-04-25)
 [Full Changelog](https://github.com/folio-org/stripes-smart-components/compare/v2.4.0...v2.5.0)

index.js

@@ -53,3 +53,4 @@ export { default as UserName } from './lib/UserName';
 export { default as ViewMetaData } from './lib/ViewMetaData';
 
 export { default as DueDatePicker } from './lib/ChangeDueDateDialog/DueDatePicker';
+export { default as NoteForm } from './lib/Notes/NoteForm';

lib/Notes/AssignmentsList/AssignmentsList.css

@@ -0,0 +1,11 @@
+@import "@folio/stripes-components/lib/variables.css";
+
+.referred-record__entity-type {
+  font-size: 1.1em;
+  font-weight: bold;
+  color: var(--color-text);
+}
+
+.assignments-list__item {
+  color: var(--primary);
+}

lib/Notes/AssignmentsList/AssignmentsList.js

@@ -0,0 +1,84 @@
+import React, { Component, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+
+import {
+  KeyValue,
+  List,
+} from '@folio/stripes-components';
+
+import styles from './AssignmentsList.css';
+
+import {
+  referredEntityDataShape,
+  linkedEntitiesTypesShape,
+} from '../NoteForm/noteShapes';
+
+export default class AssignmentsList extends Component {
+  static propTypes = {
+    entityTypePluralizedTranslationKeyMap: PropTypes.objectOf(PropTypes.string),
+    entityTypeTranslationKeyMap: PropTypes.objectOf(PropTypes.string),
+    linkedEntitiesTypes: linkedEntitiesTypesShape,
+    referredEntityData: referredEntityDataShape.isRequired,
+  };
+
+  static defaultProps = {
+    linkedEntitiesTypes: [],
+  };
+
+  renderReferredRecord = () => {
+    const {
+      referredEntityData: {
+        name,
+        type,
+      },
+      entityTypeTranslationKeyMap,
+    } = this.props;
+
+    const entityType = (
+      <span className={styles['referred-record__entity-type']}>
+        <FormattedMessage id={entityTypeTranslationKeyMap[type]} />
+      </span>
+    );
+
+    return (
+      <KeyValue label={entityType}>
+        {name}
+      </KeyValue>
+    );
+  }
+
+  renderEntityTypesAssignmentsList = () => {
+    return (
+      <List
+        items={this.getListItems()}
+        listStyle="bullets"
+      />
+    );
+  }
+
+  getListItems() {
+    const {
+      linkedEntitiesTypes,
+      entityTypePluralizedTranslationKeyMap,
+    } = this.props;
+
+    return linkedEntitiesTypes.map(({ count, type }) => (
+      <span className={styles['assignments-list__item']}>
+        <FormattedMessage
+          id={entityTypePluralizedTranslationKeyMap[type]}
+          values={{ count }}
+        />
+      </span>
+    ));
+  }
+
+  render() {
+    return (
+      <Fragment>
+        {this.renderReferredRecord()}
+        {this.renderEntityTypesAssignmentsList()}
+      </Fragment>
+    );
+  }
+}

lib/Notes/AssignmentsList/index.js

@@ -0,0 +1 @@
+export { default } from './AssignmentsList';

lib/Notes/NavigationModal/index.js

@@ -0,0 +1 @@
+export { default } from './navigation-modal';

lib/Notes/NavigationModal/navigation-modal.js

@@ -0,0 +1,123 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import ReactRouterPropTypes from 'react-router-prop-types';
+import { withRouter } from 'react-router';
+
+import {
+  Modal,
+  ModalFooter,
+  Button,
+} from '@folio/stripes-components';
+
+const historyActions = {
+  PUSH: 'PUSH',
+  REPLACE: 'REPLACE',
+};
+
+const INITIAL_MODAL_STATE = {
+  nextLocation: null,
+  openModal: false,
+};
+
+class NavigationModal extends Component {
+  static propTypes = {
+    history: ReactRouterPropTypes.history.isRequired,
+    historyAction: PropTypes.string,
+    when: PropTypes.bool.isRequired
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = INITIAL_MODAL_STATE;
+  }
+
+  componentDidMount() {
+    this.unblock = this.props.history.block((nextLocation) => {
+      if (this.props.when) {
+        this.setState({
+          openModal: true,
+          nextLocation
+        });
+      }
+      return !this.props.when;
+    });
+  }
+
+  componentWillUnmount() {
+    this.unblock();
+  }
+
+  submit = (event) => {
+    event.preventDefault();
+    this.onCancel();
+  };
+
+  onCancel = () => {
+    this.setState(INITIAL_MODAL_STATE);
+  };
+
+  onConfirm = () => {
+    this.navigateToNextLocation();
+  };
+
+  navigateToNextLocation() {
+    const {
+      historyAction,
+      history: {
+        action,
+        replace,
+        push,
+      },
+    } = this.props;
+
+    const { nextLocation } = this.state;
+
+    this.unblock();
+
+    const replaceActionRequired =
+      (historyAction && historyAction === historyActions.REPLACE)
+      || action === historyActions.REPLACE;
+
+    if (replaceActionRequired) {
+      replace(nextLocation);
+    } else {
+      push(nextLocation);
+    }
+  }
+
+  render() {
+    return (
+      <Modal
+        id="navigation-modal"
+        size="small"
+        open={this.state.openModal}
+        label={<FormattedMessage id="ui-eholdings.navModal.modalLabel" />}
+        wrappingElement="form"
+        onClose={this.onCancel}
+        onSubmit={this.submit}
+        footer={(
+          <ModalFooter>
+            <Button
+              data-test-navigation-modal-dismiss
+              buttonStyle="primary"
+              type="submit"
+            >
+              <FormattedMessage id="ui-eholdings.navModal.dismissLabel" />
+            </Button>
+            <Button
+              data-test-navigation-modal-continue
+              onClick={this.onConfirm}
+            >
+              <FormattedMessage id="ui-eholdings.navModal.continueLabel" />
+            </Button>
+          </ModalFooter>
+        )}
+      >
+        <FormattedMessage id="ui-eholdings.navModal.unsavedChangesMsg" />
+      </Modal>
+    );
+  }
+}
+
+export default withRouter(NavigationModal);

lib/Notes/NoteForm/NoteForm.css

@@ -0,0 +1,4 @@
+.note-form-content {
+  margin: 0 auto;
+  max-width: 50rem;
+}