Using ClojureScript, how to customize the ValueLabel in slider component of material-ui? - material-ui

Question

In here, there is an example showing how to do the customization of ValueLabel by using javascript.
import React from "react";
import { withStyles, makeStyles } from "#material-ui/core/styles";
import Typography from "#material-ui/core/Typography";
import Slider from "#material-ui/core/Slider";
import ValueLabel from "#material-ui/core/Slider/ValueLabel";
const StyledValueLabel = withStyles({
offset: {
top: -28,
left: props => props.index === 0 ? "calc(-50% + -20px)" : "calc(-50% + 12px)"
},
circle: {
transform: props => props.index === 0 ? "rotate(-90deg)" : "rotate(0deg)"
},
label: {
transform: props => props.index === 0 ? "rotate(90deg)" : "rotate(0deg)"
}
})(ValueLabel);
const useStyles = makeStyles({
root: {
width: 300
}
});
const MySlider = withStyles({
root: {
color: "#3880ff",
height: 2,
padding: "15px 0"
},
track: {
height: 4
},
thumb: {
background: "transparent",
"&:focus,&:hover,&$active": {
boxShadow: "inherit"
}
},
rail: {
height: 4,
opacity: 0.5,
backgroundColor: "#bfbfbf"
},
mark: {
backgroundColor: "#bfbfbf",
height: 8,
width: 1,
marginTop: -2
}
})(Slider);
function valuetext(value) {
return `${value}°C`;
}
export default function RangeSlider() {
const classes = useStyles();
const [value] = React.useState([31, 37]);
return (
<div className={classes.root}>
<Typography id="range-slider" gutterBottom>
Temperature range
</Typography>
<MySlider
defaultValue={value}
valueLabelDisplay="on"
ValueLabelComponent={StyledValueLabel}
aria-labelledby="range-slider"
getAriaValueText={valuetext}
/>
</div>
);
}
I tried to changed it to the ClojureScript version, but it did not work.
(ns XXXX
(:require [reagent-material-ui.components :as mui]
[reagent.core :as reagent]
[reagent-material-ui.styles :as styles]
["#material-ui/core/Slider/ValueLabel" :as js-vl]))
...
(let [vlb (styles/with-styles {:circle {:width 40 :height 40}}
(reagent/adapt-react-class (.-default js-vl)))]
[mui/slider
{:valuelabelcomponent vlb}])
I got console error like:
Warning: Invalid value for prop `valuelabelcomponent` on <span> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details, see https://reactjs.org/link/attribute-behavior
at span
at eval (http://localhost:5555/ui/cljs-runtime/module$node_modules$$material_ui$core$esm$Slider$Slider.js:16:209)
at WithStyles(ForwardRef) (http://localhost:5555/ui/cljs-runtime/module$node_modules$$material_ui$styles$withStyles$withStyles.js:4:435)
at div

Answer 1

First of all, I think this type of question is better suited for the Clojureverse forum because you have a better chance of reaching the Clojure community there. Also, I think there are ways to improve your original question. For example: explain what exactly you were trying to do in your example but didn't work? (Sorry for picking on this but it really doesn't make sense to me to expect 30 lines of JSX and 4 lines of Clojure to work the same way. They must be different.)
Issues
To have a complete answer, let's start with the issues I noticed in your Clojure snippet:
(The warnings aren't errors. However they might be closely related to errors. 😉)
The capitalization of the props. The correct keyword for ValueLabelComponent props is :ValueLabelComponet. Reagent is a thin wrapper around React and it converts react names into Clojure keywords directly without munging the names.
The usage of reagent-material-ui.styles/with-styles. From its doc-string:
Takes a styles-generating function or a styles object.
Returns a higher-order component that wraps another component and adds a :classes prop to it.
Note: input component has to take all its props (including children) in a single map.
The difference between React component and Reagent component. Here's a great read from the reagent documentation. Although it's kind-of deceivable how similar they are, they aren't. Especially when you are doing a lot of interop with an externed React library.
Example to customize ValueLabel for MaterialUI Slider in ClojureScript
I put together this example illustrating how to put the pieces together without solving everything for you, assuming your goal is to translate every bit of the JSX snippet above. I hope this is good enough for you to work out the rest.
Pay extra attention to the distinction between React component and Reagent component.
(ns example.core
(:require
[reagent-material-ui.core.slider :refer [slider]]
[reagent-material-ui.styles :as styles]
[reagent.core :as r]
[reagent.dom :as rdom]
["#material-ui/core/Slider/ValueLabel" :as MuiValueLabel]))
(def mui-value-label
(r/adapt-react-class (or (.-default MuiValueLabel)
(.-ValueLabel MuiValueLabel))))
(def with-my-styles
(styles/with-styles {:offset {:top 50 :left 50}}))
(defn styled-value-label
[props]
[(with-my-styles mui-value-label) props])
(defn main []
[slider
{:defaultValue [31 37]
:valueLabelDisplay "on"
:ValueLabelComponent (r/reactify-component styled-value-label)}])
;; Something that renders the component like:
;; (rdom/render [main] (js/document.getElementById "app"))
Result
The value labels are offset by 50px down and 50px right:
Feel free to comment on my answer so I can make edits to it.
Cheers!