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

package/es/components/AutocompleteInput/index.js

@@ -1,104 +0,0 @@
-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; };
-
-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; }
-
-import React from 'react';
-import { Input, useId, useValue, useFocus, useTouched, useAutofill, createClassName, statusIcons, flatObj } from '../common';
-import cn from 'classnames';
-
-var AutocompleteSuggestion = function AutocompleteSuggestion(_ref) {
-  var children = _ref.children,
-      value = _ref.value,
-      _onClick = _ref.onClick,
-      selected = _ref.selected,
-      classNames = _ref.classNames,
-      rest = _objectWithoutProperties(_ref, ['children', 'value', 'onClick', 'selected', 'classNames']);
-
-  return React.createElement(
-    'div',
-    _extends({}, rest, {
-      className: cn(classNames, 'tg-autocomplete-input__suggestions__suggestion', {
-        'tg-autocomplete-input__suggestions__suggestion--selected': selected
-      }),
-      onClick: function onClick() {
-        _onClick(value);
-      } }),
-    children
-  );
-};
-
-var AutocompleteInput = function AutocompleteInput(_ref2) {
-  var icon = _ref2.icon,
-      props = _objectWithoutProperties(_ref2, ['icon']);
-
-  var input = {
-    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-autocomplete-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 React.createElement(
-    'div',
-    { className: cn(props.className, className) },
-    React.createElement(Input, _extends({}, props, flatObj(input), {
-      children: null,
-      autoComplete: 'off',
-      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) {
-        setTimeout(function () {
-          input.focus.onBlur();
-          _onBlur(e);
-        }, 500);
-      },
-      leadingLane: [icon].filter(function (i) {
-        return i;
-      }),
-      trailingLane: [statusIcons[props.status]].filter(function (i) {
-        return i;
-      })
-    })),
-    props.children.length > 0 && input.focus.hasFocus && React.createElement(
-      'div',
-      { className: 'tg-autocomplete-input__suggestions' },
-      props.children
-    ),
-    React.createElement(
-      'div',
-      { className: 'tg-autocomplete-input__status-text' },
-      props.statusText
-    )
-  );
-};
-
-AutocompleteInput.Suggestion = AutocompleteSuggestion;
-
-export default AutocompleteInput;

package/es/components/Input/BirthdateInput.js

@@ -1,174 +0,0 @@
-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; };
-
-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; }
-
-import React from 'react';
-import { Select, Input, useId, useValue, useFocus, createClassName, flatObj } from '../common';
-import Translate from '../Translate';
-import translate from '../../lib/utils/translate';
-import cn from 'classnames';
-import { useIntl } from 'react-intl';
-
-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 = useIntl();
-
-  var yearInput = {
-    id: useId(),
-    value: useValue(props.value.split('/')[0]),
-    focus: useFocus()
-  };
-
-  var monthInput = {
-    id: useId(),
-    value: useValue(props.value.split('/')[1]),
-    focus: useFocus()
-  };
-
-  var dayInput = {
-    id: useId(),
-    value: useValue(props.value.split('/')[2]),
-    focus: 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 = 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 React.createElement(
-    'div',
-    { className: cn(props.className, className) },
-    React.createElement(
-      'label',
-      { className: 'tg-birthdate-input__label' },
-      props.label
-    ),
-    React.createElement(
-      Select,
-      _extends({}, flatObj(yearInput), {
-        autoFocus: props.autoFocus && !yearInput.value.hasValue,
-        name: props.name + '_year',
-        label: React.createElement(Translate, { 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 && React.createElement(
-        Select.Option,
-        { value: '', selected: true, disabled: true },
-        translate({ id: 'label.year-of-birth', defaultMessage: 'Year' }, intl)
-      ),
-      yearRange.map(function (y) {
-        return React.createElement(
-          Select.Option,
-          { key: y, value: y },
-          y
-        );
-      })
-    ),
-    React.createElement(
-      Select,
-      _extends({}, flatObj(monthInput), {
-        autoFocus: props.autoFocus && yearInput.value.hasValue && !monthInput.value.hasValue,
-        name: props.name + '_month',
-        label: React.createElement(Translate, { 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 && React.createElement(
-        Select.Option,
-        { value: '', selected: true, disabled: true },
-        translate({ id: 'label.month-of-birth', defaultMessage: 'Month' }, intl)
-      ),
-      monthRange.map(function (m) {
-        return React.createElement(
-          Select.Option,
-          { key: m, value: pad(m) },
-          m
-        );
-      })
-    ),
-    React.createElement(
-      Select,
-      _extends({}, flatObj(dayInput), {
-        autoFocus: props.autoFocus && yearInput.value.hasValue && monthInput.value.hasValue,
-        name: props.name + '_day',
-        label: React.createElement(Translate, { 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 && React.createElement(
-        Select.Option,
-        { value: '', selected: true, disabled: true },
-        translate({ id: 'label.day-of-birth', defaultMessage: 'Day' }, intl)
-      ),
-      dayRange.map(function (d) {
-        return React.createElement(
-          Select.Option,
-          { key: d, value: pad(d) },
-          d
-        );
-      })
-    ),
-    React.createElement(Input, { type: 'hidden', name: props.name, value: createValue() }),
-    React.createElement(
-      'div',
-      { className: 'tg-birthdate-input__status-text' },
-      props.statusText
-    )
-  );
-};
-
-export default BirthdateInput;

package/es/components/Input/Checkbox.js

@@ -1,51 +0,0 @@
-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; };
-
-import React from 'react';
-import { Checkbox, useId, useValue, useFocus, useTouched, useAutofill, createClassName, flatObj } from '../common';
-import cn from 'classnames';
-
-var TGCheckbox = function TGCheckbox(props) {
-  var checkbox = {
-    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.checked ? 'true' : '');
-  };
-
-  var className = 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 React.createElement(
-    'div',
-    { className: cn(props.className, className) },
-    React.createElement(Checkbox, _extends({}, props, flatObj(checkbox), {
-      onChange: function onChange(e) {
-        checkbox.value.onChange(e.target.checked ? 'true' : '');
-        _onChange(e);
-      },
-      onFocus: function onFocus() {
-        checkbox.focus.onFocus();
-        checkbox.touched.onFocus();
-      }
-    })),
-    React.createElement(
-      'div',
-      { className: 'tg-checkbox__status-text' },
-      props.statusText
-    )
-  );
-};
-
-export default TGCheckbox;

package/es/components/Input/Input.js

@@ -1,73 +0,0 @@
-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; };
-
-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; }
-
-import React from 'react';
-import { Input, useId, useValue, useFocus, useTouched, useAutofill, createClassName, statusIcons, flatObj } from '../common';
-import cn from 'classnames';
-
-var TGInput = function TGInput(_ref) {
-  var icon = _ref.icon,
-      props = _objectWithoutProperties(_ref, ['icon']);
-
-  var input = {
-    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-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 React.createElement(
-    'div',
-    { className: cn(props.className, className) },
-    React.createElement(Input, _extends({}, props, 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: [statusIcons[props.status]].filter(function (i) {
-        return i;
-      })
-    })),
-    React.createElement(
-      'div',
-      { className: 'tg-input__status-text' },
-      props.statusText
-    )
-  );
-};
-
-export default TGInput;

package/es/components/Input/PasswordInput.js

@@ -1,84 +0,0 @@
-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; };
-
-import React from 'react';
-import Icon from '../Icon';
-import { Input, useId, useValue, useFocus, useTouched, useType, createClassName, statusIcons, useAutofill, flatObj } from '../common';
-import cn from 'classnames';
-
-var PasswordInput = function PasswordInput(props) {
-  var input = {
-    id: useId(),
-    value: useValue(props.value),
-    focus: useFocus(),
-    touched: useTouched(),
-    type: useType(props.type),
-    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 togglePasswordVisibility = function togglePasswordVisibility() {
-    return input.type.setType(input.type.type === 'password' ? 'text' : 'password');
-  };
-
-  var icons = {
-    password: React.createElement(Icon, {
-      icon: 'eye-slash',
-      className: 'tg-password-input__toggle',
-      onClick: togglePasswordVisibility
-    }),
-    text: React.createElement(Icon, {
-      icon: 'eye',
-      className: 'tg-password-input__toggle',
-      onClick: togglePasswordVisibility
-    })
-  };
-
-  var className = 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 React.createElement(
-    'div',
-    { className: cn(props.className, className) },
-    React.createElement(Input, _extends({}, props, 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], statusIcons[props.status]].filter(function (i) {
-        return i;
-      })
-    })),
-    React.createElement(
-      'div',
-      { className: 'tg-password-input__status-text' },
-      props.statusText
-    )
-  );
-};
-
-export default PasswordInput;

package/es/components/Input/PhoneNumberInput.js

@@ -1,113 +0,0 @@
-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; };
-
-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; }
-
-import React from 'react';
-import { Input, Select, useId, useValue, useFocus, createClassName, statusIcons, flatObj } from '../common';
-import Translate from '../Translate';
-import cn from 'classnames';
-
-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: useId(),
-    value: useValue(callingCodeValue),
-    focus: useFocus()
-  };
-  var phoneNumberInput = {
-    id: useId(),
-    value: useValue(phoneNumberValue),
-    focus: 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 = 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 React.createElement(
-    'div',
-    { className: cn(props.className, className) },
-    callingCodeSelect.value.hasValue && React.createElement(
-      Select,
-      _extends({}, flatObj(callingCodeSelect), {
-        name: props.name + '_calling-code',
-        label: React.createElement(Translate, { 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 React.createElement(
-          Select.Option,
-          { key: c.value + i, value: c.value },
-          c.label
-        );
-      })
-    ),
-    React.createElement(Input, _extends({}, flatObj(phoneNumberInput), {
-      autoFocus: props.autoFocus,
-      type: 'tel',
-      name: props.name + '_number',
-      label: React.createElement(Translate, {
-        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: [statusIcons[props.status]].filter(function (i) {
-        return i;
-      })
-    })),
-    React.createElement(Input, { type: 'hidden', name: props.name, value: createValue() }),
-    React.createElement(
-      'div',
-      { className: 'tg-phonenumber-input__status-text' },
-      props.statusText
-    )
-  );
-};
-
-export default PhoneNumberInput;

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

@@ -1,80 +0,0 @@
-var _this = this;
-
-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"); }); }; }
-
-import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-import Input from './index.js';
-
-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:
-          render(React.createElement(Input, { type: 'text', label: 'input label', value: '1337' }));
-          input = screen.getByLabelText('input label');
-
-          fireEvent.click(input);
-          expect(input).toHaveValue('1337');
-
-        case 4:
-        case 'end':
-          return _context.stop();
-      }
-    }
-  }, _callee, _this);
-})));
-
-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:
-          render(React.createElement(Input, {
-            type: 'text',
-            label: 'input label',
-            placeholder: 'Placeholder text',
-            value: '1337'
-          }));
-          input = screen.getByPlaceholderText('Placeholder text');
-
-          expect(input).toHaveValue('1337');
-
-        case 3:
-        case 'end':
-          return _context2.stop();
-      }
-    }
-  }, _callee2, _this);
-})));
-
-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:
-          render(React.createElement(Input, {
-            type: 'text',
-            label: 'input label',
-            placeholder: 'Placeholder text',
-            value: '1337'
-          }));
-          input = screen.getByLabelText('input label');
-
-          expect(input.parentElement.parentElement).toHaveClass('DefaultInput');
-          fireEvent.click(input);
-          waitFor(function () {
-            return expect(input.parentElement).toHaveClass('Input--has-focus');
-          });
-
-        case 5:
-        case 'end':
-          return _context3.stop();
-      }
-    }
-  }, _callee3, _this);
-})));