forked from reactstrap/reactstrap
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
69be02b
commit 0c9294c
Showing
16 changed files
with
368 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
) | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
Oops, something went wrong.