@performant-software/semantic-components 0.5.1

package/src/components/LazyDocument.js

@@ -0,0 +1,113 @@
+// @flow
+
+import React, { useState, type Node } from 'react';
+import {
+  Dimmer,
+  Icon,
+  Image,
+  Loader,
+  Segment,
+  Transition,
+  Visibility
+} from 'semantic-ui-react';
+import i18n from '../i18n/i18n';
+import DownloadButton from './DownloadButton';
+import './LazyDocument.css';
+
+type Props = {
+  children?: Node,
+  dimmable?: boolean,
+  duration?: number,
+  image?: any,
+  preview?: ?string,
+  size?: string,
+  src?: string
+};
+
+const LazyDocument = (props: Props) => {
+  const [visible, setVisible] = 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-document'
+          compact
+          onBlur={() => setDimmer(false)}
+          onMouseEnter={() => setDimmer(true)}
+          onMouseLeave={() => setDimmer(false)}
+        >
+          { props.preview && (
+            <Image
+              {...props.image}
+              src={props.preview}
+              size={props.size}
+            />
+          )}
+          { !props.preview && (
+            <Image
+              {...props.image}
+              className='placeholder-image'
+              size={props.size}
+            >
+              <Icon
+                name='file alternate outline'
+                size='big'
+              />
+            </Image>
+          )}
+          { (props.src || props.children) && props.dimmable && (
+            <Dimmer
+              active={dimmer}
+            >
+              <div
+                className='buttons'
+              >
+                { props.src && (
+                  <DownloadButton
+                    content={i18n.t('LazyDocument.buttons.download')}
+                    icon='cloud download'
+                    primary
+                    url={props.src || ''}
+                  />
+                )}
+                { props.children }
+              </div>
+            </Dimmer>
+          )}
+        </Dimmer.Dimmable>
+      </Transition>
+    </>
+  );
+};
+
+LazyDocument.defaultProps = {
+  dimmable: true,
+  duration: 1000,
+  preview: undefined,
+  size: 'medium',
+  src: undefined
+};
+
+export default LazyDocument;

package/src/components/LazyImage.css

@@ -0,0 +1,21 @@
+.lazy-image.ui.segment {
+  padding: 0;
+}
+
+.lazy-image.ui.segment .buttons {
+  display: flex;
+  flex-direction: column;
+}
+
+.lazy-image.ui.segment .buttons .ui.button {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+
+.lazy-image .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/LazyImage.js

@@ -0,0 +1,119 @@
+// @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 PhotoViewer from './PhotoViewer';
+import './LazyImage.css';
+
+type Props = {
+  children?: Node,
+  dimmable: boolean,
+  duration?: number,
+  image?: any,
+  preview?: string,
+  size?: string,
+  src?: string
+};
+
+const LazyImage = (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-image'
+          compact
+          onBlur={() => setDimmer(false)}
+          onMouseEnter={() => setDimmer(true)}
+          onMouseLeave={() => setDimmer(false)}
+        >
+          { props.src && (
+            <Image
+              {...props.image}
+              size={props.size}
+              src={props.preview || props.src}
+            />
+          )}
+          { !props.src && (
+            <Image
+              {...props.image}
+              className='placeholder-image'
+              size={props.size}
+            >
+              <Icon
+                name='image'
+                size='big'
+              />
+            </Image>
+          )}
+          { (props.src || props.children) && props.dimmable && (
+            <Dimmer
+              active={dimmer}
+            >
+              <div
+                className='buttons'
+              >
+                { props.src && (
+                  <Button
+                    content={i18n.t('LazyImage.buttons.view')}
+                    icon='photo'
+                    onClick={() => setModal(true)}
+                    primary
+                  />
+                )}
+                { props.children }
+              </div>
+            </Dimmer>
+          )}
+        </Dimmer.Dimmable>
+      </Transition>
+      <PhotoViewer
+        image={props.src || ''}
+        onClose={() => setModal(false)}
+        open={modal}
+        size='large'
+      />
+    </>
+  );
+};
+
+LazyImage.defaultProps = {
+  dimmable: true,
+  duration: 1000,
+  size: 'medium'
+};
+
+export default LazyImage;

package/src/components/LazyVideo.css

@@ -0,0 +1,21 @@
+.lazy-video.ui.segment {
+  padding: 0;
+}
+
+.lazy-video.ui.segment .buttons {
+  display: flex;
+  flex-direction: column;
+}
+
+.lazy-video.ui.segment .buttons .ui.button {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+
+.lazy-video .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/LazyVideo.js

@@ -0,0 +1,131 @@
+// @flow
+
+import React, { useState, type Element, type Node } from 'react';
+import {
+  Button,
+  Dimmer,
+  Icon,
+  Image,
+  Loader,
+  Segment,
+  Transition,
+  Visibility
+} from 'semantic-ui-react';
+import i18n from '../i18n/i18n';
+import VideoPlayer from './VideoPlayer';
+import './LazyVideo.css';
+
+type Props = {
+  autoPlay?: boolean,
+  children?: Node,
+  dimmable: boolean,
+  duration?: number,
+  embedded?: boolean,
+  icon?: string | Element<any>,
+  image?: any,
+  preview?: ?string,
+  size?: string,
+  src?: string
+};
+
+const LazyVideo = (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-video'
+          compact
+          onBlur={() => setDimmer(false)}
+          onMouseEnter={() => setDimmer(true)}
+          onMouseLeave={() => setDimmer(false)}
+        >
+          { props.preview && (
+            <Image
+              {...props.image}
+              src={props.preview}
+              size={props.size}
+            />
+          )}
+          { !props.preview && (
+            <Image
+              {...props.image}
+              className='placeholder-image'
+              size={props.size}
+            >
+              <Icon
+                name='image'
+                size='big'
+              />
+            </Image>
+          )}
+          { (props.src || props.children) && props.dimmable && (
+            <Dimmer
+              active={dimmer}
+            >
+              <div
+                className='buttons'
+              >
+                { props.src && (
+                  <Button
+                    content={i18n.t('LazyVideo.buttons.play')}
+                    icon='video'
+                    onClick={() => setModal(true)}
+                    primary
+                  />
+                )}
+                { props.children }
+              </div>
+            </Dimmer>
+          )}
+        </Dimmer.Dimmable>
+      </Transition>
+      { props.src && (
+        <VideoPlayer
+          autoPlay={props.autoPlay}
+          embedded={props.embedded}
+          icon={props.icon}
+          onClose={() => setModal(false)}
+          open={modal}
+          placeholder={props.preview}
+          size='large'
+          video={props.src}
+        />
+      )}
+    </>
+  );
+};
+
+LazyVideo.defaultProps = {
+  autoPlay: false,
+  dimmable: true,
+  duration: 1000,
+  embedded: false,
+  icon: 'right circle arrow',
+  size: 'medium'
+};
+
+export default LazyVideo;

package/src/components/LinkButton.css

@@ -0,0 +1,8 @@
+.ui.button.basic.compact.link-button {
+  background: none;
+  border: none;
+  box-shadow: none;
+  font-weight: normal;
+  margin: 0em 0em 0.28571429rem 0em;
+  padding: 0;
+}

package/src/components/LinkButton.js

@@ -0,0 +1,23 @@
+// @flow
+
+import React from 'react';
+import { Button } from 'semantic-ui-react';
+import './LinkButton.css';
+
+type Props = {
+  content: string,
+  onClick: () => void
+};
+
+const LinkButton = (props: Props) => (
+  <Button
+    basic
+    className='link-button'
+    compact
+    content={props.content}
+    onClick={props.onClick.bind(this)}
+    type='button'
+  />
+);
+
+export default LinkButton;

package/src/components/LinkLabel.css

@@ -0,0 +1,8 @@
+.link-label + .link-button.ui.button.basic.compact {
+  float: right;
+  padding-right: 15px;
+}
+
+.ui.form .field > label.link-label {
+  display: inline-block;
+}

package/src/components/LinkLabel.js

@@ -0,0 +1,29 @@
+// @flow
+
+import React from 'react';
+import LinkButton from './LinkButton';
+import './LinkLabel.css';
+
+type Props = {
+  content: string,
+  htmlFor: string,
+  label: string,
+  onClick: () => void
+};
+
+const LinkLabel = (props: Props) => (
+  <>
+    <label
+      className='link-label'
+      htmlFor={props.htmlFor}
+    >
+      { props.label }
+    </label>
+    <LinkButton
+      content={props.content}
+      onClick={props.onClick.bind(this)}
+    />
+  </>
+);
+
+export default LinkLabel;

package/src/components/List.css

@@ -0,0 +1,8 @@
+.header .flex-end-menu {
+  justify-content: flex-end;
+}
+
+.header .list-header-menu,
+.header .per-page-menu {
+  flex-shrink: 0;
+}