@performant-software/shared-components 0.5.1

package/src/components/EditContainer.js

@@ -0,0 +1,448 @@
+// @flow
+
+import React, { Component, type ComponentType, type Element } from 'react';
+import _ from 'underscore';
+import i18n from '../i18n/i18n';
+import { isEqual } from '../utils/Object';
+
+type Props = {
+  children?: Element<any>,
+  defaults?: any,
+  item?: any,
+  onClose: () => void,
+  onInitialize?: (id: number) => Promise<any>,
+  onSave: (item: any) => Promise<any>,
+  required?: Array<string>,
+  resolveValidationError?: ({ error: string, item: any, status: number, key: string }) => Array<string>,
+  validate?: (item: any) => Array<string>
+};
+
+type State = {
+  item: any,
+  loading: boolean,
+  originalItem: any,
+  saving: boolean,
+  validationErrors: any
+};
+
+const ERROR_EMPTY = 'can\'t be blank';
+const ERROR_UNIQUE = 'has already been taken';
+
+const useEditContainer = (WrappedComponent: ComponentType<any>) => (
+  class extends Component<Props, State> {
+    /**
+     * Constructs a new EditProvider component.
+     *
+     * @param props
+     */
+    constructor(props: Props) {
+      super(props);
+
+      const item = _.defaults(props.item || {}, props.defaults || {});
+
+      this.state = {
+        item,
+        loading: false,
+        originalItem: item,
+        saving: false,
+        validationErrors: []
+      };
+    }
+
+    /**
+     * Loads the item from the API if an onInitialize prop is specified.
+     */
+    componentDidMount() {
+      if (this.props.onInitialize && this.props.item && this.props.item.id) {
+        this.setState({ loading: true }, () => {
+          if (this.props.onInitialize && this.props.item) {
+            this.props
+              .onInitialize(this.props.item.id)
+              .then((item) => this.setState({ item, originalItem: item, loading: false }));
+          }
+        });
+      }
+    }
+
+    /**
+     * Resets the item on the state.
+     *
+     * @param prevProps
+     */
+    componentDidUpdate(prevProps: Props) {
+      if (prevProps.item !== this.props.item) {
+        this.setState({ item: this.props.item, originalItem: this.props.item });
+      }
+    }
+
+    /**
+     * Sets the saving property to false.
+     */
+    componentWillUnmount() {
+      this.onSetState({ saving: false });
+    }
+
+    /**
+     * Returns true if the IDs or UIDs for the passed records match.
+     *
+     * @param a
+     * @param b
+     *
+     * @returns {*|boolean}
+     */
+    isChild(a: any, b: any) {
+      return (a.uid && b.uid && a.uid === b.uid) || (a.id && b.id && a.id === b.id);
+    }
+
+    /**
+     * Returns true if the passed property is required.
+     *
+     * @param prop
+     *
+     * @returns {*|boolean}
+     */
+    isRequired(prop: string) {
+      return this.props.required && _.contains(this.props.required, prop);
+    }
+
+    /**
+     * Returns true if the passed property is listed in the hash of validation errors.
+     *
+     * @param prop
+     *
+     * @returns {*|boolean}
+     */
+    isError(prop: string) {
+      return _.has(this.state.validationErrors, prop);
+    }
+
+    /**
+     * Closes the provider.
+     */
+    onClose() {
+      this.props.onClose();
+    }
+
+    /**
+     * Adds the passed child to the passed association for the current item.
+     *
+     * @param association
+     * @param child
+     */
+    onCreateChildAssociation(association: string, child: any) {
+      this.setState((state) => ({
+        item: {
+          ...state.item,
+          [association]: [
+            ...(state.item[association] || []),
+            child
+          ]
+        }
+      }));
+    }
+
+    /**
+     * Removes the passed child from the passed association.
+     *
+     * @param association
+     * @param child
+     */
+    onDeleteChildAssociation(association: string, child: any) {
+      return child.id
+        ? this.onMarkChildAssociationForDelete(association, child)
+        : this.onRemoveChildAssociation(association, child);
+    }
+
+    /**
+     * Resolves the validation errors from the passed HTTP response.
+     *
+     * @param errors
+     * @param status
+     */
+    onError({ response: { data: { errors = {} }, status } }: any) {
+      const validationErrors = {};
+
+      _.each(Object.keys(errors), (key) => {
+        const fieldErrors = errors[key];
+        const value = this.state.item[key];
+
+        _.each(fieldErrors, (error) => {
+          if (error === ERROR_UNIQUE) {
+            _.extend(validationErrors, { [key]: i18n.t('EditContainer.errors.unique', { key, value }) });
+          } else if (error === ERROR_EMPTY) {
+            _.extend(validationErrors, { [key]: i18n.t('EditContainer.errors.required', { key }) });
+          } else if (this.props.resolveValidationError) {
+            _.extend(validationErrors, this.props.resolveValidationError({
+              key,
+              error,
+              status,
+              item: this.state.item
+            }));
+          }
+        });
+      });
+
+      if (status === 400 && _.isEmpty(validationErrors)) {
+        _.extend(validationErrors, { error: i18n.t('EditContainer.errors.general') });
+      } else if (status === 500 && _.isEmpty(validationErrors)) {
+        _.extend(validationErrors, { error: i18n.t('EditContainer.errors.system') });
+      }
+
+      this.setState({ saving: false, validationErrors });
+    }
+
+    /**
+     * Marks the passed child for delete form the passed association. This function is called if the child record
+     * has an ID value.
+     *
+     * @param association
+     * @param child
+     */
+    onMarkChildAssociationForDelete(association: string, child: any) {
+      this.setState((state) => ({
+        item: {
+          ...state.item,
+          [association]: _.map(state.item[association] || [],
+            (c) => (c.id === child.id ? { ...c, _destroy: true } : c))
+        }
+      }));
+    }
+
+    /**
+     * Modifies the passed association based on the passed collection of children.
+     *
+     * @param association
+     * @param children
+     */
+    onMultiAddChildAssociations(association: string, children: any) {
+      const items = this.state.item[association];
+
+      // Add new children or update existing children
+      _.each(children, this.onSaveChildAssociation.bind(this, association));
+
+      // Remove any children that no longer exist
+      const childrenToRemove = _.filter(items, (item) => !_.find(children, this.isChild.bind(this, item)));
+      _.each(childrenToRemove, this.onDeleteChildAssociation.bind(this, association));
+    }
+
+    /**
+     * Removes the passed child record from the passed association. This function is called if the child record does
+     * not have an ID value.
+     *
+     * @param association
+     * @param child
+     */
+    onRemoveChildAssociation(association: string, child: any) {
+      this.setState((state) => ({
+        item: {
+          ...state.item,
+          [association]: _.filter(state.item[association] || [],
+            (c) => c !== child)
+        }
+      }));
+    }
+
+    /**
+     * Resets the item on the state to the default item and calls the onReset prop.
+     */
+    onReset() {
+      const item = this.props.defaults || {};
+
+      this.setState({
+        item,
+        originalItem: item
+      });
+    }
+
+    /**
+     * Saves the current item.
+     */
+    onSave() {
+      if (!this.validateForm()) {
+        return;
+      }
+
+      this.setState({ saving: true }, () => {
+        this.props
+          .onSave(this.state.item)
+          .catch(this.onError.bind(this))
+          .finally(() => this.setState({ saving: false }));
+      });
+    }
+
+    /**
+     * Adds the passed child record to the passed association.
+     *
+     * @param association
+     * @param child
+     */
+    onSaveChildAssociation(association: string, child: any) {
+      const children = this.state.item[association] || [];
+
+      return _.find(children, this.isChild.bind(this, child))
+        ? this.onUpdateChildAssociation(association, child)
+        : this.onCreateChildAssociation(association, child);
+    }
+
+    /**
+     * Updates the child record in the passed association.
+     *
+     * @param association
+     * @param child
+     */
+    onUpdateChildAssociation(association: string, child: any) {
+      this.setState((state) => ({
+        item: {
+          ...state.item,
+          [association]: _.map(state.item[association] || [], (c) => (this.isChild(child, c) ? child : c))
+        }
+      }));
+    }
+
+    /**
+     * Sets the associated ID and object.
+     *
+     * @param idKey
+     * @param valueKey
+     * @param record
+     */
+    onAssociationInputChange(idKey: string, valueKey: string, record: any = {}) {
+      this.setState((state) => ({
+        item: {
+          ...state.item,
+          [idKey]: record.id || '',
+          [valueKey]: record || {}
+        },
+        validationErrors: _.omit(state.validationErrors, idKey)
+      }));
+    }
+
+    /**
+     * Toggles the checkbox value for the passed key.
+     *
+     * @param key
+     */
+    onCheckboxInputChange(key: string) {
+      this.setState((state) => ({
+        item: {
+          ...state.item,
+          [key]: !state.item[key]
+        }
+      }));
+    }
+
+    /**
+     * Sets the passed properties on the item on the state.
+     *
+     * @param props
+     */
+    onSetState(props: any) {
+      this.setState((state) => ({
+        item: {
+          ...state.item,
+          ...props
+        }
+      }));
+    }
+
+    /**
+     * Sets the text input property for the passed key/value.
+     *
+     * @param key
+     * @param e
+     * @param value
+     */
+    onTextInputChange(key: string, e: Event, { value }: any) {
+      this.setState((state) => ({
+        item: {
+          ...state.item,
+          [key]: value
+        },
+        validationErrors: _.omit(state.validationErrors, key)
+      }));
+    }
+
+    render() {
+      return (
+        <WrappedComponent
+          {...this.props}
+          dirty={!!(this.state.item.id && !isEqual(this.state.item, this.state.originalItem))}
+          errors={_.values(this.state.validationErrors)}
+          isError={this.isError.bind(this)}
+          isRequired={this.isRequired.bind(this)}
+          item={this.state.item}
+          loading={this.state.loading}
+          onAssociationInputChange={this.onAssociationInputChange.bind(this)}
+          onCheckboxInputChange={this.onCheckboxInputChange.bind(this)}
+          onDeleteChildAssociation={this.onDeleteChildAssociation.bind(this)}
+          onMultiAddChildAssociations={this.onMultiAddChildAssociations.bind(this)}
+          onReset={this.onReset.bind(this)}
+          onSave={this.onSave.bind(this)}
+          onSaveChildAssociation={this.onSaveChildAssociation.bind(this)}
+          onTextInputChange={this.onTextInputChange.bind(this)}
+          onSetState={this.onSetState.bind(this)}
+          saving={this.state.saving}
+        />
+      );
+    }
+
+    /**
+     * Validates the form using the component props required attributes.
+     *
+     * @returns {boolean}
+     */
+    validateForm() {
+      const validationErrors = [];
+
+      // Custom validations
+      if (this.props.validate) {
+        _.extend(validationErrors, this.props.validate(this.state.item));
+      }
+
+      // Validate required properties
+      const required = this.props.required || [];
+
+      _.each(required, (key) => {
+        const value = this.state.item[key];
+
+        let invalid;
+
+        if (_.isNumber(value)) {
+          invalid = _.isEmpty(value.toString());
+        } else {
+          invalid = _.isEmpty(value);
+        }
+
+        if (invalid) {
+          _.extend(validationErrors, { [key]: i18n.t('EditContainer.errors.required', { key }) });
+        }
+      });
+
+      this.setState({ validationErrors });
+
+      return _.keys(validationErrors).length === 0;
+    }
+  }
+);
+
+export default useEditContainer;
+
+export type EditContainerProps = {
+  children: Element<any>,
+  dirty: boolean,
+  errors: Array<string>,
+  isError: (property: string) => boolean,
+  isRequired: (property: string) => boolean,
+  item: any,
+  loading: boolean,
+  onAssociationInputChange: (idKey: string, valueKey: string, item: any) => void,
+  onCheckboxInputChange: (key: string, value: any) => void,
+  onDeleteChildAssociation: (association: string, child: any) => void,
+  onMultiAddChildAssociations: (association: string, Array<any>) => void,
+  onReset: () => void,
+  onSave: () => void,
+  onSaveChildAssociation: (association: string, child: any) => void,
+  onSetState: (any) => void,
+  onTextInputChange: (key: string, e: ?Event, value: any) => void,
+  saving: boolean
+};

package/src/components/GoogleAnalytics.js

@@ -0,0 +1,118 @@
+// @flow
+
+import React, {
+  useCallback,
+  useEffect,
+  useState,
+  type ComponentType
+} from 'react';
+import GoogleAnalytics from 'react-ga4';
+
+type Props = {
+  id: string,
+  location?: any,
+  storageKey: string,
+};
+
+/**
+ * Status constants.
+ *
+ * @type {{rejected: string, notSet: string, accepted: string}}
+ */
+const Status = {
+  accepted: 'accepted',
+  notSet: 'not_set',
+  rejected: 'rejected'
+};
+
+/**
+ * Higher order component function used to wrap a "cookie consent" banner with Google Analytics.
+ *
+ * @param BannerComponent
+ *
+ * @returns {function(Props)}
+ */
+const withGoogleAnalytics = (BannerComponent: ComponentType<any>) => (props: Props) => {
+  const [status, setStatus] = useState();
+
+  /**
+   * Returns the Google Analytics consent value from local storage.
+   *
+   * @param storageKey
+   *
+   * @returns {string|string}
+   */
+  const getGoogleAnalyticsConsent = (storageKey) => (
+    localStorage.getItem(storageKey) || Status.notSet
+  );
+
+  /**
+   * Sets the Google Analytics consent value in local storage.
+   *
+   * @param storageKey
+   * @param newStatus
+   */
+  const setGoogleAnalyticsConsent = (storageKey: string, newStatus: string) => (
+    localStorage.setItem(storageKey, newStatus)
+  );
+
+  /**
+   * Sets the "accepted" status and initializes analytics.
+   *
+   * @type {(function(): void)|*}
+   */
+  const onAccept = useCallback(() => setStatus(Status.accepted), []);
+
+  /**
+   * Sets the "rejected" status.
+   *
+   * @type {(function(): void)|*}
+   */
+  const onDecline = useCallback(() => setStatus(Status.rejected), []);
+
+  /**
+   * Sets the initial status on the state from local storage.
+   */
+  useEffect(() => {
+    setStatus(getGoogleAnalyticsConsent(props.storageKey));
+  }, [props.storageKey]);
+
+  /**
+   * Sets the status on local storage when the state changes.
+   */
+  useEffect(() => {
+    setGoogleAnalyticsConsent(props.storageKey, status || '');
+  }, [status, props.storageKey]);
+
+  /**
+   * Sends the page view event if the location changes.
+   */
+  useEffect(() => {
+    if (props.location && status === Status.accepted) {
+      GoogleAnalytics.send('pageview');
+    }
+  }, [status, props.location]);
+
+  /**
+   * Initializes GoogleAnalytics when the status is set to accepted.
+   */
+  useEffect(() => {
+    if (status === Status.accepted) {
+      GoogleAnalytics.initialize(props.id);
+    }
+  }, [status]);
+
+  if (!props.id || !props.storageKey || status !== Status.notSet) {
+    return null;
+  }
+
+  return (
+    <BannerComponent
+      {...props}
+      onAccept={onAccept}
+      onDecline={onDecline}
+    />
+  );
+};
+
+export default withGoogleAnalytics;

package/src/components/GoogleScript.js

@@ -0,0 +1,5 @@
+// @flow
+
+import { LoadScript } from '@react-google-maps/api';
+
+export default LoadScript;

package/src/components/InfiniteScroll.css

@@ -0,0 +1 @@
+

package/src/components/InfiniteScroll.js

@@ -0,0 +1,120 @@
+// @flow
+
+import React, {
+  useEffect,
+  useRef,
+  useState,
+  type Element
+} from 'react';
+import { isBrowser } from '../utils/Browser';
+
+type Props = {
+  children: Element<any>,
+  context?: { current: HTMLElement },
+  offset: number,
+  onBottomReached: () => void
+};
+
+const InfiniteScroll = (props: Props) => {
+  const [height, setHeight] = useState(0);
+  const containerRef = useRef();
+
+  /**
+   * Returns the scrolling element.
+   *
+   * @returns {*}
+   */
+  const getScrollElement = () => {
+    let scrollElement;
+
+    if (props.context) {
+      scrollElement = props.context.current;
+    } else if (isBrowser()) {
+      scrollElement = document.documentElement;
+    }
+
+    return scrollElement;
+  };
+
+  /**
+   * Calls the onBottomReached prop if the scroll has reached the end.
+   */
+  const onScroll = () => {
+    const element = getScrollElement();
+
+    if (element) {
+      const { scrollTop, clientHeight, scrollHeight } = element;
+
+      if ((scrollTop + clientHeight) >= (scrollHeight - props.offset)) {
+        props.onBottomReached();
+      }
+    }
+  };
+
+  /**
+   * Sets up the container scroll event listeners.
+   */
+  useEffect(() => {
+    let scrollContainer;
+
+    if (props.context) {
+      scrollContainer = props.context.current;
+    } else if (isBrowser()) {
+      scrollContainer = window;
+    }
+
+    if (!scrollContainer) {
+      return undefined;
+    }
+
+    scrollContainer.addEventListener('scroll', onScroll);
+    return () => scrollContainer && scrollContainer.removeEventListener('scroll', onScroll);
+  }, [props.context]);
+
+  /**
+   * Returns true if the context element is scrollable.
+   *
+   * @returns {boolean}
+   */
+  const isScrollable = () => {
+    let scrollable = false;
+
+    const element = getScrollElement();
+    if (element) {
+      const { clientHeight, scrollHeight } = element;
+      scrollable = scrollHeight > clientHeight;
+    }
+
+    return scrollable;
+  };
+
+  /**
+   * Upon initial render, the DOM may not be tall enough to scroll and trigger the onScroll event. In this case,
+   * we'll call the onBottomReached prop when the component is mounted until the container's scrollHeight is greater
+   * than the height of the container.
+   */
+  useEffect(() => {
+    if (!isScrollable() && containerRef && containerRef.current) {
+      const { clientHeight } = containerRef.current;
+
+      if (clientHeight > height) {
+        setHeight(clientHeight);
+        props.onBottomReached();
+      }
+    }
+  });
+
+  return (
+    <div
+      ref={containerRef}
+    >
+      { props.children }
+    </div>
+  );
+};
+
+InfiniteScroll.defaultProps = {
+  offset: 0
+};
+
+export default InfiniteScroll;

package/src/components/Keyboard.css

@@ -0,0 +1,11 @@
+/*!
+ *
+ *   simple-keyboard v3.0.22
+ *   https://github.com/hodgef/simple-keyboard
+ *
+ *   Copyright (c) Francisco Hodge (https://github.com/hodgef) and project contributors.
+ *
+ *   This source code is licensed under the MIT license found in the
+ *   LICENSE file in the root directory of this source tree.
+ *
+ */.hg-theme-default{width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;overflow:hidden;touch-action:manipulation;font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;background-color:#ececec;padding:5px;border-radius:5px}.hg-theme-default .hg-button span{pointer-events:none}.hg-theme-default button.hg-button{border-width:0;outline:0;font-size:inherit}.hg-theme-default .hg-button{display:inline-block;flex-grow:1}.hg-theme-default .hg-row{display:flex}.hg-theme-default .hg-row:not(:last-child){margin-bottom:5px}.hg-theme-default .hg-row .hg-button-container,.hg-theme-default .hg-row .hg-button:not(:last-child){margin-right:5px}.hg-theme-default .hg-row>div:last-child{margin-right:0}.hg-theme-default .hg-row .hg-button-container{display:flex}.hg-theme-default .hg-button{box-shadow:0 0 3px -1px rgba(0,0,0,.3);height:40px;border-radius:5px;box-sizing:border-box;padding:5px;background:#fff;border-bottom:1px solid #b5b5b5;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:rgba(0,0,0,0)}.hg-theme-default .hg-button.hg-standardBtn{width:20px}.hg-theme-default .hg-button.hg-activeButton{background:#efefef}.hg-theme-default.hg-layout-numeric .hg-button{width:33.3%;height:60px;align-items:center;display:flex;justify-content:center}.hg-theme-default .hg-button.hg-button-numpadadd,.hg-theme-default .hg-button.hg-button-numpadenter{height:85px}.hg-theme-default .hg-button.hg-button-numpad0{width:105px}.hg-theme-default .hg-button.hg-button-com{max-width:85px}.hg-theme-default .hg-button.hg-standardBtn.hg-button-at{max-width:45px}.hg-theme-default .hg-button.hg-selectedButton{background:rgba(5,25,70,.53);color:#fff}.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"]{max-width:82px}.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"]{max-width:60px}.hg-candidate-box{display:inline-flex;border-radius:5px;position:absolute;background:#ececec;border-bottom:2px solid #b5b5b5;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;max-width:272px;transform:translateY(-100%);margin-top:-10px}ul.hg-candidate-box-list{display:flex;list-style:none;padding:0;margin:0;flex:1}li.hg-candidate-box-list-item{height:40px;width:40px;display:flex;align-items:center;justify-content:center}li.hg-candidate-box-list-item:hover{background:rgba(0,0,0,.03);cursor:pointer}li.hg-candidate-box-list-item:active{background:rgba(0,0,0,.1)}.hg-candidate-box-prev:before{content:"◄"}.hg-candidate-box-next:before{content:"►"}.hg-candidate-box-next,.hg-candidate-box-prev{display:flex;align-items:center;padding:0 10px;background:#d0d0d0;color:#969696;cursor:pointer}.hg-candidate-box-next{border-top-right-radius:5px;border-bottom-right-radius:5px}.hg-candidate-box-prev{border-top-left-radius:5px;border-bottom-left-radius:5px}.hg-candidate-box-btn-active{color:#444}