tg-core-components 5.2.1-history-time-label.0 → 5.3.0-master.1

package/es/components/Input/PhoneNumberInput.js

@@ -1,110 +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 || []).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), {
-      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);
-})));

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

@@ -1,100 +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 'tg-core-components';
-
-test('input has title', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-  var _render, container, label;
-
-  return regeneratorRuntime.wrap(function _callee$(_context) {
-    while (1) {
-      switch (_context.prev = _context.next) {
-        case 0:
-          _render = render(React.createElement(Input, { type: 'text', title: 'input label', value: '1337' })), container = _render.container;
-          label = container.querySelector('.input_title');
-
-          expect(label).toBeInTheDocument();
-
-        case 3:
-        case 'end':
-          return _context.stop();
-      }
-    }
-  }, _callee, _this);
-})));
-
-test('input has correct value', _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', title: 'input label', value: '1337' }));
-          input = screen.getByDisplayValue('1337');
-
-          expect(input).toHaveValue('1337');
-
-        case 3:
-        case 'end':
-          return _context2.stop();
-      }
-    }
-  }, _callee2, _this);
-})));
-
-test('input shows error message', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
-  var _render2, container, errorMessage;
-
-  return regeneratorRuntime.wrap(function _callee3$(_context3) {
-    while (1) {
-      switch (_context3.prev = _context3.next) {
-        case 0:
-          _render2 = render(React.createElement(Input, {
-            type: 'text',
-            title: 'input label',
-            value: '1337',
-            error: 'Very bad error.'
-          })), container = _render2.container;
-          errorMessage = container.querySelector('.error-message');
-
-          expect(errorMessage).toBeInTheDocument();
-
-        case 3:
-        case 'end':
-          return _context3.stop();
-      }
-    }
-  }, _callee3, _this);
-})));
-
-test('input shows toggle icon', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
-  var _render3, container, input, toggle;
-
-  return regeneratorRuntime.wrap(function _callee4$(_context4) {
-    while (1) {
-      switch (_context4.prev = _context4.next) {
-        case 0:
-          _render3 = render(React.createElement(Input, { type: 'text', title: 'input label', value: '1337', showToggleIcon: true })), container = _render3.container;
-          input = container.querySelector('input[type=text]');
-          toggle = container.querySelector('.toggle-password.fa.fa-eye');
-
-          expect(input).toBeInTheDocument();
-          expect(toggle).toBeInTheDocument();
-
-          fireEvent.click(toggle);
-          waitFor(function () {
-            var input = container.querySelector('input[type=asdd]');
-            expect(input).toBeInTheDocument();
-          });
-
-        case 7:
-        case 'end':
-          return _context4.stop();
-      }
-    }
-  }, _callee4, _this);
-})));

package/es/components/common.js

@@ -1,339 +0,0 @@
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
-
-var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
-
-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; }
-
-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, { useMemo, useState, useEffect, useLayoutEffect, useRef } from 'react';
-import Icon from './Icon';
-import ButtonLoader from './ButtonLoader';
-import cn from 'classnames';
-
-export var statusIcons = {
-  success: React.createElement(Icon, { icon: 'check-circle', className: 'SuccessIcon' }),
-  failure: React.createElement(Icon, { icon: 'exclamation-circle', className: 'FailureIcon' }),
-  loading: React.createElement(ButtonLoader, null)
-};
-
-var Input = function Input(_ref) {
-  var label = _ref.label,
-      hasValue = _ref.hasValue,
-      hasFocus = _ref.hasFocus,
-      hasTouched = _ref.hasTouched,
-      hasAutofill = _ref.hasAutofill,
-      status = _ref.status,
-      leadingLane = _ref.leadingLane,
-      trailingLane = _ref.trailingLane,
-      rest = _objectWithoutProperties(_ref, ['label', 'hasValue', 'hasFocus', 'hasTouched', 'hasAutofill', 'status', 'leadingLane', 'trailingLane']);
-
-  var className = createClassName('Input', {
-    hasLabel: Boolean(label),
-    hasValue: hasValue,
-    hasFocus: hasFocus,
-    hasTouched: hasTouched,
-    hasAutofill: hasAutofill,
-    disabled: rest.disabled,
-    status: status,
-    type: rest.type
-  });
-  var leadingLaneRef = useRef();
-  var leadingLaneWidth = useRefWidth(leadingLaneRef);
-  var trailingLaneRef = useRef();
-  var trailingLaneWidth = useRefWidth(trailingLaneRef);
-  return React.createElement(
-    'div',
-    {
-      className: className,
-      style: {
-        '--leading-lane-width': leadingLaneWidth + 'px',
-        '--trailing-lane-width': trailingLaneWidth + 'px'
-      } },
-    React.createElement('input', _extends({}, rest, {
-      type: rest.type || 'text',
-      className: 'Input__input',
-      name: rest.name || rest.id,
-      ref: rest.setRef
-    })),
-    React.createElement(
-      'label',
-      { className: 'Input__label', htmlFor: rest.id },
-      label
-    ),
-    React.createElement(
-      'div',
-      { className: 'Input__leading-lane', ref: leadingLaneRef },
-      leadingLane
-    ),
-    React.createElement(
-      'div',
-      { className: 'Input__trailing-lane', ref: trailingLaneRef },
-      trailingLane
-    ),
-    React.createElement('div', {
-      className: cn('Input__status-line', {
-        'Input__status-line--active': status === 'failure' || status === 'success' || hasFocus
-      })
-    })
-  );
-};
-
-export { Input };
-var Select = function Select(_ref2) {
-  var label = _ref2.label,
-      hasValue = _ref2.hasValue,
-      hasFocus = _ref2.hasFocus,
-      hasTouched = _ref2.hasTouched,
-      hasAutofill = _ref2.hasAutofill,
-      status = _ref2.status,
-      children = _ref2.children,
-      leadingLane = _ref2.leadingLane,
-      trailingLane = _ref2.trailingLane,
-      rest = _objectWithoutProperties(_ref2, ['label', 'hasValue', 'hasFocus', 'hasTouched', 'hasAutofill', 'status', 'children', 'leadingLane', 'trailingLane']);
-
-  var className = createClassName('Select', {
-    hasLabel: Boolean(label),
-    hasValue: hasValue,
-    hasFocus: hasFocus,
-    hasTouched: hasTouched,
-    hasAutofill: hasAutofill,
-    disabled: rest.disabled,
-    status: status,
-    type: rest.type
-  });
-  var leadingLaneRef = useRef();
-  var leadingLaneWidth = useRefWidth(leadingLaneRef);
-  var trailingLaneRef = useRef();
-  var trailingLaneWidth = useRefWidth(leadingLaneRef);
-  return React.createElement(
-    'div',
-    {
-      className: className,
-      style: {
-        '--leading-lane-width': leadingLaneWidth + 'px',
-        '--trailing-lane-width': trailingLaneWidth + 'px'
-      } },
-    React.createElement(
-      'select',
-      _extends({}, rest, {
-        className: 'Select__select',
-        name: rest.name || rest.id,
-        ref: rest.setRef }),
-      children
-    ),
-    React.createElement(
-      'label',
-      { className: 'Select__label', htmlFor: rest.id },
-      label
-    ),
-    React.createElement(
-      'div',
-      { className: 'Input__leading-lane', ref: leadingLaneRef },
-      leadingLane
-    ),
-    React.createElement(
-      'div',
-      { className: 'Input__trailing-lane', ref: trailingLaneRef },
-      trailingLane,
-      React.createElement(Icon, { icon: 'caret-down' })
-    ),
-    React.createElement('div', {
-      className: cn('Select__status-line', {
-        'Select__status-line--active': status === 'failure' || status === 'success' || hasFocus
-      })
-    })
-  );
-};
-export { Select };
-var Option = function Option(_ref3) {
-  var children = _ref3.children,
-      rest = _objectWithoutProperties(_ref3, ['children']);
-
-  return React.createElement(
-    'option',
-    rest,
-    children
-  );
-};
-Select.Option = Option;
-var OptGroup = function OptGroup(_ref4) {
-  var children = _ref4.children,
-      rest = _objectWithoutProperties(_ref4, ['children']);
-
-  return React.createElement(
-    'optgroup',
-    rest,
-    children
-  );
-};
-Select.OptGroup = OptGroup;
-
-var Checkbox = function Checkbox(_ref5) {
-  var label = _ref5.label,
-      hasValue = _ref5.hasValue,
-      hasFocus = _ref5.hasFocus,
-      hasTouched = _ref5.hasTouched,
-      hasAutofill = _ref5.hasAutofill,
-      status = _ref5.status,
-      rest = _objectWithoutProperties(_ref5, ['label', 'hasValue', 'hasFocus', 'hasTouched', 'hasAutofill', 'status']);
-
-  var className = createClassName('Checkbox', {
-    hasLabel: Boolean(label),
-    hasValue: hasValue,
-    hasFocus: hasFocus,
-    hasTouched: hasTouched,
-    hasAutofill: hasAutofill,
-    disabled: rest.disabled,
-    status: status,
-    type: rest.type
-  });
-  return React.createElement(
-    'div',
-    { className: className },
-    React.createElement(
-      'div',
-      { className: 'Checkbox__input-wrapper' },
-      React.createElement('input', _extends({}, rest, {
-        className: 'Checkbox__input',
-        name: rest.name || rest.id,
-        checked: hasValue,
-        ref: rest.setRef
-      })),
-      React.createElement('div', { className: 'Checkbox__background' })
-    ),
-    React.createElement(
-      'label',
-      { className: 'Checkbox__label', htmlFor: rest.id },
-      label
-    )
-  );
-};
-
-/**
- * Returns a unique id. Id will stay the same between renders.
- */
-export { Checkbox };
-export var useId = function useId() {
-  return useMemo(function () {
-    return Date.now().toString(36) + Math.random().toString(36).substr(2);
-  }, []);
-};
-
-/**
- * Useful hook for inputs that want to control value
- */
-export var useValue = function useValue() {
-  var initialValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-
-  var _useState = useState(initialValue),
-      _useState2 = _slicedToArray(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
-  useEffect(function () {
-    setValue(initialValue);
-  }, [initialValue, setValue]);
-  var onChange = function onChange(value) {
-    return setValue(value);
-  };
-  return { value: value, hasValue: Boolean(value), onChange: onChange };
-};
-
-/**
- * Convenient hook that will keep track of input focus state
- */
-export var useFocus = function useFocus() {
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      hasFocus = _useState4[0],
-      setHasFocus = _useState4[1];
-
-  var onFocus = function onFocus() {
-    return setHasFocus(true);
-  };
-  var onBlur = function onBlur() {
-    return setHasFocus(false);
-  };
-  return { hasFocus: hasFocus, onFocus: onFocus, onBlur: onBlur };
-};
-
-/**
- * Keeps track of touched state
- */
-export var useTouched = function useTouched() {
-  var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      hasTouched = _useState6[0],
-      setHasTouched = _useState6[1];
-
-  var onFocus = function onFocus() {
-    return setHasTouched(true);
-  };
-  return { hasTouched: hasTouched, onFocus: onFocus };
-};
-
-/**
- * Convenient hook to control input type
- */
-export var useType = function useType(initialType) {
-  var _useState7 = useState(initialType),
-      _useState8 = _slicedToArray(_useState7, 2),
-      type = _useState8[0],
-      setType = _useState8[1];
-
-  return { type: type, setType: setType };
-};
-
-/**
- * Useful hook to detect when input has been autofilled by browser
- * Requires animation to work
- */
-export var useAutofill = function useAutofill() {
-  var _useState9 = useState(false),
-      _useState10 = _slicedToArray(_useState9, 2),
-      hasAutofill = _useState10[0],
-      setHasAutofill = _useState10[1];
-
-  var onAnimationStart = function onAnimationStart(e) {
-    if (e.animationName === 'onAutoFill') {
-      setHasAutofill(true);
-    }
-  };
-  return { hasAutofill: hasAutofill, onAnimationStart: onAnimationStart };
-};
-
-/**
- * Helper function to create BEM modifiers
- */
-export var createClassName = function createClassName(baseName, props) {
-  var _cn;
-
-  return cn(baseName, (_cn = {}, _defineProperty(_cn, baseName + '--has-value', props.hasValue), _defineProperty(_cn, baseName + '--has-focus', props.hasFocus), _defineProperty(_cn, baseName + '--has-touched', props.hasTouched), _defineProperty(_cn, baseName + '--has-label', props.hasLabel), _defineProperty(_cn, baseName + '--has-autofill', props.hasAutofill), _defineProperty(_cn, baseName + '--disabled', props.disabled), _defineProperty(_cn, baseName + '--status-' + props.status, props.status), _defineProperty(_cn, baseName + '--type-' + props.type, props.type), _cn));
-};
-
-/**
- * Hook keeping track of ref element width
- */
-var useRefWidth = function useRefWidth(ref) {
-  var _useState11 = useState(0),
-      _useState12 = _slicedToArray(_useState11, 2),
-      width = _useState12[0],
-      setWidth = _useState12[1];
-
-  useLayoutEffect(function () {
-    setWidth(ref.current.clientWidth);
-  });
-  return width;
-};
-
-/**
- * Flat object one layer
- */
-export var flatObj = function flatObj(obj) {
-  return Object.keys(obj).reduce(function (acc, key) {
-    return _extends({}, acc, _typeof(obj[key]) === 'object' ? obj[key] : _defineProperty({}, key, obj[key]));
-  }, {});
-};