@panneau/element-modal 3.0.55 → 3.0.68

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.
Files changed (4) hide show
  1. package/assets/css/styles.css +1 -1
  2. package/es/index.js +17 -4
  3. package/lib/index.js +16 -3
  4. package/package.json +2 -2
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .panneau-element-modal-modal{bottom:0;display:-ms-flexbox;display:flex;height:100%;left:9;overflow-y:auto;position:absolute;right:0;top:0;width:100%}.panneau-element-modal-modal.panneau-element-modal-center>.panneau-element-modal-inner{margin:auto}.panneau-element-modal-modal.panneau-element-modal-top>.panneau-element-modal-inner{margin:0 auto;padding:1.75rem 0}.panneau-element-modal-modalsContainer{position:static}.panneau-element-modal-modals.panneau-element-modal-hasModals{background-color:rgba(0,0,0,.3);bottom:0;left:0;position:fixed;right:0;top:0;z-index:9999}
1
+ .panneau-element-modal-modal{bottom:0;display:-ms-flexbox;display:flex;height:100%;left:9px;overflow-y:auto;position:absolute;right:0;top:0;width:100%}.panneau-element-modal-modal.panneau-element-modal-center>.panneau-element-modal-inner{margin:auto}.panneau-element-modal-modal.panneau-element-modal-top>.panneau-element-modal-inner{margin:0 auto;padding:1.75rem 0}.panneau-element-modal-modal .panneau-element-modal-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:block;font-family:inherit}.panneau-element-modal-modal .panneau-element-modal-button:focus{outline:none}.panneau-element-modal-modalsContainer{position:static}.panneau-element-modal-modals.panneau-element-modal-hasModals{background-color:rgba(0,0,0,.3);bottom:0;left:0;position:fixed;right:0;top:0;z-index:9999}
package/es/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import _defineProperty from '@babel/runtime/helpers/defineProperty';
2
2
  import classNames from 'classnames';
3
3
  import PropTypes from 'prop-types';
4
- import React, { useMemo, useEffect, useRef } from 'react';
4
+ import React, { useMemo, useEffect, useCallback, useRef } from 'react';
5
5
  import { getDisplayName } from '@panneau/core/utils';
6
6
  import ReactDOM from 'react-dom';
7
7
  import { useModal } from '@panneau/core/contexts';
@@ -51,25 +51,28 @@ ModalPortal.propTypes = propTypes$2;
51
51
  ModalPortal.defaultProps = defaultProps$2;
52
52
  var ModalPortal$1 = ModalPortal;
53
53
 
54
- var styles = {"modal":"panneau-element-modal-modal","center":"panneau-element-modal-center","inner":"panneau-element-modal-inner","top":"panneau-element-modal-top","modalsContainer":"panneau-element-modal-modalsContainer","modals":"panneau-element-modal-modals","hasModals":"panneau-element-modal-hasModals"};
54
+ var styles = {"modal":"panneau-element-modal-modal","center":"panneau-element-modal-center","inner":"panneau-element-modal-inner","top":"panneau-element-modal-top","button":"panneau-element-modal-button","modalsContainer":"panneau-element-modal-modalsContainer","modals":"panneau-element-modal-modals","hasModals":"panneau-element-modal-hasModals"};
55
55
 
56
56
  var propTypes$1 = {
57
57
  id: PropTypes.string,
58
58
  title: PropTypes.string,
59
59
  position: PropTypes.oneOf(['center', 'top']),
60
+ onClose: PropTypes.func,
60
61
  children: PropTypes.node
61
62
  };
62
63
  var defaultProps$1 = {
63
64
  id: null,
64
65
  title: null,
65
66
  position: 'center',
67
+ onClose: null,
66
68
  children: null
67
69
  };
68
70
  var Modal = function Modal(_ref) {
69
71
  var id = _ref.id,
70
72
  children = _ref.children,
71
73
  position = _ref.position,
72
- title = _ref.title;
74
+ title = _ref.title,
75
+ onClose = _ref.onClose;
73
76
  var name = getDisplayName(children);
74
77
  var finalId = useMemo(function () {
75
78
  return id || name || 'Modal';
@@ -79,12 +82,22 @@ var Modal = function Modal(_ref) {
79
82
  title: title
80
83
  };
81
84
  }, [title]);
85
+ var onClick = useCallback(function () {
86
+ if (onClose !== null) {
87
+ onClose();
88
+ }
89
+ }, [onClose]);
82
90
  return /*#__PURE__*/React.createElement(ModalPortal$1, {
83
91
  id: finalId,
84
92
  data: data
85
93
  }, /*#__PURE__*/React.createElement("div", {
86
94
  className: classNames([styles.modal, _defineProperty({}, styles[position], position !== null)])
87
- }, /*#__PURE__*/React.createElement("div", {
95
+ }, onClose !== null ? /*#__PURE__*/React.createElement("button", {
96
+ type: "button",
97
+ className: classNames(['modal', 'fade', 'show', 'd-block', styles.inner, styles.button]),
98
+ tabIndex: "-1",
99
+ onClick: onClick
100
+ }, children) : /*#__PURE__*/React.createElement("div", {
88
101
  className: classNames(['modal', 'fade', 'show', 'd-block', styles.inner]),
89
102
  tabIndex: "-1"
90
103
  }, children)));
package/lib/index.js CHANGED
@@ -63,25 +63,28 @@ ModalPortal.propTypes = propTypes$2;
63
63
  ModalPortal.defaultProps = defaultProps$2;
64
64
  var ModalPortal$1 = ModalPortal;
65
65
 
66
- var styles = {"modal":"panneau-element-modal-modal","center":"panneau-element-modal-center","inner":"panneau-element-modal-inner","top":"panneau-element-modal-top","modalsContainer":"panneau-element-modal-modalsContainer","modals":"panneau-element-modal-modals","hasModals":"panneau-element-modal-hasModals"};
66
+ var styles = {"modal":"panneau-element-modal-modal","center":"panneau-element-modal-center","inner":"panneau-element-modal-inner","top":"panneau-element-modal-top","button":"panneau-element-modal-button","modalsContainer":"panneau-element-modal-modalsContainer","modals":"panneau-element-modal-modals","hasModals":"panneau-element-modal-hasModals"};
67
67
 
68
68
  var propTypes$1 = {
69
69
  id: PropTypes__default["default"].string,
70
70
  title: PropTypes__default["default"].string,
71
71
  position: PropTypes__default["default"].oneOf(['center', 'top']),
72
+ onClose: PropTypes__default["default"].func,
72
73
  children: PropTypes__default["default"].node
73
74
  };
74
75
  var defaultProps$1 = {
75
76
  id: null,
76
77
  title: null,
77
78
  position: 'center',
79
+ onClose: null,
78
80
  children: null
79
81
  };
80
82
  var Modal = function Modal(_ref) {
81
83
  var id = _ref.id,
82
84
  children = _ref.children,
83
85
  position = _ref.position,
84
- title = _ref.title;
86
+ title = _ref.title,
87
+ onClose = _ref.onClose;
85
88
  var name = utils.getDisplayName(children);
86
89
  var finalId = React.useMemo(function () {
87
90
  return id || name || 'Modal';
@@ -91,12 +94,22 @@ var Modal = function Modal(_ref) {
91
94
  title: title
92
95
  };
93
96
  }, [title]);
97
+ var onClick = React.useCallback(function () {
98
+ if (onClose !== null) {
99
+ onClose();
100
+ }
101
+ }, [onClose]);
94
102
  return /*#__PURE__*/React__default["default"].createElement(ModalPortal$1, {
95
103
  id: finalId,
96
104
  data: data
97
105
  }, /*#__PURE__*/React__default["default"].createElement("div", {
98
106
  className: classNames__default["default"]([styles.modal, _defineProperty__default["default"]({}, styles[position], position !== null)])
99
- }, /*#__PURE__*/React__default["default"].createElement("div", {
107
+ }, onClose !== null ? /*#__PURE__*/React__default["default"].createElement("button", {
108
+ type: "button",
109
+ className: classNames__default["default"](['modal', 'fade', 'show', 'd-block', styles.inner, styles.button]),
110
+ tabIndex: "-1",
111
+ onClick: onClick
112
+ }, children) : /*#__PURE__*/React__default["default"].createElement("div", {
100
113
  className: classNames__default["default"](['modal', 'fade', 'show', 'd-block', styles.inner]),
101
114
  tabIndex: "-1"
102
115
  }, children)));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@panneau/element-modal",
3
- "version": "3.0.55",
3
+ "version": "3.0.68",
4
4
  "description": "Modal element",
5
5
  "keywords": [
6
6
  "javascript"
@@ -56,5 +56,5 @@
56
56
  "publishConfig": {
57
57
  "access": "public"
58
58
  },
59
- "gitHead": "addd3ea0574a0bd88ba88ac61d05dc923a24d8bd"
59
+ "gitHead": "75181f562ce5de48321792aac382d4b5f71c5851"
60
60
  }