imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Remove ResizeObserver Polyfill (#7844)

Browse source
This commit is contained in:
Michael Telatynski 2022-02-18 13:51:27 +00:00 • committed by GitHub
parent 29c1c8d1e1
commit 38a547b5d0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 12 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/components/views/elements/PersistedElement.tsx
View file

@ -24,7 +24,6 @@ import MatrixClientContext from "../../../contexts/MatrixClientContext";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
import { replaceableComponent } from "../../../utils/replaceableComponent";
import { ActionPayload } from "../../../dispatcher/payloads";
import { ResizeObserverPolyfill } from "../../../stores/UIStore";
export const getPersistKey = (appId: string) => 'widget_' + appId;
@ -81,7 +80,7 @@ export default class PersistedElement extends React.Component<IProps> {
constructor(props: IProps) {
super(props);
this.resizeObserver = new ResizeObserverPolyfill(this.repositionChild);
this.resizeObserver = new ResizeObserver(this.repositionChild);
// Annoyingly, a resize observer is insufficient, since we also care
// about when the element moves on the screen without changing its
// dimensions. Doesn't look like there's a ResizeObserver equivalent

3
src/components/views/messages/CallEvent.tsx
View file

@ -27,7 +27,6 @@ import InfoTooltip, { InfoTooltipKind } from '../elements/InfoTooltip';
import AccessibleTooltipButton from '../elements/AccessibleTooltipButton';
import { formatCallTime } from "../../../DateUtils";
import Clock from "../audio_messages/Clock";
import { ResizeObserverPolyfill } from "../../../stores/UIStore";
const MAX_NON_NARROW_WIDTH = 450 / 70 * 100;
@ -64,7 +63,7 @@ export default class CallEvent extends React.PureComponent<IProps, IState> {
this.props.callEventGrouper.addListener(CallEventGrouperEvent.SilencedChanged, this.onSilencedChanged);
this.props.callEventGrouper.addListener(CallEventGrouperEvent.LengthChanged, this.onLengthChanged);
this.resizeObserver = new ResizeObserverPolyfill(this.resizeObserverCallback);
this.resizeObserver = new ResizeObserver(this.resizeObserverCallback);
this.wrapperElement.current && this.resizeObserver.observe(this.wrapperElement.current);
}

13
src/stores/UIStore.ts
View file

@ -14,21 +14,12 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import EventEmitter from "events"; // eslint-disable-line @typescript-eslint/no-var-requires
import ResizeObserverEntry from 'resize-observer-polyfill/src/ResizeObserverEntry';
// XXX: resize-observer-polyfill has types that now conflict with typescript's
// own DOM types: https://github.com/que-etc/resize-observer-polyfill/issues/80
// Using require here rather than import is a horrendous workaround. We should
// be able to remove the polyfill once Safari 14 is released.
export const ResizeObserverPolyfill = require('resize-observer-polyfill'); // eslint-disable-line @typescript-eslint/no-var-requires
import EventEmitter from "events";
export enum UI_EVENTS {
Resize = "resize"
}
export type ResizeObserverCallbackFunction = (entries: ResizeObserverEntry[]) => void;
export default class UIStore extends EventEmitter {
private static _instance: UIStore = null;
@ -48,7 +39,7 @@ export default class UIStore extends EventEmitter {
// eslint-disable-next-line no-restricted-properties
this.windowHeight = window.innerHeight;
this.resizeObserver = new ResizeObserverPolyfill(this.resizeObserverCallback);
this.resizeObserver = new ResizeObserver(this.resizeObserverCallback);
this.resizeObserver.observe(document.body);
}