Material-UIいろいろ使ってみた

ちょっと難しかったりひっかかったりしたMaterial-UIのコンポーネントのメモを残す。

バージョン

• material-ui: v0.15.0
• react: v15.0.2
• redux: v3.5.2

Dialog

スクロール可能なDialog。
autoScrollBodyContent={true}の状態でSlider等を挿入するとレイアウトがずれるが、Dialogのひとつ下にdivタグを入れることでレイアウト崩れを解消できる。

    <Dialog
      title={bookinfo.title}
      actions={[
          <FlatButton
            label="キャンセル"
            primary={true}
            onTouchTap={handleClose}
          />,
          <FlatButton
            label="登録"
            primary={true}
            onTouchTap={handleClose}
          />,
        ]}
      modal={false}
      onRequestClose={handleClose}
      open={isAddDialogOpen}
      autoScrollBodyContent={true}
      contentStyle={customContentStyle}
    >
      <div>
        <img src={info.imagesrc} className={cx('imgtest')} />
        <br />
        <Slider
          description="テスト"
          style={ {'max-width': '450px'} }
          min={0}
          max={100}
          step={1}
          defaultValue={50}
          value={progressSlider}
          onChange={(e, value) => {handleProgressSlider(value)}}
        />
        <br />
        <TextField
          floatingLabelText="メモテスト"
          style={ {'max-width': '450px'} }
          multiLine={true}
          rows={4}
          fullWidth={true}
          onChange={e => handleChangeComment(e.target.value)}
        />
      </div>
    </Dialog>

Grid List

単純に、左に画像・右に説明みたいな配置をしてみる。
今どきのおしゃれ配置は本家サイトのソースから実現可能。

        <div style={gridStyle.root}>
          <GridList
            cellHeight={200}
            style={gridStyle.gridList}
          >
              <GridTile
                cols={0.6}
              >
                <div>
                  <a href={url} target="_blank">
                    <img src={imagesrc}} />
                  </a>
                </div>
              </GridTile>
              <GridTile
                cols={1.4}
                style={gridStyle.gridTile2}
              >
                <p>テスト</p>
              </GridTile>
          </GridList>
        </div>

右と左がデフォルトで50%づつになるのに一瞬はまったけれど、親のGridListのcolsのデフォルトが2なので子のGridTileのcolsを足して２になるようにするとdivのwidthをうまい具合の%で割り振ってもらえる。

Table

Table以外の場所をクリックするとチェックボックスが消えてしまう問題でかなりはまった。。
deselectOnClickawayをfalseに設定することで解消できる。
onRowSelectionでチェックのOn/Offを検知してContainerでdispatchしてstateに保存する。

component

  <Table
    style={styles.ctSearchTable}
    multiSelectable={true}
    onRowSelection={indexes => onCtRowSelect(indexes)}
  >
    <TableBody
      deselectOnClickaway={false}
      showRowHover={true}
    >
      {bookCategories.map(bookCategory =>
        <TableRow selected={bookCategory.selected}>
          <TableRowColumn>{bookCategory.name}</TableRowColumn>
        </TableRow>
      )}
    </TableBody>
  </Table>

container

  onCtRowSelect(indexes){
    const { dispatch, bookCategories, onHover } = this.props;
    var newSelected = [];
    if(typeof indexes === "object"){
      for (var i = indexes.length - 1; i >= 0; i--) {
        newSelected.push(bookCategories[indexes[i]]);
      }
    }
    else if (typeof indexes === "number"){
        newSelected.push(bookCategories[indexes]);
    }
    dispatch(changeCtSelect(newSelected));
  }

Card

アコーディオン形式（actAsExpander={true}）にしたとき、ヘッダー部分のサブタイトル(subtitle)の背景色を変更したかったときに思考錯誤したのでメモ。
タイトルはCardHeaderの属性に追加し、サブタイトルはCardHeaderの内部にdivタグで追加する。

component

    <Card>
      <CardHeader
        title={data.title}
        actAsExpander={true}
        showExpandableButton={true}
      >
        <div style={{ width: data.progress + "%", backgroundColor: "#111" }}>
          <span>{data.progress + "%"}</span>
        </div>
      </CardHeader>
      <CardText>
        { data.comment }
      </CardText>
      <CardActions expandable={true}>
        <RaisedButton label="更新" secondary={true} />
      </CardActions>
    </Card>