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

package/src/Input/index.tsx

@@ -1,91 +0,0 @@
-import React, { ReactNode } from 'react';
-import {Input as AntdInput} from 'antd';
-import type { ShowCountProps, InputProps } from 'antd/lib/input/Input';
-import { SizeType } from 'antd/lib/config-provider/SizeContext';
-import TextArea from './components/TextArea';
-import Password from './components/Password';
-import Group from './components/Group';
-import './style';
-type TSize = 'small' | 'default' | 'large';
-
-type ChangeEventHandler = (e: React.ChangeEvent<HTMLInputElement>) => void;
-export interface IInputProps extends Omit<InputProps, 'size' | 'id' | 'prefix' | 'allowClear' |
-'disabled' | 'showCount' | 'maxLength' |
-'value' | 'defaultValue' | 'onPressEnter' | 'onChange'> {
-  /**
-   * @description 输入框尺寸
-   * @default default
-   * @type 'small' | 'default' | 'large';
-   */
-  size?: TSize;
-  /**
-   * @description 输入框id
-   */
-  id?: string;
-  /**
-   * @description 提示文字
-   */
-  prefix?: ReactNode;
-  /**
-   * @description 带标签的 input，设置前置标签
-   */
-  allowClear?: boolean;
-  /**
-   * @description 可以点击清除图标删除内容
-   * @default true
-   */
-  disabled?: boolean;
-  /**
-   * @description 提示文字
-   * @default false
-   * @type boolean | { formatter: (args: { count: number; maxLength?: number; }) => string; };
-   */
-  showCount?: boolean | ShowCountProps;
-  /**
-   * @description 最大长度
-   */
-  maxLength?: number;
-  /**
-   * @description 输入框内容
-   */
-  value?: string;
-  /**
-   * @description 输入框默认内容
-   */
-  defaultValue?: string;
-  /**
-   * @description 按下回车的回调
-   * @type (e) => void
-   */
-  onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;
-  /**
-   * @description 输入框内容变化时的回调
-   * @type (e: React.ChangeEvent<HTMLInputElement>) => void;
-   */
-  onChange?: ChangeEventHandler;
-}
-// IInputProps 和 InputProps 类型合并，并去除InputProps中的重复属性
-function Input(props: IInputProps) {
-  const { size = 'default', ...rest } = props;
-  const getInputSize = (inputSize: TSize): SizeType => {
-    if (inputSize === 'small' || inputSize === 'large') {
-      return inputSize;
-    }
-    return 'middle';
-  };
-  return (
-    <AntdInput
-      {...rest}
-      size={getInputSize(size)}
-      bordered
-      addonAfter={null}
-      addonBefore={null}
-      suffix={null}
-    />
-  );
-}
-Input.TextArea = TextArea;
-Input.Group = Group;
-Input.Password = Password;
-
-export default Input;

package/src/Input/style/index.ts

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

package/src/Menu/Divider.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import { Menu as AntdMenu } from 'antd';
-import './style';
-
-export interface IMenuDividerProps {
-}
-
-const AntdMenuDivider = AntdMenu.Divider;
-
-export default function Menu(props: IMenuDividerProps) {
-  return <AntdMenuDivider {...props} />;
-}

package/src/Menu/MenuItem.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { Menu as AntdMenu } from 'antd';
-import './style';
-
-export interface IMenuItemProps {
-  /**
-   * @description 唯一标志
-   * @type string | number
-   * @default -
-   */
-  key: React.Key;
-  /**
-   * @description 是否禁用
-   * @default false
-   */
-  disabled?: boolean;
-  children?: React.ReactNode;
-}
-
-const AntdMenuItem = AntdMenu.Item;
-
-export default function Menu(props: IMenuItemProps) {
-  return <AntdMenuItem {...props} />;
-}

package/src/Menu/SubMenu.tsx

@@ -1,37 +0,0 @@
-import classNames from 'classnames';
-import React from 'react';
-import { Menu as AntdMenu } from 'antd';
-import './style';
-
-export interface ISubMenuProps {
-  /**
-   * @description 唯一标志
-   * @type string | number
-   * @default -
-   */
-  key: React.Key;
-  /**
-   * @description 是否禁用
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * @description 子菜单样式
-   * @default -
-   */
-  popupClassName?: string;
-  /**
-   * @description 子菜单项值
-   */
-  title?: React.ReactNode;
-  children?: React.ReactNode | React.ReactNode[];
-}
-
-const AntdSubMenu = AntdMenu.SubMenu;
-
-export default function SubMenu(props: ISubMenuProps) {
-  const { popupClassName, ...otherProps } = props;
-  const OFFSET_WIDTH = 4;
-  const OFFSET_HEIGHT = 0;
-  return <AntdSubMenu popupClassName={classNames(popupClassName, 'ald-submenu')} popupOffset={[OFFSET_WIDTH, OFFSET_HEIGHT]} {...otherProps} />;
-}

package/src/Menu/index.md

@@ -1,36 +0,0 @@
----
-# nav:
-#   title: 组件
-#   path: /components
-title: Menu 导航菜单
-group:
-  title: 组件
----
-
-## Menu 导航菜单
-
-导航的菜单列表
-
-## 代码演示
-
-<code src="../Dropdown/demo/subMenu" title="下拉多级菜单" description="传入的菜单有多个层级">
-
-## API
-
-### Menu
-
-<API exports='["default"]' hideTitle />
-
-### Menu.Item
-
-<API exports='["default.Item"]' hideTitle />
-
-### Menu.SubMenu
-
-<API exports='["default.SubMenu"]' hideTitle />
-
-## 注意
-
-* Menu 元素为 ul，因而仅支持 li 以及 script-supporting 子元素。因而你的子节点元素应该都在 Menu.Item 内使用。
-
-* Menu 需要计算节点结构，因而其子元素仅支持 Menu.* 以及对此进行封装的 HOC 组件。

package/src/Menu/index.test.tsx

@@ -1,144 +0,0 @@
-import '@testing-library/jest-dom';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import React from 'react';
-import { act } from 'react-dom/test-utils';
-import Dropdown from '../Dropdown';
-import Menu from './index';
-
-describe('Menu', () => {
-  it('onClick', async () => {
-    let testKey = '';
-    const onClick = ({ key }: { key: string }) => { testKey = key; };
-    const menuItemText = '1st menu item';
-    const menu = (
-      <Menu onClick={onClick}>
-        <Menu.Item key="1"><span>{menuItemText}</span></Menu.Item>
-        <Menu.Item key="2">2st menu item</Menu.Item>
-      </Menu>
-    );
-
-    await act(async () => {
-      render(<Dropdown overlay={menu} visible><span>trigger</span></Dropdown>);
-      await waitFor(() => {
-        return screen.getByText(menuItemText);
-      });
-    });
-
-    fireEvent.click(screen.getByText(menuItemText));
-    expect(testKey).toEqual('1');
-  });
-
-  it('MenuItem.disabled', async () => {
-    const onClick = jest.fn();
-    const menuItemText = '1st menu item';
-    const menu = (
-      <Menu onClick={onClick}>
-        <Menu.Item key="1" disabled><span>{menuItemText}</span></Menu.Item>
-        <Menu.Item key="2">2st menu item</Menu.Item>
-      </Menu>
-    );
-
-    await act(async () => {
-      render(<Dropdown overlay={menu} visible><span>trigger</span></Dropdown>);
-      await waitFor(() => {
-        return screen.getByText(menuItemText);
-      });
-    });
-
-    fireEvent.click(screen.getByText(menuItemText));
-    expect(onClick).not.toBeCalled();
-  });
-
-  it('SubMenu hover', async () => {
-    const subMenuTitle = 'subMenuTitle';
-    const menuItemText = '1st menu item';
-    const menu = (
-      <Menu>
-        <Menu.SubMenu key="0" title={subMenuTitle}>
-          <Menu.Item key="1"><span>{menuItemText}</span></Menu.Item>
-          <Menu.Item key="2">2st menu item</Menu.Item>
-        </Menu.SubMenu>
-      </Menu>
-    );
-
-    await act(async () => {
-      render(<Dropdown overlay={menu} visible><span>trigger</span></Dropdown>);
-      await waitFor(() => {
-        return screen.getByText(subMenuTitle);
-      });
-    });
-
-    await act(async () => {
-      fireEvent.mouseEnter(screen.getByText(subMenuTitle));
-      await waitFor(() => {
-        return screen.getByText(menuItemText);
-      });
-    });
-    expect(screen.getByText(menuItemText)).not.toBeNull();
-  });
-
-  it('SubMenu disabled', async () => {
-    jest.useFakeTimers();
-
-    const subMenuTitle = 'subMenuTitle';
-    const menuItemText = '1st menu item';
-    const menu = (
-      <Menu>
-        <Menu.SubMenu key="0" title={subMenuTitle} disabled>
-          <Menu.Item key="1"><span>{menuItemText}</span></Menu.Item>
-          <Menu.Item key="2">2st menu item</Menu.Item>
-        </Menu.SubMenu>
-      </Menu>
-    );
-
-    await act(async () => {
-      render(<Dropdown overlay={menu} visible><span>trigger</span></Dropdown>);
-      await waitFor(() => {
-        return screen.getByText(subMenuTitle);
-      });
-    });
-
-    act(() => {
-      fireEvent.mouseEnter(screen.getByText(subMenuTitle));
-    });
-    // 等待一段时间，确保 mouseEnterDelay 时间过去
-    const DELAY_TIME = 1000;
-    jest.advanceTimersByTime(DELAY_TIME);
-
-    // 期待二级子菜单不出现
-    expect(screen.queryByText(menuItemText)).toBeNull();
-
-    jest.runOnlyPendingTimers();
-    jest.useRealTimers();
-  });
-
-  it('SubMenu popupClassName', async () => {
-    const subMenuTitle = 'subMenuTitle';
-    const menuItemText = '1st menu item';
-    const popupClassName = 'popupClassName';
-    const menu = (
-      <Menu>
-        <Menu.SubMenu key="0" title={subMenuTitle} popupClassName={popupClassName}>
-          <Menu.Item key="1"><span>{menuItemText}</span></Menu.Item>
-          <Menu.Item key="2">2st menu item</Menu.Item>
-        </Menu.SubMenu>
-      </Menu>
-    );
-
-    await act(async () => {
-      render(<Dropdown overlay={menu} visible><span>trigger</span></Dropdown>);
-      await waitFor(() => {
-        return screen.getByText(subMenuTitle);
-      });
-    });
-
-    await act(async () => {
-      fireEvent.mouseEnter(screen.getByText(subMenuTitle));
-      await waitFor(() => {
-        return screen.getByText(menuItemText);
-      });
-    });
-
-    expect(document.querySelector(`.${popupClassName}`)).not.toBeNull();
-  });
-});

package/src/Menu/index.tsx

@@ -1,27 +0,0 @@
-import classNames from 'classnames';
-import React from 'react';
-import { Menu as AntdMenu} from 'antd';
-import MenuItem from './MenuItem';
-import Divider from './Divider';
-import SubMenu from './SubMenu';
-import type { MenuClickEventHandler } from 'rc-menu/lib/interface';
-import './style';
-
-export interface IMenuProps {
-  /**
-   * @description 点击 MenuItem 调用此函数
-   * @default -
-   */
-  onClick?: MenuClickEventHandler;
-  className?: string;
-  children?: React.ReactNode | React.ReactNode[];
-}
-
-export default function Menu(props: IMenuProps) {
-  const { className, ...otherProps } = props;
-  return <AntdMenu className={classNames(className, 'ald-menu')} {...otherProps} />;
-}
-
-Menu.Item = MenuItem;
-Menu.Divider = Divider;
-Menu.SubMenu = SubMenu;

package/src/Menu/style/index.ts

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

package/src/Select/BaseSelect.tsx

@@ -1,321 +0,0 @@
-import React, { useState, useMemo, useRef, useEffect, ReactText } from 'react';
-import classnames from 'classnames';
-import { filter, isNil, without } from 'lodash';
-import Selector from './Selector';
-import OptionsList from './OptionsList';
-import usePrefixCls from '../_utils/hooks/usePrefixCls';
-import { ISelectProps as SelectProps, IOption as Option, TMaybeArray as MaybeArray, IOptionProps as OptionProps } from './interface';
-import Trigger from 'rc-trigger';
-import {
-  convertChildrenToData,
-  handleOptions,
-  defaultLabelRenderer,
-  defaultSearchPredicate,
-  defaultOptionLabelRenderer,
-  getFlattenOptions,
-} from './utils';
-import useCacheOptions from './hooks/useCacheOption';
-import useControlledState from '../_utils/hooks/useControlledState';
-
-const DEFAULT_LIST_HEIGHT = 256;
-const DEFAULT_ACTIVE_INDEX = -1;
-const ZERO = 0;
-export const Select = (props: SelectProps, ref: React.MutableRefObject<HTMLDivElement>) => {
-  const {
-    size = 'default',
-    options = [],
-    defaultValue = null,
-    value: controlledValue,
-    multiple = false,
-    placeholder,
-    disabled = false,
-    customizePrefixCls,
-    label,
-    className,
-    style,
-    optionStyle,
-    groupStyle,
-    allowClear = false,
-    listHeight = DEFAULT_LIST_HEIGHT,
-    listRowHeight,
-    labelRenderer = defaultLabelRenderer,
-    searchPredicate = defaultSearchPredicate,
-    optionLabelRenderer = defaultOptionLabelRenderer,
-    onChange,
-    onSelect,
-    onClear,
-    getContainer,
-    open,
-    defaultOpen = false,
-    onDropDownVisibleChange,
-    dropDownClassName,
-    dropDownStyle,
-    dropdownMatchSelectWidth = 'width',
-    children,
-  } = props;
-  const prefix = usePrefixCls('select-legacy', customizePrefixCls);
-  const [value, setSelectValue] = useControlledState(controlledValue, defaultValue);
-  const [tempValue, setTempValue] = useState<React.ReactText[]>([]);
-  const [isFocused, setFocused] = useState<boolean>(false);
-  const [_visible, _setVisible] = useState<boolean>(defaultOpen);
-  const visible = isNil(open) ? _visible : open;
-  const setVisible = isNil(onDropDownVisibleChange) ? _setVisible : onDropDownVisibleChange;
-  const [input, setInput] = useState('');
-  const selectRef = useRef<HTMLDivElement>(null);
-  const optionListRef = useRef(null);
-  const selectorRef = ref || selectRef;
-  // empty
-  // keydown
-  const [activeIndex, setActiveIndex] = useState<number>(DEFAULT_ACTIVE_INDEX);
-  const [optionChecked, setOptionChecked] = useState<React.ReactText[]>([]);
-  // Exhibition value (tempvalue + value);
-  const selectorValue = useMemo(() => {
-    if (Array.isArray(value)) {
-      // filter: if v in value and tempValue   no Exhibition
-      return value.concat(tempValue).filter((v) => !value.includes(v) || !tempValue.includes(v));
-    }
-    if (multiple) {
-      return tempValue;
-    }
-    return value;
-  }, [value, multiple, tempValue]);
-
-  useEffect(() => {
-    if (!disabled) {
-      if (visible) {
-        selectorRef?.current?.focus();
-        setFocused(visible);
-      } else {
-        setActiveIndex(DEFAULT_ACTIVE_INDEX);
-        setFocused(visible);
-        // @ts-ignore
-        optionListRef?.current?.onBlur();
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [visible, disabled]);
-  /** merge Option & nodeOption & mergedOptionsMap */
-  // @ts-ignore
-  const nodesToOptions = useMemo<OptionProps[]>(() => convertChildrenToData(children), [children]);
-  const { setCacheOptions, getOptionByValue, getOptionsByValue, updateGroup, hasGroup } = useCacheOptions();
-  const { flattenOptions: mergedFlattenOPtions } = useMemo(
-    // @ts-ignore
-    () => handleOptions([...options, ...nodesToOptions], setCacheOptions, updateGroup),
-    [nodesToOptions, options, setCacheOptions, updateGroup]
-  );
-
-  // input change
-  const onInputChange = (_value: string) => {
-    setInput(_value);
-  };
-  // clear
-  const clearInput = () => setInput('');
-
-  // dropdown visible
-  const onVisibleChange = (optVisible: boolean) => {
-    if (!disabled) {
-      setVisible(optVisible);
-      if (!optVisible) {
-        setTimeout(clearInput, ZERO);
-        selectorRef.current?.blur();
-      }
-    }
-  };
-
-  // tempValue change methods
-  const onTempValueChange = (values: React.ReactText[]) => {
-    // value is array
-    const concatValue = isNil(value)
-      ? values
-      : values.concat(value).filter((v) => !(value as React.ReactText[])?.includes(v) || !values?.includes(v));
-    onChange?.(concatValue, getOptionsByValue(concatValue));
-    onVisibleChange(false);
-    setSelectValue(concatValue);
-    // clear tempValue
-    setTempValue([]);
-  };
-  const deleteValue = (optValue: React.ReactText[], v: React.ReactText) => {
-    return tempValue.includes(v)
-      ? onTempValueChange(without((optValue as MaybeArray<string>) || [], v))
-      : onValueChange(without((optValue as MaybeArray<string>) || [], v));
-  };
-  const setTempValueFC = (tempvalues: React.ReactText[]) => {
-    setTempValue(tempvalues);
-  };
-
-  const onListSelect = (selectedValue: React.ReactText, option: Option) => {
-    if (!multiple) {
-      selectorRef.current?.blur();
-    } else {
-      selectorRef.current?.focus();
-    }
-    onSelect?.(selectedValue, option);
-  };
-
-  const onAllowClearClick = () => {
-    if (input) {
-      clearInput();
-    }
-    onValueChange(!multiple ? null : []);
-    onClear?.();
-  };
-
-  // 选项点击
-  const onOptionClick = (selectValue: React.ReactText) => {
-    const selectedOption = getOptionByValue(selectValue) as Option;
-    const isTempSelected = tempValue.includes(selectValue);
-    const isSelected = !Array.isArray(value) ? value === selectValue : value.includes(selectValue);
-    const isOptionChecked = optionChecked.includes(selectValue);
-    if (!multiple) {
-      onVisibleChange(false);
-    }
-    if (isTempSelected) {
-      setTempValue((tempvalues) => without(tempvalues, selectValue) as unknown as [ReactText]);
-      return;
-    }
-    // 点击的时候已经是被选中
-    if (isSelected) {
-      if (isOptionChecked) {
-        onValueChange(Array.isArray(value) ? without((value as MaybeArray<string>) || [], selectValue) : null);
-        setOptionChecked(without((value as MaybeArray<string>) || [], selectValue));
-      } else {
-        onValueChange(Array.isArray(value) ? [...optionChecked, selectValue] : null);
-        setOptionChecked([...optionChecked, selectValue]);
-      }
-    } else {
-      onListSelect(selectValue, selectedOption);
-      if (Array.isArray(value)) {
-        onValueChange([...value, selectValue]);
-        setOptionChecked([...value, selectValue]);
-      } else {
-        onValueChange(!multiple ? selectValue : [selectValue]);
-        setOptionChecked([selectValue]);
-      }
-    }
-  };
-
-  // search filter InputValue // match input(label === input)
-  const filteredOptions: Option[] = useMemo(
-    () => filter(mergedFlattenOPtions, searchPredicate(input)),
-    [mergedFlattenOPtions, searchPredicate, input]
-  );
-
-  const flattenOptions = useMemo(() => getFlattenOptions(filteredOptions, false), [filteredOptions]);
-  // value other methods
-  const onValueChange = (optValue: MaybeArray<string | number> | null) => {
-    setSelectValue(optValue);
-    if (Array.isArray(optValue) && flattenOptions.length === optValue.length) {
-      setOptionChecked([]);
-    }
-    if (isNil(optValue)) {
-      onChange?.(null, null);
-    } else {
-      onChange?.(optValue, getOptionsByValue(optValue));
-    }
-  };
-  const realSize = useMemo(() => {
-    return ['small', 'default', 'large'].includes(size) ? size : 'default';
-  }, [size]);
-
-  const list = (
-    <>
-      <OptionsList
-        ref={optionListRef}
-        multiple={multiple}
-        prefixCls={prefix}
-        selected={selectorValue}
-        optionChecked={optionChecked}
-        visible={visible}
-        hasGroup={hasGroup}
-        groupStyle={groupStyle}
-        optionStyle={optionStyle}
-        searchType="no-search"
-        placeholder={placeholder}
-        data={flattenOptions as Option[]}
-        labelRenderer={labelRenderer(input, prefix)}
-        value={value}
-        tempValue={tempValue}
-        onOptionClick={onOptionClick}
-        onValueChange={onValueChange}
-        onTempValueChange={onTempValueChange}
-        setTempValue={setTempValueFC}
-        onInputChange={onInputChange}
-        input={input}
-        height={listHeight}
-        getContainer={getContainer}
-        itemHeight={listRowHeight}
-        activeIndex={activeIndex}
-        setActiveIndex={setActiveIndex}
-      />
-    </>
-  );
-
-  return (
-    <Trigger
-      popupVisible={visible}
-      onPopupVisibleChange={onVisibleChange}
-      action={['click']}
-      popupPlacement="bottomLeft"
-      popup={list}
-      prefixCls={prefix}
-      popupClassName={classnames(`${prefix}-dropdown`, dropDownClassName)}
-      popupStyle={dropDownStyle}
-      getPopupContainer={getContainer}
-      stretch={dropdownMatchSelectWidth ? 'width' : 'minWidth'}
-      zIndex={100}
-      builtinPlacements={{
-        left: {
-          points: ['cr', 'cl'],
-        },
-        right: {
-          points: ['cl', 'cr'],
-        },
-        top: {
-          points: ['bc', 'tc'],
-        },
-        bottom: {
-          points: ['tc', 'bc'],
-        },
-        topLeft: {
-          points: ['bl', 'tl'],
-        },
-        topRight: {
-          points: ['br', 'tr'],
-        },
-        bottomRight: {
-          points: ['tr', 'br'],
-        },
-        bottomLeft: {
-          points: ['tl', 'bl'],
-        },
-      }}
-    >
-      <Selector
-        size={realSize}
-        input={input}
-        disabled={disabled}
-        prefix={prefix}
-        multiple={multiple}
-        bordered
-        isFocused={isFocused}
-        className={className}
-        visible={visible}
-        label={label}
-        ref={selectorRef}
-        style={style}
-        allowClear={allowClear}
-        value={selectorValue}
-        filteredOptions={filteredOptions}
-        searchType="no-search"
-        placeholder={placeholder}
-        deleteValue={deleteValue}
-        onAllowClear={onAllowClearClick}
-        optionLabelRenderer={optionLabelRenderer}
-        getOptionByValue={getOptionByValue}
-        onInputChange={onInputChange}
-      />
-    </Trigger>
-  );
-};
-// @ts-ignore
-export default React.forwardRef(Select);