From 2ba9c61ff249af28a94933e4091fcd28040e45ee Mon Sep 17 00:00:00 2001 From: Vasek Mlejnsky Date: Fri, 24 Aug 2018 09:57:23 +0200 Subject: [PATCH] Refactorize "Loader" component - Change folder name from "LoaderCircle" to "Loader" --- src/js/components/Loader/index.js | 105 ++++++++++++++++++ src/js/components/LoaderCircle/index.js | 21 ---- src/js/components/Notification/index.js | 5 +- src/js/components/modal/RememberDevice.js | 4 +- .../Landing/components/InstallBridge/index.js | 4 +- src/js/views/Landing/index.js | 9 +- .../components/AccountMenu/index.js | 4 +- 7 files changed, 117 insertions(+), 35 deletions(-) create mode 100644 src/js/components/Loader/index.js delete mode 100644 src/js/components/LoaderCircle/index.js diff --git a/src/js/components/Loader/index.js b/src/js/components/Loader/index.js new file mode 100644 index 00000000..c14de752 --- /dev/null +++ b/src/js/components/Loader/index.js @@ -0,0 +1,105 @@ +import React from 'react'; +import styled, { css, keyframes } from 'styled-components'; +import PropTypes from 'prop-types'; +import P from 'components/Paragraph'; +import colors from 'config/colors'; + +const Wrapper = styled.div` + position: relative; + width: ${props => `${props.size}px`}; + height: ${props => `${props.size}px`}; + display: flex; + justify-content: center; + align-items: center; +`; + +const SvgWrapper = styled.svg` + position: absolute; + width: 100%; + height: 100%; + animation: rotate 2s linear infinite; + transform-origin: center center; +`; + +const animationDash = keyframes` + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124; + } +`; + +const animationColor = keyframes` + 100%, 0% { + stroke: ${colors.GREEN_PRIMARY}; + } + 40% { + stroke: ${colors.GREEN_PRIMARY}; + } + 66% { + stroke: ${colors.GREEN_SECONDARY}; + } + 80%, 90% { + stroke: ${colors.GREEN_TERTIARY}; + } +`; + +const CircleWrapper = styled.circle` + ${props => props.isRoute && css` + stroke: ${colors.GRAY_LIGHT}; + `} + + ${props => props.isPath && css` + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + animation: ${animationDash} 1.5s ease-in-out infinite, ${animationColor} 6s ease-in-out infinite; + stroke-linecap: round; + `}; +`; + +const Loader = ({ + className, text, size = 100, +}) => ( + +

{text}

+ + + + + +); + +Loader.propTypes = { + className: PropTypes.string, + text: PropTypes.string, + size: PropTypes.number, +}; + +export default Loader; diff --git a/src/js/components/LoaderCircle/index.js b/src/js/components/LoaderCircle/index.js deleted file mode 100644 index ba209cd8..00000000 --- a/src/js/components/LoaderCircle/index.js +++ /dev/null @@ -1,21 +0,0 @@ -/* @flow */ - -import React from 'react'; - -export default (props: { size: string, label?: string, className?: string }): React$Element => { - const className = props.className ? `loader-circle ${props.className}` : 'loader-circle'; - const style = { - width: `${props.size}px`, - height: `${props.size}px`, - }; - - return ( -
-

{ props.label }

- - - - -
- ); -}; \ No newline at end of file diff --git a/src/js/components/Notification/index.js b/src/js/components/Notification/index.js index e8cabff1..097cee8c 100644 --- a/src/js/components/Notification/index.js +++ b/src/js/components/Notification/index.js @@ -9,7 +9,7 @@ import { connect } from 'react-redux'; import * as NOTIFICATION from 'actions/constants/notification'; import * as NotificationActions from 'actions/NotificationActions'; import type { Action, State, Dispatch } from 'flowtype'; -import Loader from 'components/LoaderCircle'; +import Loader from 'components/Loader'; type Props = { notifications: $ElementType, @@ -53,8 +53,7 @@ export const Notification = (props: NProps): React$Element => { ) : null } { props.loading ? ( ) : null } diff --git a/src/js/components/modal/RememberDevice.js b/src/js/components/modal/RememberDevice.js index e53ae213..2e318f7b 100644 --- a/src/js/components/modal/RememberDevice.js +++ b/src/js/components/modal/RememberDevice.js @@ -2,7 +2,7 @@ import React, { Component } from 'react'; -import Loader from 'components/LoaderCircle'; +import Loader from 'components/Loader'; import type { Props } from './index'; @@ -89,7 +89,7 @@ export default class RememberDevice extends Component {

Forget {label}?

Would you like TREZOR Wallet to forget your { devicePlural }, so that it is still visible even while disconnected?

- +
); diff --git a/src/js/views/Landing/components/InstallBridge/index.js b/src/js/views/Landing/components/InstallBridge/index.js index 4459e81e..0f2cca6f 100644 --- a/src/js/views/Landing/components/InstallBridge/index.js +++ b/src/js/views/Landing/components/InstallBridge/index.js @@ -8,7 +8,7 @@ import installers from 'constants/bridge'; import Select from 'components/Select'; import Link from 'components/Link'; import Button from 'components/Button'; -import Loader from 'components/LoaderCircle'; +import Loader from 'components/Loader'; import P from 'components/Paragraph'; import ICONS from 'config/icons'; @@ -128,7 +128,7 @@ export default class InstallBridge extends Component { render() { if (!this.state.target) { - return ; + return ; } const { label } = this.state.target; const url = `${this.state.url}${this.state.target.value}`; diff --git a/src/js/views/Landing/index.js b/src/js/views/Landing/index.js index 74d4c97d..ef1fac97 100644 --- a/src/js/views/Landing/index.js +++ b/src/js/views/Landing/index.js @@ -6,7 +6,7 @@ import Header from 'components/Header'; import Footer from 'components/Footer'; import Log from 'components/Log'; import Link from 'components/Link'; -import Loader from 'components/LoaderCircle'; +import Loader from 'components/Loader'; import Notifications, { Notification } from 'components/Notification'; import colors from 'config/colors'; import P from 'components/Paragraph'; @@ -82,7 +82,7 @@ export default (props: Props) => { return ( - {isLoading && } + {isLoading && } {!isLoading && (
@@ -98,8 +98,7 @@ export default (props: Props) => { - - {/* {shouldShowUnsupportedBrowser && } + {shouldShowUnsupportedBrowser && } {shouldShowInstallBridge && } {(shouldShowConnectDevice || shouldShowDisconnectDevice) && ( @@ -147,7 +146,7 @@ export default (props: Props) => { )} - )} */} + )}