@ausbom/modal 0.2.5 → 0.2.7
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/Modal.js +2 -2
- package/package.json +7 -9
package/lib/Modal.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _icon=require("@ausbom/icon");var
|
|
2
|
-
(0,_defineProperty2["default"])(_this,"renderHeader",function(){var _this$props=_this.props,a11yId=_this$props.a11yId,title=_this$props.title,titleLabel=_this$props.titleLabel,titleLabelPreamble=_this$props.titleLabelPreamble;var titleId="".concat(a11yId,"_modal");var hasNoTitle=!title||typeof title!=="string"||typeof title==="string"&&title.trim()==="";return/*#__PURE__*/_react["default"].createElement("div",(0,_extends2["default"])({ref:function ref(n){_this.titleModalRef=n},className:(0,_classnames["default"])("bom-modal-header",{"bom-modal-header--no-title":hasNoTitle})},hasNoTitle&&{"aria-label":"".concat(titleLabelPreamble," ").concat(titleLabel).trim()}),title!=null&&/*#__PURE__*/_react["default"].createElement("div",{className:(0,_classnames["default"])("bom-modal-header__title")},_this.renderTitle(title,titleId)))});_this.state={scrollbarWidth:0};_this.updateScrollBarWidth=_this.updateScrollBarWidth.bind(_this);return _this}(0,_inherits2["default"])(Modal,_React$Component);return(0,_createClass2["default"])(Modal,[{key:"updateScrollBarWidth",value:function updateScrollBarWidth(){this.setState({scrollbarWidth:window.innerWidth-document.body.clientWidth})}},{key:"componentDidMount",value:function componentDidMount(){this.updateScrollBarWidth();window.addEventListener("resize",this.updateScrollBarWidth)}},{key:"componentWillUnmount",value:function componentWillUnmount(){window.removeEventListener("resize",this.updateScrollBarWidth)}},{key:"renderTitle",value:function renderTitle(title,titleId){var _this2=this;if(typeof title!=="string"){return title}var _this$props2=this.props,titleLabel=_this$props2.titleLabel,titleLabelPreamble=_this$props2.titleLabelPreamble;return/*#__PURE__*/_react["default"].createElement("h1",{"aria-label":"".concat(titleLabelPreamble," ").concat(titleLabel||title),className:"bom-modal-title",id:titleId,ref:function ref(n){_this2.startOfModalRef=n},tabIndex:-1},title)}},{key:"render",value:function render(){var _this3=this;var _this$props3=this.props,aria=_this$props3.aria,ariaHideApp=_this$props3.ariaHideApp,isOpen=_this$props3.isOpen,className=_this$props3.className,children=_this$props3.children,hideCloseButton=_this$props3.hideCloseButton,closeButtonLabel=_this$props3.closeButtonLabel,onRequestClose=_this$props3.onRequestClose,zIndex=_this$props3.zIndex,role=_this$props3.role,restProps=(0,_objectWithoutProperties2["default"])(_this$props3,_excluded);return/*#__PURE__*/_react["default"].createElement(_reactModal["default"],(0,_extends2["default"])({ref:function ref(n){_this3.modalRef=n},testId:"bom-modal",isOpen:isOpen,aria:aria,ariaHideApp:ariaHideApp,onAfterOpen:function onAfterOpen(){setTimeout(function(){var modalRef=_this3.modalRef,startOfModalRef=_this3.startOfModalRef;if(modalRef){var modalParent=modalRef.props.parentSelector();modalParent.style.marginRight="".concat(_this3.state.scrollbarWidth,"px");modalParent.style.marginLeft="calc(-100% + 100vw)";modalParent.style.overflow="hidden";if(startOfModalRef){startOfModalRef.focus()}else if(modalRef&&modalRef.focus){modalRef.focus()}}},0)},onAfterClose:function onAfterClose(){setTimeout(function(){var modalRef=_this3.modalRef;if(modalRef){var modalParent=modalRef.props.parentSelector();modalParent.style.marginRight="auto";modalParent.style.marginLeft="auto";modalParent.style.overflow="auto"}},0)},role:role,closeTimeoutMS:200,portalClassName:"bom-modal-portal",overlayClassName:{base:"bom-modal-overlay",afterOpen:"bom-modal-overlay--after-open",beforeClose:"bom-modal-overlay--before-close"},className:{base:(0,_classnames["default"])(className,"bom-modal"),afterOpen:"bom-modal--after-open",beforeClose:"bom-modal--before-close"},bodyOpenClassName:"bom-modal-body--open",htmlOpenClassName:"bom-modal-html--open",onRequestClose:onRequestClose,style:{overlay:{zIndex:zIndex}}},restProps),/*#__PURE__*/_react["default"].createElement(_react["default"].Fragment,null,/*#__PURE__*/_react["default"].createElement("div",{className:(0,_classnames["default"])("bom-modal-body",{"bom-modal-body--hidden-close-button":hideCloseButton})},this.renderHeader(),children,!hideCloseButton&&/*#__PURE__*/_react["default"].createElement("button",{ref:function ref(n){_this3.closeBtnRef=n},className:"bom-modal-close","data-testid":"bom-modal-close",type:"button",onClick:onRequestClose},/*#__PURE__*/_react["default"].createElement(_icon.SystemIcon,{icon:
|
|
1
|
+
"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _icon=require("@ausbom/icon");var _react=_interopRequireDefault(require("react"));var _classnames=_interopRequireDefault(require("classnames"));var _reactModal=_interopRequireDefault(require("react-modal"));var _excluded=["aria","ariaHideApp","isOpen","className","children","hideCloseButton","closeButtonLabel","onRequestClose","zIndex","role"];function _callSuper(t,o,e){return o=(0,_getPrototypeOf2["default"])(o),(0,_possibleConstructorReturn2["default"])(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],(0,_getPrototypeOf2["default"])(t).constructor):o.apply(t,e))}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}var Modal=/*#__PURE__*/function(_React$Component){function Modal(props){var _this;(0,_classCallCheck2["default"])(this,Modal);_this=_callSuper(this,Modal,[props]);// Returns the JSX code that renders the header of a modal component.
|
|
2
|
+
(0,_defineProperty2["default"])(_this,"renderHeader",function(){var _this$props=_this.props,a11yId=_this$props.a11yId,title=_this$props.title,titleLabel=_this$props.titleLabel,titleLabelPreamble=_this$props.titleLabelPreamble;var titleId="".concat(a11yId,"_modal");var hasNoTitle=!title||typeof title!=="string"||typeof title==="string"&&title.trim()==="";return/*#__PURE__*/_react["default"].createElement("div",(0,_extends2["default"])({ref:function ref(n){_this.titleModalRef=n},className:(0,_classnames["default"])("bom-modal-header",{"bom-modal-header--no-title":hasNoTitle})},hasNoTitle&&{"aria-label":"".concat(titleLabelPreamble," ").concat(titleLabel).trim()}),title!=null&&/*#__PURE__*/_react["default"].createElement("div",{className:(0,_classnames["default"])("bom-modal-header__title")},_this.renderTitle(title,titleId)))});_this.state={scrollbarWidth:0};_this.updateScrollBarWidth=_this.updateScrollBarWidth.bind(_this);return _this}(0,_inherits2["default"])(Modal,_React$Component);return(0,_createClass2["default"])(Modal,[{key:"updateScrollBarWidth",value:function updateScrollBarWidth(){this.setState({scrollbarWidth:window.innerWidth-document.body.clientWidth})}},{key:"componentDidMount",value:function componentDidMount(){this.updateScrollBarWidth();window.addEventListener("resize",this.updateScrollBarWidth)}},{key:"componentWillUnmount",value:function componentWillUnmount(){window.removeEventListener("resize",this.updateScrollBarWidth)}},{key:"renderTitle",value:function renderTitle(title,titleId){var _this2=this;if(typeof title!=="string"){return title}var _this$props2=this.props,titleLabel=_this$props2.titleLabel,titleLabelPreamble=_this$props2.titleLabelPreamble;return/*#__PURE__*/_react["default"].createElement("h1",{"aria-label":"".concat(titleLabelPreamble," ").concat(titleLabel||title),className:"bom-modal-title",id:titleId,ref:function ref(n){_this2.startOfModalRef=n},tabIndex:-1},title)}},{key:"render",value:function render(){var _this3=this;var _this$props3=this.props,aria=_this$props3.aria,ariaHideApp=_this$props3.ariaHideApp,isOpen=_this$props3.isOpen,className=_this$props3.className,children=_this$props3.children,hideCloseButton=_this$props3.hideCloseButton,closeButtonLabel=_this$props3.closeButtonLabel,onRequestClose=_this$props3.onRequestClose,zIndex=_this$props3.zIndex,role=_this$props3.role,restProps=(0,_objectWithoutProperties2["default"])(_this$props3,_excluded);return/*#__PURE__*/_react["default"].createElement(_reactModal["default"],(0,_extends2["default"])({ref:function ref(n){_this3.modalRef=n},testId:"bom-modal",isOpen:isOpen,aria:aria,ariaHideApp:ariaHideApp,onAfterOpen:function onAfterOpen(){setTimeout(function(){var modalRef=_this3.modalRef,startOfModalRef=_this3.startOfModalRef;if(modalRef){var modalParent=modalRef.props.parentSelector();modalParent.style.marginRight="".concat(_this3.state.scrollbarWidth,"px");modalParent.style.marginLeft="calc(-100% + 100vw)";modalParent.style.overflow="hidden";if(startOfModalRef){startOfModalRef.focus()}else if(modalRef&&modalRef.focus){modalRef.focus()}}},0)},onAfterClose:function onAfterClose(){setTimeout(function(){var modalRef=_this3.modalRef;if(modalRef){var modalParent=modalRef.props.parentSelector();modalParent.style.marginRight="auto";modalParent.style.marginLeft="auto";modalParent.style.overflow="auto"}},0)},role:role,closeTimeoutMS:200,portalClassName:"bom-modal-portal",overlayClassName:{base:"bom-modal-overlay",afterOpen:"bom-modal-overlay--after-open",beforeClose:"bom-modal-overlay--before-close"},className:{base:(0,_classnames["default"])(className,"bom-modal"),afterOpen:"bom-modal--after-open",beforeClose:"bom-modal--before-close"},bodyOpenClassName:"bom-modal-body--open",htmlOpenClassName:"bom-modal-html--open",onRequestClose:onRequestClose,style:{overlay:{zIndex:zIndex}}},restProps),/*#__PURE__*/_react["default"].createElement(_react["default"].Fragment,null,/*#__PURE__*/_react["default"].createElement("div",{className:(0,_classnames["default"])("bom-modal-body",{"bom-modal-body--hidden-close-button":hideCloseButton})},this.renderHeader(),children,!hideCloseButton&&/*#__PURE__*/_react["default"].createElement("button",{ref:function ref(n){_this3.closeBtnRef=n},className:"bom-modal-close","data-testid":"bom-modal-close",type:"button",onClick:onRequestClose},/*#__PURE__*/_react["default"].createElement(_icon.SystemIcon,{icon:_icon.CutCross16,size:16,"aria-hidden":true}),/*#__PURE__*/_react["default"].createElement("span",{className:"bom-modal-close__label"},closeButtonLabel)))))}}])}(_react["default"].Component);(0,_defineProperty2["default"])(Modal,"defaultProps",{isOpen:false,onRequestClose:function onRequestClose(){return undefined},closeButtonLabel:"Close modal window",hideCloseButton:false,role:"none",titleLabel:"",titleLabelPreamble:"Start of dialog."});var _default=exports["default"]=Modal;
|
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ausbom/modal",
|
|
3
|
-
"
|
|
3
|
+
"type": "commonjs",
|
|
4
|
+
"version": "0.2.7",
|
|
4
5
|
"description": "",
|
|
5
6
|
"keywords": [],
|
|
6
7
|
"author": "",
|
|
@@ -20,7 +21,7 @@
|
|
|
20
21
|
},
|
|
21
22
|
"scripts": {
|
|
22
23
|
"build": "babel src --out-dir lib --extensions '.ts,.tsx' --delete-dir-on-start",
|
|
23
|
-
"build:watch": "npm run build -- --copy-files --watch",
|
|
24
|
+
"build:watch": "npm run build -- --copy-files --no-copy-ignored --watch ",
|
|
24
25
|
"build:readme": "../generate-readme.sh",
|
|
25
26
|
"postbuild": "copyfiles -u 1 \"./src/**/{*.d.*,*.scss}\" ./lib"
|
|
26
27
|
},
|
|
@@ -31,15 +32,12 @@
|
|
|
31
32
|
"node": ">=10"
|
|
32
33
|
},
|
|
33
34
|
"devDependencies": {
|
|
34
|
-
"@ausbom/babel-preset": "^0.2.
|
|
35
|
-
},
|
|
36
|
-
"peerDependencies": {
|
|
37
|
-
"react": ">= 16.3.x"
|
|
35
|
+
"@ausbom/babel-preset": "^0.2.1"
|
|
38
36
|
},
|
|
39
37
|
"dependencies": {
|
|
40
|
-
"@ausbom/icon": "^0.23.
|
|
41
|
-
"@ausbom/styles": "^0.14.
|
|
38
|
+
"@ausbom/icon": "^0.23.3",
|
|
39
|
+
"@ausbom/styles": "^0.14.4",
|
|
42
40
|
"react-modal": "^3.14.4"
|
|
43
41
|
},
|
|
44
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "18cc71041ec60f545b727fc22d0b6edc624c23b2"
|
|
45
43
|
}
|