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