2018-06-11新增Modal写API

index.jpg

点击+号打开Modal、

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

interface Props {
  title: string
  processing?: boolean
  error?: string
  onClose(): void
}

interface State {
  name: string
  error: string
}

type P = WithStyles & Props

const styles = {
  inputContainer: {
    boxSizing: "border-box",
    width: 487,
    padding: "10px 25px",
  },
  btnContainer: {
    padding: "20px 25px",
    display: "flex",
    justifyContent: "flex-end",
  },
}

class EditModal extends React.Component<P, State> {
  constructor(props: P) {
    super(props)
    this.handleChange = this.handleChange.bind(this)
    this.handleSave = this.handleSave.bind(this)
    this.state = {
      name: "",
      error: null,
    }
  }
  handleChange(name: string) {
    this.setState({ name })
  }
  async handleSave() {
    this.props.onClose()
  }
  render() {
    const { classes, onClose, title, error, processing } = this.props
    const { name } = this.state
    return (
      <Modal open onClose={onClose} title={title}>
        <div className={classes.inputContainer}>
          <Input
            placeholder="Section Name"
            value={name}
            validMsg={error}
            onChange={this.handleChange}
            label="Section Name"
          />
        </div>
        <div className={classes.inputContainer}>
          <Select
            value={name}
            onChange={this.handleChange}
            label="Available Days"
          >
          <option>Every day in the week</option>
          <option>Every Sunday</option>
          </Select>
        </div>
        <div className={classes.inputContainer}>
          <Select
            value={name}
            onChange={this.handleChange}
            label="Time Available From"
          >
          <option>Every day in the week</option>
          <option>Every Sunday</option>
          </Select>
        </div>
        <div className={classes.inputContainer}>
          <Select
            value={name}
            onChange={this.handleChange}
            label="Time Available To"
          >
          <option>Every day in the week</option>
          <option>Every Sunday</option>
          </Select>
        </div>
        <div className={classes.btnContainer}>
          <ButtonGroup>
            <Button onClick={onClose}>CANCEL</Button>
            <Button intent={Intent.PRIMARY} onClick={this.handleSave} processing={processing}>
              SAVE
            </Button>
          </ButtonGroup>
        </div>
      </Modal>
    )
  }
}

export default connect(EditModal, { styles })

api-client

yarn test  
yarn install

01 打开查看列表 GET
v2/stores/4934/favorite_tabs?page=1&per_page=9999

GET

02 新增一项 POST
v2/stores/4934/favorite_tabs

POST

03 修改PUT
v2/stores/4934/favorite_tabs/75557

04 DELETE

021 查看subsection
v2/stores/4934/favorite_tabs/75557/favorite_sections?with_details=true

subsection

022新增subsection POST
v2/stores/4934/favorite_tabs/75557/favorite_sections

favorite_section:
{
id: 75565,
 name: "you1650", 
position: 2, 
favorite_tab_id: 75557, 
store_id: 4934,
updated_at: "2018-06-11T04:50:07-0400"
}

023编辑 PUT
v2/stores/4934/favorite_tabs/75557/favorite_sections/74714

024 DELETE

031 新增ITEM
v2/stores/4934/favorites
v2/stores/4934/favorite_tabs
v2/stores/4934/favorite_tabs/75557/favorite_sections