envoc-form 2.0.1-8 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -7
- package/dist/css/envoc-form-styles.css +7 -6
- package/dist/css/envoc-form-styles.css.map +1 -1
- package/es/AddressInput/AddressInput.js +7 -6
- package/es/ConfirmBaseForm/ConfirmBaseForm.js +3 -2
- package/es/ConfirmDeleteForm/ConfirmDeleteForm.js +6 -5
- package/es/DatePickerInput/DatePickerInput.js +8 -3
- package/es/FileInput/DefaultFileList.js +3 -2
- package/es/FileInput/DropzoneFileInput.js +15 -12
- package/es/FileInput/FileInput.js +31 -9
- package/es/Form/Form.js +4 -2
- package/es/Form/FormBasedPreventNavigation.js +4 -7
- package/es/FormGroupWrapper.js +2 -1
- package/es/FormInput/FormInput.js +14 -8
- package/es/FormInputArray/FormInputArray.js +39 -24
- package/es/IconInput.js +2 -1
- package/es/ReactSelectField/ReactSelectField.js +6 -3
- package/es/SubmitFormButton.js +2 -1
- package/es/__Tests__/FormTestBase.js +5 -2
- package/es/normalizers.js +10 -5
- package/es/useStandardFormInput.js +4 -2
- package/es/utils/objectToFormData.js +10 -2
- package/lib/AddressInput/AddressInput.js +14 -8
- package/lib/ConfirmBaseForm/ConfirmBaseForm.js +4 -2
- package/lib/ConfirmDeleteForm/ConfirmDeleteForm.js +6 -4
- package/lib/DatePickerInput/DatePickerInput.js +9 -3
- package/lib/FileInput/DefaultFileList.js +3 -2
- package/lib/FileInput/DropzoneFileInput.js +17 -12
- package/lib/FileInput/FileInput.js +39 -10
- package/lib/Form/Form.js +11 -4
- package/lib/Form/FormBasedPreventNavigation.js +4 -10
- package/lib/FormGroupWrapper.js +3 -1
- package/lib/FormInput/FormInput.js +15 -8
- package/lib/FormInputArray/FormInputArray.js +47 -26
- package/lib/FormSection.js +5 -1
- package/lib/IconInput.js +3 -1
- package/lib/ReactSelectField/ReactSelectField.js +13 -5
- package/lib/ReactSelectField/index.js +6 -2
- package/lib/SubmitFormButton.js +3 -1
- package/lib/__Tests__/FormTestBase.js +6 -2
- package/lib/index.js +7 -3
- package/lib/normalizers.js +10 -5
- package/lib/useStandardFormInput.js +5 -2
- package/lib/utils/objectToFormData.js +10 -2
- package/lib/validators/index.js +5 -1
- package/package.json +99 -92
- package/src/AddressInput/AddesssInput.test.js +23 -23
- package/src/AddressInput/AddressInput.js +73 -73
- package/src/AddressInput/UsStates.js +53 -53
- package/src/AddressInput/__snapshots__/AddesssInput.test.js.snap +207 -207
- package/src/AddressInput/index.js +2 -2
- package/src/BoolInput/BoolInput.js +7 -7
- package/src/BoolInput/BoolInput.test.js +23 -23
- package/src/BoolInput/InlineBoolInput.js +7 -7
- package/src/BoolInput/__snapshots__/BoolInput.test.js.snap +89 -89
- package/src/BoolInput/boolOptions.js +6 -6
- package/src/BoolInput/index.js +4 -4
- package/src/ConfirmBaseForm/ConfirmBaseForm.js +37 -37
- package/src/ConfirmBaseForm/ConfirmBaseForm.test.js +14 -14
- package/src/ConfirmBaseForm/__snapshots__/ConfirmBaseForm.test.js.snap +23 -23
- package/src/ConfirmBaseForm/index.js +1 -1
- package/src/ConfirmDeleteForm/ConfirmDeleteForm.js +39 -39
- package/src/ConfirmDeleteForm/ConfirmDeleteForm.test.js +24 -24
- package/src/ConfirmDeleteForm/__snapshots__/ConfirmDeleteForm.test.js.snap +25 -25
- package/src/ConfirmDeleteForm/index.js +1 -1
- package/src/DatePickerInput/DatePickerInput.js +49 -46
- package/src/DatePickerInput/DatePickerInput.test.js +74 -74
- package/src/DatePickerInput/__snapshots__/DatePickerInput.test.js.snap +134 -134
- package/src/DatePickerInput/date-picker-input.scss +42 -42
- package/src/DatePickerInput/index.js +3 -3
- package/src/ErrorScrollTarget.js +6 -6
- package/src/FileInput/DefaultFileList.js +39 -39
- package/src/FileInput/DropzoneFileInput.js +56 -55
- package/src/FileInput/DropzoneFileInput.test.js +24 -15
- package/src/FileInput/FileInput.js +77 -49
- package/src/FileInput/FileInput.test.js +24 -15
- package/src/FileInput/__snapshots__/DropzoneFileInput.test.js.snap +57 -28
- package/src/FileInput/__snapshots__/FileInput.test.js.snap +58 -22
- package/src/FileInput/file-input.scss +57 -57
- package/src/FileInput/index.js +4 -4
- package/src/Form/FocusError.js +48 -48
- package/src/Form/Form.js +139 -138
- package/src/Form/Form.test.js +23 -23
- package/src/Form/FormBasedPreventNavigation.js +25 -25
- package/src/Form/ServerErrorContext.js +7 -7
- package/src/Form/__snapshots__/Form.test.js.snap +9 -9
- package/src/Form/index.js +3 -3
- package/src/FormGroup.js +30 -30
- package/src/FormGroupWrapper.js +28 -28
- package/src/FormInput/FormInput.js +145 -144
- package/src/FormInput/FormInput.test.js +66 -66
- package/src/FormInput/__snapshots__/FormInput.test.js.snap +323 -316
- package/src/FormInput/form-input.scss +9 -9
- package/src/FormInput/index.js +2 -2
- package/src/FormInputArray/FormInputArray.js +224 -210
- package/src/FormInputArray/FormInputArray.test.js +108 -59
- package/src/FormInputArray/__snapshots__/FormInputArray.test.js.snap +52 -40
- package/src/FormInputArray/form-input-array.scss +13 -8
- package/src/FormInputArray/index.js +2 -2
- package/src/FormSection.js +13 -13
- package/src/IconInput.js +31 -31
- package/src/InlineFormInput/InlineFormInput.js +6 -6
- package/src/InlineFormInput/InlineFormInput.test.js +23 -23
- package/src/InlineFormInput/__snapshots__/InlineFormInput.test.js.snap +26 -26
- package/src/InlineFormInput/index.js +3 -3
- package/src/InlineFormInput/inline-form-input.scss +3 -3
- package/src/MoneyInput/InlineMoneyInput.js +7 -7
- package/src/MoneyInput/MoneyInput.js +7 -7
- package/src/MoneyInput/MoneyInputs.test.js +43 -43
- package/src/MoneyInput/__snapshots__/MoneyInputs.test.js.snap +81 -81
- package/src/MoneyInput/index.js +4 -4
- package/src/MoneyInput/money-input.scss +3 -3
- package/src/MoneyInput/moneyInputProps.js +12 -12
- package/src/NestedFormFieldContext.js +6 -6
- package/src/ReactSelectField/ReactSelectField.js +122 -120
- package/src/ReactSelectField/index.js +6 -6
- package/src/ReactSelectField/react-select-field.scss +5 -5
- package/src/StandardFormActions.js +27 -27
- package/src/SubmitFormButton.js +28 -28
- package/src/__Tests__/FormTestBase.js +14 -11
- package/src/__Tests__/IconInput.test.js +23 -23
- package/src/__Tests__/StandardFormActions.test.js +23 -23
- package/src/__Tests__/SubmitFormButton.test.js +23 -23
- package/src/__Tests__/__snapshots__/IconInput.test.js.snap +38 -38
- package/src/__Tests__/__snapshots__/StandardFormActions.test.js.snap +25 -25
- package/src/__Tests__/__snapshots__/SubmitFormButton.test.js.snap +18 -18
- package/src/__Tests__/index.js +2 -2
- package/src/_variables.scss +11 -11
- package/src/index.js +33 -33
- package/src/normalizers.js +42 -32
- package/src/selectors.js +3 -3
- package/src/styles.scss +7 -7
- package/src/useStandardFormInput.js +118 -118
- package/src/utils/index.js +3 -3
- package/src/utils/objectContainsNonSerializableProperty.js +15 -15
- package/src/utils/objectContainsNonSerializableProperty.test.js +49 -49
- package/src/utils/objectToFormData.js +89 -83
- package/src/utils/objectToFormData.test.js +76 -47
- package/src/utils/typeChecks.js +18 -18
- package/src/validators/index.js +2 -2
- package/src/validators/validators.js +93 -93
- package/src/validators/validators.test.js +79 -79
- package/CHANGELOG.json +0 -95
- package/CHANGELOG.md +0 -58
package/README.md
CHANGED
@@ -1,8 +1,8 @@
|
|
1
|
-
# envoc-form
|
2
|
-
|
3
|
-
[![npm package][npm-badge]][npm]
|
4
|
-
|
5
|
-
Base form package for envoc projects.
|
6
|
-
|
7
|
-
[npm-badge]: https://img.shields.io/npm/v/envoc-form.png?style=flat
|
1
|
+
# envoc-form
|
2
|
+
|
3
|
+
[![npm package][npm-badge]][npm]
|
4
|
+
|
5
|
+
Base form package for envoc projects.
|
6
|
+
|
7
|
+
[npm-badge]: https://img.shields.io/npm/v/envoc-form.png?style=flat
|
8
8
|
[npm]: https://www.npmjs.com/package/envoc-form
|
@@ -99,13 +99,14 @@ section.react-dropzone > aside > .list-group:not(:empty) {
|
|
99
99
|
margin-top: 1rem;
|
100
100
|
}
|
101
101
|
|
102
|
-
.
|
103
|
-
|
102
|
+
.field-array-card {
|
103
|
+
margin-bottom: 1rem;
|
104
|
+
}
|
105
|
+
.field-array-card .field-array-item.removed {
|
106
|
+
display: none;
|
107
|
+
}
|
108
|
+
.field-array-card .field-array-item > .remove-array-item {
|
104
109
|
display: flex;
|
105
|
-
justify-content: center;
|
106
|
-
align-items: center;
|
107
|
-
margin-bottom: auto;
|
108
|
-
margin-top: 0;
|
109
110
|
}
|
110
111
|
|
111
112
|
div.react-select-input.has-error {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../src/DatePickerInput/date-picker-input.scss","../../src/InlineFormInput/inline-form-input.scss","../../src/MoneyInput/money-input.scss","../../src/FormInput/form-input.scss","../../src/FileInput/file-input.scss","../../src/_variables.scss","../../src/FormInputArray/form-input-array.scss","../../src/ReactSelectField/react-select-field.scss"],"names":[],"mappings":"AAEA;EACE;;AACA;EACE;EACA;;AAEF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAEF;EACE;EACA;;AACA;EACE;;AAIJ;EACE;;;ACvCJ;EACE;;;ACDF;EACE;;;ACDF;EACE;;;AAIA;EACE;;;ACFA;EACE;;;AAKN;EACE,kBCFgC;EDGhC,cCF4B;;ADG5B;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAEE;EACA;;AAGJ;EAEE;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE,kBCzC8B;ED0C9B,cCzC0B;ED0C1B;;AAEF;EACE;;;AEvDJ;EACE;
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../src/DatePickerInput/date-picker-input.scss","../../src/InlineFormInput/inline-form-input.scss","../../src/MoneyInput/money-input.scss","../../src/FormInput/form-input.scss","../../src/FileInput/file-input.scss","../../src/_variables.scss","../../src/FormInputArray/form-input-array.scss","../../src/ReactSelectField/react-select-field.scss"],"names":[],"mappings":"AAEA;EACE;;AACA;EACE;EACA;;AAEF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAEF;EACE;EACA;;AACA;EACE;;AAIJ;EACE;;;ACvCJ;EACE;;;ACDF;EACE;;;ACDF;EACE;;;AAIA;EACE;;;ACFA;EACE;;;AAKN;EACE,kBCFgC;EDGhC,cCF4B;;ADG5B;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAEE;EACA;;AAGJ;EAEE;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE,kBCzC8B;ED0C9B,cCzC0B;ED0C1B;;AAEF;EACE;;;AEvDJ;EACE;;AAGE;EACE;;AAGF;EACE;;;ACPN;EACE,cFDI","file":"envoc-form-styles.css"}
|
@@ -5,10 +5,11 @@ import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
5
5
|
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
6
6
|
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
|
7
7
|
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
|
8
|
+
var _excluded = ["name"];
|
8
9
|
|
9
10
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
10
11
|
|
11
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try {
|
12
|
+
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
12
13
|
|
13
14
|
import React from 'react';
|
14
15
|
import { Col, Row } from 'reactstrap';
|
@@ -35,7 +36,7 @@ var AddressInput = /*#__PURE__*/function (_React$Component) {
|
|
35
36
|
value: function render() {
|
36
37
|
var _this$props = this.props,
|
37
38
|
name = _this$props.name,
|
38
|
-
props = _objectWithoutProperties(_this$props,
|
39
|
+
props = _objectWithoutProperties(_this$props, _excluded);
|
39
40
|
|
40
41
|
return /*#__PURE__*/React.createElement(FormSection, _extends({
|
41
42
|
name: name
|
@@ -84,10 +85,10 @@ var AddressInput = /*#__PURE__*/function (_React$Component) {
|
|
84
85
|
|
85
86
|
export { AddressInput as default };
|
86
87
|
AddressInput.propTypes = {
|
87
|
-
/**
|
88
|
-
* The key that the resulting values should be nested under within the form values.
|
89
|
-
* If name prop were chicken the submitted form values would look like: {chicken: {address1:...}}
|
90
|
-
* this allows us to have two address inputs inside the same form (shipping and billing address)
|
88
|
+
/**
|
89
|
+
* The key that the resulting values should be nested under within the form values.
|
90
|
+
* If name prop were chicken the submitted form values would look like: {chicken: {address1:...}}
|
91
|
+
* this allows us to have two address inputs inside the same form (shipping and billing address)
|
91
92
|
*/
|
92
93
|
name: PropTypes.string
|
93
94
|
};
|
@@ -1,8 +1,9 @@
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
3
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
4
|
+
var _excluded = ["handleCancel", "request", "yesColor", "style", "title"];
|
4
5
|
|
5
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
6
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
6
7
|
|
7
8
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
8
9
|
|
@@ -16,7 +17,7 @@ export default function ConfirmBaseForm(_ref) {
|
|
16
17
|
yesColor = _ref$yesColor === void 0 ? 'danger' : _ref$yesColor,
|
17
18
|
style = _ref.style,
|
18
19
|
title = _ref.title,
|
19
|
-
props = _objectWithoutProperties(_ref,
|
20
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
20
21
|
|
21
22
|
var webRequest = useAxiosRequest(Object.assign({}, request, {
|
22
23
|
autoExecute: false
|
@@ -1,16 +1,17 @@
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
3
|
+
var _excluded = ["successUrl", "form", "children"];
|
3
4
|
import React from 'react';
|
4
|
-
import {
|
5
|
+
import { useNavigate, useParams } from 'react-router-dom';
|
5
6
|
import ConfirmBaseForm from '../ConfirmBaseForm';
|
6
7
|
import { toast } from 'react-toastify';
|
7
8
|
export default function ConfirmDeleteForm(_ref) {
|
8
9
|
var successUrl = _ref.successUrl,
|
9
10
|
form = _ref.form,
|
10
11
|
children = _ref.children,
|
11
|
-
props = _objectWithoutProperties(_ref,
|
12
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
12
13
|
|
13
|
-
var
|
14
|
+
var navigate = useNavigate();
|
14
15
|
|
15
16
|
var _useParams = useParams(),
|
16
17
|
entityId = _useParams.entityId;
|
@@ -31,9 +32,9 @@ export default function ConfirmDeleteForm(_ref) {
|
|
31
32
|
|
32
33
|
function goBack() {
|
33
34
|
if (successUrl) {
|
34
|
-
|
35
|
+
navigate(successUrl);
|
35
36
|
} else {
|
36
|
-
|
37
|
+
navigate(-1);
|
37
38
|
}
|
38
39
|
}
|
39
40
|
}
|
@@ -7,16 +7,18 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
7
7
|
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
|
8
8
|
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
|
9
9
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
10
|
+
var _excluded = ["value", "className", "maxDate"];
|
10
11
|
|
11
12
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
12
13
|
|
13
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try {
|
14
|
+
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
14
15
|
|
15
16
|
import React from 'react';
|
16
17
|
import DatePicker from 'react-date-picker';
|
17
18
|
import parseISO from 'date-fns/parseISO';
|
18
19
|
import classnames from 'classnames';
|
19
20
|
var dateOnlyRegex = /^\d{4}-\d{2}-\d{2}$/;
|
21
|
+
var defaultMaxDate = new Date('9999-12-31');
|
20
22
|
|
21
23
|
var DatePickerInput = /*#__PURE__*/function (_React$Component) {
|
22
24
|
_inherits(DatePickerInput, _React$Component);
|
@@ -59,7 +61,9 @@ var DatePickerInput = /*#__PURE__*/function (_React$Component) {
|
|
59
61
|
var _this$props = this.props,
|
60
62
|
value = _this$props.value,
|
61
63
|
className = _this$props.className,
|
62
|
-
|
64
|
+
_this$props$maxDate = _this$props.maxDate,
|
65
|
+
maxDate = _this$props$maxDate === void 0 ? defaultMaxDate : _this$props$maxDate,
|
66
|
+
rest = _objectWithoutProperties(_this$props, _excluded);
|
63
67
|
|
64
68
|
if (value && !dateOnlyRegex.test(value)) {
|
65
69
|
var errorMessage = "Invalid date only value of ".concat(value, " passed to DatePicker input. This input is only configured to handle dates in the format yyyy-mm-dd. Ensure that the server is configured to return date only values.");
|
@@ -79,7 +83,8 @@ var DatePickerInput = /*#__PURE__*/function (_React$Component) {
|
|
79
83
|
}, rest, {
|
80
84
|
value: parsedValue,
|
81
85
|
onChange: this.handleChange,
|
82
|
-
onBlur: this.handleBlur
|
86
|
+
onBlur: this.handleBlur,
|
87
|
+
maxDate: maxDate
|
83
88
|
}));
|
84
89
|
}
|
85
90
|
}]);
|
@@ -2,7 +2,8 @@ import React from 'react';
|
|
2
2
|
import { ListGroupItem, ListGroup } from 'reactstrap';
|
3
3
|
export default function DefaultFileList(_ref) {
|
4
4
|
var files = _ref.files,
|
5
|
-
rejectedFiles = _ref.rejectedFiles
|
5
|
+
_ref$rejectedFiles = _ref.rejectedFiles,
|
6
|
+
rejectedFiles = _ref$rejectedFiles === void 0 ? [] : _ref$rejectedFiles;
|
6
7
|
return /*#__PURE__*/React.createElement(ListGroup, null, files.map(function (file) {
|
7
8
|
return /*#__PURE__*/React.createElement(Group, {
|
8
9
|
key: file.path,
|
@@ -26,7 +27,7 @@ function Group(_ref3) {
|
|
26
27
|
color: "d-flex ".concat(warning ? 'warning' : 'success', " justify-content-between list-group-item ").concat(warning ? 'list-group-item-warning' : 'list-group-item-success', " px-3 py-1 rounded-1")
|
27
28
|
}, /*#__PURE__*/React.createElement("span", {
|
28
29
|
className: "d-flex justify-content-between w-100"
|
29
|
-
}, /*#__PURE__*/React.createElement("span", null, item.
|
30
|
+
}, /*#__PURE__*/React.createElement("span", null, item.name), " ", /*#__PURE__*/React.createElement("span", null, humanFileSize(item.size))));
|
30
31
|
}
|
31
32
|
|
32
33
|
function humanFileSize(size) {
|
@@ -1,5 +1,7 @@
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
3
|
+
import _readOnlyError from "@babel/runtime/helpers/esm/readOnlyError";
|
4
|
+
var _excluded = ["className", "onChange", "value", "accept", "disabled", "multiple", "FileList", "placeholder", "dropzone"];
|
3
5
|
import React from 'react';
|
4
6
|
import { useDropzone } from 'react-dropzone';
|
5
7
|
import classNames from 'classnames';
|
@@ -10,34 +12,35 @@ export default function DropzoneFileInput(_ref) {
|
|
10
12
|
value = _ref.value,
|
11
13
|
accept = _ref.accept,
|
12
14
|
disabled = _ref.disabled,
|
13
|
-
multiple = _ref.multiple,
|
15
|
+
_ref$multiple = _ref.multiple,
|
16
|
+
multiple = _ref$multiple === void 0 ? false : _ref$multiple,
|
14
17
|
_ref$FileList = _ref.FileList,
|
15
18
|
FileList = _ref$FileList === void 0 ? DefaultFileList : _ref$FileList,
|
16
19
|
_ref$placeholder = _ref.placeholder,
|
17
|
-
placeholder = _ref$placeholder === void 0 ? 'Drag and drop some
|
20
|
+
placeholder = _ref$placeholder === void 0 ? 'Drag and drop some file(s) here, or click to select file(s)' : _ref$placeholder,
|
18
21
|
dropzone = _ref.dropzone,
|
19
|
-
props = _objectWithoutProperties(_ref,
|
22
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
20
23
|
|
21
24
|
var _useDropzone = useDropzone({
|
22
25
|
accept: accept,
|
23
26
|
onDrop: onDrop,
|
24
|
-
disabled: disabled
|
27
|
+
disabled: disabled,
|
28
|
+
multiple: multiple
|
25
29
|
}),
|
26
|
-
|
27
|
-
|
30
|
+
_useDropzone$accepted = _useDropzone.acceptedFiles,
|
31
|
+
acceptedFiles = _useDropzone$accepted === void 0 ? (acceptedFiles[0], _readOnlyError("acceptedFiles")) : _useDropzone$accepted,
|
32
|
+
_useDropzone$fileReje = _useDropzone.fileRejections,
|
33
|
+
fileRejections = _useDropzone$fileReje === void 0 ? fileRejections.push(acceptedFiles.slice(1, acceptedFiles.length)) : _useDropzone$fileReje,
|
28
34
|
getRootProps = _useDropzone.getRootProps,
|
29
35
|
getInputProps = _useDropzone.getInputProps,
|
30
36
|
isDragAccept = _useDropzone.isDragAccept,
|
31
37
|
isDragReject = _useDropzone.isDragReject;
|
32
38
|
|
33
39
|
function onDrop(acceptedFiles) {
|
34
|
-
if (acceptedFiles !== null && acceptedFiles !== void 0 && acceptedFiles.length) {
|
40
|
+
if (!(acceptedFiles !== null && acceptedFiles !== void 0 && acceptedFiles.length) > 1 && !multiple) {
|
35
41
|
onChange(null);
|
36
|
-
} else if (multiple) {
|
37
|
-
onChange(acceptedFiles);
|
38
42
|
} else {
|
39
|
-
|
40
|
-
onChange(target);
|
43
|
+
onChange(acceptedFiles);
|
41
44
|
}
|
42
45
|
}
|
43
46
|
|
@@ -48,7 +51,7 @@ export default function DropzoneFileInput(_ref) {
|
|
48
51
|
});
|
49
52
|
return /*#__PURE__*/React.createElement("section", {
|
50
53
|
className: className
|
51
|
-
}, /*#__PURE__*/React.createElement("div", getRootProps(), /*#__PURE__*/React.createElement("input", _extends({}, props, getInputProps())), /*#__PURE__*/React.createElement(React.Fragment, null, placeholder)), /*#__PURE__*/React.createElement("aside", null, /*#__PURE__*/React.createElement(FileList, {
|
54
|
+
}, /*#__PURE__*/React.createElement("div", getRootProps(), /*#__PURE__*/React.createElement("input", _extends({}, props, getInputProps())), /*#__PURE__*/React.createElement(React.Fragment, null, placeholder), !multiple && /*#__PURE__*/React.createElement("b", null, "Only one file accepted."), accept && /*#__PURE__*/React.createElement("b", null, "Files of type \"".concat(accept, "\" accepted"))), /*#__PURE__*/React.createElement("aside", null, /*#__PURE__*/React.createElement(FileList, {
|
52
55
|
files: acceptedFiles,
|
53
56
|
rejectedFiles: fileRejections
|
54
57
|
})));
|
@@ -1,35 +1,57 @@
|
|
1
|
+
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
1
2
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
3
|
+
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
2
4
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
3
|
-
|
5
|
+
var _excluded = ["className", "onChange", "value", "multiple"];
|
6
|
+
import React, { useEffect, useRef, useState } from 'react';
|
7
|
+
import DefaultFileList from './DefaultFileList';
|
4
8
|
export default function FileInput(_ref) {
|
5
9
|
var className = _ref.className,
|
6
10
|
onChange = _ref.onChange,
|
7
11
|
value = _ref.value,
|
8
|
-
|
12
|
+
_ref$multiple = _ref.multiple,
|
13
|
+
multiple = _ref$multiple === void 0 ? false : _ref$multiple,
|
14
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
9
15
|
|
10
16
|
var inputRef = useRef();
|
17
|
+
|
18
|
+
var _useState = useState([]),
|
19
|
+
_useState2 = _slicedToArray(_useState, 2),
|
20
|
+
acceptedFiles = _useState2[0],
|
21
|
+
setAcceptedFiles = _useState2[1];
|
22
|
+
|
11
23
|
useEffect(function () {
|
12
24
|
if (!value && inputRef.current) {
|
13
25
|
inputRef.current.value = null;
|
14
26
|
}
|
15
27
|
}, [value]);
|
16
|
-
return /*#__PURE__*/React.createElement("div", {
|
28
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
17
29
|
className: "custom-file file-input ".concat(className || '', " ").concat(props.disabled ? 'disabled' : '')
|
18
|
-
}, /*#__PURE__*/React.createElement("input", _extends({
|
30
|
+
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", _extends({
|
19
31
|
ref: inputRef,
|
20
32
|
type: "file",
|
21
33
|
className: "custom-file-input",
|
22
|
-
onChange: handleChange
|
23
|
-
|
34
|
+
onChange: handleChange,
|
35
|
+
multiple: multiple
|
36
|
+
}, props))), /*#__PURE__*/React.createElement("label", {
|
24
37
|
className: "custom-file-label"
|
25
|
-
}, !value && /*#__PURE__*/React.createElement("span", null, "Choose A File..."), value && /*#__PURE__*/React.createElement("span", null, value.name, " - size: ", humanFileSize(value.size))))
|
38
|
+
}, /*#__PURE__*/React.createElement("div", null, !value && /*#__PURE__*/React.createElement("span", null, "Choose A File..."), value && (!multiple ? /*#__PURE__*/React.createElement("span", null, value.name, " - size: ", humanFileSize(value.size)) : value.length === 1 ? /*#__PURE__*/React.createElement("span", null, value[0].name, " - size: ", humanFileSize(value[0].size)) : /*#__PURE__*/React.createElement("span", null, "Multiple files selected."))))), /*#__PURE__*/React.createElement(DefaultFileList, {
|
39
|
+
files: acceptedFiles
|
40
|
+
}));
|
26
41
|
|
27
42
|
function handleChange(e) {
|
28
43
|
if (e == null || !e.target || !e.target.files.length) {
|
29
44
|
onChange(null);
|
30
45
|
} else {
|
31
|
-
var
|
32
|
-
|
46
|
+
var files = _toConsumableArray(e.target.files);
|
47
|
+
|
48
|
+
setAcceptedFiles(files);
|
49
|
+
|
50
|
+
if (!multiple) {
|
51
|
+
onChange(files[0]);
|
52
|
+
} else {
|
53
|
+
onChange(files);
|
54
|
+
}
|
33
55
|
}
|
34
56
|
}
|
35
57
|
}
|
package/es/Form/Form.js
CHANGED
@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
3
3
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
4
4
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
5
|
+
var _excluded = ["children", "className", "style", "ignoreLostChanges", "onSubmit", "initialValues"];
|
5
6
|
import React, { useState, useMemo, useContext } from 'react';
|
6
7
|
import PropTypes from 'prop-types';
|
7
8
|
import FocusError from './FocusError';
|
@@ -16,7 +17,7 @@ export default function Form(_ref) {
|
|
16
17
|
ignoreLostChanges = _ref.ignoreLostChanges,
|
17
18
|
onSubmit = _ref.onSubmit,
|
18
19
|
initialValues = _ref.initialValues,
|
19
|
-
props = _objectWithoutProperties(_ref,
|
20
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
20
21
|
|
21
22
|
// formik resets all error on each blur (with our settings)
|
22
23
|
// this means that ALL errors from the server disappear when any one field is blurred
|
@@ -64,7 +65,8 @@ export default function Form(_ref) {
|
|
64
65
|
formData = objectToFormData(values, {
|
65
66
|
indices: true,
|
66
67
|
dotNotation: true,
|
67
|
-
allowEmptyArrays: true
|
68
|
+
allowEmptyArrays: true,
|
69
|
+
noFileListBrackets: true
|
68
70
|
});
|
69
71
|
}
|
70
72
|
|
@@ -1,5 +1,4 @@
|
|
1
|
-
import
|
2
|
-
import { Prompt } from 'react-router-dom';
|
1
|
+
import { useEffect } from 'react';
|
3
2
|
import { useFormikContext } from 'formik';
|
4
3
|
export default function FormBasedPreventNavigation(_ref) {
|
5
4
|
var ignoreLostChanges = _ref.ignoreLostChanges,
|
@@ -25,9 +24,7 @@ export default function FormBasedPreventNavigation(_ref) {
|
|
25
24
|
e.preventDefault();
|
26
25
|
e.returnValue = promptMessage;
|
27
26
|
}
|
28
|
-
}, [preventNavigate, promptMessage]);
|
29
|
-
|
30
|
-
|
31
|
-
message: promptMessage
|
32
|
-
});
|
27
|
+
}, [preventNavigate, promptMessage]); // TODO: https://reactrouter.com/docs/en/v6/upgrading/v5#prompt-is-not-currently-supported
|
28
|
+
|
29
|
+
return null;
|
33
30
|
}
|
package/es/FormGroupWrapper.js
CHANGED
@@ -1,5 +1,6 @@
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
3
|
+
var _excluded = ["prepend", "append", "Component", "helpText"];
|
3
4
|
import React from 'react';
|
4
5
|
import { InputGroup } from 'reactstrap';
|
5
6
|
import FormGroup from './FormGroup';
|
@@ -9,7 +10,7 @@ export default function FormGroupWrapper(_ref) {
|
|
9
10
|
append = _ref.append,
|
10
11
|
Component = _ref.Component,
|
11
12
|
helpText = _ref.helpText,
|
12
|
-
props = _objectWithoutProperties(_ref,
|
13
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
13
14
|
|
14
15
|
var meta = props.meta;
|
15
16
|
return /*#__PURE__*/React.createElement(FormGroup, _extends({
|
@@ -2,6 +2,12 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
3
3
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
4
4
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
5
|
+
var _excluded = ["className", "meta", "helpText"],
|
6
|
+
_excluded2 = ["meta"],
|
7
|
+
_excluded3 = ["includeEmptyOption", "options"],
|
8
|
+
_excluded4 = ["optionsUrl", "includeEmptyOption", "includeOtherOption", "cache", "maxAge"],
|
9
|
+
_excluded5 = ["meta"],
|
10
|
+
_excluded6 = ["helpText", "meta"];
|
5
11
|
import React from 'react';
|
6
12
|
import classnames from 'classnames';
|
7
13
|
import { Input as BootstrapInput, FormFeedback, CustomInput, FormText, Alert } from 'reactstrap';
|
@@ -86,7 +92,7 @@ var TextAreaInput = function TextAreaInput(_ref) {
|
|
86
92
|
var className = _ref.className,
|
87
93
|
meta = _ref.meta,
|
88
94
|
helpText = _ref.helpText,
|
89
|
-
props = _objectWithoutProperties(_ref,
|
95
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
90
96
|
|
91
97
|
return /*#__PURE__*/React.createElement(TextareaAutosize, _extends({
|
92
98
|
cacheMeasurements: true,
|
@@ -96,7 +102,7 @@ var TextAreaInput = function TextAreaInput(_ref) {
|
|
96
102
|
|
97
103
|
var DefaultInput = function DefaultInput(_ref2) {
|
98
104
|
var meta = _ref2.meta,
|
99
|
-
props = _objectWithoutProperties(_ref2,
|
105
|
+
props = _objectWithoutProperties(_ref2, _excluded2);
|
100
106
|
|
101
107
|
return /*#__PURE__*/React.createElement(BootstrapInput, _extends({
|
102
108
|
invalid: !!meta.error
|
@@ -107,9 +113,9 @@ var Select = function Select(_ref3) {
|
|
107
113
|
var _ref3$includeEmptyOpt = _ref3.includeEmptyOption,
|
108
114
|
includeEmptyOption = _ref3$includeEmptyOpt === void 0 ? true : _ref3$includeEmptyOpt,
|
109
115
|
options = _ref3.options,
|
110
|
-
props = _objectWithoutProperties(_ref3,
|
116
|
+
props = _objectWithoutProperties(_ref3, _excluded3);
|
111
117
|
|
112
|
-
var allOptions = includeEmptyOption ? [{
|
118
|
+
var allOptions = includeEmptyOption && !props.isMulti ? [{
|
113
119
|
label: ' ',
|
114
120
|
value: null
|
115
121
|
}].concat(_toConsumableArray(options)) : options;
|
@@ -135,7 +141,7 @@ var RemoteSelect = function RemoteSelect(_ref4) {
|
|
135
141
|
cache = _ref4$cache === void 0 ? optionCache : _ref4$cache,
|
136
142
|
_ref4$maxAge = _ref4.maxAge,
|
137
143
|
maxAge = _ref4$maxAge === void 0 ? 1000 * 10 : _ref4$maxAge,
|
138
|
-
props = _objectWithoutProperties(_ref4,
|
144
|
+
props = _objectWithoutProperties(_ref4, _excluded4);
|
139
145
|
|
140
146
|
var request = {
|
141
147
|
method: 'get',
|
@@ -160,7 +166,7 @@ var RemoteSelect = function RemoteSelect(_ref4) {
|
|
160
166
|
value: ''
|
161
167
|
});
|
162
168
|
} else {
|
163
|
-
if (includeEmptyOption) {
|
169
|
+
if (includeEmptyOption && !props.isMulti) {
|
164
170
|
options.push({
|
165
171
|
label: ' ',
|
166
172
|
value: null
|
@@ -184,7 +190,7 @@ var RemoteSelect = function RemoteSelect(_ref4) {
|
|
184
190
|
|
185
191
|
var DatePicker = function DatePicker(_ref5) {
|
186
192
|
var meta = _ref5.meta,
|
187
|
-
props = _objectWithoutProperties(_ref5,
|
193
|
+
props = _objectWithoutProperties(_ref5, _excluded5);
|
188
194
|
|
189
195
|
return /*#__PURE__*/React.createElement(DatePickerInput, _extends({}, props, {
|
190
196
|
className: meta.error ? 'is-invalid' : ''
|
@@ -194,7 +200,7 @@ var DatePicker = function DatePicker(_ref5) {
|
|
194
200
|
var Checkbox = function Checkbox(_ref6) {
|
195
201
|
var helpText = _ref6.helpText,
|
196
202
|
meta = _ref6.meta,
|
197
|
-
props = _objectWithoutProperties(_ref6,
|
203
|
+
props = _objectWithoutProperties(_ref6, _excluded6);
|
198
204
|
|
199
205
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CustomInput, props), meta.error && /*#__PURE__*/React.createElement(FormFeedback, null, meta.error), helpText && /*#__PURE__*/React.createElement(FormText, null, helpText));
|
200
206
|
};
|