Skip to content

Instantly share code, notes, and snippets.

View gevgeny's full-sized avatar
🚀
I may be slow to respond.

Eugene Gluhotorenko gevgeny

🚀
I may be slow to respond.
View GitHub Profile
@gevgeny
gevgeny / IncrementBox.jsx
Last active October 23, 2016 09:34
One more try to implement react-redux app with fractal architecture to localize ui specific state
import { connectUi } from './ui'
import reducer, { increment } from './reducer'
export default const compose(
connectUi(
{ reducer, initialState: { value: 0 } },
({ value }) => ({ value }),
(dispatch, { uiKey }) => ({
onIncrement: item => dispatch(increment(uiKey))
})
const Button = styled.button`
color: coral;
padding: 0.25rem 1rem;
border: solid 2px coral;
border-radius: 3px;
margin: 0.5rem;
font-size: 1rem;
`;
const Button = styled('button')([
'color: coral;' +
'padding: 0.25rem 1rem;' +
'border: solid 2px coral;' +
'border-radius: 3px;' +
'margin: 0.5rem;' +
'font-size: 1rem;'
]);
const myStyled = (TargetComponent) => ([style]) => class extends React.Component {
componentDidMount() {
this.element.setAttribute('style', style);
}
render() {
return (
<TargetComponent {...this.props} ref={element => this.element = element } />
);
}
const myStyled = (TargetComponent) => (strs, ...exprs) => class extends React.Component {
interpolateStyle() {
const style = exprs.reduce((result, expr, index) => {
const isFunc = typeof expr === 'function';
const value = isFunc ? expr(this.props) : expr;
return result + value + strs[index + 1];
}, strs[0]);
this.element.setAttribute('style', style);
StyledComponent.componentId = componentId;
StyledComponent.target = TargetComponent;
function observable(target: any, propertyKey: string) {
console.log(`decorate ${propertyKey}`);
}
class State {
@observable foo;
}
function observable(target, propertyKey) {
console.log(`decorate ${propertyKey}`);
}
class State {
}
observable(State.prototype, "foo");
function observable(target: any, propertyKey: string): PropertyDecorator {
console.log(`decorate ${propertyKey}`);
// This is property descriptor
return {
get() {},
set() {},
};
}
function observable(target, propertyKey) {
console.log(`decorate ${propertyKey}`);
return {
get() {},
set() {},
};
}
class State {