@startlibs/form 1.0.0-alpha-9t → 1.0.0-alpha-9w
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/lib/index.js +726 -231
- package/package.json +2 -1
- package/rollup.config.js +1 -0
package/lib/index.js
CHANGED
|
@@ -30,6 +30,8 @@ var _without = _interopDefault(require('lodash/fp/without'));
|
|
|
30
30
|
var form = require('@startlibs/form');
|
|
31
31
|
var _taggedTemplateLiteral = _interopDefault(require('@babel/runtime/helpers/taggedTemplateLiteral'));
|
|
32
32
|
var _isRegExp = _interopDefault(require('lodash/fp/isRegExp'));
|
|
33
|
+
var _difference = _interopDefault(require('lodash/fp/difference'));
|
|
34
|
+
var _union = _interopDefault(require('lodash/fp/union'));
|
|
33
35
|
var _flow = _interopDefault(require('lodash/fp/flow'));
|
|
34
36
|
var _isBoolean = _interopDefault(require('lodash/fp/isBoolean'));
|
|
35
37
|
var _isString = _interopDefault(require('lodash/fp/isString'));
|
|
@@ -42,11 +44,13 @@ var _filter = _interopDefault(require('lodash/fp/filter'));
|
|
|
42
44
|
var _map = _interopDefault(require('lodash/fp/map'));
|
|
43
45
|
var _stubFalse = _interopDefault(require('lodash/fp/stubFalse'));
|
|
44
46
|
var _isObject = _interopDefault(require('lodash/fp/isObject'));
|
|
47
|
+
var _isFinite = _interopDefault(require('lodash/fp/isFinite'));
|
|
45
48
|
var _zipObject = _interopDefault(require('lodash/fp/zipObject'));
|
|
46
49
|
var _flatten = _interopDefault(require('lodash/fp/flatten'));
|
|
47
50
|
var _fromPairs = _interopDefault(require('lodash/fp/fromPairs'));
|
|
48
51
|
var _pick = _interopDefault(require('lodash/fp/pick'));
|
|
49
52
|
var _toPairs = _interopDefault(require('lodash/fp/toPairs'));
|
|
53
|
+
var _negate = _interopDefault(require('lodash/fp/negate'));
|
|
50
54
|
var _get = _interopDefault(require('lodash/fp/get'));
|
|
51
55
|
var _entries = _interopDefault(require('lodash/fp/entries'));
|
|
52
56
|
|
|
@@ -103,7 +107,7 @@ var useProvideErrors = function useProvideErrors() {
|
|
|
103
107
|
v = _ref6[0],
|
|
104
108
|
p = _ref6[1];
|
|
105
109
|
|
|
106
|
-
return value
|
|
110
|
+
return !(value === v && (p + '.').indexOf(utils.formatPath(path) + '.') >= 0);
|
|
107
111
|
});
|
|
108
112
|
});
|
|
109
113
|
};
|
|
@@ -162,13 +166,21 @@ var useProvideErrors = function useProvideErrors() {
|
|
|
162
166
|
getErrorsInsidePath: getErrorsInsidePath,
|
|
163
167
|
hasErrors: function hasErrors(path) {
|
|
164
168
|
return getErrorsInsidePath(path).length > 0;
|
|
169
|
+
},
|
|
170
|
+
hasError: function hasError(path, value) {
|
|
171
|
+
return getErrorsInsidePath(path).find(function (_ref11) {
|
|
172
|
+
var _ref12 = _slicedToArray(_ref11, 1),
|
|
173
|
+
v = _ref12[0];
|
|
174
|
+
|
|
175
|
+
return v === value;
|
|
176
|
+
});
|
|
165
177
|
}
|
|
166
178
|
};
|
|
167
179
|
var paths = React.useMemo(function () {
|
|
168
|
-
return new Set(errors.isOpen.map(function (
|
|
169
|
-
var
|
|
170
|
-
_ =
|
|
171
|
-
path =
|
|
180
|
+
return new Set(errors.isOpen.map(function (_ref13) {
|
|
181
|
+
var _ref14 = _slicedToArray(_ref13, 2),
|
|
182
|
+
_ = _ref14[0],
|
|
183
|
+
path = _ref14[1];
|
|
172
184
|
|
|
173
185
|
return path;
|
|
174
186
|
}).filter(function (_) {
|
|
@@ -200,9 +212,40 @@ var useHasError = function useHasError(path) {
|
|
|
200
212
|
|
|
201
213
|
return paths.has(utils.formatPath(path));
|
|
202
214
|
};
|
|
203
|
-
var
|
|
204
|
-
|
|
205
|
-
|
|
215
|
+
var useErrorsUtils = function useErrorsUtils() {
|
|
216
|
+
return React.useContext(ErrorsContext);
|
|
217
|
+
};
|
|
218
|
+
var useTransientErrorHelper = function useTransientErrorHelper() {
|
|
219
|
+
var utils = useErrorsUtils();
|
|
220
|
+
var showingErrors = React.useRef([]);
|
|
221
|
+
|
|
222
|
+
var clearCurrentErrors = function clearCurrentErrors() {
|
|
223
|
+
showingErrors.current.forEach(function (_ref15) {
|
|
224
|
+
var _ref16 = _slicedToArray(_ref15, 2),
|
|
225
|
+
path = _ref16[0],
|
|
226
|
+
value = _ref16[1];
|
|
227
|
+
|
|
228
|
+
return utils === null || utils === void 0 ? void 0 : utils.removeError(value, path);
|
|
229
|
+
});
|
|
230
|
+
showingErrors.current = [];
|
|
231
|
+
};
|
|
232
|
+
|
|
233
|
+
var setErrors = function setErrors(newErrors) {
|
|
234
|
+
clearCurrentErrors();
|
|
235
|
+
utils === null || utils === void 0 ? void 0 : utils.addErrors(newErrors);
|
|
236
|
+
showingErrors.current = newErrors;
|
|
237
|
+
};
|
|
238
|
+
|
|
239
|
+
React__default.useEffect(function () {
|
|
240
|
+
return function () {
|
|
241
|
+
clearCurrentErrors();
|
|
242
|
+
};
|
|
243
|
+
}, []);
|
|
244
|
+
return [setErrors, clearCurrentErrors];
|
|
245
|
+
};
|
|
246
|
+
var Errors = function Errors(_ref17) {
|
|
247
|
+
var path = _ref17.path,
|
|
248
|
+
className = _ref17.className;
|
|
206
249
|
|
|
207
250
|
var _useContext2 = React.useContext(ErrorsContext),
|
|
208
251
|
getErrorsInsidePath = _useContext2.getErrorsInsidePath,
|
|
@@ -213,18 +256,20 @@ var Errors = function Errors(_ref13) {
|
|
|
213
256
|
|
|
214
257
|
var uniqErrors = _uniqBy(_property(0), errors);
|
|
215
258
|
|
|
216
|
-
return
|
|
259
|
+
return React__default.createElement(components.TransitionDiv, {
|
|
260
|
+
block: true
|
|
261
|
+
}, errors.length > 0 && React__default.createElement(Errors.Container, {
|
|
217
262
|
className: className
|
|
218
|
-
}, uniqErrors.map(function (
|
|
219
|
-
var
|
|
220
|
-
value =
|
|
263
|
+
}, uniqErrors.map(function (_ref18) {
|
|
264
|
+
var _ref19 = _slicedToArray(_ref18, 1),
|
|
265
|
+
value = _ref19[0];
|
|
221
266
|
|
|
222
267
|
return value && React__default.createElement(Errors.Item, {
|
|
223
268
|
key: value
|
|
224
269
|
}, value, React__default.createElement(Errors.CloseIcon, {
|
|
225
270
|
onClick: willRemoveError(value, path)
|
|
226
271
|
}));
|
|
227
|
-
}));
|
|
272
|
+
})));
|
|
228
273
|
};
|
|
229
274
|
Errors.displayName = 'Errors';
|
|
230
275
|
Errors.Container = styled__default.ul.withConfig({
|
|
@@ -234,7 +279,7 @@ Errors.Container = styled__default.ul.withConfig({
|
|
|
234
279
|
Errors.Item = styled__default.li.withConfig({
|
|
235
280
|
displayName: "Errors__Item",
|
|
236
281
|
componentId: "sc-1vuw7bx-1"
|
|
237
|
-
})(["background-color:", ";padding:1rem 3.5rem 1rem 1rem;border-radius:
|
|
282
|
+
})(["background-color:", ";padding:1rem 3.5rem 1rem 1rem;border-radius:8px;border:1px solid ", ";color:", ";position:relative;text-align:left;& ~ &{margin-top:0.5rem;}", ""], function (props) {
|
|
238
283
|
return polished.lighten(0.42, props.theme.colors.alert);
|
|
239
284
|
}, function (props) {
|
|
240
285
|
return polished.lighten(0.35, props.theme.colors.alert);
|
|
@@ -399,7 +444,8 @@ var useForm = function useForm(_ref, ref) {
|
|
|
399
444
|
onSuccess = _ref$onSuccess === void 0 ? function () {} : _ref$onSuccess,
|
|
400
445
|
_ref$onFailure = _ref.onFailure,
|
|
401
446
|
onFailure = _ref$onFailure === void 0 ? function () {} : _ref$onFailure,
|
|
402
|
-
onChange = _ref.onChange
|
|
447
|
+
onChange = _ref.onChange,
|
|
448
|
+
autoComplete = _ref.autoComplete;
|
|
403
449
|
var outerConfig = {
|
|
404
450
|
onSuccess: onSuccess,
|
|
405
451
|
onFailure: onFailure,
|
|
@@ -418,7 +464,7 @@ var useForm = function useForm(_ref, ref) {
|
|
|
418
464
|
setHasChangedValue = _useState2[1];
|
|
419
465
|
|
|
420
466
|
var hasChangedRef = core.useRefState(false);
|
|
421
|
-
var shouldResubmitForm = core.useToggle(false, function (
|
|
467
|
+
var shouldResubmitForm = core.useToggle(false, function (next, prev) {
|
|
422
468
|
return prev && !next && errorsUtils.removeErrorPath('_shouldResubmitForm');
|
|
423
469
|
});
|
|
424
470
|
var resubmittingForm = core.useRefState(false);
|
|
@@ -451,7 +497,7 @@ var useForm = function useForm(_ref, ref) {
|
|
|
451
497
|
setHasChanged(true);
|
|
452
498
|
}
|
|
453
499
|
|
|
454
|
-
utils.callIfFunction(onChange, prev, next);
|
|
500
|
+
utils.callIfFunction(onChange, prev, next, utils$1);
|
|
455
501
|
};
|
|
456
502
|
|
|
457
503
|
var setHasChanged = function setHasChanged(v) {
|
|
@@ -578,7 +624,7 @@ var useForm = function useForm(_ref, ref) {
|
|
|
578
624
|
case 0:
|
|
579
625
|
config = _args2.length > 1 && _args2[1] !== undefined ? _args2[1] : {};
|
|
580
626
|
|
|
581
|
-
if (!loading.
|
|
627
|
+
if (!loading.get()) {
|
|
582
628
|
_context2.next = 3;
|
|
583
629
|
break;
|
|
584
630
|
}
|
|
@@ -586,7 +632,7 @@ var useForm = function useForm(_ref, ref) {
|
|
|
586
632
|
return _context2.abrupt("return", new Promise(function () {}));
|
|
587
633
|
|
|
588
634
|
case 3:
|
|
589
|
-
values = utils.ifUndefined(optValues, getValues());
|
|
635
|
+
values = utils.ifUndefined(utils.callIfFunction(optValues, getValues()), getValues());
|
|
590
636
|
|
|
591
637
|
if (!getMeta('submittingImage')) {
|
|
592
638
|
_context2.next = 10;
|
|
@@ -806,6 +852,7 @@ var useForm = function useForm(_ref, ref) {
|
|
|
806
852
|
}, React__default.createElement(ErrorsProvider, {
|
|
807
853
|
value: errorsContext
|
|
808
854
|
}, !skipDom ? React__default.createElement("form", {
|
|
855
|
+
autoComplete: autoComplete,
|
|
809
856
|
noValidate: true,
|
|
810
857
|
onSubmit: willSubmitForm
|
|
811
858
|
}, utils.callIfFunction(children, utils$1)) : utils.callIfFunction(children, utils$1))))), confirmDraftContent);
|
|
@@ -866,7 +913,6 @@ var withForm2 = function withForm2() {
|
|
|
866
913
|
};
|
|
867
914
|
};
|
|
868
915
|
|
|
869
|
-
var identity = utils.identityFn();
|
|
870
916
|
var PathContext = React__default.createContext([]);
|
|
871
917
|
var enhancedInputDisplayName = 'EnhancedInput';
|
|
872
918
|
|
|
@@ -883,8 +929,10 @@ var itemToggle = function itemToggle(item) {
|
|
|
883
929
|
|
|
884
930
|
var formInput = function formInput(_ref) {
|
|
885
931
|
var undefinedPlaceholder = _ref.undefinedPlaceholder,
|
|
932
|
+
_ref$isChecked = _ref.isChecked,
|
|
933
|
+
isChecked = _ref$isChecked === void 0 ? _identity : _ref$isChecked,
|
|
886
934
|
_ref$transform = _ref.transform,
|
|
887
|
-
transform = _ref$transform === void 0 ?
|
|
935
|
+
transform = _ref$transform === void 0 ? _identity : _ref$transform,
|
|
888
936
|
_ref$validation = _ref.validation,
|
|
889
937
|
validation = _ref$validation === void 0 ? skipValidation : _ref$validation,
|
|
890
938
|
onChange = _ref.onChange,
|
|
@@ -908,7 +956,10 @@ var formInput = function formInput(_ref) {
|
|
|
908
956
|
return;
|
|
909
957
|
}
|
|
910
958
|
|
|
911
|
-
setFormValue(transform(value,
|
|
959
|
+
setFormValue(transform(value, {
|
|
960
|
+
path: path,
|
|
961
|
+
prevValue: formValue
|
|
962
|
+
}));
|
|
912
963
|
utils.callIfFunction(onChange, utils.callIfFunction(value, formValue), {
|
|
913
964
|
prevValue: formValue,
|
|
914
965
|
path: path,
|
|
@@ -925,7 +976,7 @@ var formInput = function formInput(_ref) {
|
|
|
925
976
|
};
|
|
926
977
|
|
|
927
978
|
var toggle = function toggle() {
|
|
928
|
-
return setValue(!formValue ? fieldValue || true : !!fieldValue && undefined);
|
|
979
|
+
return setValue(!isChecked(formValue) ? fieldValue || true : !!fieldValue && undefined);
|
|
929
980
|
};
|
|
930
981
|
|
|
931
982
|
var toggleItem = function toggleItem() {
|
|
@@ -944,12 +995,14 @@ var formInput = function formInput(_ref) {
|
|
|
944
995
|
|
|
945
996
|
var rawInput = function rawInput(_ref2) {
|
|
946
997
|
var value = _ref2.value,
|
|
998
|
+
_ref2$isChecked = _ref2.isChecked,
|
|
999
|
+
isChecked = _ref2$isChecked === void 0 ? _identity : _ref2$isChecked,
|
|
947
1000
|
name = _ref2.name,
|
|
948
1001
|
setValueProp = _ref2.setValue,
|
|
949
1002
|
_ref2$validation = _ref2.validation,
|
|
950
1003
|
validation = _ref2$validation === void 0 ? skipValidation : _ref2$validation,
|
|
951
1004
|
_ref2$transform = _ref2.transform,
|
|
952
|
-
transform = _ref2$transform === void 0 ?
|
|
1005
|
+
transform = _ref2$transform === void 0 ? _identity : _ref2$transform,
|
|
953
1006
|
onChange = _ref2.onChange,
|
|
954
1007
|
fieldValue = _ref2.fieldValue,
|
|
955
1008
|
defaultValue = _ref2.defaultValue;
|
|
@@ -984,7 +1037,7 @@ var rawInput = function rawInput(_ref2) {
|
|
|
984
1037
|
};
|
|
985
1038
|
|
|
986
1039
|
var toggle = function toggle() {
|
|
987
|
-
return setValue(!rawValue);
|
|
1040
|
+
return setValue(!isChecked(rawValue));
|
|
988
1041
|
};
|
|
989
1042
|
|
|
990
1043
|
var toggleItem = function toggleItem() {
|
|
@@ -1057,7 +1110,7 @@ var Label = styled__default.label.withConfig({
|
|
|
1057
1110
|
var HelpText = styled__default.span.withConfig({
|
|
1058
1111
|
displayName: "Field__HelpText",
|
|
1059
1112
|
componentId: "p9woft-3"
|
|
1060
|
-
})(["color:
|
|
1113
|
+
})(["color:rgba(0,0,0,0.4);font-weight:400;"]);
|
|
1061
1114
|
var FieldDescription = styled__default.span.withConfig({
|
|
1062
1115
|
displayName: "Field__FieldDescription",
|
|
1063
1116
|
componentId: "p9woft-4"
|
|
@@ -1089,62 +1142,60 @@ var Field = React__default.forwardRef(function (_ref, ref) {
|
|
|
1089
1142
|
mandatory: mandatory
|
|
1090
1143
|
}, "*"), helpText && React__default.createElement(HelpText, null, " ", helpText), descText && React__default.createElement(FieldDescription, null, descText)), children, bellowDescText && React__default.createElement(BellowFieldDescription, null, bellowDescText));
|
|
1091
1144
|
});
|
|
1145
|
+
Field.Label = Label;
|
|
1146
|
+
Field.Container = Container;
|
|
1147
|
+
Field.HelpText = HelpText;
|
|
1148
|
+
Field.Description = FieldDescription;
|
|
1149
|
+
Field.displayName = "Field";
|
|
1092
1150
|
|
|
1093
1151
|
var addExtraProp = function addExtraProp(element, extra) {
|
|
1094
1152
|
var override = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
|
|
1095
1153
|
return React__default.cloneElement(element, override ? _objectSpread({}, element.props, extra) : _objectSpread({}, extra, element.props), element.props.children);
|
|
1096
1154
|
};
|
|
1097
1155
|
|
|
1098
|
-
var useDialog = function useDialog(dialog) {
|
|
1099
|
-
var args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
1100
|
-
var toggleCallback = arguments.length > 2 ? arguments[2] : undefined;
|
|
1101
|
-
var toggle = core.useToggle(false, toggleCallback);
|
|
1102
|
-
core.useFill("Dialog", toggle.isOpen && dialog(toggle.close), [toggle.isOpen].concat(_toConsumableArray(args)));
|
|
1103
|
-
return toggle.open;
|
|
1104
|
-
};
|
|
1105
|
-
var useDialogWithToggle = function useDialogWithToggle(dialog) {
|
|
1106
|
-
var args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
1107
|
-
var toggle = core.useToggle();
|
|
1108
|
-
core.useFill("Dialog", toggle.isOpen && dialog(toggle), [toggle.isOpen].concat(_toConsumableArray(args)));
|
|
1109
|
-
return toggle;
|
|
1110
|
-
};
|
|
1111
1156
|
var useConfirmDialog = function useConfirmDialog(dialog, args, toggleCallback) {
|
|
1112
|
-
return useDialog(function (closeDialog) {
|
|
1157
|
+
return components.useDialog(function (closeDialog) {
|
|
1113
1158
|
return addExtraProp(utils.callIfFunction(dialog, closeDialog), {
|
|
1114
1159
|
closeDialog: closeDialog
|
|
1115
1160
|
});
|
|
1116
1161
|
}, args, toggleCallback);
|
|
1117
1162
|
};
|
|
1118
1163
|
var useConfirmDialogWithProps = function useConfirmDialogWithProps(dialog, args) {
|
|
1119
|
-
|
|
1120
|
-
|
|
1164
|
+
var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
|
|
1165
|
+
_ref$overrideClose = _ref.overrideClose,
|
|
1166
|
+
overrideClose = _ref$overrideClose === void 0 ? true : _ref$overrideClose;
|
|
1167
|
+
|
|
1168
|
+
return components.useDialogWithToggle(function (toggle) {
|
|
1169
|
+
return addExtraProp(utils.callIfFunction(dialog, toggle.isOpen, toggle.close), {
|
|
1121
1170
|
closeDialog: toggle.close
|
|
1122
|
-
});
|
|
1171
|
+
}, overrideClose);
|
|
1123
1172
|
}, args);
|
|
1124
1173
|
};
|
|
1125
|
-
var ConfirmDialog = function ConfirmDialog(
|
|
1126
|
-
var
|
|
1127
|
-
action =
|
|
1128
|
-
_onSuccess =
|
|
1129
|
-
className =
|
|
1130
|
-
closeDialog =
|
|
1131
|
-
|
|
1132
|
-
cancelLabel =
|
|
1133
|
-
|
|
1134
|
-
cancelButton =
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1174
|
+
var ConfirmDialog = function ConfirmDialog(_ref2) {
|
|
1175
|
+
var _ref2$action = _ref2.action,
|
|
1176
|
+
action = _ref2$action === void 0 ? _identity : _ref2$action,
|
|
1177
|
+
_onSuccess = _ref2.onSuccess,
|
|
1178
|
+
className = _ref2.className,
|
|
1179
|
+
closeDialog = _ref2.closeDialog,
|
|
1180
|
+
skipCloseIcon = _ref2.skipCloseIcon,
|
|
1181
|
+
_ref2$cancelLabel = _ref2.cancelLabel,
|
|
1182
|
+
cancelLabel = _ref2$cancelLabel === void 0 ? "Cancelar" : _ref2$cancelLabel,
|
|
1183
|
+
_ref2$cancelButton = _ref2.cancelButton,
|
|
1184
|
+
cancelButton = _ref2$cancelButton === void 0 ? React__default.createElement(components.Button, null, cancelLabel) : _ref2$cancelButton,
|
|
1185
|
+
onFailure = _ref2.onFailure,
|
|
1186
|
+
title = _ref2.title,
|
|
1187
|
+
keepOnSuccess = _ref2.keepOnSuccess,
|
|
1188
|
+
confirm = _ref2.confirm,
|
|
1189
|
+
formRef = _ref2.formRef,
|
|
1190
|
+
children = _ref2.children,
|
|
1191
|
+
preValidation = _ref2.preValidation,
|
|
1192
|
+
values = _ref2.values,
|
|
1193
|
+
onChange = _ref2.onChange,
|
|
1194
|
+
alternativeButton = _ref2.alternativeButton,
|
|
1195
|
+
notify = _ref2.notify,
|
|
1196
|
+
confirmChanges = _ref2.confirmChanges,
|
|
1197
|
+
transform = _ref2.transform,
|
|
1198
|
+
isLoading = _ref2.isLoading;
|
|
1148
1199
|
return React__default.createElement(form.WithForm, {
|
|
1149
1200
|
alwaysSave: true,
|
|
1150
1201
|
ref: formRef,
|
|
@@ -1153,6 +1204,7 @@ var ConfirmDialog = function ConfirmDialog(_ref) {
|
|
|
1153
1204
|
action: action,
|
|
1154
1205
|
transform: transform,
|
|
1155
1206
|
onFailure: onFailure,
|
|
1207
|
+
onChange: onChange,
|
|
1156
1208
|
onSuccess: function onSuccess() {
|
|
1157
1209
|
for (var _len = arguments.length, props = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
1158
1210
|
props[_key] = arguments[_key];
|
|
@@ -1174,6 +1226,7 @@ var ConfirmDialog = function ConfirmDialog(_ref) {
|
|
|
1174
1226
|
return React__default.createElement(components.Dialog, {
|
|
1175
1227
|
className: className,
|
|
1176
1228
|
title: title,
|
|
1229
|
+
skipCloseIcon: skipCloseIcon,
|
|
1177
1230
|
confirmChanges: confirmChanges,
|
|
1178
1231
|
isLoading: isLoading,
|
|
1179
1232
|
closeDialog: closeDialog,
|
|
@@ -1223,7 +1276,7 @@ var Input = styled__default.input.withConfig({
|
|
|
1223
1276
|
return props.locked && styled.css(["padding-right:2.25rem;background:rgba(0,0,0,0.075);"]);
|
|
1224
1277
|
}, function (props) {
|
|
1225
1278
|
return props.isTextArea && styled.css(["resize:none;min-height:", "px;padding:.7rem;display:block;", " ", ""], function (props) {
|
|
1226
|
-
return props.regularInputHeight ? 36 : props.minHeight ||
|
|
1279
|
+
return props.regularInputHeight ? 36 : props.minHeight || 60;
|
|
1227
1280
|
}, function (props) {
|
|
1228
1281
|
return props.autoResize ? 'overflow:hidden;' : 'overflow:auto;';
|
|
1229
1282
|
}, utils.media.mobile(_templateObject2(), function (props) {
|
|
@@ -1282,8 +1335,9 @@ var useTextInput = function useTextInput(_ref, ref) {
|
|
|
1282
1335
|
rawValue = _ref.rawValue,
|
|
1283
1336
|
rawSetValue = _ref.rawSetValue,
|
|
1284
1337
|
rawHasErrors = _ref.rawHasErrors,
|
|
1338
|
+
transformOnBlur = _ref.transformOnBlur,
|
|
1285
1339
|
raw = _ref.raw,
|
|
1286
|
-
rest = _objectWithoutProperties(_ref, ["onFocus", "onBlur", "autoResize", "constraint", "pattern", "path", "rawValue", "rawSetValue", "rawHasErrors", "raw"]);
|
|
1340
|
+
rest = _objectWithoutProperties(_ref, ["onFocus", "onBlur", "autoResize", "constraint", "pattern", "path", "rawValue", "rawSetValue", "rawHasErrors", "transformOnBlur", "raw"]);
|
|
1287
1341
|
|
|
1288
1342
|
var _useInput = useInput(_objectSpread({
|
|
1289
1343
|
path: path,
|
|
@@ -1301,7 +1355,7 @@ var useTextInput = function useTextInput(_ref, ref) {
|
|
|
1301
1355
|
setFocused = _useState2[1];
|
|
1302
1356
|
|
|
1303
1357
|
var lastSelection = core.useRefState();
|
|
1304
|
-
var lastValue = core.useRefState();
|
|
1358
|
+
var lastValue = core.useRefState(formValue);
|
|
1305
1359
|
|
|
1306
1360
|
var handleOnFocus = function handleOnFocus(e) {
|
|
1307
1361
|
setFocused(true);
|
|
@@ -1311,6 +1365,10 @@ var useTextInput = function useTextInput(_ref, ref) {
|
|
|
1311
1365
|
var handleOnBlur = function handleOnBlur(e) {
|
|
1312
1366
|
setFocused(false);
|
|
1313
1367
|
utils.callIfFunction(onBlur, e);
|
|
1368
|
+
|
|
1369
|
+
if (transformOnBlur) {
|
|
1370
|
+
setFormValue(transformOnBlur(formValue));
|
|
1371
|
+
}
|
|
1314
1372
|
};
|
|
1315
1373
|
|
|
1316
1374
|
React.useEffect(function () {
|
|
@@ -1345,7 +1403,7 @@ var useTextInput = function useTextInput(_ref, ref) {
|
|
|
1345
1403
|
var validateConstraint = function validateConstraint(value, constraint, prevValue, pattern) {
|
|
1346
1404
|
var newValue = '';
|
|
1347
1405
|
|
|
1348
|
-
if (value === lastValue.get() || lastValue.get() && value.length < lastValue.get().length) {
|
|
1406
|
+
if (value === lastValue.get() || lastValue.get() && value.length < lastValue.get().length && !pattern) {
|
|
1349
1407
|
lastValue.set(value);
|
|
1350
1408
|
return value;
|
|
1351
1409
|
}
|
|
@@ -1361,7 +1419,7 @@ var useTextInput = function useTextInput(_ref, ref) {
|
|
|
1361
1419
|
var number = parseFloat(value.replace(',', '.'));
|
|
1362
1420
|
var commas = value.split(',');
|
|
1363
1421
|
var fixedNumber = number.toFixed(2);
|
|
1364
|
-
newValue = !!commas[0] && commas.length === 2 && parseFloat(fixedNumber) === number && fixedNumber.split('.')[1].indexOf(commas[1]) === 0 ? value : utils.digitsToPattern('>3
|
|
1422
|
+
newValue = !!commas[0] && commas.length === 2 && parseFloat(fixedNumber) === number && fixedNumber.split('.')[1].indexOf(commas[1]) === 0 ? value : utils.digitsToPattern('>3???????#,##', value);
|
|
1365
1423
|
} else if (constraint === 'capitalize') {
|
|
1366
1424
|
// v = "R$ "+(parseInt(v.replace(/[^1-9]*([0-9]*)(,?)([0-9]{0,3}).*/,"$1$3") || 0)/100).toFixed(2).replace(".",",");
|
|
1367
1425
|
newValue = value.replace(/^[a-z]/, function (e) {
|
|
@@ -1548,15 +1606,18 @@ var FileInput = styled__default.input.attrs({
|
|
|
1548
1606
|
})(["z-index:1;cursor:pointer;opacity:0;position:absolute;top:0;right:0;left:0;bottom:0;width:100%;height:100%;overflow:hidden;::-webkit-file-upload-button{visibility:hidden;}::file-upload-button{visibility:hidden;}"]);
|
|
1549
1607
|
var WithImageInput = function WithImageInput(_ref) {
|
|
1550
1608
|
var children = _ref.children,
|
|
1609
|
+
multiple = _ref.multiple,
|
|
1551
1610
|
_ref$path = _ref.path,
|
|
1552
1611
|
path = _ref$path === void 0 ? ["image"] : _ref$path,
|
|
1553
1612
|
preValidation = _ref.preValidation,
|
|
1613
|
+
onChangeFile = _ref.onChangeFile,
|
|
1614
|
+
onClose = _ref.onClose,
|
|
1554
1615
|
onClick = _ref.onClick,
|
|
1555
1616
|
uploadFetcher = _ref.uploadFetcher,
|
|
1556
1617
|
onSuccess = _ref.onSuccess,
|
|
1557
1618
|
ajaxError = _ref.ajaxError,
|
|
1558
1619
|
onTouchEnd = _ref.onTouchEnd,
|
|
1559
|
-
rest = _objectWithoutProperties(_ref, ["children", "path", "preValidation", "onClick", "uploadFetcher", "onSuccess", "ajaxError", "onTouchEnd"]);
|
|
1620
|
+
rest = _objectWithoutProperties(_ref, ["children", "multiple", "path", "preValidation", "onChangeFile", "onClose", "onClick", "uploadFetcher", "onSuccess", "ajaxError", "onTouchEnd"]);
|
|
1560
1621
|
|
|
1561
1622
|
var form = React.useContext(FormContext);
|
|
1562
1623
|
var loading = core.useToggle();
|
|
@@ -1567,7 +1628,8 @@ var WithImageInput = function WithImageInput(_ref) {
|
|
|
1567
1628
|
setTempImage = _useState2[1];
|
|
1568
1629
|
|
|
1569
1630
|
var getPath = function getPath(str) {
|
|
1570
|
-
|
|
1631
|
+
var fileIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
1632
|
+
return typeof path === 'function' ? [].concat(path(str, fileIndex)) : str !== 'image' ? [].concat(path).slice(0, -1).concat(str) : path;
|
|
1571
1633
|
};
|
|
1572
1634
|
|
|
1573
1635
|
var imagePath = getPath('image');
|
|
@@ -1578,29 +1640,46 @@ var WithImageInput = function WithImageInput(_ref) {
|
|
|
1578
1640
|
|
|
1579
1641
|
var image = tempImage || formImage;
|
|
1580
1642
|
|
|
1643
|
+
var validate = function validate(files) {
|
|
1644
|
+
var validations = files.map(preValidation).filter(Boolean);
|
|
1645
|
+
|
|
1646
|
+
if (validations.length) {
|
|
1647
|
+
validations.forEach(function (v) {
|
|
1648
|
+
return form.setError(getPath('image').join('.'), v);
|
|
1649
|
+
});
|
|
1650
|
+
return files.filter(function (file) {
|
|
1651
|
+
return !preValidation(file);
|
|
1652
|
+
});
|
|
1653
|
+
}
|
|
1654
|
+
|
|
1655
|
+
return files;
|
|
1656
|
+
};
|
|
1657
|
+
|
|
1581
1658
|
var handleFileEvent = function handleFileEvent(e) {
|
|
1582
1659
|
e.preventDefault();
|
|
1583
|
-
|
|
1660
|
+
utils.callIfFunction(onClose);
|
|
1661
|
+
var files = Array.from((e.nativeEvent.dataTransfer || e.nativeEvent.target).files);
|
|
1584
1662
|
|
|
1585
1663
|
if (files.length > 0) {
|
|
1586
|
-
|
|
1587
|
-
|
|
1664
|
+
validate(files.slice(0, multiple ? undefined : 1)).forEach(function (file, i) {
|
|
1665
|
+
return handleFile(file, e, i);
|
|
1666
|
+
});
|
|
1588
1667
|
}
|
|
1589
1668
|
};
|
|
1590
1669
|
|
|
1591
1670
|
var handleFile = function handleFile(file, eventTarget) {
|
|
1592
|
-
var
|
|
1671
|
+
var fileIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
|
|
1593
1672
|
|
|
1594
|
-
|
|
1595
|
-
|
|
1596
|
-
|
|
1597
|
-
}
|
|
1673
|
+
var getIndexedPath = function getIndexedPath(str) {
|
|
1674
|
+
return getPath(str, fileIndex);
|
|
1675
|
+
};
|
|
1598
1676
|
|
|
1599
|
-
var
|
|
1600
|
-
var
|
|
1601
|
-
var
|
|
1602
|
-
var
|
|
1603
|
-
var
|
|
1677
|
+
var path = getIndexedPath();
|
|
1678
|
+
var oldUploadStatus = form.getMeta(getIndexedPath('uploadStatus'));
|
|
1679
|
+
var oldImage = form.getValue(getIndexedPath('image'));
|
|
1680
|
+
var oldImageHeight = form.getValue(getIndexedPath('imageHeight'));
|
|
1681
|
+
var oldImageWidth = form.getValue(getIndexedPath('imageWidth'));
|
|
1682
|
+
var oldFilename = form.getValue(getIndexedPath('fileName'));
|
|
1604
1683
|
var objectUrl = URL.createObjectURL(file);
|
|
1605
1684
|
var image = document.createElement('img');
|
|
1606
1685
|
|
|
@@ -1613,18 +1692,19 @@ var WithImageInput = function WithImageInput(_ref) {
|
|
|
1613
1692
|
imageWidth: imageWidth,
|
|
1614
1693
|
imageHeight: imageHeight
|
|
1615
1694
|
};
|
|
1616
|
-
form.setValues(_flow(_set(
|
|
1695
|
+
form.setValues(_flow(_set(getIndexedPath('filename'), file.name), _set(getIndexedPath('image'), file), _set(getIndexedPath('imageWidth'), imageWidth), _set(getIndexedPath('imageHeight'), imageHeight)));
|
|
1617
1696
|
form.setMeta(_flow(_update('submittingImage', function (v) {
|
|
1618
1697
|
return v ? v + 1 : 1;
|
|
1619
|
-
}), _set(
|
|
1698
|
+
}), _update('uploadingPaths', _union([path.join(".")])), _set(getIndexedPath('uploadStatus'), 'loading')));
|
|
1620
1699
|
setTempImage(objectUrl);
|
|
1700
|
+
utils.callIfFunction(onChangeFile, file);
|
|
1621
1701
|
loading.open();
|
|
1622
1702
|
uploadFetcher(file, newValues).then(function (_ref2) {
|
|
1623
1703
|
var image = _ref2.image,
|
|
1624
1704
|
uploadStatus = _ref2.uploadStatus;
|
|
1625
1705
|
loading.close();
|
|
1626
1706
|
|
|
1627
|
-
if (form.getValue(
|
|
1707
|
+
if (form.getValue(getIndexedPath('image')) !== file) {
|
|
1628
1708
|
form.setMeta(_update(['submittingImage'], function (v) {
|
|
1629
1709
|
return v - 1;
|
|
1630
1710
|
}));
|
|
@@ -1632,8 +1712,8 @@ var WithImageInput = function WithImageInput(_ref) {
|
|
|
1632
1712
|
}
|
|
1633
1713
|
|
|
1634
1714
|
form.clearErrors();
|
|
1635
|
-
form.setValue(
|
|
1636
|
-
form.setMeta(_flow(_update(['submittingImage'], function (v) {
|
|
1715
|
+
form.setValue(getIndexedPath('image'), image, false);
|
|
1716
|
+
form.setMeta(_flow(_update('uploadingPaths', _difference(_difference.placeholder, [path.join(".")])), _update(['submittingImage'], function (v) {
|
|
1637
1717
|
return v - 1;
|
|
1638
1718
|
}), _update(['submittedImages'], function (v) {
|
|
1639
1719
|
return (v || []).concat([{
|
|
@@ -1641,7 +1721,7 @@ var WithImageInput = function WithImageInput(_ref) {
|
|
|
1641
1721
|
file: file,
|
|
1642
1722
|
image: image
|
|
1643
1723
|
}]);
|
|
1644
|
-
}), _set(
|
|
1724
|
+
}), _set(getIndexedPath('uploadStatus'), uploadStatus)));
|
|
1645
1725
|
setTempImage(null);
|
|
1646
1726
|
utils.callIfFunction(onSuccess, {
|
|
1647
1727
|
image: image,
|
|
@@ -1652,15 +1732,15 @@ var WithImageInput = function WithImageInput(_ref) {
|
|
|
1652
1732
|
}).catch(function () {
|
|
1653
1733
|
loading.close();
|
|
1654
1734
|
|
|
1655
|
-
if (form.getValue(
|
|
1735
|
+
if (form.getValue(getIndexedPath('image') !== file)) {
|
|
1656
1736
|
form.setMeta(_update(['submittingImage'], function (v) {
|
|
1657
1737
|
return v - 1;
|
|
1658
1738
|
}));
|
|
1659
1739
|
return;
|
|
1660
1740
|
}
|
|
1661
1741
|
|
|
1662
|
-
form.setError(
|
|
1663
|
-
form.setValues(_flow(_set(
|
|
1742
|
+
form.setError(getIndexedPath('image').join('.'), ajaxError);
|
|
1743
|
+
form.setValues(_flow(_set(getIndexedPath('filename'), oldFilename), _set(getIndexedPath('image'), oldImage), _set(getIndexedPath('imageWidth'), oldImageWidth), _set(getIndexedPath('imageHeight'), oldImageHeight)), false);
|
|
1664
1744
|
form.setMeta(_flow(_update(['submittingImage'], function (v) {
|
|
1665
1745
|
return v - 1;
|
|
1666
1746
|
}), _update(['submittedImages'], function (v) {
|
|
@@ -1669,7 +1749,7 @@ var WithImageInput = function WithImageInput(_ref) {
|
|
|
1669
1749
|
file: file,
|
|
1670
1750
|
image: image
|
|
1671
1751
|
}]);
|
|
1672
|
-
}), _set(
|
|
1752
|
+
}), _set(getIndexedPath('uploadStatus'), oldUploadStatus)));
|
|
1673
1753
|
setTempImage(null);
|
|
1674
1754
|
});
|
|
1675
1755
|
if (eventTarget && eventTarget.parentNode && typeof eventTarget.parentNode.click === 'function') eventTarget.parentNode.click();
|
|
@@ -1678,11 +1758,20 @@ var WithImageInput = function WithImageInput(_ref) {
|
|
|
1678
1758
|
image.src = objectUrl;
|
|
1679
1759
|
};
|
|
1680
1760
|
|
|
1761
|
+
var handleClick = function handleClick(e) {
|
|
1762
|
+
utils.callIfFunction(onClick, e);
|
|
1763
|
+
};
|
|
1764
|
+
|
|
1765
|
+
var handleTouchEnd = function handleTouchEnd(e) {
|
|
1766
|
+
utils.callIfFunction(onTouchEnd, e);
|
|
1767
|
+
};
|
|
1768
|
+
|
|
1681
1769
|
return children(React__default.createElement(FileInput, {
|
|
1770
|
+
multiple: multiple,
|
|
1682
1771
|
onChange: handleFileEvent,
|
|
1683
|
-
onClick:
|
|
1772
|
+
onClick: handleClick,
|
|
1684
1773
|
tabIndex: -1,
|
|
1685
|
-
onTouchEnd:
|
|
1774
|
+
onTouchEnd: handleTouchEnd
|
|
1686
1775
|
}), {
|
|
1687
1776
|
image: image,
|
|
1688
1777
|
isLoading: loading.isOpen,
|
|
@@ -1712,18 +1801,22 @@ var HiddenInput = styled__default.input.withConfig({
|
|
|
1712
1801
|
var Checkbox = function Checkbox(_ref) {
|
|
1713
1802
|
var className = _ref.className,
|
|
1714
1803
|
children = _ref.children,
|
|
1804
|
+
_ref$isChecked = _ref.isChecked,
|
|
1805
|
+
isChecked = _ref$isChecked === void 0 ? _identity : _ref$isChecked,
|
|
1715
1806
|
isList = _ref.isList,
|
|
1716
1807
|
disabled = _ref.disabled,
|
|
1808
|
+
inverted = _ref.inverted,
|
|
1717
1809
|
path = _ref.path,
|
|
1718
1810
|
_ref$tabIndex = _ref.tabIndex,
|
|
1719
1811
|
tabIndex = _ref$tabIndex === void 0 ? 1 : _ref$tabIndex,
|
|
1720
1812
|
raw = _ref.raw,
|
|
1721
|
-
rest = _objectWithoutProperties(_ref, ["className", "children", "isList", "disabled", "path", "tabIndex", "raw"]);
|
|
1813
|
+
rest = _objectWithoutProperties(_ref, ["className", "children", "isChecked", "isList", "disabled", "inverted", "path", "tabIndex", "raw"]);
|
|
1722
1814
|
|
|
1723
1815
|
var focused = core.useToggle();
|
|
1724
1816
|
|
|
1725
1817
|
var _useInput = useInput(_objectSpread({
|
|
1726
|
-
path: path
|
|
1818
|
+
path: path,
|
|
1819
|
+
isChecked: isChecked
|
|
1727
1820
|
}, rest), raw),
|
|
1728
1821
|
_useInput2 = _slicedToArray(_useInput, 3),
|
|
1729
1822
|
v = _useInput2[0],
|
|
@@ -1733,7 +1826,11 @@ var Checkbox = function Checkbox(_ref) {
|
|
|
1733
1826
|
toggleItem = _useInput2$.toggleItem,
|
|
1734
1827
|
hasErrors = _useInput2$.hasErrors;
|
|
1735
1828
|
|
|
1736
|
-
var
|
|
1829
|
+
var testInvert = function testInvert(v) {
|
|
1830
|
+
return inverted ? !v : v;
|
|
1831
|
+
};
|
|
1832
|
+
|
|
1833
|
+
var value = isChecked(testInvert(isList ? (v === null || v === void 0 ? void 0 : v.indexOf(rest.fieldValue)) >= 0 : v));
|
|
1737
1834
|
|
|
1738
1835
|
var onClick = function onClick(e) {
|
|
1739
1836
|
if (!e.isDefaultPrevented()) {
|
|
@@ -1779,7 +1876,7 @@ function _templateObject2$1() {
|
|
|
1779
1876
|
}
|
|
1780
1877
|
|
|
1781
1878
|
function _templateObject$1() {
|
|
1782
|
-
var data = _taggedTemplateLiteral(["\n
|
|
1879
|
+
var data = _taggedTemplateLiteral(["\n ", " > * {\n font-size: 14px;\n }\n "]);
|
|
1783
1880
|
|
|
1784
1881
|
_templateObject$1 = function _templateObject() {
|
|
1785
1882
|
return data;
|
|
@@ -1790,23 +1887,30 @@ function _templateObject$1() {
|
|
|
1790
1887
|
var ComboboxMenu = styled__default(components.ContextListMenu).withConfig({
|
|
1791
1888
|
displayName: "Combobox__ComboboxMenu",
|
|
1792
1889
|
componentId: "u2hz6i-0"
|
|
1793
|
-
})(["z-index:100;background-color:white;border-radius:
|
|
1794
|
-
return props.withoutIcons && styled.css(["", " > *{padding-left:
|
|
1890
|
+
})(["z-index:100;background-color:white;border-radius:4px 4px 6px 6px;margin-top:-1px;margin-bottom:0.5rem;box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 10px -2px rgba(0,0,0,0.15),0 1px 2px 0px rgba(0,0,0,0.2);border:1px solid #b4b4b4;max-height:25rem;width:auto;", " > *{font-size:13px;}", " ", ""], components.ListItem, utils.media.mobile(_templateObject$1(), components.ListItem), function (props) {
|
|
1891
|
+
return props.withoutIcons && styled.css(["", " > *{padding-left:1.25rem;padding-right:1.25rem;}"], components.ListItem);
|
|
1795
1892
|
});
|
|
1796
1893
|
var ComboboxInput = styled__default.div.withConfig({
|
|
1797
1894
|
displayName: "Combobox__ComboboxInput",
|
|
1798
1895
|
componentId: "u2hz6i-1"
|
|
1799
|
-
})(["width:100%;font-size:14px;border:1px solid ", ";border-radius:6px;color:", ";background:white;position:relative;line-height:34px;display:block;height:3rem;padding:0 2.25rem 0 0.7rem;;overflow:auto;outline:0;outline:none;cursor:pointer;user-select:none;", " ", "
|
|
1800
|
-
return props.
|
|
1801
|
-
}, function (props) {
|
|
1802
|
-
return props.comboboxIsOpen && "\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n ";
|
|
1896
|
+
})(["width:100%;font-size:14px;border:1px solid ", ";border-radius:6px;color:", ";background:white;position:relative;line-height:34px;display:block;height:3rem;padding:0 2.25rem 0 0.7rem;;overflow:auto;outline:0;outline:none;cursor:pointer;user-select:none;", " ", ":focus{border-color:", ";box-shadow:0px 0px 0px 2px rgba(0,0,0,0.1);}", ""], utils.getColor('gray210'), utils.getColor('gray60'), utils.media.mobile(_templateObject2$1()), function (props) {
|
|
1897
|
+
return props.comboboxIsOpen && "\n // border-bottom-left-radius: 0;\n // border-bottom-right-radius: 0;\n ";
|
|
1803
1898
|
}, utils.getColor('gray180'), function (props) {
|
|
1804
1899
|
return props.hasErrors && styled.css(["border-color:", " !important;"], utils.getColor('alert'));
|
|
1805
1900
|
});
|
|
1806
1901
|
var ComboboxDropdownIcon = styled__default(components.Icon).withConfig({
|
|
1807
1902
|
displayName: "Combobox__ComboboxDropdownIcon",
|
|
1808
1903
|
componentId: "u2hz6i-2"
|
|
1809
|
-
})(["position:absolute;top:51%;transform:translateY(-50%);right:1rem;color:", ";"], utils.getColor('gray60'));
|
|
1904
|
+
})(["position:absolute;top:51%;transform:translateY(-50%);right:1rem;color:", ";"], utils.getColor('gray60'));
|
|
1905
|
+
var FooterOptionsContainer = styled__default.div.withConfig({
|
|
1906
|
+
displayName: "Combobox__FooterOptionsContainer",
|
|
1907
|
+
componentId: "u2hz6i-3"
|
|
1908
|
+
})(["position:sticky;bottom:-0.5rem;background:white;border-top:1px solid rgba(0,0,0,0.1);padding:0.5rem 0;margin:0.5rem 0 -0.5rem;"]);
|
|
1909
|
+
var ComboboxPlaceholder = styled__default.div.withConfig({
|
|
1910
|
+
displayName: "Combobox__ComboboxPlaceholder",
|
|
1911
|
+
componentId: "u2hz6i-4"
|
|
1912
|
+
})(["color:rgba(0,0,0,0.3);"]);
|
|
1913
|
+
var SEPARATOR = {}; //shouldRecenter?
|
|
1810
1914
|
|
|
1811
1915
|
var Combobox = styled__default(function (_ref) {
|
|
1812
1916
|
var _ref$getLabel = _ref.getLabel,
|
|
@@ -1818,6 +1922,7 @@ var Combobox = styled__default(function (_ref) {
|
|
|
1818
1922
|
} : _ref$scrollContainer,
|
|
1819
1923
|
className = _ref.className,
|
|
1820
1924
|
options = _ref.options,
|
|
1925
|
+
autoFocus = _ref.autoFocus,
|
|
1821
1926
|
mandatory = _ref.mandatory,
|
|
1822
1927
|
placeholder = _ref.placeholder,
|
|
1823
1928
|
disabled = _ref.disabled,
|
|
@@ -1830,32 +1935,58 @@ var Combobox = styled__default(function (_ref) {
|
|
|
1830
1935
|
descText = _ref.descText,
|
|
1831
1936
|
helpText = _ref.helpText,
|
|
1832
1937
|
raw = _ref.raw,
|
|
1833
|
-
|
|
1938
|
+
footerOptions = _ref.footerOptions,
|
|
1939
|
+
_ref$check = _ref.check,
|
|
1940
|
+
check = _ref$check === void 0 ? function (a, b) {
|
|
1941
|
+
return a === b;
|
|
1942
|
+
} : _ref$check,
|
|
1943
|
+
rest = _objectWithoutProperties(_ref, ["getLabel", "getIcon", "scrollContainer", "className", "options", "autoFocus", "mandatory", "placeholder", "disabled", "fieldValue", "label", "path", "tabIndex", "fieldClassName", "descText", "helpText", "raw", "footerOptions", "check"]);
|
|
1834
1944
|
|
|
1835
1945
|
var selectedElement = React.useRef();
|
|
1836
1946
|
var fieldRef = React.useRef();
|
|
1947
|
+
var skipFocus = core.useRefState(autoFocus);
|
|
1948
|
+
var skipHover = core.useRefState();
|
|
1837
1949
|
var listElement = React.useRef();
|
|
1838
1950
|
var container = React.useRef();
|
|
1839
|
-
var
|
|
1951
|
+
var keyState = core.useRefState();
|
|
1840
1952
|
var contextMenu = core.useToggle();
|
|
1841
1953
|
var hover = core.useToggle();
|
|
1842
1954
|
var scrollToVisibility = core.useToggle();
|
|
1843
|
-
React.useEffect(function () {
|
|
1844
|
-
contextMenu.isOpen && recenterScroll();
|
|
1845
|
-
}, [contextMenu.isOpen]);
|
|
1846
|
-
React.useEffect(function () {
|
|
1847
|
-
selectedElement.current && scrollToVisibility.isOpen && makeOptionVisible();
|
|
1848
|
-
}, [hover]);
|
|
1849
1955
|
|
|
1850
1956
|
var _useInput = useInput(_objectSpread({
|
|
1851
1957
|
fieldValue: fieldValue,
|
|
1852
1958
|
path: path
|
|
1853
1959
|
}, rest), raw),
|
|
1854
1960
|
_useInput2 = _slicedToArray(_useInput, 3),
|
|
1855
|
-
|
|
1856
|
-
|
|
1961
|
+
formValue = _useInput2[0],
|
|
1962
|
+
confirmValue = _useInput2[1],
|
|
1857
1963
|
hasErrors = _useInput2[2].hasErrors;
|
|
1858
1964
|
|
|
1965
|
+
var _useState = React.useState(formValue),
|
|
1966
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
1967
|
+
value = _useState2[0],
|
|
1968
|
+
_setValue = _useState2[1];
|
|
1969
|
+
|
|
1970
|
+
React.useEffect(function () {
|
|
1971
|
+
contextMenu.isOpen && recenterScroll();
|
|
1972
|
+
}, [contextMenu.isOpen]);
|
|
1973
|
+
React.useEffect(function () {
|
|
1974
|
+
selectedElement.current && scrollToVisibility.isOpen && makeOptionVisible();
|
|
1975
|
+
}, [hover]);
|
|
1976
|
+
React.useEffect(function () {
|
|
1977
|
+
var _container$current;
|
|
1978
|
+
|
|
1979
|
+
autoFocus && ((_container$current = container.current) === null || _container$current === void 0 ? void 0 : _container$current.focus());
|
|
1980
|
+
}, []);
|
|
1981
|
+
React.useEffect(function () {
|
|
1982
|
+
confirmValue(value);
|
|
1983
|
+
}, [!!contextMenu.isOpen]);
|
|
1984
|
+
React.useEffect(function () {
|
|
1985
|
+
formValue !== value && _setValue(formValue);
|
|
1986
|
+
}, [formValue]);
|
|
1987
|
+
var allOptions = options.concat(footerOptions || []).filter(function (v) {
|
|
1988
|
+
return v !== SEPARATOR;
|
|
1989
|
+
});
|
|
1859
1990
|
var withPlaceholder = !value && value !== 0 && placeholder;
|
|
1860
1991
|
|
|
1861
1992
|
var toggleCombobox = function toggleCombobox() {
|
|
@@ -1868,6 +1999,12 @@ var Combobox = styled__default(function (_ref) {
|
|
|
1868
1999
|
hover.close();
|
|
1869
2000
|
};
|
|
1870
2001
|
|
|
2002
|
+
var getCurrentHeight = function getCurrentHeight() {
|
|
2003
|
+
var _listElement$current$;
|
|
2004
|
+
|
|
2005
|
+
return listElement.current.offsetHeight - (((_listElement$current$ = listElement.current.querySelector(".JS-list-footer")) === null || _listElement$current$ === void 0 ? void 0 : _listElement$current$.offsetHeight) || 0);
|
|
2006
|
+
};
|
|
2007
|
+
|
|
1871
2008
|
var recenterScroll = function recenterScroll() {
|
|
1872
2009
|
if (listElement.current.getBoundingClientRect().bottom > window.innerHeight) {
|
|
1873
2010
|
var currentScrollContainer = scrollContainer(container.current);
|
|
@@ -1875,46 +2012,84 @@ var Combobox = styled__default(function (_ref) {
|
|
|
1875
2012
|
}
|
|
1876
2013
|
|
|
1877
2014
|
if (selectedElement.current) {
|
|
1878
|
-
listElement.current.scrollTop = selectedElement.current.offsetTop + selectedElement.current.offsetHeight / 2 -
|
|
2015
|
+
listElement.current.scrollTop = selectedElement.current.offsetTop + selectedElement.current.offsetHeight / 2 - getCurrentHeight() / 2;
|
|
1879
2016
|
}
|
|
1880
2017
|
};
|
|
1881
2018
|
|
|
1882
2019
|
var makeOptionVisible = function makeOptionVisible() {
|
|
1883
|
-
if (
|
|
2020
|
+
if ((footerOptions === null || footerOptions === void 0 ? void 0 : footerOptions.indexOf(hover.isOpen)) >= 0) {
|
|
2021
|
+
return;
|
|
2022
|
+
} else if (selectedElement.current.offsetTop < listElement.current.scrollTop) {
|
|
2023
|
+
skipHover.set(true);
|
|
1884
2024
|
listElement.current.scrollTop = selectedElement.current.offsetTop;
|
|
1885
|
-
} else if (selectedElement.current.offsetTop + selectedElement.current.offsetHeight > listElement.current.scrollTop +
|
|
1886
|
-
|
|
2025
|
+
} else if (selectedElement.current.offsetTop + selectedElement.current.offsetHeight > listElement.current.scrollTop + getCurrentHeight()) {
|
|
2026
|
+
skipHover.set(true);
|
|
2027
|
+
listElement.current.scrollTop = selectedElement.current.offsetTop + selectedElement.current.offsetHeight - getCurrentHeight();
|
|
1887
2028
|
}
|
|
1888
2029
|
};
|
|
1889
2030
|
|
|
1890
|
-
var handleHover = function handleHover(value) {
|
|
2031
|
+
var handleHover = function handleHover(value, e) {
|
|
2032
|
+
if (skipHover.get()) {
|
|
2033
|
+
skipHover.set(false);
|
|
2034
|
+
return;
|
|
2035
|
+
}
|
|
2036
|
+
|
|
1891
2037
|
scrollToVisibility.close();
|
|
1892
2038
|
hover.openWith(value);
|
|
1893
2039
|
};
|
|
1894
2040
|
|
|
1895
2041
|
var keyDown = function keyDown(e) {
|
|
1896
|
-
e.stopPropagation();
|
|
1897
|
-
|
|
1898
2042
|
if ((e.key === 'Escape' || e.key === 'Tab') && contextMenu.isOpen) {
|
|
2043
|
+
e.stopPropagation();
|
|
1899
2044
|
toggleCombobox();
|
|
1900
2045
|
}
|
|
1901
2046
|
|
|
1902
|
-
if (e.key.length === 1
|
|
1903
|
-
|
|
2047
|
+
if (e.key.length === 1) {
|
|
2048
|
+
e.stopPropagation();
|
|
2049
|
+
|
|
2050
|
+
if (!contextMenu.isOpen) {
|
|
2051
|
+
contextMenu.open();
|
|
2052
|
+
}
|
|
2053
|
+
|
|
2054
|
+
var prevKeyState = keyState.get();
|
|
2055
|
+
var repeated = !prevKeyState || e.key === prevKeyState.word[0] && prevKeyState.repeated;
|
|
2056
|
+
var word = ((prevKeyState === null || prevKeyState === void 0 ? void 0 : prevKeyState.word) || '') + e.key;
|
|
2057
|
+
clearTimeout((prevKeyState === null || prevKeyState === void 0 ? void 0 : prevKeyState.timeout) || -1);
|
|
2058
|
+
var timeout = setTimeout(function () {
|
|
2059
|
+
return keyState.set(null);
|
|
2060
|
+
}, 1000);
|
|
2061
|
+
keyState.set({
|
|
2062
|
+
repeated: repeated,
|
|
2063
|
+
word: word,
|
|
2064
|
+
timeout: timeout
|
|
2065
|
+
});
|
|
2066
|
+
var labels = allOptions.map(function (o) {
|
|
1904
2067
|
var label = getLabel(o);
|
|
1905
|
-
return _isString(label) ? label.slice(0, 1).toLowerCase() : "";
|
|
2068
|
+
return _isString(label) ? label.slice(0, repeated ? 1 : word.length).toLowerCase() : "";
|
|
1906
2069
|
});
|
|
1907
|
-
|
|
1908
|
-
var
|
|
1909
|
-
var delta = lastIndex - firstIndex;
|
|
1910
|
-
|
|
1911
|
-
if (firstIndex >= 0) {
|
|
1912
|
-
var oldIndex = options.indexOf(hover.isOpen !== false ? hover.isOpen : value);
|
|
1913
|
-
var direction = e.shiftKey ? -1 : 1;
|
|
1914
|
-
var constrainedOldIndex = Math.min(Math.max(oldIndex, firstIndex - direction), lastIndex - direction);
|
|
1915
|
-
var newIndex = (constrainedOldIndex + direction - firstIndex + delta) % delta + firstIndex;
|
|
2070
|
+
|
|
2071
|
+
var goTo = function goTo(index) {
|
|
1916
2072
|
scrollToVisibility.open();
|
|
1917
|
-
hover.openWith(
|
|
2073
|
+
hover.openWith(allOptions[index]);
|
|
2074
|
+
|
|
2075
|
+
_setValue(allOptions[index]);
|
|
2076
|
+
};
|
|
2077
|
+
|
|
2078
|
+
var currentIndex = allOptions.indexOf(hover.isOpen !== false ? hover.isOpen : value);
|
|
2079
|
+
var direction = repeated ? e.shiftKey ? -1 : 1 : 0;
|
|
2080
|
+
var fnName = direction < 0 ? 'lastIndexOf' : 'indexOf';
|
|
2081
|
+
var item = repeated ? word.slice(0, 1) : word;
|
|
2082
|
+
var fromIndex = (currentIndex || (direction < 0 ? labels.length - 1 : 0)) + direction;
|
|
2083
|
+
var next = labels[fnName](item, fromIndex);
|
|
2084
|
+
|
|
2085
|
+
if (next >= 0) {
|
|
2086
|
+
goTo(next);
|
|
2087
|
+
} else {
|
|
2088
|
+
var _next = labels[fnName](item);
|
|
2089
|
+
|
|
2090
|
+
if (_next >= 0) {
|
|
2091
|
+
goTo(_next);
|
|
2092
|
+
}
|
|
1918
2093
|
}
|
|
1919
2094
|
}
|
|
1920
2095
|
|
|
@@ -1922,16 +2097,18 @@ var Combobox = styled__default(function (_ref) {
|
|
|
1922
2097
|
return;
|
|
1923
2098
|
}
|
|
1924
2099
|
|
|
2100
|
+
e.stopPropagation();
|
|
1925
2101
|
e.preventDefault();
|
|
1926
2102
|
|
|
1927
2103
|
if (contextMenu.isOpen) {
|
|
1928
2104
|
if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
|
|
1929
2105
|
var oldValue = hover.isOpen !== false ? hover.isOpen : value;
|
|
1930
|
-
|
|
1931
|
-
var
|
|
1932
|
-
|
|
2106
|
+
var previousIndex = allOptions.indexOf(oldValue);
|
|
2107
|
+
var newIndex = Math.min(Math.max((previousIndex + allOptions.length + (e.key === 'ArrowUp' ? previousIndex < 0 ? 0 : -1 : 1)) % allOptions.length, 0), allOptions.length - 1);
|
|
1933
2108
|
scrollToVisibility.open();
|
|
1934
|
-
hover.openWith(
|
|
2109
|
+
hover.openWith(allOptions[newIndex]);
|
|
2110
|
+
|
|
2111
|
+
_setValue(allOptions[newIndex]);
|
|
1935
2112
|
} else {
|
|
1936
2113
|
if (hover.isOpen !== false) {
|
|
1937
2114
|
_setValue(hover.isOpen);
|
|
@@ -1944,6 +2121,32 @@ var Combobox = styled__default(function (_ref) {
|
|
|
1944
2121
|
}
|
|
1945
2122
|
};
|
|
1946
2123
|
|
|
2124
|
+
var createOption = function createOption(option, i) {
|
|
2125
|
+
if (option === SEPARATOR) {
|
|
2126
|
+
return React__default.createElement(components.ListSeparator, {
|
|
2127
|
+
key: "separator" + i
|
|
2128
|
+
});
|
|
2129
|
+
}
|
|
2130
|
+
|
|
2131
|
+
var label = getLabel(option);
|
|
2132
|
+
return React__default.createElement(Option, {
|
|
2133
|
+
key: label + i,
|
|
2134
|
+
option: option,
|
|
2135
|
+
icon: utils.callIfFunction(getIcon, option),
|
|
2136
|
+
checked: hover.isOpen !== false ? option === hover.isOpen : check(option, value),
|
|
2137
|
+
label: label,
|
|
2138
|
+
setValue: function setValue(v) {
|
|
2139
|
+
_setValue(v);
|
|
2140
|
+
|
|
2141
|
+
contextMenu.close();
|
|
2142
|
+
skipFocus.set(true);
|
|
2143
|
+
container.current.focus();
|
|
2144
|
+
},
|
|
2145
|
+
setRef: selectedElement,
|
|
2146
|
+
onHover: handleHover
|
|
2147
|
+
});
|
|
2148
|
+
};
|
|
2149
|
+
|
|
1947
2150
|
return React__default.createElement(Field, {
|
|
1948
2151
|
className: fieldClassName,
|
|
1949
2152
|
mandatory: mandatory,
|
|
@@ -1954,11 +2157,15 @@ var Combobox = styled__default(function (_ref) {
|
|
|
1954
2157
|
ref: fieldRef
|
|
1955
2158
|
}, React__default.createElement(ComboboxInput, {
|
|
1956
2159
|
onBlur: function onBlur(e) {
|
|
1957
|
-
|
|
2160
|
+
var _listElement$current;
|
|
2161
|
+
|
|
2162
|
+
if (!((_listElement$current = listElement.current) === null || _listElement$current === void 0 ? void 0 : _listElement$current.contains(e.relatedTarget))) {
|
|
2163
|
+
confirmValue(value);
|
|
2164
|
+
contextMenu.close();
|
|
2165
|
+
}
|
|
1958
2166
|
},
|
|
1959
|
-
onFocus:
|
|
1960
|
-
|
|
1961
|
-
return isFocused.set(fieldRef.current.contains(e.relatedTarget));
|
|
2167
|
+
onFocus: function onFocus() {
|
|
2168
|
+
return skipFocus.get() ? skipFocus.set(false) : contextMenu.open();
|
|
1962
2169
|
},
|
|
1963
2170
|
onClick: function onClick() {
|
|
1964
2171
|
return contextMenu.openWith(function (v) {
|
|
@@ -1972,49 +2179,73 @@ var Combobox = styled__default(function (_ref) {
|
|
|
1972
2179
|
withPlaceholder: withPlaceholder,
|
|
1973
2180
|
hasErrors: hasErrors,
|
|
1974
2181
|
comboboxIsOpen: contextMenu.isOpen
|
|
1975
|
-
}, withPlaceholder ? placeholder : getLabel(value), React__default.createElement(ComboboxDropdownIcon, {
|
|
2182
|
+
}, withPlaceholder ? React__default.createElement(ComboboxPlaceholder, null, placeholder) : getLabel(value), React__default.createElement(ComboboxDropdownIcon, {
|
|
1976
2183
|
icon: "arrow-down"
|
|
1977
|
-
})
|
|
2184
|
+
}), !!contextMenu.isOpen && React__default.createElement(ComboboxMenuContainer, {
|
|
1978
2185
|
ref: listElement,
|
|
1979
|
-
|
|
1980
|
-
|
|
1981
|
-
|
|
1982
|
-
|
|
1983
|
-
key: label,
|
|
1984
|
-
option: option,
|
|
1985
|
-
icon: utils.callIfFunction(getIcon, option),
|
|
1986
|
-
checked: hover.isOpen !== false ? option === hover.isOpen : option === value,
|
|
1987
|
-
label: label,
|
|
1988
|
-
setValue: function setValue(v) {
|
|
1989
|
-
_setValue(v);
|
|
1990
|
-
|
|
1991
|
-
contextMenu.close();
|
|
1992
|
-
},
|
|
1993
|
-
setRef: selectedElement,
|
|
1994
|
-
onHover: handleHover
|
|
1995
|
-
});
|
|
2186
|
+
options: options,
|
|
2187
|
+
footerOptions: footerOptions,
|
|
2188
|
+
getIcon: getIcon,
|
|
2189
|
+
createOption: createOption
|
|
1996
2190
|
})));
|
|
1997
2191
|
}).withConfig({
|
|
1998
2192
|
displayName: "Combobox",
|
|
1999
|
-
componentId: "u2hz6i-
|
|
2193
|
+
componentId: "u2hz6i-5"
|
|
2000
2194
|
})(["user-select:none;"]);
|
|
2001
|
-
|
|
2002
|
-
|
|
2003
|
-
|
|
2004
|
-
|
|
2005
|
-
|
|
2006
|
-
|
|
2007
|
-
|
|
2008
|
-
|
|
2195
|
+
|
|
2196
|
+
var _willUseIsSticky = components.willUseIsSticky(),
|
|
2197
|
+
_willUseIsSticky2 = _slicedToArray(_willUseIsSticky, 1),
|
|
2198
|
+
WithIsSticky = _willUseIsSticky2[0];
|
|
2199
|
+
|
|
2200
|
+
var ComboboxMenuContainer = React__default.forwardRef(function (_ref2, ref) {
|
|
2201
|
+
var options = _ref2.options,
|
|
2202
|
+
footerOptions = _ref2.footerOptions,
|
|
2203
|
+
getIcon = _ref2.getIcon,
|
|
2204
|
+
createOption = _ref2.createOption;
|
|
2205
|
+
|
|
2206
|
+
var _usePositioning = components.usePositioning(ref, {
|
|
2207
|
+
fill: true
|
|
2208
|
+
}),
|
|
2209
|
+
_usePositioning2 = _slicedToArray(_usePositioning, 2),
|
|
2210
|
+
positionInfo = _usePositioning2[0],
|
|
2211
|
+
positionPlaceholder = _usePositioning2[1];
|
|
2212
|
+
|
|
2213
|
+
var slot = 'Popup';
|
|
2214
|
+
var slotName = React.useMemo(function () {
|
|
2215
|
+
return components.getDialogLayersSize() === 0 ? slot : slot + '-' + (components.getDialogLayersSize() - 1);
|
|
2216
|
+
}, []);
|
|
2217
|
+
return React__default.createElement(React__default.Fragment, null, positionPlaceholder, React__default.createElement(core.Fill, {
|
|
2218
|
+
name: slotName
|
|
2219
|
+
}, React__default.createElement(ComboboxMenu, _extends({}, positionInfo, {
|
|
2220
|
+
ref: ref,
|
|
2221
|
+
withoutIcons: !getIcon
|
|
2222
|
+
}), options.map(createOption), footerOptions && React__default.createElement(WithIsSticky, {
|
|
2223
|
+
intersection: true
|
|
2224
|
+
}, function (sentinel, isSticky) {
|
|
2225
|
+
return React__default.createElement(React__default.Fragment, null, React__default.createElement(FooterOptionsContainer, {
|
|
2226
|
+
isSticky: isSticky,
|
|
2227
|
+
className: "JS-list-footer"
|
|
2228
|
+
}, footerOptions.map(createOption)), sentinel("margin-top:-3px;"));
|
|
2229
|
+
}))));
|
|
2230
|
+
});
|
|
2231
|
+
var Option = function Option(_ref3) {
|
|
2232
|
+
var setValue = _ref3.setValue,
|
|
2233
|
+
icon = _ref3.icon,
|
|
2234
|
+
option = _ref3.option,
|
|
2235
|
+
onHover = _ref3.onHover,
|
|
2236
|
+
checked = _ref3.checked,
|
|
2237
|
+
label = _ref3.label,
|
|
2238
|
+
setRef = _ref3.setRef;
|
|
2009
2239
|
return React__default.createElement(components.ListItem, {
|
|
2010
2240
|
hover: checked,
|
|
2011
2241
|
tabIndex: -1,
|
|
2012
|
-
onMouseOver: function onMouseOver() {
|
|
2013
|
-
return onHover(option);
|
|
2242
|
+
onMouseOver: function onMouseOver(e) {
|
|
2243
|
+
return onHover(option, e);
|
|
2014
2244
|
},
|
|
2015
2245
|
ref: checked ? setRef : undefined,
|
|
2016
|
-
onClick: function onClick() {
|
|
2017
|
-
|
|
2246
|
+
onClick: function onClick(e) {
|
|
2247
|
+
e.stopPropagation();
|
|
2248
|
+
setValue(option);
|
|
2018
2249
|
}
|
|
2019
2250
|
}, React__default.createElement("a", null, icon && React__default.createElement(components.Icon, {
|
|
2020
2251
|
icon: icon
|
|
@@ -2786,10 +3017,30 @@ var FormValue = function FormValue(_ref) {
|
|
|
2786
3017
|
|
|
2787
3018
|
return utils.ifUndefined(utils.callIfFunction(children, value, setValue), _isObject(value) ? null : value, null);
|
|
2788
3019
|
};
|
|
2789
|
-
var
|
|
3020
|
+
var IfFormValue = function IfFormValue(_ref2) {
|
|
2790
3021
|
var path = _ref2.path,
|
|
2791
3022
|
children = _ref2.children,
|
|
2792
|
-
inputs = _ref2.inputs
|
|
3023
|
+
inputs = _ref2.inputs,
|
|
3024
|
+
_ref2$check = _ref2.check,
|
|
3025
|
+
check = _ref2$check === void 0 ? _identity : _ref2$check,
|
|
3026
|
+
invert = _ref2.invert,
|
|
3027
|
+
rest = _objectWithoutProperties(_ref2, ["path", "children", "inputs", "check", "invert"]);
|
|
3028
|
+
|
|
3029
|
+
var _useFormValue3 = useFormValue(path, inputs || []),
|
|
3030
|
+
_useFormValue4 = _slicedToArray(_useFormValue3, 2),
|
|
3031
|
+
value = _useFormValue4[0],
|
|
3032
|
+
setValue = _useFormValue4[1];
|
|
3033
|
+
|
|
3034
|
+
var doInvert = function doInvert(v) {
|
|
3035
|
+
return invert ? !v : !!v;
|
|
3036
|
+
};
|
|
3037
|
+
|
|
3038
|
+
return React__default.createElement(components.TransitionDiv, rest, doInvert(utils.callIfFunction(check, value)) ? utils.ifUndefined(utils.callIfFunction(children, value, setValue), _isObject(value) ? null : value, null) : null);
|
|
3039
|
+
};
|
|
3040
|
+
var FormMeta = function FormMeta(_ref3) {
|
|
3041
|
+
var path = _ref3.path,
|
|
3042
|
+
children = _ref3.children,
|
|
3043
|
+
inputs = _ref3.inputs;
|
|
2793
3044
|
|
|
2794
3045
|
var _useFormMeta = useFormMeta(path, inputs || []),
|
|
2795
3046
|
_useFormMeta2 = _slicedToArray(_useFormMeta, 2),
|
|
@@ -3167,7 +3418,7 @@ var EditableBoxPresentation = styled__default(React.forwardRef(function (_ref13,
|
|
|
3167
3418
|
onTouchStart: onTouchStart,
|
|
3168
3419
|
className: 'editable-box ' + (!disabledClick ? 'clickable ' : '') + (editing.isOpen ? 'expanded' : 'collapsed') + ' ' + className,
|
|
3169
3420
|
onClick: editing.isOpen || disabledClick ? undefined : openBox
|
|
3170
|
-
}, !editing.isOpen && !(withDelete || withContextMenu) && React__default.createElement(components.Button, {
|
|
3421
|
+
}, !editing.isOpen && !disabledClick && !(withDelete || withContextMenu) && React__default.createElement(components.Button, {
|
|
3171
3422
|
tabIndex: tabIndex,
|
|
3172
3423
|
className: "edit-button",
|
|
3173
3424
|
small: true,
|
|
@@ -3182,7 +3433,7 @@ var EditableBoxPresentation = styled__default(React.forwardRef(function (_ref13,
|
|
|
3182
3433
|
onClick: utils.stopPropagation(popup.toggle)
|
|
3183
3434
|
}, popup.isOpen && React__default.createElement(components.ContextMenu, null, React__default.createElement(components.Li, {
|
|
3184
3435
|
label: "Editar",
|
|
3185
|
-
icon: "edit",
|
|
3436
|
+
icon: "edit-line",
|
|
3186
3437
|
onClick: openBox
|
|
3187
3438
|
}), withDelete && React__default.createElement(components.Li, {
|
|
3188
3439
|
label: "Deletar",
|
|
@@ -3385,8 +3636,10 @@ var SharedEditableTabBox = function SharedEditableTabBox(_ref15) {
|
|
|
3385
3636
|
|
|
3386
3637
|
var EditableBox = function EditableBox(_ref17) {
|
|
3387
3638
|
var path = _ref17.path,
|
|
3639
|
+
onCancel = _ref17.onCancel,
|
|
3640
|
+
onClose = _ref17.onClose,
|
|
3388
3641
|
isNew = _ref17.isNew,
|
|
3389
|
-
props = _objectWithoutProperties(_ref17, ["path", "isNew"]);
|
|
3642
|
+
props = _objectWithoutProperties(_ref17, ["path", "onCancel", "onClose", "isNew"]);
|
|
3390
3643
|
|
|
3391
3644
|
var editableGroup = React.useContext(EditableContext);
|
|
3392
3645
|
var form = React.useContext(FormContext);
|
|
@@ -3397,13 +3650,14 @@ var EditableBox = function EditableBox(_ref17) {
|
|
|
3397
3650
|
return path ? form.resetField([].concat(path)) : form.resetForm();
|
|
3398
3651
|
};
|
|
3399
3652
|
|
|
3400
|
-
var
|
|
3653
|
+
var _onClose = function _onClose(skipReset) {
|
|
3401
3654
|
if (!skipReset) {
|
|
3402
3655
|
resetField();
|
|
3403
3656
|
}
|
|
3404
3657
|
|
|
3405
3658
|
form.clearErrors(path);
|
|
3406
3659
|
editableGroup.standaloneBoxes.unregister(selfRef.current);
|
|
3660
|
+
utils.callIfFunction(onClose);
|
|
3407
3661
|
};
|
|
3408
3662
|
|
|
3409
3663
|
var modifiedValue = function modifiedValue() {
|
|
@@ -3420,8 +3674,10 @@ var EditableBox = function EditableBox(_ref17) {
|
|
|
3420
3674
|
props.removeItem(props.menuId);
|
|
3421
3675
|
};
|
|
3422
3676
|
|
|
3423
|
-
var
|
|
3424
|
-
|
|
3677
|
+
var _onCancel = function _onCancel(close) {
|
|
3678
|
+
if (utils.callIfFunction(onCancel, close) !== false) {
|
|
3679
|
+
close();
|
|
3680
|
+
}
|
|
3425
3681
|
};
|
|
3426
3682
|
|
|
3427
3683
|
var close = function close() {
|
|
@@ -3452,9 +3708,9 @@ var EditableBox = function EditableBox(_ref17) {
|
|
|
3452
3708
|
ref: internalBox,
|
|
3453
3709
|
resetField: resetField,
|
|
3454
3710
|
onOpen: onOpen,
|
|
3455
|
-
onClose:
|
|
3711
|
+
onClose: _onClose,
|
|
3456
3712
|
onDelete: onDelete,
|
|
3457
|
-
onCancel:
|
|
3713
|
+
onCancel: _onCancel,
|
|
3458
3714
|
onSave: onSave,
|
|
3459
3715
|
form: form,
|
|
3460
3716
|
path: path,
|
|
@@ -3471,18 +3727,20 @@ var Radiobox = function Radiobox(_ref) {
|
|
|
3471
3727
|
var className = _ref.className,
|
|
3472
3728
|
children = _ref.children,
|
|
3473
3729
|
disabled = _ref.disabled,
|
|
3730
|
+
isChecked = _ref.isChecked,
|
|
3474
3731
|
fieldValue = _ref.fieldValue,
|
|
3475
3732
|
path = _ref.path,
|
|
3476
3733
|
_ref$tabIndex = _ref.tabIndex,
|
|
3477
3734
|
tabIndex = _ref$tabIndex === void 0 ? 1 : _ref$tabIndex,
|
|
3478
3735
|
raw = _ref.raw,
|
|
3479
|
-
rest = _objectWithoutProperties(_ref, ["className", "children", "disabled", "fieldValue", "path", "tabIndex", "raw"]);
|
|
3736
|
+
rest = _objectWithoutProperties(_ref, ["className", "children", "disabled", "isChecked", "fieldValue", "path", "tabIndex", "raw"]);
|
|
3480
3737
|
|
|
3481
3738
|
var focused = core.useToggle();
|
|
3482
3739
|
|
|
3483
3740
|
var _useInput = useInput(_objectSpread({
|
|
3484
3741
|
fieldValue: fieldValue,
|
|
3485
|
-
path: path
|
|
3742
|
+
path: path,
|
|
3743
|
+
isChecked: isChecked
|
|
3486
3744
|
}, rest), raw),
|
|
3487
3745
|
_useInput2 = _slicedToArray(_useInput, 3),
|
|
3488
3746
|
value = _useInput2[0],
|
|
@@ -3491,6 +3749,7 @@ var Radiobox = function Radiobox(_ref) {
|
|
|
3491
3749
|
name = _useInput2$.name,
|
|
3492
3750
|
hasErrors = _useInput2$.hasErrors;
|
|
3493
3751
|
|
|
3752
|
+
var checked = isChecked ? isChecked(value) : value === fieldValue;
|
|
3494
3753
|
return React__default.createElement("label", {
|
|
3495
3754
|
"data-drag": "false",
|
|
3496
3755
|
onClick: function onClick(e) {
|
|
@@ -3506,14 +3765,14 @@ var Radiobox = function Radiobox(_ref) {
|
|
|
3506
3765
|
onBlur: focused.close,
|
|
3507
3766
|
disabled: disabled,
|
|
3508
3767
|
type: "radio",
|
|
3509
|
-
checked:
|
|
3768
|
+
checked: checked,
|
|
3510
3769
|
value: fieldValue,
|
|
3511
3770
|
readOnly: true,
|
|
3512
3771
|
name: name,
|
|
3513
3772
|
tabIndex: tabIndex
|
|
3514
3773
|
}), children && children({
|
|
3515
3774
|
disabled: disabled,
|
|
3516
|
-
checked:
|
|
3775
|
+
checked: checked,
|
|
3517
3776
|
hasErrors: hasErrors,
|
|
3518
3777
|
focused: focused.isOpen
|
|
3519
3778
|
}));
|
|
@@ -3548,13 +3807,13 @@ var CheckboxContent = styled__default.div.withConfig({
|
|
|
3548
3807
|
displayName: "SimpleCheckbox__CheckboxContent",
|
|
3549
3808
|
componentId: "am8pps-4"
|
|
3550
3809
|
})(["cursor:pointer;position:relative;padding-left:2rem;", ""], function (props) {
|
|
3551
|
-
return props.framed && styled.css(["border:1px solid ", ";border-radius:6px;min-height:3rem;min-width:8rem;:hover{background:
|
|
3810
|
+
return props.framed && styled.css(["border:1px solid ", ";border-radius:6px;min-height:3rem;min-width:8rem;background:white;:hover{background:rgb(245,245,245);}:active{background:rgb(235,235,235);}padding:10px 12px 10px 32px;", " ", " ", " ", " ", ""], utils.getColor('gray210'), utils.media.desktop(_templateObject$3()), function (props) {
|
|
3552
3811
|
return props.hasErrors && styled.css(["border-color:", " !important;"], utils.getColor('alert'));
|
|
3553
3812
|
}, function (props) {
|
|
3554
3813
|
return props.checked && props.highlightSelected && styled.css(["border-color:", ";background:", ";:hover{background:", ";}", "{", "{color:", ";}}"], utils.getColor('main'), function (props) {
|
|
3555
|
-
return polished.
|
|
3814
|
+
return polished.desaturate(0.3, polished.lighten(0.52, utils.getColor("main")(props)));
|
|
3556
3815
|
}, function (props) {
|
|
3557
|
-
return polished.
|
|
3816
|
+
return polished.desaturate(0.3, polished.lighten(0.52, utils.getColor("main")(props)));
|
|
3558
3817
|
}, CheckboxPseudoInput, components.Icon, utils.getColor('main'));
|
|
3559
3818
|
}, function (props) {
|
|
3560
3819
|
return props.checked && props.ultraHighlightSelected && styled.css(["border-color:", ";background:", ";color:white;a,a.link{color:white;}:hover{background:", ";}", "{", "{color:", ";}}", "{color:rgba(255,255,255,0.65);}", "{color:rgba(255,255,255,0.65);}"], utils.getColor('main'), utils.getColor('main'), utils.getColor('main'), CheckboxPseudoInput, components.Icon, utils.getColor('main'), HelpText, DescText);
|
|
@@ -3620,7 +3879,7 @@ var CssCircle = styled__default.div.withConfig({
|
|
|
3620
3879
|
var TextLabel$1 = styled__default.span.withConfig({
|
|
3621
3880
|
displayName: "SimpleRadiobox__TextLabel",
|
|
3622
3881
|
componentId: "qv83xo-1"
|
|
3623
|
-
})(["font-size:13px;line-height:16px;margin:2px 0;display:block;
|
|
3882
|
+
})(["font-size:13px;line-height:16px;margin:2px 0;display:block;"]);
|
|
3624
3883
|
var DescText$1 = styled__default.div.withConfig({
|
|
3625
3884
|
displayName: "SimpleRadiobox__DescText",
|
|
3626
3885
|
componentId: "qv83xo-2"
|
|
@@ -3633,13 +3892,13 @@ var RadioboxContent = styled__default.div.withConfig({
|
|
|
3633
3892
|
displayName: "SimpleRadiobox__RadioboxContent",
|
|
3634
3893
|
componentId: "qv83xo-4"
|
|
3635
3894
|
})(["cursor:pointer;position:relative;padding-left:2rem;", ""], function (props) {
|
|
3636
|
-
return props.framed && styled.css(["border:1px solid ", ";border-radius:6px;min-height:3rem;min-width:8rem;:hover{background:
|
|
3895
|
+
return props.framed && styled.css(["border:1px solid ", ";border-radius:6px;min-height:3rem;min-width:8rem;background:white;:hover{background:rgb(245,245,245);}:active{background:rgb(235,235,235);}padding:10px 12px 10px 32px;", " ", " ", " ", " ", ""], utils.getColor('gray210'), utils.media.desktop(_templateObject$4()), function (props) {
|
|
3637
3896
|
return props.hasErrors && styled.css(["border-color:", " !important;"], utils.getColor('alert'));
|
|
3638
3897
|
}, function (props) {
|
|
3639
3898
|
return props.checked && props.highlightSelected && styled.css(["border-color:", ";background:", ";:hover{background:", ";}", "{:before{background-color:", ";}}"], utils.getColor('main'), function (props) {
|
|
3640
|
-
return polished.
|
|
3899
|
+
return polished.desaturate(0.3, polished.lighten(0.52, utils.getColor("main")(props)));
|
|
3641
3900
|
}, function (props) {
|
|
3642
|
-
return polished.
|
|
3901
|
+
return polished.desaturate(0.3, polished.lighten(0.52, utils.getColor("main")(props)));
|
|
3643
3902
|
}, CssCircle, utils.getColor('main'));
|
|
3644
3903
|
}, function (props) {
|
|
3645
3904
|
return props.checked && props.ultraHighlightSelected && styled.css(["border-color:", ";background:", ";color:white;:hover{background:", ";}", "{:before{background-color:", ";}}", "{color:rgba(255,255,255,0.65);}", "{color:rgba(255,255,255,0.65);}"], utils.getColor('main'), utils.getColor('main'), utils.getColor('main'), CssCircle, utils.getColor('main'), HelpText, DescText$1);
|
|
@@ -3678,14 +3937,19 @@ var SimpleRadiobox = styled__default(function (props) {
|
|
|
3678
3937
|
var InputboxGroup = styled__default(function (_ref) {
|
|
3679
3938
|
var path = _ref.path,
|
|
3680
3939
|
className = _ref.className,
|
|
3940
|
+
column = _ref.column,
|
|
3941
|
+
_ref$as = _ref.as,
|
|
3942
|
+
as = _ref$as === void 0 ? column ? components.SplitColumnsContainer : 'div' : _ref$as,
|
|
3681
3943
|
children = _ref.children,
|
|
3682
3944
|
label = _ref.label,
|
|
3683
3945
|
descText = _ref.descText,
|
|
3946
|
+
helpText = _ref.helpText,
|
|
3684
3947
|
mandatory = _ref.mandatory,
|
|
3685
|
-
rest = _objectWithoutProperties(_ref, ["path", "className", "children", "label", "descText", "mandatory"]);
|
|
3948
|
+
rest = _objectWithoutProperties(_ref, ["path", "className", "column", "as", "children", "label", "descText", "helpText", "mandatory"]);
|
|
3686
3949
|
|
|
3687
3950
|
var size = React__default.Children.count(children);
|
|
3688
|
-
var
|
|
3951
|
+
var Wrapper = as;
|
|
3952
|
+
var boxes = React__default.createElement(Wrapper, {
|
|
3689
3953
|
className: className
|
|
3690
3954
|
}, React__default.Children.toArray(children).filter(function (child) {
|
|
3691
3955
|
return child.props;
|
|
@@ -3700,7 +3964,8 @@ var InputboxGroup = styled__default(function (_ref) {
|
|
|
3700
3964
|
return label ? React__default.createElement(Field, {
|
|
3701
3965
|
label: label,
|
|
3702
3966
|
mandatory: mandatory,
|
|
3703
|
-
descText: descText
|
|
3967
|
+
descText: descText,
|
|
3968
|
+
helpText: helpText
|
|
3704
3969
|
}, boxes) : boxes;
|
|
3705
3970
|
}).withConfig({
|
|
3706
3971
|
displayName: "InputboxGroup",
|
|
@@ -3849,10 +4114,13 @@ var DatePicker = React.forwardRef(function (_ref, maybeInputRef) {
|
|
|
3849
4114
|
tabIndex = _ref.tabIndex,
|
|
3850
4115
|
helpText = _ref.helpText,
|
|
3851
4116
|
path = _ref.path,
|
|
4117
|
+
_ref$timezoneOffset = _ref.timezoneOffset,
|
|
4118
|
+
timezoneOffset = _ref$timezoneOffset === void 0 ? 0 : _ref$timezoneOffset,
|
|
3852
4119
|
placeholder = _ref.placeholder,
|
|
4120
|
+
onBlur = _ref.onBlur,
|
|
3853
4121
|
raw = _ref.raw,
|
|
3854
4122
|
disabled = _ref.disabled,
|
|
3855
|
-
rest = _objectWithoutProperties(_ref, ["format", "min", "max", "weekStartsMonday", "label", "mandatory", "tabIndex", "helpText", "path", "placeholder", "raw", "disabled"]);
|
|
4123
|
+
rest = _objectWithoutProperties(_ref, ["format", "min", "max", "weekStartsMonday", "label", "mandatory", "tabIndex", "helpText", "path", "timezoneOffset", "placeholder", "onBlur", "raw", "disabled"]);
|
|
3856
4124
|
|
|
3857
4125
|
var inputRef = core.useEnsureRef(maybeInputRef);
|
|
3858
4126
|
|
|
@@ -3861,15 +4129,20 @@ var DatePicker = React.forwardRef(function (_ref, maybeInputRef) {
|
|
|
3861
4129
|
}, rest), raw),
|
|
3862
4130
|
_useInput2 = _slicedToArray(_useInput, 3),
|
|
3863
4131
|
formValue = _useInput2[0],
|
|
3864
|
-
|
|
4132
|
+
setUnoffsetedFormValue = _useInput2[1],
|
|
3865
4133
|
hasErrors = _useInput2[2].hasErrors;
|
|
3866
4134
|
|
|
4135
|
+
var setFormValue = function setFormValue(newV) {
|
|
4136
|
+
return setUnoffsetedFormValue(_isFinite(newV) && newV !== -1 ? newV - timezoneOffset * 36e5 : newV);
|
|
4137
|
+
};
|
|
4138
|
+
|
|
3867
4139
|
var popup = core.usePopupToggle();
|
|
3868
4140
|
var calendarElement = React.useRef();
|
|
3869
4141
|
var messages = React.useContext(core.StartlibsContext).dateMessages;
|
|
3870
4142
|
var time = Number(formValue);
|
|
4143
|
+
var offsetedTime = time + timezoneOffset * 36e5;
|
|
3871
4144
|
|
|
3872
|
-
var _useState = React.useState(!isNaN(time) ? utils.formatDate(new Date(
|
|
4145
|
+
var _useState = React.useState(!isNaN(time) ? utils.formatDate(new Date(offsetedTime), format, messages) : ''),
|
|
3873
4146
|
_useState2 = _slicedToArray(_useState, 2),
|
|
3874
4147
|
textValue = _useState2[0],
|
|
3875
4148
|
setRawTextValue = _useState2[1];
|
|
@@ -3940,17 +4213,18 @@ var DatePicker = React.forwardRef(function (_ref, maybeInputRef) {
|
|
|
3940
4213
|
setFormValue(-1);
|
|
3941
4214
|
} else {
|
|
3942
4215
|
updateText(date);
|
|
3943
|
-
setFormValue(date.getTime());
|
|
3944
4216
|
}
|
|
3945
4217
|
}
|
|
3946
4218
|
};
|
|
3947
4219
|
|
|
3948
|
-
var
|
|
4220
|
+
var _onBlur = function _onBlur(e) {
|
|
3949
4221
|
var currentTarget = e.currentTarget;
|
|
3950
4222
|
setTimeout(function () {
|
|
3951
4223
|
if (!currentTarget.contains(document.activeElement)) {
|
|
3952
4224
|
confirmValue();
|
|
3953
4225
|
}
|
|
4226
|
+
|
|
4227
|
+
utils.callIfFunction(onBlur);
|
|
3954
4228
|
}, 1);
|
|
3955
4229
|
};
|
|
3956
4230
|
|
|
@@ -3997,7 +4271,7 @@ var DatePicker = React.forwardRef(function (_ref, maybeInputRef) {
|
|
|
3997
4271
|
return e.stopPropagation();
|
|
3998
4272
|
};
|
|
3999
4273
|
|
|
4000
|
-
var calendarValue = new Date(!isNaN(time) && formValue !== -1 ?
|
|
4274
|
+
var calendarValue = new Date(!isNaN(time) && formValue !== -1 ? offsetedTime : now());
|
|
4001
4275
|
calendarValue.setUTCHours(0, 0, 0);
|
|
4002
4276
|
return React__default.createElement(Field, {
|
|
4003
4277
|
helpText: helpText,
|
|
@@ -4005,7 +4279,7 @@ var DatePicker = React.forwardRef(function (_ref, maybeInputRef) {
|
|
|
4005
4279
|
mandatory: mandatory,
|
|
4006
4280
|
onClick: onClick,
|
|
4007
4281
|
onFocus: popup.open,
|
|
4008
|
-
onBlur:
|
|
4282
|
+
onBlur: _onBlur
|
|
4009
4283
|
}, React__default.createElement(TextInput, {
|
|
4010
4284
|
raw: true,
|
|
4011
4285
|
disabled: disabled,
|
|
@@ -5221,26 +5495,236 @@ var EditLinkPopup = function EditLinkPopup(_ref7) {
|
|
|
5221
5495
|
});
|
|
5222
5496
|
};
|
|
5223
5497
|
|
|
5224
|
-
|
|
5225
|
-
|
|
5498
|
+
function _templateObject$6() {
|
|
5499
|
+
var data = _taggedTemplateLiteral(["\n padding 1rem;\n "]);
|
|
5500
|
+
|
|
5501
|
+
_templateObject$6 = function _templateObject() {
|
|
5502
|
+
return data;
|
|
5503
|
+
};
|
|
5504
|
+
|
|
5505
|
+
return data;
|
|
5506
|
+
}
|
|
5507
|
+
|
|
5508
|
+
var shouldPreventExpand = function shouldPreventExpand(fn) {
|
|
5509
|
+
return function (e) {
|
|
5510
|
+
return e.target.closest('body,[data-expand="false"],label,input,textarea,button').matches('body,[data-expand="true"]') && fn(e);
|
|
5511
|
+
};
|
|
5512
|
+
};
|
|
5513
|
+
|
|
5514
|
+
var ExpandableBoxStyled = styled__default.div.withConfig({
|
|
5515
|
+
displayName: "ExpandableBox__ExpandableBoxStyled",
|
|
5516
|
+
componentId: "sc-1nsk1wq-0"
|
|
5517
|
+
})(["padding:1rem;border-radius:8px;background:", ";font-size:14px;outline:none;transition:background 0.25s linear;", " & ~ &{margin-top:0.75rem;}", " &{margin-top:0.75rem;}"], utils.getColor('gray240'), function (props) {
|
|
5518
|
+
return props.collapsed ? styled.css(["cursor:pointer;padding-right:3.25rem;:hover{background:", ";}:active{background:", ";}"], function (props) {
|
|
5519
|
+
return polished.darken(0.05, utils.getColor("gray240")(props));
|
|
5520
|
+
}, function (props) {
|
|
5521
|
+
return polished.darken(0.08, utils.getColor("gray240")(props));
|
|
5522
|
+
}) : styled.css(["padding 1.5rem;", " ", ""], utils.media.max(340)(_templateObject$6()), function (props) {
|
|
5523
|
+
return props.fixMarginBottom && "\n padding-bottom: 0.5rem !important;\n ";
|
|
5524
|
+
});
|
|
5525
|
+
}, components.SwitchDiv);
|
|
5526
|
+
var EditIcon = styled__default(components.Icon).attrs({
|
|
5527
|
+
icon: 'edit'
|
|
5528
|
+
}).withConfig({
|
|
5529
|
+
displayName: "ExpandableBox__EditIcon",
|
|
5530
|
+
componentId: "sc-1nsk1wq-1"
|
|
5531
|
+
})(["position:absolute;top:50%;transform:translateY(-50%);right:-24px;color:rgba(0,0,0,0.25);font-size:20px;"]);
|
|
5532
|
+
var checkErrors = function checkErrors() {
|
|
5533
|
+
for (var _len = arguments.length, checks = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
5534
|
+
checks[_key] = arguments[_key];
|
|
5535
|
+
}
|
|
5536
|
+
|
|
5537
|
+
return function (v, setErrors) {
|
|
5538
|
+
var results = checks.map(function (c) {
|
|
5539
|
+
return c(v);
|
|
5540
|
+
}).filter(Boolean);
|
|
5541
|
+
|
|
5542
|
+
if (!results.length) {
|
|
5543
|
+
return true;
|
|
5544
|
+
}
|
|
5545
|
+
|
|
5546
|
+
var messages = results.filter(_negate(_isBoolean));
|
|
5547
|
+
|
|
5548
|
+
if (messages.length) {
|
|
5549
|
+
setErrors.apply(void 0, _toConsumableArray(messages));
|
|
5550
|
+
}
|
|
5551
|
+
|
|
5552
|
+
return false;
|
|
5553
|
+
};
|
|
5554
|
+
};
|
|
5555
|
+
var timing = utils.animationTiming('0.25s ease-out');
|
|
5556
|
+
var switchAnimation = utils.oneWayAnimation('opacity: 1;transform:translateY(0);', 'opacity: 0;', 'opacity: 0; transform:translateY(30px);');
|
|
5557
|
+
var ExpandableBox = function ExpandableBox(_ref) {
|
|
5558
|
+
var children = _ref.children,
|
|
5559
|
+
info = _ref.info,
|
|
5560
|
+
isOpen = _ref.isOpen,
|
|
5561
|
+
openWhen = _ref.openWhen,
|
|
5562
|
+
path = _ref.path,
|
|
5563
|
+
_ref$retargetFilter = _ref.retargetFilter,
|
|
5564
|
+
retargetFilter = _ref$retargetFilter === void 0 ? function (el) {
|
|
5565
|
+
var _el$tagName;
|
|
5566
|
+
|
|
5567
|
+
return (el === null || el === void 0 ? void 0 : (_el$tagName = el.tagName) === null || _el$tagName === void 0 ? void 0 : _el$tagName.toLowerCase()) === "button";
|
|
5568
|
+
} : _ref$retargetFilter,
|
|
5569
|
+
_ref$isValid = _ref.isValid,
|
|
5570
|
+
isValid = _ref$isValid === void 0 ? function () {
|
|
5571
|
+
return true;
|
|
5572
|
+
} : _ref$isValid,
|
|
5573
|
+
fixMarginBottom = _ref.fixMarginBottom,
|
|
5574
|
+
_ref$animation = _ref.animation,
|
|
5575
|
+
animation = _ref$animation === void 0 ? switchAnimation : _ref$animation,
|
|
5576
|
+
_ref$animationTiming = _ref.animationTiming,
|
|
5577
|
+
animationTiming = _ref$animationTiming === void 0 ? timing : _ref$animationTiming;
|
|
5578
|
+
var flipAnimation = core.useLazyConstant(components.willUseFlipSwitch);
|
|
5579
|
+
|
|
5580
|
+
var _useFormValue = form.useFormValue(path),
|
|
5581
|
+
_useFormValue2 = _slicedToArray(_useFormValue, 3),
|
|
5582
|
+
value = _useFormValue2[0],
|
|
5583
|
+
setValue = _useFormValue2[1],
|
|
5584
|
+
getValue = _useFormValue2[2];
|
|
5585
|
+
|
|
5586
|
+
var _useTransientErrorHel = useTransientErrorHelper(),
|
|
5587
|
+
_useTransientErrorHel2 = _slicedToArray(_useTransientErrorHel, 2),
|
|
5588
|
+
_setErrors = _useTransientErrorHel2[0],
|
|
5589
|
+
clearErrors = _useTransientErrorHel2[1];
|
|
5590
|
+
|
|
5591
|
+
var setErrors = function setErrors() {
|
|
5592
|
+
for (var _len2 = arguments.length, errors = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|
5593
|
+
errors[_key2] = arguments[_key2];
|
|
5594
|
+
}
|
|
5595
|
+
|
|
5596
|
+
_setErrors(errors.length ? errors.map(function (k) {
|
|
5597
|
+
return _isString(k) ? [k, ''] : k;
|
|
5598
|
+
}) : [[path, '']]);
|
|
5599
|
+
|
|
5600
|
+
return true;
|
|
5601
|
+
};
|
|
5602
|
+
|
|
5603
|
+
var expand = core.useToggle(isOpen, function (newV, prevV) {
|
|
5604
|
+
if (newV === 0 || prevV === 0) {
|
|
5605
|
+
return;
|
|
5606
|
+
}
|
|
5607
|
+
|
|
5608
|
+
if (newV === false) {
|
|
5609
|
+
var result = isValid(getValue(), setErrors);
|
|
5610
|
+
|
|
5611
|
+
if (result === true) {
|
|
5612
|
+
clearErrors();
|
|
5613
|
+
}
|
|
5614
|
+
|
|
5615
|
+
return result;
|
|
5616
|
+
}
|
|
5617
|
+
});
|
|
5618
|
+
var openWhenResult = utils.callIfFunction(openWhen);
|
|
5619
|
+
React.useEffect(function () {
|
|
5620
|
+
if (openWhenResult) {
|
|
5621
|
+
expand.open();
|
|
5622
|
+
}
|
|
5623
|
+
}, [openWhenResult]);
|
|
5624
|
+
React.useEffect(function () {
|
|
5625
|
+
return function () {
|
|
5626
|
+
if (expand.get() === 0) {
|
|
5627
|
+
expand.close();
|
|
5628
|
+
}
|
|
5629
|
+
};
|
|
5630
|
+
}, [expand.isOpen]);
|
|
5631
|
+
var utils$1 = core.useLazyConstant(function () {
|
|
5632
|
+
return {
|
|
5633
|
+
close: utils.constrainEvent(expand.close),
|
|
5634
|
+
setValue: setValue
|
|
5635
|
+
};
|
|
5636
|
+
});
|
|
5637
|
+
|
|
5638
|
+
var onBlur = function onBlur(e) {
|
|
5639
|
+
if (e.currentTarget !== e.relatedTarget && (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget))) {
|
|
5640
|
+
if (utils.callIfFunction(retargetFilter, e.relatedTarget)) {
|
|
5641
|
+
e.target.focus();
|
|
5642
|
+
} else {
|
|
5643
|
+
expand.close();
|
|
5644
|
+
}
|
|
5645
|
+
}
|
|
5646
|
+
};
|
|
5647
|
+
|
|
5648
|
+
return React__default.createElement(ExpandableBoxStyled, {
|
|
5649
|
+
tabIndex: -1,
|
|
5650
|
+
onBlur: onBlur,
|
|
5651
|
+
collapsed: !expand.isOpen,
|
|
5652
|
+
fixMarginBottom: fixMarginBottom,
|
|
5653
|
+
onClick: shouldPreventExpand(expand.open)
|
|
5654
|
+
}, React__default.createElement(FlipDiv$1, {
|
|
5655
|
+
key: expand.isOpen,
|
|
5656
|
+
useAnimation: flipAnimation,
|
|
5657
|
+
animation: animation,
|
|
5658
|
+
animationTiming: animationTiming
|
|
5659
|
+
}, expand.isOpen ? utils.callIfFunction(children, value, utils$1) : React__default.createElement(React__default.Fragment, null, utils.callIfFunction(info, value, utils$1), React__default.createElement(EditIcon, null))));
|
|
5660
|
+
};
|
|
5661
|
+
|
|
5662
|
+
var overflowEffect = function overflowEffect(element) {
|
|
5663
|
+
var _element$offsetParent;
|
|
5664
|
+
|
|
5665
|
+
if (!(element === null || element === void 0 ? void 0 : (_element$offsetParent = element.offsetParent) === null || _element$offsetParent === void 0 ? void 0 : _element$offsetParent.parentElement)) {
|
|
5666
|
+
return;
|
|
5667
|
+
}
|
|
5668
|
+
|
|
5669
|
+
var parentDom = element.offsetParent.parentElement;
|
|
5670
|
+
var previousOverflow = parentDom.style.overflow;
|
|
5671
|
+
parentDom.style.overflow = 'hidden';
|
|
5672
|
+
return function () {
|
|
5673
|
+
return parentDom.style.overflow = previousOverflow;
|
|
5674
|
+
};
|
|
5675
|
+
};
|
|
5676
|
+
|
|
5677
|
+
var FlipDivStyle = styled__default.div.withConfig({
|
|
5678
|
+
displayName: "ExpandableBox__FlipDivStyle",
|
|
5679
|
+
componentId: "sc-1nsk1wq-2"
|
|
5680
|
+
})(["position:relative;"]);
|
|
5681
|
+
|
|
5682
|
+
var FlipDiv$1 = function FlipDiv(_ref2) {
|
|
5683
|
+
var useAnimation = _ref2.useAnimation,
|
|
5684
|
+
animation = _ref2.animation,
|
|
5685
|
+
animationTiming = _ref2.animationTiming,
|
|
5686
|
+
props = _objectWithoutProperties(_ref2, ["useAnimation", "animation", "animationTiming"]);
|
|
5687
|
+
|
|
5688
|
+
var ref = React.useRef();
|
|
5689
|
+
useAnimation(ref, null, null, {
|
|
5690
|
+
switchAnimation: animation,
|
|
5691
|
+
timing: animationTiming,
|
|
5692
|
+
effect: overflowEffect
|
|
5693
|
+
});
|
|
5694
|
+
return React__default.createElement(FlipDivStyle, _extends({}, props, {
|
|
5695
|
+
ref: ref
|
|
5696
|
+
}));
|
|
5697
|
+
};
|
|
5698
|
+
|
|
5699
|
+
var IconRadioBoxText = styled__default.div.withConfig({
|
|
5700
|
+
displayName: "IconRadioBox__IconRadioBoxText",
|
|
5226
5701
|
componentId: "ka3uhk-0"
|
|
5227
|
-
})(["flex-grow:1;padding:0 0.5rem 0.5rem;min-height:2rem;display:flex;justify-content:center;align-items:center;text-align:center;"])
|
|
5228
|
-
|
|
5229
|
-
|
|
5702
|
+
})(["flex-grow:1;padding:0 0.5rem 0.5rem;min-height:2rem;display:flex;justify-content:center;align-items:center;text-align:center;font-size:12px;color:", ";", " ", ""], utils.getColor('gray120'), function (props) {
|
|
5703
|
+
return props.checked && styled.css(["color:", ";"], utils.getColor('main'));
|
|
5704
|
+
}, function (props) {
|
|
5705
|
+
return props.highlightedDesc && styled.css(["background:", ";padding:0.25rem 0.5rem;min-height:3rem;", ""], utils.getColor('gray240'), function (props) {
|
|
5706
|
+
return props.checked && styled.css(["background:", ";"], function (props) {
|
|
5707
|
+
return polished.desaturate(0.3, polished.lighten(0.52, utils.getColor("main")(props)));
|
|
5708
|
+
});
|
|
5709
|
+
});
|
|
5710
|
+
});
|
|
5711
|
+
var IconRadioBoxIconContainer = styled__default.div.withConfig({
|
|
5712
|
+
displayName: "IconRadioBox__IconRadioBoxIconContainer",
|
|
5230
5713
|
componentId: "ka3uhk-1"
|
|
5231
5714
|
})(["display:flex;justify-content:center;align-items:center;text-align:center;"]);
|
|
5232
5715
|
var Wrapper = styled__default.div.withConfig({
|
|
5233
5716
|
displayName: "IconRadioBox__Wrapper",
|
|
5234
5717
|
componentId: "ka3uhk-2"
|
|
5235
|
-
})(["width:100%;display:flex;flex-direction:column;
|
|
5236
|
-
return props.checked
|
|
5718
|
+
})(["width:100%;display:flex;flex-direction:column;cursor:pointer;border-radius:6px;background-color:white;border:1px solid ", ";overflow:hidden;color:", ";", "{font-size:100px;line-height:50px;line-height:76px;width:100%;}", " input{opacity:0;position:absolute;left:-20000000px;}", " ", ""], utils.getColor('gray210'), utils.getColor('gray150'), components.Icon, function (props) {
|
|
5719
|
+
return props.checked && styled.css(["color:", ";border-color:", ";"], utils.getColor('main'), utils.getColor('main'));
|
|
5237
5720
|
}, function (props) {
|
|
5238
|
-
return props.focused && "\n ".concat(
|
|
5721
|
+
return props.focused && "\n ".concat(IconRadioBoxIconContainer, "::after {\n content: '';\n position: absolute;\n top: -4px;\n right: -4px;\n left: -4px;\n bottom: -4px;\n border-radius: 10px;\n border: 3px solid rgba(0, 0, 0, 0.15);\n }");
|
|
5239
5722
|
}, utils.customTheme("IconRadioBox"));
|
|
5240
5723
|
var IconRadioBox = styled__default(function (_ref) {
|
|
5241
5724
|
var icon = _ref.icon,
|
|
5242
5725
|
label = _ref.label,
|
|
5243
|
-
|
|
5726
|
+
highlightedDesc = _ref.highlightedDesc,
|
|
5727
|
+
props = _objectWithoutProperties(_ref, ["icon", "label", "highlightedDesc"]);
|
|
5244
5728
|
|
|
5245
5729
|
return React__default.createElement(Radiobox, props, function (_ref2) {
|
|
5246
5730
|
var checked = _ref2.checked,
|
|
@@ -5250,9 +5734,12 @@ var IconRadioBox = styled__default(function (_ref) {
|
|
|
5250
5734
|
return React__default.createElement(Wrapper, {
|
|
5251
5735
|
checked: checked,
|
|
5252
5736
|
focused: focused
|
|
5253
|
-
}, React__default.createElement(
|
|
5737
|
+
}, React__default.createElement(IconRadioBoxIconContainer, null, React__default.createElement(components.Icon, {
|
|
5254
5738
|
icon: icon
|
|
5255
|
-
})), checked, React__default.createElement(
|
|
5739
|
+
})), checked, React__default.createElement(IconRadioBoxText, {
|
|
5740
|
+
highlightedDesc: highlightedDesc,
|
|
5741
|
+
checked: checked
|
|
5742
|
+
}, label));
|
|
5256
5743
|
});
|
|
5257
5744
|
}).withConfig({
|
|
5258
5745
|
displayName: "IconRadioBox",
|
|
@@ -5274,7 +5761,7 @@ var Toggle = styled__default.div.withConfig({
|
|
|
5274
5761
|
var ToggleLabel = styled__default.div.withConfig({
|
|
5275
5762
|
displayName: "ToggleCheckbox__ToggleLabel",
|
|
5276
5763
|
componentId: "sc-11ob8ah-2"
|
|
5277
|
-
})(["flex-basis:0;flex-grow:1;display:inline-block;"]);
|
|
5764
|
+
})(["flex-basis:0;flex-grow:1;display:inline-block;font-size:13px;"]);
|
|
5278
5765
|
var DescText$2 = styled__default.div.withConfig({
|
|
5279
5766
|
displayName: "ToggleCheckbox__DescText",
|
|
5280
5767
|
componentId: "sc-11ob8ah-3"
|
|
@@ -5299,7 +5786,7 @@ var ToggleCheckbox = styled__default(function (_ref) {
|
|
|
5299
5786
|
checked = _ref2.checked,
|
|
5300
5787
|
hasErrors = _ref2.hasErrors,
|
|
5301
5788
|
focused = _ref2.focused;
|
|
5302
|
-
return React__default.createElement(React__default.Fragment, null, React__default.createElement(ToggleLabel, null, label, descText && React__default.createElement(DescText$2, null, descText)), React__default.createElement(Toggle, {
|
|
5789
|
+
return React__default.createElement(React__default.Fragment, null, React__default.createElement(ToggleLabel, null, label, helpText && React__default.createElement(HelpText, null, " ", helpText), descText && React__default.createElement(DescText$2, null, descText)), React__default.createElement(Toggle, {
|
|
5303
5790
|
checked: checked
|
|
5304
5791
|
}));
|
|
5305
5792
|
});
|
|
@@ -5312,10 +5799,10 @@ var ToggleCheckbox = styled__default(function (_ref) {
|
|
|
5312
5799
|
return props.disabled && "\n opacity: 0.8;\n pointer-events:none;\n ";
|
|
5313
5800
|
});
|
|
5314
5801
|
|
|
5315
|
-
function _templateObject$
|
|
5316
|
-
var data = _taggedTemplateLiteral(["\n
|
|
5802
|
+
function _templateObject$7() {
|
|
5803
|
+
var data = _taggedTemplateLiteral(["\n min-width: 0;\n ", "\n "]);
|
|
5317
5804
|
|
|
5318
|
-
_templateObject$
|
|
5805
|
+
_templateObject$7 = function _templateObject() {
|
|
5319
5806
|
return data;
|
|
5320
5807
|
};
|
|
5321
5808
|
|
|
@@ -5324,7 +5811,7 @@ function _templateObject$6() {
|
|
|
5324
5811
|
var TabButton = styled__default(components.Button).withConfig({
|
|
5325
5812
|
displayName: "TabRadiobox__TabButton",
|
|
5326
5813
|
componentId: "sc-1vu3bcn-0"
|
|
5327
|
-
})(["width:100%;margin-left:0;padding:9px 1rem;flex-grow:1;background:", ";box-shadow:none;color:", ";border:1px solid ", ";border-left-width:0
|
|
5814
|
+
})(["width:100%;margin-left:0;padding:9px 1rem;flex-grow:1;background:", ";box-shadow:none;color:", ";border:1px solid ", ";border-left-width:0;height:100%;:hover{background:", ";}", " ", " ", " ", " ", " ", ""], function (props) {
|
|
5328
5815
|
return props.white ? 'white' : utils.getColor('gray240');
|
|
5329
5816
|
}, utils.getColor('gray120'), utils.getColor('gray210'), function (props) {
|
|
5330
5817
|
return polished.desaturate(0.6, polished.lighten(0.5, utils.getColor("main")(props)));
|
|
@@ -5334,7 +5821,9 @@ var TabButton = styled__default(components.Button).withConfig({
|
|
|
5334
5821
|
return props.isFirst !== undefined && !props.isFirst && "\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n :focus:after{\n border-bottom-left-radius: 2px;\n border-top-left-radius: 2px;\n }\n ";
|
|
5335
5822
|
}, function (props) {
|
|
5336
5823
|
return props.isLast !== undefined && !props.isLast && "\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n :focus:after{\n border-bottom-right-radius: 2px;\n border-top-right-radius: 2px;\n z-index: 2;\n }\n ";
|
|
5337
|
-
}, utils.media.mobile(_templateObject$
|
|
5824
|
+
}, utils.media.mobile(_templateObject$7(), function (props) {
|
|
5825
|
+
return props.icon ? "\n padding-left: 1.25rem;\n padding-right: 1rem;\n " : "\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n ";
|
|
5826
|
+
}), utils.customTheme('TabButton'));
|
|
5338
5827
|
var InnerButton = styled__default.a.withConfig({
|
|
5339
5828
|
displayName: "TabRadiobox__InnerButton",
|
|
5340
5829
|
componentId: "sc-1vu3bcn-1"
|
|
@@ -5490,6 +5979,7 @@ exports.EnhanceInput = EnhanceInput;
|
|
|
5490
5979
|
exports.ErrorFilterProvider = ErrorFilterProvider;
|
|
5491
5980
|
exports.Errors = Errors;
|
|
5492
5981
|
exports.ErrorsContext = ErrorsContext;
|
|
5982
|
+
exports.ExpandableBox = ExpandableBox;
|
|
5493
5983
|
exports.Field = Field;
|
|
5494
5984
|
exports.FieldDescription = FieldDescription;
|
|
5495
5985
|
exports.FileInput = FileInput;
|
|
@@ -5501,7 +5991,9 @@ exports.FormMeta = FormMeta;
|
|
|
5501
5991
|
exports.FormValue = FormValue;
|
|
5502
5992
|
exports.HelpText = HelpText;
|
|
5503
5993
|
exports.IconRadioBox = IconRadioBox;
|
|
5504
|
-
exports.
|
|
5994
|
+
exports.IconRadioBoxIconContainer = IconRadioBoxIconContainer;
|
|
5995
|
+
exports.IconRadioBoxText = IconRadioBoxText;
|
|
5996
|
+
exports.IfFormValue = IfFormValue;
|
|
5505
5997
|
exports.InputboxGroup = InputboxGroup;
|
|
5506
5998
|
exports.Option = Option;
|
|
5507
5999
|
exports.PathContext = PathContext;
|
|
@@ -5510,22 +6002,24 @@ exports.RadioboxGroup = RadioboxGroup;
|
|
|
5510
6002
|
exports.RichText = RichText;
|
|
5511
6003
|
exports.RichTextContainer = RichTextContainer;
|
|
5512
6004
|
exports.RichTextInput = RichTextInput;
|
|
6005
|
+
exports.SEPARATOR = SEPARATOR;
|
|
5513
6006
|
exports.SimpleCheckbox = SimpleCheckbox;
|
|
5514
6007
|
exports.SimpleRadiobox = SimpleRadiobox;
|
|
6008
|
+
exports.TabButton = TabButton;
|
|
5515
6009
|
exports.TabRadiobox = TabRadiobox;
|
|
5516
6010
|
exports.TextInput = TextInput;
|
|
5517
6011
|
exports.ToggleCheckbox = ToggleCheckbox;
|
|
5518
6012
|
exports.WithForm = WithForm;
|
|
5519
6013
|
exports.WithImageInput = WithImageInput;
|
|
6014
|
+
exports.checkErrors = checkErrors;
|
|
5520
6015
|
exports.enhanceInput = enhanceInput;
|
|
5521
6016
|
exports.enhancedInputDisplayName = enhancedInputDisplayName;
|
|
5522
6017
|
exports.getFormResponse = getFormResponse;
|
|
5523
6018
|
exports.getFormValues = getFormValues;
|
|
5524
6019
|
exports.useConfirmDialog = useConfirmDialog;
|
|
5525
6020
|
exports.useConfirmDialogWithProps = useConfirmDialogWithProps;
|
|
5526
|
-
exports.useDialog = useDialog;
|
|
5527
|
-
exports.useDialogWithToggle = useDialogWithToggle;
|
|
5528
6021
|
exports.useErrors = useErrors;
|
|
6022
|
+
exports.useErrorsUtils = useErrorsUtils;
|
|
5529
6023
|
exports.useForm = useForm;
|
|
5530
6024
|
exports.useFormMeta = useFormMeta;
|
|
5531
6025
|
exports.useFormValue = useFormValue;
|
|
@@ -5534,6 +6028,7 @@ exports.useHasError = useHasError;
|
|
|
5534
6028
|
exports.useInput = useInput;
|
|
5535
6029
|
exports.useProvideErrors = useProvideErrors;
|
|
5536
6030
|
exports.useTextInput = useTextInput;
|
|
6031
|
+
exports.useTransientErrorHelper = useTransientErrorHelper;
|
|
5537
6032
|
exports.validation = validation;
|
|
5538
6033
|
exports.withForm = withForm;
|
|
5539
6034
|
exports.withForm2 = withForm2;
|