tyler.durden
/
opensupports
mirror of https://github.com/opensupports/opensupports.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Group params of open modal function (#935) 

* Agrupate params of open modal function

* Add white color prop in modal componenet
This commit is contained in:
LautaroCesso 2020-11-18 11:47:38 -03:00 committed by GitHub
parent ea273970d1
commit 16435925b6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 94 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
client/src/app-components/are-you-sure.js
View File

@ -5,10 +5,8 @@ import ModalContainer from 'app-components/modal-container';
import Button from 'core-components/button';
import Input from 'core-components/input';
import Icon from 'core-components/icon';
import Loading from 'core-components/loading'
class AreYouSure extends React.Component {
static propTypes = {
description: React.PropTypes.node,
@ -31,8 +29,8 @@ class AreYouSure extends React.Component {
static openModal(description, onYes, type = 'default') {
ModalContainer.openModal(
<AreYouSure description={description} onYes={onYes} type={type}/>,
true
<AreYouSure description={description} onYes={onYes} type={type} />,
{noPadding: true, closeButton: {showCloseButton: true, whiteColor: true}}
);
}
@ -42,18 +40,17 @@ class AreYouSure extends React.Component {
render() {
const { loading } = this.state;
const { description, type } = this.props;
return (
<div className="are-you-sure" role="dialog" aria-labelledby="are-you-sure__header" aria-describedby="are-you-sure__description">
<div className="are-you-sure__header" id="are-you-sure__header">
{i18n('ARE_YOU_SURE')}
</div>
<span className="are-you-sure__close-icon" onClick={this.onNo.bind(this)}>
<Icon name="times" size="2x"/>
</span>
<div className="are-you-sure__description" id="are-you-sure__description">
{this.props.description || (this.props.type === 'secure' && i18n('PLEASE_CONFIRM_PASSWORD'))}
{description || (type === 'secure' && i18n('PLEASE_CONFIRM_PASSWORD'))}
</div>
{(this.props.type === 'secure') ? this.renderPassword() : null}
{(type === 'secure') ? this.renderPassword() : null}
<span className="separator" />
<div className="are-you-sure__buttons">
<div className="are-you-sure__no-button">
@ -68,9 +65,8 @@ class AreYouSure extends React.Component {
onClick={this.onYes.bind(this)}
ref="yesButton"
tabIndex="2"
disabled={loading}
>
{loading ? <Loading /> : i18n('YES')}
disabled={loading}>
{loading ? <Loading /> : i18n('YES')}
</Button>
</div>
</div>
@ -79,10 +75,8 @@ class AreYouSure extends React.Component {
}
renderPassword() {
const {
password,
loading
} = this.state;
const { password, loading } = this.state;
return (
<Input
className="are-you-sure__password"
@ -94,8 +88,7 @@ class AreYouSure extends React.Component {
value={password}
onChange={this.onPasswordChange.bind(this)}
onKeyDown={this.onInputKeyDown.bind(this)}
disabled={loading}
/>
disabled={loading} />
);
}
@ -112,13 +105,8 @@ class AreYouSure extends React.Component {
}
onYes() {
const {
password,
} = this.state;
const {
type,
onYes
} = this.props;
const { password } = this.state;
const { type, onYes } = this.props;
if(type === 'secure' && !password) {
this.refs.password.focus()
@ -166,10 +154,10 @@ class AreYouSure extends React.Component {
}
closeModal() {
if (this.context.closeModal) {
this.context.closeModal();
}
const { closeModal } = this.context;
closeModal && closeModal();
}
}
export default AreYouSure;
export default AreYouSure;

19
client/src/app-components/modal-container.js
View File

@ -8,13 +8,14 @@ import Modal from 'core-components/modal';
class ModalContainer extends React.Component {
static openModal(content, noPadding, outsideClick=false, showCloseButton=false) {
static openModal(
content,
options={noPadding: false, outsideClick: false, closeButton: {showCloseButton: false, whiteColor: false}}
) {
store.dispatch(
ModalActions.openModal({
content,
noPadding,
outsideClick,
showCloseButton
options
})
);
}
@ -50,10 +51,16 @@ class ModalContainer extends React.Component {
}
renderModal() {
const {content, noPadding, outsideClick, showCloseButton} = this.props.modal;
const { content, options } = this.props.modal;
const { noPadding, outsideClick, closeButton } = options;
return (
<Modal content={content} noPadding={noPadding} outsideClick={outsideClick} onOutsideClick={this.closeModal.bind(this)} showCloseButton={showCloseButton} />
<Modal
content={content}
noPadding={noPadding}
outsideClick={outsideClick}
onOutsideClick={this.closeModal.bind(this)}
closeButton={closeButton} />
);
}

24
client/src/app-components/popup-message.js
View File

@ -1,10 +1,8 @@
import React from 'react';
import i18n from 'lib-app/i18n';
import ModalContainer from 'app-components/modal-container';
import Button from 'core-components/button';
import Icon from 'core-components/icon';
import Message from 'core-components/message';
@ -17,9 +15,8 @@ class PopupMessage extends React.Component {
static open(props) {
ModalContainer.openModal(
<PopupMessage {...props}/>,
true,
true
<PopupMessage {...props} />,
{noPadding: true, outsideClick: true}
);
}
@ -30,17 +27,22 @@ class PopupMessage extends React.Component {
render() {
return (
<div className="popup-message">
<Message {...this.props} className="popup-message__message"/>
<Button className="popup-message__close-button" iconName="times" type="clean" ref="closeButton" onClick={this.closeModal.bind(this)}/>
<Message {...this.props} className="popup-message__message" />
<Button
className="popup-message__close-button"
iconName="times"
type="clean"
ref="closeButton"
onClick={this.closeModal.bind(this)} />
</div>
);
}
closeModal() {
if (this.context.closeModal) {
this.context.closeModal();
}
const { closeModal } = this.context;
closeModal && closeModal();
}
}
export default PopupMessage;
export default PopupMessage;

39
client/src/app/admin/panel/settings/admin-panel-advanced-settings.js
View File

@ -36,11 +36,7 @@ class AdminPanelAdvancedSettings extends React.Component {
render() {
const { config } = this.props;
const {
messageType,
error,
selectedAPIKey
} = this.state;
const { messageType, error, selectedAPIKey } = this.state;
return (
<div className="admin-panel-advanced-settings">
@ -106,11 +102,7 @@ class AdminPanelAdvancedSettings extends React.Component {
}
renderMessage() {
const {
messageType,
messageTitle,
messageContent
} = this.state;
const { messageType, messageTitle, messageContent } = this.state;
return (
<Message className="admin-panel-advanced-settings__message" type={messageType} title={messageTitle}>
@ -128,10 +120,7 @@ class AdminPanelAdvancedSettings extends React.Component {
}
renderKey() {
const {
APIKeys,
selectedAPIKey
} = this.state;
const { APIKeys, selectedAPIKey } = this.state;
const {
name,
token,
@ -203,17 +192,21 @@ class AdminPanelAdvancedSettings extends React.Component {
<SubmitButton className="admin-panel-advanced-settings__api-keys-modal__submit-button" type="secondary">{i18n('SUBMIT')}</SubmitButton>
</div>
</Form>,
null,
null,
true
{
closeButton: {
showCloseButton: true
}
}
);
}
addAPIKey({name,userPermission,createTicketPermission,checkTicketPermission,ticketNumberPermission}) {
ModalContainer.closeModal();
this.setState({
error: ''
})
});
API.call({
path: '/system/add-api-key',
data: {
@ -266,10 +259,7 @@ class AdminPanelAdvancedSettings extends React.Component {
}
onAreYouSureMandatoryLoginOk(password) {
const {
config,
dispatch
} = this.props;
const { config, dispatch } = this.props;
return API.call({
path: config['mandatory-login'] ? '/system/disable-mandatory-login' : '/system/enable-mandatory-login',
@ -287,10 +277,7 @@ class AdminPanelAdvancedSettings extends React.Component {
}
onAreYouSureRegistrationOk(password) {
const {
config,
dispatch
} = this.props;
const { config, dispatch } = this.props;
return API.call({
path: config['registration'] ? '/system/disable-registration' : '/system/enable-registration',

19
client/src/core-components/modal.js
View File

@ -5,13 +5,18 @@ import {Motion, spring} from 'react-motion';
import Icon from 'core-components/icon';
const closeButtonSchema = React.PropTypes.shape({
showCloseButton: React.PropTypes.bool,
whiteColor: React.PropTypes.bool
});
class Modal extends React.Component {
static propTypes = {
content: React.PropTypes.node,
noPadding: React.PropTypes.bool,
outsideClick: React.PropTypes.bool,
onOutsideClick: React.PropTypes.func,
showCloseButton: React.PropTypes.bool
closeButton: closeButtonSchema
};
render() {
@ -36,24 +41,22 @@ class Modal extends React.Component {
}
renderModal(animation) {
const {
showCloseButton,
content
} = this.props;
const { closeButton, content } = this.props;
const { showCloseButton, whiteColor } = closeButton;
return (
<div className={this.getClass()} style={{opacity: animation.fade}} onClick={this.onModalClick.bind(this)}>
<div className="modal__content" style={{transform: 'scale(' + animation.scale + ')'}} onClick={this.onModalContentClick.bind(this)}>
{showCloseButton ? this.renderCloseButton() : null}
{showCloseButton ? this.renderCloseButton(whiteColor) : null}
{content}
</div>
</div>
)
}
renderCloseButton() {
renderCloseButton(whiteColor = false) {
return (
<span className="modal__close-icon" onClick={() => this.props.onOutsideClick()}>
<span className={`modal__close-icon${whiteColor ? " modal__close-icon__white-color" : ""}`} onClick={() => this.props.onOutsideClick()}>
<Icon name="times" size="2x"/>
</span>
);

4
client/src/core-components/modal.scss
View File

@ -31,5 +31,9 @@
position: absolute;
top: 10px;
right: 10px;
&__white-color {
color: white;
}
}
}

38
client/src/reducers/modal-reducer.js
View File

@ -7,10 +7,15 @@ class ModalReducer extends Reducer {
getInitialState() {
return {
opened: false,
noPadding: false,
content: null,
outsideClick: false,
showCloseButton: false
options: {
noPadding: false,
outsideClick: false,
closeButton: {
showCloseButton: false,
whiteColor: false
}
}
};
}
@ -22,21 +27,19 @@ class ModalReducer extends Reducer {
}
onOpenModal(state, payload) {
const {
content,
noPadding,
outsideClick,
showCloseButton
} = payload;
const { content, options } = payload;
const { noPadding, outsideClick, closeButton } = options;
document.body.setAttribute('style', 'overflow:hidden');
return _.extend({}, state, {
opened: true,
content,
noPadding: noPadding || false,
outsideClick,
showCloseButton
options: {
noPadding: noPadding || false,
outsideClick,
closeButton
}
});
}
@ -46,9 +49,14 @@ class ModalReducer extends Reducer {
return _.extend({}, state, {
opened: false,
content: null,
noPadding: false,
outsideClick: false,
showCloseButton: false
options: {
noPadding: false,
outsideClick: false,
closeButton: {
showCloseButton: false,
whiteColor: false
}
}
});
}
}