cssinjs/jss

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

Open

#1224 aperta il 26 ott 2019

Vedi su GitHub
 (0 commenti) (0 reazioni) (0 assegnatari)JavaScript (434 fork)batch import
feature requesthelp wanted

Metriche repository

Star
 (7000 star)
Metriche merge PR
 (Nessuna PR mergiata in 30 g)

Descrizione

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.

Guida contributor