Skip to content

Commit

Permalink
Merge pull request #1 from reactstrap/master
Browse files Browse the repository at this point in the history 
Update from base
  • Loading branch information
@hsource
hsource committed Mar 5, 2019
2 parents 3289569 + a590880 commit 9aba7bb
Show file tree
Hide file tree
Showing 22 changed files with 151 additions and 36 deletions.
1 change: 1 addition & 0 deletions docs/lib/Components/AlertsPage.js
View file
Expand Up @@ -47,6 +47,7 @@ export default class AlertsPage extends React.Component {
isOpen: PropTypes.bool, // default: true
toggle: PropTypes.func,
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
fade: PropTypes.bool, // default: true
// Controls the transition of the alert fading in and out
// See [Fade](/components/fade/) for more details
transition: PropTypes.shape(Fade.propTypes),
Expand Down
2 changes: 2 additions & 0 deletions docs/lib/Components/PaginationPage.js
View file
Expand Up @@ -58,6 +58,8 @@ PaginationLink.propTypes = {
cssModule: PropTypes.object,
next: PropTypes.bool,
previous: PropTypes.bool,
first: PropTypes.bool,
last: PropTypes.bool,
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
'aria-label': PropTypes.string
};
Expand Down
2 changes: 1 addition & 1 deletion docs/lib/UI/Content.js
View file
Expand Up @@ -13,7 +13,7 @@ function Content({ items, children, title }) {
return (
<Container className="content">
<Row>
<Col tag="main" md={{ size: 3, order: 2 }}>
<Col className="docSearch-navigation" tag="main" md={{ size: 3, order: 2 }}>
<div className="docs-sidebar mb-3">
<h1 className="h5">{title}</h1>
<Nav className="flex-column">
Expand Down
3 changes: 3 additions & 0 deletions docs/lib/examples/CustomControls.js
View file
Expand Up @@ -11,6 +11,7 @@ export default class Example extends React.Component {
<CustomInput type="checkbox" id="exampleCustomCheckbox" label="Check this custom checkbox" />
<CustomInput type="checkbox" id="exampleCustomCheckbox2" label="Or this one" />
<CustomInput type="checkbox" id="exampleCustomCheckbox3" label="But not this disabled one" disabled />
<CustomInput type="checkbox" id="exampleCustomCheckbox4" label="Can't click this label to check!" htmlFor="exampleCustomCheckbox4_X" disabled />
</div>
</FormGroup>
<FormGroup>
Expand All @@ -19,6 +20,7 @@ export default class Example extends React.Component {
<CustomInput type="radio" id="exampleCustomRadio" name="customRadio" label="Select this custom radio" />
<CustomInput type="radio" id="exampleCustomRadio2" name="customRadio" label="Or this one" />
<CustomInput type="radio" id="exampleCustomRadio3" label="But not this disabled one" disabled />
<CustomInput type="radio" id="exampleCustomRadio4" label="Can't click this label to select!" htmlFor="exampleCustomRadio4_X" disabled />
</div>
</FormGroup>
<FormGroup>
Expand All @@ -27,6 +29,7 @@ export default class Example extends React.Component {
<CustomInput type="switch" id="exampleCustomSwitch" name="customSwitch" label="Turn on this custom switch" />
<CustomInput type="switch" id="exampleCustomSwitch2" name="customSwitch" label="Or this one" />
<CustomInput type="switch" id="exampleCustomSwitch3" label="But not this disabled one" disabled />
<CustomInput type="switch" id="exampleCustomSwitch4" label="Can't click this label to turn on!" htmlFor="exampleCustomSwitch4_X" disabled />
</div>
</FormGroup>
<FormGroup>
Expand Down
6 changes: 3 additions & 3 deletions docs/lib/examples/Modal.js
View file
Expand Up @@ -14,9 +14,9 @@ class ModalExample extends React.Component {
}

toggle() {
this.setState({
modal: !this.state.modal
});
this.setState(prevState => ({
modal: !prevState.modal
}));
}

render() {
Expand Down
6 changes: 3 additions & 3 deletions docs/lib/examples/ModalBackdrop.js
View file
Expand Up @@ -16,9 +16,9 @@ class ModalExample extends React.Component {
}

toggle() {
this.setState({
modal: !this.state.modal
});
this.setState(prevState => ({
modal: !prevState.modal
}));
}

changeBackdrop(e) {
Expand Down
6 changes: 3 additions & 3 deletions docs/lib/examples/ModalCustomCloseButton.js
View file
Expand Up @@ -14,9 +14,9 @@ class ModalExample extends React.Component {
}

toggle() {
this.setState({
modal: !this.state.modal
});
this.setState(prevState => ({
modal: !prevState.modal
}));
}

render() {
Expand Down
6 changes: 3 additions & 3 deletions docs/lib/examples/ModalCustomCloseIcon.js
View file
Expand Up @@ -14,9 +14,9 @@ class ModalExample extends React.Component {
}

toggle() {
this.setState({
modal: !this.state.modal
});
this.setState(prevState => ({
modal: !prevState.modal
}));
}

render() {
Expand Down
6 changes: 3 additions & 3 deletions docs/lib/examples/ModalCustomTimeout.js
View file
Expand Up @@ -14,9 +14,9 @@ class ModalExample extends React.Component {
}

toggle() {
this.setState({
modal: !this.state.modal
});
this.setState(prevState => ({
modal: !prevState.modal
}));
}

render() {
Expand Down
6 changes: 3 additions & 3 deletions docs/lib/examples/ModalDestructuring.js
View file
Expand Up @@ -16,9 +16,9 @@ class ModalExample extends React.Component {
}

toggle() {
this.setState({
modal: !this.state.modal
});
this.setState(prevState => ({
modal: !prevState.modal
}));
}

changeUnmountOnClose(e) {
Expand Down
6 changes: 3 additions & 3 deletions docs/lib/examples/ModalExternal.js
View file
Expand Up @@ -14,9 +14,9 @@ class ModalExample extends React.Component {
}

toggle() {
this.setState({
modal: !this.state.modal
});
this.setState(prevState => ({
modal: !prevState.modal
}));
}

render() {
Expand Down
6 changes: 3 additions & 3 deletions docs/lib/examples/ModalFadeless.js
View file
Expand Up @@ -14,9 +14,9 @@ class ModalExample extends React.Component {
}

toggle() {
this.setState({
modal: !this.state.modal
});
this.setState(prevState => ({
modal: !prevState.modal
}));
}

render() {
Expand Down
6 changes: 3 additions & 3 deletions docs/lib/examples/ModalNested.js
View file
Expand Up @@ -18,9 +18,9 @@ class ModalExample extends React.Component {
}

toggle() {
this.setState({
modal: !this.state.modal
});
this.setState(prevState => ({
modal: !prevState.modal
}));
}

toggleNested() {
Expand Down
6 changes: 6 additions & 0 deletions docs/lib/examples/Pagination.js
View file
Expand Up @@ -5,6 +5,9 @@ export default class Example extends React.Component {
render() {
return (
<Pagination aria-label="Page navigation example">
<PaginationItem>
<PaginationLink first href="#" />
</PaginationItem>
<PaginationItem>
<PaginationLink previous href="#" />
</PaginationItem>
Expand Down Expand Up @@ -36,6 +39,9 @@ export default class Example extends React.Component {
<PaginationItem>
<PaginationLink next href="#" />
</PaginationItem>
<PaginationItem>
<PaginationLink last href="#" />
</PaginationItem>
</Pagination>
);
}
Expand Down
6 changes: 6 additions & 0 deletions docs/lib/examples/PaginationSizingLarge.js
View file
Expand Up @@ -5,6 +5,9 @@ export default class Example extends React.Component {
render() {
return (
<Pagination size="lg" aria-label="Page navigation example">
<PaginationItem>
<PaginationLink first href="#" />
</PaginationItem>
<PaginationItem>
<PaginationLink previous href="#" />
</PaginationItem>
Expand All @@ -26,6 +29,9 @@ export default class Example extends React.Component {
<PaginationItem>
<PaginationLink next href="#" />
</PaginationItem>
<PaginationItem>
<PaginationLink last href="#" />
</PaginationItem>
</Pagination>
);
}
Expand Down
6 changes: 6 additions & 0 deletions docs/lib/examples/PaginationSizingSmall.js
View file
Expand Up @@ -5,6 +5,9 @@ export default class Example extends React.Component {
render() {
return (
<Pagination size="sm" aria-label="Page navigation example">
<PaginationItem>
<PaginationLink first href="#" />
</PaginationItem>
<PaginationItem>
<PaginationLink previous href="#" />
</PaginationItem>
Expand All @@ -26,6 +29,9 @@ export default class Example extends React.Component {
<PaginationItem>
<PaginationLink next href="#" />
</PaginationItem>
<PaginationItem>
<PaginationLink last href="#" />
</PaginationItem>
</Pagination>
);
}
Expand Down
6 changes: 6 additions & 0 deletions docs/lib/examples/PaginationState.js
View file
Expand Up @@ -5,6 +5,9 @@ export default class Example extends React.Component {
render() {
return (
<Pagination aria-label="Page navigation example">
<PaginationItem disabled>
<PaginationLink first href="#" />
</PaginationItem>
<PaginationItem disabled>
<PaginationLink previous href="#" />
</PaginationItem>
Expand Down Expand Up @@ -36,6 +39,9 @@ export default class Example extends React.Component {
<PaginationItem>
<PaginationLink next href="#" />
</PaginationItem>
<PaginationItem>
<PaginationLink last href="#" />
</PaginationItem>
</Pagination>
);
}
Expand Down
11 changes: 11 additions & 0 deletions docs/static/docs.css
View file
Expand Up @@ -37,6 +37,17 @@
margin-top: 2rem;
}

@media(min-width: 768px) {
html,body,#app,#app > .wrapper,#app >.wrapper > .container, #app >.wrapper > .container > .row{
height:100%;
}
.docSearch-navigation, .docSearch-content {
overflow-y: scroll;
height:100%;
}
}


.header .navbar-nav .nav-link.active {
color: #333;
}
Expand Down
8 changes: 6 additions & 2 deletions src/CustomInput.js
View file
Expand Up @@ -12,6 +12,7 @@ const propTypes = {
valid: PropTypes.bool,
invalid: PropTypes.bool,
bsSize: PropTypes.string,
htmlFor: PropTypes.string,
cssModule: PropTypes.object,
children: PropTypes.oneOfType([PropTypes.node, PropTypes.array, PropTypes.func]),
innerRef: PropTypes.oneOfType([
Expand All @@ -32,6 +33,7 @@ function CustomInput(props) {
children,
bsSize,
innerRef,
htmlFor,
...attributes
} = props;

Expand All @@ -48,6 +50,8 @@ function CustomInput(props) {
valid && 'is-valid',
), cssModule);

const labelHtmlFor = htmlFor || attributes.id;

if (type === 'select') {
return <select {...attributes} ref={innerRef} className={classNames(validationClassNames, customClass)}>{children}</select>;
}
Expand All @@ -56,7 +60,7 @@ function CustomInput(props) {
return (
<div className={customClass}>
<input {...attributes} ref={innerRef} className={classNames(validationClassNames, mapToCssModules('custom-file-input', cssModule))} />
<label className={mapToCssModules('custom-file-label', cssModule)} htmlFor={attributes.id}>{label || 'Choose file'}</label>
<label className={mapToCssModules('custom-file-label', cssModule)} htmlFor={labelHtmlFor}>{label || 'Choose file'}</label>
</div>
);
}
Expand All @@ -81,7 +85,7 @@ function CustomInput(props) {
ref={innerRef}
className={classNames(validationClassNames, mapToCssModules('custom-control-input', cssModule))}
/>
<label className={mapToCssModules('custom-control-label', cssModule)} htmlFor={attributes.id}>{label}</label>
<label className={mapToCssModules('custom-control-label', cssModule)} htmlFor={labelHtmlFor}>{label}</label>
{children}
</div>
);
Expand Down
17 changes: 15 additions & 2 deletions src/PaginationLink.js
View file
Expand Up @@ -10,6 +10,8 @@ const propTypes = {
cssModule: PropTypes.object,
next: PropTypes.bool,
previous: PropTypes.bool,
first: PropTypes.bool,
last: PropTypes.bool,
tag: tagPropType,
};

Expand All @@ -23,6 +25,8 @@ const PaginationLink = (props) => {
cssModule,
next,
previous,
first,
last,
tag: Tag,
...attributes
} = props;
Expand All @@ -37,13 +41,22 @@ const PaginationLink = (props) => {
defaultAriaLabel = 'Previous';
} else if (next) {
defaultAriaLabel = 'Next';
} else if (first) {
defaultAriaLabel = 'First';
} else if (last) {
defaultAriaLabel = 'Last';
}

const ariaLabel = props['aria-label'] || defaultAriaLabel;

let defaultCaret;
if (previous) {
defaultCaret = '\u00ab';
defaultCaret = '\u2039';
} else if (next) {
defaultCaret = '\u203A';
} else if (first) {
defaultCaret = '\u00ab';
} else if (last) {
defaultCaret = '\u00bb';
}

Expand All @@ -56,7 +69,7 @@ const PaginationLink = (props) => {
Tag = 'button';
}

if (previous || next) {
if (previous || next || first || last) {
children = [
<span
aria-hidden="true"
Expand Down

0 comments on commit 9aba7bb

Please sign in to comment.