@hipay/hipay-material-ui 1.0.0-beta.1

package/es/utils/hiGetMdiIcon.js

@@ -0,0 +1,12 @@
+//  weak
+import * as mdi from 'mdi-material-ui';
+import { capitalizeFirstLetter } from './helpers';
+import { camelize } from './hiHelpers';
+
+/**
+ * Renvoie un icon material design icon
+ */
+export default function (icon) {
+  const mdiLeftIcon = capitalizeFirstLetter(camelize(icon));
+  return mdi[mdiLeftIcon];
+}

package/es/utils/hiHelpers.js

@@ -0,0 +1,173 @@
+//  weak
+
+export function camelize(string) {
+    string = string.replace(/(\_\w)/g, function (m) {
+        return m[1].toUpperCase();
+    });
+    return string.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function (match, index) {
+        if (+match === 0) return ''; // or if (/\s+/.test(match)) for white spaces
+        return index == 0 ? match.toLowerCase() : match.toUpperCase();
+    });
+}
+
+/**
+ * Format number relative to required size and locale
+ *
+ * @param number
+ * @param size
+ * @param locale
+ */
+export function formatNumber(number, size = 'l', locale = 'en-EN') {
+    // Round number
+    switch (size) {
+        case 'l':
+            number = Math.round(number * 100) / 100;
+            break;
+        case 'm':
+            number = Math.round(number);
+            break;
+        case 's':
+            number = Math.round(number);
+            break;
+    }
+
+    // To locale
+    const options = {
+        minimumFractionDigits: size === 'l' ? 2 : 0,
+        maximumFractionDigits: size === 'l' ? 2 : 0,
+        useGrouping: true
+    };
+
+    return number.toLocaleString(locale, 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 'l':
+            value = Math.round(amount * 100) / 100;
+            break;
+        case 'm':
+            value = Math.round(amount);
+            break;
+        case 's':
+            if (amount > 99999999) {
+                amount = amount / 1000000;
+                unit = 'M';
+            } else if (amount > 99999) {
+                amount = amount / 1000;
+                unit = 'k';
+            }
+            value = Math.round(amount);
+            break;
+    }
+
+    // To locale
+    const options = {
+        minimumFractionDigits: size === 'l' ? 2 : 0,
+        maximumFractionDigits: size === 'l' ? 2 : 0,
+        useGrouping: true,
+        style: 'currency',
+        currency: currency,
+        currencyDisplay: 'symbol'
+    };
+
+    let returnValue = value.toLocaleString(locale, options);
+
+    // Place unit (k, M) after number (don't move currency symbol !)
+    if (unit !== '') {
+        returnValue = returnValue.replace(/([\D]*)([\d\,\.\s]+)([\D]*)/, function (match, p1, p2, p3) {
+            return [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') {
+    // To locale
+    const options = {
+        minimumFractionDigits: size === 'l' ? 2 : size === 'm' ? 1 : 0,
+        maximumFractionDigits: size === 'l' ? 2 : size === 'm' ? 1 : 0,
+        style: 'percent'
+    };
+
+    return rate.toLocaleString(locale, options);
+}
+
+/**
+ * Remove duplicate items from array useful after concat arrays
+ *
+ * arrayUnique(array1.concat(array2))
+ *
+ * @param array
+ */
+export function arrayUnique(array) {
+    let a = array.concat();
+    for (let i = 0; i < a.length; ++i) {
+        for (let j = i + 1; j < a.length; ++j) {
+            if (a[i] === a[j]) a.splice(j--, 1);
+        }
+    }
+
+    return a;
+}
+
+/**
+ * Echappe les caractères HTML d'une chaîne de catactères
+ *
+ * Sauf la balise strong
+ *
+ * @param array
+ */
+export function escapeHTML(unsafeStr) {
+    return unsafeStr.replace('<strong>', '[[').replace('</strong>', ']]').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\"/g, '&quot;').replace(/\'/g, '&#39;').replace('[[', '<strong>').replace(']]', '</strong>');
+}
+
+/**
+ * Retourne l'item selectionnable suivant.
+ * @param node
+ * @param direction
+ * @returns {*}
+ */
+export function getNextItemSelectable(node, direction) {
+    if (direction === 'down') {
+        if (node.nextSibling === null) {
+            return null;
+        } else if (node.nextSibling.tabIndex === -1) {
+            return this.getNextItemSelectable(node.nextSibling, direction);
+        }
+        return node.nextSibling;
+    } else if (node.previousSibling === null) {
+        return null;
+    } else if (node.previousSibling.tabIndex === -1) {
+        return this.getNextItemSelectable(node.previousSibling, direction);
+    }
+    return node.previousSibling;
+}

package/es/utils/keyboardFocus.js

@@ -0,0 +1,51 @@
+//  weak
+
+import keycode from 'keycode';
+import warning from 'warning';
+import contains from 'dom-helpers/query/contains';
+import addEventListener from '../utils/addEventListener';
+
+const internal = {
+  listening: false,
+  focusKeyPressed: false
+};
+
+export function focusKeyPressed(pressed) {
+  if (typeof pressed !== 'undefined') {
+    internal.focusKeyPressed = Boolean(pressed);
+  }
+
+  return internal.focusKeyPressed;
+}
+
+export function detectKeyboardFocus(instance, element, callback, attempt = 1) {
+  process.env.NODE_ENV !== "production" ? warning(instance.keyboardFocusCheckTime, 'Material-UI: missing instance.keyboardFocusCheckTime') : void 0;
+  process.env.NODE_ENV !== "production" ? warning(instance.keyboardFocusMaxCheckTimes, 'Material-UI: missing instance.keyboardFocusMaxCheckTimes') : void 0;
+
+  instance.keyboardFocusTimeout = setTimeout(() => {
+    if (focusKeyPressed() && (document.activeElement === element || contains(element, document.activeElement))) {
+      callback();
+    } else if (attempt < instance.keyboardFocusMaxCheckTimes) {
+      detectKeyboardFocus(instance, element, callback, attempt + 1);
+    }
+  }, instance.keyboardFocusCheckTime);
+}
+
+const FOCUS_KEYS = ['tab', 'enter', 'space', 'esc', 'up', 'down', 'left', 'right'];
+
+function isFocusKey(event) {
+  return FOCUS_KEYS.indexOf(keycode(event)) !== -1;
+}
+
+export function listenForFocusKeys() {
+  // It's a singleton, we only need to listen once.
+  // Also, this logic is client side only, we don't need a teardown.
+  if (!internal.listening) {
+    addEventListener(window, 'keyup', event => {
+      if (isFocusKey(event)) {
+        internal.focusKeyPressed = true;
+      }
+    });
+    internal.listening = true;
+  }
+}

package/es/utils/manageAriaHidden.js

@@ -0,0 +1,33 @@
+//  weak
+
+const BLACKLIST = ['template', 'script', 'style'];
+
+const isHidable = ({ nodeType, tagName }) => nodeType === 1 && BLACKLIST.indexOf(tagName.toLowerCase()) === -1;
+
+const siblings = (container, mount, cb) => {
+  mount = [].concat(mount); // eslint-disable-line no-param-reassign
+  [].forEach.call(container.children, node => {
+    if (mount.indexOf(node) === -1 && isHidable(node)) {
+      cb(node);
+    }
+  });
+};
+
+export function ariaHidden(show, node) {
+  if (!node) {
+    return;
+  }
+  if (show) {
+    node.setAttribute('aria-hidden', 'true');
+  } else {
+    node.removeAttribute('aria-hidden');
+  }
+}
+
+export function hideSiblings(container, mountNode) {
+  siblings(container, mountNode, node => ariaHidden(true, node));
+}
+
+export function showSiblings(container, mountNode) {
+  siblings(container, mountNode, node => ariaHidden(false, node));
+}

package/es/utils/reactHelpers.js

@@ -0,0 +1,21 @@
+
+/* eslint-disable import/prefer-default-export */
+
+import { cloneElement, Children, isValidElement } from 'react';
+
+
+export function cloneChildrenWithClassName(children, className) {
+  return Children.map(children, child => {
+    return isValidElement(child) && cloneElement(child, {
+      className: child.props.hasOwnProperty('className') ? `${child.props.className} ${className}` : className
+    });
+  });
+}
+
+export function isMuiElement(element, muiNames) {
+  return isValidElement(element) && muiNames.indexOf(element.type.muiName) !== -1;
+}
+
+export function isMuiComponent(element, muiNames) {
+  return muiNames.indexOf(element.muiName) !== -1;
+}

package/es/utils/requirePropFactory.js

@@ -0,0 +1,16 @@
+//  weak
+
+const requirePropFactory = componentNameInError => {
+  const requireProp = requiredProp => (props, propName, componentName, location, propFullName) => {
+    const propFullNameSafe = propFullName || propName;
+
+    if (typeof props[propName] !== 'undefined' && !props[requiredProp]) {
+      return new Error(`The property \`${propFullNameSafe}\` of ` + `\`${componentNameInError}\` must be used on \`${requiredProp}\`.`);
+    }
+
+    return null;
+  };
+  return requireProp;
+};
+
+export default requirePropFactory;

package/es/utils/withWidth.js

@@ -0,0 +1,141 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+//  weak
+
+// flow sanity check (DO NOT DELETE) https://flow.org/try/#0JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wG4AoUSWOGATzCTgG84BhXSAOyS5gBUGTAL5xsuAkXQwy5OQHp5cALSq16jZuVwdccorgB3YDAAW-U0hBMAEgHk25JAA9qWAK5cMwCFyMnzS2sAHgAFHDAAZwAuFmEAPgAKcl12Tl9eGFiOcAy+QUZg1jMrJFi7ACMAKyQMOFEAMjhwiCj4gBpyAEps9J58oTCIyPiWOR00ABsUSMi4AHUAi1K4FxheABM55GkAOhzuTKHWyPaWWiCyuEqauoSx1KIuDaQoRK6H1LgiGHcoP2CBzy8GYuzBZmAkV2YGGohK1gAvMwIVDIjAUOtdvCkKJ5PEKKlhAT6ilvkhfv8FktLuRhAolFpGUy1PolMYzMtrHAAKqRFAAcyQ5CmMzmAEFVs51s9tsQYPs+kdipdytVavBGiwULEuO4QBVXmcKjq9QaoPdmHS0L40XBOUgNkD+vAEf4OZdEmKuhQDPMmBtfPh4DwHbQIHAwKK4MA-AADbGx1YAN14Fwg7n5pjgsYAsnQnZlE0QAI7uYBEOYmXbkYL2x2KvhwFBIgCMogqSIATLj4vSVMyB6lWW7TIsNmY4PZHC43LQhHAAEJSADWkBjLoIzki+DgAB8CJEQDv9-gQBtjwRJvyL-hnJNZOR6IwqePTC0onBXcxSTGTMAUJMY5mAA-LES6oKuEDrp0OjGK+oGLiua58J0dJOK40AeF4MA+H47KjsAr7vJ8mCeN4virFwpgoF4SDHFEsRAW+wxJKSqQFnwvS5M6BR0cwcFmGBSFQShcBgrs76RAkMFwD0aTcZkvH0SMYxsXAIqzFSZhMZK0pbIgcoKgpfDKaM35fGSzyvMR5kWepNogr+OEAUxZwCaYoiuii0LDGpjzkn8AIcSC4neTCJyiO5SL4Ie+A9sShIJSSak-IFWkEa+xJEuMZIUn4vDUbRFBoQYA5leow7uHygrCtMmkLrpmyynswVFO5QkQchMBnNqcC6vqhrGn1pqvBapJPC8bwfLZEwOSw7meRckI+ScKUBZSwQbMASZwHipJ0lac1MQ6wWfiOTHvIkC7esOfpwAGXBBn1SChjA4aRppMbZu5iZICmfhmOmmbZnmwVFkgpblkglbyjWx31sZ8DNswbZwB2zDdrt+JAA
+import React from 'react';
+
+import EventListener from 'react-event-listener';
+import debounce from 'lodash/debounce';
+import wrapDisplayName from 'recompose/wrapDisplayName';
+import withTheme from '../styles/withTheme';
+import { keys as breakpointKeys } from '../styles/createBreakpoints';
+
+
+/**
+ * By default, returns true if screen width is the same or greater than the given breakpoint.
+ *
+ * @param screenWidth
+ * @param breakpoint
+ * @param inclusive - defaults to true
+ */
+export const isWidthUp = (breakpoint, screenWidth, inclusive = true) => {
+  if (inclusive) {
+    return breakpointKeys.indexOf(breakpoint) <= breakpointKeys.indexOf(screenWidth);
+  }
+  return breakpointKeys.indexOf(breakpoint) < breakpointKeys.indexOf(screenWidth);
+};
+
+/**
+ * By default, returns true if screen width is the same or less than the given breakpoint.
+ *
+ * @param screenWidth
+ * @param breakpoint
+ * @param inclusive - defaults to true
+ */
+export const isWidthDown = (breakpoint, screenWidth, inclusive = true) => {
+  if (inclusive) {
+    return breakpointKeys.indexOf(screenWidth) <= breakpointKeys.indexOf(breakpoint);
+  }
+  return breakpointKeys.indexOf(screenWidth) < breakpointKeys.indexOf(breakpoint);
+};
+
+// optional props introduced by this HOC
+
+
+const withWidth = (
+// eslint-disable-line prettier/prettier
+options = {}) => Component => {
+  const {
+    resizeInterval = 166 // Corresponds to 10 frames at 60 Hz.
+  } = options;
+
+  // `theme` is injected below by withTheme
+  class Width extends React.Component {
+    constructor(...args) {
+      var _temp;
+
+      return _temp = super(...args), this.state = {
+        width: undefined
+      }, this.handleResize = debounce(() => {
+        this.updateWidth(window.innerWidth);
+      }, resizeInterval), _temp;
+    }
+
+    componentDidMount() {
+      this.updateWidth(window.innerWidth);
+    }
+
+    componentWillUnmount() {
+      this.handleResize.cancel();
+    }
+
+    updateWidth(innerWidth) {
+      if (this.props.theme) {
+        const breakpoints = this.props.theme.breakpoints;
+        let width = null;
+
+        /**
+         * Start with the slowest value as low end devices often have a small screen.
+         *
+         * innerWidth |0      xs      sm      md      lg      xl
+         *            |-------|-------|-------|-------|-------|------>
+         * width      |  xs   |  xs   |  sm   |  md   |  lg   |  xl
+         */
+        let index = 1;
+        while (width === null && index < breakpointKeys.length) {
+          const currentWidth = breakpointKeys[index];
+
+          // @media are inclusive, so reproduce the behavior here.
+          if (innerWidth < breakpoints.values[currentWidth]) {
+            width = breakpointKeys[index - 1];
+            break;
+          }
+
+          index += 1;
+        }
+
+        width = width || 'xl';
+
+        if (width !== this.state.width) {
+          this.setState({
+            width
+          });
+        }
+      }
+    }
+
+    render() {
+      const _props = this.props,
+            { initialWidth, theme, width } = _props,
+            other = _objectWithoutProperties(_props, ['initialWidth', 'theme', 'width']);
+      const props = _extends({
+        width: width || this.state.width || initialWidth
+      }, other);
+
+      // When rendering the component on the server,
+      // we have no idea about the client browser screen width.
+      // In order to prevent blinks and help the reconciliation of the React tree
+      // we are not rendering the child component.
+      //
+      // An alternative is to use the `initialWidth` property.
+      if (props.width === undefined) {
+        return null;
+      }
+
+      return React.createElement(
+        EventListener,
+        { target: 'window', onResize: this.handleResize },
+        React.createElement(Component, props)
+      );
+    }
+  }
+
+  if (process.env.NODE_ENV !== 'production') {
+    Width.displayName = wrapDisplayName(Component, 'withWidth');
+  }
+
+  return withTheme()(Width);
+};
+
+export default withWidth;

package/index.es.js

@@ -0,0 +1,69 @@
+/** @license Material-UI v1.0.0-beta.1
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { default as AppBar } from './AppBar';
+export { default as Avatar } from './Avatar';
+export { default as Badge } from './Badge';
+export { default as BottomNavigation, BottomNavigationAction } from './BottomNavigation';
+export { default as Button } from './Button';
+export { default as ButtonBase } from './ButtonBase';
+export { default as Card, CardActions, CardContent, CardHeader, CardMedia } from './Card';
+export { default as Checkbox } from './Checkbox';
+export { default as ClickAwayListener } from './utils/ClickAwayListener';
+export { default as Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, withMobileDialog } from './Dialog';
+export { default as Divider } from './Divider';
+export { default as Drawer } from './Drawer';
+export { default as ExpansionPanel, ExpansionPanelActions, ExpansionPanelDetails, ExpansionPanelSummary } from './ExpansionPanel';
+export { FormControl, FormGroup, FormLabel, FormHelperText, FormControlLabel } from './Form';
+export { default as Hidden } from './Hidden';
+export { default as Icon } from './Icon';
+export { default as IconButton } from './IconButton';
+export { default as Input, InputLabel, InputAdornment } from './Input';
+export { default as Grid } from './Grid';
+export { default as GridList, GridListTile, GridListTileBar } from './GridList';
+export { default as List, ListItem, ListItemAvatar, ListItemIcon, ListItemSecondaryAction, ListItemText, ListSubheader } from './List';
+export { default as Menu, MenuItem, MenuList } from './Menu';
+export { default as MobileStepper } from './MobileStepper';
+export { default as Modal, Backdrop, ModalManager } from './Modal';
+export { default as Paper } from './Paper';
+export { default as Popover } from './Popover';
+export { default as Portal } from './Portal';
+export { CircularProgress, LinearProgress } from './Progress';
+export { default as Radio, RadioGroup } from './Radio';
+export { default as Reboot } from './Reboot';
+export { default as Select } from './Select';
+export { default as Snackbar, SnackbarContent } from './Snackbar';
+export { default as Stepper, Step, StepButton, StepIcon, StepContent, StepLabel } from './Stepper';
+export { MuiThemeProvider, withStyles, withTheme, createMuiTheme, jssPreset } from './styles';
+
+// eslint-disable-next-line import/first
+import * as colors from './colors';
+
+export { colors };
+
+export { default as SvgIcon } from './SvgIcon';
+export { default as Switch } from './Switch';
+export { default as Table, TableBody, TableCell, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel } from './Table';
+export { default as Tabs, Tab } from './Tabs';
+export { default as Typography } from './Typography';
+export { default as TextField } from './TextField';
+export { default as Toolbar } from './Toolbar';
+export { default as Tooltip } from './Tooltip';
+export { Slide, Grow, Fade, Collapse, Zoom } from './transitions';
+
+export { default as withWidth } from './utils/withWidth';
+
+// HiPay Material components
+export { default as HiIconBuilder } from './utils/HiIconBuilder';
+export { default as HiCheckbox } from './HiCheckbox';
+export { default as HiRadio } from './HiRadio';
+export { default as HiTable } from './HiTable';
+export { default as HiSelect } from './HiSelect';
+export { default as HiLoader } from './HiLoader';
+export { default as HiTableContextMenu } from './HiTable/HiTableContextMenu';
+export { default as HiChip, HiChipSwitch } from './HiChip';
+export { default as HiSelectableList } from './HiSelectableList';
+export { default as HiTopBar } from './HiTopBar';
+export { createHiMuiTheme } from './styles';