Merge pull request #165 from performant-software/feature/udcsl57_proj…

…ects_metadata UDCSL #57 - Projects metadata
performant-software · Sep 1, 2022 · 4d52692 · 4d52692
2 parents ae7f2db + ed45a85
commit 4d52692
Show file tree

Hide file tree

Showing 13 changed files with 416 additions and 85 deletions.
diff --git a/packages/semantic-ui/package.json b/packages/semantic-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/semantic-components",
-  "version": "0.5.19",
+  "version": "0.5.20-beta.4",
   "description": "A package of shared components based on the Semantic UI Framework.",
   "license": "MIT",
   "main": "./build/index.js",
@@ -12,7 +12,7 @@
     "build": "webpack --mode production && flow-copy-source -v src types"
   },
   "dependencies": {
-    "@performant-software/shared-components": "^0.5.19",
+    "@performant-software/shared-components": "^0.5.20-beta.4",
     "@react-google-maps/api": "^2.8.1",
     "axios": "^0.26.1",
     "i18next": "^19.4.4",

diff --git a/packages/semantic-ui/src/components/GoogleMap.js b/packages/semantic-ui/src/components/GoogleMap.js
@@ -5,7 +5,12 @@ import {
   GoogleMap as MapComponent,
   Marker
 } from '@react-google-maps/api';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState
+} from 'react';
 
 type LatLng = {
   lat: () => number,
@@ -37,28 +42,44 @@ const GoogleMap = (props: Props) => {
   const [center, setCenter] = useState(position || props.defaultCenter);
   const [map, setMap] = useState();
 
-  // If no default zoom is provided and a position is provided, set the default zoom to 12.
-  let { defaultZoom } = props;
+  /**
+   * Set the zoom value based on the position and defaultZoom prop.
+   *
+   * @type {*}
+   */
+  const zoom = useMemo(() => {
+    let value;
 
-  if (!defaultZoom) {
     if (position) {
-      defaultZoom = DEFAULT_ZOOM_MARKER;
+      value = DEFAULT_ZOOM_MARKER;
+    } else if (props.defaultZoom) {
+      value = props.defaultZoom;
     } else {
-      defaultZoom = DEFAULT_ZOOM;
+      value = DEFAULT_ZOOM;
     }
-  }
 
-  // Call the onDragEnd prop, passing the new location.
-  const onDragEnd = ({ latLng }) => {
+    return value;
+  }, [position, props.defaultZoom]);
+
+  /**
+   * Call the onDragEnd prop, passing the new location.
+   *
+   * @type {(function({latLng: *}): void)|*}
+   */
+  const onDragEnd = useCallback(({ latLng }) => {
     if (props.onDragEnd) {
-      // $FlowFixMe - Not actually fixing, we're checking for presence here.
       props.onDragEnd({
         lat: latLng.lat(),
         lng: latLng.lng()
       });
     }
-  };
+  }, [props.onDragEnd]);
 
+  /**
+   * Sets the map object when the component mounts.
+   *
+   * @type {function(*): void}
+   */
   const onLoad = useCallback((m) => setMap(m), []);
 
   // If the position is changed manually and the new location is outside of the current bounds, re-center the map.
@@ -78,7 +99,7 @@ const GoogleMap = (props: Props) => {
       mapContainerStyle={props.containerStyle}
       onClick={onDragEnd}
       onLoad={onLoad}
-      zoom={defaultZoom}
+      zoom={zoom}
     >
       { position && (
         <Marker

diff --git a/packages/semantic-ui/src/components/HorizontalCards.js b/packages/semantic-ui/src/components/HorizontalCards.js
@@ -3,6 +3,7 @@
 import React, {
   useCallback,
   useEffect,
+  useMemo,
   useRef,
   useState
 } from 'react';
@@ -37,9 +38,20 @@ const HorizontalCards = (props: Props) => {
   const ref = useRef();
 
   /**
-   * Sets the number of pages and total page width on the state.
+   * Sets the flex-box style based on the page width.
+   *
+   * @type {function(): {flex: string}}
    */
-  useEffect(() => {
+  const cardStyle = useMemo(() => ({
+    flex: `0 0 ${(pageWidth / props.perPage) - marginWidth}px`
+  }), [pageWidth, marginWidth, props.perPage]);
+
+  /**
+   * Initializes the page width and scroll pages on the sate.
+   *
+   * @type {(function(*=): void)|*}
+   */
+  const initialize = useCallback((event) => {
     const instance = ref.current;
 
     if (instance) {
@@ -48,6 +60,10 @@ const HorizontalCards = (props: Props) => {
       setPageWidth(clientWidth);
       setScrollPages(Math.ceil(scrollWidth / clientWidth));
 
+      if (!event) {
+        setScrollPage(0);
+      }
+
       const child = instance.firstChild;
       if (child) {
         const style = window.getComputedStyle(child);
@@ -57,8 +73,39 @@ const HorizontalCards = (props: Props) => {
         setMarginWidth(leftMargin + rightMargin);
       }
     }
+  }, [ref, props.items]);
+
+  /**
+   * Sets the current page number on the state.
+   *
+   * @type {function(*): void}
+   */
+  const onPageChange = useCallback((increment) => {
+    let nextPage = scrollPage + increment;
+
+    if (nextPage < 0) {
+      nextPage = scrollPages;
+    } else if (nextPage >= scrollPages) {
+      nextPage = 0;
+    }
+
+    setScrollPage(nextPage);
+  }, [scrollPage, scrollPages]);
+
+  /**
+   * Sets the window resize event listener.
+   */
+  useEffect(() => {
+    window.addEventListener('resize', initialize);
+
+    return () => window.removeEventListener('resize', initialize);
   }, []);
 
+  /**
+   * Re-initialize the component if the items change.
+   */
+  useEffect(() => initialize(), [initialize, props.items]);
+
   /**
    * Sets the total number of pages on the state.
    */
@@ -82,32 +129,6 @@ const HorizontalCards = (props: Props) => {
     }
   }, [scrollPage, pageWidth]);
 
-  /**
-   * Sets the current page number on the state.
-   *
-   * @type {function(*): void}
-   */
-  const onPageChange = useCallback((increment) => {
-    let nextPage = scrollPage + increment;
-
-    if (nextPage < 0) {
-      nextPage = scrollPages;
-    } else if (nextPage >= scrollPages) {
-      nextPage = 0;
-    }
-
-    setScrollPage(nextPage);
-  }, [scrollPage, scrollPages]);
-
-  /**
-   * Returns the flex-box style based on the page width.
-   *
-   * @type {function(): {flex: string}}
-   */
-  const getCardStyle = useCallback(() => ({
-    flex: `0 0 ${(pageWidth / props.perPage) - marginWidth}px`
-  }), [pageWidth, marginWidth, props.perPage]);
-
   /**
    * Renders the card component. If a "route" prop is passed, the component is wrapped in a Link.
    *
@@ -119,35 +140,33 @@ const HorizontalCards = (props: Props) => {
   const renderCard = (item, index) => (
     <Card
       link
-      onClick={() => {
-        if (props.onClick) {
-          props.onClick(item, index);
-        }
-      }}
-      style={getCardStyle()}
+      onClick={props.onClick && props.onClick.bind(this, item, index)}
+      style={cardStyle}
     >
       { !props.inlineImage && renderImage(item) }
-      <Card.Content>
-        { props.inlineImage && renderImage(item) }
-        { props.renderHeader && (
-          <Card.Header
-            as={Header}
-            size='small'
-          >
-            { props.renderHeader(item) }
-          </Card.Header>
-        )}
-        { props.renderMeta && (
-          <Card.Meta>
-            { props.renderMeta(item) }
-          </Card.Meta>
-        )}
-        { props.renderDescription && (
-          <Card.Description>
-            { props.renderDescription(item) }
-          </Card.Description>
-        )}
-      </Card.Content>
+      { (props.renderHeader || props.renderMeta || props.renderDescription) && (
+        <Card.Content>
+          { props.inlineImage && renderImage(item) }
+          { props.renderHeader && (
+            <Card.Header
+              as={Header}
+              size='small'
+            >
+              { props.renderHeader(item) }
+            </Card.Header>
+          )}
+          { props.renderMeta && (
+            <Card.Meta>
+              { props.renderMeta(item) }
+            </Card.Meta>
+          )}
+          { props.renderDescription && (
+            <Card.Description>
+              { props.renderDescription(item) }
+            </Card.Description>
+          )}
+        </Card.Content>
+      )}
       { props.renderExtra && (
         <Card.Content
           extra

diff --git a/packages/shared/package.json b/packages/shared/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/shared-components",
-  "version": "0.5.19",
+  "version": "0.5.20-beta.4",
   "description": "A package of shared, framework agnostic, components.",
   "license": "MIT",
   "main": "./build/index.js",
@@ -20,6 +20,7 @@
     "react-fast-compare": "^3.2.0",
     "react-ga4": "^1.4.1",
     "react-i18next": "^11.4.0",
+    "react-quill": "^2.0.0",
     "simple-keyboard": "^3.0.0",
     "simple-keyboard-layouts": "^3.0.0",
     "underscore": "^1.13.2"

diff --git a/packages/shared/src/components/RichTextArea.css b/packages/shared/src/components/RichTextArea.css
@@ -0,0 +1,26 @@
+.rich-text-area.quill {
+  width: 100%;
+}
+
+.rich-text-area.quill .ql-container,
+.rich-text-area.quill .ql-editor {
+  height: auto;
+  min-height: 7em;
+}
+
+.rich-text-area.quill .ql-container,
+.rich-text-area.quill .ql-toolbar {
+  font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  margin: 0em;
+  outline: none;
+  -webkit-appearance: none;
+  tap-highlight-color: rgba(255, 255, 255, 0);
+  line-height: 1.21428571em;
+  font-size: 1em;
+  background: #FFFFFF;
+  border: 1px solid rgba(34, 36, 38, 0.15);
+  color: rgba(0, 0, 0, 0.87);
+  border-radius: 0.28571429rem;
+  box-shadow: 0em 0em 0em 0em transparent inset;
+  transition: color 0.1s ease, border-color 0.1s ease;
+}