New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@rmwc/dialog

Package Overview
Dependencies
Maintainers
1
Versions
177
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@rmwc/dialog - npm Package Compare versions

Comparing version 2.2.2 to 3.0.0

193

docgen.json
[
{
"description": "",
"displayName": "DialogRoot",
"methods": [],
"props": {
"role": {
"defaultValue": {
"value": "'alertdialog'",
"computed": false
},
"required": false
}
}
},
{
"description": "The Dialog backdrop",
"displayName": "DialogBackdrop",
"description": "The Dialog title.",
"displayName": "DialogTitle",
"methods": []
},
{
"description": "The Dialog surface",
"displayName": "DialogSurface",
"description": "The Dialog content.",
"displayName": "DialogContent",
"methods": []
},
{
"description": "The Dialog header",
"displayName": "DialogHeader",
"description": "Actions container for the Dialog.",
"displayName": "DialogActions",
"methods": []
},
{
"description": "The Dialog title",
"displayName": "DialogHeaderTitle",
"methods": []
},
{
"description": "The Dialog body",
"displayName": "DialogBody",
"description": "Action buttons for the Dialog.",
"displayName": "DialogButton",
"methods": [],
"props": {
"scrollable": {
"action": {
"flowType": {
"name": "string"
},
"required": false,
"description": "An action returned in evt.detail.action to the onClose handler."
},
"isDefaultAction": {
"flowType": {
"name": "boolean"
},
"required": false,
"description": "Make it scrollable."
"description": "Indicates this is the default selected action when pressing enter"
}

@@ -51,26 +39,30 @@ }

{
"description": "The Dialog footer",
"displayName": "DialogFooter",
"methods": []
},
{
"description": "A Dialog footer button",
"displayName": "DialogFooterButton",
"methods": []
},
{
"description": "",
"description": "A Dialog component.",
"displayName": "Dialog",
"methods": [
{
"name": "syncWithProps",
"name": "open",
"docblock": null,
"modifiers": [],
"params": [],
"returns": null
},
{
"name": "close",
"docblock": null,
"modifiers": [],
"params": [],
"returns": null
},
{
"name": "sync",
"docblock": null,
"modifiers": [],
"params": [
{
"name": "nextProps",
"name": "props",
"type": {
"name": "signature",
"type": "object",
"raw": "{\n /** Whether or not the Dialog is showing. */\n open: boolean,\n /** Callback for when the accept Button is pressed. */\n onAccept?: (evt: CustomEventT<void>) => mixed,\n /** Callback for when the Dialog was closed without acceptance. */\n onCancel?: (evt: CustomEventT<void>) => mixed,\n /** Callback for when the Dialog closes. */\n onClose?: (evt: CustomEventT<void>) => mixed\n}",
"raw": "{\n /** Whether or not the Dialog is showing. */\n open: boolean,\n /** Callback for when the Dialog opens. */\n onOpen?: (evt: CustomEventT<void>) => mixed,\n /** Callback for when the Dialog closes. */\n onClose?: (evt: CustomEventT<void>) => mixed\n}",
"signature": {

@@ -86,3 +78,3 @@ "properties": [

{
"key": "onAccept",
"key": "onOpen",
"value": {

@@ -115,30 +107,2 @@ "name": "signature",

{
"key": "onCancel",
"value": {
"name": "signature",
"type": "function",
"raw": "(evt: CustomEventT<void>) => mixed",
"signature": {
"arguments": [
{
"name": "evt",
"type": {
"name": "CustomEventT",
"elements": [
{
"name": "void"
}
],
"raw": "CustomEventT<void>"
}
}
],
"return": {
"name": "mixed"
}
},
"required": false
}
},
{
"key": "onClose",

@@ -178,2 +142,9 @@ "value": {

"returns": null
},
{
"name": "getDefaultFoundation",
"docblock": null,
"modifiers": [],
"params": [],
"returns": null
}

@@ -189,3 +160,3 @@ ],

},
"onAccept": {
"onOpen": {
"flowType": {

@@ -216,32 +187,4 @@ "name": "signature",

"required": false,
"description": "Callback for when the accept Button is pressed."
"description": "Callback for when the Dialog opens."
},
"onCancel": {
"flowType": {
"name": "signature",
"type": "function",
"raw": "(evt: CustomEventT<void>) => mixed",
"signature": {
"arguments": [
{
"name": "evt",
"type": {
"name": "CustomEventT",
"elements": [
{
"name": "void"
}
],
"raw": "CustomEventT<void>"
}
}
],
"return": {
"name": "mixed"
}
}
},
"required": false,
"description": "Callback for when the Dialog was closed without acceptance."
},
"onClose": {

@@ -371,7 +314,3 @@ "flowType": {

"required": false,
"description": "Allow the body to be scrollable",
"defaultValue": {
"value": "undefined",
"computed": true
}
"description": "Allow the body to be scrollable"
},

@@ -389,3 +328,3 @@ "open": {

},
"onAccept": {
"onOpen": {
"flowType": {

@@ -416,40 +355,4 @@ "name": "signature",

"required": false,
"description": "Callback for when the accept Button is pressed.",
"defaultValue": {
"value": "noop",
"computed": true
}
"description": "Callback for when the Dialog opens."
},
"onCancel": {
"flowType": {
"name": "signature",
"type": "function",
"raw": "(evt: CustomEventT<void>) => mixed",
"signature": {
"arguments": [
{
"name": "evt",
"type": {
"name": "CustomEventT",
"elements": [
{
"name": "void"
}
],
"raw": "CustomEventT<void>"
}
}
],
"return": {
"name": "mixed"
}
}
},
"required": false,
"description": "Callback for when the Dialog was closed without acceptance.",
"defaultValue": {
"value": "noop",
"computed": true
}
},
"onClose": {

@@ -456,0 +359,0 @@ "flowType": {

155

index.d.ts

@@ -1,110 +0,61 @@

import { SimpleTagPropsT, CustomEventT } from '@rmwc/base';
import { CustomEventT } from '@rmwc/base';
import { ButtonPropsT } from '@rmwc/button';
import * as React from 'react';
export declare const DialogRoot: React.ComponentType<SimpleTagPropsT>;
/** The Dialog backdrop */
export declare const DialogBackdrop: React.ComponentType<SimpleTagPropsT>;
/** The Dialog surface */
export declare const DialogSurface: React.ComponentType<SimpleTagPropsT>;
/** The Dialog header */
export declare const DialogHeader: React.ComponentType<SimpleTagPropsT>;
/** The Dialog title */
export declare const DialogHeaderTitle: React.ComponentType<SimpleTagPropsT>;
export declare type DialogBodyPropsT = {
/** Make it scrollable. */
scrollable?: boolean;
} & SimpleTagPropsT;
/** The Dialog body */
export declare const DialogBody: React.ComponentType<DialogBodyPropsT>;
/** The Dialog footer */
export declare const DialogFooter: React.ComponentType<SimpleTagPropsT>;
export declare type DialogFooterButtonPropsT = {
/** Make it an accept button. */
accept?: any;
/** Make it a cancel button. */
cancel?: boolean;
} & SimpleTagPropsT & ButtonPropsT;
/** A Dialog footer button */
export declare const DialogFooterButton: React.ComponentType<DialogFooterButtonPropsT>;
import { FoundationComponent, Component } from '@rmwc/base';
/** @extends React.Component */
/** The Dialog title. */
export declare class DialogTitle extends Component<{}> {
static displayName: string;
tag: string;
classNames: string[];
}
/** @extends React.Component */
/** The Dialog content. */
export declare class DialogContent extends Component<{}> {
static displayName: string;
classNames: string[];
}
/** @extends React.Component */
/** Actions container for the Dialog. */
export declare class DialogActions extends Component<{}> {
static displayName: string;
classNames: string[];
}
export declare type DialogButtonPropsT = {
/** An action returned in evt.detail.action to the onClose handler. */
action?: string;
/** Indicates this is the default selected action when pressing enter */
isDefaultAction?: boolean;
} & ButtonPropsT;
/** Action buttons for the Dialog. */
export declare class DialogButton extends React.Component<DialogButtonPropsT> {
static displayName: string;
render(): JSX.Element;
}
export declare type DialogPropsT = {
/** Whether or not the Dialog is showing. */
open: boolean;
/** Callback for when the accept Button is pressed. */
onAccept?: (evt: CustomEventT<void>) => any;
/** Callback for when the Dialog was closed without acceptance. */
onCancel?: (evt: CustomEventT<void>) => any;
/** Callback for when the Dialog opens. */
onOpen?: (evt: CustomEventT<void>) => any;
/** Callback for when the Dialog closes. */
onClose?: (evt: CustomEventT<void>) => any;
};
declare const Dialog_base: {
new <P>(props: P & {
tag?: string | React.ComponentClass<any, any> | React.StatelessComponent<any> | undefined;
wrap?: boolean | undefined;
elementRef?: any;
theme?: string | string[] | undefined;
apiRef?: (<S>(api: S) => S) | undefined;
} & React.HTMLAttributes<any> & React.HTMLProps<any>): {
foundation_: {
[key: string]: any;
adapter_: any;
init: Function;
destroy: Function;
} | null;
foundationRefs: {
[name: string]: (ref: HTMLElement) => any;
};
root_: Element | Text | null;
props: P & {
tag?: string | React.ComponentClass<any, any> | React.StatelessComponent<any> | undefined;
wrap?: boolean | undefined;
elementRef?: any;
theme?: string | string[] | undefined;
apiRef?: (<S>(api: S) => S) | undefined;
} & React.HTMLAttributes<any> & React.HTMLProps<any>;
componentDidMount(): void;
componentWillReceiveProps(nextProps: P & {
tag?: string | React.ComponentClass<any, any> | React.StatelessComponent<any> | undefined;
wrap?: boolean | undefined;
elementRef?: any;
theme?: string | string[] | undefined;
apiRef?: (<S>(api: S) => S) | undefined;
} & React.HTMLAttributes<any> & React.HTMLProps<any>): void;
componentWillUnmount(): void;
_safeSyncWithProps(props: Object): void;
initFoundation(): void;
destroyComponent(): void;
syncWithProps(nextProps: Object): void;
initialize(...args: any[]): void;
initialSyncWithDOM(): void;
destroy(): void;
getDefaultFoundation(): {
adapter_: {};
init: () => void;
destroy: () => void;
};
emit(evtType: string, evtData: Object, shouldBubble?: boolean, sync?: boolean): any;
listen(evtType: string, handler: Function): void;
unlisten(evtType: string, handler: Function): void;
setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P & {
tag?: string | React.ComponentClass<any, any> | React.StatelessComponent<any> | undefined;
wrap?: boolean | undefined;
elementRef?: any;
theme?: string | string[] | undefined;
apiRef?: (<S>(api: S) => S) | undefined;
} & React.HTMLAttributes<any> & React.HTMLProps<any>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
forceUpdate(callBack?: (() => void) | undefined): void;
render(): React.ReactNode;
state: Readonly<{}>;
context: any;
refs: {
[key: string]: React.ReactInstance;
};
};
};
export declare class Dialog extends Dialog_base<DialogPropsT> {
/** A Dialog component. */
export declare class Dialog extends FoundationComponent<DialogPropsT> {
static displayName: string;
show: Function;
close: Function;
open: boolean;
syncWithProps(nextProps: DialogPropsT): void;
root_: null | HTMLElement;
container_: null | HTMLElement;
content_: null | HTMLElement;
buttons_: null | HTMLElement[];
defaultButton_: null | HTMLElement;
focusTrap_: any;
handleInteraction_: any;
handleDocumentKeydown_: any;
constructor(props: DialogPropsT);
open(): void;
close(): void;
componentDidMount(): void;
componentWillUnmount(): void;
sync(props: DialogPropsT): void;
getDefaultFoundation(): any;
render(): JSX.Element;

@@ -137,8 +88,5 @@ }

footer: undefined;
scrollable: undefined;
acceptLabel: string;
cancelLabel: string;
open: boolean;
onAccept: () => void;
onCancel: () => void;
onClose: () => void;

@@ -149,2 +97,1 @@ children: undefined;

}
export {};

572

index.js

@@ -6,4 +6,6 @@ 'use strict';

});
exports.SimpleDialog = exports.Dialog = exports.DialogFooterButton = exports.DialogFooter = exports.DialogBody = exports.DialogHeaderTitle = exports.DialogHeader = exports.DialogSurface = exports.DialogBackdrop = exports.DialogRoot = undefined;
exports.SimpleDialog = exports.Dialog = exports.DialogButton = exports.DialogActions = exports.DialogContent = exports.DialogTitle = undefined;
var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
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; }; }();

@@ -17,2 +19,6 @@

var _focusTrap = require('focus-trap');
var _focusTrap2 = _interopRequireDefault(_focusTrap);
var _button = require('@rmwc/button');

@@ -24,4 +30,2 @@

var _withFoundation2 = require('@rmwc/base/withFoundation');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

@@ -39,95 +43,378 @@

var DialogRoot = exports.DialogRoot = (0, _base.simpleTag)({
displayName: 'DialogRoot',
defaultProps: {
role: 'alertdialog'
},
tag: 'aside',
classNames: 'mdc-dialog'
});
var strings = _mdc.MDCDialogFoundation.strings;
/** The Dialog backdrop */
var DialogBackdrop = exports.DialogBackdrop = (0, _base.simpleTag)({
displayName: 'DialogBackdrop',
classNames: 'mdc-dialog__backdrop'
});
var isScrollable = function isScrollable(el) {
return el.scrollHeight > el.offsetHeight;
};
/** The Dialog surface */
var DialogSurface = exports.DialogSurface = (0, _base.simpleTag)({
displayName: 'DialogSurface',
classNames: 'mdc-dialog__surface'
});
var areTopsMisaligned = function areTopsMisaligned(els) {
var tops = new Set();
[].forEach.call(els, function (el) {
return tops.add(el.offsetTop);
});
return tops.size > 1;
};
/** The Dialog header */
var DialogHeader = exports.DialogHeader = (0, _base.simpleTag)({
displayName: 'DialogHeader',
tag: 'header',
classNames: 'mdc-dialog__header'
var closest = function closest(element, selector) {
if (element.closest) {
return element.closest(selector);
}
var el = element;
while (el) {
if (matches(el, selector)) {
return el;
}
el = el.parentElement;
}
return null;
};
var matches = function matches(element, selector) {
var nativeMatches = element.matches || element.webkitMatchesSelector || element.msMatchesSelector;
return nativeMatches.call(element, selector);
};
var DialogRoot = function (_Component) {
_inherits(DialogRoot, _Component);
function DialogRoot() {
var _ref;
var _temp, _this, _ret;
_classCallCheck(this, DialogRoot);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = DialogRoot.__proto__ || Object.getPrototypeOf(DialogRoot)).call.apply(_ref, [this].concat(args))), _this), Object.defineProperty(_this, 'classNames', {
enumerable: true,
writable: true,
value: ['mdc-dialog']
}), _temp), _possibleConstructorReturn(_this, _ret);
}
return DialogRoot;
}(_base.Component);
Object.defineProperty(DialogRoot, 'displayName', {
enumerable: true,
writable: true,
value: 'DialogRoot'
});
Object.defineProperty(DialogRoot, 'defaultProps', {
enumerable: true,
writable: true,
value: undefined
});
/** The Dialog title */
var DialogHeaderTitle = exports.DialogHeaderTitle = (0, _base.simpleTag)({
displayName: 'DialogHeaderTitle',
tag: 'h2',
classNames: 'mdc-dialog__header__title'
var DialogScrim = function (_React$Component) {
_inherits(DialogScrim, _React$Component);
function DialogScrim() {
_classCallCheck(this, DialogScrim);
return _possibleConstructorReturn(this, (DialogScrim.__proto__ || Object.getPrototypeOf(DialogScrim)).apply(this, arguments));
}
_createClass(DialogScrim, [{
key: 'shouldComponentUpdate',
value: function shouldComponentUpdate() {
return false;
}
}, {
key: 'render',
value: function render() {
return React.createElement('div', { className: 'mdc-dialog__scrim' });
}
}]);
return DialogScrim;
}(React.Component);
/** @extends React.Component */
/** The Dialog title. */
var DialogTitle = exports.DialogTitle = function (_Component2) {
_inherits(DialogTitle, _Component2);
function DialogTitle() {
var _ref2;
var _temp2, _this3, _ret2;
_classCallCheck(this, DialogTitle);
for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
return _ret2 = (_temp2 = (_this3 = _possibleConstructorReturn(this, (_ref2 = DialogTitle.__proto__ || Object.getPrototypeOf(DialogTitle)).call.apply(_ref2, [this].concat(args))), _this3), Object.defineProperty(_this3, 'tag', {
enumerable: true,
writable: true,
value: 'h2'
}), Object.defineProperty(_this3, 'classNames', {
enumerable: true,
writable: true,
value: ['mdc-dialog__title']
}), _temp2), _possibleConstructorReturn(_this3, _ret2);
}
return DialogTitle;
}(_base.Component);
/** @extends React.Component */
/** The Dialog content. */
Object.defineProperty(DialogTitle, 'displayName', {
enumerable: true,
writable: true,
value: 'DialogTitle'
});
var DialogBodyRoot = (0, _base.simpleTag)({
displayName: 'DialogBodyRoot',
tag: 'section',
classNames: function classNames(props) {
return ['mdc-dialog__body', {
'mdc-dialog__body--scrollable': props.scrollable
}];
},
consumeProps: ['scrollable']
var DialogContent = exports.DialogContent = function (_Component3) {
_inherits(DialogContent, _Component3);
function DialogContent() {
var _ref3;
var _temp3, _this4, _ret3;
_classCallCheck(this, DialogContent);
for (var _len3 = arguments.length, args = Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
args[_key3] = arguments[_key3];
}
return _ret3 = (_temp3 = (_this4 = _possibleConstructorReturn(this, (_ref3 = DialogContent.__proto__ || Object.getPrototypeOf(DialogContent)).call.apply(_ref3, [this].concat(args))), _this4), Object.defineProperty(_this4, 'classNames', {
enumerable: true,
writable: true,
value: ['mdc-dialog__content']
}), _temp3), _possibleConstructorReturn(_this4, _ret3);
}
return DialogContent;
}(_base.Component);
/** @extends React.Component */
/** Actions container for the Dialog. */
Object.defineProperty(DialogContent, 'displayName', {
enumerable: true,
writable: true,
value: 'DialogContent'
});
/** The Dialog body */
var DialogBody = exports.DialogBody = function DialogBody(props) {
return React.createElement(DialogBodyRoot, props);
};
var DialogActions = exports.DialogActions = function (_Component4) {
_inherits(DialogActions, _Component4);
/** The Dialog footer */
var DialogFooter = exports.DialogFooter = (0, _base.simpleTag)({
displayName: 'DialogFooter',
tag: 'footer',
classNames: 'mdc-dialog__footer'
function DialogActions() {
var _ref4;
var _temp4, _this5, _ret4;
_classCallCheck(this, DialogActions);
for (var _len4 = arguments.length, args = Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
args[_key4] = arguments[_key4];
}
return _ret4 = (_temp4 = (_this5 = _possibleConstructorReturn(this, (_ref4 = DialogActions.__proto__ || Object.getPrototypeOf(DialogActions)).call.apply(_ref4, [this].concat(args))), _this5), Object.defineProperty(_this5, 'classNames', {
enumerable: true,
writable: true,
value: ['mdc-dialog__actions']
}), _temp4), _possibleConstructorReturn(_this5, _ret4);
}
return DialogActions;
}(_base.Component);
Object.defineProperty(DialogActions, 'displayName', {
enumerable: true,
writable: true,
value: 'DialogActions'
});
var DialogFooterButtonRoot = (0, _base.simpleTag)({
displayName: 'DialogFooterButtonRoot',
tag: _button2.default,
classNames: function classNames(props) {
return ['mdc-dialog__footer__button', {
'mdc-dialog__footer__button--cancel': props.cancel,
'mdc-dialog__footer__button--accept': props.accept
}];
},
consumeProps: ['accept', 'cancel']
/** Action buttons for the Dialog. */
var DialogButton = exports.DialogButton = function (_React$Component2) {
_inherits(DialogButton, _React$Component2);
function DialogButton() {
_classCallCheck(this, DialogButton);
return _possibleConstructorReturn(this, (DialogButton.__proto__ || Object.getPrototypeOf(DialogButton)).apply(this, arguments));
}
_createClass(DialogButton, [{
key: 'render',
value: function render() {
var _props = this.props,
_props$action = _props.action,
action = _props$action === undefined ? '' : _props$action,
className = _props.className,
isDefaultAction = _props.isDefaultAction,
rest = _objectWithoutProperties(_props, ['action', 'className', 'isDefaultAction']);
return React.createElement(_button2.default, Object.assign({}, rest, {
'data-mdc-dialog-action': action,
className: [className, 'mdc-dialog__button', isDefaultAction && 'mdc-dialog__button--default'].filter(Boolean).join(' ')
}));
}
}]);
return DialogButton;
}(React.Component);
Object.defineProperty(DialogButton, 'displayName', {
enumerable: true,
writable: true,
value: 'DialogButton'
});
/** A Dialog footer button */
var DialogFooterButton = exports.DialogFooterButton = function DialogFooterButton(props) {
return React.createElement(DialogFooterButtonRoot, props);
};
DialogFooterButton.displayName = 'DialogFooterButton';
/** A Dialog component. */
var Dialog = exports.Dialog = function (_FoundationComponent) {
_inherits(Dialog, _FoundationComponent);
var Dialog = exports.Dialog = function (_withFoundation) {
_inherits(Dialog, _withFoundation);
function Dialog() {
function Dialog(props) {
_classCallCheck(this, Dialog);
return _possibleConstructorReturn(this, (Dialog.__proto__ || Object.getPrototypeOf(Dialog)).apply(this, arguments));
var _this7 = _possibleConstructorReturn(this, (Dialog.__proto__ || Object.getPrototypeOf(Dialog)).call(this, props));
_this7.createClassList('root_');
return _this7;
}
_createClass(Dialog, [{
key: 'syncWithProps',
value: function syncWithProps(nextProps) {
var _this2 = this;
key: 'open',
value: function open() {
if (!this.foundation_.isOpen_) {
document.addEventListener('keydown', this.handleDocumentKeydown_);
this.foundation_.open();
}
}
}, {
key: 'close',
value: function close() {
if (this.foundation_.isOpen_) {
document.removeEventListener('keydown', this.handleDocumentKeydown_);
this.foundation_.close();
}
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {
this.container_ = this.root_ && this.root_.querySelector(strings.CONTAINER_SELECTOR);
this.content_ = this.root_ && this.root_.querySelector(strings.CONTENT_SELECTOR);
this.buttons_ = this.root_ && [].slice.call(this.root_.querySelectorAll(strings.BUTTON_SELECTOR));
this.defaultButton_ = this.root_ && this.root_.querySelector(strings.DEFAULT_BUTTON_SELECTOR);
// open
(0, _withFoundation2.syncFoundationProp)(nextProps.open, this.open, function () {
nextProps.open ? _this2.show() : _this2.close();
this.container_ && (this.focusTrap_ = (0, _focusTrap2.default)(this.container_, {
initialFocus: this.defaultButton_ || undefined,
escapeDeactivates: false,
clickOutsideDeactivates: true
}));
this.handleInteraction_ = this.foundation_.handleInteraction.bind(this.foundation_);
this.root_ && this.root_.addEventListener('click', this.handleInteraction_);
this.root_ && this.root_.addEventListener('keydown', this.handleInteraction_);
this.handleDocumentKeydown_ = this.foundation_.handleDocumentKeydown.bind(this.foundation_);
_get(Dialog.prototype.__proto__ || Object.getPrototypeOf(Dialog.prototype), 'componentDidMount', this).call(this);
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
_get(Dialog.prototype.__proto__ || Object.getPrototypeOf(Dialog.prototype), 'componentWillUnmount', this).call(this);
document.removeEventListener('keydown', this.handleDocumentKeydown_);
this.root_ && this.root_.removeEventListener('click', this.handleInteraction_);
this.root_ && this.root_.removeEventListener('keydown', this.handleInteraction_);
}
}, {
key: 'sync',
value: function sync(props) {
if (this.props.open) {
this.open();
} else {
this.close();
}
}
}, {
key: 'getDefaultFoundation',
value: function getDefaultFoundation() {
var _this8 = this;
return new _mdc.MDCDialogFoundation({
addClass: function addClass(className) {
// a hack to make sure the open animation is triggered
if (className === 'mdc-dialog--open') {
window.requestAnimationFrame(function () {
_this8.classList.root_.add(className);
});
} else {
_this8.classList.root_.add(className);
}
},
removeClass: function removeClass(className) {
return _this8.classList.root_.remove(className);
},
hasClass: function hasClass(className) {
return _this8.classList.root_.has(className);
},
addBodyClass: function addBodyClass(className) {
return document.body && document.body.classList.add(className);
},
removeBodyClass: function removeBodyClass(className) {
return document.body && document.body.classList.remove(className);
},
eventTargetMatches: function eventTargetMatches(target, selector) {
return matches(target, selector);
},
computeBoundingRect: function computeBoundingRect() {
return _this8.root_ && _this8.root_.getBoundingClientRect();
},
trapFocus: function trapFocus() {
return _this8.focusTrap_.activate();
},
releaseFocus: function releaseFocus() {
return _this8.focusTrap_.deactivate();
},
isContentScrollable: function isContentScrollable() {
return !!_this8.content_ && isScrollable(_this8.content_);
},
areButtonsStacked: function areButtonsStacked() {
return areTopsMisaligned(_this8.buttons_);
},
getActionFromEvent: function getActionFromEvent(event) {
var element = closest(event.target, '[' + strings.ACTION_ATTRIBUTE + ']');
return element && element.getAttribute(strings.ACTION_ATTRIBUTE);
},
clickDefaultButton: function clickDefaultButton() {
if (_this8.defaultButton_) {
_this8.defaultButton_.click();
}
},
reverseButtons: function reverseButtons() {
_this8.buttons_ && _this8.buttons_.reverse();
_this8.buttons_ && _this8.buttons_.forEach(function (button) {
return button.parentElement && button.parentElement.appendChild(button);
});
},
notifyOpening: function notifyOpening() {
return _this8.emit('onOpen', {});
},
notifyOpened: function notifyOpened() {
return _this8.emit('onOpened', {});
},
notifyClosing: function notifyClosing(action) {
return _this8.emit('onClose', action ? { action: action } : {});
},
notifyClosed: function notifyClosed(action) {
return _this8.emit('onClosed', action ? { action: action } : {});
}
});

@@ -138,14 +425,30 @@ }

value: function render() {
var _props = this.props,
open = _props.open,
onAccept = _props.onAccept,
onCancel = _props.onCancel,
onClose = _props.onClose,
apiRef = _props.apiRef,
rest = _objectWithoutProperties(_props, ['open', 'onAccept', 'onCancel', 'onClose', 'apiRef']);
var _this9 = this;
var root_ = this.foundationRefs.root_;
var _props2 = this.props,
children = _props2.children,
open = _props2.open,
onOpen = _props2.onOpen,
onClose = _props2.onClose,
rest = _objectWithoutProperties(_props2, ['children', 'open', 'onOpen', 'onClose']);
return React.createElement(DialogRoot, Object.assign({}, rest, { elementRef: root_ }));
return React.createElement(
DialogRoot,
Object.assign({}, rest, {
elementRef: function elementRef(ref) {
return _this9.root_ = ref;
},
className: this.classList.root_.renderToString()
}),
React.createElement(
'div',
{ className: 'mdc-dialog__container' },
React.createElement(
'div',
{ className: 'mdc-dialog__surface' },
children
)
),
React.createElement(DialogScrim, null)
);
}

@@ -155,15 +458,3 @@ }]);

return Dialog;
}((0, _withFoundation2.withFoundation)({
constructor: _mdc.MDCDialog,
adapter: {
notifyAccept: function notifyAccept() {
var evt = this.emit(_mdc.MDCDialogFoundation.strings.ACCEPT_EVENT);
this.props.onClose && this.props.onClose(evt);
},
notifyCancel: function notifyCancel() {
var evt = this.emit(_mdc.MDCDialogFoundation.strings.CANCEL_EVENT);
this.props.onClose && this.props.onClose(evt);
}
}
}));
}(_base.FoundationComponent);

@@ -177,4 +468,4 @@ Object.defineProperty(Dialog, 'displayName', {

/** A non-standard SimpleDialog component for ease of use. */
var SimpleDialog = exports.SimpleDialog = function (_React$Component) {
_inherits(SimpleDialog, _React$Component);
var SimpleDialog = exports.SimpleDialog = function (_React$Component3) {
_inherits(SimpleDialog, _React$Component3);

@@ -190,13 +481,12 @@ function SimpleDialog() {

value: function render() {
var _props2 = this.props,
title = _props2.title,
header = _props2.header,
body = _props2.body,
footer = _props2.footer,
scrollable = _props2.scrollable,
acceptLabel = _props2.acceptLabel,
cancelLabel = _props2.cancelLabel,
children = _props2.children,
open = _props2.open,
rest = _objectWithoutProperties(_props2, ['title', 'header', 'body', 'footer', 'scrollable', 'acceptLabel', 'cancelLabel', 'children', 'open']);
var _props3 = this.props,
title = _props3.title,
header = _props3.header,
body = _props3.body,
footer = _props3.footer,
acceptLabel = _props3.acceptLabel,
cancelLabel = _props3.cancelLabel,
children = _props3.children,
open = _props3.open,
rest = _objectWithoutProperties(_props3, ['title', 'header', 'body', 'footer', 'acceptLabel', 'cancelLabel', 'children', 'open']);

@@ -206,38 +496,29 @@ return React.createElement(

Object.assign({ open: open }, rest),
React.createElement(
DialogSurface,
(!!title || !!header) && React.createElement(
DialogTitle,
null,
(!!title || !!header) && React.createElement(
DialogHeader,
null,
!!title && React.createElement(
DialogHeaderTitle,
null,
title
),
!!header && header
!!title && title,
!!header && header
),
(!!body || children) && React.createElement(
DialogContent,
null,
body,
children
),
(!!cancelLabel || !!acceptLabel) && React.createElement(
DialogActions,
null,
!!footer && { footer: footer },
!!cancelLabel && React.createElement(
DialogButton,
{ action: 'close' },
cancelLabel
),
(!!body || children) && React.createElement(
DialogBody,
{ scrollable: scrollable },
body,
children
),
(!!cancelLabel || !!acceptLabel) && React.createElement(
DialogFooter,
null,
!!footer && { footer: footer },
!!cancelLabel && React.createElement(
DialogFooterButton,
{ cancel: true },
cancelLabel
),
!!acceptLabel && React.createElement(
DialogFooterButton,
{ accept: true },
acceptLabel
)
!!acceptLabel && React.createElement(
DialogButton,
{ action: 'accept' },
acceptLabel
)
),
React.createElement(DialogBackdrop, null)
)
);

@@ -258,8 +539,5 @@ }

footer: undefined,
scrollable: undefined,
acceptLabel: 'Accept',
cancelLabel: 'Cancel',
open: false,
onAccept: _base.noop,
onCancel: _base.noop,
onClose: _base.noop,

@@ -266,0 +544,0 @@ children: undefined

10

package.json
{
"name": "@rmwc/dialog",
"version": "2.2.2",
"version": "3.0.0",
"description": "RMWC Dialog component",

@@ -29,6 +29,8 @@ "main": "index.js",

"dependencies": {
"@material/dialog": "~0.39.0",
"@rmwc/base": "^2.2.0",
"@rmwc/button": "^2.2.2"
"@material/dialog": "~0.40.0",
"@material/dom": "~0.40.0",
"@rmwc/base": "^3.0.0",
"@rmwc/button": "^3.0.0",
"focus-trap": "^2.3.0"
}
}

57

README.md

@@ -18,10 +18,6 @@ # Dialogs

Dialog,
DefaultDialogTemplate,
DialogSurface,
DialogHeader,
DialogHeaderTitle,
DialogBody,
DialogFooter,
DialogFooterButton,
DialogBackdrop
DialogTitle,
DialogContent,
DialogActions,
DialogButton
} from '@rmwc/dialog';

@@ -34,15 +30,13 @@

open={this.state.standardDialogOpen}
onClose={evt => this.setState({standardDialogOpen: false})}
>
<DialogSurface>
<DialogHeader>
<DialogHeaderTitle>Dialog Title</DialogHeaderTitle>
</DialogHeader>
<DialogBody>This is a standard dialog.</DialogBody>
<DialogFooter>
<DialogFooterButton cancel>Cancel</DialogFooterButton>
<DialogFooterButton accept>Sweet!</DialogFooterButton>
</DialogFooter>
</DialogSurface>
<DialogBackdrop />
onClose={evt => {
console.log(evt.detail.action)
this.setState({standardDialogOpen: false})
}}
>
<DialogTitle>Dialog Title</DialogTitle>
<DialogContent>This is a standard dialog.</DialogContent>
<DialogActions>
<DialogButton action="close">Cancel</DialogButton>
<DialogButton action="accept" isDefaultAction>Sweet!</DialogButton>
</DialogActions>
</Dialog>

@@ -69,5 +63,6 @@

open={this.state.simpleDialogIsOpen}
onClose={evt => this.setState({simpleDialogIsOpen: false})}
onAccept={evt => console.log('Accepted')}
onCancel={evt => console.log('Cancelled')}
onClose={evt => {
console.log(evt.detail.action)
this.setState({simpleDialogIsOpen: false})
}}
/>

@@ -85,14 +80,12 @@

```jsx renderOnly
import { DocumentComponent } from '@rmwc/base/utils/DocumentComponent';
import { DocumentComponent } from '@rmwc/base/utils/document-component';
import * as docs from './docgen.json';
import * as buttonDocs from '@rmwc/button/docgen.json';
<DocumentComponent docs={docs} displayName="Dialog" />
<DocumentComponent docs={docs} displayName="DialogSurface" />
<DocumentComponent docs={docs} displayName="DialogHeader" />
<DocumentComponent docs={docs} displayName="DialogHeaderTitle" />
<DocumentComponent docs={docs} displayName="DialogBody" />
<DocumentComponent docs={docs} displayName="DialogFooter" />
<DocumentComponent docs={docs} displayName="DialogFooterButton" composes={['Button']} />
<DocumentComponent docs={docs} displayName="DialogBackdrop" />
<DocumentComponent docs={docs} displayName="DialogTitle" />
<DocumentComponent docs={docs} displayName="DialogContent" />
<DocumentComponent docs={docs} displayName="DialogActions" />
<DocumentComponent docs={[docs, buttonDocs]} displayName="DialogButton" composes={['Button']} />
<DocumentComponent docs={docs} displayName="SimpleDialog" />
```
index.js.flow

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc