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

package/src/Select/demo/options/index.tsx

@@ -1,63 +0,0 @@
-import React from "react";
-// import { Select } from '@aloudata/aloudata-design';
-import Select from '../../index'
-const Option = Select.Option;
-export default () => {
-  return (
-    <div className='ald-select-demo'>
-      
-      <Select
-        className='ald-select'
-        style={{ width: 200 }}
-        size='large'
-        multiple
-        placeholder="large"
-        options={[
-          {
-            label: 'Option 1',
-            value: 'Option 1'
-          },
-          {
-            label: 'Option 2',
-            value: 'Option 2'
-          }
-        ]}
-      />
-      <Select
-        className='ald-select'
-        style={{ width: 200 }}
-        multiple
-        label='Label:'
-        placeholder="placeholder"
-        options={[
-          {
-            label: 'Option 1',
-            value: 'Option 1'
-          },
-          {
-            label: 'Option 2',
-            value: 'Option 2'
-          }
-        ]}
-      />
-      <Select
-        className='ald-select'
-        style={{ width: 200 }}
-        multiple
-        size="small"
-        label='Label:'
-        placeholder="normal"
-        options={[
-          {
-            label: 'Option 1',
-            value: 'Option 1'
-          },
-          {
-            label: 'Option 2',
-            value: 'Option 2'
-          }
-        ]}
-      />
-    </div>
-  )
-}

package/src/Select/demo/single/index.tsx

@@ -1,50 +0,0 @@
-import React from "react";
-// import { Select } from '@aloudata/aloudata-design';
-import Select from '../../index'
-const Option = Select.Option;
-export default () => {
-  const [value, setValue] = React.useState('');
-  const onChange = (value: string) => {
-    console.log(value);
-    setValue(value);
-  }
-  return (
-    <div className='ald-select-demo'>
-      <Select
-        className='ald-select'
-        style={{ width: 200 }}
-        size='large'
-        allowClear
-        placeholder="large size"
-      >
-        <Option key='a' value="Example Text">Example Text</Option>
-        <Option key='b' value="b">Menu item</Option>
-        <Option key='c' value="c">c</Option>
-        <Option key='d' value="d">d</Option>
-        <Option key='e' value="e">e</Option>
-        <Option key="f" value="f">f</Option>
-        <Option key="g" value="g">g</Option>
-      </Select>
-      <Select
-        className='ald-select'
-        style={{ width: 200 }}
-        size='default'
-        placeholder="default"
-      >
-        <Option key='a' value="Example Text">Example Text</Option>
-      </Select>
-      <Select
-        className='ald-select'
-        style={{ width: 200 }}
-        size='small'
-        label='Label:' 
-        placeholder="small"
-        value={value}
-        // @ts-ignore
-        onChange={(v)=>{onChange(v)}}
-      >
-        <Option key='a' value="Example Text">Example Text</Option>
-      </Select>
-    </div>
-  )
-}

package/src/Select/hooks/useCacheOption.ts

@@ -1,67 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import { useCallback, useRef, useState } from 'react';
-import { TMaybeArray, IOption } from '../interface';
-
-const optionSet = (map: Map<string | number, IOption>, key: string | number, value: IOption) => {
-  map.set(key, value);
-};
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const groupOptionSet = (map: Map<string | number, any>, key: string | number, option: IOption) => {
-  if (map.get(key)) {
-    const { options: groupOptions = new Map(), ...rest } = map.get(key);
-    map.set(key, {
-      options: groupOptions.set(option.value, option),
-      ...rest,
-    });
-  } else {
-    map.set(key, {
-      label: option.groupLabel,
-      value: option.groupValue,
-      isSelectOptGroup: true,
-      options: new Map([[option.value, option]]),
-    });
-  }
-  map.set(option.value, option);
-};
-
-export default function useCacheOptions() {
-  const cacheOptions = useRef(new Map());
-  const cacheOptionsMap = cacheOptions.current;
-  const [isGroup, setIsGroup] = useState(false);
-  const setCacheOptions = (options: IOption[]) => {
-    if (!isGroup) {
-      options.forEach((option: IOption) => optionSet(cacheOptionsMap, option.value, option));
-    } else {
-      options.forEach((option: IOption) => groupOptionSet(cacheOptionsMap, option.groupValue as string | number, option));
-    }
-  };
-
-  const updateGroup = (value: boolean) => {
-    if (value !== isGroup) {
-      setIsGroup(value);
-    }
-  };
-  // value to option || options
-  const getOptionByValue = useCallback(
-    (optValue: string | number): IOption => cacheOptionsMap.get(optValue),
-    [cacheOptionsMap]
-  );
-
-  const getOptionsByValue = (optValue: TMaybeArray<string | number>): TMaybeArray<IOption> => (Array.isArray(optValue)
-    ? optValue.reduce((prev: IOption[], v) => {
-      const op = getOptionByValue(v);
-      if (op) {
-        prev.push(op);
-      }
-      return prev;
-    }, [])
-    : getOptionByValue(optValue));
-  return {
-    setCacheOptions,
-    getOptionByValue,
-    getOptionsByValue,
-    updateGroup,
-    cacheOptionsMap,
-    hasGroup: isGroup,
-  };
-}

package/src/Select/index.md

@@ -1,72 +0,0 @@
----
-# nav:
-#   title: 组件
-#   path: /components
-title: Select 选择器
-group:
-  title: 组件
----
-
-# Select 选择器
-
-下拉选择器
-
-## 代码演示
-
-<code src="./demo/single/index.tsx" title="单项选择"/>
-<code src="./demo/multiple/index.tsx" title="多项选择"/>
-<code src="./demo/disabled/index.tsx" title="禁用" description="使用disabled={true}可以禁用下拉选择框"/>
-<code src="./demo/options/index.tsx" title="options">
-
-
-## API
-
-### Select
-
-<API src="./BaseSelect.tsx" >
-
-### Select.Option
-TODO: 待补充
-
-## 类型定义
-```
-type TMayBeArray<T> = T | T[];
-
-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;
-}
-```

package/src/Select/index.tsx

@@ -1,23 +0,0 @@
-import BaseSelect from './BaseSelect';
-import { IOption as Option, ISelectProps as SelectProps, IOptGroupProps as OptGroupProps, IOptionProps as OptionProps } from './interface';
-import Options from './OptionsList/Options';
-import OptGroup from './OptionsList/OptGroup';
-import './style';
-
-export type TSelect = typeof BaseSelect & {
-  Group: typeof OptGroup;
-  Option: typeof Options;
-};
-const Select = BaseSelect as TSelect;
-
-Select.Option = Options;
-Select.Group = OptGroup;
-export {
-  Options as Option,
-  OptGroup as Group,
-  SelectProps,
-  OptionProps,
-  Option as SelectOptions,
-  OptGroupProps as GroupProps,
-};
-export default Select;

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} />;
-}