Skip to content

Commit

Permalink
feat: get rid of prop-types and set peerDependency of react to >=16
Browse files Browse the repository at this point in the history
  • Loading branch information
@xobotyi
xobotyi committed Jul 22, 2021
1 parent 0200d69 commit c3e50ae
Show file tree
Hide file tree
Showing 10 changed files with 4,349 additions and 192 deletions.
1 change: 0 additions & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,3 @@ package-lock.json
node_modules
coverage
dist
yarn.lock
4 changes: 1 addition & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,7 @@
"dist"
],
"peerDependencies": {
"prop-types": "^15.0.0",
"react": "^16.0.0"
"react": ">=16.0.0"
},
"dependencies": {
"cnbuilder": "^2.5.0",
Expand All @@ -63,7 +62,6 @@
"karma-typescript": "^5.0.3",
"prettier": "^2.0.5",
"pretty-quick": "^2.0.1",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"rimraf": "^3.0.2",
Expand Down
4 changes: 2 additions & 2 deletions src/Emittr.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ export default class Emittr {
for (idx = handlers[eventName].length - 1; idx >= 0; idx--) {
Emittr._callEventHandlers(this, removeHandlers, [
eventName,
(handlers[eventName][idx] as OnceHandler).handler || handlers[eventName][idx],
(handlers[eventName][idx] as OnceHandler).handler || handlers[eventName][idx]
]);
}
}
Expand All @@ -165,7 +165,7 @@ export default class Emittr {
handler,
wrappedHandler: undefined,
emitter: this,
event: name,
event: name
};
const wrappedHandler: OnceHandler = Emittr._onceWrapper.bind(onceState);
onceState.wrappedHandler = wrappedHandler;
Expand Down
149 changes: 41 additions & 108 deletions src/Scrollbar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { cnb } from "cnbuilder";
import * as PropTypes from "prop-types";
import * as React from "react";
import { DraggableData } from "react-draggable";
import { zoomLevel } from "zoom-level";
Expand All @@ -8,13 +7,7 @@ import Loop from "./Loop";
import ScrollbarThumb, { ScrollbarThumbProps } from "./ScrollbarThumb";
import ScrollbarTrack, { ScrollbarTrackClickParameters, ScrollbarTrackProps } from "./ScrollbarTrack";
import defaultStyle from "./style";
import {
AXIS_DIRECTION,
ElementPropsWithElementRefAndRenderer,
ScrollState,
TRACK_CLICK_BEHAVIOR,
TRACK_CLICK_BEHAVIOR_PROP_TYPE,
} from "./types";
import { AXIS_DIRECTION, ElementPropsWithElementRefAndRenderer, ScrollState, TRACK_CLICK_BEHAVIOR } from "./types";
import * as util from "./util";
import { renderDivWithRenderer } from "./util";

Expand Down Expand Up @@ -101,72 +94,12 @@ export type ScrollbarState = {
export type ScrollbarContextValue = { parentScrollbar: Scrollbar | null };

export const ScrollbarContext: React.Context<ScrollbarContextValue> = React.createContext({
parentScrollbar: null,
parentScrollbar: null
} as ScrollbarContextValue);

export default class Scrollbar extends React.Component<ScrollbarProps, ScrollbarState> {
static contextType = ScrollbarContext;
static propTypes = {
createContext: PropTypes.bool,
rtl: PropTypes.bool,
native: PropTypes.bool,
mobileNative: PropTypes.bool,
momentum: PropTypes.bool,
noDefaultStyles: PropTypes.bool,

disableTracksMousewheelScrolling: PropTypes.bool,
disableTrackXMousewheelScrolling: PropTypes.bool,
disableTrackYMousewheelScrolling: PropTypes.bool,

disableTracksWidthCompensation: PropTypes.bool,
disableTrackXWidthCompensation: PropTypes.bool,
disableTrackYWidthCompensation: PropTypes.bool,

minimalThumbSize: PropTypes.number,
maximalThumbSize: PropTypes.number,
minimalThumbXSize: PropTypes.number,
maximalThumbXSize: PropTypes.number,
minimalThumbYSize: PropTypes.number,
maximalThumbYSize: PropTypes.number,

noScrollX: PropTypes.bool,
noScrollY: PropTypes.bool,
noScroll: PropTypes.bool,

permanentTrackX: PropTypes.bool,
permanentTrackY: PropTypes.bool,
permanentTracks: PropTypes.bool,

translateContentSizesToHolder: PropTypes.bool,
translateContentSizeYToHolder: PropTypes.bool,
translateContentSizeXToHolder: PropTypes.bool,

removeTracksWhenNotUsed: PropTypes.bool,
removeTrackYWhenNotUsed: PropTypes.bool,
removeTrackXWhenNotUsed: PropTypes.bool,

trackClickBehavior: TRACK_CLICK_BEHAVIOR_PROP_TYPE,

scrollbarWidth: PropTypes.number,
fallbackScrollbarWidth: PropTypes.number,
scrollDetectionThreshold: PropTypes.number,
scrollTop: PropTypes.number,
scrollLeft: PropTypes.number,

className: PropTypes.string,

wrapperProps: PropTypes.object,
contentProps: PropTypes.object,
trackXProps: PropTypes.object,
trackYProps: PropTypes.object,
thumbXProps: PropTypes.object,
thumbYProps: PropTypes.object,

onUpdate: PropTypes.func,
onScroll: PropTypes.func,
onScrollStart: PropTypes.func,
onScrollStop: PropTypes.func,
};

static defaultProps = {
momentum: true,

Expand All @@ -184,7 +117,7 @@ export default class Scrollbar extends React.Component<ScrollbarProps, Scrollbar
trackXProps: {},
trackYProps: {},
thumbXProps: {},
thumbYProps: {},
thumbYProps: {}
};
/**
* @description UUID identifying scrollbar instance
Expand Down Expand Up @@ -235,7 +168,7 @@ export default class Scrollbar extends React.Component<ScrollbarProps, Scrollbar
this.state = {
trackXVisible: false,
trackYVisible: false,
isRTL: props.rtl,
isRTL: props.rtl
};

this.scrollValues = this.getScrollState(true);
Expand Down Expand Up @@ -318,44 +251,44 @@ export default class Scrollbar extends React.Component<ScrollbarProps, Scrollbar
holder: {
...(useDefaultStyles && defaultStyle.holder),
position: "relative",
...props.style,
...props.style
} as React.CSSProperties,
wrapper: {
...(useDefaultStyles && {
...defaultStyle.wrapper,
...(!props.disableTracksWidthCompensation &&
!props.disableTrackYWidthCompensation && {
[state.isRTL ? "left" : "right"]: state.trackYVisible ? 10 : 0,
[state.isRTL ? "left" : "right"]: state.trackYVisible ? 10 : 0
}),
...(!props.disableTracksWidthCompensation &&
!props.disableTrackXWidthCompensation && {
bottom: state.trackXVisible ? 10 : 0,
}),
bottom: state.trackXVisible ? 10 : 0
})
}),
...props.wrapperProps!.style,
position: "absolute",
overflow: "hidden",
overflow: "hidden"
} as React.CSSProperties,
content: {
...(useDefaultStyles && defaultStyle.content),
...(props.translateContentSizesToHolder ||
props.translateContentSizeYToHolder ||
props.translateContentSizeXToHolder
? {
display: "table-cell",
}
display: "table-cell"
}
: {
padding: 0.05, // needed to disable margin collapsing without flexboxes, other possible solutions here: https://stackoverflow.com/questions/19718634/how-to-disable-margin-collapsing
}),
padding: 0.05 // needed to disable margin collapsing without flexboxes, other possible solutions here: https://stackoverflow.com/questions/19718634/how-to-disable-margin-collapsing
}),
...(useDefaultStyles &&
!(props.translateContentSizesToHolder || props.translateContentSizeYToHolder) && {
minHeight: "100%",
minHeight: "100%"
}),
...(useDefaultStyles &&
!(props.translateContentSizesToHolder || props.translateContentSizeXToHolder) && {
minWidth: "100%",
minWidth: "100%"
}),
...props.contentProps!.style,
...props.contentProps!.style
} as React.CSSProperties,
scroller: {
position: "absolute",
Expand All @@ -372,7 +305,7 @@ export default class Scrollbar extends React.Component<ScrollbarProps, Scrollbar
...props.scrollerProps!.style,

...(!util.isUndef(props.rtl) && {
direction: props.rtl ? "rtl" : "ltr",
direction: props.rtl ? "rtl" : "ltr"
}),

...(props.momentum && { WebkitOverflowScrolling: "touch" }),
Expand All @@ -385,31 +318,31 @@ export default class Scrollbar extends React.Component<ScrollbarProps, Scrollbar
: undefined,
[state.isRTL ? "marginLeft" : "marginRight"]: scrollValues.scrollYPossible
? -(scrollbarWidth || props.fallbackScrollbarWidth!) - Number(scrollValues.zoomLevel !== 1)
: undefined,
: undefined
} as React.CSSProperties,
trackX: {
...(useDefaultStyles && defaultStyle.track.common),
...(useDefaultStyles && defaultStyle.track.x),
...props.trackXProps!.style,
...(!state.trackXVisible && { display: "none" }),
...(!state.trackXVisible && { display: "none" })
} as React.CSSProperties,
trackY: {
...(useDefaultStyles && defaultStyle.track.common),
...(useDefaultStyles && defaultStyle.track.y),
...(useDefaultStyles && { [state.isRTL ? "left" : "right"]: 0 }),
...props.trackYProps!.style,
...(!state.trackYVisible && { display: "none" }),
...(!state.trackYVisible && { display: "none" })
} as React.CSSProperties,
thumbX: {
...(useDefaultStyles && defaultStyle.thumb.common),
...(useDefaultStyles && defaultStyle.thumb.x),
...props.thumbXProps!.style,
...props.thumbXProps!.style
} as React.CSSProperties,
thumbY: {
...(useDefaultStyles && defaultStyle.thumb.common),
...(useDefaultStyles && defaultStyle.thumb.y),
...props.thumbYProps!.style,
} as React.CSSProperties,
...props.thumbYProps!.style
} as React.CSSProperties
};
}

Expand Down Expand Up @@ -543,7 +476,7 @@ export default class Scrollbar extends React.Component<ScrollbarProps, Scrollbar
trackYVisible: false,
trackXVisible: false,
zoomLevel: pageZoomLevel * 1,
isRTL: undefined,
isRTL: undefined
};

const props = this.props;
Expand Down Expand Up @@ -655,7 +588,7 @@ export default class Scrollbar extends React.Component<ScrollbarProps, Scrollbar
// autodetect direction if not defined
if (util.isUndef(this.state.isRTL)) {
this.setState({
isRTL: getComputedStyle(this.scrollerElement).direction === "rtl",
isRTL: getComputedStyle(this.scrollerElement).direction === "rtl"
});

return this.getScrollState();
Expand Down Expand Up @@ -736,7 +669,7 @@ export default class Scrollbar extends React.Component<ScrollbarProps, Scrollbar
this.scrollValues = prevScrollState;
this.setState({
trackYVisible: (this.scrollValues.trackYVisible = scrollState.trackYVisible)!,
trackXVisible: (this.scrollValues.trackXVisible = scrollState.trackXVisible)!,
trackXVisible: (this.scrollValues.trackXVisible = scrollState.trackXVisible)!
});

return;
Expand Down Expand Up @@ -843,7 +776,7 @@ export default class Scrollbar extends React.Component<ScrollbarProps, Scrollbar
...propsContentProps,
key: "ScrollbarsCustom-Content",
className: cnb("ScrollbarsCustom-Content", propsContentProps!.className),
children,
children
} as ElementPropsWithElementRefAndRenderer;

const scrollerProps = {
Expand All @@ -858,17 +791,17 @@ export default class Scrollbar extends React.Component<ScrollbarProps, Scrollbar
style: {
...propsHolderProps.style,
...(!util.isUndef(rtl) && {
direction: rtl ? "rtl" : "ltr",
direction: rtl ? "rtl" : "ltr"
}),

...(momentum && { WebkitOverflowScrolling: "touch" }),
overflowX: noScroll || noScrollX ? "hidden" : permanentTracks || permanentTrackX ? "scroll" : "auto",
overflowY: noScroll || noScrollY ? "hidden" : permanentTracks || permanentTrackY ? "scroll" : "auto",
overflowY: noScroll || noScrollY ? "hidden" : permanentTracks || permanentTrackY ? "scroll" : "auto"
},
onScroll: this.handleScrollerScroll,
children: renderDivWithRenderer(contentProps, this.elementRefContent),
renderer: propsScrollerProps!.renderer,
elementRef: propsScrollerProps!.elementRef,
elementRef: propsScrollerProps!.elementRef
} as ElementPropsWithElementRefAndRenderer;

return renderDivWithRenderer(scrollerProps, this.elementRefScroller);
Expand All @@ -887,7 +820,7 @@ export default class Scrollbar extends React.Component<ScrollbarProps, Scrollbar
<ScrollbarContext.Provider value={{ parentScrollbar: this }} children={children} />
) : (
children
),
)
} as ElementPropsWithElementRefAndRenderer;

const scrollerProps = {
Expand All @@ -896,15 +829,15 @@ export default class Scrollbar extends React.Component<ScrollbarProps, Scrollbar
className: cnb("ScrollbarsCustom-Scroller", propsScrollerProps!.className),
style: styles.scroller,
children: renderDivWithRenderer(contentProps, this.elementRefContent),
onScroll: this.handleScrollerScroll,
onScroll: this.handleScrollerScroll
} as ElementPropsWithElementRefAndRenderer;

const wrapperProps = {
...propsWrapperProps,
key: "ScrollbarsCustom-Wrapper",
className: cnb("ScrollbarsCustom-Wrapper", propsWrapperProps!.className),
style: styles.wrapper,
children: renderDivWithRenderer(scrollerProps, this.elementRefScroller),
children: renderDivWithRenderer(scrollerProps, this.elementRefScroller)
} as ElementPropsWithElementRefAndRenderer;

holderChildren.push(renderDivWithRenderer(wrapperProps, this.elementRefWrapper));
Expand All @@ -917,7 +850,7 @@ export default class Scrollbar extends React.Component<ScrollbarProps, Scrollbar
elementRef: this.elementRefThumbY,
onDrag: this.handleThumbYDrag,
onDragEnd: this.handleThumbYDragEnd,
axis: AXIS_DIRECTION.Y,
axis: AXIS_DIRECTION.Y
} as ScrollbarThumbProps;

const trackYProps = {
Expand All @@ -927,9 +860,9 @@ export default class Scrollbar extends React.Component<ScrollbarProps, Scrollbar
elementRef: this.elementRefTrackY,
onClick: this.handleTrackYClick,
...((disableTracksMousewheelScrolling || disableTrackYMousewheelScrolling) && {
onWheel: this.handleTrackYMouseWheel,
onWheel: this.handleTrackYMouseWheel
}),
axis: AXIS_DIRECTION.Y,
axis: AXIS_DIRECTION.Y
} as ScrollbarTrackProps;

trackYProps.children = <ScrollbarThumb {...thumbYProps} />;
Expand All @@ -947,7 +880,7 @@ export default class Scrollbar extends React.Component<ScrollbarProps, Scrollbar
elementRef: this.elementRefThumbX,
onDrag: this.handleThumbXDrag,
onDragEnd: this.handleThumbXDragEnd,
axis: AXIS_DIRECTION.X,
axis: AXIS_DIRECTION.X
} as ScrollbarThumbProps;

const trackXProps = {
Expand All @@ -957,9 +890,9 @@ export default class Scrollbar extends React.Component<ScrollbarProps, Scrollbar
elementRef: this.elementRefTrackX,
onClick: this.handleTrackXClick,
...((disableTracksMousewheelScrolling || disableTrackXMousewheelScrolling) && {
onWheel: this.handleTrackXMouseWheel,
onWheel: this.handleTrackXMouseWheel
}),
axis: AXIS_DIRECTION.X,
axis: AXIS_DIRECTION.X
} as ScrollbarTrackProps;

trackXProps.children = <ScrollbarThumb {...thumbXProps} />;
Expand All @@ -979,7 +912,7 @@ export default class Scrollbar extends React.Component<ScrollbarProps, Scrollbar
propsHolderProps.className
),
style: styles.holder,
children: holderChildren,
children: holderChildren
} as ElementPropsWithElementRefAndRenderer;

return renderDivWithRenderer(holderProps, this.elementRefHolder);
Expand Down
Loading

0 comments on commit c3e50ae

Please sign in to comment.