@wise/dynamic-flow-client 0.1.1 → 0.1.3

package/build/field/Field.js

@@ -0,0 +1,311 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { InlineAlert, InstructionsList } from '@transferwise/components';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { Component } from 'react';
+import { FormControlType } from '../common';
+import { getControlType_Legacy } from '../common/requirements';
+import { getValidationFailures } from '../common/validation/validation-failures';
+import FormControl from '../formControl';
+export var FieldTypes = {
+    STRING: 'string',
+    NUMBER: 'number',
+    INTEGER: 'integer',
+    BOOLEAN: 'boolean',
+    BLOB: 'blob'
+};
+export var FieldFormats = {
+    DATE: 'date',
+    PHONE: 'phone',
+    BASE_64_URL: 'base64url',
+    PASSWORD: 'password',
+    EMAIL: 'email',
+    URI: 'uri'
+};
+var DefaultValidationMessages = {
+    REQUIRED: 'Required',
+    PATTERN: 'Incorrect format',
+    MINLENGTH: 'The value is too short',
+    MAXLENGTH: 'The value is too long',
+    MIN: 'The value is too low',
+    MAX: 'The value is too high'
+};
+var Field = /** @class */ (function (_super) {
+    __extends(Field, _super);
+    function Field(props) {
+        var _this = _super.call(this, props) || this;
+        _this.objectSizeOf = function (object) { return (object ? Object.keys(object).length : 0); };
+        _this.state = {
+            focused: false,
+            changed: false,
+            error: props.errorMessage
+        };
+        return _this;
+    }
+    Field.prototype.UNSAFE_componentWillReceiveProps = function (nextProps) {
+        if (nextProps.errorMessage !== this.props.errorMessage) {
+            this.setState({ error: nextProps.errorMessage });
+        }
+    };
+    Field.prototype.onFocus = function (value) {
+        var onFocus = this.props.onFocus;
+        if (onFocus) {
+            onFocus(value);
+        }
+        this.setState({ focused: true });
+    };
+    Field.prototype.onBlur = function (value) {
+        var onBlur = this.props.onBlur;
+        if (onBlur) {
+            onBlur(value);
+        }
+        this.setState({ focused: false });
+    };
+    Field.prototype.onChange = function (value) {
+        this.props.onChange(value);
+        this.setState({ changed: true, focused: true });
+    };
+    Field.prototype.validateValue = function (newValue) {
+        var field = this.props.field;
+        var validationFailuresKeys = getValidationFailures(newValue, field);
+        return validationFailuresKeys.reduce(function (acc, failure) {
+            var _a;
+            var messageKey = failure.toLowerCase();
+            var message = (field.validationMessages && field.validationMessages[messageKey]) ||
+                DefaultValidationMessages[messageKey.toUpperCase()];
+            return message
+                ? __assign(__assign({}, acc), (_a = {}, _a[messageKey] = message, _a)) : acc;
+        }, {});
+    };
+    Field.prototype.updateAlert = function (control) {
+        var _a = this.props, value = _a.value, field = _a.field, errorMessage = _a.errorMessage, warningMessage = _a.warningMessage;
+        var _b = this.state, focused = _b.focused, changed = _b.changed, error = _b.error;
+        var validationFailures = changed && !focused ? this.validateValue(value) : {};
+        if (this.objectSizeOf(validationFailures) > 0) {
+            return {
+                type: 'error',
+                content: Object.keys(validationFailures).map(function (key) { return (_jsx("div", { children: validationFailures[key] }, key)); })
+            };
+        }
+        if (error && errorMessage) {
+            return {
+                type: 'error',
+                content: _jsx(_Fragment, { children: errorMessage })
+            };
+        }
+        if (warningMessage) {
+            return {
+                type: 'warning',
+                content: _jsx(_Fragment, { children: warningMessage })
+            };
+        }
+        if (focused && field.help && field.help.message) {
+            return {
+                type: 'info',
+                content: _jsx(_Fragment, { children: field.help.message })
+            };
+        }
+        if (focused && field.help && field.help.list && field.help.list.length > 0) {
+            return {
+                type: 'info',
+                // eslint-disable-next-line react/no-array-index-key
+                content: field.help.list.map(function (item, index) { return _jsx("div", { children: item }, index); })
+            };
+        }
+        if (focused &&
+            field.help &&
+            field.help["do"] &&
+            field.help["do"].length > 0 &&
+            field.help.dont &&
+            field.help.dont.length > 0) {
+            return {
+                type: 'info',
+                content: (_jsx("div", __assign({ className: "m-b-1" }, { children: _jsx(InstructionsList, { dos: field.help["do"], donts: field.help.dont }) })))
+            };
+        }
+        if (focused && control !== FormControlType.FILE && field.help && field.help.image) {
+            return {
+                type: 'info',
+                content: _jsx("img", { className: "thumbnail m-y-2", src: "".concat(field.help.image), alt: field.label })
+            };
+        }
+        return {
+            type: null,
+            content: null
+        };
+    };
+    Field.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, name = _a.name, field = _a.field, value = _a.value, label = _a.label;
+        var control = field.control || getControlType_Legacy(field);
+        var alert = this.updateAlert(control);
+        var showAlert = !!alert.content;
+        var showLabel = control !== FormControlType.FILE &&
+            control !== FormControlType.UPLOAD &&
+            control !== FormControlType.CHECKBOX;
+        return (_jsxs("div", __assign({ className: classNames('form-group', "tw-field-".concat(name), {
+                'has-info': alert.type === 'info' && showAlert,
+                'has-error': alert.type === 'error' && showAlert,
+                'has-warning': alert.type === 'warning' && showAlert,
+                hidden: field.hidden
+            }) }, { children: [showLabel && (_jsx("label", __assign({ htmlFor: field === null || field === void 0 ? void 0 : field.id, className: "control-label" }, { children: label }))), _jsx(FormControl, __assign({}, field, { type: control, name: name, value: value, onChange: function (event) { return _this.onChange(event); }, onFocus: function (event) { return _this.onFocus(event); }, onBlur: function (event) { return _this.onBlur(event); } })), showAlert && _jsx(InlineAlert, __assign({ type: alert.type }, { children: alert.content }))] })));
+    };
+    return Field;
+}(Component));
+export default Field;
+Field.propTypes = {
+    name: PropTypes.string.isRequired,
+    value: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number,
+        PropTypes.bool,
+        PropTypes.object,
+        PropTypes.shape({
+            // eslint-disable-next-line react/forbid-prop-types
+            value: PropTypes.any.isRequired,
+            label: PropTypes.node,
+            icon: PropTypes.string,
+            currency: PropTypes.string,
+            note: PropTypes.node,
+            secondary: PropTypes.node
+        }),
+    ]),
+    field: PropTypes.shape({
+        type: PropTypes.oneOf(['string', 'number', 'integer', 'boolean', 'blob']).isRequired,
+        label: PropTypes.string,
+        id: PropTypes.string,
+        required: PropTypes.bool,
+        disabled: PropTypes.bool,
+        hidden: PropTypes.bool,
+        readOnly: PropTypes.bool,
+        autoComplete: PropTypes.bool,
+        placeholder: PropTypes.string,
+        searchPlaceholder: PropTypes.string,
+        control: PropTypes.oneOf([
+            'radio',
+            'checkbox',
+            'select',
+            'file',
+            'date',
+            'date-time',
+            'date-lookup',
+            'tel',
+            'number',
+            'hidden',
+            'password',
+            'text',
+            'textarea',
+            'upload',
+            'tab',
+        ]),
+        format: PropTypes.oneOf(['date', 'phone', 'base64url', 'password', 'email', 'uri']),
+        displayPattern: PropTypes.string,
+        help: PropTypes.shape({
+            message: PropTypes.string,
+            image: PropTypes.string,
+            list: PropTypes.arrayOf(PropTypes.string),
+            "do": PropTypes.arrayOf(PropTypes.string),
+            dont: PropTypes.arrayOf(PropTypes.string)
+        }),
+        pattern: PropTypes.string,
+        minLength: PropTypes.number,
+        maxLength: PropTypes.number,
+        minDate: PropTypes.instanceOf(Date),
+        maxDate: PropTypes.instanceOf(Date),
+        min: PropTypes.number,
+        max: PropTypes.number,
+        uploadProps: PropTypes.shape({
+            animationDelay: PropTypes.number,
+            csButtonText: PropTypes.string,
+            csFailureText: PropTypes.string,
+            csSuccessText: PropTypes.string,
+            csTooLargeMessage: PropTypes.string,
+            csWrongTypeMessage: PropTypes.string,
+            httpOptions: PropTypes.shape({}),
+            maxSize: PropTypes.number,
+            onCancel: PropTypes.func,
+            onFailure: PropTypes.func,
+            onStart: PropTypes.func,
+            onSuccess: PropTypes.func,
+            psButtonText: PropTypes.string,
+            psProcessingText: PropTypes.string,
+            size: PropTypes.string,
+            usAccept: PropTypes.oneOf(['*', 'image/*', 'application/*']),
+            usButtonText: PropTypes.string,
+            usDisabled: PropTypes.bool,
+            usDropMessage: PropTypes.string,
+            usHelpImage: PropTypes.string,
+            usLabel: PropTypes.string,
+            usPlaceholder: PropTypes.string
+        }),
+        options: PropTypes.arrayOf(PropTypes.shape({
+            id: PropTypes.string,
+            label: PropTypes.oneOfType([PropTypes.node, PropTypes.string]).isRequired,
+            value: PropTypes.oneOfType([
+                PropTypes.number,
+                PropTypes.string,
+                PropTypes.bool,
+                PropTypes.object,
+                PropTypes.instanceOf(Date),
+            ]).isRequired,
+            header: PropTypes.node,
+            icon: PropTypes.string,
+            currency: PropTypes.string,
+            note: PropTypes.node,
+            secondary: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+            separator: PropTypes.bool,
+            disabled: PropTypes.bool
+        })),
+        size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+        validationMessages: PropTypes.shape({
+            required: PropTypes.string,
+            pattern: PropTypes.string,
+            minlength: PropTypes.string,
+            maxlength: PropTypes.string,
+            min: PropTypes.string,
+            max: PropTypes.string
+        })
+    }).isRequired,
+    countryCode: PropTypes.string,
+    onChange: PropTypes.func.isRequired,
+    onFocus: PropTypes.func,
+    onBlur: PropTypes.func,
+    errorMessage: PropTypes.string,
+    warningMessage: PropTypes.string,
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
+};
+Field.defaultProps = {
+    countryCode: null,
+    value: null,
+    errorMessage: null,
+    warningMessage: null,
+    onFocus: null,
+    onBlur: null,
+    label: null
+};

package/build/field/index.d.ts

@@ -0,0 +1,2 @@
+import Field from './Field';
+export default Field;

package/build/field/index.js

@@ -0,0 +1,2 @@
+import Field from './Field';
+export default Field;

package/build/flow/DynamicFlow.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { DynamicFlowProps } from './types';
+declare const DynamicFlow: (props: DynamicFlowProps) => JSX.Element;
+export default DynamicFlow;