@performant-software/semantic-components 0.5.1

package/types/components/AssociatedDropdown.js.flow

@@ -0,0 +1,338 @@
+// @flow
+
+import { Timer } from '@performant-software/shared-components';
+import React, { Component } from 'react';
+import { Button, Dropdown, Message } from 'semantic-ui-react';
+import _ from 'underscore';
+import EditModal from './EditModal';
+import i18n from '../i18n/i18n';
+import Toaster from './Toaster';
+import './AssociatedDropdown.css';
+
+type Option = {
+  key: number | string,
+  value: number | string,
+  text: string
+};
+
+type Props = {
+  className?: string,
+  collectionName: string,
+  modal?: {
+    component: Component<{}>,
+    props: any,
+    onSave: (item: any) => Promise<any>,
+    state: any
+  },
+  onSearch: (search: string) => Promise<any>,
+  onSelection: (item: any) => void,
+  placeholder?: string,
+  renderOption: (option: any) => Option,
+  required?: boolean,
+  searchQuery: string,
+  value: ?number,
+  upward?: boolean
+};
+
+type State = {
+  items: Array<any>,
+  loading: boolean,
+  modalAdd: boolean,
+  options: Array<Option>,
+  saved: boolean,
+  searchQuery: string,
+  value: ?number | ?string
+};
+
+const TIMEOUT = 500;
+
+class AssociatedDropdown extends Component<Props, State> {
+  static defaultProps: any;
+
+  timeout: ?TimeoutID;
+
+  /**
+   * Constructs a new AssociatedDropdown component.
+   *
+   * @param props
+   */
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      items: [],
+      loading: false,
+      modalAdd: false,
+      options: [],
+      saved: false,
+      searchQuery: props.searchQuery || '',
+      value: props.value || ''
+    };
+
+    this.timeout = null;
+  }
+
+  /**
+   * Sets the new search query and value on the state.
+   *
+   * @param prevProps
+   */
+  componentDidUpdate(prevProps: Props) {
+    if (prevProps.value !== this.props.value) {
+      const { searchQuery, value } = this.props;
+      this.setState({ searchQuery, value });
+    }
+  }
+
+  /**
+   * Clears the search timer.
+   */
+  clearSearchTimer() {
+    clearTimeout(this.timeout);
+  }
+
+  /**
+   * Clears the search query value if an option was not selected.
+   */
+  onBlur() {
+    this.setState((state) => {
+      let searchQuery = '';
+
+      if (state.value) {
+        searchQuery = this.props.searchQuery;
+      }
+
+      return { searchQuery };
+    });
+  }
+
+  /**
+   * Clears the search query and value.
+   */
+  onClear() {
+    this.setState({ searchQuery: '', value: '' }, () => {
+      this.props.onSelection(this.state.value);
+    });
+  }
+
+  /**
+   * Clears the search query and executes the search.
+   */
+  onOpen() {
+    this.setState({ searchQuery: '' }, this.onSearch.bind(this));
+  }
+
+  /**
+   * Resets the search query and value on the state.
+   *
+   * @param e
+   * @param value
+   */
+  onOptionSelection(e: Event, { value }: { value: any }) {
+    this.setState((state) => {
+      const option = _.findWhere(state.options, { value }) || {};
+      this.setState({ searchQuery: option.text, value: option.value });
+    });
+
+    const item = _.findWhere(this.state.items, { id: value });
+    this.props.onSelection(item);
+  }
+
+  /**
+   * Executes the search to load the options.
+   */
+  onSearch() {
+    this.setState({ loading: true }, this.search.bind(this));
+  }
+
+  /**
+   * Sets the search query on the state.
+   *
+   * @param e
+   * @param searchQuery
+   */
+  onSearchChange(e: Event, { searchQuery }: { searchQuery: string }) {
+    this.setState({ searchQuery });
+  }
+
+  search() {
+    this.props
+      .onSearch(this.state.searchQuery)
+      .then(({ data }) => {
+        const items = data[this.props.collectionName];
+        const options = items.map(this.props.renderOption.bind(this));
+
+        this.setState({ items, options, loading: false });
+      });
+  }
+
+  /**
+   * Renders the AssociatedDropdown component.
+   *
+   * @returns {*}
+   */
+  render() {
+    return (
+      <div
+        className='association-dropdown'
+      >
+        <div className='dropdown-container'>
+          <Dropdown
+            className={`inline-dropdown ${this.props.className || ''}`}
+            disabled={this.state.loading}
+            loading={this.state.loading}
+            onBlur={this.onBlur.bind(this)}
+            onChange={this.onOptionSelection.bind(this)}
+            onOpen={this.onOpen.bind(this)}
+            onSearchChange={this.onSearchChange.bind(this)}
+            options={this.state.options}
+            placeholder={this.props.placeholder}
+            search={() => this.state.options}
+            searchInput={{
+              'aria-label': this.props.collectionName,
+              className: 'dropdown-search-input',
+              onKeyDown: Timer.clearSearchTimer.bind(this),
+              onKeyUp: Timer.setSearchTimer.bind(this, this.onSearch.bind(this))
+            }}
+            searchQuery={this.state.searchQuery}
+            selectOnBlur={false}
+            selection
+            upward={this.props.upward}
+            value={this.state.value}
+          />
+        </div>
+        <Button.Group
+          className='buttons'
+        >
+          { this.renderEditButton() }
+          { this.renderAddButton() }
+          { this.renderClearButton() }
+        </Button.Group>
+        { this.renderAddModal() }
+        { this.state.saved && (
+          <Toaster
+            onDismiss={() => this.setState({ saved: false })}
+            type={Toaster.MessageTypes.positive}
+          >
+            <Message.Header
+              content={i18n.t('Common.messages.save.header')}
+            />
+            <Message.Content
+              content={i18n.t('Common.messages.save.content')}
+            />
+          </Toaster>
+        )}
+      </div>
+    );
+  }
+
+  /**
+   * Renders the add button (if applicable).
+   *
+   * @returns {null|*}
+   */
+  renderAddButton() {
+    if (!this.props.modal) {
+      return null;
+    }
+
+    return (
+      <Button
+        basic
+        content={i18n.t('Common.buttons.add')}
+        icon='plus'
+        onClick={() => this.setState({ modalAdd: true })}
+        type='button'
+      />
+    );
+  }
+
+  /**
+   * Renders the edit button (if applicable).
+   *
+   * @returns {null|*}
+   */
+  renderEditButton() {
+    if (!this.props.modal || !this.props.modal.props || !this.props.modal.props.onInitialize || !this.state.value) {
+      return null;
+    }
+
+    return (
+      <Button
+        basic
+        content={i18n.t('Common.buttons.edit')}
+        icon='pencil'
+        onClick={() => this.setState({ modalAdd: true })}
+        type='button'
+      />
+    );
+  }
+
+  /**
+   * Renders the add association button.
+   *
+   * @returns {null|*}
+   */
+  renderAddModal() {
+    if (!(this.state.modalAdd && this.props.modal)) {
+      return null;
+    }
+
+    const {
+      component, props, onSave
+    } = this.props.modal;
+
+    return (
+      <EditModal
+        component={component}
+        item={{ id: this.state.value }}
+        onClose={() => this.setState({ modalAdd: false })}
+        onSave={(item) => onSave(item)
+          .then((record) => {
+            this.props.onSelection(record);
+            this.setState({ modalAdd: false, saved: true });
+          })}
+        {...props}
+      />
+    );
+  }
+
+  /**
+   * Renders the clear button.
+   *
+   * @returns {*}
+   */
+  renderClearButton() {
+    if (this.props.required) {
+      return null;
+    }
+
+    return (
+      <Button
+        basic
+        content={i18n.t('Common.buttons.clear')}
+        icon='times'
+        onClick={this.onClear.bind(this)}
+        type='button'
+      />
+    );
+  }
+
+  /**
+   * Sets the search timer.
+   */
+  setSearchTimer() {
+    clearTimeout(this.timeout);
+    this.timeout = setTimeout(this.onSearch.bind(this), TIMEOUT);
+  }
+}
+
+AssociatedDropdown.defaultProps = {
+  className: '',
+  modal: null,
+  placeholder: null,
+  required: false,
+  upward: false
+};
+
+export default AssociatedDropdown;

package/types/components/BooleanIcon.js.flow

@@ -0,0 +1,33 @@
+// @flow
+
+import React from 'react';
+import { Icon } from 'semantic-ui-react';
+
+type Props = {
+  value: boolean
+};
+
+const ICON_FALSE = 'times circle outline';
+const ICON_TRUE = 'check circle outline';
+
+const COLOR_FALSE = 'red';
+const COLOR_TRUE = 'green';
+
+const BooleanIcon = (props: Props) => {
+  let name = ICON_FALSE;
+  let color = COLOR_FALSE;
+
+  if (props.value) {
+    name = ICON_TRUE;
+    color = COLOR_TRUE;
+  }
+
+  return (
+    <Icon
+      color={color}
+      name={name}
+    />
+  );
+};
+
+export default BooleanIcon;

package/types/components/CancelButton.js.flow

@@ -0,0 +1,25 @@
+// @flow
+
+import React from 'react';
+import { Button } from 'semantic-ui-react';
+import i18n from '../i18n/i18n';
+
+type Props = {
+  disabled: boolean,
+  onClick: () => void
+};
+
+const CancelButton = (props: Props) => (
+  <Button
+    disabled={props.disabled}
+    inverted
+    onClick={props.onClick.bind(this)}
+    primary
+    size='medium'
+    type='button'
+  >
+    { i18n.t('Common.buttons.cancel') }
+  </Button>
+);
+
+export default CancelButton;

package/types/components/ColorButton.js.flow

@@ -0,0 +1,34 @@
+// @flow
+
+import React from 'react';
+import { Button } from 'semantic-ui-react';
+import './ColorButton.css';
+
+type Props = {
+  color: string,
+  height?: number,
+  onClick?: () => void,
+  width?: number
+}
+
+const ColorButton = (props: Props) => (
+  <Button
+    className='color-button'
+    onClick={props.onClick && props.onClick.bind(this)}
+    style={{
+      backgroundColor: props.color,
+      cursor: props.onClick ? 'pointer' : 'default',
+      height: props.height,
+      width: props.width
+    }}
+    title='color-button'
+  />
+);
+
+ColorButton.defaultProps = {
+  height: undefined,
+  onClick: undefined,
+  width: undefined
+};
+
+export default ColorButton;

package/types/components/ColorPickerModal.js.flow

@@ -0,0 +1,77 @@
+// @flow
+
+import React, { Component } from 'react';
+import { SketchPicker } from 'react-color';
+import { Button, Modal } from 'semantic-ui-react';
+import i18n from '../i18n/i18n';
+import './ColorPickerModal.css';
+
+type Props = {
+  color: string,
+  onClose: () => void,
+  onSave: (selectedColor: string) => void,
+  open: boolean
+};
+
+type State = {
+  selectedColor: string
+};
+
+class ColorPickerModal extends Component<Props, State> {
+  /**
+   * Constructs a new ColorPickerModal component.
+   *
+   * @param props
+   */
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      selectedColor: props.color
+    };
+  }
+
+  /**
+   * Renders the ColorPickerModal component.
+   *
+   * @returns {*}
+   */
+  render() {
+    return (
+      <Modal
+        className='color-picker-modal'
+        onClose={this.props.onClose.bind(this)}
+        open={this.props.open}
+      >
+        <Modal.Content>
+          <SketchPicker
+            color={this.state.selectedColor}
+            disableAlpha={false}
+            onChangeComplete={(selectedColor) => this.setState({ selectedColor })}
+          />
+        </Modal.Content>
+        <Modal.Actions>
+          <Button
+            onClick={this.props.onSave.bind(this, this.state.selectedColor)}
+            primary
+            size='medium'
+            type='submit'
+          >
+            { i18n.t('Common.buttons.save') }
+          </Button>
+          <Button
+            inverted
+            onClick={this.props.onClose.bind(this)}
+            primary
+            size='medium'
+            type='button'
+          >
+            { i18n.t('Common.buttons.cancel') }
+          </Button>
+        </Modal.Actions>
+      </Modal>
+    );
+  }
+}
+
+export default ColorPickerModal;

package/types/components/ColumnResize.js.flow

@@ -0,0 +1,20 @@
+// @flow
+
+import React from 'react';
+import './ColumnResize.css';
+
+type Props = {
+  onMouseDown: (e: MouseEvent) => void
+};
+
+const ColumnResize = (props: Props) => (
+  <div
+    className='column-resize'
+    onMouseDown={props.onMouseDown.bind(this)}
+    role='presentation'
+  >
+    &nbsp;
+  </div>
+);
+
+export default ColumnResize;