Exemplo n.º 1
0
    render(){

      let showBooks = this.state.searchBooks;
      showBooks.sort(sortBy('name'))
        return(

            <div className="search-books">
            <div className="search-books-bar">
                <Link className="close-search" to="/" >Close</Link>
              <div className="search-books-input-wrapper">

                <DebounceImput
                  element="input" 
                  debounceTimeout={250}
                  type="text" 
                  placeholder="Search by title or author" 
                  value={this.state.query}
                  onChange={(event) => this.updateQuery(event.target.value)}
                />
              </div>
            </div>
            <div className="search-books-results">
            <BookShelves 
                books={showBooks} 
                bookShelf={this.props.bookShelf}
                changeShelf={this.props.changeShelf}
                /> 
            </div>
          </div>
        )
    }
Exemplo n.º 2
0
  render() {
    const { contacts, onDeleteContact }  = this.props
    const { query } = this.state

   let showingContacts
   if (query) {
     const match = new RegExp(escapeRegExp(this.state.query), 'i')
     showingContacts = contacts.filter((contact) => match.test(contact.name))
   } else {
     showingContacts = contacts
   }

   showingContacts.sort(sortBy('name'))

    return (
      <div className='list-contacts'>
        <div className='list-contacts-top'>
          <input
            className='search-contacts'
            type='text'
            placeholder='Search contacts'
            value={this.state.query}
            onChange={(event) => this.updateQuery(event.target.value)}
          />
          <Link
            to="/create"
            className='add-contact'
            >Add Contact</Link>
        </div>

        {showingContacts.length !== contacts.length && (
          <div className='showing-contacts'>
            <span>Now showing {showingContacts.length} of {contacts.length} total</span>
            <button onClick={this.clearQuery}>Show all</button>
          </div>
        )}
        <ol className='contact-list'>
          {showingContacts.map((contact) => (
            <li key={contact.id} className='contact-list-item'>
              <div className='contact-avatar' style={{
                backgroundImage: `url(${contact.avatarURL})`
              }}/>
              <div className='contact-details'>
                <p>{contact.name}</p>
                <p>{contact.email}</p>
              </div>
              <button onClick={() => onDeleteContact(contact)} className='contact-remove'>
                Remove
              </button>
            </li>
          ))}
        </ol>
      </div>

    )
  }
Exemplo n.º 3
0
 render() {
   const { contract } = this.props
   return (
     <div className="methods">
       {contract.abiDocs.sort(sortBy('type', 'name')).map((method) => {
         return <Method key={`${contract.name}${method.signature}`} method={method} contract={contract} />
       })}
     </div>
   )
 }
Exemplo n.º 4
0
 var mappedCategories = categories.map(function(cat) {
      cat.values.sort(sortBy('status', 'name'));
      var viewTechList = cat.values.map(function(tech)
      {
          var status = jsonQuery('[id=' + tech.status +']', {
                  data: statusList
              }).value;
          var newTech = tech;
          newTech.status = status.name;
          return newTech;
      });
      cat.values = viewTechList;
      return cat;
   });
Exemplo n.º 5
0
function mapStateToProps(state) {
  const isAdmin = state.auth.user.role === 'admin';

  let dataSource = state.clients.results
    .filter(x => isAdmin || state.auth.user.clients.includes(x.clientId))
    .sort(sortBy('contact.lastName'));

  const gridConfig = {
    dataSource,
  };
  return {
    isAdmin,
    gridConfig,
  };
}
Exemplo n.º 6
0
function Menu() {
  const items = DATA.items
    .filter(item => item.type === 'mexican')
    .sort(sortBy('name'))
    .map(item => <li key={item.id}>{item.name}</li>)

  return (
    <div>
      <h1>{DATA.title}</h1>
      <ul>
        {items}
      </ul>
    </div>
  )
}
Exemplo n.º 7
0
  render() {
    const { books, onMoveBooksToAnotherCategory, title, getBookById } = this.props
    books.sort(sortBy('title'))

    return (


            <div>
              <div className="bookshelf">
                <h2 className="bookshelf-title">{title}...</h2>
                <div className="bookshelf-books">


                  <ol className="books-grid">

                    {
                      books.map((book) => (
                        <Book
                          book={book ? book : null}
                          key={book.id}
                          onMoveBooksToAnotherCategory={onMoveBooksToAnotherCategory}
                          getBookById={getBookById}
                         />
                      ))
                    }



                  </ol>

                </div>
              </div>
            </div>



    )
  }
Exemplo n.º 8
0
  orderBy(...fields) {
    const sortComparator = sortBy(...fields);

    return this.sort(sortComparator);
  }
Exemplo n.º 9
0
function tranformItems() {
  return DATA.items.filter((item) => {
    return item.type === 'mexican';
  }).sort(sortBy('name'));
}
Exemplo n.º 10
0
 { books: { $apply: (books) => { return books.sort(sortBy(sortByAttribute)) } },
Exemplo n.º 11
0
 _getSubtopics() {
   const topic = this.props.topics[this.props.id];
   return (topic.narrower||[]).sort(by('name')).map(t =>
     <Topic key={t.id} id={t.id} name={t.name} topics={this.props.topics} />
   );
 }
    { id: 3, name: 'tostada', type: 'mexican' },
    { id: 4, name: 'hush puppies', type: 'southern' }
  ]
};

var Menu = React.createClass({

  getInitialState() {
    return DATA;
  },

  render() {

    var list = this.state.items
    .filter(item => item.type === 'mexican')
    .sort(sortBy('name'))
    .map(item => <li key={item.id}>{item.name}</li>);

    return (
      <div>
        <h1>{this.state.title}</h1>
        <ul>
          {list}
        </ul>
      </div>
    );
  }
});

var App = React.createClass({
  render() {
Exemplo n.º 13
0
 sortTalksBy (...params) {
   if (params.length === 0) params = ['-number']
   this.setState({talks: this.state.talks.sort(sortBy(...params))})
 }
  render() {
    let postagens = this.props.postagens.postagens

    postagens.sort(sortBy(`-${this.state.ordem}`))

    return (
      <section className="posts-table-wrapper">
        <div className="h3-wrapper">
          <h3>Todas as postagens</h3>
          <div className="input-group mb-3 col-3">
            <div className="input-group-prepend">
              <label className="input-group-text" htmlFor="inputGroupSelect01">Ordenar por</label>
            </div>
            <select className="form-control" onChange={this.handleSelecionarOrdem}>
              <option value="voteScore">Votos</option>
              <option value="timestamp">Data</option>
            </select>
          </div>
          <button className="btn btn-default"><Link to="/postagem/criar">Nova Postagem</Link></button>
        </div>
        <Table responsive>
          <thead>
            <tr>
              <th>Título</th>
              <th>Categoria</th>
              <th>Autor</th>
              <th>Data</th>
              <th>Comentários</th>
              <th>Votos</th>
              <th>Ações</th>
            </tr>
          </thead>
          <tbody>
            {postagens !== undefined && postagens.map((postagem) => {
              return (
                <tr key={postagem.id}>
                  <td>{postagem.title}</td>
                  <td>{postagem.category}</td>
                  <td>{postagem.author}</td>
                  <td>{Moment.unix(postagem.timestamp/1000).format('DD/MM/YYYY')}</td>
                  <td>{postagem.commentCount}</td>
                  <td>
                    <span style={{ 'marginRight':'5px' }}>{postagem.voteScore}</span>
                  </td>
                  <td>
                    <button className="btn btn-success" onClick={() => this.handleVotar(postagem.id, 'upVote')}>
                      <span className="glyphicon glyphicon-thumbs-up"/>
                    </button>
                    <button className="btn btn-warning" onClick={() => this.handleVotar(postagem.id, 'downVote')}>
                      <span className="glyphicon glyphicon-thumbs-down"/>
                    </button>
                    <Link className='btn btn-default' to={`/${postagem.category}/${postagem.id}`}>
                      <span className="glyphicon glyphicon-zoom-in"/>
                    </Link>
                    <Link className='btn btn-primary' to={`/${postagem.category}/${postagem.id}/editar`}>
                      <span className="glyphicon glyphicon-pencil"/>
                    </Link>
                    <button className='btn btn-danger' onClick={() => this.handleExcluirPostagem(postagem.id)}>
                      <span className="glyphicon glyphicon-trash"/>
                    </button>
                  </td>
                </tr>
              )
            })}
          </tbody>
        </Table>
      </section>
    )
  }
Exemplo n.º 15
0
    }
  },

  componentDidMount() {
    login((err, auth) => {
      this.setState({ auth })
      subscribeToMessages((messages) => {
        this.setState({ messages })
      })
    })
  },

  groupMessages(messages) {
    const sortedMessages = messages
      .filter(m => (/\S/).test(m.text)) // Only keep non-empty messages
      .sort(sortBy('timestamp')) // Sort by timestamp

    // Group subsequent messages from the same sender.
    const messageGroups = []

    let lastMessage, currentMessageGroup
    sortedMessages.forEach(message => {
      if (lastMessage && lastMessage.uid === message.uid) {
        currentMessageGroup.push(message)
      } else {
        if (currentMessageGroup)
          messageGroups.push(currentMessageGroup)

        currentMessageGroup = [ message ]
      }
Exemplo n.º 16
0
        <h2>{tune.name}</h2>
        <Link to={`/tune/${tuneId}/edit`}>(Edit)</Link>
        <h3>
          {[tune.composer, tune.year].filter(Boolean).join('; ')}
        </h3>
        {date != null && <h4>Last Practiced: {date}</h4>}

        <SelectLists tune={tune} />

        <button
          onClick={this.handlePractice}
          type="button"
	  style={{ marginTop: '2em' }}
        >
          Mark practice
        </button>

	{false && (
        <Notes
	  notes={tune.notes.sort(sortBy('-createdDate'))}
	  tuneId={tuneId}
	  {...noteActionCreators}
	/>
	)}
      </article>
    );
  }
});

export default connect()(Tune);
Exemplo n.º 17
0
export default function DirectoryListing({ filename, entry, entries }) {
  const rows = [];

  if (filename !== '/') {
    rows.push(
      <tr key="..">
        <td css={styles.tableCell}>
          <a title="Parent directory" href="../">
            ..
          </a>
        </td>
        <td css={styles.tableCell}>-</td>
        <td css={styles.tableCell}>-</td>
        <td css={styles.tableCell}>-</td>
      </tr>
    );
  }

  const matchingEntries = getMatchingEntries(entry, entries);

  matchingEntries
    .filter(({ type }) => type === 'directory')
    .sort(sortBy('name'))
    .forEach(({ name }) => {
      const relName = getRelativeName(entry.name, name);
      const href = relName + '/';

      rows.push(
        <tr key={name}>
          <td css={styles.tableCell}>
            <a title={relName} href={href}>
              {href}
            </a>
          </td>
          <td css={styles.tableCell}>-</td>
          <td css={styles.tableCell}>-</td>
          <td css={styles.tableCell}>-</td>
        </tr>
      );
    });

  matchingEntries
    .filter(({ type }) => type === 'file')
    .sort(sortBy('name'))
    .forEach(({ name, size, contentType, lastModified }) => {
      const relName = getRelativeName(entry.name, name);

      rows.push(
        <tr key={name}>
          <td css={styles.tableCell}>
            <a title={relName} href={relName}>
              {relName}
            </a>
          </td>
          <td css={styles.tableCell}>{contentType}</td>
          <td css={styles.tableCell}>{formatBytes(size)}</td>
          <td css={styles.tableCell}>{lastModified}</td>
        </tr>
      );
    });

  return (
    <div>
      <table
        css={{
          width: '100%',
          borderCollapse: 'collapse',
          font: '0.85em Monaco, monospace'
        }}
      >
        <thead>
          <tr>
            <th css={styles.tableHead}>Name</th>
            <th css={styles.tableHead}>Type</th>
            <th css={styles.tableHead}>Size</th>
            <th css={styles.tableHead}>Last Modified</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((row, index) =>
            React.cloneElement(row, {
              style: index % 2 ? undefined : styles.evenRow
            })
          )}
        </tbody>
      </table>
    </div>
  );
}
Exemplo n.º 18
0
  },

  getInitialState () {
    // Create an object with column names as keys
    const filterQuery = this.props.columns.map(column => column.name)
      .reduce((columns, i) => {
        columns[i] = '';
        return columns;
      }, {});

    return {
      sortBy: {
        column: this.props.defaultSort,
        direction: ''
      },
      filteredData: this.props.data.sort(sortBy(this.props.defaultSort)),
      filterQuery,
      pagination: {
        page: 0,
        perPage: 10
      }
    };
  },

  handleFilter (filterQuery) {
    this.setState({ filterQuery }, this.filterData);
  },

  handleFilterReset () {
    // doesn't clear select filters
    this.setState({ filterQuery: this.getInitialState().filterQuery }, this.filterData);