[RFC] Sources 来源

[hy993658052]

Summary

展示思考时的来源网址。

Motivation

在使用到全网搜索的对话里，会展示资料来源网站，现在还缺少这样的一个组件。

Detailed Design

API 设计

interface SourcesItem {
  key?: React.Key;
  title: React.ReactNode;
  href?: string;
  icon?: React.ReactNode;
}

interface SourcesProps {
  title?: React.ReactNode; // 标题
  items?: Array<SourcesItem>; // 网站列表
  expandIconPosition?: 'start' | 'end'; // 展开图标方向
  defaultExpanded?: boolean; // 默认展开
  expanded?: boolean; // 控制展开
  onExpand?: (expand: boolean) => void; // 展开事件
  onClick?: (item: SourcesItem) => void; // 点击事件
}

Example Usage

基础使用

import { Sources } from '@ant-design/x';
import React from 'react';

const App = () => {
  const items = [
    {
      title: '1. Data source',
      href: 'https://x.ant.design/components/overview',
    },
    {
      title: '2. Data source',
      href: 'https://x.ant.design/components/overview',
    },
    {
      title: '3. Data source',
      href: 'https://x.ant.design/components/overview',
    },
  ];

  return (
    <>
      <Sources title={'Used 3 sources'} items={items} />
    </>
  );
};

export default App;

设置图标

import { Sources } from '@ant-design/x';
import { TwitterOutlined, YoutubeOutlined, GithubOutlined } from '@ant-design/icons';
import React from 'react';

const App = () => {
  const items = [
    {
      title: 'Data source from twitter',
      href: 'https://x.ant.design/components/overview',
      icon: <TwitterOutlined />
    },
    {
      title: 'Data source from youtube',
      href: 'https://x.ant.design/components/overview',
      icon: <YoutubeOutlined />
    },
    {
      title: 'Data source from github',
      href: 'https://x.ant.design/components/overview',
      icon: <GithubOutlined />
    },
  ];

  return (
    <>
      <Sources title={'Used 3 sources'} items={items} expandIconPosition={'end'} />
    </>
  );
};

export default App;

控制展开

import { Sources } from '@ant-design/x';
import { Button } from 'antd';
import React, { useState } from 'react';

const App = () => {
  const items = [
    {
      title: '1. Data source',
      href: 'https://x.ant.design/components/overview',
    },
    {
      title: '2. Data source',
      href: 'https://x.ant.design/components/overview',
    },
    {
      title: '3. Data source',
      href: 'https://x.ant.design/components/overview',
    },
  ];
  const [value, setValue] = useState(true);
  return (
    <>
      <Button onClick={() => setValue(!value)}>Change expand</Button>
      <br />
      <Sources
        title={'Used 3 sources'}
        items={items}
        expanded={value}
        onExpand={(value) => {
          setValue(value);
        }}
      />
    </>
  );
};

export default App;

[kimteayon]

新增行内应用内容的展示效果