이번 주말에 하마마츠. 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;
}

제2회에 계속됩니다.