Comparative Formula Widget #504
Conversation
Pull Request Test Coverage Report for Build 3346188627
💛 - Coveralls |
- encapsulate animation effects in widgets - wrap around `animateValue` in utils - provide JSDoc documentation - provide TS typings
| const requestAnimationFrameRef = useRef(-1); | ||
|
|
||
| // if we want to run the animation on mount, we set the start value as 0 and animate to the start value | ||
| const [animatedValue, setAnimatedValue] = useState(() => animateOnMount ? 0 : value); |
There was a problem hiding this comment.
I like the idea of a hook to encapsulate animation. I think it's a good addition!
Just one comment, we're assuming that values are positive, and we should always animate from 0. But what about adding an extra param to indicate initialValue?: number? (with 0 as default)?
| useEffect(() => { | ||
| if (!disabled) { | ||
| animateValue({ | ||
| start: animatedValue || 0, |
There was a problem hiding this comment.
to be used also here... initialValue
There was a problem hiding this comment.
Here also?
Wouldn't animatedValue get assigned the value of initialValue in the useState call a few lines above?
I was setting this || 0 here in the cases where value is a "falsy" value, but as this check is also performed in <AnimatedNumber /> we can remove it from here if you see it ok
packages/react-ui/src/types.d.ts
Outdated
|
|
||
| export type AnimationOptions = { | ||
| duration?: number; | ||
| animateOnMount?: boolean; |
There was a problem hiding this comment.
to add here the initialValue?: number?
…use-animated-number
…comparative-formula-widget
Description
This PR implements part of the work proposed in RFC #479
Changes added in this PR include:
ComparativeFormulaWidgetUIin thewidgetsfolderdependenciesofpackages/react-ui/package.jsonused for animationsAnimatedNumberin thecustom-componentsfolder. This component uses theuse-animated-numbernpm package and abstracts away the logic for animating a changing number that is required for both formula widget and category widget, removing almost entirely the need foruseEffectin UI components.AnimatedNumberandComparativeFormulaWidgetUIAnimatedNumberandComparativeFormulaWidgetUIAnimatedNumberandComparativeFormulaWidgetUIComparativeFormulaWidgetUIwhere all prop combinations can be tested and tweaked. A screenshot of this storybook is added as visual feedback.Type of change
Acceptance
How to validate the feature:
yarn storybook:startin thereact-uifolder.ComparativeFormulaWidgetUIin your sample project, by importingComparativeFormulaWidgetUIfrom@carto/react-ui. You can use this branch ofcarto-react-templateto skip this step if you want, as a test screen is already setup there. Bear in mind that if this feature is not published to npm you will have to link your local version of@carto/react-*packages withyarn link.Basic checklist