Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@hixme/modal
Advanced tools
@hixme/modal - npm Package Compare versions
Comparing version 2.2.0 to 2.3.0
@@ -7,4 +7,2 @@ 'use strict'; | ||
| var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; | ||
| var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | ||
@@ -63,6 +61,3 @@ | ||
| currentModal = _props2.currentModal, | ||
| handleClose = _props2.handleClose, | ||
| isOpen = _props2.isOpen, | ||
| viewList = _props2.viewList, | ||
| dispatch = _props2.dispatch; | ||
| viewList = _props2.viewList; | ||
@@ -73,7 +68,3 @@ | ||
| var MyModalComponent = viewList[currentModal.view]; | ||
| return _react2.default.createElement(MyModalComponent, _extends({ | ||
| dispatch: dispatch, | ||
| isOpen: isOpen, | ||
| handleClose: handleClose | ||
| }, currentModal)); | ||
| return _react2.default.createElement(MyModalComponent, currentModal); | ||
| } | ||
@@ -92,5 +83,3 @@ return null; | ||
| modals: _propTypes2.default.object, | ||
| dispatch: _propTypes2.default.func.isRequired, | ||
| handleClose: _propTypes2.default.func, | ||
| isOpen: _propTypes2.default.bool | ||
| dispatch: _propTypes2.default.func.isRequired | ||
| }; | ||
@@ -101,7 +90,3 @@ | ||
| viewList: {}, | ||
| modals: {}, | ||
| handleClose: function handleClose() { | ||
| return null; | ||
| }, | ||
| isOpen: false | ||
| modals: {} | ||
| }; | ||
@@ -111,20 +96,8 @@ | ||
| var mapStateToProps = function mapStateToProps(state) { | ||
| exports.default = (0, _reactRedux.connect)(function (state) { | ||
| return { | ||
| isOpen: (0, _modules.hasActiveModal)(state), | ||
| currentModal: (0, _modules.getModal)(state), | ||
| viewList: (0, _modules.getViewList)(state) | ||
| }; | ||
| }; | ||
| var mapDispatchToProps = function mapDispatchToProps(dispatch) { | ||
| return { | ||
| handleClose: function handleClose() { | ||
| return dispatch((0, _modules.clearModal)()); | ||
| }, | ||
| dispatch: dispatch | ||
| }; | ||
| }; | ||
| exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(MrModalManager); | ||
| })(MrModalManager); | ||
| //# sourceMappingURL=MrModalManager.js.map |
| { | ||
| "name": "@hixme/modal", | ||
| "version": "2.2.0", | ||
| "version": "2.3.0", | ||
| "description": "Hixme Modal", | ||
@@ -5,0 +5,0 @@ "main": "lib/index.js", |
@@ -6,4 +6,18 @@ # Mr. Modal | ||
| ## Usage | ||
| You will need to pass the modals you've created to the `<MrModalManager />` component, located at your project's root. | ||
| ```jsx | ||
| import { MrModal } from '@hixme/modal' | ||
| <MrModal | ||
| dialog | ||
| medium | ||
| title='All your base are belong to us' | ||
| confirmLabel='Get down!' | ||
| cancelLabel='Eh, maybe not...' | ||
| > | ||
| {/* Modal content here */} | ||
| </MrModal> | ||
| ``` | ||
| After creating your modals, you will need to pass them to your `<MrModalManager />` component, located at your project's root. | ||
| ```jsx | ||
@@ -34,1 +48,45 @@ import { MrModalManager } from '@hixme/modal' | ||
| ``` | ||
| ## Props | ||
| | Property | Type | Value | Required | Description | | ||
| | ----------------------- | ---------- | ---------------- | -------- | --------------------------------------------------------------- | | ||
| | backgroundColor | `string` | N/A | Yes | Easy way to change the modal color | | ||
| | hideCloseButton | `boolean` | false | Yes | Hide the default close button | | ||
| | style | `object` | N/A | No | Override modal styles | | ||
| | title | `string` | N/A | No | Modal title header | | ||
| | zIndex | `number` | 1001 | No | Modal z-index value | | ||
| | small | `boolean` | false | No | Modal with 568px max-width | | ||
| | medium | `boolean` | false | No | Modal with 800px max-width | | ||
| | large | `boolean` | false | No | Modal with 1024px max-width | | ||
| | middle | `boolean` | false | No | Vertically align content in the center of the modal | | ||
| | bottom | `boolean` | false | No | Vertically align content on the bottom of the modal | | ||
| | contentCenter | `boolean` | false | No | Horizontally align content center | | ||
| | contentEnd | `boolean` | false | No | Horizontally align content right | | ||
| | contentPadding | `string` | null | No | Padding for the modal content | | ||
| | cancelProcessing | `boolean` | false | No | Show processing state on cancel button | | ||
| | cancelSubmittingText | `string` | N/A | No | Text shown on the cancel button when cancelProcessing is `true` | | ||
| | cancelHandler | `function` | `defaultClose()` | No | When `dialog = true`, function called on cancel | | ||
| | cancelLabel | `string` | 'Cancel' | No | When `dialog = true`, label on the cancel button | | ||
| | confirmProcessing | `boolean` | false | No | Show processing state on confirm button | | ||
| | confirmSubmittingText | `string` | N/A | No | Text shown on the confirm button when confirmProcessing is `true` | | ||
| | confirmHandler | `function` | N/A | No | When `dialog = true`, function called on confirm | | ||
| | confirmLabel | `string` | 'Ok' | No | When `dialog = true`, label on the confirm button | | ||
| | dialog | `boolean` | false | No | Show dialog modal | | ||
| | errorDialog | `boolean` | false | No | Show error dialog modal | | ||
| ## Styling | ||
| The default style is a full screen modal. You can specify `small`, `medium`, or `large` to render a more traditional modal style. Any of the preset modal styles can be overwritten by providing the `<MrModal />` component with a style object. | ||
| ```js | ||
| style: { | ||
| content: { | ||
| ...contentStyles | ||
| }, | ||
| overlay: { | ||
| ...overlayStyles | ||
| }, | ||
| } | ||
| ``` | ||
@@ -6,9 +6,3 @@ import React, { Component } from 'react' | ||
| import { | ||
| clearModal, | ||
| hasActiveModal, | ||
| addToViewList, | ||
| getViewList, | ||
| getModal, | ||
| } from './modules' | ||
| import { addToViewList, getViewList, getModal } from './modules' | ||
@@ -31,6 +25,3 @@ class MrModalManager extends Component { | ||
| currentModal, | ||
| handleClose, | ||
| isOpen, | ||
| viewList, | ||
| dispatch, | ||
| } = this.props | ||
@@ -41,10 +32,3 @@ | ||
| const MyModalComponent = viewList[currentModal.view] | ||
| return ( | ||
| <MyModalComponent | ||
| dispatch={dispatch} | ||
| isOpen={isOpen} | ||
| handleClose={handleClose} | ||
| {...currentModal} | ||
| /> | ||
| ) | ||
| return <MyModalComponent {...currentModal} /> | ||
| } | ||
@@ -61,4 +45,2 @@ return null | ||
| dispatch: PropTypes.func.isRequired, | ||
| handleClose: PropTypes.func, | ||
| isOpen: PropTypes.bool, | ||
| } | ||
@@ -70,4 +52,2 @@ | ||
| modals: {}, | ||
| handleClose: () => null, | ||
| isOpen: false, | ||
| } | ||
@@ -77,13 +57,5 @@ | ||
| const mapStateToProps = state => ({ | ||
| isOpen: hasActiveModal(state), | ||
| export default connect(state => ({ | ||
| currentModal: getModal(state), | ||
| viewList: getViewList(state), | ||
| }) | ||
| const mapDispatchToProps = dispatch => ({ | ||
| handleClose: () => dispatch(clearModal()), | ||
| dispatch, | ||
| }) | ||
| export default connect(mapStateToProps, mapDispatchToProps)(MrModalManager) | ||
| }))(MrModalManager) |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by2.22%
70143
- Number of lines in readme file
- increased by175.76%
91
Worsened metrics
- Lines of code
- decreased by-4.27%
1122
No dependency changes