Docz: PropsTable Default values ​​are not supported in TSX

Created on 7 Mar 2019  ·  5Comments  ·  Source: doczjs/docz

Question

index.tsx

import React from 'react';
import PropTypes from 'prop-types';
import cls from './index.less';

const defaultIcon = "data:image/svg...";

export interface IErrorPageProps {
  message?: string;
  onRetry?: () => {};
  showIcon?: boolean;
  icon?: string;
  showRetry?: boolean;
}

const ErrorPage = (props: IErrorPageProps) => {
  const {
    message = '发生了未知错误',
    showIcon = true,
    icon = defaultIcon,
    onRetry = function empty() {},
    showRetry = true,
  } = props;

  const onRetryHandle = () => {
    onRetry();
  };

  return (
    <div className={cls['error-page']}>
      {showIcon && <img src={icon} alt="错误Icon" />}
      <span className={cls['error-desc']}>{message}</span>
      {showRetry && (
        <span onClick={onRetryHandle} className={cls['retry-btn']}>
          重新加载
        </span>
      )}
    </div>
  );
};

ErrorPage.propTypes = {
  message: PropTypes.string,
  onRetry: PropTypes.func,
  showIcon: PropTypes.bool,
  icon: PropTypes.string,
  showRetry: PropTypes.bool,
};

ErrorPage.defaultProps = {
  message: '发生了未知错误',
  showIcon: true,
  icon: defaultIcon,
  onRetry: function empty() {},
  showRetry: true,
};

export default ErrorPage;

index.mdx

import { Playground, PropsTable } from 'docz';
import ErrorPage from './';

# ErrorPage Component

错误提示页面

## Basic usage
<Playground>
  <div className="demo-mobile-box">
    <ErrorPage>你好</ErrorPage>
  </div>
</Playground>


## API

<PropsTable of={ErrorPage} />

image

why not default Props or Playground。If remove prop-types , Playground is display, but defaul how to dispaly?

image

Most helpful comment

Here is a workaround

type Props = {
  /**
   * The color of the button text.
   * @default 'blue'
   */
  color?: string;
};

add @default field in the jsdoc for the prop

All 5 comments

Having the same situation here. Maybe typescript doesn't work well with react-docgen for default props?

Having the same situation here. Maybe typescript doesn't work well with react-docgen for default props?

do you have any good advice?

same issue here... would be nice if this is supported

so is there any solution?

Here is a workaround

type Props = {
  /**
   * The color of the button text.
   * @default 'blue'
   */
  color?: string;
};

add @default field in the jsdoc for the prop

Was this page helpful?
0 / 5 - 0 ratings

Related issues

danburzo picture danburzo  ·  3Comments

wldcordeiro picture wldcordeiro  ·  3Comments

tsnolan23 picture tsnolan23  ·  3Comments

capaj picture capaj  ·  3Comments

regrettably picture regrettably  ·  3Comments