1
export const Labels = ({ id, content, color }) => {
  const [changeColor, setChangeColor] = useState(false);

  const hanldeChange = () => {};

  return (
    <>
      <div className="px-3 border-2 border-blur-lg flex justify-between m-5 rounded-md">
        <div className="flex py-3">
          <BlockColor color={color} />
          <input
            type="text"
            id="txtLabel"
            name="txtLabel"
            className="text-base ring-white focus:ring-transparent mx-3 text-gray-700 outline-none"
            value={content}
            onChange={hanldeChange}
          />
        </div>
        <div className="flex py-3">
          <button className="mx-2">
            <img
              src={`./assets/Pantone.svg`}
              alt="New Label"
              onClick={() => setChangeColor(!changeColor)}
            />
          </button>
          <button className="mx-3">
            <img src={`./assets/Delete.svg`} alt="Delete" />
          </button>
          <ModalColor
            changeColorState={changeColor}
            setChangeColorState={setChangeColor}
          />
        </div>
      </div>
    </>
  );
};

Es un componente modal que recibe 3 propiedades, id, contenido y color. esto se genera de forma dinamica y cada "label" tiene un id, contenido y color. entonces, cuando presionan un boton este dispara otro modal que presenta los colores disponibles. Cada vez que hacen click sobre el boton para cambiar el color la venatana se abre y si van a otro label y presionan otra vez se abre una nueva lo que quiero saber es como hacer para que se cuando se abre una ventana modal para seleccionar el color, y se encuentra abierta otra ventana modal para seleccionar un color esta se cierre.

export const ModalColor = ({ changeColorState, setChangeColorState }) => {


    const [blockColor, setBlockColor] = useState("#409FFF");

    const handleColorChange = (e) => {
         setBlockColor(e.target.value);
        setChangeColorState(false);
    };

    return (
        <>
            {changeColorState && (
                <div className="container absolute bg-white -right-2 top-auto mt-7 shadow-lg border-2 w-64 m-5 rounded-md overflow-x-hidden">
                    <p className="mx-2 text-gray-700 font-medium">Change Color</p>
                    <div className="mx-3 grid grid-cols-5 gap-4 my-2 rounded-full">
                        <input
                            type="radio"
                            className="cursor-pointer form-radio h-6 w-6 text-rojo"
                            value="#FD7972"
                            checked
                            readOnly
                            onClick={handleColorChange}
                        />

                        <input
                            type="radio"
                            value="#FE9F5E"
                            checked
                            readOnly
                            onClick={handleColorChange}
                            className="cursor-pointer form-radio h-6 w-6 text-naranja"
                        />

                        <input
                            type="radio"
                            value="#FFD454"
                            checked
                            readOnly
                            onClick={handleColorChange}
                            className="cursor-pointer form-radio h-6 w-6 text-amarillo"
                        />

                    </div>
                    <p>{blockColor}</p>
                </div>
            )}
        </>
    );
};

introducir la descripción de la imagen aquí

0

2 respuestas 2

1

Se debe trabajar con el id de cada objeto Label.

Suponiendo que se puede acceder y modificar la estructura del array Labels en el parent component, se podría agregar una nueva propiedad hide para cada objeto Labels:

  //Pseudo estructura Labels con nueva propiedad hide
  [{"id":1 ,"hide":false},
  {"id":2,"hide":false},
  {"id":3,"hide":false},
  {"id":4,"hide":false}]

Una vez que se obtenga la modificación de dicha estructura, el estado de Labels se puede manejar con React:

const [labels, setLabels] = useState([{"id":1 ,"hide":false},
  {"id":2,"hide":false},
  {"id":3,"hide":false},
  {"id":4,"hide":false}]);

Ocultar ModalColor por id

A continuación, el componente Labels se debe estar armando más o menos de la siguiente forma desde su parent component:

    {
      labels.map((elem) => {
       return <Labels key={elem.id} id={elem.id} hide={elem.hide} handleHideModal={handleHideModal} />
      })
    }

Aquí, se propagan dos nuevas props, hide que es la propiedad que se agrego al array Labels y handleHideModal, un método que servirá para modificar el valor de hide.

Después, el método handleHideModal espera recibir el id de cada Labels->label, con ese dato se modifica el estado de Labels, en especifico el valor de hide para el id recibido.

Nótese que se dispara un re render para devolver el componente nuevamente con el nuevo estado para Labels:

    function handleHideModal(id){
          
          let labelsCopy = labels.map((elem) => {
              if(elem.id === id){
                elem.hide = true;
              } else {
                elem.hide = false;
              }
              return elem;
          })
          //re render
          setLabels(labelsCopy);
    }

Luego, en el componente Labels, se captura el evento handleColorModal con su respectivo id para cada Labels->Label:

<button onClick={()=>handleColorModal(props.id)}>Set color</button>

Finalmente, se propaga hide hacia el componente ModalColor desde su correspondiente Label Component (por id) y se usa un operador ternario para validar cuando se oculta y cuando se muestra:

function ModalColor({id, hide}){
    return (!hide) ? null : <p>Muestra modal de Change Colors</p>;
}

Demo:

function App(){
  const [labels, setLabels] = React.useState([{"id":1 ,"hide":false},
  {"id":2,"hide":false},
  {"id":3,"hide":false},
  {"id":4,"hide":false}]);

  function handleHideModal(id){
      
      let labelsCopy = labels.map((elem) => {
          if(elem.id === id){
            elem.hide = true;
          } else {
            elem.hide = false;
          }
          return elem;
      })
      
      setLabels(labelsCopy);
  }
  
  return (
    <div>
    {
      labels.map((elem) => {
       return <Labels key={elem.id} id={elem.id} hide={elem.hide} handleHideModal={handleHideModal} />
      })
    }
    </div>
  );
}

function Labels(props){

  function handleColorModal(id){
    props.handleHideModal(id);
  }
  
  return (
    <div>
    <p>Modal {props.id} </p>
    <button onClick={()=>handleColorModal(props.id)}>Set color</button>
    <ModalColor
            id={props.id}
            hide={props.hide}
          />
    </div>
  )
}

function ModalColor({id, hide}){
    console.log(`id:${id},hide:${hide}`);
    return (!hide) ? null : <p>Mostrar modal change color</p>;
}


ReactDOM.render(<App/>, document.getElementById('root'))
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>

<div id="root"></div>

0

Puede hacer una condición o un setState booleano en el cual setees show: true cuando quieras que muestre y luego show: false cuando haya terminado la accion del modal. En este link tienes mas info https://www.pluralsight.com/guides/how-to-open-and-close-react-bootstrap-modal-programmatically,

Espero te sirva, saludos!

1
  • Bienvenid@ a Stack Overflow en español, te recomiendo leer Cómo responder para que mejores tu respuesta y agregues más detalles ya que por el momento parece ser una opinión o sugerencia.
    – MR Dev
    Commented el 6 ago. 2021 a las 14:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.