2018-04-28new modal

new modal

import * as React from "react"
import { Modal } from "components"
import { Input, ButtonGroup, Button } from "components/controls"
import { connect } from "utils"

interface Props {
  title: string
}

interface State {
  name: string
}

type P = WithStyles & Props

const styles = {
  inputContainer: {
    boxSizing: "border-box",
    width: 487,
    padding: "30px 25px",
    borderBottom: "1px solid rgba(0,0,0,0.2)",
  },
  btnContainer: {
    padding: "20px 25px",
    display: "flex",
    justifyContent: "flex-end",
  },
}

class EditModal extends React.Component<P, State> {
  constructor(props: P) {
    super(props)
    this.state = {
      name: ""
    }
  }

  render() {
    const { classes } = this.props
    return (
      <Modal open title="New Directory">
        <div className={classes.inputContainer}>
          <Input label="Directory Name"/>
          <Input label="Directory Type"/>
        </div>
        <div className={classes.btnContainer}>
          <ButtonGroup>
            <Button>Cancel</Button>
            <Button>Save</Button>
          </ButtonGroup>
        </div>
      </Modal>
    )
  }
}

export default connect(EditModal, { styles })

parent component import it

屏幕快照 2018-04-28 11.35.53.png