Skip to content

Commit 2830793

Browse files
lukemelialukemelia
committed
Use dynamic context for defaultFormat
1 parent 254425d commit 2830793

16 files changed

+626
-399
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

+109-20
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,20 @@ import {
1010
type FieldDef,
1111
type BaseDef,
1212
} from './card-api';
13-
import { getBoxComponent, getPluralViewComponent } from './field-component';
13+
import {
14+
type BoxComponentSignature,
15+
getBoxComponent,
16+
DefaultFormatConsumer,
17+
} from './field-component';
1418
import { AddButton, IconButton } from '@cardstack/boxel-ui/components';
1519
import { getPlural } from '@cardstack/runtime-common';
1620
import { IconTrash } from '@cardstack/boxel-ui/icons';
21+
import { TemplateOnlyComponent } from '@ember/component/template-only';
1722

18-
interface Signature {
23+
interface ContainsManyEditorSignature {
1924
Args: {
2025
model: Box<FieldDef>;
2126
arrayField: Box<FieldDef[]>;
22-
format: Format;
2327
field: Field<typeof FieldDef>;
2428
cardTypeFor(
2529
field: Field<typeof BaseDef>,
@@ -28,7 +32,7 @@ interface Signature {
2832
};
2933
}
3034

31-
class ContainsManyEditor extends GlimmerComponent<Signature> {
35+
class ContainsManyEditor extends GlimmerComponent<ContainsManyEditorSignature> {
3236
<template>
3337
<div data-test-contains-many={{@field.name}}>
3438
{{#if @arrayField.children.length}}
@@ -37,11 +41,11 @@ class ContainsManyEditor extends GlimmerComponent<Signature> {
3741
<li class='editor' data-test-item={{i}}>
3842
{{#let
3943
(getBoxComponent
40-
(@cardTypeFor @field boxedElement) @format boxedElement @field
44+
(@cardTypeFor @field boxedElement) boxedElement @field
4145
)
4246
as |Item|
4347
}}
44-
<Item @format={{@format}} />
48+
<Item />
4549
{{/let}}
4650
<div class='remove-button-container'>
4751
<IconButton
@@ -118,33 +122,118 @@ class ContainsManyEditor extends GlimmerComponent<Signature> {
118122
};
119123
}
120124

125+
function getPluralChildFormat(effectiveFormat: Format, model: Box<FieldDef>) {
126+
if (
127+
effectiveFormat === 'edit' &&
128+
'isFieldDef' in model.value.constructor &&
129+
model.value.constructor.isFieldDef
130+
) {
131+
return 'atom';
132+
}
133+
return effectiveFormat;
134+
}
135+
136+
function coalesce<T>(arg1: T | undefined, arg2: T): T {
137+
return arg1 ?? arg2;
138+
}
139+
121140
export function getContainsManyComponent({
122141
model,
123142
arrayField,
124-
format,
125143
field,
126144
cardTypeFor,
127145
}: {
128146
model: Box<FieldDef>;
129147
arrayField: Box<FieldDef[]>;
130-
format: Format;
131148
field: Field<typeof FieldDef>;
132149
cardTypeFor(
133150
field: Field<typeof BaseDef>,
134151
boxedElement: Box<BaseDef>,
135152
): typeof BaseDef;
136153
}): 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-
/>
146-
</template>;
147-
} else {
148-
return getPluralViewComponent(arrayField, field, format, cardTypeFor);
154+
let getComponents = () =>
155+
arrayField.children.map((child) =>
156+
getBoxComponent(cardTypeFor(field, child), child, field),
157+
); // Wrap the the components in a function so that the template is reactive to changes in the model (this is essentially a helper)
158+
let isComputed = !!field.computeVia;
159+
function shouldRenderEditor(
160+
format: Format | undefined,
161+
defaultFormat: Format,
162+
isComputed: boolean,
163+
) {
164+
if (
165+
'isFieldDef' in model.value.constructor &&
166+
model.value.constructor.isFieldDef
167+
) {
168+
return false;
169+
}
170+
if (isComputed) {
171+
return false;
172+
}
173+
return (format ?? defaultFormat) === 'edit';
149174
}
175+
let containsManyComponent: TemplateOnlyComponent<BoxComponentSignature> =
176+
<template>
177+
<DefaultFormatConsumer as |defaultFormat|>
178+
{{#if (shouldRenderEditor @format defaultFormat isComputed)}}
179+
<ContainsManyEditor
180+
@model={{model}}
181+
@arrayField={{arrayField}}
182+
@field={{field}}
183+
@cardTypeFor={{cardTypeFor}}
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
197+
@format={{getPluralChildFormat effectiveFormat model}}
198+
/>
199+
</div>
200+
{{/each}}
201+
</div>
202+
{{/let}}
203+
{{/if}}
204+
</DefaultFormatConsumer>
205+
<style>
206+
.containsMany-field.atom-format {
207+
padding: var(--boxel-sp-sm);
208+
background-color: var(--boxel-100);
209+
border: none !important;
210+
border-radius: var(--boxel-border-radius);
211+
}
212+
</style>
213+
</template>;
214+
return new Proxy(containsManyComponent, {
215+
get(target, property, received) {
216+
// proxying the bare minimum of an Array in order to render within a
217+
// template. add more getters as necessary...
218+
let components = getComponents();
219+
220+
if (property === Symbol.iterator) {
221+
return components[Symbol.iterator];
222+
}
223+
if (property === 'length') {
224+
return components.length;
225+
}
226+
if (typeof property === 'string' && property.match(/\d+/)) {
227+
return components[parseInt(property)];
228+
}
229+
return Reflect.get(target, property, received);
230+
},
231+
getPrototypeOf() {
232+
// This is necessary for Ember to be able to locate the template associated
233+
// with a proxied component. Our Proxy object won't be in the template WeakMap,
234+
// but we can pretend our Proxy object inherits from the true component, and
235+
// Ember's template lookup respects inheritance.
236+
return containsManyComponent;
237+
},
238+
});
150239
}

0 commit comments

Comments
 (0)