@performant-software/semantic-components 0.5.2 → 0.5.5

package/src/components/ListFilters.js

@@ -23,6 +23,7 @@ import i18n from '../i18n/i18n';
 import AssociatedDropdown from './AssociatedDropdown';
 import DropdownButton from './DropdownButton';
 import FuzzyDate from './FuzzyDate';
+import ModalContext from '../context/ModalContext';
 
 type Option = {
   key: string | number,
@@ -286,118 +287,123 @@ const ListFilters = (props: Props) => {
   }, []);
 
   return (
-    <Modal
-      as={Form}
-      centered={false}
-      className='list-filters-modal'
-      noValidate
-      open
-      size='small'
-    >
-      <Modal.Header>
-        <Grid
-          columns={2}
+    <ModalContext.Consumer>
+      { (mountNode) => (
+        <Modal
+          as={Form}
+          centered={false}
+          className='list-filters-modal'
+          mountNode={mountNode}
+          noValidate
+          open
+          size='small'
         >
-          <Grid.Column
-            verticalAlign='middle'
-          >
-            <Header
-              content={i18n.t('ListFilters.title')}
-            />
-          </Grid.Column>
-          <Grid.Column
-            textAlign='right'
-          >
-            <DropdownButton
-              color='green'
-              icon='plus'
-              options={_.map(filters, (filter) => ({
-                key: filter.key,
-                value: filter.key,
-                text: filter.label
-              }))}
-              onChange={(e, { value }) => {
-                const filter = _.findWhere(props.filters, { key: value });
-                props.onSaveChildAssociation('filters', {
-                  ...filter,
-                  uid: uuid(),
-                  operator: Operators.equal
-                });
-              }}
-              scrolling
-              text={i18n.t('ListFilters.buttons.add')}
-              value=''
-            />
-            <Button
-              color='red'
-              content={i18n.t('ListFilters.buttons.reset')}
-              icon='repeat'
-              onClick={() => props.onReset()}
-              style={{
-                marginLeft: '1em'
-              }}
-            />
-          </Grid.Column>
-        </Grid>
-      </Modal.Header>
-      <Modal.Content>
-        { !_.isEmpty(props.item.filters) && (
-          <Grid>
-            { _.map(props.item.filters, (filter) => (
-              <Grid.Row
-                columns={4}
-                key={filter.key}
+          <Modal.Header>
+            <Grid
+              columns={2}
+            >
+              <Grid.Column
                 verticalAlign='middle'
               >
-                <Grid.Column>
-                  <Header
-                    content={filter.label}
-                  />
-                </Grid.Column>
-                <Grid.Column
-                  width={5}
-                >
-                  <Dropdown
-                    options={getOperatorsByType(filter.type)}
-                    onChange={(e, { value }) => props.onSaveChildAssociation('filters', {
-                      ..._.omit(filter, 'value'),
-                      operator: value,
-                    })}
-                    selection
-                    value={filter.operator}
-                  />
-                </Grid.Column>
-                <Grid.Column
-                  width={5}
-                >
-                  { renderInput(filter) }
-                </Grid.Column>
-                <Grid.Column
-                  width={1}
-                >
-                  <Button
-                    basic
-                    icon='times'
-                    onClick={() => {
-                      /*
-                       * If we're removing the last filter, call the onReset prop to ensure the UI doesn't display
-                       * as active.
-                       */
-                      if (props.item.filters && props.item.filters.length === 1) {
-                        props.onReset();
-                      } else {
-                        props.onDeleteChildAssociation('filters', filter);
-                      }
-                    }}
-                  />
-                </Grid.Column>
-              </Grid.Row>
-            ))}
-          </Grid>
-        )}
-      </Modal.Content>
-      { props.children }
-    </Modal>
+                <Header
+                  content={i18n.t('ListFilters.title')}
+                />
+              </Grid.Column>
+              <Grid.Column
+                textAlign='right'
+              >
+                <DropdownButton
+                  color='green'
+                  icon='plus'
+                  options={_.map(filters, (filter) => ({
+                    key: filter.key,
+                    value: filter.key,
+                    text: filter.label
+                  }))}
+                  onChange={(e, { value }) => {
+                    const filter = _.findWhere(props.filters, { key: value });
+                    props.onSaveChildAssociation('filters', {
+                      ...filter,
+                      uid: uuid(),
+                      operator: Operators.equal
+                    });
+                  }}
+                  scrolling
+                  text={i18n.t('ListFilters.buttons.add')}
+                  value=''
+                />
+                <Button
+                  color='red'
+                  content={i18n.t('ListFilters.buttons.reset')}
+                  icon='repeat'
+                  onClick={() => props.onReset()}
+                  style={{
+                    marginLeft: '1em'
+                  }}
+                />
+              </Grid.Column>
+            </Grid>
+          </Modal.Header>
+          <Modal.Content>
+            { !_.isEmpty(props.item.filters) && (
+              <Grid>
+                { _.map(props.item.filters, (filter) => (
+                  <Grid.Row
+                    columns={4}
+                    key={filter.key}
+                    verticalAlign='middle'
+                  >
+                    <Grid.Column>
+                      <Header
+                        content={filter.label}
+                      />
+                    </Grid.Column>
+                    <Grid.Column
+                      width={5}
+                    >
+                      <Dropdown
+                        options={getOperatorsByType(filter.type)}
+                        onChange={(e, { value }) => props.onSaveChildAssociation('filters', {
+                          ..._.omit(filter, 'value'),
+                          operator: value,
+                        })}
+                        selection
+                        value={filter.operator}
+                      />
+                    </Grid.Column>
+                    <Grid.Column
+                      width={5}
+                    >
+                      { renderInput(filter) }
+                    </Grid.Column>
+                    <Grid.Column
+                      width={1}
+                    >
+                      <Button
+                        basic
+                        icon='times'
+                        onClick={() => {
+                          /*
+                           * If we're removing the last filter, call the onReset prop to ensure the UI doesn't display
+                           * as active.
+                           */
+                          if (props.item.filters && props.item.filters.length === 1) {
+                            props.onReset();
+                          } else {
+                            props.onDeleteChildAssociation('filters', filter);
+                          }
+                        }}
+                      />
+                    </Grid.Column>
+                  </Grid.Row>
+                ))}
+              </Grid>
+            )}
+          </Modal.Content>
+          { props.children }
+        </Modal>
+      )}
+    </ModalContext.Consumer>
   );
 };
 

package/src/components/ListTable.js

@@ -10,6 +10,8 @@ import type { Column } from './DataTable';
 
 type Props = {
   columns: Array<Column>,
+  defaultSort?: string,
+  defaultSortDirection?: string,
   page: number,
   onSort: (sortColumn: string, sortDirection: string, page?: number) => void,
   onInit: (page?: number) => void,
@@ -49,12 +51,13 @@ const ListTable = (props: Props) => {
    * sortable column.
    */
   useEffect(() => {
-    const { page, sortColumn, sortDirection = SORT_ASCENDING } = props;
+    const { page, defaultSort, defaultSortDirection = SORT_ASCENDING } = props;
 
-    if (props.sortColumn) {
-      props.onSort(sortColumn, sortDirection, page);
+    if (defaultSort) {
+      props.onSort(defaultSort, defaultSortDirection, page);
     } else {
       const sortableColumn = _.findWhere(props.columns, { sortable: true });
+
       if (sortableColumn) {
         onColumnClick(sortableColumn);
       } else {
@@ -62,7 +65,7 @@ const ListTable = (props: Props) => {
         props.onInit();
       }
     }
-  }, []);
+  }, [props.columns]);
 
   return (
     <DataTable

package/src/components/LoginModal.js

@@ -12,6 +12,7 @@ import {
   Modal
 } from 'semantic-ui-react';
 import i18n from '../i18n/i18n';
+import ModalContext from '../context/ModalContext';
 import './LoginModal.css';
 
 type Props = {
@@ -27,72 +28,78 @@ type Props = {
 };
 
 const LoginModal = (props: Props) => (
-  <Modal
-    as={Form}
-    className='login-modal'
-    error={props.loginFailed}
-    open={props.open}
-    size='small'
-    trigger={props.trigger}
-  >
-    <Header
-      icon='user circle'
-      content={i18n.t('LoginModal.header')}
-    />
-    <Message
-      error
-      header={i18n.t('LoginModal.loginErrorHeader')}
-      content={i18n.t('LoginModal.loginErrorContent')}
-    />
-    <Grid
-      padded='vertically'
-      textAlign='center'
-    >
-      <Grid.Column>
-        <Grid.Row>
-          <Input
-            autoFocus
-            className='form-field'
-            icon={<Icon name='at' />}
-            onChange={props.onUsernameChange.bind(this)}
-            placeholder={props.placeholder}
-            size='huge'
-          />
-        </Grid.Row>
-        <Grid.Row
-          className='row'
-        >
-          <Input
-            className='form-field'
-            icon={<Icon name='lock' />}
-            onChange={props.onPasswordChange.bind(this)}
-            placeholder={i18n.t('LoginModal.password')}
-            size='huge'
-            type='password'
-          />
-        </Grid.Row>
-      </Grid.Column>
-    </Grid>
-    <Modal.Actions>
-      <Button
-        disabled={props.disabled}
-        onClick={props.onLogin.bind(this)}
-        primary
-        size='large'
-        type='submit'
-      >
-        { i18n.t('LoginModal.buttonLogin') }
-      </Button>
-      <Button
-        inverted
-        onClick={props.onClose.bind(this)}
-        primary
-        size='large'
+  <ModalContext.Consumer>
+    { (mountNode) => (
+      <Modal
+        as={Form}
+        className='login-modal'
+        error={props.loginFailed}
+        mountNode={mountNode}
+        open={props.open}
+        size='small'
+        trigger={props.trigger}
       >
-        { i18n.t('LoginModal.buttonCancel') }
-      </Button>
-    </Modal.Actions>
-  </Modal>
+        <Header
+          icon='user circle'
+          content={i18n.t('LoginModal.header')}
+        />
+        <Message
+          error
+          header={i18n.t('LoginModal.loginErrorHeader')}
+          content={i18n.t('LoginModal.loginErrorContent')}
+        />
+        <Grid
+          padded='vertically'
+          textAlign='center'
+        >
+          <Grid.Column>
+            <Grid.Row>
+              <Input
+                autoFocus
+                className='form-field'
+                icon={<Icon name='at' />}
+                onChange={props.onUsernameChange.bind(this)}
+                placeholder={props.placeholder}
+                size='huge'
+              />
+            </Grid.Row>
+            <Grid.Row
+              className='row'
+            >
+              <Input
+                className='form-field'
+                icon={<Icon name='lock' />}
+                onChange={props.onPasswordChange.bind(this)}
+                placeholder={i18n.t('LoginModal.password')}
+                size='huge'
+                type='password'
+              />
+            </Grid.Row>
+          </Grid.Column>
+        </Grid>
+        <Modal.Actions>
+          <Button
+            disabled={props.disabled}
+            onClick={props.onLogin.bind(this)}
+            primary
+            size='large'
+            type='submit'
+          >
+            { i18n.t('LoginModal.buttonLogin') }
+          </Button>
+          { props.onClose && (
+            <Button
+              basic
+              onClick={props.onClose.bind(this)}
+              size='large'
+            >
+              { i18n.t('LoginModal.buttonCancel') }
+            </Button>
+          )}
+        </Modal.Actions>
+      </Modal>
+    )}
+  </ModalContext.Consumer>
 );
 
 LoginModal.defaultProps = {

package/src/components/MediaList.js

@@ -43,6 +43,7 @@ const MediaList = (props: Props) => (
           onClick={props.onClick.bind(this, item, i)}
         >
           <Image
+            alt={item.alt}
             src={item.image}
             style={{
               objectFit: 'cover'

package/src/components/MenuBar.js

@@ -0,0 +1,84 @@
+// @flow
+
+import React, { useCallback } from 'react';
+import {
+  Dropdown,
+  Menu,
+  type DropdownItemProps,
+  type HeaderProps,
+  type MenuProps
+} from 'semantic-ui-react';
+import _ from 'underscore';
+import DropdownMenu from './DropdownMenu';
+
+type Props = MenuProps & {
+  header: HeaderProps,
+  items: Array<DropdownItemProps | MenuProps>
+};
+
+const MenuBar = ({ header, items, ...props }: Props) => {
+  /**
+   * Renders the passed item as a dropdown item.
+   *
+   * @param item
+   *
+   * @returns {JSX.Element}
+   */
+  const renderDropdownItem = useCallback((item, index) => (
+    <Dropdown.Item
+      key={index}
+      {...item}
+    />
+  ), []);
+
+  /**
+   * Renders the passed item as a menu item.
+   *
+   * @returns {JSX.Element}
+   */
+  const renderMenuItem = useCallback((item, index) => (
+    <Menu.Item
+      key={index}
+      {...item}
+    />
+  ), []);
+
+  /**
+   * Renders the passed item as a dropdown menu.
+   *
+   * @returns {JSX.Element}
+   */
+  const renderDropdown = useCallback((item, index) => (
+    <DropdownMenu
+      aria-label={item.content}
+      item
+      key={index}
+      role='group'
+      text={item.content}
+    >
+      { _.map(item.items, (i) => (i.items ? renderDropdown(i) : renderDropdownItem(i)))}
+    </DropdownMenu>
+  ), []);
+
+  /**
+   * Renders the passed item.
+   *
+   * @returns {JSX.Element}
+   */
+  const renderItem = useCallback((item) => (item.items ? renderDropdown(item) : renderMenuItem(item)), []);
+
+  return (
+    <Menu
+      {...props}
+      className='menu-bar'
+    >
+      <Menu.Item
+        {...header}
+        header
+      />
+      { _.map(items, (item) => renderItem(item)) }
+    </Menu>
+  );
+};
+
+export default MenuBar;

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/ModalDropdown.js

@@ -3,13 +3,13 @@
 import React, { Component } from 'react';
 import { withTranslation } from 'react-i18next';
 import { Button, Dropdown } from 'semantic-ui-react';
+import i18n from '../i18n/i18n';
 import './ModalDropdown.css';
 
 type Props = {
   onClear: () => void,
   renderModal: ({ onClose: () => void, open: boolean }) => void,
-  searchQuery: ?string,
-  t: (key: string) => string
+  searchQuery: ?string
 };
 
 type State = {
@@ -51,13 +51,16 @@ class ModalDropdown extends Component<Props, State> {
           onSearchChange={() => {}}
           open={false}
           search
+          searchInput={{
+            'aria-label': 'Search'
+          }}
           selection
           searchQuery={this.props.searchQuery || ''}
         />
         <Button.Group>
           <Button
             basic
-            content={this.props.t('Common.buttons.clear')}
+            content={i18n.t('Common.buttons.clear')}
             icon='times'
             onClick={this.props.onClear.bind(this)}
             type='button'

package/src/components/NestedAccordion.css

@@ -12,6 +12,10 @@
   color: #fff;
 }
 
+.nested-accordion.ui.styled.accordion .title {
+  color: rgba(0,0,0,.6);
+}
+
 .nested-accordion .title > .container {
   display: flex;
   flex-direction: row;

package/src/components/NestedAccordion.js

@@ -230,6 +230,7 @@ class NestedAccordion extends Component<Props, State> {
   renderToggle(item: any) {
     return (
       <Button
+        aria-label='Open'
         compact
         className={this.getButtonClass(item)}
         icon='dropdown'