library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-10-17 09:04:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add Reset button

Browse Source
This commit is contained in:
Jeremy Thomas 2024-06-25 13:48:53 +01:00
parent 0c9ae61698
commit 2cc6593269
3 changed files with 42 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
docs/_react/bulma-customizer/src/App.jsx
View File

@ -49,7 +49,14 @@ function App() {
getVar: (id) => {
return context.cssvars[id];
},
updateVar: (id, newValue) => {
updateVar: (id, newValue, unit) => {
const computedValue = `${newValue}${unit}`;
document.documentElement.style.setProperty(
`--bulma-${id}`,
computedValue,
);
setContext((context) => {
return {
...context,
@ -57,7 +64,7 @@ function App() {
...context.cssvars,
[id]: {
...context.cssvars[id],
value: newValue,
current: newValue,
},
},
};
@ -66,8 +73,6 @@ function App() {
};
const [context, setContext] = useState(initialContext);
console.log("ZLOG context", context);
useEffect(() => {
const rootStyle = window.getComputedStyle(document.documentElement);

20
docs/_react/bulma-customizer/src/components/Color.jsx
View File

@ -11,7 +11,7 @@ function Color({ color }) {
// const [saturation, setSaturation] = useState(s.start);
// const [lightness, setLightness] = useState(l.start);
const { cssvars } = useContext(CustomizerContext);
const { cssvars, updateVar } = useContext(CustomizerContext);
const hName = `${color}-h`;
const sName = `${color}-s`;
const lName = `${color}-l`;
@ -28,15 +28,21 @@ function Color({ color }) {
const handleReset = (event) => {
event.preventDefault();
document.documentElement.style.removeProperty(`--bulma-${hName}`);
document.documentElement.style.removeProperty(`--bulma-${sName}`);
document.documentElement.style.removeProperty(`--bulma-${lName}`);
updateVar(h.id, h.start, h.unit);
updateVar(s.id, s.start, s.unit);
updateVar(l.id, l.start, l.unit);
// document.documentElement.style.removeProperty(`--bulma-${hName}`);
// document.documentElement.style.removeProperty(`--bulma-${sName}`);
// document.documentElement.style.removeProperty(`--bulma-${lName}`);
};
if (!h) {
return;
}
const isDisabled =
h.current === h.start && s.current === s.start && l.current === l.start;
return (
<div className={cn.main} style={mainStyle}>
<div className={cn.side}>
@ -45,7 +51,11 @@ function Color({ color }) {
<p>{name}</p>
</div>
<button className="button is-small" onClick={handleReset}>
<button
className="button is-small"
onClick={handleReset}
disabled={isDisabled}
>
Reset
</button>
</div>

31
docs/_react/bulma-customizer/src/components/Slider.jsx
View File

@ -27,7 +27,7 @@ const valueToX = (value, width, min, max) => {
function Slider({ id, color, kind }) {
const { cssvars, updateVar } = useContext(CustomizerContext);
const { start, current, unit } = cssvars[id];
const { start, unit, current } = cssvars[id];
const [min, max] = RANGES[kind];
const sliderRef = useRef(null);
@ -52,26 +52,31 @@ function Slider({ id, color, kind }) {
setMoving(false);
};
useEffect(() => {
const computedValue = `${current}${unit}`;
// useEffect(() => {
// const computedValue = `${current}${unit}`;
if (current === start) {
document.documentElement.style.removeProperty(`--bulma-${id}`);
} else {
document.documentElement.style.setProperty(
`--bulma-${id}`,
computedValue,
);
}
}, [current, id, start, unit]);
// if (current === start) {
// document.documentElement.style.removeProperty(`--bulma-${id}`);
// } else {
// document.documentElement.style.setProperty(
// `--bulma-${id}`,
// computedValue,
// );
// }
// }, [current, id, start, unit]);
useEffect(() => {
const slider = sliderRef.current;
const sliderRect = slider.getBoundingClientRect();
const final = xToValue(x, sliderRect.width, min, max);
updateVar(id, final);
updateVar(id, final, unit);
}, [id, min, max, updateVar, unit, x]);
useEffect(() => {
const newX = valueToX(current, 240, min, max);
setX(newX);
}, [min, max, current]);
useEffect(() => {
const docMouseMove = (event) => {
if (!isMoving || !sliderRef.current || !handleRef.current) {