@aloudata/aloudata-design 0.1.0-beta1 → 0.2.0-beta.11

package/src/Select/interface.ts

@@ -1,231 +0,0 @@
-import _ from 'lodash';
-import React from 'react';
-
-type TSize = 'small' | 'default' | 'large';
-
-export type TMaybeArray<T> = T | T[];
-
-export type modeType = 'string' | 'tags' | undefined;
-export type searchType = 'normal' | 'inner' | 'no-search';
-export interface IOption {
-  /**
-   列表单项主要文字
-   */
-  label: string | React.ReactNode;
-  /**
-      作为列表的 `key` 来使用
-   */
-  value: string | number;
-  /**
-      列表次要文字
-   */
-  description?: string;
-  /**
-      是否禁用
-   */
-  disabled?: boolean;
-  /**
-   * 选中该 Option 后，Select 的 title
-   */
-  title?: string;
-  /**
-      `tooltip` 描述
-   */
-  tooltip?: string;
-  /**
-   分组的 `key` ，与 `groupLabel` 一起使用
-   */
-  groupValue?: string;
-  /**
-      分组的标题
-   */
-  groupLabel?: string;
-
-  options?: Map<string | number, IOption>;
-  isSelectOptGroup?: boolean;
-}
-
-export interface IOptGroupProps {
-  children?: React.ReactNode;
-  label: string | React.ReactNode;
-  value: string | number;
-}
-
-export interface IOptionProps {
-  children?: React.ReactNode;
-  value: string | number;
-  disabled?: boolean;
-  title?: string;
-}
-
-export interface ISelectProps {
-  /**
-    * @description 输入框尺寸
-   * @default default
-   * @type 'small' | 'default' | 'large';
-   */
-  size?: TSize;
-  customizePrefixCls?: string;
-  /**
-   * @description 多选模式
-   * @default false
-   */
-  multiple?: boolean;
-  /**
-   * @description 选择框默认文本
-   */
-  placeholder?: string;
-  /**
-   * @description 是否禁用
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * @description 是否默认展开下拉菜单
-   * @default false
-   */
-  defaultOpen?: boolean;
-  className?: string;
-  /**
-   * @description 下拉菜单的 className 属性
-   */
-  dropDownClassName?: string;
-  style?: React.CSSProperties;
-  groupStyle?: React.CSSProperties;
-  optionStyle?: React.CSSProperties;
-  /**
-   * @description 下拉菜单的 style 属性
-   */
-  dropDownStyle?: React.CSSProperties;
-  /**
-   * @description 指定默认选中的条目
-   */
-  defaultValue?: TMaybeArray<string | number> | null;
-  /**
-   * @description 指定当前选中的条目，多选时为一个数组。
-   */
-  value?: TMaybeArray<string | number> | null;
-  /**
-   * @description 数据化配置选项内容，相比 jsx 定义会获得更好的渲染性能
-   */
-  options?: IOption[];
-
-  /**
-   * @description 设置弹窗滚动高度
-   * @default 256
-   */
-  listHeight?: number;
-  listRowHeight?: number;
-  labelRenderer?: (input: string) => (option: IOption, isGroup: boolean) => React.ReactNode;
-  searchPredicate?: (input: string) => _.ListIterateeCustom<IOption, boolean>;
-  matchPredicate?: (input: string) => _.ListIterateeCustom<IOption, boolean>;
-  optionLabelRenderer?: (value: string | number, option?: IOption) => React.ReactNode;
-  /**
-   * @description 选中值改变时的回调
-   */
-  onChange?: (value: TMaybeArray<string | number> | null, options?: TMaybeArray<IOption> | null) => void;
-  /**
-   * @description 被选中时调用，参数为选中项的 value
-   */
-  onSelect?: (value: string | number, option: IOption) => void;
-  /**
-   * @description 开启清除功能
-   */
-  allowClear?: boolean;
-  /**
-   * @description 清除的回调
-   */
-  onClear?: () => void;
-  /**
-   * 浮层渲染父节点，默认渲染到 body 上
-   */
-  getContainer?: (node: HTMLElement) => HTMLElement;
-  /**
-   * @description 是否展开下拉菜单
-   */
-  open?: boolean;
-  /**
-   * dropdown visible 值改变时的回调
-   */
-  onDropDownVisibleChange?: (visible: boolean) => void;
-  /** *
-   * @description 下拉菜单和选择器同宽
-   * @default true
-   */
-  dropdownMatchSelectWidth?: boolean
-  /**
-   * @description 下拉菜单内置标签
-   */
-  label?: React.ReactNode;
-  children?: React.ReactNode[] | React.ReactNode;
-}
-
-export interface ISelectorProps {
-  input: string;
-  disabled: boolean;
-  prefix: string;
-  size: 'small' | 'default' | 'large';
-  multiple: boolean;
-  bordered: boolean;
-  isFocused: boolean;
-  className?: string | undefined;
-  visible: boolean;
-  style?: React.CSSProperties | undefined;
-  allowClear: boolean;
-  mode?: modeType;
-  label?: React.ReactNode;
-  value?: TMaybeArray<string | number> | undefined | null;
-  filteredOptions: IOption[];
-  searchType: searchType;
-  placeholder?: string;
-  optionLabelRenderer: (value: string | number, option?: IOption) => React.ReactNode;
-  getOptionByValue: (optValue: string | number) => IOption;
-  onInputChange: (value: string) => void;
-  onAllowClear: () => void;
-  deleteValue: (value: React.ReactText[], v: string | number) => void;
-  arrowComponent?: React.ReactElement | undefined;
-  closeComponent?: React.ReactElement | undefined;
-}
-
-export interface IVirtualListProps {
-  itemHeight?: number;
-  height?: number;
-  prefixCls?: string;
-  children: React.ReactNode;
-  data: IOption[];
-  virtual?: boolean;
-  itemKey: string | number | ((item: never) => React.ReactText);
-}
-
-export interface IOptionsListProps {
-  style?: React.CSSProperties;
-  input: string;
-  prefixCls: string;
-  groupStyle?: React.CSSProperties;
-  optionStyle?: React.CSSProperties;
-  selected?: TMaybeArray<React.ReactText> | null;
-  multiple: boolean;
-  isMode?: boolean;
-  optionChecked?: TMaybeArray<React.ReactText>;
-  visible?: boolean;
-  isUseAll?: boolean;
-  data: IOption[];
-  hasGroup: boolean;
-  searchType: searchType;
-  placeholder?: string;
-  notFoundContent?: React.ReactElement;
-  onTempValueChange: (tempValue: React.ReactText[]) => void;
-  setTempValue: (values: React.ReactText[]) => void;
-  value?: TMaybeArray<React.ReactText> | null;
-  tempValue: React.ReactText[];
-  isFooter?: boolean;
-  labelRenderer: (option: IOption, isGruop: false) => React.ReactNode;
-  onOptionClick: (selectedValue: string | number) => void;
-  getContainer?: (node: HTMLElement) => HTMLElement;
-  onValueChange?: (optionValues: TMaybeArray<string | number> | null) => void;
-  onInputChange: (value: string) => void;
-  height?: number | undefined;
-  itemHeight?: number | undefined;
-  activeIndex: number;
-  setActiveIndex: React.Dispatch<React.SetStateAction<number>>;
-}

package/src/Select/style/index.ts

@@ -1,2 +0,0 @@
-import '../../style'
-import './index.less';

package/src/Select/utils.tsx

@@ -1,133 +0,0 @@
-import React from 'react';
-import { concat, uniqueId } from 'lodash';
-import { IOption, IOptionProps } from './interface';
-
-const ZERO_INDEX = 0;
-
-interface IGroup {
-  groupLabel?: string;
-  groupValue?: string | number;
-}
-const ungroupedOptionKeyPrefix = 'select_isungrouped_option_';
-const ungroupedOptionKey = uniqueId(ungroupedOptionKeyPrefix);
-const ungroupedOptionLabel = '未分组';
-export const customOptionKeyPrefix = 'select_custom_option_';
-export const customOptionKey = uniqueId(customOptionKeyPrefix);
-
-// ReactNode To Options
-export function convertNodeToOption(node: React.ReactElement, group: IGroup): IOption {
-  const {
-    props: { value, children, ...restProps },
-  } = node as React.ReactElement & { props: IOptionProps };
-  const { groupValue, groupLabel } = group;
-  if (groupLabel && groupLabel) {
-    return { value, label: children !== undefined ? children : value, groupValue, groupLabel, ...restProps };
-  }
-  return { value, label: children !== undefined ? children : value, ...restProps };
-}
-
-export const getFlattenOptions = (data: IOption[], hasGroup: boolean) => {
-  const groupMap = new Map();
-  if (!hasGroup) { return data; }
-  data?.map((cur: IOption) => {
-    const gValue = groupMap.get(cur.groupValue);
-    if (gValue) {
-      const { options, ...rest } = gValue;
-      return groupMap.set(cur.groupValue, {
-        options: [...options, cur],
-        ...rest,
-      });
-    }
-    return groupMap.set(cur.groupValue, {
-      label: cur.groupLabel,
-      value: cur.groupValue,
-      isSelectOptGroup: true,
-      options: [cur],
-    });
-  });
-  const flattenOption: IOption[] = [];
-  groupMap.forEach((value: IOption) => {
-    flattenOption.push(value);
-    // @ts-ignore
-    flattenOption.push(...value.options);
-  });
-  return flattenOption;
-};
-
-export function convertChildrenToData(nodes: React.ReactElement[], group = {}): IOption[] {
-  let nodeOptions: IOption[] = [];
-  React.Children.forEach(nodes, (node: React.ReactElement) => {
-    if (!React.isValidElement(node)) {
-      return;
-    }
-    const {
-      type: { isSelectOptGroup },
-      props: { children, label, value },
-    } = node as React.ReactElement & { type: { isSelectOptGroup?: boolean }; props: IOptionProps }; // 联合类型
-    if (!isSelectOptGroup) {
-      // option
-      nodeOptions.push(convertNodeToOption(node, group));
-    } else {
-      // Group
-      nodeOptions = concat(nodeOptions, convertChildrenToData(children, { groupLabel: label, groupValue: value }));
-    }
-  });
-  return nodeOptions;
-}
-// optionsMap flattenOptions
-export function handleOptions(
-  mergedOptions: IOption[],
-  setCacheOptions: (options: IOption[]) => void,
-  updateGroup: (value: boolean) => void
-) {
-  const isGroup = !!mergedOptions.find((v) => Object.prototype.hasOwnProperty.call(v, 'groupValue'));
-  const flattenOptions: IOption[] = [];
-
-  mergedOptions.forEach((option: IOption) => {
-    const { groupLabel: optionGroupLabel, groupValue: optionGroupValue } = option;
-    if (isGroup && !optionGroupValue && !optionGroupLabel) {
-      const ungroupedOption = {
-        ...option,
-        groupLabel: ungroupedOptionLabel,
-        groupValue: ungroupedOptionKey,
-      };
-      flattenOptions.push(ungroupedOption);
-    } else {
-      flattenOptions.push(option);
-    }
-  });
-  updateGroup(isGroup);
-  setCacheOptions(flattenOptions);
-  return {
-    flattenOptions,
-    isGroup,
-  };
-}
-// provide search matching hightlight;
-export const defaultLabelRenderer = (input: string, prefix: string) => (option: IOption, isGroup: boolean): React.ReactNode => {
-  const { title, label } = option;
-  if (isGroup || typeof label !== 'string') { return title || label; }
-  const index = label.indexOf(input);
-  return (
-    <div style={{ display: 'inline-block', lineHeight: '40px' }}>
-      {label.slice(ZERO_INDEX, index)}
-      <span className={`${prefix}-search-highlight`}>{label.slice(index, index + input.length)}</span>
-      {label.slice(index + input.length)}
-    </div>
-  );
-};
-export const defaultOptionLabelRenderer = (value: string | number, option?: IOption) => option?.title || option?.label || value;
-export const defaultSearchPredicate = (input: string) => (o: IOption) => (typeof o.label === 'string' ? o.label.includes(input) : true);
-export const defaultMatchPredicate = (input: string) => (o: IOption) => o.label === input;
-
-export const CustomOption = (value: string | number, withGroup = false, id = customOptionKeyPrefix): IOption => (withGroup
-  ? {
-    value,
-    label: value.toString(),
-    groupValue: id,
-    groupLabel: '自由输入',
-  }
-  : {
-    value,
-    label: value.toString(),
-  });

package/src/Tabs/TabPane.tsx

@@ -1,28 +0,0 @@
-import React, { ReactNode } from 'react';
-import AntdTabs from 'antd/lib/tabs';
-
-const AntdTabPane = AntdTabs.TabPane;
-
-export interface ITabPaneProps {
-  /**
-   * @description 被隐藏时是否渲染 DOM 结构
-   * @default false
-   */
-  forceRender?: boolean;
-  /**
-   * @description 对应 activeKey
-   * @default -
-   */
-  key?: string;
-  /**
-   * @description 选项卡头显示的内容
-   * @default -
-   */
-  tab: ReactNode;
-  className?: string;
-  children?: ReactNode;
-}
-
-export default function TabPane(props: ITabPaneProps) {
-  return <AntdTabPane {...props} />;
-}

package/src/Tabs/demo/adaptHeight/index.less

@@ -1,3 +0,0 @@
-.demo-adapt-height {
-  height: 200px;
-}

package/src/Tabs/demo/adaptHeight/index.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import './index.less';
-
-import { Tabs } from '@aloudata/aloudata-design';
-
-const { TabPane } = Tabs;
-
-export default () => {
-  return (
-    <div className="demo-adapt-height">
-      <Tabs adaptHeight>
-        <TabPane tab="Tab 1" key="1" className="demo-tabpane">
-          Content of Tab Pane 1
-        </TabPane>
-        <TabPane tab="Tab 2" key="2" className="demo-tabpane">
-          <>
-            <div>Content of Tab Pane 2</div>
-            <div>Content of Tab Pane 2</div>
-            <div>Content of Tab Pane 2</div>
-            <div>Content of Tab Pane 2</div>
-            <div>Content of Tab Pane 2</div>
-            <div>Content of Tab Pane 2</div>
-            <div>Content of Tab Pane 2</div>
-            <div>Content of Tab Pane 2</div>
-            <div>Content of Tab Pane 2</div>
-            <div>Content of Tab Pane 2</div>
-            <div>Content of Tab Pane 2</div>
-          </>
-        </TabPane>
-      </Tabs>
-    </div>
-  );
-};

package/src/Tabs/demo/basic/index.less

@@ -1,5 +0,0 @@
-.demo-basic {
-  .tabs-container {
-    height: 100px;
-  }
-}

package/src/Tabs/demo/basic/index.tsx

@@ -1,30 +0,0 @@
-import React, { useState } from 'react';
-import Switch from 'antd/lib/switch';
-import 'antd/lib//switch/style/index.less';
-import './index.less';
-
-import { Tabs } from '@aloudata/aloudata-design';
-
-const { TabPane } = Tabs;
-
-export default () => {
-  const [size, setSize] = useState('default');
-
-  return (
-    <div className="demo-basic">
-      <div>
-        large size: <Switch checked={size === 'large'} onChange={(checked) => setSize(checked ? 'large' : 'default')} />
-      </div>
-      <div className="tabs-container">
-        <Tabs size={size} destroyInactiveTabPane>
-          <TabPane tab="Tab 1" key="1">
-            Content of Tab Pane 1
-          </TabPane>
-          <TabPane tab="Tab 2" key="2">
-            Content of Tab Pane 2
-          </TabPane>
-        </Tabs>
-      </div>
-    </div>
-  );
-};

package/src/Tabs/demo/horizontalScroll/index.less

@@ -1,3 +0,0 @@
-.demo-horizontal-scroll {
-  width: 200px;
-}

package/src/Tabs/demo/horizontalScroll/index.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import './index.less';
-
-import { Tabs } from '@aloudata/aloudata-design';
-
-const { TabPane } = Tabs;
-
-export default () => {
-  return (
-    <div className="demo-horizontal-scroll">
-      <Tabs>
-        <TabPane tab="Tab 1" key="1">
-          Content of Tab Pane 1
-        </TabPane>
-        <TabPane tab="Tab 2" key="2">
-          Content of Tab Pane 2
-        </TabPane>
-        <TabPane tab="Tab 3" key="3">
-          Content of Tab Pane 3
-        </TabPane>
-        <TabPane tab="Tab 4" key="4">
-          Content of Tab Pane 4
-        </TabPane>
-        <TabPane tab="Tab 5" key="5">
-          Content of Tab Pane 5
-        </TabPane>
-        <TabPane tab="Tab 6" key="6">
-          Content of Tab Pane 6
-        </TabPane>
-        <TabPane tab="Tab 7" key="7">
-          Content of Tab Pane 7
-        </TabPane>
-      </Tabs>
-    </div>
-  );
-};

package/src/Tabs/index.md

@@ -1,30 +0,0 @@
----
-# nav:
-#   title: 组件
-#   path: /components
-title: Tabs 标签页
-group:
-  title: 组件
----
-
-# Tabs 标签页
-
-选项卡切换组件
-
-## 代码演示
-
-<code src="./demo/basic" title="基本" description="默认选中第一项">
-
-<code src="./demo/adaptHeight" title="自适应高度" description="自动撑满容器高度，body 内容超出时出现纵向滚动条">
-
-<code src="./demo/horizontalScroll" title="滑动" description="可以左右滑动，容纳更多标签">
-
-## API
-
-### Tabs
-
-<API exports='["default"]' hideTitle />
-
-### Tabs.TabPane
-
-<API exports='["default.TabPane"]' hideTitle />

package/src/Tabs/index.test.tsx

@@ -1,100 +0,0 @@
-import '@testing-library/jest-dom';
-import React from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
-import Tabs from './index';
-import { act } from 'react-dom/test-utils';
-
-const { TabPane } = Tabs;
-
-describe('Tabs', () => {
-  it('activeKey', () => {
-    render(
-      <div className="activeKey">
-        <Tabs activeKey="2">
-          <TabPane tab="tab1" key="1">1</TabPane>
-          <TabPane tab="tab2" key="2">2</TabPane>
-          <TabPane tab="tab3" key="3">3</TabPane>
-        </Tabs>
-      </div>
-    );
-
-    const activeText = document.querySelector('.activeKey .ant-tabs-tabpane-active')?.textContent;
-    expect(activeText).toBe('2');
-  });
-
-  it('defaultActiveKey', () => {
-    render(
-      <div className="defaultActiveKey">
-        <Tabs defaultActiveKey="2">
-          <TabPane tab="tab1" key="1">1</TabPane>
-          <TabPane tab="tab2" key="2">2</TabPane>
-          <TabPane tab="tab3" key="3">3</TabPane>
-        </Tabs>
-      </div>
-    );
-
-    const activeText = document.querySelector('.defaultActiveKey .ant-tabs-tabpane-active')?.textContent;
-    expect(activeText).toBe('2');
-
-    act(() => {
-      fireEvent.click(screen.getByText('tab3'));
-    });
-
-    expect(document.querySelector('.defaultActiveKey .ant-tabs-tabpane-active')?.textContent).toBe('3');
-  });
-
-  it('onChange', () => {
-    let activeKey = '2';
-    render(
-      <div className="onChange">
-        <Tabs activeKey="2" onChange={(key) => { activeKey = key; }}>
-          <TabPane tab="tab1" key="1">1</TabPane>
-          <TabPane tab="tab2" key="2">2</TabPane>
-          <TabPane tab="tab3" key="3">3</TabPane>
-        </Tabs>
-      </div>
-    );
-
-    act(() => {
-      fireEvent.click(screen.getByText('tab3'));
-    });
-
-    expect(activeKey).toBe('3');
-  });
-
-  it('destroyInactiveTabPane', () => {
-    render(
-      <div className="destroyInactiveTabPane">
-        <Tabs defaultActiveKey="2" destroyInactiveTabPane>
-          <TabPane tab="tab1" key="1">1</TabPane>
-          <TabPane tab="tab2" key="2">
-            <div className="tabpane2">2</div>
-          </TabPane>
-          <TabPane tab="tab3" key="3">3</TabPane>
-        </Tabs>
-      </div>
-    );
-
-    expect(document.querySelector('.destroyInactiveTabPane .tabpane2')).not.toBeNull();
-
-    act(() => {
-      fireEvent.click(screen.getByText('tab3'));
-    });
-
-    expect(document.querySelector('.destroyInactiveTabPane .tabpane2')).toBeNull();
-  });
-
-  it('TabPane forceRender', () => {
-    render(
-      <div className="activeKey">
-        <Tabs activeKey="2">
-          <TabPane tab="tab1" key="1">1</TabPane>
-          <TabPane tab="tab2" key="2">2</TabPane>
-          <TabPane tab="tab3" key="3" forceRender>Content3</TabPane>
-        </Tabs>
-      </div>
-    );
-
-    expect(screen.getByText('Content3')).toBeInTheDocument();
-  });
-});