How to Implementation

This example is based on the list introduced in the basic example.

If you have not seen the basic example yet, please look over it first.

Step 1

Add custom state for adding or removing item.

const state = {
  $list1: createState({
    lastId: 0  // last loaded item id
  })
};
        

Step 2

Add custom actions for adding or removing item.

const actions = {
  $list1: createActions({
    addItem: () => (state, actions) => {
      const items = state.items;
      const nextId = state.lastId + 1;
      items.unshift({ id: nextId, name: `foo ${nextId}` });
      actions.setLastId(nextId);
      return { items };
    },
    removeItem: (id) => (state, actions) => {
      return {
        items: state.items.filter((item) => item.id !== id) 
      };
    },
    setLastId: (lastId) => ({ lastId })
  })
};
        

Step 3

Create close button component.

const CloseButton = ({ id }) => (state, actions) => (
  <a href="javascript:void(0)"
    style={{
      background: '#f88',
      border: 'solid 1px #f00',
      color: '#fff',
      textDecoration: 'none',
      fontSize: '1em',
      fontWeight: 'bold',
      width: '1.5em',
      height: '1.5em',
      lineHeight: '1.5em',
      textAlign: 'center',
      position: 'absolute',
      top: '10px',
      right: '10px'
    }}
    innerHTML="✘"
    onclick={(ev) => {
      // parent = item element
      const itemElement = ev.currentTarget.parentNode;
      itemElement.addEventListener('transitionend', () => { 
        // remove item element when the item becomes completely transparent.
        actions.$list1.removeItem(id);
      });
      itemElement.style.opacity = '0';
    }}
  ></a>
);
        

Receive id prop from parent component.

Create the close button component as Lazy component to perform actions within the component.

In the onclick handler of close button component, the item element will be transparent with animation, and the item element will removed when the item becomes completely transparent.

Step 4

Add the close button component to the item component.

const List = createList(
  ({ id, name }) => (
    <div key={id} style={{
      width: '100%',
      padding: '10px',
      textAlign: 'center',
      borderBottom: (id === 1) ? 'none' : 'solid 1px #222',
      opacity: '1',
      transition: 'opacity 300ms, transform 300ms, top 200ms' 
    }}
    oncreate={(element) => {
      element.style.transform = 'translateX(-100%)';
      setTimeout(() => {
        element.style.transform = 'translateX(0)';
      }, 200);
    }}
    >
      <CloseButton id={id} />
      <div>id: {id}</div>
      <div>name: {name}</div>
    </div>
  )
);
        

Add transition setting to items style.

Change transform in the onCreate event handler (slide in from the left).

Place the close button component as a child element of the item element, and set id prop.

Step 5

Set lastId of custom state at initialization.

const main = app(state, actions, view, document.getElementById('list'));
const items = [];
for (let i = 1; i <= 1000; i++) {
  items.unshift({ id: i, name: `foo ${i}` });
}
main.$list1.setItems(items);
main.$list1.setLastId(1000);