tg-core-components 5.4.5-bethard → 5.5.1-master

package/es/components/Select/index.js

@@ -1,69 +1,207 @@
-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; }; }();
 
-import React from 'react';
-import { Select, useId, useValue, useFocus, useTouched, useAutofill, createClassName, statusIcons, flatObj } from '../common';
+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 Icon from '../Icon';
+import InputWrapper from '../InputWrapper';
+import PropTypes from 'prop-types';
 import cn from 'classnames';
 
-var TGSelect = function TGSelect(props) {
-  var select = {
-    id: useId(),
-    value: useValue(props.value),
-    focus: useFocus(),
-    touched: useTouched(),
-    autofill: useAutofill()
-  };
-
-  var _onChange = function _onChange(e) {
-    return props.onChange && props.onChange(e, e.target.value);
-  };
-
-  var _onBlur = function _onBlur(e) {
-    return props.onBlur && props.onBlur(e, e.target.value);
-  };
-
-  var className = createClassName('tg-select', {
-    hasValue: select.value.hasValue,
-    hasLabel: Boolean(props.label),
-    hasFocus: select.focus.hasFocus,
-    hasAutofill: select.autofill.hasAutofill,
-    disabled: props.disabled,
-    status: props.status
-  });
-
-  return React.createElement(
-    'div',
-    { className: cn(props.className, className) },
-    React.createElement(
-      Select,
-      _extends({}, props, flatObj(select), {
-        onChange: function onChange(e) {
-          select.value.onChange(e.target.value);
-          _onChange(e);
-        },
-        onFocus: function onFocus() {
-          select.focus.onFocus();
-          select.touched.onFocus();
-        },
-        onBlur: function onBlur(e) {
-          select.focus.onBlur();
-          _onBlur(e);
-        },
-        leadingLane: [props.icon].filter(function (i) {
-          return i;
-        }),
-        trailingLane: [statusIcons[props.status]].filter(function (i) {
-          return i;
-        }) }),
-      props.children
-    ),
-    React.createElement(
-      'div',
-      { className: 'tg-select__status-text' },
-      props.statusText
-    )
-  );
+var Select = function (_PureComponent) {
+  _inherits(Select, _PureComponent);
+
+  function Select(props) {
+    _classCallCheck(this, Select);
+
+    var _this = _possibleConstructorReturn(this, (Select.__proto__ || Object.getPrototypeOf(Select)).call(this, props));
+
+    _this._generateOptions = function () {
+      var _this$props = _this.props,
+          options = _this$props.options,
+          require = _this$props.require,
+          placeholder = _this$props.placeholder;
+      var isFocusing = _this.state.isFocusing;
+
+
+      if (!options) return false;
+
+      var selectOptions = options.map(function (item, index) {
+        if (Array.isArray(item.value)) {
+          return React.createElement(
+            'optgroup',
+            { label: item.label },
+            item.value.map(function (v, i) {
+              return React.createElement(
+                'option',
+                { key: i, value: v.value },
+                v.label || v
+              );
+            })
+          );
+        }
+
+        return React.createElement(
+          'option',
+          { key: index, value: item.value },
+          item.label || item
+        );
+      });
+
+      if (placeholder) selectOptions.unshift(React.createElement(
+        'option',
+        { key: 'placeholder', disabled: isFocusing && require },
+        placeholder
+      ));
+
+      return selectOptions;
+    };
+
+    _this._handleChange = function (e) {
+      var _this$props2 = _this.props,
+          onChange = _this$props2.onChange,
+          name = _this$props2.name;
+
+      var value = e.currentTarget.value;
+
+      _this.setState({
+        value: value,
+        hasValue: !!value
+      });
+
+      onChange && onChange(e, name, value);
+    };
+
+    _this._handleFocus = function () {
+      _this.setState({
+        isFocusing: true
+      });
+    };
+
+    _this._handleBlur = function () {
+      var onBlur = _this.props.onBlur;
+      var value = _this.state.value;
+
+
+      _this.setState({
+        isFocusing: false
+      });
+
+      onBlur && onBlur(value);
+    };
+
+    _this.state = {
+      isFocusing: false,
+      value: '',
+      hasValue: false
+    };
+    return _this;
+  }
+
+  _createClass(Select, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      var _props = this.props,
+          placeholder = _props.placeholder,
+          options = _props.options;
+
+
+      var value = this.props.value;
+
+      if (!value && !placeholder && options) {
+        value = options[0].value || options[0];
+      }
+
+      this.setState({ value: value, hasValue: !!value });
+    }
+  }, {
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate(prevProps) {
+      if (this.props.value !== prevProps.value) {
+        this.setState({ value: this.props.value, hasValue: !!this.props.value });
+      }
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props2 = this.props,
+          className = _props2.className,
+          title = _props2.title,
+          name = _props2.name,
+          error = _props2.error,
+          disabled = _props2.disabled,
+          require = _props2.require;
+      var _state = this.state,
+          hasValue = _state.hasValue,
+          value = _state.value,
+          isFocusing = _state.isFocusing;
+
+
+      return React.createElement(
+        InputWrapper,
+        {
+          title: title,
+          className: className,
+          hasValue: hasValue,
+          isFocusing: isFocusing,
+          error: error,
+          disabled: disabled,
+          require: require },
+        React.createElement(
+          'select',
+          {
+            disabled: disabled,
+            name: name,
+            value: value,
+            onChange: this._handleChange,
+            onFocus: this._handleFocus,
+            onBlur: this._handleBlur },
+          this._generateOptions()
+        ),
+        React.createElement(
+          'div',
+          { className: cn('select-icon', { 'opa-d5': disabled }) },
+          React.createElement(Icon, { icon: 'angle-down' })
+        )
+      );
+    }
+  }]);
+
+  return Select;
+}(PureComponent);
+
+Select.propTypes = {
+  /** Determine if select is disable */
+  disabled: PropTypes.bool,
+  /** Title to show above the select */
+  title: PropTypes.string,
+  /** Error message to display */
+  error: PropTypes.string,
+  /** Name of the element */
+  name: PropTypes.string,
+  /** Determine if the select is required */
+  require: PropTypes.bool,
+  /** Optional className passed in as props */
+  className: PropTypes.string,
+  /** Placeholder */
+  placeholder: PropTypes.string,
+  /** Manually pick the default selected option */
+  value: PropTypes.string
+};
+
+Select.defaultProps = {
+  disabled: false,
+  title: '',
+  error: '',
+  name: '',
+  require: false,
+  className: '',
+  value: '',
+  placeholder: ''
 };
-TGSelect.Option = Select.Option;
-TGSelect.OptGroup = Select.OptGroup;
 
-export default TGSelect;
+export default Select;

package/es/components/Select/test.js

@@ -0,0 +1,111 @@
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+import React from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+import { act } from 'react-dom/test-utils';
+
+import Select from './index';
+
+var container = null;
+beforeEach(function () {
+  // setup a DOM element as a render target
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+
+afterEach(function () {
+  // cleanup on exiting
+  unmountComponentAtNode(container);
+  container.remove();
+  container = null;
+});
+
+describe('renders with correct options', function () {
+  it('with only options', function () {
+    act(function () {
+      render(React.createElement(Select, { options: ['Male', 'Female'] }), container);
+    });
+    expect([].concat(_toConsumableArray(container.querySelectorAll('option'))).map(function (o) {
+      return o.textContent;
+    }).join(',')).toBe('Male,Female');
+  });
+
+  it('with preset value and placeholder', function () {
+    act(function () {
+      render(React.createElement(Select, {
+        options: ['Male', 'Female'],
+        value: 'Female',
+        placeholder: 'Gender'
+      }), container);
+    });
+    expect([].concat(_toConsumableArray(container.querySelectorAll('option'))).map(function (o) {
+      return o.textContent;
+    }).join(',')).toBe('Gender,Male,Female');
+  });
+});
+
+describe('renders with correct initial value', function () {
+  it('with only options', function () {
+    act(function () {
+      render(React.createElement(Select, { options: ['Male', 'Female'] }), container);
+    });
+    expect(container.querySelector('select').value).toBe('Male');
+  });
+
+  it('with preset value', function () {
+    act(function () {
+      render(React.createElement(Select, { options: ['Male', 'Female'], value: 'Female' }), container);
+    });
+    expect(container.querySelector('select').value).toBe('Female');
+  });
+});
+
+describe('renders with correct placeholder value', function () {
+  it('with placeholder', function () {
+    act(function () {
+      render(React.createElement(Select, { options: ['Male', 'Female'], placeholder: 'Gender' }), container);
+    });
+    expect(container.querySelector('select').value).toBe('Gender');
+  });
+
+  it('with preset value title and placeholder', function () {
+    act(function () {
+      render(React.createElement(Select, {
+        options: ['Male', 'Female'],
+        value: 'Female',
+        title: 'What is your gender',
+        placeholder: 'gender'
+      }), container);
+    });
+    expect(container.querySelector('select').value).toBe('Female');
+  });
+});
+
+describe('renders with correct placeholder value', function () {
+  it('with placeholder and require', function () {
+    act(function () {
+      render(React.createElement(Select, { options: ['Male', 'Female'], placeholder: 'Gender', require: true }), container);
+    });
+    expect(container.querySelector('select').value).toBe('Gender');
+  });
+
+  it('with preset value, title, placeholder and require', function () {
+    act(function () {
+      render(React.createElement(Select, {
+        options: ['Male', 'Female'],
+        value: 'Male',
+        title: 'What is your gender',
+        placeholder: 'gender',
+        require: true
+      }), container);
+    });
+    expect(container.querySelector('select').value).toBe('Male');
+  });
+
+  it('with placeholder and require', function () {
+    act(function () {
+      render(React.createElement(Select, { options: ['Male', 'Female'], placeholder: 'Gender', require: true }), container);
+    });
+    expect(container.querySelector('select').value).toBe('Gender');
+  });
+});

package/es/index.js

@@ -3,6 +3,7 @@ import AcceptUpdatedTaC from './components/AcceptUpdatedTaC';
 import Alert from './components/Alert';
 import Button from './components/Button';
 import ButtonLoader from './components/ButtonLoader';
+import Checkbox from './components/Checkbox';
 import Checklist from './components/Checklist';
 import Icon from './components/Icon';
 import Image from './components/Image';
@@ -20,7 +21,6 @@ import List from './components/List';
 import Translate from './components/Translate';
 import Picture from './components/Picture';
 import Skeleton from './components/Skeleton';
-import AutocompleteInput from './components/AutocompleteInput';
 
 // widgets
 import AccordionWidget from './widgets/AccordionWidget';
@@ -55,4 +55,4 @@ import VerifyAccordionWidget from './widgets/VerifyAccordionWidget';
 // misc
 import countryEmojiFlags from './misc/countryEmojiFlags';
 
-export { AcceptUpdatedTaC, Alert, Button, ButtonLoader, Checklist, Icon, Image, Input, InternalMessagesInbox, Loader, Money, Notification, Radio, Select, Single, Textarea, Uploader, AccordionWidget, AccountDetail, ActivateWidget, Balance, Bonus, Deposit, Withdraw, SignUp, ChangeUsername, ChangePassword, ResetPassword, RequestResetPassword, SignIn, Pagination, Settings, TableWidget, Verify, Subscriptions, CasinoHistoryTable, PaymentHistoryTable, SportsbookHistoryTable, DepositWidgetAccordion, WithdrawWidgetAccordion, ResponsibleGamingAccordion, ResponsibleGamingAccordionSignUp, ResponsibleGamingSingleSignUp, ResponsibleGamingWidget, List, VerifyAccordionWidget, Translate, Picture, countryEmojiFlags, Skeleton, AutocompleteInput };
+export { AcceptUpdatedTaC, Alert, Button, ButtonLoader, Checkbox, Checklist, Icon, Image, Input, InternalMessagesInbox, Loader, Money, Notification, Radio, Select, Single, Textarea, Uploader, AccordionWidget, AccountDetail, ActivateWidget, Balance, Bonus, Deposit, Withdraw, SignUp, ChangeUsername, ChangePassword, ResetPassword, RequestResetPassword, SignIn, Pagination, Settings, TableWidget, Verify, Subscriptions, CasinoHistoryTable, PaymentHistoryTable, SportsbookHistoryTable, DepositWidgetAccordion, WithdrawWidgetAccordion, ResponsibleGamingAccordion, ResponsibleGamingAccordionSignUp, ResponsibleGamingSingleSignUp, ResponsibleGamingWidget, List, VerifyAccordionWidget, Translate, Picture, Skeleton, countryEmojiFlags };

package/es/lib/utils/translate.js

@@ -2,25 +2,18 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 
 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; }
 
-var cache = {};
-
 var translate = function translate(_ref, intl) {
   var id = _ref.id,
       values = _ref.values,
       rest = _objectWithoutProperties(_ref, ['id', 'values']);
 
-  var cacheId = id + (JSON.stringify(values) || '');
-  if (cache[cacheId]) return cache[cacheId];
-
   var g = typeof window !== 'undefined' && window || typeof global !== 'undefined' && global || {};
 
   if (!intl) console.error('Missing intl object for "' + id + '"');
 
   if (g.showTranslations || !intl || !intl.formatMessage) return id;
 
-  var message = intl.formatMessage(_extends({ id: id }, rest), values);
-  cache[cacheId] = message;
-  return message;
+  return intl.formatMessage(_extends({ id: id }, rest), values);
 };
 
 export default translate;

package/es/misc/countryEmojiFlags.js

@@ -93,7 +93,6 @@ export default {
   KI: '🇰🇮',
   KN: '🇰🇳',
   KR: '🇰🇷',
-  KY: '🇰🇾',
   KW: '🇰🇼',
   LA: '🇱🇦',
   LB: '🇱🇧',