@airtable/blocks/ui#expandRecord JavaScript Examples

The following examples show how to use @airtable/blocks/ui#expandRecord. 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: todo-app.js    From apps-todo-list with MIT License 6 votes vote down vote up 
function Task({record, table, doneField}) {
    return (
        <Box
            fontSize={4}
            paddingX={3}
            paddingY={2}
            marginRight={-2}
            borderBottom="default"
            display="flex"
            alignItems="center"
        >
            <TaskDoneCheckbox table={table} record={record} doneField={doneField} />
            <a
                style={{cursor: 'pointer', flex: 'auto', padding: 8}}
                onClick={() => {
                    expandRecord(record);
                }}
            >
                {record.name || 'Unnamed record'}
            </a>
            <TaskDeleteButton table={table} record={record} />
        </Box>
    );
}
Example #2
Source File: FlashcardContainer.js    From apps-flashcard with MIT License 4 votes vote down vote up 
/**
 * Responsible for picking a random record from the given records.
 * Keeps track of removed records.
 */
export default function FlashcardContainer({records, settings}) {
    const [record, setRecord] = useState(_.sample(records));
    const [removedRecordsSet, setRemovedRecordsSet] = useState(new Set());
    const [shouldShowAnswer, setShouldShowAnswer] = useState(false);

    function handleRemoveRecord() {
        const newRemovedRecordsSet = new Set(removedRecordsSet);
        setRemovedRecordsSet(newRemovedRecordsSet.add(record));
        setShouldShowAnswer(false);
        handleNewRecord();
    }

    function handleNewRecord() {
        setRecord(_.sample(records.filter(r => r !== record && !removedRecordsSet.has(r))));
    }

    function reset() {
        setRemovedRecordsSet(new Set());
        // Can't use handleNewRecord here because setting state is async, so removedRecordsSet won't
        // be updated yet.
        setRecord(_.sample(records));
    }

    // Handle updating record and removedRecordsSet due to records changing
    useEffect(() => {
        const allRecordsSet = new Set(records);
        const newRemovedRecordsSet = new Set();
        for (const removedRecord of removedRecordsSet) {
            if (allRecordsSet.has(removedRecord)) {
                newRemovedRecordsSet.add(removedRecord);
            }
        }
        if (newRemovedRecordsSet.size !== removedRecordsSet.size) {
            setRemovedRecordsSet(newRemovedRecordsSet);
        }

        if (!allRecordsSet.has(record)) {
            handleNewRecord();
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [records]);

    let primaryButton;
    if (record) {
        if (shouldShowAnswer || !settings.answerField) {
            // Either already showing the answer, or there's no answer
            // field. So show the "Next" button to go to the next question.
            primaryButton = (
                <Button marginLeft={3} variant="primary" size="large" onClick={handleRemoveRecord}>
                    Next question
                </Button>
            );
        } else {
            primaryButton = (
                <Button
                    marginLeft={3}
                    variant="primary"
                    size="large"
                    onClick={() => setShouldShowAnswer(true)}
                >
                    Show answer
                </Button>
            );
        }
    } else {
        // No records left.
        primaryButton = (
            <Button marginLeft={3} variant="primary" size="large" icon="redo" onClick={reset}>
                Start over
            </Button>
        );
    }

    return (
        <Fragment>
            <Flashcard record={record} settings={settings} shouldShowAnswer={shouldShowAnswer} />
            <Box flex="none" borderTop="thick" display="flex" marginX={3} paddingY={3}>
                {record && (
                    <Button icon="expand" variant="secondary" onClick={() => expandRecord(record)}>
                        Expand record
                    </Button>
                )}
                <Box flexGrow={1} />
                {primaryButton}
            </Box>
        </Fragment>
    );
}