@hipay/hipay-material-ui 1.0.0-beta.8 → 2.0.0-beta.35

package/HiSwitch/HiSwitchState.js

@@ -1,229 +1,219 @@
-'use strict';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-exports.styles = undefined;
-
-var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
-
-var _defineProperty3 = _interopRequireDefault(_defineProperty2);
-
-var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
-
-var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
-
-var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
-
-var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
-
-var _createClass2 = require('babel-runtime/helpers/createClass');
-
-var _createClass3 = _interopRequireDefault(_createClass2);
-
-var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
-
-var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
-
-var _inherits2 = require('babel-runtime/helpers/inherits');
-
-var _inherits3 = _interopRequireDefault(_inherits2);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _colors = require('material-ui/colors');
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _withStyles = require('../styles/withStyles');
-
-var _withStyles2 = _interopRequireDefault(_withStyles);
-
-var _Button = require('material-ui/Button');
-
-var _Button2 = _interopRequireDefault(_Button);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var styles = exports.styles = function styles(theme) {
-    return {
-        root: {
-            display: 'inline-flex',
-            maxHeight: 40,
-            marginRight: 12,
-            padding: 4,
-            backgroundColor: theme.palette.background2,
-            borderRadius: '2px 2px 0 0',
-            width: '100%',
-            maxWidth: 200,
-            minWidth: 120,
-            borderBottom: 'solid 1px ' + _colors.grey[300]
-        },
-        button: {
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            backgroundColor: theme.palette.background2,
-            color: theme.palette.text.disabled,
-            textTransform: 'inherit',
-            width: '50%',
-            fontSize: 15,
-            fontWeight: 400
-        },
-        buttonLeft: {
-            borderBottomRightRadius: 0,
-            borderTopRightRadius: 0
-        },
-        buttonRight: {
-            borderBottomLeftRadius: 0,
-            borderTopLeftRadius: 0
-        },
-        checked: {
-            boxShadow: theme.shadows[2],
-            '&:not($disabled)': {
-                backgroundColor: theme.palette.business.primary.normal,
-                color: '#FFF'
-            }
-        },
-        disabled: {
-            '&$checked': {
-                backgroundColor: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800],
-                color: theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[400]
-            },
-            boxShadow: 'none'
-        }
-    };
+exports.default = exports.styles = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _HiButton = _interopRequireDefault(require("../HiButton"));
+
+var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
+
+var _helpers = require("../utils/helpers");
+
+var styles = function styles(theme) {
+  return {
+    root: {
+      display: 'inline-flex',
+      maxHeight: 40,
+      marginRight: 12,
+      padding: 4,
+      backgroundColor: theme.palette.background2,
+      borderRadius: '2px 2px 0 0',
+      width: '100%',
+      maxWidth: 200,
+      minWidth: 120,
+      borderBottom: "solid 1px ".concat(theme.palette.grey[300])
+    },
+    button: {
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      backgroundColor: theme.palette.background2,
+      color: theme.palette.text.disabled,
+      textTransform: 'inherit',
+      width: '50%',
+      fontSize: 15,
+      fontWeight: 400
+    },
+    buttonLeft: {
+      borderBottomRightRadius: 0,
+      borderTopRightRadius: 0
+    },
+    buttonRight: {
+      borderBottomLeftRadius: 0,
+      borderTopLeftRadius: 0
+    },
+    checked: {
+      boxShadow: theme.shadows[2]
+    },
+    checkedPrimary: {
+      '&:not($disabled)': {
+        backgroundColor: theme.palette.primary.main,
+        color: theme.palette.primary.contrastText
+      }
+    },
+    checkedSecondary: {
+      '&:not($disabled)': {
+        backgroundColor: theme.palette.secondary.main,
+        color: theme.palette.secondary.contrastText
+      }
+    },
+    checkedPositive: {
+      '&:not($disabled)': {
+        backgroundColor: theme.palette.positive.main,
+        color: theme.palette.positive.contrastText
+      }
+    },
+    checkedNegative: {
+      '&:not($disabled)': {
+        backgroundColor: theme.palette.negative.main,
+        color: theme.palette.negative.contrastText
+      }
+    },
+    checkedMiddle: {
+      '&:not($disabled)': {
+        backgroundColor: theme.palette.middle.main,
+        color: theme.palette.middle.contrastText
+      }
+    },
+    checkedNeutral: {
+      '&:not($disabled)': {
+        backgroundColor: theme.palette.neutral.main,
+        color: theme.palette.neutral.contrastText
+      }
+    },
+    disabled: {
+      '&$checked': {
+        backgroundColor: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800],
+        color: theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[400]
+      },
+      boxShadow: 'none'
+    }
+  };
 };
-
 /**
  * Ce composant affiche un switch entre 2 valeurs associées à deux labels.
  * par défaut ON/OFF associé à true/false.
  */
 
-var HiSwitchState = function (_React$Component) {
-    (0, _inherits3.default)(HiSwitchState, _React$Component);
-
-    function HiSwitchState() {
-        (0, _classCallCheck3.default)(this, HiSwitchState);
-        return (0, _possibleConstructorReturn3.default)(this, (HiSwitchState.__proto__ || (0, _getPrototypeOf2.default)(HiSwitchState)).apply(this, arguments));
-    }
 
-    (0, _createClass3.default)(HiSwitchState, [{
-        key: 'render',
-        value: function render() {
-            var _classNames, _classNames2;
-
-            var _props = this.props,
-                classes = _props.classes,
-                className = _props.className,
-                checked = _props.checked,
-                leftLabel = _props.leftLabel,
-                rightLabel = _props.rightLabel,
-                leftValue = _props.leftValue,
-                rightValue = _props.rightValue,
-                disabled = _props.disabled,
-                onChange = _props.onChange,
-                name = _props.name;
-
-
-            var buttonLeftClass = (0, _classnames2.default)(classes.button, classes.buttonLeft, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.checked, checked === leftValue), (0, _defineProperty3.default)(_classNames, classes.disabled, disabled), _classNames));
-
-            var buttonRightClass = (0, _classnames2.default)(classes.button, classes.buttonRight, (_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, classes.checked, checked === rightValue), (0, _defineProperty3.default)(_classNames2, classes.disabled, disabled), _classNames2));
-
-            return _react2.default.createElement(
-                'div',
-                { className: (0, _classnames2.default)(classes.root, className) },
-                _react2.default.createElement(
-                    _Button2.default,
-                    {
-                        size: 'small',
-                        className: buttonLeftClass,
-                        value: leftValue,
-                        onClick: function onClick(event) {
-                            return onChange(event, leftValue);
-                        },
-                        disabled: disabled
-                    },
-                    leftLabel
-                ),
-                _react2.default.createElement(
-                    _Button2.default,
-                    {
-                        size: 'small',
-                        className: buttonRightClass,
-                        value: rightValue,
-                        onClick: function onClick(event) {
-                            return onChange(event, rightValue);
-                        },
-                        disabled: disabled
-                    },
-                    rightLabel
-                )
-            );
-        }
-    }]);
-    return HiSwitchState;
-}(_react2.default.Component);
+exports.styles = styles;
+
+function HiSwitchState(props) {
+  var _classNames, _classNames2;
+
+  var classes = props.classes,
+      className = props.className,
+      checked = props.checked,
+      color = props.color,
+      leftLabel = props.leftLabel,
+      rightLabel = props.rightLabel,
+      leftValue = props.leftValue,
+      rightValue = props.rightValue,
+      disabled = props.disabled,
+      onChange = props.onChange;
+  var isHiColor = ['primary', 'secondary', 'positive', 'negative', 'middle', 'neutral'].includes(color);
+  var buttonLeftClass = (0, _classnames.default)(classes.button, classes.buttonLeft, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.checked, checked === leftValue), (0, _defineProperty2.default)(_classNames, classes.checkedNeutral, !disabled && checked === leftValue && !isHiColor), (0, _defineProperty2.default)(_classNames, classes["checked".concat((0, _helpers.capitalize)(color))], !disabled && checked === leftValue && isHiColor), (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), _classNames));
+  var buttonRightClass = (0, _classnames.default)(classes.button, classes.buttonRight, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, classes.checked, checked === rightValue), (0, _defineProperty2.default)(_classNames2, classes.checkedNeutral, !disabled && checked === rightValue && !isHiColor), (0, _defineProperty2.default)(_classNames2, classes["checked".concat((0, _helpers.capitalize)(color))], !disabled && checked === rightValue && isHiColor), (0, _defineProperty2.default)(_classNames2, classes.disabled, disabled), _classNames2));
+  return _react.default.createElement("div", {
+    className: (0, _classnames.default)(classes.root, className)
+  }, _react.default.createElement(_HiButton.default, {
+    size: "small",
+    className: buttonLeftClass,
+    value: leftValue,
+    onClick: function onClick(event) {
+      return onChange(event, leftValue);
+    },
+    disabled: disabled
+  }, leftLabel), _react.default.createElement(_HiButton.default, {
+    size: "small",
+    className: buttonRightClass,
+    value: rightValue,
+    onClick: function onClick(event) {
+      return onChange(event, rightValue);
+    },
+    disabled: disabled
+  }, rightLabel));
+}
 
-HiSwitchState.defaultProps = {
-    checked: 'on',
-    leftLabel: 'Off',
-    rightLabel: 'On',
-    leftValue: 'off',
-    rightValue: 'on',
-    disabled: false
-};
 HiSwitchState.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Value checked.
-     */
-    checked: _propTypes2.default.string,
-    /**
-     * Surcharge les classes du composant
-     */
-    classes: _propTypes2.default.object,
-    /**
-     * @ignore
-     */
-    className: _propTypes2.default.string,
-    /**
-     * If `true`, the switch will be disabled.
-     */
-    disabled: _propTypes2.default.bool,
-    /**
-     * Label du premier bouton (dans l'ordre de lecture)
-     */
-    leftLabel: _propTypes2.default.string,
-    /**
-     * value du premier bouton (dans l'ordre de lecture)
-     */
-    leftValue: _propTypes2.default.string,
-    /**
-     * Nom du champs
-     */
-    name: _propTypes2.default.string,
-    /**
-     * Callback fired when the state is changed.
-     *
-     * @param {string} nom du champs
-     * @param {boolean} checked The `checked` value of the switch
-     */
-    onChange: _propTypes2.default.func,
-    /**
-     * Label du deuxieme bouton (dans l'ordre de lecture)
-     */
-    rightLabel: _propTypes2.default.string,
-    /**
-     * value du deuxieme bouton (dans l'ordre de lecture)
-     */
-    rightValue: _propTypes2.default.string
+  /**
+   * Value checked.
+   */
+  checked: _propTypes.default.string,
+
+  /**
+   * Surcharge les classes du composant
+   */
+  classes: _propTypes.default.object,
+
+  /**
+   * @ignore
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   */
+  color: _propTypes.default.oneOf(['inherit', 'primary', 'secondary', 'action', 'error', 'disabled', 'positive', 'negative', 'middle', 'neutral']),
+
+  /**
+   * If `true`, the switch will be disabled.
+   */
+  disabled: _propTypes.default.bool,
+
+  /**
+   * Label du premier bouton (dans l'ordre de lecture)
+   */
+  leftLabel: _propTypes.default.string,
+
+  /**
+   * value du premier bouton (dans l'ordre de lecture)
+   */
+  leftValue: _propTypes.default.string,
+
+  /**
+   * Callback fired when the state is changed.
+   *
+   * @param {string} nom du champs
+   * @param {boolean} checked The `checked` value of the switch
+   */
+  onChange: _propTypes.default.func,
+
+  /**
+   * Label du deuxieme bouton (dans l'ordre de lecture)
+   */
+  rightLabel: _propTypes.default.string,
+
+  /**
+   * value du deuxieme bouton (dans l'ordre de lecture)
+   */
+  rightValue: _propTypes.default.string
 } : {};
-exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiHiSwitchState' })(HiSwitchState);
+HiSwitchState.defaultProps = {
+  checked: 'on',
+  color: 'inherit',
+  leftLabel: 'Off',
+  rightLabel: 'On',
+  leftValue: 'off',
+  rightValue: 'on',
+  disabled: false
+};
+
+var _default = (0, _withStyles.default)(styles, {
+  hiComponent: true,
+  name: 'HmuiHiSwitchState'
+})(HiSwitchState);
+
+exports.default = _default;

package/HiSwitch/index.js

@@ -1,31 +1,23 @@
-'use strict';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _HiSwitch = require('./HiSwitch');
-
-Object.defineProperty(exports, 'default', {
+Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _interopRequireDefault(_HiSwitch).default;
+    return _HiSwitch.default;
   }
 });
-Object.defineProperty(exports, 'HiSwitch', {
+Object.defineProperty(exports, "HiSwitchState", {
   enumerable: true,
   get: function get() {
-    return _interopRequireDefault(_HiSwitch).default;
+    return _HiSwitchState.default;
   }
 });
 
-var _HiSwitchState = require('./HiSwitchState');
-
-Object.defineProperty(exports, 'HiSwitchState', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_HiSwitchState).default;
-  }
-});
+var _HiSwitch = _interopRequireDefault(require("./HiSwitch"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _HiSwitchState = _interopRequireDefault(require("./HiSwitchState"));