tg-core-components 5.5.0-bethard → 5.5.0-master

package/es/components/AcceptUpdatedTaC/index.js

@@ -9,6 +9,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 import React, { Component } from 'react';
 import Translate from '../Translate';
 import marked from 'marked';
+import Button from '../../components/Button';
 
 var AcceptUpdatedTaC = function (_Component) {
   _inherits(AcceptUpdatedTaC, _Component);
@@ -25,7 +26,8 @@ var AcceptUpdatedTaC = function (_Component) {
       var _props = this.props,
           onAccept = _props.onAccept,
           termsContent = _props.termsContent,
-          current = _props.current;
+          current = _props.current,
+          isLoading = _props.isLoading;
 
 
       return React.createElement(
@@ -51,8 +53,11 @@ var AcceptUpdatedTaC = function (_Component) {
           dangerouslySetInnerHTML: { __html: marked(termsContent || '') }
         }),
         React.createElement(
-          'button',
-          { className: 'button primary', onClick: onAccept },
+          Button,
+          {
+            className: 'button primary',
+            onClick: onAccept,
+            isLoading: isLoading },
           React.createElement(Translate, { id: 'action.accept' })
         )
       );

package/es/components/Checkbox/index.js

@@ -0,0 +1,93 @@
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+var Checkbox = function (_React$Component) {
+  _inherits(Checkbox, _React$Component);
+
+  function Checkbox() {
+    _classCallCheck(this, Checkbox);
+
+    return _possibleConstructorReturn(this, (Checkbox.__proto__ || Object.getPrototypeOf(Checkbox)).apply(this, arguments));
+  }
+
+  _createClass(Checkbox, [{
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          className = _props.className,
+          _onChange = _props.onChange,
+          title = _props.title,
+          name = _props.name,
+          error = _props.error,
+          checked = _props.checked;
+
+      if (!_onChange) {
+        throw new Error('You need to provide onChange function');
+      }
+
+      var randomId = Math.floor(Math.random() * 100000);
+      var wrapperClassName = 'Checkbox';
+
+      if (className) {
+        wrapperClassName += ' ' + className;
+      }
+
+      return React.createElement(
+        'div',
+        { className: wrapperClassName },
+        React.createElement(
+          'div',
+          { className: 'flex' },
+          React.createElement('input', {
+            id: 'checkbox-' + randomId,
+            type: 'checkbox',
+            defaultValue: null,
+            defaultChecked: this.props.value === 'true' ? true : false,
+            onChange: function onChange(e) {
+              _onChange(e, name, e.target.checked ? true : '');
+            },
+            name: name ? name : '',
+            checked: checked
+          }),
+          !React.isValidElement(title) ? React.createElement('label', {
+            htmlFor: 'checkbox-' + randomId,
+            dangerouslySetInnerHTML: { __html: title }
+          }) : React.createElement(
+            'label',
+            { htmlFor: 'checkbox-' + randomId },
+            title
+          )
+        ),
+        error && React.createElement(
+          'p',
+          { className: 'error-text' },
+          error
+        )
+      );
+    }
+  }]);
+
+  return Checkbox;
+}(React.Component);
+
+Checkbox.propTypes = {
+  /** Listens for value changes */
+  onChange: PropTypes.func.isRequired,
+  /** Title for the checkboxes */
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  /** Css class name */
+  className: PropTypes.string,
+  /** Name of the input element */
+  name: PropTypes.string,
+  /** Errors output */
+  error: PropTypes.array
+};
+export default Checkbox;

package/es/components/Deposit/CardInput/index.js

@@ -33,9 +33,7 @@ export var Input = function (_Component) {
     return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Input.__proto__ || Object.getPrototypeOf(Input)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
       isFocusing: false
     }, _this.formatInput = function (value) {
-      var _this$props = _this.props,
-          type = _this$props.type,
-          provider = _this$props.provider;
+      var type = _this.props.type;
 
 
       if (!value) {

package/es/components/Input/index.js

@@ -1,25 +1,225 @@
-import React from 'react';
-import PasswordInput from './PasswordInput';
-import BirthdateInput from './BirthdateInput';
-import PhoneNumberInput from './PhoneNumberInput';
-import Checkbox from './Checkbox';
-import Input from './Input';
-
-var InputDispatcher = function InputDispatcher(props) {
-  switch (props.type) {
-    case 'hidden':
-      return React.createElement('input', { type: props.type, name: props.name, value: props.value });
-    case 'password':
-      return React.createElement(PasswordInput, props);
-    case 'birthdate':
-      return React.createElement(BirthdateInput, props);
-    case 'tel':
-      return React.createElement(PhoneNumberInput, props);
-    case 'checkbox':
-      return React.createElement(Checkbox, props);
-    default:
-      return React.createElement(Input, props);
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import ButtonLoader from '../ButtonLoader';
+import cn from 'classnames';
+import Icon from '../Icon';
+
+var Input = function (_PureComponent) {
+  _inherits(Input, _PureComponent);
+
+  function Input(props) {
+    _classCallCheck(this, Input);
+
+    var _this = _possibleConstructorReturn(this, (Input.__proto__ || Object.getPrototypeOf(Input)).call(this, props));
+
+    _this._onTogglePassword = function () {
+      _this.setState({ showPassword: !_this.state.showPassword });
+    };
+
+    _this.getInputRef = function () {
+      return _this.input;
+    };
+
+    _this._handleChange = function (e) {
+      var _this$props = _this.props,
+          onChange = _this$props.onChange,
+          name = _this$props.name;
+
+      var value = e.currentTarget.value;
+
+      _this.setState({
+        value: value
+      });
+
+      onChange && onChange(e, name, value);
+    };
+
+    _this._handleFocus = function (e) {
+      var _this$props2 = _this.props,
+          onFocus = _this$props2.onFocus,
+          name = _this$props2.name;
+      var value = _this.state.value;
+
+
+      _this.setState({
+        isFocusing: true
+      });
+
+      onFocus && onFocus(e, name, value);
+    };
+
+    _this._handleBlur = function () {
+      var onBlur = _this.props.onBlur;
+      var value = _this.state.value;
+
+
+      _this.setState({
+        isFocusing: false
+      });
+      onBlur && onBlur(value);
+    };
+
+    _this._handleAutoFill = function (e) {
+      if (e.animationName === 'onAutoFill') {
+        _this.setState({
+          isAutoFill: true
+        });
+      }
+    };
+
+    _this.state = {
+      isFocusing: false,
+      showPassword: false,
+      value: props.value || '',
+      isAutoFill: false
+    };
+    return _this;
   }
+
+  _createClass(Input, [{
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      if (!this.props.isControlled && typeof nextProps.value === 'undefined') {
+        return;
+      }
+
+      if (this.state.value !== nextProps.value) {
+        this.setState({ value: nextProps.value });
+      }
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          title = _props.title,
+          error = _props.error,
+          require = _props.require,
+          innerRef = _props.innerRef,
+          autoFocus = _props.autoFocus,
+          isLoading = _props.isLoading,
+          description = _props.description,
+          _props$type = _props.type,
+          type = _props$type === undefined ? 'text' : _props$type,
+          _props$className = _props.className,
+          className = _props$className === undefined ? '' : _props$className,
+          _props$showToggleIcon = _props.showToggleIcon,
+          showToggleIcon = _props$showToggleIcon === undefined ? false : _props$showToggleIcon,
+          rest = _objectWithoutProperties(_props, ['title', 'error', 'require', 'innerRef', 'autoFocus', 'isLoading', 'description', 'type', 'className', 'showToggleIcon']);
+
+      var _state = this.state,
+          value = _state.value,
+          isFocusing = _state.isFocusing,
+          showPassword = _state.showPassword,
+          isAutoFill = _state.isAutoFill;
+
+      var hasValue = !!value;
+
+      if (type === 'hidden') return React.createElement('input', _extends({}, rest, { type: type, value: value || '' }));
+
+      return React.createElement(
+        'div',
+        {
+          className: cn('tg_input', className, {
+            input_focus: isFocusing,
+            tg_input_value: hasValue,
+            error: error,
+            has_title: title,
+            input_autofill: isAutoFill
+          }) },
+        React.createElement(
+          'div',
+          { className: 'input-wrapper' },
+          title && React.createElement(
+            'div',
+            { className: 'input_title' },
+            title + ' ' + (require ? '*' : '')
+          ),
+          React.createElement('input', _extends({}, rest, {
+            ref: innerRef,
+            type: showToggleIcon && showPassword ? 'text' : type,
+            value: value || '',
+            autoFocus: autoFocus,
+            onChange: this._handleChange,
+            onFocus: this._handleFocus,
+            onBlur: this._handleBlur,
+            onAnimationStart: this._handleAutoFill
+          })),
+          isLoading && React.createElement(ButtonLoader, null),
+          showToggleIcon && React.createElement(Icon, {
+            icon: this.state.showPassword ? 'eye-slash' : 'eye',
+            className: 'toggle-password',
+            onClick: this._onTogglePassword
+          })
+        ),
+        React.createElement('div', { className: 'bottom-line' }),
+        error && React.createElement(
+          'div',
+          { className: 'error-message' },
+          error
+        ),
+        !error && description && React.createElement(
+          'div',
+          { className: 'input_description' },
+          description
+        )
+      );
+    }
+  }]);
+
+  return Input;
+}(PureComponent);
+
+Input.propTypes = {
+  /** Type of value */
+  type: PropTypes.string,
+  /** Represents the label for each input field */
+  title: PropTypes.string,
+  /** The validation error message */
+  error: PropTypes.string,
+  /** Name associated with each input field */
+  name: PropTypes.string,
+  /** Minimal amount of characters required */
+  min: PropTypes.string,
+  /** Boolean props deciding whether to disable or enable input field */
+  disabled: PropTypes.bool,
+  /** Boolean props deciding whether a field is required to have a value or not */
+  require: PropTypes.bool,
+  /** Optional description text */
+  description: PropTypes.string,
+  /** Placeholder text used on the input */
+  placeholder: PropTypes.string,
+  /** Classnames that should be used on the input */
+  className: PropTypes.string,
+  /** Boolean to show toggle password icon or not */
+  showToggleIcon: PropTypes.bool
+};
+
+Input.defaultProps = {
+  type: 'text',
+  title: '',
+  error: '',
+  name: '',
+  min: '',
+  disabled: false,
+  require: false,
+  description: '',
+  placeholder: '',
+  className: '',
+  showToggleIcon: false
 };
 
-export default InputDispatcher;
+export default React.forwardRef(function (props, ref) {
+  return React.createElement(Input, _extends({}, props, { innerRef: ref }));
+});

package/es/components/InputWrapper/index.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+
+var InputWrapper = function InputWrapper(_ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      disabled = _ref.disabled,
+      require = _ref.require,
+      error = _ref.error,
+      title = _ref.title,
+      hasValue = _ref.hasValue,
+      isFocusing = _ref.isFocusing;
+  return React.createElement(
+    'div',
+    {
+      className: cn('tg_input ' + className, {
+        tg_input_value: hasValue,
+        input_focus: isFocusing,
+        error: error,
+        has_title: title
+      }) },
+    React.createElement(
+      'div',
+      { className: 'input-wrapper' },
+      title && React.createElement(
+        'div',
+        { className: cn('input_title', { 'opa-d5': disabled }) },
+        title + ' ' + (require ? '*' : '')
+      ),
+      children,
+      React.createElement('div', { className: 'bottom-line' }),
+      React.createElement(
+        'div',
+        { className: 'error-message' },
+        error
+      )
+    )
+  );
+};
+
+InputWrapper.propTypes = {
+  /** Determine if select has value */
+  hasValue: PropTypes.bool,
+  /** Determine if select is focuesd */
+  isFocusing: PropTypes.bool,
+  /** Determine if select is disable */
+  disabled: PropTypes.bool,
+  /** Title to show above the select */
+  title: PropTypes.string,
+  /** Error message to display */
+  error: PropTypes.string,
+  /** Determine if the select is required */
+  require: PropTypes.bool,
+  /** Optional className passed in as props */
+  className: PropTypes.string
+};
+
+InputWrapper.defaultProps = {
+  hasValue: false,
+  isFocusing: false,
+  disabled: false,
+  title: '',
+  error: '',
+  require: false,
+  className: ''
+};
+
+export default InputWrapper;

package/es/components/List/ListItem.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import cn from 'classnames';
-import Icon from '../../components/Icon';
 
 var ListItem = function ListItem(_ref) {
   var id = _ref.id,
@@ -24,12 +23,7 @@ var ListItem = function ListItem(_ref) {
           { className: 'info-item' },
           i
         );
-      }),
-      React.createElement(
-        'div',
-        { className: 'info-expand-icon' },
-        React.createElement(Icon, { icon: 'angle-down' })
-      )
+      })
     ),
     detail && React.createElement(
       'div',

package/es/components/Notification.js

@@ -10,7 +10,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
 import React, { Component } from 'react';
 import { CSSTransition } from 'react-transition-group';
-import { FormattedDate, injectIntl } from 'react-intl';
+import { FormattedDate } from 'react-intl';
 import withSwipeListeners from '../lib/withSwipeListeners';
 import classNames from 'classnames';
 import { compose } from 'recompose';
@@ -63,9 +63,9 @@ var Notification = function (_Component) {
           timeout = _props2$timeout === undefined ? 5 : _props2$timeout,
           action = _props2.action,
           defaultAction = _props2.defaultAction,
-          btnText = _props2.btnText,
           icon = _props2.icon,
-          direction = _props2.direction;
+          direction = _props2.direction,
+          btnText = _props2.btnText;
 
 
       return React.createElement(
@@ -162,6 +162,6 @@ var Notification = function (_Component) {
   return Notification;
 }(Component);
 
-var enhance = compose(withSwipeListeners, injectIntl);
+var enhance = compose(withSwipeListeners);
 
 export default enhance(Notification);