mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1176933 - Enable missing props validation elint rule checking for Loop. r=dmose

This commit is contained in:
Mark Banner 2015-06-24 11:34:38 -07:00
Родитель 4feb5a93f7
Коммит 7d0591a53a
21 изменённых файлов: 197 добавлений и 57 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

4
browser/components/loop/.eslintrc
Просмотреть файл

@ -62,7 +62,6 @@
// <https://github.com/yannickcr/eslint-plugin-react#list-of-supported-rules>
"react/jsx-quotes": [2, "double", "avoid-escape"],
"react/jsx-no-undef": 2,
// Need to fix instances where this is failing.
"react/jsx-sort-props": 2,
"react/jsx-sort-prop-types": 2,
"react/jsx-uses-vars": 2,
@ -71,8 +70,7 @@
"react/no-did-mount-set-state": 0,
"react/no-did-update-set-state": 2,
"react/no-unknown-property": 2,
// Need to fix instances where this is currently failing
"react/prop-types": 0,
"react/prop-types": 2,
"react/self-closing-comp": 2,
"react/wrap-multilines": 2,
// Not worth it: React is defined globally

10
browser/components/loop/content/js/contacts.js
Просмотреть файл

@ -146,6 +146,8 @@ loop.contacts = (function(_, mozL10n) {
const ContactDropdown = React.createClass({displayName: "ContactDropdown",
propTypes: {
// If the contact is blocked or not.
blocked: React.PropTypes.bool.isRequired,
canEdit: React.PropTypes.bool,
handleAction: React.PropTypes.func.isRequired
},
@ -334,7 +336,9 @@ loop.contacts = (function(_, mozL10n) {
propTypes: {
notifications: React.PropTypes.instanceOf(
loop.shared.models.NotificationCollection).isRequired
loop.shared.models.NotificationCollection).isRequired,
// Callback to handle entry to the add/edit contact form.
startForm: React.PropTypes.func.isRequired
},
/**
@ -624,7 +628,9 @@ loop.contacts = (function(_, mozL10n) {
mixins: [React.addons.LinkedStateMixin],
propTypes: {
mode: React.PropTypes.string
mode: React.PropTypes.string,
// Callback used to change the selected tab - it is passed the tab name.
selectTab: React.PropTypes.func.isRequired
},
getInitialState: function() {

10
browser/components/loop/content/js/contacts.jsx
Просмотреть файл

@ -146,6 +146,8 @@ loop.contacts = (function(_, mozL10n) {
const ContactDropdown = React.createClass({
propTypes: {
// If the contact is blocked or not.
blocked: React.PropTypes.bool.isRequired,
canEdit: React.PropTypes.bool,
handleAction: React.PropTypes.func.isRequired
},
@ -334,7 +336,9 @@ loop.contacts = (function(_, mozL10n) {
propTypes: {
notifications: React.PropTypes.instanceOf(
loop.shared.models.NotificationCollection).isRequired
loop.shared.models.NotificationCollection).isRequired,
// Callback to handle entry to the add/edit contact form.
startForm: React.PropTypes.func.isRequired
},
/**
@ -624,7 +628,9 @@ loop.contacts = (function(_, mozL10n) {
mixins: [React.addons.LinkedStateMixin],
propTypes: {
mode: React.PropTypes.string
mode: React.PropTypes.string,
// Callback used to change the selected tab - it is passed the tab name.
selectTab: React.PropTypes.func.isRequired
},
getInitialState: function() {

4
browser/components/loop/content/js/conversationViews.js
Просмотреть файл

@ -115,6 +115,10 @@ loop.conversationViews = (function(mozL10n) {
*/
var ConversationDetailView = React.createClass({displayName: "ConversationDetailView",
propTypes: {
children: React.PropTypes.oneOfType([
React.PropTypes.element,
React.PropTypes.arrayOf(React.PropTypes.element)
]).isRequired,
contact: React.PropTypes.object
},

4
browser/components/loop/content/js/conversationViews.jsx
Просмотреть файл

@ -115,6 +115,10 @@ loop.conversationViews = (function(mozL10n) {
*/
var ConversationDetailView = React.createClass({
propTypes: {
children: React.PropTypes.oneOfType([
React.PropTypes.element,
React.PropTypes.arrayOf(React.PropTypes.element)
]).isRequired,
contact: React.PropTypes.object
},

5
browser/components/loop/content/js/panel.js
Просмотреть файл

@ -20,6 +20,7 @@ loop.panel = (function(_, mozL10n) {
var TabView = React.createClass({displayName: "TabView",
propTypes: {
buttonsHidden: React.PropTypes.array,
children: React.PropTypes.arrayOf(React.PropTypes.element),
mozLoop: React.PropTypes.object,
// The selectedTab prop is used by the UI showcase.
selectedTab: React.PropTypes.string
@ -468,6 +469,10 @@ loop.panel = (function(_, mozL10n) {
* FxA user identity (guest/authenticated) component.
*/
var UserIdentity = React.createClass({displayName: "UserIdentity",
propTypes: {
displayName: React.PropTypes.string.isRequired
},
render: function() {
return (
React.createElement("p", {className: "user-identity"},

5
browser/components/loop/content/js/panel.jsx
Просмотреть файл

@ -20,6 +20,7 @@ loop.panel = (function(_, mozL10n) {
var TabView = React.createClass({
propTypes: {
buttonsHidden: React.PropTypes.array,
children: React.PropTypes.arrayOf(React.PropTypes.element),
mozLoop: React.PropTypes.object,
// The selectedTab prop is used by the UI showcase.
selectedTab: React.PropTypes.string
@ -468,6 +469,10 @@ loop.panel = (function(_, mozL10n) {
* FxA user identity (guest/authenticated) component.
*/
var UserIdentity = React.createClass({
propTypes: {
displayName: React.PropTypes.string.isRequired
},
render: function() {
return (
<p className="user-identity">

2
browser/components/loop/content/js/roomViews.js
Просмотреть файл

@ -278,6 +278,8 @@ loop.roomViews = (function(mozL10n) {
mixins: [React.addons.LinkedStateMixin],
propTypes: {
// Only used for tests.
availableContext: React.PropTypes.object,
dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired,
editMode: React.PropTypes.bool,
error: React.PropTypes.object,

2
browser/components/loop/content/js/roomViews.jsx
Просмотреть файл

@ -278,6 +278,8 @@ loop.roomViews = (function(mozL10n) {
mixins: [React.addons.LinkedStateMixin],
propTypes: {
// Only used for tests.
availableContext: React.PropTypes.object,
dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired,
editMode: React.PropTypes.bool,
error: React.PropTypes.object,

2
browser/components/loop/content/shared/js/feedbackViews.js
Просмотреть файл

@ -23,7 +23,7 @@ loop.shared.views.FeedbackView = (function(l10n) {
*/
var FeedbackLayout = React.createClass({displayName: "FeedbackLayout",
propTypes: {
children: React.PropTypes.component.isRequired,
children: React.PropTypes.element,
reset: React.PropTypes.func, // if not specified, no Back btn is shown
title: React.PropTypes.string.isRequired
},

2
browser/components/loop/content/shared/js/feedbackViews.jsx
Просмотреть файл

@ -23,7 +23,7 @@ loop.shared.views.FeedbackView = (function(l10n) {
*/
var FeedbackLayout = React.createClass({
propTypes: {
children: React.PropTypes.component.isRequired,
children: React.PropTypes.element,
reset: React.PropTypes.func, // if not specified, no Back btn is shown
title: React.PropTypes.string.isRequired
},

18
browser/components/loop/content/shared/js/views.js
Просмотреть файл

@ -262,6 +262,7 @@ loop.shared.views = (function(_, l10n) {
audio: React.PropTypes.object,
initiate: React.PropTypes.bool,
isDesktop: React.PropTypes.bool,
model: React.PropTypes.object.isRequired,
sdk: React.PropTypes.object.isRequired,
video: React.PropTypes.object
},
@ -557,6 +558,7 @@ loop.shared.views = (function(_, l10n) {
propTypes: {
additionalClass: React.PropTypes.string,
caption: React.PropTypes.string.isRequired,
children: React.PropTypes.element,
disabled: React.PropTypes.bool,
htmlId: React.PropTypes.string,
onClick: React.PropTypes.func.isRequired
@ -589,8 +591,12 @@ loop.shared.views = (function(_, l10n) {
});
var ButtonGroup = React.createClass({displayName: "ButtonGroup",
PropTypes: {
additionalClass: React.PropTypes.string
propTypes: {
additionalClass: React.PropTypes.string,
children: React.PropTypes.oneOfType([
React.PropTypes.element,
React.PropTypes.arrayOf(React.PropTypes.element)
])
},
getDefaultProps: function() {
@ -614,7 +620,7 @@ loop.shared.views = (function(_, l10n) {
});
var Checkbox = React.createClass({displayName: "Checkbox",
PropTypes: {
propTypes: {
additionalClass: React.PropTypes.string,
checked: React.PropTypes.bool,
disabled: React.PropTypes.bool,
@ -734,7 +740,7 @@ loop.shared.views = (function(_, l10n) {
var ContextUrlView = React.createClass({displayName: "ContextUrlView",
mixins: [React.addons.PureRenderMixin],
PropTypes: {
propTypes: {
allowClick: React.PropTypes.bool.isRequired,
description: React.PropTypes.string.isRequired,
dispatcher: React.PropTypes.instanceOf(loop.Dispatcher),
@ -813,12 +819,12 @@ loop.shared.views = (function(_, l10n) {
// to use the pure render mixin here.
mixins: [React.addons.PureRenderMixin],
PropTypes: {
propTypes: {
displayAvatar: React.PropTypes.bool.isRequired,
isLoading: React.PropTypes.bool.isRequired,
mediaType: React.PropTypes.string.isRequired,
posterUrl: React.PropTypes.string,
// Expecting "local" or "remote".
mediaType: React.PropTypes.string.isRequired,
srcVideoObject: React.PropTypes.object
},

18
browser/components/loop/content/shared/js/views.jsx
Просмотреть файл

@ -262,6 +262,7 @@ loop.shared.views = (function(_, l10n) {
audio: React.PropTypes.object,
initiate: React.PropTypes.bool,
isDesktop: React.PropTypes.bool,
model: React.PropTypes.object.isRequired,
sdk: React.PropTypes.object.isRequired,
video: React.PropTypes.object
},
@ -557,6 +558,7 @@ loop.shared.views = (function(_, l10n) {
propTypes: {
additionalClass: React.PropTypes.string,
caption: React.PropTypes.string.isRequired,
children: React.PropTypes.element,
disabled: React.PropTypes.bool,
htmlId: React.PropTypes.string,
onClick: React.PropTypes.func.isRequired
@ -589,8 +591,12 @@ loop.shared.views = (function(_, l10n) {
});
var ButtonGroup = React.createClass({
PropTypes: {
additionalClass: React.PropTypes.string
propTypes: {
additionalClass: React.PropTypes.string,
children: React.PropTypes.oneOfType([
React.PropTypes.element,
React.PropTypes.arrayOf(React.PropTypes.element)
])
},
getDefaultProps: function() {
@ -614,7 +620,7 @@ loop.shared.views = (function(_, l10n) {
});
var Checkbox = React.createClass({
PropTypes: {
propTypes: {
additionalClass: React.PropTypes.string,
checked: React.PropTypes.bool,
disabled: React.PropTypes.bool,
@ -734,7 +740,7 @@ loop.shared.views = (function(_, l10n) {
var ContextUrlView = React.createClass({
mixins: [React.addons.PureRenderMixin],
PropTypes: {
propTypes: {
allowClick: React.PropTypes.bool.isRequired,
description: React.PropTypes.string.isRequired,
dispatcher: React.PropTypes.instanceOf(loop.Dispatcher),
@ -813,12 +819,12 @@ loop.shared.views = (function(_, l10n) {
// to use the pure render mixin here.
mixins: [React.addons.PureRenderMixin],
PropTypes: {
propTypes: {
displayAvatar: React.PropTypes.bool.isRequired,
isLoading: React.PropTypes.bool.isRequired,
mediaType: React.PropTypes.string.isRequired,
posterUrl: React.PropTypes.string,
// Expecting "local" or "remote".
mediaType: React.PropTypes.string.isRequired,
srcVideoObject: React.PropTypes.object
},

5
browser/components/loop/standalone/content/js/fxOSMarketplace.js
Просмотреть файл

@ -15,6 +15,11 @@ loop.fxOSMarketplaceViews = (function() {
* client.
*/
var FxOSHiddenMarketplaceView = React.createClass({displayName: "FxOSHiddenMarketplaceView",
propTypes: {
marketplaceSrc: React.PropTypes.string,
onMarketplaceMessage: React.PropTypes.func
},
render: function() {
return React.createElement("iframe", {hidden: true, id: "marketplace", src: this.props.marketplaceSrc});
},

5
browser/components/loop/standalone/content/js/fxOSMarketplace.jsx
Просмотреть файл

@ -15,6 +15,11 @@ loop.fxOSMarketplaceViews = (function() {
* client.
*/
var FxOSHiddenMarketplaceView = React.createClass({
propTypes: {
marketplaceSrc: React.PropTypes.string,
onMarketplaceMessage: React.PropTypes.func
},
render: function() {
return <iframe hidden id="marketplace" src={this.props.marketplaceSrc} />;
},

7
browser/components/loop/standalone/content/js/standaloneRoomViews.js
Просмотреть файл

@ -20,7 +20,11 @@ loop.standaloneRoomViews = (function(mozL10n) {
React.PropTypes.instanceOf(loop.store.ActiveRoomStore),
React.PropTypes.instanceOf(loop.store.FxOSActiveRoomStore)
]).isRequired,
isFirefox: React.PropTypes.bool.isRequired
failureReason: React.PropTypes.string,
isFirefox: React.PropTypes.bool.isRequired,
joinRoom: React.PropTypes.func.isRequired,
roomState: React.PropTypes.string.isRequired,
roomUsed: React.PropTypes.bool.isRequired
},
onFeedbackSent: function() {
@ -247,6 +251,7 @@ loop.standaloneRoomViews = (function(mozL10n) {
// The poster URLs are for UI-showcase testing and development
localPosterUrl: React.PropTypes.string,
remotePosterUrl: React.PropTypes.string,
roomState: React.PropTypes.string,
screenSharePosterUrl: React.PropTypes.string
},

7
browser/components/loop/standalone/content/js/standaloneRoomViews.jsx
Просмотреть файл

@ -20,7 +20,11 @@ loop.standaloneRoomViews = (function(mozL10n) {
React.PropTypes.instanceOf(loop.store.ActiveRoomStore),
React.PropTypes.instanceOf(loop.store.FxOSActiveRoomStore)
]).isRequired,
isFirefox: React.PropTypes.bool.isRequired
failureReason: React.PropTypes.string,
isFirefox: React.PropTypes.bool.isRequired,
joinRoom: React.PropTypes.func.isRequired,
roomState: React.PropTypes.string.isRequired,
roomUsed: React.PropTypes.bool.isRequired
},
onFeedbackSent: function() {
@ -247,6 +251,7 @@ loop.standaloneRoomViews = (function(mozL10n) {
// The poster URLs are for UI-showcase testing and development
localPosterUrl: React.PropTypes.string,
remotePosterUrl: React.PropTypes.string,
roomState: React.PropTypes.string,
screenSharePosterUrl: React.PropTypes.string
},

4
browser/components/loop/standalone/content/js/webapp.js
Просмотреть файл

@ -212,6 +212,10 @@ loop.webapp = (function($, _, OT, mozL10n) {
});
var ConversationHeader = React.createClass({displayName: "ConversationHeader",
propTypes: {
urlCreationDateString: React.PropTypes.string.isRequired
},
render: function() {
var cx = React.addons.classSet;
var conversationUrl = location.href;

4
browser/components/loop/standalone/content/js/webapp.jsx
Просмотреть файл

@ -212,6 +212,10 @@ loop.webapp = (function($, _, OT, mozL10n) {
});
var ConversationHeader = React.createClass({
propTypes: {
urlCreationDateString: React.PropTypes.string.isRequired
},
render: function() {
var cx = React.addons.classSet;
var conversationUrl = location.href;

68
browser/components/loop/ui/ui-showcase.js
Просмотреть файл

@ -381,6 +381,11 @@
});
var SVGIcon = React.createClass({displayName: "SVGIcon",
propTypes: {
shapeId: React.PropTypes.string.isRequired,
size: React.PropTypes.string.isRequired
},
render: function() {
var sizeUnit = this.props.size.split("x");
return (
@ -393,6 +398,10 @@
});
var SVGIcons = React.createClass({displayName: "SVGIcons",
propTypes: {
size: React.PropTypes.string.isRequired
},
shapes: {
"10x10": ["close", "close-active", "close-disabled", "dropdown",
"dropdown-white", "dropdown-active", "dropdown-disabled", "edit",
@ -435,10 +444,12 @@
var FramedExample = React.createClass({displayName: "FramedExample",
propTypes: {
children: React.PropTypes.element,
cssClass: React.PropTypes.string,
dashed: React.PropTypes.bool,
height: React.PropTypes.number,
onContentsRendered: React.PropTypes.func,
summary: React.PropTypes.string.isRequired,
width: React.PropTypes.number
},
@ -478,6 +489,16 @@
});
var Example = React.createClass({displayName: "Example",
propTypes: {
children: React.PropTypes.oneOfType([
React.PropTypes.element,
React.PropTypes.arrayOf(React.PropTypes.element)
]).isRequired,
dashed: React.PropTypes.bool,
style: React.PropTypes.object,
summary: React.PropTypes.string.isRequired
},
makeId: function(prefix) {
return (prefix || "") + this.props.summary.toLowerCase().replace(/\s/g, "-");
},
@ -500,6 +521,15 @@
});
var Section = React.createClass({displayName: "Section",
propTypes: {
children: React.PropTypes.oneOfType([
React.PropTypes.arrayOf(React.PropTypes.element),
React.PropTypes.element
]).isRequired,
className: React.PropTypes.string,
name: React.PropTypes.string.isRequired
},
render: function() {
return (
React.createElement("section", {className: this.props.className, id: this.props.name},
@ -511,6 +541,10 @@
});
var ShowCase = React.createClass({displayName: "ShowCase",
propTypes: {
children: React.PropTypes.arrayOf(React.PropTypes.element).isRequired
},
getInitialState: function() {
// We assume for now that rtl is the only query parameter.
//
@ -572,10 +606,10 @@
React.createElement("p", {className: "note"},
React.createElement("strong", null, "Note:"), " 332px wide."
),
React.createElement(Example, {dashed: "true", style: {width: "332px"}, summary: "Re-sign-in view"},
React.createElement(Example, {dashed: true, style: {width: "332px"}, summary: "Re-sign-in view"},
React.createElement(SignInRequestView, {mozLoop: mockMozLoopRooms})
),
React.createElement(Example, {dashed: "true", style: {width: "332px"}, summary: "Room list tab"},
React.createElement(Example, {dashed: true, style: {width: "332px"}, summary: "Room list tab"},
React.createElement(PanelView, {client: mockClient,
dispatcher: dispatcher,
mozLoop: mockMozLoopRooms,
@ -584,7 +618,7 @@
selectedTab: "rooms",
userProfile: {email: "test@example.com"}})
),
React.createElement(Example, {dashed: "true", style: {width: "332px"}, summary: "Contact list tab"},
React.createElement(Example, {dashed: true, style: {width: "332px"}, summary: "Contact list tab"},
React.createElement(PanelView, {client: mockClient,
dispatcher: dispatcher,
mozLoop: mockMozLoopRooms,
@ -593,14 +627,14 @@
selectedTab: "contacts",
userProfile: {email: "test@example.com"}})
),
React.createElement(Example, {dashed: "true", style: {width: "332px"}, summary: "Error Notification"},
React.createElement(Example, {dashed: true, style: {width: "332px"}, summary: "Error Notification"},
React.createElement(PanelView, {client: mockClient,
dispatcher: dispatcher,
mozLoop: navigator.mozLoop,
notifications: errNotifications,
roomStore: roomStore})
),
React.createElement(Example, {dashed: "true", style: {width: "332px"}, summary: "Error Notification - authenticated"},
React.createElement(Example, {dashed: true, style: {width: "332px"}, summary: "Error Notification - authenticated"},
React.createElement(PanelView, {client: mockClient,
dispatcher: dispatcher,
mozLoop: navigator.mozLoop,
@ -608,7 +642,7 @@
roomStore: roomStore,
userProfile: {email: "test@example.com"}})
),
React.createElement(Example, {dashed: "true", style: {width: "332px"}, summary: "Contact import success"},
React.createElement(Example, {dashed: true, style: {width: "332px"}, summary: "Contact import success"},
React.createElement(PanelView, {dispatcher: dispatcher,
mozLoop: mockMozLoopRooms,
notifications: new loop.shared.models.NotificationCollection([{level: "success", message: "Import success"}]),
@ -616,7 +650,7 @@
selectedTab: "contacts",
userProfile: {email: "test@example.com"}})
),
React.createElement(Example, {dashed: "true", style: {width: "332px"}, summary: "Contact import error"},
React.createElement(Example, {dashed: true, style: {width: "332px"}, summary: "Contact import error"},
React.createElement(PanelView, {dispatcher: dispatcher,
mozLoop: mockMozLoopRooms,
notifications: new loop.shared.models.NotificationCollection([{level: "error", message: "Import error"}]),
@ -627,7 +661,7 @@
),
React.createElement(Section, {name: "AcceptCallView"},
React.createElement(Example, {dashed: "true", style: {width: "300px", height: "272px"},
React.createElement(Example, {dashed: true, style: {width: "300px", height: "272px"},
summary: "Default / incoming video call"},
React.createElement("div", {className: "fx-embedded"},
React.createElement(AcceptCallView, {callType: CALL_TYPES.AUDIO_VIDEO,
@ -637,7 +671,7 @@
)
),
React.createElement(Example, {dashed: "true", style: {width: "300px", height: "272px"},
React.createElement(Example, {dashed: true, style: {width: "300px", height: "272px"},
summary: "Default / incoming audio only call"},
React.createElement("div", {className: "fx-embedded"},
React.createElement(AcceptCallView, {callType: CALL_TYPES.AUDIO_ONLY,
@ -649,7 +683,7 @@
),
React.createElement(Section, {name: "AcceptCallView-ActiveState"},
React.createElement(Example, {dashed: "true", style: {width: "300px", height: "272px"},
React.createElement(Example, {dashed: true, style: {width: "300px", height: "272px"},
summary: "Default"},
React.createElement("div", {className: "fx-embedded"},
React.createElement(AcceptCallView, {callType: CALL_TYPES.AUDIO_VIDEO,
@ -708,7 +742,7 @@
),
React.createElement(Section, {name: "PendingConversationView (Desktop)"},
React.createElement(Example, {dashed: "true",
React.createElement(Example, {dashed: true,
style: {width: "300px", height: "272px"},
summary: "Connecting"},
React.createElement("div", {className: "fx-embedded"},
@ -720,7 +754,7 @@
),
React.createElement(Section, {name: "CallFailedView"},
React.createElement(Example, {dashed: "true",
React.createElement(Example, {dashed: true,
style: {width: "300px", height: "272px"},
summary: "Call Failed - Incoming"},
React.createElement("div", {className: "fx-embedded"},
@ -729,7 +763,7 @@
store: conversationStore})
)
),
React.createElement(Example, {dashed: "true",
React.createElement(Example, {dashed: true,
style: {width: "300px", height: "272px"},
summary: "Call Failed - Outgoing"},
React.createElement("div", {className: "fx-embedded"},
@ -738,7 +772,7 @@
store: conversationStore})
)
),
React.createElement(Example, {dashed: "true",
React.createElement(Example, {dashed: true,
style: {width: "300px", height: "272px"},
summary: "Call Failed — with call URL error"},
React.createElement("div", {className: "fx-embedded"},
@ -815,17 +849,17 @@
React.createElement("strong", null, "Note:"), " For the useable demo, you can access submitted data at ",
React.createElement("a", {href: "https://input.allizom.org/"}, "input.allizom.org"), "."
),
React.createElement(Example, {dashed: "true",
React.createElement(Example, {dashed: true,
style: {width: "300px", height: "272px"},
summary: "Default (useable demo)"},
React.createElement(FeedbackView, {feedbackStore: feedbackStore})
),
React.createElement(Example, {dashed: "true",
React.createElement(Example, {dashed: true,
style: {width: "300px", height: "272px"},
summary: "Detailed form"},
React.createElement(FeedbackView, {feedbackState: FEEDBACK_STATES.DETAILS, feedbackStore: feedbackStore})
),
React.createElement(Example, {dashed: "true",
React.createElement(Example, {dashed: true,
style: {width: "300px", height: "272px"},
summary: "Thank you!"},
React.createElement(FeedbackView, {feedbackState: FEEDBACK_STATES.SENT, feedbackStore: feedbackStore})

68
browser/components/loop/ui/ui-showcase.jsx
Просмотреть файл

@ -381,6 +381,11 @@
});
var SVGIcon = React.createClass({
propTypes: {
shapeId: React.PropTypes.string.isRequired,
size: React.PropTypes.string.isRequired
},
render: function() {
var sizeUnit = this.props.size.split("x");
return (
@ -393,6 +398,10 @@
});
var SVGIcons = React.createClass({
propTypes: {
size: React.PropTypes.string.isRequired
},
shapes: {
"10x10": ["close", "close-active", "close-disabled", "dropdown",
"dropdown-white", "dropdown-active", "dropdown-disabled", "edit",
@ -435,10 +444,12 @@
var FramedExample = React.createClass({
propTypes: {
children: React.PropTypes.element,
cssClass: React.PropTypes.string,
dashed: React.PropTypes.bool,
height: React.PropTypes.number,
onContentsRendered: React.PropTypes.func,
summary: React.PropTypes.string.isRequired,
width: React.PropTypes.number
},
@ -478,6 +489,16 @@
});
var Example = React.createClass({
propTypes: {
children: React.PropTypes.oneOfType([
React.PropTypes.element,
React.PropTypes.arrayOf(React.PropTypes.element)
]).isRequired,
dashed: React.PropTypes.bool,
style: React.PropTypes.object,
summary: React.PropTypes.string.isRequired
},
makeId: function(prefix) {
return (prefix || "") + this.props.summary.toLowerCase().replace(/\s/g, "-");
},
@ -500,6 +521,15 @@
});
var Section = React.createClass({
propTypes: {
children: React.PropTypes.oneOfType([
React.PropTypes.arrayOf(React.PropTypes.element),
React.PropTypes.element
]).isRequired,
className: React.PropTypes.string,
name: React.PropTypes.string.isRequired
},
render: function() {
return (
<section className={this.props.className} id={this.props.name}>
@ -511,6 +541,10 @@
});
var ShowCase = React.createClass({
propTypes: {
children: React.PropTypes.arrayOf(React.PropTypes.element).isRequired
},
getInitialState: function() {
// We assume for now that rtl is the only query parameter.
//
@ -572,10 +606,10 @@
<p className="note">
<strong>Note:</strong> 332px wide.
</p>
<Example dashed="true" style={{width: "332px"}} summary="Re-sign-in view">
<Example dashed={true} style={{width: "332px"}} summary="Re-sign-in view">
<SignInRequestView mozLoop={mockMozLoopRooms} />
</Example>
<Example dashed="true" style={{width: "332px"}} summary="Room list tab">
<Example dashed={true} style={{width: "332px"}} summary="Room list tab">
<PanelView client={mockClient}
dispatcher={dispatcher}
mozLoop={mockMozLoopRooms}
@ -584,7 +618,7 @@
selectedTab="rooms"
userProfile={{email: "test@example.com"}} />
</Example>
<Example dashed="true" style={{width: "332px"}} summary="Contact list tab">
<Example dashed={true} style={{width: "332px"}} summary="Contact list tab">
<PanelView client={mockClient}
dispatcher={dispatcher}
mozLoop={mockMozLoopRooms}
@ -593,14 +627,14 @@
selectedTab="contacts"
userProfile={{email: "test@example.com"}} />
</Example>
<Example dashed="true" style={{width: "332px"}} summary="Error Notification">
<Example dashed={true} style={{width: "332px"}} summary="Error Notification">
<PanelView client={mockClient}
dispatcher={dispatcher}
mozLoop={navigator.mozLoop}
notifications={errNotifications}
roomStore={roomStore} />
</Example>
<Example dashed="true" style={{width: "332px"}} summary="Error Notification - authenticated">
<Example dashed={true} style={{width: "332px"}} summary="Error Notification - authenticated">
<PanelView client={mockClient}
dispatcher={dispatcher}
mozLoop={navigator.mozLoop}
@ -608,7 +642,7 @@
roomStore={roomStore}
userProfile={{email: "test@example.com"}} />
</Example>
<Example dashed="true" style={{width: "332px"}} summary="Contact import success">
<Example dashed={true} style={{width: "332px"}} summary="Contact import success">
<PanelView dispatcher={dispatcher}
mozLoop={mockMozLoopRooms}
notifications={new loop.shared.models.NotificationCollection([{level: "success", message: "Import success"}])}
@ -616,7 +650,7 @@
selectedTab="contacts"
userProfile={{email: "test@example.com"}} />
</Example>
<Example dashed="true" style={{width: "332px"}} summary="Contact import error">
<Example dashed={true} style={{width: "332px"}} summary="Contact import error">
<PanelView dispatcher={dispatcher}
mozLoop={mockMozLoopRooms}
notifications={new loop.shared.models.NotificationCollection([{level: "error", message: "Import error"}])}
@ -627,7 +661,7 @@
</Section>
<Section name="AcceptCallView">
<Example dashed="true" style={{width: "300px", height: "272px"}}
<Example dashed={true} style={{width: "300px", height: "272px"}}
summary="Default / incoming video call">
<div className="fx-embedded">
<AcceptCallView callType={CALL_TYPES.AUDIO_VIDEO}
@ -637,7 +671,7 @@
</div>
</Example>
<Example dashed="true" style={{width: "300px", height: "272px"}}
<Example dashed={true} style={{width: "300px", height: "272px"}}
summary="Default / incoming audio only call">
<div className="fx-embedded">
<AcceptCallView callType={CALL_TYPES.AUDIO_ONLY}
@ -649,7 +683,7 @@
</Section>
<Section name="AcceptCallView-ActiveState">
<Example dashed="true" style={{width: "300px", height: "272px"}}
<Example dashed={true} style={{width: "300px", height: "272px"}}
summary="Default">
<div className="fx-embedded" >
<AcceptCallView callType={CALL_TYPES.AUDIO_VIDEO}
@ -708,7 +742,7 @@
</Section>
<Section name="PendingConversationView (Desktop)">
<Example dashed="true"
<Example dashed={true}
style={{width: "300px", height: "272px"}}
summary="Connecting">
<div className="fx-embedded">
@ -720,7 +754,7 @@
</Section>
<Section name="CallFailedView">
<Example dashed="true"
<Example dashed={true}
style={{width: "300px", height: "272px"}}
summary="Call Failed - Incoming">
<div className="fx-embedded">
@ -729,7 +763,7 @@
store={conversationStore} />
</div>
</Example>
<Example dashed="true"
<Example dashed={true}
style={{width: "300px", height: "272px"}}
summary="Call Failed - Outgoing">
<div className="fx-embedded">
@ -738,7 +772,7 @@
store={conversationStore} />
</div>
</Example>
<Example dashed="true"
<Example dashed={true}
style={{width: "300px", height: "272px"}}
summary="Call Failed — with call URL error">
<div className="fx-embedded">
@ -815,17 +849,17 @@
<strong>Note:</strong> For the useable demo, you can access submitted data at&nbsp;
<a href="https://input.allizom.org/">input.allizom.org</a>.
</p>
<Example dashed="true"
<Example dashed={true}
style={{width: "300px", height: "272px"}}
summary="Default (useable demo)">
<FeedbackView feedbackStore={feedbackStore} />
</Example>
<Example dashed="true"
<Example dashed={true}
style={{width: "300px", height: "272px"}}
summary="Detailed form">
<FeedbackView feedbackState={FEEDBACK_STATES.DETAILS} feedbackStore={feedbackStore} />
</Example>
<Example dashed="true"
<Example dashed={true}
style={{width: "300px", height: "272px"}}
summary="Thank you!">
<FeedbackView feedbackState={FEEDBACK_STATES.SENT} feedbackStore={feedbackStore}/>