@performant-software/semantic-components 0.5.5 → 0.5.6

package/types/components/FileUploadModal.js.flow

@@ -13,6 +13,7 @@ import {
 import _ from 'underscore';
 import i18n from '../i18n/i18n';
 import FileUpload from './FileUpload';
+import ModalContext from '../context/ModalContext';
 import Toaster from './Toaster';
 
 type Props = {
@@ -195,44 +196,48 @@ class FileUploadModal extends Component<Props, State> {
           />
         )}
         { this.state.modal && (
-          <Modal
-            centered={false}
-            className='file-upload-modal'
-            open
-          >
-            <Dimmer
-              active={this.state.saving}
-              inverted
-            >
-              <Loader
-                content={i18n.t('FileUploadModal.loader')}
-              />
-            </Dimmer>
-            { this.renderErrors() }
-            <Modal.Header
-              content={this.props.title || i18n.t('FileUploadModal.title')}
-            />
-            <Modal.Content>
-              <FileUpload
-                onFilesAdded={this.onAddFiles.bind(this)}
-              />
-              { this.renderItems() }
-            </Modal.Content>
-            <Modal.Actions>
-              <Button
-                content={i18n.t('Common.buttons.save')}
-                disabled={!(this.state.items && this.state.items.length)}
-                primary
-                onClick={this.onSave.bind(this)}
-              />
-              <Button
-                content={i18n.t('Common.buttons.cancel')}
-                inverted
-                primary
-                onClick={this.onClose.bind(this)}
-              />
-            </Modal.Actions>
-          </Modal>
+          <ModalContext.Consumer>
+            { (mountNode) => (
+              <Modal
+                centered={false}
+                className='file-upload-modal'
+                mountNode={mountNode}
+                open
+              >
+                <Dimmer
+                  active={this.state.saving}
+                  inverted
+                >
+                  <Loader
+                    content={i18n.t('FileUploadModal.loader')}
+                  />
+                </Dimmer>
+                { this.renderErrors() }
+                <Modal.Header
+                  content={this.props.title || i18n.t('FileUploadModal.title')}
+                />
+                <Modal.Content>
+                  <FileUpload
+                    onFilesAdded={this.onAddFiles.bind(this)}
+                  />
+                  { this.renderItems() }
+                </Modal.Content>
+                <Modal.Actions>
+                  <Button
+                    content={i18n.t('Common.buttons.save')}
+                    disabled={!(this.state.items && this.state.items.length)}
+                    primary
+                    onClick={this.onSave.bind(this)}
+                  />
+                  <Button
+                    basic
+                    content={i18n.t('Common.buttons.cancel')}
+                    onClick={this.onClose.bind(this)}
+                  />
+                </Modal.Actions>
+              </Modal>
+            )}
+          </ModalContext.Consumer>
         )}
       </>
     );

package/types/components/FuzzyDate.js.flow

@@ -14,6 +14,7 @@ import {
 import _ from 'underscore';
 import i18n from '../i18n/i18n';
 import DateField from './DateInput';
+import ModalContext from '../context/ModalContext';
 import './FuzzyDate.css';
 
 type DateInput = {
@@ -334,110 +335,119 @@ class FuzzyDate extends Component<Props, State> {
           onClick={this.onEdit.bind(this)}
           onChange={this.onClear.bind(this)}
         />
-        <Modal
-          as={Form}
-          className='fuzzy-date-modal'
-          open={this.state.modal}
-          onClose={this.onClose.bind(this)}
-        >
-          <Modal.Header
-            content={this.props.title || i18n.t('FuzzyDate.title')}
-          />
-          <Modal.Content>
-            <Form.Input
-              className='accuracy-container'
-              label={i18n.t('FuzzyDate.labels.accuracy')}
+        <ModalContext.Consumer>
+          { (mountNode) => (
+            <Modal
+              as={Form}
+              className='fuzzy-date-modal'
+              mountNode={mountNode}
+              open={this.state.modal}
+              onClose={this.onClose.bind(this)}
             >
-              <Checkbox
-                checked={this.state.accuracy === ACCURACY_YEAR}
-                label={i18n.t('FuzzyDate.accuracy.year')}
-                name='accuracy'
-                onChange={this.onAccuracyChange.bind(this)}
-                radio
-                value={ACCURACY_YEAR}
+              <Modal.Header
+                content={this.props.title || i18n.t('FuzzyDate.title')}
               />
-              <Checkbox
-                checked={this.state.accuracy === ACCURACY_MONTH}
-                label={i18n.t('FuzzyDate.accuracy.month')}
-                name='accuracy'
-                onChange={this.onAccuracyChange.bind(this)}
-                radio
-                value={ACCURACY_MONTH}
-              />
-              <Checkbox
-                checked={this.state.accuracy === ACCURACY_DATE}
-                label={i18n.t('FuzzyDate.accuracy.date')}
-                name='accuracy'
-                onChange={this.onAccuracyChange.bind(this)}
-                radio
-                value={ACCURACY_DATE}
-              />
-            </Form.Input>
-            <Form.Group>
-              { this.renderYear('startDate') }
-              { this.renderMonth('startDate') }
-              { this.renderDate('startDate') }
-              { !this.state.range && (
-                <div
-                  className='button-container'
+              <Modal.Content>
+                <Form.Input
+                  className='accuracy-container'
+                  label={i18n.t('FuzzyDate.labels.accuracy')}
                 >
-                  <Button
-                    basic
-                    content={i18n.t('FuzzyDate.buttons.addRange')}
-                    icon='plus'
-                    onClick={this.onRangeChange.bind(this)}
+                  <Checkbox
+                    checked={this.state.accuracy === ACCURACY_YEAR}
+                    id='accuracy-year'
+                    label={i18n.t('FuzzyDate.accuracy.year')}
+                    name='accuracy'
+                    onChange={this.onAccuracyChange.bind(this)}
+                    radio
+                    value={ACCURACY_YEAR}
                   />
-                </div>
-              )}
-            </Form.Group>
-            { this.state.range && (
-              <Form.Group>
-                { this.renderYear('endDate') }
-                { this.renderMonth('endDate') }
-                { this.renderDate('endDate') }
-                <div
-                  className='button-container'
-                >
-                  <Button
-                    basic
-                    content={i18n.t('FuzzyDate.buttons.removeRange')}
-                    icon='times'
-                    onClick={this.onRangeChange.bind(this)}
+                  <Checkbox
+                    checked={this.state.accuracy === ACCURACY_MONTH}
+                    id='accuracy-month'
+                    label={i18n.t('FuzzyDate.accuracy.month')}
+                    name='accuracy'
+                    onChange={this.onAccuracyChange.bind(this)}
+                    radio
+                    value={ACCURACY_MONTH}
                   />
-                </div>
-              </Form.Group>
-            )}
-            { this.props.description && (
-              <Form.Input
-                label={i18n.t('FuzzyDate.labels.description')}
-              >
-                <TextArea
-                  onChange={this.onDescriptionChange.bind(this)}
-                  value={this.state.description}
-                />
-              </Form.Input>
-            )}
-          </Modal.Content>
-          <Modal.Actions>
-            <Button
-              onClick={this.onSave.bind(this)}
-              primary
-              size='medium'
-              type='submit'
-            >
-              { i18n.t('Common.buttons.save') }
-            </Button>
-            <Button
-              inverted
-              onClick={this.onClose.bind(this)}
-              primary
-              size='medium'
-              type='button'
-            >
-              { i18n.t('Common.buttons.cancel') }
-            </Button>
-          </Modal.Actions>
-        </Modal>
+                  <Checkbox
+                    checked={this.state.accuracy === ACCURACY_DATE}
+                    id='accuracy-date'
+                    label={i18n.t('FuzzyDate.accuracy.date')}
+                    name='accuracy'
+                    onChange={this.onAccuracyChange.bind(this)}
+                    radio
+                    value={ACCURACY_DATE}
+                  />
+                </Form.Input>
+                <Form.Group>
+                  { this.renderYear('startDate') }
+                  { this.renderMonth('startDate') }
+                  { this.renderDate('startDate') }
+                  { !this.state.range && (
+                    <div
+                      className='button-container'
+                    >
+                      <Button
+                        basic
+                        content={i18n.t('FuzzyDate.buttons.addRange')}
+                        icon='plus'
+                        onClick={this.onRangeChange.bind(this)}
+                      />
+                    </div>
+                  )}
+                </Form.Group>
+                { this.state.range && (
+                  <Form.Group>
+                    { this.renderYear('endDate') }
+                    { this.renderMonth('endDate') }
+                    { this.renderDate('endDate') }
+                    <div
+                      className='button-container'
+                    >
+                      <Button
+                        basic
+                        content={i18n.t('FuzzyDate.buttons.removeRange')}
+                        icon='times'
+                        onClick={this.onRangeChange.bind(this)}
+                      />
+                    </div>
+                  </Form.Group>
+                )}
+                { this.props.description && (
+                  <Form.Input
+                    id='description'
+                    label={i18n.t('FuzzyDate.labels.description')}
+                  >
+                    <TextArea
+                      id='description'
+                      onChange={this.onDescriptionChange.bind(this)}
+                      value={this.state.description}
+                    />
+                  </Form.Input>
+                )}
+              </Modal.Content>
+              <Modal.Actions>
+                <Button
+                  onClick={this.onSave.bind(this)}
+                  primary
+                  size='medium'
+                  type='submit'
+                >
+                  { i18n.t('Common.buttons.save') }
+                </Button>
+                <Button
+                  basic
+                  onClick={this.onClose.bind(this)}
+                  size='medium'
+                  type='button'
+                >
+                  { i18n.t('Common.buttons.cancel') }
+                </Button>
+              </Modal.Actions>
+            </Modal>
+          )}
+        </ModalContext.Consumer>
       </>
     );
   }
@@ -459,6 +469,7 @@ class FuzzyDate extends Component<Props, State> {
 
     return (
       <Form.Input
+        id='date-dropdown'
         label={i18n.t('FuzzyDate.labels.date')}
       >
         <Dropdown
@@ -486,9 +497,11 @@ class FuzzyDate extends Component<Props, State> {
 
     return (
       <Form.Input
+        id='month-dropdown'
         label={i18n.t('FuzzyDate.labels.month')}
       >
         <Dropdown
+          id='month-dropdown'
           onChange={this.onMonthChange.bind(this, property)}
           options={_.map(this.state.calendar.listMonths(), (m, i) => ({ key: i, value: i, text: m }))}
           selection
@@ -508,9 +521,11 @@ class FuzzyDate extends Component<Props, State> {
   renderYear(property: string) {
     return (
       <Form.Input
+        id='year'
         label={i18n.t('FuzzyDate.labels.year')}
       >
         <Input
+          id='year'
           onChange={this.onYearChange.bind(this, property)}
           type='number'
           value={this.state[property].year || ''}

package/types/components/ListFilters.js.flow

@@ -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/types/components/ListTable.js.flow

@@ -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