@transferwise/components 45.12.0 → 45.14.0

package/src/dropFade/DropFade.tsx

@@ -0,0 +1,37 @@
+import React, { useRef, useState, ReactElement } from 'react';
+import { CSSTransition } from 'react-transition-group';
+
+const DropFade = ({ children, show }: { children: ReactElement; show: boolean }) => {
+  const reference = useRef<HTMLDivElement>(null);
+  const [height, setHeight] = useState<number | undefined>(0);
+
+  const clonedChild = React.cloneElement(children);
+
+  return (
+    <CSSTransition
+      nodeRef={reference}
+      in={show}
+      timeout={300}
+      classNames="np-dropfade"
+      onEntering={() => {
+        // Set height so we can animate to the correct height
+        setHeight(reference.current?.scrollHeight || 0);
+      }}
+      // Un-set height, as we don't want to presume it should be that height forever
+      onEntered={() => setHeight(undefined)}
+      onExit={() => {
+        setHeight(reference.current?.scrollHeight || 0);
+      }}
+      onExiting={() => {
+        setHeight(0);
+      }}
+    >
+      {/* eslint-disable-next-line react/forbid-dom-props */}
+      <div ref={reference} style={{ height }} className="np-dropfade">
+        {clonedChild}
+      </div>
+    </CSSTransition>
+  );
+};
+
+export default DropFade;

package/src/dropFade/index.ts

@@ -0,0 +1 @@
+export { default } from './DropFade';

package/src/dynamicFieldDefinitionList/DynamicFieldDefinitionList.js

@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types';
+
+import { Typography, Layout } from '../common';
+import { prepFields } from '../common/requirements';
+import DefinitionList from '../definitionList';
+import Title from '../title';
+
+import createDefinitions from './utils/createDefinitions';
+
+const DynamicFieldDefinitionList = ({ model, title, layout, fields }) => (
+  <>
+    {title && (
+      <div className="m-t-1 m-b-3">
+        <Title type={Typography.TITLE_BODY} className="p-t-3">
+          {title}
+        </Title>
+      </div>
+    )}
+
+    <DefinitionList layout={layout} definitions={createDefinitions(prepFields(fields), model)} />
+  </>
+);
+
+DynamicFieldDefinitionList.propTypes = {
+  model: PropTypes.shape({}).isRequired,
+  fields: PropTypes.shape({}).isRequired,
+  title: PropTypes.string,
+  layout: PropTypes.oneOf([
+    'VERTICAL_TWO_COLUMN',
+    'VERTICAL_ONE_COLUMN',
+    'HORIZONTAL_JUSTIFIED',
+    'HORIZONTAL_LEFT_ALIGNED',
+  ]),
+};
+
+DynamicFieldDefinitionList.defaultProps = {
+  title: null,
+  layout: Layout.VERTICAL_TWO_COLUMN,
+};
+
+export default DynamicFieldDefinitionList;

package/src/dynamicFieldDefinitionList/DynamicFieldDefinitionList.spec.js

@@ -0,0 +1,21 @@
+import { shallow } from 'enzyme';
+
+import { DynamicFieldDefinitionList } from '..';
+import Title from '../title';
+
+describe('DynamicFieldDefinitionList', () => {
+  it('has title when title is passed', () => {
+    const component = shallow(
+      <DynamicFieldDefinitionList model={{}} fields={{}} title="A title" />,
+    );
+
+    expect(component.find(Title).exists()).toBe(true);
+    expect(component.find(Title).props().children).toBe('A title');
+  });
+
+  it('has no title when no title is passed', () => {
+    const component = shallow(<DynamicFieldDefinitionList model={{}} fields={{}} />);
+
+    expect(component.find('.np-text-body-title').exists()).toBe(false);
+  });
+});

package/src/dynamicFieldDefinitionList/DynamicFieldDefinitionList.story.js

@@ -0,0 +1,134 @@
+import { select, text, number, date } from '@storybook/addon-knobs';
+
+import { Layout } from '../common';
+
+import DynamicFieldDefinitionList from './DynamicFieldDefinitionList';
+
+export default {
+  component: DynamicFieldDefinitionList,
+  title: 'Other/DynamicFieldDefinitionList',
+};
+
+export const Basic = () => {
+  const textDF = text('textDF', 'helloworld');
+  const numberDF = number('numberDF', 123456);
+  const dateDF = date('dateDF', new Date('01-01-2000'));
+  const passwordDF = text('passwordDF', 'password');
+  const phoneDF = text('phoneDF', '+441234567890');
+  const textareaDF = text('textareaDF', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit');
+  const selectDF = select('selectDF', ['1', '2'], '1');
+  const radioDF = select('radioDF', ['1', '2'], '1');
+
+  return (
+    <DynamicFieldDefinitionList
+      title="title"
+      layout={Layout.VERTICAL_TWO_COLUMN}
+      model={{
+        text: textDF,
+        number: numberDF,
+        select: selectDF,
+        date: new Date(dateDF),
+        checkbox: true,
+        radio: radioDF,
+        password: passwordDF,
+        telephone: phoneDF,
+        textarea: textareaDF,
+      }}
+      fields={{
+        text: {
+          title: 'Text',
+          type: 'text',
+          displayFormat: '***** - *****||*-*-*',
+          width: 'md',
+          refreshRequirementsOnChange: true,
+          tagClassName: {
+            h3: true,
+          },
+        },
+        number: {
+          title: 'Number',
+          type: 'number',
+          width: 'md',
+          refreshRequirementsOnChange: true,
+        },
+        select: {
+          title: 'Select',
+          type: 'string',
+          control: 'select',
+          width: 'md',
+          refreshRequirementsOnChange: true,
+          values: [
+            {
+              key: '1',
+              name: 'One',
+            },
+            {
+              key: '2',
+              name: 'Two',
+            },
+          ],
+        },
+        password: {
+          title: 'Password',
+          type: 'string',
+          control: 'password',
+          width: 'md',
+          refreshRequirementsOnChange: true,
+        },
+        date: {
+          title: 'Date',
+          type: 'string',
+          format: 'date',
+          refreshRequirementsOnChange: true,
+        },
+        telephone: {
+          title: 'Telephone',
+          type: 'string',
+          control: 'tel',
+          placeholder: 'Enter...',
+        },
+        radio: {
+          title: 'Radio',
+          type: 'string',
+          control: 'radio',
+          width: 'md',
+          refreshRequirementsOnChange: true,
+          values: [
+            {
+              key: '1',
+              name: 'One',
+            },
+            {
+              key: '2',
+              name: 'Two',
+            },
+          ],
+        },
+        checkbox: {
+          title: 'Checkbox',
+          type: 'boolean',
+          placeholder: 'Label',
+          width: 'md',
+          refreshRequirementsOnChange: true,
+        },
+        textarea: {
+          title: 'Textarea',
+          type: 'string',
+          control: 'textarea',
+          refreshRequirementsOnChange: true,
+        },
+        file: {
+          title: 'File',
+          type: 'string',
+          format: 'base64url',
+          refreshRequirementsOnChange: true,
+        },
+        hidden: {
+          type: 'string',
+          hidden: true,
+          default: 'hidden-value',
+        },
+      }}
+    />
+  );
+};

package/src/dynamicFieldDefinitionList/FormattedValue/FormattedValue.css

@@ -0,0 +1 @@
+.formatted-value__h3-custom-alignment{line-height:24px;margin-bottom:16px;margin-bottom:var(--size-16)}

package/src/dynamicFieldDefinitionList/FormattedValue/FormattedValue.js

@@ -0,0 +1,73 @@
+import { formatDate, formatNumber } from '@transferwise/formatting';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+
+import { formatUsingPattern } from '../utils/text-format';
+
+/**
+ *
+ * @param {Array} options
+ * @param {string|number} value
+ */
+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 } = 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 <span>{getValueLabel(field.values, value)}</span>;
+    case 'date':
+      return <span>{formatDate(value instanceof Date ? value : new Date(value), locale)}</span>;
+    case 'number':
+      return <span>{formatNumber(value, locale)}</span>;
+    case 'password':
+      return <span>{mask(value)}</span>;
+    case 'file':
+      return (
+        <div className="thumbnail">
+          <img alt={field.title} src={value} />
+        </div>
+      );
+    case 'checkbox':
+      return <span>{JSON.stringify(value)}</span>;
+    default:
+      return (
+        <span className={classNames(style)}>{formatUsingPattern(value, field.displayFormat)}</span>
+      );
+  }
+};
+
+FormattedValue.propTypes = {
+  field: PropTypes.shape({
+    control: PropTypes.string.isRequired,
+    displayFormat: PropTypes.string,
+    refreshRequirementsOnChange: PropTypes.bool,
+    title: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired,
+    width: PropTypes.string,
+    tagClassName: PropTypes.shape({
+      h3: PropTypes.bool,
+    }),
+    values: PropTypes.arrayOf(PropTypes.shape({ value: PropTypes.any })),
+  }).isRequired,
+  value: PropTypes.any.isRequired,
+};
+
+export default FormattedValue;

package/src/dynamicFieldDefinitionList/FormattedValue/FormattedValue.less

@@ -0,0 +1,4 @@
+.formatted-value__h3-custom-alignment {
+  margin-bottom: var(--size-16);
+  line-height: 24px;
+}

package/src/dynamicFieldDefinitionList/FormattedValue/FormattedValue.spec.js

@@ -0,0 +1,200 @@
+import { formatNumber } from '@transferwise/formatting';
+import { shallow } from 'enzyme';
+import { useIntl } from 'react-intl';
+
+import FormattedValue from './FormattedValue';
+
+jest.mock('react-intl');
+
+describe('FormattedValue', () => {
+  let props;
+  let value;
+  let component;
+  let item;
+  useIntl.mockReturnValue({ locale: 'en-GB' });
+
+  describe('when given a text field', () => {
+    beforeEach(() => {
+      props = {
+        value: 'ABCD',
+        field: {
+          control: 'text',
+          displayFormat: '** - **',
+          refreshRequirementsOnChange: true,
+          title: 'Text',
+          type: 'string',
+          width: 'md',
+          tagClassName: {
+            h3: true,
+          },
+        },
+      };
+      component = shallow(<FormattedValue {...props} />);
+      item = component.find('span');
+    });
+
+    it('should display the formatted text value', () => {
+      expect(item.text()).toBe('AB - CD');
+    });
+
+    it('has h3 styling added when provided', () => {
+      expect(item.find('.np-text-body-large-bold')).toHaveLength(1);
+    });
+  });
+
+  describe('when given a number field', () => {
+    beforeEach(() => {
+      value = 1234;
+      props = {
+        value,
+        field: {
+          title: 'Number',
+          type: 'number',
+          width: 'md',
+          refreshRequirementsOnChange: true,
+          control: 'number',
+        },
+      };
+      component = shallow(<FormattedValue {...props} />);
+      item = component.find('span');
+    });
+
+    it('should display the formatted number value', () => {
+      expect(item.text()).toBe(formatNumber(value));
+    });
+  });
+
+  describe('when given a date field', () => {
+    beforeEach(() => {
+      props = {
+        value: '2000-12-20T00:00:00.000Z',
+        field: {
+          title: 'Date label',
+          type: 'date',
+          control: 'date',
+        },
+      };
+      component = shallow(<FormattedValue {...props} />);
+      item = component.find('span');
+    });
+
+    it('should display the formatted date value', () => {
+      expect(item.text()).toBe('20/12/2000');
+    });
+  });
+
+  describe('when given a select field', () => {
+    beforeEach(() => {
+      props = {
+        value: '2',
+        field: {
+          title: 'Select label',
+          type: 'select',
+          control: 'select',
+          values: [
+            {
+              value: '1',
+              label: 'One',
+            },
+            {
+              value: '2',
+              label: 'Two',
+            },
+          ],
+        },
+      };
+      component = shallow(<FormattedValue {...props} />);
+      item = component.find('span');
+    });
+
+    it('should display the selected option value', () => {
+      expect(item.text()).toBe('Two');
+    });
+  });
+
+  describe('when given a radio field', () => {
+    beforeEach(() => {
+      props = {
+        value: '2',
+        field: {
+          title: 'Radio label',
+          type: 'radio',
+          control: 'select',
+          values: [
+            {
+              value: '1',
+              label: 'One',
+            },
+            {
+              value: '2',
+              label: 'Two',
+            },
+          ],
+        },
+      };
+      component = shallow(<FormattedValue {...props} />);
+      item = component.find('span');
+    });
+
+    it('should display the selected radio value', () => {
+      expect(item.text()).toBe('Two');
+    });
+  });
+
+  describe('when given a checkbox field', () => {
+    beforeEach(() => {
+      props = {
+        value: true,
+        field: {
+          title: 'Checkbox label',
+          type: 'boolean',
+          control: 'checkbox',
+        },
+      };
+      component = shallow(<FormattedValue {...props} />);
+      item = component.find('span');
+    });
+
+    it('should display the boolean', () => {
+      expect(item.text()).toBe('true');
+    });
+  });
+
+  describe('when given a password field', () => {
+    beforeEach(() => {
+      props = {
+        value: 'qwe123',
+        field: {
+          title: 'Password label',
+          type: 'string',
+          control: 'password',
+        },
+      };
+      component = shallow(<FormattedValue {...props} />);
+      item = component.find('span');
+    });
+
+    it('should display the password masked', () => {
+      expect(item.text()).toBe('******');
+    });
+  });
+
+  describe('when given a file', () => {
+    beforeEach(() => {
+      props = {
+        value: 'qwe123',
+        field: {
+          title: 'A File',
+          type: 'file',
+          control: 'file',
+        },
+      };
+      component = shallow(<FormattedValue {...props} />);
+      item = component.find('img');
+    });
+
+    it('should display the value as source', () => {
+      expect(item.prop('src')).toBe('qwe123');
+    });
+  });
+});

package/src/dynamicFieldDefinitionList/FormattedValue/index.js

@@ -0,0 +1 @@
+export { default } from './FormattedValue';

package/src/dynamicFieldDefinitionList/index.js

@@ -0,0 +1 @@
+export { default } from './DynamicFieldDefinitionList';

package/src/dynamicFieldDefinitionList/utils/createDefinitions.js

@@ -0,0 +1,33 @@
+import toPairs from 'lodash.topairs';
+
+import FormattedValue from '../FormattedValue';
+
+export default function createDefinitions(fields, model) {
+  return toPairs(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) => (
+        <FormattedValue
+          key={groupFieldIndex} // eslint-disable-line react/no-array-index-key
+          field={groupField}
+          value={model[name]}
+        />
+      ))
+    ) : (
+      <FormattedValue field={field} value={model[name]} />
+    ),
+    key: name,
+  };
+}

package/src/dynamicFieldDefinitionList/utils/createDefinitions.spec.js

@@ -0,0 +1,83 @@
+import createDefinitions from './createDefinitions';
+
+const FIELD = { title: 'First', control: 'control', type: 'type' };
+
+describe('createDefinitions', () => {
+  it('creates definitions with titles', () => {
+    const fields = {
+      first: { ...FIELD, title: 'First' },
+      second: { ...FIELD, title: 'Second' },
+    };
+    const model = { first: 'first value', second: 'second value' };
+
+    const definitions = createDefinitions(fields, model);
+
+    const titles = definitions.map(({ title }) => title);
+    expect(titles).toStrictEqual(['First', 'Second']);
+  });
+
+  it('creates definitions with non-group and group values', () => {
+    const FIRST_SOLO = { ...FIELD, title: 'Solo title' };
+    const FIRST_GROUP = { ...FIELD, title: 'First group title' };
+    const SECOND_GROUP = { ...FIELD, title: 'Second group title' };
+
+    const fields = {
+      first: FIRST_SOLO,
+      second: {
+        group: [FIRST_GROUP, SECOND_GROUP],
+      },
+    };
+
+    const model = {
+      first: 'first value',
+      second: 'second value',
+    };
+
+    const definitions = createDefinitions(fields, model);
+
+    const values = definitions.map(({ value }) => value);
+
+    expect(values).toHaveLength(2);
+
+    const [first, [groupFirst, groupSecond]] = values;
+
+    expect(first.props.field).toStrictEqual(FIRST_SOLO);
+    expect(first.props.value).toBe('first value');
+
+    expect(groupFirst.props.field).toStrictEqual(FIRST_GROUP);
+    expect(groupFirst.props.value).toBe('second value');
+
+    expect(groupSecond.props.field).toStrictEqual(SECOND_GROUP);
+    expect(groupSecond.props.value).toBe('second value');
+  });
+
+  it('creates definitions with keys from names', () => {
+    const fields = {
+      first: { ...FIELD, title: 'First' },
+      second: { ...FIELD, title: 'Second' },
+    };
+    const model = { first: 'first value', second: 'second value' };
+
+    const definitions = createDefinitions(fields, model);
+
+    const keys = definitions.map(({ key }) => key);
+    expect(keys).toStrictEqual(['first', 'second']);
+  });
+
+  it('creates definitions without fields hidden or missing from model', () => {
+    const fields = {
+      hidden: { ...FIELD, title: 'Hidden', hidden: true },
+      present: { ...FIELD, title: 'Present' },
+      missing: { ...FIELD, title: 'Missing' },
+    };
+    const model = {
+      hidden: 'hidden value',
+      present: 'present value',
+    };
+
+    const definitions = createDefinitions(fields, model);
+
+    expect(definitions).toHaveLength(1);
+    expect(definitions[0].key).toBe('present');
+  });
+});

package/src/dynamicFieldDefinitionList/utils/text-format.js

@@ -0,0 +1,46 @@
+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] !== '*';
+
+export { formatUsingPattern };