WIP: merge pull request #120 from KDederichs/remove_defaultProps

Replace defaultProps

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

src/components/Conversation/Conversation.jsx

@@ -17,15 +17,15 @@ const LastActivityTime = ({ time }) => (
 const UnreadDot = () => <div className={`${cName}__unread-dot`}></div>;
 
 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;
 

src/components/Conversation/ConversationContent.jsx

@@ -76,6 +76,5 @@ ConversationContent.propTypes = {
   info: PropTypes.node,
 };
 
-ConversationContent.defaultProps = {};
 
 export default ConversationContent;

src/components/Conversation/ConversationOperations.jsx

@@ -40,6 +40,4 @@ ConversationOperations.propTypes = {
   visible: PropTypes.bool,
 };
 
-ConversationOperations.defaultProps = {};
-
 export default ConversationOperations;

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;

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;

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;