kintone UI Component を React で試す 第１回

今週末に Hamamatsu.js #6 があるので、その発表用資料として色々試しているメモです。

kintone UI Component は

「kintone UI Component」は、kintone技術者のために開発された、kintoneライクなUIを簡単に作成できるライブラリです。

kintone技術者のために というところが、とても気に入ってます。

JavaScriptでも使えますが、Reactだと更に良い感じで書けそうです。
ちょっと書いてみます。

スクリーンショット

ラジオボタンとボタンの組み合わせです。
kintoneライクになってますね。

• CodeSandbox CodeSandbox is an online editor that's built for web application development.

サンプルコード

index.js

import { RadioButton, Label, Button } from "kintone-ui-component";
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";

class MyCustomization extends React.Component {
  constructor(opts) {
    super(opts);
    let items = [
      {
        label: "Orange",
        value: "Orange",
        isDisabled: false
      },
      {
        label: "Banana",
        value: "Banana",
        isDisabled: false
      },
      {
        label: "Lemon",
        value: "Lemon",
        isDisabled: true
      }
    ];
    this.state = {
      items: items,
      value: "Banana"
    };
  }

  render() {
    return (
      <div className="kintone-UI">
        <Label text="My kintone UI Component Test" />
        <RadioButton
          name="radio"
          items={this.state.items}
          value={this.state.value}
          onChange={value => {
            this.setState({ value });
            this.myOnChange(value);
          }}
        />
        <Button
          text="Submit"
          type="submit"
          isDisabled={false}
          isVisible={true}
          onClick={this.handleClick}
        />
      </div>
    );
  }

  myOnChange = val => {
    console.log(val);
  };

  handleClick = () => {
    console.log(this.state.value);
  };
}
const rootElement = document.getElementById("root");
ReactDOM.render(<MyCustomization />, rootElement);

style.css

.kuc-input-radio-item {
  display: inline-block;
}

第２回へ続きます。