@performant-software/semantic-components 0.5.13 → 0.5.16-beta.0

package/build/main.css

@@ -146,6 +146,10 @@
   color: rgba(95, 95, 95, 0.86);
 }
 
+.audio-player.ui.modal > .content > audio {
+  width: 100%;
+}
+
 .color-button.ui.button {
   border: 1px solid rgba(34, 36, 38, 0.15);
   vertical-align: middle;
@@ -418,7 +422,30 @@ div.react-calendar {
   left: 4px;
 }
 
+.lazy-audio.ui.segment {
+  display: inline-block !important;
+  max-width: 100%;
+  padding: 0;
+}
+.lazy-audio.ui.segment .buttons {
+  display: flex;
+  flex-direction: column;
+}
+.lazy-audio.ui.segment .buttons .ui.button {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+.lazy-audio .placeholder-image.ui.image {
+  background-color: #f9fafb;
+  box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
+  padding-top: 20%;
+  padding-bottom: 20%;
+  text-align: center;
+}
+
 .lazy-document.ui.segment {
+  display: inline-block !important;
+  max-width: 100%;
   padding: 0;
 }
 .lazy-document.ui.segment .buttons {
@@ -446,6 +473,8 @@ div.react-calendar {
 }
 
 .lazy-image.ui.segment {
+  display: inline-block !important;
+  max-width: 100%;
   padding: 0;
 }
 .lazy-image.ui.segment .buttons {
@@ -469,6 +498,8 @@ div.react-calendar {
 }
 
 .lazy-video.ui.segment {
+  display: inline-block !important;
+  max-width: 100%;
   padding: 0;
 }
 .lazy-video.ui.segment .buttons {
@@ -486,6 +517,10 @@ div.react-calendar {
   padding-bottom: 20%;
   text-align: center;
 }
+.lazy-video.ui.segment > .image > video {
+  display: table;
+  width: 100%;
+}
 
 .listLoader.ui.segment {
   position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/semantic-components",
-  "version": "0.5.13",
+  "version": "0.5.16-beta.0",
   "description": "A package of shared components based on the Semantic UI Framework.",
   "license": "MIT",
   "main": "./build/index.js",
@@ -9,10 +9,12 @@
     "./build/semantic-ui.css"
   ],
   "scripts": {
-    "build": "webpack --mode production && flow-copy-source -v src types"
+    "build": "webpack --mode production && flow-copy-source -v src types",
+    "publish": "npm publish",
+    "publish-beta": "npm publish --tag beta"
   },
   "dependencies": {
-    "@performant-software/shared-components": "^0.5.13",
+    "@performant-software/shared-components": "^0.5.16-beta.0",
     "@react-google-maps/api": "^2.8.1",
     "axios": "^0.26.1",
     "i18next": "^19.4.4",
@@ -33,7 +35,7 @@
     "react-dom": ">= 16.13.1 < 18.0.0"
   },
   "devDependencies": {
-    "@performant-software/webpack-config": "^0.5.13",
+    "@performant-software/webpack-config": "^0.5.16-beta.0",
     "flow-copy-source": "^2.0.9",
     "less": "^4.1.2",
     "less-loader": "^11.0.0",

package/src/components/AudioPlayer.css

@@ -0,0 +1,3 @@
+.audio-player.ui.modal > .content > audio {
+  width: 100%;
+}

package/src/components/AudioPlayer.js

@@ -0,0 +1,36 @@
+// @flow
+
+import React from 'react';
+import { Button, Modal } from 'semantic-ui-react';
+import i18n from '../i18n/i18n';
+import './AudioPlayer.css';
+
+type Props = {
+  centered?: boolean,
+  onClose: () => void,
+  open: boolean,
+  src: string
+};
+
+const AudioPlayer = (props: Props) => (
+  <Modal
+    centered={props.centered}
+    className='audio-player'
+    open={props.open}
+  >
+    <Modal.Content>
+      <audio
+        controls
+        src={props.src}
+      />
+    </Modal.Content>
+    <Modal.Actions>
+      <Button
+        content={i18n.t('Common.buttons.close')}
+        onClick={props.onClose}
+      />
+    </Modal.Actions>
+  </Modal>
+);
+
+export default AudioPlayer;

package/src/components/LazyAudio.css

@@ -0,0 +1,23 @@
+.lazy-audio.ui.segment {
+  display: inline-block !important;
+  max-width: 100%;
+  padding: 0;
+}
+
+.lazy-audio.ui.segment .buttons {
+  display: flex;
+  flex-direction: column;
+}
+
+.lazy-audio.ui.segment .buttons .ui.button {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+
+.lazy-audio .placeholder-image.ui.image {
+  background-color: #f9fafb;
+  box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
+  padding-top: 20%;
+  padding-bottom: 20%;
+  text-align: center;
+}

package/src/components/LazyAudio.js

@@ -0,0 +1,123 @@
+// @flow
+
+import React, { useState, type Node } from 'react';
+import {
+  Button,
+  Dimmer,
+  Icon,
+  Image,
+  Loader,
+  Segment,
+  Transition,
+  Visibility
+} from 'semantic-ui-react';
+import i18n from '../i18n/i18n';
+import AudioPlayer from './AudioPlayer';
+import './LazyAudio.css';
+
+type Props = {
+  children?: Node,
+  dimmable: boolean,
+  duration?: number,
+  image?: any,
+  preview?: string,
+  size?: string,
+  src?: string
+};
+
+const LazyAudio = (props: Props) => {
+  const [visible, setVisible] = useState(false);
+  const [modal, setModal] = useState(false);
+  const [dimmer, setDimmer] = useState(false);
+
+  if (!visible) {
+    return (
+      <Visibility
+        as='span'
+        fireOnMount
+        onTopVisible={() => setVisible(true)}
+      >
+        <Loader
+          active
+          inline='centered'
+          size={props.size}
+        />
+      </Visibility>
+    );
+  }
+
+  return (
+    <>
+      <Transition
+        duration={props.duration}
+        visible
+      >
+        <Dimmer.Dimmable
+          as={Segment}
+          className='lazy-audio'
+          compact
+          onBlur={() => setDimmer(false)}
+          onMouseEnter={() => setDimmer(true)}
+          onMouseLeave={() => setDimmer(false)}
+        >
+          { props.preview && (
+            <Image
+              {...props.image}
+              size={props.size}
+              src={props.preview}
+            />
+          )}
+          { !props.preview && (
+            <Image
+              {...props.image}
+              className='placeholder-image'
+              size={props.size}
+            >
+              <Icon
+                name='file audio outline'
+                size='big'
+              />
+            </Image>
+          )}
+          { (props.src || props.children) && props.dimmable && (
+            <Dimmer
+              active={dimmer}
+            >
+              <div
+                className='buttons'
+              >
+                { props.src && (
+                  <Button
+                    content={i18n.t('LazyAudio.buttons.play')}
+                    icon='play circle outline'
+                    onClick={() => setModal(true)}
+                    primary
+                  />
+                )}
+                { props.children }
+              </div>
+            </Dimmer>
+          )}
+        </Dimmer.Dimmable>
+      </Transition>
+      { props.src && (
+        <AudioPlayer
+          onClose={() => setModal(false)}
+          open={modal}
+          size='large'
+          src={props.src}
+        />
+      )}
+    </>
+  );
+};
+
+LazyAudio.defaultProps = {
+  dimmable: true,
+  duration: 1000,
+  preview: undefined,
+  size: 'medium',
+  src: undefined
+};
+
+export default LazyAudio;

package/src/components/LazyDocument.css

@@ -1,4 +1,6 @@
 .lazy-document.ui.segment {
+  display: inline-block !important;
+  max-width: 100%;
   padding: 0;
 }
 

package/src/components/LazyDocument.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { useState, useEffect, type Node } from 'react';
+import React, { useState, type Node } from 'react';
 import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';
 import {
   Dimmer,
@@ -20,6 +20,7 @@ type Props = {
   dimmable?: boolean,
   duration?: number,
   image?: any,
+  pdf?: boolean,
   preview?: ?string,
   size?: string,
   src?: string
@@ -28,15 +29,6 @@ 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 (
@@ -75,7 +67,7 @@ const LazyDocument = (props: Props) => {
               size={props.size}
             />
           )}
-          { !props.preview && props.src && contentType === 'application/pdf' && (
+          { !props.preview && props.src && props.pdf && (
             <Image
               {...props.image}
               size={props.size}
@@ -89,7 +81,7 @@ const LazyDocument = (props: Props) => {
               </Document>
             </Image>
           )}
-          { !props.preview && (!props.src || contentType !== 'application/pdf') && (
+          { !props.preview && !(props.src && props.pdf) && (
             <Image
               {...props.image}
               className='placeholder-image'
@@ -113,7 +105,7 @@ const LazyDocument = (props: Props) => {
                     content={i18n.t('LazyDocument.buttons.download')}
                     icon='cloud download'
                     primary
-                    url={props.src || ''}
+                    url={props.src}
                   />
                 )}
                 { props.children }
@@ -129,6 +121,7 @@ const LazyDocument = (props: Props) => {
 LazyDocument.defaultProps = {
   dimmable: true,
   duration: 1000,
+  pdf: false,
   preview: undefined,
   size: 'medium',
   src: undefined

package/src/components/LazyImage.css

@@ -1,4 +1,6 @@
 .lazy-image.ui.segment {
+  display: inline-block !important;
+  max-width: 100%;
   padding: 0;
 }
 
@@ -18,4 +20,4 @@
   padding-top: 20%;
   padding-bottom: 20%;
   text-align: center;
-}
+}

package/src/components/LazyImage.js

@@ -60,14 +60,14 @@ const LazyImage = (props: Props) => {
           onMouseEnter={() => setDimmer(true)}
           onMouseLeave={() => setDimmer(false)}
         >
-          { props.src && (
+          { (props.preview || props.src) && (
             <Image
               {...props.image}
               size={props.size}
               src={props.preview || props.src}
             />
           )}
-          { !props.src && (
+          { !(props.preview || props.src) && (
             <Image
               {...props.image}
               className='placeholder-image'
@@ -100,12 +100,14 @@ const LazyImage = (props: Props) => {
           )}
         </Dimmer.Dimmable>
       </Transition>
-      <PhotoViewer
-        image={props.src || ''}
-        onClose={() => setModal(false)}
-        open={modal}
-        size='large'
-      />
+      { props.src && (
+        <PhotoViewer
+          image={props.src}
+          onClose={() => setModal(false)}
+          open={modal}
+          size='large'
+        />
+      )}
     </>
   );
 };

package/src/components/LazyVideo.css

@@ -1,4 +1,6 @@
 .lazy-video.ui.segment {
+  display: inline-block !important;
+  max-width: 100%;
   padding: 0;
 }
 
@@ -18,4 +20,9 @@
   padding-top: 20%;
   padding-bottom: 20%;
   text-align: center;
-}
+}
+
+.lazy-video.ui.segment > .image > video {
+  display: table;
+  width: 100%;
+}

package/src/components/ReferenceCodeFormDropdown.js

@@ -50,12 +50,15 @@ const ReferenceCodeFormDropdown: ComponentType<any> = (props: Props) => {
       { modal && (
         <EditModal
           component={ReferenceTableModal}
-          item={{ id: referenceTable }}
+          item={{ id: referenceTable, key: referenceTable }}
           onClose={() => setModal(false)}
           onInitialize={(key) => (
             ReferenceTablesService
               .fetchByKey(key)
-              .then(({ data }) => data.reference_table)
+              .then(({ data }) => ({
+                ...data.reference_table,
+                key
+              }))
           )}
           onSave={(record) => (
             ReferenceTablesService

package/src/i18n/en.json

@@ -135,6 +135,11 @@
       "value": "Value"
     }
   },
+  "LazyAudio": {
+    "buttons": {
+      "play": "Play"
+    }
+  },
   "LazyDocument": {
     "buttons": {
       "download": "Download"

package/src/index.js

@@ -9,6 +9,7 @@ export { default as AccordionList } from './components/AccordionList';
 export { default as AccordionSelector } from './components/AccordionSelector';
 export { default as ArrowButtons } from './components/ArrowButtons';
 export { default as AssociatedDropdown } from './components/AssociatedDropdown';
+export { default as AudioPlayer } from './components/AudioPlayer';
 export { default as BooleanIcon } from './components/BooleanIcon';
 export { default as CancelButton } from './components/CancelButton';
 export { default as ColorButton } from './components/ColorButton';
@@ -39,6 +40,7 @@ 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 LazyAudio } from './components/LazyAudio';
 export { default as LazyDocument } from './components/LazyDocument';
 export { default as LazyImage } from './components/LazyImage';
 export { default as LazyVideo } from './components/LazyVideo';

package/types/components/AudioPlayer.js.flow

@@ -0,0 +1,36 @@
+// @flow
+
+import React from 'react';
+import { Button, Modal } from 'semantic-ui-react';
+import i18n from '../i18n/i18n';
+import './AudioPlayer.css';
+
+type Props = {
+  centered?: boolean,
+  onClose: () => void,
+  open: boolean,
+  src: string
+};
+
+const AudioPlayer = (props: Props) => (
+  <Modal
+    centered={props.centered}
+    className='audio-player'
+    open={props.open}
+  >
+    <Modal.Content>
+      <audio
+        controls
+        src={props.src}
+      />
+    </Modal.Content>
+    <Modal.Actions>
+      <Button
+        content={i18n.t('Common.buttons.close')}
+        onClick={props.onClose}
+      />
+    </Modal.Actions>
+  </Modal>
+);
+
+export default AudioPlayer;

package/types/components/LazyAudio.js.flow

@@ -0,0 +1,123 @@
+// @flow
+
+import React, { useState, type Node } from 'react';
+import {
+  Button,
+  Dimmer,
+  Icon,
+  Image,
+  Loader,
+  Segment,
+  Transition,
+  Visibility
+} from 'semantic-ui-react';
+import i18n from '../i18n/i18n';
+import AudioPlayer from './AudioPlayer';
+import './LazyAudio.css';
+
+type Props = {
+  children?: Node,
+  dimmable: boolean,
+  duration?: number,
+  image?: any,
+  preview?: string,
+  size?: string,
+  src?: string
+};
+
+const LazyAudio = (props: Props) => {
+  const [visible, setVisible] = useState(false);
+  const [modal, setModal] = useState(false);
+  const [dimmer, setDimmer] = useState(false);
+
+  if (!visible) {
+    return (
+      <Visibility
+        as='span'
+        fireOnMount
+        onTopVisible={() => setVisible(true)}
+      >
+        <Loader
+          active
+          inline='centered'
+          size={props.size}
+        />
+      </Visibility>
+    );
+  }
+
+  return (
+    <>
+      <Transition
+        duration={props.duration}
+        visible
+      >
+        <Dimmer.Dimmable
+          as={Segment}
+          className='lazy-audio'
+          compact
+          onBlur={() => setDimmer(false)}
+          onMouseEnter={() => setDimmer(true)}
+          onMouseLeave={() => setDimmer(false)}
+        >
+          { props.preview && (
+            <Image
+              {...props.image}
+              size={props.size}
+              src={props.preview}
+            />
+          )}
+          { !props.preview && (
+            <Image
+              {...props.image}
+              className='placeholder-image'
+              size={props.size}
+            >
+              <Icon
+                name='file audio outline'
+                size='big'
+              />
+            </Image>
+          )}
+          { (props.src || props.children) && props.dimmable && (
+            <Dimmer
+              active={dimmer}
+            >
+              <div
+                className='buttons'
+              >
+                { props.src && (
+                  <Button
+                    content={i18n.t('LazyAudio.buttons.play')}
+                    icon='play circle outline'
+                    onClick={() => setModal(true)}
+                    primary
+                  />
+                )}
+                { props.children }
+              </div>
+            </Dimmer>
+          )}
+        </Dimmer.Dimmable>
+      </Transition>
+      { props.src && (
+        <AudioPlayer
+          onClose={() => setModal(false)}
+          open={modal}
+          size='large'
+          src={props.src}
+        />
+      )}
+    </>
+  );
+};
+
+LazyAudio.defaultProps = {
+  dimmable: true,
+  duration: 1000,
+  preview: undefined,
+  size: 'medium',
+  src: undefined
+};
+
+export default LazyAudio;