@performant-software/semantic-components 0.5.1

package/types/components/DataTableColumnSelector.js.flow

@@ -0,0 +1,146 @@
+// @flow
+
+import React, { Component, type ComponentType } from 'react';
+import { Checkbox, Dropdown, Icon } from 'semantic-ui-react';
+import _ from 'underscore';
+import Draggable from './Draggable';
+import './DataTableColumnSelector.css';
+
+import type { Column } from './DataTable';
+
+type Props = {
+  className: string,
+  columns: Array<Column>
+};
+
+type State = {
+  columns: Array<Column>
+};
+
+/**
+ * Returns a function to wrap the passed component in a column selector. The ColumnSelector component will bind a
+ * renderListHeader function, which can be used in the wrapped component to render a column selector dropdown button.
+ *
+ * @param WrappedComponent
+ */
+const useColumnSelector = (WrappedComponent: ComponentType<any>) => (
+  class extends Component<Props, State> {
+    static defaultProps = {
+      className: ''
+    };
+
+    /**
+     * Constructs a new DataTableColumnSelector component.
+     *
+     * @param props
+     */
+    constructor(props: Props) {
+      super(props);
+
+      this.state = {
+        columns: props.columns
+      };
+    }
+
+    /**
+     * Toggles the hidden property for the passed column.
+     *
+     * @param column
+     */
+    onColumnCheckbox(column: Column) {
+      this.setState((state) => ({
+        columns: _.map(state.columns, (c) => (c.name === column.name ? { ...c, hidden: !c.hidden } : c))
+      }));
+    }
+
+    /**
+     * Drags/drops the column at the passed index to the new position.
+     *
+     * @param dragIndex
+     * @param hoverIndex
+     */
+    onDrag(dragIndex: number, hoverIndex: number) {
+      this.setState((state) => {
+        const columns = [];
+        const anchoredColumns = [];
+
+        // Preserve the index of any unlabeled columns
+        _.each(state.columns, (column, index) => {
+          if (column.label && column.label.length) {
+            columns.push(column);
+          } else {
+            anchoredColumns.push({ index, column });
+          }
+        });
+
+        const column = columns[dragIndex];
+        columns.splice(dragIndex, 1);
+        columns.splice(hoverIndex, 0, column);
+
+        // Add the unlabeled columns back in
+        _.each(anchoredColumns, (c) => columns.splice(c.index, 0, c.column));
+
+        return { columns };
+      });
+    }
+
+    /**
+     * Renders the DataTableColumnSelector component.
+     *
+     * @returns {*}
+     */
+    render() {
+      return (
+        <WrappedComponent
+          {...this.props}
+          className={`data-table-column-selector ${this.props.className}`}
+          columns={this.state.columns}
+          renderListHeader={this.renderHeader.bind(this)}
+        />
+      );
+    }
+
+    /**
+     * Renders the dropdown column selector.
+     *
+     * @returns {*}
+     */
+    renderHeader() {
+      return (
+        <Dropdown
+          basic
+          button
+          icon='cog'
+          className='icon configure-button open-right'
+          simple
+        >
+          <Dropdown.Menu>
+            { this.state.columns
+              .filter((c) => c.label && c.label.length)
+              .map((c, index) => (
+                <Draggable
+                  id={c.name}
+                  index={index}
+                  key={c.name}
+                  onDrag={this.onDrag.bind(this)}
+                >
+                  <Dropdown.Item>
+                    <Icon
+                      name='bars'
+                    />
+                    <Checkbox
+                      checked={!c.hidden}
+                      label={c.label}
+                      onClick={this.onColumnCheckbox.bind(this, c)}
+                    />
+                  </Dropdown.Item>
+                </Draggable>
+              ))}
+          </Dropdown.Menu>
+        </Dropdown>
+      );
+    }
+  }
+);
+
+export default useColumnSelector;

package/types/components/DataView.js.flow

@@ -0,0 +1,125 @@
+// @flow
+
+import axios from 'axios';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Container } from 'semantic-ui-react';
+import _ from 'underscore';
+import MenuSidebar from './MenuSidebar';
+import MenuBar from './MenuBar';
+import ListTable from './ListTable';
+
+type Item = {
+  id: string,
+  label: string,
+  group?: string,
+}
+
+type Props = {
+  items: Array<Item>,
+  layout: 'top' | 'left',
+  title: string
+};
+
+const DataView = (props: Props) => {
+  const [activeItem, setActiveItem] = useState();
+  const [columns, setColumns] = useState([]);
+  const [menu, setMenu] = useState([]);
+  const [paddingLeft, setPaddingLeft] = useState();
+
+  const menuRef = useRef();
+
+  const onLoad = useCallback((params) => {
+    if (activeItem) {
+      axios.get
+      fetch(activeItem.url).then((response) => {
+        console.log(response);
+      });
+    }
+  }, [activeItem]);
+
+  /**
+   * Re-formats the passed items as a menu object. If we're grouping the menu items, items will be added as
+   * a child property of the group object.
+   */
+  useEffect(() => {
+    const hasGroups = _.every(props.items, (item) => !!item.group);
+
+    if (!hasGroups) {
+      setMenu(props.items);
+    } else {
+      const menuItems = _.groupBy(props.items, 'group');
+      const headers = _.keys(menuItems);
+
+      setMenu(_.map(headers, (header) => ({
+        content: header,
+        items: _.map(menuItems[header], (item) => ({
+          active: activeItem && activeItem.id === item.id,
+          content: item.label,
+          onClick: () => setActiveItem(item)
+        }))
+      })));
+    }
+  }, [activeItem, props.items]);
+
+  /**
+   * Set the active item as the first item in the list.
+   */
+  useEffect(() => {
+    if (props.items && props.items.length) {
+      setActiveItem(props.items[0]);
+    }
+  }, [props.items]);
+
+  /**
+   * If we're using the sidebar layout, set the padding so the fixed positioned menu does not overlap the content.
+   */
+  useEffect(() => {
+    if (props.layout === 'left' && menuRef && menuRef.current) {
+      setPaddingLeft(menuRef.current.offsetWidth);
+    }
+  }, [menuRef, props.layout]);
+
+  return (
+    <div
+      className='data-view'
+    >
+      { props.layout === 'top' && (
+        <MenuBar
+          header={{
+            content: props.title
+          }}
+          items={menu}
+        />
+      )}
+      { props.layout === 'left' && (
+        <MenuSidebar
+          contextRef={menuRef}
+          header={{
+            content: props.title
+          }}
+          items={menu}
+        />
+      )}
+      <Container
+        style={{
+          paddingLeft
+        }}
+      >
+        { activeItem && (
+          <ListTable
+            collectionName='items'
+            columns={columns}
+            onLoad={(params) => Api.onLoad(_.extend(params, {
+              items,
+              perPage: number('Per page', 10)
+            }))}
+            searchable
+          />
+        )}
+        <div>Content</div>
+      </Container>
+    </div>
+  );
+};
+
+export default DataView;

package/types/components/DateInput.js.flow

@@ -0,0 +1,58 @@
+// @flow
+
+import React from 'react';
+import { Icon, Input } from 'semantic-ui-react';
+import './DateInput.css';
+
+type Props = {
+  display?: string,
+  formatOptions?: any,
+  locale?: string,
+  onChange: (date: ?Date) => void,
+  onClick: () => void,
+  value?: ?Date
+}
+
+const DateInput = (props: Props) => {
+  const formatDate = () => {
+    let date = '';
+
+    if (props.display) {
+      date = props.display;
+    } else if (props.value) {
+      date = props.value.toLocaleDateString(props.locale, props.formatOptions);
+    }
+
+    return date;
+  };
+
+  return (
+    <Input
+      className='date-input icon'
+      icon='calendar alternate outline'
+      iconPosition='left'
+    >
+      <Icon
+        className='left icon'
+        name='calendar alternate outline'
+      />
+      <input
+        onClick={props.onClick.bind(this)}
+        readOnly
+        type='text'
+        value={formatDate()}
+      />
+      <Icon
+        className='right icon'
+        name='times'
+        onClick={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          props.onChange(null);
+        }}
+      />
+    </Input>
+  );
+};
+
+export default DateInput;

package/types/components/DatePicker.js.flow

@@ -0,0 +1,81 @@
+// @flow
+
+import React, { useEffect, useRef, useState } from 'react';
+import Calendar from 'react-calendar';
+import { Icon, Transition } from 'semantic-ui-react';
+import DateInput from './DateInput';
+
+import './DatePicker.css';
+
+type Props = {
+  closeOnSelection?: boolean,
+  formatOptions?: any,
+  locale?: string,
+  onChange: (date: ?Date) => void,
+  value: ?Date
+};
+
+const DatePicker = (props: Props) => {
+  const [calendar, setCalendar] = useState(false);
+  const calendarWrapper = useRef<any>(null);
+
+  const onDocumentClick = (event: Event) => {
+    const calendarInstance = calendarWrapper.current;
+
+    if (calendarInstance && !calendarInstance.contains(event.target)) {
+      setCalendar(false);
+    }
+  };
+
+  useEffect(() => {
+    // Bind the event listener
+    document.addEventListener('mousedown', onDocumentClick);
+
+    // Unbind the event listener
+    return () => document.removeEventListener('mousedown', onDocumentClick);
+  }, [calendarWrapper]);
+
+  return (
+    <>
+      <DateInput
+        formatOptions={props.formatOptions}
+        locale={props.locale}
+        onChange={props.onChange.bind(this)}
+        onClick={() => setCalendar(true)}
+        value={props.value}
+      />
+      <Transition
+        visible={calendar}
+      >
+        <div
+          ref={calendarWrapper}
+          style={{
+            position: 'absolute',
+            zIndex: '999'
+          }}
+        >
+          <Calendar
+            locale={props.locale}
+            onChange={(date) => {
+              props.onChange(date);
+              if (props.closeOnSelection) {
+                setCalendar(false);
+              }
+            }}
+            next2Label={<Icon name='angle double right' />}
+            nextLabel={<Icon name='chevron right' />}
+            prev2Label={<Icon name='angle double left' />}
+            prevLabel={<Icon name='chevron left' />}
+            value={props.value}
+          />
+        </div>
+      </Transition>
+    </>
+  );
+};
+
+DatePicker.defaultProps = {
+  closeOnSelection: true
+};
+
+export default DatePicker;

package/types/components/DescriptorField.js.flow

@@ -0,0 +1,42 @@
+// @flow
+
+import React, { type Component } from 'react';
+import { Popup } from 'semantic-ui-react';
+
+type Props = {
+  className?: string,
+  content: string,
+  delayInterval?: number,
+  renderPopup?: () => Component<any>,
+  popupContent?: string
+}
+
+/**
+ * Renders the DescriptorField component. This component can be used to static text as with a popup on hover.
+ *
+ * @param props
+ *
+ * @returns {*}
+ *
+ * @constructor
+ */
+const DescriptorField = (props: Props) => (
+  <Popup
+    className={props.className}
+    content={props.popupContent}
+    hoverable
+    mouseEnterDelay={props.delayInterval}
+    trigger={props.renderPopup
+      ? props.renderPopup()
+      : (<span className='text'>{ props.content }</span>)}
+    wide
+  />
+);
+
+DescriptorField.defaultProps = {
+  delayInterval: 1000,
+  renderPopup: undefined,
+  popupContent: undefined
+};
+
+export default DescriptorField;

package/types/components/DownloadButton.js.flow

@@ -0,0 +1,23 @@
+// @flow
+
+import React from 'react';
+import uuid from 'react-uuid';
+import { Button } from 'semantic-ui-react';
+
+type Props = {
+  filename?: string,
+  url: string
+};
+
+const DownloadButton = ({ filename, url, ...button }: Props) => (
+  <a
+    download={filename || uuid()}
+    href={url}
+  >
+    <Button
+      {...button}
+    />
+  </a>
+);
+
+export default DownloadButton;

package/types/components/Draggable.js.flow

@@ -0,0 +1,94 @@
+// @flow
+
+import React, { type Element, useRef } from 'react';
+import { Ref } from 'semantic-ui-react';
+import { useDrag, useDrop } from 'react-dnd';
+
+type Props = {
+  children: Element<any>,
+  id: any,
+  index: number,
+  onDrag: (dragIndex: number, hoverIndex: number) => void
+};
+
+const TYPE_ANY = 'any';
+
+const Draggable = (props: Props) => {
+  const { index, id } = props;
+
+  const ref = useRef(null);
+  const [, drop] = useDrop({
+    accept: TYPE_ANY,
+    hover(i, monitor) {
+      if (!ref.current) {
+        return;
+      }
+
+      const dragIndex = i.index;
+      const hoverIndex = index;
+
+      // Don't replace items with themselves
+      if (dragIndex === hoverIndex) {
+        return;
+      }
+
+      // Determine rectangle on screen
+      const hoverBoundingRect = ref.current.getBoundingClientRect();
+
+      // Get vertical middle
+      const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+
+      // Determine mouse position
+      const clientOffset = monitor.getClientOffset();
+
+      // Get pixels to the top
+      const hoverClientY = clientOffset.y - hoverBoundingRect.top;
+
+      // Only perform the move when the mouse has crossed half of the items height
+      // When dragging downwards, only move when the cursor is below 50%
+      // When dragging upwards, only move when the cursor is above 50%
+      // Dragging downwards
+      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
+        return;
+      }
+
+      // Dragging upwards
+      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
+        return;
+      }
+
+      // Time to actually perform the action
+      props.onDrag(dragIndex, hoverIndex);
+
+      // // Note: we're mutating the monitor item here!
+      // // Generally it's better to avoid mutations,
+      // // but it's good here for the sake of performance
+      // // to avoid expensive index searches.
+      // eslint-disable-next-line no-param-reassign
+      i.index = hoverIndex;
+    },
+  });
+
+  const [{ isDragging }, drag] = useDrag({
+    item: { type: TYPE_ANY, id, index },
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+
+  drag(drop(ref));
+
+  if (ref && ref.current) {
+    ref.current.style.opacity = isDragging ? 0 : 1;
+  }
+
+  return (
+    <Ref
+      innerRef={ref}
+    >
+      { props.children }
+    </Ref>
+  );
+};
+
+export default Draggable;

package/types/components/DropdownButton.js.flow

@@ -0,0 +1,65 @@
+// @flow
+
+import React, { useRef } from 'react';
+import { Button, Dropdown } from 'semantic-ui-react';
+import './DropdownButton.css';
+
+type Option = {
+  key: any,
+  value: any,
+  text: string
+};
+
+type Props = {
+  basic?: boolean,
+  color?: string,
+  direction?: string,
+  disabled?: boolean,
+  icon?: string,
+  options: Array<Option>,
+  onChange: (e: Event, { value: any }) => void,
+  scrolling?: boolean,
+  selectOnBlur?: boolean,
+  text: string,
+  value: any
+};
+
+const DropdownButton = (props: Props) => {
+  const dropdownRef = useRef();
+
+  return (
+    <Button.Group
+      basic={props.basic}
+      className='dropdown-button'
+      color={props.color}
+    >
+      <Button
+        content={props.text}
+        disabled={props.disabled}
+        icon={props.icon}
+        onClick={(e) => dropdownRef.current && dropdownRef.current.handleClick(e)}
+      />
+      <Dropdown
+        className='button icon'
+        direction={props.direction}
+        disabled={props.disabled}
+        floating
+        onChange={props.onChange.bind(this)}
+        options={props.options}
+        ref={dropdownRef}
+        scrolling={props.scrolling}
+        selectOnBlur={props.selectOnBlur}
+        trigger={<></>}
+        value={props.value}
+      />
+    </Button.Group>
+  );
+};
+
+DropdownButton.defaultProps = {
+  color: undefined,
+  icon: undefined,
+  selectOnBlur: false
+};
+
+export default DropdownButton;

package/types/components/DropdownMenu.js.flow

@@ -0,0 +1,68 @@
+// @flow
+
+import React, {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type Node
+} from 'react';
+import { Dropdown, Ref } from 'semantic-ui-react';
+
+type Props = {
+  children: Node,
+  onClick?: () => void
+};
+
+const DropdownMenu = (props: Props) => {
+  const [open, setOpen] = useState(false);
+  const ref = useRef();
+
+  const onMouseEnter = useCallback(() => setOpen(true), []);
+  const onMouseLeave = useCallback(() => setOpen(false), []);
+
+  /**
+   * Adds/removes the mouseenter/mouseleave events.
+   */
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.addEventListener('mouseenter', onMouseEnter);
+      ref.current.addEventListener('mouseleave', onMouseLeave);
+    }
+
+    return () => {
+      if (ref.current) {
+        ref.current.removeEventListener('mouseenter', onMouseEnter);
+        ref.current.removeEventListener('mouseleave', onMouseLeave);
+      }
+    };
+  }, [ref]);
+
+  return (
+    <Ref
+      innerRef={ref}
+    >
+      <Dropdown
+        {...props}
+        open={open}
+        onClick={() => {
+          if (props.onClick) {
+            props.onClick();
+          }
+
+          setOpen(false);
+        }}
+      >
+        <Dropdown.Menu>
+          { props.children }
+        </Dropdown.Menu>
+      </Dropdown>
+    </Ref>
+  );
+};
+
+DropdownMenu.defaultProps = {
+  onClick: undefined
+};
+
+export default DropdownMenu;