@performant-software/semantic-components 0.5.1

package/src/components/Selectize.js

@@ -0,0 +1,297 @@
+// @flow
+
+import React, {
+  useCallback,
+  useEffect,
+  useState,
+  type ComponentType,
+  type Element
+} from 'react';
+import {
+  Button,
+  Form,
+  Grid,
+  Icon,
+  Modal,
+  Table
+} from 'semantic-ui-react';
+import _ from 'underscore';
+import SelectizeHeader from './SelectizeHeader';
+import i18n from '../i18n/i18n';
+import useDataList from './DataList';
+import './Selectize.css';
+import useList, { type Props as ListProps } from './List';
+
+type Props = {
+  centered?: boolean,
+  collectionName: string,
+  filters?: {
+    component: ComponentType<any>,
+    defaults: any,
+    props: any,
+    onChange?: (filter: any) => Promise<any>
+  },
+  modal?: {
+    onSave: (item: any) => Promise<any>
+  },
+  multiple?: boolean,
+  onClose: () => void,
+  onLoad: (params: any) => Promise<any>,
+  onSave: (items: any) => void,
+  selectedItems: Array<any>,
+  title: string
+};
+
+type GridProps = ListProps & {
+  isSelected: (item: any) => boolean,
+  onInit: () => void,
+  onItemSelection: (item: any) => void,
+  onSelect: (item: any) => void,
+  renderHeader: (params: any) => Element<any>,
+  renderItem: (item: any) => Element<any>,
+  selectedItem: any,
+  selectedItems: Array<any>
+};
+
+const SelectizeGrid = useDataList(useList((props: GridProps) => {
+  useEffect(() => {
+    if (props.onInit) {
+      props.onInit();
+    }
+  }, []);
+
+  /**
+   * Renders a checkmark of the passed item is selected.
+   *
+   * @type {(function(*): (null|*))|*}
+   */
+  const renderCheckmark = useCallback((item: any) => {
+    if (!props.isSelected(item)) {
+      return null;
+    }
+
+    return (
+      <Icon
+        color='green'
+        name='check'
+      />
+    );
+  }, [props.selectedItems]);
+
+  /**
+   * Renders the selectize header component.
+   *
+   * @returns {JSX.Element|*}
+   */
+  const renderHeader = () => {
+    if (props.renderHeader) {
+      return props.renderHeader({
+        onItemClick: props.onItemSelection.bind(this),
+        selectedItem: props.selectedItem,
+        selectedItems: props.selectedItems,
+      });
+    }
+
+    return (
+      <SelectizeHeader
+        isSelected={(item) => props.selectedItem === item}
+        items={props.selectedItems}
+        onItemClick={props.onItemSelection.bind(this)}
+        renderItem={props.renderItem.bind(this)}
+      />
+    );
+  };
+
+  /**
+   * Renders the list of items as a table.
+   *
+   * @type {(function(): (null|*))|*}
+   */
+  const renderItems = useCallback(() => {
+    if (_.isEmpty(props.items)) {
+      return null;
+    }
+
+    return (
+      <Table
+        basic
+        padded
+        selectable
+      >
+        <Table.Body>
+          { _.map(props.items, (item, index) => (
+            <Table.Row
+              key={index}
+              onClick={props.onSelect.bind(this, item)}
+            >
+              <Table.Cell>{ props.renderItem(item) }</Table.Cell>
+              <Table.Cell>
+                { renderCheckmark(item) }
+              </Table.Cell>
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table>
+    );
+  }, [renderCheckmark, props.items, props.onSelect, props.renderItem]);
+
+  /**
+   * Renders the empty list component.
+   *
+   * @type {(function(): (null|*))|*}
+   */
+  const renderEmpty = useCallback(() => {
+    if ((props.items && props.items.length) || props.loading) {
+      return null;
+    }
+
+    return (
+      <Grid
+        className='empty'
+        padded='vertically'
+      >
+        <Grid.Column
+          textAlign='center'
+        >
+          <Grid.Row>
+            <Icon
+              name='search'
+              size='huge'
+            />
+          </Grid.Row>
+          <Grid.Row>
+            { i18n.t('Selectize.noRecords') }
+          </Grid.Row>
+        </Grid.Column>
+      </Grid>
+    );
+  }, [props.items, props.loading]);
+
+  return (
+    <Grid>
+      <Grid.Column
+        textAlign='center'
+      >
+        { renderHeader() }
+        { renderItems() }
+        { renderEmpty() }
+      </Grid.Column>
+    </Grid>
+  );
+}));
+
+const Selectize = (props: Props) => {
+  const [selectedItem, setSelectedItem] = useState();
+  const [selectedItems, setSelectedItems] = useState(props.selectedItems || []);
+
+  /**
+   * Returns true if the passed item is selected.
+   *
+   * @type {function(*): boolean}
+   */
+  const isSelected = useCallback((item) => !!_.findWhere(selectedItems, { id: item.id }, [selectedItems]));
+
+  /**
+   * If the passed item is selected, deselect the item. If we're not allowing multiple select, replace the selected
+   * items with the passed item. Otherwise, append the passed item to the list of selected items.
+   *
+   * @type {(function(*=): void)|*}
+   */
+  const onSelect = useCallback((item) => {
+    if (isSelected(item)) {
+      setSelectedItems((prevItems) => _.filter(prevItems, (i) => i.id !== item.id));
+    } else if (!props.multiple) {
+      setSelectedItems([item]);
+    } else {
+      setSelectedItems((prevItems) => [
+        ...prevItems,
+        item
+      ]);
+    }
+  }, [isSelected, props.multiple]);
+
+  /**
+   * Selects or deselects the single passed item.
+   *
+   * @type {(function(*=): void)|*}
+   */
+  const onItemSelection = useCallback((item) => {
+    if (selectedItem === item) {
+      setSelectedItem(null);
+      onSelect(item);
+    } else {
+      setSelectedItem(item);
+    }
+  }, [selectedItem, onSelect]);
+
+  /**
+   * Returns the promise from the modal onSave prop, if provided. Otherwise returns a resolved promise.
+   *
+   * @type {(function(*=): (*))|*}
+   */
+  const onSave = useCallback((item) => {
+    if (props.modal && props.modal.onSave) {
+      return props.modal.onSave(item).then((saved) => onSelect(saved));
+    }
+
+    return Promise.resolve();
+  }, [onSelect, props.modal]);
+
+  return (
+    <Modal
+      as={Form}
+      centered={props.centered}
+      className='selectize'
+      open
+      noValidate
+      size='small'
+    >
+      <Modal.Header
+        content={props.title}
+      />
+      <Modal.Content>
+        <SelectizeGrid
+          {...props}
+          actions={[]}
+          isSelected={isSelected}
+          onDelete={() => Promise.resolve()}
+          onDeleteAll={() => Promise.resolve()}
+          onItemSelection={onItemSelection}
+          onSave={onSave}
+          onSelect={onSelect}
+          selectedItem={selectedItem}
+          selectedItems={selectedItems}
+        />
+      </Modal.Content>
+      <Modal.Actions>
+        <Button
+          onClick={props.onSave.bind(this, selectedItems)}
+          primary
+          size='medium'
+          type='submit'
+        >
+          { i18n.t('Common.buttons.save') }
+        </Button>
+        <Button
+          inverted
+          onClick={props.onClose.bind(this)}
+          primary
+          size='medium'
+          type='button'
+        >
+          { i18n.t('Common.buttons.cancel') }
+        </Button>
+      </Modal.Actions>
+    </Modal>
+  );
+};
+
+Selectize.defaultProps = {
+  centered: false,
+  modal: undefined,
+  multiple: true,
+  searchable: true,
+  selectedItems: []
+};
+
+export default Selectize;

package/src/components/SelectizeHeader.css

@@ -0,0 +1,3 @@
+.selectize-header .ui.button.selected {
+  margin: 3px;
+}

package/src/components/SelectizeHeader.js

@@ -0,0 +1,40 @@
+// @flow
+
+import React, { type Element } from 'react';
+import { Button, Segment } from 'semantic-ui-react';
+import _ from 'underscore';
+import './SelectizeHeader.css';
+
+type Props = {
+  isSelected: (item: any) => boolean,
+  items: Array<any>,
+  onItemClick: (item: any) => void,
+  renderItem: (item: any) => string | Element<any>
+};
+
+const SelectizeHeader = (props: Props) => {
+  if (!(props.items && props.items.length)) {
+    return null;
+  }
+
+  return (
+    <Segment
+      className='selectize-header'
+      textAlign='left'
+    >
+      { _.map(props.items, (item, index) => (
+        <Button
+          className='selected'
+          content={props.renderItem(item)}
+          icon={props.isSelected(item) ? 'times circle outline' : undefined}
+          key={index}
+          onClick={props.onItemClick.bind(this, item)}
+          primary
+          size='small'
+        />
+      ))}
+    </Segment>
+  );
+};
+
+export default SelectizeHeader;

package/src/components/TabbedModal.css

@@ -0,0 +1,14 @@
+.tabbed-modal.ui .modal-header .ui.menu {
+  max-width: 100%;
+  overflow: auto;
+  padding: 5px 0px 5px 0px;
+}
+
+.tabbed-modal.ui .modal-header.inline-header .ui.menu {
+  display: inline-flex;
+  margin-left: 30px;
+}
+
+.tabbed-modal.ui .modal-header.inline-header .ui.header {
+  display: inline;
+}

package/src/components/TabbedModal.js

@@ -0,0 +1,165 @@
+// @flow
+
+import { Element } from '@performant-software/shared-components';
+import React, { Component, type Node } from 'react';
+import { Header, Menu, Modal } from 'semantic-ui-react';
+import _ from 'underscore';
+import './TabbedModal.css';
+
+type Props = {
+  children: Node,
+  className?: string,
+  header: string,
+  inlineTabs?: boolean,
+  renderHeader?: () => Node
+};
+
+type State = {
+  tab: any
+};
+
+class TabbedModal extends Component<Props, State> {
+  static defaultProps: any;
+  static Tab: any;
+
+  /**
+   * Constructs a new TabbedModal component.
+   *
+   * @param props
+   */
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      tab: null
+    };
+  }
+
+  /**
+   * Parses the child components and sets the actions and tabs list on the state. The current tab is set to the first
+   * child in the list of tabs.
+   */
+  componentDidMount() {
+    const tab = _.first(Element.findByType(this.props.children, TabbedModal.Tab));
+    this.setState({ tab: tab.props.name });
+  }
+
+  /**
+   * Returns the header classes.
+   *
+   * @returns {string}
+   */
+  getHeaderClasses() {
+    const classes = ['modal-header'];
+
+    if (this.props.inlineTabs) {
+      classes.push('inline-header');
+    }
+
+    return classes.join(' ');
+  }
+
+  /**
+   * Returns the modal classes.
+   *
+   * @returns {string}
+   */
+  getModalClasses() {
+    const classes = ['tabbed-modal'];
+
+    if (this.props.className) {
+      classes.push(this.props.className);
+    }
+
+    return classes.join(' ');
+  }
+
+  /**
+   * Renders the TabbedModal component.
+   *
+   * @returns {*}
+   */
+  render() {
+    const tabs = Element.findByType(this.props.children, TabbedModal.Tab);
+    const tab = _.find(tabs, (t) => t.props.name === this.state.tab);
+
+    return (
+      <Modal
+        className={this.getModalClasses()}
+        {..._.omit(this.props, 'header', 'renderHeader', 'inlineTabs', 'className')}
+      >
+        <Modal.Header
+          className={this.getHeaderClasses()}
+        >
+          { this.renderHeader() }
+          <Menu
+            float='right'
+            secondary
+          >
+            { _.map(Element.findByType(this.props.children, TabbedModal.Tab), this.renderTab.bind(this)) }
+          </Menu>
+        </Modal.Header>
+        <Modal.Content>
+          { tab && (
+            <div
+              key={tab.props.name}
+            >
+              { tab.props.children }
+            </div>
+          )}
+        </Modal.Content>
+        { Element.findByType(this.props.children, Modal.Actions) }
+      </Modal>
+    );
+  }
+
+  /**
+   * Renders the header.
+   *
+   * @returns {*}
+   */
+  renderHeader() {
+    if (this.props.renderHeader) {
+      return this.props.renderHeader();
+    }
+
+    return (
+      <Header content={this.props.header} />
+    );
+  }
+
+  /**
+   * Renders the passed tab.
+   *
+   * @param tab
+   *
+   * @returns {*}
+   */
+  renderTab(tab: TabbedModal.Tab) {
+    const { name } = tab.props;
+
+    return (
+      <Menu.Item
+        active={this.state.tab === name}
+        key={name}
+        name={name}
+        onClick={() => this.setState({ tab: name })}
+      >
+        { name }
+      </Menu.Item>
+    );
+  }
+}
+
+const Tab = (props) => props.children;
+Tab.displayName = 'Tab';
+
+TabbedModal.Tab = Tab;
+
+TabbedModal.defaultProps = {
+  className: undefined,
+  inlineTabs: true,
+  renderHeader: undefined
+};
+
+export default TabbedModal;

package/src/components/TabsMenu.js

@@ -0,0 +1,35 @@
+// @flow
+
+import React from 'react';
+import { Menu } from 'semantic-ui-react';
+import _ from 'underscore';
+
+type Tab = {
+  active: boolean,
+  key: string,
+  label: string,
+  visible: boolean
+};
+
+type Props = {
+  onTabClick: (tab: Tab) => void,
+  tabs: Array<Tab>
+}
+
+const TabsMenu = (props: Props) => (
+  <Menu
+    pointing
+    secondary
+  >
+    { _.map(_.where(props.tabs, { visible: true }), (tab) => (
+      <Menu.Item
+        active={tab.active}
+        key={tab.key}
+        name={tab.label}
+        onClick={props.onTabClick.bind(this, tab)}
+      />
+    ))}
+  </Menu>
+);
+
+export default TabsMenu;

package/src/components/TagsList.js

@@ -0,0 +1,43 @@
+// @flow
+
+import React from 'react';
+import { Icon, Label } from 'semantic-ui-react';
+import _ from 'underscore';
+import './TagsList.css';
+
+type Props = {
+  config?: {
+    [key: string]: {
+      background: string,
+      color: string
+    }
+  },
+  onDelete?: (tag: string) => void,
+  tags: Array<string>
+};
+
+const TagsList = (props: Props) => (
+  <div
+    className='tags-list'
+  >
+    { _.map(props.tags || [], (tag) => (
+      <Label
+        style={{
+          backgroundColor: props.config && props.config[tag] && props.config[tag].background,
+          color: props.config && props.config[tag] && props.config[tag].color,
+          marginRight: '10px'
+        }}
+      >
+        { tag }
+        { props.onDelete && (
+          <Icon
+            name='delete'
+            onClick={props.onDelete.bind(this, tag)}
+          />
+        )}
+      </Label>
+    ))}
+  </div>
+);
+
+export default TagsList;

package/src/components/Thumbnail.js

@@ -0,0 +1,47 @@
+// @flow
+
+import React, { useEffect, useState } from 'react';
+import { Image, Loader } from 'semantic-ui-react';
+import LazyImage from './LazyImage';
+
+type Props = {
+  src: ?string,
+  style?: any
+};
+
+const Thumbnail = (props: Props) => {
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!loading) {
+      setLoading(true);
+    }
+  }, [props.src]);
+
+  return (
+    <div>
+      <Loader
+        active={props.src && loading}
+      />
+      { props.src && (
+        <Image
+          {...props}
+          onLoad={() => setLoading(false)}
+          style={{
+            ...props.style,
+            visibility: loading ? 'hidden' : 'visible'
+          }}
+        />
+      )}
+      { !props.src && (
+        <LazyImage />
+      )}
+    </div>
+  );
+};
+
+Thumbnail.defaultProps = {
+  style: {}
+};
+
+export default Thumbnail;

package/src/components/Toaster.css

@@ -0,0 +1,9 @@
+.toaster.ui.message {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  margin: auto;
+  width: 30%;
+  z-index: 999;
+}