vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

two examples of implementing react components

Browse source
This commit is contained in:
Ian Minoso 2016-10-14 14:23:43 -04:00
parent 67e466ee11
commit 36b1ee2be9
3 changed files with 26 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
static/js/directives/components/testComponent.js
View file

@ -3,19 +3,18 @@
*/ */
var testComponent = React.createClass({ var testComponent = React.createClass({
propTypes: { propTypes: {
prop1: React.PropTypes.string.isRequired, firstProp: React.PropTypes.string.isRequired,
prop2: React.PropTypes.string.isRequired secondProp: React.PropTypes.string.isRequired
}, },
render: function() { render: function() {
return React.DOM.span(null, return React.DOM.span(null,
'This is a react component: ' + this.props.prop1 + ' ' + this.props.prop2 'This is a react component: ' + this.props.firstProp + ' ' + this.props.secondProp
); );
} }
}); });
angular.module('quayPages') angular.module('quayPages').value('test-component', testComponent);
.value('TestComponent', testComponent) angular.module('quayPages').directive('testComponent', function(reactDirective) {
.directive('testComponent', function(reactDirective) { return reactDirective('testComponent');
return reactDirective(testComponent); });
});

19
static/js/pages/repo-view.js
View file

@ -2,19 +2,18 @@
/** /**
* Repository view page. * Repository view page.
*/ */
angular.module('quayPages') angular.module('quayPages').config(['pages', function(pages) {
.config(['pages', function(pages) { pages.create('repo-view', 'repo-view.html', RepoViewCtrl, {
pages.create('repo-view', 'repo-view.html', RepoViewCtrl, { 'newLayout': true,
'newLayout': true, 'title': '{{ namespace }}/{{ name }}',
'title': '{{ namespace }}/{{ name }}', 'description': 'Repository {{ namespace }}/{{ name }}'
'description': 'Repository {{ namespace }}/{{ name }}' });
}); }]);
}])
function RepoViewCtrl($scope, $routeParams, $location, $timeout, ApiService, UserService, AngularPollChannel, ImageLoaderService, CookieService) { function RepoViewCtrl($scope, $routeParams, $location, $timeout, ApiService, UserService, AngularPollChannel, ImageLoaderService, CookieService) {
$scope.reactProps = { $scope.reactProps = {
prop1: 'Prop 1', firstProp: 'Prop 1',
prop2: 'Prop 2' secondProp: 'Prop 2'
}; };
$scope.namespace = $routeParams.namespace; $scope.namespace = $routeParams.namespace;

11
static/partials/repo-view.html
View file

@ -5,7 +5,16 @@
<!-- New Public Repo Page experiment --> <!-- New Public Repo Page experiment -->
<div ng-if="newRepoExperiment"> <div ng-if="newRepoExperiment">
<!-- Test React Component --> <!-- Test React Component -->
<div><react-component name="TestComponent" props="reactProps"/></div> <div>
<div>
<div>This is using the generic react-component directive</div>
<react-component name="test-component" props="reactProps"/>
</div>
<div>
<div>This is creating a specific directive corresponding to a react component</div>
<test-component first-prop="reactProps.firstProp" second-prop="reactProps.secondProp"/>
</div>
</div>
</div> </div>
<!-- Old Repo Page --> <!-- Old Repo Page -->
<div ng-if="!newRepoExperiment"> <div ng-if="!newRepoExperiment">