UNPKG

periodicjs.ext.reactapp

Version:
132 lines (102 loc) 4.29 kB
'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); var _stringify = require('babel-runtime/core-js/json/stringify'); var _stringify2 = _interopRequireDefault(_stringify); var _assign = require('babel-runtime/core-js/object/assign'); var _assign2 = _interopRequireDefault(_assign); var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); var _createClass2 = require('babel-runtime/helpers/createClass'); var _createClass3 = _interopRequireDefault(_createClass2); var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); var _inherits2 = require('babel-runtime/helpers/inherits'); var _inherits3 = _interopRequireDefault(_inherits2); var _react = require('react'); var _react2 = _interopRequireDefault(_react); var _AppLayoutMap = require('../AppLayoutMap'); var _flat = require('flat'); var _flat2 = _interopRequireDefault(_flat); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } var defaultProps = { fullState: true, flattenRawData: false, flattenOptions: { maxDepth: 2 } }; var RawStateOutput = function (_Component) { (0, _inherits3.default)(RawStateOutput, _Component); function RawStateOutput(props) { (0, _classCallCheck3.default)(this, RawStateOutput); // console.info('RawStateOutput props', props); var _this = (0, _possibleConstructorReturn3.default)(this, (RawStateOutput.__proto__ || (0, _getPrototypeOf2.default)(RawStateOutput)).call(this, props)); _this.getRenderedComponent = _AppLayoutMap.getRenderedComponent.bind(_this); _this.state = props.fullState && props.getState ? (0, _assign2.default)({}, props, props.getState()) : (0, _assign2.default)({}, props); return _this; } (0, _createClass3.default)(RawStateOutput, [{ key: 'componentWillReceiveProps', value: function componentWillReceiveProps(nextProps) { console.info({ nextProps: nextProps }); if (this.props.fullState) { this.setState((0, _assign2.default)({}, nextProps, this.props.getState())); } else { this.setState((0, _assign2.default)({}, nextProps)); } } }, { key: 'render', value: function render() { // console.debug('this.props.getState()', this.props.getState()); var displayProp = ''; var displayData = ''; var state = this.props.fullState ? (0, _assign2.default)({}, this.state, this.props.getState()) : (0, _assign2.default)({}, this.state); try { // console.info({ state }); if (this.props.flattenRawData) { var flattenedProps = (0, _assign2.default)({}, (0, _flat2.default)(state, this.props.flattenOptions)); // console.info({ flattenedProps }); displayProp = this.props.select ? flattenedProps[this.props.select] : flattenedProps; } else { displayProp = this.props.select ? state[this.props.select] : state; } displayData = this.props.display ? displayProp.toString() : (0, _stringify2.default)(displayProp, null, 2); // console.info({ displayData, displayProp, }); } catch (e) { if (!global) { console.error(e); } } switch (this.props.type) { case 'rjx': return this.getRenderedComponent(displayData, state); case 'inline': return _react2.default.createElement( 'span', { style: this.props.style }, displayData ); case 'block': return _react2.default.createElement( 'div', { style: this.props.style }, displayData ); default: return _react2.default.createElement( 'pre', { style: this.props.style }, displayData ); } } }]); return RawStateOutput; }(_react.Component); RawStateOutput.defaultProps = defaultProps; exports.default = RawStateOutput;