1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-05-03 01:18:43 +02:00

Switch to react-modal to avoid buggy polyfill

This commit is contained in:
ivaosthu 2016-12-22 15:50:56 +01:00
parent a5bf866411
commit a256e7c44d
7 changed files with 71 additions and 44 deletions

File diff suppressed because one or more lines are too long

View File

@ -1 +1 @@
{"version":3,"sources":["webpack:///webpack:///src/component/styles.scss","webpack:///webpack:///src/component/feature/progress-styles.scss","webpack:///webpack:///src/component/common/common.scss","webpack:///webpack:///src/component/feature/feature.scss","webpack:///webpack:///src/component/history/history.scss"],"names":[],"mappings":"0ysIAAA,2BAAW,kBAAkB,MAAM,SAAS,OAAO,QAAQ,WAAW,YAAY,eAAe,CAAC,oDAAoB,qBAAqB,CCA3I,+BAAM,eAAe,qBAAqB,uCAAuC,CAAC,gCAAO,cAAc,CAAC,+BAAM,oBAAqB,eAAe,iBAAiB,yBAAyB,kBAAkB,CCA9M,0BAAU,mBAAmB,gBAAgB,sBAAsB,CCAnE,yBAAQ,qBAAsB,cAAc,CAAC,sBAAK,WAAW,CAAC,qBAAI,SAAS,CAAC,uBAAM,cAAc,oBAAoB,CAAC,6BAAY,WAAW,eAAe,CAAC,6BAAY,UAAU,CAAC,2BAAU,YAAY,CAAC,+BAAc,OAAO,oBAAqB,CAAC,sCAAsB,UAAU,CAAC,mCAAkB,OAAO,yBAA0B,CAAC,0BAAS,aAAa,WAA0B,CAAC,+BAAc,OAAO,WAAW,CAAC,8BAAa,MAAM,CAAC,+BAAc,MAAM,CAAC,yBAA0B,4BAAW,YAAY,CAAC,CCAvf,0BAAS,WAAW,wBAAwB,CAAC,+BAAc,qBAAqB,gBAAgB,sBAAsB,iBAAiB,aAAa,CAAC,wDAAsB,WAAW,CAAC,wDAAsB,SAAS,CAAC,2GAAuC,UAAW,CAAC,qDAAmB,SAAS,CAAC,qDAAmB,WAAW,CAAC,iDAAe,UAAU,CAAC,6BAAY,YAAa,CAAC,6BAAY,WAAW,WAAW,YAAY,eAAgB,CAAC,6BAAY,mBAAmB,gBAAmB,CAAC,8CAA6B,wBAAwB","file":"bundle.css","sourcesContent":[".container{position:absolute;top:0;bottom:0;left:0;right:0;width:100%;height:auto;overflow-y:auto}.navigation .active{background-color:#EEE}\n\n\n\n// WEBPACK FOOTER //\n// webpack:///src/component/styles.scss",".path{stroke:#3f51b5;stroke-linecap:round;transition:stroke-dashoffset 5s ease 0s}.trail{stroke:#d6d6d6}.text{fill:rgba(0,0,0,0.7);font-size:25px;line-height:25px;dominant-baseline:middle;text-anchor:middle}\n\n\n\n// WEBPACK FOOTER //\n// webpack:///src/component/feature/progress-styles.scss",".truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n\n\n\n// WEBPACK FOOTER //\n// webpack:///src/component/common/common.scss",".action{color:#aaa !important;cursor:pointer}.yes{color:green}.no{color:red}.link{color:#212121;text-decoration:none}.link small{color:#aaa;font-weight:100}.link:hover{color:#000}.iconList{display:flex}.iconListItem{flex:1;color:#bbb !important}.iconListItem *:hover{color:#333}.iconListItemChip{flex:1;margin-left:5px !important}.topList{display:flex;margin:10px 10px 10px 10px}.topListItem0{flex:1;flex-grow:0}.topListItem{flex:1}.topListItem2{flex:2}@media (max-width: 960px){.hideLt960{display:none}}\n\n\n\n// WEBPACK FOOTER //\n// webpack:///src/component/feature/feature.scss",".history{width:100%;border-collapse:collapse}.history code{word-wrap:break-word;white-space:pre;font-family:monospace;line-height:100%;color:#0B8C8F}.history code>.diff-N{color:green}.history code>.diff-D{color:red}.history code>.diff-A,.history .diff-E{color:black}.history .negative{color:red}.history .positive{color:green}.history .blue{color:blue}.history dl{padding:0.5em}.history dt{float:left;clear:left;width:100px;font-weight:bold}.history dd{margin:0 0 0 110px;padding:0 0 0.5em 0}.history-item:nth-child(odd){background-color:#efefef}\n\n\n\n// WEBPACK FOOTER //\n// webpack:///src/component/history/history.scss"],"sourceRoot":""}
{"version":3,"sources":["webpack:///webpack:///src/component/styles.scss","webpack:///webpack:///src/component/feature/progress-styles.scss","webpack:///webpack:///src/component/common/common.scss","webpack:///webpack:///src/component/feature/feature.scss","webpack:///webpack:///src/component/history/history.scss"],"names":[],"mappings":"murIAAA,2BAAW,kBAAkB,MAAM,SAAS,OAAO,QAAQ,WAAW,YAAY,eAAe,CAAC,oDAAoB,qBAAqB,CCA3I,+BAAM,eAAe,qBAAqB,uCAAuC,CAAC,gCAAO,cAAc,CAAC,+BAAM,oBAAqB,eAAe,iBAAiB,yBAAyB,kBAAkB,CCA9M,0BAAU,mBAAmB,gBAAgB,sBAAsB,CCAnE,yBAAQ,qBAAsB,cAAc,CAAC,sBAAK,WAAW,CAAC,qBAAI,SAAS,CAAC,uBAAM,cAAc,oBAAoB,CAAC,6BAAY,WAAW,eAAe,CAAC,6BAAY,UAAU,CAAC,2BAAU,YAAY,CAAC,+BAAc,OAAO,oBAAqB,CAAC,sCAAsB,UAAU,CAAC,mCAAkB,OAAO,yBAA0B,CAAC,0BAAS,aAAa,WAA0B,CAAC,+BAAc,OAAO,WAAW,CAAC,8BAAa,MAAM,CAAC,+BAAc,MAAM,CAAC,yBAA0B,4BAAW,YAAY,CAAC,CCAvf,0BAAS,WAAW,wBAAwB,CAAC,+BAAc,qBAAqB,gBAAgB,sBAAsB,iBAAiB,aAAa,CAAC,wDAAsB,WAAW,CAAC,wDAAsB,SAAS,CAAC,2GAAuC,UAAW,CAAC,qDAAmB,SAAS,CAAC,qDAAmB,WAAW,CAAC,iDAAe,UAAU,CAAC,6BAAY,YAAa,CAAC,6BAAY,WAAW,WAAW,YAAY,eAAgB,CAAC,6BAAY,mBAAmB,gBAAmB,CAAC,8CAA6B,wBAAwB","file":"bundle.css","sourcesContent":[".container{position:absolute;top:0;bottom:0;left:0;right:0;width:100%;height:auto;overflow-y:auto}.navigation .active{background-color:#EEE}\n\n\n\n// WEBPACK FOOTER //\n// webpack:///src/component/styles.scss",".path{stroke:#3f51b5;stroke-linecap:round;transition:stroke-dashoffset 5s ease 0s}.trail{stroke:#d6d6d6}.text{fill:rgba(0,0,0,0.7);font-size:25px;line-height:25px;dominant-baseline:middle;text-anchor:middle}\n\n\n\n// WEBPACK FOOTER //\n// webpack:///src/component/feature/progress-styles.scss",".truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n\n\n\n// WEBPACK FOOTER //\n// webpack:///src/component/common/common.scss",".action{color:#aaa !important;cursor:pointer}.yes{color:green}.no{color:red}.link{color:#212121;text-decoration:none}.link small{color:#aaa;font-weight:100}.link:hover{color:#000}.iconList{display:flex}.iconListItem{flex:1;color:#bbb !important}.iconListItem *:hover{color:#333}.iconListItemChip{flex:1;margin-left:5px !important}.topList{display:flex;margin:10px 10px 10px 10px}.topListItem0{flex:1;flex-grow:0}.topListItem{flex:1}.topListItem2{flex:2}@media (max-width: 960px){.hideLt960{display:none}}\n\n\n\n// WEBPACK FOOTER //\n// webpack:///src/component/feature/feature.scss",".history{width:100%;border-collapse:collapse}.history code{word-wrap:break-word;white-space:pre;font-family:monospace;line-height:100%;color:#0B8C8F}.history code>.diff-N{color:green}.history code>.diff-D{color:red}.history code>.diff-A,.history .diff-E{color:black}.history .negative{color:red}.history .positive{color:green}.history .blue{color:blue}.history dl{padding:0.5em}.history dt{float:left;clear:left;width:100px;font-weight:bold}.history dd{margin:0 0 0 110px;padding:0 0 0.5em 0}.history-item:nth-child(odd){background-color:#efefef}\n\n\n\n// WEBPACK FOOTER //\n// webpack:///src/component/history/history.scss"],"sourceRoot":""}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -31,7 +31,6 @@
"main": "./index.js",
"dependencies": {
"debug": "^2.2.0",
"dialog-polyfill": "^0.4.5",
"immutability-helper": "^2.0.0",
"immutable": "^3.8.1",
"normalize.css": "^5.0.0",
@ -39,6 +38,7 @@
"react-addons-css-transition-group": "^15.3.1",
"react-dom": "^15.3.1",
"react-mdl": "^1.9.0",
"react-modal": "^1.6.4",
"react-redux": "^4.4.5",
"react-router": "^3.0.0",
"redux": "^3.6.0",

View File

@ -1,6 +1,27 @@
import React, { PropTypes } from 'react';
import { Textfield, Dialog, DialogTitle, DialogContent, DialogActions, Button } from 'react-mdl';
import dialogPolyfill from 'dialog-polyfill/dialog-polyfill.js';
import { Textfield, Button } from 'react-mdl';
import Modal from 'react-modal';
const customStyles = {
overlay: {
position: 'fixed',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: 'rgba(0, 0, 0, 0.75)',
zIndex: 99999,
},
content: {
top: '50%',
left: '50%',
right: 'auto',
bottom: 'auto',
marginRight: '-50%',
transform: 'translate(-50%, -50%)',
backgroundColor: '#FFFFFF',
},
};
class EditUserComponent extends React.Component {
static propTypes () {
@ -11,43 +32,36 @@ class EditUserComponent extends React.Component {
};
}
componentDidMount () {
this.initPolyfill();
}
handleSubmit = (evt) => {
evt.preventDefault();
this.props.save();
}
initPolyfill () {
const dialogs = document.querySelectorAll('dialog');
[].slice.call(dialogs).forEach(dialog => dialogPolyfill.registerDialog(dialog));
}
render () {
return (
<div>
<Dialog open={this.props.user.showDialog}>
<DialogTitle>Action required</DialogTitle>
<DialogContent>
<Modal
isOpen={this.props.user.showDialog}
contentLabel="test"
style={customStyles} >
<h2>Action required</h2>
<div>
<p>
You hav to specify a username to use Unleash. This will allow us to track changes.
</p>
<form onSubmit={this.handleSubmit}>
<Textfield
label="USERNAME"
label="Username"
name="username"
required
value={this.props.user.userName}
onChange={(e) => this.props.updateUserName(e.target.value)}
/>
<br />
<Button raised accent onClick={this.props.save}>Save</Button>
</form>
</DialogContent>
<DialogActions>
<Button onClick={this.props.save}>Save</Button>
</DialogActions>
</Dialog>
</div>
</Modal>
</div>
);
}

View File

@ -1,4 +1,3 @@
import 'dialog-polyfill/dialog-polyfill.css';
import 'whatwg-fetch';
import 'react-mdl/extra/material.css';
import 'react-mdl/extra/material.js';