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({
propTypes: {
prop1: React.PropTypes.string.isRequired,
prop2: React.PropTypes.string.isRequired
firstProp: React.PropTypes.string.isRequired,
secondProp: React.PropTypes.string.isRequired
},
render: function() {
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')
.value('TestComponent', testComponent)
.directive('testComponent', function(reactDirective) {
return reactDirective(testComponent);
});
angular.module('quayPages').value('test-component', testComponent);
angular.module('quayPages').directive('testComponent', function(reactDirective) {
return reactDirective('testComponent');
});

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

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

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

@ -5,7 +5,16 @@
<!-- New Public Repo Page experiment -->
<div ng-if="newRepoExperiment">
<!-- 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>
<!-- Old Repo Page -->
<div ng-if="!newRepoExperiment">