@performant-software/semantic-components 0.5.2 → 0.5.5

package/types/components/ReferenceCodeDropdown.js.flow

@@ -0,0 +1,118 @@
+// @flow
+
+import { ReferenceCodesService } from '@performant-software/shared-components';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState
+} from 'react';
+import _ from 'underscore';
+import { Dropdown } from 'semantic-ui-react';
+
+type Item = {
+  reference_table_id: number,
+  key: string
+};
+
+type Props = {
+  fluid?: boolean,
+  multiple?: boolean,
+  onChange: (item: Item) => void,
+  placeholder?: string,
+  referenceTable: string,
+  value: Item | Array<Item>
+};
+
+const ReferenceCodeDropdown = (props: Props) => {
+  const [loading, setLoading] = useState(false);
+  const [options, setOptions] = useState([]);
+
+  /**
+   * Converts the passed ID to a reference code item.
+   *
+   * @type {function(*): {reference_code_id: *}}
+   */
+  const toItem = useCallback((id) => ({
+    reference_code_id: id
+  }), []);
+
+  /**
+   * Converts the passed reference code to a dropdown option.
+   *
+   * @type {function(*): {text: *, value: *, key: *}}
+   */
+  const toOption = useCallback((referenceCode) => ({
+    key: referenceCode.id,
+    value: referenceCode.id,
+    text: referenceCode.name
+  }), []);
+
+  /**
+   * Converts the selected values and calls the onChange prop.
+   *
+   * @type {(function(*, {value: *}): void)|*}
+   */
+  const onChange = useCallback((e, { value }) => {
+    let values;
+
+    if (props.multiple) {
+      values = value;
+    } else {
+      values = _.compact([value]);
+    }
+
+    props.onChange(_.map(values, toItem));
+  }, [toItem, props.multiple, props.onChange]);
+
+  /**
+   * Sets the "value" variable for the Dropdown component.
+   */
+  const value = useMemo(() => {
+    const v = _.pluck(_.filter(props.value, (x) => !x._destroy), 'reference_code_id');
+    return props.multiple ? v : _.first(v);
+  }, [props.multiple, props.value]);
+
+  /**
+   * Loads the list of reference codes from the server.
+   */
+  useEffect(() => {
+    setLoading(true);
+
+    const params = {
+      per_page: 0,
+      reference_table: props.referenceTable,
+      sort_by: 'name'
+    };
+
+    ReferenceCodesService
+      .fetchAll(params)
+      .then(({ data }) => setOptions(_.map(data.reference_codes, toOption)))
+      .finally(() => setLoading(false));
+  }, [toOption]);
+
+  return (
+    <Dropdown
+      clearable
+      disabled={loading}
+      fluid={props.fluid}
+      loading={loading}
+      multiple={props.multiple}
+      onChange={onChange}
+      options={options}
+      placeholder={props.placeholder}
+      search
+      selection
+      selectOnBlur={false}
+      value={value}
+    />
+  );
+};
+
+ReferenceCodeDropdown.defaultProps = {
+  fluid: true,
+  multiple: false,
+  placeholder: undefined
+};
+
+export default ReferenceCodeDropdown;

package/types/components/ReferenceCodeModal.js.flow

@@ -0,0 +1,32 @@
+// @flow
+
+import type { EditContainerProps } from '@performant-software/shared-components';
+import React from 'react';
+import { Form, Modal } from 'semantic-ui-react';
+import i18n from '../i18n/i18n';
+
+const ReferenceCodeModal = (props: EditContainerProps) => (
+  <Modal
+    as={Form}
+    centered={false}
+    open
+  >
+    <Modal.Header
+      content={props.item.id
+        ? i18n.t('ReferenceCodeModal.title.edit')
+        : i18n.t('ReferenceCodeModal.title.add')}
+    />
+    <Modal.Content>
+      <Form.Input
+        error={props.isError('name')}
+        label={i18n.t('ReferenceCodeModal.labels.name')}
+        onChange={props.onTextInputChange.bind(this, 'name')}
+        required={props.isRequired('name')}
+        value={props.item.name}
+      />
+    </Modal.Content>
+    { props.children }
+  </Modal>
+);
+
+export default ReferenceCodeModal;

package/types/components/ReferenceTableModal.js.flow

@@ -0,0 +1,67 @@
+// @flow
+
+import type { EditContainerProps } from '@performant-software/shared-components';
+import React from 'react';
+import { Form, Header, Modal } from 'semantic-ui-react';
+import EmbeddedList from './EmbeddedList';
+import ReferenceCodeModal from './ReferenceCodeModal';
+import i18n from '../i18n/i18n';
+
+const ReferenceTableModal = (props: EditContainerProps) => (
+  <Modal
+    as={Form}
+    centered={false}
+    className='reference-table-modal'
+    open
+  >
+    <Modal.Header
+      content={props.item.id
+        ? i18n.t('ReferenceTableModal.title.edit')
+        : i18n.t('ReferenceTableModal.title.add')}
+    />
+    <Modal.Content>
+      <Form.Input
+        error={props.isError('name')}
+        label={i18n.t('ReferenceTableModal.labels.name')}
+        onChange={props.onTextInputChange.bind(this, 'name')}
+        required={props.isRequired('name')}
+        value={props.item.name}
+      />
+      <Form.Input
+        error={props.isError('key')}
+        label={i18n.t('ReferenceTableModal.labels.key')}
+        onChange={props.onTextInputChange.bind(this, 'key')}
+        required={props.isRequired('key')}
+        value={props.item.key}
+      />
+      <Header
+        content={i18n.t('ReferenceTableModal.labels.referenceCodes')}
+      />
+      <EmbeddedList
+        actions={[{
+          name: 'edit'
+        }, {
+          name: 'copy'
+        }, {
+          name: 'delete'
+        }]}
+        columns={[{
+          name: 'name',
+          label: i18n.t('ReferenceTableModal.referenceCodes.columns.name')
+        }]}
+        items={props.item.reference_codes}
+        modal={{
+          component: ReferenceCodeModal,
+          props: {
+            required: ['name']
+          }
+        }}
+        onDelete={props.onDeleteChildAssociation.bind(this, 'reference_codes')}
+        onSave={props.onSaveChildAssociation.bind(this, 'reference_codes')}
+      />
+    </Modal.Content>
+    { props.children }
+  </Modal>
+);
+
+export default ReferenceTableModal;

package/types/components/ReferenceTablesList.js.flow

@@ -0,0 +1,44 @@
+// @flow
+
+import { ReferenceTablesService } from '@performant-software/shared-components';
+import React from 'react';
+import ListTable from './ListTable';
+import ReferenceTableModal from './ReferenceTableModal';
+
+const ReferenceTablesList = () => (
+  <ListTable
+    actions={[{
+      name: 'edit'
+    }, {
+      name: 'copy'
+    }, {
+      name: 'delete'
+    }]}
+    collectionName='reference_tables'
+    columns={[{
+      name: 'name',
+      label: 'Name',
+      sortable: true
+    }, {
+      name: 'key',
+      label: 'Key',
+      sortable: true
+    }]}
+    modal={{
+      component: ReferenceTableModal,
+      props: {
+        onInitialize: (id) => (
+          ReferenceTablesService
+            .fetchOne(id)
+            .then(({ data }) => data.reference_table)
+        ),
+        required: ['name', 'key']
+      }
+    }}
+    onDelete={(referenceTable) => ReferenceTablesService.delete(referenceTable)}
+    onLoad={(params) => ReferenceTablesService.fetchAll(params)}
+    onSave={(referenceTable) => ReferenceTablesService.save(referenceTable)}
+  />
+);
+
+export default ReferenceTablesList;

package/types/components/RemoteDropdown.js.flow

@@ -311,6 +311,7 @@ class RemoteDropdown extends Component<Props, State> {
         scrolling
         search={() => this.getSearchOptions()}
         searchInput={{
+          'aria-label': 'Search',
           className: 'remote-dropdown-search-input',
           onKeyDown: Timer.clearSearchTimer.bind(this),
           onKeyUp: Timer.setSearchTimer.bind(this, this.onSearch.bind(this))

package/types/css/theme.js.flow

@@ -0,0 +1,5 @@
+// @flow
+
+import 'semantic-ui-less/semantic.less';
+
+export default {};

package/types/index.js.flow

@@ -1,5 +1,8 @@
 // @flow
 
+// Semantic UI styles
+import './css/style.less';
+
 // Components
 export { default as AccordionDataList } from './components/AccordionDataList';
 export { default as AccordionList } from './components/AccordionList';
@@ -12,6 +15,7 @@ export { default as ColorButton } from './components/ColorButton';
 export { default as ColorPickerModal } from './components/ColorPickerModal';
 export { default as useDataList } from './components/DataList';
 export { default as DataTable } from './components/DataTable';
+export { default as DataView } from './components/DataView';
 export { default as DateInput } from './components/DateInput';
 export { default as DatePicker } from './components/DatePicker';
 export { default as DescriptorField } from './components/DescriptorField';
@@ -53,6 +57,10 @@ export { default as ModalDropdown } from './components/ModalDropdown';
 export { default as NestedAccordion } from './components/NestedAccordion';
 export { default as PlayButton } from './components/PlayButton';
 export { default as PhotoViewer } from './components/PhotoViewer';
+export { default as ReferenceCodeDropdown } from './components/ReferenceCodeDropdown';
+export { default as ReferenceCodeModal } from './components/ReferenceCodeModal';
+export { default as ReferenceTableModal } from './components/ReferenceTableModal';
+export { default as ReferenceTablesList } from './components/ReferenceTablesList';
 export { default as RemoteDropdown } from './components/RemoteDropdown';
 export { default as SaveButton } from './components/SaveButton';
 export { default as Section } from './components/Section';

package/webpack.config.js

@@ -1,3 +1,28 @@
 const { configure } = require('@performant-software/webpack-config');
+const path = require('path');
 
-module.exports = configure(__dirname);
+module.exports = configure(__dirname, {
+  resolve: {
+    alias: {
+      '../../theme.config$': path.join(__dirname, '/src/css/theme.config'),
+      '../src/css/site': path.join(__dirname, '/src/css/site')
+    }
+  },
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        semantic: {
+          name: 'semantic-ui',
+          test: /\.less$/,
+          chunks: 'all',
+          enforce: true
+        },
+        main: {
+          name: 'main',
+          chunks: 'all',
+          enforce: true
+        }
+      }
+    }
+  }
+});