How to use the react-desc.PropTypes.func function in react-desc

export var doc = function doc(MaskedInput) {
  var DocumentedMaskedInput = describe(MaskedInput).availableAt(getAvailableAtBadge('MaskedInput')).description('An input field with formalized syntax.').usage("import { MaskedInput } from 'grommet';\n").intrinsicElement('input');
  DocumentedMaskedInput.propTypes = {
    id: PropTypes.string.description('The id attribute of the input.'),
    name: PropTypes.string.description('The name attribute of the input.'),
    onChange: PropTypes.func.description("Function that will be called when the user types or pastes text."),
    onBlur: PropTypes.func.description("Function that will be called when the user leaves the field."),
    mask: PropTypes.arrayOf(PropTypes.shape({
      length: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),
      fixed: PropTypes.string,
      options: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
      regexp: PropTypes.shape({}) // RegExp

    })).description("Describes the structure of the mask. If a regexp is provided, it should\n      allow both the final full string element as well as partial strings\n      as the user types characters one by one."),
    size: PropTypes.oneOfType([PropTypes.oneOf(['small', 'medium', 'large', 'xlarge']), PropTypes.string]).description('The size of the text.'),
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description("What text to put in the input. The caller should ensure that it\n      is initially valid with respect to the mask.")
  };
  return DocumentedMaskedInput;
};
export var themeDoc = _extends({

filterable: PropTypes.bool, // use table default
      show: PropTypes.bool,
      minWidth: PropTypes.number,

      // Cells only
      getProps: PropTypes.func,

      // Pivot only
      aggregate: PropTypes.func,

      // Headers only
      getHeaderProps: PropTypes.func,

      // Footers only
      getFooterProps: PropTypes.object,
      filterMethod: PropTypes.func,
      filterAll: PropTypes.bool,
      sortMethod: PropTypes.func,
    })).isRequired.description('Array of column descriptors.'),
    data: PropTypes.array.description('Array of data objects.').isRequired,
    defaultPageSize: PropTypes.number.description('Default page size (default 20).'),
    filterable: PropTypes.bool.description('Wheter it should display a filtering row.'),
    pageSizeOptions: PropTypes.arrayOf(PropTypes.number.description('Page size')).description('Array of available page size options ([5, 10, 20, 25, 50, 100]).'),
    sortable: PropTypes.bool.description('Wheter the table headers will allow sorting of the of the data.'),
  };

  return DocumentedElement;
};

export const doc = Select => {
  const DocumentedSelect = describe(Select)
    .availableAt(getAvailableAtBadge('Select'))
    .description('A control to select a value, with optional search.')
    .usage(
      `import { Select } from 'grommet';
<select>`,
    );
  // We don't include svg due to a collision on the values property
  // .intrinsicElement('select');

  DocumentedSelect.propTypes = {
    ...genericProps,
    children: PropTypes.func.description(
      `Function that will be called when each option is rendered.
      It will be passed (option, index, options, state) where option
      is the option to render, index is the index of that option in the
      options array, and state is an object with
      { active, disabled, selected } keys indicating the current state
      of the option.`,
    ),
    closeOnChange: PropTypes.bool
      .description('Wether to close the drop when a selection is made.')
      .defaultValue(true),
    disabled: PropTypes.oneOfType([
      PropTypes.bool,
      PropTypes.arrayOf(
        PropTypes.oneOfType([
          PropTypes.number,
          PropTypes.string,</select>

export const doc = InfiniteScroll => {
  const DocumentedInfiniteScroll = describe(InfiniteScroll)
    .availableAt(getAvailableAtBadge('InfiniteScroll'))
    .description('A container that lazily renders items.')
    .usage(
      `import { InfiniteScroll } from 'grommet';
`,
    );

  DocumentedInfiniteScroll.propTypes = {
    children: PropTypes.func.description(
      'Function that will be called when each item is rendered.',
    ),
    items: PropTypes.arrayOf(PropTypes.any).description(
      'The children callback will be called to render each item.',
    ),
    onMore: PropTypes.func.description(
      `Use this to indicate that 'items' doesn't contain all that it could.
      It will be called when the entire list of items has been rendered.
      This might be used when the total number of items that could be retrieved
      is more than you'd want to load into the browser. 'onMore' allows you
      to lazily fetch more from the server only when needed.`,
    ),
    renderMarker: PropTypes.func.description(
      `Function that will be called to render the marker element that
      is inserted into the DOM to track when scrolling nears the end of the
      rendered items. It will be called with a single element that should

export default (function (Drop) {
  var DocumentedDrop = describe(Drop).availableAt(getAvailableAtBadge('Drop')).description('A drop container that opens next to a target.').usage('import { Drop } from \'grommet\';\n...');

  DocumentedDrop.propTypes = {
    align: PropTypes.shape({
      top: PropTypes.oneOf(['top', 'bottom']),
      bottom: PropTypes.oneOf(['top', 'bottom']),
      right: PropTypes.oneOf(['left', 'right']),
      left: PropTypes.oneOf(['left', 'right'])
    }).description('How to align the drop with respect to the target element. Not specifying\n      a vertical or horizontal alignment will cause it to be aligned in the\n      center.').defaultValue({
      top: 'top',
      left: 'left'
    }),
    onClickOutside: PropTypes.func.description('Function that will be invoked when the user clicks outside the drop.'),
    onEsc: PropTypes.func.description('Function that will be called when the user presses the escape key inside the drop.'),
    responsive: PropTypes.bool.description('Whether to dynamically re-place when resized.').defaultValue(true),
    restrictFocus: PropTypes.bool.description('Whether the drop should control focus.'),
    stretch: PropTypes.bool.description('Whether the drop element should be stretched to at least match the\n      width of the target element. The default is true because\n      that is what most uses of Drop want, like Select and Menu.').defaultValue(true),
    target: PropTypes.object.description('Target where the drop will be aligned to. This should be a React reference.').isRequired
  };

  return DocumentedDrop;
});

export const doc = ResponsiveContext => {
  const DocumentedResponsiveContext = describe(ResponsiveContext)
    .availableAt(getAvailableAtBadge('ResponsiveContext'))
    .description(
      `A means of providing different rendering behavior based on the
      screen resolution.`,
    )
    .usage(
      "import { ResponsiveContext } from 'grommet';\n\n{resolution => ()}",
    );

  DocumentedResponsiveContext.propTypes = {
    children: PropTypes.func.description(
      `Render function that will be called with the current screen resolution
      size (e.g our base theme of size 'small', 'medium', 'large'). The size value will be derived from global.breakpoints entry
      in the theme object.`,
    ),
  };

  return DocumentedResponsiveContext;
};

export const doc = RadioButtonGroup => {
  const DocumentedRadioButtonGroup = describe(RadioButtonGroup)
    .availableAt(getAvailableAtBadge('RadioButtonGroup'))
    .description('A group of radio buttons.')
    .usage(
      `import { RadioButtonGroup } from 'grommet';
`,
    )
    .intrinsicElement('div');

  DocumentedRadioButtonGroup.propTypes = {
    name: PropTypes.string.description(
      `The DOM name attribute value to use for the underlying <input> 
      elements.`,
    ).isRequired,
    onChange: PropTypes.func.description(
      `Function that will be called when the user clicks on of the radio
      buttons. It will be passed a React event object.`,
    ),
    options: PropTypes.oneOfType([
      PropTypes.arrayOf(PropTypes.string),
      PropTypes.arrayOf(
        PropTypes.shape({
          disabled: PropTypes.bool,
          id: PropTypes.string,
          label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
          value: PropTypes.string.isRequired,
        }),
      ),
    ]).description(`Options can be either a string or an object.`).isRequired,
    value: PropTypes.string.description(`Currently selected option value.`),
  };

invert: PropTypes.bool.description(
      'Whether to indicate what has not been selected.',
    ),
    max: PropTypes.number
      .description('The maximum value permitted.')
      .defaultValue(100),
    messages: PropTypes.shape({
      lower: PropTypes.string,
      upper: PropTypes.string,
    }).description(
      'Custom messages. Used for accessibility by screen readers.',
    ),
    min: PropTypes.number
      .description('The minimum value permitted.')
      .defaultValue(0),
    onChange: PropTypes.func.description(
      `Function that will be called when the user changes one of the
      values. It will be passed an array of two numbers indicating
      the new values selected.`,
    ),
    opacity: PropTypes.oneOfType([
      PropTypes.oneOf(['weak', 'medium', 'strong']),
      PropTypes.string,
      PropTypes.bool,
    ])
      .description('Transparency of the selection indicator.')
      .defaultValue('medium'),
    round: PropTypes.oneOfType([
      PropTypes.oneOf(['xsmall', 'small', 'medium', 'large', 'full']),
      PropTypes.string,
    ]).description('How much to round the corners.'),
    size: PropTypes.oneOfType([

suggestionsExist: PropTypes.string,
      suggestionIsOpen: PropTypes.string,
    })
      .description(
        'Custom messages for TextInput. Used for accessibility by screen readers.',
      )
      .defaultValue({
        enterSelect: '(Press Enter to Select)',
        suggestionsCount: 'suggestions available',
        suggestionsExist:
          'This input has suggestions use arrow keys to navigate',
        suggestionIsOpen:
          'Suggestions drop is open, continue to use arrow keys to navigate',
      }),
    name: PropTypes.string.description('The name attribute of the input.'),
    onChange: PropTypes.func.description(
      'Function that will be called when the user types in the input.',
    ),
    onSelect: PropTypes.func.description(
      `Function that will be called when the user selects a suggestion.
The suggestion contains the object chosen from the supplied suggestions.`,
    ),
    onSuggestionsOpen: PropTypes.func.description(
      'Function that will be called when the suggestions drop is opened.',
    ),
    onSuggestionsClose: PropTypes.func.description(
      'Function that will be called when the suggestions drop is closed.',
    ),
    placeholder: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.node,
    ]).description('Placeholder to use when no value is provided.'),

...genericProps,
    activeIndex: PropTypes.oneOfType([
      PropTypes.number,
      PropTypes.arrayOf(PropTypes.number),
    ])
      .description(
        `Active panel index. If specified, Accordion will be a controlled component. This means that future
panel changes will not work unless you subscribe to onActive function and update activeIndex
accordingly.`,
      )
      .defaultValue(0),
    animate: PropTypes.bool
      .description('Transition content in & out with a slide down animation.')
      .defaultValue(true),
    children: PropTypes.node.description('Array of AccordionPanels.'),
    onActive: PropTypes.func.description(
      `Function that will be called when the active index changes.
It will always send an array with currently active panel indexes.`,
    ),
    multiple: PropTypes.bool
      .description('Allow multiple panels to be opened at once.')
      .defaultValue(false),
    messages: PropTypes.shape({
      tabContents: PropTypes.string,
    })
      .description(
        'Custom messages for Tabs. Used for accessibility by screen readers.',
      )
      .defaultValue({
        tabContents: 'Tab Contents',
      }),
  };