@performant-software/semantic-components 0.5.1

package/src/components/EditModal.js

@@ -0,0 +1,99 @@
+// @flow
+
+import { useEditContainer, type EditContainerProps } from '@performant-software/shared-components';
+import React, { type ComponentType, useState } from 'react';
+import {
+  Button,
+  Dimmer,
+  Loader,
+  Message,
+  Modal
+} from 'semantic-ui-react';
+import Toaster from './Toaster';
+import i18n from '../i18n/i18n';
+import './EditModal.css';
+
+type Props = EditContainerProps & {
+  component: ComponentType<any>,
+  onClose: () => void,
+  onSave: () => Promise<any>,
+  showLoading: boolean
+};
+
+const EditModal = (props: Props) => {
+  const OuterComponent = props.component;
+
+  const [showToaster, setShowToaster] = useState(false);
+  const hasErrors = !!(props.errors && props.errors.length);
+
+  return (
+    <OuterComponent
+      {...props}
+    >
+      { props.showLoading && props.loading && (
+        <Dimmer
+          active={props.loading}
+          inverted
+        >
+          <Loader
+            content={i18n.t('Common.messages.loading')}
+          />
+        </Dimmer>
+      )}
+      { showToaster && hasErrors && (
+        <Toaster
+          onDismiss={() => setShowToaster(false)}
+          timeout={0}
+          type={Toaster.MessageTypes.negative}
+        >
+          <Message.Header
+            content={i18n.t('Common.messages.error.header')}
+          />
+          <Message.List
+            items={props.errors}
+          />
+        </Toaster>
+      )}
+      <Modal.Actions
+        className='edit-modal-actions'
+      >
+        <Button
+          disabled={props.saving}
+          onClick={() => {
+            setShowToaster(true);
+            return props.onSave();
+          }}
+          primary
+          size='medium'
+          type='submit'
+        >
+          { i18n.t('Common.buttons.save') }
+          { props.saving && (
+            <Loader
+              active
+              className='saving'
+              inline
+              size='tiny'
+            />
+          )}
+        </Button>
+        <Button
+          disabled={props.saving}
+          inverted
+          onClick={props.onClose.bind(this)}
+          primary
+          size='medium'
+          type='button'
+        >
+          { i18n.t('Common.buttons.cancel') }
+        </Button>
+      </Modal.Actions>
+    </OuterComponent>
+  );
+};
+
+EditModal.defaultProps = {
+  showLoading: true
+};
+
+export default useEditContainer(EditModal);

package/src/components/EditPage.css

@@ -0,0 +1,7 @@
+.edit-page .button-container {
+  text-align: right;
+}
+
+.edit-page .ui.menu:not(.vertical) .item>.button {
+  margin-right: 0.25em;
+}

package/src/components/EditPage.js

@@ -0,0 +1,249 @@
+// @flow
+
+import { useEditContainer, type EditContainerProps } from '@performant-software/shared-components';
+import React, { Component, type ComponentType } from 'react';
+import {
+  Dimmer,
+  Form,
+  Loader,
+  Menu,
+  Message,
+  type MenuProps
+} from 'semantic-ui-react';
+import _ from 'underscore';
+import CancelButton from './CancelButton';
+import SaveButton from './SaveButton';
+import Toaster from './Toaster';
+import i18n from '../i18n/i18n';
+import './EditPage.css';
+
+type Props = EditContainerProps & {
+  className?: string,
+  component: ComponentType<any>,
+  menu?: MenuProps,
+  onClose: () => void,
+  onSave: () => Promise<any>,
+  showLoading: boolean
+};
+
+type State = {
+  currentTab: string,
+  showToaster: boolean
+};
+
+class EditPage extends Component<Props, State> {
+  static defaultProps: any;
+
+  /**
+   * Constructs a new EditPage component.
+   *
+   * @param props
+   */
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      currentTab: '',
+      showToaster: false
+    };
+  }
+
+  /**
+   * Sets the current tab to the first tab in the array.
+   */
+  componentDidMount() {
+    if (this.props.menu) {
+      const tab = _.first(this.props.menu.items);
+      this.setState({ currentTab: tab && tab.key });
+    }
+  }
+
+  /**
+   * Resets the <code>showToaster</code> property when the set of errors changes.
+   *
+   * @param prevProps
+   */
+  componentDidUpdate(prevProps: Props) {
+    if (!_.isEmpty(this.props.errors) && !_.isEmpty(prevProps.errors) && prevProps.errors !== this.props.errors) {
+      this.setState({ showToaster: true });
+    }
+  }
+
+  /**
+   * Shows the toaster and calls the onSave prop.
+   *
+   * @returns {*}
+   */
+  onSave() {
+    this.setState({ showToaster: true });
+    return this.props.onSave();
+  }
+
+  /**
+   * Renders the EditPage component.
+   *
+   * @returns {*}
+   */
+  render() {
+    return (
+      <Dimmer.Dimmable
+        as='div'
+        className={`edit-page ${this.props.className || ''}`}
+      >
+        { this.renderLoading() }
+        <Form
+          noValidate
+        >
+          { this.renderMenu() }
+          { this.renderButtons() }
+          { this.renderComponent() }
+          { this.renderToaster() }
+        </Form>
+      </Dimmer.Dimmable>
+    );
+  }
+
+  /**
+   * Renders the buttons and container if no menu is present.
+   *
+   * @returns {null|*}
+   */
+  renderButtons() {
+    if (this.props.menu) {
+      return null;
+    }
+
+    return (
+      <div
+        className='button-container'
+      >
+        <SaveButton
+          onClick={this.onSave.bind(this)}
+          saving={this.props.saving}
+        />
+        <CancelButton
+          disabled={this.props.saving}
+          onClick={this.props.onClose.bind(this)}
+        />
+      </div>
+    );
+  }
+
+  /**
+   * Renders the wrapped component.
+   *
+   * @returns {*}
+   */
+  renderComponent() {
+    const WrappedComponent = this.props.component;
+
+    return (
+      <WrappedComponent
+        {...this.props}
+        currentTab={this.state.currentTab}
+      />
+    );
+  }
+
+  /**
+   * Renders the loading indicator.
+   *
+   * @returns {null|*}
+   */
+  renderLoading() {
+    if (!(this.props.showLoading && this.props.loading)) {
+      return null;
+    }
+
+    return (
+      <Dimmer
+        active={this.props.loading}
+        inverted
+      >
+        <Loader
+          content={i18n.t('Common.messages.loading')}
+        />
+      </Dimmer>
+    );
+  }
+
+  /**
+   * Renders the menu (if present).
+   *
+   * @returns {null|*}
+   */
+  renderMenu() {
+    if (!this.props.menu) {
+      return null;
+    }
+
+    return (
+      <Menu
+        {..._.omit(this.props.menu, 'items')}
+      >
+        { this.props.menu && _.map(this.props.menu.items, (item) => (
+          <Menu.Item
+            active={item.key === this.state.currentTab}
+            key={item.key}
+            name={item.name}
+            onClick={() => this.setState({ currentTab: item.key })}
+          />
+        ))}
+        <Menu.Menu
+          position='right'
+        >
+          <Menu.Item>
+            <SaveButton
+              onClick={this.onSave.bind(this)}
+              saving={this.props.saving}
+            />
+            <CancelButton
+              disabled={this.props.saving}
+              onClick={this.props.onClose.bind(this)}
+            />
+          </Menu.Item>
+        </Menu.Menu>
+      </Menu>
+    );
+  }
+
+  /**
+   * Renders the toaster component.
+   *
+   * @returns {null|*}
+   */
+  renderToaster() {
+    if (!this.state.showToaster) {
+      return null;
+    }
+
+    if (!(this.props.errors && this.props.errors.length)) {
+      return null;
+    }
+
+    return (
+      <Toaster
+        onDismiss={() => this.setState({ showToaster: false })}
+        timeout={0}
+        type={Toaster.MessageTypes.negative}
+      >
+        <Message.Header
+          content={i18n.t('Common.messages.error.header')}
+        />
+        <Message.List
+          items={this.props.errors}
+        />
+      </Toaster>
+    );
+  }
+}
+
+EditPage.defaultProps = {
+  showLoading: true
+};
+
+export default useEditContainer(EditPage);
+
+export type EditPageProps = EditContainerProps & {
+  currentTab: string
+};

package/src/components/EmbeddedList.css

@@ -0,0 +1,7 @@
+.embedded-list {
+   width: 100%;
+ }
+
+.embedded-list .list-buttons {
+  margin-top: 10px;
+}

package/src/components/EmbeddedList.js

@@ -0,0 +1,278 @@
+// @flow
+
+import React, { Component, type ComponentType } from 'react';
+import { Table } from 'semantic-ui-react';
+import uuid from 'react-uuid';
+import _ from 'underscore';
+import DataTable from './DataTable';
+import Draggable from './Draggable';
+import './EmbeddedList.css';
+
+import type { Action } from './List';
+import type { Column } from './DataTable';
+
+type ListButton = {
+  render: () => ComponentType<any>
+};
+
+type Props = {
+  actions: Array<Action>,
+  addButton?: {
+    location: string,
+    color: string
+  },
+  buttons?: Array<ListButton>,
+  className?: string,
+  columns: Array<Column>,
+  configurable: boolean,
+  items: Array<any>,
+  modal?: {
+    component: ComponentType<any>,
+    props: any,
+    state: any
+  },
+  onCopy?: (item: any) => any,
+  onDelete: (item: any) => void,
+  onDrag?: (dragIndex: number, hoverIndex: number) => void,
+  onSave?: (item: any) => void,
+  renderDeleteModal?: ({ selectedItem: any, onCancel: () => void, onConfirm: () => void }) => void,
+  renderEmptyRow?: () => void,
+  selectable: boolean,
+  onRowSelect: (Array<{id: number}>),
+  selectedRows: Array<{id: number}>,
+  showRecordCount: boolean,
+};
+
+type State = {
+  sortColumn: ?string,
+  sortDirection: ?string
+};
+
+const PATH_DELIMITER = '.';
+const SORT_ASCENDING = 'ascending';
+const SORT_DESCENDING = 'descending';
+
+/**
+ * The EmbeddedList component can be used to display a collection of records that live within a parent object. This is
+ * especially useful when the collection is to be saved at the same time as the parent.
+ */
+class EmbeddedList extends Component<Props, State> {
+  static defaultProps: any;
+
+  /**
+   * Constructs a new EmbeddedList component.
+   *
+   * @param props
+   */
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      sortColumn: null,
+      sortDirection: null
+    };
+  }
+
+  /**
+   * Sorts the table by the first column.
+   */
+  componentDidMount() {
+    const column = _.find(this.props.columns, (c) => c.sortable !== false);
+
+    if (column) {
+      this.onColumnClick(column);
+    }
+  }
+
+  /**
+   * Returns the sorted, filtered list of items.
+   *
+   * @returns {*}
+   */
+  getItems() {
+    const { items } = this.props;
+    const { sortColumn, sortDirection } = this.state;
+
+    return _.orderBy(_.filter(items, (item) => !item._destroy), sortColumn, sortDirection);
+  }
+
+  /**
+   * Sorts the table by the passed column.
+   *
+   * @param column
+   */
+  onColumnClick(column: Column) {
+    /*
+     * We'll disable the column sorting if the table rows are draggable. Making the table rows draggable implies
+     * that the sorting will be done manually. Allowing column click sorting could make things confusing.
+     */
+    if (this.props.onDrag) {
+      return;
+    }
+
+    /*
+     * If the column is not sortable, we'll do nothing. Check explicity for "false" here because the default behavior
+     * should allow columns to be sortable.
+     */
+    if (column.sortable === false) {
+      return;
+    }
+
+    const sortColumn = column.name;
+    let sortDirection = SORT_ASCENDING;
+
+    if (column.name === this.state.sortColumn) {
+      sortDirection = this.state.sortDirection === SORT_ASCENDING ? SORT_DESCENDING : SORT_ASCENDING;
+    }
+
+    this.setState({ sortColumn, sortDirection });
+  }
+
+  /**
+   * Deletes the passed item. This function returns a promise so that calls can be chained together.
+   *
+   * @param item
+   *
+   * @returns {Promise}
+   */
+  onDelete(item: any) {
+    this.props.onDelete(item);
+    return Promise.resolve();
+  }
+
+  /**
+   * Saves the passed item, resets the state, and reloads the data. This function returns a promise so that calls can
+   * be chained together.
+   *
+   * @param item
+   *
+   * @returns {Promise}
+   */
+  onSave(item: any) {
+    const uid = item.uid ? item.uid : uuid();
+
+    if (this.props.onSave) {
+      this.props.onSave({ ...item, uid });
+    }
+
+    return Promise.resolve();
+  }
+
+  /**
+   * Renders the EmbeddedList component.
+   *
+   * @returns {*}
+   */
+  render() {
+    return (
+      <DataTable
+        {...this.props}
+        actions={this.props.actions}
+        addButton={this.props.addButton}
+        buttons={this.props.buttons}
+        className={`embedded-list ${this.props.className ? this.props.className : ''}`}
+        configurable={this.props.configurable}
+        columns={this.props.columns}
+        count={this.props.items.length}
+        items={this.getItems()}
+        modal={this.props.modal}
+        onColumnClick={this.onColumnClick.bind(this)}
+        onCopy={this.props.onCopy}
+        onDrag={this.props.onDrag}
+        onDelete={this.onDelete.bind(this)}
+        onSave={this.onSave.bind(this)}
+        renderDeleteModal={this.props.renderDeleteModal}
+        renderEmptyRow={this.props.renderEmptyRow}
+        renderItem={this.renderItem.bind(this)}
+        sortColumn={this.state.sortColumn}
+        sortDirection={this.state.sortDirection}
+        tableProps={{
+          celled: true,
+          sortable: !this.props.onDrag
+        }}
+        selectable={this.props.selectable}
+        onRowSelect={this.props.onRowSelect}
+        selectedRows={this.props.selectedRows}
+        showRecordCount={this.props.showRecordCount}
+      />
+    );
+  }
+
+  /**
+   * Renders the passed item. This function should be used if the table row is draggable.
+   *
+   * @param item
+   * @param index
+   * @param children
+   *
+   * @returns {*}
+   */
+  renderItem(item: any, index: number, children: ComponentType<any>) {
+    if (this.props.onDrag) {
+      // Since the item may not be saved yet, we'll look for the ID or UID columns as the key. This is necessary to
+      // maintain the correct element when dragging.
+      const key = item.id || item.uid;
+
+      return (
+        <Draggable
+          id={key}
+          index={index}
+          item={item}
+          key={key}
+          onDrag={this.props.onDrag.bind(this)}
+        >
+          <Table.Row>
+            { children }
+          </Table.Row>
+        </Draggable>
+      );
+    }
+
+    return (
+      <Table.Row
+        key={index}
+      >
+        { children }
+      </Table.Row>
+    );
+  }
+}
+
+/**
+ * UnderscoreJS mixin to allow sorting by a property string (i.e. "person.name") and a sort
+ * direction ("ascending" or "descending").
+ */
+_.mixin({
+  orderBy: (items, property, direction) => {
+    if (!property) {
+      return items;
+    }
+
+    const sortProperty = _.property(property.split(PATH_DELIMITER));
+    let ordered = _.sortBy(items, (item) => sortProperty(item));
+
+    if (direction === SORT_DESCENDING) {
+      ordered = ordered.reverse();
+    }
+
+    return ordered;
+  }
+});
+
+EmbeddedList.defaultProps = {
+  items: [],
+  addButton: {
+    location: 'top'
+  },
+  buttons: [],
+  className: '',
+  configurable: true,
+  modal: undefined,
+  onCopy: undefined,
+  onDrag: undefined,
+  onSave: () => {},
+  renderDeleteModal: undefined,
+  renderEmptyRow: undefined
+};
+
+export default EmbeddedList;

package/src/components/FileInputButton.js

@@ -0,0 +1,54 @@
+// @flow
+
+import React, { useRef } from 'react';
+import { Button } from 'semantic-ui-react';
+
+type Props = {
+  multiple?: boolean,
+  onSelection: (files: Array<File>) => void
+};
+
+const FileInputButton = ({ onSelection, multiple, ...buttonProps }: Props) => {
+  const fileInputRef = useRef();
+
+  /**
+   * Converts the passed file list to an array.
+   *
+   * @param fileList
+   *
+   * @returns {[]}
+   */
+  const toArray = (fileList) => {
+    const array = [];
+
+    for (let i = 0; i < fileList.length; i += 1) {
+      array.push(fileList.item(i));
+    }
+
+    return array;
+  };
+
+  return (
+    <>
+      <Button
+        {...buttonProps}
+        onClick={() => fileInputRef.current && fileInputRef.current.click()}
+      />
+      <input
+        ref={fileInputRef}
+        type='file'
+        multiple={multiple}
+        onChange={(e) => onSelection(toArray(e.target.files))}
+        style={{
+          display: 'none'
+        }}
+      />
+    </>
+  );
+};
+
+FileInputButton.defaultProps = {
+  multiple: false
+};
+
+export default FileInputButton;