Fix GridTable: replace ternary chain with IIFE for cell rendering
Some checks failed
CI / go-lint (push) Has been skipped
CI / python-lint (push) Has been skipped
CI / nodejs-lint (push) Has been skipped
CI / test-go-school (push) Successful in 44s
CI / test-go-edu-search (push) Successful in 36s
CI / test-python-klausur (push) Failing after 2m28s
CI / test-python-agent-core (push) Successful in 36s
CI / test-nodejs-website (push) Successful in 31s
Some checks failed
CI / go-lint (push) Has been skipped
CI / python-lint (push) Has been skipped
CI / nodejs-lint (push) Has been skipped
CI / test-go-school (push) Successful in 44s
CI / test-go-edu-search (push) Successful in 36s
CI / test-python-klausur (push) Failing after 2m28s
CI / test-python-agent-core (push) Successful in 36s
CI / test-nodejs-website (push) Successful in 31s
Chained ternary (colored ? div : multiline ? textarea : input) caused
webpack SWC parser issues. Replaced with IIFE {(() => { if/return })()}
which is more robust and readable.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -504,7 +504,11 @@ export function GridTable({
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{/* Per-word colored display when not editing */}
|
{/* Per-word colored display when not editing */}
|
||||||
{hasColoredWords && !isSelected ? (
|
{(() => {
|
||||||
|
const cellText = cell?.text ?? ''
|
||||||
|
const isMultiLine = cellText.includes('\n')
|
||||||
|
if (hasColoredWords && !isSelected) {
|
||||||
|
return (
|
||||||
<div
|
<div
|
||||||
className={`w-full px-2 cursor-text truncate ${isBold ? 'font-bold' : 'font-normal'}`}
|
className={`w-full px-2 cursor-text truncate ${isBold ? 'font-bold' : 'font-normal'}`}
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
@@ -530,10 +534,13 @@ export function GridTable({
|
|||||||
</span>
|
</span>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
) : (cell?.text ?? '').includes('\n') ? (
|
)
|
||||||
|
}
|
||||||
|
if (isMultiLine) {
|
||||||
|
return (
|
||||||
<textarea
|
<textarea
|
||||||
id={`cell-${cellId}`}
|
id={`cell-${cellId}`}
|
||||||
value={cell?.text ?? ''}
|
value={cellText}
|
||||||
onChange={(e) => onCellTextChange(cellId, e.target.value)}
|
onChange={(e) => onCellTextChange(cellId, e.target.value)}
|
||||||
onFocus={() => onSelectCell(cellId)}
|
onFocus={() => onSelectCell(cellId)}
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
@@ -548,18 +555,20 @@ export function GridTable({
|
|||||||
onNavigate(cellId, e.shiftKey ? 'left' : 'right')
|
onNavigate(cellId, e.shiftKey ? 'left' : 'right')
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
rows={(cell?.text ?? '').split('\n').length}
|
rows={cellText.split('\n').length}
|
||||||
className={`w-full px-2 bg-transparent border-0 outline-none resize-none ${
|
className={`w-full px-2 bg-transparent border-0 outline-none resize-none ${
|
||||||
isBold ? 'font-bold' : 'font-normal'
|
isBold ? 'font-bold' : 'font-normal'
|
||||||
}`}
|
}`}
|
||||||
style={{ color: cellColor || undefined }}
|
style={{ color: cellColor || undefined }}
|
||||||
spellCheck={false}
|
spellCheck={false}
|
||||||
/>
|
/>
|
||||||
) : (
|
)
|
||||||
|
}
|
||||||
|
return (
|
||||||
<input
|
<input
|
||||||
id={`cell-${cellId}`}
|
id={`cell-${cellId}`}
|
||||||
type="text"
|
type="text"
|
||||||
value={cell?.text ?? ''}
|
value={cellText}
|
||||||
onChange={(e) => onCellTextChange(cellId, e.target.value)}
|
onChange={(e) => onCellTextChange(cellId, e.target.value)}
|
||||||
onFocus={() => onSelectCell(cellId)}
|
onFocus={() => onSelectCell(cellId)}
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
@@ -576,7 +585,7 @@ export function GridTable({
|
|||||||
spellCheck={false}
|
spellCheck={false}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
)}
|
})()}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user