Property definition with reusable propTypes

[SoftHai]

Hi,

I'm trying the following: I have some propTypes I want to define central and reuse it in many components. There fore I have create a file "baseTypes"

import PropTypes from 'prop-types'

export const baseTypes = {
    alignSelf: PropTypes.oneOf(['start', 'center', 'end', 'stretch'])
}

Now I want to use this definition in many other components like this:

import * as React from 'react'
import PropTypes from 'prop-types'
import { baseTypes } from './propTypeDefinitions'

class Box extends React.Component {

    static propTypes =  {
        align: PropTypes.oneOf([
            'start',
            'center',
            'end',
            'baseline',
            'stretch',
          ]),
          alignContent: PropTypes.oneOf([
            'start',
            'center',
            'end',
            'between',
            'around',
            'stretch',
          ]),
          alignSelf: baseTypes.alignSelf
    }

    render() {
       //...
    }
}

How ever, only the 2 in the file defined properties are shown in the props panel. alignSelf (defined in another file) is not show.

How are you reading the props definitions? By parsing the source code or by using Component.propTypes? Looks for my like toe first one is true.

There reason why I have this issue is, that I using a UI Framework. They already have created all this propTypes definitions and I just want to reuse it instead of copy and paste it to my source code. But for any reason it don't works as expected.

[ipselon]

@SoftHai,

Here is how you can reuse PropTypes:

export const baseTypes = {
    alignSelf: PropTypes.oneOf(['start', 'center', 'end', 'stretch'])
}

    static propTypes =  {
        align: PropTypes.oneOf([
            'start',
            'center',
            'end',
            'baseline',
            'stretch',
          ]),
          alignContent: PropTypes.oneOf([
            'start',
            'center',
            'end',
            'between',
            'around',
            'stretch',
          ]),
          additionalAlign: PropTypes.shape(baseTypes),
    }