CheckpointView
The CheckpointView component simply renders the label of a checkpoint.
CheckpointView(props: CheckpointProps): ComponentReturnType| Type | Description | |
|---|---|---|
props | CheckpointProps | The props for this component. |
| returns | ComponentReturnType | A rendering of the checkpoint: its label if present, or |
The component's props identify which checkpoint to render based on Checkpoint Id and Checkpoints object (which is either the default context Checkpoints object, a named context Checkpoints object, or an explicit reference).
The primary purpose of this component is to render multiple checkpoints in a BackwardCheckpointsView component or ForwardCheckpointsView component.
This component uses the useCheckpoint primitive under the covers, which means that any changes to the local Row Ids in the Relationship will cause an update.
Example
This example creates the TinyBase objects needed by the Solid primitive or component and calls it from within a reactive root.
import {createRoot} from 'solid-js';
import {
createCheckpoints,
createIndexes,
createMetrics,
createQueries,
createRelationships,
createStore,
} from 'tinybase';
import {CheckpointView} from 'tinybase/ui-solid';
createRoot((dispose) => {
const store = createStore()
.setTables({
pets: {
fido: {species: 'dog', color: 'brown', next: 'felix'},
felix: {species: 'cat', color: 'black'},
},
species: {dog: {price: 5}, cat: {price: 4}},
})
.setValues({open: true});
const metrics = createMetrics(store).setMetricDefinition(
'highestPrice',
'species',
'max',
'price',
);
const indexes = createIndexes(store).setIndexDefinition(
'bySpecies',
'pets',
'species',
);
const relationships = createRelationships(store)
.setRelationshipDefinition('petSpecies', 'pets', 'species', 'species')
.setRelationshipDefinition('nextPet', 'pets', 'pets', 'next');
const queries = createQueries(store).setQueryDefinition(
'petColors',
'pets',
({select, where, param}) => {
select('color');
where((getCell) => getCell('species') == param('species'));
},
{species: 'dog'},
);
const checkpoints = createCheckpoints(store);
store.setCell('pets', 'fido', 'color', 'walnut');
checkpoints.setCheckpoint('updated color');
metrics.getMetric('highestPrice');
indexes.getSliceIds('bySpecies');
relationships.getRemoteRowId('petSpecies', 'fido');
queries.getResultRowIds('petColors');
CheckpointView({checkpointId: '0', checkpoints});
dispose();
});
Since
v8.3.0