Skip to content

Commit

Permalink
(80) npx lerna exec prettier
Browse files Browse the repository at this point in the history 
npx lerna exec prettier --stream -- --write src/** test/** --config C:\code\fluidframework\prettier.config.js --ignore-path c:\code\FluidFramework\.prettierignore
  • Loading branch information
@tylerbutler
tylerbutler committed May 29, 2020
1 parent a017f52 commit d3744d3
Show file tree
Hide file tree
Showing 660 changed files with 41,265 additions and 16,081 deletions.
54 changes: 35 additions & 19 deletions components/examples/badge/src/Badge.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,10 @@ import { SharedCell } from "@fluidframework/cell";
import { IComponentHandle } from "@fluidframework/component-core-interfaces";
import { SharedMap } from "@fluidframework/map";
import { SharedObjectSequence } from "@fluidframework/sequence";
import { IComponentHTMLView, IComponentReactViewable } from "@fluidframework/view-interfaces";
import {
IComponentHTMLView,
IComponentReactViewable,
} from "@fluidframework/view-interfaces";
// eslint-disable-next-line import/no-internal-modules
import { SharedColors } from "@uifabric/fluent-theme/lib/fluent/FluentColors";
import React from "react";
Expand All @@ -17,15 +20,18 @@ import { IBadgeType } from "./IBadgeType";
import { BadgeView } from "./BadgeView";
import { IHistory } from "./IHistory";

export class Badge extends PrimedComponent implements
IComponentHTMLView,
IComponentReactViewable {
export class Badge extends PrimedComponent
implements IComponentHTMLView, IComponentReactViewable {
currentCell: SharedCell;
optionsMap: SharedMap;
historySequence: SharedObjectSequence<IHistory<IBadgeType>>;

public get IComponentHTMLView() { return this; }
public get IComponentReactViewable() { return this; }
public get IComponentHTMLView() {
return this;
}
public get IComponentReactViewable() {
return this;
}

private readonly currentId: string = "value";
private readonly historyId: string = "history";
Expand Down Expand Up @@ -92,11 +98,15 @@ export class Badge extends PrimedComponent implements
this.root.set(this.optionsId, options.handle);

// Create a sequence to store the badge's history
const history = SharedObjectSequence.create<IHistory<IBadgeType>>(this.runtime);
history.insert(0, [{
value: current.get(),
timestamp: new Date(),
}]);
const history = SharedObjectSequence.create<IHistory<IBadgeType>>(
this.runtime,
);
history.insert(0, [
{
value: current.get(),
timestamp: new Date(),
},
]);
this.root.set(this.historyId, history.handle);
}

Expand All @@ -107,16 +117,21 @@ export class Badge extends PrimedComponent implements
* object refs as props to the React component.
*/
protected async componentHasInitialized() {
this.currentCell = await this.root.get<IComponentHandle<SharedCell>>(this.currentId).get();
this.optionsMap = await this.root.get<IComponentHandle<SharedMap>>(this.optionsId).get();
this.historySequence = await this.root.get<IComponentHandle<SharedObjectSequence<IHistory<IBadgeType>>>>(this.historyId).get();
this.currentCell = await this.root
.get<IComponentHandle<SharedCell>>(this.currentId)
.get();
this.optionsMap = await this.root
.get<IComponentHandle<SharedMap>>(this.optionsId)
.get();
this.historySequence = await this.root
.get<IComponentHandle<SharedObjectSequence<IHistory<IBadgeType>>>>(
this.historyId,
)
.get();
}

public render(div: HTMLElement) {
ReactDOM.render(
this.createJSXElement(),
div,
);
ReactDOM.render(this.createJSXElement(), div);
}

public remove() {
Expand All @@ -133,7 +148,8 @@ export class Badge extends PrimedComponent implements
<BadgeView
currentCell={this.currentCell}
optionsMap={this.optionsMap}
historySequence={this.historySequence} />
historySequence={this.historySequence}
/>
</div>
);
}
Expand Down
72 changes: 49 additions & 23 deletions components/examples/badge/src/BadgeView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,10 @@ export interface IBadgeViewState {
items: any;
}

export class BadgeView extends React.Component<IBadgeViewProps, IBadgeViewState> {
export class BadgeView extends React.Component<
IBadgeViewProps,
IBadgeViewState
> {
private readonly defaultColor: string = "#fff";
private readonly animation: string = "all 0.15s ease-in";
private readonly cardPadding: string = "16px 24px";
Expand Down Expand Up @@ -78,8 +81,7 @@ export class BadgeView extends React.Component<IBadgeViewProps, IBadgeViewState>
private _onClick(_, item: IContextualMenuItem): void {
if (item.key === "new") {
this.setState({ isDialogVisible: true });
}
else {
} else {
this._setCurrent(item as IBadgeType);
}
}
Expand Down Expand Up @@ -116,10 +118,12 @@ export class BadgeView extends React.Component<IBadgeViewProps, IBadgeViewState>
if (newItem.key !== this.state.current.key) {
// Save current value into history
const len = this.props.historySequence.getItemCount();
this.props.historySequence.insert(len, [{
value: newItem,
timestamp: new Date(),
}]);
this.props.historySequence.insert(len, [
{
value: newItem,
timestamp: new Date(),
},
]);

// Set new value
this.props.currentCell.set(newItem);
Expand All @@ -131,11 +135,17 @@ export class BadgeView extends React.Component<IBadgeViewProps, IBadgeViewState>
return this.props.historySequence.getItems(len - 1)[0].timestamp;
}

private _updateColor(ev: React.SyntheticEvent<HTMLElement>, colorObj: IColor) {
private _updateColor(
ev: React.SyntheticEvent<HTMLElement>,
colorObj: IColor,
) {
this.setState({ customColor: colorObj });
}

private _updateText(ev: React.SyntheticEvent<HTMLElement>, newValue: string) {
private _updateText(
ev: React.SyntheticEvent<HTMLElement>,
newValue: string,
) {
this.setState({ customText: newValue });
}

Expand All @@ -160,8 +170,9 @@ export class BadgeView extends React.Component<IBadgeViewProps, IBadgeViewState>

private _getTextColor(c: IColor) {
// https://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color
return (c.r * 0.299 + c.g * 0.587 + c.b * 0.114 > 186) ?
"#000000" : "#ffffff";
return c.r * 0.299 + c.g * 0.587 + c.b * 0.114 > 186
? "#000000"
: "#ffffff";
}

private _onRenderCard(): JSX.Element {
Expand All @@ -174,14 +185,17 @@ export class BadgeView extends React.Component<IBadgeViewProps, IBadgeViewState>
activityDescription={`Set to ${x.value.text}`}
// eslint-disable-next-line @typescript-eslint/no-use-before-define
timeStamp={getRelativeDate(x.timestamp)}
activityIcon={<Icon {...x.value.iconProps} />} />,
activityIcon={<Icon {...x.value.iconProps} />}
/>,
);
});

return (
<div style={{
padding: this.cardPadding,
}}>
<div
style={{
padding: this.cardPadding,
}}
>
{history}
</div>
);
Expand All @@ -193,13 +207,17 @@ export class BadgeView extends React.Component<IBadgeViewProps, IBadgeViewState>
});

this.props.optionsMap.on("valueChanged", () => {
this.setState({ items: this._getItemsFromOptionsMap(this.props.optionsMap) });
this.setState({
items: this._getItemsFromOptionsMap(this.props.optionsMap),
});
});
}

public render(): JSX.Element {
// Calculate colors
const color = getColorFromString(this.state.current.iconProps.style.color);
const color = getColorFromString(
this.state.current.iconProps.style.color,
);
const colorHover = getColorFromHSV({
h: color.h,
s: color.s,
Expand All @@ -223,7 +241,9 @@ export class BadgeView extends React.Component<IBadgeViewProps, IBadgeViewState>
>
<DefaultButton
text={this.state.current.text}
iconProps={{ iconName: this.state.current.iconProps.iconName }}
iconProps={{
iconName: this.state.current.iconProps.iconName,
}}
menuProps={{
isBeakVisible: false,
shouldFocusOnMount: true,
Expand Down Expand Up @@ -272,7 +292,8 @@ export class BadgeView extends React.Component<IBadgeViewProps, IBadgeViewState>
<Stack>
<TextField
placeholder="Custom status name"
onChange={this._updateText} />
onChange={this._updateText}
/>
<ColorPicker
color={this.state.customColor}
onChange={this._updateColor}
Expand All @@ -281,7 +302,10 @@ export class BadgeView extends React.Component<IBadgeViewProps, IBadgeViewState>
</Stack>
<DialogFooter>
<PrimaryButton onClick={this._onSave} text="Save" />
<DefaultButton onClick={this._closeDialog} text="Cancel" />
<DefaultButton
onClick={this._closeDialog}
text="Cancel"
/>
</DialogFooter>
</Dialog>
</div>
Expand All @@ -291,7 +315,9 @@ export class BadgeView extends React.Component<IBadgeViewProps, IBadgeViewState>

function getRelativeDate(timestamp: Date): string {
// https://stackoverflow.com/questions/7641791/javascript-library-for-human-friendly-relative-date-formatting
const delta = Math.round(((new Date()).getTime() - new Date(timestamp).getTime()) / 1000);
const delta = Math.round(
(new Date().getTime() - new Date(timestamp).getTime()) / 1000,
);

const minute = 60;
const hour = minute * 60;
Expand All @@ -302,11 +328,11 @@ function getRelativeDate(timestamp: Date): string {
} else if (delta < 3 * minute) {
return "a few minutes ago";
} else if (delta < hour) {
return `${Math.floor(delta / minute) } minutes ago`;
return `${Math.floor(delta / minute)} minutes ago`;
} else if (Math.floor(delta / hour) < 3) {
return "a few hours ago.";
} else if (delta < day) {
return `${Math.floor(delta / hour) } hours ago`;
return `${Math.floor(delta / hour)} hours ago`;
} else if (delta < day * 2) {
return "yesterday";
} else {
Expand Down
28 changes: 21 additions & 7 deletions components/examples/clicker/src/agent.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,34 @@
* Licensed under the MIT License.
*/

import { IComponentRouter, IComponentRunnable, IRequest, IResponse } from "@fluidframework/component-core-interfaces";
import {
IComponentRouter,
IComponentRunnable,
IRequest,
IResponse,
} from "@fluidframework/component-core-interfaces";
import { Counter } from "@fluidframework/map";

// Sample agent to run.
export class ClickerAgent implements IComponentRouter, IComponentRunnable {
constructor(private readonly counter: Counter) { }
constructor(private readonly counter: Counter) {}

public get IComponentRouter() { return this; }
public get IComponentRunnable() { return this; }
public get IComponentRouter() {
return this;
}
public get IComponentRunnable() {
return this;
}

public async run() {
this.counter.on("incremented", (incrementValue: number, currentValue: number) => {
console.log(`Incremented by ${incrementValue}. New value ${currentValue}`);
});
this.counter.on(
"incremented",
(incrementValue: number, currentValue: number) => {
console.log(
`Incremented by ${incrementValue}. New value ${currentValue}`,
);
},
);
}

public stop() {
Expand Down

0 comments on commit d3744d3

Please sign in to comment.