mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-19 00:05:36 +00:00
Bug 1176933 - Enable missing props validation elint rule checking for Loop. r=dmose
This commit is contained in:
parent
4feb5a93f7
commit
7d0591a53a
@ -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
|
||||
|
@ -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() {
|
||||
|
@ -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() {
|
||||
|
@ -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
|
||||
},
|
||||
|
||||
|
@ -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
|
||||
},
|
||||
|
||||
|
@ -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"},
|
||||
|
@ -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">
|
||||
|
@ -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,
|
||||
|
@ -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,
|
||||
|
@ -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
|
||||
},
|
||||
|
@ -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
|
||||
},
|
||||
|
@ -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
|
||||
},
|
||||
|
||||
|
@ -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
|
||||
},
|
||||
|
||||
|
@ -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});
|
||||
},
|
||||
|
@ -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} />;
|
||||
},
|
||||
|
@ -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
|
||||
},
|
||||
|
||||
|
@ -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
|
||||
},
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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})
|
||||
|
@ -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
|
||||
<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}/>
|
||||
|
Loading…
Reference in New Issue
Block a user