1 参考Input组件

import * as React from 'react'
import { connect, Classes } from 'utils'

const styles = {
  input: {
    outline: 'none',
    border: 'none',
    borderRadius: 3,
    boxShadow: 'inset 0 0 0 1px rgba(16,22,26,0.15), inset 0 1px 1px 0 rgba(16,22,26,0.20);',
    background: '#fff',
    height: 40,
    padding: '0 10px',
    verticalAlign: 'middle',
    lineHeight: 40,
    color: '#182026',
    fontSize: 16,
    fontWeight: 400,
    transition: 'box-shadow 100ms cubic-bezier(0.4, 1, 0.75, 0.9)',
    appearance: 'none',
    "&::placeholder": {
      color: 'rgba(92,113,128,0.5)'
    }
  }
}

interface Props {
  type: string;
  name: string;
  placeholder: string;
  onChange: (event: React.ChangeEvent<HTMLInputElement>)=> void;
  classes: Classes;
}

function Input({type, name, onChange, classes, placeholder}: Props){
  return (
    <input
      type={type}
      name={name}
      placeholder={placeholder}
      onChange={onChange}
      className={classes.input}
    />
  )
}

export default connect(Input, {styles})

得出最简单的 多行文本组件

// import * as cs from "classnames"
import * as React from "react"
import { connect } from "utils"
// import { label as labelStyle, ctrl as ctrlStyle, staticStyle } from "./styles"

const styles = {
  textArea: {
    backgroundColor: "#f7f7f7",
    border: "none",
    resize: "none",
  },
}

interface Props {
  name: string
  rows: number
  cols: number
  placeholder: string
  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void
  classes?: Classes
}

function TextArea({name, rows, cols, onChange, classes, placeholder}: Props) {
  return (
    <textarea
      name={name}
      rows={rows}
      cols={cols}
      placeholder={placeholder}
      onChange={onChange}
      className={classes.textArea}
    />
  )
}

export default connect(TextArea, {styles})

TODO2： 添加label 🖍
Todo3: 添加修改表单事件

2 修改旧版本的 chain stores are not correct display in stock transfer importer

屏幕快照 2018-01-10 18.21.11.png

https://bindo.slack.com/archives/C84DFM83B/p1515573262000302

/src/app/shared/factory/dashboardFactory.js getChainInfo   
/src/app/modules/stock_transfers/index.js   DashboardFactory

// index.js
import { StockTransferController } from './stockTransferController'
import { StockTransferFactory } from './stockTransferFactory'
import { StockTransferNewController } from './stockTransferNewController'
import { StockTransferViewController, ShippingTransferContorller, FulfillingTransferContorller } from './stockTransferViewController'

export default angular
  .module('stock_transfers', [])
  .config(function ($stateProvider) {
    'ngInject';

    $stateProvider
      .state('app.dashboard.stock-transfers', {
        abstract: true,
        url: '/stock-transfers',
        template: '<ui-view />',
        resolve: {
          store_transfer: function(DashboardFactory, $q, $stateParams) {
            var deferred = $q.defer();
            DashboardFactory.getChainInfo($stateParams.store_id).success(function(res) {
              try {
                deferred.resolve(res.chain_info.allow_store_transfer.current);

              } catch(e) {
                console.warning(e);
                deferred.resolve([]);
              }

            }).error(function(e) {
              console.log('e', e);
              deferred.resolve(null);
            });

            return deferred.promise;
          },
        }
      })
      .state('app.dashboard.stock-transfers.index', {
        url: '?page&count&filters',
        templateUrl: 'app/modules/stock_transfers/list_stock_transfers.html',
        controller: 'StockTransferController'
      })
      .state('app.dashboard.stock-transfers.new', {
        url: '/new?type',
        templateUrl: 'app/modules/stock_transfers/new_stock_transfer.html',
        controller: 'StockTransferNewController',
      })
      .state('app.dashboard.stock-transfers.view', {
        url: '/:id',
        templateUrl: 'app/modules/stock_transfers/view_stock_transfer.html',
        controller: 'StockTransferViewController'
      })
  })
  .controller('StockTransferController', StockTransferController)
  .controller('StockTransferNewController', StockTransferNewController)
  .factory('StockTransferFactory', StockTransferFactory)
  .controller('StockTransferViewController', StockTransferViewController)
  .controller('ShippingTransferContorller', ShippingTransferContorller)
  .controller('FulfillingTransferContorller', FulfillingTransferContorller)