Merge pull request #48 from concord-consortium/187369359-add-space-pl…

…aceholder feat: Show (space) as placeholder when delimiter is a space [PT-187369359]
concord-consortium · Apr 8, 2024 · 98f24ef · 98f24ef
2 parents fc4c3ec + 43222f5
commit 98f24ef
Showing 1 changed file with 5 additions and 2 deletions.
diff --git a/src/components/app.tsx b/src/components/app.tsx
@@ -301,6 +301,9 @@ export const App = () => {
     const onPlayClick = generationMode === "playing"
       ? handlePause
       : (generationMode === "paused" ? handleResume : handlePlay);
+    const delimiterIsSpace = delimiter === " ";
+    const delimiterValue = delimiterIsSpace ? "" : delimiter;
+    const delimiterPlaceholder = delimiterIsSpace ? "(space)" : "(none)";
 
     return (
       <div className="generate">
@@ -328,8 +331,8 @@ export const App = () => {
               <label>Delimiter:</label>
               <input className="bordered" type="text"
                 onChange={handleChangeDelimiter}
-                value={delimiter}
-                placeholder="(none)"
+                value={delimiterValue}
+                placeholder={delimiterPlaceholder}
                 maxLength={3}
                 disabled={disabled}
               />