srph

<template>
  <autocomplete>
    <autocomplete-input slot-scope="props" @input="props.onInput" :value="props.value">
    </autocomplete-input>
  </autocomplete>
</template>

srph

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
  export default {
    name: 'autocomplete',
    provide() {

srph

import React, {Component} from 'react'

class Column extends Component {
  state = {
    list: [], // Let's pretend this is filled by some AJAX request
    sorting: 0,
    sorted: []
  }

  filter(sorting) {

srph

import React, {Component} from 'react'
import SortingLayer from './SortingLayer'

class Column extends Component {
  state = {
    list: [], // Let's pretend this is filled by some AJAX request
    sorting: 0
  }

  render() {

srph

<SortingLayer list={list} sort={sort}>
  {(list) => (
    list.map((item, i) => (
      <div key={i}>
        {item.title}
      </div>
    ))
  )}
</SortingLayer>

srph

class MyComponent extends React.Component {
  render() {
    const {fullName} = this.props.computed
  }
}

export default computed({
  fullName(state, props) {
    return `${props.user.firstName} ${props.user.lastName}`
  }

srph

Stack Manager

We want a component that handles modal stack, which would allow us to:

• Properly set z-index for modals
• Close modals properly (e.g., on escape)

<StackManager self={this}>
  {(n, handler) => (
 

srph

import {confirm, Confirm, ConfirmNode} from 'react-confirm';

// Root
<Confirm />

// Event handler
confirm('hi');

// In case you need to check if it's open or not

srph

import React, {Component} from 'react';

export default class AssignedMembersWidget extends Component {
  state = {
    // List of users to select from
    selection: [],
    fetching: false
  }

  componentDidMount() {

srph

import React, {Component} from 'react'

export default class AssignedMembersWidget extends Component {
  state = {
    selection: [],
    fetching: false,
    error: '',
    loading: false
  }