Skip to content

Instantly share code, notes, and snippets.

@danielpetrov

danielpetrov/AddTickerCell - named

Created June 23, 2017 10:49
Show Gist options
  • Save danielpetrov/fcb086090b27a1195fa1cc72f4c3fe78 to your computer and use it in GitHub Desktop.
Save danielpetrov/fcb086090b27a1195fa1cc72f4c3fe78 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
AddTickerCell - named
import { addTickerForm } from '../../higherOrderComponents/addTickerForm'
console.log(addTickerForm)
Raw
addTickerForm - default and regular function
import React, { PureComponent as Component } from 'react'
import toggleForm from './toggleForm'
import { bool, func } from 'prop-types'
import { ADD_TICKER_FORM } from '../constants/form'
import { ModalContainer } from '../containers'
import AddTickerFormContainer from '../containers/AddTickerFormContainer'
export default function(DecoratedComponent) {
class AddTickerForm extends Component {
render() {
const { isAddTickerFormVisible, toggleAddTickerFormVisibility } = this.props
return (
<div>
<DecoratedComponent
{...this.props}
isAddTickerFormVisible={isAddTickerFormVisible}
toggleAddTickerFormVisibility={toggleAddTickerFormVisibility}
/>
{
isAddTickerFormVisible ?
<ModalContainer
formName={ADD_TICKER_FORM}
closeModal={toggleAddTickerFormVisibility}
>
<AddTickerFormContainer closeModal={toggleAddTickerFormVisibility} />
</ModalContainer>
: null
}
</div>
)
}
}
AddTickerForm.displayName = `AddTickerForm(${DecoratedComponent.displayName})`
AddTickerForm.propTypes = {
isAddTickerFormVisible: bool.isRequired,
toggleAddTickerFormVisibility: func.isRequired
}
return toggleForm(ADD_TICKER_FORM, AddTickerForm)
}
Raw
addTickerForm - named
import React, { PureComponent as Component } from 'react'
import toggleForm from './toggleForm'
import { bool, func } from 'prop-types'
import { ADD_TICKER_FORM } from '../constants/form'
import { ModalContainer } from '../containers'
import AddTickerFormContainer from '../containers/AddTickerFormContainer'
export const addTickerForm = DecoratedComponent => {
class AddTickerForm extends Component {
render() {
const { isAddTickerFormVisible, toggleAddTickerFormVisibility } = this.props
return (
<div>
<DecoratedComponent
{...this.props}
isAddTickerFormVisible={isAddTickerFormVisible}
toggleAddTickerFormVisibility={toggleAddTickerFormVisibility}
/>
{
isAddTickerFormVisible ?
<ModalContainer
formName={ADD_TICKER_FORM}
closeModal={toggleAddTickerFormVisibility}
>
<AddTickerFormContainer closeModal={toggleAddTickerFormVisibility} />
</ModalContainer>
: null
}
</div>
)
}
}
AddTickerForm.displayName = `AddTickerForm(${DecoratedComponent.displayName})`
AddTickerForm.propTypes = {
isAddTickerFormVisible: bool.isRequired,
toggleAddTickerFormVisibility: func.isRequired
}
return toggleForm(ADD_TICKER_FORM, AddTickerForm)
}
Raw
AddVehicleFieldFormatter - named
import { addTickerForm } from '../../higherOrderComponents/addTickerForm'
console.log(addTickerForm)
Raw
default export 2
import React, { PureComponent as Component } from 'react'
import toggleForm from './toggleForm'
import { bool, func } from 'prop-types'
import { ADD_TICKER_FORM } from '../constants/form'
import { ModalContainer } from '../containers'
import AddTickerFormContainer from '../containers/AddTickerFormContainer'
const addTickerForm = DecoratedComponent => {
class AddTickerForm extends Component {
render() {
const { isAddTickerFormVisible, toggleAddTickerFormVisibility } = this.props
return (
<div>
<DecoratedComponent
{...this.props}
isAddTickerFormVisible={isAddTickerFormVisible}
toggleAddTickerFormVisibility={toggleAddTickerFormVisibility}
/>
{
isAddTickerFormVisible ?
<ModalContainer
formName={ADD_TICKER_FORM}
closeModal={toggleAddTickerFormVisibility}
>
<AddTickerFormContainer closeModal={toggleAddTickerFormVisibility} />
</ModalContainer>
: null
}
</div>
)
}
}
AddTickerForm.displayName = `AddTickerForm(${DecoratedComponent.displayName})`
AddTickerForm.propTypes = {
isAddTickerFormVisible: bool.isRequired,
toggleAddTickerFormVisibility: func.isRequired
}
return toggleForm(ADD_TICKER_FORM, AddTickerForm)
}
export default addTickerForm
Raw
importing default export 1
2. If I use default export 1 (with regular function) I get what I need on both files
AddVehicleFieldFormatter.js?2f21:56 function addTickerForm(DecoratedComponent) {
var AddTickerForm = _wrapComponent('AddTickerForm')(function (_Component) {
_inherits(AddTickerForm, _Component);
function AddTickerForm() {
…
AddTickerCell.js?85e2:62 function addTickerForm(DecoratedComponent) {
var AddTickerForm = _wrapComponent('AddTickerForm')(function (_Component) {
_inherits(AddTickerForm, _Component);
function AddTickerForm() {
…
But if I call the function in one of the files....
console.log(addTickerForm, addTickerForm(_AddVehicleFieldFormatter))
I get this error:
addTickerForm.js?08e9:6 Uncaught TypeError: _CUsersDanieDesktopWorkModelManangmentNode_modulesReactTransformCatchErrorsLibIndexJs2 is not a function
at eval (eval at <anonymous> (bundle.js:3644), <anonymous>:74:95)
at addTickerForm (eval at <anonymous> (bundle.js:3644), <anonymous>:79:56)
at Object.eval (eval at <anonymous> (bundle.js:8963), <anonymous>:151:66)
at eval (eval at <anonymous> (bundle.js:8963), <anonymous>:169:30)
at Object.<anonymous> (bundle.js:8963)
at __webpack_require__ (bundle.js:660)
at fn (bundle.js:86)
at eval (eval at <anonymous> (bundle.js:1066), <anonymous>:88:33)
at Object.<anonymous> (bundle.js:1066)
at __webpack_require__ (bundle.js:660)
Raw
importing default export 2
if I use default export with arrow function I get again undefined in one of the files
Raw
importing named export
1. If I use named export in one of the files I get undefined. It is not related to files but in the order of bundeling.
From the second file I import the addTickerForm I get undefined
// console output:
AddVehicleFieldFormatter.js?2f21:56 undefined
AddTickerCell.js?85e2:62 function addTickerForm(DecoratedComponent) {
var AddTickerForm = _wrapComponent('AddTickerForm')(function (_Component) {
_inherits(AddTickerForm, _Component);
function AddTickerForm() {
…
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment