@ausbom/modal 0.1.14 → 0.1.15
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.d.ts +3 -1
- package/lib/Modal.js +2 -2
- package/lib/scss/module.scss +12 -0
- package/package.json +2 -2
package/lib/Modal.d.ts
CHANGED
|
@@ -3,9 +3,11 @@ import React from 'react'
|
|
|
3
3
|
export interface IProps {
|
|
4
4
|
a11yId: string
|
|
5
5
|
title?: React.ReactNode
|
|
6
|
+
titleLabel?: string
|
|
7
|
+
titleLabelPreamble?: string
|
|
6
8
|
className?: string
|
|
7
9
|
children?: React.ReactNode
|
|
8
|
-
isOpen
|
|
10
|
+
isOpen: boolean
|
|
9
11
|
onRequestClose?: () => void
|
|
10
12
|
closeButtonLabel?: string
|
|
11
13
|
hideCloseButton?: boolean
|
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 _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _assertThisInitialized2=_interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _icon=require("@ausbom/icon");var _CutCross=_interopRequireDefault(require("@ausbom/icon/lib/icons/system/CutCross16"));var _react=_interopRequireDefault(require("react"));var _classnames=_interopRequireDefault(require("classnames"));var _reactModal=_interopRequireDefault(require("react-modal"));function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=(0,_getPrototypeOf2["default"])(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2["default"])(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else{result=Super.apply(this,arguments)}return(0,_possibleConstructorReturn2["default"])(this,result)}}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true}catch(e){return false}}var Modal=/*#__PURE__*/function(_React$Component){(0,_inherits2["default"])(Modal,_React$Component);var _super=_createSuper(Modal);function Modal(props){var _this;(0,_classCallCheck2["default"])(this,Modal);_this=_super.call(this,props);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"startOfModalRef",void 0);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"modalRef",void 0);_this.state={scrollbarWidth:0};_this.updateScrollBarWidth=_this.updateScrollBarWidth.bind((0,_assertThisInitialized2["default"])(_this));return _this}(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)}// eslint-disable-next-line class-methods-use-this
|
|
2
|
-
},{key:"renderTitle",value:function renderTitle(title,titleId){if(typeof title
|
|
1
|
+
"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _assertThisInitialized2=_interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _icon=require("@ausbom/icon");var _CutCross=_interopRequireDefault(require("@ausbom/icon/lib/icons/system/CutCross16"));var _react=_interopRequireDefault(require("react"));var _classnames=_interopRequireDefault(require("classnames"));var _reactModal=_interopRequireDefault(require("react-modal"));function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=(0,_getPrototypeOf2["default"])(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2["default"])(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else{result=Super.apply(this,arguments)}return(0,_possibleConstructorReturn2["default"])(this,result)}}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true}catch(e){return false}}var Modal=/*#__PURE__*/function(_React$Component){(0,_inherits2["default"])(Modal,_React$Component);var _super=_createSuper(Modal);function Modal(props){var _this;(0,_classCallCheck2["default"])(this,Modal);_this=_super.call(this,props);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"startOfModalRef",void 0);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"titleModalRef",void 0);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"modalRef",void 0);_this.state={scrollbarWidth:0};_this.updateScrollBarWidth=_this.updateScrollBarWidth.bind((0,_assertThisInitialized2["default"])(_this));return _this}(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)}// eslint-disable-next-line class-methods-use-this
|
|
2
|
+
},{key:"renderTitle",value:function renderTitle(title,titleId){var _this2=this;if(typeof title!=="string"){return title}return/*#__PURE__*/_react["default"].createElement("h1",{"aria-label":"".concat(this.props.titleLabelPreamble," ").concat(this.props.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$props=this.props,isOpen=_this$props.isOpen,a11yId=_this$props.a11yId,className=_this$props.className,children=_this$props.children,onRequestClose=_this$props.onRequestClose,title=_this$props.title,closeButtonLabel=_this$props.closeButtonLabel,hideCloseButton=_this$props.hideCloseButton,zIndex=_this$props.zIndex,restProps=(0,_objectWithoutProperties2["default"])(_this$props,["isOpen","a11yId","className","children","onRequestClose","title","closeButtonLabel","hideCloseButton","zIndex"]);var titleId="".concat(a11yId,"_modal");var hasNoTitle=!title||typeof title!=="string"||typeof title==="string"&&title.trim()==="";return/*#__PURE__*/_react["default"].createElement(_reactModal["default"],(0,_extends2["default"])({ref:function ref(n){_this3.modalRef=n},testId:"bom-modal",isOpen:isOpen,aria:{labelledby:titleId},onAfterOpen:function onAfterOpen(){setTimeout(function(){var modalRef=_this3.modalRef;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(typeof title==="string"&&_this3.startOfModalRef&&_this3.startOfModalRef.focus){_this3.startOfModalRef.focus();return}if(_this3.titleModalRef&&_this3.titleModalRef.focus){_this3.titleModalRef.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:"none",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("div",(0,_extends2["default"])({ref:function ref(n){_this3.titleModalRef=n},tabIndex:-1,className:(0,_classnames["default"])("bom-modal-header",{"bom-modal-header--no-title":hasNoTitle})},hasNoTitle&&{"aria-label":"".concat(this.props.titleLabelPreamble," ").concat(this.props.titleLabel).trim()}),this.renderTitle(title,titleId)),/*#__PURE__*/_react["default"].createElement("div",{className:"bom-modal-body"},children),!hideCloseButton&&/*#__PURE__*/_react["default"].createElement("button",{className:"bom-modal-close","data-testid":"bom-modal-close",type:"button",onClick:function onClick(){onRequestClose()}},/*#__PURE__*/_react["default"].createElement(_icon.SystemIcon,{icon:_CutCross["default"],size:16,"aria-hidden":true}),/*#__PURE__*/_react["default"].createElement("span",{className:"bom-modal-close__label"},closeButtonLabel)))}}]);return Modal}(_react["default"].Component);(0,_defineProperty2["default"])(Modal,"defaultProps",{isOpen:false,onRequestClose:function onRequestClose(){return undefined},closeButtonLabel:"Close modal window",hideCloseButton:false,titleLabel:"",titleLabelPreamble:"Start of dialog."});var _default=Modal;exports["default"]=_default;
|
package/lib/scss/module.scss
CHANGED
|
@@ -68,8 +68,16 @@
|
|
|
68
68
|
background: white;
|
|
69
69
|
padding: 32px 40px 16px 18px;
|
|
70
70
|
|
|
71
|
+
&.bom-modal-header--no-title {
|
|
72
|
+
padding: 0 40px 16px 18px;
|
|
73
|
+
}
|
|
74
|
+
|
|
71
75
|
@include bp(m) {
|
|
72
76
|
padding: 40px 48px 32px 48px;
|
|
77
|
+
|
|
78
|
+
&.bom-modal-header--no-title {
|
|
79
|
+
padding: 0 48px 32px 48px;
|
|
80
|
+
}
|
|
73
81
|
}
|
|
74
82
|
}
|
|
75
83
|
|
|
@@ -106,6 +114,10 @@
|
|
|
106
114
|
.bom-modal-title {
|
|
107
115
|
margin: 0;
|
|
108
116
|
|
|
117
|
+
&:focus {
|
|
118
|
+
outline: none;
|
|
119
|
+
}
|
|
120
|
+
|
|
109
121
|
@include bom-typography(
|
|
110
122
|
$style-name: 'heading-m',
|
|
111
123
|
$large: false,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ausbom/modal",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.15",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"author": "",
|
|
@@ -41,5 +41,5 @@
|
|
|
41
41
|
"@ausbom/styles": "^0.9.2",
|
|
42
42
|
"react-modal": "^3.14.4"
|
|
43
43
|
},
|
|
44
|
-
"gitHead": "
|
|
44
|
+
"gitHead": "9f6f094a3a1977d0d3bed66e336f2f94d8c3d4fc"
|
|
45
45
|
}
|