Skip to content

Commit 5f56563

Browse files
lukemelialukemelia
committed
Use dynamic context for defaultFormat
1 parent c49d4d2 commit 5f56563

16 files changed

+615
-394
lines changed

‎packages/base/card-api.gts

+49-48
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,13 @@ import { BoxelInput, FieldContainer } from '@cardstack/boxel-ui/components';
88
import { cn, eq, pick } from '@cardstack/boxel-ui/helpers';
99
import { on } from '@ember/modifier';
1010
import { startCase } from 'lodash';
11-
import { getBoxComponent, type BoxComponent } from './field-component';
11+
import {
12+
getBoxComponent,
13+
type BoxComponent,
14+
DefaultFormatConsumer,
15+
} from './field-component';
1216
import { getContainsManyComponent } from './contains-many-component';
13-
import { getLinksToEditor } from './links-to-editor';
17+
import { LinksToEditor } from './links-to-editor';
1418
import { getLinksToManyComponent } from './links-to-many-component';
1519
import {
1620
SupportedMimeType,
@@ -284,7 +288,7 @@ export interface Field<
284288
): Promise<any>;
285289
emptyValue(instance: BaseDef): any;
286290
validate(instance: BaseDef, value: any): void;
287-
component(model: Box<BaseDef>, defaultFormat: Format): BoxComponent;
291+
component(model: Box<BaseDef>): BoxComponent;
288292
getter(instance: BaseDef): BaseInstanceType<CardT>;
289293
queryableValue(value: any, stack: BaseDef[]): SearchT;
290294
queryMatcher(
@@ -578,27 +582,17 @@ class ContainsMany<FieldT extends FieldDefConstructor>
578582
);
579583
}
580584

581-
component(model: Box<BaseDef>, format: Format): BoxComponent {
585+
component(model: Box<BaseDef>): BoxComponent {
582586
let fieldName = this.name as keyof BaseDef;
583587
let arrayField = model.field(
584588
fieldName,
585589
useIndexBasedKey in this.card,
586590
) as unknown as Box<BaseDef[]>;
587591

588-
let renderFormat: Format | undefined = undefined;
589-
if (
590-
format === 'edit' &&
591-
'isFieldDef' in model.value.constructor &&
592-
model.value.constructor.isFieldDef
593-
) {
594-
renderFormat = 'atom';
595-
}
596-
597592
return getContainsManyComponent({
598593
model,
599594
arrayField,
600595
field: this,
601-
format: renderFormat ?? format,
602596
cardTypeFor,
603597
});
604598
}
@@ -750,8 +744,8 @@ class Contains<CardT extends FieldDefConstructor> implements Field<CardT, any> {
750744
);
751745
}
752746

753-
component(model: Box<BaseDef>, format: Format): BoxComponent {
754-
return fieldComponent(this, model, format);
747+
component(model: Box<BaseDef>): BoxComponent {
748+
return fieldComponent(this, model);
755749
}
756750
}
757751

@@ -1042,14 +1036,40 @@ class LinksTo<CardT extends CardDefConstructor> implements Field<CardT> {
10421036
return fieldInstance;
10431037
}
10441038

1045-
component(model: Box<CardDef>, format: Format): BoxComponent {
1046-
if (format === 'edit' && !this.computeVia) {
1047-
let innerModel = model.field(
1048-
this.name as keyof BaseDef,
1049-
) as unknown as Box<CardDef | null>;
1050-
return getLinksToEditor(innerModel, this);
1051-
}
1052-
return fieldComponent(this, model, format);
1039+
component(model: Box<CardDef>): BoxComponent {
1040+
let isComputed = !!this.computeVia;
1041+
let fieldName = this.name as keyof CardDef;
1042+
let linksToField = this;
1043+
let getInnerModel = () => {
1044+
let innerModel = model.field(fieldName);
1045+
return innerModel as unknown as Box<CardDef | null>;
1046+
};
1047+
function shouldRenderEditor(
1048+
format: Format | undefined,
1049+
defaultFormat: Format,
1050+
isComputed: boolean,
1051+
) {
1052+
return (format ?? defaultFormat) === 'edit' && !isComputed;
1053+
}
1054+
return class LinksToComponent extends GlimmerComponent<{
1055+
Args: { Named: { format?: Format; displayContainer?: boolean } };
1056+
Blocks: {};
1057+
}> {
1058+
<template>
1059+
<DefaultFormatConsumer as |defaultFormat|>
1060+
{{#if (shouldRenderEditor @format defaultFormat isComputed)}}
1061+
<LinksToEditor @model={{(getInnerModel)}} @field={{linksToField}} />
1062+
{{else}}
1063+
{{#let (fieldComponent linksToField model) as |FieldComponent|}}
1064+
<FieldComponent
1065+
@format={{@format}}
1066+
@displayContainer={{@displayContainer}}
1067+
/>
1068+
{{/let}}
1069+
{{/if}}
1070+
</DefaultFormatConsumer>
1071+
</template>
1072+
};
10531073
}
10541074
}
10551075

@@ -1424,28 +1444,16 @@ class LinksToMany<FieldT extends CardDefConstructor>
14241444
return fieldInstances;
14251445
}
14261446

1427-
component(model: Box<CardDef>, format: Format): BoxComponent {
1447+
component(model: Box<CardDef>): BoxComponent {
14281448
let fieldName = this.name as keyof BaseDef;
14291449
let arrayField = model.field(
14301450
fieldName,
14311451
useIndexBasedKey in this.card,
14321452
) as unknown as Box<CardDef[]>;
1433-
let renderFormat: Format | undefined = undefined;
1434-
if (
1435-
format === 'edit' &&
1436-
'isFieldDef' in model.value.constructor &&
1437-
model.value.constructor.isFieldDef
1438-
) {
1439-
renderFormat = 'atom';
1440-
}
1441-
if (format === 'edit' && this.computeVia) {
1442-
renderFormat = 'embedded';
1443-
}
14441453
return getLinksToManyComponent({
14451454
model,
14461455
arrayField,
14471456
field: this,
1448-
format: renderFormat ?? format,
14491457
cardTypeFor,
14501458
});
14511459
}
@@ -1454,7 +1462,6 @@ class LinksToMany<FieldT extends CardDefConstructor>
14541462
function fieldComponent(
14551463
field: Field<typeof BaseDef>,
14561464
model: Box<BaseDef>,
1457-
defaultFormat: Format,
14581465
): BoxComponent {
14591466
let fieldName = field.name as keyof BaseDef;
14601467
let card: typeof BaseDef;
@@ -1465,7 +1472,7 @@ function fieldComponent(
14651472
(model.value[fieldName]?.constructor as typeof BaseDef) ?? field.card;
14661473
}
14671474
let innerModel = model.field(fieldName) as unknown as Box<BaseDef>;
1468-
return getBoxComponent(card, innerModel, field, defaultFormat);
1475+
return getBoxComponent(card, innerModel, field);
14691476
}
14701477

14711478
// our decorators are implemented by Babel, not TypeScript, so they have a
@@ -1643,8 +1650,8 @@ export class BaseDef {
16431650
return _createFromSerialized(this, data, doc, relativeTo, identityContext);
16441651
}
16451652

1646-
static getComponent(card: BaseDef, format: Format, field?: Field) {
1647-
return getComponent(card, format, field);
1653+
static getComponent(card: BaseDef, field?: Field) {
1654+
return getComponent(card, field);
16481655
}
16491656

16501657
static assignInitialFieldValue(
@@ -1862,7 +1869,6 @@ export type BaseDefComponent = ComponentLike<{
18621869
cardOrField: typeof BaseDef;
18631870
fields: any;
18641871
format: Format;
1865-
displayContainer?: boolean;
18661872
model: any;
18671873
set: Setter;
18681874
fieldName: string | undefined;
@@ -2712,17 +2718,12 @@ export type SignatureFor<CardT extends BaseDefConstructor> = {
27122718
};
27132719
};
27142720

2715-
export function getComponent(
2716-
model: BaseDef,
2717-
format: Format,
2718-
field?: Field,
2719-
): BoxComponent {
2721+
export function getComponent(model: BaseDef, field?: Field): BoxComponent {
27202722
let box = Box.create(model);
27212723
let boxComponent = getBoxComponent(
27222724
model.constructor as BaseDefConstructor,
27232725
box,
27242726
field,
2725-
format,
27262727
);
27272728
return boxComponent;
27282729
}

‎packages/base/contains-many-component.gts

+107-20
Original file line numberDiff line numberDiff line change
@@ -10,25 +10,32 @@ import {
1010
type FieldDef,
1111
type BaseDef,
1212
} from './card-api';
13-
import { getBoxComponent, getPluralViewComponent } from './field-component';
13+
import { eq } from '@cardstack/boxel-ui/helpers';
14+
import {
15+
type BoxComponentSignature,
16+
getBoxComponent,
17+
DefaultFormatConsumer,
18+
DefaultFormatProvider,
19+
} from './field-component';
1420
import { AddButton, IconButton } from '@cardstack/boxel-ui/components';
1521
import { getPlural } from '@cardstack/runtime-common';
1622
import { IconTrash } from '@cardstack/boxel-ui/icons';
23+
import { TemplateOnlyComponent } from '@ember/component/template-only';
1724

18-
interface Signature {
25+
interface ContainsManyEditorSignature {
1926
Args: {
2027
model: Box<FieldDef>;
2128
arrayField: Box<FieldDef[]>;
22-
format: Format;
2329
field: Field<typeof FieldDef>;
2430
cardTypeFor(
2531
field: Field<typeof BaseDef>,
2632
boxedElement: Box<BaseDef>,
2733
): typeof BaseDef;
34+
childFormat: 'atom' | 'embedded';
2835
};
2936
}
3037

31-
class ContainsManyEditor extends GlimmerComponent<Signature> {
38+
class ContainsManyEditor extends GlimmerComponent<ContainsManyEditorSignature> {
3239
<template>
3340
<div data-test-contains-many={{@field.name}}>
3441
{{#if @arrayField.children.length}}
@@ -37,11 +44,11 @@ class ContainsManyEditor extends GlimmerComponent<Signature> {
3744
<li class='editor' data-test-item={{i}}>
3845
{{#let
3946
(getBoxComponent
40-
(@cardTypeFor @field boxedElement) @format boxedElement @field
47+
(@cardTypeFor @field boxedElement) boxedElement @field
4148
)
4249
as |Item|
4350
}}
44-
<Item @format={{@format}} />
51+
<Item @format={{@childFormat}} />
4552
{{/let}}
4653
<div class='remove-button-container'>
4754
<IconButton
@@ -118,33 +125,113 @@ class ContainsManyEditor extends GlimmerComponent<Signature> {
118125
};
119126
}
120127

128+
function getEditorChildFormat(
129+
format: Format | undefined,
130+
defaultFormat: Format,
131+
model: Box<FieldDef>,
132+
) {
133+
if (
134+
(format ?? defaultFormat) === 'edit' &&
135+
'isFieldDef' in model.value.constructor &&
136+
model.value.constructor.isFieldDef
137+
) {
138+
return 'atom';
139+
}
140+
return 'embedded';
141+
}
142+
143+
function coalesce<T>(arg1: T | undefined, arg2: T): T {
144+
return arg1 ?? arg2;
145+
}
146+
147+
function shouldRenderEditor(
148+
format: Format | undefined,
149+
defaultFormat: Format,
150+
isComputed: boolean,
151+
) {
152+
return (format ?? defaultFormat) === 'edit' && !isComputed;
153+
}
154+
121155
export function getContainsManyComponent({
122156
model,
123157
arrayField,
124-
format,
125158
field,
126159
cardTypeFor,
127160
}: {
128161
model: Box<FieldDef>;
129162
arrayField: Box<FieldDef[]>;
130-
format: Format;
131163
field: Field<typeof FieldDef>;
132164
cardTypeFor(
133165
field: Field<typeof BaseDef>,
134166
boxedElement: Box<BaseDef>,
135167
): typeof BaseDef;
136168
}): BoxComponent {
137-
if (format === 'edit') {
138-
return <template>
139-
<ContainsManyEditor
140-
@model={{model}}
141-
@arrayField={{arrayField}}
142-
@field={{field}}
143-
@format={{format}}
144-
@cardTypeFor={{cardTypeFor}}
145-
/>
169+
let getComponents = () =>
170+
arrayField.children.map((child) =>
171+
getBoxComponent(cardTypeFor(field, child), child, field),
172+
); // Wrap the the components in a function so that the template is reactive to changes in the model (this is essentially a helper)
173+
let isComputed = !!field.computeVia;
174+
let containsManyComponent: TemplateOnlyComponent<BoxComponentSignature> =
175+
<template>
176+
<DefaultFormatConsumer as |defaultFormat|>
177+
{{#if (shouldRenderEditor @format defaultFormat isComputed)}}
178+
<ContainsManyEditor
179+
@model={{model}}
180+
@arrayField={{arrayField}}
181+
@field={{field}}
182+
@cardTypeFor={{cardTypeFor}}
183+
@childFormat={{getEditorChildFormat @format defaultFormat model}}
184+
/>
185+
{{else}}
186+
{{#let (coalesce @format defaultFormat) as |effectiveFormat|}}
187+
<div
188+
class='plural-field containsMany-field
189+
{{effectiveFormat}}-format
190+
{{unless arrayField.children.length "empty"}}'
191+
data-test-plural-view={{field.fieldType}}
192+
data-test-plural-view-format={{effectiveFormat}}
193+
>
194+
{{#each (getComponents) as |Item i|}}
195+
<div data-test-plural-view-item={{i}}>
196+
<Item @format={{effectiveFormat}} />
197+
</div>
198+
{{/each}}
199+
</div>
200+
{{/let}}
201+
{{/if}}
202+
</DefaultFormatConsumer>
203+
<style>
204+
.containsMany-field.atom-format {
205+
padding: var(--boxel-sp-sm);
206+
background-color: var(--boxel-100);
207+
border: none !important;
208+
border-radius: var(--boxel-border-radius);
209+
}
210+
</style>
146211
</template>;
147-
} else {
148-
return getPluralViewComponent(arrayField, field, format, cardTypeFor);
149-
}
212+
return new Proxy(containsManyComponent, {
213+
get(target, property, received) {
214+
// proxying the bare minimum of an Array in order to render within a
215+
// template. add more getters as necessary...
216+
let components = getComponents();
217+
218+
if (property === Symbol.iterator) {
219+
return components[Symbol.iterator];
220+
}
221+
if (property === 'length') {
222+
return components.length;
223+
}
224+
if (typeof property === 'string' && property.match(/\d+/)) {
225+
return components[parseInt(property)];
226+
}
227+
return Reflect.get(target, property, received);
228+
},
229+
getPrototypeOf() {
230+
// This is necessary for Ember to be able to locate the template associated
231+
// with a proxied component. Our Proxy object won't be in the template WeakMap,
232+
// but we can pretend our Proxy object inherits from the true component, and
233+
// Ember's template lookup respects inheritance.
234+
return containsManyComponent;
235+
},
236+
});
150237
}

0 commit comments

Comments
 (0)