Remove Unused Components (#819)
This commit is contained in:
Steve Faulkner
GitHub
parent
afd7f43eb8
commit
0e413430dc
|
|
@ -1,105 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
import { shallow, mount } from "enzyme";
|
|
||||||
import { DefaultDirectoryDropdownComponent, DefaultDirectoryDropdownProps } from "./DefaultDirectoryDropdownComponent";
|
|
||||||
import { Tenant } from "../../../Contracts/DataModels";
|
|
||||||
|
|
||||||
const createBlankProps = (): DefaultDirectoryDropdownProps => {
|
|
||||||
return {
|
|
||||||
defaultDirectoryId: "",
|
|
||||||
directories: [],
|
|
||||||
onDefaultDirectoryChange: jest.fn(),
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const createBlankDirectory = (): Tenant => {
|
|
||||||
return {
|
|
||||||
countryCode: "",
|
|
||||||
displayName: "",
|
|
||||||
domains: [],
|
|
||||||
id: "",
|
|
||||||
tenantId: "",
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
describe("test render", () => {
|
|
||||||
it("renders with no directories", () => {
|
|
||||||
const props = createBlankProps();
|
|
||||||
|
|
||||||
const wrapper = shallow(<DefaultDirectoryDropdownComponent {...props} />);
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("renders with directories but no default", () => {
|
|
||||||
const props = createBlankProps();
|
|
||||||
const tenant1 = createBlankDirectory();
|
|
||||||
tenant1.displayName = "Microsoft";
|
|
||||||
tenant1.tenantId = "asdfghjklzxcvbnm1234567890";
|
|
||||||
const tenant2 = createBlankDirectory();
|
|
||||||
tenant1.displayName = "Macrohard";
|
|
||||||
tenant1.tenantId = "asdfghjklzxcvbnm9876543210";
|
|
||||||
props.directories = [tenant1, tenant2];
|
|
||||||
|
|
||||||
const wrapper = shallow(<DefaultDirectoryDropdownComponent {...props} />);
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("renders with directories and default", () => {
|
|
||||||
const props = createBlankProps();
|
|
||||||
const tenant1 = createBlankDirectory();
|
|
||||||
tenant1.displayName = "Microsoft";
|
|
||||||
tenant1.tenantId = "asdfghjklzxcvbnm1234567890";
|
|
||||||
const tenant2 = createBlankDirectory();
|
|
||||||
tenant1.displayName = "Macrohard";
|
|
||||||
tenant1.tenantId = "asdfghjklzxcvbnm9876543210";
|
|
||||||
props.directories = [tenant1, tenant2];
|
|
||||||
|
|
||||||
props.defaultDirectoryId = "asdfghjklzxcvbnm9876543210";
|
|
||||||
|
|
||||||
const wrapper = shallow(<DefaultDirectoryDropdownComponent {...props} />);
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("renders with directories and last visit default", () => {
|
|
||||||
const props = createBlankProps();
|
|
||||||
const tenant1 = createBlankDirectory();
|
|
||||||
tenant1.displayName = "Microsoft";
|
|
||||||
tenant1.tenantId = "asdfghjklzxcvbnm1234567890";
|
|
||||||
const tenant2 = createBlankDirectory();
|
|
||||||
tenant1.displayName = "Macrohard";
|
|
||||||
tenant1.tenantId = "asdfghjklzxcvbnm9876543210";
|
|
||||||
props.directories = [tenant1, tenant2];
|
|
||||||
|
|
||||||
props.defaultDirectoryId = "lastVisited";
|
|
||||||
|
|
||||||
const wrapper = shallow(<DefaultDirectoryDropdownComponent {...props} />);
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("test function", () => {
|
|
||||||
it("on default directory change", () => {
|
|
||||||
const props = createBlankProps();
|
|
||||||
const tenant1 = createBlankDirectory();
|
|
||||||
tenant1.displayName = "Microsoft";
|
|
||||||
tenant1.tenantId = "asdfghjklzxcvbnm1234567890";
|
|
||||||
const tenant2 = createBlankDirectory();
|
|
||||||
tenant1.displayName = "Macrohard";
|
|
||||||
tenant1.tenantId = "asdfghjklzxcvbnm9876543210";
|
|
||||||
props.directories = [tenant1, tenant2];
|
|
||||||
props.defaultDirectoryId = "lastVisited";
|
|
||||||
|
|
||||||
const wrapper = mount(<DefaultDirectoryDropdownComponent {...props} />);
|
|
||||||
|
|
||||||
wrapper.find("div.defaultDirectoryDropdown").find("div.ms-Dropdown").simulate("click");
|
|
||||||
expect(wrapper.exists("div.ms-Callout-main")).toBe(true);
|
|
||||||
wrapper.find("button.ms-Dropdown-item").at(1).simulate("click");
|
|
||||||
expect(props.onDefaultDirectoryChange).toBeCalled();
|
|
||||||
expect(props.onDefaultDirectoryChange).toHaveBeenCalled();
|
|
||||||
|
|
||||||
wrapper.find("div.defaultDirectoryDropdown").find("div.ms-Dropdown").simulate("click");
|
|
||||||
expect(wrapper.exists("div.ms-Callout-main")).toBe(true);
|
|
||||||
wrapper.find("button.ms-Dropdown-item").at(0).simulate("click");
|
|
||||||
expect(props.onDefaultDirectoryChange).toBeCalled();
|
|
||||||
expect(props.onDefaultDirectoryChange).toHaveBeenCalled();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1,71 +0,0 @@
|
||||||
/**
|
|
||||||
* React component for Switch Directory
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { Dropdown, IDropdownOption, IDropdownProps } from "@fluentui/react";
|
|
||||||
import * as React from "react";
|
|
||||||
import _ from "underscore";
|
|
||||||
import { Tenant } from "../../../Contracts/DataModels";
|
|
||||||
|
|
||||||
export interface DefaultDirectoryDropdownProps {
|
|
||||||
directories: Array<Tenant>;
|
|
||||||
defaultDirectoryId: string;
|
|
||||||
onDefaultDirectoryChange: (newDirectory: Tenant) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export class DefaultDirectoryDropdownComponent extends React.Component<DefaultDirectoryDropdownProps> {
|
|
||||||
public static readonly lastVisitedKey: string = "lastVisited";
|
|
||||||
|
|
||||||
public render(): JSX.Element {
|
|
||||||
const lastVisitedOption: IDropdownOption = {
|
|
||||||
key: DefaultDirectoryDropdownComponent.lastVisitedKey,
|
|
||||||
text: "Sign in to your last visited directory",
|
|
||||||
};
|
|
||||||
const directoryOptions: Array<IDropdownOption> = this.props.directories.map(
|
|
||||||
(dirc): IDropdownOption => {
|
|
||||||
return {
|
|
||||||
key: dirc.tenantId,
|
|
||||||
text: `${dirc.displayName}(${dirc.tenantId})`,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
);
|
|
||||||
const dropDownOptions: Array<IDropdownOption> = [lastVisitedOption, ...directoryOptions];
|
|
||||||
const dropDownProps: IDropdownProps = {
|
|
||||||
label: "Set your default directory",
|
|
||||||
options: dropDownOptions,
|
|
||||||
defaultSelectedKey: this.props.defaultDirectoryId ? this.props.defaultDirectoryId : lastVisitedOption.key,
|
|
||||||
onChange: this._onDropdownChange,
|
|
||||||
className: "defaultDirectoryDropdown",
|
|
||||||
};
|
|
||||||
|
|
||||||
return <Dropdown {...dropDownProps} />;
|
|
||||||
}
|
|
||||||
|
|
||||||
private _onDropdownChange = (e: React.FormEvent<HTMLDivElement>, option?: IDropdownOption, index?: number): void => {
|
|
||||||
if (!option || !option.key) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (option.key === this.props.defaultDirectoryId) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (option.key === DefaultDirectoryDropdownComponent.lastVisitedKey) {
|
|
||||||
this.props.onDefaultDirectoryChange({
|
|
||||||
tenantId: option.key,
|
|
||||||
countryCode: undefined,
|
|
||||||
displayName: undefined,
|
|
||||||
domains: [],
|
|
||||||
id: undefined,
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const selectedDirectory = _.find(this.props.directories, (d) => d.tenantId === option.key);
|
|
||||||
if (!selectedDirectory) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.props.onDefaultDirectoryChange(selectedDirectory);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
@ -1,36 +0,0 @@
|
||||||
import * as ko from "knockout";
|
|
||||||
import * as React from "react";
|
|
||||||
import { DirectoryListComponent, DirectoryListProps } from "./DirectoryListComponent";
|
|
||||||
import { DefaultDirectoryDropdownComponent, DefaultDirectoryDropdownProps } from "./DefaultDirectoryDropdownComponent";
|
|
||||||
import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
|
|
||||||
|
|
||||||
export class DirectoryComponentAdapter implements ReactAdapter {
|
|
||||||
public parameters: ko.Observable<number>;
|
|
||||||
|
|
||||||
constructor(
|
|
||||||
private _dropdownProps: ko.Observable<DefaultDirectoryDropdownProps>,
|
|
||||||
private _listProps: ko.Observable<DirectoryListProps>
|
|
||||||
) {
|
|
||||||
this._dropdownProps.subscribe(() => this.forceRender());
|
|
||||||
this._listProps.subscribe(() => this.forceRender());
|
|
||||||
this.parameters = ko.observable<number>(Date.now());
|
|
||||||
}
|
|
||||||
|
|
||||||
public renderComponent(): JSX.Element {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<div className="directoryDropdownContainer">
|
|
||||||
<DefaultDirectoryDropdownComponent {...this._dropdownProps()} />
|
|
||||||
</div>
|
|
||||||
<div className="directoryDivider" />
|
|
||||||
<div className="directoryListContainer">
|
|
||||||
<DirectoryListComponent {...this._listProps()} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
public forceRender(): void {
|
|
||||||
window.requestAnimationFrame(() => this.parameters(Date.now()));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,78 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
import { shallow, mount } from "enzyme";
|
|
||||||
import { DirectoryListComponent, DirectoryListProps } from "./DirectoryListComponent";
|
|
||||||
import { Tenant } from "../../../Contracts/DataModels";
|
|
||||||
|
|
||||||
const createBlankProps = (): DirectoryListProps => {
|
|
||||||
return {
|
|
||||||
selectedDirectoryId: undefined,
|
|
||||||
directories: [],
|
|
||||||
onNewDirectorySelected: jest.fn(),
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const createBlankDirectory = (): Tenant => {
|
|
||||||
return {
|
|
||||||
countryCode: undefined,
|
|
||||||
displayName: undefined,
|
|
||||||
domains: [],
|
|
||||||
id: undefined,
|
|
||||||
tenantId: undefined,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
describe("test render", () => {
|
|
||||||
it("renders with no directories", () => {
|
|
||||||
const props = createBlankProps();
|
|
||||||
|
|
||||||
const wrapper = shallow(<DirectoryListComponent {...props} />);
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("renders with directories and selected", () => {
|
|
||||||
const props = createBlankProps();
|
|
||||||
const tenant1 = createBlankDirectory();
|
|
||||||
tenant1.displayName = "Microsoft";
|
|
||||||
tenant1.tenantId = "asdfghjklzxcvbnm1234567890";
|
|
||||||
const tenant2 = createBlankDirectory();
|
|
||||||
tenant1.displayName = "Macrohard";
|
|
||||||
tenant1.tenantId = "asdfghjklzxcvbnm9876543210";
|
|
||||||
props.directories = [tenant1, tenant2];
|
|
||||||
|
|
||||||
props.selectedDirectoryId = "asdfghjklzxcvbnm9876543210";
|
|
||||||
|
|
||||||
const wrapper = shallow(<DirectoryListComponent {...props} />);
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("renders with filters", () => {
|
|
||||||
const props = createBlankProps();
|
|
||||||
const tenant1 = createBlankDirectory();
|
|
||||||
tenant1.displayName = "Microsoft";
|
|
||||||
tenant1.tenantId = "1234567890";
|
|
||||||
const tenant2 = createBlankDirectory();
|
|
||||||
tenant1.displayName = "Macrohard";
|
|
||||||
tenant1.tenantId = "9876543210";
|
|
||||||
props.directories = [tenant1, tenant2];
|
|
||||||
props.selectedDirectoryId = "9876543210";
|
|
||||||
|
|
||||||
const wrapper = mount(<DirectoryListComponent {...props} />);
|
|
||||||
wrapper.find("input.ms-TextField-field").simulate("change", { target: { value: "Macro" } });
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("test function", () => {
|
|
||||||
it("on new directory selected", () => {
|
|
||||||
const props = createBlankProps();
|
|
||||||
const tenant1 = createBlankDirectory();
|
|
||||||
tenant1.displayName = "Microsoft";
|
|
||||||
tenant1.tenantId = "asdfghjklzxcvbnm1234567890";
|
|
||||||
props.directories = [tenant1];
|
|
||||||
|
|
||||||
const wrapper = mount(<DirectoryListComponent {...props} />);
|
|
||||||
wrapper.find("button.directoryListButton").simulate("click");
|
|
||||||
expect(props.onNewDirectorySelected).toBeCalled();
|
|
||||||
expect(props.onNewDirectorySelected).toHaveBeenCalled();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1,126 +0,0 @@
|
||||||
import {
|
|
||||||
DefaultButton,
|
|
||||||
IButtonProps,
|
|
||||||
ITextFieldProps,
|
|
||||||
List,
|
|
||||||
ScrollablePane,
|
|
||||||
Sticky,
|
|
||||||
StickyPositionType,
|
|
||||||
TextField,
|
|
||||||
} from "@fluentui/react";
|
|
||||||
import * as React from "react";
|
|
||||||
import _ from "underscore";
|
|
||||||
import { Tenant } from "../../../Contracts/DataModels";
|
|
||||||
|
|
||||||
export interface DirectoryListProps {
|
|
||||||
directories: Array<Tenant>;
|
|
||||||
selectedDirectoryId: string;
|
|
||||||
onNewDirectorySelected: (newDirectory: Tenant) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface DirectoryListComponentState {
|
|
||||||
filterText: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
// onRenderCell is not called when selectedDirectoryId changed, so add a selected state to force render
|
|
||||||
interface ListTenant extends Tenant {
|
|
||||||
selected?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export class DirectoryListComponent extends React.Component<DirectoryListProps, DirectoryListComponentState> {
|
|
||||||
constructor(props: DirectoryListProps) {
|
|
||||||
super(props);
|
|
||||||
|
|
||||||
this.state = {
|
|
||||||
filterText: "",
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
public render(): JSX.Element {
|
|
||||||
const { directories: originalItems, selectedDirectoryId } = this.props;
|
|
||||||
const { filterText } = this.state;
|
|
||||||
const filteredItems =
|
|
||||||
originalItems && originalItems.length && filterText
|
|
||||||
? originalItems.filter(
|
|
||||||
(directory) =>
|
|
||||||
directory.displayName &&
|
|
||||||
directory.displayName.toLowerCase().indexOf(filterText && filterText.toLowerCase()) >= 0
|
|
||||||
)
|
|
||||||
: originalItems;
|
|
||||||
const filteredItemsSelected = filteredItems.map((t) => {
|
|
||||||
let tenant: ListTenant = t;
|
|
||||||
tenant.selected = t.tenantId === selectedDirectoryId;
|
|
||||||
return tenant;
|
|
||||||
});
|
|
||||||
|
|
||||||
const textFieldProps: ITextFieldProps = {
|
|
||||||
className: "directoryListFilterTextBox",
|
|
||||||
placeholder: "Filter by directory name",
|
|
||||||
onChange: this._onFilterChanged,
|
|
||||||
ariaLabel: "Directory filter text box",
|
|
||||||
};
|
|
||||||
|
|
||||||
// TODO: add magnify glass to search bar with onRenderSuffix
|
|
||||||
return (
|
|
||||||
<ScrollablePane data-is-scrollable="true">
|
|
||||||
<Sticky stickyPosition={StickyPositionType.Header}>
|
|
||||||
<TextField {...textFieldProps} />
|
|
||||||
</Sticky>
|
|
||||||
<List items={filteredItemsSelected} onRenderCell={this._onRenderCell} />
|
|
||||||
</ScrollablePane>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
private _onFilterChanged = (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, text?: string): void => {
|
|
||||||
this.setState({
|
|
||||||
filterText: text,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
private _onRenderCell = (directory: ListTenant): JSX.Element => {
|
|
||||||
const buttonProps: IButtonProps = {
|
|
||||||
disabled: directory.selected || false,
|
|
||||||
className: "directoryListButton",
|
|
||||||
onClick: this._onNewDirectoryClick,
|
|
||||||
styles: {
|
|
||||||
root: {
|
|
||||||
backgroundColor: "transparent",
|
|
||||||
height: "auto",
|
|
||||||
borderBottom: "1px solid #ccc",
|
|
||||||
padding: "1px 0",
|
|
||||||
width: "100%",
|
|
||||||
},
|
|
||||||
rootDisabled: {
|
|
||||||
backgroundColor: "#f1f1f8",
|
|
||||||
},
|
|
||||||
rootHovered: {
|
|
||||||
backgroundColor: "rgba(85,179,255,.1)",
|
|
||||||
},
|
|
||||||
flexContainer: {
|
|
||||||
height: "auto",
|
|
||||||
justifyContent: "flex-start",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<DefaultButton {...buttonProps}>
|
|
||||||
<div className="directoryListItem" data-is-focusable={true}>
|
|
||||||
<div className="directoryListItemName">{directory.displayName}</div>
|
|
||||||
<div className="directoryListItemId">{directory.tenantId}</div>
|
|
||||||
</div>
|
|
||||||
</DefaultButton>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
private _onNewDirectoryClick = (e: React.MouseEvent<HTMLButtonElement>): void => {
|
|
||||||
if (!e || !e.currentTarget) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const buttonElement = e.currentTarget;
|
|
||||||
const selectedDirectoryId = buttonElement.getElementsByClassName("directoryListItemId")[0].textContent;
|
|
||||||
const selectedDirectory = _.find(this.props.directories, (d) => d.tenantId === selectedDirectoryId);
|
|
||||||
|
|
||||||
this.props.onNewDirectorySelected(selectedDirectory);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
@ -1,93 +0,0 @@
|
||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`test render renders with directories and default 1`] = `
|
|
||||||
<Dropdown
|
|
||||||
className="defaultDirectoryDropdown"
|
|
||||||
defaultSelectedKey="asdfghjklzxcvbnm9876543210"
|
|
||||||
label="Set your default directory"
|
|
||||||
onChange={[Function]}
|
|
||||||
options={
|
|
||||||
Array [
|
|
||||||
Object {
|
|
||||||
"key": "lastVisited",
|
|
||||||
"text": "Sign in to your last visited directory",
|
|
||||||
},
|
|
||||||
Object {
|
|
||||||
"key": "asdfghjklzxcvbnm9876543210",
|
|
||||||
"text": "Macrohard(asdfghjklzxcvbnm9876543210)",
|
|
||||||
},
|
|
||||||
Object {
|
|
||||||
"key": "",
|
|
||||||
"text": "()",
|
|
||||||
},
|
|
||||||
]
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`test render renders with directories and last visit default 1`] = `
|
|
||||||
<Dropdown
|
|
||||||
className="defaultDirectoryDropdown"
|
|
||||||
defaultSelectedKey="lastVisited"
|
|
||||||
label="Set your default directory"
|
|
||||||
onChange={[Function]}
|
|
||||||
options={
|
|
||||||
Array [
|
|
||||||
Object {
|
|
||||||
"key": "lastVisited",
|
|
||||||
"text": "Sign in to your last visited directory",
|
|
||||||
},
|
|
||||||
Object {
|
|
||||||
"key": "asdfghjklzxcvbnm9876543210",
|
|
||||||
"text": "Macrohard(asdfghjklzxcvbnm9876543210)",
|
|
||||||
},
|
|
||||||
Object {
|
|
||||||
"key": "",
|
|
||||||
"text": "()",
|
|
||||||
},
|
|
||||||
]
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`test render renders with directories but no default 1`] = `
|
|
||||||
<Dropdown
|
|
||||||
className="defaultDirectoryDropdown"
|
|
||||||
defaultSelectedKey="lastVisited"
|
|
||||||
label="Set your default directory"
|
|
||||||
onChange={[Function]}
|
|
||||||
options={
|
|
||||||
Array [
|
|
||||||
Object {
|
|
||||||
"key": "lastVisited",
|
|
||||||
"text": "Sign in to your last visited directory",
|
|
||||||
},
|
|
||||||
Object {
|
|
||||||
"key": "asdfghjklzxcvbnm9876543210",
|
|
||||||
"text": "Macrohard(asdfghjklzxcvbnm9876543210)",
|
|
||||||
},
|
|
||||||
Object {
|
|
||||||
"key": "",
|
|
||||||
"text": "()",
|
|
||||||
},
|
|
||||||
]
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`test render renders with no directories 1`] = `
|
|
||||||
<Dropdown
|
|
||||||
className="defaultDirectoryDropdown"
|
|
||||||
defaultSelectedKey="lastVisited"
|
|
||||||
label="Set your default directory"
|
|
||||||
onChange={[Function]}
|
|
||||||
options={
|
|
||||||
Array [
|
|
||||||
Object {
|
|
||||||
"key": "lastVisited",
|
|
||||||
"text": "Sign in to your last visited directory",
|
|
||||||
},
|
|
||||||
]
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
`;
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,16 +0,0 @@
|
||||||
@import "../../../../less/Common/Constants.less";
|
|
||||||
|
|
||||||
.radioSwitchComponent {
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
&>span:nth-child(n+2) {
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.caption {
|
|
||||||
color: @BaseDark;
|
|
||||||
padding-left: @SmallSpace;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,51 +0,0 @@
|
||||||
/**
|
|
||||||
* Horizontal switch component
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { Icon } from "@fluentui/react";
|
|
||||||
import * as React from "react";
|
|
||||||
import { NormalizedEventKey } from "../../../Common/Constants";
|
|
||||||
import "./RadioSwitchComponent.less";
|
|
||||||
|
|
||||||
export interface Choice {
|
|
||||||
key: string;
|
|
||||||
onSelect: () => void;
|
|
||||||
label: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface RadioSwitchComponentProps {
|
|
||||||
choices: Choice[];
|
|
||||||
selectedKey: string;
|
|
||||||
onSelectionKeyChange?: (newValue: string) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export class RadioSwitchComponent extends React.Component<RadioSwitchComponentProps> {
|
|
||||||
public render(): JSX.Element {
|
|
||||||
return (
|
|
||||||
<div className="radioSwitchComponent">
|
|
||||||
{this.props.choices.map((choice: Choice) => (
|
|
||||||
<span
|
|
||||||
tabIndex={0}
|
|
||||||
key={choice.key}
|
|
||||||
onClick={() => this.onSelect(choice)}
|
|
||||||
onKeyPress={(event) => this.onKeyPress(event, choice)}
|
|
||||||
>
|
|
||||||
<Icon iconName={this.props.selectedKey === choice.key ? "RadioBtnOn" : "RadioBtnOff"} />
|
|
||||||
<span className="caption">{choice.label}</span>
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
private onSelect(choice: Choice): void {
|
|
||||||
this.props.onSelectionKeyChange && this.props.onSelectionKeyChange(choice.key);
|
|
||||||
choice.onSelect();
|
|
||||||
}
|
|
||||||
|
|
||||||
private onKeyPress(event: React.KeyboardEvent<HTMLSpanElement>, choice: Choice): void {
|
|
||||||
if (event.key === NormalizedEventKey.Enter || event.key === NormalizedEventKey.Space) {
|
|
||||||
this.onSelect(choice);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
/**
|
|
||||||
* Generic abstract React component that senses its dimensions.
|
|
||||||
* It updates its state and re-renders if dimensions change.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import * as React from "react";
|
|
||||||
import * as ResizeSensor from "css-element-queries/src/ResizeSensor";
|
|
||||||
|
|
||||||
export abstract class ResizeSensorComponent<P, S> extends React.Component<P, S> {
|
|
||||||
private isSensing: boolean = false;
|
|
||||||
private resizeSensor: any;
|
|
||||||
|
|
||||||
public constructor(props: P) {
|
|
||||||
super(props);
|
|
||||||
}
|
|
||||||
|
|
||||||
protected abstract onDimensionsChanged(width: number, height: number): void;
|
|
||||||
protected abstract getSensorTarget(): HTMLElement;
|
|
||||||
|
|
||||||
public componentDidUpdate(): void {
|
|
||||||
if (this.isSensing) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const bar = this.getSensorTarget();
|
|
||||||
if (bar.clientWidth > 0 || bar.clientHeight > 0) {
|
|
||||||
const oldPosition = bar.style.position;
|
|
||||||
// TODO Find a better way to use constructor
|
|
||||||
this.resizeSensor = new (ResizeSensor as any)(bar, () => {
|
|
||||||
this.onDimensionsChanged(bar.clientWidth, bar.clientHeight);
|
|
||||||
});
|
|
||||||
this.isSensing = true;
|
|
||||||
|
|
||||||
// ResizeSensor.js sets position to 'relative' which makes the dropdown menu appear clipped.
|
|
||||||
// Undoing doesn't seem to affect resize sensing functionality.
|
|
||||||
bar.style.position = oldPosition;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
public componentWillUnmount(): void {
|
|
||||||
if (!!this.resizeSensor) {
|
|
||||||
this.resizeSensor.detach();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue