Merge branch 'bug-props-fixes' into master

Revibe-Music · Aug 26, 2020 · e2cfeb8 · e2cfeb8
2 parents 1804ad1 + dc230a4
commit e2cfeb8
Show file tree

Hide file tree

Showing 16 changed files with 78 additions and 57 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@revibe-dev/revibe-component-library",
-  "version": "1.0.3",
+  "version": "1.0.7",
   "description": "A component library built for sharing components to all the Revibe websites (main site, Aritst Portal, etc.).",
   "main": "./lib/index.js",
   "browser": "lib/index.umd.js",

diff --git a/src/components/Button/Button.jsx b/src/components/Button/Button.jsx
@@ -44,7 +44,7 @@ class Button extends React.Component {
   }
 
   render() {
-    const { icon, simple, round, children, color, size, active, disabled, onClick, link, href, target, social } = this.props
+    const { icon, simple, round, children, color, size, active, disabled, onClick, link, href, target, social, className, ...props } = this.props
 
     return (
       <ReactstrapButton
@@ -53,10 +53,10 @@ class Button extends React.Component {
         active={active}
         disabled={disabled}
         onClick={onClick}
-        className={`${link ? "btn-link" : ""} ${round ? "btn-round" : ""} ${simple ? "btn-simple" : ""} ${(icon || social) && !children ? "btn-icon" : ""}`}
+        className={`${className} ${link ? "btn-link" : ""} ${round ? "btn-round" : ""} ${simple ? "btn-simple" : ""} ${(icon || social) && !children ? "btn-icon" : ""}`}
         href={href}
         target={target}
-        {...this.props}
+        {...props}
       >
         {social && <i className={this.getIconClassBySocial(social)} />}{icon && !social && icon}{(icon || social) && children && " "}{icon && children}{!icon && !social && (children || (!children && "Default text!"))}
       </ReactstrapButton>
@@ -94,12 +94,15 @@ Button.propTypes = {
    * 
    * List: [ twitter, facebook, google, linkedin, pinterest, youtube, tumblr, github, behance, dribble, reddit ]
    */
-  social: PropTypes.string
+  social: PropTypes.string,
+  /** The classes to use. */
+  className: PropTypes.string
 }
 
 Button.defaultProps = {
   active: false,
-  disabled: false
+  disabled: false,
+  className: ""
 }
 
 export { Button }

diff --git a/src/components/Card/Card.jsx b/src/components/Card/Card.jsx
@@ -33,10 +33,10 @@ class Card extends React.Component {
   }
 
   render() {
-    const { header, footer, children, imgSrc, width, style, color } = this.props
+    const { header, footer, children, imgSrc, width, style, color, ...props } = this.props
 
     return (
-      <RSCard style={{ width: width && width, ...style  }} color={color} {...this.props}>
+      <RSCard style={{ width: width && width, ...style  }} color={color} {...props}>
         {imgSrc && <CardImg top width="100%" src={imgSrc} alt="..." />}
         {header && 
         <CardHeader>

diff --git a/src/components/Checkbox/Checkbox.jsx b/src/components/Checkbox/Checkbox.jsx
@@ -33,10 +33,10 @@ class Checkbox extends React.Component {
   }
 
   render() {
-    const { label, onChange, disabled, inline } = this.props
+    const { label, onChange, disabled, inline, ...props } = this.props
 
     return (
-      <FormGroup check inline={inline} disabled={disabled}>
+      <FormGroup check inline={inline} disabled={disabled} {...props}>
         <Label check>
           <Input 
             type="checkbox"

diff --git a/src/components/Dropdown/Dropdown.jsx b/src/components/Dropdown/Dropdown.jsx
@@ -33,10 +33,10 @@ class Dropdown extends React.Component {
   }
 
   render() {
-    const { caret, label, options, color, inline, direction } = this.props
+    const { caret, label, options, color, inline, direction, ...props } = this.props
 
     return (
-      <UncontrolledDropdown group={inline} direction={direction}>
+      <UncontrolledDropdown group={inline} direction={direction} {...props}>
         <DropdownToggle caret={caret} color={color} data-toggle="dropdown">{label}</DropdownToggle>
         <DropdownMenu>
           {options.map(({ label, header, disabled, divider, href, target, onClick }, index) => (

diff --git a/src/components/InfoArea/InfoArea.jsx b/src/components/InfoArea/InfoArea.jsx
@@ -60,10 +60,10 @@ class InfoArea extends React.Component {
   }
 
   render() {
-    const { color, icon, title, description, iconColor, hover, append, noBlob } = this.props
+    const { color, icon, title, description, iconColor, hover, append, noBlob, ...props } = this.props
 
     return (
-      <>
+      <div {...props}>
         <div className={`info info-${hover ? "hover" : "horizontal"}`}>
           <div className={`icon icon-${iconColor}`}>
             {!noBlob && <img
@@ -75,11 +75,11 @@ class InfoArea extends React.Component {
           </div>
           <div className="description">
             <h3 className="info-title">{title}</h3>
-            {description && <p>{description}</p>}
+            {description && <p style={{ wordWrap: "break-word" }}>{description}</p>}
             {append && append}
           </div>
         </div>
-      </>
+      </div>
     );
   }
 }

diff --git a/src/components/Progress/Progress.jsx b/src/components/Progress/Progress.jsx
@@ -33,21 +33,21 @@ class Progress extends React.Component {
   }
 
   render() {
-    const { value, max, label, color, multi, values, striped } = this.props
+    const { value, max, label, color, multi, values, striped, ...props } = this.props
 
     console.log(values)
 
     return (
       <>
       {!multi ?
-        <div className={`progress-container ${color ? `progress-${color}` : ""}`}>
+        <div className={`progress-container ${color ? `progress-${color}` : ""}`} {...props}>
           <span className="progress-badge">{label}</span>
           <ProgressBar max={max} value={value} striped={striped}>
             <span className="progress-value">{((value / max) * 100).toFixed(0)}%</span>
           </ProgressBar>
         </div>
         :
-        <ProgressBar multi={multi}>
+        <ProgressBar multi={multi} {...props}>
           {values.map((obj, index) => (
             <ProgressBar bar value={`${obj.value}`} color={obj.color ? obj.color : "secondary"} striped={striped} max={max} />
           ))}

diff --git a/src/components/Radio/Radio.jsx b/src/components/Radio/Radio.jsx
@@ -33,24 +33,22 @@ class Radio extends React.Component {
   }
 
   render() {
-    const { label, onChange, value, name, inline, disabled } = this.props
+    const { label, onChange, value, name, inline, disabled, ...props } = this.props
 
     return (
-      <div className="content">
-        <FormGroup check inline={inline} disabled={disabled} className="form-check-radio">
-          <Label className="form-check-label">
-            <Input 
-              type="radio"
-              onChange={onChange}
-              value={value}
-              name={name}
-              disabled={disabled}
-            />
-            {label}
-            <span className="form-check-sign" />
-          </Label>
-        </FormGroup>
-      </div>
+      <FormGroup check inline={inline} disabled={disabled} className="form-check-radio" {...props}>
+        <Label className="form-check-label">
+          <Input 
+            type="radio"
+            onChange={onChange}
+            value={value}
+            name={name}
+            disabled={disabled}
+          />
+          {label}
+          <span className="form-check-sign" />
+        </Label>
+      </FormGroup>
     )
   }
 }

diff --git a/src/components/Select/Select.jsx b/src/components/Select/Select.jsx
@@ -55,7 +55,7 @@ class Select extends React.Component {
   }
 
   render() {
-    const { placeholder, color, isMulti } = this.props
+    const { placeholder, color, isMulti, ...props } = this.props
 
     return (
       <ReactSelect
@@ -66,6 +66,7 @@ class Select extends React.Component {
         isMulti={isMulti}
         onChange={this.handleChange}
         options={this.optionList}
+        {...props}
       />
     )
   }

diff --git a/src/components/Slider/Slider.jsx b/src/components/Slider/Slider.jsx
@@ -46,10 +46,10 @@ class Slider extends React.Component {
   }
 
   render() {
-    const { color } = this.props
+    const { color, rangeMin, rangeMax, step, start, ...props } = this.props
 
     return (
-      <div className={`slider ${color ? `slider-${color}` : ""}`} ref="slider" />
+      <div className={`slider ${color ? `slider-${color}` : ""}`} ref="slider" {...props} />
     )
   }
 }

diff --git a/src/components/Switch/Switch.jsx b/src/components/Switch/Switch.jsx
@@ -41,7 +41,7 @@ class Switch extends React.Component {
   }
 
   render() {
-    const { onColor, offColor, defaultValue, onText, offText } = this.props
+    const { onColor, offColor, defaultValue, onText, offText, ...props } = this.props
 
     return (
       <ToggleSwitch
@@ -51,6 +51,7 @@ class Switch extends React.Component {
         onText={onText}
         offText={offText}
         onChange={this.handleChange}
+        {...props}
       />
     )
   }

diff --git a/src/components/Tabs/Tabs.jsx b/src/components/Tabs/Tabs.jsx
@@ -44,12 +44,14 @@ class Tabs extends React.Component {
   }
 
   render() {
-    const { labels, content, pills, pillColor, vertical, tabPlacement, textPlacement } = this.props
+    const { labels, content, pills, pillColor, vertical, tabPlacement, textPlacement, navProps, tabContentProps, ...props } = this.props
+    const { navClassName, ...navPropsLeft } = navProps
+    const { tabClassName, ...tabProps } = tabContentProps
 
     const navBar = (
       <>
         {labels.map((label, index) => (
-          <NavItem className={`${index > 0 ? `m${vertical ? "t" : "l"}-1` : ""} ${index < labels.length - 1 ? `m${vertical ? "b" : "r"}-1` : ""}`}>
+          <NavItem className={`${index > 0 ? `m${vertical ? "t" : "l"}-1` : ""} ${index < labels.length - 1 ? `m${vertical ? "b" : "r"}-1` : ""} ${navClassName}`} {...navPropsLeft}>
             <NavLink
               className={this.state.activeTab === index ? "active" : ""}
               onClick={() => this.toggle(index)}
@@ -62,7 +64,7 @@ class Tabs extends React.Component {
     )
 
     const tabContent = (
-      <TabContent activeTab={this.state.activeTab}>
+      <TabContent activeTab={this.state.activeTab} className={tabClassName} {...tabProps}>
         {content.map((val, index) => (
           <TabPane tabId={index} className={`${textPlacement ? `text-${textPlacement}` : ""}`}>
             {val}
@@ -73,7 +75,7 @@ class Tabs extends React.Component {
 
     if(vertical)
       return (
-        <Row>
+        <Row {...props}>
           <Col md="4" xs="12">
             <Nav tabs={!pills} pills={pills} className={`${pills ? `nav-pills-${pillColor} ` : ""}${vertical ? `flex-column ` : ""}`}>
               {navBar}
@@ -115,13 +117,19 @@ Tabs.propTypes = {
   /** Sets the horizontal placement of the tabs. [center, end] */
   tabPlacement: PropTypes.string,
   /** Sets the placement of text. [left, center, right] */
-  textPlacement: PropTypes.string
+  textPlacement: PropTypes.string,
+  /** Navigation bar props. */
+  navProps: PropTypes.object,
+  /** Tab content props. */
+  tabContentProps: PropTypes.object
 }
 
 Tabs.defaultProps = {
   labels: [ "tab1", "tab2" ],
   content: [ "This is content for tab 1.", "This is content for tab 2." ],
-  pillColor: "primary"
+  pillColor: "primary",
+  navProps: { className: "" },
+  tabContentProps: { className: "" }
 }
 
 export { Tabs }

diff --git a/src/components/Tags/Tags.jsx b/src/components/Tags/Tags.jsx
@@ -49,14 +49,14 @@ class Tags extends React.Component {
   }
 
   render() {
-    const { color, uppercase } = this.props
+    const { color, uppercase, ...props } = this.props
 
     return (
       <TagsInput
         value={this.state.tags}
         onChange={this.handleTags}
         tagProps={{ className: `react-tagsinput-tag ${color}`, style: (!uppercase ? { textTransform: "none" } : {}) }}
-        {...this.props}
+        {...props}
       />
     )
   }

diff --git a/src/components/Text/Text.jsx b/src/components/Text/Text.jsx
@@ -31,13 +31,13 @@ class Text extends React.Component {
   }
 
   render() {
-    const { children, display, muted, lead, color, inline, tag: Tag, className, style, font, size, weight } = this.props
+    const { children, display, muted, lead, color, inline, tag: Tag, className, style, font, size, weight, ...props } = this.props
 
     return (
       <Tag
         className={`${display ? `display-${display} ` : ""}${muted ? "text-muted " : ""}${lead ? "lead " : ""}${color ? `text-${color} ` : ""}${inline ? "w-auto d-inline-block " : ""}${className}`}
         style={{ fontFamily: font, fontSize: size, fontWeight: weight, ...style }}
-        {...this.props}
+        {...props}
       >
         {children}
       </Tag>

diff --git a/src/components/TextInput/TextInput.jsx b/src/components/TextInput/TextInput.jsx
@@ -48,12 +48,12 @@ class TextInput extends React.Component {
   }
 
   render() {
-    const { onChange, placeholder, prepend, append, size, form, formLabel, formClassName, regClassName } = this.props
+    const { onChange, placeholder, prepend, append, size, form, formLabel, formClassName, regClassName, className, type, rows, ...props } = this.props
 
     return (
       <>
         {!form ? 
-          <InputGroup size={size} className={this.state.focused + " " + regClassName}>
+          <InputGroup size={size} className={this.state.focused + " " + regClassName + " "} {...props}>
             {prepend && 
               <InputGroupAddon addonType="prepend">
                 {prepend && (!prepend.type || prepend.type === "i") ?
@@ -68,7 +68,8 @@ class TextInput extends React.Component {
               onChange={onChange}
               onFocus={this.onFocus}
               onBlur={this.onBlur}
-              {...this.props}
+              type={type}
+              rows={rows}
             />
             {append &&
               <InputGroupAddon addonType="append">
@@ -81,11 +82,13 @@ class TextInput extends React.Component {
             }
           </InputGroup>
         :
-          <FormGroup className={`${formLabel ? 'has-label' : ''} ${formClassName}`}>
+          <FormGroup className={`${formLabel ? 'has-label' : ''} ${formClassName} ${className}`} {...props}>
             {formLabel && <Label>{formLabel}</Label>}
             <ReactstrapInput
               placeholder={placeholder}
               onChange={onChange}
+              type={type}
+              rows={rows}
             />
           </FormGroup>
         }
@@ -112,12 +115,19 @@ TextInput.propTypes = {
   /** Sets the classes used for the form group. Useful for applying if a field is good (has-success) or bad (has-danger). */
   formClassName: PropTypes.string,
   /** Sets the class name used for the regular input groups. Useful for applying if a field is good (has-success) or bad (has-danger). */
-  regClassName: PropTypes.string
+  regClassName: PropTypes.string,
+  /** The type of text to use for the input. */
+  type: PropTypes.string,
+  /** The number of rows for a text area. */
+  rows: PropTypes.number
 }
 
 TextInput.defaultProps = {
   formClassName: "",
-  regClassName: ""
+  regClassName: "",
+  className: "",
+  type: "text",
+  rows: 1
 }
 
 export { TextInput }

diff --git a/src/components/ToolTip/ToolTip.jsx b/src/components/ToolTip/ToolTip.jsx
@@ -33,10 +33,10 @@ class ToolTip extends React.Component {
   }
 
   render() {
-    const { placement, target, delay, label } = this.props
+    const { placement, target, delay, label, ...props } = this.props
 
     return (
-      <UncontrolledTooltip placement={placement} target={target} delay={delay} >
+      <UncontrolledTooltip placement={placement} target={target} delay={delay} {...props} >
         {label}
       </UncontrolledTooltip>
     )