* @param {object} item the item clicked
*/
_lineClick(item) {
if (this.props.onLineClick) {
this.props.onLineClick(item);
}
},
/**
* Render the component
* @return {HTML} the rendered component
*/
render() {
const {style} = this.props;
return (
<div className='advanced-search' data-focus='advanced-search'>
<div data-focus='facet-container' style={style.facets}>
{this._renderFacetBox()}
</div>
<div data-focus='result-container' style={style.results}>
{this._renderListSummary()}
{this._renderActionBar()}
{this._renderResults()}
</div>
{this.props.hasBackToTop && <this.props.backToTopComponent/>}
</div>
);
}
};
module.exports = builder(AdvancedSearch);
* @return {object} default props
*/
getDefaultProps() {
return {
drops: 'down', // possible values: up, down
showDropdowns: true,
locale: defaultLocale,
value: moment()
};
},
componentWillMount(){
console.warn('FocusComponents 0.7.0: this component is deprecated, please use FocusComponents.components.input.Date');
},
/** @inheritdoc */
propTypes: {
drops: types('string'),
error: types('string'),
formatter: types('func'),
locale: types('object').isRequired,
name: types('string').isRequired,
placeHolder: types('string'),
value: types('object').isRequired
},
/**
* Get initial state
* @return {object} initial state
*/
getInitialState() {
const {value} = this.props;
const momentValue = moment(value);
const rawDate = momentValue.isValid ? value : null;
* Tag name.
*/
displayName: 'input-radio',
/** @inheritdoc */
getDefaultProps() {
return {
value: false
};
},
/**
* Properties validation.
* @type {Object}
*/
propTypes: {
label: types('string').isRequired,
name: types('string'),
value: types('bool'),
onChange: types('func')
},
/** @inheritdoc */
componentWillReceiveProps(newProps) {
this.setState({isChecked: newProps.value});
},
/** @inheritDoc */
getInitialState() {
const {value} = this.props;
return {
isChecked: isUndefined(value) ? false : value
};
},
const {builder, types} = require('focus-core').component;
const i18nBehaviour = require('../common/i18n/mixin');
const Button = require('../common/button/action').component;
const messageMixin = {
/** @inheritedDoc */
getDefaultProps(){
return {
type: 'info',
style: {}
};
},
/** @inheritedDoc */
propTypes: {
title: types('string'),
content: types('string'),
type: types('string'),
ttl: types('number'),
style: types('object')
},
/** @inheritedDoc */
componentDidMount(){
if(this.props.ttl){
setTimeout(()=>{
this._handleTimeToLeave();
}, this.props.ttl);
}
},
/** @inheritedDoc */
mixins: [i18nBehaviour],
/**
* Time to leave handler.
*/
displayName: 'SelectCheckbox',
/** @inheritdoc */
getDefaultProps() {
return {
values: [], // all values
value: [], // selected values list
valueKey: 'value', // key for the displayed value
labelKey: 'label' // key for the displayed label
};
},
/** @inheritdoc */
propTypes() {
return {
values: types('array'),
value: types('array'),
valueKey: types('string'),
labelKey: types('string'),
onChange: types('func')
};
},
/** @inheritdoc */
getInitialState() {
return {
selectedValues: this.props.value
};
},
/** @inheritdoc */
completed = 0;
}
if (100 < completed) {
completed = 100;
}
const bar = ReactDOM.findDOMNode(this.refs.bar);
if (bar) {
bar.MaterialProgress.setProgress(completed);
bar.MaterialProgress.setBuffer(100);
}
},
/**
* Render the component
* @return {Function} the rendered component
*/
render() {
let completed = +this.props.completed;
if (0 > completed) {
completed = 0;
}
if (100 < completed) {
completed = 100;
}
return (
<div className='mdl-progress mdl-js-progress' data-focus='progress-bar' ref='bar' />
);
}
};
module.exports = builder(Progress);
})
},
/**
* build the list props.
* @return {object} - the list property.
*/
_buildListProps(){
let {props, state} = this;
let {dataList, totalCount} = state;
dataList = dataList || [];
return assign({}, props, state, {
data: dataList,
fetchNextPage: this._action.load,
hasMoreData: dataList.length < totalCount
});
},
/** @inheritdoc */
componentWillMount(){
this._registerStoreNode();
this._buildAction();
this._action.load();
},
/** @inheritdoc */
render(){
let listProps = this._buildListProps();
return <this.props.ListComponent {...listProps} />;
}
};
module.exports = builder(listPageMixin);
* Mixin used in order to create a block.
* @type {Object}
*/
const blockMixin = {
mixins: [i18nBehaviour, styleBehaviour],
/** @inheritdoc */
getDefaultProps() {
return {
actionsPosition: 'top'
};
},
/** @inheritedDoc */
propTypes: {
actions: types('func'),
actionsPosition: oneOf(['both', 'bottom', 'top']),
title: types('string')
},
/**
* Header of theblock function.
* @return {[type]} [description]
*/
heading() {
if(this.props.title) {
return this.i18n(this.props.title);
}
},
componentWillMount(){
console.warn('FocusComponents 0.7.0: this component is deprecated, please use FocusComponents.components.Panel');
},
// Dependencies
const {builder, types} = require('focus-core').component;
const i18nBehaviour = require('../i18n/mixin');
const styleBehaviour = require('../../mixin/stylable');
/**
* Label mixin for form.
* @type {Object}
*/
const labelMixin = {
mixins: [i18nBehaviour, styleBehaviour],
/** @inheritdoc */
propTypes: {
name: types('string').isRequired,
text: types('string')
},
/** @inheritdoc */
render() {
const {name, text, style} = this.props;
const content = text || name;
return (
<label className={style.className} data-focus="label" htmlFor={name}>
{this.i18n(content)}
</label>
);
}
};
module.exports = builder(labelMixin);
// Dependencies
const React = require('react');
const {types} = require('focus-core').component;
const {debounce} = require('lodash/function');
// Components
const LiveEditor = require('./live-editor');
const LivePreview = require('./live-preview');
const LiveExample = React.createClass({
displayName: 'LiveExample',
propTypes: {
component: types('object')
},
style: {
name: {
fontSize: '3em',
marginLeft: '-5px',
marginBottom: '0'
},
version: {
fontSize: '1em',
marginTop: '-18px',
marginBottom: '0',
color: 'grey'
},
keyword: {
margin: '5px'
},
description: {
* Render all the errors.
* @return {object} - The jsx errors.
*/
_renderErrors(){
const {errors, isErrorsVisible} = this.state;
const {numberDisplayed} = this.props;
const errorLength = errors.length;
return (
<div data-focus='error-center'>
<div data-focus='error-counter'>
<i className="fa fa-times-circle"></i>{errorLength}
</div>
<div data-focus='error-actions'>
<i className='fa fa-refresh' onClick={()=>{window.location.reload(); }}></i>
<i className={`fa fa-arrow-circle-o-${isErrorsVisible ? 'up' : 'down'}`} onClick={this._toggleVisible}></i>
<i className='fa fa-trash-o' onClick={()=>{this.setState({errors: []}); }}></i>
</div>
<ul data-focus='error-stack'>
{isErrorsVisible ? errors.slice(errorLength - numberDisplayed, errorLength).map((err)=>{ const e = REACT_NOT_COMPONENT_ERROR === err ? REACT_NOT_COMPONENT_MESSAGE : err; return <li>{e}</li>; }) : null}
</ul>
</div>
);
},
/** @inheriteddoc */
render() {
return 0 < this.state.errors.length ? this._renderErrors() : null;
}
};
module.exports = builder(errorCenter);