@hipay/hipay-material-ui 2.0.0-beta.36 → 2.0.0-beta.38

package/es/HiSelect/HiSuggestSelect.js

@@ -19,10 +19,10 @@ export const styles = theme => ({
     width: '100%'
   },
   popper: {
-    width: '100%',
-    transform: 'none',
-    zIndex: 9,
-    top: '100%'
+    width: '100% !important',
+    transform: 'none !important',
+    zIndex: '9 !important',
+    top: '100% !important'
   },
   paper: {
     borderRadius: '0px 2px',
@@ -184,12 +184,12 @@ class HiSuggestSelect extends React.PureComponent {
       onKeyDown: this.handleKeyDownSearch,
       onBlur: this.handleBlur,
       onFocus: this.handleFocus
-    })), open && React.createElement(Popper, {
+    })), React.createElement(Popper, {
       disablePortal: true,
       anchorEl: this.textInput,
       placement: "bottom-start",
-      eventsEnabled: open,
-      className: classes.popper
+      className: classes.popper,
+      open: true
     }, React.createElement(Grow, {
       in: open,
       id: "menu-list",
@@ -201,7 +201,7 @@ class HiSuggestSelect extends React.PureComponent {
     }, React.createElement(HiSelectableList, {
       itemList: optionsShown,
       selectedIdList: [],
-      checkbox: false,
+      hideCheckbox: true,
       onSelect: this.handleSelect,
       translations: translations,
       onKeyDown: this.handleKeyDown

package/es/HiSelectableList/HiSelectableList.js

@@ -6,7 +6,9 @@ import List from '@material-ui/core/List';
 import withStyles from '../styles/withStyles';
 import HiSelectableListItem from './HiSelectableListItem';
 export const styles = () => ({
-  root: {}
+  root: {
+    padding: 0
+  }
 });
 /**
  * Construit une liste d'item sélectionnable (avec checkbox)

package/es/HiSelectableList/HiSelectableListItem.js

@@ -12,7 +12,9 @@ import HiLoader from '../HiLoader';
 import withStyles from '../styles/withStyles';
 import { escapeHTML } from '../utils/helpers';
 export const styles = theme => ({
-  root: {},
+  root: {
+    paddingLeft: 4
+  },
   listItem: {
     backgroundColor: theme.palette.background3,
     color: theme.palette.neutral.dark,
@@ -78,7 +80,8 @@ export const styles = theme => ({
   }),
   label: {
     display: 'inline-block',
-    margin: '1px 0'
+    margin: '1px 0',
+    paddingLeft: 4
   },
   coloredLabel: {
     display: 'inline-flex',
@@ -93,7 +96,7 @@ export const styles = theme => ({
     color: theme.palette.neutral.main,
     fontWeight: theme.typography.fontWeightLight,
     fontSize: 11,
-    marginLeft: 8
+    marginLeft: 4
   }),
   inline: {},
   info: _objectSpread({}, theme.typography.b3, {
@@ -109,19 +112,19 @@ export const styles = theme => ({
     alignSelf: 'center'
   }),
   checkbox: {
-    width: 20,
-    height: 20,
-    fontSize: 20,
     marginTop: 3
   },
+  checkboxWithSecondaryInline: {
+    marginTop: '-8px'
+  },
   img: {
     width: 24,
     height: 'auto',
-    margin: '2px 8px',
+    margin: '1px 4px 3px 4px',
     verticalAlign: 'middle'
   },
   icon: {
-    margin: '0 8px',
+    margin: '0 4px',
     verticalAlign: 'middle'
   }
 });
@@ -256,13 +259,13 @@ class HiSelectableListItem extends React.Component {
       onMouseLeave: this.setHover(false)
     }, {
       style: {
-        paddingLeft: `${level * 32}px`
+        paddingLeft: `${paddingLeft + level * 32}px`
       }
     }), !hideCheckbox && !pinned && React.createElement(HiCheckbox, {
       checked: selected,
       checkedIcon: checkedIcon,
       classes: {
-        root: classes.checkbox
+        root: !secondaryInline ? classes.checkboxWithSecondaryInline : classes.checkbox
       },
       color: "primary" // TODO ?
       ,
@@ -301,7 +304,7 @@ HiSelectableListItem.defaultProps = {
   checkedIcon: 'check_box',
   indeterminate: false,
   level: 0,
-  paddingLeft: 0,
+  paddingLeft: 4,
   pinned: false,
   secondaryInline: true,
   selected: false,

package/es/index.js

@@ -14,4 +14,6 @@ export { default as HiSwitch } from './HiSwitch';
 export { default as HiSwitchState } from './HiSwitch/HiSwitchState';
 export { default as withMobileDialog } from './withMobileDialog';
 export { default as withWidth } from './withWidth';
-export { default as HiDatePicker } from './HiDatePicker/HiDatePicker';
+export { default as HiDatePicker } from './HiDatePicker/HiDatePicker';
+export { default as HiDateRangePicker } from './HiDatePicker/HiDateRangePicker';
+export { default as HiDateRangeSelector } from './HiDatePicker/HiDateRangeSelector';

package/es/styles/createPalette.js

@@ -155,7 +155,8 @@ export default function createPalette(palette) {
       dark: red[700]
     },
     type = 'light',
-    contrastThreshold = 4,
+    contrastThreshold = 2.9,
+    // max light contrast
     tonalOffset = 0.2,
     context = 'local'
   } = palette,

package/es/utils/helpers.js

@@ -95,6 +95,123 @@ export function arrayUnique(array) {
 
   return a;
 }
+/**
+ * Format number relative to required size and locale
+ *
+ * @param number
+ * @param size
+ * @param locale
+ * @param precision
+ */
+
+export function formatNumber(number, size = 'l', locale = 'en-EN', precision) {
+  // Round number
+  switch (size) {
+    case 'm':
+      number = Math.round(number);
+      break;
+
+    case 's':
+      number = Math.round(number);
+      break;
+
+    case 'l':
+    default:
+      number = Math.round(number * 100) / 100;
+      break;
+  }
+
+  const effectivePrecision = precision || (size === 'l' ? 2 : 0); // To locale
+
+  const options = {
+    minimumFractionDigits: effectivePrecision,
+    maximumFractionDigits: effectivePrecision,
+    useGrouping: true
+  };
+  return number.toLocaleString(locale.replace(/_/g, '-'), options);
+}
+/**
+ * Format currency amount relative to required size, locale and currency
+ *
+ * large/fr-FR/EUR : 123456789,123 -> 123 465 789,123 €
+ * large/en-EN/USD : 123456789,123 -> $ 123,465,789.123
+ * large/en-EN/EUR : 123456789,123 -> € 123,465,789.123
+ * small/en-EN/EUR : 123456789,123 -> € 123,456,789
+ * tiny/en-EN/EUR  : 123456789,123 -> € 123M
+ * tiny/en-EN/EUR  :  23456789,123 -> € 23,456k
+ * tiny/en-EN/EUR  :     56789,123 -> € 56,789
+ *
+ * @param amount
+ * @param size      - l | m | s
+ * @param locale
+ * @param currency  - ISO 4217
+ */
+
+export function formatCurrencyAmount(amount, size = 'l', locale = 'en-EN', currency = 'EUR') {
+  let value = amount;
+  let unit = ''; // Round number
+
+  switch (size) {
+    case 'm':
+      value = Math.round(amount);
+      break;
+
+    case 's':
+      if (amount > 99999999) {
+        amount /= 1000000;
+        unit = 'M';
+      } else if (amount > 99999) {
+        amount /= 1000;
+        unit = 'k';
+      }
+
+      value = Math.round(amount);
+      break;
+
+    case 'l':
+    default:
+      value = Math.round(amount * 100) / 100;
+      break;
+  } // To locale
+
+
+  const options = {
+    minimumFractionDigits: size === 'l' ? 2 : 0,
+    maximumFractionDigits: size === 'l' ? 2 : 0,
+    useGrouping: true,
+    style: 'currency',
+    currency,
+    currencyDisplay: 'symbol'
+  };
+  let returnValue = value.toLocaleString(locale.replace(/_/g, '-'), options); // Place unit (k, M) after number (don't move currency symbol !)
+
+  if (unit !== '') {
+    returnValue = returnValue.replace(/([\D]*)([\d,.\s]+)([\D]*)/, (match, p1, p2, p3) => [p1, p2, unit, p3].join(''));
+  }
+
+  return returnValue;
+}
+/**
+ * Format rate relative to required size and locale
+ * large/en-EN  : 12.34
+ *
+ * @param rate
+ * @param size
+ * @param locale
+ */
+
+export function formatRate(rate, size = 'l', locale = 'en-EN') {
+  let effectiveSize = 0;
+  if (size === 'l') effectiveSize = 2;
+  if (size === 'm') effectiveSize = 1; // To locale
+
+  const options = {
+    minimumFractionDigits: effectiveSize,
+    maximumFractionDigits: effectiveSize,
+    style: 'percent'
+  };
+  return rate.toLocaleString(locale.replace(/_/g, '-'), options);
+}
 /**
  * Retourne l'item selectionnable suivant.
  * @param node

package/index.es.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.36
+/** @license HiPay-Material-UI v2.0.0-beta.38
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -20,3 +20,5 @@ export { default as HiSwitchState } from './HiSwitch/HiSwitchState';
 export { default as withMobileDialog } from './withMobileDialog';
 export { default as withWidth } from './withWidth';
 export { default as HiDatePicker } from './HiDatePicker/HiDatePicker';
+export { default as HiDateRangePicker } from './HiDatePicker/HiDateRangePicker';
+export { default as HiDateRangeSelector } from './HiDatePicker/HiDateRangeSelector';

package/index.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.36
+/** @license HiPay-Material-UI v2.0.0-beta.38
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -148,6 +148,18 @@ Object.defineProperty(exports, "HiDatePicker", {
     return _HiDatePicker.default;
   }
 });
+Object.defineProperty(exports, "HiDateRangePicker", {
+  enumerable: true,
+  get: function get() {
+    return _HiDateRangePicker.default;
+  }
+});
+Object.defineProperty(exports, "HiDateRangeSelector", {
+  enumerable: true,
+  get: function get() {
+    return _HiDateRangeSelector.default;
+  }
+});
 
 var _styles = require("./styles");
 
@@ -181,4 +193,8 @@ var _withMobileDialog = _interopRequireDefault(require("./withMobileDialog"));
 
 var _withWidth = _interopRequireDefault(require("./withWidth"));
 
-var _HiDatePicker = _interopRequireDefault(require("./HiDatePicker/HiDatePicker"));
+var _HiDatePicker = _interopRequireDefault(require("./HiDatePicker/HiDatePicker"));
+
+var _HiDateRangePicker = _interopRequireDefault(require("./HiDatePicker/HiDateRangePicker"));
+
+var _HiDateRangeSelector = _interopRequireDefault(require("./HiDatePicker/HiDateRangeSelector"));

package/package.json

@@ -2,7 +2,7 @@
   "name": "@hipay/hipay-material-ui",
   "private": false,
   "author": "HiPay PSYCHE Team",
-  "version": "2.0.0-beta.36",
+  "version": "2.0.0-beta.38",
   "description": "React components that implement Google's Material Design.",
   "keywords": [
     "react",

package/styles/createPalette.js

@@ -183,7 +183,7 @@ function createPalette(palette) {
       _palette$type = palette.type,
       type = _palette$type === void 0 ? 'light' : _palette$type,
       _palette$contrastThre = palette.contrastThreshold,
-      contrastThreshold = _palette$contrastThre === void 0 ? 4 : _palette$contrastThre,
+      contrastThreshold = _palette$contrastThre === void 0 ? 2.9 : _palette$contrastThre,
       _palette$tonalOffset = palette.tonalOffset,
       tonalOffset = _palette$tonalOffset === void 0 ? 0.2 : _palette$tonalOffset,
       _palette$context = palette.context,