added buildDom react dynamic example

SE/se-lib/Route/Test/BuildDom.php

@@ -1,6 +1,7 @@
 <?php
 
 Lib::loadClass('RouteBase');
+Lib::loadClass('Response');
 
 class Route_Test_BuildDom extends RouteBase {
 
@@ -26,7 +27,14 @@ class Route_Test_BuildDom extends RouteBase {
 					[ "div", { "class": "alert alert-success" }, "Test alert success" ]
 				] ]
 			';
-			$examplePreload = $listExampleProp['main'];
+			$listExampleProp['proces'] = '
+				[ "div", { "class": "container" }, [
+					[ "P5UI__ProcessStep", { "id": "996" }, [
+						[ "div", { "class": "alert alert-info" }, "Test 996 custom children" ]
+					] ]
+				] ]
+			';
+			$examplePreload = $listExampleProp['proces'];
 
 			echo '<div class="container-fluid">';
 
@@ -38,10 +46,68 @@ class Route_Test_BuildDom extends RouteBase {
 			echo UI::h('div', [ 'style' => "display:inline", 'id' => "example-btns" ]);
 			echo UI::h('details', [ 'style' => "padding:6px; background-color:#333; color:#fff", 'open' => "open" ], [
 				UI::h('summary', [ 'style' => "padding:0 3px; outline:none; cursor:pointer" ], "buildDom output"),
-				UI::h('pre', [ 'id' => 'exampleBuildDomOutput', 'style' => "margin:0; font-size:x-small; border-radius:0" ], 'loading...'),
+				UI::h('div', [ 'id' => 'exampleBuildDomOutput', 'style' => "margin:0; padding:12px 0; font-size:normal; border-radius:0; background-color:#fff; color:#000" ], 'loading...'),
 			]);
 			UI::endContainer();
 			$jsExamples = json_encode($listExampleProp);
+			$js = [];
+			$js['URL_GET_PROCES_STEP_INFO'] = $this->getLink('getProcesStepGuiAjax');
+			echo UI::h('script', [], "
+				(function (global, p5VendorJs) {
+					var URL_GET_PROCES_STEP_INFO = '{$js['URL_GET_PROCES_STEP_INFO']}';
+					if (!p5VendorJs.React) throw 'Missing React'
+					if (!p5VendorJs.ReactDOM) throw 'Missing ReactDOM'
+					if (!p5VendorJs.createReactClass) throw 'Missing createReactClass'
+					var React = p5VendorJs.React
+					var ReactDOM = p5VendorJs.ReactDOM
+					var createReactClass = p5VendorJs.createReactClass
+					var h = React.createElement
+
+					global.p5VendorJs['P5UI__ProcessStep'] = createReactClass({
+						componentWillMount: function () {
+							this.setState({ // default values
+								zasobyRaw: []
+							})
+							var updateZasoby = function (zasobyRaw) {
+								this.setState({
+									zasobyRaw: zasobyRaw
+								})
+							}.bind(this)
+							console.log('ProcessStep::componentWillMount...');
+							global.fetch(URL_GET_PROCES_STEP_INFO + '&id=' + this.props.id, {
+								credentials: 'same-origin',
+							}).then(function (response) {
+								return response.json()
+							}).then(function (resp) {
+								p5UI__notifyAjaxCallback(resp)
+								updateZasoby(resp.body.zasobyRaw)
+							}).catch(function (e) {
+								p5UI__notifyAjaxCallback({ type: 'error', msg: '' + e })
+							})
+						},
+						render: function () {
+							console.log('ProcessStep::render... state, props', this.state, this.props);
+							var formProps = {}
+							return h('div', Object.assign(formProps, {
+								ref: function (node) { this.rootNode = node; }.bind(this),
+								// onSubmit: this.submit.bind(this)
+							}), [].concat(
+								[ h('h1', {}, 'Test P5UI__ProcessStep...') ],
+								this.props.children,
+								this.state.zasobyRaw.map(function (zasob) {
+									return h('pre', {}, JSON.stringify(zasob));
+								})
+							))
+						},
+						// componentDidMount: function () { console.log('ProcessStep::componentDidMount...'); },
+						// componentWillReceiveProps: function (nextProps) { console.log('ProcessStep::componentWillReceiveProps(nextProps)...', nextProps); },
+						// shouldComponentUpdate: function (nextProps, nextState) { console.log('ProcessStep::shouldComponentUpdate(nextProps, nextState)...', nextProps, nextState); },
+						// componentWillUpdate: function (nextProps, nextState) { console.log('ProcessStep::componentWillUpdate(nextProps, nextState)...', nextProps, nextState); },
+						// componentDidUpdate: function (prevProps, prevState) { console.log('ProcessStep::componentDidUpdate(prevProps, prevState)...', prevProps, prevState); },
+						// componentWillUnmount: function () { console.log('ProcessStep::componentWillUnmount...'); },
+					})
+				})(window, window.p5VendorJs)
+			");
 			echo UI::h('script', [], "
 				var examples = {$jsExamples};
 				console.log('examples', examples)
@@ -107,4 +173,25 @@ class Route_Test_BuildDom extends RouteBase {
 		UI::dol();
 	}
 
+	function getProcesStepGuiAjaxAction() {
+		Response::sendTryCatchJson( [ $this, 'getProcesStepGuiAjax' ], $args = $_GET );
+	}
+	function getProcesStepGuiAjax($args) {
+		$id = V::get('id', 0, $args);
+		if (!$id) throw new Exception("Missing id");
+		return [
+			'type' => "success",
+			'msg' => "OK",
+			'body' => [
+				'zasobyRaw' => DB::getPDO()->fetchAll("
+					select w.*, z.*
+					from CRM_PROCES p
+						left join CRM_WSKAZNIK w on ( w.ID_PROCES = p.ID )
+						left join CRM_LISTA_ZASOBOW z on ( z.ID = w.ID_ZASOB )
+					where p.ID = :id
+				", [ ':id' => $id ]),
+			]
+		];
+	}
+
 }

SE/static/p5UI/buildDom.js

@@ -8,6 +8,24 @@
 	var h = React.createElement
 	var DBG = 0
 
+	// global.p5VendorJs['P5UI__MyWidget'] = createReactClass({
+	// 	componentWillMount: function () { console.log('MyWidget::componentWillMount...'); },
+	// 	render: function () {
+	// 		console.log('MyWidget::render... state, props', this.state, this.props);
+	// 		var defaultProps = {}
+	// 		return h('div', Object.assign(defaultProps, {
+	// 			ref: function (node) { this.rootNode = node; }.bind(this),
+	// 			// onSubmit: this.submit.bind(this)
+	// 		}), this.props.children)
+	// 	},
+	// 	componentDidMount: function () { console.log('MyWidget::componentDidMount...'); },
+	// 	componentWillReceiveProps: function (nextProps) { console.log('MyWidget::componentWillReceiveProps(nextProps)...', nextProps); },
+	// 	shouldComponentUpdate: function (nextProps, nextState) { console.log('MyWidget::shouldComponentUpdate(nextProps, nextState)...', nextProps, nextState); },
+	// 	componentWillUpdate: function (nextProps, nextState) { console.log('MyWidget::componentWillUpdate(nextProps, nextState)...', nextProps, nextState); },
+	// 	componentDidUpdate: function (prevProps, prevState) { console.log('MyWidget::componentDidUpdate(prevProps, prevState)...', prevProps, prevState); },
+	// 	componentWillUnmount: function () { console.log('MyWidget::componentWillUnmount...'); },
+	// })
+
 	var P5UI__RawHtml = createReactClass({
 		componentDidMount: function () {
 			if (this.props.rawHtml) {