@performant-software/shared-components 0.5.6 → 0.5.9

package/build/main.css

@@ -8,4 +8,158 @@
  *   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}
+ */
+.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, 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, 0.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, 0.03);
+  cursor: pointer;
+}
+li.hg-candidate-box-list-item:active {
+  background: rgba(0, 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;
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/shared-components",
-  "version": "0.5.6",
+  "version": "0.5.9",
   "description": "A package of shared, framework agnostic, components.",
   "license": "MIT",
   "main": "./build/index.js",
@@ -28,7 +28,7 @@
     "react-dom": ">= 16.13.1 < 18.0.0"
   },
   "devDependencies": {
-    "@performant-software/webpack-config": "^0.5.6",
+    "@performant-software/webpack-config": "^0.5.9",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   }

package/src/components/EditContainer.js

@@ -3,7 +3,7 @@
 import React, { Component, type ComponentType, type Element } from 'react';
 import _ from 'underscore';
 import i18n from '../i18n/i18n';
-import { isEqual } from '../utils/Object';
+import ObjectUtils from '../utils/Object';
 
 type Props = {
   children?: Element<any>,
@@ -366,7 +366,7 @@ const useEditContainer = (WrappedComponent: ComponentType<any>) => (
       return (
         <WrappedComponent
           {...this.props}
-          dirty={!!(this.state.item.id && !isEqual(this.state.item, this.state.originalItem))}
+          dirty={!!(this.state.item.id && !ObjectUtils.isEqual(this.state.item, this.state.originalItem))}
           errors={_.values(this.state.validationErrors)}
           isError={this.isError.bind(this)}
           isRequired={this.isRequired.bind(this)}

package/src/index.js

@@ -27,6 +27,7 @@ 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 Hooks } from './utils/Hooks';
 export { default as Map } from './utils/Map';
 export { default as Object } from './utils/Object';
 export { default as String } from './utils/String';

package/src/utils/Hooks.js

@@ -0,0 +1,24 @@
+// @flow
+
+import { useEffect, useRef } from 'react';
+
+/**
+ * Stores the previous value of the passed parameter.
+ *
+ * @param value
+ *
+ * @returns {*}
+ */
+const usePrevious = (value) => {
+  const ref = useRef();
+
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  return ref.current;
+};
+
+export default {
+  usePrevious
+};

package/test/services/BaseSerivce.spec.js

@@ -0,0 +1,16 @@
+import axios from 'axios';
+import BaseService from '../../src/services/BaseService';
+
+jest.mock('axios');
+
+class TestClass extends BaseService {
+
+}
+
+describe('getAxios', () => {
+  it('should return the default axios instance', () => {
+    const test = new TestClass();
+    const instance = test.getAxios();
+    expect(instance).toBe(axios);
+  });
+});

package/test/{api → transforms}/Attachments.spec.js

@@ -1,4 +1,4 @@
-import Attachments from '../../src/api/Attachments';
+import Attachments from '../../src/transforms/Attachments';
 
 describe('toPayload', () => {
   test('toPayload adds the attachment, if provided', () => {

package/types/components/EditContainer.js.flow

@@ -3,7 +3,7 @@
 import React, { Component, type ComponentType, type Element } from 'react';
 import _ from 'underscore';
 import i18n from '../i18n/i18n';
-import { isEqual } from '../utils/Object';
+import ObjectUtils from '../utils/Object';
 
 type Props = {
   children?: Element<any>,
@@ -366,7 +366,7 @@ const useEditContainer = (WrappedComponent: ComponentType<any>) => (
       return (
         <WrappedComponent
           {...this.props}
-          dirty={!!(this.state.item.id && !isEqual(this.state.item, this.state.originalItem))}
+          dirty={!!(this.state.item.id && !ObjectUtils.isEqual(this.state.item, this.state.originalItem))}
           errors={_.values(this.state.validationErrors)}
           isError={this.isError.bind(this)}
           isRequired={this.isRequired.bind(this)}

package/types/index.js.flow

@@ -22,16 +22,16 @@ export { default as FormDataTransform } from './transforms/FormDataTransform';
 export { default as NestedAttributesTransform } from './transforms/NestedAttributesTransform';
 
 // Utils
-export * as Browser from './utils/Browser';
+export { default 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 Hooks } from './utils/Hooks';
 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

package/types/services/BaseService.js.flow

@@ -1,6 +1,6 @@
 // @flow
 
-import axios, { type AxiosResponse } from 'axios';
+import axios, { type AxiosResponse, type AxiosStatic } from 'axios';
 
 /**
  * Base class for making API calls. This class uses Axios under the hood and a customizable transform class for
@@ -102,6 +102,15 @@ class BaseService {
 
   // protected
 
+  /**
+   * Returns the axios instance.
+   *
+   * @returns {AxiosStatic}
+   */
+  getAxios(): AxiosStatic {
+    return axios;
+  }
+
   /**
    * Returns the API base URL string.
    */

package/types/utils/Browser.js.flow

@@ -5,4 +5,8 @@
  *
  * @returns {boolean}
  */
-export const isBrowser = () => (typeof window !== 'undefined');
+const isBrowser = () => (typeof window !== 'undefined');
+
+export default {
+  isBrowser
+};

package/types/utils/Hooks.js.flow

@@ -0,0 +1,24 @@
+// @flow
+
+import { useEffect, useRef } from 'react';
+
+/**
+ * Stores the previous value of the passed parameter.
+ *
+ * @param value
+ *
+ * @returns {*}
+ */
+const usePrevious = (value) => {
+  const ref = useRef();
+
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  return ref.current;
+};
+
+export default {
+  usePrevious
+};

package/types/utils/Object.js.flow

@@ -31,7 +31,7 @@ const WHITESPACE_REGEX = /\s\s+/g;
  *
  * @returns {boolean|*}
  */
-export const isEmpty = (value: any) => {
+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);
@@ -49,7 +49,7 @@ export const isEmpty = (value: any) => {
  *
  * @returns {boolean}
  */
-export const isEqual = (a: any, b: any, userOptions: OptionsProps = {}) => {
+const isEqual = (a: any, b: any, userOptions: OptionsProps = {}) => {
   const options = _.defaults(userOptions, DEFAULT_OPTIONS);
 
   // Check equality, consider empty strings and "null" values as equal
@@ -109,6 +109,10 @@ export const isEqual = (a: any, b: any, userOptions: OptionsProps = {}) => {
   return false;
 };
 
-export default {
+const isPromise = (value: any) => !!value && typeof value === 'object' && typeof value.then === 'function';
 
+export default {
+  isEmpty,
+  isEqual,
+  isPromise
 };

package/types/api/Attachments.js.flow

@@ -1,28 +0,0 @@
-// @flow
-
-/**
- * Helper class for handling binary data. This class should be used in conjunction with the FormDataTransform.
- */
-class Attachments {
-  /**
-   * Appends the attachment for the passed record to the passed form data. If the attachment is not present, the
-   * "*_remove" attribute will be appended if the attachment has been removed.
-   *
-   * @param formData
-   * @param prefix
-   * @param record
-   * @param name
-   */
-  toPayload(formData: FormData, prefix: string, record: any, name: string) {
-    const attachment = record[name];
-    const removeAttribute = `${name}_remove`;
-
-    if (attachment) {
-      formData.append(`${prefix}[${name}]`, attachment);
-    } else if (record[removeAttribute]) {
-      formData.append(`${prefix}[${removeAttribute}]`, record[removeAttribute]);
-    }
-  }
-}
-
-export default new Attachments();

package/types/api/BaseService.js.flow

@@ -1,144 +0,0 @@
-// @flow
-
-import axios, { type AxiosResponse, type AxiosStatic } from 'axios';
-
-/**
- * Base class for making API calls. This class uses Axios under the hood and a customizable transform class for
- * PUT/POST requests.
- */
-class BaseService {
-  /**
-   * Constructs a new BaseService object. This constructor should never be used directly.
-   */
-  constructor() {
-    if (this.constructor === BaseService) {
-      throw new TypeError('Abstract class "BaseService" cannot be instantiated directly.');
-    }
-  }
-
-  /**
-   * Calls the POST /api/<resource>/ endpoint with the passed item.
-   *
-   * @param item
-   *
-   * @returns {Promise<AxiosResponse<T>>}
-   */
-  create(item: any): Promise<AxiosResponse> {
-    const transform = this.getTransform();
-    return this.getAxios().post(this.getBaseUrl(), transform.toPayload(item), this.getConfig());
-  }
-
-  /**
-   * Calls the DELETE /api/<resource>/:id endpoint for the passed item.
-   *
-   * @param item
-   *
-   * @returns {Promise<AxiosResponse<T>>}
-   */
-  delete(item: any) {
-    return this.getAxios().delete(`${this.getBaseUrl()}/${item.id}`);
-  }
-
-  /**
-   * Calls the GET /api/<resource>/ endpoint.
-   *
-   * @returns {Promise<AxiosResponse<T>>}
-   */
-  fetchAll(params: any) {
-    return this.getAxios().get(this.getBaseUrl(), { params });
-  }
-
-  /**
-   * Calls the GET /api/<resource>/:id endpoint.
-   *
-   * @returns {Promise<AxiosResponse<T>>}
-   */
-  fetchOne(id: number) {
-    return this.getAxios().get(`${this.getBaseUrl()}/${id}`);
-  }
-
-  /**
-   * Calls the create/update API endpoint for the passed item.
-   *
-   * @param item
-   *
-   * @returns {Promise<AxiosResponse<T>>}
-   */
-  save(item: any) {
-    return item.id ? this.update(item) : this.create(item);
-  }
-
-  /**
-   * Calls the POST /api/<resource>/search endpoint.
-   *
-   * @param params
-   *
-   * @returns {Promise<AxiosResponse<T>>}
-   */
-  search(params: any) {
-    return this.getAxios().post(`${this.getBaseUrl()}/search`, params);
-  }
-
-  /**
-   * Calls the PUT /api/<resource>/:id endpoint with the passed item.
-   *
-   * @param item
-   *
-   * @returns {Promise<AxiosResponse<T>>}
-   */
-  update(item: any) {
-    const transform = this.getTransform();
-    return this.getAxios().put(`${this.getBaseUrl()}/${item.id}`, transform.toPayload(item), this.getConfig());
-  }
-
-  // protected
-
-  /**
-   * Returns the API base URL string.
-   */
-  getBaseUrl(): string {
-    // Implemented in concrete classes.
-    return '';
-  }
-
-  /**
-   * Returns the config properties for POST/PUT requests.
-   *
-   * @returns {null}
-   */
-  getConfig() {
-    // Implemented in concrete classes
-    return null;
-  }
-
-  /**
-   * Returns the axios instance object to use for API calls.
-   *
-   * @returns {null}
-   */
-  getInstance() {
-    // Implemented in concrete classes
-    return null;
-  }
-
-  /**
-   * Returns the transform object. This class will be used to generate the object sent on POST/PUT requests.
-   */
-  getTransform() {
-    // Implemented in concrete classes.
-    return {};
-  }
-
-  // private
-
-  /**
-   * Returns the axios instance to use for API calls.
-   *
-   * @returns {*|AxiosStatic}
-   */
-  getAxios(): AxiosStatic {
-    return this.getInstance() || axios;
-  }
-}
-
-export default BaseService;

package/types/api/BaseTransform.js.flow

@@ -1,55 +0,0 @@
-// @flow
-
-import _ from 'underscore';
-
-/**
- * Class for handling transforming objects for PUT/POST requests. This class transforms records into
- * plain Javascript objects.
- */
-class BaseTransform {
-  /**
-   * Constructs a new BaseTransform object. This constructor should never be used directly.
-   */
-  constructor() {
-    if (this.constructor === BaseTransform) {
-      throw new TypeError('Abstract class "BaseTransform" cannot be instantiated directly.');
-    }
-  }
-
-  // protected
-
-  /**
-   * Returns the parameter name.
-   *
-   * @returns {string}
-   */
-  getParameterName(): string {
-    // Implemented in sub-class
-    return '';
-  }
-
-  /**
-   * Returns the array of payload keys.
-   *
-   * @returns {*[]}
-   */
-  getPayloadKeys(): Array<string> {
-    // Implemented in sub-class
-    return [];
-  }
-
-  /**
-   * Returns the object for POST/PUT requests as a plain Javascript object.
-   *
-   * @param item
-   *
-   * @returns any
-   */
-  toPayload(item: any): any {
-    return {
-      [this.getParameterName()]: _.pick(item, this.getPayloadKeys())
-    };
-  }
-}
-
-export default BaseTransform;

package/types/api/FormDataTransform.js.flow

@@ -1,30 +0,0 @@
-// @flow
-
-import _ from 'underscore';
-import BaseTransform from './BaseTransform';
-import StringUtils from '../utils/String';
-
-/**
- * Class for handling transforming records for PUT/POST requests. This class transforms objects in FormData. This
- * class is useful if your model contains binary data to be uploaded.
- */
-class FormDataTransform extends BaseTransform {
-  /**
-   * Converts the passed records to a formData object to be sent on PUT/POST requests.
-   *
-   * @param record
-   *
-   * @returns {FormData}
-   */
-  toPayload(record: any) {
-    const formData = new FormData();
-
-    _.each(this.getPayloadKeys(), (key) => {
-      formData.append(`${this.getParameterName()}[${key}]`, StringUtils.toString(record[key]));
-    });
-
-    return formData;
-  }
-}
-
-export default FormDataTransform;