<small>Tablet Demo - Patient Triage Ordering</small>
<h2>Patient Triage List -  Lenox Hill</h2>
<h3>Dr. Baker</h3>
<p>for Thursday, December 25, 2021</p>
<div id="triage_list"></div>

BODY
{
  font-family: sans-serif;
  margin-left: 20px;
  margin-top: 10px;
  
}

P, H1, H2, H3, H4
{
  margin:   0;
}

#triage_list {
  text-align: left ;
  font-size: 16px;
  font-weight: normal;
  width: 300px;
  margin-top: 10px;
}

ul {
  padding: 0;
  transform-style: preserve-3d;
}

li {
  list-style: none;
  background-color: #3F3F3F;
  color: #fff;
  cursor: pointer;
  padding: 5px;
  /*margin: 10px 600px;*/
}

li:hover {
  opacity: .8;
}
'use strict';

console.log( React )

class ArloEmerson_RapidPrototyper_List extends React.Component {
  constructor() {
    super();
    let names = [
        'John Smith - Room 5509', 
'Oisin Crawley - Room 5515',
'Ranae DeSantis - Room 4401',
'Bill Donnelley - Room 4504',
'William Dougherty - Room 4343',
'Jim Durst - Room 3200',
'Roger Fidler - Room 6675',
'Jeff Folick - Room 6501',
'William Forrest - Room 7904'      ];

      
    names = names.map((name, index) => {
      return {
        name: name,
        key: name,
        ref: `name${index}`
      };
    });
    
    this.state = { names };
  }
  
  moveToTop(fromIndex) {
    const toIndex = 0;
    let newArray = this.state.names.slice(0);
        
    newArray.splice(toIndex, 0, newArray.splice(fromIndex, 1)[0]);
    
    this.setState({ names: newArray });
  }
  
  render() {
    return (
      <List 
        names={this.state.names} 
        onNameClick={this.moveToTop.bind(this)} />
    );
  }

}

class List extends React.Component {
  componentWillReceiveProps() {
    this.props.names.forEach( (name) => {
      const ref = this.refs[name.ref];
      const domNode = ReactDOM.findDOMNode(ref);
      const boundingBox = domNode.getBoundingClientRect();
      this.setState({ [name.key]: boundingBox });
    })
  }
  
  componentDidUpdate(previousProps) {
    previousProps.names.forEach((name) => {
      let domNode = ReactDOM.findDOMNode(this.refs[name.ref]);
      const newBox = domNode.getBoundingClientRect();
      const oldBox = this.state[name.key];
      
      const deltaY = oldBox.top - newBox.top;
      
      
      if (deltaY) {
        requestAnimationFrame(() => {
          domNode.style.transform = `translate3d(0, ${deltaY}px, 0)`;
          domNode.style.transition = 'transform 0s';
          requestAnimationFrame( () => {
            
            if (deltaY < 0) {
              setTimeout(() => {
                domNode.style.transform  = '';
                domNode.style.transition = 'transform 300ms';
              }, );
            } else {
              domNode.style.backgroundColor = 'blue';
              domNode.style.transform = `perspective(500px) translate3d(0, ${deltaY}px, 10px)`;
              domNode.style.transition = 'all 500ms';
              
              setTimeout(() => {
                domNode.style.transform = 'perspective(500px) translate3d(0, 0, 10px)';
                domNode.style.transition = 'transform 300ms';
              }, 500)

              setTimeout(() => {
                domNode.style.transform = `translate3d(0, 0, 0)`;
                domNode.style.backgroundColor = '#3F3F3F';
                domNode.style.transition = 'all 500ms';
              }, 500)
            }
          });
        });
      }
    });
  }
  
  onNameClick(index) {
    this.props.onNameClick(index);
  }
  
  renderList(names) {
    return names.map((name, index) => {
      return (
        <li 
          key={name.key} 
          ref={name.ref}
          onClick={() => {this.onNameClick(index)}}>
          {name.name}
        </li>
      );
    });
  }
  
  render() {
    return (
      <ul>
        {this.renderList(this.props.names)}
      </ul>
    );
  }
}
 
ReactDOM.render(<ArloEmerson_RapidPrototyper_List />, document.getElementById('triage_list'));
View Compiled

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

External JavaScript

  1. https://unpkg.com/react@16/umd/react.development.js
  2. https://unpkg.com/react-dom@16/umd/react-dom.development.js
  3. https://unpkg.com/@babel/standalone/babel.min.js