From 077b6dc7fae85fa7381830ae535addd9651e85bb Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Thu, 11 Oct 2018 12:21:24 +0200 Subject: [PATCH] Make notification responsive, flow fix --- src/actions/NotificationActions.js | 5 +- src/components/Notification/index.js | 37 ++------- .../components/NotificationsGroups/index.js | 83 ++++++++++--------- .../Wallet/views/FirmwareUpdate/index.js | 1 - 4 files changed, 51 insertions(+), 75 deletions(-) diff --git a/src/actions/NotificationActions.js b/src/actions/NotificationActions.js index 05f8b685..6f1181d1 100644 --- a/src/actions/NotificationActions.js +++ b/src/actions/NotificationActions.js @@ -1,6 +1,5 @@ /* @flow */ - - +import * as React from 'react'; import * as NOTIFICATION from 'actions/constants/notification'; import type { @@ -13,7 +12,7 @@ export type NotificationAction = { payload: { +type: string, +title: string, - +message?: string, + +message?: React.Node | string, +cancelable: boolean, actions?: Array } diff --git a/src/components/Notification/index.js b/src/components/Notification/index.js index e39e2e5d..882cbae6 100644 --- a/src/components/Notification/index.js +++ b/src/components/Notification/index.js @@ -1,8 +1,6 @@ /* @flow */ import * as React from 'react'; -import PropTypes from 'prop-types'; -import media from 'styled-media-query'; import styled, { css } from 'styled-components'; import colors from 'config/colors'; import { getColor, getIcon } from 'utils/notification'; @@ -20,7 +18,7 @@ type Props = { type: string, cancelable?: boolean; title: string; - className: string; + className?: string; message?: string; actions?: Array; close?: typeof NotificationActions.close, @@ -36,6 +34,8 @@ const Wrapper = styled.div` display: flex; flex-direction: row; text-align: left; + justify-content: center; + align-items: center; ${props => props.type === 'info' && css` color: ${colors.INFO_PRIMARY}; @@ -56,19 +56,10 @@ const Wrapper = styled.div` color: ${colors.ERROR_PRIMARY}; background: ${colors.ERROR_SECONDARY}; `} - - ${media.lessThan('610px')` - flex-direction: column; - `} `; const Body = styled.div` display: flex; - width: 60%; - - ${media.lessThan('610px')` - width: 100%; - `} `; const Message = styled.div` @@ -77,6 +68,7 @@ const Message = styled.div` const Title = styled.div` padding-bottom: 5px; + line-height: 12px; font-weight: ${FONT_WEIGHT.BIGGER}; `; @@ -99,6 +91,7 @@ const IconWrapper = styled.div` const Texts = styled.div` display: flex; + padding: 0 10px 0 0; flex-direction: column; flex: 1; `; @@ -114,12 +107,6 @@ const ActionContent = styled.div` display: flex; justify-content: right; align-items: flex-end; - - ${media.lessThan('610px')` - width: 100%; - padding: 10px 0 0 30px; - align-items: flex-start; - `} `; const Notification = (props: Props): React$Element => { @@ -167,18 +154,4 @@ const Notification = (props: Props): React$Element => { ); }; -Notification.propTypes = { - className: PropTypes.string, - type: PropTypes.string.isRequired, - cancelable: PropTypes.bool, - title: PropTypes.string.isRequired, - message: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.element, - ]).isRequired, - actions: PropTypes.arrayOf(PropTypes.object), - close: PropTypes.func, - loading: PropTypes.bool, -}; - export default Notification; \ No newline at end of file diff --git a/src/components/notifications/Context/components/Action/components/NotificationsGroups/index.js b/src/components/notifications/Context/components/Action/components/NotificationsGroups/index.js index 759d8369..d3c7f084 100644 --- a/src/components/notifications/Context/components/Action/components/NotificationsGroups/index.js +++ b/src/components/notifications/Context/components/Action/components/NotificationsGroups/index.js @@ -24,45 +24,50 @@ class NotificationsGroup extends PureComponent { } render() { - const { close, notifications } = this.props; - // const notifications = [ - // { - // key: 1, - // title: 'this is a title of error notification', - // type: 'error', - // message: 'this is a message of error notification', - // }, - // { - // key: 2, - // title: 'this is a title of warning notification', - // type: 'warning', - // message: 'this is a message of warning notification', - // }, - // { - // key: 3, - // title: 'this is a title of warning notification', - // type: 'warning', - // message: 'this is a message of warning notification', - // }, - // { - // key: 4, - // title: 'this is a title of warning notification sds d', - // type: 'warning', - // message: 'this is a message of warning notification', - // }, - // { - // key: 5, - // title: 'this is a title of warning notification as', - // type: 'info', - // message: 'this is a message of warning notification', - // }, - // { - // key: 6, - // title: 'this is a title of info notification s ', - // type: 'info', - // message: 'this is a message of info notification', - // }, - // ]; + const { close } = this.props; + const notifications = [ + { + key: 1, + title: 'this is a title of error notification', + type: 'error', + message: 'this is a message of error notification', + }, + { + key: 2, + title: 'this is a title of warning notification', + type: 'warning', + message: 'this is a message of warning notification', + }, + { + key: 3, + title: 'this is a title of warning notification', + type: 'warning', + message: 'this is a message of warning notification', + }, + { + key: 4, + title: 'this is a title of warning notification sds d', + type: 'warning', + message: 'this is a message of warning notification', + }, + { + key: 5, + title: 'this is a title of warning notification as', + type: 'info', + message: 'this is a message of warning notification', + }, + { + key: 6, + title: 'this is a title of info notification s ', + type: 'info', + message: 'this is a message of info notification', + actions: + [{ + label: 'Update', + callback: 'props.routerActions.gotoBridgeUpdate', + }], + }, + ]; const notificationGroups = this.groupNotifications(notifications); const sortedNotifications = this.sortByPriority(notificationGroups); diff --git a/src/views/Wallet/views/FirmwareUpdate/index.js b/src/views/Wallet/views/FirmwareUpdate/index.js index 89a52712..cdc10c5d 100644 --- a/src/views/Wallet/views/FirmwareUpdate/index.js +++ b/src/views/Wallet/views/FirmwareUpdate/index.js @@ -3,7 +3,6 @@ import React from 'react'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; -import { NavLink } from 'react-router-dom'; import styled from 'styled-components'; import { H1 } from 'components/Heading';