Edit File by line

import React, {useEffect} from 'react';

[0] Fix | Delete

import classnames from 'classnames';

[1] Fix | Delete

import SUI from 'SUI';

[2] Fix | Delete

import $ from 'jquery';

[3] Fix | Delete

[4] Fix | Delete

const {__} = wp.i18n;

[5] Fix | Delete

[6] Fix | Delete

export default function Modal(

[7] Fix | Delete

{

[8] Fix | Delete

id = '',

[9] Fix | Delete

title = '',

[10] Fix | Delete

description = '',

[11] Fix | Delete

small = false,

[12] Fix | Delete

headerActions = false,

[13] Fix | Delete

focusAfterOpen = '',

[14] Fix | Delete

focusAfterClose = 'container',

[15] Fix | Delete

dialogClasses = [],

[16] Fix | Delete

disableCloseButton = false,

[17] Fix | Delete

enterDisabled = false,

[18] Fix | Delete

beforeTitle = false,

[19] Fix | Delete

onEnter = () => false,

[20] Fix | Delete

onClose = () => false,

[21] Fix | Delete

footer,

[22] Fix | Delete

children

[23] Fix | Delete

}

[24] Fix | Delete

) {

[25] Fix | Delete

useEffect(() => {

[26] Fix | Delete

SUI.openModal(

[27] Fix | Delete

id,

[28] Fix | Delete

focusAfterClose,

[29] Fix | Delete

focusAfterOpen ? focusAfterOpen : getTitleId(),

[30] Fix | Delete

false,

[31] Fix | Delete

false

[32] Fix | Delete

);

[33] Fix | Delete

[34] Fix | Delete

return () => SUI.closeModal();

[35] Fix | Delete

}, []);

[36] Fix | Delete

[37] Fix | Delete

const handleKeyDown = (event) => {

[38] Fix | Delete

const isTargetInput = $(event.target).is('.sui-modal.sui-active input');

[39] Fix | Delete

if (isTargetInput && event.keyCode === 13) {

[40] Fix | Delete

event.preventDefault();

[41] Fix | Delete

event.stopPropagation();

[42] Fix | Delete

[43] Fix | Delete

if (!enterDisabled && onEnter) {

[44] Fix | Delete

onEnter(event);

[45] Fix | Delete

}

[46] Fix | Delete

}

[47] Fix | Delete

}

[48] Fix | Delete

[49] Fix | Delete

function getTitleId() {

[50] Fix | Delete

return id + '-modal-title';

[51] Fix | Delete

}

[52] Fix | Delete

[53] Fix | Delete

function getHeaderActions() {

[54] Fix | Delete

const closeButton = getCloseButton();

[55] Fix | Delete

if (small) {

[56] Fix | Delete

return closeButton;

[57] Fix | Delete

} else if (headerActions) {

[58] Fix | Delete

return headerActions;

[59] Fix | Delete

} else {

[60] Fix | Delete

return <div className="sui-actions-right">{closeButton}</div>

[61] Fix | Delete

}

[62] Fix | Delete

}

[63] Fix | Delete

[64] Fix | Delete

function getCloseButton() {

[65] Fix | Delete

return <button id={id + '-close-button'}

[66] Fix | Delete

type="button"

[67] Fix | Delete

onClick={() => onClose()}

[68] Fix | Delete

disabled={disableCloseButton}

[69] Fix | Delete

className={classnames("sui-button-icon", {

[70] Fix | Delete

'sui-button-float--right': small

[71] Fix | Delete

})}>

[72] Fix | Delete

[73] Fix | Delete

[74] Fix | Delete

[75] Fix | Delete

{__('Close this dialog window', 'wds')}

[76] Fix | Delete

</span>

[77] Fix | Delete

</button>

[78] Fix | Delete

}

[79] Fix | Delete

[80] Fix | Delete

function getDialogClasses() {

[81] Fix | Delete

return Object.assign({}, {

[82] Fix | Delete

'sui-modal-sm': small,

[83] Fix | Delete

'sui-modal-lg': !small

[84] Fix | Delete

}, dialogClasses);

[85] Fix | Delete

}

[86] Fix | Delete

[87] Fix | Delete

return <div className={classnames('sui-modal', getDialogClasses())}

[88] Fix | Delete

onKeyDown={e => handleKeyDown(e)}>

[89] Fix | Delete

<div role="dialog"

[90] Fix | Delete

id={id}

[91] Fix | Delete

className={classnames('sui-modal-content', id + '-modal')}

[92] Fix | Delete

aria-modal="true"

[93] Fix | Delete

aria-labelledby={id + '-modal-title'}

[94] Fix | Delete

aria-describedby={id + '-modal-description'}>

[95] Fix | Delete

[96] Fix | Delete

[97] Fix | Delete

<div className={classnames('sui-box-header', {

[98] Fix | Delete

'sui-flatten sui-content-center sui-spacing-top--40': small

[99] Fix | Delete

})}>

[100] Fix | Delete

{beforeTitle}

[101] Fix | Delete

[102] Fix | Delete

<h3 id={getTitleId()}

[103] Fix | Delete

className={classnames('sui-box-title', {

[104] Fix | Delete

'sui-lg': small

[105] Fix | Delete

})}>

[106] Fix | Delete

[107] Fix | Delete

{title}

[108] Fix | Delete

</h3>

[109] Fix | Delete

[110] Fix | Delete

{getHeaderActions()}

[111] Fix | Delete

</div>

[112] Fix | Delete

[113] Fix | Delete

<div className={classnames('sui-box-body', {

[114] Fix | Delete

'sui-content-center': small

[115] Fix | Delete

})}>

[116] Fix | Delete

{description &&

[117] Fix | Delete

<p className="sui-description"

[118] Fix | Delete

id={id + '-modal-description'}>

[119] Fix | Delete

{description}

[120] Fix | Delete

</p>}

[121] Fix | Delete

[122] Fix | Delete

{children}

[123] Fix | Delete

</div>

[124] Fix | Delete

[125] Fix | Delete

{footer && <div className="sui-box-footer">

[126] Fix | Delete

{footer}

[127] Fix | Delete

</div>}

[128] Fix | Delete

</div>

[129] Fix | Delete

</div>

[130] Fix | Delete

</div>;

[131] Fix | Delete

}

[132] Fix | Delete

[133] Fix | Delete