export default function Demo()

in packages-rc/rc-markdown/stories/_demo/index.tsx [53:135]
81 lines of code
4 McCabe index (conditional complexity)

export default function Demo({
  source,
  options
}: MarkdownProps): JSX.Element {
  const [stateSource, setStateSource] = useState<string>(source);
  const [stateHtmlSource, setStateHtmlSource] = useState<boolean>(false);
  const [stateApplyStyle, setStateApplyStyle] = useState<boolean>(true);
  const [stateAllowDangerousHtml, setStateAllowDangerousHtml] = useState<boolean>(false);
  const [stateGfmEnabled, setStateGfmEnabled] = useState<boolean>(true);
  const [stateDirectiveEnabled, setStateDirectiveEnabled] = useState<boolean>(true);
  const compileOptions: MarkdownCompileOptions = {
    allowDangerousHtml: stateAllowDangerousHtml,
    plugins: {
      gfm: stateGfmEnabled,
      directive: stateDirectiveEnabled ? directiveOptions : undefined
    },
    ...options
  };
  
  const jsxMarkdown = stateHtmlSource ? <CodeViewer {...{
    type: 'html'
  }}>{compileIntoHtml(stateSource, compileOptions)}</CodeViewer> : <Markdown {...{
    source: stateSource,
    options: compileOptions
  }} />;
  
  return <>
    <ThemeSwitcher />
    <PkgInfo />
    <H1>调戏 <span role="img" aria-label="tx">🙈</span></H1>
    <div>
      <InputSwitch {...{
        label: '展示 HTML 源码',
        value: stateHtmlSource,
        onChange: setStateHtmlSource
      }} />
    </div>
    <div>
      <InputSwitch {...{
        label: '加样式（this component comes with NO style at all... it is for demo only）',
        value: stateApplyStyle,
        onChange: setStateApplyStyle
      }} />
    </div>
    <div>
      <InputSwitch {...{
        label: 'props.allowDangerousHtml',
        value: stateAllowDangerousHtml,
        onChange: setStateAllowDangerousHtml
      }} />
    </div>
    <div>
      <InputSwitch {...{
        label: 'props.plugins.gfm',
        value: stateGfmEnabled,
        onChange: setStateGfmEnabled
      }} />
    </div>
    <div>
      <InputSwitch {...{
        label: 'props.plugins.directive',
        value: stateDirectiveEnabled,
        onChange: setStateDirectiveEnabled
      }} />
    </div>
    <Flex>
      <>
        <H2><span role="img" aria-label="mwa">💋</span> 展示</H2>
        {stateApplyStyle ? <ArticleBase>{jsxMarkdown}</ArticleBase> : jsxMarkdown}
      </>
      <>
        <H2><span role="img" aria-label="code">Ⓜ️</span> 代码</H2>
        <CodeViewer {...{
          conf: {
            readOnly: false
          },
          type: 'markdown',
          onChange: setStateSource
        }}>{stateSource}</CodeViewer>
      </>
    </Flex>
  </>;
}