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

package/HiSwitch/HiSwitch.js

@@ -0,0 +1,208 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
+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 _SwitchBase = require('material-ui/internal/SwitchBase');
+
+var _SwitchBase2 = _interopRequireDefault(_SwitchBase);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _withStyles = require('../styles/withStyles');
+
+var _withStyles2 = _interopRequireDefault(_withStyles);
+
+var _Check = require('mdi-material-ui/Check');
+
+var _Check2 = _interopRequireDefault(_Check);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        root: {
+            display: 'inline-flex',
+            width: 62,
+            position: 'relative',
+            flexShrink: 0
+        },
+        bar: {
+            borderRadius: 7,
+            display: 'block',
+            position: 'absolute',
+            width: 34,
+            height: 14,
+            top: '50%',
+            marginTop: -7,
+            left: '50%',
+            marginLeft: -17,
+            transition: theme.transitions.create(['opacity', 'background-color'], {
+                duration: theme.transitions.duration.shortest
+            }),
+            backgroundColor: theme.palette.type === 'light' ? theme.palette.neutral.normal : '#fff',
+            opacity: theme.palette.type === 'light' ? 0.38 : 0.3
+        },
+        icon: {
+            boxShadow: theme.shadows[1],
+            width: 20,
+            height: 20,
+            borderRadius: '50%',
+            backgroundColor: theme.palette.background2,
+            color: theme.palette.background2,
+            padding: 2
+        },
+        iconChecked: {
+            backgroundColor: theme.palette.business.primary.normal,
+            color: 'white'
+        },
+        iconDisabled: {
+            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],
+            '&:not($iconChecked)': {
+                color: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800]
+            }
+        },
+        // For SwitchBase
+        default: {
+            zIndex: 1,
+            color: theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[400],
+            transition: theme.transitions.create('transform', {
+                duration: theme.transitions.duration.shortest
+            }),
+            height: 40,
+            width: 40
+        },
+        checked: {
+            transform: 'translateX(18px)',
+            '& + $bar': {
+                backgroundColor: theme.palette.business.primary.normal,
+                opacity: 0.5
+            }
+        },
+        disabled: {
+            color: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800],
+            '& + $bar': {
+                backgroundColor: theme.palette.type === 'light' ? '#000' : '#fff',
+                opacity: theme.palette.type === 'light' ? 0.12 : 0.1
+            }
+        }
+    };
+};
+
+var HiSwitch = function (_React$Component) {
+    (0, _inherits3.default)(HiSwitch, _React$Component);
+
+    function HiSwitch() {
+        (0, _classCallCheck3.default)(this, HiSwitch);
+        return (0, _possibleConstructorReturn3.default)(this, (HiSwitch.__proto__ || (0, _getPrototypeOf2.default)(HiSwitch)).apply(this, arguments));
+    }
+
+    (0, _createClass3.default)(HiSwitch, [{
+        key: 'render',
+        value: function render() {
+            var _classNames;
+
+            var _props = this.props,
+                classes = _props.classes,
+                className = _props.className,
+                checked = _props.checked,
+                disabled = _props.disabled,
+                other = (0, _objectWithoutProperties3.default)(_props, ['classes', 'className', 'checked', 'disabled']);
+
+
+            var iconClass = (0, _classnames2.default)(classes.icon, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.iconChecked, checked), (0, _defineProperty3.default)(_classNames, classes.iconDisabled, disabled), _classNames));
+
+            var icon = _react2.default.createElement(_Check2.default, { className: iconClass });
+
+            return _react2.default.createElement(
+                'div',
+                { className: (0, _classnames2.default)(classes.root, className) },
+                _react2.default.createElement(_SwitchBase2.default, (0, _extends3.default)({
+                    icon: icon,
+                    classes: {
+                        default: classes.default,
+                        checked: classes.checked,
+                        disabled: classes.disabled
+                    },
+                    checkedIcon: icon,
+                    checked: checked,
+                    disabled: disabled
+                }, other)),
+                _react2.default.createElement('div', { className: classes.bar })
+            );
+        }
+    }]);
+    return HiSwitch;
+}(_react2.default.Component);
+
+HiSwitch.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * If `true`, the component is checked.
+     */
+    checked: _propTypes2.default.bool,
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * @ignore
+     */
+    className: _propTypes2.default.string,
+    /**
+     * If `true`, the switch will be disabled.
+     */
+    disabled: _propTypes2.default.bool,
+    /**
+     * Callback fired when the state is changed.
+     *
+     * @param {object} event The event source of the callback
+     * @param {boolean} checked The `checked` value of the switch
+     */
+    onChange: _propTypes2.default.func
+} : {};
+exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiHiSwitch' })(HiSwitch);

package/HiSwitch/HiSwitchState.js

@@ -0,0 +1,229 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    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.background1,
+            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'
+        }
+    };
+};
+
+/**
+ * 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);
+
+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
+} : {};
+exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiHiSwitchState' })(HiSwitchState);

package/HiSwitch/index.js

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