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

package/src/Select/Selector/index.tsx

@@ -1,211 +0,0 @@
-import Icon from '../../Icon';
-import classnames from 'classnames';
-import { isEmpty, isNil } from 'lodash';
-import React, { useRef, useState, useImperativeHandle, useMemo } from 'react';
-import { Tooltip as ToolTip } from 'antd';
-import { ISelectorProps as SelectorProps } from '../interface';
-import OverFLow from 'rc-overflow';
-
-const ZERO = 0;
-const ICON_LARGE_SIZE = 20;
-const ICON_SMALL_SIZE = 16;
-type TSize = 'small' | 'default' | 'large';
-const defaultArrowComponent = (prefix: string, size: TSize) => (
-  <Icon
-    className={`${prefix}-icon-arrow`}
-    size={size === 'large' ? ICON_LARGE_SIZE : ICON_SMALL_SIZE}
-    type="expand_more1"
-  />
-);
-const defaultCloseComponent = (prefix: string, size: TSize) => (
-  <Icon
-    className={`${prefix}-icon-close`}
-    size={size === 'large' ? ICON_LARGE_SIZE : ICON_SMALL_SIZE}
-    type="cancel"
-  />
-);
-
-const Selector: React.ForwardRefRenderFunction<unknown, SelectorProps> = (props, ref) => {
-  const {
-    input,
-    disabled,
-    prefix,
-    size,
-    multiple,
-    bordered,
-    isFocused,
-    className,
-    visible,
-    style,
-    allowClear,
-    label,
-    mode,
-    value,
-    searchType,
-    arrowComponent,
-    closeComponent,
-    placeholder,
-    deleteValue,
-    optionLabelRenderer,
-    getOptionByValue,
-    onInputChange,
-    onAllowClear,
-    filteredOptions,
-    ...rest
-  } = props;
-
-  const inputRef = useRef<HTMLInputElement>(null);
-  const selectorRef = useRef<HTMLDivElement>(null);
-  const selectorAllRef = useRef<HTMLSpanElement>(null);
-  const selectValuesRef = useRef<HTMLDivElement>(null);
-  const [isHovered, setIsHovered] = useState(false);
-  const isEmptyValue = useMemo(() => !isEmpty(value), [value]);
-  const showClose = allowClear && (isEmptyValue || input) && isHovered && !disabled;
-  useImperativeHandle(ref, () => ({
-    clientWidth: selectorRef?.current?.clientWidth,
-    focus: () => {
-      inputRef?.current?.focus();
-    },
-    blur: () => {
-      inputRef?.current?.blur();
-    },
-    onBlur: () => {
-      selectorRef?.current?.blur();
-    },
-    onFocus: () => {
-      selectorRef?.current?.focus();
-    },
-  }));
-
-  const onMouseEnter = () => {
-    if (allowClear) {
-      setIsHovered(true);
-    }
-  };
-  const onMouseLeave = () => {
-    if (allowClear) {
-      setIsHovered(false);
-    }
-  };
-  const onAllClearClick = (e: React.MouseEvent<Element, MouseEvent>) => {
-    e.stopPropagation();
-    if (allowClear) {
-      onAllowClear();
-    }
-  };
-
-  // ========================== render =======================
-  const renderPlaceHolder = () => {
-    if (isEmpty(value) && !input && placeholder) {
-      return <div className={`${prefix}-item ${prefix}-placeholder`}>{placeholder}</div>;
-    }
-    return null;
-  };
-
-  const renderMultipleValue = () => {
-    // @ts-ignore
-    const allValueLabel = (value as Array<string | number>)?.reduce((prev, curr) => {
-      const item = getOptionByValue(curr);
-      if (item) {
-        return [...prev, item?.title || item?.label];
-      }
-      return [...prev, curr];
-    }, []);
-    if (Array.isArray(value) && value.length === filteredOptions.length) {
-      return <span>全部</span>;
-    }
-    const renderItem = (valueItem: string | number) => {
-      return <span>{optionLabelRenderer(valueItem, getOptionByValue(valueItem))}</span>;
-    };
-    const renderRest = (valueItems: Array<string | number>) => {
-      return <span>等{valueItems.length}项</span>;
-    };
-    return !input && !isNil(value) ? (
-      <ToolTip
-        // @ts-ignore
-        title={allValueLabel?.join(',')}
-        placement="bottom"
-        getTooltipContainer={() => selectorRef?.current?.parentElement || document.body}
-      >
-        <OverFLow
-          className={`${prefix}-item-all`}
-          prefixCls={`${prefix}-overflow`}
-          data={value as Array<string | number>}
-          renderItem={renderItem}
-          renderRest={renderRest}
-          maxCount="responsive"
-        />
-      </ToolTip>
-    ) : null;
-  };
-
-  const renderSingleValue = () => {
-    const text = optionLabelRenderer(
-      value as string | number,
-      getOptionByValue(value as string | number),
-    );
-    return !input && (typeof value === 'string' || typeof value === 'number') ? (
-      // <Text>
-      <div className={classnames(`${prefix}-item`)}>
-        <span ref={selectorAllRef} className={classnames(`${prefix}-item-text`)}>
-          {text}
-        </span>
-      </div>
-    ) : // </Text>
-    null;
-  };
-
-  return (
-    <div
-      role={disabled ? undefined : 'combobox'}
-      aria-expanded={visible}
-      aria-controls="expandable"
-      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-      tabIndex={ZERO}
-      className={classnames(
-        `${prefix}`,
-        `${prefix}-${size}`,
-        {
-          [`${prefix}-single`]: !multiple,
-          [`${prefix}-bordered`]: bordered,
-          [`${prefix}-focused`]: isFocused,
-          [`${prefix}-disabled`]: disabled,
-        },
-        className,
-      )}
-      aria-disabled={disabled}
-      aria-hidden="true"
-      style={style}
-      ref={selectorRef}
-      {...rest}
-    >
-      <div
-        className={`${prefix}-selector-wrap`}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-      >
-        {label && <div className={`${prefix}-selector-label`}>{label}</div>}
-        <div className={`${prefix}-selector`}>
-          <div className={classnames(`${prefix}-values-wrapper`)} ref={selectValuesRef}>
-            {multiple ? renderMultipleValue() : renderSingleValue()}
-            {renderPlaceHolder()}
-          </div>
-        </div>
-        <div
-          aria-hidden="true"
-          className={classnames(`${prefix}-arrow`, {
-            [`${prefix}-arrow-focused`]: visible,
-          })}
-          onClick={showClose ? onAllClearClick : undefined}
-        >
-          {showClose
-            ? closeComponent || defaultCloseComponent(prefix, size)
-            : arrowComponent || defaultArrowComponent(prefix, size)}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const ForwardSelector = React.forwardRef(Selector);
-export default ForwardSelector;

package/src/Select/VirtualList.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import List, { ListRef, ListProps } from 'rc-virtual-list';
-import { IOption } from './interface';
-
-const defaultListRowHeight = 44;
-const defaultListHeight = 520;
-
-const VirtualList: React.ForwardRefRenderFunction<ListRef, ListProps<IOption>> = (props, ref) => {
-  const {
-    itemHeight = defaultListRowHeight,
-    height = defaultListHeight,
-    prefixCls,
-    children,
-    data,
-    virtual,
-    itemKey,
-  } = props;
-  return (
-    <List<IOption>
-      itemKey={itemKey}
-      ref={ref}
-      itemHeight={itemHeight}
-      height={height}
-      data={data}
-      virtual={virtual}
-      prefixCls={`${prefixCls}-virtual-list`}
-      fullHeight={false}
-    >
-      {children}
-    </List>
-  );
-};
-
-const RefVirtualList = React.forwardRef(VirtualList);
-
-export default RefVirtualList;

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

@@ -1,44 +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
-        disabled
-        placeholder="large"
-      >
-        <Option key='a' value="Example Text">Example Text</Option>
-      </Select>
-      <Select
-        className='ald-select'
-        style={{ width: 200 }}
-        multiple
-        label='Label:'
-        disabled
-        placeholder="placeholder"
-      >
-        <Option key='a' value="Example Text">Example Text</Option>
-      </Select>
-      <Select
-        className='ald-select'
-        style={{ width: 200 }}
-        multiple
-        size="small"
-        label='Label:'
-        defaultValue={['a', 'b']}
-        disabled
-        placeholder="normal"
-      >
-        <Option key='a' value="a">Example Text</Option>
-        <Option key='b' value="b">Example Text</Option>
-      </Select>
-    </div>
-  )
-}

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

@@ -1,77 +0,0 @@
-import React from "react";
-// import { Select } from '@aloudata/aloudata-design';
-import Select from '../../index'
-import Icon from '../../../Icon'
-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'
-        multiple
-        placeholder="large size"
-      >
-        <Option key='a' value="Example Text">Example TexExample TextExample TextExample TextExample TextExample Textt</Option>
-        <Option key='b' value="b">b</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'
-        label='Label:'
-        multiple
-        listHeight={100}
-        placeholder="default"
-      >
-        <Option key='a' value="Example Text">Example Text</Option>
-        <Option key='b' value="b">b</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='small'
-        multiple
-        value={value}
-        // @ts-ignore
-        onChange={(v)=>{onChange(v)}}
-        placeholder="small"
-      >
-        <Option key='a' value="Example Text">Example Text</Option>
-      </Select>
-      <br/>
-      <Select
-        className='ald-select'
-        style={{ width: 200 }}
-        size='large'
-        multiple
-        label={<Icon type='view_Partial_line' />}
-        placeholder="large size"
-      >
-        <Option key='a' value="Example Text">Example TexExample TextExample TextExample TextExample TextExample Textt</Option>
-        <Option key='b' value="b">b</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>
-    </div>
-  )
-}

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;