Voxxed Days Ticino 2016 - Code Snippets

component-composition-2.js

function compose (...fns) {
  return (Comp, props, children) => 
    fns.reduceRight((child, fn) => 
      fn.call(
        null,
        child ? child : React.createElement(Comp, props, children)
      ), null
  )
}

const Label = (props) => <span>{props.children}</span>

const b = i => <b>{i}</b>
const i = i => <i>{i}</i>
const u = i => <u>{i}</u>

const italicH1 = compose(b, i, u)
var output = italicH1(Label, null, 'Wade Wilson')

const App = () => <div>{output}</div>
ReactDOM.render(<App />, document.getElementById('root'))

Component-composition.js

function compose (...fns) {
  return (...args) => 
    fns.reduceRight((child, fn) => 
      fn.apply(null, child ? [child] : args), null
    )
}

const b = i => <b>{i}</b>
const i = i => <i>{i}</i>
const u = i => <u>{i}</u>

const italicH1 = compose(b, i, u)
var output = italicH1('Wade Wilson')

const App = () => <div>{output}</div>
ReactDOM.render(<App />, document.getElementById('root'))

hoc-preloader.js

function Preloader(Component, condition, Placeholder) {
  let conditionSatisfied

  const Wrapper = (props, context) => {
    conditionSatisfied = condition(props, context)
    
    if (!conditionSatisfied) {
      return React.createElement(Placeholder)
    }
    return React.createElement(Component, {...props})
  }
  
  Wrapper.wrappedComponent = Component
  return Wrapper 
}

const Wrapped = () => <i className="fa fa-search fa-4x"></i>

const LoaderIcon = () => <i className="fa fa-refresh fa-spin fa-4x"></i>
const condition = (props, context) => !props.loading
const PreloadedIcon = Preloader(Wrapped, condition, LoaderIcon)

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { loading: true }
  }
  
  componentWillMount() {
    setTimeout(
      () => this.setState({ loading: false }),
      3000
    )
  }
  
  render() {
    return (
      <button>
        <PreloadedIcon loading={this.state.loading} />
      </button>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

hoc-provider-subscriber.js

// inspireb by Michele Bertoli (https://github.com/MicheleBertoli)

class Provider extends React.Component {

  getChildContext() {
    return {
      sharedData: this.props,
    }
  }

  render() {
    return this.props.children
  }
}

Provider.childContextTypes = {
  sharedData: React.PropTypes.object,
}

// -------------------------------------------
// -------------------------------------------

const subscribe = (Component) => {

  class Subscribed extends React.Component {

    propExists(prop) {
      return this.props[prop]
    }

    contextIsValid(prop) {
      // propTypes[propName](props, propName, componentName, location)
      return !Component.propTypes[prop](this.context.sharedData, prop)
    }

    contextToProps() {
      return Object.keys(Component.propTypes)
        .reduce((props, prop) => {
          if (!this.propExists(prop) && this.contextIsValid(prop)) {
            props[prop] = this.context.sharedData[prop]
          }
          return props
        }, {})      
    }

    render() {
      return React.createElement(
        Component,
        Object.assign({}, this.contextToProps(), this.props)
      )
    }
  }
  
  Subscribed.contextTypes = {
    sharedData: React.PropTypes.object,
  }
  
  Subscribed.wrappedComponent = Component
  
  return Subscribed
}

// -------------------------------------------
// -------------------------------------------


const Wrapped = ({ label }) => {
  return (
    <span>
      <i className="fa fa-search fa-4x"></i>
      &nbsp; <b>{label}</b>
    </span>
  )
}

Wrapped.propTypes = {
  label: React.PropTypes.string
}

const SubscribedIcon = subscribe(Wrapped)

class App extends React.Component {
  render() {
    return (
      <Provider label="I'm an icon">
        <SubscribedIcon />
      </Provider>
    )
  }
} 

ReactDOM.render(<App />, document.getElementById('root'))

hoc-static-methods.js

// see https://github.com/mridgway/hoist-non-react-statics/

var REACT_STATICS = {
    childContextTypes: true,
    contextTypes: true,
    defaultProps: true,
    displayName: true,
    getDefaultProps: true,
    mixins: true,
    propTypes: true,
    type: true
};

var KNOWN_STATICS = {
    name: true,
    length: true,
    prototype: true,
    caller: true,
    arguments: true,
    arity: true
};

function hoistStatics(target, source) {
  return Object.getOwnPropertyNames(source)
    .filter((key) => !REACT_STATICS[key] && !KNOWN_STATICS[key])
    .reduce((target, key) => {
      try {
        target[key] = source[key]
      } catch (e) {}
      return target
    }, target)
}

function padding(Component) {
  class Wrapper extends React.Component {
    render() {
      const style = { padding: 20 }
      return (
        <div style={style}>
          <Component {...this.props}/>
        </div>
      )
    }
  }
  Wrapper.wrappedComponent = Component
  return hoistStatics(Wrapper, Component)
}

const Wrapped = () => <i className="fa fa-search fa-4x"></i>
Wrapped.hello = function() {
  console.log('Hello!')
}
const PaddedIcon = padding(Wrapped)

class App extends React.Component {
  
  sayHello() {
    PaddedIcon.hello()
  }
  
  render() {
    return (
      <button onClick={this.sayHello}>
        <PaddedIcon />
      </button>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

hoc-wrapped-component.js

// inspireb by Michele Bertoli (https://github.com/MicheleBertoli)

function padding(Component) {
  class Wrapper extends React.Component {
    render() {
      const style = {
        padding: 20,
        backgroundColor: 'lightblue'
      }
      return (
        <div style={style}>
          <Component {...this.props}/>
        </div>
      )
    }
  }
  Wrapper.wrappedComponent = Component
  return Wrapper
}

const Wrapped = () => <i className="fa fa-search fa-4x"></i>

const PaddedIcon = padding(Wrapped)

const App = () => <div><PaddedIcon /></div>
ReactDOM.render(<App />, document.getElementById('root'))