From 7bc07d0f5116c8f6a56268eef56a94eb377ef60c Mon Sep 17 00:00:00 2001 From: Kai Dederichs Date: Thu, 20 Jul 2023 13:00:43 +0200 Subject: [PATCH] Replace defaultProps --- src/components/Avatar/Avatar.jsx | 11 +--- src/components/AvatarGroup/AvatarGroup.jsx | 6 +- src/components/Buttons/AddUserButton.jsx | 6 +- src/components/Buttons/ArrowButton.jsx | 7 +-- src/components/Buttons/AttachmentButton.jsx | 6 +- src/components/Buttons/Button.jsx | 18 ++---- src/components/Buttons/EllipsisButton.jsx | 9 +-- src/components/Buttons/InfoButton.jsx | 6 +- src/components/Buttons/SendButton.jsx | 6 +- src/components/Buttons/StarButton.jsx | 6 +- src/components/Buttons/VideoCallButton.jsx | 5 +- src/components/Buttons/VoiceCallButton.jsx | 6 +- .../ChatContainer/ChatContainer.jsx | 6 +- .../ContentEditable/ContentEditable.jsx | 14 +---- src/components/Conversation/Conversation.jsx | 24 +++---- .../Conversation/ConversationContent.jsx | 1 - .../Conversation/ConversationOperations.jsx | 2 - .../ConversationHeader/ConversationHeader.jsx | 6 +- .../ConversationHeaderActions.jsx | 6 +- .../ConversationHeaderBack.jsx | 9 +-- .../ConversationHeaderContent.jsx | 12 +--- .../ConversationList/ConversationList.jsx | 18 ++---- .../ExpansionPanel/ExpansionPanel.jsx | 12 ++-- src/components/InputToolbox/InputToolbox.jsx | 2 - src/components/Loader/Loader.jsx | 8 +-- .../MainContainer/MainContainer.jsx | 7 +-- src/components/Message/Message.jsx | 26 +++----- .../Message/MessageCustomContent.jsx | 2 - src/components/Message/MessageFooter.jsx | 12 +--- src/components/Message/MessageHeader.jsx | 12 +--- src/components/Message/MessageHtmlContent.jsx | 2 - .../Message/MessageImageContent.jsx | 2 - src/components/Message/MessageTextContent.jsx | 2 - src/components/MessageGroup/MessageGroup.jsx | 15 ++--- .../MessageGroup/MessageGroupFooter.jsx | 6 +- .../MessageGroup/MessageGroupHeader.jsx | 6 +- .../MessageGroup/MessageGroupMessages.jsx | 6 +- src/components/MessageInput/MessageInput.jsx | 44 ++++--------- src/components/MessageList/MessageList.jsx | 26 ++++---- .../MessageSeparator/MessageSeparator.jsx | 14 ++--- src/components/Overlay/Overlay.jsx | 9 +-- .../Scroll/ReactPerfectScrollbar.jsx | 62 ++++++++++++------- src/components/Search/Search.jsx | 12 +--- src/components/Sidebar/Sidebar.jsx | 18 ++---- src/components/Status/Status.jsx | 6 +- src/components/StatusList/StatusList.jsx | 8 +-- .../TypingIndicator/TypingIndicator.jsx | 6 +- 47 files changed, 146 insertions(+), 369 deletions(-) diff --git a/src/components/Avatar/Avatar.jsx b/src/components/Avatar/Avatar.jsx index bb363e2..da38912 100644 --- a/src/components/Avatar/Avatar.jsx +++ b/src/components/Avatar/Avatar.jsx @@ -6,7 +6,7 @@ import { Status } from "../Status/Status"; import { SizeEnum, StatusEnum } from "../enums"; function AvatarInner( - { name, src, size, status, className, active, children, ...rest }, + { name = "", src = "", size = "md", status, className, active = false, children, ...rest }, ref ) { const cName = `${prefix}-avatar`; @@ -72,14 +72,5 @@ Avatar.propTypes = { AvatarInner.propTypes = Avatar.propTypes; -AvatarInner.defaultProps = { - name: "", - src: "", - size: "md", - active: false, -}; - -Avatar.defaultProps = AvatarInner.defaultProps; - export { Avatar }; export default Avatar; diff --git a/src/components/AvatarGroup/AvatarGroup.jsx b/src/components/AvatarGroup/AvatarGroup.jsx index 23b4628..f0231bb 100644 --- a/src/components/AvatarGroup/AvatarGroup.jsx +++ b/src/components/AvatarGroup/AvatarGroup.jsx @@ -7,7 +7,7 @@ import Avatar from "../Avatar"; export const AvatarGroup = ({ children, - size, + size = "md", className, max, activeIndex, @@ -79,8 +79,4 @@ AvatarGroup.propTypes = { hoverToFront: PropTypes.bool, }; -AvatarGroup.defaultProps = { - size: "md", -}; - export default AvatarGroup; diff --git a/src/components/Buttons/AddUserButton.jsx b/src/components/Buttons/AddUserButton.jsx index 9b4ae61..bf26c0f 100644 --- a/src/components/Buttons/AddUserButton.jsx +++ b/src/components/Buttons/AddUserButton.jsx @@ -6,7 +6,7 @@ import Button from "./Button"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faUserPlus } from "@fortawesome/free-solid-svg-icons/faUserPlus"; -export const AddUserButton = ({ className, children, ...rest }) => { +export const AddUserButton = ({ className = "", children, ...rest }) => { const cName = `${prefix}-button--adduser`; return ( @@ -30,8 +30,4 @@ AddUserButton.propTypes = { className: PropTypes.string, }; -AddUserButton.defaultProps = { - className: "", -}; - export default AddUserButton; diff --git a/src/components/Buttons/ArrowButton.jsx b/src/components/Buttons/ArrowButton.jsx index 3b50da4..b5ea605 100644 --- a/src/components/Buttons/ArrowButton.jsx +++ b/src/components/Buttons/ArrowButton.jsx @@ -9,7 +9,7 @@ import { faArrowRight } from "@fortawesome/free-solid-svg-icons/faArrowRight"; import { faArrowDown } from "@fortawesome/free-solid-svg-icons/faArrowDown"; import { faArrowLeft } from "@fortawesome/free-solid-svg-icons/faArrowLeft"; -export const ArrowButton = ({ className, direction, children, ...rest }) => { +export const ArrowButton = ({ className = "", direction = "right", children, ...rest }) => { const cName = `${prefix}-button--arrow`; const icon = (() => { @@ -47,9 +47,4 @@ ArrowButton.propTypes = { direction: PropTypes.oneOf(["up", "right", "down", "left"]), }; -ArrowButton.defaultProps = { - className: "", - direction: "right", -}; - export default ArrowButton; diff --git a/src/components/Buttons/AttachmentButton.jsx b/src/components/Buttons/AttachmentButton.jsx index 0c5610e..7a9ed48 100644 --- a/src/components/Buttons/AttachmentButton.jsx +++ b/src/components/Buttons/AttachmentButton.jsx @@ -6,7 +6,7 @@ import Button from "./Button"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faPaperclip } from "@fortawesome/free-solid-svg-icons/faPaperclip"; -export const AttachmentButton = ({ className, children, ...rest }) => { +export const AttachmentButton = ({ className = "", children, ...rest }) => { const cName = `${prefix}-button--attachment`; return ( @@ -28,8 +28,4 @@ AttachmentButton.propTypes = { className: PropTypes.string, }; -AttachmentButton.defaultProps = { - className: "", -}; - export default AttachmentButton; diff --git a/src/components/Buttons/Button.jsx b/src/components/Buttons/Button.jsx index 71bfa13..d90154e 100644 --- a/src/components/Buttons/Button.jsx +++ b/src/components/Buttons/Button.jsx @@ -4,11 +4,11 @@ import classNames from "classnames"; import { prefix } from "../settings"; export const Button = ({ - children, - className, - icon, - border, - labelPosition, + children = undefined, + className = "", + icon = undefined, + border = false, + labelPosition = undefined, ...rest }) => { const cName = `${prefix}-button`; @@ -44,12 +44,4 @@ Button.propTypes = { border: PropTypes.bool, }; -Button.defaultProps = { - children: undefined, - className: "", - icon: undefined, - labelPosition: undefined, - border: false, -}; - export default Button; diff --git a/src/components/Buttons/EllipsisButton.jsx b/src/components/Buttons/EllipsisButton.jsx index 8c75ec4..95bbc42 100644 --- a/src/components/Buttons/EllipsisButton.jsx +++ b/src/components/Buttons/EllipsisButton.jsx @@ -8,8 +8,8 @@ import { faEllipsisV } from "@fortawesome/free-solid-svg-icons/faEllipsisV"; import { faEllipsisH } from "@fortawesome/free-solid-svg-icons/faEllipsisH"; export const EllipsisButton = ({ - className, - orientation, + className = "", + orientation = "horizontal", children, ...rest }) => { @@ -38,9 +38,4 @@ EllipsisButton.propTypes = { orientation: PropTypes.oneOf(["horizontal", "vertical"]), }; -EllipsisButton.defaultProps = { - className: "", - orientation: "horizontal", -}; - export default EllipsisButton; diff --git a/src/components/Buttons/InfoButton.jsx b/src/components/Buttons/InfoButton.jsx index e7a99f4..1c56a23 100644 --- a/src/components/Buttons/InfoButton.jsx +++ b/src/components/Buttons/InfoButton.jsx @@ -6,7 +6,7 @@ import Button from "./Button"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle"; -export const InfoButton = ({ className, children, ...rest }) => { +export const InfoButton = ({ className = "", children, ...rest }) => { const cName = `${prefix}-button--info`; return ( @@ -28,8 +28,4 @@ InfoButton.propTypes = { className: PropTypes.string, }; -InfoButton.defaultProps = { - className: "", -}; - export default InfoButton; diff --git a/src/components/Buttons/SendButton.jsx b/src/components/Buttons/SendButton.jsx index 3236ff1..43184fb 100644 --- a/src/components/Buttons/SendButton.jsx +++ b/src/components/Buttons/SendButton.jsx @@ -6,7 +6,7 @@ import Button from "./Button"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faPaperPlane } from "@fortawesome/free-solid-svg-icons/faPaperPlane"; -export const SendButton = ({ className, children, ...rest }) => { +export const SendButton = ({ className = "", children, ...rest }) => { const cName = `${prefix}-button--send`; return ( @@ -28,8 +28,4 @@ SendButton.propTypes = { className: PropTypes.string, }; -SendButton.defaultProps = { - className: "", -}; - export default SendButton; diff --git a/src/components/Buttons/StarButton.jsx b/src/components/Buttons/StarButton.jsx index ff9600f..3cc5730 100644 --- a/src/components/Buttons/StarButton.jsx +++ b/src/components/Buttons/StarButton.jsx @@ -6,7 +6,7 @@ import Button from "./Button"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faStar } from "@fortawesome/free-solid-svg-icons/faStar"; -export const StarButton = ({ className, children, ...rest }) => { +export const StarButton = ({ className = "", children, ...rest }) => { const cName = `${prefix}-button--star`; return ( @@ -28,8 +28,4 @@ StarButton.propTypes = { className: PropTypes.string, }; -StarButton.defaultProps = { - className: "", -}; - export default StarButton; diff --git a/src/components/Buttons/VideoCallButton.jsx b/src/components/Buttons/VideoCallButton.jsx index 60df86a..da1bc8d 100644 --- a/src/components/Buttons/VideoCallButton.jsx +++ b/src/components/Buttons/VideoCallButton.jsx @@ -6,7 +6,7 @@ import Button from "./Button"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faVideo } from "@fortawesome/free-solid-svg-icons/faVideo"; -export const VideoCallButton = ({ className, children, ...rest }) => { +export const VideoCallButton = ({ className = "", children, ...rest }) => { const cName = `${prefix}-button--videocall`; return ( @@ -28,8 +28,5 @@ VideoCallButton.propTypes = { className: PropTypes.string, }; -VideoCallButton.defaultProps = { - className: "", -}; export default VideoCallButton; diff --git a/src/components/Buttons/VoiceCallButton.jsx b/src/components/Buttons/VoiceCallButton.jsx index d83b7e1..bf7349d 100644 --- a/src/components/Buttons/VoiceCallButton.jsx +++ b/src/components/Buttons/VoiceCallButton.jsx @@ -6,7 +6,7 @@ import Button from "./Button"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faPhoneAlt } from "@fortawesome/free-solid-svg-icons/faPhoneAlt"; -export const VoiceCallButton = ({ className, children, ...rest }) => { +export const VoiceCallButton = ({ className = "", children, ...rest }) => { const cName = `${prefix}-button--voicecall`; return ( @@ -28,8 +28,4 @@ VoiceCallButton.propTypes = { className: PropTypes.string, }; -VoiceCallButton.defaultProps = { - className: "", -}; - export default VoiceCallButton; diff --git a/src/components/ChatContainer/ChatContainer.jsx b/src/components/ChatContainer/ChatContainer.jsx index ad527a3..84eedf8 100644 --- a/src/components/ChatContainer/ChatContainer.jsx +++ b/src/components/ChatContainer/ChatContainer.jsx @@ -8,7 +8,7 @@ import classNames from "classnames"; import { prefix } from "../settings"; import PropTypes from "prop-types"; -export const ChatContainer = ({ children, className, ...rest }) => { +export const ChatContainer = ({ children = undefined, className, ...rest }) => { const cName = `${prefix}-chat-container`; const [ @@ -54,8 +54,4 @@ ChatContainer.propTypes = { className: PropTypes.string, }; -ChatContainer.defaultProps = { - children: undefined, -}; - export default ChatContainer; diff --git a/src/components/ContentEditable/ContentEditable.jsx b/src/components/ContentEditable/ContentEditable.jsx index f1ea69b..3eec0f0 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(props) { - super(props); + constructor({value = undefined, placeholder = "", disabled = false, activateAfterChange = false, autoFocus = false, onChange = () => {}, onKeyPress = () => {}, ...rest}) { + super({value, placeholder,disabled, activateAfterChange, autoFocus, onChange, onKeyPress, ...rest}); this.msgRef = React.createRef(); } @@ -167,14 +167,4 @@ ContentEditable.propTypes = { className: PropTypes.string, }; -ContentEditable.defaultProps = { - value: undefined, - placeholder: "", - disabled: false, - activateAfterChange: false, - autoFocus: false, - onChange: () => {}, - onKeyPress: () => {}, -}; - export default ContentEditable; diff --git a/src/components/Conversation/Conversation.jsx b/src/components/Conversation/Conversation.jsx index 820d4d0..4a9eb40 100644 --- a/src/components/Conversation/Conversation.jsx +++ b/src/components/Conversation/Conversation.jsx @@ -17,15 +17,15 @@ const LastActivityTime = ({ time }) => ( const UnreadDot = () =>
; export const Conversation = ({ - name, - unreadCnt, - lastSenderName, - info, - lastActivityTime, - unreadDot, + name = undefined, + unreadCnt = undefined, + lastSenderName = undefined, + info = undefined, + lastActivityTime = undefined, + unreadDot = false, children, className, - active, + active = false, ...rest }) => { const [avatar, avatarGroup, operations, content] = getChildren(children, [ @@ -118,16 +118,6 @@ Conversation.propTypes = { className: PropTypes.string, }; -Conversation.defaultProps = { - name: undefined, - unreadCnt: undefined, - unreadDot: false, - lastSenderName: undefined, - info: undefined, - lastActivityTime: undefined, - active: false, -}; - Conversation.Operations = ConversationOperations; Conversation.Content = ConversationContent; diff --git a/src/components/Conversation/ConversationContent.jsx b/src/components/Conversation/ConversationContent.jsx index 454d33f..d2ca003 100644 --- a/src/components/Conversation/ConversationContent.jsx +++ b/src/components/Conversation/ConversationContent.jsx @@ -76,6 +76,5 @@ ConversationContent.propTypes = { info: PropTypes.node, }; -ConversationContent.defaultProps = {}; export default ConversationContent; diff --git a/src/components/Conversation/ConversationOperations.jsx b/src/components/Conversation/ConversationOperations.jsx index 7d2f12a..4a2248c 100644 --- a/src/components/Conversation/ConversationOperations.jsx +++ b/src/components/Conversation/ConversationOperations.jsx @@ -40,6 +40,4 @@ ConversationOperations.propTypes = { visible: PropTypes.bool, }; -ConversationOperations.defaultProps = {}; - export default ConversationOperations; diff --git a/src/components/ConversationHeader/ConversationHeader.jsx b/src/components/ConversationHeader/ConversationHeader.jsx index 2eefbfc..cea2d80 100644 --- a/src/components/ConversationHeader/ConversationHeader.jsx +++ b/src/components/ConversationHeader/ConversationHeader.jsx @@ -9,7 +9,7 @@ import ConversationHeaderActions from "./ConversationHeaderActions"; import ConversationHeaderContent from "./ConversationHeaderContent"; import PropTypes from "prop-types"; -export const ConversationHeader = ({ children, className, ...rest }) => { +export const ConversationHeader = ({ children = undefined, className, ...rest }) => { const cName = `${prefix}-conversation-header`; const [back, avatar, avatarGroup, content, actions] = getChildren(children, [ @@ -58,10 +58,6 @@ ConversationHeader.propTypes = { className: PropTypes.string, }; -ConversationHeader.defaultProps = { - children: undefined, -}; - ConversationHeader.Back = ConversationHeaderBack; ConversationHeader.Actions = ConversationHeaderActions; ConversationHeader.Content = ConversationHeaderContent; diff --git a/src/components/ConversationHeader/ConversationHeaderActions.jsx b/src/components/ConversationHeader/ConversationHeaderActions.jsx index 392dfb8..0d39038 100644 --- a/src/components/ConversationHeader/ConversationHeaderActions.jsx +++ b/src/components/ConversationHeader/ConversationHeaderActions.jsx @@ -3,7 +3,7 @@ import PropTypes from "prop-types"; import { prefix } from "../settings"; import classNames from "classnames"; -export const ConversationHeaderActions = ({ children, className, ...rest }) => { +export const ConversationHeaderActions = ({ children = undefined, className, ...rest }) => { const cName = `${prefix}-conversation-header__actions`; return ( @@ -23,8 +23,4 @@ ConversationHeaderActions.propTypes = { className: PropTypes.string, }; -ConversationHeaderActions.defaultProps = { - children: undefined, -}; - export default ConversationHeaderActions; diff --git a/src/components/ConversationHeader/ConversationHeaderBack.jsx b/src/components/ConversationHeader/ConversationHeaderBack.jsx index 7724ec1..f550433 100644 --- a/src/components/ConversationHeader/ConversationHeaderBack.jsx +++ b/src/components/ConversationHeader/ConversationHeaderBack.jsx @@ -5,8 +5,8 @@ import classNames from "classnames"; import { ArrowButton } from "../Buttons"; export const ConversationHeaderBack = ({ - onClick, - children, + onClick = () => {}, + children = undefined, className, ...rest }) => { @@ -36,9 +36,4 @@ ConversationHeaderBack.propTypes = { className: PropTypes.string, }; -ConversationHeaderBack.defaultProps = { - children: undefined, - onClick: () => {}, -}; - export default ConversationHeaderBack; diff --git a/src/components/ConversationHeader/ConversationHeaderContent.jsx b/src/components/ConversationHeader/ConversationHeaderContent.jsx index 8403388..4cb3919 100644 --- a/src/components/ConversationHeader/ConversationHeaderContent.jsx +++ b/src/components/ConversationHeader/ConversationHeaderContent.jsx @@ -5,9 +5,9 @@ import { prefix } from "../settings"; export const ConversationHeaderContent = ({ userName, - info, - children, - className, + info = "", + children = undefined, + className = "", ...rest }) => { const cName = `${prefix}-conversation-header__content`; @@ -40,10 +40,4 @@ ConversationHeaderContent.propTypes = { className: PropTypes.string, }; -ConversationHeaderContent.defaultProps = { - children: undefined, - userName: "", - info: "", -}; - export default ConversationHeaderContent; diff --git a/src/components/ConversationList/ConversationList.jsx b/src/components/ConversationList/ConversationList.jsx index 50f237a..0ff5ce4 100644 --- a/src/components/ConversationList/ConversationList.jsx +++ b/src/components/ConversationList/ConversationList.jsx @@ -9,12 +9,12 @@ import Loader from "../Loader"; import Conversation from "../Conversation"; export const ConversationList = ({ - children, - scrollable, - loading, - loadingMore, + children = [], + scrollable = true, + loading = false, + loadingMore = false, onYReachEnd, - className, + className = "", ...props }) => { const cName = `${prefix}-conversation-list`; @@ -98,12 +98,4 @@ ConversationList.propTypes = { className: PropTypes.string, }; -ConversationList.defaultProps = { - children: [], - scrollable: true, - loading: false, - loadingMore: false, - className: "", -}; - export default ConversationList; diff --git a/src/components/ExpansionPanel/ExpansionPanel.jsx b/src/components/ExpansionPanel/ExpansionPanel.jsx index b56f124..4caf97c 100644 --- a/src/components/ExpansionPanel/ExpansionPanel.jsx +++ b/src/components/ExpansionPanel/ExpansionPanel.jsx @@ -7,9 +7,9 @@ import { faChevronLeft } from "@fortawesome/free-solid-svg-icons/faChevronLeft"; import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown"; export const ExpansionPanel = ({ - children, - title, - open: defaultOpen, + children = undefined, + title = "", + open: defaultOpen = false, isOpened, onChange, className, @@ -76,10 +76,6 @@ ExpansionPanel.propTypes = { onChange: PropTypes.func, }; -ExpansionPanel.defaultProps = { - children: undefined, - title: "", - open: false, -}; + export default ExpansionPanel; diff --git a/src/components/InputToolbox/InputToolbox.jsx b/src/components/InputToolbox/InputToolbox.jsx index bcd4265..909ee0d 100644 --- a/src/components/InputToolbox/InputToolbox.jsx +++ b/src/components/InputToolbox/InputToolbox.jsx @@ -23,6 +23,4 @@ InputToolbox.propTypes = { className: PropTypes.string, }; -InputToolbox.defaultProps = {}; - export default InputToolbox; diff --git a/src/components/Loader/Loader.jsx b/src/components/Loader/Loader.jsx index 6481d41..4a1289e 100644 --- a/src/components/Loader/Loader.jsx +++ b/src/components/Loader/Loader.jsx @@ -3,7 +3,7 @@ import PropTypes from "prop-types"; import classNames from "classnames"; import { prefix } from "../settings"; -export const Loader = ({ className, variant, children, ...rest }) => { +export const Loader = ({ className = undefined, variant = "default", children = undefined, ...rest }) => { const cName = `${prefix}-loader`; const textClass = React.Children.count(children) > 0 ? `${cName}--content` : ""; @@ -34,10 +34,4 @@ Loader.propTypes = { variant: PropTypes.oneOf(["default"]), }; -Loader.defaultProps = { - className: undefined, - title: undefined, - variant: "default", -}; - export default Loader; diff --git a/src/components/MainContainer/MainContainer.jsx b/src/components/MainContainer/MainContainer.jsx index 38acbc8..03df343 100644 --- a/src/components/MainContainer/MainContainer.jsx +++ b/src/components/MainContainer/MainContainer.jsx @@ -3,7 +3,7 @@ import PropTypes from "prop-types"; import classNames from "classnames"; import { prefix } from "../settings"; -export const MainContainer = ({ responsive, children, className, ...rest }) => { +export const MainContainer = ({ responsive = false, children = undefined, className, ...rest }) => { const cName = `${prefix}-main-container`; return ( @@ -31,9 +31,4 @@ MainContainer.propTypes = { className: PropTypes.string, }; -MainContainer.defaultProps = { - children: undefined, - responsive: false, -}; - export default MainContainer; diff --git a/src/components/Message/Message.jsx b/src/components/Message/Message.jsx index 4d6ede5..330667d 100644 --- a/src/components/Message/Message.jsx +++ b/src/components/Message/Message.jsx @@ -16,17 +16,17 @@ import MessageTextContent from "./MessageTextContent"; */ export const Message = ({ model: { - message, - sentTime, - sender, - direction, + message = "", + sentTime = "", + sender = "", + direction = 1, position, type: modelType, payload: modelPayload, }, - avatarSpacer, - avatarPosition, - type, + avatarSpacer = false, + avatarPosition = undefined, + type = "html", payload: argPayload, children, className, @@ -293,17 +293,7 @@ Message.propTypes = { ]), }; -Message.defaultProps = { - model: { - message: "", - sentTime: "", - sender: "", - direction: 1, - }, - avatarSpacer: false, - avatarPosition: undefined, - type: "html", -}; + Message.Header = MessageHeader; Message.HtmlContent = MessageHtmlContent; diff --git a/src/components/Message/MessageCustomContent.jsx b/src/components/Message/MessageCustomContent.jsx index a8138a9..2f95d6f 100644 --- a/src/components/Message/MessageCustomContent.jsx +++ b/src/components/Message/MessageCustomContent.jsx @@ -19,6 +19,4 @@ MessageCustomContent.propTypes = { className: PropTypes.string, }; -MessageCustomContent.defaultProps = {}; - export default MessageCustomContent; diff --git a/src/components/Message/MessageFooter.jsx b/src/components/Message/MessageFooter.jsx index e9a50a3..d1e7e1f 100644 --- a/src/components/Message/MessageFooter.jsx +++ b/src/components/Message/MessageFooter.jsx @@ -5,9 +5,9 @@ import classNames from "classnames"; import { prefix } from "../settings"; export const MessageFooter = ({ - sender, - sentTime, - children, + sender = "", + sentTime = "", + children = undefined, className, ...rest }) => { @@ -40,10 +40,4 @@ MessageFooter.propTypes = { className: PropTypes.string, }; -MessageFooter.defaultProps = { - sender: "", - sentTime: "", - children: undefined, -}; - export default MessageFooter; diff --git a/src/components/Message/MessageHeader.jsx b/src/components/Message/MessageHeader.jsx index af0ab1f..654da4b 100644 --- a/src/components/Message/MessageHeader.jsx +++ b/src/components/Message/MessageHeader.jsx @@ -4,9 +4,9 @@ import classNames from "classnames"; import { prefix } from "../settings"; export const MessageHeader = ({ - sender, - sentTime, - children, + sender = "", + sentTime = "", + children = undefined, className, ...rest }) => { @@ -39,10 +39,4 @@ MessageHeader.propTypes = { className: PropTypes.string, }; -MessageHeader.defaultProps = { - sender: "", - sentTime: "", - children: undefined, -}; - export default MessageHeader; diff --git a/src/components/Message/MessageHtmlContent.jsx b/src/components/Message/MessageHtmlContent.jsx index 1338350..0cec414 100644 --- a/src/components/Message/MessageHtmlContent.jsx +++ b/src/components/Message/MessageHtmlContent.jsx @@ -28,6 +28,4 @@ MessageHtmlContent.propTypes = { className: PropTypes.string, }; -MessageHtmlContent.defaultProps = {}; - export default MessageHtmlContent; diff --git a/src/components/Message/MessageImageContent.jsx b/src/components/Message/MessageImageContent.jsx index e039e08..d0bdbd6 100644 --- a/src/components/Message/MessageImageContent.jsx +++ b/src/components/Message/MessageImageContent.jsx @@ -47,6 +47,4 @@ MessageImageContent.propTypes = { className: PropTypes.string, }; -MessageImageContent.defaultProps = {}; - export default MessageImageContent; diff --git a/src/components/Message/MessageTextContent.jsx b/src/components/Message/MessageTextContent.jsx index 1c86389..0613b20 100644 --- a/src/components/Message/MessageTextContent.jsx +++ b/src/components/Message/MessageTextContent.jsx @@ -24,6 +24,4 @@ MessageTextContent.propTypes = { className: PropTypes.string, }; -MessageTextContent.defaultProps = {}; - export default MessageTextContent; diff --git a/src/components/MessageGroup/MessageGroup.jsx b/src/components/MessageGroup/MessageGroup.jsx index 878328a..4aba34f 100644 --- a/src/components/MessageGroup/MessageGroup.jsx +++ b/src/components/MessageGroup/MessageGroup.jsx @@ -9,10 +9,10 @@ import MessageGroupMessages from "./MessageGroupMessages"; import Avatar from "../Avatar"; export const MessageGroup = ({ - direction, - avatarPosition, - sender, - sentTime, + direction = "incoming", + avatarPosition = undefined, + sender = "", + sentTime = "", children, className, ...rest @@ -119,13 +119,6 @@ MessageGroup.propTypes = { className: PropTypes.string, }; -MessageGroup.defaultProps = { - direction: "incoming", - sentTime: "", - sender: "", - avatarPosition: undefined, -}; - MessageGroup.Header = MessageGroupHeader; MessageGroup.Footer = MessageGroupFooter; MessageGroup.Messages = MessageGroupMessages; diff --git a/src/components/MessageGroup/MessageGroupFooter.jsx b/src/components/MessageGroup/MessageGroupFooter.jsx index f268f5c..efed966 100644 --- a/src/components/MessageGroup/MessageGroupFooter.jsx +++ b/src/components/MessageGroup/MessageGroupFooter.jsx @@ -3,7 +3,7 @@ import PropTypes from "prop-types"; import classNames from "classnames"; import { prefix } from "../settings"; -export const MessageGroupFooter = ({ children, className, ...rest }) => { +export const MessageGroupFooter = ({ children = undefined, className, ...rest }) => { const cName = `${prefix}-message-group__footer`; return ( @@ -23,8 +23,4 @@ MessageGroupFooter.propTypes = { className: PropTypes.string, }; -MessageGroupFooter.defaultProps = { - children: undefined, -}; - export default MessageGroupFooter; diff --git a/src/components/MessageGroup/MessageGroupHeader.jsx b/src/components/MessageGroup/MessageGroupHeader.jsx index ce7e377..ef04923 100644 --- a/src/components/MessageGroup/MessageGroupHeader.jsx +++ b/src/components/MessageGroup/MessageGroupHeader.jsx @@ -3,7 +3,7 @@ import PropTypes from "prop-types"; import classNames from "classnames"; import { prefix } from "../settings"; -export const MessageGroupHeader = ({ children, className, ...rest }) => { +export const MessageGroupHeader = ({ children = undefined, className, ...rest }) => { const cName = `${prefix}-message-group__header`; return (
@@ -22,8 +22,4 @@ MessageGroupHeader.propTypes = { className: PropTypes.string, }; -MessageGroupHeader.defaultProps = { - children: undefined, -}; - export default MessageGroupHeader; diff --git a/src/components/MessageGroup/MessageGroupMessages.jsx b/src/components/MessageGroup/MessageGroupMessages.jsx index 6bc76c9..8c14f62 100644 --- a/src/components/MessageGroup/MessageGroupMessages.jsx +++ b/src/components/MessageGroup/MessageGroupMessages.jsx @@ -4,7 +4,7 @@ import classNames from "classnames"; import { prefix } from "../settings"; -export const MessageGroupMessages = ({ children, className, ...rest }) => { +export const MessageGroupMessages = ({ children = undefined, className, ...rest }) => { const cName = `${prefix}-message-group`; return (
@@ -28,8 +28,4 @@ MessageGroupMessages.propTypes = { className: PropTypes.string, }; -MessageGroupMessages.defaultProps = { - children: undefined, -}; - export default MessageGroupMessages; diff --git a/src/components/MessageInput/MessageInput.jsx b/src/components/MessageInput/MessageInput.jsx index c0dc353..942f38a 100644 --- a/src/components/MessageInput/MessageInput.jsx +++ b/src/components/MessageInput/MessageInput.jsx @@ -67,21 +67,21 @@ const useControllableState = (value, initialValue) => { function MessageInputInner( { - value, - onSend, - onChange, - autoFocus, - placeholder, - fancyScroll, + value = undefined, + onSend = noop, + onChange = noop, + autoFocus = false, + placeholder = "", + fancyScroll = true, className, - activateAfterChange, - disabled, + activateAfterChange = false, + disabled = false, sendDisabled, - sendOnReturnDisabled, - attachDisabled, - sendButton, - attachButton, - onAttachClick, + sendOnReturnDisabled = false, + attachDisabled = false, + sendButton = true, + attachButton = true, + onAttachClick = noop, ...rest }, ref @@ -298,24 +298,6 @@ MessageInput.propTypes = { MessageInputInner.propTypes = MessageInput.propTypes; -MessageInput.defaultProps = { - value: undefined, - placeholder: "", - disabled: false, - sendOnReturnDisabled: false, - fancyScroll: true, - activateAfterChange: false, - autoFocus: false, - sendButton: true, - attachButton: true, - attachDisabled: false, - onAttachClick: noop, - onChange: noop, - onSend: noop, -}; - -MessageInputInner.defaultProps = MessageInput.defaultProps; - export { MessageInput }; export default MessageInput; diff --git a/src/components/MessageList/MessageList.jsx b/src/components/MessageList/MessageList.jsx index 977a2b5..7f15852 100644 --- a/src/components/MessageList/MessageList.jsx +++ b/src/components/MessageList/MessageList.jsx @@ -12,8 +12,18 @@ import MessageSeparator from "../MessageSeparator"; import MessageListContent from "./MessageListContent"; class MessageListInner extends React.Component { - constructor(props) { - super(props); + 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}); this.scrollPointRef = React.createRef(); this.containerRef = React.createRef(); @@ -400,19 +410,9 @@ 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/MessageSeparator/MessageSeparator.jsx b/src/components/MessageSeparator/MessageSeparator.jsx index 6c3d2b2..1a90a9a 100644 --- a/src/components/MessageSeparator/MessageSeparator.jsx +++ b/src/components/MessageSeparator/MessageSeparator.jsx @@ -5,9 +5,9 @@ import { prefix } from "../settings"; import { isChildrenNil } from "../utils"; export const MessageSeparator = ({ - content, - as, - children, + content = undefined, + as = "div", + children = undefined, className, ...rest }) => { @@ -17,7 +17,7 @@ export const MessageSeparator = ({ if (typeof as === "string" && as.length > 0) { return as; } else { - return MessageSeparator.defaultProps.as; + return "div"; } })(); @@ -42,10 +42,4 @@ MessageSeparator.propTypes = { className: PropTypes.string, }; -MessageSeparator.defaultProps = { - children: undefined, - content: undefined, - as: "div", -}; - export default MessageSeparator; diff --git a/src/components/Overlay/Overlay.jsx b/src/components/Overlay/Overlay.jsx index 907f05d..2d98e4d 100644 --- a/src/components/Overlay/Overlay.jsx +++ b/src/components/Overlay/Overlay.jsx @@ -3,7 +3,7 @@ import PropTypes from "prop-types"; import classNames from "classnames"; import { prefix } from "../settings"; -export const Overlay = ({ className, children, blur, grayscale, ...rest }) => { +export const Overlay = ({ className = "", children = undefined, blur = false, grayscale = false, ...rest }) => { const cName = `${prefix}-overlay`; const blurClass = `${cName}--blur`; const grayscaleClass = `${cName}--grayscale`; @@ -43,11 +43,4 @@ Overlay.propTypes = { grayscale: PropTypes.bool, }; -Overlay.defaultProps = { - className: "", - children: undefined, - blur: false, - grayscale: false, -}; - export default Overlay; diff --git a/src/components/Scroll/ReactPerfectScrollbar.jsx b/src/components/Scroll/ReactPerfectScrollbar.jsx index c3bcf80..d6dde0a 100644 --- a/src/components/Scroll/ReactPerfectScrollbar.jsx +++ b/src/components/Scroll/ReactPerfectScrollbar.jsx @@ -18,8 +18,46 @@ const handlerNameByEvent = { Object.freeze(handlerNameByEvent); export default class ScrollBar extends Component { - constructor(props) { - super(props); + 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 + }); this.handleRef = this.handleRef.bind(this); this._handlerByEvent = {}; @@ -141,26 +179,6 @@ export default class ScrollBar extends Component { } } -ScrollBar.defaultProps = { - 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", -}; - ScrollBar.propTypes = { children: PropTypes.node.isRequired, className: PropTypes.string, diff --git a/src/components/Search/Search.jsx b/src/components/Search/Search.jsx index 1222ce3..06d7585 100644 --- a/src/components/Search/Search.jsx +++ b/src/components/Search/Search.jsx @@ -23,7 +23,7 @@ const useControlledOrNot = (initialValue, value) => { }; function SearchInner( - { placeholder, value, onChange, onClearClick, className, disabled, ...rest }, + { placeholder = "", value = undefined, onChange = () => {}, onClearClick = () => {}, className, disabled = false, ...rest }, ref ) { const cName = `${prefix}-search`; @@ -129,15 +129,5 @@ Search.propTypes = { SearchInner.propTypes = Search.propTypes; -Search.defaultProps = { - placeholder: "", - value: undefined, - onChange: () => {}, - onClearClick: () => {}, - disabled: false, -}; - -SearchInner.defaultProps = Search.defaultProps; - export { Search }; export default Search; diff --git a/src/components/Sidebar/Sidebar.jsx b/src/components/Sidebar/Sidebar.jsx index cdddc12..6956eaa 100644 --- a/src/components/Sidebar/Sidebar.jsx +++ b/src/components/Sidebar/Sidebar.jsx @@ -7,11 +7,11 @@ import Overlay from "../Overlay"; import Loader from "../Loader"; export const Sidebar = ({ - children, - position, - scrollable, - loading, - className, + children = undefined, + position = undefined, + scrollable = true, + loading = false, + className = "", ...props }) => { const cName = `${prefix}-sidebar`; @@ -73,12 +73,4 @@ Sidebar.propTypes = { className: PropTypes.string, }; -Sidebar.defaultProps = { - children: undefined, - position: undefined, - scrollable: true, - loading: false, - className: "", -}; - export default Sidebar; diff --git a/src/components/Status/Status.jsx b/src/components/Status/Status.jsx index 0643fb5..415b414 100644 --- a/src/components/Status/Status.jsx +++ b/src/components/Status/Status.jsx @@ -6,7 +6,7 @@ import { prefix } from "../settings"; export const Status = ({ status, - size, + size = "md", className, name, selected, @@ -58,8 +58,4 @@ Status.propTypes = { className: PropTypes.string, }; -Status.defaultProps = { - size: "md", -}; - export default Status; diff --git a/src/components/StatusList/StatusList.jsx b/src/components/StatusList/StatusList.jsx index 12f1f9a..e5f4379 100644 --- a/src/components/StatusList/StatusList.jsx +++ b/src/components/StatusList/StatusList.jsx @@ -7,7 +7,7 @@ import Status from "../Status"; import { prefix } from "../settings"; function StatusListInner( - { className, children, size, selected, onChange, itemsTabIndex, ...rest }, + { className, children, size, selected, onChange = noop, itemsTabIndex, ...rest }, ref ) { const cName = `${prefix}-status-list`; @@ -115,11 +115,5 @@ StatusList.propTypes = { StatusListInner.propTypes = StatusList.propTypes; -StatusList.defaultProps = { - onChange: noop, -}; - -StatusListInner.defaultProps = StatusList.defaultProps; - export { StatusList }; export default StatusList; diff --git a/src/components/TypingIndicator/TypingIndicator.jsx b/src/components/TypingIndicator/TypingIndicator.jsx index 1f87d42..e9ba8c2 100644 --- a/src/components/TypingIndicator/TypingIndicator.jsx +++ b/src/components/TypingIndicator/TypingIndicator.jsx @@ -3,7 +3,7 @@ import PropTypes from "prop-types"; import classNames from "classnames"; import { prefix } from "../settings"; -export const TypingIndicator = ({ content, className, ...rest }) => { +export const TypingIndicator = ({ content = "", className, ...rest }) => { const cName = `${prefix}-typing-indicator`; return ( @@ -26,8 +26,4 @@ TypingIndicator.propTypes = { className: PropTypes.string, }; -TypingIndicator.defaultProps = { - content: "", -}; - export default TypingIndicator;