@performant-software/semantic-components 0.5.1

package/src/components/Items.js

@@ -0,0 +1,365 @@
+// @flow
+
+import React, { Component, type Element } from 'react';
+import {
+  Button,
+  Card,
+  Checkbox,
+  Header,
+  Icon,
+  Item,
+  Segment
+} from 'semantic-ui-react';
+import _ from 'underscore';
+import i18n from '../i18n/i18n';
+import useList from './List';
+import useItemsToggle, { Views } from './ItemsToggle';
+import Draggable from './Draggable';
+import './Items.css';
+
+import type { Props as ListProps } from './List';
+
+type Props = ListProps & {
+  children: Element<any>,
+  className: string,
+  isRowSelected?: (item: any) => boolean,
+  items: Array<any>,
+  loading: boolean,
+  onDrag?: (dragIndex: number, hoverIndex: number) => void,
+  onRowSelect?: (item: any) => void,
+  onSelectAllRows?: (items: Array<any>) => void,
+  renderAdditionalContent?: (item: any) => Element<any>,
+  renderDescription?: (item: any) => Element<any>,
+  renderEmptyList: () => Element<any>,
+  renderExtra?: (item: any) => Element<any>,
+  renderHeader?: (item: any) => Element<any>,
+  renderImage?: (item: any) => Element<any>,
+  renderMeta?: (item: any) => Element<any>,
+  selectable?: boolean,
+  view: number
+};
+
+/**
+ * The Items component is used as the presentation for a list of records. The component renders both a list
+ * (see Semantic-UI List) and grid (see Semantic-UI Card) views.
+ */
+class Items extends Component<Props, {}> {
+  static defaultProps: any;
+
+  /**
+   * Returns the list of actions for the passed item.
+   *
+   * @param item
+   *
+   * @returns {Array<*>}
+   */
+  getActions(item) {
+    return this.props.actions
+      .filter((action) => !action.accept || action.accept(item))
+      .map((action) => {
+        let defaults = {};
+
+        if (action.name === 'edit') {
+          defaults = {
+            basic: true,
+            label: i18n.t('ItemList.actions.edit')
+          };
+        } else if (action.name === 'copy') {
+          defaults = {
+            basic: true,
+            label: i18n.t('ItemList.actions.copy')
+          };
+        } else if (action.name === 'delete') {
+          defaults = {
+            basic: true,
+            color: 'red',
+            label: i18n.t('ItemList.actions.delete')
+          };
+        }
+
+        return _.defaults(action, defaults);
+      });
+  }
+
+  /**
+   * Returns a space delimited string of class names.
+   *
+   * @returns {string}
+   */
+  getClassName() {
+    const classNames = ['item-list'];
+
+    if (this.props.className) {
+      classNames.push(this.props.className);
+    }
+
+    return classNames.join(' ');
+  }
+
+  /**
+   * Returns true if the component has the necessary props to render itself in the "selectable" state.
+   *
+   * @returns {boolean}
+   */
+  isSelectable() {
+    return !!(this.props.selectable && this.props.isRowSelected && this.props.onRowSelect);
+  }
+
+  /**
+   * Renders the Items component.
+   *
+   * @returns {*}
+   */
+  render() {
+    return (
+      <div
+        className={this.getClassName()}
+      >
+        { this.renderList() }
+        { this.renderGrid() }
+        { this.renderEmptyList() }
+        { this.props.children }
+      </div>
+    );
+  }
+
+  /**
+   * Renders the card for the passed item.
+   *
+   * @param item
+   * @param index
+   *
+   * @returns {*}
+   */
+  renderCard(item, index) {
+    const card = (
+      <Card
+        key={item.id || index}
+      >
+        { this.props.renderImage && this.props.renderImage(item) }
+        <Card.Content>
+          { this.props.renderHeader && (
+            <Card.Header>
+              { this.props.renderHeader(item) }
+            </Card.Header>
+          )}
+          { this.props.renderMeta && (
+            <Card.Meta>
+              { this.props.renderMeta(item) }
+            </Card.Meta>
+          )}
+          { this.props.renderDescription && (
+            <Card.Description>
+              { this.props.renderDescription(item) }
+            </Card.Description>
+          )}
+        </Card.Content>
+        { this.props.renderExtra && (
+          <Card.Content
+            extra
+          >
+            { this.props.renderExtra(item) }
+          </Card.Content>
+        )}
+        { this.props.actions && this.props.actions.length && (
+          <Card.Content
+            extra
+            textAlign='center'
+          >
+            { _.map(this.getActions(item), (action, actionIndex) => (
+              <Button
+                basic
+                color={action.resolveColor ? action.resolveColor(item) : action.color}
+                icon={action.resolveIcon ? action.resolveIcon(item) : action.icon}
+                key={actionIndex}
+                onClick={action.onClick.bind(this, item)}
+              />
+            ))}
+            { this.isSelectable() && (
+              <Button
+                basic
+                color={this.props.isRowSelected && this.props.isRowSelected(item) ? 'green' : undefined}
+                icon='checkmark'
+                onClick={this.props.onRowSelect && this.props.onRowSelect.bind(this, item)}
+              />
+            )}
+          </Card.Content>
+        )}
+      </Card>
+    );
+
+    if (!this.props.onDrag) {
+      return card;
+    }
+
+    return (
+      <Draggable
+        id={item.id || item.uid}
+        index={index}
+        item={item}
+        key={item.id || item.uid}
+        onDrag={this.props.onDrag.bind(this)}
+      >
+        { card }
+      </Draggable>
+    );
+  }
+
+  /**
+   * Renders the empty list.
+   *
+   * @returns {null|*}
+   */
+  renderEmptyList() {
+    if (this.props.loading || (this.props.items && this.props.items.length)) {
+      return null;
+    }
+
+    if (this.props.renderEmptyList) {
+      return this.props.renderEmptyList();
+    }
+
+    return (
+      <Segment
+        className='empty-list'
+        padded='very'
+        textAlign='center'
+      >
+        <Header
+          icon
+        >
+          <Icon
+            name='file outline'
+          />
+        </Header>
+        { this.props.renderEmptyMessage() }
+      </Segment>
+    );
+  }
+
+  /**
+   * Renders the grid view.
+   *
+   * @returns {null|*}
+   */
+  renderGrid() {
+    if (this.props.view !== Views.grid || !(this.props.items && this.props.items.length)) {
+      return null;
+    }
+
+    return (
+      <Card.Group>
+        { _.map(this.props.items, this.renderCard.bind(this)) }
+      </Card.Group>
+    );
+  }
+
+  /**
+   * Renders the list item for the passed item.
+   *
+   * @param item
+   * @param index
+   *
+   * @returns {*}
+   */
+  renderItem(item, index) {
+    const listItem = (
+      <Item
+        key={item.id || index}
+      >
+        { this.props.renderImage && (
+          <Item.Image>
+            { this.props.renderImage(item) }
+          </Item.Image>
+        )}
+        <Item.Content
+          className='primary-content'
+        >
+          { this.props.renderHeader && (
+            <Item.Header>
+              { this.props.renderHeader(item) }
+            </Item.Header>
+          )}
+          { this.props.renderMeta && (
+            <Item.Meta>
+              { this.props.renderMeta(item) }
+            </Item.Meta>
+          )}
+          { this.props.renderDescription && (
+            <Item.Description>
+              { this.props.renderDescription(item) }
+            </Item.Description>
+          )}
+          { this.props.renderExtra && (
+            <Item.Extra>
+              { this.props.renderExtra(item) }
+            </Item.Extra>
+          )}
+          { _.map(this.getActions(item), (action, actionIndex) => (
+            <Button
+              basic={action.basic}
+              color={action.resolveColor ? action.resolveColor(item) : action.color}
+              content={action.resolveName ? action.resolveName(item) : action.label}
+              key={actionIndex}
+              icon={action.resolveIcon ? action.resolveIcon(item) : action.icon}
+              onClick={action.onClick.bind(this, item)}
+            />
+          ))}
+        </Item.Content>
+        { this.props.renderAdditionalContent && this.props.renderAdditionalContent(item) }
+        { this.isSelectable() && (
+          <div
+            className='checkbox-container'
+          >
+            <Checkbox
+              checked={this.props.isRowSelected && this.props.isRowSelected(item)}
+              onChange={this.props.onRowSelect && this.props.onRowSelect.bind(this, item)}
+            />
+          </div>
+        )}
+      </Item>
+    );
+
+    if (!this.props.onDrag) {
+      return listItem;
+    }
+
+    return (
+      <Draggable
+        id={item.id || item.uid}
+        index={index}
+        item={item}
+        key={item.id || item.uid}
+        onDrag={this.props.onDrag.bind(this)}
+      >
+        { listItem }
+      </Draggable>
+    );
+  }
+
+  /**
+   * Renders the list view.
+   *
+   * @returns {null|*}
+   */
+  renderList() {
+    if (this.props.view !== Views.list || !(this.props.items && this.props.items.length)) {
+      return null;
+    }
+
+    return (
+      <Item.Group
+        divided
+        relaxed='very'
+      >
+        { _.map(this.props.items, this.renderItem.bind(this)) }
+      </Item.Group>
+    );
+  }
+}
+
+Items.defaultProps = {
+  actions: []
+};
+
+export default useItemsToggle(useList(Items));

package/src/components/ItemsToggle.js

@@ -0,0 +1,168 @@
+// @flow
+
+import React, { Component, type ComponentType } from 'react';
+import { Button, Dropdown } from 'semantic-ui-react';
+import _ from 'underscore';
+import { SORT_ASCENDING } from './DataList';
+
+type Sort = {
+  key: string,
+  text: string,
+  value: string,
+  direction?: ?string
+};
+
+type Props = {
+  onSort?: (sortColumn: string, sortDirection?: ?string) => void,
+  sort?: Array<Sort>,
+  sortColumn?: string,
+  sortDirection?: string
+};
+
+type State = {
+  view: number
+};
+
+const Views = {
+  list: 0,
+  grid: 1
+};
+
+/**
+ * Returns a function to wrap the passed component in a ItemToggle. The ItemToggle component can be used to toggle a
+ * list of records between list and grid views. It will also render a sort dropdown component if a list of sort
+ * properties is provided.
+ *
+ * @param WrappedComponent
+ */
+const useItemsToggle = (WrappedComponent: ComponentType<any>) => (
+  class extends Component<Props, State> {
+    // Default props
+    static defaultProps = {
+      sort: []
+    };
+
+    // Sort dropdown ref
+    sortDropdown: typeof Dropdown;
+
+    /**
+     * Constructs a new ItemsToggle component.
+     *
+     * @param props
+     */
+    constructor(props: any) {
+      super(props);
+
+      this.state = {
+        view: Views.list
+      };
+    }
+
+    /**
+     * Renders the sort value for the current option.
+     *
+     * @returns {*}
+     */
+    getSortValue() {
+      const sort = _.find(this.props.sort, { value: this.props.sortColumn });
+      return sort && sort.text;
+    }
+
+    /**
+     * Calls the onSort prop.
+     *
+     * @param sort
+     *
+     * @returns {*|void}
+     */
+    onSort(sort: Sort) {
+      if (!this.props.onSort) {
+        return;
+      }
+
+      let sortDirection;
+
+      if (sort.value !== this.props.sortColumn) {
+        sortDirection = sort.direction;
+      }
+
+      this.props.onSort(sort.value, sortDirection);
+    }
+
+    /**
+     * Renders the ItemsToggle component.
+     *
+     * @returns {*}
+     */
+    render() {
+      return (
+        <WrappedComponent
+          {...this.props}
+          renderListHeader={this.renderHeader.bind(this)}
+          view={this.state.view}
+        />
+      );
+    }
+
+    /**
+     * Renders the list header icons:
+     * <ul>
+     *   <li>List/Grid view toggle</li>
+     *   <li>Sort dropdown</li>
+     * </ul>
+     *
+     * @returns {*}
+     */
+    renderHeader() {
+      return (
+        <>
+          <Button
+            active={this.state.view === Views.list}
+            basic
+            icon='list'
+            onClick={() => this.setState({ view: Views.list })}
+          />
+          <Button
+            active={this.state.view === Views.grid}
+            basic
+            icon='grid layout'
+            onClick={() => this.setState({ view: Views.grid })}
+          />
+          { this.props.sort && this.props.sort.length > 1 && this.props.onSort && (
+            <Button.Group
+              basic
+              style={{
+                fontSize: 'inherit'
+              }}
+            >
+              <Button
+                content={this.getSortValue()}
+                icon={this.props.sortDirection === SORT_ASCENDING ? 'sort alphabet up' : 'sort alphabet down'}
+                onClick={(e) => this.sortDropdown.handleClick(e)}
+              />
+              <Dropdown
+                className='button icon'
+                floating
+                options={_.map(this.props.sort, (sort) => ({
+                  ...sort,
+                  onClick: this.onSort.bind(this, sort)
+                }))}
+                ref={(sortDropdown) => {
+                  this.sortDropdown = sortDropdown;
+                }}
+                trigger={<></>}
+                value={this.props.sortColumn}
+              />
+            </Button.Group>
+          )}
+        </>
+      );
+    }
+  }
+);
+
+export default useItemsToggle;
+
+export {
+  Views
+};

package/src/components/KeyboardField.css

@@ -0,0 +1,4 @@
+.field.keyboard-field .hg-candidate-box {
+    top: 56px;
+    left: 4px;
+}

package/src/components/KeyboardField.js

@@ -0,0 +1,147 @@
+// @flow
+
+import { Keyboard } from '@performant-software/shared-components';
+import React, { Component, type Node } from 'react';
+import { Form, Segment, Transition } from 'semantic-ui-react';
+import i18n from '../i18n/i18n';
+import LinkLabel from './LinkLabel';
+import './KeyboardField.css';
+
+type Props = {
+  autoFocus?: boolean,
+  children: Node<any>,
+  className?: string,
+  error?: boolean,
+  id?: string,
+  label: string,
+  layout: any,
+  name: string,
+  onChange: (e: ?Event, { value: string }) => void,
+  required: boolean,
+  value: string,
+  visible: boolean
+};
+
+type State = {
+  showKeyboard: boolean
+};
+
+class KeyboardField extends Component<Props, State> {
+  static defaultProps: any;
+
+  /**
+   * Constructs a new KeyboardField component.
+   *
+   * @param props
+   */
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      showKeyboard: false
+    };
+  }
+
+  /**
+   * Hides the keyboard when the parent component is no longer visible.
+   *
+   * @param prevProps
+   */
+  componentDidUpdate(prevProps: Props) {
+    if (prevProps.visible && !this.props.visible) {
+      this.setState({ showKeyboard: false });
+    }
+  }
+
+  /**
+   * Triggers the text input change.
+   *
+   * @param e
+   * @param value
+   */
+  onInputChange(e: Event, value: any) {
+    this.props.onChange(e, value);
+  }
+
+  /**
+   * Triggers the keyboard input change.
+   *
+   * @param value
+   */
+  onKeyboardChange(value: any) {
+    this.props.onChange(null, { value });
+  }
+
+  /**
+   * Renders the KeyboardField component.
+   *
+   * @returns {*}
+   */
+  render() {
+    return (
+      <Form.Field
+        className='keyboard-field'
+      >
+        <Form.Input
+          autoFocus={this.props.autoFocus}
+          className={this.props.className}
+          error={this.props.error}
+          id={this.props.id}
+          input={{
+            'aria-label': this.props.name
+          }}
+          label={this.renderLabel()}
+          name={this.props.name}
+          onChange={this.onInputChange.bind(this)}
+          required={this.props.required}
+          value={this.props.value}
+        >
+          { this.props.children }
+        </Form.Input>
+        <Transition
+          duration={{
+            hide: 50,
+            show: 500
+          }}
+          visible={this.state.showKeyboard}
+        >
+          <Segment>
+            <Keyboard
+              layout={this.props.layout}
+              onChange={this.onKeyboardChange.bind(this)}
+              value={this.props.value}
+              keyboardClass={this.props.name}
+            />
+          </Segment>
+        </Transition>
+      </Form.Field>
+    );
+  }
+
+  /**
+   * Renders the input label.
+   *
+   * @returns {*}
+   */
+  renderLabel() {
+    return (
+      <LinkLabel
+        content={this.state.showKeyboard
+          ? i18n.t('KeyboardField.labels.hideKeyboard')
+          : i18n.t('KeyboardField.labels.showKeyboard')}
+        htmlFor={this.props.name}
+        label={this.props.label}
+        onClick={() => this.setState((state) => ({ showKeyboard: !state.showKeyboard }))}
+      />
+    );
+  }
+}
+
+KeyboardField.defaultProps = {
+  autoFocus: false,
+  className: '',
+  error: false,
+  id: ''
+};
+
+export default KeyboardField;

package/src/components/LazyDocument.css

@@ -0,0 +1,21 @@
+.lazy-document.ui.segment {
+  padding: 0;
+}
+
+.lazy-document.ui.segment .buttons {
+  display: flex;
+  flex-direction: column;
+}
+
+.lazy-document.ui.segment .buttons .ui.button {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+
+.lazy-document .placeholder-image.ui.image {
+  background-color: #f9fafb;
+  box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
+  padding-top: 20%;
+  padding-bottom: 20%;
+  text-align: center;
+}