@aloudata/aloudata-design 0.1.0-beta1

package/src/Select/Selector/index.tsx

@@ -0,0 +1,211 @@
+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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1,77 @@
+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

@@ -0,0 +1,63 @@
+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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,67 @@
+/* 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

@@ -0,0 +1,72 @@
+---
+# 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

@@ -0,0 +1,23 @@
+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;