ForwardCheckpointsView
The ForwardCheckpointsView component renders a list of future checkpoints that the underlying Store can go forwards to.
ForwardCheckpointsView(props: ForwardCheckpointsProps): ComponentReturnType| Type | Description | |
|---|---|---|
props | ForwardCheckpointsProps | The props for this component. |
| returns | ComponentReturnType | A rendering of the future checkpoints, if present. |
The component's props identify which future checkpoints to render based on the Checkpoints object (which is either the default context Checkpoints object, a named context Checkpoints object, or an explicit reference).
This component renders a list by iterating over each checkpoints. By default these are in turn rendered with the CheckpointView component, but you can override this behavior by providing a checkpointComponent prop, a custom component of your own that will render a checkpoint based on CheckpointProps. You can also pass additional props to your custom component with the getCheckpointComponentProps callback prop.
This component uses the useCheckpointIds primitive under the covers, which means that any changes to the checkpoint Ids in the Checkpoints object 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 {ForwardCheckpointsView} 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');
ForwardCheckpointsView({checkpoints});
dispose();
});
Since
v8.3.0