@performant-software/semantic-components 0.5.1

package/types/components/ModalDropdown.js.flow

@@ -0,0 +1,84 @@
+// @flow
+
+import React, { Component } from 'react';
+import { withTranslation } from 'react-i18next';
+import { Button, Dropdown } from 'semantic-ui-react';
+import './ModalDropdown.css';
+
+type Props = {
+  onClear: () => void,
+  renderModal: ({ onClose: () => void, open: boolean }) => void,
+  searchQuery: ?string,
+  t: (key: string) => string
+};
+
+type State = {
+  modalVisible: boolean
+};
+
+class ModalDropdown extends Component<Props, State> {
+  /**
+   * Constructs a new ModalDropdown component.
+   *
+   * @param props
+   */
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      modalVisible: false
+    };
+  }
+
+  /**
+   * Closes the modal.
+   */
+  onClose() {
+    this.setState({ modalVisible: false });
+  }
+
+  /**
+   * Renders the ModalDropdown component.
+   *
+   * @returns {*}
+   */
+  render() {
+    return (
+      <>
+        <Dropdown
+          className='modal-dropdown'
+          onClick={() => this.setState({ modalVisible: true })}
+          onSearchChange={() => {}}
+          open={false}
+          search
+          selection
+          searchQuery={this.props.searchQuery || ''}
+        />
+        <Button.Group>
+          <Button
+            basic
+            content={this.props.t('Common.buttons.clear')}
+            icon='times'
+            onClick={this.props.onClear.bind(this)}
+            type='button'
+          />
+        </Button.Group>
+        { this.renderModal() }
+      </>
+    );
+  }
+
+  /**
+   * Renders the modal.
+   *
+   * @returns {*}
+   */
+  renderModal() {
+    return this.props.renderModal({
+      onClose: this.onClose.bind(this),
+      open: this.state.modalVisible
+    });
+  }
+}
+
+export default withTranslation()(ModalDropdown);

package/types/components/NestedAccordion.js.flow

@@ -0,0 +1,276 @@
+// @flow
+
+import React, { Component, type Element } from 'react';
+import {
+  Accordion,
+  Button
+} from 'semantic-ui-react';
+import _ from 'underscore';
+import './NestedAccordion.css';
+
+type Props = {
+  defaultActive?: Array<number> | Array<any>,
+  getChildItems: (item: any) => Array<any>,
+  inverted?: boolean,
+  isItemActive?: (item: any) => boolean,
+  multipleItemTypes?: boolean,
+  onItemClick?: (item: any) => void,
+  onItemToggle?: (item: any) => void,
+  renderItem: (item: any) => string | Element<any>,
+  renderRight?: (item: any) => string | Element<any>,
+  rootItems: Array<any>,
+  showToggle: (item: any) => boolean,
+  styled?: boolean,
+  toggleOnClick?: boolean
+};
+
+type State = {
+  activeItems: Array<any>
+};
+
+class NestedAccordion extends Component<Props, State> {
+  static defaultProps: any;
+
+  /**
+   * Constructs a new NestedAccordion component.
+   *
+   * @param props
+   */
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      activeItems: []
+    };
+  }
+
+  /**
+   * Sets the activeItems on the state if the defaultActive prop changes.
+   *
+   * @param prevProps
+   */
+  componentDidUpdate(prevProps: Props) {
+    if (prevProps.defaultActive !== this.props.defaultActive
+      && this.props.defaultActive
+      && this.props.defaultActive.length) {
+      const isActive = this.props.defaultActive.some(
+        (active) => typeof active !== 'object' || !_.has(active, 'id') || !_.has(active, 'type')
+      );
+      if (this.props.multipleItemTypes && !isActive) {
+        this.setState({ activeItems: this.props.defaultActive });
+      } else {
+        this.setState({ activeItems: _.map(this.props.defaultActive, (id) => ({ id })) });
+      }
+    }
+  }
+
+  /**
+   * Returns the toggle button class names.
+   *
+   * @param item
+   *
+   * @returns {string}
+   */
+  getButtonClass(item: any) {
+    const classNames = ['accordion-button'];
+
+    if (this.props.showToggle && !this.props.showToggle(item)) {
+      classNames.push('hidden');
+    }
+
+    return classNames.join(' ');
+  }
+
+  /**
+   * Returns true if the passed item is active.
+   *
+   * @param item
+   *
+   * @returns {boolean}
+   */
+  isActive(item: any) {
+    let properties = { id: item.id };
+    if (this.props.multipleItemTypes && _.has(item, 'type')) {
+      properties = { id: item.id, type: item.type };
+    }
+    return !!_.findWhere(this.state.activeItems, properties);
+  }
+
+  /**
+   * Returns true if the passed item is active.
+   *
+   * @param item
+   *
+   * @returns {*}
+   */
+  isItemActive(item: any) {
+    return this.props.isItemActive && this.props.isItemActive(item);
+  }
+
+  /**
+   * Calls the onItemClick prop. Optionally toggles the item active.
+   *
+   * @param item
+   */
+  onItemClick(item: any) {
+    if (this.props.toggleOnClick) {
+      this.onItemToggle(item);
+    }
+
+    if (this.props.onItemClick) {
+      this.props.onItemClick(item);
+    }
+  }
+
+  /**
+   * Toggles the passed item and calls the onItemToggle property.
+   *
+   * @param item
+   */
+  onItemToggle(item: any) {
+    if (this.props.onItemToggle) {
+      this.props.onItemToggle(item);
+    }
+
+    this.toggleItem(item);
+  }
+
+  /**
+   * Renders the NestedAccordion component.
+   *
+   * @returns {*}
+   */
+  render() {
+    return (
+      <Accordion
+        className='nested-accordion'
+        fluid
+        inverted={this.props.inverted}
+        panels={_.map(this.props.rootItems, this.renderPanel.bind(this))}
+        styled={this.props.styled}
+      />
+    );
+  }
+
+  /**
+   * Renders the content for the passed item if the item has child elements.
+   *
+   * @param item
+   *
+   * @returns {null|*}
+   */
+  renderContent(item: any) {
+    const children = this.props.getChildItems(item);
+    if (!(children && children.length)) {
+      return null;
+    }
+
+    return (
+      <Accordion.Content
+        active={this.isActive(item)}
+      >
+        <div>
+          <Accordion.Accordion
+            panels={_.map(children, this.renderPanel.bind(this))}
+          />
+        </div>
+      </Accordion.Content>
+    );
+  }
+
+  /**
+   * Renders the title and content (panel) for the passed item.
+   *
+   * @param item
+   *
+   * @returns {*}
+   */
+  renderPanel(item: any) {
+    return (
+      <div key={_.has(item, 'type') ? `${item.type}-${item.id}` : item.id}>
+        <Accordion.Title
+          active={this.isActive(item)}
+          onClick={this.onItemClick.bind(this, item)}
+          style={{
+            backgroundColor: this.isItemActive(item) ? 'rgba(255, 255, 255, 0.08)' : undefined
+          }}
+        >
+          <div
+            className='container'
+          >
+            <div>
+              { this.renderToggle(item) }
+              <div
+                className='item-container'
+              >
+                { this.props.renderItem(item) }
+              </div>
+            </div>
+            { this.props.renderRight && (
+              <div
+                className='right-container'
+              >
+                { this.props.renderRight(item) }
+              </div>
+            )}
+          </div>
+        </Accordion.Title>
+        { this.renderContent(item) }
+      </div>
+    );
+  }
+
+  /**
+   * Renders the open/close toggle for the passed item.
+   *
+   * @param item
+   *
+   * @returns {null|*}
+   */
+  renderToggle(item: any) {
+    return (
+      <Button
+        compact
+        className={this.getButtonClass(item)}
+        icon='dropdown'
+        inverted={this.props.inverted}
+        onClick={(e) => {
+          // Since the containing row also has an onclick, we'll want to prevent that from being triggered.
+          e.stopPropagation();
+          this.onItemToggle(item);
+        }}
+      />
+    );
+  }
+
+  /**
+   * Toggles the passed item as active.
+   *
+   * @param item
+   */
+  toggleItem(item: any) {
+    this.setState((state) => ({
+      activeItems: this.isActive(item)
+        ? _.filter(state.activeItems, (i) => {
+          if (this.props.multipleItemTypes && _.has(item, 'type') && _.has(i, 'type')) {
+            return i.id !== item.id || i.type !== item.type;
+          }
+          return i.id !== item.id;
+        })
+        : [...state.activeItems, item]
+    }));
+  }
+}
+
+NestedAccordion.defaultProps = {
+  defaultActive: [],
+  inverted: false,
+  isItemActive: undefined,
+  multipleItemTypes: false,
+  onItemClick: () => {},
+  renderRight: () => {},
+  styled: true,
+  toggleOnClick: false
+};
+
+export default NestedAccordion;

package/types/components/PhotoViewer.js.flow

@@ -0,0 +1,36 @@
+// @flow
+
+import React from 'react';
+import { Image, Modal } from 'semantic-ui-react';
+import './PhotoViewer.css';
+
+type Props = {
+  image: string,
+  onClose: () => void,
+  open: boolean,
+  size?: string
+};
+
+const PhotoViewer = (props: Props) => (
+  <Modal
+    centered={false}
+    className='photo-viewer'
+    closeIcon
+    onClose={props.onClose.bind(this)}
+    open={props.open}
+    size={props.size}
+  >
+    <Modal.Content>
+      <Image
+        fluid
+        src={props.image}
+      />
+    </Modal.Content>
+  </Modal>
+);
+
+PhotoViewer.defaultProps = {
+  size: 'small'
+};
+
+export default PhotoViewer;

package/types/components/PlayButton.js.flow

@@ -0,0 +1,37 @@
+// @flow
+
+import React from 'react';
+import { Button } from 'semantic-ui-react';
+import './PlayButton.css';
+
+type Props = {
+  onClick?: () => void,
+  size?: string,
+  style?: any
+};
+
+const PlayButton = (props: Props) => (
+  <Button
+    className='play-button'
+    color='black'
+    icon='play'
+    onClick={(e) => {
+      if (props.onClick) {
+        e.stopPropagation();
+
+        // $FlowFixMe - Not really an issue since we're checking for props.onClick above.
+        props.onClick();
+      }
+    }}
+    size={props.size}
+    style={props.style}
+  />
+);
+
+PlayButton.defaultProps = {
+  onClick: undefined,
+  size: 'massive',
+  style: undefined
+};
+
+export default PlayButton;