import React, { PropTypes } from 'react'
import CSSModules from 'react-css-modules'
import classNames from 'classnames'
import styles from '../../styles/Players.css'
const Player = ({ isAnswering, name, score }) => (
<div styleName={classNames({
'player': true,
'is-answering': isAnswering
})}>
<p styleName="name">{name}</p>
<p styleName="score">{score ? score : 0}</p>
</div>
)
Player.propTypes = {
isAnswering: PropTypes.bool.isRequired,
name: PropTypes.string.isRequired,
score: PropTypes.number
}
export default CSSModules(Player, styles, { allowMultiple: true })
).isRequired,
};
// mapStateToProps :: {State} -> {Props}
const mapStateToProps = state => ({
isLoading: state.landing.isLoading,
name: state.landing.name,
isShowingModal: state.landing.isShowingModal,
contributors: state.landing.contributors,
});
// mapDispatchToProps :: Dispatch -> {Action}
const mapDispatchToProps = dispatch => ({
actions: bindActionCreators(
LandingActionCreators,
dispatch,
),
});
const Container = cssModules(LandingContainer, styles);
const FormContainer = reduxForm({
form: 'Welcome',
fields: formFields,
})(Container);
export default connect(
mapStateToProps,
mapDispatchToProps,
)(FormContainer);
}
}
render() {
return (
<div ref="player" styleName="player" tabIndex="1">
<div ref="playground" styleName="playground">
{
this.state.loading &&
<div styleName="loading" className="ui loading"></div>
}
<img ref="play_image"/>
</div>
<div styleName='controls'>
<span styleName="direction">
<i onClick={(e)=>this.previous(e)} className="icon left_arrow"></i>
</span>
<span styleName="count">
<input value={this.state.currentIndex+1} onChange={(e)=>this.jump(e)} />/{this.state.imagesCount}
</span>
<span styleName="direction">
<i onClick={(e)=>this.next(e)} className="icon right_arrow"></i>
</span>
</div>
</div>
);
}
}
const PlayerCss = CSSModules( Player, css, { allowMultiple: true } );
export default PlayerCss ;
<nav styleName="navbar">
<div styleName="logo-container">
<h1 styleName="logo">LOGO</h1>
<span styleName="sub-heading">The unofficial news source for the Phoenix Framework.</span>
</div>
<div styleName="filter-container">
<input placeholder="Search" />
<select name="Filter">
<option value="1">Option</option>
</select>
</div>
<div styleName="login-container">
<a href="#"
onClick={ this.openLoginSignupModal.bind(this, "login")}>
Login</a>
<button
onClick={ this.openLoginSignupModal.bind(this, "signup")}>
Signup</button>
</div>
<LoginSignupModal
isOpen={ this.state.loginSignupModalIsOpen }
onRequestClose={ this.closeLoginSignupModal}
changeLoginSignupForm={ this.changeLoginSignupForm }
type={ this.state.loginSignupModalType }/>
</nav>
)
}
}
export default CSSModules(Navbar, styles)
styleName="input"
type="text"
id="signup-email" />
</div>
<div styleName="input-group">
<label htmlFor="signup-password">Password</label>
<input
onChange={this.handleChange.bind(this, "password")}
styleName="input"
type="password"
id="signup-password" />
</div>
</div>
<Button
onClick={this.submit.bind(this)}
type="primary">
Submit
</Button>
</div>
)
}
}
const mapStateToProps = state => {
return {
user: state.user
}
}
export default connect(mapStateToProps)(CSSModules(FormLogin, style))
import Store from '../../components/Store/Store.js'
import UserStats from '../../components/UserStats/UserStats.js'
class UserProfile extends React.Component {
render() {
return (
<div styleName="profile-container">
<div styleName="profile-info">
<h1>Profile</h1>
<div styleName="points-container">
<h2 styleName="perm-points">46</h2>
<h2 styleName="temp-points">85</h2>
</div>
<h3>Name:</h3>
<h3>Age:</h3>
<h3>Grade:</h3>
<h3>Rank:</h3>
<h3>Quest days remaining:</h3>
</div>
</div>
)}
}
export default CSSModules(UserProfile, styles, {allowMultiple: true});
import React, { PropTypes } from 'react';
import CSSModules from 'react-css-modules';
import styles from '../Card/index.css';
const CardItem = ({ children, ...props }) => {
return(
<div {...props}>
{children}
</div>
);
};
CardItem.propTypes = {
/** @type {node} Content(s) of the CardItem */
children: PropTypes.node
};
export default CSSModules(CardItem, styles);
import React, { PropTypes } from 'react';
import styles from './index.module.scss';
import cssModules from 'react-css-modules';
const LogoImage = ({
imageSource,
}) => (
<div className={styles.logoImageContainer}>
<img
src={imageSource}
alt="Udacity Logo"
className={styles.logoImage}
id="udacity-alumni-logo"
/>
</div>
);
LogoImage.propTypes = {
imageSource: PropTypes.string.isRequired,
};
export default cssModules(LogoImage, styles);
<div id="loader__progress" class="loader__progress"></div>
<div id="loader__info" class="loader__info">Loading 0%</div>
</div>
</section>
<section>
<div styleName="shiwImg-div">
<span styleName="showImg-span">
<img styleName="showImg-img" src={showImg}/>
</span>
</div>
</section>
</div>
</div>
</td>
<td>
<Button onClick={this.onPreviousClick} disabled={this.state.disablePreviousBtn}>上一张</Button>
<Button onClick={this.onNextClick} disabled={this.state.disableNextBtn}>下一张</Button>
</td>
</tr>
</tbody>
</table>
);
}
})
const option = {
'allowMultiple': true
};
export default CSSModules(PreviewConentPage, styles, option);
import CSSModules from 'react-css-modules'
import styles from './styles.css'
class FacebookLoginBtn extends React.Component {
render() {
const {sendLoginRequest} = this.props
return (
<div>
<button styleName="login-btn-fb" onClick={sendLoginRequest}>
Login with Facebook
</button>
</div>
)
}
}
FacebookLoginBtn.propTypes = {
sendLoginRequest: React.PropTypes.func.isRequired
}
export default CSSModules(FacebookLoginBtn, styles)
user: state.app.user,
authToken: state.app.authToken,
isLoading: state.cmsEditorContainer.isLoading,
isEditing: getIsEditing(state.cmsEditorContainer),
isMobile: state.app.isMobile,
});
// mapDispatchToProps :: Dispatch -> {Action}
const mapDispatchToProps = (dispatch) => ({
actions: bindActionCreators(
CmsEditorActionCreators,
dispatch
),
});
const Container = cssModules(CmsEditorContainer, styles);
const loadTagsQuery = gql`
query loadPastTags {
tags {
id
slug
tag
}
}
`;
const ContainerWithTags = graphql(loadTagsQuery, {
props: ({ data: { tags, loading } }) => ({
loadingTags: loading,
tags,
import React, { Component, PropTypes } from 'react';
import cssModules from 'react-css-modules';
import { observer } from 'mobx-react';
import styles from './styles.less';
import TablesList from 'containers/TablesList';
import TableCreateForm from 'containers/TableCreateForm';
const Tables = () => (
<div styleName="tables">
<div styleName="list">
<TablesList />
</div>
<div styleName="form">
<TableCreateForm />
</div>
</div>
);
export default cssModules(observer(Tables), styles);
isEditing={props.isEditing}
isMultiFile={props.isMultiFile}
depth={props.depth}
initialCollapse={props.initialCollapse}
directory={props.directory}
files={props.files} />
</div>
);
}
FilesSection.defaultProps = {
depth: 0,
showLabelIf: true,
};
FilesSection.propTypes = {
depth: PropTypes.number.isRequired,
directory: PropTypes.string.isRequired,
files: PropTypes.array.isRequired,
infoHash: PropTypes.string.isRequired,
initialCollapse: PropTypes.bool.isRequired,
isCrossSeeding: PropTypes.bool.isRequired,
isEditing: PropTypes.bool.isRequired,
isMultiFile: PropTypes.bool.isRequired,
label: PropTypes.string.isRequired,
showLabelIf: PropTypes.bool.isRequired,
visibleCount: PropTypes.bool.isRequired,
};
export default CSSModules(FilesSection, styles);
import React, {Component} from 'react';
import styles from './InputText.css';
import CSSModules from 'react-css-modules';
class InputText extends Component {
constructor(props, context) {
super(props, context);
Object.defineProperty(this, 'value', {
get: function () {
return this.refs.input.value;
},
enumerable: false,
configurable: false
});
}
render() {
return (
<input ref="input" type="text" {...this.props} styleName="inputBox"/>
);
}
}
InputText.defaultProps = {
error: true,
errorText: "Something is wrong"
};
InputText.propTypes = {};
export default CSSModules(InputText, styles);
}
}
Layer.Header = Header;
Layer.Surface = Surface;
Layer.propTypes = {
className: string,
snapToGrid: bool,
cellSize: number,
id: string.isRequired,
name: string.isRequired,
description: string.isRequired,
type: string.isRequired,
attributes: object,
filters: object.isRequired,
filterTypes: object.isRequired,
editable: bool,
disabled: bool,
locked: bool,
single: bool,
actions: shape({
layer: layerActionsShape.isRequired,
filter: filterActionsShape.isRequired,
}),
};
export default css(Layer, styles, { allowMultiple: true });
var className = 'image-btn_play_stop';
var hint = '点击停止播放';
} else if (audio_id) {
var onClick = this.play_audio;
var className = 'image-btn_play_start';
var hint = '点击开始播放';
} else {
var onClick = this.get_audio;
var className = 'image-btn_tape_start';
var hint = '点击开始录音';
}
return (
<div styleName='root'>
<div styleName='progress' style={{width:''+ progress + '%'}}></div>
<div styleName='record-line'>
<div styleName='length'>
{ d > 0 && d + '"' }
</div>
<div styleName='recorder-btn' className={className} onClick={onClick} />
<div styleName='delete-btn' className={'image-btn_play_again' + ((!audio_id || !!playing) ? '_disabled' : '')}
onClick={this.clear}
disabled={!audio_id || !!playing}/>
</div>
<div styleName='hint'>{hint}</div>
</div>
);
}
}
export default CSSModules(Recorder, styles);
render() {
let authors = this.props.authors ? this.props.authors.DefAuthors || [] : null;
return (
<div className={this.props.className}>
{authors && authors.length === 0 &&
<i>No authors found</i>
}
{authors && authors.length > 0 &&
<ol styleName={`list${this.props.horizontal ? "-horizontal" : ""}`}>
{this.props.horizontal && <PencilIcon title="Authors" styleName="pencil-icon" />}
{authors.map((a, i) => (
<li key={i} styleName={`person${this.props.horizontal ? "-horizontal" : ""}`}>
<div styleName="badge-wrapper">
<span styleName="badge">{Math.round(100 * a.BytesProportion) || "< 1"}%</span>
</div>
<Avatar styleName="avatar" size="tiny" img={a.AvatarURL} />
{a.Email}
<TimeAgo time={a.LastCommitDate} styleName="timestamp" />
</li>
))}
</ol>
}
</div>
);
}
}
export default CSSModules(AuthorList, styles);
)
}
Overstock.handlePrint = () => {
const { webContents } = BrowserWindow.getAllWindows()[0]
webContents.printToPDF({
marginsType: 1,
pageSize: {
height: 101600,
width: 57150
},
printBackground: true
}, (printToPDFError, data) => {
if (printToPDFError) throw printToPDFError
const tempPath = temp.path({
prefix: 'boh-labels__master-pack__',
suffix: '.pdf'
})
fs.writeFile(tempPath, data, (writeFileError) => {
if (writeFileError) throw writeFileError
shell.openItem(tempPath)
})
})
}
export default CSSModules(Overstock, styles)
import { List } from 'erlyeditor';
import styles from './styles';
export const Lists = () => (
<div styleName='list-demo'>
<List style={{ width: 600 }} selectable>
<List.Item filled>{`one`}</List.Item>
<List.Item filled>{`one`}</List.Item>
<List.Item filled>{`one`}</List.Item>
<List.Subheader>{`subheader`}</List.Subheader>
<List.Item disabled>{`two`}</List.Item>
<List.Item filled>{`one`}</List.Item>
<List.Item disabled>{`two`}</List.Item>
<List.Divider />
<List.Item selectable>{`three`}</List.Item>
<List.Item>
<List>
<List.Item filled>{`hey`}</List.Item>
<List.Divider inset />
<List.Item filled>{`hey`}</List.Item>
<List.Item disabled>{`I am nested`}</List.Item>
<List.Item selectable>{`askdjfsakldjf`}</List.Item>
</List>
</List.Item>
</List>
</div>
);
export default css(Lists, styles);
import React from 'react'
import {Link} from 'react-router'
import CSSModules from 'react-css-modules'
import styles from './Search.css'
function Search ({itemCount, label, onChange}) {
function _onChangeHandler (e) {
onChange(e.target.value)
}
return <div styleName='search-container'>
<input type='search' styleName='search' placeholder='Type to search' onChange={_onChangeHandler}/>
<span>{itemCount} {label}</span>
</div>
}
export default CSSModules(Search, styles)
children,
className,
} = props;
const cleanProps = { ...props };
delete cleanProps.styles;
if (children) {
return (
<div {...cleanProps} styleName="wrapper" className={`${className} card-title`}>
<span styleName="title-text" className="card-title-text">
{children}
</span>
</div>
);
}
return null;
};
Title.propTypes = {
children: PropTypes.any.isRequired,
className: PropTypes.string,
};
Title.defaultProps = {
className: '',
};
export default cssModules(Title, styles);
onClick={onIncreasePlaybackRate}
/>
}
{onNext &&
<TooltipButton filled disabled
className={styles.button}
tooltipTop
tooltipText='next'
delay={1000}
icon='skip_next'
onClick={onNext}
/>
}
</div>
);
};
Playback.propTypes = {
className: string,
error: bool,
paused: bool,
playbackRate: number,
onTogglePlay: func.isRequired,
onPrevious: func,
onNext: func,
onDecreasePlaybackRate: func,
onIncreasePlaybackRate: func
};
export default css(Playback, styles, { allowMultiple: true });
'grommetux-box grommetux-box--direction-row ' +
'grommetux-box--responsive grommetux-box--pad-none ' +
'grommetux-menu grommetux-menu--row grommetux-menu--inline'
}
>
<SocialShare
a11yTitle="Go to Facebook to Share this website"
type="facebook"
link="http://www.ryancollins.io"
text="RyanCollins.io"
/>
<SocialShare
a11yTitle="Go to Twitter to Share this website"
type="twitter"
link="http://www.ryancollins.io"
text="RyanCollins.io"
/>
<SocialShare
a11yTitle="Go to Linkedin to Share this website"
type="linkedin"
link="http://www.ryancollins.io"
title="Restaurant Reviewer"
text="RyanCollins.io"
/>
</nav>
</Box>
</Footer>
);
export default cssModules(AppFooter, styles);
errorStyle={inputStyles.errorStyle}
/>
<br />
<TextField
fullWidth={true}
ref="telephone"
type="tel"
hintText="手机号码"
floatingLabelText="请填写您的手机号码"
errorStyle={inputStyles.errorStyle}
/>
<br />
</Dialog>
</div>
);
}
}
const CSSCustomerDialog = CSSModules(CustomerDialog, styles);
const mapStateToProps = (state) => {
return {
open: state.customerDialogReducer.open,
car_name: state.customerDialogReducer.car_name
};
};
const ConnectedCustomerDialog = connect(mapStateToProps)(CSSCustomerDialog);
export default ConnectedCustomerDialog;
import React,{Component} from 'react'
import {Grid , Row , Col,Panel} from 'react-bootstrap'
import CSSModules from 'react-css-modules';
import styles from '../public/stylesheets/MusicStyle.css'
import { Link } from 'react-router'
class AppIndex extends Component{
render(){
const img = require('../public/images/button.png')
// const img_bg = require('../public/images/bg.jpg')
// document.body.style.backgroundImage = "url("+img_bg+")"
return(
<Grid fluid>
<Row className="show-grid">
<Col md={2} mdOffset={5} >
<Link to="/music">
<div styleName='image-play'>
<img src={img}/>
</div>
</Link>
</Col>
</Row>
</Grid>
)
}
}
export default CSSModules(AppIndex, styles);
};
// mapStateToProps :: {State} -> {Props}
const mapStateToProps = (state) => ({
selectedTag: state.archiveContainer.tag,
});
// mapDispatchToProps :: Dispatch -> {Action}
const mapDispatchToProps = (dispatch) => ({
actions: bindActionCreators(
ArticleArchiveActionCreators,
dispatch
),
});
const Container = cssModules(ArticleArchive, styles);
const loadArticleFeed = gql`
query articleFeed($tag: String!) {
articles(tag: $tag) {
tags {
id
tag
}
id
title
created_at
updated_at
content
status
spotlighted
<i className="icon-m-sort-asc"></i>
</Button>
</ButtonGroup>
<Button type="primary" styleName="newProjectBtn">
<NavLink to="/projects/new">创建新项目</NavLink>
</Button>
</div>
</div>
<div className="projects-box">
{this.state.projectList.map((item) =>
<ProjectItem project={item} key={item.id} />
)}
</div>
<Pagination
hideOnSinglePage
total={this.state.count}
showTotal={total => `共 ${total} 条`}
pageSize={this.state.params.limit}
current={this.state.currentpage}
defaultCurrent={this.state.currentpage}
onChange={val => this.setParams('curPage', val)}
/>
{this.state.loading && <Spin size="large" className="loading-box" tip="正在加载..." />}
{this.state.noData && !this.state.loading && <div className="nodata-box">暂无数据</div>}
</div>
)
}
}
export default resetUnMounted(withRouter(CSSModules(Projects, styles)))
import React from 'react'
import CSSModules from 'react-css-modules'
import styles from 'assets/styles/counter.styl'
function Counter(props) {
return (
<div className="container">
<div className="section">
<h3 className="section-heading">{ 'Counter' }</h3>
<p className="section-description">
{ 'Current value: ' }
<span styleName="counter-value">{ props.value }</span>
</p>
<button className="button button-primary" onClick={ props.handleIncrement }>
{ 'Increment' }
</button>
<button className="button" onClick={ props.handleDecrement }>
{ 'Decrement' }
</button>
</div>
</div>
)
}
export default CSSModules(Counter, styles)
const handle = (
<div
styleName={draggerStyleNames}
style={{
width: `${drag.width}px`,
height: `${drag.height}px`,
lineHeight: `${drag.height}px`,
transform: `translate(${drag.mouseDelta.x}px, ${drag.mouseDelta.y}px)`,
top: `${drag.originPosition.top}px`,
left: `${drag.originPosition.left}px`
}}
>
{dragTargetEvent ? dragTargetEvent.get('title') : 'Event'}
</div>
);
// Absolute position weeks b/c sometimes things load
// in the wrong order and element-resize-events screws up
return (
<div styleName='weeks' ref='weeks' style={{position: 'absolute'}}>
{weeks}
{handle}
</div>
);
}
}
AllDay.propTypes = propTypes;
export default CSSModules(AllDay, styles, {allowMultiple: true});
import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './oval.scss';
class Oval extends React.Component {
render() {
return (
<div styleName='foobar'>
{this.props.children}
</div>
);
}
}
export default CSSModules(Oval, styles);