Skip to content

Commit ff312f1

Browse files
kevinwang5658kevinwang5658
committed
Re-arranged UI
1 parent a14ff6c commit ff312f1

File tree

6 files changed

+91
-63
lines changed

6 files changed

+91
-63
lines changed

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@
2929
"react": "^18.2.0",
3030
"tsx": "^4.19.2",
3131
"typedoc": "^0.25.4",
32-
"typescript": "^5.3.2"
32+
"typescript": "^5.3.2",
33+
"react-devtools-core": "4.28.5"
3334
},
3435
"scripts": {
3536
"start": "ts-node-esm src/demo/overview.tsx",

‎src/Button.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export function Button(props: {
2020
}
2121
});
2222

23-
return <Box marginX={2} paddingX={1} borderStyle="round" borderColor={!isEnabled ? 'gray' : isFocused ? 'blue' : 'magenta'}>
23+
return <Box borderStyle="round" borderColor={!isEnabled ? 'gray' : isFocused ? 'blue' : 'magenta'}>
2424
<Box flexGrow={1}>
2525
<Text underline={isFocused} color={isFocused ? 'blue' : undefined}>
2626
{props.label}

‎src/Form.tsx‎

Lines changed: 64 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,20 @@ export const Form: React.FC<FormProps> = props => {
9898
if (key.escape) {
9999
focusManager.focus('0');
100100
setFocusedElement(0);
101+
return;
102+
}
103+
104+
if (input === 'a') {
105+
duplicateCurrentSection();
106+
return;
107+
}
108+
109+
if (input === 'r' && sections.length > 1) {
110+
removeCurrentSection();
111+
}
112+
113+
if (input === 's' && canSubmitForm) {
114+
onSubmitForm();
101115
}
102116
},
103117
{ isActive: !editingField }
@@ -112,7 +126,6 @@ export const Form: React.FC<FormProps> = props => {
112126

113127
setSections(newTabs);
114128
setValue([...value]);
115-
onChangeTab(currentTab + 1)
116129
}
117130

118131
const removeCurrentSection = () => {
@@ -137,66 +150,62 @@ export const Form: React.FC<FormProps> = props => {
137150
<Box width="100%" height="90%" flexDirection="column" overflowY="hidden">
138151
<FormHeader {...props} headerRef={headerRef} form={form} currentTab={currentTab} onChangeTab={onChangeTab} editingField={editingField} />
139152
<ScrollArea height={fullHeight - headerHeight} key={currentTab} isStart={focusedElement === -1} numFields={sections[currentTab].fields.length} editingMode={!!editingField}>
140-
{!editingField && (
141-
<Box flexDirection='column'>
142-
<Box marginLeft={1} marginTop={1}>
143-
<Text bold>{sections[currentTab].title}</Text>
144-
</Box>
145-
<Text>{' {'}</Text>
146-
</Box>
147-
)}
148-
<Box flexDirection="column">
149-
{currentTab > sections.length - 1
150-
? null
151-
: sections[currentTab].fields.map((field, index) => (
152-
<FormFieldRenderer
153-
id={`${index}`}
154-
field={field}
155-
key={field.name + currentTab}
156-
form={form}
157-
value={value[currentTab][field.name]}
158-
onExit={onFieldExit}
159-
onChange={v => setValueAndPropagate(currentTab, { ...value[currentTab], [field.name]: v })}
160-
onSetEditingField={setEditingField}
161-
editingField={editingField}
162-
customManagers={props.customManagers}
163-
/>
164-
))}
165-
{!editingField && (
166-
<Text>{' }'}</Text>
167-
)}
168-
</Box>
169-
{!editingField && (
170-
<Box flexDirection="row" marginTop={1}>
171-
<Box flexDirection="column" flexGrow={1} width='40%'>
172-
{!editingField && sections[currentTab].description && (
173-
<Box marginX={1} flexDirection='column'>
174-
<Text underline>Description:</Text>
175-
<DescriptionRenderer description={sections[currentTab]?.description} />
176-
{
177-
sections[currentTab].fields[focusedElement]?.description && (
178-
<Box flexDirection="column">
179-
<Text> </Text>
180-
<Text underline>{upperFirstLetter(sections[currentTab].fields[focusedElement]?.label)}:</Text>
181-
<DescriptionRenderer description={sections[currentTab].fields[focusedElement]?.description} />
182-
</Box>
183-
)
184-
}
153+
<Box flexDirection='row'>
154+
<Box flexDirection='column' width='80%'>
155+
{!editingField && (
156+
<Box flexDirection='column'>
157+
<Box marginLeft={1} marginTop={1}>
158+
<Text bold>{sections[currentTab].title}</Text>
185159
</Box>
160+
<Text>{' {'}</Text>
161+
</Box>
162+
)}
163+
<Box flexDirection="column">
164+
{currentTab > sections.length - 1
165+
? null
166+
: sections[currentTab].fields.map((field, index) => (
167+
<FormFieldRenderer
168+
id={`${index}`}
169+
field={field}
170+
key={field.name + currentTab}
171+
form={form}
172+
value={value[currentTab][field.name]}
173+
onExit={onFieldExit}
174+
onChange={v => setValueAndPropagate(currentTab, { ...value[currentTab], [field.name]: v })}
175+
onSetEditingField={setEditingField}
176+
editingField={editingField}
177+
customManagers={props.customManagers}
178+
/>
179+
))}
180+
{!editingField && (
181+
<Text>{' }'}</Text>
186182
)}
187183
</Box>
188-
<Box flexDirection="column" flexGrow={1} width='40%'>
189-
<Box flexDirection="row-reverse">
190-
<Button label="Add (duplicate)" id={'addButton'} onClicked={() => duplicateCurrentSection()}/>
191-
</Box>
192-
<Box flexDirection="row-reverse">
193-
<Button label="Remove" id={'removeButton'} isEnabled={sections.length > 1} onClicked={() => removeCurrentSection()}/>
194-
</Box>
195-
<Box flexDirection="row-reverse">
196-
<SubmitButton canSubmit={canSubmitForm} onSubmit={onSubmitForm}/>
184+
</Box>
185+
186+
<Box flexDirection="column">
187+
{!editingField && sections[currentTab].description && (
188+
<Box marginX={1} marginTop={1} flexDirection='column'>
189+
<Text underline>Description:</Text>
190+
<DescriptionRenderer description={sections[currentTab]?.description} />
197191
</Box>
192+
)}
193+
</Box>
194+
195+
</Box>
196+
{!editingField && (
197+
<Box flexDirection='column' marginTop={1}>
198+
<Box flexDirection="row">
199+
<Button label="[A]dd resource" id={'addButton'} onClicked={() => duplicateCurrentSection()} margin={0} padding={0}/>
200+
<Button label="[R]emove resource" id={'removeButton'} isEnabled={sections.length > 1} onClicked={() => removeCurrentSection()} margin={0} padding={0}/>
201+
<SubmitButton canSubmit={canSubmitForm} onSubmit={onSubmitForm}/>
198202
</Box>
203+
<Text dimColor color='gray'> Up/down: navigate options.</Text>
204+
<Text dimColor color='gray'> Left/right: navigate between resources.</Text>
205+
<Text dimColor color='gray'> Enter: select or edit</Text>
199206
</Box>
207+
208+
// </Box>
200209
)}
201210
</ScrollArea>
202211
</Box>

‎src/FormFieldRenderer.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -75,11 +75,11 @@ export const FormFieldRenderer: React.FC<FormFieldRendererProps<any>> = props =>
7575
</Text>
7676
</Text>
7777
</Box>
78-
{isFocused && (
79-
<Box>
80-
<Text>Press enter to edit</Text>
81-
</Box>
82-
)}
78+
{/*{isFocused && (*/}
79+
{/* <Box>*/}
80+
{/* <Text>Press enter to edit</Text>*/}
81+
{/* </Box>*/}
82+
{/*)}*/}
8383
</Box>
8484
);
8585
} else {

‎src/SubmitButton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export const SubmitButton: React.FC<{
1616
<Box marginRight={2}>
1717
<Box borderStyle={'round'} borderColor={!props.canSubmit ? 'gray' : isFocused ? 'blue' : 'green'} paddingX={2}>
1818
<Text color={!props.canSubmit ? 'gray' : isFocused ? 'blue' : 'green'} bold={true} underline={isFocused}>
19-
{props.canSubmit ? 'Submit' : 'Cannot submit yet'}
19+
{props.canSubmit ? '[S]ubmit' : 'Cannot submit yet'}
2020
</Text>
2121
</Box>
2222
</Box>

‎yarn.lock‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -662,6 +662,14 @@ publish-fast@^0.0.20:
662662
semver "^7.3.8"
663663
simple-git "^3.17.0"
664664

665+
react-devtools-core@^4.19.1, react-devtools-core@4.28.5:
666+
version "4.28.5"
667+
resolved "https://registry.npmjs.org/react-devtools-core/-/react-devtools-core-4.28.5.tgz"
668+
integrity sha512-cq/o30z9W2Wb4rzBefjv5fBalHU0rJGZCHAkf/RHSBWSSYwh8PlQTqqOJmgIIbBtpj27T6FIPXeomIjZtCNVqA==
669+
dependencies:
670+
shell-quote "^1.6.1"
671+
ws "^7"
672+
665673
react-reconciler@^0.29.0:
666674
version "0.29.2"
667675
resolved "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.29.2.tgz"
@@ -714,6 +722,11 @@ shebang-regex@^3.0.0:
714722
resolved "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz"
715723
integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
716724

725+
shell-quote@^1.6.1:
726+
version "1.8.2"
727+
resolved "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.2.tgz"
728+
integrity sha512-AzqKpGKjrj7EM6rKVQEPpB288oCfnrEIuyoT9cyF4nmGa7V8Zk6f7RRqYisX8X9m+Q7bd632aZW4ky7EhbQztA==
729+
717730
shiki@^0.14.7:
718731
version "0.14.7"
719732
resolved "https://registry.npmjs.org/shiki/-/shiki-0.14.7.tgz"
@@ -893,6 +906,11 @@ wrappy@1:
893906
resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
894907
integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
895908

909+
ws@^7:
910+
version "7.5.10"
911+
resolved "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz"
912+
integrity sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==
913+
896914
ws@^8.18.0:
897915
version "8.18.0"
898916
resolved "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz"

0 commit comments

Comments
 (0)