@performant-software/semantic-components 0.5.2 → 0.5.3

package/src/components/MenuSidebar.js

@@ -0,0 +1,84 @@
+// @flow
+
+import React, { useCallback } from 'react';
+import {
+  Header,
+  Menu,
+  Ref,
+  type HeaderProps,
+  type MenuItemProps
+} from 'semantic-ui-react';
+import _ from 'underscore';
+
+type Props = {
+  contextRef: {
+    current: ?HTMLElement
+  },
+  header: HeaderProps,
+  items: Array<HeaderProps | MenuItemProps>
+};
+
+const MenuSidebar = ({
+  contextRef,
+  header,
+  items,
+  ...props
+}: Props) => {
+  /**
+   * Renders the passed item as a menu.
+   *
+   * @type {unknown}
+   */
+  const renderMenu = useCallback((item, index) => (
+    <Menu.Item
+      key={index}
+    >
+      <Menu.Header
+        {...item}
+      />
+      <Menu.Menu>
+        { _.map(item.items, (i) => renderItem(i)) }
+      </Menu.Menu>
+    </Menu.Item>
+  ), []);
+
+  /**
+   * Renders the passed item as a menu item.
+   *
+   * @type {unknown}
+   */
+  const renderMenuItem = useCallback((item, index) => (
+    <Menu.Item
+      key={index}
+      {...item}
+    />
+  ), []);
+
+  /**
+   * Renders the passed item.
+   *
+   * @type {function(*): *}
+   */
+  const renderItem = useCallback((item) => (item.items ? renderMenu(item) : renderMenuItem(item)), []);
+
+  return (
+    <Ref
+      innerRef={contextRef}
+    >
+      <Menu
+        {...props}
+        fixed='left'
+        vertical
+      >
+        <Menu.Item>
+          <Header
+            {...header}
+          />
+        </Menu.Item>
+        { _.map(items, (item) => renderItem(item)) }
+      </Menu>
+    </Ref>
+  );
+};
+
+export default MenuSidebar;

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,32 @@
+// @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';
+
+const ReferenceCodeModal = (props: EditContainerProps) => (
+  <Modal
+    as={Form}
+    centered={false}
+    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>
+);
+
+export default ReferenceCodeModal;

package/src/components/ReferenceTableModal.js

@@ -0,0 +1,67 @@
+// @flow
+
+import type { EditContainerProps } from '@performant-software/shared-components';
+import React from 'react';
+import { Form, Header, Modal } from 'semantic-ui-react';
+import EmbeddedList from './EmbeddedList';
+import ReferenceCodeModal from './ReferenceCodeModal';
+import i18n from '../i18n/i18n';
+
+const ReferenceTableModal = (props: EditContainerProps) => (
+  <Modal
+    as={Form}
+    centered={false}
+    className='reference-table-modal'
+    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>
+);
+
+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/i18n/en.json

@@ -60,6 +60,13 @@
     },
     "loading": "Loading"
   },
+  "DataView": {
+    "labels": {
+      "details": "Details",
+      "noSort": "No sort",
+      "sortBy": "Sort by {{column}}"
+    }
+  },
   "EditProvider": {
     "errors": {
       "general": "Something went wrong while saving the record. Please make sure all required fields are filled out.",
@@ -176,6 +183,31 @@
     "loginErrorHeader": "Invalid Credentials",
     "password": "Password"
   },
+  "ReferenceCodeModal": {
+    "labels": {
+      "name": "Name"
+    },
+    "title": {
+      "add": "Add Reference Code",
+      "edit": "Edit Reference Code"
+    }
+  },
+  "ReferenceTableModal": {
+    "labels": {
+      "key": "Key",
+      "name": "Name",
+      "referenceCodes": "Reference Codes"
+    },
+    "referenceCodes": {
+      "columns": {
+        "name": "Name"
+      }
+    },
+    "title": {
+      "add": "Add Reference Table",
+      "edit": "Edit Reference Table"
+    }
+  },
   "RemoteDropdown": {
     "labels": {
       "add": "Add",

package/src/index.js

@@ -12,6 +12,7 @@ export { default as ColorButton } from './components/ColorButton';
 export { default as ColorPickerModal } from './components/ColorPickerModal';
 export { default as useDataList } from './components/DataList';
 export { default as DataTable } from './components/DataTable';
+export { default as DataView } from './components/DataView';
 export { default as DateInput } from './components/DateInput';
 export { default as DatePicker } from './components/DatePicker';
 export { default as DescriptorField } from './components/DescriptorField';
@@ -47,10 +48,16 @@ export { default as MasonryGrid } from './components/MasonryGrid';
 export { default as MediaGallery } from './components/MediaGallery';
 export { default as MediaGrid } from './components/MediaGrid';
 export { default as MediaList } from './components/MediaList';
+export { default as MenuBar } from './components/MenuBar';
+export { default as MenuSidebar } from './components/MenuSidebar';
 export { default as ModalDropdown } from './components/ModalDropdown';
 export { default as NestedAccordion } from './components/NestedAccordion';
 export { default as PlayButton } from './components/PlayButton';
 export { default as PhotoViewer } from './components/PhotoViewer';
+export { default as ReferenceCodeDropdown } from './components/ReferenceCodeDropdown';
+export { default as ReferenceCodeModal } from './components/ReferenceCodeModal';
+export { default as ReferenceTableModal } from './components/ReferenceTableModal';
+export { default as ReferenceTablesList } from './components/ReferenceTablesList';
 export { default as RemoteDropdown } from './components/RemoteDropdown';
 export { default as SaveButton } from './components/SaveButton';
 export { default as Section } from './components/Section';

package/types/components/DataList.js.flow

@@ -19,10 +19,10 @@ type Props = {
     props?: any,
     onChange?: (filter: any) => Promise<any>
   },
-  onDelete: (item: any) => Promise<any>,
+  onDelete?: (item: any) => Promise<any>,
   onDeleteAll?: () => Promise<any>,
   onLoad: (params: any) => Promise<any>,
-  onSave: (item: any) => Promise<any>,
+  onSave?: (item: any) => Promise<any>,
   perPageOptions?: Array<number>,
   polling?: number,
   resolveErrors?: (error: any) => Array<string>,
@@ -251,6 +251,10 @@ const useDataList = (WrappedComponent: ComponentType<any>) => (
      * @returns {Q.Promise<any> | Promise<R> | Promise<any> | void | *}
      */
     onDelete(selectedItem: any) {
+      if (!this.props.onDelete) {
+        return Promise.resolve();
+      }
+
       return this.props
         .onDelete(selectedItem)
         .then(this.afterDelete.bind(this))
@@ -333,6 +337,10 @@ const useDataList = (WrappedComponent: ComponentType<any>) => (
      * @returns {Q.Promise<any> | Promise<R> | Promise<any> | void | *}
      */
     onSave(item: any) {
+      if (!this.props.onSave) {
+        return Promise.resolve();
+      }
+
       return Promise.resolve(this.props.onSave(item))
         .then(() => this.setState({ saved: true }, this.fetchData.bind(this)));
     }

package/types/components/DataTableColumnSelector.js.flow

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { Component, type ComponentType } from 'react';
+import React, { Component, type ComponentType, type Element } from 'react';
 import { Checkbox, Dropdown, Icon } from 'semantic-ui-react';
 import _ from 'underscore';
 import Draggable from './Draggable';
@@ -10,7 +10,8 @@ import type { Column } from './DataTable';
 
 type Props = {
   className: string,
-  columns: Array<Column>
+  columns: Array<Column>,
+  renderListHeader?: () => Element<any>
 };
 
 type State = {
@@ -107,37 +108,40 @@ const useColumnSelector = (WrappedComponent: ComponentType<any>) => (
      */
     renderHeader() {
       return (
-        <Dropdown
-          basic
-          button
-          icon='cog'
-          className='icon configure-button open-right'
-          simple
-        >
-          <Dropdown.Menu>
-            { this.state.columns
-              .filter((c) => c.label && c.label.length)
-              .map((c, index) => (
-                <Draggable
-                  id={c.name}
-                  index={index}
-                  key={c.name}
-                  onDrag={this.onDrag.bind(this)}
-                >
-                  <Dropdown.Item>
-                    <Icon
-                      name='bars'
-                    />
-                    <Checkbox
-                      checked={!c.hidden}
-                      label={c.label}
-                      onClick={this.onColumnCheckbox.bind(this, c)}
-                    />
-                  </Dropdown.Item>
-                </Draggable>
-              ))}
-          </Dropdown.Menu>
-        </Dropdown>
+        <>
+          { this.props.renderListHeader && this.props.renderListHeader() }
+          <Dropdown
+            basic
+            button
+            icon='cog'
+            className='icon configure-button open-right'
+            simple
+          >
+            <Dropdown.Menu>
+              { this.state.columns
+                .filter((c) => c.label && c.label.length)
+                .map((c, index) => (
+                  <Draggable
+                    id={c.name}
+                    index={index}
+                    key={c.name}
+                    onDrag={this.onDrag.bind(this)}
+                  >
+                    <Dropdown.Item>
+                      <Icon
+                        name='bars'
+                      />
+                      <Checkbox
+                        checked={!c.hidden}
+                        label={c.label}
+                        onClick={this.onColumnCheckbox.bind(this, c)}
+                      />
+                    </Dropdown.Item>
+                  </Draggable>
+                ))}
+            </Dropdown.Menu>
+          </Dropdown>
+        </>
       );
     }
   }