mzabriskie

Dialog Components

The purpose of this document is to help define the components that comprise Instructure UI's dialog components. Dialog components typically render outside the context of the application and are the primary focal point when rendered.

This represents the current state of things.

Building Blocks

These are the low-level components needed for dialogs.

mzabriskie

Portal Component Refactor

Proposal for how to refactor InstUI's use of <Portal />.

The Problem

There are several issues with how <Portal /> is currently being used.

1. We have two versions of <Portal /> in our code base. A version that we wrote ourselves and a version packaged with react-overlays. This causes unecessary overhead.
2. There are inconsistencies with the developer facing API for how to specify the trigger and the content for components that use a ``. This makes it confusing as the usage of these components is not predictable.

mzabriskie

// Which is the best practice for React?
// This needs to be compatible with RequireJS.

module.exports = {
  externals: {
    'react': 'React',
    'react-dom': 'ReactDOM'
  },
  
  // - OR -

mzabriskie

OSS Projects I've made at Instructure

• https://github.com/mzabriskie/pdf-text.js
• https://github.com/mzabriskie/pkg-version
• https://github.com/mzabriskie/create-stylesheet
• https://github.com/mzabriskie/rackt-cli
• https://github.com/mzabriskie/react-flipcard
• https://github.com/instructure/pdf-annotate.js
• https://github.com/instructure/instructure-ui
• https://github.com/instructure/tinymce-mediauploader

mzabriskie

React Props Proposal

First read these tweets:

• https://twitter.com/floydophone/status/491319008130392064
• https://twitter.com/mzabriskie/status/491350457395068928

and this doc:

• http://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html

mzabriskie

// Welcome! require() some modules from npm (like you were using browserify)
// and then hit Run Code to run your code on the right side.
// Modules get downloaded from browserify-cdn and bundled in your browser.
'use strict';

/*
Pre Babel

import axios from 'axios'

mzabriskie

Example use of <FormField/>:

<FormField label="Username" errors={['Cannot be left blank']}>
  <input type="text" name="username" value=""/>
</FormField>

This renders something like:

mzabriskie

import axios from 'axios';

if (typeof GM_xmlhttpRequest === 'function') {
  import GMAdapter from './GMAdapter';
  axios.defaults.adapter = GMAdapter;
}

export default axios;

mzabriskie

import axios from 'axios';

axios.defaults.adapter = (resolve, reject, config) => {
  let data = null;
  let status = 200;
  let headers = {};

  // Here you would check some registry of request URLs for response
  // This would allow you to determine resolve/reject
  // Also what is the actual data for the response

mzabriskie

function duration(timeInMillis) {
    var intervals = {
            'h': 3600000,
            'm': 60000,
            's': 1000,
            'ms': 1
        },
        sb = '';
        
    for (var k in intervals) {