Skip to content

Commit

Permalink
chore: migrate to css module
Browse files Browse the repository at this point in the history
  • Loading branch information
@jmfrancois
jmfrancois committed Jul 11, 2024
1 parent 9f97497 commit e3eacfe
Show file tree
Hide file tree
Showing 6 changed files with 106 additions and 127 deletions.
72 changes: 36 additions & 36 deletions component-tools-webapp/src/main/frontend/src/app/components/App/App.component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,52 +17,52 @@
import React from "react";

import {
IconsProvider,
HeaderBar,
Layout,
Notification,
IconsProvider,
HeaderBar,
Layout,
Notification,
} from "@talend/react-components";

import Menu from "../Menu";
import Detail from "../Detail";

import theme from "./App.scss";
import theme from "./App.module.scss";

class App extends React.Component {
constructor(props) {
super(props);
this.notificationLeaveFn = this.notificationLeaveFn.bind(this);
}
constructor(props) {
super(props);
this.notificationLeaveFn = this.notificationLeaveFn.bind(this);
}

notificationLeaveFn(notification) {
this.props.removeNotification(notification);
}
notificationLeaveFn(notification) {
this.props.removeNotification(notification);
}

render() {
const header = (
<HeaderBar
logo={{ isFull: true }}
brand={{
id: "header-brand",
label: "Talend Component Kit Web Tester",
}}
/>
);
const menu = <Menu />;
render() {
const header = (
<HeaderBar
logo={{ isFull: true }}
brand={{
id: "header-brand",
label: "Talend Component Kit Web Tester",
}}
/>
);
const menu = <Menu />;

return (
<div className={theme.App}>
<IconsProvider />
<Layout mode={"TwoColumns"} header={header} one={menu}>
<Detail saga="Detail::start" />
</Layout>
<Notification
notifications={this.props.notifications}
leaveFn={this.notificationLeaveFn}
/>
</div>
);
}
return (
<div className={theme.App}>
<IconsProvider />
<Layout mode={"TwoColumns"} header={header} one={menu}>
<Detail saga="Detail::start" />
</Layout>
<Notification
notifications={this.props.notifications}
leaveFn={this.notificationLeaveFn}
/>
</div>
);
}
}

export default App;
0 .../frontend/src/app/components/App/App.scss → ...nd/src/app/components/App/App.module.scss
View file
File renamed without changes.
128 changes: 64 additions & 64 deletions component-tools-webapp/src/main/frontend/src/app/components/Menu/Menu.component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,77 +18,77 @@ import React from "react";
import { CircularProgress, TreeView, Toggle } from "@talend/react-components";
import { Modal } from "@talend/design-system";

import theme from "./Menu.scss";
import theme from "./Menu.module.scss";

class Menu extends React.Component {
constructor(props) {
super(props);
this.onSelect = this.onSelect.bind(this);
this.onToggle = this.onToggle.bind(this);
this.onSwitch = this.onSwitch.bind(this);
this.noOp = () => {};
}
constructor(props) {
super(props);
this.onSelect = this.onSelect.bind(this);
this.onToggle = this.onToggle.bind(this);
this.onSwitch = this.onSwitch.bind(this);
this.noOp = () => {};
}

componentDidMount() {
this.props.getComponentsList();
}
componentDidMount() {
this.props.getComponentsList();
}

onToggle(event, node) {
this.props.toggleComponent(node);
}
onToggle(event, node) {
this.props.toggleComponent(node);
}

onSelect(event, node) {
if (node.$$type === "component" && node.selected) {
return;
}
this.props.selectComponent(node);
}
onSelect(event, node) {
if (node.$$type === "component" && node.selected) {
return;
}
this.props.selectComponent(node);
}

onSwitch() {
this.props.getComponentsList({
configuration: !this.props.configurationSelected,
});
}
onSwitch() {
this.props.getComponentsList({
configuration: !this.props.configurationSelected,
});
}

render() {
if (this.props.isLoading) {
return <CircularProgress light />;
}
return (
<div className={theme.menu}>
{this.props.error && <p>{this.props.error}</p>}
<div className={theme.TreeViewHeader}>
<div>Components</div>
<Toggle
id="index-switch"
onChange={this.onSwitch}
checked={this.props.configurationSelected}
/>
<div>Configurations</div>
</div>
<TreeView
id="menu"
noHeader={true}
className={theme.menu}
structure={this.props.categories || []}
selectedId={this.props.selectedId}
onSelect={this.onSelect}
onToggle={this.onToggle}
onToggleAllSiblings={this.noOp}
/>
{this.props.displayDocumentation && (
<Modal
header={{ title: "Documentation" }}
onClose={this.props.onDocumentationModalClose}
>
<div
dangerouslySetInnerHTML={{ __html: this.props.documentation }}
/>
</Modal>
)}
</div>
);
}
render() {
if (this.props.isLoading) {
return <CircularProgress light />;
}
return (
<div className={theme.menu}>
{this.props.error && <p>{this.props.error}</p>}
<div className={theme.TreeViewHeader}>
<div>Components</div>
<Toggle
id="index-switch"
onChange={this.onSwitch}
checked={this.props.configurationSelected}
/>
<div>Configurations</div>
</div>
<TreeView
id="menu"
noHeader={true}
className={theme.menu}
structure={this.props.categories || []}
selectedId={this.props.selectedId}
onSelect={this.onSelect}
onToggle={this.onToggle}
onToggleAllSiblings={this.noOp}
/>
{this.props.displayDocumentation && (
<Modal
header={{ title: "Documentation" }}
onClose={this.props.onDocumentationModalClose}
>
<div
dangerouslySetInnerHTML={{ __html: this.props.documentation }}
/>
</Modal>
)}
</div>
);
}
}

export default Menu;
0 ...rontend/src/app/components/Menu/Menu.scss → .../src/app/components/Menu/Menu.module.scss
View file
File renamed without changes.
11 changes: 6 additions & 5 deletions component-tools-webapp/src/main/frontend/src/app/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,16 @@
*/

import cmf from "@talend/react-cmf";
import "@talend/bootstrap-theme";
import "@talend/bootstrap-theme/dist/bootstrap.css";
import "./index.scss";

import components from "./components";
import ComponentForm from "@talend/react-containers/lib/ComponentForm";
import reducer from "./store/reducers";

cmf.bootstrap({
components: { ComponentForm, ...components },
reducer,
appId: "component-kit-tools-webapp",
RootComponent: components.App,
components: { ComponentForm, ...components },
reducer,
appId: "component-kit-tools-webapp",
RootComponent: components.App,
});
22 changes: 0 additions & 22 deletions component-tools-webapp/src/main/frontend/src/index.scss
View file

This file was deleted.

0 comments on commit e3eacfe

Please sign in to comment.