import React, { Component, PropTypes } from 'react';
import { classNames } from 'utils';
import { BaseComponent } from 'components/base';
import './ListItem.scss';
class ListItem extends Component {
static propTypes = {
children: PropTypes.node,
className: PropTypes.string,
onClick: PropTypes.func
};
render() {
const { children, className, onClick } = this.props;
return (
<div
className={classNames(
'list-item',
className
)}
onClick={onClick}>
{children}
</div>
);
}
}
export default BaseComponent(ListItem);
'input-wrapper',
className
)}>
<div className="label">
<div className="title">
{label}<Value renderWhen={isValid} value={displayValue} />
</div>
<div
className={classNames(
'validation',
{
valid: isValid,
invalid: !isValid
}
)}>
<Icon name="save" renderWhen={isValid} />
<Icon name="cancel" renderWhen={!isValid} />
</div>
</div>
<div className="content">
{children}
</div>
</div>
);
}
}
export default BaseComponent(InputWrapper);
<span> : </span>
<EditableText
className="team-score score-b"
isEditing={isEditing}
text={teamBScore}
maxLength="2"
onChange={this.onGameScoreBChanged} />
</div>
<div className="details" title="Pitch">
<Link to={`/pitches/${pitchId}`}>
{pitchName}
</Link>
</div>
<div className="details" title="Game date">
{date}
</div>
<div className="details" title="Game time">
{time}
</div>
</div>
);
}
}
export default BaseComponent(GameScore);
{
label: 'Email',
displayValue: email,
isValid: NewUserModel.isEmailValid(newUser),
component: (
<EditableText
isEditing={true}
text={email}
onChange={onEmailChange} />
)
},
{
label: 'Role',
displayValue: ROLE_STRING[role],
isValid: NewUserModel.isRoleValid(newUser),
component: (
<ValuePicker
className="role-picker"
options={roleOptions}
value={role}
onChange={onRoleChange} />
)
}
]} />
</div>
);
}
}
export default BaseComponent(NewUser);
static propTypes = {
className: PropTypes.string,
placement: PropTypes.oneOf(['fixed', 'relative']),
show: PropTypes.bool.isRequired
};
static defaultProps = {
placement: 'relative'
};
render() {
const { className, placement, show } = this.props;
return (
<div
className={classNames(
'spinner',
placement,
{
visible: show
},
className
)}>
<Icon name="load" className="spinner-image" />
</div>
);
}
}
export default BaseComponent(Spinner);
message
}
} = this.props;
return (
<div
className={classNames(
'error',
className
)}>
<div className="header">
<div className="title ellipsis">
{title}
</div>
<Button className="dismiss" onClick={this.onErrorAcknowledge}>
<span className="icon">×</span>
<span className="label">Dismiss</span>
</Button>
</div>
<div className="message">
{message}
</div>
</div>
);
}
}
export default BaseComponent(Error);
import React, { Component, PropTypes } from 'react';
import { PITCH_TYPE_STRING } from 'constants';
import { BaseComponent } from 'components/base';
import { Icon } from 'components/ui';
class PitchType extends Component {
static propTypes = {
type: PropTypes.string
};
render() {
const { type } = this.props;
return (
<div className="ellipsis" title="Pitch type">
<Icon name="layers" />
<a href="http://www.worldsoccershop.com/buyers-guide-boots.html">
{PITCH_TYPE_STRING[type]}
</a>
</div>
);
}
}
export default BaseComponent(PitchType);
import React, { Component, PropTypes } from 'react';
import { randomInteger } from 'utils';
import { BaseComponent } from 'components/base';
class BodyBackground extends Component {
static propTypes = {
images: PropTypes.array.isRequired
};
componentWillMount = () => {
const { images } = this.props;
this.changeBackground(images);
};
changeBackground = (images, imageId = randomInteger(images.length)) => {
const body = document.getElementsByTagName('body')[0];
const { [imageId]: imageUrl } = images;
body.style.backgroundImage = `url(${imageUrl})`;
};
render() {
return (
<span />
);
}
}
export default BaseComponent(BodyBackground);
if(!hasBeenFullyLoaded) {
const { isLoading: wasLoading } = this.props;
const { isLoading } = newProps;
const hasFinishedLoading = wasLoading && !isLoading;
this.setState({ hasBeenFullyLoaded: hasFinishedLoading });
}
};
render() {
const { childProps, ComponentClass, isLoading } = this.props;
const { hasBeenFullyLoaded } = this.state;
const displayLoadingState = !hasBeenFullyLoaded && isLoading;
return (
<div
className={classNames(
'loadable-content',
{
'is-loading': displayLoadingState
}
)}>
{!displayLoadingState && (
<ComponentClass {...childProps} />
)}
</div>
);
}
}
export default BaseComponent(LoadableContent);
component: (
<ValuePicker
options={PITCH_TYPE_OPTIONS}
value={type}
onChange={onTypeChange} />
)
},
{
label: 'Capacity',
displayValue: capacity,
isValid: NewPitchModel.isCapacityValid(newPitch),
component: (
<RangePicker
min={minNumberOfPlayers}
minOptions={_.range(PITCH_MIN_CAPACITY, maxNumberOfPlayers + 1, 2)}
max={maxNumberOfPlayers}
maxOptions={_.range(minNumberOfPlayers, PITCH_MAX_CAPACITY + 1, 2)}
orientation="vertical"
separator="-"
onMinChange={onMinNumberOfPlayersChange}
onMaxChange={onMaxNumberOfPlayersChange} />
)
}
]} />
</div>
);
}
}
export default BaseComponent(NewPitch);
const areAllInputsValid = visibleInputs.every(({ isValid }) => isValid);
return (
<div
className={classNames(
'form',
className
)}>
<div className="inputs">
{visibleInputs.map(({ label, displayValue, isValid, component }, index) => (
<InputWrapper
key={index}
label={label}
displayValue={displayValue}
isValid={isValid}>
{component}
</InputWrapper>
))}
</div>
<SubmitButton
renderWhen={Boolean(onSubmit)}
isDisabled={!areAllInputsValid}
onClick={onSubmit} />
</div>
);
}
}
export default BaseComponent(Form);
import React, { Component, PropTypes } from 'react';
import { classNames } from 'utils';
import { BaseComponent } from 'components/base';
import './ButtonsPanel.scss';
class ButtonsPanel extends Component {
static propTypes = {
children: PropTypes.node.isRequired,
className: PropTypes.string
};
render() {
const { children, className } = this.props;
return (
<div
className={classNames(
'buttons-panel',
className
)}>
{children}
</div>
);
}
}
export default BaseComponent(ButtonsPanel);
label: PropTypes.string,
value: PropTypes.oneOfType([
PropTypes.number,
PropTypes.string
]),
onClick: PropTypes.func.isRequired
};
onClick = () => {
const { value, onClick } = this.props;
onClick(value);
}
render() {
const { className, label } = this.props;
return (
<div
onClick={this.onClick}
className={classNames(
'value-picker-option',
className
)}>
{label}
</div>
);
}
}
export default BaseComponent(ValuePickerOption);