se/SE/se-lib/TableAjax.php.p5UI__TableAjaxSortableLabel.js

var DBG = DBG || false;
var DBG1 = true;
if (!global.p5VendorJs) throw "Missing p5 Vendor js libs";
if (!global.p5VendorJs.Redux) throw "Missing p5 Vendor js lib: Redux";
var createReactClass = global.p5VendorJs.createReactClass;
var h = global.p5VendorJs.React.createElement;
var ReactDOM = global.p5VendorJs.ReactDOM;
var Redux = global.p5VendorJs.Redux;
var ReduxThunk = global.p5VendorJs.ReduxThunk;
var createStoreWithThunkMiddleware = Redux.applyMiddleware(ReduxThunk)(Redux.createStore); // TODO: to vendor.js

var P5UI__TableAjaxSortableLabel = createReactClass({
	// props.store: Redux store { getState(), subscribe(f), dispatch(f) }
	// props.actions: store actions { toggleSort(fieldName) }
	// props.namespace: string
	// props.isSortable: bool
	// props.fieldName: string
	// props.fieldProps: legacy field props object { type, friendly, xsdRefType, description, ... }
	// props.maxLabelLines: max number of lines in cell found in all row by parent
	getStateFromStore: function () {
		var state = this.props.store.getState();
		return {
			currSortCol: state.currSortCol,
			currSortFlip: state.currSortFlip
		};
	},
	getInitialState: function () {
		return this.getStateFromStore();
	},
	componentDidMount: function () {
		DBG && console.log('DBG::P5UI__TableAjaxSortableLabel::componentDidMount (field:'+this.props.fieldName+')');
		this.unsubscribe = this.props.store.subscribe(this.storeUpdated)
	},
	componentWillUnmount: function () {
		this.unsubscribe()
	},
	storeUpdated: function () {
		DBG && console.log('DBG::P5UI__TableAjaxSortableLabel::storeUpdated (field:'+this.props.fieldName+')');
		this.setState(this.getStateFromStore())
	},
	shouldComponentUpdate: function (nextProps, nextState) {
		DBG && console.log('DBG::P5UI__TableAjaxSortableLabel::shouldComponentUpdate (field:'+this.props.fieldName+')', { state: this.state, nextState });
		if (this.props.fieldName !== this.state.currSortCol && this.props.fieldName !== nextState.currSortCol) return false;
		return (
			this.state.currSortCol !== nextState.currSortCol
			|| this.state.currSortFlip !== nextState.currSortFlip
		);
	},
	handleChange: function (checked) { // handleChange: function (event) {
		DBG && console.log('DBG::P5UI__TableAjaxSortableLabel::handleChange (field:'+this.props.fieldName+')');
		if (!this.props.isSortable) return;
		this.props.store.dispatch( this.props.actions.toggleSort( this.props.fieldName ) )
	},
	convertLabelHtmlLinesToRect: function (htmlLines) {
		return htmlLines.split('<br>').reduce(function (reactNodesList, line) {
			return reactNodesList.length
				?	reactNodesList.concat( h('br'), line )
				: reactNodesList.concat( line )
			;
		}, []);
	},
	render: function () {
		DBG && console.log('DBG::P5UI__TableAjaxSortableLabel::render (field:'+this.props.fieldName+')', { props: this.props, state: this.state });
		var isSorted = ( this.props.isSortable && this.props.fieldName === this.state.currSortCol );
		var sortFlip = this.state.currSortFlip;
		var sortClass = "glyphicon glyphicon-triangle-" + ( sortFlip ? "bottom" : "top" );
		var fieldProps = this.props.fieldProps;

		var label = [ this.props.fieldName ];
		if (fieldProps.friendly) {
			var htmlLabel = fieldProps.friendly;
			{ // fix vertical-align=bottom, using `this.props.maxLabelLines`
				var lines = fieldProps.friendly.split('<br>').length;
				if (lines < this.props.maxLabelLines) htmlLabel = '<br>'.repeat(this.props.maxLabelLines - lines) + htmlLabel
			}
			label = this.convertLabelHtmlLinesToRect(htmlLabel);
		}
		var labelElements = ('ref' === fieldProps.type && fieldProps.xsdRefType)
			?	[
				h('i', {  style: { 'padding-right': "2px" }, className: "glyphicon glyphicon-export" }),
				fieldProps.xsdRefType
			]
			: label
		;

		var title = this.props.fieldName;
		if (fieldProps.description && fieldProps.description.length > 0) {
			title = p5Utils__format("{0} ({1})", [ fieldProps.description, this.props.fieldName ])
		}
		else if (fieldProps._tsRetId > 0) {
			title = p5Utils__format("Kliknij na pole i przejdź do powiązanych rekordów ({0})", [ title ])
		}
		if ('ref' === fieldProps.type && fieldProps.xsdRefType) {
			if (fieldProps.description && fieldProps.description.length > 0 && fieldProps.description !== this.props.fieldName) {
				title = p5Utils__format("{0} (ref {1})", [ fieldProps.description, this.props.fieldName ])
			} else {
				title = p5Utils__format("(ref {0})", [ this.props.fieldName ])
			}
		}

		return h('span', {
			onClick: this.handleChange,
			title: title,
			className: "pull-left",
			style: Object.assign({
			}, this.props.isSortable ? { cursor: "pointer" } : {})
		}, labelElements.concat([
			(isSorted) ? h('span', {
				className: sortClass,
				style: {
					margin: "0 0 0 3px",
					color: "#bbb"
				}
			}) : null
		]));
	}
});

global.p5VendorJs['P5UI__TableAjaxSortableLabel'] = P5UI__TableAjaxSortableLabel;