library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +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) => { getVar: (id) => {
return context.cssvars[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) => { setContext((context) => {
return { return {
...context, ...context,
@ -57,7 +64,7 @@ function App() {
...context.cssvars, ...context.cssvars,
[id]: { [id]: {
...context.cssvars[id], ...context.cssvars[id],
value: newValue, current: newValue,
}, },
}, },
}; };
@ -66,8 +73,6 @@ function App() {
}; };
const [context, setContext] = useState(initialContext); const [context, setContext] = useState(initialContext);
console.log("ZLOG context", context);
useEffect(() => { useEffect(() => {
const rootStyle = window.getComputedStyle(document.documentElement); 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 [saturation, setSaturation] = useState(s.start);
// const [lightness, setLightness] = useState(l.start); // const [lightness, setLightness] = useState(l.start);
const { cssvars } = useContext(CustomizerContext); const { cssvars, updateVar } = useContext(CustomizerContext);
const hName = `${color}-h`; const hName = `${color}-h`;
const sName = `${color}-s`; const sName = `${color}-s`;
const lName = `${color}-l`; const lName = `${color}-l`;
@ -28,15 +28,21 @@ function Color({ color }) {
const handleReset = (event) => { const handleReset = (event) => {
event.preventDefault(); event.preventDefault();
document.documentElement.style.removeProperty(`--bulma-${hName}`); updateVar(h.id, h.start, h.unit);
document.documentElement.style.removeProperty(`--bulma-${sName}`); updateVar(s.id, s.start, s.unit);
document.documentElement.style.removeProperty(`--bulma-${lName}`); 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) { if (!h) {
return; return;
} }
const isDisabled =
h.current === h.start && s.current === s.start && l.current === l.start;
return ( return (
<div className={cn.main} style={mainStyle}> <div className={cn.main} style={mainStyle}>
<div className={cn.side}> <div className={cn.side}>
@ -45,7 +51,11 @@ function Color({ color }) {
<p>{name}</p> <p>{name}</p>
</div> </div>
<button className="button is-small" onClick={handleReset}> <button
className="button is-small"
onClick={handleReset}
disabled={isDisabled}
>
Reset Reset
</button> </button>
</div> </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 }) { function Slider({ id, color, kind }) {
const { cssvars, updateVar } = useContext(CustomizerContext); const { cssvars, updateVar } = useContext(CustomizerContext);
const { start, current, unit } = cssvars[id]; const { start, unit, current } = cssvars[id];
const [min, max] = RANGES[kind]; const [min, max] = RANGES[kind];
const sliderRef = useRef(null); const sliderRef = useRef(null);
@ -52,26 +52,31 @@ function Slider({ id, color, kind }) {
setMoving(false); setMoving(false);
}; };
useEffect(() => { // useEffect(() => {
const computedValue = `${current}${unit}`; // const computedValue = `${current}${unit}`;
if (current === start) { // if (current === start) {
document.documentElement.style.removeProperty(`--bulma-${id}`); // document.documentElement.style.removeProperty(`--bulma-${id}`);
} else { // } else {
document.documentElement.style.setProperty( // document.documentElement.style.setProperty(
`--bulma-${id}`, // `--bulma-${id}`,
computedValue, // computedValue,
); // );
} // }
}, [current, id, start, unit]); // }, [current, id, start, unit]);
useEffect(() => { useEffect(() => {
const slider = sliderRef.current; const slider = sliderRef.current;
const sliderRect = slider.getBoundingClientRect(); const sliderRect = slider.getBoundingClientRect();
const final = xToValue(x, sliderRect.width, min, max); const final = xToValue(x, sliderRect.width, min, max);
updateVar(id, final); updateVar(id, final, unit);
}, [id, min, max, updateVar, unit, x]); }, [id, min, max, updateVar, unit, x]);
useEffect(() => {
const newX = valueToX(current, 240, min, max);
setX(newX);
}, [min, max, current]);
useEffect(() => { useEffect(() => {
const docMouseMove = (event) => { const docMouseMove = (event) => {
if (!isMoving || !sliderRef.current || !handleRef.current) { if (!isMoving || !sliderRef.current || !handleRef.current) {