Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit a0f32bd

Browse files
Import bootstrap style by given version
1 parent 4a3486c commit a0f32bd

10 files changed

+379
-7
lines changed

‎packages/react-bootstrap-table2-example/package.json‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"private": true,
77
"scripts": {
88
"test": "echo \"Error: no test specified\" && exit 1",
9-
"storybook": "start-storybook -p 6006",
9+
"storybook": "start-storybook -p 6006 -s ./public",
1010
"gh-pages:clean": "rimraf ./storybook-static",
1111
"gh-pages:build": "build-storybook"
1212
},
@@ -17,9 +17,6 @@
1717
"react": "^16.3.0",
1818
"react-dom": "^116.3.0"
1919
},
20-
"dependencies": {
21-
"bootstrap": "^3.3.7"
22-
},
2320
"devDependencies": {
2421
"@storybook/addon-console": "^1.0.0",
2522
"@storybook/react": "^3.2.8",
19.7 KB
Binary file not shown.

‎packages/react-bootstrap-table2-example/public/fonts/glyphicons-halflings-regular.svg‎

Lines changed: 288 additions & 0 deletions
Loading[フレーム]
44.3 KB
Binary file not shown.
22.9 KB
Binary file not shown.
17.6 KB
Binary file not shown.

‎packages/react-bootstrap-table2-example/public/style/bootstrap.3.3.7.min.css‎

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/react-bootstrap-table2-example/public/style/bootstrap.4.1.3.min.css‎

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
/* eslint no-return-assign: 0 */
2+
import React, { Fragment, PureComponent } from 'react';
3+
import PropTypes from 'prop-types';
4+
5+
export const BOOTSTRAP_VERSION = {
6+
FOUR: '4.1.3',
7+
THREE: '3.3.7'
8+
};
9+
10+
class WithBootstrapStyle extends PureComponent {
11+
static propTypes = {
12+
version: PropTypes.string.isRequired,
13+
render: PropTypes.func.isRequired
14+
}
15+
16+
constructor() {
17+
super();
18+
19+
this.state = { loading: true };
20+
}
21+
22+
componentDidMount() {
23+
this.style.addEventListener('load', this.handleLoadEvent);
24+
}
25+
26+
componentWillUnmount() {
27+
this.style.removeEventListener('load', this.handleLoadEvent);
28+
}
29+
30+
handleLoadEvent = () => {
31+
this.setState({ loading: false });
32+
}
33+
34+
render() {
35+
const { version, render } = this.props;
36+
37+
const href = `style/bootstrap.${version}.min.css`;
38+
39+
return (
40+
<Fragment>
41+
<link href={ href } rel="stylesheet" ref={ element => this.style = element } />
42+
{ render(this.state.loading) }
43+
</Fragment>
44+
);
45+
}
46+
}
47+
48+
/**
49+
* Currently we adopt version 3 as default.
50+
*/
51+
export default (version = BOOTSTRAP_VERSION.THREE) => story => (
52+
<WithBootstrapStyle
53+
version={ version }
54+
render={ loading => !loading && story() }
55+
/>
56+
);

‎packages/react-bootstrap-table2-example/stories/index.js‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -156,20 +156,20 @@ import RemoteCellEdit from 'examples/remote/remote-celledit';
156156
import RemoteAll from 'examples/remote/remote-all';
157157

158158
// css style
159-
import 'bootstrap/dist/css/bootstrap.min.css';
160159
import 'stories/stylesheet/tomorrow.min.css';
161160
import 'stories/stylesheet/storybook.scss';
162161
import '../../react-bootstrap-table2/style/react-bootstrap-table2.scss';
163162
import '../../react-bootstrap-table2-paginator/style/react-bootstrap-table2-paginator.scss';
164163
import '../../react-bootstrap-table2-filter/style/react-bootstrap-table2-filter.scss';
165164

166-
// import { action } from '@storybook/addon-actions';
165+
// import bootstrap style by given version
166+
import bootstrapStyle, { BOOTSTRAP_VERSION } from './bootstrap-style';
167167

168-
// action('hello');
169168
storiesOf('Welcome', module)
170169
.add('react bootstrap table 2 ', () => <Welcome />);
171170

172171
storiesOf('Basic Table', module)
172+
.addDecorator(bootstrapStyle())
173173
.add('basic table', () => <BasicTable />)
174174
.add('striped, hover, condensed table', () => <StripHoverCondensedTable />)
175175
.add('borderless table', () => <BorderlessTable />)
@@ -178,7 +178,13 @@ storiesOf('Basic Table', module)
178178
.add('Table with caption', () => <CaptionTable />)
179179
.add('Large Table', () => <LargeTable />);
180180

181+
storiesOf('Bootstrap 4', module)
182+
.addDecorator(bootstrapStyle(BOOTSTRAP_VERSION.FOUR))
183+
.add('Basic Table', () => <BasicTable />)
184+
.add('Basic Pagination Table', () => <PaginationTable />);
185+
181186
storiesOf('Work on Columns', module)
187+
.addDecorator(bootstrapStyle())
182188
.add('Display Nested Data', () => <NestedDataTable />)
183189
.add('Column Formatter', () => <ColumnFormatTable />)
184190
.add('Column Formatter with Custom Data', () => <ColumnFormatExtraDataTable />)
@@ -191,6 +197,7 @@ storiesOf('Work on Columns', module)
191197
.add('Customize Column HTML attribute', () => <ColumnAttrsTable />);
192198

193199
storiesOf('Work on Header Columns', module)
200+
.addDecorator(bootstrapStyle())
194201
.add('Column Formatter', () => <HeaderColumnFormatTable />)
195202
.add('Column Format with Filter and Sort', () => <HeaderColumnFormatWithSortFilterTable />)
196203
.add('Column Align', () => <HeaderColumnAlignTable />)
@@ -202,6 +209,7 @@ storiesOf('Work on Header Columns', module)
202209
.add('Header Class', () => <HeaderClassTable />);
203210

204211
storiesOf('Column Filter', module)
212+
.addDecorator(bootstrapStyle())
205213
.add('Text Filter', () => <TextFilter />)
206214
.add('Text Filter with Default Value', () => <TextFilterWithDefaultValue />)
207215
.add('Text Filter with Comparator', () => <TextFilterComparator />)
@@ -232,11 +240,13 @@ storiesOf('Column Filter', module)
232240
.add('Clear All Filters', () => <ClearAllFilters />);
233241

234242
storiesOf('Work on Rows', module)
243+
.addDecorator(bootstrapStyle())
235244
.add('Customize Row Style', () => <RowStyleTable />)
236245
.add('Customize Row Class', () => <RowClassTable />)
237246
.add('Row Event', () => <RowEventTable />);
238247

239248
storiesOf('Sort Table', module)
249+
.addDecorator(bootstrapStyle())
240250
.add('Enable Sort', () => <EnableSortTable />)
241251
.add('Default Sort Table', () => <DefaultSortTable />)
242252
.add('Default Sort Direction Table', () => <DefaultSortDirectionTable />)
@@ -246,6 +256,7 @@ storiesOf('Sort Table', module)
246256
.add('Custom Style on Sorting Header Column', () => <HeaderSortingStyleTable />);
247257

248258
storiesOf('Cell Editing', module)
259+
.addDecorator(bootstrapStyle())
249260
.add('Click to Edit', () => <ClickToEditTable />)
250261
.add('DoubleClick to Edit', () => <DoubleClickToEditTable />)
251262
.add('Blur to Save Cell', () => <BlurToSaveTable />)
@@ -265,6 +276,7 @@ storiesOf('Cell Editing', module)
265276
.add('Custom Editor', () => <CustomEditorTable />);
266277

267278
storiesOf('Row Selection', module)
279+
.addDecorator(bootstrapStyle())
268280
.add('Single Selection', () => <SingleSelectionTable />)
269281
.add('Multiple Selection', () => <MultipleSelectionTable />)
270282
.add('Click to Select', () => <ClickToSelectTable />)
@@ -281,6 +293,7 @@ storiesOf('Row Selection', module)
281293
.add('Hide Selection Column', () => <HideSelectionColumnTable />);
282294

283295
storiesOf('Row Expand', module)
296+
.addDecorator(bootstrapStyle())
284297
.add('Basic Row Expand', () => <BasicRowExpand />)
285298
.add('Expand Management', () => <RowExpandManagement />)
286299
.add('Non Expandabled Rows', () => <NonExpandableRows />)
@@ -289,18 +302,21 @@ storiesOf('Row Expand', module)
289302
.add('Expand Hooks', () => <ExpandHooks />);
290303

291304
storiesOf('Pagination', module)
305+
.addDecorator(bootstrapStyle())
292306
.add('Basic Pagination Table', () => <PaginationTable />)
293307
.add('Pagination Hooks', () => <PaginationHooksTable />)
294308
.add('Custom Pagination', () => <CustomPaginationTable />);
295309

296310
storiesOf('Table Search', module)
311+
.addDecorator(bootstrapStyle())
297312
.add('Basic Search Table', () => <SearchTable />)
298313
.add('Default Custom Search', () => <DefaultCustomSearch />)
299314
.add('Fully Custom Search', () => <FullyCustomSearch />)
300315
.add('Search Fromatted Value', () => <SearchFormattedData />)
301316
.add('Custom Search Value', () => <CustomSearchValue />);
302317

303318
storiesOf('Export CSV', module)
319+
.addDecorator(bootstrapStyle())
304320
.add('Basic Export CSV', () => <ExportCSV />)
305321
.add('Format CSV Column', () => <CSVFormatter />)
306322
.add('Custom CSV Header', () => <CustomCSVHeader />)
@@ -310,10 +326,12 @@ storiesOf('Export CSV', module)
310326
.add('Custom CSV', () => <CustomCSV />);
311327

312328
storiesOf('EmptyTableOverlay', module)
329+
.addDecorator(bootstrapStyle())
313330
.add('Empty Table Overlay', () => <EmptyTableOverlay />)
314331
.add('Table Overlay', () => <TableOverlay />);
315332

316333
storiesOf('Remote', module)
334+
.addDecorator(bootstrapStyle())
317335
.add('Remote Sort', () => <RemoteSort />)
318336
.add('Remote Filter', () => <RemoteFilter />)
319337
.add('Remote Pagination', () => <RemotePaginationTable />)

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /