@airtable/blocks/ui#SwitchSynced JavaScript Examples

The following examples show how to use @airtable/blocks/ui#SwitchSynced. 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: SettingsForm.js    From apps-base-schema with MIT License 5 votes vote down vote up 
/**
 * 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>
    );
}