{isCover && ( ); } function SingleScreen({ screen, answer, onSelect, totalQ }) { const isAltro = (o) => o === 'Scrivilo tu'; const selectedAltro = typeof answer === 'string' && answer.startsWith('Scrivilo tu'); const [libero, setLibero] = useState(''); return (

{screen.options.map((opt, i) => { const selected = isAltro(opt) ? selectedAltro : answer === opt; return ( {isAltro(opt) && selected && ( { setLibero(e.target.value); onSelect(e.target.value ? `Scrivilo tu: ${e.target.value}` : 'Scrivilo tu'); }} /> )} ); })}

); } function MultiScreen({ screen, answer, answers, onToggle, onSetKey, totalQ }) { const sel = Array.isArray(answer) ? answer : []; const pieno = screen.max && sel.length >= screen.max; const aiuto = screen.max ? `Scegline al massimo ${NUMERI[screen.max] || screen.max}` : 'Puoi selezionarne più di una'; return (

{screen.options.length > 2 && !screen.aiutoNelTitolo &&

{aiuto}

}

7 ? ' mtp-options-lunga' : ''}`}> {screen.options.map((opt, i) => { const on = sel.includes(opt); const spento = pieno && !on; return ( {screen.altroId && opt === 'Altro' && on && ( onSetKey(screen.altroId, v)} /> )} ); })}

); } function TextScreen({ screen, answer, onSet, totalQ }) { const ref = useRef(null); useEffect(() => { const t = setTimeout(() => ref.current && ref.current.focus(), 320); return () => clearTimeout(t); }, [screen.id]); return (

{screen.singleLine ? ( onSet(e.target.value)} /> ) : (

onSet(e.target.value)}
        />
      )}
    </div>
  );
}

// Il campo di "Altro" sta in fondo a una lista di nove voci: sul telefono
// nasce sotto la barra Avanti, dove non si vede. Avanti resta spento senza
// che si capisca perche'. Appena compare la schermata scorre fino a lui.
function AltroInput({ value, onChange }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    el.focus({ preventScroll: true });
    el.scrollIntoView({ block: 'center', behavior: 'smooth' });
  }, []);
  return (
    <input
      ref={ref}
      className="mt-altro-input"
      type="text"
      placeholder="Quale?"
      value={value}
      onChange={(e) => onChange(e.target.value)}
    />
  );
}

// Cosa e quanto sulla stessa schermata: la cifra senza l'oggetto era la
// vecchia domanda 22, che non si sapeva a cosa riferire.
function SpesaScreen({ screen, answer, onSet, totalQ }) {
  const ref = useRef(null);
  const val = answer || { testo: '', euro: '' };
  useEffect(() => {
    const t = setTimeout(() => ref.current && ref.current.focus(), 320);
    return () => clearTimeout(t);
  }, [screen.id]);
  return (
    <div className="mt-screen mt-screen-q">
      <QHead screen={screen} totalQ={totalQ} />
      <textarea
        ref={ref}
        className="mt-textarea"
        rows={2}
        placeholder="Es. la traduzione di un bando, che prima mandavamo fuori…"
        value={val.testo}
        onChange={(e) => onSet({ ...val, testo: e.target.value })}
      />
      <div className="mtp-num-row mtp-num-row-inline">
        <input
          className="mtp-num mtp-num-sm mtp-num-euro"
          type="number"
          min="0"
          inputMode="numeric"
          placeholder="0"
          value={val.euro}
          onChange={(e) => onSet({ ...val, euro: e.target.value })}
        />
        <span className="mtp-suffix">euro in tutto, anche a spanne. Se non lo sai, lascia vuoto</span>
      </div>
    </div>
  );
}

function RatingScreen({ screen, answer, onSet, totalQ }) {
  return (
    <div className="mt-screen mt-screen-q">
      <QHead screen={screen} totalQ={totalQ} />
      <div className="mtp-rating">
        {[1, 2, 3, 4, 5].map((n) => (
          <button
            key={n}
            type="button"
            className={`mtp-star ${answer === n ? 'is-selected' : ''} ${answer >= n ? 'is-filled' : ''}`}
            onClick={() => onSet(n)}
          >
            {n}
          </button>
        ))}
      </div>
      <div className="mtp-rating-legend">
        <span>1 · non mi è servita</span>
        <span>5 · mi ha cambiato il lavoro</span>
      </div>
    </div>
  );
}

window.MartesPost = MartesPost;

Questo link non funziona.

{screen.title} {screen.accento && {screen.accento}} {screen.coda} {screen.optional && · opzionale}

{screen.title}