Skip to content
This repository has been archived by the owner on Dec 23, 2021. It is now read-only.

Commit

Permalink
Merge branch 'dev' into users/t-xunguy/getting-started
Browse files Browse the repository at this point in the history
  • Loading branch information
@xnkevinnguyen
xnkevinnguyen committed Mar 19, 2020
2 parents 74f0d54 + 75b7040 commit 0195172
Show file tree
Hide file tree
Showing 5 changed files with 308 additions and 14 deletions.
9 changes: 6 additions & 3 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

45 changes: 40 additions & 5 deletions src/view/components/toolbar/ToolBar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.
import { TooltipHost } from "office-ui-fabric-react";
import { Callout, TooltipHost } from "office-ui-fabric-react";
import { IconButton } from "office-ui-fabric-react";
import { initializeIcons } from "@uifabric/icons";
import * as React from "react";
import {
FormattedMessage,
Expand All @@ -19,6 +21,7 @@ import {
interface IToolbarState {
currentOpenedId: string;
showModal: boolean;
isDescriptionVisible: boolean;
}

interface IProps extends WrappedComponentProps {
Expand All @@ -35,8 +38,10 @@ class ToolBar extends React.Component<IProps, IToolbarState, any> {

constructor(props: IProps) {
super(props);
initializeIcons();
this.state = {
currentOpenedId: "",
isDescriptionVisible: false,
showModal: false,
};
}
Expand Down Expand Up @@ -129,6 +134,18 @@ class ToolBar extends React.Component<IProps, IToolbarState, any> {
this.changePressedState(label, true);
};

private onShowDescriptionClicked = (): void => {
this.setState({
isDescriptionVisible: !this.state.isDescriptionVisible,
});
};

private onDescriptionDismiss = (): void => {
this.setState({
isDescriptionVisible: false,
});
};

private getIconModal() {
if (
!this.state.showModal ||
Expand All @@ -150,22 +167,40 @@ class ToolBar extends React.Component<IProps, IToolbarState, any> {
const component = content
? content.component
: DEFAULT_MODAL_CONTENT.component;

return (
<div className="sensor_modal">
<div className="title_group">
<span className="title">
<FormattedMessage id={content.descriptionTitle} />
{content.tagInput}
{content.tagOutput}
<IconButton
onClick={this.onShowDescriptionClicked}
iconProps={{ iconName: "Info" }}
title="Info"
ariaLabel="More Information Button"
className="info-icon"
/>
</span>
</div>
<br />
<div className="description">
<FormattedMessage id={content.descriptionText} />
</div>
{this.state.isDescriptionVisible && (
<Callout
className="description-callout"
role="textbox"
target=".info-icon"
setInitialFocus={true}
onDismiss={this.onDescriptionDismiss}
>
<div className="description">
<FormattedMessage id={content.descriptionText} />
</div>
</Callout>
)}
<div className="try_area">
<br />
<span className="description">
<span className="try-it-description">
<FormattedMessage id={content.tryItDescription} />
</span>
<br />
Expand Down
57 changes: 57 additions & 0 deletions src/view/components/toolbar/Toolbar.spec.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
import { IntlProvider } from "react-intl";
import * as testRenderer from "react-test-renderer";
import Toolbar from "./ToolBar";
import * as TOOLBAR_SVG from "../../svgs/toolbar_svg";
import { MICROBIT_TOOLBAR_ID } from "./SensorModalUtils";
import { SENSOR_LIST } from "../../constants";

const MOCK_TOOLBAR_BUTTONS: Array<{ label: string; image: JSX.Element }> = [
{
image: TOOLBAR_SVG.LIGHT_SVG,
label: MICROBIT_TOOLBAR_ID.LIGHT,
},
{
image: TOOLBAR_SVG.MOTION_SVG,
label: MICROBIT_TOOLBAR_ID.ACCELEROMETER,
},
];
const mockUpdateSensors = () => {
return;
};
const mockInitialValues = {
[SENSOR_LIST.TEMPERATURE]: 0,
[SENSOR_LIST.LIGHT]: 0,
};
describe("Toolbar component ", () => {
it("should render correctly", () => {
const component = testRenderer
.create(
<IntlProvider locale="en">
<Toolbar
buttonList={MOCK_TOOLBAR_BUTTONS}
onUpdateSensor={mockUpdateSensors}
sensorValues={mockInitialValues}
/>
</IntlProvider>
)
.toJSON();
expect(component).toMatchSnapshot();
});

it("should render without crashing", () => {
const div = document.createElement("div");
ReactDOM.render(
<IntlProvider locale="en">
<Toolbar
buttonList={MOCK_TOOLBAR_BUTTONS}
onUpdateSensor={mockUpdateSensors}
sensorValues={mockInitialValues}
/>
</IntlProvider>,
div
);
ReactDOM.unmountComponentAtNode(div);
});
});
146 changes: 146 additions & 0 deletions src/view/components/toolbar/__snapshots__/Toolbar.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Toolbar component should render correctly 1`] = `
<div
className="toolbar-parent"
id="toolbar-parent"
>
<div
className="toolbar"
>
<div
className="toolbar-icon"
>
<div
className="ms-TooltipHost root-49"
onBlurCapture={[Function]}
onFocusCapture={[Function]}
onKeyDown={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
<button
aria-label="toolbar light-sensor"
className="toolbar-button button"
id="toolbar-light-sensor-button"
onClick={[Function]}
role="button"
style={
Object {
"width": 32,
}
}
tabIndex={0}
>
<svg
fill="none"
height="16px"
version="1.1"
viewBox="0 0 16 16"
width="16px"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<title>
Light sensor
</title>
<g
fill="none"
fill-rule="evenodd"
id="light_sensor"
stroke="none"
stroke-width="1"
>
<g
className="button-icon"
fill-rule="nonzero"
id="Group-10"
transform="translate(4.000000, 0.000000)"
>
<g
id="light-bulb"
>
<path
d="M8.30374549,6.20872934 L7.44295783,8.17745143 C7.23654761,8.7386575 7.20852246,8.7656952 6.99231195,9.20813126 L6.45540049,10.4361106 C6.46864532,10.5933327 6.46346172,11 6.05537849,11 L2.94465012,11 C2.68129241,11 2.58708458,10.8227848 2.55655729,10.6570975 L2.54351121,10.6570975 L0,4.83978978 L0.0886634694,4.84519734 C0.0290289823,4.57964193 -0.00106181819,4.307929 2.86084252e-05,4.03423261 C0.00757892,1.8945771 1.94423384,0.0877568873 4.31880683,0.00284992256 C5.55705792,-0.0379054205 6.72735622,0.359459175 7.61829298,1.13041441 C8.50922975,1.89797338 9,2.93723463 9,4.04781772 C9,4.82474009 8.75968094,5.56322682 8.30374549,6.20872934 Z"
id="Shape"
/>
<path
d="M6.5,12.4 C6.82926694,12.4 7.1,12.6707331 7.1,13 C7.1,13.3307854 6.83256829,13.6 6.5,13.6 L2.5,13.6 C2.16921459,13.6 1.9,13.3325683 1.9,13 C1.9,12.6692146 2.16743171,12.4 2.5,12.4 L6.5,12.4 Z"
id="Shape"
/>
<path
d="M5.66965517,14.8 C5.96435528,14.8 6.2,15.0737859 6.2,15.4 C6.2,15.7277609 5.9672384,16 5.66965517,16 L3.53034483,16 C3.23437963,16 3,15.7294873 3,15.4 C3,15.0722391 3.2327616,14.8 3.53034483,14.8 L5.66965517,14.8 Z"
id="Shape"
/>
</g>
</g>
</g>
</svg>
</button>
</div>
<div
className="ms-TooltipHost root-49"
onBlurCapture={[Function]}
onFocusCapture={[Function]}
onKeyDown={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
<button
aria-label="toolbar accelerometer-sensor"
className="toolbar-button button"
id="toolbar-accelerometer-sensor-button"
onClick={[Function]}
role="button"
style={
Object {
"width": 32,
}
}
tabIndex={0}
>
<svg
fill="none"
height="16px"
version="1.1"
viewBox="0 0 17 16"
width="17px"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
fill="none"
fill-rule="evenodd"
id="motion_sensor"
stroke="none"
stroke-width="1"
>
<g
className="button-icon"
id="Group-10"
>
<g
id="Group-12"
>
<path
d="M8,8.8203 L5.88,11.9103 L8,11.9103 L8,12.5493 L5,12.5493 L5,12.0303 L7.12,8.9403 L5.12,8.9403 L5.12,8.2993 L8,8.2993 L8,8.8203 Z M17,10.5903 L13.87,8.7903 L13.87,9.9903 L11.76,9.9903 C11.63,8.7803 11.1,7.6503 10.25,6.7693 C9.39,5.9103 8.25,5.3703 7.04,5.2403 L7.04,3.1203 L8.23,3.1203 L6.38,0.0003 L4.63,3.1203 L5.83,3.1203 L5.83,5.2403 C4.5,5.3803 3.27,6.0003 2.38,6.9803 C1.48,7.9693 0.99,9.2503 1,10.5703 C0.99,11.2803 1.12,11.9903 1.38,12.6393 C1.65,13.2993 2.04,13.9003 2.54,14.4103 C3.04,14.9103 3.64,15.3093 4.3,15.5903 C4.96,15.8603 5.66,16.0003 6.38,16.0003 C7.72,16.0093 9.01,15.5193 10.01,14.6303 C11,13.7403 11.63,12.5093 11.76,11.1903 L13.87,11.1903 L13.87,12.3893 L17,10.5903 Z"
id="Fill-1"
/>
<polygon
id="Fill-3"
points="2.3398 4 2.9998 4 2.9998 2.42 4.3398 0 3.6108 0 2.6698 1.75 1.7598 0 0.9998 0 2.3398 2.4"
/>
<polygon
id="Fill-10"
points="14.54 4.0098 13.69 5.5198 12.84 4.0098 12.05 4.0098 13.269 6.0098 12 8.1398 12.769 8.1398 13.67 6.5498 14.58 8.1398 15.37 8.1398 14.08 5.9998 15.31 3.9998"
/>
</g>
</g>
</g>
</svg>
</button>
</div>
</div>
</div>
</div>
`;
Loading

0 comments on commit 0195172

Please sign in to comment.