@ruliad-engr/forms
Version:
Forms fields, inputs, etc.
1,284 lines (1,261 loc) • 100 kB
JavaScript
import { isPossiblePhoneNumber } from 'libphonenumber-js';
import React, { useMemo, useEffect, useState, useCallback } from 'react';
import { setIn, getIn, FORM_ERROR } from 'final-form';
import { useForm, Field, FormSpy, Form } from 'react-final-form';
export { Field, useForm, useFormState } from 'react-final-form';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { Divider } from '@ruliad-engr/ui/components/Divider';
import { TooltipDropdown } from '@ruliad-engr/ui/components/TooltipDropdown';
import { Text } from '@ruliad-engr/ui/components/Text';
import { useDeviceTargetClass } from '@ruliad-engr/ui/hooks/useDeviceTargetClass';
import { useStyles } from '@ruliad-engr/ui/hooks/useStyles';
import castArray from 'lodash/castArray';
import axios from 'axios';
import { useDropzone } from 'react-dropzone';
import { fromEvent } from 'file-selector';
import { createFileFromDataURL } from '@ruliad-engr/common';
import { RadioButton } from '@ruliad-engr/ui/components/RadioButton';
import { Input } from '@ruliad-engr/ui/components/Input';
import { Checkbox } from '@ruliad-engr/ui/components/Checkbox';
import DatePicker from 'react-datepicker';
import { Select } from '@ruliad-engr/ui/components/Select';
import { Switch } from '@ruliad-engr/ui/components/Switch';
import { Icon } from '@ruliad-engr/ui/components/Icon';
import { Textarea } from '@ruliad-engr/ui/components/Textarea';
import { Button } from '@ruliad-engr/ui/components/Button';
import { Group } from '@ruliad-engr/ui/components/Group';
import '@ruliad-engr/ui/components/Notification';
import { Title } from '@ruliad-engr/ui/components/Title';
import createDecorator from 'final-form-focus';
var phoneValidation = function phoneValidation(value, context) {
return isPossiblePhoneNumber(value, 'RU');
};
var emailValidation = function emailValidation(value, context) {
// from https://emailregex.com/
if (!value) {
return true;
}
// eslint-disable-next-line
var regexp = /^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9]{2,}(?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/;
return regexp.test(String(value).toLowerCase());
};
var emailSymbolsValidation = function emailSymbolsValidation(value) {
if (!value) {
return true;
}
var regexp = /^[a-zA-Z0-9@.+-_]+$/;
return regexp.test(value);
};
var addRequiredFieldsParamToSchema = function addRequiredFieldsParamToSchema(schema) {
var fields = Object.entries(schema.fields);
schema.requiredFields = fields.reduce(function (list, _ref) {
var fieldName = _ref[0],
validationProps = _ref[1];
if (validationProps.exclusiveTests.required) {
list.push(fieldName);
}
return list;
}, []);
return schema;
};
// password validation
var passwordLengthValidation = function passwordLengthValidation(value) {
return value.length >= 8;
};
var passwordUppercaseValidation = function passwordUppercaseValidation(value) {
return /[A-Z]/.test(value);
};
var passwordDigitValidation = function passwordDigitValidation(value) {
return /\d/.test(value);
};
var passwordLatinValidation = function passwordLatinValidation(value) {
return /^[a-zA-Z0-9!@#$%^&*()_+\-=\\[\]{};':"\\|,.<>\\/?]*$/.test(value);
};
function _asyncIterator(iterable) {
var method,
async,
sync,
retry = 2;
for ("undefined" != typeof Symbol && (async = Symbol.asyncIterator, sync = Symbol.iterator); retry--;) {
if (async && null != (method = iterable[async])) return method.call(iterable);
if (sync && null != (method = iterable[sync])) return new AsyncFromSyncIterator(method.call(iterable));
async = "@@asyncIterator", sync = "@@iterator";
}
throw new TypeError("Object is not async iterable");
}
function AsyncFromSyncIterator(s) {
function AsyncFromSyncIteratorContinuation(r) {
if (Object(r) !== r) return Promise.reject(new TypeError(r + " is not an object."));
var done = r.done;
return Promise.resolve(r.value).then(function (value) {
return {
value: value,
done: done
};
});
}
return AsyncFromSyncIterator = function (s) {
this.s = s, this.n = s.next;
}, AsyncFromSyncIterator.prototype = {
s: null,
n: null,
next: function () {
return AsyncFromSyncIteratorContinuation(this.n.apply(this.s, arguments));
},
return: function (value) {
var ret = this.s.return;
return void 0 === ret ? Promise.resolve({
value: value,
done: !0
}) : AsyncFromSyncIteratorContinuation(ret.apply(this.s, arguments));
},
throw: function (value) {
var thr = this.s.return;
return void 0 === thr ? Promise.reject(value) : AsyncFromSyncIteratorContinuation(thr.apply(this.s, arguments));
}
}, new AsyncFromSyncIterator(s);
}
function _regeneratorRuntime() {
_regeneratorRuntime = function () {
return exports;
};
var exports = {},
Op = Object.prototype,
hasOwn = Op.hasOwnProperty,
defineProperty = Object.defineProperty || function (obj, key, desc) {
obj[key] = desc.value;
},
$Symbol = "function" == typeof Symbol ? Symbol : {},
iteratorSymbol = $Symbol.iterator || "@@iterator",
asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator",
toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
function define(obj, key, value) {
return Object.defineProperty(obj, key, {
value: value,
enumerable: !0,
configurable: !0,
writable: !0
}), obj[key];
}
try {
define({}, "");
} catch (err) {
define = function (obj, key, value) {
return obj[key] = value;
};
}
function wrap(innerFn, outerFn, self, tryLocsList) {
var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator,
generator = Object.create(protoGenerator.prototype),
context = new Context(tryLocsList || []);
return defineProperty(generator, "_invoke", {
value: makeInvokeMethod(innerFn, self, context)
}), generator;
}
function tryCatch(fn, obj, arg) {
try {
return {
type: "normal",
arg: fn.call(obj, arg)
};
} catch (err) {
return {
type: "throw",
arg: err
};
}
}
exports.wrap = wrap;
var ContinueSentinel = {};
function Generator() {}
function GeneratorFunction() {}
function GeneratorFunctionPrototype() {}
var IteratorPrototype = {};
define(IteratorPrototype, iteratorSymbol, function () {
return this;
});
var getProto = Object.getPrototypeOf,
NativeIteratorPrototype = getProto && getProto(getProto(values([])));
NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype);
var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype);
function defineIteratorMethods(prototype) {
["next", "throw", "return"].forEach(function (method) {
define(prototype, method, function (arg) {
return this._invoke(method, arg);
});
});
}
function AsyncIterator(generator, PromiseImpl) {
function invoke(method, arg, resolve, reject) {
var record = tryCatch(generator[method], generator, arg);
if ("throw" !== record.type) {
var result = record.arg,
value = result.value;
return value && "object" == typeof value && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) {
invoke("next", value, resolve, reject);
}, function (err) {
invoke("throw", err, resolve, reject);
}) : PromiseImpl.resolve(value).then(function (unwrapped) {
result.value = unwrapped, resolve(result);
}, function (error) {
return invoke("throw", error, resolve, reject);
});
}
reject(record.arg);
}
var previousPromise;
defineProperty(this, "_invoke", {
value: function (method, arg) {
function callInvokeWithMethodAndArg() {
return new PromiseImpl(function (resolve, reject) {
invoke(method, arg, resolve, reject);
});
}
return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
}
});
}
function makeInvokeMethod(innerFn, self, context) {
var state = "suspendedStart";
return function (method, arg) {
if ("executing" === state) throw new Error("Generator is already running");
if ("completed" === state) {
if ("throw" === method) throw arg;
return doneResult();
}
for (context.method = method, context.arg = arg;;) {
var delegate = context.delegate;
if (delegate) {
var delegateResult = maybeInvokeDelegate(delegate, context);
if (delegateResult) {
if (delegateResult === ContinueSentinel) continue;
return delegateResult;
}
}
if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) {
if ("suspendedStart" === state) throw state = "completed", context.arg;
context.dispatchException(context.arg);
} else "return" === context.method && context.abrupt("return", context.arg);
state = "executing";
var record = tryCatch(innerFn, self, context);
if ("normal" === record.type) {
if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue;
return {
value: record.arg,
done: context.done
};
}
"throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg);
}
};
}
function maybeInvokeDelegate(delegate, context) {
var methodName = context.method,
method = delegate.iterator[methodName];
if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator.return && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel;
var record = tryCatch(method, delegate.iterator, context.arg);
if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel;
var info = record.arg;
return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel);
}
function pushTryEntry(locs) {
var entry = {
tryLoc: locs[0]
};
1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry);
}
function resetTryEntry(entry) {
var record = entry.completion || {};
record.type = "normal", delete record.arg, entry.completion = record;
}
function Context(tryLocsList) {
this.tryEntries = [{
tryLoc: "root"
}], tryLocsList.forEach(pushTryEntry, this), this.reset(!0);
}
function values(iterable) {
if (iterable) {
var iteratorMethod = iterable[iteratorSymbol];
if (iteratorMethod) return iteratorMethod.call(iterable);
if ("function" == typeof iterable.next) return iterable;
if (!isNaN(iterable.length)) {
var i = -1,
next = function next() {
for (; ++i < iterable.length;) if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next;
return next.value = undefined, next.done = !0, next;
};
return next.next = next;
}
}
return {
next: doneResult
};
}
function doneResult() {
return {
value: undefined,
done: !0
};
}
return GeneratorFunction.prototype = GeneratorFunctionPrototype, defineProperty(Gp, "constructor", {
value: GeneratorFunctionPrototype,
configurable: !0
}), defineProperty(GeneratorFunctionPrototype, "constructor", {
value: GeneratorFunction,
configurable: !0
}), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) {
var ctor = "function" == typeof genFun && genFun.constructor;
return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name));
}, exports.mark = function (genFun) {
return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun;
}, exports.awrap = function (arg) {
return {
__await: arg
};
}, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () {
return this;
}), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) {
void 0 === PromiseImpl && (PromiseImpl = Promise);
var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl);
return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) {
return result.done ? result.value : iter.next();
});
}, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () {
return this;
}), define(Gp, "toString", function () {
return "[object Generator]";
}), exports.keys = function (val) {
var object = Object(val),
keys = [];
for (var key in object) keys.push(key);
return keys.reverse(), function next() {
for (; keys.length;) {
var key = keys.pop();
if (key in object) return next.value = key, next.done = !1, next;
}
return next.done = !0, next;
};
}, exports.values = values, Context.prototype = {
constructor: Context,
reset: function (skipTempReset) {
if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined);
},
stop: function () {
this.done = !0;
var rootRecord = this.tryEntries[0].completion;
if ("throw" === rootRecord.type) throw rootRecord.arg;
return this.rval;
},
dispatchException: function (exception) {
if (this.done) throw exception;
var context = this;
function handle(loc, caught) {
return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught;
}
for (var i = this.tryEntries.length - 1; i >= 0; --i) {
var entry = this.tryEntries[i],
record = entry.completion;
if ("root" === entry.tryLoc) return handle("end");
if (entry.tryLoc <= this.prev) {
var hasCatch = hasOwn.call(entry, "catchLoc"),
hasFinally = hasOwn.call(entry, "finallyLoc");
if (hasCatch && hasFinally) {
if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0);
if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc);
} else if (hasCatch) {
if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0);
} else {
if (!hasFinally) throw new Error("try statement without catch or finally");
if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc);
}
}
}
},
abrupt: function (type, arg) {
for (var i = this.tryEntries.length - 1; i >= 0; --i) {
var entry = this.tryEntries[i];
if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) {
var finallyEntry = entry;
break;
}
}
finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null);
var record = finallyEntry ? finallyEntry.completion : {};
return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record);
},
complete: function (record, afterLoc) {
if ("throw" === record.type) throw record.arg;
return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel;
},
finish: function (finallyLoc) {
for (var i = this.tryEntries.length - 1; i >= 0; --i) {
var entry = this.tryEntries[i];
if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel;
}
},
catch: function (tryLoc) {
for (var i = this.tryEntries.length - 1; i >= 0; --i) {
var entry = this.tryEntries[i];
if (entry.tryLoc === tryLoc) {
var record = entry.completion;
if ("throw" === record.type) {
var thrown = record.arg;
resetTryEntry(entry);
}
return thrown;
}
}
throw new Error("illegal catch attempt");
},
delegateYield: function (iterable, resultName, nextLoc) {
return this.delegate = {
iterator: values(iterable),
resultName: resultName,
nextLoc: nextLoc
}, "next" === this.method && (this.arg = undefined), ContinueSentinel;
}
}, exports;
}
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
}
if (info.done) {
resolve(value);
} else {
Promise.resolve(value).then(_next, _throw);
}
}
function _asyncToGenerator(fn) {
return function () {
var self = this,
args = arguments;
return new Promise(function (resolve, reject) {
var gen = fn.apply(self, args);
function _next(value) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
}
function _throw(err) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
}
_next(undefined);
});
};
}
/**
* Sets the `innerError.message` in an `errors` object at the key
* defined by `innerError.path`.
* @param {Object} errors The object to set the error in.
* @param {{ path: string, message: string }} innerError A `yup` field error.
* @returns {Object} The result of setting the new error message onto `errors`.
*/
var setInError = function setInError(errors, innerError) {
return setIn(errors, innerError.path, innerError.message);
};
/**
* Empty object map with no prototype. Used as default
* value for reducing the `err.inner` array of errors
* from a `yup~ValidationError`.
*/
var emptyObj = Object.create(null);
/**
* Takes a `yup` validation schema and returns a function that expects
* a map of values to validate. If the validation passes, the function resolves to `undefined`
* (signalling that the values are valid). If the validation doesn't pass, it resolves
* to a map of invalid field names to errors.
* @param {import('yup').ObjectSchema} schema `yup` schema definition.
* @returns {(values: Object) => Promise<?Object>} An async function that expects some `values`
* and resolves to either `undefined` or a map of field names to error messages.
*/
var makeValidate = function makeValidate(schema) {
return /*#__PURE__*/function () {
var _validate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(values) {
return _regeneratorRuntime().wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_context.prev = 0;
_context.next = 3;
return schema.validate(values, {
abortEarly: false
});
case 3:
_context.next = 8;
break;
case 5:
_context.prev = 5;
_context.t0 = _context["catch"](0);
return _context.abrupt("return", _context.t0.inner.reduce(setInError, emptyObj));
case 8:
case "end":
return _context.stop();
}
}, _callee, null, [[0, 5]]);
}));
function validate(_x) {
return _validate.apply(this, arguments);
}
return validate;
}();
};
function useYupValidationSchema(schema, language) {
var validate = useMemo(function () {
return schema && makeValidate(schema);
}, [schema, language]);
return validate;
}
function FieldWrapperBase(props) {
var after = props.after,
afterItem = props.afterItem,
aboutMeCounter = props.aboutMeCounter,
before = props.before,
beforeItem = props.beforeItem,
children = props.children,
className = props.className,
desc = props.desc,
descSize = props.descSize,
descTextColor = props.descTextColor,
descTextWidth = props.descTextWidth,
dividerDirection = props.dividerDirection,
dividerFill = props.dividerFill,
dividerSize = props.dividerSize,
dividerWidth = props.dividerWidth;
props.errorsList;
var emailUniqueError = props.emailUniqueError,
userNameUniqueError = props.userNameUniqueError,
fieldClassName = props.fieldClassName,
form = props.form,
id = props.id,
inputName = props.inputName,
inputValue = props.inputValue,
generateName = props.generateName,
hideLabel = props.hideLabel,
passwordTips = props.passwordTips,
isDisabled = props.isDisabled,
isRequired = props.isRequired,
label = props.label,
labelAfter = props.labelAfter,
labelAfterSize = props.labelAfterSize,
labelAfterWidth = props.labelAfterWidth,
labelAfterColor = props.labelAfterColor,
labelAfterClassName = props.labelAfterClassName,
labelChildren = props.labelChildren,
labelSize = props.labelSize,
labelTextColor = props.labelTextColor,
labelTextWidth = props.labelTextWidth,
loginForm = props.loginForm,
errorMessageTextSize = props.errorMessageTextSize,
errorMessageTextWeight = props.errorMessageTextWeight,
errorMessageTextColor = props.errorMessageTextColor,
message = props.message,
messageTextSize = props.messageTextSize,
messageTextColor = props.messageTextColor,
messageTextWeight = props.messageTextWeight,
metaActive = props.metaActive,
metaError = props.metaError,
metaModifiedSinceLastSubmit = props.metaModifiedSinceLastSubmit,
metaSubmitError = props.metaSubmitError,
metaSubmitFailed = props.metaSubmitFailed,
metaTouched = props.metaTouched,
metaValid = props.metaValid,
nicknameTip = props.nicknameTip,
set = props.set,
setErrorList = props.setErrorList,
isShouldAddSpace = props.isShouldAddSpace,
type = props.type,
Tag = props.tag,
showErrorsOnSubmit = props.showErrorsOnSubmit;
var error = metaError || !metaModifiedSinceLastSubmit && metaSubmitError || false;
var formState = form == null ? void 0 : form.getState();
var showError = useMemo(function () {
if (showErrorsOnSubmit) {
return metaSubmitFailed && metaTouched && error;
} else {
return metaTouched && error;
}
}, [showErrorsOnSubmit, metaSubmitFailed, metaTouched, error]);
var showValid = useMemo(function () {
var hasValue = Array.isArray(inputValue) ? inputValue.length : inputValue;
var isModifiedAfterSubmit = !metaError && metaSubmitError && metaModifiedSinceLastSubmit;
return hasValue && (metaValid || isModifiedAfterSubmit);
}, [inputValue, metaValid, metaError, metaSubmitError, metaModifiedSinceLastSubmit]);
var formFieldClass = useMemo(function () {
return clsx(className, showError && 'form__item_state_error', showValid && 'form__item_state_success', isRequired && 'form__item_state_required', metaActive && 'form__item_state_focus', inputValue && 'form__item_state_filled');
}, [className, showError, showValid, isRequired, metaActive, inputValue]);
useEffect(function () {
if (setErrorList) {
// need to upgrade
setErrorList((formState == null ? void 0 : formState.hasSubmitErrors) && !(formState != null && formState.modifiedSinceLastSubmit) || (formState == null ? void 0 : formState.hasValidationErrors));
}
}, [formState == null ? void 0 : formState.hasValidationErrors, formState == null ? void 0 : formState.hasSubmitErrors, formState == null ? void 0 : formState.modifiedSinceLastSubmit]);
var fieldClass = useMemo(function () {
return clsx(fieldClassName, showError && fieldClassName + "_state_error", showValid && fieldClassName + "_state_success", metaActive && fieldClassName + "_state_focus", inputValue && fieldClassName + "_state_filled");
}, [fieldClassName, showError, showValid, metaActive, inputValue]);
var sizeClass = useDeviceTargetClass(props, {
prefix: 'form-field_size_',
propsKey: 'size'
});
var fillClass = useDeviceTargetClass(props, {
prefix: 'fill_',
propsKey: 'fill'
});
var inputFillClass = useDeviceTargetClass(props, {
prefix: 'fill_',
propsKey: 'inputFill'
});
var shapeClass = useDeviceTargetClass(props, {
prefix: 'form-field_shape_',
propsKey: 'shape'
});
var inputShapeClass = useDeviceTargetClass(props, {
prefix: 'form-field__item-value_shape_',
propsKey: 'inputShape'
});
var directionClass = useDeviceTargetClass(props, {
prefix: 'direction_',
propsKey: 'direction'
});
var widthClass = useDeviceTargetClass(props, {
prefix: 'width_',
propsKey: 'width'
});
var _useStyles = useStyles(props),
formFieldStyles = _useStyles.styles;
return /*#__PURE__*/React.createElement(Tag, {
className: clsx(formFieldClass, 'form__item', 'form-field', type && "form-field_type_" + type, set && "form-field_set_" + set, sizeClass, fillClass, shapeClass, directionClass, widthClass),
style: formFieldStyles
}, before, label && /*#__PURE__*/React.createElement("div", {
htmlFor: id,
className: clsx('form-field__label', hideLabel && 'form-field__hide-label')
}, /*#__PURE__*/React.createElement(Text, {
size: labelSize,
textWeight: labelTextWidth,
textColor: labelTextColor
}, label), /*#__PURE__*/React.createElement(Text, {
size: labelAfterSize,
textWeight: labelAfterWidth,
textColor: labelAfterColor,
className: labelAfterClassName
}, labelAfter), labelChildren), desc && /*#__PURE__*/React.createElement("div", {
className: "form-field__desc"
}, /*#__PURE__*/React.createElement(Text, {
size: descSize,
textWeight: descTextWidth,
textColor: descTextColor
}, desc)), /*#__PURE__*/React.createElement("div", {
className: clsx('form-field__content', isDisabled && 'form-field__content-disabled', inputFillClass, inputShapeClass)
}, /*#__PURE__*/React.createElement("div", {
className: clsx('form-field__content-inner', fieldClass)
}, beforeItem, children, afterItem), /*#__PURE__*/React.createElement(Divider, {
className: "form-field__item-divider",
width: dividerWidth,
direction: dividerDirection,
size: dividerSize,
fill: dividerFill
})), (inputName === 'password' || inputName === 'new_password') && passwordTips && /*#__PURE__*/React.createElement(TooltipDropdown, {
config: passwordTips,
divider: true,
label: "Show me the recipe for a strong password",
passwordTips: true
}), ' ', nicknameTip && nicknameTip(generateName), aboutMeCounter && aboutMeCounter(inputValue.length), (!!showError || !!message || !!emailUniqueError || !!userNameUniqueError) && /*#__PURE__*/React.createElement("div", {
className: "form-field__message"
}, Boolean(showError) && /*#__PURE__*/React.createElement(Text, {
className: "form__item-message-item form__item-message-item_type-error",
size: errorMessageTextSize,
textWeight: errorMessageTextWeight,
textColor: errorMessageTextColor,
id: inputName + "-error"
}, error), Boolean(emailUniqueError) && inputName === 'useremail' && /*#__PURE__*/React.createElement(Text, {
className: "form__item-message-item form__item-message-item_type-error",
size: errorMessageTextSize,
textWeight: errorMessageTextWeight,
textColor: errorMessageTextColor,
id: inputName + "-error"
}, emailUniqueError), Boolean(userNameUniqueError) && inputName === 'username' && /*#__PURE__*/React.createElement(Text, {
className: "form__item-message-item form__item-message-item_type-error",
size: errorMessageTextSize,
textWeight: errorMessageTextWeight,
textColor: errorMessageTextColor,
id: inputName + "-error"
}, userNameUniqueError), Boolean(message) && /*#__PURE__*/React.createElement(Text, {
className: "form__item-message-item form__item-message-item_type_message",
size: messageTextSize,
textWeight: messageTextWeight,
textColor: messageTextColor
}, message)), Boolean(!showError) && Boolean(!message) && !loginForm && /*#__PURE__*/React.createElement("div", {
className: "form-field__message"
}, /*#__PURE__*/React.createElement(Text, {
size: messageTextSize
}, !isShouldAddSpace && "\xA0")), after);
}
FieldWrapperBase.defaultProps = {
tag: 'div',
errorMessageTextSize: 's',
errorMessageTextColor: 'errorTextSecondary'
};
FieldWrapperBase.propTypes = {
after: PropTypes.any,
afterItem: PropTypes.any,
autoComplete: PropTypes.string,
aboutMeCounter: PropTypes.func,
before: PropTypes.any,
beforeItem: PropTypes.any,
children: PropTypes.any,
className: PropTypes.string,
desc: PropTypes.string,
descSize: PropTypes.string,
descTextColor: PropTypes.string,
descTextWidth: PropTypes.string,
dividerDirection: PropTypes.string,
dividerFill: PropTypes.string,
dividerSize: PropTypes.string,
dividerWidth: PropTypes.string,
errorsList: PropTypes.func,
emailUniqueError: PropTypes.string,
userNameUniqueError: PropTypes.string,
fieldClassName: PropTypes.string,
id: PropTypes.string,
inputName: PropTypes.string,
inputOnBlur: PropTypes.func,
inputOnChange: PropTypes.func,
inputOnFocus: PropTypes.func,
inputValue: PropTypes.any,
isRequired: PropTypes.bool,
itemType: PropTypes.string,
isShouldAddSpace: PropTypes.bool,
generateName: PropTypes.func,
hideLabel: PropTypes.bool,
label: PropTypes.any,
labelSize: PropTypes.string,
labelTextColor: PropTypes.string,
labelTextWidth: PropTypes.string,
loginForm: PropTypes.bool,
errorMessageTextSize: PropTypes.string,
errorMessageTextWidth: PropTypes.string,
errorMessageTextColor: PropTypes.string,
message: PropTypes.string,
messageSize: PropTypes.string,
messageTextColor: PropTypes.string,
messageTextWidth: PropTypes.string,
metaActive: PropTypes.bool,
metaError: PropTypes.string,
metaModifiedSinceLastSubmit: PropTypes.bool,
metaSubmitError: PropTypes.string,
metaSubmitFailed: PropTypes.bool,
metaTouched: PropTypes.bool,
metaValid: PropTypes.bool,
nickname: PropTypes.bool,
nicknameTip: PropTypes.any,
passwordTips: PropTypes.any,
setErrorList: PropTypes.func,
set: PropTypes.string,
showErrorsOnSubmit: PropTypes.bool,
type: PropTypes.string
};
function FieldWrapper(props) {
var inputName = props.inputName;
var _useForm = useForm(),
change = _useForm.change; // , mutators
useEffect(function () {
return function () {
change(inputName, undefined);
};
}, []);
return /*#__PURE__*/React.createElement(FieldWrapperBase, props);
}
FieldWrapper.propTypes = {
autoComplete: PropTypes.string,
children: PropTypes.any,
className: PropTypes.string,
fieldClassName: PropTypes.string,
hint: PropTypes.string,
inputName: PropTypes.string,
inputOnBlur: PropTypes.func,
inputOnChange: PropTypes.func,
inputOnFocus: PropTypes.func,
inputValue: PropTypes.any,
isRequired: PropTypes.bool,
itemType: PropTypes.string,
label: PropTypes.any,
metaActive: PropTypes.bool,
metaError: PropTypes.string,
metaModifiedSinceLastSubmit: PropTypes.bool,
metaSubmitError: PropTypes.string,
metaSubmitFailed: PropTypes.bool,
metaTouched: PropTypes.bool,
metaValid: PropTypes.bool,
showErrorsOnSubmit: PropTypes.bool
};
var ChoiceList = /*#__PURE__*/React.memo(function ChoiceList(props) {
var options = props.options,
inputName = props.inputName,
_props$inputValue = props.inputValue,
inputValue = _props$inputValue === void 0 ? [] : _props$inputValue,
onChange = props.onChange,
isMultiple = props.isMultiple;
var _useState = useState(castArray(inputValue)),
selectedValues = _useState[0],
setSelectedValues = _useState[1];
var onClickItem = useCallback(function (targetValue) {
setSelectedValues(function (prevState) {
var isSelected = prevState.find(function (value) {
return value === targetValue;
});
if (isMultiple) {
if (isSelected) {
// ... without target value
return prevState.filter(function (value) {
return value !== targetValue;
});
} else {
// ... with target value
return [].concat(prevState, [targetValue]);
}
} else {
if (isSelected) {
return [];
} else {
return [targetValue];
}
}
});
}, [isMultiple]);
useEffect(function () {
return onChange(inputName, selectedValues);
}, [selectedValues]);
useEffect(function () {
if (!inputValue) {
setSelectedValues([]);
}
}, [inputValue]);
return /*#__PURE__*/React.createElement("div", {
className: "form-tab-selector"
}, /*#__PURE__*/React.createElement("div", {
className: "form-tab-selector__wrapper"
}, options.map(function (item) {
return /*#__PURE__*/React.createElement("div", {
key: "choice_" + item.value,
onClick: function onClick() {
return onClickItem(item.value);
},
className: clsx('form-tab-selector__item', selectedValues.includes(item.value) && 'form-tab-selector__item_state_active')
}, item.label);
})));
});
ChoiceList.propTypes = {
options: PropTypes.array,
inputName: PropTypes.string,
inputValue: PropTypes.array,
isMultiple: PropTypes.bool,
isRequired: PropTypes.bool,
metaError: PropTypes.string,
metaModified: PropTypes.bool,
metaTouched: PropTypes.bool,
onChange: PropTypes.func,
placeholder: PropTypes.string
};
var Choice = /*#__PURE__*/React.memo(function Choice(props) {
var options = props.options,
classNameInput = props.classNameInput,
classNameInputWrapper = props.classNameInputWrapper,
classNameGroupItem = props.classNameGroupItem,
isMultiple = props.isMultiple,
isRequired = props.isRequired,
label = props.label,
name = props.name,
messageType = props.messageType,
placeholder = props.placeholder;
var _useForm = useForm(),
change = _useForm.change;
return /*#__PURE__*/React.createElement(Field, {
name: name
}, function (_ref) {
var input = _ref.input,
meta = _ref.meta;
return /*#__PURE__*/React.createElement(FieldWrapper, {
className: clsx(classNameInputWrapper, classNameGroupItem),
fieldClassName: "form-tab-selector",
inputClass: classNameInput || 'form__item_type_tab-selector',
inputName: input.name,
inputValue: input.value || [],
isRequired: isRequired,
label: label,
messageType: messageType,
metaActive: meta.active,
metaError: meta.error,
metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
metaSubmitError: meta.submitError,
metaSubmitFailed: meta.submitFailed,
metaTouched: meta.touched,
metaValid: meta.valid
}, /*#__PURE__*/React.createElement(ChoiceList, {
options: options,
inputName: input.name,
inputValue: input.value || [],
isMultiple: isMultiple,
isRequired: isRequired,
metaError: meta.error,
metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
metaSubmitError: meta.submitError,
metaSubmitFailed: meta.submitFailed,
metaTouched: meta.touched,
metaValid: meta.valid,
placeholder: placeholder,
onChange: change
}));
});
});
Choice.propTypes = {
options: PropTypes.array.isRequired,
name: PropTypes.string.isRequired,
className: PropTypes.string,
inputClass: PropTypes.string,
isMultiple: PropTypes.bool,
isRequired: PropTypes.bool,
label: PropTypes.string,
placeholder: PropTypes.string
};
function getFileByURL(_x) {
return _getFileByURL.apply(this, arguments);
}
function _getFileByURL() {
_getFileByURL = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(url) {
var _response$headers$con, response, blobObject, dirtyFilename, filename, typeParts, fileType;
return _regeneratorRuntime().wrap(function _callee3$(_context3) {
while (1) switch (_context3.prev = _context3.next) {
case 0:
_context3.prev = 0;
_context3.next = 3;
return axios({
url: "/api/" + url + "/",
responseType: 'blob'
});
case 3:
response = _context3.sent;
blobObject = response.data;
dirtyFilename = (_response$headers$con = response.headers['content-disposition']) == null ? void 0 : _response$headers$con.split('filename=')[1]; // Remove double quotes
filename = dirtyFilename == null ? void 0 : dirtyFilename.substring(1).slice(0, -1);
if (!filename) {
typeParts = blobObject.type.split('/');
fileType = typeParts[typeParts.length - 1];
filename = new Date().getTime() + "." + fileType;
}
return _context3.abrupt("return", new File([blobObject], filename, {
type: blobObject.type
}));
case 11:
_context3.prev = 11;
_context3.t0 = _context3["catch"](0);
console.log('error: ', _context3.t0);
return _context3.abrupt("return", null);
case 15:
case "end":
return _context3.stop();
}
}, _callee3, null, [[0, 11]]);
}));
return _getFileByURL.apply(this, arguments);
}
function convertToFiles(_x2, _x3) {
return _convertToFiles.apply(this, arguments);
}
function _convertToFiles() {
_convertToFiles = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(inputValue, isPreviews) {
var newFiles, _iteratorAbruptCompletion, _didIteratorError, _iteratorError, _iterator, _step, value, newFile, isURL;
return _regeneratorRuntime().wrap(function _callee4$(_context4) {
while (1) switch (_context4.prev = _context4.next) {
case 0:
newFiles = [];
_iteratorAbruptCompletion = false;
_didIteratorError = false;
_context4.prev = 3;
_iterator = _asyncIterator(castArray(inputValue));
case 5:
_context4.next = 7;
return _iterator.next();
case 7:
if (!(_iteratorAbruptCompletion = !(_step = _context4.sent).done)) {
_context4.next = 21;
break;
}
value = _step.value;
newFile = null; // Download image by url and save as File instance
isURL = typeof value === 'string' && value.includes('/');
if (!(value.image || isURL)) {
_context4.next = 16;
break;
}
_context4.next = 14;
return getFileByURL(value.image || value);
case 14:
newFile = _context4.sent;
if (newFile) {
setFileDataURL(newFile);
}
case 16:
// Convert dataURL to File instance
if (value.dataURL) {
newFile = createFileFromDataURL(value.name || value.path, value.dataURL);
newFile.dataURL = value.dataURL;
}
// Save new File to state
if (newFile) {
newFile.id = value.id;
if (isPreviews) {
newFile.preview = URL.createObjectURL(newFile);
}
newFiles.push(newFile);
} else if (value) {
newFiles.push(value);
}
case 18:
_iteratorAbruptCompletion = false;
_context4.next = 5;
break;
case 21:
_context4.next = 27;
break;
case 23:
_context4.prev = 23;
_context4.t0 = _context4["catch"](3);
_didIteratorError = true;
_iteratorError = _context4.t0;
case 27:
_context4.prev = 27;
_context4.prev = 28;
if (!(_iteratorAbruptCompletion && _iterator["return"] != null)) {
_context4.next = 32;
break;
}
_context4.next = 32;
return _iterator["return"]();
case 32:
_context4.prev = 32;
if (!_didIteratorError) {
_context4.next = 35;
break;
}
throw _iteratorError;
case 35:
return _context4.finish(32);
case 36:
return _context4.finish(27);
case 37:
return _context4.abrupt("return", newFiles);
case 38:
case "end":
return _context4.stop();
}
}, _callee4, null, [[3, 23, 27, 37], [28,, 32, 36]]);
}));
return _convertToFiles.apply(this, arguments);
}
function setFileDataURL(file, resolve) {
resolve = resolve || function () {};
// Init reader and save his file
var reader = new FileReader();
reader._readedFile = file;
// Set handlers
reader.onabort = function () {
return resolve();
};
reader.onerror = function () {
return resolve();
};
reader.onload = function (event) {
event.target._readedFile.dataURL = reader.result;
resolve();
};
// Run reader
if (file instanceof File) {
reader.readAsDataURL(file);
} else {
resolve();
}
}
var FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(props) {
// prettier-ignore
var inputName = props.inputName,
inputValue = props.inputValue,
removeButtonText = props.removeButtonText,
hintTitle = props.hintTitle,
hintDescription = props.hintDescription,
isShowFilename = props.isShowFilename,
isPreviews = props.isPreviews,
loadingText = props.loadingText,
_props$dropzoneProps = props.dropzoneProps,
dropzoneProps = _props$dropzoneProps === void 0 ? {} : _props$dropzoneProps;
var onAddFiles = props.onAddFiles,
onDeleteFile = props.onDeleteFile;
var _useState = useState(''),
fileError = _useState[0],
setFileError = _useState[1];
var _useState2 = useState(false),
fileIsLoading = _useState2[0],
setFileIsLoading = _useState2[1];
// State with instances of "File" type
var _useState3 = useState(inputValue ? castArray(inputValue) : []),
files = _useState3[0],
setFiles = _useState3[1];
// Save to mobx state
var _useForm = useForm(),
change = _useForm.change;
var changeFormState = useCallback(function (newFiles) {
// If max files in dropzone is 1 - return file as it self, else as array of files
// ps: for old projects compatibility
var toSave = dropzoneProps.maxFiles == 1 ? newFiles[0] : newFiles;
change(inputName, toSave);
return toSave;
}, [dropzoneProps, change]);
// Create dropzone options
var _useDropzone = useDropzone(Object.assign({
maxSize: 5242880
}, dropzoneProps, {
getFilesFromEvent: function () {
var _getFilesFromEvent = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(event) {
var result, newFiles;
return _regeneratorRuntime().wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return fromEvent(event);
case 2:
result = _context.sent;
newFiles = result.filter(function (item) {
return item instanceof File;
}); // Add exists and new files to accepted(or rejected)
return _context.abrupt("return", [].concat(files, newFiles));
case 5:
case "end":
return _context.stop();
}
}, _callee);
}));
function getFilesFromEvent(_x4) {
return _getFilesFromEvent.apply(this, arguments);
}
return getFilesFromEvent;
}(),
onDropAccepted: function onDropAccepted(acceptedFiles, event) {
// If dropped files has accepted and we need a previews
if (isPreviews) {
// Add preview to every file
acceptedFiles.forEach(function (file) {
file.preview = URL.createObjectURL(file);
});
}
// Save to form data (including empty when files are not valid)
setFiles(acceptedFiles);
setFileError('');
// Save DataURL for all files
var readerPromisesList = acceptedFiles.map(function (file) {
return new Promise(function (resolve) {
return setFileDataURL(file, resolve);
});
});
// Save files to form values
Promise.all(readerPromisesList).then(function () {
var filesToSave = changeFormState(acceptedFiles);
if (onAddFiles) {
onAddFiles(filesToSave, inputName);
}
});
},
onDropRejected: function onDropRejected(rejectedFiles, event) {
// If dropped files has rejected
if (rejectedFiles.length) {
var _rejectedFiles$0$erro;
var firstFileError = (_rejectedFiles$0$erro = rejectedFiles[0].errors[0]) == null ? void 0 : _rejectedFiles$0$erro.message;
// Show error
setFileError(firstFileError || 'Error on adding file');
} else {
// Else clean error
setFileError('');
}
}
})),
getRootProps = _useDropzone.getRootProps,
getInputProps = _useDropzone.getInputProps;
// Delete file from dropzone
var removeFile = useCallback(function (event, index) {
event.stopPropagation();
event.preventDefault();
var newFiles = [].concat(files);
newFiles.splice(index, 1);
if (onDeleteFile) {
onDeleteFile(files[index], inputName);
}
changeFormState(newFiles);
}, [files, changeFormState, onDeleteFile]);
//
var convertFiledValueAndSaveAsFiles = useCallback( /*#__PURE__*/function () {
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(newInputValue) {
var newFiles;
return _regeneratorRuntime().wrap(function _callee2$(_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
setFileIsLoading(true);
_context2.next = 3;
return convertToFiles(newInputValue, isPreviews);
case 3:
newFiles = _context2.sent;
setFileIsLoading(false);
setFiles(newFiles);
return _context2.abrupt("return", newFiles);
case 7:
case "end":
return _context2.stop();
}
}, _callee2);
}));
return function (_x5) {
return _ref.apply(this, arguments);
};
}(), [isPreviews]);
useEffect(function () {
// First time convert value to Files and save to local and form state
convertFiledValueAndSaveAsFiles(inputValue).then(function (newFiles) {
return changeFormState(newFiles);
});
}, []); // eslint-disable-line
useEffect(function () {
// Everytime convert value to Files and save to local state
if (!inputValue) {
setFiles([]);
} else {
convertFiledValueAndSaveAsFiles(inputValue);
}
// only "inputValue"
}, [inputValue]); // eslint-disable-line
useEffect(function () {
// Make sure to revoke the data uris to avoid memory leaks, will run on unmount
return function () {
return files.forEach(function (file) {
return URL.revokeObjectURL(file == null ? void 0 : file.preview);
});
};
}, []); // eslint-disable-line
// prettier-ignore
/*
const itemClass = useMemo(
() => clsx(
'form__item',
'form__item_type_dropzone',
// itemClassName,
// metaError || fileError && 'form__item_state_error',
files.length && 'form__item_state_success'
),
[files.length]
)
*/
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", getRootProps({
className: 'form-dropzone__dropzone dropzone'
}), /*#__PURE__*/React.createElement("input", Object.assign({}, getInputProps(), {
name: inputName
})), /*#__PURE__*/React.createElement("div", {
className: "form-dropzone__dropzone-wrapper"
}, files.map(function (file,