feat(Placeholder): add component

docs/lib/Components/PlaceholderPage.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import { PrismCode } from 'react-prism';
+import PageTitle from '../UI/PageTitle';
+import SectionTitle from '../UI/SectionTitle';
+
+import PlaceholderExample from '../examples/Placeholder'
+const PlaceholderExampleSource = require('!!raw-loader!../examples/Placeholder')
+
+import PlaceholderWidthExample from '../examples/PlaceholderWidth';
+const PlaceholderWidthExampleSource = require('!!raw-loader!../examples/PlaceholderWidth');
+
+import PlaceholderColorExample from '../examples/PlaceholderColor';
+const PlaceholderColorExampleSource = require('!!raw-loader!../examples/PlaceholderColor');
+
+import PlaceholderSizingExample from '../examples/PlaceholderSizing';
+const PlaceholderSizingExampleSource = require('!!raw-loader!../examples/PlaceholderSizing');
+
+import PlaceholderAnimationExample from '../examples/PlaceholderAnimation';
+const PlaceholderAnimationExampleSource = require('!!raw-loader!../examples/PlaceholderAnimation');
+
+export default class Placeholder extends React.Component {
+  render() {
+    return (
+      <div>
+        <PageTitle title="Placeholder" />
+        <div className="docs-example">
+          <PlaceholderExample />
+        </div>
+        <pre>
+          <PrismCode className="language-jsx">
+            {PlaceholderExampleSource}
+          </PrismCode>
+        </pre>
+        <h4>Properties</h4>
+        <pre>
+          <PrismCode className="language-jsx">
+            {`
+Placeholder.propTypes = {
+  color: PropTypes.string,
+  tag: tagPropType,
+  animation: PropTypes.oneOf(['glow', 'wave']),
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]),
+  className: PropTypes.string,
+  size: PropTypes.oneOf(['lg', 'sm', 'xs']),
+  widths: PropTypes.array,
+};
+
+PlaceholderButton.propTypes = {
+  size: PropTypes.string,
+  color: PropTypes.string,
+  outline: PropTypes.bool,
+  className: PropTypes.string,
+  tag: tagPropType
+}
+            `}
+          </PrismCode>
+        </pre>
+        <SectionTitle>Width</SectionTitle>
+        <div className="docs-example">
+          <PlaceholderWidthExample />
+        </div>
+        <pre>
+          <PrismCode className="language-jsx">
+            {PlaceholderWidthExampleSource}
+          </PrismCode>
+        </pre>
+        <SectionTitle>Animation</SectionTitle>
+        <div className="docs-example">
+          <PlaceholderAnimationExample />
+        </div>
+        <pre>
+          <PrismCode className="language-jsx">
+            {PlaceholderAnimationExampleSource}
+          </PrismCode>
+        </pre>
+        <SectionTitle>Color</SectionTitle>
+        <div className="docs-example">
+          <PlaceholderColorExample />
+        </div>
+        <pre>
+          <PrismCode className="language-jsx">
+            {PlaceholderColorExampleSource}
+          </PrismCode>
+        </pre>
+        <SectionTitle>Sizing</SectionTitle>
+        <div className="docs-example">
+          <PlaceholderSizingExample />
+        </div>
+        <pre>
+          <PrismCode className="language-jsx">
+            {PlaceholderSizingExampleSource}
+          </PrismCode>
+        </pre>
+      </div>
+    )
+  }
+}

docs/lib/Components/index.js

@@ -86,6 +86,10 @@ const items = [
     name: 'Navs',
     to: '/components/navs/'
   },
+  {
+    name: 'Placeholder',
+    to: '/components/placeholder/'
+  },
   {
     name: 'Spinners',
     to: '/components/spinners/'

docs/lib/examples/Placeholder.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Placeholder, Card, CardTitle, CardText, CardBody, CardImg, PlaceholderButton } from 'reactstrap';
+
+const Example = (props) => {
+  return (
+    <Card>
+      <CardImg src="holder.js/100px180" />
+      <CardBody>
+        <Placeholder animation="glow" tag={CardTitle} className="h5">
+          <Placeholder xs={7} />
+        </Placeholder>
+        <Placeholder tag={CardText} animation="glow">
+          <Placeholder xs={7} /> <Placeholder xs={4} /> <Placeholder xs={4} />{' '}
+          <Placeholder xs={6} /> <Placeholder xs={8} />
+        </Placeholder>
+        <PlaceholderButton xs={6}></PlaceholderButton>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default Example;

docs/lib/examples/PlaceholderAnimation.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Placeholder,  } from 'reactstrap';
+
+const Example = (props) => {
+  return (
+    <div>
+      <Placeholder tag="p" animation="glow">
+        <Placeholder xs={12} />
+      </Placeholder>
+      <Placeholder tag="p" animation="wave">
+        <Placeholder xs={12} />
+      </Placeholder>
+    </div>
+  )
+}
+
+export default Example;

docs/lib/examples/PlaceholderColor.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Placeholder,  } from 'reactstrap';
+
+const Example = (props) => {
+  return (
+    <>
+      <Placeholder xs={12} />
+      <Placeholder xs={12} color="primary"/>
+      <Placeholder xs={12} color="secondary"/>
+      <Placeholder xs={12} color="success"/>
+      <Placeholder xs={12} color="danger"/>
+      <Placeholder xs={12} color="warning"/>
+      <Placeholder xs={12} color="info"/>
+      <Placeholder xs={12} color="light"/>
+      <Placeholder xs={12} color="dark"/>
+    </>
+  )
+}
+
+export default Example;

docs/lib/examples/PlaceholderSizing.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Placeholder,  } from 'reactstrap';
+
+const Example = (props) => {
+  return (
+    <div>
+      <Placeholder xs={12} size="lg"/>
+      <Placeholder xs={12} />
+      <Placeholder xs={12} size="sm"/>
+      <Placeholder xs={12} size="xs"/>
+    </div>
+  )
+}
+
+export default Example;

docs/lib/examples/PlaceholderWidth.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Placeholder,  } from 'reactstrap';
+
+const Example = (props) => {
+  return (
+    <div>
+      <Placeholder xs={10} />
+      <Placeholder style={{width: '25%'}} />
+    </div>
+  )
+}
+
+export default Example;

docs/lib/routes.js

@@ -31,6 +31,7 @@ import CarouselPage from './Components/CarouselPage';
 import ListGroupPage from './Components/ListGroupPage';
 import ListPage from './Components/ListPage';
 import SpinnersPage from './Components/SpinnersPage';
+import PlaceholderPage from './Components/PlaceholderPage';
 import ClearfixPage from './Utilities/ClearfixPage';
 import ColorsPage from './Utilities/ColorsPage';
 import NotFound from './NotFound';
@@ -72,6 +73,7 @@ const routes = (
         <Route path="list/" component={ListPage} />
         <Route path="listgroup/" component={ListGroupPage} />
         <Route path="spinners/" component={SpinnersPage} />
+        <Route path="placeholder" component={PlaceholderPage} />
       </Route>
       <Route path="premium-themes/" component={PremiumThemes} />
       <Route path="/utilities/" component={Utilities}>

package.json

@@ -282,7 +282,7 @@
     "@types/react": "^16.9.51",
     "babel-eslint": "^9.0.0",
     "babel-loader": "^8.2.2",
-    "bootstrap": "^5.0.0-beta2",
+    "bootstrap": "^5.1.0",
     "clean-webpack-plugin": "^4.0.0",
     "conventional-changelog-cli": "^2.0.21",
     "conventional-recommended-bump": "^4.1.1",

src/Col.js

@@ -45,18 +45,12 @@ const getColumnSizeClass = (isXs, colWidth, colSize) => {
   return isXs ? `col-${colSize}` : `col-${colWidth}-${colSize}`;
 };
 
-const Col = (props) => {
-  const {
-    className,
-    cssModule,
-    widths,
-    tag: Tag,
-    ...attributes
-  } = props;
-  const colClasses = [];
 
+export const getColumnClasses = (attributes, cssModule, widths=colWidths) => {
+  const colClasses = [];
+
   widths.forEach((colWidth, i) => {
-    let columnProp = props[colWidth];
+    let columnProp = attributes[colWidth];
 
     delete attributes[colWidth];
 
@@ -81,6 +75,24 @@ const Col = (props) => {
     }
   });
 
+  return {
+    colClasses,
+    attributes
+  }
+}
+
+
+const Col = (props) => {
+  const {
+    className,
+    cssModule,
+    widths,
+    tag: Tag,
+    ...attributes
+  } = props;
+
+  let { attributes : modifiedAttributes, colClasses } = getColumnClasses(attributes, cssModule, widths)
+
   if (!colClasses.length) {
     colClasses.push('col');
   }
@@ -91,7 +103,7 @@ const Col = (props) => {
   ), cssModule);
 
   return (
-    <Tag {...attributes} className={classes} />
+    <Tag {...modifiedAttributes} className={classes} />
   );
 };
 

src/Placeholder.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { mapToCssModules, tagPropType } from './utils';
+import { getColumnClasses } from './Col';
+
+const propTypes = {
+  color: PropTypes.string,
+  tag: tagPropType,
+  animation: PropTypes.oneOf(['glow', 'wave']),
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]),
+  className: PropTypes.string,
+  cssModule: PropTypes.object,
+  size: PropTypes.oneOf(['lg', 'sm', 'xs']),
+  widths: PropTypes.array,
+};
+
+const defaultProps = {
+  tag: 'span'
+};
+
+const Placeholder = (props) => {
+  let {
+    className,
+    cssModule,
+    color,
+    innerRef,
+    tag: Tag,
+    animation,
+    size,
+    widths,
+    ...attributes
+  } = props;
+
+  let { attributes: modifiedAttributes, colClasses } = getColumnClasses(attributes, cssModule)
+
+  const classes = mapToCssModules(classNames(
+    className,
+    colClasses,
+    'placeholder' + (animation ? '-'+animation : ''),
+    size ? 'placeholder-'+ size : false,
+    color ? 'bg-'+color : false
+  ), cssModule);
+
+
+
+  return (
+    <Tag {...modifiedAttributes} className={classes} ref={innerRef} />
+  );
+};
+
+Placeholder.propTypes = propTypes;
+Placeholder.defaultProps = defaultProps;
+
+export default Placeholder;

src/PlaceholderButton.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { mapToCssModules, tagPropType } from './utils';
+import Button from "./Button";
+import { getColumnClasses } from './Col';
+
+const propTypes = {
+  size: PropTypes.string,
+  color: PropTypes.string,
+  outline: PropTypes.bool,
+  className: PropTypes.string,
+  tag: tagPropType
+}
+
+const defaultProps = {
+  color: 'secondary',
+  tag: Button
+}
+
+const PlaceholderButton = (props) => {
+  let {
+    size,
+    color,
+    outline,
+    cssModule,
+    className,
+    tag: Tag,
+    ...attributes
+  } = props;
+
+  let { attributes: modifiedAttributes, colClasses } = getColumnClasses(attributes, cssModule)
+
+  const classes = mapToCssModules(classNames(
+    "placeholder",
+    className,
+    colClasses
+  ), cssModule);
+
+  return (
+    <Button {...modifiedAttributes} color="primary" className={classes} disabled={true}></Button>
+  )
+}
+
+PlaceholderButton.propTypes = propTypes;
+PlaceholderButton.defaultProps = defaultProps;
+
+export default PlaceholderButton