loucadufault / magneticslider Goto Github PK

Note that clicking right next to the magnetic mark should not trigger this effect, only dragging away from the magnetic mark should.

So long as we can get the previous value in the onChange hook (as well as the newValue), then we can check if the previous value was both 1) closer to a magnetic mark than the newValue (but not on the magnetic mark) and 2) in the (potentially scaled) radius of that magnetic mark. Then we would know that we were escaping that magnetic mark, and to continue escaping it.

eslint
exclude from pkgd

Add "sideEffects": false to package.json so that bundlers like webpack are able to tree shake this pkg. See https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free

It should default to 1.

Workaround: supply the item magneticScale: 1 to all mark objects in the marks array passed to the component. E.g.:

<MagneticSlider
    ...
    marks={[0,20,37,100].map(x => ({value: x, label: x + "°C", magneticScale: 1}))}
    ...                                                        ^^^^^^^^^^^^^^^^
/>

Could not find a declaration file for module 'magnetic-slider'. 'test-project/node_modules/magnetic-slider/lib/MagneticSlider.js' implicitly has an 'any' type.

1. Investigate if this is desirable or typically done for mui extensions (otherwise?)
2. figure out what other code or infra needs to be added to repo for packaging and registry
3. impl

long-term: implement dependabot and versioning and release gitflow

put computeMagneticTarget nested function definition as a callback for React's useEffect hook, so that it is only redefined when one of the dependencies change, that is either of the variables magneticBoundaryDeadzone or magneticRadius change between renders.

This is for optimization reasons only.

see https://github.com/loucadufault/MagneticSlider/blob/main/MagneticSlider.js#L36

use gh pages

similar to https://github.com/transitive-bullshit/react-modern-library-boilerplate/tree/feature/material-ui

figure out how to design tests for react components
maybe puppeteer? storybook, jest snapshots ?