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

package/lib/components/Input/BirthdateInput.js

@@ -1,195 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-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 _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _common = require('../common');
-
-var _Translate = require('../Translate');
-
-var _Translate2 = _interopRequireDefault(_Translate);
-
-var _translate = require('../../lib/utils/translate');
-
-var _translate2 = _interopRequireDefault(_translate);
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _reactIntl = require('react-intl');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var pad = function pad(num) {
-  return ('' + num).length === 1 ? '0' + num : num;
-};
-var yearRange = new Array(100).fill(null, 0, 100).map(function (y, i) {
-  return new Date().getFullYear() - 18 - i;
-});
-var monthRange = new Array(12).fill(null, 0, 12).map(function (m, i) {
-  return i + 1;
-});
-var dayRange = new Array(31).fill(null, 0, 31).map(function (d, i) {
-  return i + 1;
-});
-
-var BirthdateInput = function BirthdateInput(props) {
-  var intl = (0, _reactIntl.useIntl)();
-
-  var yearInput = {
-    id: (0, _common.useId)(),
-    value: (0, _common.useValue)(props.value.split('/')[0]),
-    focus: (0, _common.useFocus)()
-  };
-
-  var monthInput = {
-    id: (0, _common.useId)(),
-    value: (0, _common.useValue)(props.value.split('/')[1]),
-    focus: (0, _common.useFocus)()
-  };
-
-  var dayInput = {
-    id: (0, _common.useId)(),
-    value: (0, _common.useValue)(props.value.split('/')[2]),
-    focus: (0, _common.useFocus)()
-  };
-
-  var createValue = function createValue() {
-    var _Object$values;
-
-    var id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-    var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-    return Object.values((_Object$values = {}, _defineProperty(_Object$values, yearInput.id, yearInput.value.value), _defineProperty(_Object$values, monthInput.id, monthInput.value.value), _defineProperty(_Object$values, dayInput.id, dayInput.value.value), _defineProperty(_Object$values, id, value), _Object$values)).join('/');
-  };
-
-  var _onChange = function _onChange(e) {
-    return props.onChange && props.onChange(e, createValue(e.target.id, e.target.value));
-  };
-
-  var _onBlur = function _onBlur(e) {
-    return props.onBlur && props.onBlur(e, createValue(e.target.id, e.target.value));
-  };
-
-  var inputs = [yearInput, monthInput, dayInput];
-  var className = (0, _common.createClassName)('tg-birthdate-input', {
-    hasValue: inputs.some(function (i) {
-      return i.value.hasValue;
-    }),
-    hasFocus: inputs.some(function (i) {
-      return i.focus.hasFocus;
-    }),
-    status: props.status
-  });
-
-  return _react2.default.createElement(
-    'div',
-    { className: (0, _classnames2.default)(props.className, className) },
-    _react2.default.createElement(
-      'label',
-      { className: 'tg-birthdate-input__label' },
-      props.label
-    ),
-    _react2.default.createElement(
-      _common.Select,
-      _extends({}, (0, _common.flatObj)(yearInput), {
-        autoFocus: props.autoFocus && !yearInput.value.hasValue,
-        name: props.name + '_year',
-        label: _react2.default.createElement(_Translate2.default, { id: 'label.year-of-birth', defaultMessage: 'Year' }),
-        status: props.status,
-        onChange: function onChange(e) {
-          yearInput.value.onChange(e.target.value);
-          _onChange(e);
-        },
-        onBlur: function onBlur(e) {
-          yearInput.focus.onBlur();
-          _onBlur(e);
-        } }),
-      !yearInput.value.hasValue && _react2.default.createElement(
-        _common.Select.Option,
-        { value: '', selected: true, disabled: true },
-        (0, _translate2.default)({ id: 'label.year-of-birth', defaultMessage: 'Year' }, intl)
-      ),
-      yearRange.map(function (y) {
-        return _react2.default.createElement(
-          _common.Select.Option,
-          { key: y, value: y },
-          y
-        );
-      })
-    ),
-    _react2.default.createElement(
-      _common.Select,
-      _extends({}, (0, _common.flatObj)(monthInput), {
-        autoFocus: props.autoFocus && yearInput.value.hasValue && !monthInput.value.hasValue,
-        name: props.name + '_month',
-        label: _react2.default.createElement(_Translate2.default, { id: 'label.month-of-birth', defaultMessage: 'Month' }),
-        status: props.status,
-        onChange: function onChange(e) {
-          monthInput.value.onChange(e.target.value);
-          _onChange(e);
-        },
-        onBlur: function onBlur(e) {
-          monthInput.focus.onBlur();
-          _onBlur(e);
-        } }),
-      !monthInput.value.hasValue && _react2.default.createElement(
-        _common.Select.Option,
-        { value: '', selected: true, disabled: true },
-        (0, _translate2.default)({ id: 'label.month-of-birth', defaultMessage: 'Month' }, intl)
-      ),
-      monthRange.map(function (m) {
-        return _react2.default.createElement(
-          _common.Select.Option,
-          { key: m, value: pad(m) },
-          m
-        );
-      })
-    ),
-    _react2.default.createElement(
-      _common.Select,
-      _extends({}, (0, _common.flatObj)(dayInput), {
-        autoFocus: props.autoFocus && yearInput.value.hasValue && monthInput.value.hasValue,
-        name: props.name + '_day',
-        label: _react2.default.createElement(_Translate2.default, { id: 'label.day-of-birth', defaultMessage: 'Day' }),
-        status: props.status,
-        onChange: function onChange(e) {
-          dayInput.value.onChange(e.target.value);
-          _onChange(e);
-        },
-        onBlur: function onBlur(e) {
-          dayInput.focus.onBlur();
-          _onBlur(e);
-        } }),
-      !dayInput.value.hasValue && _react2.default.createElement(
-        _common.Select.Option,
-        { value: '', selected: true, disabled: true },
-        (0, _translate2.default)({ id: 'label.day-of-birth', defaultMessage: 'Day' }, intl)
-      ),
-      dayRange.map(function (d) {
-        return _react2.default.createElement(
-          _common.Select.Option,
-          { key: d, value: pad(d) },
-          d
-        );
-      })
-    ),
-    _react2.default.createElement(_common.Input, { type: 'hidden', name: props.name, value: createValue() }),
-    _react2.default.createElement(
-      'div',
-      { className: 'tg-birthdate-input__status-text' },
-      props.statusText
-    )
-  );
-};
-
-exports.default = BirthdateInput;

package/lib/components/Input/Checkbox.js

@@ -1,65 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-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 _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _common = require('../common');
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var TGCheckbox = function TGCheckbox(props) {
-  var checkbox = {
-    id: (0, _common.useId)(),
-    value: (0, _common.useValue)(props.value),
-    focus: (0, _common.useFocus)(),
-    touched: (0, _common.useTouched)(),
-    autofill: (0, _common.useAutofill)()
-  };
-
-  var _onChange = function _onChange(e) {
-    return props.onChange && props.onChange(e, e.target.checked ? 'true' : '');
-  };
-
-  var className = (0, _common.createClassName)('tg-checkbox', {
-    hasValue: checkbox.value.hasValue,
-    hasLabel: Boolean(props.label),
-    hasFocus: checkbox.focus.hasFocus,
-    hasTouched: checkbox.touched.hasTouched,
-    hasAutofill: checkbox.autofill.hasAutofill,
-    disabled: props.disabled,
-    status: props.status
-  });
-
-  return _react2.default.createElement(
-    'div',
-    { className: (0, _classnames2.default)(props.className, className) },
-    _react2.default.createElement(_common.Checkbox, _extends({}, props, (0, _common.flatObj)(checkbox), {
-      onChange: function onChange(e) {
-        checkbox.value.onChange(e.target.checked ? 'true' : '');
-        _onChange(e);
-      },
-      onFocus: function onFocus() {
-        checkbox.focus.onFocus();
-        checkbox.touched.onFocus();
-      }
-    })),
-    _react2.default.createElement(
-      'div',
-      { className: 'tg-checkbox__status-text' },
-      props.statusText
-    )
-  );
-};
-
-exports.default = TGCheckbox;

package/lib/components/Input/Input.js

@@ -1,87 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-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 _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _common = require('../common');
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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 TGInput = function TGInput(_ref) {
-  var icon = _ref.icon,
-      props = _objectWithoutProperties(_ref, ['icon']);
-
-  var input = {
-    id: (0, _common.useId)(),
-    value: (0, _common.useValue)(props.value),
-    focus: (0, _common.useFocus)(),
-    touched: (0, _common.useTouched)(),
-    autofill: (0, _common.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 = (0, _common.createClassName)('tg-input', {
-    hasValue: input.value.hasValue,
-    hasLabel: Boolean(props.label),
-    hasFocus: input.focus.hasFocus,
-    hasTouched: input.touched.hasTouched,
-    hasAutofill: input.autofill.hasAutofill,
-    disabled: props.disabled,
-    status: props.status
-  });
-
-  return _react2.default.createElement(
-    'div',
-    { className: (0, _classnames2.default)(props.className, className) },
-    _react2.default.createElement(_common.Input, _extends({}, props, (0, _common.flatObj)(input), {
-      onChange: function onChange(e) {
-        if (typeof props.transform === 'function') {
-          e.target.value = props.transform(e.target.value);
-        }
-        input.value.onChange(e.target.value);
-        _onChange(e);
-      },
-      onFocus: function onFocus() {
-        input.focus.onFocus();
-        input.touched.onFocus();
-      },
-      onBlur: function onBlur(e) {
-        input.focus.onBlur();
-        _onBlur(e);
-      },
-      leadingLane: [icon].filter(function (i) {
-        return i;
-      }),
-      trailingLane: [_common.statusIcons[props.status]].filter(function (i) {
-        return i;
-      })
-    })),
-    _react2.default.createElement(
-      'div',
-      { className: 'tg-input__status-text' },
-      props.statusText
-    )
-  );
-};
-
-exports.default = TGInput;

package/lib/components/Input/PasswordInput.js

@@ -1,101 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-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 _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _Icon = require('../Icon');
-
-var _Icon2 = _interopRequireDefault(_Icon);
-
-var _common = require('../common');
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var PasswordInput = function PasswordInput(props) {
-  var input = {
-    id: (0, _common.useId)(),
-    value: (0, _common.useValue)(props.value),
-    focus: (0, _common.useFocus)(),
-    touched: (0, _common.useTouched)(),
-    type: (0, _common.useType)(props.type),
-    autofill: (0, _common.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 togglePasswordVisibility = function togglePasswordVisibility() {
-    return input.type.setType(input.type.type === 'password' ? 'text' : 'password');
-  };
-
-  var icons = {
-    password: _react2.default.createElement(_Icon2.default, {
-      icon: 'eye-slash',
-      className: 'tg-password-input__toggle',
-      onClick: togglePasswordVisibility
-    }),
-    text: _react2.default.createElement(_Icon2.default, {
-      icon: 'eye',
-      className: 'tg-password-input__toggle',
-      onClick: togglePasswordVisibility
-    })
-  };
-
-  var className = (0, _common.createClassName)('tg-password-input', {
-    hasValue: input.value.hasValue,
-    hasLabel: Boolean(props.label),
-    hasFocus: input.focus.hasFocus,
-    hasTouched: input.touched.hasTouched,
-    hasAutofill: input.autofill.hasAutofill,
-    disabled: props.disabled,
-    status: props.status
-  });
-
-  return _react2.default.createElement(
-    'div',
-    { className: (0, _classnames2.default)(props.className, className) },
-    _react2.default.createElement(_common.Input, _extends({}, props, (0, _common.flatObj)(input), {
-      onChange: function onChange(e) {
-        input.value.onChange(e.target.value);
-        _onChange(e);
-      },
-      onFocus: function onFocus() {
-        input.focus.onFocus();
-        input.touched.onFocus();
-      },
-      onBlur: function onBlur(e) {
-        input.focus.onBlur();
-        _onBlur(e);
-      },
-      leadingLane: [props.icon].filter(function (i) {
-        return i;
-      }),
-      trailingLane: [icons[input.type.type], _common.statusIcons[props.status]].filter(function (i) {
-        return i;
-      })
-    })),
-    _react2.default.createElement(
-      'div',
-      { className: 'tg-password-input__status-text' },
-      props.statusText
-    )
-  );
-};
-
-exports.default = PasswordInput;

package/lib/components/Input/PhoneNumberInput.js

@@ -1,130 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-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 _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _common = require('../common');
-
-var _Translate = require('../Translate');
-
-var _Translate2 = _interopRequireDefault(_Translate);
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var PhoneNumberInput = function PhoneNumberInput(props) {
-  var val = props.value || '';
-
-  var callingCodeValue = ((props.callingCodes || []).slice().sort(function (a, b) {
-    return b.value - a.value;
-  }).find(function (c) {
-    return val.startsWith(c.value);
-  }) || (props.callingCodes || [])[0] || {}).value || '';
-  var phoneNumberValue = callingCodeValue ? val.replace(new RegExp('^' + callingCodeValue), '').replace(/^0*/, '') : val;
-
-  var callingCodeSelect = {
-    id: (0, _common.useId)(),
-    value: (0, _common.useValue)(callingCodeValue),
-    focus: (0, _common.useFocus)()
-  };
-  var phoneNumberInput = {
-    id: (0, _common.useId)(),
-    value: (0, _common.useValue)(phoneNumberValue),
-    focus: (0, _common.useFocus)()
-  };
-
-  var createValue = function createValue() {
-    var _Object$values;
-
-    var id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-    var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-    return Object.values((_Object$values = {}, _defineProperty(_Object$values, callingCodeSelect.id, callingCodeSelect.value.value), _defineProperty(_Object$values, phoneNumberInput.id, phoneNumberInput.value.value), _defineProperty(_Object$values, id, value), _Object$values)).join('');
-  };
-
-  var _onChange = function _onChange(e) {
-    return props.onChange && props.onChange(e, createValue(e.target.id, e.target.value));
-  };
-
-  var _onBlur = function _onBlur(e) {
-    return props.onBlur && props.onBlur(e, createValue(e.target.id, e.target.value));
-  };
-
-  var inputs = [callingCodeSelect, phoneNumberInput];
-  var className = (0, _common.createClassName)('tg-phonenumber-input', {
-    hasValue: inputs.some(function (i) {
-      return i.value.hasValue;
-    }),
-    hasFocus: inputs.some(function (i) {
-      return i.focus.hasFocus;
-    }),
-    status: props.status
-  });
-
-  return _react2.default.createElement(
-    'div',
-    { className: (0, _classnames2.default)(props.className, className) },
-    callingCodeSelect.value.hasValue && _react2.default.createElement(
-      _common.Select,
-      _extends({}, (0, _common.flatObj)(callingCodeSelect), {
-        name: props.name + '_calling-code',
-        label: _react2.default.createElement(_Translate2.default, { id: 'label.calling-code', defaultMessage: 'Calling code' }),
-        onChange: function onChange(e) {
-          callingCodeSelect.value.onChange(e.target.value);
-          _onChange(e);
-        },
-        onBlur: function onBlur(e) {
-          callingCodeSelect.focus.onBlur();
-          _onBlur(e);
-        },
-        status: props.status }),
-      (props.callingCodes || []).map(function (c, i) {
-        return _react2.default.createElement(
-          _common.Select.Option,
-          { key: c.value + i, value: c.value },
-          c.label
-        );
-      })
-    ),
-    _react2.default.createElement(_common.Input, _extends({}, (0, _common.flatObj)(phoneNumberInput), {
-      autoFocus: props.autoFocus,
-      type: 'tel',
-      name: props.name + '_number',
-      label: _react2.default.createElement(_Translate2.default, {
-        id: 'label.mobile_number',
-        defaultMessage: 'MobilePhoneNumber'
-      }),
-      onChange: function onChange(e) {
-        phoneNumberInput.value.onChange(e.target.value);
-        _onChange(e);
-      },
-      onBlur: function onBlur(e) {
-        phoneNumberInput.focus.onBlur();
-        _onBlur(e);
-      },
-      status: props.status,
-      trailingLane: [_common.statusIcons[props.status]].filter(function (i) {
-        return i;
-      })
-    })),
-    _react2.default.createElement(_common.Input, { type: 'hidden', name: props.name, value: createValue() }),
-    _react2.default.createElement(
-      'div',
-      { className: 'tg-phonenumber-input__status-text' },
-      props.statusText
-    )
-  );
-};
-
-exports.default = PhoneNumberInput;

package/lib/components/Input/input.test.js

@@ -1,89 +0,0 @@
-'use strict';
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _react3 = require('@testing-library/react');
-
-require('@testing-library/jest-dom/extend-expect');
-
-var _index = require('./index.js');
-
-var _index2 = _interopRequireDefault(_index);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }
-
-test('text has value and associated label', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-  var input;
-  return regeneratorRuntime.wrap(function _callee$(_context) {
-    while (1) {
-      switch (_context.prev = _context.next) {
-        case 0:
-          (0, _react3.render)(_react2.default.createElement(_index2.default, { type: 'text', label: 'input label', value: '1337' }));
-          input = _react3.screen.getByLabelText('input label');
-
-          _react3.fireEvent.click(input);
-          expect(input).toHaveValue('1337');
-
-        case 4:
-        case 'end':
-          return _context.stop();
-      }
-    }
-  }, _callee, undefined);
-})));
-
-test('text input has placeholder', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-  var input;
-  return regeneratorRuntime.wrap(function _callee2$(_context2) {
-    while (1) {
-      switch (_context2.prev = _context2.next) {
-        case 0:
-          (0, _react3.render)(_react2.default.createElement(_index2.default, {
-            type: 'text',
-            label: 'input label',
-            placeholder: 'Placeholder text',
-            value: '1337'
-          }));
-          input = _react3.screen.getByPlaceholderText('Placeholder text');
-
-          expect(input).toHaveValue('1337');
-
-        case 3:
-        case 'end':
-          return _context2.stop();
-      }
-    }
-  }, _callee2, undefined);
-})));
-
-test('text input has correct class names', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
-  var input;
-  return regeneratorRuntime.wrap(function _callee3$(_context3) {
-    while (1) {
-      switch (_context3.prev = _context3.next) {
-        case 0:
-          (0, _react3.render)(_react2.default.createElement(_index2.default, {
-            type: 'text',
-            label: 'input label',
-            placeholder: 'Placeholder text',
-            value: '1337'
-          }));
-          input = _react3.screen.getByLabelText('input label');
-
-          expect(input.parentElement.parentElement).toHaveClass('DefaultInput');
-          _react3.fireEvent.click(input);
-          (0, _react3.waitFor)(function () {
-            return expect(input.parentElement).toHaveClass('Input--has-focus');
-          });
-
-        case 5:
-        case 'end':
-          return _context3.stop();
-      }
-    }
-  }, _callee3, undefined);
-})));