jss icon indicating copy to clipboard operation
jss copied to clipboard

[jss-plugin-value-observable] Do not evaluate observables onUpdate process

Open rubeniskov opened this issue 6 years ago • 0 comments

Is your feature request related to a problem? Please describe.

I have encountered with a misunderstanding of the functionality through the use of observables with react-jss that makes less useful when try to work with observables injected by the data argument of useStyles.

This is a vaguely example of I want to do

import React, { useRef } from 'react';
import { createUseStyles } from 'react-jss';

// This won't work because the container rule is wrapped by a function
const useStyles = createUseStyles({
  container: ({ getMousePosition }) => ({
    width: getMousePosition('left'),
  }),
});

// This won't work because the style definition is wrapped by a function
const useStyles = createUseStyles((theme) => {
  container: ({ getMousePosition }) => ({
    width: getMousePosition('left'),
    color: theme.primaryColor,
  }),
});


const Button = (children, ...restProps) => {
  const buttonRef = useRef(null);
  // This function creates an observable using the mouse event of the ref passed by argument
  const getMousePosition = useMousePosition(buttonRef);
  const classes = useStyles({...restProps, getMousePosition});
  return (<div ref={container} className={classes.container}>{children}</div>)
}

Describe the solution you'd like The reason why this doesn't work is because the observable plugin do not evaluate onUpdate rule so there's no way to pass a observable through the useStyles to handle dynamicStyles

I solve the problem just implementing the same treatment of onProcessRule into onUpdate processing,

https://github.com/cssinjs/jss/blob/69caa415f245696a526621711e38934495c8e268/packages/jss-plugin-rule-value-observable/src/index.js#L39-L53

Are you willing to implement it? I'm not fully familiar with the plugin API, but I can contribute on it, and if there is any suggestion on this feature I'm open to follow recommendations.

rubeniskov avatar Oct 26 '19 20:10 rubeniskov