@performant-software/semantic-components 0.5.2 → 0.5.5

package/src/components/PhotoViewer.js

@@ -2,9 +2,11 @@
 
 import React from 'react';
 import { Image, Modal } from 'semantic-ui-react';
+import ModalContext from '../context/ModalContext';
 import './PhotoViewer.css';
 
 type Props = {
+  alt?: string,
   image: string,
   onClose: () => void,
   open: boolean,
@@ -12,21 +14,27 @@ type Props = {
 };
 
 const PhotoViewer = (props: Props) => (
-  <Modal
-    centered={false}
-    className='photo-viewer'
-    closeIcon
-    onClose={props.onClose.bind(this)}
-    open={props.open}
-    size={props.size}
-  >
-    <Modal.Content>
-      <Image
-        fluid
-        src={props.image}
-      />
-    </Modal.Content>
-  </Modal>
+  <ModalContext.Consumer>
+    { (mountNode) => (
+      <Modal
+        centered={false}
+        className='photo-viewer'
+        closeIcon
+        mountNode={mountNode}
+        onClose={props.onClose.bind(this)}
+        open={props.open}
+        size={props.size}
+      >
+        <Modal.Content>
+          <Image
+            alt={props.alt}
+            fluid
+            src={props.image}
+          />
+        </Modal.Content>
+      </Modal>
+    )}
+  </ModalContext.Consumer>
 );
 
 PhotoViewer.defaultProps = {

package/src/components/ReferenceCodeDropdown.js

@@ -0,0 +1,118 @@
+// @flow
+
+import { ReferenceCodesService } from '@performant-software/shared-components';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState
+} from 'react';
+import _ from 'underscore';
+import { Dropdown } from 'semantic-ui-react';
+
+type Item = {
+  reference_table_id: number,
+  key: string
+};
+
+type Props = {
+  fluid?: boolean,
+  multiple?: boolean,
+  onChange: (item: Item) => void,
+  placeholder?: string,
+  referenceTable: string,
+  value: Item | Array<Item>
+};
+
+const ReferenceCodeDropdown = (props: Props) => {
+  const [loading, setLoading] = useState(false);
+  const [options, setOptions] = useState([]);
+
+  /**
+   * Converts the passed ID to a reference code item.
+   *
+   * @type {function(*): {reference_code_id: *}}
+   */
+  const toItem = useCallback((id) => ({
+    reference_code_id: id
+  }), []);
+
+  /**
+   * Converts the passed reference code to a dropdown option.
+   *
+   * @type {function(*): {text: *, value: *, key: *}}
+   */
+  const toOption = useCallback((referenceCode) => ({
+    key: referenceCode.id,
+    value: referenceCode.id,
+    text: referenceCode.name
+  }), []);
+
+  /**
+   * Converts the selected values and calls the onChange prop.
+   *
+   * @type {(function(*, {value: *}): void)|*}
+   */
+  const onChange = useCallback((e, { value }) => {
+    let values;
+
+    if (props.multiple) {
+      values = value;
+    } else {
+      values = _.compact([value]);
+    }
+
+    props.onChange(_.map(values, toItem));
+  }, [toItem, props.multiple, props.onChange]);
+
+  /**
+   * Sets the "value" variable for the Dropdown component.
+   */
+  const value = useMemo(() => {
+    const v = _.pluck(_.filter(props.value, (x) => !x._destroy), 'reference_code_id');
+    return props.multiple ? v : _.first(v);
+  }, [props.multiple, props.value]);
+
+  /**
+   * Loads the list of reference codes from the server.
+   */
+  useEffect(() => {
+    setLoading(true);
+
+    const params = {
+      per_page: 0,
+      reference_table: props.referenceTable,
+      sort_by: 'name'
+    };
+
+    ReferenceCodesService
+      .fetchAll(params)
+      .then(({ data }) => setOptions(_.map(data.reference_codes, toOption)))
+      .finally(() => setLoading(false));
+  }, [toOption]);
+
+  return (
+    <Dropdown
+      clearable
+      disabled={loading}
+      fluid={props.fluid}
+      loading={loading}
+      multiple={props.multiple}
+      onChange={onChange}
+      options={options}
+      placeholder={props.placeholder}
+      search
+      selection
+      selectOnBlur={false}
+      value={value}
+    />
+  );
+};
+
+ReferenceCodeDropdown.defaultProps = {
+  fluid: true,
+  multiple: false,
+  placeholder: undefined
+};
+
+export default ReferenceCodeDropdown;

package/src/components/ReferenceCodeModal.js

@@ -0,0 +1,38 @@
+// @flow
+
+import type { EditContainerProps } from '@performant-software/shared-components';
+import React from 'react';
+import { Form, Modal } from 'semantic-ui-react';
+import i18n from '../i18n/i18n';
+import ModalContext from '../context/ModalContext';
+
+const ReferenceCodeModal = (props: EditContainerProps) => (
+  <ModalContext.Consumer>
+    { (mountNode) => (
+      <Modal
+        as={Form}
+        centered={false}
+        mountNode={mountNode}
+        open
+      >
+        <Modal.Header
+          content={props.item.id
+            ? i18n.t('ReferenceCodeModal.title.edit')
+            : i18n.t('ReferenceCodeModal.title.add')}
+        />
+        <Modal.Content>
+          <Form.Input
+            error={props.isError('name')}
+            label={i18n.t('ReferenceCodeModal.labels.name')}
+            onChange={props.onTextInputChange.bind(this, 'name')}
+            required={props.isRequired('name')}
+            value={props.item.name}
+          />
+        </Modal.Content>
+        { props.children }
+      </Modal>
+    )}
+  </ModalContext.Consumer>
+);
+
+export default ReferenceCodeModal;

package/src/components/ReferenceTableModal.js

@@ -0,0 +1,73 @@
+// @flow
+
+import type { EditContainerProps } from '@performant-software/shared-components';
+import React from 'react';
+import { Form, Header, Modal } from 'semantic-ui-react';
+import i18n from '../i18n/i18n';
+import EmbeddedList from './EmbeddedList';
+import ModalContext from '../context/ModalContext';
+import ReferenceCodeModal from './ReferenceCodeModal';
+
+const ReferenceTableModal = (props: EditContainerProps) => (
+  <ModalContext.Consumer>
+    { (mountNode) => (
+      <Modal
+        as={Form}
+        centered={false}
+        className='reference-table-modal'
+        mountNode={mountNode}
+        open
+      >
+        <Modal.Header
+          content={props.item.id
+            ? i18n.t('ReferenceTableModal.title.edit')
+            : i18n.t('ReferenceTableModal.title.add')}
+        />
+        <Modal.Content>
+          <Form.Input
+            error={props.isError('name')}
+            label={i18n.t('ReferenceTableModal.labels.name')}
+            onChange={props.onTextInputChange.bind(this, 'name')}
+            required={props.isRequired('name')}
+            value={props.item.name}
+          />
+          <Form.Input
+            error={props.isError('key')}
+            label={i18n.t('ReferenceTableModal.labels.key')}
+            onChange={props.onTextInputChange.bind(this, 'key')}
+            required={props.isRequired('key')}
+            value={props.item.key}
+          />
+          <Header
+            content={i18n.t('ReferenceTableModal.labels.referenceCodes')}
+          />
+          <EmbeddedList
+            actions={[{
+              name: 'edit'
+            }, {
+              name: 'copy'
+            }, {
+              name: 'delete'
+            }]}
+            columns={[{
+              name: 'name',
+              label: i18n.t('ReferenceTableModal.referenceCodes.columns.name')
+            }]}
+            items={props.item.reference_codes}
+            modal={{
+              component: ReferenceCodeModal,
+              props: {
+                required: ['name']
+              }
+            }}
+            onDelete={props.onDeleteChildAssociation.bind(this, 'reference_codes')}
+            onSave={props.onSaveChildAssociation.bind(this, 'reference_codes')}
+          />
+        </Modal.Content>
+        { props.children }
+      </Modal>
+    )}
+  </ModalContext.Consumer>
+);
+
+export default ReferenceTableModal;

package/src/components/ReferenceTablesList.js

@@ -0,0 +1,44 @@
+// @flow
+
+import { ReferenceTablesService } from '@performant-software/shared-components';
+import React from 'react';
+import ListTable from './ListTable';
+import ReferenceTableModal from './ReferenceTableModal';
+
+const ReferenceTablesList = () => (
+  <ListTable
+    actions={[{
+      name: 'edit'
+    }, {
+      name: 'copy'
+    }, {
+      name: 'delete'
+    }]}
+    collectionName='reference_tables'
+    columns={[{
+      name: 'name',
+      label: 'Name',
+      sortable: true
+    }, {
+      name: 'key',
+      label: 'Key',
+      sortable: true
+    }]}
+    modal={{
+      component: ReferenceTableModal,
+      props: {
+        onInitialize: (id) => (
+          ReferenceTablesService
+            .fetchOne(id)
+            .then(({ data }) => data.reference_table)
+        ),
+        required: ['name', 'key']
+      }
+    }}
+    onDelete={(referenceTable) => ReferenceTablesService.delete(referenceTable)}
+    onLoad={(params) => ReferenceTablesService.fetchAll(params)}
+    onSave={(referenceTable) => ReferenceTablesService.save(referenceTable)}
+  />
+);
+
+export default ReferenceTablesList;

package/src/components/RemoteDropdown.js

@@ -311,6 +311,7 @@ class RemoteDropdown extends Component<Props, State> {
         scrolling
         search={() => this.getSearchOptions()}
         searchInput={{
+          'aria-label': 'Search',
           className: 'remote-dropdown-search-input',
           onKeyDown: Timer.clearSearchTimer.bind(this),
           onKeyUp: Timer.setSearchTimer.bind(this, this.onSearch.bind(this))

package/src/components/Selectize.js

@@ -18,9 +18,10 @@ import {
 import _ from 'underscore';
 import SelectizeHeader from './SelectizeHeader';
 import i18n from '../i18n/i18n';
+import ModalContext from '../context/ModalContext';
 import useDataList from './DataList';
-import './Selectize.css';
 import useList, { type Props as ListProps } from './List';
+import './Selectize.css';
 
 type Props = {
   centered?: boolean,
@@ -238,51 +239,55 @@ const Selectize = (props: Props) => {
   }, [onSelect, props.modal]);
 
   return (
-    <Modal
-      as={Form}
-      centered={props.centered}
-      className='selectize'
-      open
-      noValidate
-      size='small'
-    >
-      <Modal.Header
-        content={props.title}
-      />
-      <Modal.Content>
-        <SelectizeGrid
-          {...props}
-          actions={[]}
-          isSelected={isSelected}
-          onDelete={() => Promise.resolve()}
-          onDeleteAll={() => Promise.resolve()}
-          onItemSelection={onItemSelection}
-          onSave={onSave}
-          onSelect={onSelect}
-          selectedItem={selectedItem}
-          selectedItems={selectedItems}
-        />
-      </Modal.Content>
-      <Modal.Actions>
-        <Button
-          onClick={props.onSave.bind(this, selectedItems)}
-          primary
-          size='medium'
-          type='submit'
-        >
-          { i18n.t('Common.buttons.save') }
-        </Button>
-        <Button
-          inverted
-          onClick={props.onClose.bind(this)}
-          primary
-          size='medium'
-          type='button'
+    <ModalContext.Consumer>
+      { (mountNode) => (
+        <Modal
+          as={Form}
+          centered={props.centered}
+          className='selectize'
+          mountNode={mountNode}
+          noValidate
+          open
+          size='small'
         >
-          { i18n.t('Common.buttons.cancel') }
-        </Button>
-      </Modal.Actions>
-    </Modal>
+          <Modal.Header
+            content={props.title}
+          />
+          <Modal.Content>
+            <SelectizeGrid
+              {...props}
+              actions={[]}
+              isSelected={isSelected}
+              onDelete={() => Promise.resolve()}
+              onDeleteAll={() => Promise.resolve()}
+              onItemSelection={onItemSelection}
+              onSave={onSave}
+              onSelect={onSelect}
+              selectedItem={selectedItem}
+              selectedItems={selectedItems}
+            />
+          </Modal.Content>
+          <Modal.Actions>
+            <Button
+              onClick={props.onSave.bind(this, selectedItems)}
+              primary
+              size='medium'
+              type='submit'
+            >
+              { i18n.t('Common.buttons.save') }
+            </Button>
+            <Button
+              basic
+              onClick={props.onClose.bind(this)}
+              size='medium'
+              type='button'
+            >
+              { i18n.t('Common.buttons.cancel') }
+            </Button>
+          </Modal.Actions>
+        </Modal>
+      )}
+    </ModalContext.Consumer>
   );
 };
 

package/src/components/TabbedModal.js

@@ -4,6 +4,7 @@ import { Element } from '@performant-software/shared-components';
 import React, { Component, type Node } from 'react';
 import { Header, Menu, Modal } from 'semantic-ui-react';
 import _ from 'underscore';
+import ModalContext from '../context/ModalContext';
 import './TabbedModal.css';
 
 type Props = {
@@ -84,32 +85,37 @@ class TabbedModal extends Component<Props, State> {
     const tab = _.find(tabs, (t) => t.props.name === this.state.tab);
 
     return (
-      <Modal
-        className={this.getModalClasses()}
-        {..._.omit(this.props, 'header', 'renderHeader', 'inlineTabs', 'className')}
-      >
-        <Modal.Header
-          className={this.getHeaderClasses()}
-        >
-          { this.renderHeader() }
-          <Menu
-            float='right'
-            secondary
+      <ModalContext.Consumer>
+        { (mountNode) => (
+          <Modal
+            className={this.getModalClasses()}
+            mountNode={mountNode}
+            {..._.omit(this.props, 'header', 'renderHeader', 'inlineTabs', 'className')}
           >
-            { _.map(Element.findByType(this.props.children, TabbedModal.Tab), this.renderTab.bind(this)) }
-          </Menu>
-        </Modal.Header>
-        <Modal.Content>
-          { tab && (
-            <div
-              key={tab.props.name}
+            <Modal.Header
+              className={this.getHeaderClasses()}
             >
-              { tab.props.children }
-            </div>
-          )}
-        </Modal.Content>
-        { Element.findByType(this.props.children, Modal.Actions) }
-      </Modal>
+              { this.renderHeader() }
+              <Menu
+                float='right'
+                secondary
+              >
+                { _.map(Element.findByType(this.props.children, TabbedModal.Tab), this.renderTab.bind(this)) }
+              </Menu>
+            </Modal.Header>
+            <Modal.Content>
+              { tab && (
+                <div
+                  key={tab.props.name}
+                >
+                  { tab.props.children }
+                </div>
+              )}
+            </Modal.Content>
+            { Element.findByType(this.props.children, Modal.Actions) }
+          </Modal>
+        )}
+      </ModalContext.Consumer>
     );
   }