App.js:
Code:
import React, { Component } from 'react'; import 'smartclient-pro/release'; import 'smartclient-pro/skins/Tahoe'; import HLayoutRight from './HLayoutRight.js'; import { Button } from 'smartclient-pro/react'; class App extends Component { constructor(param) { super(param); }; render() { return ( <HLayoutRight > <members> <Button autoFit="true" title="Button 1" /> <Button autoFit="true" title="Button 2" /> <Button autoFit="true" title="Button 3" /> </members> </HLayoutRight> ); } } export default App;
Code:
import 'smartclient-pro/release'; import 'smartclient-pro/skins/Tahoe'; import { SC, ReactComponent, HLayout } from 'smartclient-pro/react'; let isc = window.isc; const HLayoutRight = SC.defineClass("HLayoutRight", HLayout); isc.HLayoutRight.addProperties({ width: "100%", height: 20, layoutAlign: "right", membersMargin: 2 * 5, layoutRightMargin: 2 * 5, layoutBottomMargin: 2 * 5 }); export default HLayoutRight;
If you actually need to define or override methods on the new React component class, then you can declare HLayoutRight following the approach in the second custom component example, but you wouldn't override render() to return null as that would just break the framework rendering of the wrapped widget. You also shouldn't need to append code to HLayoutRight.js copied from the implementation of SC.js.
This shouldn't be needed:
Code:
Object.defineProperty(HLayoutRight, "name", { value: "HLayoutRight" }); SC.customClasses["HLayoutRight"] = HLayoutRight;
Leave a comment: