feat: add new mui formik color picker component #231
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,111 @@ | ||
| import React, { useEffect, useRef, useState } from "react"; | ||
| import PropTypes from "prop-types"; | ||
| import { Box, IconButton, InputAdornment, TextField } from "@mui/material"; | ||
| import ClearIcon from "@mui/icons-material/Clear"; | ||
| import { useField } from "formik"; | ||
| import { DEBOUNCE_WAIT_150 } from "../../../utils/constants"; | ||
|
|
||
| const MuiFormikColorInput = ({ name, placeholder = "Select a color", ...rest }) => { | ||
| const [field, meta, helpers] = useField(name); | ||
| const [hasValue, setHasValue] = useState(Boolean(field.value)); | ||
| const [localValue, setLocalValue] = useState(field.value || "#000000"); | ||
|
coderabbitai[bot] marked this conversation as resolved.
Collaborator
There was a problem hiding this comment. [HIGH] Default
Suggested fix: also seed Formik on mount when useEffect(() => { if (!field.value) helpers.setValue("#000000"); }, []);or render the swatch only when
Contributor
Author
There was a problem hiding this comment. The color picker would pick a default color if the user don't interact with the component. It looks like this contradicts #231 (comment).
Contributor
Author
There was a problem hiding this comment. PR updated with changes to display a placeholder if not value is selected and allow to clean value. 
|
||
| const debounceRef = useRef(null); | ||
|
Collaborator
There was a problem hiding this comment. [MEDIUM] No re-sync with external
Suggested fix: useEffect(() => {
if (field.value !== localValue) setLocalValue(field.value || "#000000");
}, [field.value]);(guard against overwriting in-flight typing if needed.) [LOW] No debounce cleanup on unmount. A pending useEffect(() => () => { if (debounceRef.current) clearTimeout(debounceRef.current); }, []); |
||
|
|
||
| useEffect(() => { | ||
| setHasValue(Boolean(field.value)); | ||
| if (field.value && field.value !== localValue) setLocalValue(field.value); | ||
| }, [field.value]); | ||
|
|
||
| useEffect(() => () => { | ||
| if (debounceRef.current) clearTimeout(debounceRef.current); | ||
| }, []); | ||
|
coderabbitai[bot] marked this conversation as resolved.
|
||
|
|
||
| const handleChange = (e) => { | ||
| const value = e.target.value; | ||
| setLocalValue(value); | ||
| setHasValue(true); | ||
| if (debounceRef.current) clearTimeout(debounceRef.current); | ||
| debounceRef.current = setTimeout(() => { | ||
| helpers.setValue(value); | ||
| debounceRef.current = null; | ||
| }, DEBOUNCE_WAIT_150); | ||
| }; | ||
|
|
||
| const handleBlur = (e) => { | ||
| field.onBlur(e); | ||
| helpers.setTouched(true); | ||
| if (debounceRef.current) { | ||
| clearTimeout(debounceRef.current); | ||
| debounceRef.current = null; | ||
| helpers.setValue(hasValue ? localValue : ""); | ||
| } | ||
| }; | ||
|
|
||
| const handleClear = (e) => { | ||
| e.stopPropagation(); | ||
| if (debounceRef.current) { | ||
| clearTimeout(debounceRef.current); | ||
| debounceRef.current = null; | ||
| } | ||
| setHasValue(false); | ||
| helpers.setValue(""); | ||
| helpers.setTouched(true); | ||
| }; | ||
|
coderabbitai[bot] marked this conversation as resolved.
|
||
|
|
||
| return ( | ||
| <Box sx={{ position: "relative", width: "100%" }}> | ||
| <TextField | ||
| type="color" | ||
| name={field.name} | ||
| value={localValue} | ||
| onChange={handleChange} | ||
| onBlur={handleBlur} | ||
| error={meta.touched && Boolean(meta.error)} | ||
| helperText={meta.touched && meta.error} | ||
| fullWidth | ||
| InputProps={hasValue ? { | ||
| endAdornment: ( | ||
| <InputAdornment position="end"> | ||
| <IconButton size="small" onClick={handleClear} edge="end" disableRipple> | ||
| <ClearIcon fontSize="small" /> | ||
| </IconButton> | ||
| </InputAdornment> | ||
| ), | ||
| } : undefined} | ||
| sx={{ | ||
| "& input[type='color']::-webkit-color-swatch-wrapper": { padding: "2px" }, | ||
| }} | ||
| {...rest} | ||
| /> | ||
| {!hasValue && ( | ||
| <Box | ||
| sx={{ | ||
| position: "absolute", | ||
| top: 2, | ||
| left: 2, | ||
| right: 2, | ||
| bottom: 2, | ||
| borderRadius: "3px", | ||
| bgcolor: "background.paper", | ||
| pointerEvents: "none", | ||
| display: "flex", | ||
| alignItems: "center", | ||
| px: "14px", | ||
| gap: 1, | ||
| }} | ||
| > | ||
| <Box component="span" sx={{ color: "text.disabled" }}> | ||
| {placeholder} | ||
| </Box> | ||
| </Box> | ||
| )} | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| MuiFormikColorInput.propTypes = { | ||
| name: PropTypes.string.isRequired, | ||
| placeholder: PropTypes.string | ||
| }; | ||
|
|
||
| export default MuiFormikColorInput; | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[MEDIUM] Pre-existing
multiplevsisMultidual-prop divergence (worth fixing while editing this file).multiple(defaultfalse, line 35) drives thehandleChangevalue-shape branch (single vs array).multiple={isMulti}(further down) is what's passed to MUIAutocomplete.A consumer passing only
isMulti={true}(withoutmultiple={true}) gets multi-select UI with single-value Formik writes → array/object collisions on submit. The newpropTypesblock cements this two-name API into the public surface.Suggested fix: collapse to one prop (
multiple), or alias one to the other in destructuring (multiple = isMulti), and update propTypes accordingly.