diff --git a/plugins/airtable/src/App.css b/plugins/airtable/src/App.css index f9e9b1e8b..ad4cdd78b 100644 --- a/plugins/airtable/src/App.css +++ b/plugins/airtable/src/App.css @@ -12,14 +12,6 @@ form { -webkit-user-select: none; } -select:disabled { - opacity: 0.5; -} - -select:not(:disabled) { - cursor: pointer; -} - .sticky-top { position: sticky; top: 0; @@ -53,13 +45,6 @@ select:not(:disabled) { border-radius: 10px; } -.setup-container { - display: flex; - flex-direction: column; - gap: 10px; - width: 100%; -} - .setup label { display: flex; flex-direction: row; @@ -81,7 +66,7 @@ select:not(:disabled) { .mapping .fields { display: grid; - grid-template-columns: 1fr 8px 1fr 1fr; + grid-template-columns: 1fr 8px 1fr 8px 1fr; gap: 10px; margin-bottom: auto; padding-bottom: 10px; @@ -99,6 +84,10 @@ select:not(:disabled) { color: var(--framer-color-text-tertiary); } +.mapping .field-type-select { + width: 100%; +} + .mapping .source-field { display: flex; flex-direction: row; @@ -127,44 +116,6 @@ select:not(:disabled) { box-shadow: none; } -.mapping .unsupported-field { - grid-column: span 2; - background-color: var(--framer-color-bg-tertiary); - border-radius: 8px; - padding: 0px 10px; - height: 30px; - display: flex; - flex-direction: row; - align-items: center; - opacity: 0.5; - color: var(--framer-color-text-secondary); -} - -.mapping .field-type-select { - width: 100%; -} - -.mapping .heading-row { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - width: 100%; -} - -.mapping .heading-link { - width: fit-content; - max-width: 50%; - display: flex; - flex-direction: row; - align-items: center; - gap: 4px; -} - -.mapping .heading-link:hover { - text-decoration: underline; -} - .mapping footer { position: sticky; bottom: 0; diff --git a/plugins/airtable/src/App.tsx b/plugins/airtable/src/App.tsx index e658ead28..54911f22c 100644 --- a/plugins/airtable/src/App.tsx +++ b/plugins/airtable/src/App.tsx @@ -26,8 +26,8 @@ export function App({ collection, previousBaseId, previousTableId, previousSlugF const hasDataSourceSelected = Boolean(dataSource) framer.showUI({ - width: hasDataSourceSelected ? 425 : 320, - height: hasDataSourceSelected ? 425 : 345, + width: hasDataSourceSelected ? 360 : 320, + height: hasDataSourceSelected ? 425 : 350, minWidth: hasDataSourceSelected ? 360 : undefined, minHeight: hasDataSourceSelected ? 425 : undefined, resizable: hasDataSourceSelected, diff --git a/plugins/airtable/src/FieldMapping.tsx b/plugins/airtable/src/FieldMapping.tsx index ffa1f1b28..c34051823 100644 --- a/plugins/airtable/src/FieldMapping.tsx +++ b/plugins/airtable/src/FieldMapping.tsx @@ -23,14 +23,14 @@ function ChevronIcon() { } const fieldTypeOptions: { type: Field["type"]; label: string }[] = [ - { type: "string", label: "Plain Text" }, - { type: "formattedText", label: "Formatted Text" }, - { type: "date", label: "Date" }, - { type: "link", label: "Link" }, - { type: "image", label: "Image" }, + { type: "boolean", label: "Boolean" }, { type: "color", label: "Color" }, - { type: "boolean", label: "Toggle" }, { type: "number", label: "Number" }, + { type: "string", label: "String" }, + { type: "formattedText", label: "Formatted Text" }, + { type: "image", label: "Image" }, + { type: "link", label: "Link" }, + { type: "date", label: "Date" }, { type: "enum", label: "Option" }, { type: "file", label: "File" }, ] @@ -40,48 +40,21 @@ interface FieldMappingRowProps { originalFieldName: string | undefined isIgnored: boolean disabled: boolean - unsupported?: boolean - missingCollection?: boolean onToggleIgnored?: (fieldId: string) => void onNameChange?: (fieldId: string, name: string) => void onTypeChange?: (fieldId: string, type: string) => void } -interface SelectOption { - id: string - label: string -} - const FieldMappingRow = memo( ({ field, originalFieldName, isIgnored, disabled, - unsupported, - missingCollection, onToggleIgnored, onNameChange, onTypeChange, }: FieldMappingRowProps) => { - let selectOptions: SelectOption[] = [] - if (!unsupported && !missingCollection) { - if (isCollectionReference(field)) { - selectOptions = field.supportedCollections.map(collection => ({ - id: collection.id, - label: collection.name, - })) - } else if (Array.isArray(field.allowedTypes)) { - selectOptions = field.allowedTypes.map(type => { - const capitalizedType = type.charAt(0).toUpperCase() + type.slice(1) - return { - id: type, - label: fieldTypeOptions.find(option => option.type === type)?.label ?? capitalizedType, - } - }) - } - } - return ( <> - {unsupported || missingCollection ? ( -
{unsupported ? "Unsupported Field" : "Missing Collection"}
- ) : ( - <> - onNameChange?.(field.id, event.target.value)} + onKeyDown={event => { + if (event.key === "Enter") { + event.preventDefault() + } + }} + /> + + - onNameChange?.(field.id, event.target.value)} - onKeyDown={event => { - if (event.key === "Enter") { - event.preventDefault() - } - }} - /> - - )} + + )} + {!isCollectionReference(field) && + field.allowedTypes?.map(type => { + const capitalizedType = + typeof type === "string" ? type.charAt(0).toUpperCase() + type.slice(1) : "" + + return ( + + ) + })} + ) } ) -function isFieldMissingCollection(field: PossibleField): boolean { - return isCollectionReference(field) && field.supportedCollections.length === 0 -} - const initialManagedCollectionFields: PossibleField[] = [] const initialFieldIds: ReadonlySet = new Set() @@ -234,8 +219,16 @@ export function FieldMapping({ collection, dataSource, initialSlugFieldId }: Fie return { ...field, type: "string" } as PossibleField case "formattedText": return { ...field, type: "formattedText" } as PossibleField + case "number": + return { ...field, type: "number" } as PossibleField + case "boolean": + return { ...field, type: "boolean" } as PossibleField case "color": return { ...field, type: "color" } as PossibleField + case "date": + return { ...field, type: "date" } as PossibleField + case "enum": + return { ...field, type: "enum" } as PossibleField default: return field } @@ -274,10 +267,13 @@ export function FieldMapping({ collection, dataSource, initialSlugFieldId }: Fie const fieldsToSync = fields .filter(field => !ignoredFieldIds.has(field.id)) - .map(field => ({ - ...field, - name: field.name.trim() || field.id, - })) + .map(field => { + const originalFieldName = dataSource.fields.find(sourceField => sourceField.id === field.id)?.name + return { + ...field, + name: field.name.trim() || originalFieldName || field.id, + } + }) .filter(field => field.type !== "unsupported") .filter( field => @@ -313,18 +309,8 @@ export function FieldMapping({ collection, dataSource, initialSlugFieldId }: Fie return (

-