ost-ui/dist/npm/OstDemo/index.js

ost ui for react

import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
import React from 'react';
import request from './request';

var OstDemo = function (_React$Component) {
  _inherits(OstDemo, _React$Component);

  function OstDemo() {
    var _temp, _this, _ret;

    _classCallCheck(this, OstDemo);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.state = {
      open: false,
      book: '',
      isLoading: false
    }, _this.openHandler = function () {
      var open = _this.state.open;

      _this.setState({
        open: !open
      });
    }, _this.requestHandler = function (params, error) {
      return request(params, error);
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  OstDemo.prototype.componentDidMount = function componentDidMount() {
    var _this2 = this;

    document.querySelector('.ost-demo-proto-click').addEventListener('click', function () {
      this.openHandler();
    }.bind(this), false);
    this.setState({ isLoading: true });
    this.requestHandler({}, false).then(function (rsp) {
      if (rsp.status === 200) {
        _this2.setState({
          book: rsp.message
        });
      }
      _this2.setState({ isLoading: false });
    }).catch(function (err) {
      _this2.setState({
        book: err.message
      });
      _this2.setState({ isLoading: false });
    });
  };

  OstDemo.prototype.render = function render() {
    var _state = this.state,
        open = _state.open,
        book = _state.book,
        isLoading = _state.isLoading;

    var bookContent = isLoading ? 'progressing' : book ? React.createElement(
      'span',
      null,
      book
    ) : '';
    return React.createElement(
      'div',
      { className: 'ost-demo' },
      open ? React.createElement(
        'div',
        { className: 'ost-demo-view ' + (open ? 'on' : 'off') },
        'Build encapsulated components that manage their own state, then compose them to make complex UIs.',
        React.createElement('br', null),
        'Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.'
      ) : null,
      React.createElement(
        'div',
        { className: 'ost-demo-book' },
        'My book is ',
        bookContent,
        ' from asyn operation'
      ),
      React.createElement(
        'button',
        { className: 'ost-demo-proto-click' },
        'Hit Me'
      ),
      React.createElement(
        'button',
        { className: 'ost-demo-comp-click', onClick: this.openHandler },
        'Hit Me'
      )
    );
  };

  return OstDemo;
}(React.Component);

export default OstDemo;