How to use method findStyleAsClassName?

General
1

This is more a general javaScript question, but I did not find a way to resolve this by myself.

I want to implement a Custom Renderer for Readio Buttons.
For this reason I copied the code from RadioGroup.tsx into my own project to do some tweaks.

A problem in this code seems to be the following line:

  const radioControl = useMemo(() => findStyleAsClassName(contextStyles)('control.radio'), [contextStyles]);

The compiler indicates that it Cannot find name 'findStyleAsClassName'

My Imports currently look like this:

import {
  computeLabel,
  ControlProps,
  isDescriptionHidden,
  OwnPropsOfEnum
} from '@jsonforms/core';
import merge from 'lodash/merge';
import React, { useMemo, useState } from 'react';
import { useStyles, VanillaRendererProps } from '@jsonforms/vanilla-renderers';

export const ImixsRadioGroup = ({
  classNames,
  id,
  label,
  options,
  required,
  description,
  errors,
  data,
  uischema,
  visible,
  config,
  enabled,
  path,
  handleChange
}: ControlProps & VanillaRendererProps & OwnPropsOfEnum) => {
  const contextStyles = useStyles();
  const [isFocused, setFocus] = useState(false);
  const radioControl = useMemo(() => findStyleAsClassName(contextStyles)('control.radio'), [contextStyles]);

...

Can someone help me out here - what is necessary that findStyleAsClassName can be resolved?

Thanks for any help

===
Ralph

2

I solved the problem for my own component by removing all the code regarding the resolution of classnames in the origin RadioGroup.tsx file.

The strange thing is: the origin implementation of RadioGroup does so much about resolving classnames, and applying class names to each element in the component. But at the end it is not possible to adjust some basic styles by injecting additional class names. See this discussion. I wonder for what all the findStyleAsClassName calls are good for.

To me, it looks as if a lot of effort has been made to achieve a high degree of flexibility only internally, but without giving this flexibility to the outside.

But don’t get me wrong, the project is still brilliant.

3

Hi @rsoika,

The findStyleAsClassName calls resolve the class names out of the styling context which can be set up externally, see this guide on how to use it.

Sadly at the moment it can only be conveniently used to override styles in a form-wide manner. What’s missing is a way to locally merge in specific styles via the UI Schema. In the much newer vue-vanilla renderer set we consequently implemented this approach and made sure that there are no hard coded styles.

What we need is an overhaul of the React Vanilla renderer set to:

  • Remove all hard coded styles
  • Allow to configure classes for every single rendered element
  • Allow to merge in “local” classes via the UI Schema

For this we either need a professional support client to sponsor this topic or a high quality community contribution.

Regarding the findStyleAsClassName: Sadly this method is not exposed to the outside. However the getStyleAsClassName is exposed and can be used instead.

4

Ok - thanks for your feedback. I am able to continue with my own custom control-renderer to solve my requirements. Have you seen my Pullrequest: Vanilla Renderer Radio/Checkbox: add Option for vertical/horizontal layout by rsoika · Pull Request #2104 · eclipsesource/jsonforms · GitHub