@transferwise/components 0.0.0-experimental-04e4d95 → 0.0.0-experimental-b545514

package/build/index.js

@@ -25,7 +25,6 @@ var art = require('@wise/art');
 var clamp$2 = require('lodash.clamp');
 var debounce = require('lodash.debounce');
 var requiredIf = require('react-required-if');
-var toPairs = require('lodash.topairs');
 var web = require('@react-spring/web');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -57,7 +56,6 @@ var throttle__default = /*#__PURE__*/_interopDefault(throttle);
 var clamp__default = /*#__PURE__*/_interopDefault(clamp$2);
 var debounce__default = /*#__PURE__*/_interopDefault(debounce);
 var requiredIf__default = /*#__PURE__*/_interopDefault(requiredIf);
-var toPairs__default = /*#__PURE__*/_interopDefault(toPairs);
 
 class HistoryNavigator {
   constructor(history = [], historyLimit = null) {
@@ -4364,508 +4362,6 @@ const DropFade = ({
   });
 };
 
-/* eslint-disable no-unused-vars */
-/* eslint-disable no-param-reassign */
-
-const prepFields = (fields, model, validationMessages) => {
-  if (!fields) {
-    return {};
-  }
-  let preparedFields = copyOf(fields);
-  preparedFields = flattenFieldsWithGroups(preparedFields);
-  preparedFields = transformFieldArrayToMap(preparedFields);
-  preparedFields = transformNestedKeysToNestedSpecs(preparedFields);
-  Object.keys(preparedFields).forEach(key => {
-    preparedFields[key] = prepField(preparedFields[key], model, validationMessages);
-  });
-  return preparedFields;
-};
-const prepField = (field, model, validationMessages) => {
-  const preparedField = copyOf(field);
-  prepLegacyProps(preparedField);
-  prepType(preparedField);
-  prepPattern(preparedField);
-  prepValidationMessages(preparedField, validationMessages);
-  return preparedField;
-};
-
-/**
- * In an older format we had an extra fieldGroup level, here we flatten that out
- * So the inner arrays of fields within the different field groups are flattened
- * to a single array, which is returned.
- *
- * @param fields
- */
-const flattenFieldsWithGroups = fields => {
-  if (Array.isArray(fields)) {
-    let flattenedFields = [];
-    fields.forEach(field => {
-      // If we've been given a group with nested fields, break them out.
-      if (field.fields) {
-        flattenedFields = flattenedFields.concat(flattenFieldWithGroup(field, field.fields));
-      } else if (field.group) {
-        flattenedFields = flattenedFields.concat(flattenFieldWithGroup(field, field.group));
-      } else {
-        // Otherwise it's a regular field, just add it.
-        flattenedFields.push(field);
-      }
-    });
-    return flattenedFields;
-  }
-  return fields;
-};
-const flattenFieldWithGroup = (field, subFields) => {
-  // If first field doesn't have a label, use the one from the group
-  if (field.name && subFields.length > 0 && !subFields[0].name) {
-    subFields[0].name = field.name;
-  }
-  if (field.width && subFields.length > 0 && !subFields[0].width) {
-    subFields[0].width = field.width;
-  }
-
-  // If there was a tooltip at fieldGroup level move it to first field.
-  if (field.tooltip && subFields.length > 0 && !subFields[0].help) {
-    subFields[0].help = {
-      message: field.tooltip
-    };
-  }
-  if (field.info && subFields.length > 0 && !subFields[0].help) {
-    subFields[0].help = {
-      message: field.info
-    };
-  }
-
-  // If there are two parts of this group, render them side by side
-  if (subFields.length === 2) {
-    subFields.forEach(nestedField => {
-      nestedField.width = 'md';
-    });
-  }
-
-  // If there are three parts, render the first two side by side
-  if (subFields.length === 3) {
-    subFields[0].width = 'md';
-    subFields[1].width = 'md';
-  }
-  return subFields;
-};
-
-/*
- * Some older requirements return an array of fields, where it should be a map
- * from the property name to the spec.  This converts arrays to maps.
- */
-const transformFieldArrayToMap = fields => {
-  if (Array.isArray(fields)) {
-    const fieldMap = {};
-    fields.forEach(field => {
-      const key = field.key || field.name;
-      delete field.key;
-      fieldMap[key] = copyOf(field);
-    });
-    return fieldMap;
-  }
-  return fields;
-};
-
-/*
- * Some older format return keys like 'address.city', expecting the value of
- * city to be nested inside an address object.  This function creates a spec of
- * type 'object', and nests such fields inside of it.  When we render we pass
- * this object spec to a nested fieldset.
- */
-const transformNestedKeysToNestedSpecs = fieldMap => {
-  if (Array.isArray(fieldMap)) {
-    throw new TypeError('Expecting a map of fields, not an array');
-  }
-  const nestedFields = {};
-  Object.keys(fieldMap).forEach(key => {
-    if (key.indexOf('.') > 0) {
-      // If the key contains a period we need to nest the fields in another object
-      const pathSections = key.split('.');
-      const nestedKey = pathSections[0];
-
-      // If this sub object doesn't exist yet, create it
-      if (!nestedFields[nestedKey]) {
-        nestedFields[nestedKey] = {
-          type: 'object',
-          properties: {}
-        };
-      }
-      nestedFields[nestedKey].properties[pathSections[1]] = fieldMap[key];
-    } else {
-      nestedFields[key] = fieldMap[key];
-    }
-  });
-  return nestedFields;
-};
-const prepType = field => {
-  const type = field.type && field.type.toLowerCase && field.type.toLowerCase();
-  switch (type) {
-    case 'text':
-      field.type = 'string';
-      break;
-    case 'date':
-      field.type = 'string';
-      field.format = 'date';
-      break;
-    case 'password':
-      field.type = 'string';
-      field.control = 'password';
-      break;
-    case 'checkbox':
-      field.type = 'boolean';
-      break;
-    case 'select':
-      if (!field.control) {
-        field.control = 'select';
-      }
-      delete field.type;
-      break;
-    case 'radio':
-      field.control = 'radio';
-      delete field.type;
-      break;
-    case 'upload':
-      field.type = 'string';
-      field.format = 'base64url';
-      break;
-    case 'tel':
-      field.type = 'string';
-      field.format = 'phone';
-      break;
-    case 'textarea':
-      field.type = 'string';
-      field.control = 'textarea';
-      break;
-  }
-  if (!field.control && field.type !== 'object') {
-    field.control = getControlType(field);
-  }
-};
-const prepLegacyProps = field => {
-  if (field.name && !field.title) {
-    field.title = field.name;
-    delete field.name;
-  }
-  if (field.validationRegexp) {
-    field.pattern = field.validationRegexp;
-    delete field.validationRegexp;
-  }
-  if (field.min) {
-    field.minimum = field.min;
-    delete field.min;
-  }
-  if (field.max) {
-    field.maximum = field.max;
-    delete field.max;
-  }
-  if (field.example && !field.placeholder) {
-    field.placeholder = field.example;
-    delete field.example;
-  }
-  if (field.tooltip && !field.help) {
-    field.help = {
-      message: field.tooltip
-    };
-    delete field.tooltip;
-  }
-  if (field.valuesAllowed && !field.values) {
-    field.values = field.valuesAllowed;
-    delete field.valuesAllowed;
-  }
-  if (field.values && field.values.map) {
-    field.values = prepLegacyValues(field.values);
-  }
-  if (field.value && !field.default) {
-    field.default = field.value;
-    delete field.value;
-  }
-  if (field.values) {
-    // In some legacy arrays the first value is a placeholder, extract it.
-    if (field.values && field.values.length > 0 && field.values[0] && !field.values[0].value && field.values[0].label && !field.placeholder) {
-      field.placeholder = field.values[0].label;
-      field.values = field.values.slice(1);
-    }
-  }
-};
-const prepLegacyValues = values => values.map(prepLegacyValue);
-const prepLegacyValue = value => {
-  if (!value.label && value.title) {
-    value.label = value.title;
-    delete value.title;
-  }
-  if (!value.label && value.name) {
-    value.label = value.name;
-    delete value.name;
-  }
-  if (!value.value && value.code) {
-    value.value = value.code;
-    delete value.code;
-  }
-  if (!value.value && value.key) {
-    value.value = value.key;
-    delete value.key;
-  }
-  return value;
-};
-const prepPattern = field => {
-  if (field.pattern) {
-    try {
-      new RegExp(field.pattern);
-    } catch {
-      // eslint-disable-next-line no-console
-      console.warn('API regexp is invalid');
-      delete field.pattern;
-    }
-  } else {
-    delete field.pattern;
-  }
-};
-const prepValidationMessages = (field, validationMessages) => {
-  field.validationMessages = field.validationMessages ? field.validationMessages : validationMessages;
-  if (!field.validationMessages) {
-    delete field.validationMessages;
-    return;
-  }
-  if (field.validationMessages.minimum) {
-    field.validationMessages.min = field.validationMessages.minimum;
-    delete field.validationMessages.minimum;
-  }
-  if (field.validationMessages.maximum) {
-    field.validationMessages.max = field.validationMessages.maximum;
-    delete field.validationMessages.maximum;
-  }
-};
-const getControlType = field => {
-  if (field.control) {
-    return field.control.toLowerCase();
-  }
-  if (field.hidden) {
-    return 'hidden';
-  }
-  if (field.values && field.values.length > 0) {
-    return getSelectionType(field);
-  }
-  switch (field.type) {
-    case 'string':
-      return getControlForStringFormat(field.format);
-    case 'number':
-    case 'integer':
-      return 'number';
-    case 'boolean':
-      return 'checkbox';
-    default:
-      return 'text';
-  }
-};
-const getControlForStringFormat = format => {
-  switch (format) {
-    case 'date':
-      return 'date';
-    case 'base64url':
-      return 'file';
-    case 'password':
-      return 'password';
-    case 'uri':
-      return 'text';
-    // 'url'; - not implemented
-    case 'email':
-      return 'text';
-    // 'email'; - not implemented
-    case 'phone':
-      return 'tel';
-    default:
-      return 'text';
-  }
-};
-const getSelectionType = field => {
-  if (field.control) {
-    return field.control;
-  }
-  if (field.type === 'select') {
-    return 'select';
-  }
-  if (field.type === 'radio') {
-    return 'radio';
-  }
-  if (field.values) {
-    return field.values.length > 3 ? 'select' : 'radio';
-  }
-  return 'select';
-};
-const copyOf = object => JSON.parse(JSON.stringify(object));
-
-const formatUsingPattern = (value = '', pattern) => {
-  if (typeof pattern !== 'string') {
-    return value;
-  }
-  let newPattern = pattern;
-  if (newPattern.indexOf('||') > 0) {
-    newPattern = newPattern.slice(0, Math.max(0, pattern.indexOf('||')));
-  }
-  let newValue = '';
-  let separators = 0;
-  let charactersToAllocate = value.length;
-  let position = 0;
-  while (charactersToAllocate) {
-    if (positionIsSeparator(newPattern, position)) {
-      newValue += newPattern[position];
-      separators += 1;
-    } else {
-      newValue += value[position - separators];
-      charactersToAllocate -= 1;
-    }
-    position += 1;
-  }
-  const separatorsAfterCursor = countSeparatorsAfterCursor(newPattern, position);
-  if (separatorsAfterCursor) {
-    newValue += newPattern.slice(position, separatorsAfterCursor);
-  }
-  return newValue;
-};
-const countSeparatorsAfterCursor = (newPattern, position) => {
-  let separators = 0;
-  while (positionIsSeparator(newPattern, position + separators)) {
-    separators += 1;
-  }
-  return separators;
-};
-const positionIsSeparator = (newPattern, position) => newPattern[position] && newPattern[position] !== '*';
-
-const getValueLabel = (options, value) => {
-  const option = options.find(currentOption => currentOption.value === value);
-  return option && option.label ? option.label : value;
-};
-
-/**
- *
- * @param {string} value
- */
-const mask = value => new Array(value.length + 1).join('*');
-const FormattedValue = ({
-  field,
-  value
-}) => {
-  const {
-    locale
-  } = reactIntl.useIntl();
-  const style = [];
-  if (field.tagClassName && field.tagClassName.h3) {
-    style.push('np-text-body-large-bold');
-    style.push('formatted-value__h3-custom-alignment');
-  }
-  switch (field.control) {
-    case 'select':
-    case 'radio':
-      return /*#__PURE__*/jsxRuntime.jsx("span", {
-        children: getValueLabel(field.values, value)
-      });
-    case 'date':
-      return /*#__PURE__*/jsxRuntime.jsx("span", {
-        children: formatting.formatDate(value instanceof Date ? value : new Date(value), locale)
-      });
-    case 'number':
-      return /*#__PURE__*/jsxRuntime.jsx("span", {
-        children: formatting.formatNumber(value, locale)
-      });
-    case 'password':
-      return /*#__PURE__*/jsxRuntime.jsx("span", {
-        children: mask(value)
-      });
-    case 'file':
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "thumbnail",
-        children: /*#__PURE__*/jsxRuntime.jsx("img", {
-          alt: field.title,
-          src: value
-        })
-      });
-    case 'checkbox':
-      return /*#__PURE__*/jsxRuntime.jsx("span", {
-        children: JSON.stringify(value)
-      });
-    default:
-      return /*#__PURE__*/jsxRuntime.jsx("span", {
-        className: classNames__default.default(style),
-        children: formatUsingPattern(value, field.displayFormat)
-      });
-  }
-};
-FormattedValue.propTypes = {
-  field: PropTypes__default.default.shape({
-    control: PropTypes__default.default.string.isRequired,
-    displayFormat: PropTypes__default.default.string,
-    refreshRequirementsOnChange: PropTypes__default.default.bool,
-    title: PropTypes__default.default.string.isRequired,
-    type: PropTypes__default.default.string.isRequired,
-    width: PropTypes__default.default.string,
-    tagClassName: PropTypes__default.default.shape({
-      h3: PropTypes__default.default.bool
-    }),
-    values: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
-      value: PropTypes__default.default.any
-    }))
-  }).isRequired,
-  value: PropTypes__default.default.any.isRequired
-};
-var FormattedValue$1 = FormattedValue;
-
-function createDefinitions(fields, model) {
-  return toPairs__default.default(fields).map(([name, field]) => createDefinition(name, field, model)).filter(definition => !!definition);
-}
-function createDefinition(name, field, model) {
-  const {
-    title,
-    group,
-    hidden
-  } = field;
-  if (!model[name] || hidden) {
-    return null;
-  }
-  return {
-    title,
-    value: group ? group.map((groupField, groupFieldIndex) => /*#__PURE__*/jsxRuntime.jsx(FormattedValue$1, {
-      // eslint-disable-line react/no-array-index-key
-      field: groupField,
-      value: model[name]
-    }, groupFieldIndex)) : /*#__PURE__*/jsxRuntime.jsx(FormattedValue$1, {
-      field: field,
-      value: model[name]
-    }),
-    key: name
-  };
-}
-
-const DynamicFieldDefinitionList = ({
-  model,
-  title,
-  layout,
-  fields
-}) => /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-  children: [title && /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "m-t-1 m-b-3",
-    children: /*#__PURE__*/jsxRuntime.jsx(Title, {
-      type: exports.Typography.TITLE_BODY,
-      className: "p-t-3",
-      children: title
-    })
-  }), /*#__PURE__*/jsxRuntime.jsx(DefinitionList$1, {
-    layout: layout,
-    definitions: createDefinitions(prepFields(fields), model)
-  })]
-});
-DynamicFieldDefinitionList.propTypes = {
-  model: PropTypes__default.default.shape({}).isRequired,
-  fields: PropTypes__default.default.shape({}).isRequired,
-  title: PropTypes__default.default.string,
-  layout: PropTypes__default.default.oneOf(['VERTICAL_TWO_COLUMN', 'VERTICAL_ONE_COLUMN', 'HORIZONTAL_JUSTIFIED', 'HORIZONTAL_LEFT_ALIGNED'])
-};
-DynamicFieldDefinitionList.defaultProps = {
-  title: null,
-  layout: exports.Layout.VERTICAL_TWO_COLUMN
-};
-var DynamicFieldDefinitionList$1 = DynamicFieldDefinitionList;
-
 const ESCAPED_OPENING_CHEVRON = '<';
 const ESCAPED_CLOSING_CHEVRON = '>';
 class EmphasisHtmlTransformer {
@@ -14901,7 +14397,6 @@ exports.DirectionProvider = DirectionProvider;
 exports.Display = Display;
 exports.Drawer = Drawer$1;
 exports.DropFade = DropFade;
-exports.DynamicFieldDefinitionList = DynamicFieldDefinitionList$1;
 exports.Emphasis = Emphasis;
 exports.FlowNavigation = FlowNavigation;
 exports.Header = Header;