Skip to content

Commit

Permalink
fix: choice naming - attempt no 2 (#156)
Browse files Browse the repository at this point in the history 
* chore: remove plurals for complex objects

* fix: remove index based choice naming

* test: update snapshots
  • Loading branch information
Marcell Toth authored Jun 25, 2021
1 parent 89b4b5e commit bae2eb0
Show file tree
Hide file tree
Showing 4 changed files with 23 additions and 24 deletions.
24 changes: 12 additions & 12 deletions src/__tests__/__snapshots__/index.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -331,7 +331,7 @@ exports[`HTML Output given anyOf combiner placed next to allOf given allOf mergi
<div style=\\"margin-left: -25px\\">
<div>
<div aria-label=\\"Pick a type\\" aria-haspopup=\\"true\\" aria-expanded=\\"false\\" id=\\"react-aria-0-2\\">
1. Admin
Admin
<div></div>
</div>
<div style=\\"padding-left: 25px\\">
Expand Down Expand Up @@ -439,7 +439,7 @@ exports[`HTML Output given array with oneOf containing items, should merge it co
<div style=\\"margin-left: -25px\\">
<div>
<div aria-label=\\"Pick a type\\" aria-haspopup=\\"true\\" aria-expanded=\\"false\\" id=\\"react-aria-0-2\\">
1. array of strings
array of strings
<div></div>
</div>
</div>
Expand Down Expand Up @@ -544,7 +544,7 @@ exports[`HTML Output given oneOf combiner placed next to allOf given allOf mergi
<div style=\\"margin-left: -25px\\">
<div>
<div aria-label=\\"Pick a type\\" aria-haspopup=\\"true\\" aria-expanded=\\"false\\" id=\\"react-aria-0-2\\">
1. Admin
Admin
<div></div>
</div>
<div style=\\"padding-left: 25px\\">
Expand Down Expand Up @@ -1165,8 +1165,8 @@ exports[`HTML Output should match arrays/of-complex-objects.json 1`] = `
<label>
<select size=\\"2\\">
<option></option>
<option value=\\"0\\">1. object</option>
<option value=\\"1\\">2. array of integers</option>
<option value=\\"0\\">object</option>
<option value=\\"1\\">array of integers</option>
</select>
</label>
</div>
Expand All @@ -1180,7 +1180,7 @@ exports[`HTML Output should match arrays/of-complex-objects.json 1`] = `
type=\\"button\\"
class=\\"active:sl-bg-canvas-100 hover:sl-border-input focus:sl-border-input active:sl-border-button disabled:sl-opacity-50\\"
>
<div><div>1. object</div></div>
<div><div>object</div></div>
<div><div></div></div>
</button>
</div>
Expand Down Expand Up @@ -2443,7 +2443,7 @@ exports[`HTML Output should match combiners/allOfs/with-type.json 1`] = `
<div style=\\"margin-left: -25px\\">
<div>
<div aria-label=\\"Pick a type\\" aria-haspopup=\\"true\\" aria-expanded=\\"false\\" id=\\"react-aria-0-2\\">
1. BugExample
BugExample
<div></div>
</div>
<div style=\\"padding-left: 25px\\">
Expand Down Expand Up @@ -2572,7 +2572,7 @@ exports[`HTML Output should match combiners/oneof-with-array-type.json 1`] = `
<div style=\\"margin-left: -25px\\">
<div>
<div aria-label=\\"Pick a type\\" aria-haspopup=\\"true\\" aria-expanded=\\"false\\" id=\\"react-aria-0-2\\">
1. array of objects
array of objects
<div></div>
</div>
<div style=\\"padding-left: 25px\\">
Expand Down Expand Up @@ -2627,7 +2627,7 @@ exports[`HTML Output should match combiners/oneof-within-array-item.json 1`] = `
<div style=\\"margin-left: -25px\\">
<div>
<div aria-label=\\"Pick a type\\" aria-haspopup=\\"true\\" aria-expanded=\\"false\\" id=\\"react-aria-0-2\\">
1. array of A-s
array of A
<div></div>
</div>
<div style=\\"padding-left: 25px\\">
Expand Down Expand Up @@ -2846,8 +2846,8 @@ exports[`HTML Output should match default-schema.json 1`] = `
<label>
<select size=\\"2\\">
<option></option>
<option value=\\"0\\">1. object</option>
<option value=\\"1\\">2. array of integers</option>
<option value=\\"0\\">object</option>
<option value=\\"1\\">array of integers</option>
</select>
</label>
</div>
Expand All @@ -2861,7 +2861,7 @@ exports[`HTML Output should match default-schema.json 1`] = `
type=\\"button\\"
class=\\"active:sl-bg-canvas-100 hover:sl-border-input focus:sl-border-input active:sl-border-button disabled:sl-opacity-50\\"
>
<div><div>1. object</div></div>
<div><div>object</div></div>
<div><div></div></div>
</button>
</div>
Expand Down
15 changes: 7 additions & 8 deletions src/components/SchemaRow/useChoices.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,11 @@ type Choice = {
};

function calculateChoiceTitle(node: SchemaNode, isPlural: boolean): string {
const complexObjectSuffix = isPlural ? '-s' : '';
const primitiveSuffix = isPlural ? 's' : '';
if (isRegularNode(node)) {
const realName = printName(node, { shouldUseRefNameFallback: true });
if (realName) {
return realName + complexObjectSuffix;
return realName;
}
return node.primaryType !== null ? node.primaryType + primitiveSuffix : 'any';
}
Expand All @@ -26,7 +25,7 @@ function calculateChoiceTitle(node: SchemaNode, isPlural: boolean): string {
const value = extractPointerFromRef(node.value);
const lastPiece = !node.error && value ? last(pointerToPath(value)) : null;
if (typeof lastPiece === 'string') {
return lastPiece.split('.')[0] + complexObjectSuffix;
return lastPiece.split('.')[0];
}
}
return '$ref' + primitiveSuffix;
Expand All @@ -35,19 +34,19 @@ function calculateChoiceTitle(node: SchemaNode, isPlural: boolean): string {
return 'any';
}

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

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

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

const defaultChoice = choices[0];
Expand Down
4 changes: 2 additions & 2 deletions src/components/shared/__tests__/Property.spec.tsx
View file
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=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\"><div data-overlay-container=\\"true\\" class=\\"\\"><div class=\\"sl-relative\\"><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-baseline 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></option><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-label=\\"Pick a type\\" aria-haspopup=\\"listbox\\" aria-expanded=\\"false\\" id=\\"react-aria-0-4\\" aria-labelledby=\\"react-aria-0-4 react-aria-0-6\\" type=\\"button\\" class=\\"sl-button sl-w-full sl-h-sm sl-text-base sl-font-normal sl-px-1.5 sl-bg-transparent active:sl-bg-canvas-100 sl-text-body sl-rounded sl-border-transparent hover:sl-border-input focus:sl-border-input active:sl-border-button sl-border disabled:sl-opacity-50\\"><div class=\\"sl-flex sl-flex-1 sl-justify-items-start sl-items-center\\"><div class=\\"sl-pr-1\\">1. array of strings</div></div><div class=\\"sl-text-xs sl--mr-0.5 sl-ml-1\\"><div class=\\"sl-pt-0.5 sl-pr-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></div></button></div></div></div></div></div></div><div></div></div></div></div></div>"`,
`"<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\"><div data-overlay-container=\\"true\\" class=\\"\\"><div class=\\"sl-relative\\"><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-baseline 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></option><option value=\\"0\\">array of strings</option><option value=\\"1\\">array of numbers</option></select></label></div><div class=\\"sl-relative\\"><button aria-label=\\"Pick a type\\" aria-haspopup=\\"listbox\\" aria-expanded=\\"false\\" id=\\"react-aria-0-4\\" aria-labelledby=\\"react-aria-0-4 react-aria-0-6\\" type=\\"button\\" class=\\"sl-button sl-w-full sl-h-sm sl-text-base sl-font-normal sl-px-1.5 sl-bg-transparent active:sl-bg-canvas-100 sl-text-body sl-rounded sl-border-transparent hover:sl-border-input focus:sl-border-input active:sl-border-button sl-border disabled:sl-opacity-50\\"><div class=\\"sl-flex sl-flex-1 sl-justify-items-start sl-items-center\\"><div class=\\"sl-pr-1\\">array of strings</div></div><div class=\\"sl-text-xs sl--mr-0.5 sl-ml-1\\"><div class=\\"sl-pt-0.5 sl-pr-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></div></button></div></div></div></div></div></div><div></div></div></div></div></div>"`,
);
});

Expand Down Expand Up @@ -264,7 +264,7 @@ describe('Property component', () => {

const wrapper = render(schema);
expect(wrapper.find(Types).first().html()).toMatchInlineSnapshot(
`"<span class=\\"sl-truncate sl-text-muted\\">array of User-s</span>"`,
`"<span class=\\"sl-truncate sl-text-muted\\">array of User</span>"`,
);
});

Expand Down
4 changes: 2 additions & 2 deletions src/utils/printName.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,9 +59,9 @@ function printArrayName(
if (isComplexArray(schemaNode)) {
const firstChild = schemaNode.children[0];
if (firstChild.title) {
return `array of ${firstChild.title}-s`;
return `array of ${firstChild.title}`;
} else if (shouldUseRefNameFallback && getNodeNameFromOriginalRef(schemaNode)) {
return `array of ${getNodeNameFromOriginalRef(schemaNode)}-s`;
return `array of ${getNodeNameFromOriginalRef(schemaNode)}`;
} else if (firstChild.primaryType) {
return `array of ${firstChild.primaryType}s`;
} else if (firstChild.combiners?.length) {
Expand Down

0 comments on commit bae2eb0

Please sign in to comment.