@performant-software/shared-components 0.5.1

package/src/components/Keyboard.js

@@ -0,0 +1,55 @@
+// @flow
+
+import React, { useEffect, useRef } from 'react';
+import Keyboard from 'simple-keyboard';
+import './Keyboard.css';
+
+type Props = {
+  layout: any,
+  onChange: (value: string) => void,
+  value: string,
+  keyboardClass: string,
+};
+
+const KEY_CAPS_LOCK = '{lock}';
+const KEY_SHIFT = '{shift}';
+
+const LAYOUT_DEFAULT = 'default';
+const LAYOUT_SHIFT = 'shift';
+
+const KeyboardSimple = (props: Props) => {
+  const keyboardRef = useRef();
+
+  // Toggles the layout name for Shift and CapsLock keys.
+  const onKeyPress = (value) => {
+    const isCaps = value === KEY_CAPS_LOCK || value === KEY_SHIFT;
+
+    if (isCaps && keyboardRef.current && keyboardRef.current.options.layoutName === LAYOUT_SHIFT) {
+      keyboardRef.current.setOptions({ layoutName: LAYOUT_DEFAULT });
+    } else if (isCaps && keyboardRef.current && keyboardRef.current.options.layoutName !== LAYOUT_SHIFT) {
+      keyboardRef.current.setOptions({ layoutName: LAYOUT_SHIFT });
+    }
+  };
+
+  // Sets up the keyboard reference and the initial value when the component is first rendered.
+  useEffect(() => {
+    const { layout, onChange } = props;
+    keyboardRef.current = new Keyboard(`.${props.keyboardClass}`, { ...layout, onChange, onKeyPress });
+    keyboardRef.current.setInput(props.value);
+  }, []);
+
+  // Sets the keyboard value when the value property changes.
+  useEffect(() => {
+    if (keyboardRef.current) {
+      keyboardRef.current.setInput(props.value);
+    }
+  }, [props.value]);
+
+  return <div className={props.keyboardClass} />;
+};
+
+KeyboardSimple.defaultProps = {
+  keyboardClass: 'simple-keyboard'
+};
+
+export default KeyboardSimple;

package/src/i18n/en.json

@@ -0,0 +1,204 @@
+{
+  "AccordionList": {
+    "deleteContent": "Are you sure you want to remove this record?",
+    "deleteHeader": "Confirm Remove",
+    "record": "Record",
+    "record_plural": "Records"
+  },
+  "AccordionSelector": {
+    "title": "Select Items"
+  },
+  "Common": {
+    "buttons": {
+      "add": "Add",
+      "cancel": "Cancel",
+      "clear": "Clear",
+      "edit": "Edit",
+      "ok": "OK",
+      "save": "Save"
+    },
+    "errors": {
+      "title": "Oops!"
+    },
+    "messages": {
+      "error": {
+        "header": "Oops!"
+      },
+      "loading": "Loading",
+      "save": {
+        "content": "Your changes have been saved.",
+        "header": "Success!"
+      }
+    }
+  },
+  "EditContainer": {
+    "errors": {
+      "general": "Something went wrong while saving the record. Please make sure all required fields are filled out.",
+      "required": "The {{key}} field is required.",
+      "system": "A system error occurred while saving the record. Please contact your system administrator.",
+      "unique": "A record with the {{key}} \"{{value}}\" already exists."
+    }
+  },
+  "DataTable": {
+    "actions": {
+      "copy": {
+        "content": "Creates an editable copy to be saved as a new record",
+        "title": "Copy"
+      },
+      "delete": {
+        "content": "Removes the record, permanently",
+        "title": "Remove"
+      },
+      "edit": {
+        "content": "Opens the modal to edit the record",
+        "title": "Edit"
+      }
+    },
+    "columns": {
+      "actions": "Actions",
+      "select": "Select"
+    },
+    "loading": "Loading"
+  },
+  "EditProvider": {
+    "errors": {
+      "general": "Something went wrong while saving the record. Please make sure all required fields are filled out.",
+      "required": "The {{key}} field is required.",
+      "unique": "A record with the {{key}} \"{{value}}\" already exists."
+    }
+  },
+  "FileUpload": {
+    "add": "<0>Add files</0> or drop files here",
+    "errors": {
+      "fileType": "Unable to upload {{name}} because {{type}} files are not allowed.",
+      "maxSize": "Unable to upload {{name}} because it exceeds 10 MB."
+    }
+  },
+  "FileUploadModal": {
+    "errors": {
+      "required": "{{filename}} - The following fields are required: {{fields}}"
+    },
+    "loader": "Uploading files...",
+    "title": "Upload Files"
+  },
+  "FuzzyDate": {
+    "accuracy": {
+      "date": "Date",
+      "month": "Month",
+      "year": "Year"
+    },
+    "buttons": {
+      "addRange": "Add Range",
+      "removeRange": "Remove Range"
+    },
+    "labels": {
+      "accuracy": "Accuracy",
+      "date": "Date",
+      "description": "Description",
+      "month": "Month",
+      "year": "Year"
+    },
+    "title": "Fuzzy Date"
+  },
+  "ItemList": {
+    "actions": {
+      "copy": "Copy",
+      "delete": "Remove",
+      "edit": "Edit"
+    },
+    "buttons": {
+      "clear": "Clear selected",
+      "deselectAll": "Deselect all",
+      "selectAll": "Select all"
+    }
+  },
+  "KeyboardField": {
+    "labels": {
+      "hideKeyboard": "Hide Keyboard",
+      "showKeyboard": "Show Keyboard"
+    }
+  },
+  "LazyDocument": {
+    "buttons": {
+      "download": "Download"
+    }
+  },
+  "LazyImage": {
+    "buttons": {
+      "view": "View image"
+    }
+  },
+  "LazyVideo": {
+    "buttons": {
+      "play": "Play video"
+    }
+  },
+  "List": {
+    "buttons": {
+      "add": "Add",
+      "deleteAll": "Delete all"
+    },
+    "deleteAllContent": "Are you sure you want to remove all records? This action cannot be undone.",
+    "deleteAllHeader": "Confirm Remove All",
+    "deleteContent": "Are you sure you want to remove this record?",
+    "deleteHeader": "Confirm Remove",
+    "emptyList": "No matching records found.",
+    "emptyListAdd": "You haven't added any yet. Click <1><0><0></0><1></1></0></1> to get started.",
+    "labels": {
+      "perPage": "Show {{perPage}}"
+    },
+    "record": "Record",
+    "record_plural": "Records"
+  },
+  "ListFilters": {
+    "buttons": {
+      "add": "Add",
+      "reset": "Reset filters"
+    },
+    "operators": {
+      "contain": "Contains",
+      "empty": "Is empty",
+      "equal": "Equals",
+      "greaterThan": "Is greater than",
+      "lessThan": "Is less than",
+      "notContain": "Does not contain",
+      "notEmpty": "Is not empty",
+      "notEqual": "Does not equal"
+    },
+    "title": "Filters"
+  },
+  "LoginModal": {
+    "buttonCancel": "Cancel",
+    "buttonLogin": "Login",
+    "email": "Email",
+    "header": "Login",
+    "loginErrorContent": "The username and/or password you entered is invalid. Please double check and try again.",
+    "loginErrorHeader": "Invalid Credentials",
+    "password": "Password"
+  },
+  "RemoteDropdown": {
+    "labels": {
+      "add": "Add",
+      "loadMore": "Load more"
+    }
+  },
+  "Selectize": {
+    "noRecords": "No matching records."
+  },
+  "VideoFrameSelector": {
+    "buttons": {
+      "select": "Select frame"
+    },
+    "labels": {
+      "interval": "Interval: {{count}} second",
+      "interval_plural": "Interval: {{count}} seconds"
+    },
+    "title": "Select Frame"
+  },
+  "ViewXML": {
+    "buttons": {
+      "view": "View XML"
+    },
+    "title": "XML"
+  }
+}

package/src/i18n/i18n.js

@@ -0,0 +1,24 @@
+import i18next from 'i18next';
+
+import en from './en.json';
+
+const resources = {
+  en: {
+    translation: en
+  }
+};
+
+const i18n = i18next.createInstance();
+
+i18n
+  .init({
+    debug: true,
+    fallbackLng: 'en',
+    lng: 'en',
+    interpolation: {
+      escapeValue: false,
+    },
+    resources
+  });
+
+export default i18n;

package/src/index.js

@@ -0,0 +1,34 @@
+// @flow
+
+// API
+export { default as Attachments } from './api/Attachments';
+export { default as BaseService } from './api/BaseService';
+export { default as BaseTransform } from './api/BaseTransform';
+export { default as FormDataTransform } from './api/FormDataTransform';
+export { default as NestedAttributesTransform } from './api/NestedAttributesTransform';
+
+// Components
+export { default as useEditContainer } from './components/EditContainer';
+export { default as withGoogleAnalytics } from './components/GoogleAnalytics';
+export { default as GoogleScript } from './components/GoogleScript';
+export { default as InfiniteScroll } from './components/InfiniteScroll';
+export { default as Keyboard } from './components/Keyboard';
+
+// I18n
+export { default as i18n } from './i18n/i18n';
+
+// Utils
+export * as Browser from './utils/Browser';
+export { default as Calendar } from './utils/Calendar';
+export { default as Date } from './utils/Date';
+export { default as useDragDrop } from './utils/DragDrop';
+export { default as Element } from './utils/Element';
+export { default as Map } from './utils/Map';
+export { default as Object } from './utils/Object';
+export { default as String } from './utils/String';
+export { default as Timer } from './utils/Timer';
+export { default as Utility } from './utils/Utility'; // TODO: Rename me
+
+// Types
+export type { EditContainerProps as EditModalProps } from './components/EditContainer'; // Backwards compatability
+export type { EditContainerProps } from './components/EditContainer';

package/src/utils/Browser.js

@@ -0,0 +1,8 @@
+// @flow
+
+/**
+ * Returns true if the window object is present.
+ *
+ * @returns {boolean}
+ */
+export const isBrowser = () => (typeof window !== 'undefined');

package/src/utils/Calendar.js

@@ -0,0 +1,232 @@
+// @flow
+
+import moment from 'moment-islamic-civil';
+import 'moment/min/locales';
+
+const DEFAULT_LOCALE = 'en';
+
+const MAX_DAYS_IN_MONTH = 31;
+
+/**
+ * Wrapper class to handle momentJS dates to multiple calendars.
+ */
+class Calendar {
+  static Calendars: any;
+  static DateFormats: any;
+  static Defaults: any;
+
+  locale: string;
+  name: string;
+
+  /**
+   * Constructs a new calendar instance for the passed locale and calendar.
+   *
+   * @param locale
+   * @param name
+   */
+  constructor(locale: string = DEFAULT_LOCALE, name: string = Calendar.Calendars.gregorian) {
+    this.locale = locale;
+    this.name = name;
+  }
+
+  /**
+   * Increments the date by the passed value.
+   *
+   * @param date
+   * @param value
+   *
+   * @returns {*}
+   */
+  addDate(date: Date, value: number) {
+    const m = this.moment(date);
+    return this.isHijri() ? m.add(value, 'iDate') : m.add(value, 'date');
+  }
+
+  /**
+   * Increments the month by the passed value.
+   *
+   * @param date
+   * @param value
+   *
+   * @returns {*}
+   */
+  addMonth(date: Date, value: number) {
+    const m = this.moment(date);
+    return this.isHijri() ? m.add(value, 'iMonth') : m.add(value, 'month');
+  }
+
+  /**
+   * Increments the year by the passed value.
+   *
+   * @param date
+   * @param value
+   *
+   * @returns {*}
+   */
+  addYear(date: Date, value: number) {
+    const m = this.moment(date);
+    return this.isHijri() ? m.add(value, 'iYear') : m.add(value, 'year');
+  }
+
+  /**
+   * Converts the passed year, month, and date to a moment Date object.
+   *
+   * @param year
+   * @param month
+   * @param date
+   *
+   * @returns {moment.Moment}
+   */
+  convertToDate({ year, month, date }: { year: number, month: number, date: number }) {
+    let m = this.moment().hours(0).minutes(0).seconds(0);
+
+    if (this.isHijri()) {
+      m = m
+        .iYear(year || this.getDefaultYear())
+        .iMonth(month || this.getDefaultMonth())
+        .iDate(date || this.getDefaultDate());
+    } else {
+      m = m
+        .year(year || this.getDefaultYear())
+        .month(month || this.getDefaultMonth())
+        .date(date || this.getDefaultDate());
+    }
+
+    return m;
+  }
+
+  /**
+   * Returns the days in the month for the passed year/month.
+   *
+   * @param year
+   * @param month
+   *
+   * @returns {number}
+   */
+  daysInMonth(year: number, month: number) {
+    const y = year || this.getDefaultYear();
+    const m = month || this.getDefaultMonth();
+
+    const date = this.convertToDate({ year: y, month: m, date: this.getDefaultDate() });
+    return (this.isHijri() ? date.iDaysInMonth() : date.daysInMonth()) || MAX_DAYS_IN_MONTH;
+  }
+
+  /**
+   * Formats the passed date.
+   *
+   * @param date
+   * @param format
+   *
+   * @returns {*}
+   */
+  format(date: moment, format: number = Calendar.DateFormats.gregorian) {
+    return this.moment(date).format(Calendar.DateFormats[this.name][format]);
+  }
+
+  /**
+   * Returns the default date for the current calendar.
+   *
+   * @returns {*}
+   */
+  getDefaultDate() {
+    return Calendar.Defaults[this.name].date;
+  }
+
+  /**
+   * Returns the default month for the current calendar.
+   *
+   * @returns {*}
+   */
+  getDefaultMonth() {
+    return Calendar.Defaults[this.name].month;
+  }
+
+  /**
+   * Returns the default year for the current calendar.
+   *
+   * @returns {number|*|"numeric"|"2-digit"|string|((y: number) => moment.Moment)|(() => number)|moment.numberlike}
+   */
+  getDefaultYear() {
+    return Calendar.Defaults[this.name].year;
+  }
+
+  /**
+   * Returns true if the current calendar is Hijri.
+   *
+   * @returns {boolean}
+   */
+  isHijri() {
+    return this.name === Calendar.Calendars.hijri;
+  }
+
+  /**
+   * Returns the list of months for the current calendar.
+   *
+   * @returns {*}
+   */
+  listMonths() {
+    const localeData = this.moment().localeData();
+    return this.isHijri() ? localeData._iMonths : localeData.months();
+  }
+
+  /**
+   * Wraps the passed date/string in a moment object.
+   *
+   * @param date
+   */
+  moment(date: ?any = null) {
+    const m = date ? moment(date) : moment();
+    m.locale(this.locale);
+    return m;
+  }
+
+  /**
+   * Parses the passed date into year, month, and date components.
+   *
+   * @param date
+   *
+   * @returns {{date: (*), month: (*), year: (*)}}
+   */
+  parseDate(date: Date | string) {
+    const m = this.moment(date);
+
+    return {
+      year: this.isHijri() ? m.iYear() : m.year(),
+      month: this.isHijri() ? m.iMonth() : m.month(),
+      date: this.isHijri() ? m.iDate() : m.date()
+    };
+  }
+}
+
+Calendar.Calendars = {
+  gregorian: 'gregorian',
+  hijri: 'hijri'
+};
+
+Calendar.DateFormats = {
+  [Calendar.Calendars.gregorian]: {
+    '0': 'YYYY',
+    '1': 'MMMM YYYY',
+    '2': 'L'
+  },
+  [Calendar.Calendars.hijri]: {
+    '0': 'iYYYY',
+    '1': 'iMMMM iYYYY',
+    '2': 'iM/iD/iYYYY'
+  }
+};
+
+Calendar.Defaults = {
+  [Calendar.Calendars.gregorian]: {
+    year: 0,
+    month: 0,
+    date: 1
+  },
+  [Calendar.Calendars.hijri]: {
+    year: 1410,
+    month: 0,
+    date: 1
+  }
+};
+
+export default Calendar;

package/src/utils/Date.js

@@ -0,0 +1,10 @@
+// @flow
+
+const formatDate = (value: any, locale?: string, options?: any) => {
+  const date = new Date(value);
+  return date.toLocaleDateString(locale, options);
+};
+
+export default {
+  formatDate
+};

package/src/utils/DragDrop.js

@@ -0,0 +1,17 @@
+// @flow
+
+import React, { type ComponentType } from 'react';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend, type BackendFactory } from 'react-dnd-html5-backend';
+
+const useDragDrop = (WrappedComponent: ComponentType<any>, backend: BackendFactory = HTML5Backend) => (
+  () => (
+    <DndProvider
+      backend={backend}
+    >
+      <WrappedComponent />
+    </DndProvider>
+  )
+);
+
+export default useDragDrop;

package/src/utils/Element.js

@@ -0,0 +1,36 @@
+// @flow
+
+import React from 'react';
+
+/**
+ * Returns the subset of children matching the passed component type. This function is useful for designing components
+ * using a sub-component type syntax:
+ *
+ * <MyComponent ...>
+ *   <MyComponent.Subcomponent ... />
+ *   <MyComponent.AnotherSubcomponent ... />
+ * </MyComponent>
+ *
+ * @param children
+ * @param component
+ *
+ * @returns {[]}
+ */
+const findByType = (children: any, component: any) => {
+  const components = [];
+
+  const type = [component.displayName || component.name];
+
+  React.Children.forEach(children, (child) => {
+    const childType = child && child.type && (child.type.displayName || child.type.name);
+    if (type.includes(childType)) {
+      components.push(child);
+    }
+  });
+
+  return components;
+};
+
+export default {
+  findByType
+};

package/src/utils/Map.js

@@ -0,0 +1,27 @@
+// @flow
+
+/**
+ * Returns the numeric latitude and longitude for the passed coordinates.
+ *
+ * @param coords
+ *
+ * @returns {*}
+ */
+const getPosition = (coords: ?{ lat: any, lng: any }) => {
+  let position;
+
+  if (coords) {
+    const lat = Number.parseFloat(coords.lat);
+    const lng = Number.parseFloat(coords.lng);
+
+    if (!Number.isNaN(lat) && !Number.isNaN(lng)) {
+      position = { lat, lng };
+    }
+  }
+
+  return position;
+};
+
+export default {
+  getPosition
+};