@fle-ui/next 1.0.0-alpha.1 → 1.0.0-alpha.2

package/components/tree-select/components/tree-select.tsx

@@ -1,18 +0,0 @@
-import React, { forwardRef, ReactElement } from 'react';
-import { TreeSelect as AntdTreeSelect } from 'antd';
-import type { TreeSelectProps as AntdTreeSelectProps } from 'antd';
-
-export interface TreeSelectProps extends AntdTreeSelectProps<any> {}
-
-const TreeSelect = forwardRef<any, TreeSelectProps>(
-  (props, ref): ReactElement => {
-    const { children, ...otherProps } = props;
-    return (
-      <AntdTreeSelect ref={ref} {...otherProps}>
-        {children}
-      </AntdTreeSelect>
-    );
-  },
-);
-
-export default TreeSelect;

package/components/tree-select/tree-select.md

@@ -1,101 +0,0 @@
----
-title: TreeSelect 树选择
-order: 0
-legacy: /tree-select
-group:
-  path: /
-nav:
-  title: 组件
-  path: /components
----
-
-# TreeSelect 树选择
-
-树型选择控件。
-
-## 何时使用
-
-类似 Select 的选择控件，可选择的数据结构是一个树形结构时，可以使用 TreeSelect，例如公司层级、学科系统、分类目录等等。
-
-## API
-
-### Tree props
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| allowClear | 显示清除按钮 | boolean | false |  |
-| autoClearSearchValue | 当多选模式下值被选择，自动清空搜索框 | boolean | true |  |
-| bordered | 是否显示边框 | boolean | true |  |
-| defaultValue | 指定默认选中的条目 | string \| string\[] | - |  |
-| disabled | 是否禁用 | boolean | false |  |
-| dropdownClassName | 下拉菜单的 className 属性 | string | - |  |
-| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动 | boolean \| number | true |  |
-| dropdownRender | 自定义下拉框内容 | (originNode: ReactNode, props) => ReactNode | - |  |
-| dropdownStyle | 下拉菜单的样式 | object | - |  |
-| fieldNames | 自定义节点 label、key、children 的字段 | object | { label: `label`, key: `key`, children: `children` } | 4.17.0 |
-| filterTreeNode | 是否根据输入项进行筛选，默认用 treeNodeFilterProp 的值作为要筛选的 TreeNode 的属性值 | boolean \| function(inputValue: string, treeNode: TreeNode) (函数需要返回 bool 值) | function |  |
-| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | function(triggerNode) | () => document.body |  |
-| labelInValue | 是否把每个选项的 label 包装到 value 中，会把 value 类型从 `string` 变为 {value: string, label: ReactNode, halfChecked(treeCheckStrictly 时有效): string\[] } 的格式 | boolean | false |  |
-| listHeight | 设置弹窗滚动高度 | number | 256 |  |
-| loadData | 异步加载数据 | function(node) | - |  |
-| maxTagCount | 最多显示多少个 tag，响应式模式会对性能产生损耗 | number \| `responsive` | - | responsive: 4.10 |
-| maxTagPlaceholder | 隐藏 tag 时显示的内容 | ReactNode \| function(omittedValues) | - |  |
-| multiple | 支持多选（当设置 treeCheckable 时自动变为 true） | boolean | false |  |
-| placeholder | 选择框默认文字 | string | - |  |
-| searchValue | 搜索框的值，可以通过 `onSearch` 获取用户输入 | string | - |  |
-| showArrow | 是否显示 `suffixIcon`，单选模式下默认 `true` | boolean | - |  |
-| showCheckedStrategy | 配置 `treeCheckable` 时，定义选中项回填的方式。`TreeSelect.SHOW_ALL`: 显示所有选中节点(包括父节点)。`TreeSelect.SHOW_PARENT`: 只显示父节点(当父节点下所有子节点都选中时)。 默认只显示子节点 | `TreeSelect.SHOW_ALL` \| `TreeSelect.SHOW_PARENT` \| `TreeSelect.SHOW_CHILD` | `TreeSelect.SHOW_CHILD` |  |
-| showSearch | 是否支持搜索框 | boolean | 单选：false \| 多选：true |  |
-| size | 选择框大小 | `large` \| `middle` \| `small` | - |  |
-| suffixIcon | 自定义的选择框后缀图标, 多选模式下必须同时设置 `showArrow` 为 true | ReactNode | - |  |
-| switcherIcon | 自定义树节点的展开/折叠图标 | ReactNode | - |  |
-| treeCheckable | 显示 Checkbox | boolean | false |  |
-| treeCheckStrictly | `checkable` 状态下节点选择完全受控（父子节点选中状态不再关联），会使得 `labelInValue` 强制为 true | boolean | false |  |
-| treeData | treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（value 在整个树范围内唯一） | array<{value, title, children, \[disabled, disableCheckbox, selectable, checkable]}> | \[] |  |
-| treeDataSimpleMode | 使用简单格式的 treeData，具体设置参考可设置的类型 (此时 treeData 应变为这样的数据结构: \[{id:1, pId:0, value:'1', title:"test1",...},...]， `pId` 是父节点的 id) | boolean \| object<{ id: string, pId: string, rootPId: string }> | false |  |
-| treeDefaultExpandAll | 默认展开所有树节点 | boolean | false |  |
-| treeDefaultExpandedKeys | 默认展开的树节点 | string\[] | - |  |
-| treeExpandedKeys | 设置展开的树节点 | string\[] | - |  |
-| treeIcon | 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式 | boolean | false |  |
-| treeLine | 是否展示线条样式，请参考 [Tree - showLine](/components/tree/#components-tree-demo-line) | boolean \| object | false | 4.17.0 |
-| treeNodeFilterProp | 输入项过滤对应的 treeNode 属性 | string | `value` |  |
-| treeNodeLabelProp | 作为显示的 prop 设置 | string | `title` |  |
-| value | 指定当前选中的条目 | string \| string\[] | - |  |
-| virtual | 设置 false 时关闭虚拟滚动 | boolean | true | 4.1.0 |
-| onChange | 选中树节点时调用此函数 | function(value, label, extra) | - |  |
-| onDropdownVisibleChange | 展开下拉菜单的回调 | function(open) | - |  |
-| onSearch | 文本框值变化时回调 | function(value: string) | - |  |
-| onSelect | 被选中时调用 | function(value, node, extra) | - |  |
-| onTreeExpand | 展示节点时调用 | function(expandedKeys) | - |  |
-
-### Tree 方法
-
-| 名称    | 描述     | 版本 |
-| ------- | -------- | ---- |
-| blur()  | 移除焦点 |      |
-| focus() | 获取焦点 |      |
-
-### TreeNode props
-
-> 建议使用 treeData 来代替 TreeNode，免去手工构造麻烦
-
-| 参数            | 说明                                               | 类型      | 默认值 | 版本 |
-| --------------- | -------------------------------------------------- | --------- | ------ | ---- |
-| checkable       | 当树为 Checkbox 时，设置独立节点是否展示 Checkbox  | boolean   | -      |      |
-| disableCheckbox | 禁掉 Checkbox                                      | boolean   | false  |      |
-| disabled        | 是否禁用                                           | boolean   | false  |      |
-| isLeaf          | 是否是叶子节点                                     | boolean   | false  |      |
-| key             | 此项必须设置（其值在整个树范围内唯一）             | string    | -      |      |
-| selectable      | 是否可选                                           | boolean   | true   |      |
-| title           | 树节点显示的内容                                   | ReactNode | `---`  |      |
-| value           | 默认根据此属性值进行筛选（其值在整个树范围内唯一） | string    | -      |      |
-
-## FAQ
-
-### onChange 时如何获得父节点信息？
-
-从性能角度考虑，我们默认不透出父节点信息。你可以这样获得：<https://codesandbox.io/s/wk080nn81k>
-
-### 自定义 Option 样式导致滚动异常怎么办？
-
-请参考 Select 的 [FAQ](/components/select)。

package/components/typography/components/link.tsx

@@ -1,15 +0,0 @@
-import React, { FC } from 'react';
-import { Typography } from 'antd';
-import { LinkProps as AntdTypographyLinkProps } from 'antd/es/typography/Link';
-
-export interface LinkProps extends AntdTypographyLinkProps {}
-
-const { Link: AntdTypographyLink } = Typography;
-
-const Link: FC<LinkProps> = (props) => {
-  const { children, ...otherProps } = props;
-
-  return <AntdTypographyLink {...otherProps}>{children}</AntdTypographyLink>;
-};
-
-export default Link;

package/components/typography/components/paragraph.tsx

@@ -1,19 +0,0 @@
-import React, { FC } from 'react';
-import { Typography } from 'antd';
-import { ParagraphProps as AntdTypographyParagraphProps } from 'antd/es/typography/Paragraph';
-
-export interface ParagraphProps extends AntdTypographyParagraphProps {}
-
-const { Paragraph: AntdTypographyParagraph } = Typography;
-
-const Paragraph: FC<ParagraphProps> = (props) => {
-  const { children, ...otherProps } = props;
-
-  return (
-    <AntdTypographyParagraph {...otherProps}>
-      {children}
-    </AntdTypographyParagraph>
-  );
-};
-
-export default Paragraph;

package/components/typography/components/text.tsx

@@ -1,15 +0,0 @@
-import React, { FC } from 'react';
-import { Typography } from 'antd';
-import { TextProps as AntdTypographyTextProps } from 'antd/es/typography/Text';
-
-export interface TextProps extends AntdTypographyTextProps {}
-
-const { Text: AntdTypographyText } = Typography;
-
-const Text: FC<TextProps> = (props) => {
-  const { children, ...otherProps } = props;
-
-  return <AntdTypographyText {...otherProps}>{children}</AntdTypographyText>;
-};
-
-export default Text;

package/components/typography/components/title.tsx

@@ -1,15 +0,0 @@
-import React, { FC } from 'react';
-import { Typography } from 'antd';
-import { TitleProps as AntdTypographyTitleProps } from 'antd/es/typography/Title';
-
-export interface TitleProps extends AntdTypographyTitleProps {}
-
-const { Title: AntdTypographyTitle } = Typography;
-
-const Title: FC<TitleProps> = (props) => {
-  const { children, ...otherProps } = props;
-
-  return <AntdTypographyTitle {...otherProps}>{children}</AntdTypographyTitle>;
-};
-
-export default Title;

package/components/typography/components/typography.tsx

@@ -1,15 +0,0 @@
-import React, { FC } from 'react';
-import { Typography } from 'antd';
-import { TextProps as AntdTypographyTextProps } from 'antd/es/typography/Text';
-
-export interface TextProps extends AntdTypographyTextProps {}
-
-const { Text: AntdTypographyText } = Typography;
-
-const Text: FC<TextProps> = (props) => {
-  const { children, ...otherProps } = props;
-
-  return <AntdTypographyText {...otherProps}>{children}</AntdTypographyText>;
-};
-
-export default Text;

package/components/typography/demos/basic.tsx

@@ -1,105 +0,0 @@
-/**
- * title: 基本
- * desc: 展示文档样例。
- */
-
-import React from 'react';
-import { Typography, Divider } from '@fle-ui/next';
-
-const { Title, Paragraph, Text, Link } = Typography;
-
-const blockContent = `AntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、不限可能的数据可视化最佳实践。得益于丰富的业务场景和用户需求挑战，AntV 经历多年积累与不断打磨，已支撑整个阿里集团内外 20000+ 业务系统，通过了日均千万级 UV 产品的严苛考验。
-我们正在基础图表，图分析，图编辑，地理空间可视化，智能可视化等各个可视化的领域耕耘，欢迎同路人一起前行。`;
-
-const Demo = () => {
-  return (
-    <Typography>
-      <Title>Introduction</Title>
-      <Paragraph>
-        In the process of internal desktop applications development, many
-        different design specs and implementations would be involved, which
-        might cause designers and developers difficulties and duplication and
-        reduce the efficiency of development.
-      </Paragraph>
-      <Paragraph>
-        After massive project practice and summaries, Ant Design, a design
-        language for background applications, is refined by Ant UED Team, which
-        aims to
-        <Text strong>
-          uniform the user interface specs for internal background projects,
-          lower the unnecessary cost of design differences and implementation
-          and liberate the resources of design and front-end development
-        </Text>
-        .
-      </Paragraph>
-      <Title level={2}>Guidelines and Resources</Title>
-      <Paragraph>
-        We supply a series of design principles, practical patterns and high
-        quality design resources (<Text code>Sketch</Text> and{' '}
-        <Text code>Axure</Text>), to help people create their product prototypes
-        beautifully and efficiently.
-      </Paragraph>
-
-      <Paragraph>
-        <ul>
-          <li>
-            <Link href="/docs/spec/proximity">Principles</Link>
-          </li>
-          <li>
-            <Link href="/docs/spec/overview">Patterns</Link>
-          </li>
-          <li>
-            <Link href="/docs/resources">Resource Download</Link>
-          </li>
-        </ul>
-      </Paragraph>
-
-      <Paragraph>
-        Press <Text keyboard>Esc</Text> to exit...
-      </Paragraph>
-
-      <Divider />
-
-      <Title>介绍</Title>
-      <Paragraph>
-        蚂蚁的企业级产品是一个庞大且复杂的体系。这类产品不仅量级巨大且功能复杂，而且变动和并发频繁，常常需要设计与开发能够快速的做出响应。同时这类产品中有存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。
-      </Paragraph>
-      <Paragraph>
-        随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标，我们（蚂蚁金服体验技术部）经过大量的项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系
-        Ant Design。基于<Text mark>『确定』和『自然』</Text>
-        的设计价值观，通过模块化的解决方案，降低冗余的生产成本，让设计者专注于
-        <Text strong>更好的用户体验</Text>。
-      </Paragraph>
-      <Title level={2}>设计资源</Title>
-      <Paragraph>
-        我们提供完善的设计原则、最佳实践和设计资源文件（<Text code>Sketch</Text>{' '}
-        和<Text code>Axure</Text>），来帮助业务快速设计出高质量的产品原型。
-      </Paragraph>
-
-      <Paragraph>
-        <ul>
-          <li>
-            <Link href="/docs/spec/proximity-cn">设计原则</Link>
-          </li>
-          <li>
-            <Link href="/docs/spec/overview-cn">设计模式</Link>
-          </li>
-          <li>
-            <Link href="/docs/resources-cn">设计资源</Link>
-          </li>
-        </ul>
-      </Paragraph>
-
-      <Paragraph>
-        <blockquote>{blockContent}</blockquote>
-        <pre>{blockContent}</pre>
-      </Paragraph>
-
-      <Paragraph>
-        按<Text keyboard>Esc</Text>键退出阅读……
-      </Paragraph>
-    </Typography>
-  );
-};
-
-export default Demo;

package/components/typography/demos/ellipsis-middle.tsx

@@ -1,32 +0,0 @@
-/**
- * title: 省略中间
- * desc:
- */
-
-import React from 'react';
-import { Typography } from 'antd';
-
-const { Text } = Typography;
-
-const EllipsisMiddle = ({ suffixCount, children }: any) => {
-  const start = children.slice(0, children.length - suffixCount).trim();
-  const suffix = children.slice(-suffixCount).trim();
-  return (
-    <Text style={{ maxWidth: '100%' }} ellipsis={{ suffix }}>
-      {start}
-    </Text>
-  );
-};
-
-const Demo = () => {
-  return (
-    <EllipsisMiddle suffixCount={12}>
-      In the process of internal desktop applications development, many
-      different design specs and implementations would be involved, which might
-      cause designers and developers difficulties and duplication and reduce the
-      efficiency of development.
-    </EllipsisMiddle>
-  );
-};
-
-export default Demo;

package/components/typography/demos/ellipsis.tsx

@@ -1,60 +0,0 @@
-/**
- * title: 省略号
- * desc: 多行文本省略。你可以通过 `tooltip` 属性配置省略展示内容，大量文本时推荐优先使用 `expandable`。
- */
-
-import React, { useState } from 'react';
-import { Typography, Switch } from '@fle-ui/next';
-
-const { Paragraph, Text } = Typography;
-
-const Demo = () => {
-  const [ellipsis, setEllipsis] = useState(true);
-
-  return (
-    <>
-      <Switch
-        checked={ellipsis}
-        onChange={() => {
-          setEllipsis(!ellipsis);
-        }}
-      />
-
-      <Paragraph ellipsis={ellipsis}>
-        Ant Design, a design language for background applications, is refined by
-        Ant UED Team. Ant Design, a design language for background applications,
-        is refined by Ant UED Team. Ant Design, a design language for background
-        applications, is refined by Ant UED Team. Ant Design, a design language
-        for background applications, is refined by Ant UED Team. Ant Design, a
-        design language for background applications, is refined by Ant UED Team.
-        Ant Design, a design language for background applications, is refined by
-        Ant UED Team.
-      </Paragraph>
-
-      <Paragraph
-        ellipsis={
-          ellipsis ? { rows: 2, expandable: true, symbol: 'more' } : false
-        }
-      >
-        Ant Design, a design language for background applications, is refined by
-        Ant UED Team. Ant Design, a design language for background applications,
-        is refined by Ant UED Team. Ant Design, a design language for background
-        applications, is refined by Ant UED Team. Ant Design, a design language
-        for background applications, is refined by Ant UED Team. Ant Design, a
-        design language for background applications, is refined by Ant UED Team.
-        Ant Design, a design language for background applications, is refined by
-        Ant UED Team.
-      </Paragraph>
-
-      <Text
-        style={ellipsis ? { width: 100 } : undefined}
-        ellipsis={ellipsis ? { tooltip: 'I am ellipsis now!' } : false}
-      >
-        Ant Design, a design language for background applications, is refined by
-        Ant UED Team.
-      </Text>
-    </>
-  );
-};
-
-export default Demo;

package/components/typography/demos/interactive.tsx

@@ -1,72 +0,0 @@
-/**
- * title: 可交互
- * desc: 提供可编辑和可复制等额外的交互能力。
- */
-
-import React, { useState } from 'react';
-import { Typography } from 'antd';
-import {
-  HighlightOutlined,
-  SmileOutlined,
-  SmileFilled,
-} from '@ant-design/icons';
-
-const { Paragraph } = Typography;
-
-const Demo = () => {
-  const [editableStr, setEditableStr] = useState('This is an editable text.');
-  const [customIconStr, setCustomIconStr] = useState(
-    'Custom Edit icon and replace tooltip text.',
-  );
-  const [hideTooltipStr, setHideTooltipStr] = useState('Hide Edit tooltip.');
-  const [lengthLimitedStr, setLengthLimitedStr] = useState(
-    'This is an editable text with limited length.',
-  );
-
-  return (
-    <>
-      <Paragraph editable={{ onChange: setEditableStr }}>
-        {editableStr}
-      </Paragraph>
-      <Paragraph
-        editable={{
-          icon: <HighlightOutlined />,
-          tooltip: 'click to edit text',
-          onChange: setCustomIconStr,
-        }}
-      >
-        {customIconStr}
-      </Paragraph>
-      <Paragraph editable={{ tooltip: false, onChange: setHideTooltipStr }}>
-        {hideTooltipStr}
-      </Paragraph>
-      <Paragraph
-        editable={{
-          onChange: setLengthLimitedStr,
-          maxLength: 50,
-          autoSize: { maxRows: 5, minRows: 3 },
-        }}
-      >
-        {lengthLimitedStr}
-      </Paragraph>
-      <Paragraph copyable>This is a copyable text.</Paragraph>
-      <Paragraph copyable={{ text: 'Hello, Ant Design!' }}>
-        Replace copy text.
-      </Paragraph>
-      <Paragraph
-        copyable={{
-          icon: [
-            <SmileOutlined key="copy-icon" />,
-            <SmileFilled key="copied-icon" />,
-          ],
-          tooltips: ['click here', 'you clicked!!'],
-        }}
-      >
-        Custom Copy icon and replace tooltips text.
-      </Paragraph>
-      <Paragraph copyable={{ tooltips: false }}>Hide Copy tooltips.</Paragraph>
-    </>
-  );
-};
-
-export default Demo;