honeymoose/sp-dev-fx-webparts
1
0
Fork 0
mirror of https://github.com/pnp/sp-dev-fx-webparts.git synced 2025-02-07 21:48:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Removed connection to component size awareness

Browse Source
This commit is contained in:
Hugo Bernier 2020-04-18 11:37:27 -04:00
parent 2e127f7ec0
commit ee4be77e8f
3 changed files with 1 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
samples/react-calendar-feed/package-lock.json generated
View File

@ -4878,11 +4878,6 @@
"integrity": "sha512-NsEzBVa5aMgn/n79piyJtpUQFzJ97tB2R2r8PSJlLnMA6LJmchKuv7ATN+/nZH/3QRd/+uFXEq07/i/ajsqVGQ==",
"dev": true
},
"@rehooks/component-size": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@rehooks/component-size/-/component-size-1.0.3.tgz",
"integrity": "sha512-pnYld+8SSF2vXwdLOqBGUyOrv/SjzwLjIUcs/4c1JJgR0q4E9eBtBfuZMD6zUD51fvSehSsbnlQMzotSmPTXPg=="
},
"@types/adal-angular": {
"version": "1.0.1",
"resolved": "http://registry.npmjs.org/@types/adal-angular/-/adal-angular-1.0.1.tgz",

1
samples/react-calendar-feed/package.json
View File

@ -23,7 +23,6 @@
"@pnp/sp": "^1.2.8",
"@pnp/spfx-controls-react": "^1.11.0",
"@pnp/spfx-property-controls": "^1.13.1",
"@rehooks/component-size": "^1.0.3",
"@types/es6-promise": "0.0.33",
"@types/react": "16.8.8",
"@types/react-dom": "16.8.3",

16
samples/react-calendar-feed/src/shared/components/filmstripLayout/FilmstripLayout.tsx
View File

@ -4,7 +4,7 @@ import * as React from 'react';
import Slider from 'react-slick';
import { SPComponentLoader } from '@microsoft/sp-loader';
import styles from "./FilmstripLayout.module.scss";
import { useRef,useLayoutEffect, useState } from 'react';
import { useRef } from 'react';
function useBreakpoints(currentWidth: number, breakpoints: number[]) {
return breakpoints.map(breakpoint => currentWidth < breakpoint);
@ -15,20 +15,7 @@ function useBreakpoints(currentWidth: number, breakpoints: number[]) {
* Presents the child compoments as a slick slide
*/
export const FilmstripLayout = (props: { children: any; clientWidth: number; ariaLabel?: string; }) => {
function useWindowSize() {
const [size, setSize] = useState([0, 0]);
useLayoutEffect(() => {
function updateSize() {
setSize([window.innerWidth, window.innerHeight]);
}
window.addEventListener('resize', updateSize);
updateSize();
return () => window.removeEventListener('resize', updateSize);
}, []);
return size;
}
const [width, height] = useWindowSize();
let ref: React.MutableRefObject<HTMLDivElement> = useRef<HTMLDivElement>(null);
// // the slick slider used in normal views
let _slider: React.MutableRefObject<Slider> = useRef<Slider>(null);
@ -76,7 +63,6 @@ export const FilmstripLayout = (props: { children: any; clientWidth: number; ari
return (
<div>
WIDTH: { width }
<div className={css(styles.filmstripLayout, styles.filmStrip)} aria-label={props.ariaLabel} ref={ref}>
<Slider ref={_slider} {...settings}>
{props.children}