From 84a3302492f3f77a2ed4f68ab190c3bfad9c91e3 Mon Sep 17 00:00:00 2001 From: Super Snager Date: Sun, 3 Mar 2024 17:09:47 +0100 Subject: [PATCH] chore: removed default props from function components BREAKING CHANGE: defaultProps have been removed from all function components. It should be backward compatible, but it's safer to release the major version. The default props of some internal class components have also been rewritten. Bumped react and react-dom to 18.2.0 in devDependencies. --- package.json | 4 +- .../ContentEditable/ContentEditable.jsx | 8 +-- .../ConversationHeaderContent.jsx | 4 +- src/components/Loader/Loader.jsx | 7 ++- src/components/MessageList/MessageList.jsx | 26 ++++----- .../Scroll/ReactPerfectScrollbar.jsx | 56 ++++--------------- src/components/Scroll/index.jsx | 4 +- 7 files changed, 41 insertions(+), 68 deletions(-) diff --git a/package.json b/package.json index 62ef277..a7544eb 100644 --- a/package.json +++ b/package.json @@ -61,8 +61,8 @@ "husky": "4.3.0", "lint-staged": "10.4.0", "prettier": "2.1.2", - "react": "^16.12.0", - "react-dom": "^16.12.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", "rollup": "2.26.5", "rollup-plugin-peer-deps-external": "2.2.3", "rollup-plugin-terser": "5.3.0", diff --git a/src/components/ContentEditable/ContentEditable.jsx b/src/components/ContentEditable/ContentEditable.jsx index 3eec0f0..5bd7c07 100644 --- a/src/components/ContentEditable/ContentEditable.jsx +++ b/src/components/ContentEditable/ContentEditable.jsx @@ -28,8 +28,8 @@ const replaceCaret = (el, activateAfterChange) => { }; export class ContentEditable extends Component { - constructor({value = undefined, placeholder = "", disabled = false, activateAfterChange = false, autoFocus = false, onChange = () => {}, onKeyPress = () => {}, ...rest}) { - super({value, placeholder,disabled, activateAfterChange, autoFocus, onChange, onKeyPress, ...rest}); + constructor(props) { + super(props); this.msgRef = React.createRef(); } @@ -47,7 +47,7 @@ export class ContentEditable extends Component { const { props: { onKeyPress }, } = this; - onKeyPress(evt); + onKeyPress?.(evt); }; handleInput = (evt) => { @@ -56,7 +56,7 @@ export class ContentEditable extends Component { } = this; const target = evt.target; - onChange(target.innerHTML, target.textContent, target.innerText); + onChange?.(target.innerHTML, target.textContent, target.innerText); }; // Public API diff --git a/src/components/ConversationHeader/ConversationHeaderContent.jsx b/src/components/ConversationHeader/ConversationHeaderContent.jsx index 4cb3919..223f3a2 100644 --- a/src/components/ConversationHeader/ConversationHeaderContent.jsx +++ b/src/components/ConversationHeader/ConversationHeaderContent.jsx @@ -4,10 +4,10 @@ import classNames from "classnames"; import { prefix } from "../settings"; export const ConversationHeaderContent = ({ - userName, + userName = "", info = "", children = undefined, - className = "", + className, ...rest }) => { const cName = `${prefix}-conversation-header__content`; diff --git a/src/components/Loader/Loader.jsx b/src/components/Loader/Loader.jsx index 4a1289e..4eb02fe 100644 --- a/src/components/Loader/Loader.jsx +++ b/src/components/Loader/Loader.jsx @@ -3,7 +3,12 @@ import PropTypes from "prop-types"; import classNames from "classnames"; import { prefix } from "../settings"; -export const Loader = ({ className = undefined, variant = "default", children = undefined, ...rest }) => { +export const Loader = ({ + className = undefined, + variant = "default", + children, + ...rest +}) => { const cName = `${prefix}-loader`; const textClass = React.Children.count(children) > 0 ? `${cName}--content` : ""; diff --git a/src/components/MessageList/MessageList.jsx b/src/components/MessageList/MessageList.jsx index 7f15852..977a2b5 100644 --- a/src/components/MessageList/MessageList.jsx +++ b/src/components/MessageList/MessageList.jsx @@ -12,18 +12,8 @@ import MessageSeparator from "../MessageSeparator"; import MessageListContent from "./MessageListContent"; class MessageListInner extends React.Component { - constructor({ - typingIndicator = undefined, - loading = false, - loadingMore = false, - loadingMorePosition = "top", - disableOnYReachWhenNoScroll = false, - autoScrollToBottom = true, - autoScrollToBottomOnMount = true, - scrollBehavior = "auto", - ...rest - }) { - super({typingIndicator, loading, loadingMore, loadingMorePosition, disableOnYReachWhenNoScroll, autoScrollToBottom, autoScrollToBottomOnMount, scrollBehavior, ...rest}); + constructor(props) { + super(props); this.scrollPointRef = React.createRef(); this.containerRef = React.createRef(); @@ -410,9 +400,19 @@ MessageList.propTypes = { className: PropTypes.string, }; - +MessageList.defaultProps = { + typingIndicator: undefined, + loading: false, + loadingMore: false, + loadingMorePosition: "top", + disableOnYReachWhenNoScroll: false, + autoScrollToBottom: true, + autoScrollToBottomOnMount: true, + scrollBehavior: "auto", +}; MessageListInner.propTypes = MessageList.propTypes; +MessageListInner.defaultProps = MessageList.defaultProps; MessageList.Content = MessageListContent; diff --git a/src/components/Scroll/ReactPerfectScrollbar.jsx b/src/components/Scroll/ReactPerfectScrollbar.jsx index d6dde0a..1c57350 100644 --- a/src/components/Scroll/ReactPerfectScrollbar.jsx +++ b/src/components/Scroll/ReactPerfectScrollbar.jsx @@ -18,53 +18,15 @@ const handlerNameByEvent = { Object.freeze(handlerNameByEvent); export default class ScrollBar extends Component { - constructor({ - className = "", - style = undefined, - option = undefined, - options = undefined, - containerRef = () => {}, - onScrollY = undefined, - onScrollX = undefined, - onScrollUp = undefined, - onScrollDown = undefined, - onScrollLeft = undefined, - onScrollRight = undefined, - onYReachStart = undefined, - onYReachEnd = undefined, - onXReachStart = undefined, - onXReachEnd = undefined, - onSync = (ps) => ps.update(), - component = "div", - ...rest - }) { - super({ - className, - style, - option, - options, - containerRef, - onScrollX, - onScrollY, - onScrollUp, - onScrollDown, - onScrollLeft, - onScrollRight, - onYReachStart, - onYReachEnd, - onXReachStart, - onXReachEnd, - onSync, - component, - ...rest - }); - + constructor(props) { + super(props); this.handleRef = this.handleRef.bind(this); this._handlerByEvent = {}; } componentDidMount() { if (this.props.option) { + /* eslint-disable-next-line no-console */ console.warn( 'react-perfect-scrollbar: the "option" prop has been deprecated in favor of "options"' ); @@ -139,12 +101,17 @@ export default class ScrollBar extends Component { } updateScroll() { - this.props.onSync(this._ps); + const onSync = this.props.onSync; + if (typeof onSync === "function") { + onSync(this._ps); + } else { + this._ps.update(); + } } handleRef(ref) { this._container = ref; - this.props.containerRef(ref); + this.props.containerRef?.(ref); } render() { @@ -169,7 +136,8 @@ export default class ScrollBar extends Component { children, ...remainProps } = this.props; - const Comp = component; + + const Comp = typeof component === "undefined" ? "div" : component; return ( diff --git a/src/components/Scroll/index.jsx b/src/components/Scroll/index.jsx index e36cd4d..ee9c774 100644 --- a/src/components/Scroll/index.jsx +++ b/src/components/Scroll/index.jsx @@ -1,3 +1,3 @@ -import Scrollbar from "./ReactPerfectScrollbar"; +import ScrollBar from "./ReactPerfectScrollbar"; export * from "./ReactPerfectScrollbar"; -export default Scrollbar; +export default ScrollBar;