@performant-software/semantic-components 0.5.10 → 0.5.13

package/types/components/LazyDocument.js.flow

@@ -1,6 +1,7 @@
 // @flow
 
-import React, { useState, type Node } from 'react';
+import React, { useState, useEffect, type Node } from 'react';
+import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';
 import {
   Dimmer,
   Icon,
@@ -27,6 +28,15 @@ type Props = {
 const LazyDocument = (props: Props) => {
   const [visible, setVisible] = useState(false);
   const [dimmer, setDimmer] = useState(false);
+  const [contentType, setContentType] = useState('');
+
+  useEffect(() => {
+    if (props.src && !props.preview) {
+      fetch(props.src)
+        .then((response) => response.blob())
+        .then((blob) => setContentType(blob.type));
+    }
+  }, [props.preview, props.src]);
 
   if (!visible) {
     return (
@@ -65,7 +75,21 @@ const LazyDocument = (props: Props) => {
               size={props.size}
             />
           )}
-          { !props.preview && (
+          { !props.preview && props.src && contentType === 'application/pdf' && (
+            <Image
+              {...props.image}
+              size={props.size}
+            >
+              <Document
+                file={props.src}
+              >
+                <Page
+                  pageNumber={1}
+                />
+              </Document>
+            </Image>
+          )}
+          { !props.preview && (!props.src || contentType !== 'application/pdf') && (
             <Image
               {...props.image}
               className='placeholder-image'

package/types/components/LazyVideo.js.flow

@@ -70,7 +70,17 @@ const LazyVideo = (props: Props) => {
               size={props.size}
             />
           )}
-          { !props.preview && (
+          { !props.preview && props.src && (
+            <Image
+              {...props.image}
+              size={props.size}
+            >
+              <video
+                src={props.src}
+              />
+            </Image>
+          )}
+          { !props.preview && !props.src && (
             <Image
               {...props.image}
               className='placeholder-image'

package/types/components/ReferenceCodeFormDropdown.js.flow

@@ -0,0 +1,73 @@
+// @flow
+
+import { ReferenceTablesService } from '@performant-software/shared-components';
+import React, { type ComponentType, useState } from 'react';
+import { Form } from 'semantic-ui-react';
+import EditModal from './EditModal';
+import ReferenceCodeDropdown from './ReferenceCodeDropdown';
+import ReferenceCodeFormLabel from './ReferenceCodeFormLabel';
+import ReferenceTableModal from './ReferenceTableModal';
+
+type Props = {
+  error?: boolean,
+  label?: string,
+  required?: boolean,
+  referenceTable: string
+};
+
+const ReferenceCodeFormDropdown: ComponentType<any> = (props: Props) => {
+  const {
+    error,
+    label,
+    required,
+    referenceTable,
+    ...rest
+  } = props;
+
+  const [modal, setModal] = useState(false);
+  const [dropdownKey, setDropdownKey] = useState(0);
+
+  return (
+    <>
+      <Form.Input
+        error={error}
+        label={(
+          <ReferenceCodeFormLabel
+            label={label}
+            onClick={() => setModal(true)}
+            referenceTable={referenceTable}
+          />
+        )}
+        required={required}
+      >
+        <ReferenceCodeDropdown
+          {...rest}
+          id={referenceTable}
+          referenceTable={referenceTable}
+          key={dropdownKey}
+        />
+      </Form.Input>
+      { modal && (
+        <EditModal
+          component={ReferenceTableModal}
+          item={{ id: referenceTable }}
+          onClose={() => setModal(false)}
+          onInitialize={(key) => (
+            ReferenceTablesService
+              .fetchByKey(key)
+              .then(({ data }) => data.reference_table)
+          )}
+          onSave={(record) => (
+            ReferenceTablesService
+              .save(record)
+              .then(({ data }) => data.reference_table)
+              .then(() => setDropdownKey((prevKey) => prevKey + 1))
+              .finally(() => setModal(false))
+          )}
+        />
+      )}
+    </>
+  );
+};
+
+export default ReferenceCodeFormDropdown;

package/types/components/ReferenceCodeFormLabel.js.flow

@@ -0,0 +1,51 @@
+// @flow
+
+import React, { type ComponentType } from 'react';
+import { withTranslation } from 'react-i18next';
+import {
+  Button,
+  Header,
+  Icon,
+  Popup
+} from 'semantic-ui-react';
+import i18n from '../i18n/i18n';
+
+type Props = {
+  label: string,
+  onClick: () => void,
+  referenceTable: string
+};
+
+const ReferenceCodeFormLabel: ComponentType<any> = withTranslation()((props: Props) => (
+  <div>
+    <label
+      htmlFor={props.referenceTable}
+    >
+      { props.label }
+    </label>
+    <Popup
+      hoverable
+      trigger={(
+        <Icon
+          name='info circle'
+          style={{
+            marginLeft: '0.3em'
+          }}
+        />
+      )}
+    >
+      <Header
+        content={props.label}
+      />
+      <p>{ i18n.t('ReferenceCodeFormLabel.content', { name: props.label })}</p>
+      <Button
+        content={i18n.t('Common.buttons.edit')}
+        icon='edit'
+        primary
+        onClick={props.onClick}
+      />
+    </Popup>
+  </div>
+));
+
+export default ReferenceCodeFormLabel;

package/types/hooks/BatchEdit.js.flow

@@ -0,0 +1,57 @@
+// @flow
+
+import React, { useCallback, type ComponentType } from 'react';
+import _ from 'underscore';
+
+type Props = {
+  items: Array<any>,
+  onChange: (items: Array<any>) => void
+};
+
+const withBatchEdit = (WrappedComponent: ComponentType<any>): any => (props: Props) => {
+  /**
+   * Adds a new item to the list.
+   *
+   * @type {(function(): void)|*}
+   */
+  const onAddItem = useCallback(() => {
+    props.onChange([...props.items, {}]);
+  }, [props.items]);
+
+  /**
+   * Removes the item at the passed index from the list.
+   *
+   * @type {(function(*): void)|*}
+   */
+  const onRemoveItem = useCallback((findIndex) => {
+    props.onChange(_.reject(props.items, (item, index) => index === findIndex));
+  }, [props.items]);
+
+  /**
+   * Updates the passed attribute of the item at the passed index.
+   *
+   * @type {(function(number, string, ?Event, {value: *}): void)|*}
+   */
+  const onUpdateItem = useCallback((findIndex: number, attribute: string, e: ?Event, { value }) => {
+    props.onChange(_.map(props.items, (item, index) => (
+      index !== findIndex ? item : ({ ...item, [attribute]: value })
+    )));
+  }, [props.items]);
+
+  return (
+    <WrappedComponent
+      {...props}
+      onAddItem={onAddItem}
+      onRemoveItem={onRemoveItem}
+      onUpdateItem={onUpdateItem}
+    />
+  );
+};
+
+export default withBatchEdit;
+
+export type BatchEditProps = {
+  onAddItem: () => void,
+  onRemoveItem: (index: number) => void,
+  onUpdateItem: (index: number, attribute: string, e: Event, data: any) => void
+};

package/types/index.js.flow

@@ -38,6 +38,7 @@ export { default as ItemCollection } from './components/ItemCollection';
 export { default as ItemList } from './components/ItemList';
 export { default as Items } from './components/Items';
 export { default as KeyboardField } from './components/KeyboardField';
+export { default as KeyValuePairs } from './components/KeyValuePairs';
 export { default as LazyDocument } from './components/LazyDocument';
 export { default as LazyImage } from './components/LazyImage';
 export { default as LazyVideo } from './components/LazyVideo';
@@ -59,6 +60,8 @@ 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 ReferenceCodeFormDropdown } from './components/ReferenceCodeFormDropdown';
+export { default as ReferenceCodeFormLabel } from './components/ReferenceCodeFormLabel';
 export { default as ReferenceCodeModal } from './components/ReferenceCodeModal';
 export { default as ReferenceTableModal } from './components/ReferenceTableModal';
 export { default as ReferenceTablesList } from './components/ReferenceTablesList';
@@ -77,10 +80,14 @@ export { default as VideoPlayer } from './components/VideoPlayer';
 export { default as VideoPlayerButton } from './components/VideoPlayerButton';
 export { default as ViewXML } from './components/ViewXML';
 
+// Hooks
+export { default as BatchEdit } from './hooks/BatchEdit';
+
 // Types
 export type { EditPageProps } from './components/EditPage';
 export type { FileUploadProps } from './components/FileUploadModal';
 export type { Props as ListProps } from './components/List';
+export type { BatchEditProps } from './hooks/BatchEdit';
 
 // Constants
 export { SORT_ASCENDING, SORT_DESCENDING } from './components/DataList';