@performant-software/semantic-components 1.0.1 → 1.0.2-beta.1

package/src/components/CreatorField.js

@@ -0,0 +1,137 @@
+// @flow
+
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { Dropdown, Form } from 'semantic-ui-react';
+import _ from 'underscore';
+import i18n from '../i18n/i18n';
+import './CreatorField.css';
+
+const NameTypes = {
+  single: 0,
+  full: 1
+};
+
+type Props = {
+  allowDelete?: boolean,
+  creatorTypes: Array<any>,
+  creator: any,
+  onAdd: () => void,
+  onDelete: () => void,
+  onUpdate: (props: any) => void
+};
+
+const CreatorField = (props: Props) => {
+  /**
+   * Updates the passed attribute for the current creator.
+   *
+   * @type {function(string, ?Event, *): *}
+   */
+  const onUpdate = useCallback((attribute: string, e: ?Event, { value }: any) => (
+    props.onUpdate({ ...props.creator || {}, [attribute]: value })
+  ), [props.creator, props.onUpdate]);
+
+  /**
+   * Updates the passed attributes for the current creator.
+   *
+   * @type {function(*): *}
+   */
+  const onUpdateAttributes = useCallback((attributes) => (
+    props.onUpdate({ ...props.creator || {}, ...attributes })
+  ), [props.creator, props.onUpdate]);
+
+  /**
+   * Sets the label attribute as a dropdown of the passed creatorTypes prop.
+   *
+   * @type {unknown}
+   */
+  const label = useMemo(() => (
+    // eslint-disable-next-line jsx-a11y/label-has-associated-control
+    <label>
+      <Dropdown
+        onChange={onUpdate.bind(this, 'creatorType')}
+        options={_.map(props.creatorTypes, (ct) => ({
+          key: ct.value,
+          value: ct.value,
+          text: ct.label
+        }))}
+        value={props.creator.creatorType}
+      />
+    </label>
+  ), [props.creator.creatorType, props.creatorTypes]);
+
+  /**
+   * Default the nameType property to full (first name/last name).
+   */
+  useEffect(() => {
+    if (!_.has(props.creator, 'nameType')) {
+      onUpdateAttributes({ nameType: NameTypes.full });
+    }
+  }, [props.creator, onUpdateAttributes]);
+
+  /**
+   * Convert between firstName/lastName and name attributes depending on the name type.
+   */
+  useEffect(() => {
+    if (props.creator.name && props.creator.nameType === NameTypes.full) {
+      const [firstName, lastName] = props.creator.name.split(' ');
+      onUpdateAttributes({ name: null, firstName, lastName });
+    } else if ((props.creator.firstName || props.creator.lastName) && props.creator.nameType === NameTypes.single) {
+      const name = _.compact([props.creator.firstName, props.creator.lastName]).join(' ');
+      onUpdateAttributes({ firstName: null, lastName: null, name });
+    }
+  }, [props.creator.nameType]);
+
+  return (
+    <Form.Group
+      className='creator-field'
+    >
+      { props.creator.nameType === NameTypes.full && (
+        <>
+          <Form.Input
+            className='flex'
+            label={label}
+            onChange={onUpdate.bind(this, 'firstName')}
+            placeholder={i18n.t('CreatorField.labels.firstName')}
+            value={props.creator.firstName}
+          />
+          <Form.Input
+            className='flex'
+            onChange={onUpdate.bind(this, 'lastName')}
+            placeholder={i18n.t('CreatorField.labels.lastName')}
+            value={props.creator.lastName}
+          />
+          <Form.Button
+            icon='exchange'
+            onClick={() => onUpdateAttributes({ nameType: NameTypes.single })}
+          />
+        </>
+      )}
+      { props.creator.nameType === NameTypes.single && (
+        <>
+          <Form.Input
+            className='flex'
+            label={label}
+            onChange={onUpdate.bind(this, 'name')}
+            placeholder={i18n.t('CreatorField.labels.name')}
+            value={props.creator.name}
+          />
+          <Form.Button
+            icon='exchange'
+            onClick={() => onUpdateAttributes({ nameType: NameTypes.full })}
+          />
+        </>
+      )}
+      <Form.Button
+        icon='plus'
+        onClick={props.onAdd}
+      />
+      <Form.Button
+        disabled={!props.allowDelete}
+        icon='minus'
+        onClick={props.onDelete}
+      />
+    </Form.Group>
+  );
+};
+
+export default CreatorField;

package/src/components/Creators.js

@@ -0,0 +1,97 @@
+// @flow
+
+import React, { useCallback, useEffect, useMemo } from 'react';
+import _ from 'underscore';
+import CreatorField from './CreatorField';
+
+type Props = {
+  creatorTypes: Array<any>,
+  onChange: (creators: Array<any>) => void,
+  value: Array<any>
+};
+
+const Creators = (props: Props) => {
+  /**
+   * Sets the default creator type.
+   *
+   * @type {unknown}
+   */
+  const defaultCreatorType = useMemo(() => (
+    props.creatorTypes && props.creatorTypes.length && props.creatorTypes[0].value
+  ), [props.creatorTypes]);
+
+  /**
+   * Adds a new creator record with the default type.
+   *
+   * @type {function(): *}
+   */
+  const onAddCreator = useCallback(() => props.onChange([
+    ...(props.value || []),
+    { creatorType: defaultCreatorType }
+  ]), [props.onChange, props.value]);
+
+  /**
+   * Deletes the creator at the passed index.
+   *
+   * @type {function(*): *}
+   */
+  const onDeleteCreator = useCallback((index) => props.onChange(
+    _.filter(props.value, (v, i) => i !== index)
+  ), [props.onChange, props.value]);
+
+  /**
+   * Updates the creator at the passed index.
+   *
+   * @type {function(*, *): *}
+   */
+  const onUpdateCreator = useCallback((index, value) => props.onChange(
+    _.map(props.value, (v, i) => (i === index ? value : v))
+  ), [props.onChange, props.value]);
+
+  /**
+   * Updates the creator type on the items if the selected value is not longer valid.
+   *
+   * @type {(function(*): (*))|*}
+   */
+  const onUpdateCreatorType = useCallback((item) => {
+    const creatorType = _.findWhere(props.creatorTypes, { value: item.creatorType });
+    if (creatorType) {
+      return item;
+    }
+
+    return {
+      ...item,
+      creatorType: defaultCreatorType
+    };
+  }, [props.creatorTypes, defaultCreatorType]);
+
+  /**
+   * Add the first creator when the component is mounted.
+   */
+  useEffect(() => {
+    onAddCreator();
+  }, []);
+
+  /**
+   * If the list of creator types changes, reset any invalid creator types to the default value.
+   */
+  useEffect(() => {
+    if (props.value && props.value.length) {
+      props.onChange(_.map(props.value, onUpdateCreatorType));
+    }
+  }, [onUpdateCreatorType, props.creatorTypes]);
+
+  return _.map(props.value, (creator, index) => (
+    <CreatorField
+      allowDelete={props.value.length > 1}
+      creator={creator}
+      creatorTypes={props.creatorTypes}
+      key={index}
+      onAdd={() => onAddCreator()}
+      onDelete={() => onDeleteCreator(index)}
+      onUpdate={(value) => onUpdateCreator(index, value)}
+    />
+  ));
+};
+
+export default Creators;

package/src/components/List.js

@@ -41,8 +41,11 @@ type Props = {
   addButton: {
     basic: boolean,
     color: string,
+    content?: string,
+    inverted?: boolean,
     location: string,
-    onClick?: () => void
+    onClick?: () => void,
+    secondary?: boolean
   },
   buttons: Array<ListButton>,
   count: number,
@@ -378,10 +381,12 @@ const useList = (WrappedComponent: ComponentType<any>) => (
           basic={this.props.addButton.basic !== false}
           color={this.props.addButton.color}
           key={BUTTON_KEY_ADD}
+          inverted={this.props.addButton.inverted}
           onClick={this.onAddButton.bind(this)}
+          secondary={this.props.addButton.secondary}
         >
           <Icon name='plus' />
-          { i18n.t('List.buttons.add') }
+          { this.props.addButton.content || i18n.t('List.buttons.add') }
         </Button>
       );
     }

package/src/components/SortSelector.js

@@ -0,0 +1,91 @@
+// @flow
+
+import React, { useCallback, useEffect, useRef } from 'react';
+import { Button, Dropdown } from 'semantic-ui-react';
+import _ from 'underscore';
+import { SORT_ASCENDING, SORT_DESCENDING } from '../constants/Sort';
+
+type Option = {
+  key: string,
+  value: string,
+  text: string
+};
+
+type Sort = Option & {
+  direction?: string
+};
+
+type Props = {
+  defaultValue?: string,
+  direction: string,
+  onChange: (sort: Sort) => void,
+  options: Array<Option>,
+  text: string,
+  value: string
+};
+
+// TODO: Add this to ItemsToggle component
+const SortSelector = (props: Props) => {
+  const sortRef = useRef();
+
+  /**
+   * Calls the onChange prop with the direction, text, and value of the selected sort.
+   *
+   * @type {(function(*): void)|*}
+   */
+  const onSelection = useCallback((option) => {
+    const direction = props.value === option.value && props.direction === SORT_ASCENDING
+      ? SORT_DESCENDING
+      : SORT_ASCENDING;
+
+    props.onChange({ ...option, direction });
+  }, [props.direction, props.onChange, props.value]);
+
+  /**
+   * Set the default sort to the passed default value or the first option in the list.
+   */
+  useEffect(() => {
+    if (!props.value) {
+      let defaultSort;
+
+      if (props.defaultValue) {
+        defaultSort = _.findWhere(props.options, { value: props.defaultValue });
+      } else {
+        defaultSort = _.first(props.options);
+      }
+
+      onSelection(defaultSort);
+    }
+  }, []);
+
+  return (
+    <Button.Group
+      basic
+      className='sort-selector'
+      style={{
+        fontSize: 'inherit'
+      }}
+    >
+      <Button
+        aria-label='Sort by'
+        content={props.text}
+        icon={props.direction === SORT_ASCENDING ? 'sort alphabet up' : 'sort alphabet down'}
+        onClick={(e) => sortRef.current.handleClick(e)}
+      />
+      <Dropdown
+        aria-label='Sort'
+        className='button icon'
+        floating
+        options={_.map(props.options, (option) => ({
+          ...option,
+          onClick: () => onSelection(option)
+        }))}
+        ref={sortRef}
+        trigger={<></>}
+        value={props.value}
+      />
+    </Button.Group>
+  );
+};
+
+export default SortSelector;

package/src/components/StyleSelector.js

@@ -0,0 +1,75 @@
+// @flow
+
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState
+} from 'react';
+import { Dropdown } from 'semantic-ui-react';
+import _ from 'underscore';
+import CitationStyles from '../resources/CitationStyles.json';
+
+type Props = {
+  onChange: (name: string, xml: string) => void,
+  value: ?string
+};
+
+const StyleSelector = (props: Props) => {
+  const [stylesCache, setStylesCache] = useState({});
+
+  /**
+   * Build the list of available style options.
+   *
+   * @type {{}}
+   */
+  const styles = useMemo(() => CitationStyles.coreCitationStyles, []);
+
+  /**
+   * Sets the style to the selected value. Styles are cached on the state so they do not need to be fetched
+   * more than once per render.
+   *
+   * @type {(function(*, {value: *}): void)|*}
+   */
+  const onChange = useCallback((e, { value }) => {
+    if (_.has(stylesCache, value)) {
+      props.onChange(value, stylesCache[value]);
+    } else {
+      fetch(`https://www.zotero.org/styles/${value}`)
+        .then((response) => response.text())
+        .then((xml) => {
+          props.onChange(value, xml);
+          setStylesCache((prevCache) => ({ ...prevCache, [value]: xml }));
+        });
+    }
+  }, [stylesCache]);
+
+  /**
+   * Default the selected style on component mount.
+   */
+  useEffect(() => {
+    const { name } = _.findWhere(styles, { isDefault: true });
+    onChange(null, { value: name });
+  }, []);
+
+  return (
+    <Dropdown
+      onChange={onChange}
+      options={_.map(styles, (style) => ({
+        key: style.name,
+        value: style.name,
+        text: style.title
+      }))}
+      search
+      searchInput={{
+        'aria-label': 'Search styles',
+      }}
+      selectOnBlur={false}
+      selection
+      text={_.findWhere(styles, { name: props.value })?.title}
+      value={props.value}
+    />
+  );
+};
+
+export default StyleSelector;

package/src/constants/Sort.js

@@ -0,0 +1,2 @@
+export const SORT_ASCENDING = 'ascending';
+export const SORT_DESCENDING = 'descending';

package/src/context/ZoteroTranslateContext.js

@@ -0,0 +1,7 @@
+// @flow
+
+import { createContext } from 'react';
+
+const ZoteroTranslateContext = createContext();
+
+export default ZoteroTranslateContext;

package/src/i18n/en.json

@@ -16,6 +16,26 @@
       }
     }
   },
+  "BibliographyList": {
+    "sort": {
+      "author": "Author",
+      "date": "Date",
+      "title": "Title"
+    }
+  },
+  "BibliographyModal": {
+    "title": "Add Entry"
+  },
+  "BibliographySearchInput": {
+    "labels": {
+      "placeholder": "Enter a URL, ISBN, DOI, PMID, arXiv ID"
+    }
+  },
+  "Citation": {
+    "labels": {
+      "untitled": "Untitled"
+    }
+  },
   "Common": {
     "buttons": {
       "add": "Add",
@@ -28,6 +48,7 @@
       "ok": "OK",
       "open": "Open",
       "save": "Save",
+      "search": "Search",
       "upload": "Upload"
     },
     "errors": {
@@ -41,12 +62,20 @@
         "header": "Oops!"
       },
       "loading": "Loading",
+      "noResults": "No results found.",
       "save": {
         "content": "Your changes have been saved.",
         "header": "Success!"
       }
     }
   },
+  "CreatorField": {
+    "labels": {
+      "firstName": "First name",
+      "lastName": "Last name",
+      "name": "Name"
+    }
+  },
   "EditContainer": {
     "errors": {
       "general": "Something went wrong while saving the record. Please make sure all required fields are filled out.",

package/src/index.js

@@ -10,6 +10,7 @@ export { default as AccordionSelector } from './components/AccordionSelector';
 export { default as ArrowButtons } from './components/ArrowButtons';
 export { default as AssociatedDropdown } from './components/AssociatedDropdown';
 export { default as AudioPlayer } from './components/AudioPlayer';
+export { default as BibliographyList } from './components/BibliographyList';
 export { default as BooleanIcon } from './components/BooleanIcon';
 export { default as CancelButton } from './components/CancelButton';
 export { default as ColorButton } from './components/ColorButton';

package/src/resources/BibliographyTypes.json

@@ -0,0 +1,117 @@
+{
+  "artwork": {
+    "medium": "artworkMedium"
+  },
+  "audioRecording": {
+    "medium": "audioRecordingFormat",
+    "publisher": "label"
+  },
+  "bill": {
+    "number": "billNumber",
+    "volume": "codeVolume",
+    "pages": "codePages"
+  },
+  "blogPost": {
+    "publicationTitle": "blogTitle",
+    "type": "websiteType"
+  },
+  "bookSection": {
+    "publicationTitle": "bookTitle"
+  },
+  "case": {
+    "title": "caseName",
+    "date": "dateDecided",
+    "number": "docketNumber",
+    "volume": "reporterVolume",
+    "pages": "firstPage"
+  },
+  "computerProgram": {
+    "publisher": "company"
+  },
+  "conferencePaper": {
+    "publicationTitle": "proceedingsTitle"
+  },
+  "dictionaryEntry": {
+    "publicationTitle": "dictionaryTitle"
+  },
+  "email": {
+    "title": "subject"
+  },
+  "encyclopediaArticle": {
+    "publicationTitle": "encyclopediaTitle"
+  },
+  "film": {
+    "publisher": "distributor",
+    "type": "genre",
+    "medium": "videoRecordingFormat"
+  },
+  "forumPost": {
+    "publicationTitle": "forumTitle",
+    "type": "postType"
+  },
+  "hearing": {
+    "number": "documentNumber"
+  },
+  "interview": {
+    "medium": "interviewMedium"
+  },
+  "letter": {
+    "type": "letterType"
+  },
+  "manuscript": {
+    "type": "manuscriptType"
+  },
+  "map": {
+    "type": "mapType"
+  },
+  "patent": {
+    "number": "patentNumber",
+    "date": "issueDate"
+  },
+  "podcast": {
+    "number": "episodeNumber",
+    "medium": "audioFileType"
+  },
+  "preprint": {
+    "type": "genre",
+    "publisher": "repository",
+    "number": "archiveID"
+  },
+  "presentation": {
+    "type": "presentationType"
+  },
+  "radioBroadcast": {
+    "publicationTitle": "programTitle",
+    "number": "episodeNumber",
+    "medium": "audioRecordingFormat",
+    "publisher": "network"
+  },
+  "report": {
+    "number": "reportNumber",
+    "type": "reportType",
+    "publisher": "institution"
+  },
+  "statute": {
+    "title": "nameOfAct",
+    "number": "publicLawNumber",
+    "date": "dateEnacted"
+  },
+  "thesis": {
+    "type": "thesisType",
+    "publisher": "university"
+  },
+  "tvBroadcast": {
+    "publicationTitle": "programTitle",
+    "number": "episodeNumber",
+    "medium": "videoRecordingFormat",
+    "publisher": "network"
+  },
+  "videoRecording": {
+    "medium": "videoRecordingFormat",
+    "publisher": "studio"
+  },
+  "webpage": {
+    "publicationTitle": "websiteTitle",
+    "type": "websiteType"
+  }
+}

package/src/resources/CitationStyles.json

@@ -0,0 +1,25 @@
+{
+  "coreCitationStyles": [
+    {
+      "isDefault": false,
+      "name": "apa",
+      "title": "American Psychological Association 7th edition"
+    },
+    {
+      "isDefault": false,
+      "name": "chicago-note-bibliography",
+      "title": "Chicago Manual of Style 17th edition (note)"
+    },
+    {
+      "isDefault": true,
+      "name": "modern-language-association",
+      "title": "Modern Language Association 9th edition"
+    },
+    {
+      "isDefault": false,
+      "name": "turabian-fullnote-bibliography",
+      "title": "Turabian 8th edition (full note)"
+    }
+  ],
+  "citationStylesCount": 10349
+}