Skip to content

feat: prefix choices with an index #118

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Mar 29, 2021
Merged

feat: prefix choices with an index #118

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ab1dd75
feat: prefix choices with an index
marcelltoth Mar 29, 2021
b82c960
test: update
marcelltoth Mar 29, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 21 additions & 21 deletions src/__tests__/__snapshots__/index.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -379,8 +379,8 @@ exports[`HTML Output given anyOf combiner placed next to allOf given allOf mergi
<input type=\\"text\\" style=\\"font-size: 16px\\" />
<label>
<select size=\\"2\\">
<option value=\\"0\\">Admin</option>
<option value=\\"1\\">Editor</option>
<option value=\\"0\\">1. Admin</option>
<option value=\\"1\\">2. Editor</option>
</select>
</label>
</div>
Expand All @@ -394,7 +394,7 @@ exports[`HTML Output given anyOf combiner placed next to allOf given allOf mergi
type=\\"button\\"
class=\\"hover:sl-border-input focus:sl-border-primary disabled:sl-opacity-50\\"
>
<div><div>Admin</div></div>
<div><div>1. Admin</div></div>
<div></div>
</button>
</div>
Expand Down Expand Up @@ -526,8 +526,8 @@ exports[`HTML Output given array with oneOf containing items, should merge it co
<input type=\\"text\\" style=\\"font-size: 16px\\" />
<label>
<select size=\\"2\\">
<option value=\\"0\\">array of strings</option>
<option value=\\"1\\">array of numbers</option>
<option value=\\"0\\">1. array of strings</option>
<option value=\\"1\\">2. array of numbers</option>
</select>
</label>
</div>
Expand All @@ -541,7 +541,7 @@ exports[`HTML Output given array with oneOf containing items, should merge it co
type=\\"button\\"
class=\\"hover:sl-border-input focus:sl-border-primary disabled:sl-opacity-50\\"
>
<div><div>array of strings</div></div>
<div><div>1. array of strings</div></div>
<div></div>
</button>
</div>
Expand Down Expand Up @@ -680,8 +680,8 @@ exports[`HTML Output given oneOf combiner placed next to allOf given allOf mergi
<input type=\\"text\\" style=\\"font-size: 16px\\" />
<label>
<select size=\\"2\\">
<option value=\\"0\\">Admin</option>
<option value=\\"1\\">Editor</option>
<option value=\\"0\\">1. Admin</option>
<option value=\\"1\\">2. Editor</option>
</select>
</label>
</div>
Expand All @@ -695,7 +695,7 @@ exports[`HTML Output given oneOf combiner placed next to allOf given allOf mergi
type=\\"button\\"
class=\\"hover:sl-border-input focus:sl-border-primary disabled:sl-opacity-50\\"
>
<div><div>Admin</div></div>
<div><div>1. Admin</div></div>
<div></div>
</button>
</div>
Expand Down Expand Up @@ -2605,8 +2605,8 @@ exports[`HTML Output should match combiners/allOfs/with-type.json 1`] = `
<input type=\\"text\\" style=\\"font-size: 16px\\" />
<label>
<select size=\\"2\\">
<option value=\\"0\\">BugExample</option>
<option value=\\"1\\">BugExample</option>
<option value=\\"0\\">1. BugExample</option>
<option value=\\"1\\">2. BugExample</option>
</select>
</label>
</div>
Expand All @@ -2620,7 +2620,7 @@ exports[`HTML Output should match combiners/allOfs/with-type.json 1`] = `
type=\\"button\\"
class=\\"hover:sl-border-input focus:sl-border-primary disabled:sl-opacity-50\\"
>
<div><div>BugExample</div></div>
<div><div>1. BugExample</div></div>
<div></div>
</button>
</div>
Expand Down Expand Up @@ -2776,8 +2776,8 @@ exports[`HTML Output should match combiners/oneof-with-array-type.json 1`] = `
<input type=\\"text\\" style=\\"font-size: 16px\\" />
<label>
<select size=\\"2\\">
<option value=\\"0\\">array of objects</option>
<option value=\\"1\\">array of objects</option>
<option value=\\"0\\">1. array of objects</option>
<option value=\\"1\\">2. array of objects</option>
</select>
</label>
</div>
Expand All @@ -2791,7 +2791,7 @@ exports[`HTML Output should match combiners/oneof-with-array-type.json 1`] = `
type=\\"button\\"
class=\\"hover:sl-border-input focus:sl-border-primary disabled:sl-opacity-50\\"
>
<div><div>array of objects</div></div>
<div><div>1. array of objects</div></div>
<div></div>
</button>
</div>
Expand Down Expand Up @@ -2873,8 +2873,8 @@ exports[`HTML Output should match combiners/oneof-within-array-item.json 1`] = `
<input type=\\"text\\" style=\\"font-size: 16px\\" />
<label>
<select size=\\"2\\">
<option value=\\"0\\">array of A-s</option>
<option value=\\"1\\">array of B-s</option>
<option value=\\"0\\">1. array of A-s</option>
<option value=\\"1\\">2. array of B-s</option>
</select>
</label>
</div>
Expand All @@ -2888,7 +2888,7 @@ exports[`HTML Output should match combiners/oneof-within-array-item.json 1`] = `
type=\\"button\\"
class=\\"hover:sl-border-input focus:sl-border-primary disabled:sl-opacity-50\\"
>
<div><div>array of A-s</div></div>
<div><div>1. array of A-s</div></div>
<div></div>
</button>
</div>
Expand Down Expand Up @@ -3122,8 +3122,8 @@ exports[`HTML Output should match default-schema.json 1`] = `
<input type=\\"text\\" style=\\"font-size: 16px\\" />
<label>
<select size=\\"2\\">
<option value=\\"0\\">object</option>
<option value=\\"1\\">array of integers</option>
<option value=\\"0\\">1. object</option>
<option value=\\"1\\">2. array of integers</option>
</select>
</label>
</div>
Expand All @@ -3137,7 +3137,7 @@ exports[`HTML Output should match default-schema.json 1`] = `
type=\\"button\\"
class=\\"hover:sl-border-input focus:sl-border-primary disabled:sl-opacity-50\\"
>
<div><div>object</div></div>
<div><div>1. object</div></div>
<div></div>
</button>
</div>
Expand Down
11 changes: 6 additions & 5 deletions src/components/SchemaRow/useChoices.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,18 +35,19 @@ function calculateChoiceTitle(node: SchemaNode, isPlural: boolean): string {
return 'any';
}

function makeChoice(node: SchemaNode): Choice {
function makeChoice(node: SchemaNode, index: number): Choice {
return {
type: node,
title: calculateChoiceTitle(node, false),
title: `${index + 1}. ${calculateChoiceTitle(node, false)}`,
};
}

function makeArrayChoice(node: SchemaNode): Choice {
function makeArrayChoice(node: SchemaNode, index: number): Choice {
const itemTitle = calculateChoiceTitle(node, true);
const title = itemTitle !== 'any' ? `array of ${itemTitle}` : 'array';
return {
type: node,
title: itemTitle !== 'any' ? `array of ${itemTitle}` : 'array',
title: `${index + 1}. ${title}`,
};
}

Expand All @@ -72,7 +73,7 @@ export const useChoices = (schemaNode: SchemaNode) => {
return schemaNode.children.map(makeChoice);
}
// regular node, single choice - itself
return [makeChoice(schemaNode)];
return [makeChoice(schemaNode, 0)];
}, [schemaNode]);

const defaultChoice = choices[0];
Expand Down
2 changes: 1 addition & 1 deletion src/components/shared/__tests__/Property.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ describe('Property component', () => {

const wrapper = render(schema);
expect(wrapper.html()).toMatchInlineSnapshot(
`"<div class=\\"\\"><div class=\\"sl-text-sm sl-relative\\" style=\\"margin-left: 20px;\\"><div class=\\"sl-flex\\"><div class=\\"sl-min-w-0 sl-flex-grow\\"><div class=\\"\\"><div class=\\"sl-flex sl-items-center sl-my-2\\"><div class=\\"sl-flex sl-items-center sl-text-base sl-flex-1\\"><div class=\\"sl-select sl-relative\\"><div style=\\"border: 0px; clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;\\" aria-hidden=\\"true\\"><input type=\\"text\\" tabindex=\\"-1\\" style=\\"font-size: 16px;\\"><label><select size=\\"2\\" tabindex=\\"-1\\"><option value=\\"0\\">array of strings</option><option value=\\"1\\">array of numbers</option></select></label></div><div class=\\"sl-relative\\"><button aria-haspopup=\\"listbox\\" aria-expanded=\\"false\\" aria-label=\\"Pick a type\\" id=\\"react-aria-0-3\\" aria-labelledby=\\"react-aria-0-3 react-aria-0-5\\" type=\\"button\\" class=\\"sl-button sl-w-full sl-h-sm sl-text-base sl-font-normal sl-px-1.5 sl-bg-transparent sl-text-body sl-rounded sl-border-transparent hover:sl-border-input focus:sl-border-primary disabled:sl-opacity-50\\"><div class=\\"sl-flex sl-flex-grow sl-justify-items-start sl-items-center\\"><div class=\\"sl-pr-1\\">array of strings</div></div><div class=\\"sl--mr-0.5 sl-ml-0.5\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"chevron-down\\" class=\\"svg-inline--fa fa-chevron-down fa-w-14 fa-xs sl-icon\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 448 512\\"><path fill=\\"currentColor\\" d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"></path></svg></div></button></div></div></div></div></div></div><div></div></div></div></div>"`,
`"<div class=\\"\\"><div class=\\"sl-text-sm sl-relative\\" style=\\"margin-left: 20px;\\"><div class=\\"sl-flex\\"><div class=\\"sl-min-w-0 sl-flex-grow\\"><div class=\\"\\"><div class=\\"sl-flex sl-items-center sl-my-2\\"><div class=\\"sl-flex sl-items-center sl-text-base sl-flex-1\\"><div class=\\"sl-select sl-relative\\"><div style=\\"border: 0px; clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;\\" aria-hidden=\\"true\\"><input type=\\"text\\" tabindex=\\"-1\\" style=\\"font-size: 16px;\\"><label><select size=\\"2\\" tabindex=\\"-1\\"><option value=\\"0\\">1. array of strings</option><option value=\\"1\\">2. array of numbers</option></select></label></div><div class=\\"sl-relative\\"><button aria-haspopup=\\"listbox\\" aria-expanded=\\"false\\" aria-label=\\"Pick a type\\" id=\\"react-aria-0-3\\" aria-labelledby=\\"react-aria-0-3 react-aria-0-5\\" type=\\"button\\" class=\\"sl-button sl-w-full sl-h-sm sl-text-base sl-font-normal sl-px-1.5 sl-bg-transparent sl-text-body sl-rounded sl-border-transparent hover:sl-border-input focus:sl-border-primary disabled:sl-opacity-50\\"><div class=\\"sl-flex sl-flex-grow sl-justify-items-start sl-items-center\\"><div class=\\"sl-pr-1\\">1. array of strings</div></div><div class=\\"sl--mr-0.5 sl-ml-0.5\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"chevron-down\\" class=\\"svg-inline--fa fa-chevron-down fa-w-14 fa-xs sl-icon\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 448 512\\"><path fill=\\"currentColor\\" d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"></path></svg></div></button></div></div></div></div></div></div><div></div></div></div></div>"`,
);
});

Expand Down