moarwick / react-mt-svg-lines Goto Github PK

View Code? Open in Web Editor NEW

361.0 12.0 23.0 3.45 MB

A React.js wrapper component to animate the line stroke in SVGs

Home Page: http://moarwick.github.io/react-mt-svg-lines

License: MIT License

JavaScript 96.84% HTML 2.07% CSS 1.09%

svg css-animations reactjs tween higher-order-component stroke path

react-mt-svg-lines's People

Contributors

Stargazers

Watchers

react-mt-svg-lines's Issues

callback firing before expected.

Hi it is a very cool lib!! Just trying current version. the issue is callback function is fired almost immediately rather than at the end of the animation.

Fix crash during Server Side Rendering

Hi,
First of all thanks for your Component, it's awesome! 🎉

The generated dist file has an unguarded "performance"in window check, which crashes when window is not defined during Server Side Rendering. I just had a quick look for where this code came from, and strangely enough it disappears (and fixes my issue) if I set minimize: false in the webpack.dist.js config

For a React module I would really remove the (webpack) optimization all together, it not only causes this issue, but also makes debugging unnecessarily hard. The optimization will be handled by your end users in their own build process anyway.

A more typical export for a library like this would be a transpiled (not minimized or otherwise optimized) lib folder, mirroring your src, which you can get by just simply running babel -d lib src.

End of Animation callback

Hi,

Is there a way to provide a callback function that is called after the end of the animation ?

For e.g. something like this:

<MtSvgLines callback={() => console.log('done')} ...otherProps />

Randomized className attribute causes react-test-renderer snapshots to fail

Issue

When using jest and react-test-renderer to snapshot test components containing MtSvgLines, the snapshot test will always fail because a new random className is generated, regardless of if a className is specified explicitly.

Example of failing test

Proposed solution

Either add a method to disable random className generation, or add support for snapshot testing using jest and react-test-renderer.

having issues with paths exported from illustrator

I can't get paths exported from illustrator to work. It exports svgs like this one:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38.93 40.02"><title>vector-logo</title>

<path d="M382.79,279.74l-29,18a1.48,1.48,0,0,1-2.27-.95V282.1l8.7,6h0a1.12,1.12,0,0,0,.75.29,1.14,1.14,0,0,0,1.14-1.14,1.12,1.12,0,0,0-.05-0.33h0a1.11,1.11,0,0,0-.12-0.27L358,277.78l11.74-9.61,13,8.08a2,2,0,0,1,0,3.49h0Z" transform="translate(-344.88 -257.98)"/>

<path d="M351.77,264.22a0.68,0.68,0,0,0-.22-0.39V259.2c0-1.7,1.93-1.2,2.27-.95l13.2,8.2-12.95,3.84-2.29-6.07h0Z" transform="translate(-344.88 -257.98)"/>

<path d="M359.35,270.74a0.27,0.27,0,0,1,.14,0,0.29,0.29,0,0,1,.29.28,0.28,0.28,0,0,1-.12.23h0l-6.41,5.21,1.8,4a0.55,0.55,0,0,1,.06.12h0a0.5,0.5,0,0,1,0,.15,0.52,0.52,0,0,1-.86.39h0l-4.19-2.86L346.92,280h0a0.54,0.54,0,0,1-.2,0,0.51,0.51,0,0,1-.53-0.51,0.55,0.55,0,0,1,0-.18h0c0.44-1.18,1-2.74,1-2.78l-2.14-1.09a0.3,0.3,0,0,1-.22-0.29,0.33,0.33,0,0,1,.26-0.31h0l3.38-1.18,1.25-3.4a0.34,0.34,0,0,1,.3-0.23,0.31,0.31,0,0,1,.31.22l1.06,2.79,7.89-2.32,0,0h0Z" transform="translate(-344.88 -257.98)"/>

</svg>

And if I take the simplest path in there:

M351.77,264.22a0.68,0.68,0,0,0-.22-0.39V259.2c0-1.7,1.93-1.2,2.27-.95l13.2,8.2-12.95,3.84-2.29-6.07h0Z

it doesn't render. What's the difference between these style paths exported from Illustrator and what can I do to make them compatible?

Can't seem to make it animate?

I wrapped my code in the

<MtSvgLines animate="true" duration={1000}>
<svg id="TeamChart" width="100%" height="100%">
          <circle
            cx="50%"
            cy="50%"
            r={radiusHR}
            fill="none"
            stroke={strokedefaultcolor}
            strokeWidth={strokewidth}
            strokeDasharray={circumferenceHR}
            strokeDashoffset={circumferenceHR * 0.01}
          />
            <circle
              id="HRprogress"
              cx="50%"
              cy="50%"
              r={radiusHR}
              fill="none"
              stroke="#E1E5FA"
              strokeWidth={strokewidth}
              strokeDasharray={circumferenceHR}
              strokeDashoffset={circumferenceHR * (1 - this.props.value1 / 101)}
            />
<svg>
          </MtSvgLines>

what am I doing wrong here?

Uncaught Invariant Violation: Element type is invalid

Hi, I'm currently trying to use the library and keep running into this error:

index_bundle.js:9326 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `SVGTile`.

index_bundle.js:8863 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `SVGTile`.

Using:

"react": "^15.3.0",
"react-dom": "^15.3.0",
"react-mt-svg-lines": "^0.6.0"

Here is my code:

var React = require('react');
var ReactDOM = require('react-dom');
var MtSvgLines = require('react-mt-svg-lines');

var SVGTile = React.createClass({
  render: function() {
    return(
      <a data-section={this.props.section}>
        <MtSvgLines animate={true} duration={500}>
          <svg viewBox="0 0 100 100">
            <path id={this.props.id} strokeWidth="10" stroke="green" fill={this.props.fill} className={this.props.className} d={this.props.d} />
          </svg>
        </MtSvgLines>
      </a>
    )
  }
});

ReactDOM.render(
 <SVGTile section="music" id="music" fill="#000000" className="cover" d="M256.307,330.646c-5.912,0-5.966-0.07-5.974-5.869c-0.007-6.123-0.038-12.245,0.006-18.367l-0.023-17.579c0.013-10.339,0.161-20.681,0.017-31.019c-0.052-3.715,1.272-4.987,4.991-4.982c56.325,0.068,112.65,0.033,168.978,0.021c2.585,0,5.171,0.058,7.754-0.037c2.801-0.104,3.925,1.199,3.871,3.933l0.047,69.373c0.041,3.362-1.241,4.612-4.566,4.522L256.307,330.646z"/>,
  document.getElementById('app')
);

Could you please point me to the right direction as to what's going on here? I tried nesting in different ways and even stripped all props and tried the example on the website, can't figure out what's going wrong. I'm making sure I have the SVG markup lined up properly too. It's killing me, any of your help would be greatly appreciated!

TypeError: pathEl.getTotalLength is not a function when mounting with enzyme / jest

Hi there, I'm seeing a lot of errors while trying to use enzyme and jest with react-mt-svg-lines; Wondering if I could get some input. I'm trying to mount a component and simulate a click on it and then test the state afterwards. This involves getPathLengths, which fails. I'm not sure why it fails, was hoping I could get some input. This is a snippet of my code:

import React from 'react';
import { shallow, mount } from 'enzyme';
import BugReportForm from 'Feedback/BugReport.jsx';
import { Button } from 'antd';
import SubmissionThankYou from 'Modules/SubmissionThankYou/SubmissionThankYou.jsx';

const mt = mount(<BugReportForm />);

it('correctly responds to form submit', () => {
  console.log(mt.debug());
  mt.find(Button).at(0).simulate('submit');
  expect(mt.find(SubmissionThankYou)).toHaveLength(1);
});

This is the error returned:

TypeError: pathEl.getTotalLength is not a function

      at node_modules/react-mt-svg-lines/lib/index.js:378:90
      at NodeList.map (native)
      at MtSvgLines._getPathLengths (node_modules/react-mt-svg-lines/lib/index.js:374:21)
      at MtSvgLines._animate (node_modules/react-mt-svg-lines/lib/index.js:229:34)
      at MtSvgLines.componentDidMount (node_modules/react-mt-svg-lines/lib/index.js:96:12)
      at node_modules/react-dom/lib/ReactCompositeComponent.js:265:25
      at measureLifeCyclePerf (node_modules/react-dom/lib/ReactCompositeComponent.js:75:12)
      at node_modules/react-dom/lib/ReactCompositeComponent.js:264:11
      at CallbackQueue.notifyAll (node_modules/react-dom/lib/CallbackQueue.js:76:22)
      at ReactReconcileTransaction.close (node_modules/react-dom/lib/ReactReconcileTransaction.js:80:26)
      at ReactReconcileTransaction.closeAll (node_modules/react-dom/lib/Transaction.js:206:25)
      at ReactReconcileTransaction.perform (node_modules/react-dom/lib/Transaction.js:153:16)
      at ReactUpdatesFlushTransaction.perform (node_modules/react-dom/lib/Transaction.js:140:20)
      at ReactUpdatesFlushTransaction.perform (node_modules/react-dom/lib/ReactUpdates.js:89:32)
      at Object.flushBatchedUpdates (node_modules/react-dom/lib/ReactUpdates.js:172:19)
      at ReactDefaultBatchingStrategyTransaction.closeAll (node_modules/react-dom/lib/Transaction.js:206:25)
      at ReactDefaultBatchingStrategyTransaction.perform (node_modules/react-dom/lib/Transaction.js:153:16)
      at Object.batchedUpdates (node_modules/react-dom/lib/ReactDefaultBatchingStrategy.js:62:26)
      at Object.batchedUpdates (node_modules/react-dom/lib/ReactUpdates.js:97:27)
      at node_modules/react-dom/lib/ReactTestUtils.js:348:18
      at ReactWrapper.<anonymous> (node_modules/enzyme/build/ReactWrapper.js:776:11)
      at ReactWrapper.single (node_modules/enzyme/build/ReactWrapper.js:1421:25)
      at ReactWrapper.simulate (node_modules/enzyme/build/ReactWrapper.js:769:14)
      at Object.<anonymous>.it (src/Feedback/BugReport.test.jsx:36:31)
          at Promise (<anonymous>)
      at Promise.resolve.then.el (node_modules/p-map/index.js:42:16)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:169:7)

I seem to be able to workaround it by forcing a 0 return if getTotalLength is undefined. I have this workaround live on my fork .

Can't resolve 'react-mt-svg-lines' in '/opt/build/repo/src/components'

Hi, I am trying to deploy to netlify & vercel but building creates this error.

I have tried to build in gatsby locally and it works fine. Just when push to deploy doesn't compile.

Thanks for the great package.

TypeError invoking getElementsByName and getTotalLength

While using Jest + Enzyme/ReactTestRenderer, I encountered the two following errors:

Renderer:

TypeError: Cannot read property 'getElementsByTagName' of null

      at MtSvgLines.selectPathElems (node_modules/react-mt-svg-lines/lib/index.js:282:36)
      at MtSvgLines.getPathLengths (node_modules/react-mt-svg-lines/lib/index.js:373:28)
      at MtSvgLines.animate (node_modules/react-mt-svg-lines/lib/index.js:229:34)
      at MtSvgLines.componentDidMount (node_modules/react-mt-svg-lines/lib/index.js:96:12)
      at node_modules/react-test-renderer/lib/ReactCompositeComponent.js:262:25
      at measureLifeCyclePerf (node_modules/react-test-renderer/lib/ReactCompositeComponent.js:73:12)
      at node_modules/react-test-renderer/lib/ReactCompositeComponent.js:261:11
      at CallbackQueue.notifyAll (node_modules/react-test-renderer/lib/CallbackQueue.js:74:22)
      at ReactTestReconcileTransaction.close (node_modules/react-test-renderer/lib/ReactTestReconcileTransaction.js:34:26)
      at ReactTestReconcileTransaction.closeAll (node_modules/react-test-renderer/lib/Transaction.js:207:25)
      at ReactTestReconcileTransaction.perform (node_modules/react-test-renderer/lib/Transaction.js:154:16)
      at batchedMountComponentIntoNode (node_modules/react-test-renderer/lib/ReactTestMount.js:67:27)
      at ReactDefaultBatchingStrategyTransaction.perform (node_modules/react-test-renderer/lib/Transaction.js:141:20)
      at Object.batchedUpdates (node_modules/react-test-renderer/lib/ReactDefaultBatchingStrategy.js:60:26)
      at Object.batchedUpdates (node_modules/react-test-renderer/lib/ReactUpdates.js:95:27)
      at Object.render (node_modules/react-test-renderer/lib/ReactTestMount.js:126:18)
      at Object.<anonymous> (tests/PageFooter.test.js:28:32)

Enzyme (same as #11 ):

TypeError: pathEl.getTotalLength is not a function

      at node_modules/react-mt-svg-lines/lib/index.js:375:89
          at Proxy.map (<anonymous>)
      at MtSvgLines.getPathLengths (node_modules/react-mt-svg-lines/lib/index.js:374:21)
      at MtSvgLines.animate (node_modules/react-mt-svg-lines/lib/index.js:229:34)
      at MtSvgLines.componentDidMount (node_modules/react-mt-svg-lines/lib/index.js:96:12)
      at node_modules/react-dom/lib/ReactCompositeComponent.js:262:25
      at measureLifeCyclePerf (node_modules/react-dom/lib/ReactCompositeComponent.js:73:12)
      at node_modules/react-dom/lib/ReactCompositeComponent.js:261:11
      at CallbackQueue.notifyAll (node_modules/react-dom/lib/CallbackQueue.js:74:22)
      at ReactReconcileTransaction.close (node_modules/react-dom/lib/ReactReconcileTransaction.js:78:26)
      at ReactReconcileTransaction.closeAll (node_modules/react-dom/lib/Transaction.js:207:25)
      at ReactReconcileTransaction.perform (node_modules/react-dom/lib/Transaction.js:154:16)
      at batchedMountComponentIntoNode (node_modules/react-dom/lib/ReactMount.js:124:15)
      at ReactDefaultBatchingStrategyTransaction.perform (node_modules/react-dom/lib/Transaction.js:141:20)
      at Object.batchedUpdates (node_modules/react-dom/lib/ReactDefaultBatchingStrategy.js:60:26)
      at Object.batchedUpdates (node_modules/react-dom/lib/ReactUpdates.js:95:27)
      at Object._renderNewRootComponent (node_modules/react-dom/lib/ReactMount.js:317:18)
      at Object._renderSubtreeIntoContainer (node_modules/react-dom/lib/ReactMount.js:399:32)
      at Object.render (node_modules/react-dom/lib/ReactMount.js:420:23)
      at Object.render (node_modules/enzyme-adapter-react-15/build/ReactFifteenAdapter.js:181:50)
      at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:98:16)
      at mount (node_modules/enzyme/build/mount.js:19:10)
      at Object.<anonymous> (tests/PageFooter.test.js:22:14)

I'm using react-mt-svg-lines 0.8.4, and right now I'm working around this issue by safely accessing getElementsByTagName through this change to line 282 in index.js:
var svgEl = this._svgWrapper && this._svgWrapper.getElementsByTagName('svg')[0];

Issues when using multiple components on same page because CSS is not scoped

Great module! Having issues using it to draw multiple paths at once because the CSS isn't scoped to current line's class, so it will get modified by the next line. Here's the CSS output:

.mt-true path:nth-of-type( 1 ) {
        opacity:                 0.01;
        stroke-dasharray:        352.7;
        stroke-dashoffset:       352.7;
        -webkit-animation:       mt-true-1 5s ease forwards;
        animation:               mt-true-1 5s ease forwards;
        -webkit-animation-delay: 0s;
        animation-delay:         0s;
}

If the CSS rule were attached to the class specified in "className", there wouldn't be a problem.

Use case

Hello,

I created nice looking submit buttons using Your component. It worked great!
You can check it out here

Uncaught TypeError: Cannot read property 'oneOf' of undefined

Call Stack:

index.js:415 Uncaught TypeError: Cannot read property 'oneOf' of undefined
    at Object.169../utils.js (index.js:415)
    at s (_prelude.js:1)
    at _prelude.js:1
    at Object.600.prop-types (Form.js:7)
    at s (_prelude.js:1)
    at _prelude.js:1
    at Object.601.../reducers (FormContainer.js:5)
    at s (_prelude.js:1)
    at _prelude.js:1
    at Object.598../ErrorBoundary (App.js:2)

The line it's referring to:

timing: _react2.default.PropTypes.oneOf([// easing type
  'ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear', 'step-start', 'step-end']),

Conflict with React 16? Something else?

Compatibility IE 10, 11 Edge !

Any possibility of compatibility with IE ?

moarwick / react-mt-svg-lines Goto Github PK

react-mt-svg-lines's People

Contributors

Stargazers

Watchers

Forkers

react-mt-svg-lines's Issues

Recommend Projects

Recommend Topics

Recommend Org