mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-06 14:16:50 +02:00
Code Issues Releases Wiki Activity

DetailsLoader accepts a pattern instead of a string

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-11-25 22:33:07 +07:00
parent 44232e003f
commit c66ccb99ed
3 changed files with 47 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
client/App.tsx
View File

@@ -3,6 +3,7 @@ import { BrowserRouter as Router, Route, Switch as RouteSwitch } from 'react-rou
import './index.css';
import Pattern from './constants/Pattern';
import Home from './Home';
import DetailsLoader from './loaders/DetailsLoader';
@@ -11,47 +12,53 @@ const App = () => {
<Router>
<RouteSwitch>
<Route exact={true} path='/'><Home /></Route>
<Route exact={true} path='/badge'><DetailsLoader pattern="Badge" /></Route>
<Route exact={true} path='/breadcrumb'><DetailsLoader pattern="Breadcrumb" /></Route>
<Route exact={true} path='/button-with-icon'><DetailsLoader pattern="Button with icon" /></Route>
<Route exact={true} path='/card'><DetailsLoader pattern="Card" /></Route>
<Route exact={true} path='/centering'><DetailsLoader pattern="Centering" /></Route>
<Route exact={true} path='/docked-at-corner'><DetailsLoader pattern="Docked at corner" /></Route>
<Route exact={true} path='/dot-navigation'><DetailsLoader pattern="Dot navigation" /></Route>
<Route exact={true} path='/feature-list'><DetailsLoader pattern="Feature list" /></Route>
<Route exact={true} path='/fixed-at-corner'><DetailsLoader pattern="Fixed at corner" /></Route>
<Route exact={true} path='/holy-grail'><DetailsLoader pattern="Holy grail" /></Route>
<Route exact={true} path='/input-add-on'><DetailsLoader pattern="Input add-on" /></Route>
<Route exact={true} path='/media-object'><DetailsLoader pattern="Media object" /></Route>
<Route exact={true} path='/menu'><DetailsLoader pattern="Menu" /></Route>
<Route exact={true} path='/modal'><DetailsLoader pattern="Modal" /></Route>
<Route exact={true} path='/notification'><DetailsLoader pattern="Notification" /></Route>
<Route exact={true} path='/pagination'><DetailsLoader pattern="Pagination" /></Route>
<Route exact={true} path='/badge'><DetailsLoader pattern={Pattern.Badge} /></Route>
<Route exact={true} path='/breadcrumb'><DetailsLoader pattern={Pattern.Breadcrumb} /></Route>
<Route exact={true} path='/button-with-icon'><DetailsLoader pattern={Pattern.ButtonWithIcon} /></Route>
<Route exact={true} path='/card'><DetailsLoader pattern={Pattern.Card} /></Route>
<Route exact={true} path='/centering'><DetailsLoader pattern={Pattern.Centering} /></Route>
<Route exact={true} path='/docked-at-corner'><DetailsLoader pattern={Pattern.DockedAtCorner} /></Route>
<Route exact={true} path='/dot-navigation'><DetailsLoader pattern={Pattern.DotNavigation} /></Route>
<Route exact={true} path='/feature-list'><DetailsLoader pattern={Pattern.FeatureList} /></Route>
<Route exact={true} path='/fixed-at-corner'><DetailsLoader pattern={Pattern.FixedAtCorner} /></Route>
<Route exact={true} path='/holy-grail'><DetailsLoader pattern={Pattern.HolyGrail} /></Route>
<Route exact={true} path='/input-add-on'><DetailsLoader pattern={Pattern.InputAddOn} /></Route>
<Route exact={true} path='/media-object'><DetailsLoader pattern={Pattern.MediaObject} /></Route>
<Route exact={true} path='/menu'><DetailsLoader pattern={Pattern.Menu} /></Route>
<Route exact={true} path='/modal'><DetailsLoader pattern={Pattern.Modal} /></Route>
<Route exact={true} path='/notification'><DetailsLoader pattern={Pattern.Notification} /></Route>
<Route exact={true} path='/pagination'><DetailsLoader pattern={Pattern.Pagination} /></Route>
<Route exact={true} path='/previous-next-buttons'>
<DetailsLoader pattern="Previous next buttons" />
<DetailsLoader pattern={Pattern.PreviousNextButtons} />
</Route>
<Route exact={true} path='/pricing-table'><DetailsLoader pattern="Pricing table" /></Route>
<Route exact={true} path='/property-list'><DetailsLoader pattern="Property list" /></Route>
<Route exact={true} path='/progress-bar'><DetailsLoader pattern="Progress bar" /></Route>
<Route exact={true} path='/pricing-table'><DetailsLoader pattern={Pattern.PricingTable} /></Route>
<Route exact={true} path='/property-list'><DetailsLoader pattern={Pattern.PropertyList} /></Route>
<Route exact={true} path='/progress-bar'><DetailsLoader pattern={Pattern.PropertyList} /></Route>
<Route exact={true} path='/questions-and-answers'>
<DetailsLoader pattern="Questions and answers" />
<DetailsLoader pattern={Pattern.QuestionsAndAnswers} />
</Route>
<Route exact={true} path='/radio-switch'><DetailsLoader pattern="Radio switch" /></Route>
<Route exact={true} path='/same-height-columns'><DetailsLoader pattern="Same height columns" /></Route>
<Route exact={true} path='/search-box'><DetailsLoader pattern="Search box" /></Route>
<Route exact={true} path='/separator'><DetailsLoader pattern="Separator" /></Route>
<Route exact={true} path='/sidebar'><DetailsLoader pattern="Sidebar" /></Route>
<Route exact={true} path='/simple-grid'><DetailsLoader pattern="Simple grid" /></Route>
<Route exact={true} path='/slider'><DetailsLoader pattern="Slider" /></Route>
<Route exact={true} path='/split-navigation'><DetailsLoader pattern="Split navigation" /></Route>
<Route exact={true} path='/split-screen'><DetailsLoader pattern="Split screen" /></Route>
<Route exact={true} path='/stepper-input'><DetailsLoader pattern="Stepper input" /></Route>
<Route exact={true} path='/sticky-footer'><DetailsLoader pattern="Sticky footer" /></Route>
<Route exact={true} path='/sticky-header'><DetailsLoader pattern="Sticky header" /></Route>
<Route exact={true} path='/switch'><DetailsLoader pattern="Switch" /></Route>
<Route exact={true} path='/tab'><DetailsLoader pattern="Tab" /></Route>
<Route exact={true} path='/toggle-password-visibility'><DetailsLoader pattern="Toggle password visibility" /></Route>
<Route exact={true} path='/wizard'><DetailsLoader pattern="Wizard" /></Route>
<Route exact={true} path='/radio-switch'>
<DetailsLoader pattern={Pattern.RadioSwitch} />
</Route>
<Route exact={true} path='/same-height-columns'>
<DetailsLoader pattern={Pattern.SameHeightColumns} />
</Route>
<Route exact={true} path='/search-box'><DetailsLoader pattern={Pattern.SearchBox} /></Route>
<Route exact={true} path='/separator'><DetailsLoader pattern={Pattern.Separator} /></Route>
<Route exact={true} path='/sidebar'><DetailsLoader pattern={Pattern.Sidebar} /></Route>
<Route exact={true} path='/simple-grid'><DetailsLoader pattern={Pattern.SimpleGrid} /></Route>
<Route exact={true} path='/slider'><DetailsLoader pattern={Pattern.Slider} /></Route>
<Route exact={true} path='/split-navigation'><DetailsLoader pattern={Pattern.SplitNavigation} /></Route>
<Route exact={true} path='/split-screen'><DetailsLoader pattern={Pattern.SplitScreen} /></Route>
<Route exact={true} path='/stepper-input'><DetailsLoader pattern={Pattern.StepperInput} /></Route>
<Route exact={true} path='/sticky-footer'><DetailsLoader pattern={Pattern.StickyFooter} /></Route>
<Route exact={true} path='/sticky-header'><DetailsLoader pattern={Pattern.StickyHeader} /></Route>
<Route exact={true} path='/switch'><DetailsLoader pattern={Pattern.Switch} /></Route>
<Route exact={true} path='/tab'><DetailsLoader pattern={Pattern.Tab} /></Route>
<Route exact={true} path='/toggle-password-visibility'>
<DetailsLoader pattern={Pattern.TogglePasswordVisibility} />
</Route>
<Route exact={true} path='/wizard'><DetailsLoader pattern={Pattern.Wizard} /></Route>
</RouteSwitch>
</Router>
);

3
client/loaders/DetailsLoader.tsx
View File

@@ -1,10 +1,11 @@
import loadable, { LoadableComponent } from '@loadable/component';
import React from 'react';
import Pattern from '../constants/Pattern';
import './spinner.css';
interface DetailsLoaderProps {
pattern: string;
pattern: Pattern;
}
const slug = (item: string) => item.toLowerCase().split(' ').join('-');

1
client/patterns/property-list/Details.tsx
View File

@@ -53,6 +53,7 @@ const Details: React.FC<{}> = () => {
</div>
)}
source={`
<!-- A property item -->
<dl style="
/* Content is center horizontally */
align-items: center;