Closed
Description
Say I have the following component that has a Prop that can only be one of three values from an object.
/* @flow */
import React from 'react';
const CONTENTS = {
'apple': '🍎',
'banana': '🍌',
'orange': '🍊',
};
export type Props = {
/**
* The thing that is inside the box.
*/
innerContents: $Keys<typeof CONTENTS>,
};
/**
* A box contains one fruit out of many fruit options.
*/
function Box({innerContents}: Props) {
return (
<i>{CONTENTS[innerContents]}</i>
);
}
export default Box;
I'm using $Keys
, as described in the Flowtype documentation so that I don't have to redefine the map/"enum" in both JS and Flowtype.
However, after I run react-docgen
, it seems to understand $Keys
, but doesn't get the valid values for the object.
{
"description": "A box contains one fruit out of many fruit options.",
"methods": [],
"props": {
"innerContents": {
"flowType": {
"name": "$Keys",
"elements": [
{
"name": "unknown"
}
],
"raw": "$Keys<typeof CONTENTS>"
},
"required": true,
"description": "The thing that is inside the box."
}
}
}
It will just return a single element, called "unknown". Looking at this code, this may be intentional, but I'm unsure. I'd expect the elements
key to contain an object for apple
, banana
and orange
in the array.