@airtable/blocks/ui#Heading JavaScript Examples
The following examples show how to use
@airtable/blocks/ui#Heading.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: settings.js From neighbor-express with MIT License | 6 votes |
|
function AddEmailTypeDialog() {
const [isDialogOpen, setIsDialogOpen] = useState(false);
const [name, setName] = useState("");
const globalConfig = useGlobalConfig();
function save() {
globalConfig.setAsync(["email_types", name], {});
setIsDialogOpen(false);
}
return (
<>
<Button onClick={() => setIsDialogOpen(true)}>Add new email type</Button>
{isDialogOpen && (
<Dialog onClose={() => setIsDialogOpen(false)} width="320px">
<Dialog.CloseButton />
<Heading>New Email Type</Heading>
<FormField
label="Name"
description="A short descriptive name of the new type of email"
>
<Input value={name} onChange={(e) => setName(e.target.value)} />
</FormField>
<Button onClick={save}>Save</Button>
</Dialog>
)}
</>
);
}
Example #2
| Source File: SettingsForm.js From apps-base-schema with MIT License | 5 votes |
|
/**
* Settings form component.
* Allows the user to toggle link types.
*
* @param {Function} props.setShouldShowSettings Function to toggle settings visibility
*/
export default function SettingsForm({setShouldShowSettings}) {
return (
<FullscreenBox
left="initial" // show settings in right sidebar
width="360px"
backgroundColor="white"
display="flex"
flexDirection="column"
borderLeft="thick"
>
<Box flex="auto" display="flex" justifyContent="center" overflow="auto">
<Box paddingTop={4} paddingBottom={2} maxWidth={300} flex="auto">
<Heading marginBottom={2}>Settings</Heading>
<SwitchSynced
marginY={3}
label="Show linked record relationships"
globalConfigKey={[
ConfigKeys.ENABLED_LINKS_BY_TYPE,
FieldType.MULTIPLE_RECORD_LINKS,
]}
/>
<SwitchSynced
marginY={3}
label="Show formula relationships"
globalConfigKey={[ConfigKeys.ENABLED_LINKS_BY_TYPE, FieldType.FORMULA]}
/>
<SwitchSynced
marginY={3}
label="Show rollup relationships"
globalConfigKey={[ConfigKeys.ENABLED_LINKS_BY_TYPE, FieldType.ROLLUP]}
/>
<SwitchSynced
marginY={3}
label="Show lookup relationships"
globalConfigKey={[
ConfigKeys.ENABLED_LINKS_BY_TYPE,
FieldType.MULTIPLE_LOOKUP_VALUES,
]}
/>
<SwitchSynced
marginY={3}
label="Show count relationships"
globalConfigKey={[ConfigKeys.ENABLED_LINKS_BY_TYPE, FieldType.COUNT]}
/>
</Box>
</Box>
<Box
flex="none"
borderTop="thick"
display="flex"
justifyContent="flex-end"
alignItems="center"
>
<Button
margin={3}
variant="primary"
size="large"
onClick={() => setShouldShowSettings(false)}
>
Done
</Button>
</Box>
</FullscreenBox>
);
}
Example #3
| Source File: SettingsForm.js From apps-flashcard with MIT License | 5 votes |
|
export default function SettingsForm({setIsSettingsVisible, settings}) {
return (
<Box
flex="none"
display="flex"
flexDirection="column"
width="300px"
backgroundColor="white"
maxHeight="100vh"
borderLeft="thick"
>
<Box
flex="auto"
display="flex"
flexDirection="column"
minHeight="0"
padding={3}
overflowY="auto"
>
<Heading marginBottom={3}>Settings</Heading>
<FormField label="Table">
<TablePickerSynced globalConfigKey={ConfigKeys.TABLE_ID} />
</FormField>
{settings.table && (
<Fragment>
<FormField
label="View"
description="Only records in this view will be used"
>
<ViewPickerSynced
table={settings.table}
globalConfigKey={ConfigKeys.VIEW_ID}
/>
</FormField>
<FormField label="Question field">
<FieldPickerSynced
table={settings.table}
globalConfigKey={ConfigKeys.QUESTION_FIELD_ID}
/>
</FormField>
<FormField label="Answer field (optional)">
<FieldPickerSynced
table={settings.table}
shouldAllowPickingNone={true}
globalConfigKey={ConfigKeys.ANSWER_FIELD_ID}
/>
</FormField>
</Fragment>
)}
</Box>
<Box
flex="none"
display="flex"
justifyContent="flex-end"
paddingY={3}
marginX={3}
borderTop="thick"
>
<Button variant="primary" size="large" onClick={() => setIsSettingsVisible(false)}>
Done
</Button>
</Box>
</Box>
);
}
Example #4
| Source File: SettingsForm.js From apps-url-preview with MIT License | 5 votes |
|
function SettingsForm({setIsSettingsOpen}) {
const globalConfig = useGlobalConfig();
const {
isValid,
message,
settings: {isEnforced, urlTable},
} = useSettings();
const canUpdateSettings = globalConfig.hasPermissionToSet();
return (
<Box
position="absolute"
top={0}
bottom={0}
left={0}
right={0}
display="flex"
flexDirection="column"
>
<Box flex="auto" padding={4} paddingBottom={2}>
<Heading marginBottom={3}>Settings</Heading>
<FormField label="">
<Switch
aria-label="When enabled, the app will only show previews for the specified table and field, regardless of what field is selected."
value={isEnforced}
onChange={value => {
globalConfig.setAsync(ConfigKeys.IS_ENFORCED, value);
}}
disabled={!canUpdateSettings}
label="Use a specific field for previews"
/>
<Text paddingY={1} textColor="light">
{isEnforced
? 'The app will show previews for the selected record in grid view if the table has a supported URL in the specified field.'
: 'The app will show previews if the selected cell in grid view has a supported URL.'}
</Text>
</FormField>
{isEnforced && (
<FormField label="Preview table">
<TablePickerSynced globalConfigKey={ConfigKeys.URL_TABLE_ID} />
</FormField>
)}
{isEnforced && urlTable && (
<FormField label="Preview field">
<FieldPickerSynced
table={urlTable}
globalConfigKey={ConfigKeys.URL_FIELD_ID}
allowedTypes={allowedUrlFieldTypes}
/>
</FormField>
)}
</Box>
<Box display="flex" flex="none" padding={3} borderTop="thick">
<Box
flex="auto"
display="flex"
alignItems="center"
justifyContent="flex-end"
paddingRight={2}
>
<Text textColor="light">{message}</Text>
</Box>
<Button
disabled={!isValid}
size="large"
variant="primary"
onClick={() => setIsSettingsOpen(false)}
>
Done
</Button>
</Box>
</Box>
);
}
Example #5
| Source File: index.js From apps-url-preview with MIT License | 5 votes |
|
// Shows a preview, or a dialog that displays information about what
// kind of services (URLs) are supported by this app.
function RecordPreviewWithDialog({
activeTable,
selectedRecordId,
selectedFieldId,
setIsSettingsOpen,
}) {
const [isDialogOpen, setIsDialogOpen] = useState(false);
// Close the dialog when the selected record is changed.
// The new record might have a preview, so we don't want to hide it behind this dialog.
useEffect(() => {
setIsDialogOpen(false);
}, [selectedRecordId]);
return (
<Fragment>
<Box
position="absolute"
top={0}
left={0}
right={0}
bottom={0}
display="flex"
flexDirection="column"
alignItems="center"
justifyContent="center"
>
<RecordPreview
activeTable={activeTable}
selectedRecordId={selectedRecordId}
selectedFieldId={selectedFieldId}
setIsDialogOpen={setIsDialogOpen}
setIsSettingsOpen={setIsSettingsOpen}
/>
</Box>
{isDialogOpen && (
<Dialog onClose={() => setIsDialogOpen(false)} maxWidth={400}>
<Dialog.CloseButton />
<Heading size="small">Supported services</Heading>
<Text marginTop={2}>Previews are supported for these services:</Text>
<Text marginTop={2}>
<Link
href="https://support.airtable.com/hc/en-us/articles/205752117-Creating-a-base-share-link-or-a-view-share-link"
target="_blank"
>
Airtable share links
</Link>
, Figma, SoundCloud, Spotify, Vimeo, YouTube, Loom share links, Google Drive
share links, Google Docs, Google Sheets, Google Slides
</Text>
<Link
marginTop={2}
href="https://airtable.com/shrQSwIety6rqfJZX"
target="_blank"
>
Request a new service
</Link>
</Dialog>
)}
</Fragment>
);
}
Example #6
| Source File: index.js From apps-print-records with MIT License | 4 votes |
|
// Renders a single record from the Collections table with each
// of its linked Artists records.
function Record({record}) {
const base = useBase();
// Each record in the "Collections" table is linked to records
// in the "Artists" table. We want to show the Artists for
// each collection.
const linkedTable = base.getTableByName('Artists');
const linkedRecords = useRecords(
record.selectLinkedRecordsFromCell('Artists', {
// Keep the linked records sorted by their primary field.
sorts: [{field: linkedTable.primaryField, direction: 'asc'}],
}),
);
return (
<Box marginY={3}>
<Heading>{record.name}</Heading>
<table style={{borderCollapse: 'collapse', width: '100%'}}>
<thead>
<tr>
<td
style={{
whiteSpace: 'nowrap',
verticalAlign: 'bottom',
}}
>
<Heading variant="caps" size="xsmall" marginRight={3} marginBottom={0}>
On display?
</Heading>
</td>
<td style={{width: '50%', verticalAlign: 'bottom'}}>
<Heading variant="caps" size="xsmall" marginRight={3} marginBottom={0}>
Artist name
</Heading>
</td>
<td style={{width: '50%', verticalAlign: 'bottom'}}>
<Heading variant="caps" size="xsmall" marginBottom={0}>
Artworks
</Heading>
</td>
</tr>
</thead>
<tbody>
{linkedRecords.map(linkedRecord => {
// Render a check or an x depending on if the artist is on display or not.
const isArtistOnDisplay = linkedRecord.getCellValue('On Display?');
return (
<tr key={linkedRecord.id} style={{borderTop: '2px solid #ddd'}}>
<td style={{textAlign: 'center', whiteSpace: 'nowrap'}}>
<Box
display="inline-flex"
alignItems="center"
justifyContent="center"
width="16px"
height="16px"
marginRight={3}
borderRadius="100%"
backgroundColor={isArtistOnDisplay ? 'green' : 'red'}
textColor="white"
>
<Icon name={isArtistOnDisplay ? 'check' : 'x'} size={12} />
</Box>
</td>
<td style={{width: '50%'}}>
<Text marginRight={3}>{linkedRecord.name}</Text>
</td>
<td style={{width: '50%'}}>
<CellRenderer
record={linkedRecord}
field={linkedTable.getFieldByName('Attachments')}
/>
</td>
</tr>
);
})}
</tbody>
</table>
</Box>
);
}
Example #7
| Source File: index.js From apps-url-preview with MIT License | 4 votes |
|
// How this app chooses a preview to show:
//
// Without a specified Table & Field:
//
// - When the user selects a cell in grid view and the field's content is
// a supported preview URL, the app uses this URL to construct an embed
// URL and inserts this URL into an iframe.
//
// To Specify a Table & Field:
//
// - The user may use "Settings" to toggle a specified table and specified
// field constraint. If the constraint switch is set to "Yes",he user must
// set a specified table and specified field for URL previews.
//
// With a specified table & specified field:
//
// - When the user selects a cell in grid view and the active table matches
// the specified table or when the user opens a record from a button field
// in the specified table:
// The app looks in the selected record for the
// specified field containing a supported URL (e.g. https://www.youtube.com/watch?v=KYz2wyBy3kc),
// and uses this URL to construct an embed URL and inserts this URL into
// an iframe.
//
function UrlPreviewApp() {
const [isSettingsOpen, setIsSettingsOpen] = useState(false);
useSettingsButton(() => setIsSettingsOpen(!isSettingsOpen));
const {
isValid,
settings: {isEnforced, urlTable},
} = useSettings();
// Caches the currently selected record and field in state. If the user
// selects a record and a preview appears, and then the user de-selects the
// record (but does not select another), the preview will remain. This is
// useful when, for example, the user resizes the apps pane.
const [selectedRecordId, setSelectedRecordId] = useState(null);
const [selectedFieldId, setSelectedFieldId] = useState(null);
const [recordActionErrorMessage, setRecordActionErrorMessage] = useState('');
// cursor.selectedRecordIds and selectedFieldIds aren't loaded by default,
// so we need to load them explicitly with the useLoadable hook. The rest of
// the code in the component will not run until they are loaded.
useLoadable(cursor);
// Update the selectedRecordId and selectedFieldId state when the selected
// record or field change.
useWatchable(cursor, ['selectedRecordIds', 'selectedFieldIds'], () => {
// If the update was triggered by a record being de-selected,
// the current selectedRecordId will be retained. This is
// what enables the caching described above.
if (cursor.selectedRecordIds.length > 0) {
// There might be multiple selected records. We'll use the first
// one.
setSelectedRecordId(cursor.selectedRecordIds[0]);
}
if (cursor.selectedFieldIds.length > 0) {
// There might be multiple selected fields. We'll use the first
// one.
setSelectedFieldId(cursor.selectedFieldIds[0]);
}
});
// Close the record action error dialog whenever settings are opened or the selected record
// is updated. (This means you don't have to close the modal to see the settings, or when
// you've opened a different record.)
useEffect(() => {
setRecordActionErrorMessage('');
}, [isSettingsOpen, selectedRecordId]);
// Register a callback to be called whenever a record action occurs (via button field)
// useCallback is used to memoize the callback, to avoid having to register/unregister
// it unnecessarily.
const onRecordAction = useCallback(
data => {
// Ignore the event if settings are already open.
// This means we can assume settings are valid (since we force settings to be open if
// they are invalid).
if (!isSettingsOpen) {
if (isEnforced) {
if (data.tableId === urlTable.id) {
setSelectedRecordId(data.recordId);
} else {
// Record is from a mismatching table.
setRecordActionErrorMessage(
`This app is set up to preview URLs using records from the "${urlTable.name}" table, but was opened from a different table.`,
);
}
} else {
// Preview is not supported in this case, as we wouldn't know what field to preview.
// Show a dialog to the user instead.
setRecordActionErrorMessage(
'You must enable "Use a specific field for previews" to preview URLs with a button field.',
);
}
}
},
[isSettingsOpen, isEnforced, urlTable],
);
useEffect(() => {
// Return the unsubscribe function to ensure we clean up the handler.
return registerRecordActionDataCallback(onRecordAction);
}, [onRecordAction]);
// This watch deletes the cached selectedRecordId and selectedFieldId when
// the user moves to a new table or view. This prevents the following
// scenario: User selects a record that contains a preview url. The preview appears.
// User switches to a different table. The preview disappears. The user
// switches back to the original table. Weirdly, the previously viewed preview
// reappears, even though no record is selected.
useWatchable(cursor, ['activeTableId', 'activeViewId'], () => {
setSelectedRecordId(null);
setSelectedFieldId(null);
});
const base = useBase();
const activeTable = base.getTableByIdIfExists(cursor.activeTableId);
useEffect(() => {
// Display the settings form if the settings aren't valid.
if (!isValid && !isSettingsOpen) {
setIsSettingsOpen(true);
}
}, [isValid, isSettingsOpen]);
// activeTable is briefly null when switching to a newly created table.
if (!activeTable) {
return null;
}
return (
<Box>
{isSettingsOpen ? (
<SettingsForm setIsSettingsOpen={setIsSettingsOpen} />
) : (
<RecordPreviewWithDialog
activeTable={activeTable}
selectedRecordId={selectedRecordId}
selectedFieldId={selectedFieldId}
setIsSettingsOpen={setIsSettingsOpen}
/>
)}
{recordActionErrorMessage && (
<Dialog onClose={() => setRecordActionErrorMessage('')} maxWidth={400}>
<Dialog.CloseButton />
<Heading size="small">Can't preview URL</Heading>
<Text variant="paragraph" marginBottom={0}>
{recordActionErrorMessage}
</Text>
</Dialog>
)}
</Box>
);
}
