amikhalev/sprinklers3
1
1
Fork 0
Code Issues 9 Pull Requests 1 Releases Wiki Activity

Improved messages functionality

Browse Source
This commit is contained in:
Mikhalev 2017-06-06 19:18:13 -06:00
parent 2499ca6497
commit 7c72c6787a
4 changed files with 85 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
app/script/components/MessagesView.tsx
View File

@ -1,24 +1,30 @@
import * as React from "react";
import { CSSTransitionGroup } from "react-transition-group";
import {observer} from "mobx-react";
import {UiStore, Message as UiMessage} from "../ui";
import {Message} from "semantic-ui-react";
@observer
export default class MessagesView extends React.PureComponent<{ uiStore: UiStore }, {}> {
class MessagesView extends React.PureComponent<{ uiStore: UiStore }, {}> {
render() {
return <div>
{this.props.uiStore.messages.map(this.renderMessage)}
return <div className="messages">
<CSSTransitionGroup transitionName="message" transitionAppear={true} transitionAppearTimeout={500}
transitionEnterTimeout={500} transitionLeaveTimeout={500}>
{this.props.uiStore.messages.map(this.renderMessage)}
</CSSTransitionGroup>
</div>;
}
private renderMessage = (message: UiMessage, index: number) => {
const {header, content, type} = message;
return <Message header={header} content={content} success={type === UiMessage.Type.Success}
info={type === UiMessage.Type.Info} warning={type === UiMessage.Type.Warning}
error={type === UiMessage.Type.Error} onDismiss={() => this.dismiss(index)}/>;
const { header, content, type } = message;
return <Message key={message.id} className="message"
header={header} content={content}
success={type === UiMessage.Type.Success}
info={type === UiMessage.Type.Info} warning={type === UiMessage.Type.Warning}
error={type === UiMessage.Type.Error} onDismiss={() => this.dismiss(index)} />;
}
private dismiss(index: number) {
this.props.uiStore.messages.splice(index, 1);
}
}
}

35
app/style/app.css
View File

@ -38,4 +38,39 @@
.durationInput--minutes > input,
.durationInput--seconds > input {
width: 70px !important;
}
.messages {
position: fixed;
top: 12px;
left: 12px;
right: 12px;
z-index: 1000;
}
.message-enter,
.message-appear {
opacity: 0.01;
}
.message-enter.message-enter-active,
.message-appear.message-appear-active {
opacity: 1;
transition: all 500ms ease-in;
}
.message-leave {
/*opacity: 1;*/
transform-origin: top;
overflow-y: hidden;
}
.message-leave.message-leave-active {
/*opacity: 0.01;*/
transform: scaleY(0.01);
/*height: 0;*/
margin-top: 0;
padding-top: 0;
padding-bottom: 0;
transition: all 500ms ease-in;
}

6
package.json
View File

@ -30,6 +30,7 @@
"@types/react": "^15.0.26",
"@types/react-dom": "^15.5.0",
"@types/react-fontawesome": "^1.5.0",
"@types/react-transition-group": "^1.1.1",
"classnames": "^2.2.5",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
@ -40,6 +41,7 @@
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-fontawesome": "^1.6.1",
"react-transition-group": "^1.2.0",
"semantic-ui-css": "^2.2.10",
"semantic-ui-react": "^0.70.0",
"webpack-merge": "^4.1.0"
@ -53,9 +55,9 @@
"mobx-react-devtools": "^4.2.13",
"react-hot-loader": "^3.0.0-beta.6",
"source-map-loader": "^0.2.1",
"style-loader": "^0.18.2",
"style-loader": "^0.18.1",
"ts-loader": "^2.1.0",
"tslint": "^5.4.3",
"tslint": "^5.4.2",
"typescript": "^2.3.4",
"webpack": "^3.0.0",
"webpack-dev-server": "^2.4.4"

34
yarn.lock
View File

@ -34,6 +34,12 @@
dependencies:
"@types/react" "*"
"@types/react-transition-group@^1.1.1":
version "1.1.1"
resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-1.1.1.tgz#372fd2b4777b96aa983ac15fb5cc0ce150550aeb"
dependencies:
"@types/react" "*"
"@types/react@*", "@types/react@^15.0.26":
version "15.0.33"
resolved "https://registry.yarnpkg.com/@types/react/-/react-15.0.33.tgz#442b025b3ee7d65f25c5cf495b7bd773855c079b"
@ -602,6 +608,10 @@ center-align@^0.1.1:
align-text "^0.1.3"
lazy-cache "^1.0.3"
chain-function@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/chain-function/-/chain-function-1.0.0.tgz#0d4ab37e7e18ead0bdc47b920764118ce58733dc"
chalk@^1.1.0, chalk@^1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@ -1113,6 +1123,10 @@ dom-converter@~0.1:
dependencies:
utila "~0.3"
dom-helpers@^3.2.0:
version "3.2.1"
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.2.1.tgz#3203e07fed217bd1f424b019735582fc37b2825a"
dom-serializer@0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
@ -3287,6 +3301,16 @@ react-proxy@^3.0.0-alpha.0:
dependencies:
lodash "^4.6.1"
react-transition-group@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-1.2.0.tgz#b51fc921b0c3835a7ef7c571c79fc82c73e9204f"
dependencies:
chain-function "^1.0.0"
dom-helpers "^3.2.0"
loose-envify "^1.3.1"
prop-types "^15.5.6"
warning "^3.0.0"
react@^15.5.4:
version "15.6.1"
resolved "https://registry.yarnpkg.com/react/-/react-15.6.1.tgz#baa8434ec6780bde997cdc380b79cd33b96393df"
@ -3894,7 +3918,7 @@ strip-json-comments@~2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
style-loader@^0.18.2:
style-loader@^0.18.1:
version "0.18.2"
resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.18.2.tgz#cc31459afbcd6d80b7220ee54b291a9fd66ff5eb"
dependencies:
@ -4028,7 +4052,7 @@ tslib@^1.7.1:
version "1.7.1"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.7.1.tgz#bc8004164691923a79fe8378bbeb3da2017538ec"
tslint@^5.4.3:
tslint@^5.4.2:
version "5.4.3"
resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.4.3.tgz#761c8402b80e347b7733a04390a757b253580467"
dependencies:
@ -4236,6 +4260,12 @@ vm-browserify@0.0.4:
dependencies:
indexof "0.0.1"
warning@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
dependencies:
loose-envify "^1.0.0"
watchpack@^1.3.1:
version "1.3.1"
resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.3.1.tgz#7d8693907b28ce6013e7f3610aa2a1acf07dad87"