Skip to content

C
cloudlink
提交 05c2a4d9 authored 作者: zhenglide's avatar zhenglide
浏览文件
操作

初始化react-demo

上级 9336a7c6
展开全部 隐藏空白字符变更
内嵌 并排
正在显示 包含 24509 行增加 和 0 行删除
react-uidemo-v1/component/accordion.js 0 → 100644
浏览文件 @ 05c2a4d9
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class Accordion extends Component {
static defaultProps = {
}
constructor(props) {
super(props);
this.state = {
showContent: false,
headerOpacity: 1
};
this.handleClick = this.handleClick.bind(this);
}
handleClick(e) {
this.setState({
showContent: !this.state.showContent,
headerOpacity: this.state.showContent ? 1 : 0.4
});
}
render() {
const { children, header } = this.props;
const content = this.state.showContent ? children : <div />;
return (
<div>
<div onClick={this.handleClick}>
<div style={{
opacity: this.state.headerOpacity,
transition: 'opacity .3s'
}}
>
{header}
</div>
</div>
{content}
</div>
);
}
}
Accordion.propTypes = {
children: PropTypes.object,
header: PropTypes.object
};
export default Accordion;
react-uidemo-v1/component/page.js 0 → 100644
浏览文件 @ 05c2a4d9
import React from 'react';
import PropTypes from 'prop-types';
export default function Page(props) {
const {
title, subTitle, spacing, className, children, footer
} = props;
return (
<section className={`page ${className}`}>
<div className="page__hd">
<h1 className="page__title">{title}</h1>
<p className="page__desc">{subTitle}</p>
</div>
<div className={`page__bd ${spacing ? 'page__bd_spacing' : ''}`}>
{children}
</div>
{footer ?
<div className="page__ft">
{footer}
</div> : false}
</section>
);
};
Page.propTypes = {
title: PropTypes.string,
subTitle: PropTypes.string,
spacing: PropTypes.bool,
className: PropTypes.string,
children: PropTypes.object,
footer: PropTypes.object
};
react-uidemo-v1/pages/actionsheet/index.js 0 → 100644
浏览文件 @ 05c2a4d9
import React from 'react';
import { Button, ActionSheet } from '@huawei/react-weui';
import Page from '../../component/page';
export default class ActionSheetDemo extends React.Component {
state = {
iosShow: false,
androidShow: false,
menus: [{
label: 'Option 1',
onClick: () => { }
}, {
label: 'Option 2',
onClick: () => { }
}],
actions: [
{
label: 'Cancel',
onClick: this.hide.bind(this)
}
]
};
hide() {
this.setState({
autoShow: false,
iosShow: false,
androidShow: false
});
}
render() {
return (
<Page className="actionsheet" title="ActionSheet" subTitle="弹出式菜单" spacing>
<Button type="default" onClick={e => this.setState({ iosShow: true })}>IOS ActionSheet</Button>
<ActionSheet
menus={this.state.menus}
actions={this.state.actions}
show={this.state.iosShow}
type="ios"
onRequestClose={e => this.setState({ iosShow: false })}
/>
<br />
<Button type="default" onClick={e => this.setState({ androidShow: true })}>Android ActionSheet</Button>
<ActionSheet
menus={this.state.menus}
actions={this.state.actions}
show={this.state.androidShow}
type="android"
onRequestClose={e => this.setState({ androidShow: false })}
/>
</Page>
);
}
};
react-uidemo-v1/pages/article/article.less 0 → 100644
浏览文件 @ 05c2a4d9
.h5-article {
padding: 20px 15px;
font-size: 17px;
section {
margin-bottom: 1.5em;
}
h1 {
margin-bottom: 0.9em;
font-weight: 400;
font-size: 21px;
}
h2 {
margin-bottom: 0.34em;
font-weight: 400;
font-size: 17px;
}
h3 {
margin-bottom: 0.34em;
font-weight: 400;
font-size: 16px;
}
* {
box-sizing: border-box;
max-width: 100%;
word-wrap: break-word;
}
p {
margin: 0 0 0.8em;
}
}
react-uidemo-v1/pages/article/index.js 0 → 100644
浏览文件 @ 05c2a4d9
import React from 'react';
import { Article } from '@huawei/react-weui';
import srcArticle from './pic_article.png';
import Page from '../../component/page';
const ListDemo = (props) => (
<Page className="article" title="Article" subTitle="文章">
<Article>
<h1>H1 Heading</h1>
<section>
<h2 className="title">H2 Title</h2>
<section>
<h3>H3 Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute
</p>
<p>
<img src={srcArticle} alt="" />
<img src={srcArticle} alt="" />
</p>
</section>
<section>
<h3>H3 Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</section>
</Article>
</Page>
);
export default ListDemo;
react-uidemo-v1/pages/badge/index.js 0 → 100644
浏览文件 @ 05c2a4d9
import React from 'react';
import {
Badge, Cells, Cell, CellBody, CellFooter, CellHeader, CellsTitle
} from '@huawei/react-weui';
import Page from '../../component/page';
import iconSrc from '../list/images/icon.png';
const BadgeDemo = (props) => (
<Page className="badge" title="Badge" subTitle="徽章">
<CellsTitle>Footer Notification Badge</CellsTitle>
<Cells>
<Cell access>
<CellBody>Label</CellBody>
<CellFooter>
Details
<Badge dot preset="footer" />
</CellFooter>
</Cell>
</Cells>
<CellsTitle>Header & Body Badge</CellsTitle>
<Cells>
<Cell>
<CellHeader style={{ position: 'relative', marginRight: '10px' }}>
<img src={iconSrc} style={{ width: '50px', display: 'block' }} />
<Badge preset="header">8</Badge>
</CellHeader>
<CellBody>
<p>Contact Name</p>
<p style={{ fontSize: '13px', color: '#888888' }}>Descriptions</p>
</CellBody>
</Cell>
<Cell access>
<CellBody>
Label
<Badge preset="body">8</Badge>
</CellBody>
<CellFooter />
</Cell>
<Cell access>
<CellBody>
Label
<Badge preset="body">8</Badge>
</CellBody>
<CellFooter>
Details
</CellFooter>
</Cell>
<Cell access>
<CellBody>
Label
<Badge preset="body">new</Badge>
</CellBody>
<CellFooter />
</Cell>
</Cells>
</Page>
);
export default BadgeDemo;
react-uidemo-v1/pages/button/button.less 0 → 100644
浏览文件 @ 05c2a4d9
.button-sp-area {
width: 60%;
padding: 15px 0;
margin: 0 auto;
}
react-uidemo-v1/pages/button/index.js 0 → 100644
浏览文件 @ 05c2a4d9
import React from 'react';
import { Button, ButtonArea } from '@huawei/react-weui';
import Page from '../../component/page';
import './button.less';
export default function ButtonDemo() {
return (
<Page className="button" title="Button" subTitle="按钮" spacing>
<Button>Normal</Button>
<Button disabled>Disabled</Button>
<ButtonArea>
<Button type="default">Secondary Normal</Button>
<Button type="default" disabled>Secondary Disabled</Button>
</ButtonArea>
<ButtonArea direction="horizontal">
<Button type="warn">Warn Normal</Button>
<Button type="warn" disabled>Disabled</Button>
</ButtonArea>
<div className="button-sp-area">
<Button type="primary" plain>Button</Button>
<Button type="primary" plain disabled>Button</Button>
<Button type="default" plain>Button</Button>
<Button size="small">Mini</Button>
<Button type="default" size="small">Mini</Button>
<Button type="warn" size="small">Mini</Button>
</div>
</Page>
);
}
react-uidemo-v1/pages/dialog/index.js 0 → 100644
浏览文件 @ 05c2a4d9
import React from 'react';
import { Button, Dialog } from '@huawei/react-weui';
import Page from '../../component/page';
export default class DialogDemo extends React.Component {
state = {
showIOS1: false,
showIOS2: false,
showAndroid1: false,
showAndroid2: false,
style1: {
buttons: [
{
label: 'Ok',
onClick: this.hideDialog.bind(this)
}
]
},
style2: {
title: 'Heading',
buttons: [
{
type: 'default',
label: 'Cancel',
onClick: this.hideDialog.bind(this)
},
{
type: 'primary',
label: 'Ok',
onClick: this.hideDialog.bind(this)
}
]
}
};
hideDialog() {
this.setState({
showIOS1: false,
showIOS2: false,
showAndroid1: false,
showAndroid2: false
});
}
render() {
return (
<Page className="dialog" title="Dialog" subTitle="对话框" spacing>
<Button type="default" onClick={e => this.setState({ showIOS1: true })} >iOS Style1</Button>
<Button type="default" onClick={e => this.setState({ showIOS2: true })}>iOS Style2</Button>
<Button type="default" onClick={e => this.setState({ showAndroid1: true })} >Android Style1</Button>
<Button type="default" onClick={e => this.setState({ showAndroid2: true })}>Android Style2</Button>
<Dialog type="ios" title={this.state.style1.title} buttons={this.state.style1.buttons} show={this.state.showIOS1}>
This is iOS Style 1
</Dialog>
<Dialog type="ios" title={this.state.style2.title} buttons={this.state.style2.buttons} show={this.state.showIOS2}>
This is iOS Style 2
</Dialog>
<Dialog type="android" title={this.state.style1.title} buttons={this.state.style1.buttons} show={this.state.showAndroid1}>
This is Android Style 1
</Dialog>
<Dialog type="android" title={this.state.style2.title} buttons={this.state.style2.buttons} show={this.state.showAndroid2}>
This is Android Style 2
</Dialog>
</Page>
);
}
};
react-uidemo-v1/pages/flex/index.js 0 → 100644
浏览文件 @ 05c2a4d9
import React from 'react';
import {
Flex,
FlexItem
} from '@huawei/react-weui';
import Page from '../../component/page';
const FlexDemo = (props) => (
<Page className="flex" title="Flex" subTitle="Flex布局" spacing>
<Flex>
<FlexItem>
<div className="placeholder">weui</div>
</FlexItem>
</Flex>
<Flex>
<FlexItem>
<div className="placeholder">weui</div>
</FlexItem>
<FlexItem>
<div className="placeholder">weui</div>
</FlexItem>
</Flex>
<Flex>
<FlexItem>
<div className="placeholder">weui</div>
</FlexItem>
<FlexItem>
<div className="placeholder">weui</div>
</FlexItem>
<FlexItem>
<div className="placeholder">weui</div>
</FlexItem>
</Flex>
<Flex>
<FlexItem>
<div className="placeholder">weui</div>
</FlexItem>
<FlexItem>
<div className="placeholder">weui</div>
</FlexItem>
<FlexItem>
<div className="placeholder">weui</div>
</FlexItem>
<FlexItem>
<div className="placeholder">weui</div>
</FlexItem>
</Flex>
</Page>
);
export default FlexDemo;
react-uidemo-v1/pages/footer/index.js 0 → 100644
浏览文件 @ 05c2a4d9
import React from 'react';
import {
Footer,
FooterText,
FooterLinks,
FooterLink
} from '@huawei/react-weui';
import Page from '../../component/page';
const FooterDemo = (props) => (
<Page className="footer" title="Footer" subTitle="页脚" spacing>
<Footer>
<FooterText>Copyright &copy; 2008-2016 weui.io</FooterText>
</Footer>
<br /><br />
<Footer>
<FooterLinks>
<FooterLink href="javascript:void(0);">Link</FooterLink>
</FooterLinks>
<FooterText>Copyright &copy; 2008-2016 weui.io</FooterText>
</Footer>
<br /><br />
<Footer>
<FooterLinks>
<FooterLink href="javascript:void(0);">Link</FooterLink>
<FooterLink href="javascript:void(0);">Link</FooterLink>
</FooterLinks>
<FooterText>Copyright &copy; 2008-2016 weui.io</FooterText>
</Footer>
</Page>
);
export default FooterDemo;
react-uidemo-v1/pages/gallery/index.js 0 → 100644
浏览文件 @ 05c2a4d9
import React, { Component } from 'react';
import Page from '../../component/page';
import { Gallery, GalleryDelete, Button } from '@huawei/react-weui';
import imgSrc from '../uploader/photo.png';
import imgSrc2 from './2.png';
import imgSrc3 from './3.png';
class GalleryDemo extends Component {
constructor(props) {
super(props);
this.state = {
showSingle: false,
showMultiple: false
};
}
render() {
const BackButtonStyle = {
display: 'inline-block',
width: 'auto',
color: 'white',
border: 'none',
position: 'absolute',
top: '5px',
left: '15px'
};
return (
<Page className="gallery" title="Gallery" subTitle="画廊，可实现上传图片的展示或幻灯片播放">
<div
style={{ padding: '0 15px' }}
>
<Button
type="default"
onClick={e => this.setState({ showSingle: true })}
>
Show Single Image
</Button>
<Button
type="default"
onClick={e => this.setState({ showMultiple: true })}
>
Show Multiple Images
</Button>
</div>
<Gallery src={imgSrc} show={this.state.showSingle}>
<Button
style={BackButtonStyle}
onClick={e => this.setState({ showSingle: false })}
plain
>
Back
</Button>
<GalleryDelete
onClick={(e, i) => alert(`click deleted id: ${i}`)}
/>
</Gallery>
<Gallery src={[imgSrc, imgSrc2, imgSrc3]} show={this.state.showMultiple}>
<Button
style={BackButtonStyle}
onClick={e => this.setState({ showMultiple: false })}
plain
>
Back
</Button>
<GalleryDelete
onClick={(e, i) => alert(`click deleted id: ${i}`)}
/>
</Gallery>
</Page>
);
}
}
export default GalleryDemo;
react-uidemo-v1/pages/grid/index.js 0 → 100644
浏览文件 @ 05c2a4d9
import React from 'react';
import { Grids } from '@huawei/react-weui';
import Page from '../../component/page';
import iconSrc from './icon_tabbar.png';
const data = Array(9).fill({
icon: <img src={iconSrc} alt="" />,
label: 'Grid',
href: 'javascript:;'
});
const GridDemo = (props) => (
<Page className="grid" title="Grid" subTitle="九宫格">
<Grids data={data} />
</Page>
);
export default GridDemo;
react-uidemo-v1/pages/home/index.js 0 → 100644
浏览文件 @ 05c2a4d9
import React from 'react';
import { Flex, FlexItem } from '@huawei/react-weui';
import Page from '../../component/page';
import Accordion from '../../component/accordion';
import IconForm from './images/icon_nav_form.png';
import IconFeedback from './images/icon_nav_feedback.png';
import IconLayout from './images/icon_nav_layout.png';
import IconNav from './images/icon_nav_nav.png';
import IconSearch from './images/icon_nav_search.png';
import IconZIndex from './images/icon_nav_z-index.png';
import openNewView from '../../../utils/openNewView';
import './index.less';
const menus = [
{
name: 'View',
icon: IconZIndex,
items: [
{
label: 'Swiper',
to: '/swiper'
},
{
label: 'Page',
to: '/page'
}
]
},
{
name: 'Form',
icon: IconForm,
items: [
{
label: 'Button',
to: '/button'
},
{
label: 'List',
to: '/list'
},
{
label: 'Input',
to: '/input'
},
{
label: 'Picker',
to: '/picker'
},
{
label: 'Slider',
to: '/slider'
},
{
label: 'Uploader',
to: '/uploader'
}
]
},
{
name: 'Basic Components',
icon: IconLayout,
items: [
{
label: 'Article',
to: '/article'
},
{
label: 'Badge',
to: '/badge'
},
{
label: 'Flex',
to: '/flex'
},
{
label: 'Footer',
to: '/footer'
},
{
label: 'Gallery',
to: '/gallery'
},
{
label: 'Grid',
to: '/grid'
},
{
label: 'Icons',
to: '/icons'
},
{
label: 'Loadmore',
to: '/loadmore'
},
{
label: 'Panel',
to: '/panel'
},
{
label: 'Preview',
to: '/preview'
},
{
label: 'Progress',
to: '/progress'
}
]
},
{
name: 'Feedbacks',
icon: IconFeedback,
items: [
{
label: 'Actionsheet',
to: '/actionsheet'
},
{
label: 'Dialog',
to: '/dialog'
},
{
label: 'Msg',
to: '/msg'
},
// {
// label: 'Toast',
// to: '/toast'
// },
{
label: 'Toptips',
to: '/toptips'
},
{
label: 'Popup',
to: '/popup'
},
{
label: 'Pull To Refresh',
to: '/ptr'
},
{
label: 'Infinite Loader',
to: '/infinite'
}
]
},
{
name: 'Navigations',
icon: IconNav,
items: [
{
label: 'Navbar',
to: '/navbar'
},
{
label: 'Tabbar',
to: '/tabbar'
},
{
label: 'AutoNavbar',
to: '/navbar2'
},
{
label: 'AutoTabbar',
to: '/tabbar2'
}
]
},
{
name: 'Search',
icon: IconSearch,
items: [
{
label: 'Search Bar',
to: '/searchbar'
}
]
}
];
const subTitle = (
<div className="home-jsapi">
A UI library by WeChat official design team,
includes the most useful widgets/modules in mobile web applications.
<br />
## 相关链接<br />
<a onClick={() => openNewView('h5://welink.h5demo/html/index.html')} href="javascript:void(0)">h5mo</a>
<br />
<a onClick={() => openNewView('/jsapi')} href="javascript:void(0)">WeLink JSAPI Demo</a>
</div>
);
const Home = (props) => (
<Page
className="home"
title="WeUI"
subTitle={subTitle}
spacing
>
<ul>
{menus.map((menu, i) => (
<li key={i}>
<Accordion
header={
<Flex>
<FlexItem component="p">
{menu.name}
</FlexItem>
<img
src={menu.icon}
alt=""
/>
</Flex>
}
>
<div className="weui-cells">
{menu.items.map((item, j) => (
<a key={`${i}-${j}`} className="weui-cell weui-cell_access" onClick={() => { openNewView(item.to); }} href="javascript:void(0)">
<div className="weui-cell__bd">{item.label}</div>
<div className="weui-cell__ft" />
</a>
))}
</div>
</Accordion>
</li>
))}
</ul>
</Page>
);
export default Home;
react-uidemo-v1/pages/home/index.less 0 → 100644
浏览文件 @ 05c2a4d9
.global_navs {
.icon_nav {
display: block;
width: 28px;
height: 28px;
margin-right: 0.7em;
}
}
.page.home {
@pageHomePadding: 20px;
.page__intro-icon {
width: 16px;
height: 16px;
margin-top: -0.2em;
margin-left: 5px;
vertical-align: middle;
}
.page__title {
margin-bottom: 15px;
font-size: 30px;
}
.page__bd {
span {
//https://github.com/facebook/react/pull/5753
}
img {
width: 30px;
height: 30px;
border: 0;
}
li {
border-radius: 2px;
margin: 10px 0;
background-color: #fff;
overflow: hidden;
cursor: pointer;
&.js_show {
.weui-flex {
opacity: 0.4;
}
.page__category {
height: auto;
}
.page__category-content {
opacity: 1;
transform: translateY(0);
}
}
&:first-child {
margin-top: 0;
}
}
}
.page__category {
//height: 0;
overflow: hidden;
}
.page__category-content {
//opacity: 0;
transform: translateY(-50%);
transition: 0.3s;
}
.weui-flex {
align-items: center;
padding: @pageHomePadding;
transition: 0.3s;
}
.weui-cells {
margin-top: 0;
&::before,
&::after {
display: none;
}
}
.weui-cell {
padding-right: @pageHomePadding;
padding-left: @pageHomePadding;
&::before {
right: @pageHomePadding;
left: @pageHomePadding;
}
}
}
.slide-appear {
opacity: 0;
transition: opacity 0.7s ease-in;
}
.slide-appear.slide-appear-active {
opacity: 1;
}
.slide-enter {
max-height: 0;
transition: all 0.3s ease-in;
}
.slide-enter.slide-enter-active {
max-height: 1000px;
}
.slide-exit {
max-height: 1000px;
transition: all 0.1s ease-out;
}
.slide-exit.slide-exit-active {
max-height: 0;
}
.home-jsapi a {
color: #2196f3;
}
react-uidemo-v1/pages/icons/icons.less 0 → 100644
浏览文件 @ 05c2a4d9
.page {
&.icons {
text-align: center;
i {
padding: 0 5px 10px;
}
}
}
.icon_sp_area {
margin-top: 20px;
}
react-uidemo-v1/pages/icons/index.js 0 → 100644
浏览文件 @ 05c2a4d9
import React from 'react';
import PropTypes from 'prop-types';
import { Icon } from '@huawei/react-weui';
import Page from '../../component/page';
import './icons.less';
const IconBox = function (props) {
const { icon, title, desc } = props;
return (
<div className="icon-box">
{icon}
<div className="icon-box__ctn">
<h3 className="icon-box__title">{title}</h3>
<p className="icon-box__desc">{desc}</p>
</div>
</div>);
};
IconBox.propTypes = {
icon: PropTypes.object,
title: PropTypes.string,
desc: PropTypes.string
};
export default function IconDemo() {
return (
<Page className="icons" title="Icons" subTitle="图标" spacing>
<IconBox
icon={<Icon size="large" value="success" />}
title="Well done!"
desc="You successfully read this important alert message."
/>
<IconBox
icon={<Icon size="large" value="info" />}
title="Heads up!"
desc="This alert needs your attention, but it's not super important."
/>
<IconBox
icon={<Icon size="large" value="warn" primary />}
title="Attention!"
desc="This is your default warning with the primary property"
/>
<IconBox
icon={<Icon size="large" value="warn" />}
title="Attention!"
desc="This is your strong warning without the primary property"
/>
<IconBox
icon={<Icon size="large" value="waiting" />}
title="Hold on!"
desc="We are working hard to bring the best ui experience"
/>
<Icon size="large" value="safe-success" />
<Icon size="large" value="safe-warn" />
<div className="icon_sp_area">
<Icon value="success" />
<Icon value="success-circle" />
<Icon value="success-no-circle" />
<Icon value="info" />
<Icon value="waiting" />
<Icon value="waiting-circle" />
<Icon value="circle" />
<Icon value="warn" />
<Icon value="download" />
<Icon value="info-circle" />
<Icon value="cancel" />
<Icon value="clear" />
<Icon value="search" />
</div>
</Page>
);
};
react-uidemo-v1/pages/infiniteloader/index.js 0 → 100644
浏览文件 @ 05c2a4d9
import React from 'react';
import {
InfiniteLoader,
Cells,
CellsTitle,
Cell,
CellBody,
CellFooter
} from '@huawei/react-weui';
import Page from '../../component/page';
class InfiniteDemo extends React.Component {
constructor(props) {
super(props);
this.state = {
items: [...Array(20).keys()]
};
}
render() {
return (
<InfiniteLoader
onLoadMore={(resolve, finish) => {
// mock request
setTimeout(() => {
if (this.state.items.length > 22) {
finish();
} else {
this.setState({
items: this.state.items.concat([this.state.items.length])
}, () => resolve());
}
}, 1000);
}}
>
<Page className="infinite" title="Infinite Loader" subTitle="滚动加载" >
<CellsTitle>List with 22 Max</CellsTitle>
<Cells>
{
this.state.items.map((item, i) => (
<Cell href="javascript:;" key={i} access>
<CellBody>
{item}
</CellBody>
<CellFooter />
</Cell>
))
}
</Cells>
</Page>
</InfiniteLoader>
);
}
}
export default InfiniteDemo;
react-uidemo-v1/pages/input/index.js 0 → 100644
浏览文件 @ 05c2a4d9
import React from 'react';
import {
ButtonArea,
Button,
CellsTitle,
CellsTips,
Cell,
CellHeader,
CellBody,
CellFooter,
Form,
FormCell,
Icon,
Input,
Label,
TextArea,
Switch,
Radio,
Checkbox,
Select,
VCode,
Agreement,
Toptips
} from '@huawei/react-weui';
import Page from '../../component/page';
// import iconSrc from './images/icon.png';
import vcodeSrc from './images/vcode.jpg';
// import avatarSrc from './images/avatar.jpg';
export default class inputDemo extends React.Component {
constructor(props) {
super(props);
this.state = {
showToptips: false
};
}
render() {
return (
<Page className="input" title="Input" subTitle="表单输入">
<CellsTitle>Radio</CellsTitle>
<Form radio>
<FormCell radio>
<CellBody>Option 1</CellBody>
<CellFooter>
<Radio name="radio1" value="1" defaultChecked />
</CellFooter>
</FormCell>
<FormCell radio>
<CellBody>Option 2</CellBody>
<CellFooter>
<Radio name="radio1" value="2" />
</CellFooter>
</FormCell>
<Cell link>
<CellBody>More</CellBody>
</Cell>
</Form>
<CellsTitle>Checkbox</CellsTitle>
<Form checkbox>
<FormCell checkbox>
<CellHeader>
<Checkbox name="checkbox1" value="1" />
</CellHeader>
<CellBody>Option 1</CellBody>
</FormCell>
<FormCell checkbox>
<CellHeader>
<Checkbox name="checkbox2" value="2" defaultChecked />
</CellHeader>
<CellBody>Option 2</CellBody>
</FormCell>
<Cell link>
<CellBody>More</CellBody>
</Cell>
</Form>
<CellsTitle>Switch</CellsTitle>
<Form>
<FormCell switch>
<CellBody>Switch Label</CellBody>
<CellFooter>
<Switch />
</CellFooter>
</FormCell>
</Form>
<CellsTitle>Forms</CellsTitle>
<Form>
<FormCell>
<CellHeader>
<Label>QQ</Label>
</CellHeader>
<CellBody>
<Input type="tel" placeholder="Enter your qq#" />
</CellBody>
</FormCell>
<FormCell vcode>
<CellHeader>
<Label>Phone</Label>
</CellHeader>
<CellBody>
<Input type="tel" placeholder="Enter your cellphone #" />
</CellBody>
<CellFooter>
<Button type="vcode">Send</Button>
</CellFooter>
</FormCell>
<FormCell>
<CellHeader>
<Label>Date</Label>
</CellHeader>
<CellBody>
<Input type="date" defaultValue="" onChange={e => console.log(e.target.value)} />
</CellBody>
</FormCell>
<FormCell>
<CellHeader>
<Label>Datetime</Label>
</CellHeader>
<CellBody>
<Input type="datetime-local" defaultValue="" placeholder="" />
</CellBody>
</FormCell>
<FormCell vcode>
<CellHeader>
<Label>VCode</Label>
</CellHeader>
<CellBody>
<Input type="number" placeholder="Enter the code" />
</CellBody>
<CellFooter>
<VCode src={vcodeSrc} />
</CellFooter>
</FormCell>
</Form>
<CellsTips>Form Footer Tips</CellsTips>
<CellsTitle>Warnings</CellsTitle>
<Form>
<FormCell warn>
<CellHeader>
<Label>QQ</Label>
</CellHeader>
<CellBody>
<Input type="text" defaultValue="Oops..." />
</CellBody>
<CellFooter>
<Icon value="warn" />
</CellFooter>
</FormCell>
</Form>
<CellsTitle>Textarea</CellsTitle>
<Form>
<FormCell>
<CellBody>
<TextArea
placeholder="Enter your comments"
rows="3"
maxlength="200"
/>
</CellBody>
</FormCell>
</Form>
<CellsTitle>选择</CellsTitle>
<Form>
<FormCell select selectPos="before">
<CellHeader>
<Select>
<option value="1">+86</option>
<option value="2">+80</option>
<option value="3">+84</option>
<option value="4">+87</option>
</Select>
</CellHeader>
<CellBody>
<Input type="tel" placeholder="Enter Phone" />
</CellBody>
</FormCell>
</Form>
<CellsTitle>Selects</CellsTitle>
<Form>
<FormCell select>
<CellBody>
<Select defaultValue="2">
<option value="1">WeChat</option>
<option value="2">QQ</option>
<option value="3">Email</option>
</Select>
</CellBody>
</FormCell>
<FormCell select selectPos="after">
<CellHeader>
<Label>Country</Label>
</CellHeader>
<CellBody>
<Select data={[
{
value: 1,
label: 'China'
},
{
value: 2,
label: 'United States'
},
{
value: 3,
label: 'Germany'
}
]}
/>
</CellBody>
</FormCell>
</Form>
<Agreement>
&nbsp;&nbsp;I agree to the <a href="javascript:;">WeUI Terms and Privacy</a>
</Agreement>
<ButtonArea>
<Button
// button to display toptips
onClick={e => {
if (this.state.showToptips) return;
this.setState({ showToptips: !this.state.showToptips });
window.setTimeout(e => this.setState({ showToptips: !this.state.showToptips }), 2000);
}}
>
OK
</Button>
</ButtonArea>
<Toptips
type="warn"
show={this.state.showToptips}
>
Oops, something is wrong!
</Toptips>
</Page>
);
}
}
react-uidemo-v1/pages/list/index.js 0 → 100644
浏览文件 @ 05c2a4d9
import React from 'react';
import {
Cells,
CellsTitle,
Cell,
CellHeader,
CellBody,
CellFooter
} from '@huawei/react-weui';
import Page from '../../component/page';
import iconSrc from './images/icon.png';
const ListDemo = (props) => (
<Page className="cell" title="List" subTitle="列表">
<CellsTitle>List with description</CellsTitle>
<Cells>
<Cell>
<CellBody>
Title
</CellBody>
<CellFooter>
Description
</CellFooter>
</Cell>
</Cells>
<CellsTitle>List with Icon & Description</CellsTitle>
<Cells>
<Cell>
<CellHeader>
<img src={iconSrc} alt="" style={{ display: 'block', width: '20px', marginRight: '5px' }} />
</CellHeader>
<CellBody>
Title
</CellBody>
<CellFooter>
Description
</CellFooter>
</Cell>
<Cell>
<CellHeader>
<img src={iconSrc} alt="" style={{ display: 'block', width: '20px', marginRight: '5px' }} />
</CellHeader>
<CellBody>
Title
</CellBody>
<CellFooter>
Description
</CellFooter>
</Cell>
</Cells>
<CellsTitle>List with link</CellsTitle>
<Cells>
<Cell href="javascript:;" access>
<CellBody>
Title
</CellBody>
<CellFooter />
</Cell>
<Cell access>
<CellBody>
Title
</CellBody>
<CellFooter />
</Cell>
</Cells>
<CellsTitle>List with title & link</CellsTitle>
<Cells>
<Cell href="javascript:;" access>
<CellBody>
Title
</CellBody>
<CellFooter>
Description
</CellFooter>
</Cell>
<Cell access>
<CellBody>
Title
</CellBody>
<CellFooter>
Description
</CellFooter>
</Cell>
</Cells>
<CellsTitle>List with Icon & Link</CellsTitle>
<Cells>
<Cell href="javascript:;" access>
<CellHeader>
<img src={iconSrc} alt="" style={{ display: 'block', width: '20px', marginRight: '5px' }} />
</CellHeader>
<CellBody>
Title
</CellBody>
<CellFooter>
Description
</CellFooter>
</Cell>
<Cell access>
<CellHeader>
<img src={iconSrc} alt="" style={{ display: 'block', width: '20px', marginRight: '5px' }} />
</CellHeader>
<CellBody>
Title
</CellBody>
<CellFooter>
Description
</CellFooter>
</Cell>
</Cells>
</Page>
);
export default ListDemo;
react-uidemo-v1/pages/loadmore/index.js 0 → 100644
浏览文件 @ 05c2a4d9
import React from 'react';
import { LoadMore } from '@huawei/react-weui';
import Page from '../../component/page';
const LoadMoreDemo = (props) => (
<Page className="loadmore" title="Loadmore" subTitle="加载更多" spacing>
<LoadMore loading>Loading</LoadMore>
<LoadMore showLine>No Data</LoadMore>
<LoadMore showLine showDot />
</Page>
);
export default LoadMoreDemo;
react-uidemo-v1/pages/msg/fail.js 0 → 100644
浏览文件 @ 05c2a4d9
import React from 'react';
import { Msg, Footer, FooterLinks, FooterLink, FooterText } from '@huawei/react-weui';
import Page from '../../component/page';
import PropTypes from 'prop-types';
const FailFooter = () => (
<Footer>
<FooterLinks>
<FooterLink href="#">Footer Link</FooterLink>
</FooterLinks>
<FooterText>
Copyright © 2008-2016 weui.io
</FooterText>
</Footer>
);
const FailMsg = (props) => (
<Page className="msg_warn">
<Msg
type="warn"
title="Action Fail"
description="We fail to received your feedback"
buttons={[{
type: 'primary',
label: 'Ok',
onClick: props.history.goBack
}, {
type: 'default',
label: 'Cancel',
onClick: props.history.goBack
}]}
footer={FailFooter}
/>
</Page>
);
FailMsg.propTypes = {
history: PropTypes.object
};
export default FailMsg;
react-uidemo-v1/pages/msg/index.js 0 → 100644
浏览文件 @ 05c2a4d9
import React from 'react';
import { Link } from 'react-router-dom';
import { Button } from '@huawei/react-weui';
import Page from '../../component/page';
const MsgDemo = () => (
<Page className="msg" title="Msg" subTitle="提示页" spacing>
<Button component={Link} to="/msg/success">Success Message</Button>
<Button component={Link} to="/msg/fail">Warn Message</Button>
</Page>
);
export default MsgDemo;
react-uidemo-v1/pages/msg/success.js 0 → 100644
浏览文件 @ 05c2a4d9
import React from 'react';
import PropTypes from 'prop-types';
import { Msg, Footer, FooterLinks, FooterLink, FooterText } from '@huawei/react-weui';
import Page from '../../component/page';
const SuccessFooter = ()=>(
<Footer>
<FooterLinks>
<FooterLink href="#">Footer Link</FooterLink>
</FooterLinks>
<FooterText>
Copyright © 2008-2016 weui.io
</FooterText>
</Footer>
);
const SuccessMsg = (props) => (
<Page className="msg_success">
<Msg
type="success"
title="Action Success"
description="We have received your feedback"
buttons={[{
type: 'primary',
label: 'Ok',
onClick: props.history ? props.history.goBack : false
}, {
type: 'default',
label: 'Cancel',
onClick: props.history ? props.history.goBack : false
}]}
footer={SuccessFooter}
/>
</Page>
);
SuccessMsg.propTypes = {
history: PropTypes.object
};
export default SuccessMsg;
react-uidemo-v1/pages/page/index.js 0 → 100644
浏览文件 @ 05c2a4d9
import React from 'react';
import { Article, Page } from '@huawei/react-weui';
import srcArticle from '../article/pic_article.png';
const PageDemo = (props) => (
<Page transition infiniteLoader ptr={false}>
<Article>
<h1>Page Demo</h1>
<section>
<h2 className="title">H2 Title</h2>
<section>
<h3>H3 Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute
</p>
<p>
<img src={srcArticle} alt="" />
<img src={srcArticle} alt="" />
</p>
</section>
<section>
<h3>H3 Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</section>
</Article>
</Page>
);
export default PageDemo;
react-uidemo-v1/pages/panel/index.js 0 → 100644
浏览文件 @ 05c2a4d9
/**
* Created by n7best
*/
'use strict';
import React from 'react';
import {
Panel,
PanelHeader,
PanelBody,
PanelFooter,
MediaBox,
MediaBoxHeader,
MediaBoxBody,
MediaBoxTitle,
MediaBoxDescription,
MediaBoxInfo,
MediaBoxInfoMeta,
Cells,
Cell,
CellHeader,
CellBody,
CellFooter
} from '@huawei/react-weui';
import Page from '../../component/page';
const appMsgIcon = <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4YcfyR9x23Hw+/DY9dhm2WZG0kbT9NP0/PTL8sux7LFe115T1VM+zz7i+OIXxhes6qxr2mvA8MCe6J6M4oz6/frr+us5zjn2/fa67rqB4IF13XWn6ad83nxa1loqyirn+eccHxx4AAAC/klEQVRo3u2W2ZKiQBBF8wpCNSCyLwri7v//4bRIFVXoTBBB+DAReV5sG6lTXDITiGEYhmEYhmEYhmEYhmEY5v9i5fsZGRx9PyGDne8f6K9cfd+mKXe1yNG/0CcqYE86AkBMBh66f20deBc7wA/1WFiTwvSEpBMA2JJOBsSLxe/4QEEaJRrASP8EVF8Q74GbmevKg0saa0B8QbwBdjRyADYxIhqxAZ++IKYtciPXLQVG+imw+oo4Bu56rjEJ4GYsvPmKOAB+xlz7L5aevqUXuePWVhvWJ4eWiwUQ67mK51qPj4dFDMlRLBZTqF3SDvmr4BwtkECu5gHWPkmDfQh02WLxXuvbvC8ku8F57GsI5e0CmUwLz1kq3kD17R1In5816rGvQ5VMk5FEtIiWislTffuDpl/k/PzscdQsv8r9qWq4LRWX6tQYtTxvI3XyrwdyQxChXioOngH3dLgOFjk0all56XRi/wDFQrGQU3Os5t0wJu1GNtNKHdPqYaGYQuRDfbfDf26AGLYSyGS3ZAK4S8XuoAlxGSdYMKwqZKM9XJMtyqXi7HX/CiAZS6d8bSVUz5J36mEMFDTlAFQzxOT1dzLRljjB6+++ejFqka+mXIe6F59mw22OuOw1F4T6lg/9VjL1rLDoI9Xzl1MSYDNHnPQnt3D1EE7PrXjye/3pVpr1Z45hMUdcACc5NVQI0bOdS1WA0wuz73e7/5TNqBPhQXPEFGJNV2zNqWI7QKBd2Gn6AiBko02zuAOXeWIXjV0jNqdKegaE/kJQ6Bfs4aju04lMLkA2T5wBSYPKDGF3RKhFYEa6A1L1LG2yacmsaZ6YPOSAMKNsO+N5dNTfkc5Aqe26uxHpx7ZirvgCwJpWq/lmX1hA7LyabQ34tt5RiJKXSwQ+0KU0V5xg+hZrd4Bn1n4EID+WkQdgLfRNtvil9SPfwy+WQ7PFBWQz6dGWZBLkeJFXZGCfLUjCgGgqXo5TuSu3cugdcTv/HjqnBTEMwzAMwzAMwzAMwzAMw/zf/AFbXiOA6frlMAAAAABJRU5ErkJggg==" alt="" />;
const smallIcon = (
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII="
style={{
width: '20px',
marginRight: '5px',
display: 'block'
}}
alt=""
/>);
const CellMore = () => (
<Cell access link>
<CellBody>More</CellBody>
<CellFooter />
</Cell>
);
export default function PanelDemo() {
return (
<Page className="panel" title="Panel" subTitle="面板">
<Panel>
<PanelHeader>
Media with image
</PanelHeader>
<PanelBody>
<MediaBox type="appmsg" href="javascript:void(0);">
<MediaBoxHeader>{appMsgIcon}</MediaBoxHeader>
<MediaBoxBody>
<MediaBoxTitle>Media heading</MediaBoxTitle>
<MediaBoxDescription>
Cras sit amet nibh libero, in gravida nulla.
Nulla vel metus scelerisque ante sollicitudin commodo.
Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Fusce condimentum nunc ac nisi vulputate fringilla.
Donec lacinia congue felis in faucibus.
</MediaBoxDescription>
</MediaBoxBody>
</MediaBox>
<MediaBox type="appmsg" href="javascript:void(0);">
<MediaBoxHeader>{appMsgIcon}</MediaBoxHeader>
<MediaBoxBody>
<MediaBoxTitle>Media heading</MediaBoxTitle>
<MediaBoxDescription>
Cras sit amet nibh libero, in gravida nulla.
Nulla vel metus scelerisque ante sollicitudin commodo.
Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Fusce condimentum nunc ac nisi vulputate fringilla.
Donec lacinia congue felis in faucibus.
</MediaBoxDescription>
</MediaBoxBody>
</MediaBox>
</PanelBody>
<PanelFooter href="javascript:void(0);">
<CellMore />
</PanelFooter>
</Panel>
<Panel>
<PanelHeader>
Media with text
</PanelHeader>
<PanelBody>
<MediaBox type="text">
<MediaBoxTitle>Media heading</MediaBoxTitle>
<MediaBoxDescription>
Cras sit amet nibh libero, in gravida nulla.
Nulla vel metus scelerisque ante sollicitudin commodo.
Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Fusce condimentum nunc ac nisi vulputate fringilla.
Donec lacinia congue felis in faucibus.
</MediaBoxDescription>
</MediaBox>
<MediaBox type="text">
<MediaBoxTitle>Media heading</MediaBoxTitle>
<MediaBoxDescription>
Cras sit amet nibh libero, in gravida nulla.
Nulla vel metus scelerisque ante sollicitudin commodo.
Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Fusce condimentum nunc ac nisi vulputate fringilla.
Donec lacinia congue felis in faucibus.
</MediaBoxDescription>
</MediaBox>
</PanelBody>
<PanelFooter href="javascript:void(0);">
<CellMore />
</PanelFooter>
</Panel>
<Panel>
<PanelHeader>
Small Media
</PanelHeader>
<PanelBody>
<MediaBox type="small_appmsg">
<Cells>
<Cell href="javascript:;" access>
<CellHeader>{smallIcon}</CellHeader>
<CellBody>
<p>Media heading</p>
</CellBody>
<CellFooter />
</Cell>
<Cell href="javascript:;" access>
<CellHeader>{smallIcon}</CellHeader>
<CellBody>
<p>Media heading</p>
</CellBody>
<CellFooter />
</Cell>
</Cells>
</MediaBox>
</PanelBody>
</Panel>
<Panel>
<PanelHeader>
Text Media with addons
</PanelHeader>
<PanelBody>
<MediaBox type="text">
<MediaBoxTitle>Media heading</MediaBoxTitle>
<MediaBoxDescription>
Cras sit amet nibh libero, in gravida nulla.
Nulla vel metus scelerisque ante sollicitudin commodo.
Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Fusce condimentum nunc ac nisi vulputate fringilla.
Donec lacinia congue felis in faucibus.
</MediaBoxDescription>
<MediaBoxInfo>
<MediaBoxInfoMeta>WeUI</MediaBoxInfoMeta>
<MediaBoxInfoMeta>2016-8-8</MediaBoxInfoMeta>
<MediaBoxInfoMeta extra>More</MediaBoxInfoMeta>
</MediaBoxInfo>
</MediaBox>
</PanelBody>
</Panel>
</Page>
);
};
react-uidemo-v1/pages/picker/cnCity.js 0 → 100644
浏览文件 @ 05c2a4d9
此差异已折叠。
react-uidemo-v1/pages/picker/index.js 0 → 100644
浏览文件 @ 05c2a4d9
import React from 'react';
import { Picker, CityPicker, Form, FormCell, CellBody, CellHeader, Label, Input } from '@huawei/react-weui';
import Page from '../../component/page';
import cnCity from './cnCity';
class PickerDemo extends React.Component {
state = {
picker_show: false,
picker_value: '',
picker_group: [
{
items: [
{
label: 'Item1'
},
{
label: 'Item2 (Disabled)',
disabled: true
},
{
label: 'Item3'
},
{
label: 'Item4'
},
{
label: 'Item5'
}
]
}
],
city_show: false,
city_value: ''
};
hide() {
this.setState({
picker_show: false,
city_show: false
});
}
render() {
return (
<Page className="picker" title="Picker" subTitle="多列选择器" >
<Form>
<FormCell>
<CellHeader>
<Label>City</Label>
</CellHeader>
<CellBody>
<Input
type="text"
value={this.state.city_value}
onClick={e => {
e.preventDefault();
this.setState({ city_show: true });
}}
placeholder="Chose Your City"
readOnly
/>
</CellBody>
</FormCell>
</Form>
<CityPicker
data={cnCity}
onCancel={e => this.setState({ city_show: false })}
onChange={text => this.setState({ city_value: text, city_show: false })}
show={this.state.city_show}
/>
<Form>
<FormCell>
<CellHeader>
<Label>Direct Picker</Label>
</CellHeader>
<CellBody>
<Input
type="text"
onClick={e => {
e.preventDefault();
this.setState({ picker_show: true });
}}
placeholder="Pick a item"
value={this.state.picker_value}
readOnly
/>
</CellBody>
</FormCell>
</Form>
<Picker
onChange={selected => {
let value = '';
selected.forEach((s, i) => {
value = this.state.picker_group[i]['items'][s].label;
});
this.setState({
picker_value: value,
picker_show: false
});
}}
groups={this.state.picker_group}
show={this.state.picker_show}
onCancel={e => this.setState({ picker_show: false })}
/>
<br />
</Page>
);
}
};
export default PickerDemo;
react-uidemo-v1/pages/popup/index.js 0 → 100644
浏览文件 @ 05c2a4d9
import React from 'react';
import { Button, Popup, Grids, PopupHeader, Article } from '@huawei/react-weui';
import Page from '../../component/page';
import iconSrc from '../grid/icon_tabbar.png';
import srcArticle from '../article/pic_article.png';
const data = Array(6).fill({
icon: <img src={iconSrc} />,
label: 'Grid',
href: 'javascript:;'
});
class PopupDemo extends React.Component {
state = {
bottom_show: false,
fullpage_show: false
};
hide() {
this.setState({
bottom_show: false,
fullpage_show: false
});
}
render() {
return (
<Page className="popup" title="Popup" subTitle="pop pop pop it up" spacing>
<Button type="default" onClick={e => this.setState({ bottom_show: true })}>Popup</Button>
<Popup
show={this.state.bottom_show}
onRequestClose={e => this.setState({ bottom_show: false })}
>
<PopupHeader
left="Cancel"
right="Ok"
leftOnClick={e => this.setState({ bottom_show: false })}
rightOnClick={e => this.setState({ bottom_show: false })}
/>
<Grids data={data} />
</Popup>
<br />
<Button type="default" onClick={e => this.setState({ fullpage_show: true })}>Full pagePopup</Button>
<Popup
show={this.state.fullpage_show}
onRequestClose={e => this.setState({ fullpage_show: false })}
>
<div style={{ height: '100vh', overflow: 'scroll' }}>
<Article>
<h1>H1 Heading</h1>
<section>
<h2 className="title">H2 Title</h2>
<section>
<h3>H3 Heading</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute
</p>
<p>
<img src={srcArticle} alt />
<img src={srcArticle} alt />
</p>
</section>
<section>
<h3>H3 Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</section>
<Button onClick={e => this.setState({ fullpage_show: false })}>Close Popup</Button>
</Article>
</div>
</Popup>
</Page>
);
}
};
export default PopupDemo;
react-uidemo-v1/pages/preview/index.js 0 → 100644
浏览文件 @ 05c2a4d9
import React from 'react';
import Page from '../../component/page';
import { Preview, PreviewHeader, PreviewFooter, PreviewBody, PreviewItem, PreviewButton } from '@huawei/react-weui';
const PreviewDemo = (props) => (
<Page className="preview" title="Preview" subTitle="表单预览">
<Preview>
<PreviewHeader>
<PreviewItem label="Total" value="$49.99" />
</PreviewHeader>
<PreviewBody>
<PreviewItem label="Product" value="Name" />
<PreviewItem label="Description" value="Product Description" />
<PreviewItem label="Details" value="Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. " />
</PreviewBody>
<PreviewFooter>
<PreviewButton primary>Action</PreviewButton>
</PreviewFooter>
</Preview>
<br />
<Preview>
<PreviewHeader>
<PreviewItem label="Total" value="$49.99" />
</PreviewHeader>
<PreviewBody>
<PreviewItem label="Product" value="Name" />
<PreviewItem label="Description" value="Product Description" />
<PreviewItem label="Details" value="Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. " />
</PreviewBody>
<PreviewFooter>
<PreviewButton >Action</PreviewButton>
<PreviewButton primary>Action</PreviewButton>
</PreviewFooter>
</Preview>
</Page>
);
export default PreviewDemo;
react-uidemo-v1/pages/progress/index.js 0 → 100644
浏览文件 @ 05c2a4d9
/**
* Created by jf on 15/12/10.
*/
'use strict';
import React from 'react';
import { Button, Progress } from '@huawei/react-weui';
import Page from '../../component/page';
export default class ProgressDemo extends React.Component {
state = {
value: 0,
isUploading: false
};
componentWillUnmount() {
this.state.toastTimer && clearInterval(this.state.toastTimer);
}
start() {
if (this.state.isUploading) {
return;
}
this.state.isUploading = true;
this.upload();
}
pause() {
this.setState({ isUploading: false });
}
upload() {
if (!this.state.isUploading) {
return;
}
this.setState({ value: ++this.state.value % 100 });
this.state.toastTimer = setTimeout(this.upload.bind(this), 20);
}
render() {
return (
<Page className="progress" title="Progress" subTitle="进度条" spacing>
<Progress
value={this.state.isUploading ? this.state.value : 0}
onClick={this.pause.bind(this)}
/>
<br />
<Progress
value={this.state.isUploading ? this.state.value : 45}
onClick={this.pause.bind(this)}
/>
<br />
<Progress
value={this.state.isUploading ? this.state.value : 75}
onClick={this.pause.bind(this)}
/>
<br />
<Button onClick={this.start.bind(this)} disabled={this.state.isUploading}>上传</Button>
</Page>
);
}
};
react-uidemo-v1/pages/ptr/index.js 0 → 100644
浏览文件 @ 05c2a4d9
import React from 'react';
import {
PullToRefresh,
Cells,
CellsTitle,
Cell,
CellBody,
CellFooter
} from '@huawei/react-weui';
import Page from '../../component/page';
import momentLoader from './momentloader.svg';
import './ptr.less';
class PtrDemo extends React.Component {
constructor(props) {
super(props);
this.state = {
items: [1, 2, 3, 4, 5, 6, 7, 8, 9]
};
}
render() {
return (
<Page className="ptr" title="Pull To Refresh" subTitle="下拉刷新" >
<div style={{
height: '200px',
background: '#fff'
}}
>
<PullToRefresh
onRefresh={
resolve => {
// mock add item after 1s and then resolve
setTimeout(() => {
this.setState({
items: this.state.items.concat([this.state.items.length + 1])
}, () => resolve());
}, 1000);
}
}
>
<CellsTitle>List with link</CellsTitle>
<Cells>
{
this.state.items.map((item, i) => (
<Cell href="javascript:;" key={i} access>
<CellBody>
{item}
</CellBody>
<CellFooter />
</Cell>
))
}
</Cells>
</PullToRefresh>
</div>
<br />
<div style={{
height: '200px',
background: '#fff'
}}
>
<PullToRefresh
loaderDefaultIcon={
(progress) => {
const style = {
transform: `rotate(-${progress * 5}deg)`
};
return (
<div style={{ flex: 1, padding: '5px' }}>
<img src={momentLoader} width="40px" style={style} alt="" />
</div>
);
}
}
loaderLoadingIcon={
<div style={{
flex: 1,
padding: '5px'
}}
>
<img
src={momentLoader}
width="40px"
style={{
animation: '0.4s spin infinite linear'
}}
alt=""
/>
</div>
}
onRefresh={
resolve => {
// mock add item after 1s and then resolve
setTimeout(() => {
this.setState({
items: this.state.items.concat([this.state.items.length + 1])
}, () => resolve());
}, 1000);
}
}
>
<CellsTitle>Moment Loader Example</CellsTitle>
<Cells>
{
this.state.items.map((item, i) => (
<Cell href="javascript:;" key={i} access>
<CellBody>
{item}
</CellBody>
<CellFooter />
</Cell>
))
}
</Cells>
</PullToRefresh>
</div>
</Page>
);
}
}
export default PtrDemo;
react-uidemo-v1/pages/ptr/momentloader.svg 0 → 100644
浏览文件 @ 05c2a4d9
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="1024px" height="1024px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3.3 (12072) - http://www.bohemiancoding.com/sketch -->
<title>icon1024x1024</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="icon1024x1024" sketch:type="MSArtboardGroup">
<g id="Moments" sketch:type="MSLayerGroup" transform="translate(112.000000, 112.000000)">
<path d="M400,800 C620.9139,800 800,620.9139 800,400 C800,179.0861 620.9139,0 400,0 C179.0861,0 0,179.0861 0,400 C0,620.9139 179.0861,800 400,800 Z M400,510 C460.751322,510 510,460.751322 510,400 C510,339.248678 460.751322,290 400,290 C339.248678,290 290,339.248678 290,400 C290,460.751322 339.248678,510 400,510 Z" id="Oval-2" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
<path d="M72.3628534,572.073655 C112.721721,648.760734 179.215634,709.549773 260,742.596177 L260,742.596177 L260,384.436508 L72.3628534,572.073655 L72.3628534,572.073655 L72.3628534,572.073655 Z" id="Path" fill="#BAF15A" sketch:type="MSShapeGroup"></path>
<path d="M58.7540378,543.256063 C40.2345993,499.194301 30,450.79236 30,400 C30,361.69505 35.820816,324.749623 46.6261699,290 L312.010101,290 L58.7540378,543.256063 L58.7540378,543.256063 L58.7540378,543.256063 Z" id="Path" fill="#F0DC58" sketch:type="MSShapeGroup"></path>
<path d="M290,753.37383 C324.749623,764.179184 361.69505,770 400,770 C450.79236,770 499.194301,759.765401 543.256063,741.245962 L543.256063,741.245962 L290,487.989899 L290,753.37383 L290,753.37383 L290,753.37383 Z" id="Path" fill="#5EF15A" sketch:type="MSShapeGroup"></path>
<path d="M572.073655,727.637147 C648.760734,687.278279 709.549773,620.784366 742.596177,540 L384.436508,540 L572.073655,727.637147 L572.073655,727.637147 L572.073655,727.637147 Z" id="Path" fill="#5AE5F1" sketch:type="MSShapeGroup"></path>
<path d="M753.37383,510 C764.179184,475.250377 770,438.30495 770,400 C770,349.20764 759.765401,300.805699 741.245962,256.743937 L741.245962,256.743937 L487.989899,510 L753.37383,510 L753.37383,510 L753.37383,510 Z" id="Path" fill="#5A9EF1" sketch:type="MSShapeGroup"></path>
<path d="M727.637147,227.926345 C687.278279,151.239266 620.784366,90.4502275 540,57.4038234 L540,57.4038234 L540,415.563492 L727.637147,227.926345 L727.637147,227.926345 L727.637147,227.926345 Z" id="Path" fill="#6C5AF1" sketch:type="MSShapeGroup"></path>
<path d="M510,46.6261699 C475.250377,35.820816 438.30495,30 400,30 C349.20764,30 300.805699,40.2345993 256.743937,58.7540378 L256.743937,58.7540378 L510,312.010101 L510,46.6261699 L510,46.6261699 L510,46.6261699 Z" id="Path" fill="#F1765A" sketch:type="MSShapeGroup"></path>
<path d="M227.926345,72.3628534 C151.239266,112.721721 90.4502275,179.215634 57.4038234,260 L57.4038234,260 L415.563492,260 L227.926345,72.3628534 L227.926345,72.3628534 Z" id="Path" fill="#F1B35B" sketch:type="MSShapeGroup"></path>
</g>
</g>
</g>
</svg>
\ No newline at end of file
react-uidemo-v1/pages/ptr/ptr.less 0 → 100644
浏览文件 @ 05c2a4d9
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
react-uidemo-v1/pages/searchbar/index.js 0 → 100644
浏览文件 @ 05c2a4d9
import React from 'react';
import Page from '../../component/page';
import SampleData from './nameDB';
import {
// main component
SearchBar,
// for display data
Panel,
PanelHeader,
PanelBody,
PanelFooter,
MediaBox,
MediaBoxHeader,
MediaBoxBody,
MediaBoxTitle,
MediaBoxDescription,
Cell,
CellBody,
CellFooter
} from '@huawei/react-weui';
const appMsgIcon = (<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4YcfyR9x23Hw+/DY9dhm2WZG0kbT9NP0/PTL8sux7LFe115T1VM+zz7i+OIXxhes6qxr2mvA8MCe6J6M4oz6/frr+us5zjn2/fa67rqB4IF13XWn6ad83nxa1loqyirn+eccHxx4AAAC/klEQVRo3u2W2ZKiQBBF8wpCNSCyLwri7v//4bRIFVXoTBBB+DAReV5sG6lTXDITiGEYhmEYhmEYhmEYhmEY5v9i5fsZGRx9PyGDne8f6K9cfd+mKXe1yNG/0CcqYE86AkBMBh66f20deBc7wA/1WFiTwvSEpBMA2JJOBsSLxe/4QEEaJRrASP8EVF8Q74GbmevKg0saa0B8QbwBdjRyADYxIhqxAZ++IKYtciPXLQVG+imw+oo4Bu56rjEJ4GYsvPmKOAB+xlz7L5aevqUXuePWVhvWJ4eWiwUQ67mK51qPj4dFDMlRLBZTqF3SDvmr4BwtkECu5gHWPkmDfQh02WLxXuvbvC8ku8F57GsI5e0CmUwLz1kq3kD17R1In5816rGvQ5VMk5FEtIiWislTffuDpl/k/PzscdQsv8r9qWq4LRWX6tQYtTxvI3XyrwdyQxChXioOngH3dLgOFjk0all56XRi/wDFQrGQU3Os5t0wJu1GNtNKHdPqYaGYQuRDfbfDf26AGLYSyGS3ZAK4S8XuoAlxGSdYMKwqZKM9XJMtyqXi7HX/CiAZS6d8bSVUz5J36mEMFDTlAFQzxOT1dzLRljjB6+++ejFqka+mXIe6F59mw22OuOw1F4T6lg/9VjL1rLDoI9Xzl1MSYDNHnPQnt3D1EE7PrXjye/3pVpr1Z45hMUdcACc5NVQI0bOdS1WA0wuz73e7/5TNqBPhQXPEFGJNV2zNqWI7QKBd2Gn6AiBko02zuAOXeWIXjV0jNqdKegaE/kJQ6Bfs4aju04lMLkA2T5wBSYPKDGF3RKhFYEa6A1L1LG2yacmsaZ6YPOSAMKNsO+N5dNTfkc5Aqe26uxHpx7ZirvgCwJpWq/lmX1hA7LyabQ34tt5RiJKXSwQ+0KU0V5xg+hZrd4Bn1n4EID+WkQdgLfRNtvil9SPfwy+WQ7PFBWQz6dGWZBLkeJFXZGCfLUjCgGgqXo5TuSu3cugdcTv/HjqnBTEMwzAMwzAMwzAMwzAMw/zf/AFbXiOA6frlMAAAAABJRU5ErkJggg==" alt="" />);
const CellMore = () => (
<Cell access link>
<CellBody>More</CellBody>
<CellFooter />
</Cell>
);
export default class SearchBarDemo extends React.Component {
state = {
searchText: 'a',
results: []
};
handleChange(text, e) {
const keywords = [text];
let results = SampleData.filter(/./.test.bind(new RegExp(keywords.join('|'), 'i')));
if (results.length > 3) results = results.slice(0, 3);
this.setState({
results,
searchText: text
});
}
render() {
return (
<Page className="searchbar" title="SearchBar" subTitle="搜索栏">
<SearchBar
onChange={this.handleChange.bind(this)}
defaultValue={this.state.searchText}
placeholder="Female Name Search"
lang={{
cancel: 'Cancel'
}}
/>
<Panel style={{ display: this.state.searchText ? null : 'none', marginTop: 0 }}>
<PanelHeader>
Female Name Search
</PanelHeader>
<PanelBody>
{
this.state.results.length > 0 ?
this.state.results.map((item, i) => (
<MediaBox key={i} type="appmsg" href="javascript:void(0);">
<MediaBoxHeader>{appMsgIcon}</MediaBoxHeader>
<MediaBoxBody>
<MediaBoxTitle>{item}</MediaBoxTitle>
<MediaBoxDescription>
You may like this name.
</MediaBoxDescription>
</MediaBoxBody>
</MediaBox>
))
: <MediaBox> Can not find any！</MediaBox>
}
</PanelBody>
<PanelFooter href="javascript:void(0);">
<CellMore />
</PanelFooter>
</Panel>
</Page>
);
}
};
react-uidemo-v1/pages/searchbar/nameDB.js 0 → 100644
浏览文件 @ 05c2a4d9
此差异已折叠。
react-uidemo-v1/pages/slider/index.js 0 → 100644
浏览文件 @ 05c2a4d9
import React from 'react';
import { Slider, CellsTitle, Button, ButtonArea } from '@huawei/react-weui';
import Page from '../../component/page';
class SliderDemo extends React.Component {
state = {
controlValue: 50
};
render() {
return (
<Page className="slider" title="Slider" subTitle="滑块" spacing>
<CellsTitle>Basic Example</CellsTitle>
<Slider
min={1}
max={5}
step={1}
onChange={value => console.log(value)}
/>
<CellsTitle>Disabled Example</CellsTitle>
<Slider
disabled
onChange={value => console.log(value)}
/>
<CellsTitle>Controlled Example</CellsTitle>
<Slider
max={100}
step={2}
value={this.state.controlValue}
onChange={value => this.setState({ controlValue: value })}
/>
<ButtonArea>
<Button
size="small"
onClick={() => {
if (this.state.controlValue >= 10) {
this.setState({ controlValue: this.state.controlValue - 10 });
};
}}
>
- 10
</Button>
<Button
style={{ marginLeft: '10px' }}
size="small"
onClick={() => {
if (this.state.controlValue <= 90) {
this.setState({ controlValue: this.state.controlValue + 10 });
}
}}
>
+ 10
</Button>
</ButtonArea>
<br />
<CellsTitle>No snap & No show value</CellsTitle>
<Slider
snapToValue={false}
showValue={false}
/>
</Page>
);
}
};
export default SliderDemo;
react-uidemo-v1/pages/swiper/index.js 0 → 100644
浏览文件 @ 05c2a4d9
import React from 'react';
import {
Swiper,
CellsTitle,
Flex,
FlexItem
} from '@huawei/react-weui';
import Page from '../../component/page';
import imgSrc from '../article/pic_article.png';
import './index.less';
class SwiperDemo extends React.Component {
constructor(props) {
super(props);
this.state = {
demoIndex: 0
};
}
render() {
return (
<Page className="swiper" title="Swiper" subTitle="轮播" >
<CellsTitle>Horizontal - Current slide: {this.state.demoIndex}</CellsTitle>
<div style={{ border: '1px solid #eee', background: '#f8f8f8' }}>
<Swiper
height={150}
onChange={(prev, next) => this.setState({ demoIndex: next })}
>
<img src={imgSrc} alt="" role="presentation" />
<div style={{ padding: '5px', boxSizing: 'border-box', textAlign: 'center' }}>
<Flex>
<FlexItem>
<div className="placeholder">weui</div>
</FlexItem>
<FlexItem>
<div className="placeholder">weui</div>
</FlexItem>
<FlexItem>
<div className="placeholder">weui</div>
</FlexItem>
</Flex>
<Flex>
<FlexItem>
<div className="placeholder">weui</div>
</FlexItem>
<FlexItem>
<div className="placeholder">weui</div>
</FlexItem>
<FlexItem>
<div className="placeholder">weui</div>
</FlexItem>
</Flex>
</div>
<div style={{ background: '#39CCCC' }} />
<div style={{ background: '#0074D9' }} />
</Swiper>
</div>
<CellsTitle>Vertical</CellsTitle>
<div style={{ border: '1px solid #eee', background: '#f8f8f8', marginBottom: '30px' }}>
<Swiper
height={150}
direction="vertical"
>
<img src={imgSrc} alt="" role="presentation" />
<div style={{ padding: '5px', boxSizing: 'border-box', textAlign: 'center' }}>
<Flex>
<FlexItem>
<div className="placeholder">weui</div>
</FlexItem>
<FlexItem>
<div className="placeholder">weui</div>
</FlexItem>
<FlexItem>
<div className="placeholder">weui</div>
</FlexItem>
</Flex>
<Flex>
<FlexItem>
<div className="placeholder">weui</div>
</FlexItem>
<FlexItem>
<div className="placeholder">weui</div>
</FlexItem>
<FlexItem>
<div className="placeholder">weui</div>
</FlexItem>
</Flex>
</div>
<div style={{ background: '#39CCCC' }} />
<div style={{ background: '#0074D9' }} />
</Swiper>
</div>
</Page>
);
}
}
export default SwiperDemo;
react-uidemo-v1/pages/swiper/index.less 0 → 100644
浏览文件 @ 05c2a4d9
.react-weui-swiper__container {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.react-weui-swiper__wrapper {
overflow: hidden;
}
.react-weui-swiper__pagination {
position: absolute;
text-align: center;
transition: all 0.3s;
z-index: 10;
}
.react-weui-swiper__pagination-bullet {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 100%;
background: #eee;
}
.react-weui-swiper__pagination-bullet.active {
background: #1aad19;
}
.react-weui-swiper__container.react-weui-swiper__container-horizontal .react-weui-swiper__pagination {
bottom: 10px;
width: 100%;
}
.react-weui-swiper__container.react-weui-swiper__container-horizontal .react-weui-swiper__pagination-bullet {
margin: 0 5px;
}
.react-weui-swiper__container.react-weui-swiper__container-vertical .react-weui-swiper__pagination {
top: 50%;
right: 10px;
transform: translate3d(0, -50%, 0);
}
.react-weui-swiper__container.react-weui-swiper__container-vertical .react-weui-swiper__pagination-bullet {
display: block;
margin: 5px 0;
}
react-uidemo-v1/pages/tab/navbar.js 0 → 100644
浏览文件 @ 05c2a4d9
import React from 'react';
import {
Tab,
TabBody,
NavBar,
NavBarItem,
Article
} from '@huawei/react-weui';
export default class NavBarDemo extends React.Component {
state = {
tab: 0
};
render() {
return (
<Tab>
<NavBar>
<NavBarItem
active={this.state.tab === 0}
onClick={e => this.setState({ tab: 0 })}
>
Nav1
</NavBarItem>
<NavBarItem
active={this.state.tab === 1}
onClick={e => this.setState({ tab: 1 })}
>
Nav2
</NavBarItem>
<NavBarItem
active={this.state.tab === 2}
onClick={e => this.setState({ tab: 2 })}
>Nav3
</NavBarItem>
</NavBar>
<TabBody>
<Article style={{ display: this.state.tab === 0 ? null : 'none' }}>
<h1>Page 1</h1>
<section>
<h2 className="title">Heading</h2>
<section>
<h3>1.1 Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute
</p>
</section>
</section>
</Article>
<Article style={{ display: this.state.tab === 1 ? null : 'none' }}>
<h1>Page 2</h1>
<section>
<h2 className="title">Heading</h2>
<section>
<h3>2.1 Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute
</p>
</section>
<section>
<h3>2.2 Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</section>
</Article>
<Article style={{ display: this.state.tab === 2 ? null : 'none' }}>
<h1>Page 3</h1>
<section>
<h2 className="title">Heading</h2>
<section>
<h3>3.1 Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute
</p>
</section>
<section>
<h3>3.2 Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</section>
</Article>
</TabBody>
</Tab>
);
}
};
react-uidemo-v1/pages/tab/navbar_auto.js 0 → 100644
浏览文件 @ 05c2a4d9
import React from 'react';
import { Tab, NavBarItem, Article } from '@huawei/react-weui';
export default function NavBarAutoDemo() {
return (
<Tab type="navbar">
<NavBarItem label="Nav1">
<Article>
<h1>Page 1</h1>
<section>
<h2 className="title">Heading</h2>
<section>
<h3>1.1 Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute
</p>
</section>
</section>
</Article>
</NavBarItem>
<NavBarItem label="Nav2">
<Article>
<h1>Page 2</h1>
<section>
<h2 className="title">Heading</h2>
<section>
<h3>2.1 Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute
</p>
</section>
</section>
</Article>
</NavBarItem>
<NavBarItem label="Nav3">
<Article>
<h1>Page 3</h1>
<section>
<h2 className="title">Heading</h2>
<section>
<h3>3.1 Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute
</p>
</section>
</section>
</Article>
</NavBarItem>
</Tab>
);
};
react-uidemo-v1/pages/tab/tabbar.js 0 → 100644
浏览文件 @ 05c2a4d9
import React from 'react';
import {
Tab,
TabBody,
TabBar,
TabBarItem,
TabBarIcon,
TabBarLabel,
Article
} from '@huawei/react-weui';
import IconButton from '../home/images/icon_nav_button.png';
import IconMsg from '../home/images/icon_nav_msg.png';
import IconArticle from '../home/images/icon_nav_article.png';
import IconCell from '../home/images/icon_nav_cell.png';
export default class TabBarDemo extends React.Component {
state = {
tab: 0
};
render() {
return (
<Tab>
<TabBody>
<Article style={{ display: this.state.tab === 0 ? null : 'none' }}>
<h1>Page 1</h1>
<section>
<h2 className="title">Heading</h2>
<section>
<h3>1.1 Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute
</p>
</section>
</section>
</Article>
<Article style={{ display: this.state.tab === 1 ? null : 'none' }}>
<h1>Page 2</h1>
<section>
<h2 className="title">Heading</h2>
<section>
<h3>2.1 Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute
</p>
</section>
</section>
</Article>
<Article style={{ display: this.state.tab === 2 ? null : 'none' }}>
<h1>Page 3</h1>
<section>
<h2 className="title">Heading</h2>
<section>
<h3>3.1 Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute
</p>
</section>
</section>
</Article>
<Article style={{ display: this.state.tab === 3 ? null : 'none' }}>
<h1>Page 4</h1>
<section>
<h2 className="title">Heading</h2>
<section>
<h3>4.1 Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute
</p>
</section>
</section>
</Article>
</TabBody>
<TabBar>
<TabBarItem
active={this.state.tab === 0}
onClick={e => this.setState({ tab: 0 })}
icon={<img src={IconButton} alt="" />}
label="Tab1"
/>
<TabBarItem active={this.state.tab === 1} onClick={e => this.setState({ tab: 1 })}>
<TabBarIcon>
<img src={IconMsg} alt="" />
</TabBarIcon>
<TabBarLabel>Tab2</TabBarLabel>
</TabBarItem>
<TabBarItem
active={this.state.tab === 2}
onClick={e => this.setState({ tab: 2 })}
icon={<img src={IconArticle} alt="" />}
label="Tab3"
/>
<TabBarItem
active={this.state.tab === 3}
onClick={e => this.setState({ tab: 3 })}
icon={<img src={IconCell} alt="" />}
label="Tab4"
/>
</TabBar>
</Tab>
);
}
};
react-uidemo-v1/pages/tab/tabbar_auto.js 0 → 100644
浏览文件 @ 05c2a4d9
import React from 'react';
import { Tab, TabBarItem, Article } from '@huawei/react-weui';
import IconButton from '../home/images/icon_nav_button.png';
import IconMsg from '../home/images/icon_nav_msg.png';
import IconArticle from '../home/images/icon_nav_article.png';
export default function TabBarAutoDemo() {
return (
<Tab type="tabbar">
<TabBarItem icon={<img src={IconButton} alt="" />} label="Tab1">
<Article>
<h1>Page 1</h1>
<section>
<h2 className="title">Heading</h2>
<section>
<h3>1.1 Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute
</p>
</section>
</section>
</Article>
</TabBarItem>
<TabBarItem icon={<img src={IconMsg} alt="" />} label="Tab2">
<Article>
<h1>Page 2</h1>
<section>
<h2 className="title">Heading</h2>
<section>
<h3>2.1 Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute
</p>
</section>
</section>
</Article>
</TabBarItem>
<TabBarItem icon={<img src={IconArticle} />} label="Tab3">
<Article>
<h1>Page 3</h1>
<section>
<h2 className="title">Heading</h2>
<section>
<h3>3.1 Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute
</p>
</section>
</section>
</Article>
</TabBarItem>
</Tab>
);
};
react-uidemo-v1/pages/toast/index.js 0 → 100644
浏览文件 @ 05c2a4d9
import React from 'react';
import { Button, Toast } from '@huawei/react-weui';
import Page from '../../component/page';
export default class ToastDemo extends React.Component {
state = {
showToast: false,
showLoading: false,
toastTimer: null,
loadingTimer: null
};
componentWillUnmount() {
this.state.toastTimer && clearTimeout(this.state.toastTimer);
this.state.loadingTimer && clearTimeout(this.state.loadingTimer);
}
showToast() {
this.setState({ showToast: true });
this.state.toastTimer = setTimeout(() => {
this.setState({ showToast: false });
}, 2000);
}
showLoading() {
this.setState({ showLoading: true });
this.state.loadingTimer = setTimeout(() => {
this.setState({ showLoading: false });
}, 2000);
}
render() {
return (
<Page className="toast" title="Toast" subTitle="弹出式提示" spacing>
<Button onClick={this.showToast.bind(this)} type="default">Success Toast</Button>
<Button onClick={this.showLoading.bind(this)} type="default">Loading Toast</Button>
<Toast icon="success-no-circle" show={this.state.showToast}>Done</Toast>
<Toast icon="loading" show={this.state.showLoading}>Loading...</Toast>
</Page>
);
}
};
react-uidemo-v1/pages/toptips/index.js 0 → 100644
浏览文件 @ 05c2a4d9
import React from 'react';
import { Button, Toptips } from '@huawei/react-weui';
import Page from '../../component/page';
class ToptipsDemo extends React.Component {
state = {
showWarn: false,
showSuccess: false,
showInfo: false,
warnTimer: null,
successTimer: null,
infoTimer: null
};
componentWillUnmount() {
this.state.warnTimer && clearTimeout(this.state.warnTimer);
this.state.successTimer && clearTimeout(this.state.successTimer);
this.state.infoTimer && clearTimeout(this.state.infoTimer);
}
showWarn() {
this.setState({ showWarn: true });
this.state.warnTimer = setTimeout(() => {
this.setState({ showWarn: false });
}, 2000);
}
showSuccess() {
this.setState({ showSuccess: true });
this.state.successTimer = setTimeout(() => {
this.setState({ showSuccess: false });
}, 2000);
}
showInfo() {
this.setState({ showInfo: true });
this.state.infoTimer = setTimeout(() => {
this.setState({ showInfo: false });
}, 2000);
}
render() {
return (
<Page className="toptips" title="Toptips" subTitle="弹出式提示" spacing>
<Button onClick={this.showWarn.bind(this)} type="default">Warn Toptip</Button>
<Button onClick={this.showSuccess.bind(this)} type="default">Primary Toptip</Button>
<Button onClick={this.showInfo.bind(this)} type="default">Info Toptip</Button>
<Toptips type="warn" show={this.state.showWarn}> Oops, something is wrong! </Toptips>
<Toptips type="primary" show={this.state.showSuccess}> Success submited! </Toptips>
<Toptips type="info" show={this.state.showInfo}> Thanks for coming! </Toptips>
</Page>
);
}
};
export default ToptipsDemo;
react-uidemo-v1/pages/uploader/index.js 0 → 100644
浏览文件 @ 05c2a4d9
import React, { Component } from 'react';
import Page from '../../component/page';
import { Gallery, GalleryDelete, Uploader, Form, Cell, CellBody } from '@huawei/react-weui';
import photoSrc from './photo.png';
import thumbSrc from './thumb.png';
class UploaderDemo extends Component {
constructor(props) {
super(props);
this.state = {
gallery: false,
demoFiles: [
{
url: thumbSrc
},
{
url: photoSrc
},
{
url: thumbSrc
},
{
url: photoSrc,
error: true
},
{
url: thumbSrc,
status: '50%'
}
]
};
}
renderGallery() {
if (!this.state.gallery) return false;
const srcs = this.state.demoFiles.map(file => file.url);
return (
<Gallery
src={srcs}
show
defaultIndex={this.state.gallery.id}
onClick={e => {
// avoid click background item
e.preventDefault();
e.stopPropagation();
this.setState({ gallery: false });
}}
>
<GalleryDelete onClick={(e, id) => {
this.setState({
demoFiles: this.state.demoFiles.filter((e, i) => i !== id),
gallery: this.state.demoFiles.length <= 1
});
}}
/>
</Gallery>
);
}
render() {
return (
<Page className="cell" title="Uploader" subTitle="上传组件，一般配合Gallery使用">
{this.renderGallery()}
<Form>
<Cell>
<CellBody>
<Uploader
title="Image Uploader"
maxCount={6}
files={this.state.demoFiles}
onError={msg => alert(msg)}
onChange={(file, e) => {
const newFiles = [...this.state.demoFiles, { url: file.data }];
this.setState({
demoFiles: newFiles
});
}}
onFileClick={
(e, file, i) => {
console.log('file click', file, i);
this.setState({
gallery: {
url: file.url,
id: i
}
});
}
}
lang={{
maxError: maxCount => `Max ${maxCount} images allow`
}}
/>
</CellBody>
</Cell>
</Form>
</Page>
);
}
}
export default UploaderDemo;
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论