@performant-software/shared-components 0.5.1

package/types/components/Keyboard.js.flow

@@ -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/types/i18n/i18n.js.flow

@@ -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/types/index.js.flow

@@ -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/types/utils/Browser.js.flow

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

package/types/utils/Calendar.js.flow

@@ -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/types/utils/Date.js.flow

@@ -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/types/utils/DragDrop.js.flow

@@ -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/types/utils/Element.js.flow

@@ -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/types/utils/Map.js.flow

@@ -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
+};

package/types/utils/Object.js.flow

@@ -0,0 +1,114 @@
+// @flow
+
+import _ from 'underscore';
+
+type OptionsProps = {
+  emptyValues: Array<any>,
+  ignoreHtml: boolean
+};
+
+const EMPTY_VALUES = [
+  '',
+  null,
+  undefined,
+  [],
+  {}
+];
+
+const DEFAULT_OPTIONS = {
+  emptyValues: EMPTY_VALUES,
+  ignoreHtml: true,
+  ignoreWhitespace: true
+};
+
+const HTML_REGEX = /(<([^>]+)>)/gi;
+const WHITESPACE_REGEX = /\s\s+/g;
+
+/**
+ * Returns true if the passed value is considered "empty".
+ *
+ * @param value
+ *
+ * @returns {boolean|*}
+ */
+export const isEmpty = (value: any) => {
+  // If the value is an object or array, use underscore's isEmpty check.
+  if (_.isObject(value) || _.isArray(value)) {
+    return _.isEmpty(value);
+  }
+
+  return !value;
+};
+
+/**
+ * Returns true if the passed two arguments as deep equal. This function will perform a recursive check against all of
+ * the keys in the objects.
+ *
+ * @param a
+ * @param b
+ *
+ * @returns {boolean}
+ */
+export const isEqual = (a: any, b: any, userOptions: OptionsProps = {}) => {
+  const options = _.defaults(userOptions, DEFAULT_OPTIONS);
+
+  // Check equality, consider empty strings and "null" values as equal
+  if (a === b || (_.contains(options.emptyValues, a) && _.contains(options.emptyValues, b))) {
+    return true;
+  }
+
+  // Deep string comparison
+  if (_.isString(a) && _.isString(b)) {
+    let aString = a;
+    let bString = b;
+
+    // Remove superfluous whitespace
+    if (options.ignoreWhitespace) {
+      aString = a.replace(WHITESPACE_REGEX, ' ');
+      bString = b.replace(WHITESPACE_REGEX, ' ');
+    }
+
+    // If we're ignoring HTML, compare the string values with HTML tags removed
+    if (options.ignoreHtml) {
+      aString = aString.replace(HTML_REGEX, '');
+      bString = bString.replace(HTML_REGEX, '');
+    }
+
+    if (aString === bString) {
+      return true;
+    }
+  }
+
+  if (a !== null && typeof a === 'object' && b !== null && typeof b === 'object') {
+    const aKeys = _.keys(a);
+    const bKeys = _.keys(b);
+
+    // If the objects contain different number of keys, return false
+    if (aKeys.length !== bKeys.length) {
+      return false;
+    }
+
+    // Recursively check each key for equality
+    let equal = true;
+
+    _.each(_.keys(a), (key) => {
+      if (!(_.has(b, key) && isEqual(a[key], b[key]))) {
+        equal = false;
+      }
+    });
+
+    // If any of the recursive keys are not equal, return false
+    if (!equal) {
+      return false;
+    }
+
+    // If we've made it this far, we've checked the equality of all the keys in both objects, return true
+    return true;
+  }
+
+  return false;
+};
+
+export default {
+
+};

package/types/utils/String.js.flow

@@ -0,0 +1,20 @@
+// @flow
+
+import _ from 'underscore';
+
+const includes = (a: any, b: any) => (
+  a && b && a.toString().toLowerCase().includes(b.toString().toLowerCase())
+);
+
+const toString = (value: any) => {
+  if (_.isNumber(value) || _.isBoolean(value)) {
+    return value;
+  }
+
+  return value || '';
+};
+
+export default {
+  includes,
+  toString
+};

package/types/utils/Timer.js.flow

@@ -0,0 +1,32 @@
+// @flow
+
+const DEFAULT_TIMEOUT = 500;
+
+/**
+ * The timer class encapsulates the logic for setting and clearing a timeout. This is particularly useful for
+ * keydown/keyup events when we only want to perform an action after the user has finished typing.
+ */
+class Timer {
+  timeout: TimeoutID | null;
+
+  constructor() {
+    this.timeout = null;
+  }
+
+  /**
+   * Clears the search timer.
+   */
+  clearSearchTimer() {
+    clearTimeout(this.timeout);
+  }
+
+  /**
+   * Sets the search timer.
+   */
+  setSearchTimer(onTimeout: () => void) {
+    clearTimeout(this.timeout);
+    this.timeout = setTimeout(onTimeout, DEFAULT_TIMEOUT);
+  }
+}
+
+export default new Timer();

package/types/utils/Utility.js.flow

@@ -0,0 +1,14 @@
+// @flow
+
+/**
+ * Returns true if passed value is a promise (i.e, has a .then method)
+ *
+ * @param *
+ *
+ * @returns {boolean}
+ */
+const isPromise = (value: any) => !!value && typeof value === 'object' && typeof value.then === 'function';
+
+export default {
+  isPromise
+};

package/webpack.config.js

@@ -0,0 +1,3 @@
+const { configure } = require('@performant-software/webpack-config');
+
+module.exports = configure(__dirname);