@coreui/react 4.1.1 → 4.1.2
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 +1 -1
- package/dist/components/modal/CModal.d.ts +1 -0
- package/dist/index.es.js +65 -27
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +65 -27
- package/dist/index.js.map +1 -1
- package/package.json +4 -4
- package/src/components/modal/CModal.tsx +42 -19
- package/src/components/modal/__tests__/CModal.spec.tsx +1 -1
- package/src/components/modal/__tests__/__snapshots__/CModal.spec.tsx.snap +2 -10
package/dist/index.js
CHANGED
|
@@ -385,6 +385,8 @@ var ReactPropTypesSecret$3 = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
|
|
|
385
385
|
|
|
386
386
|
var ReactPropTypesSecret_1 = ReactPropTypesSecret$3;
|
|
387
387
|
|
|
388
|
+
var has$2 = Function.call.bind(Object.prototype.hasOwnProperty);
|
|
389
|
+
|
|
388
390
|
/**
|
|
389
391
|
* Copyright (c) 2013-present, Facebook, Inc.
|
|
390
392
|
*
|
|
@@ -397,7 +399,7 @@ var printWarning$2 = function() {};
|
|
|
397
399
|
if (process.env.NODE_ENV !== 'production') {
|
|
398
400
|
var ReactPropTypesSecret$2 = ReactPropTypesSecret_1;
|
|
399
401
|
var loggedTypeFailures = {};
|
|
400
|
-
var has$1 =
|
|
402
|
+
var has$1 = has$2;
|
|
401
403
|
|
|
402
404
|
printWarning$2 = function(text) {
|
|
403
405
|
var message = 'Warning: ' + text;
|
|
@@ -409,7 +411,7 @@ if (process.env.NODE_ENV !== 'production') {
|
|
|
409
411
|
// This error was thrown as a convenience so that you can use this stack
|
|
410
412
|
// to find the callsite that caused this warning to fire.
|
|
411
413
|
throw new Error(message);
|
|
412
|
-
} catch (x) {}
|
|
414
|
+
} catch (x) { /**/ }
|
|
413
415
|
};
|
|
414
416
|
}
|
|
415
417
|
|
|
@@ -438,7 +440,8 @@ function checkPropTypes$1(typeSpecs, values, location, componentName, getStack)
|
|
|
438
440
|
if (typeof typeSpecs[typeSpecName] !== 'function') {
|
|
439
441
|
var err = Error(
|
|
440
442
|
(componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' +
|
|
441
|
-
'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.'
|
|
443
|
+
'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' +
|
|
444
|
+
'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.'
|
|
442
445
|
);
|
|
443
446
|
err.name = 'Invariant Violation';
|
|
444
447
|
throw err;
|
|
@@ -497,9 +500,9 @@ var ReactIs$1 = reactIs.exports;
|
|
|
497
500
|
var assign = objectAssign;
|
|
498
501
|
|
|
499
502
|
var ReactPropTypesSecret$1 = ReactPropTypesSecret_1;
|
|
503
|
+
var has = has$2;
|
|
500
504
|
var checkPropTypes = checkPropTypes_1;
|
|
501
505
|
|
|
502
|
-
var has = Function.call.bind(Object.prototype.hasOwnProperty);
|
|
503
506
|
var printWarning$1 = function() {};
|
|
504
507
|
|
|
505
508
|
if (process.env.NODE_ENV !== 'production') {
|
|
@@ -600,6 +603,7 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
|
|
|
600
603
|
// Keep this list in sync with production version in `./factoryWithThrowingShims.js`.
|
|
601
604
|
var ReactPropTypes = {
|
|
602
605
|
array: createPrimitiveTypeChecker('array'),
|
|
606
|
+
bigint: createPrimitiveTypeChecker('bigint'),
|
|
603
607
|
bool: createPrimitiveTypeChecker('boolean'),
|
|
604
608
|
func: createPrimitiveTypeChecker('function'),
|
|
605
609
|
number: createPrimitiveTypeChecker('number'),
|
|
@@ -645,8 +649,9 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
|
|
|
645
649
|
* is prohibitively expensive if they are created too often, such as what
|
|
646
650
|
* happens in oneOfType() for any type before the one that matched.
|
|
647
651
|
*/
|
|
648
|
-
function PropTypeError(message) {
|
|
652
|
+
function PropTypeError(message, data) {
|
|
649
653
|
this.message = message;
|
|
654
|
+
this.data = data && typeof data === 'object' ? data: {};
|
|
650
655
|
this.stack = '';
|
|
651
656
|
}
|
|
652
657
|
// Make `instanceof Error` still work for returned errors.
|
|
@@ -681,7 +686,7 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
|
|
|
681
686
|
) {
|
|
682
687
|
printWarning$1(
|
|
683
688
|
'You are manually calling a React.PropTypes validation ' +
|
|
684
|
-
'function for the `' + propFullName + '` prop on `' + componentName
|
|
689
|
+
'function for the `' + propFullName + '` prop on `' + componentName + '`. This is deprecated ' +
|
|
685
690
|
'and will throw in the standalone `prop-types` package. ' +
|
|
686
691
|
'You may be seeing this warning due to a third-party PropTypes ' +
|
|
687
692
|
'library. See https://fb.me/react-warning-dont-call-proptypes ' + 'for details.'
|
|
@@ -720,7 +725,10 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
|
|
|
720
725
|
// 'of type `object`'.
|
|
721
726
|
var preciseType = getPreciseType(propValue);
|
|
722
727
|
|
|
723
|
-
return new PropTypeError(
|
|
728
|
+
return new PropTypeError(
|
|
729
|
+
'Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.'),
|
|
730
|
+
{expectedType: expectedType}
|
|
731
|
+
);
|
|
724
732
|
}
|
|
725
733
|
return null;
|
|
726
734
|
}
|
|
@@ -864,14 +872,19 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
|
|
|
864
872
|
}
|
|
865
873
|
|
|
866
874
|
function validate(props, propName, componentName, location, propFullName) {
|
|
875
|
+
var expectedTypes = [];
|
|
867
876
|
for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
|
|
868
877
|
var checker = arrayOfTypeCheckers[i];
|
|
869
|
-
|
|
878
|
+
var checkerResult = checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret$1);
|
|
879
|
+
if (checkerResult == null) {
|
|
870
880
|
return null;
|
|
871
881
|
}
|
|
882
|
+
if (checkerResult.data.hasOwnProperty('expectedType')) {
|
|
883
|
+
expectedTypes.push(checkerResult.data.expectedType);
|
|
884
|
+
}
|
|
872
885
|
}
|
|
873
|
-
|
|
874
|
-
return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '
|
|
886
|
+
var expectedTypesMessage = (expectedTypes.length > 0) ? ', expected one of type [' + expectedTypes.join(', ') + ']': '';
|
|
887
|
+
return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`' + expectedTypesMessage + '.'));
|
|
875
888
|
}
|
|
876
889
|
return createChainableTypeChecker(validate);
|
|
877
890
|
}
|
|
@@ -886,6 +899,13 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
|
|
|
886
899
|
return createChainableTypeChecker(validate);
|
|
887
900
|
}
|
|
888
901
|
|
|
902
|
+
function invalidValidatorError(componentName, location, propFullName, key, type) {
|
|
903
|
+
return new PropTypeError(
|
|
904
|
+
(componentName || 'React class') + ': ' + location + ' type `' + propFullName + '.' + key + '` is invalid; ' +
|
|
905
|
+
'it must be a function, usually from the `prop-types` package, but received `' + type + '`.'
|
|
906
|
+
);
|
|
907
|
+
}
|
|
908
|
+
|
|
889
909
|
function createShapeTypeChecker(shapeTypes) {
|
|
890
910
|
function validate(props, propName, componentName, location, propFullName) {
|
|
891
911
|
var propValue = props[propName];
|
|
@@ -895,8 +915,8 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
|
|
|
895
915
|
}
|
|
896
916
|
for (var key in shapeTypes) {
|
|
897
917
|
var checker = shapeTypes[key];
|
|
898
|
-
if (
|
|
899
|
-
|
|
918
|
+
if (typeof checker !== 'function') {
|
|
919
|
+
return invalidValidatorError(componentName, location, propFullName, key, getPreciseType(checker));
|
|
900
920
|
}
|
|
901
921
|
var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret$1);
|
|
902
922
|
if (error) {
|
|
@@ -915,16 +935,18 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
|
|
|
915
935
|
if (propType !== 'object') {
|
|
916
936
|
return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
|
|
917
937
|
}
|
|
918
|
-
// We need to check all keys in case some are required but missing from
|
|
919
|
-
// props.
|
|
938
|
+
// We need to check all keys in case some are required but missing from props.
|
|
920
939
|
var allKeys = assign({}, props[propName], shapeTypes);
|
|
921
940
|
for (var key in allKeys) {
|
|
922
941
|
var checker = shapeTypes[key];
|
|
942
|
+
if (has(shapeTypes, key) && typeof checker !== 'function') {
|
|
943
|
+
return invalidValidatorError(componentName, location, propFullName, key, getPreciseType(checker));
|
|
944
|
+
}
|
|
923
945
|
if (!checker) {
|
|
924
946
|
return new PropTypeError(
|
|
925
947
|
'Invalid ' + location + ' `' + propFullName + '` key `' + key + '` supplied to `' + componentName + '`.' +
|
|
926
948
|
'\nBad object: ' + JSON.stringify(props[propName], null, ' ') +
|
|
927
|
-
'\nValid keys: ' +
|
|
949
|
+
'\nValid keys: ' + JSON.stringify(Object.keys(shapeTypes), null, ' ')
|
|
928
950
|
);
|
|
929
951
|
}
|
|
930
952
|
var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret$1);
|
|
@@ -1109,6 +1131,7 @@ var factoryWithThrowingShims = function() {
|
|
|
1109
1131
|
// Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
|
|
1110
1132
|
var ReactPropTypes = {
|
|
1111
1133
|
array: shim,
|
|
1134
|
+
bigint: shim,
|
|
1112
1135
|
bool: shim,
|
|
1113
1136
|
func: shim,
|
|
1114
1137
|
number: shim,
|
|
@@ -6437,11 +6460,12 @@ CModalDialog.displayName = 'CModalDialog';
|
|
|
6437
6460
|
|
|
6438
6461
|
var CModalContext = React.createContext({});
|
|
6439
6462
|
var CModal = React.forwardRef(function (_a, ref) {
|
|
6440
|
-
var children = _a.children, alignment = _a.alignment, _b = _a.backdrop, backdrop = _b === void 0 ? true : _b, className = _a.className, _c = _a.duration, duration = _c === void 0 ? 150 : _c, fullscreen = _a.fullscreen, _d = _a.keyboard, keyboard = _d === void 0 ? true : _d, onClose = _a.onClose, onClosePrevented = _a.onClosePrevented, onShow = _a.onShow, _e = _a.portal, portal = _e === void 0 ? true : _e, scrollable = _a.scrollable, size = _a.size, _f = _a.transition, transition = _f === void 0 ? true : _f, visible = _a.visible;
|
|
6463
|
+
var children = _a.children, alignment = _a.alignment, _b = _a.backdrop, backdrop = _b === void 0 ? true : _b, className = _a.className, _c = _a.duration, duration = _c === void 0 ? 150 : _c, fullscreen = _a.fullscreen, _d = _a.keyboard, keyboard = _d === void 0 ? true : _d, onClose = _a.onClose, onClosePrevented = _a.onClosePrevented, onShow = _a.onShow, _e = _a.portal, portal = _e === void 0 ? true : _e, scrollable = _a.scrollable, size = _a.size, _f = _a.transition, transition = _f === void 0 ? true : _f, _g = _a.unmountOnClose, unmountOnClose = _g === void 0 ? true : _g, visible = _a.visible;
|
|
6441
6464
|
var modalRef = React.useRef(null);
|
|
6465
|
+
var modalContentRef = React.useRef(null);
|
|
6442
6466
|
var forkedRef = useForkedRef(ref, modalRef);
|
|
6443
|
-
var
|
|
6444
|
-
var
|
|
6467
|
+
var _h = React.useState(visible), _visible = _h[0], setVisible = _h[1];
|
|
6468
|
+
var _j = React.useState(false), staticBackdrop = _j[0], setStaticBackdrop = _j[1];
|
|
6445
6469
|
React.useEffect(function () {
|
|
6446
6470
|
setVisible(visible);
|
|
6447
6471
|
}, [visible]);
|
|
@@ -6449,6 +6473,14 @@ var CModal = React.forwardRef(function (_a, ref) {
|
|
|
6449
6473
|
visible: _visible,
|
|
6450
6474
|
setVisible: setVisible,
|
|
6451
6475
|
};
|
|
6476
|
+
React.useEffect(function () {
|
|
6477
|
+
modalRef.current && modalRef.current.addEventListener('click', handleClickOutside);
|
|
6478
|
+
modalRef.current && modalRef.current.addEventListener('keyup', handleKeyDown);
|
|
6479
|
+
return function () {
|
|
6480
|
+
modalRef.current && modalRef.current.removeEventListener('click', handleClickOutside);
|
|
6481
|
+
modalRef.current && modalRef.current.removeEventListener('keyup', handleKeyDown);
|
|
6482
|
+
};
|
|
6483
|
+
}, [_visible]);
|
|
6452
6484
|
var handleDismiss = function () {
|
|
6453
6485
|
if (backdrop === 'static') {
|
|
6454
6486
|
return setStaticBackdrop(true);
|
|
@@ -6486,6 +6518,12 @@ var CModal = React.forwardRef(function (_a, ref) {
|
|
|
6486
6518
|
}
|
|
6487
6519
|
return function () { return document.body.classList.remove('modal-open'); };
|
|
6488
6520
|
}, [_visible]);
|
|
6521
|
+
var handleClickOutside = function (event) {
|
|
6522
|
+
if (modalContentRef.current &&
|
|
6523
|
+
!modalContentRef.current.contains(event.target)) {
|
|
6524
|
+
handleDismiss();
|
|
6525
|
+
}
|
|
6526
|
+
};
|
|
6489
6527
|
var handleKeyDown = React.useCallback(function (event) {
|
|
6490
6528
|
if (event.key === 'Escape' && keyboard) {
|
|
6491
6529
|
return handleDismiss();
|
|
@@ -6494,17 +6532,16 @@ var CModal = React.forwardRef(function (_a, ref) {
|
|
|
6494
6532
|
var modal = function (ref, transitionClass) {
|
|
6495
6533
|
return (React__default["default"].createElement(CModalContext.Provider, { value: contextValues },
|
|
6496
6534
|
React__default["default"].createElement("div", { className: classNames(_className, transitionClass), tabIndex: -1, role: "dialog", ref: ref },
|
|
6497
|
-
React__default["default"].createElement(CModalDialog, { alignment: alignment, fullscreen: fullscreen, scrollable: scrollable, size: size
|
|
6498
|
-
React__default["default"].createElement(CModalContent,
|
|
6535
|
+
React__default["default"].createElement(CModalDialog, { alignment: alignment, fullscreen: fullscreen, scrollable: scrollable, size: size },
|
|
6536
|
+
React__default["default"].createElement(CModalContent, { ref: modalContentRef }, children)))));
|
|
6499
6537
|
};
|
|
6500
6538
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
6501
|
-
React__default["default"].createElement(
|
|
6502
|
-
|
|
6503
|
-
|
|
6504
|
-
|
|
6505
|
-
|
|
6506
|
-
|
|
6507
|
-
})),
|
|
6539
|
+
React__default["default"].createElement(Transition$1, { in: _visible, mountOnEnter: true, onEnter: onShow, onExit: onClose, unmountOnExit: unmountOnClose, timeout: !transition ? 0 : duration }, function (state) {
|
|
6540
|
+
var transitionClass = getTransitionClass(state);
|
|
6541
|
+
return typeof window !== 'undefined' && portal
|
|
6542
|
+
? ReactDOM.createPortal(modal(forkedRef, transitionClass), document.body)
|
|
6543
|
+
: modal(forkedRef, transitionClass);
|
|
6544
|
+
}),
|
|
6508
6545
|
typeof window !== 'undefined' && portal
|
|
6509
6546
|
? backdrop && ReactDOM.createPortal(React__default["default"].createElement(CBackdrop, { visible: _visible }), document.body)
|
|
6510
6547
|
: backdrop && React__default["default"].createElement(CBackdrop, { visible: _visible })));
|
|
@@ -6527,6 +6564,7 @@ CModal.propTypes = {
|
|
|
6527
6564
|
scrollable: PropTypes.bool,
|
|
6528
6565
|
size: PropTypes.oneOf(['sm', 'lg', 'xl']),
|
|
6529
6566
|
transition: PropTypes.bool,
|
|
6567
|
+
unmountOnClose: PropTypes.bool,
|
|
6530
6568
|
visible: PropTypes.bool,
|
|
6531
6569
|
};
|
|
6532
6570
|
CModal.displayName = 'CModal';
|