/
index.js
76 lines (65 loc) · 1.76 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
import React, {Component, cloneElement} from 'react';
import PropTypes from 'prop-types';
import autobind from 'autobind-decorator';
import {observer} from 'mobx-react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import inject from '../../inject';
import {createStyle} from '../../utils/style-utils';
import style from './style';
/**
* A components for rendering any value, expects a path and a render function. the render function receives the value as an argument.
*/
@inject(props => {
return {
value: props.path
};
})
@withStyles(style)
@observer
export default class WithValue extends Component{
static propTypes = {
/**
* the path of the data in the database.
*/
path: PropTypes.string.isRequired,
/**
* will render the edit overlay in alternate colors to support different color schemes.
*/
lightOverlay: PropTypes.bool,
/**
* will be called when the data is available, expects it to return a renderable value. (value) => ReactNode
*/
render: PropTypes.func
};
static defaultProps = {
lightOverlay: false
};
@autobind
handleClick(e, originalHandler){
const {path, orkan} = this.props;
if(orkan.isEditMode()){
orkan.setActivePath(path);
e.preventDefault();
e.stopPropagation();
}else{
originalHandler && originalHandler(e);
}
}
render(){
const {className, value, render, orkan, lightOverlay} = this.props;
if(!value){
return null;
}
const renderedValue = render(value);
if(!renderedValue){
return null;
}
const s = createStyle(style, className, renderedValue.props.className, {
root: {
editMode: orkan.isEditMode(),
lightOverlay
}
});
return cloneElement(renderedValue, {className: s.root, onClick: e => this.handleClick(e, renderedValue.props.onClick)});
}
}