Merge pull request #292 from loeck/master

Create FlipTicker component

package.json

@@ -76,7 +76,6 @@
     "raven-js": "^3.24.2",
     "react": "^16.3.2",
     "react-dom": "^16.3.2",
-    "react-flip-ticker": "^0.3.0",
     "react-i18next": "^7.6.0",
     "react-mortal": "^3.2.0",
     "react-motion": "^0.5.2",

src/components/base/FlipTicker/index.js

@@ -0,0 +1,105 @@
+// @flow
+
+/* eslint-disable react/no-did-mount-set-state */
+/* eslint-disable react/no-array-index-key */
+
+import React, { PureComponent, Fragment } from 'react'
+import styled from 'styled-components'
+import { Motion, spring } from 'react-motion'
+
+import Box from 'components/base/Box'
+
+const Container = styled(Box).attrs({
+  horizontal: true,
+  relative: true,
+})`
+  overflow: hidden;
+  white-space: pre;
+`
+
+const TickWrapper = styled(Box).attrs({
+  style: p => ({
+    transform: `translate3d(0, -${p.offset}px, 0)`,
+  }),
+})`
+  top: 0;
+  position: absolute;
+`
+
+const RANGE_NUMBER = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
+const RANGE_COMPONENT = RANGE_NUMBER.map((r, i) => <Box key={i}>{r}</Box>)
+
+type Props = {
+  value: string,
+}
+
+type State = {
+  height: ?number,
+}
+
+class FlipTicker extends PureComponent<Props, State> {
+  state = {
+    height: null,
+  }
+
+  componentDidMount() {
+    if (this._node instanceof HTMLDivElement) {
+      const { height } = this._node.getBoundingClientRect()
+      this.setState({
+        height,
+      })
+    }
+  }
+
+  _node = null
+
+  render() {
+    const { value, ...p } = this.props
+    const { height } = this.state
+    return (
+      <Container innerRef={n => (this._node = n)} {...p}>
+        {value.split('').map((l, i) => (
+          <Box key={i}>
+            {!/[0-9]/.test(l) ? (
+              l === ' ' ? (
+                <span>&nbsp;</span>
+              ) : (
+                l
+              )
+            ) : (
+              <Fragment>
+                <span
+                  style={{
+                    visibility: 'hidden',
+                  }}
+                >
+                  {l}
+                </span>
+                {height && <Tick height={height} value={l} />}
+              </Fragment>
+            )}
+          </Box>
+        ))}
+      </Container>
+    )
+  }
+}
+
+function Tick(props: { height: number, value: string }) {
+  const { height, value } = props
+
+  const index = RANGE_NUMBER.indexOf(value)
+  const offset = height * index
+
+  return (
+    <Motion
+      style={{
+        offset: spring(offset),
+      }}
+    >
+      {m => <TickWrapper offset={m.offset}>{RANGE_COMPONENT}</TickWrapper>}
+    </Motion>
+  )
+}
+
+export default FlipTicker

src/components/base/FlipTicker/stories.js

@@ -0,0 +1,59 @@
+// @flow
+
+import React, { Component } from 'react'
+
+import { storiesOf } from '@storybook/react'
+import { formatCurrencyUnit, getFiatUnit } from '@ledgerhq/currencies'
+import Chance from 'chance'
+
+import Box from 'components/base/Box'
+
+import FlipTicker from 'components/base/FlipTicker'
+
+const stories = storiesOf('Components/base', module)
+
+const unit = getFiatUnit('USD')
+const chance = new Chance()
+
+function getValue() {
+  return formatCurrencyUnit(unit, chance.floating({ min: 1000, max: 100000 }), {
+    showCode: true,
+  })
+}
+
+class Wrapper extends Component<any, any> {
+  state = {
+    value: getValue(),
+  }
+
+  componentDidMount() {
+    this.generateValue()
+  }
+
+  generateValue = () =>
+    setTimeout(() => {
+      this.setState({
+        value: getValue(),
+      })
+      this.generateValue()
+    }, 5000)
+
+  render() {
+    const { render } = this.props
+    const { value } = this.state
+    return render(value)
+  }
+}
+
+stories.add('FlipTicker', () => (
+  <Wrapper
+    render={value => (
+      <Box flow={2}>
+        <FlipTicker value={value} fontSize={2} />
+        <FlipTicker value={value} />
+        <FlipTicker value={value} fontSize={8} />
+        <Box>{value}</Box>
+      </Box>
+    )}
+  />
+))

src/components/base/FormattedVal/index.js

@@ -3,7 +3,6 @@
 import React from 'react'
 import styled from 'styled-components'
 import { connect } from 'react-redux'
-import Ticker from 'react-flip-ticker'
 
 import isUndefined from 'lodash/isUndefined'
 
@@ -15,6 +14,7 @@ import { formatCurrencyUnit, getFiatUnit } from '@ledgerhq/currencies'
 import { getMarketColor } from 'styles/helpers'
 
 import Box from 'components/base/Box'
+import FlipTicker from 'components/base/FlipTicker'
 
 import IconBottom from 'icons/Bottom'
 import IconTop from 'icons/Top'
@@ -98,7 +98,7 @@ export function FormattedVal(props: Props) {
   }
 
   if (animateTicker) {
-    text = <Ticker text={text} />
+    text = <FlipTicker value={text} />
   }
 
   const marketColor = settings

yarn.lock

@@ -10189,12 +10189,6 @@ react-error-overlay@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.0.tgz#d198408a85b4070937a98667f500c832f86bd5d4"
 
-react-flip-ticker@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/react-flip-ticker/-/react-flip-ticker-0.3.0.tgz#7ea4676317ddd5230e4c1f4e9adc2d0fc3bca527"
-  dependencies:
-    prop-types "^15.6.0"
-
 react-fuzzy@^0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/react-fuzzy/-/react-fuzzy-0.5.2.tgz#fc13bf6f0b785e5fefe908724efebec4935eaefe"