diff --git a/pkg/docker/containers-view.jsx b/pkg/docker/containers-view.jsx index fab2f75d1204..a48b59535244 100644 --- a/pkg/docker/containers-view.jsx +++ b/pkg/docker/containers-view.jsx @@ -19,6 +19,9 @@ 'use strict'; +var React = require('react'); +var createReactClass = require('create-react-class'); + var cockpit = require('cockpit'); var _ = cockpit.gettext; @@ -27,14 +30,14 @@ var docker = require('./docker'); var atomic = require('./atomic'); var util = require('./util'); var searchImage = require("./search"); -var React = require('react'); + var Listing = require('cockpit-components-listing.jsx'); var Select = require('cockpit-components-select.jsx'); var moment = require('moment'); moment.locale(cockpit.language); -var Dropdown = React.createClass({ +var Dropdown = createReactClass({ getDefaultProps: function () { return { actions: [ { label: '' } ] @@ -75,7 +78,7 @@ var Dropdown = React.createClass({ } }); -var ContainerHeader = React.createClass({ +var ContainerHeader = createReactClass({ getInitialState: function () { return { filter: 'running', @@ -114,7 +117,7 @@ var ContainerHeader = React.createClass({ } }); -var ContainerDetails = React.createClass({ +var ContainerDetails = createReactClass({ render: function () { var container = this.props.container; return ( @@ -132,7 +135,7 @@ var ContainerDetails = React.createClass({ } }); -var ContainerProblems = React.createClass({ +var ContainerProblems = createReactClass({ onItemClick: function (event) { cockpit.jump(event.currentTarget.dataset.url, cockpit.transport.host); }, @@ -155,7 +158,7 @@ var ContainerProblems = React.createClass({ } }); -var ContainerList = React.createClass({ +var ContainerList = createReactClass({ getDefaultProps: function () { return { client: {}, @@ -371,7 +374,7 @@ var ContainerList = React.createClass({ } }); -var ImageDetails = React.createClass({ +var ImageDetails = createReactClass({ render: function () { var image = this.props.image; var created = moment.unix(image.Created); @@ -403,7 +406,7 @@ var ImageDetails = React.createClass({ } }); -var ImageSecurity = React.createClass({ +var ImageSecurity = createReactClass({ render: function () { var info = this.props.info; var text, rows; @@ -445,7 +448,7 @@ var ImageSecurity = React.createClass({ } }); -var ImageInline = React.createClass({ +var ImageInline = createReactClass({ getInitialState: function () { return { vulnerableInfos: {} @@ -500,7 +503,7 @@ var ImageInline = React.createClass({ } }); -var ImageList = React.createClass({ +var ImageList = createReactClass({ getDefaultProps: function () { return { client: {}, diff --git a/pkg/docker/storage.jsx b/pkg/docker/storage.jsx index 579b673f9d75..c8eb480a7e4c 100644 --- a/pkg/docker/storage.jsx +++ b/pkg/docker/storage.jsx @@ -25,6 +25,8 @@ var React = require("react"); var ReactDOM = require("react-dom"); + var createReactClass = require('create-react-class'); + var dialog_view = require("cockpit-components-dialog.jsx"); var python = require("python.jsx"); @@ -101,7 +103,7 @@ * the "Add" button is clicked. * */ - var DriveBox = React.createClass({ + var DriveBox = createReactClass({ getInitialState: function () { return { drives: this.props.model.extra_devices, @@ -215,7 +217,7 @@ * * model: The model as returned by get_storage_model. */ - var PoolBox = React.createClass({ + var PoolBox = createReactClass({ getInitialState: function () { return { drives: [ ] @@ -260,7 +262,7 @@ * small: If true, a small version is rendered * with a link to the setup page. */ - var OverviewBox = React.createClass({ + var OverviewBox = createReactClass({ getInitialState: function () { return { total: 0, used: 0 }; }, diff --git a/pkg/kdump/kdump-view.jsx b/pkg/kdump/kdump-view.jsx index bacb280eaa7f..a5d14ec00a0c 100644 --- a/pkg/kdump/kdump-view.jsx +++ b/pkg/kdump/kdump-view.jsx @@ -21,6 +21,7 @@ var cockpit = require("cockpit"); var _ = cockpit.gettext; var React = require("react"); +var createReactClass = require('create-react-class'); var OnOffSwitch = require("cockpit-components-onoff.jsx").OnOffSwitch; var Select = require("cockpit-components-select.jsx"); @@ -43,7 +44,7 @@ var Tooltip = require("cockpit-components-tooltip.jsx").Tooltip; * nfs and ssh are disabled for now */ -var KdumpTargetBody = React.createClass({ +var KdumpTargetBody = createReactClass({ getInitialState: function() { return { storeDest: this.props.initialTarget.target, // dialog mode, depends on location @@ -218,7 +219,7 @@ var KdumpTargetBody = React.createClass({ * reservedMemory memory reserved at boot time for kdump use * onCrashKernel callback to crash the kernel via kdumpClient, expects a promise */ -var KdumpPage = React.createClass({ +var KdumpPage = createReactClass({ getInitialState: function() { return { dialogSettings: undefined, diff --git a/pkg/lib/cockpit-components-dialog.jsx b/pkg/lib/cockpit-components-dialog.jsx index 56ec61ac7a72..2a9fc503d46a 100644 --- a/pkg/lib/cockpit-components-dialog.jsx +++ b/pkg/lib/cockpit-components-dialog.jsx @@ -21,6 +21,8 @@ var cockpit = require("cockpit"); var React = require("react"); var ReactDOM = require("react-dom"); var PropTypes = require("prop-types"); +var createReactClass = require('create-react-class'); + var _ = cockpit.gettext; require("page.css"); @@ -47,7 +49,7 @@ require("cockpit-components-dialog.css"); * - idle_message optional, always show this message on the last row when idle * - dialog_done optional, callback when dialog is finished (param true if success, false on cancel) */ -var DialogFooter = React.createClass({ +var DialogFooter = createReactClass({ propTypes: { cancel_clicked: PropTypes.func, cancel_caption: PropTypes.string, @@ -247,7 +249,7 @@ var DialogFooter = React.createClass({ * - footer (react element, top element should be of class modal-footer) * - id optional, id that is assigned to the top level dialog node, but not the backdrop */ -var Dialog = React.createClass({ +var Dialog = createReactClass({ propTypes: { // TODO: fix following by refactoring the logic showing modal dialog (recently show_modal_dialog()) title: PropTypes.string, // is effectively required, but show_modal_dialog() provides initially no props and resets them later. diff --git a/pkg/lib/cockpit-components-file-autocomplete.jsx b/pkg/lib/cockpit-components-file-autocomplete.jsx index 6b15d0c8f44a..5db1c7ec9e3d 100644 --- a/pkg/lib/cockpit-components-file-autocomplete.jsx +++ b/pkg/lib/cockpit-components-file-autocomplete.jsx @@ -22,10 +22,12 @@ var cockpit = require("cockpit"); var React = require("react"); var PropTypes = require("prop-types"); +var createReactClass = require('create-react-class'); + var _ = cockpit.gettext; require("./cockpit-components-file-autocomplete.css"); -var FileAutoComplete = React.createClass({ +var FileAutoComplete = createReactClass({ propTypes: { id: PropTypes.string, placeholder: PropTypes.string, diff --git a/pkg/lib/cockpit-components-onoff.jsx b/pkg/lib/cockpit-components-onoff.jsx index 4b2416072856..b823e058eb12 100644 --- a/pkg/lib/cockpit-components-onoff.jsx +++ b/pkg/lib/cockpit-components-onoff.jsx @@ -21,6 +21,8 @@ var cockpit = require("cockpit"); var React = require("react"); +var createReactClass = require('create-react-class'); + var _ = cockpit.gettext; require("./cockpit-components-onoff.css"); @@ -32,7 +34,7 @@ require("./cockpit-components-onoff.css"); * onChange triggered when the switch is flipped, parameter: new state * enabled whether the component is enabled or not, defaults to true */ -var OnOffSwitch = React.createClass({ +var OnOffSwitch = createReactClass({ getDefaultProps: function() { return { captionOff: _("Off"), diff --git a/pkg/lib/cockpit-components-terminal.jsx b/pkg/lib/cockpit-components-terminal.jsx index 39d2823965f6..d9af9d35674b 100644 --- a/pkg/lib/cockpit-components-terminal.jsx +++ b/pkg/lib/cockpit-components-terminal.jsx @@ -23,6 +23,8 @@ var React = require("react"); var ReactDOM = require("react-dom"); var PropTypes = require("prop-types"); + var createReactClass = require('create-react-class'); + var Term = require("term"); require("console.css"); @@ -42,7 +44,7 @@ * * Call focus() to set the input focus on the terminal. */ - var Terminal = React.createClass({ + var Terminal = createReactClass({ propTypes: { cols: PropTypes.number, rows: PropTypes.number, diff --git a/pkg/lib/cockpit-components-tooltip.jsx b/pkg/lib/cockpit-components-tooltip.jsx index fac67095840b..0e6c5c57d058 100644 --- a/pkg/lib/cockpit-components-tooltip.jsx +++ b/pkg/lib/cockpit-components-tooltip.jsx @@ -20,6 +20,7 @@ "use strict"; var React = require('react'); +var createReactClass = require('create-react-class'); require('./tooltip.css'); @@ -38,7 +39,7 @@ require('./tooltip.css'); * outermost element of the tooltip. */ -var Tooltip = React.createClass({ +var Tooltip = createReactClass({ getInitialState: function () { return { open: false, pos: "top" }; }, diff --git a/pkg/playground/react-demo-dialog.jsx b/pkg/playground/react-demo-dialog.jsx index 3b17070eedb6..3894d28c87f3 100644 --- a/pkg/playground/react-demo-dialog.jsx +++ b/pkg/playground/react-demo-dialog.jsx @@ -21,11 +21,13 @@ "use strict"; var React = require("react"); + var createReactClass = require('create-react-class'); + var Select = require("cockpit-components-select.jsx"); /* Sample dialog body */ - var PatternDialogBody = React.createClass({ + var PatternDialogBody = createReactClass({ selectChanged: function(value) { console.log("new value: " + value); }, diff --git a/pkg/playground/react-demo-listing.jsx b/pkg/playground/react-demo-listing.jsx index 1c66efeed709..f7597334e95f 100644 --- a/pkg/playground/react-demo-listing.jsx +++ b/pkg/playground/react-demo-listing.jsx @@ -23,13 +23,14 @@ var React = require("react"); var ReactDOM = require("react-dom"); var PropTypes = require("prop-types"); + var createReactClass = require('create-react-class'); var cockpitListing = require("cockpit-components-listing.jsx"); /* Sample tab renderer for listing pattern * Shows a caption and the time it was instantiated */ - var DemoListingTab = React.createClass({ + var DemoListingTab = createReactClass({ propTypes: { description: PropTypes.string.isRequired, }, diff --git a/pkg/playground/react-demo-onoff.jsx b/pkg/playground/react-demo-onoff.jsx index 086320dd18e5..ef9c04946bdc 100644 --- a/pkg/playground/react-demo-onoff.jsx +++ b/pkg/playground/react-demo-onoff.jsx @@ -19,10 +19,11 @@ var React = require("react"); var ReactDOM = require("react-dom"); +var createReactClass = require('create-react-class'); var OnOffSwitch = require("cockpit-components-onoff.jsx").OnOffSwitch; -var OnOffDemo = React.createClass({ +var OnOffDemo = createReactClass({ getInitialState: function() { return { onOffA: true, diff --git a/pkg/selinux/setroubleshoot-view.jsx b/pkg/selinux/setroubleshoot-view.jsx index e2f55e5f2b96..730b39ff3319 100644 --- a/pkg/selinux/setroubleshoot-view.jsx +++ b/pkg/selinux/setroubleshoot-view.jsx @@ -21,6 +21,7 @@ var cockpit = require("cockpit"); var _ = cockpit.gettext; var React = require("react"); +var createReactClass = require('create-react-class'); var cockpitListing = require("cockpit-components-listing.jsx"); var OnOffSwitch = require("cockpit-components-onoff.jsx").OnOffSwitch; @@ -28,7 +29,7 @@ var OnOffSwitch = require("cockpit-components-onoff.jsx").OnOffSwitch; /* Show details for an alert, including possible solutions * Props correspond to an item in the setroubleshoot dataStore */ -var SELinuxEventDetails = React.createClass({ +var SELinuxEventDetails = createReactClass({ getInitialState: function() { var expanded; // all details are collapsed by default @@ -154,7 +155,7 @@ var SELinuxEventDetails = React.createClass({ }); /* Show the audit log events for an alert */ -var SELinuxEventLog = React.createClass({ +var SELinuxEventLog = createReactClass({ render: function() { if (!this.props.details) { // details should be requested by default, so we just need to wait for them @@ -185,7 +186,7 @@ var SELinuxEventLog = React.createClass({ * - 'waiting' - display spinner * - 'error' - display error icon */ -var EmptyState = React.createClass({ +var EmptyState = createReactClass({ render: function() { var description = null; if (this.props.description) @@ -220,7 +221,7 @@ var EmptyState = React.createClass({ /* Component to show a dismissable error, message as child text * dismissError callback function triggered when the close button is pressed */ -var DismissableError = React.createClass({ +var DismissableError = createReactClass({ handleDismissError: function(e) { // only consider primary mouse button if (!e || e.button !== 0) @@ -248,7 +249,7 @@ var DismissableError = React.createClass({ * changeSelinuxMode function to use for changing the selinux enforcing mode * dismissError function to dismiss the error message */ -var SELinuxStatus = React.createClass({ +var SELinuxStatus = createReactClass({ render: function() { var errorMessage; if (this.props.selinuxStatusError) { @@ -311,7 +312,7 @@ var SELinuxStatus = React.createClass({ * changeSelinuxMode function to use for changing the selinux enforcing mode * dismissStatusError function that is triggered to dismiss the selinux status error */ -var SETroubleshootPage = React.createClass({ +var SETroubleshootPage = createReactClass({ handleDeleteAlert: function(alertId, e) { // only consider primary mouse button if (!e || e.button !== 0) diff --git a/pkg/shell/active-pages-dialog.jsx b/pkg/shell/active-pages-dialog.jsx index 35144f4fe731..f0286d73410d 100644 --- a/pkg/shell/active-pages-dialog.jsx +++ b/pkg/shell/active-pages-dialog.jsx @@ -18,6 +18,7 @@ */ var React = require("react"); +var createReactClass = require('create-react-class'); var cockpit = require("cockpit"); var _ = cockpit.gettext; @@ -31,7 +32,7 @@ var ListingRow = listingPattern.ListingRow; * - iframes iframe elements on page to list * - selectionChanged callback when the select state changed, parameters: frame object, new value */ -var ActivePagesDialogBody = React.createClass({ +var ActivePagesDialogBody = createReactClass({ render: function() { var self = this; var frames = self.props.iframes.map(function(frame) { diff --git a/pkg/storaged/content-views.jsx b/pkg/storaged/content-views.jsx index 390d6e9d878c..dcc195d70eed 100644 --- a/pkg/storaged/content-views.jsx +++ b/pkg/storaged/content-views.jsx @@ -25,6 +25,7 @@ import { import utils from "./utils.js"; import React from "react"; +import createReactClass from 'create-react-class'; import { Listing, ListingRow } from "cockpit-components-listing.jsx"; import { StorageButton, StorageLink } from "./storage-controls.jsx"; @@ -609,7 +610,7 @@ function vgroup_rows(client, vgroup) { return rows; } -var VGroup = React.createClass({ +var VGroup = createReactClass({ render: function () { var self = this; var vgroup = this.props.vgroup; diff --git a/pkg/storaged/crypto-tab.jsx b/pkg/storaged/crypto-tab.jsx index a8d764b92378..10ebfc7286c3 100644 --- a/pkg/storaged/crypto-tab.jsx +++ b/pkg/storaged/crypto-tab.jsx @@ -29,9 +29,11 @@ import { FormatButton, crypto_options_dialogx_fields, crypto_options_dialog_opti import { CryptoKeyslots } from "./crypto-keyslots.jsx"; +var createReactClass = require('create-react-class'); + var _ = cockpit.gettext; -var CryptoTab = React.createClass({ +var CryptoTab = createReactClass({ render: function () { var self = this; var client = self.props.client; diff --git a/pkg/storaged/format-dialog.jsx b/pkg/storaged/format-dialog.jsx index 6a3035f5c712..376937b6165b 100644 --- a/pkg/storaged/format-dialog.jsx +++ b/pkg/storaged/format-dialog.jsx @@ -25,10 +25,12 @@ import { BlockingMessage, TeardownMessage } from "./dialogx.jsx"; +var React = require("react"); +var createReactClass = require('create-react-class'); + var cockpit = require("cockpit"); var utils = require("./utils.js"); -var React = require("react"); var StorageControls = require("./storage-controls.jsx"); var _ = cockpit.gettext; @@ -377,7 +379,7 @@ function format_dialog(client, path, start, size, enable_dos_extended) { }); } -var FormatButton = React.createClass({ +var FormatButton = createReactClass({ onClick: function () { format_dialog(this.props.client, this.props.block.path); }, diff --git a/pkg/storaged/fsys-tab.jsx b/pkg/storaged/fsys-tab.jsx index 95e074e3e6fb..5ed4f4af2055 100644 --- a/pkg/storaged/fsys-tab.jsx +++ b/pkg/storaged/fsys-tab.jsx @@ -19,11 +19,13 @@ import { dialog_open, TextInput } from "./dialogx.jsx"; +var React = require("react"); +var createReactClass = require('create-react-class'); + var cockpit = require("cockpit"); var utils = require("./utils.js"); var $ = require("jquery"); -var React = require("react"); var StorageControls = require("./storage-controls.jsx"); var FormatDialog = require("./format-dialog.jsx"); @@ -33,7 +35,7 @@ var FormatButton = FormatDialog.FormatButton; var _ = cockpit.gettext; -var FilesystemTab = React.createClass({ +var FilesystemTab = createReactClass({ onSamplesChanged: function () { this.setState({}); }, diff --git a/pkg/storaged/lvol-tabs.jsx b/pkg/storaged/lvol-tabs.jsx index 7d2cf06890d9..1b893373dbb6 100644 --- a/pkg/storaged/lvol-tabs.jsx +++ b/pkg/storaged/lvol-tabs.jsx @@ -23,6 +23,7 @@ import cockpit from "cockpit"; import utils from "./utils.js"; import React from "react"; +import createReactClass from 'create-react-class'; import { StorageButton, StorageLink } from "./storage-controls.jsx"; import { clevis_recover_passphrase } from "./crypto-keyslots.jsx"; import { dialog_open, TextInput, PassInput, SizeSlider, BlockingMessage, TeardownMessage } from "./dialogx.jsx"; @@ -219,7 +220,7 @@ function lvol_shrink(client, lvol, info) { }); } -var BlockVolTab = React.createClass({ +var BlockVolTab = createReactClass({ render: function () { var self = this; var client = self.props.client; @@ -355,7 +356,7 @@ var BlockVolTab = React.createClass({ }, }); -var PoolVolTab = React.createClass({ +var PoolVolTab = createReactClass({ render: function () { var self = this; diff --git a/pkg/storaged/part-tab.jsx b/pkg/storaged/part-tab.jsx index f521300447d6..569e1204eab9 100644 --- a/pkg/storaged/part-tab.jsx +++ b/pkg/storaged/part-tab.jsx @@ -19,14 +19,15 @@ "use strict"; +var React = require("react"); +var createReactClass = require('create-react-class'); + var cockpit = require("cockpit"); var utils = require("./utils.js"); -var React = require("react"); - var _ = cockpit.gettext; -var PartitionTab = React.createClass({ +var PartitionTab = createReactClass({ render: function () { var block_part = this.props.client.blocks_part[this.props.block.path]; diff --git a/pkg/storaged/pvol-tabs.jsx b/pkg/storaged/pvol-tabs.jsx index 4a8acee176af..a4c286c23256 100644 --- a/pkg/storaged/pvol-tabs.jsx +++ b/pkg/storaged/pvol-tabs.jsx @@ -19,17 +19,19 @@ "use strict"; +var React = require("react"); +var createReactClass = require('create-react-class'); + var cockpit = require("cockpit"); var utils = require("./utils.js"); -var React = require("react"); var FormatDialog = require("./format-dialog.jsx"); var FormatButton = FormatDialog.FormatButton; var _ = cockpit.gettext; -var PVolTab = React.createClass({ +var PVolTab = createReactClass({ render: function () { var block_pvol = this.props.client.blocks_pvol[this.props.block.path]; var vgroup = block_pvol && this.props.client.vgroups[block_pvol.VolumeGroup]; @@ -60,7 +62,7 @@ var PVolTab = React.createClass({ }, }); -var MDRaidMemberTab = React.createClass({ +var MDRaidMemberTab = createReactClass({ render: function () { var mdraid = this.props.client.mdraids[this.props.block.MDRaidMember]; @@ -86,7 +88,7 @@ var MDRaidMemberTab = React.createClass({ }, }); -var VDOBackingTab = React.createClass({ +var VDOBackingTab = createReactClass({ render: function () { var vdo = this.props.client.vdo_overlay.find_by_backing_block(this.props.block); diff --git a/pkg/storaged/storage-controls.jsx b/pkg/storaged/storage-controls.jsx index 03e15312047b..7cdc01ee825e 100644 --- a/pkg/storaged/storage-controls.jsx +++ b/pkg/storaged/storage-controls.jsx @@ -17,15 +17,15 @@ * along with Cockpit; If not, see . */ -"use strict"; - import { OnOffSwitch } from "cockpit-components-onoff.jsx"; +var React = require("react"); +var createReactClass = require('create-react-class'); + var cockpit = require("cockpit"); var utils = require("./utils.js"); var $ = require("jquery"); -var React = require("react"); var Tooltip = require("cockpit-components-tooltip.jsx").Tooltip; var _ = cockpit.gettext; @@ -45,7 +45,7 @@ var _ = cockpit.gettext; var permission = cockpit.permission({ admin: true }); -var StorageControl = React.createClass({ +var StorageControl = createReactClass({ getInitialState: function () { return { allowed: permission.allowed !== false }; }, @@ -93,7 +93,7 @@ function checked(callback) { }; } -var StorageButton = React.createClass({ +var StorageButton = createReactClass({ render: function () { var classes = "btn"; if (this.props.kind) @@ -114,7 +114,7 @@ var StorageButton = React.createClass({ } }); -var StorageLink = React.createClass({ +var StorageLink = createReactClass({ render: function () { return ( diff --git a/pkg/subscriptions/subscriptions-register.jsx b/pkg/subscriptions/subscriptions-register.jsx index 6fadf4d3c9d8..5dc9b469e417 100644 --- a/pkg/subscriptions/subscriptions-register.jsx +++ b/pkg/subscriptions/subscriptions-register.jsx @@ -17,11 +17,12 @@ * along with Cockpit; If not, see . */ +var React = require("react"); +var createReactClass = require('create-react-class'); + var cockpit = require("cockpit"); var _ = cockpit.gettext; -var React = require("react"); - var Select = require("cockpit-components-select.jsx"); function defaultRegisterDialogSettings() { @@ -43,7 +44,7 @@ function defaultRegisterDialogSettings() { * - onChange callback to signal when the data has changed * - properties as in defaultRegisterDialogSettings() */ -var PatternDialogBody = React.createClass({ +var PatternDialogBody = createReactClass({ render: function() { var customURL; if (this.props.url == 'custom') { diff --git a/pkg/subscriptions/subscriptions-view.jsx b/pkg/subscriptions/subscriptions-view.jsx index e3680f267f35..bfa4f57ab503 100644 --- a/pkg/subscriptions/subscriptions-view.jsx +++ b/pkg/subscriptions/subscriptions-view.jsx @@ -17,15 +17,16 @@ * along with Cockpit; If not, see . */ +var React = require("react"); +var createReactClass = require('create-react-class'); + var cockpit = require("cockpit"); var _ = cockpit.gettext; -var React = require("react"); - var cockpitListing = require("cockpit-components-listing.jsx"); // Show details for an installed product -var SubscriptionProductDetails = React.createClass({ +var SubscriptionProductDetails = createReactClass({ render: function() { return (
@@ -47,7 +48,7 @@ var SubscriptionProductDetails = React.createClass({ * - 'waiting' - display spinner * - 'error' - display error icon */ -var Curtains = React.createClass({ +var Curtains = createReactClass({ render: function() { var description = null; if (this.props.description) @@ -80,7 +81,7 @@ var Curtains = React.createClass({ /* Component to show a dismissable error, message as child text * dismissError callback function triggered when the close button is pressed */ -var DismissableError = React.createClass({ +var DismissableError = createReactClass({ handleDismissError: function(e) { // only consider primary mouse button if (!e || e.button !== 0) @@ -110,7 +111,7 @@ var DismissableError = React.createClass({ * register callback, triggered when user clicks on register * unregister callback, triggered when user clicks on unregister */ -var SubscriptionStatus = React.createClass({ +var SubscriptionStatus = createReactClass({ handleRegisterSystem: function(e) { // only consider primary mouse button if (!e || e.button !== 0) @@ -177,7 +178,7 @@ var SubscriptionStatus = React.createClass({ * register callback, triggered when user clicks on register * unregister callback, triggered when user clicks on unregister */ -var SubscriptionsPage = React.createClass({ +var SubscriptionsPage = createReactClass({ renderCurtains: function() { var icon; var description; diff --git a/pkg/systemd/terminal.jsx b/pkg/systemd/terminal.jsx index 648d52fb9229..d9bfe15bf7cc 100644 --- a/pkg/systemd/terminal.jsx +++ b/pkg/systemd/terminal.jsx @@ -6,6 +6,8 @@ var React = require("react"); var ReactDOM = require("react-dom"); + var createReactClass = require('create-react-class'); + var componentsTerminal = require("cockpit-components-terminal.jsx"); cockpit.translate(); @@ -18,74 +20,74 @@ * * Spawns the user's shell in the user's home directory. */ - var UserTerminal = React.createClass({displayName: "UserTerminal", - createChannel: function (user) { - return cockpit.channel({ - "payload": "stream", - "spawn": [user.shell || "/bin/bash", "-i"], - "environ": [ - "TERM=xterm-256color", - "PATH=/sbin:/bin:/usr/sbin:/usr/bin" - ], - "directory": user.home || "/", - "pty": true - }); - }, - - getInitialState: function () { - return { - title: 'Terminal' - }; - }, - - componentWillMount: function () { - cockpit.user().done(function (user) { - this.setState({ user: user, channel: this.createChannel(user) }); - }.bind(this)); - }, - - onTitleChanged: function (title) { - this.setState({ title: title }); - }, - - onResetClick: function (event) { - if (event.button !== 0) - return; - - if (this.state.channel) - this.state.channel.close(); - - if (this.state.user) - this.setState({ channel: this.createChannel(this.state.user) }); - - // don't focus the button, but keep it on the terminal - this.refs.resetButton.blur(); - this.refs.terminal.focus(); - }, - - render: function () { - var terminal; - if (this.state.channel) - terminal = (); - else - terminal = Loading...; - - return ( -
-
- {this.state.title} - -
-
- {terminal} -
-
- ); - } +
+
+ {terminal} +
+ + ); + } }); ReactDOM.render(, document.getElementById('terminal')); diff --git a/pkg/tuned/change-profile.jsx b/pkg/tuned/change-profile.jsx index 46f1794ce650..5ce217aab4ff 100644 --- a/pkg/tuned/change-profile.jsx +++ b/pkg/tuned/change-profile.jsx @@ -20,6 +20,7 @@ var cockpit = require("cockpit"); var React = require("react"); var PropTypes = require("prop-types"); +var createReactClass = require('create-react-class'); var _ = cockpit.gettext; @@ -32,7 +33,7 @@ var _ = cockpit.gettext; * - description * - click (callback function) */ -var TunedDialogProfile = React.createClass({ +var TunedDialogProfile = createReactClass({ propTypes: { name: PropTypes.string.isRequired, recommended: PropTypes.bool.isRequired, @@ -69,7 +70,7 @@ var TunedDialogProfile = React.createClass({ * - title (string) * - description (string) */ -var TunedDialogBody = React.createClass({ +var TunedDialogBody = createReactClass({ propTypes: { active_profile: PropTypes.string.isRequired, change_selected: PropTypes.func.isRequired, @@ -104,7 +105,7 @@ var TunedDialogBody = React.createClass({ } }); -var TunedLink = React.createClass({ +var TunedLink = createReactClass({ render: function() { var self = this; diff --git a/pkg/users/local.js b/pkg/users/local.js index 477aaf97e935..0524fa4825c7 100755 --- a/pkg/users/local.js +++ b/pkg/users/local.js @@ -22,6 +22,7 @@ var cockpit = require("cockpit"); var React = require("react"); var ReactDOM = require("react-dom"); +var createReactClass = require('create-react-class'); var Mustache = require("mustache"); var authorized_keys = require("./authorized-keys"); @@ -272,7 +273,7 @@ function is_user_in_group(user, group) { return false; } -var AccountItem = React.createClass({ +var AccountItem = createReactClass({ displayName: 'AccountItem', click: function(ev) { if (ev && ev.button === 0) @@ -287,7 +288,7 @@ var AccountItem = React.createClass({ } }); -var AccountList = React.createClass({ +var AccountList = createReactClass({ displayName: 'AccountList', render: function() { var i, items = [];