`BackwardCheckpointsView`

The BackwardCheckpointsView component renders a list of previous checkpoints that the underlying Store can go back to.

BackwardCheckpointsView(props: BackwardCheckpointsProps): ComponentReturnType

Type Description

	Type	Description
`props`	`BackwardCheckpointsProps`	The props for this component.
returns	`ComponentReturnType`	A rendering of the previous checkpoints, if present.

props

BackwardCheckpointsProps

The props for this component.

returns

ComponentReturnType

A rendering of the previous checkpoints, if present.

The component's props identify which previous 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 hook under the covers, which means that any changes to the checkpoint Ids in the Checkpoints object will cause a re-render.

Examples

This example creates a Checkpoints object outside the application, which is used in the BackwardCheckpointsView component by reference to render a list of previous checkpoints.

import {createCheckpoints, createStore} from 'tinybase';
import {BackwardCheckpointsView} from 'tinybase/ui-react';
import React from 'react';
import {createRoot} from 'react-dom/client';

const store = createStore().setTable('pets', {fido: {color: 'brown'}});
const checkpoints = createCheckpoints(store);
const App = () => (
  <div>
    <BackwardCheckpointsView checkpoints={checkpoints} separator="/" />
  </div>
);

const app = document.createElement('div');
createRoot(app).render(<App />);
console.log(app.innerHTML);
// -> '<div></div>'

checkpoints.setCheckpoint('0', 'initial');
store.setCell('pets', 'fido', 'species', 'dog');
checkpoints.addCheckpoint('identified');
console.log(app.innerHTML);
// -> '<div>initial</div>'

store.setCell('pets', 'fido', 'sold', true);
checkpoints.addCheckpoint('sale');
console.log(app.innerHTML);
// -> '<div>initial/identified</div>'

This example creates a Provider context into which a default Checkpoints object is provided. The BackwardCheckpointsView component within it then renders the list of previous checkpoints (with Ids for readability).

import {BackwardCheckpointsView, Provider} from 'tinybase/ui-react';
import {createCheckpoints, createStore} from 'tinybase';
import React from 'react';
import {createRoot} from 'react-dom/client';

const App = ({checkpoints}) => (
  <Provider checkpoints={checkpoints}>
    <Pane />
  </Provider>
);
const Pane = () => (
  <div>
    <BackwardCheckpointsView debugIds={true} />
  </div>
);

const store = createStore().setTable('pets', {fido: {color: 'brown'}});
const checkpoints = createCheckpoints(store);

checkpoints.setCheckpoint('0', 'initial');
store.setCell('pets', 'fido', 'species', 'dog');
checkpoints.addCheckpoint('identified');
store.setCell('pets', 'fido', 'sold', true);
checkpoints.addCheckpoint('sale');

const app = document.createElement('div');
const root = createRoot(app);
root.render(<App checkpoints={checkpoints} />);
console.log(app.innerHTML);
// -> '<div>0:{initial}1:{identified}</div>'

import {
  BackwardCheckpointsView,
  CheckpointView,
  Provider,
} from 'tinybase/ui-react';
import {createCheckpoints, createStore} from 'tinybase';
import React from 'react';
import {createRoot} from 'react-dom/client';

const App = ({checkpoints}) => (
  <Provider checkpoints={checkpoints}>
    <Pane />
  </Provider>
);
const getBoldProp = (checkpointId) => ({bold: checkpointId == '0'});
const Pane = () => (
  <div>
    <BackwardCheckpointsView
      checkpointComponent={FormattedCheckpointView}
      getCheckpointComponentProps={getBoldProp}
    />
  </div>
);
const FormattedCheckpointView = ({checkpoints, checkpointId, bold}) => (
  <span>
    {bold ? <b>{checkpointId}</b> : checkpointId}
    {': '}
    <CheckpointView
      checkpoints={checkpoints}
      checkpointId={checkpointId}
    />
  </span>
);

const store = createStore().setTable('pets', {fido: {color: 'brown'}});
const checkpoints = createCheckpoints(store);

checkpoints.setCheckpoint('0', 'initial');
store.setCell('pets', 'fido', 'species', 'dog');
checkpoints.addCheckpoint('identified');
store.setCell('pets', 'fido', 'sold', true);
checkpoints.addCheckpoint('sale');

const app = document.createElement('div');
const root = createRoot(app);
root.render(<App checkpoints={checkpoints} />);
console.log(app.innerHTML);
// -> '<div><span><b>0</b>: initial</span><span>1: identified</span></div>'

Since

v1.0.0