milan milan - 1 month ago 12
React JSX Question

close request is not working on dialog box

When an icon is clicked, a dialog box with form should appear to either add a tab or delete specific tab. I have used reactjs, redux and material-ui for components.
I could show the dialog box when icon is clicked but when i click on cancel button, dialog box does not get close.

What should i do to resolve it?

Here is my code

App.js

class App extends Component {
constructor(props) {
super(props);
this.state = {
max_char: 32,
open: false,
};
this.handleChange = this.handleChange.bind(this);
this.handleLogout = this.handleLogout.bind(this);
}

handleClose = () => this.setState({ open: false });

handleOpen = () => this.setState({ open: true });

render() {
return (
<div>
<Header
tab={this.state.tabs}
open={this.state.open}
handleClose={this.handleClose}
handleToggle={this.handleToggle}
/>
<Content
handleOpen={this.handleOpen}
handleClose={this.handleClose}
/>
</div>
);
}
}


Header.js

class Header extends Component {
render() {
const tabs = _.map(this.props.tab, (tab) =>
<span className="tab" key={tab.id}><a href="">{tab.description}</a></span>
);

return (
<div>
<AppBar
title={tabs}
iconElementRight={navigation}
onLeftIconButtonTouchTap={this.props.handleToggle}
style={{ background: '#fff' }}
/>
</div>
);
}
}

function mapStateToProps(state) {
return {
iconList: state.iconList
};
}

function mapDispatchToProps(dispatch) {
return bindActionCreators({
selectTabIcon
}, dispatch);
}


const Content = (props) =>
(
<div className="content-section">
<TabDialog />
</div>
);


TabDialog.js

class TabDialog extends Component {
constructor(props) {
super(props);
this.state = {
open: false,
};
}

renderAddTab() {
const actions = [
<FlatButton
label="Cancel"
primary
onTouchTap={this.props.createTab.close}
/>,
<FlatButton
label="Add Tab"
primary
keyboardFocused
onTouchTap={this.props.createTab.close}
/>,
];
return (
<div className="device-action">
<Dialog
title="Add a Tab"
actions={actions}
modal={false}
open={this.props.createTab.open}
onRequestClose={this.props.createTab.close}
>
<div className="tab-name">
<TextField
floatingLabelText="Name"
floatingLabelStyle={{ color: '#1ab394' }}
floatingLabelFocusStyle={{ color: '#1db4c2' }}
underlineStyle={{ borderColor: '#1ab394' }}
/>
</Dialog>
</div>
);
}

renderDeleteTab() {
const actions = [
<FlatButton
label="Cancel"
primary
onTouchTap={this.props.createTab.close}
/>,
<FlatButton
label="Delete"
primary
keyboardFocused
onTouchTap={this.props.createTab.close}
/>,
];
return (
<div className="tab-action">
<Dialog
title="Delete"
actions={actions}
modal={false}
open={this.props.createTab.open}
onRequestClose={this.props.createTab.close} />
</div>
);
}


render() {
const iconSelected = this.props.createTab;
if (!iconSelected) {
return (<div>Select</div>);
}
if (iconSelected === '1') {
return (this.renderDeleteTab());
}
if (iconSelected === '2') {
return (this.renderAddTab());
}
}
}

function mapStateToProps(state) {
return {
iconList: state.iconList,
createTab: state.createTab,
};
}

function mapDispatchToProps(dispatch) {
return bindActionCreators({
addTab,
selectTabIcon
}, dispatch);
}


redux part

export function selectTabIcon(selectTab) {
console.log('selected', selectTab.target.id);
return {
type: 'TAB_ICON_SELECTED',
id: selectTab.target.id,
open: true,
close: () => false
};
}

switch (action.type) {
case 'TAB_ICON_SELECTED':
console.log('tab', action);
return action;


open props accept boolean and onRequestClose and onTouchTap props accepts function.

Why is my code not working? How can i overcome this issue?

Answer

I found the solution. onRequestClose and onTouchTap both accepts function. They need open to be false. Why i failed is i passed false value to close flag instead to open.

Now i have created a new action creator where i have passed an action to close it by setting open payload to false

export function closeTabIcon() {
  return {
    type: 'CLOSE_ICON',
    open: false
  }
}

reducer will be something like this

   case 'CLOSE_ICON':
     return action.open

Now in the OnRequestProps i passed this.props.closetabIcon.

Comments