@aloudata/aloudata-design 0.1.0-beta1

package/src/Select/BaseSelect.tsx

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

package/src/Select/OptionsList/OptGroup.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { IOptGroupProps } from '../interface';
+
+export interface IOptionGroupFC extends React.FC<IOptGroupProps> {
+  isSelectOptGroup: boolean;
+}
+const OptGroup: IOptionGroupFC = () => null;
+OptGroup.isSelectOptGroup = true;
+export default OptGroup;

package/src/Select/OptionsList/OptionItem.tsx

@@ -0,0 +1,151 @@
+import React from 'react';
+import { isNull, noop } from 'lodash';
+import classnames from 'classnames';
+import { IOption as Option, TMaybeArray as MaybeArray } from '../interface';
+import { Tooltip, Checkbox } from 'antd';
+import Icon from '../../Icon';
+
+const FIRST_INDEX = 0;
+const INVALID_INDEX = -1;
+interface IGroupProps {
+  option: Option;
+  prefixCls: string;
+  groupStyle?: React.CSSProperties;
+}
+
+interface ITooltipProps {
+  render: JSX.Element & React.ReactNode;
+  getContainer?: (node: HTMLElement) => HTMLElement;
+  tooltip?: string;
+}
+
+interface IOptionProp {
+  option: Option;
+  selected: MaybeArray<string | number> | null | undefined;
+  prefixCls?: string;
+  labelRenderer: (option: Option, isGruop: false) => React.ReactNode;
+  onOptionClick?: (selectedValue: string | number) => void;
+  index: number;
+
+  optionStyle?: React.CSSProperties;
+  multiple?: boolean;
+  // children?: React.ReactNode;
+  activeIndex: number;
+  setActiveIndex: React.Dispatch<React.SetStateAction<number>>;
+}
+
+// ================= RenderGroup =====================
+const RenderGroup: React.ForwardRefRenderFunction<unknown, IGroupProps> = (props, ref) => {
+  const {
+    option: { value, label },
+    prefixCls,
+    groupStyle,
+  } = props;
+
+  return (
+    <div ref={ref as React.LegacyRef<HTMLDivElement>} className={`${prefixCls}-list-group`} style={groupStyle}>
+      {label !== undefined ? label : value}
+    </div>
+  );
+};
+export const RenderLabelIcon = ({
+  isSelected = false,
+  multiple = false,
+  disabled = false,
+  prefixCls,
+  isIndeterminate = false
+}: { isSelected: boolean, multiple: boolean, disabled?: boolean, prefixCls?: string, isIndeterminate?: boolean }) => {
+  if (multiple) {
+    return (
+      <div className={`${prefixCls}-list-option-icon`} key={`${String(isSelected)}`}>
+        <Checkbox
+          className={`${prefixCls}-list-option-icon-checkbox`}
+          checked={isSelected}
+          disabled={disabled}
+          onChange={noop}
+          indeterminate={isIndeterminate}
+        />
+      </div>
+    );
+  }
+  if (isSelected) {
+    return (
+      <div className={`${prefixCls}-list-option-icon`} key={`${String(isSelected)}`}>
+        <Icon type="check" size={16} />
+      </div>
+    );
+  }
+  return null;
+};
+// ================= RenderOption =====================
+const RenderOption: React.ForwardRefRenderFunction<unknown, IOptionProp> = (props, ref) => {
+  const {
+    option: { value, disabled, tooltip, groupValue, groupLabel, label, ...restOption },
+    selected,
+    onOptionClick,
+    labelRenderer,
+    prefixCls,
+    optionStyle,
+    multiple,
+    index,
+    activeIndex,
+    setActiveIndex,
+  } = props;
+  const isSelected = typeof selected === 'string' || typeof selected === 'number' || isNull(selected) || typeof selected === 'undefined'
+    ? selected === value
+    : selected.includes(value);
+  const onClick = (e: React.MouseEvent) => {
+    onOptionClick?.(value);
+    e.preventDefault();
+  };
+  const labelNode = labelRenderer(
+    {
+      value,
+      disabled,
+      tooltip,
+      groupValue,
+      groupLabel,
+      label,
+      ...restOption,
+    },
+    false
+  );
+  return (
+    <div ref={ref as React.LegacyRef<HTMLDivElement>} className={`${prefixCls}-list-option-container`} style={optionStyle}>
+      <div
+        onMouseEnter={() => setActiveIndex(index)}
+        onMouseLeave={() => setActiveIndex(INVALID_INDEX)}
+        className={classnames(`${prefixCls}-list-option`, {
+          [`${prefixCls}-list-option-isSelected`]: isSelected,
+          [`${prefixCls}-list-option-isHover`]: !disabled && index === activeIndex,
+          [`${prefixCls}-list-option-disabled`]: disabled,
+          [`${prefixCls}-list-option-nomargin`]: index === FIRST_INDEX,
+        })}
+        onClick={disabled ? undefined : onClick}
+        onKeyDown={noop}
+        aria-hidden="true"
+      >
+        <RenderLabelIcon isSelected={isSelected} multiple={!!multiple} disabled={!!disabled} prefixCls={prefixCls} />
+        {labelNode}
+      </div>
+    </div>
+  );
+};
+
+// ================= RenderTooltip =====================
+const RenderTooltip: React.ForwardRefRenderFunction<unknown, ITooltipProps> = (props, ref) => {
+  const { tooltip, render, getContainer } = props;
+  if (tooltip) {
+    return (
+      <div ref={ref as React.LegacyRef<HTMLDivElement>}>
+        <Tooltip title={tooltip} destroyTooltipOnHide placement="right" getTooltipContainer={getContainer}>
+          <div>{render}</div>
+        </Tooltip>
+      </div>
+    );
+  }
+  return <div ref={ref as React.LegacyRef<HTMLDivElement>}>{render}</div>;
+};
+export const ForwardRenderGroup = React.forwardRef(RenderGroup);
+export const ForwardRenderOption = React.forwardRef(RenderOption);
+export const ForwardRenderTooltip = React.forwardRef(RenderTooltip);

package/src/Select/OptionsList/Options.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { IOptionProps } from '../interface';
+
+export interface IOptionFC extends React.FC<IOptionProps> {
+  isSelectOption: boolean;
+}
+const Option: IOptionFC = () => null;
+
+Option.isSelectOption = true;
+
+export default Option;

package/src/Select/OptionsList/index.tsx

@@ -0,0 +1,169 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import React, { LegacyRef, useCallback, useImperativeHandle, useMemo, useRef, useEffect } from 'react';
+import classnames from 'classnames';
+import { ListRef } from 'rc-virtual-list';
+import VirtualList from '../VirtualList';
+import { IOptionsListProps, IOption } from '../interface';
+import { ForwardRenderGroup, ForwardRenderOption, ForwardRenderTooltip, RenderLabelIcon } from './OptionItem';
+
+const ZERO_LENGTH = 0;
+const DEFAULT_ACTIVE_INDEX = -1;
+const OptionsList: React.ForwardRefRenderFunction<unknown, IOptionsListProps> = (props, ref) => {
+  const {
+    input,
+    prefixCls,
+    data,
+    groupStyle,
+    height,
+    itemHeight,
+    selected,
+    optionChecked,
+    // searchType,
+    tempValue,
+    value,
+    placeholder,
+    notFoundContent,
+    onValueChange,
+    onTempValueChange,
+    setTempValue,
+    onInputChange,
+    onOptionClick,
+    activeIndex,
+    multiple,
+    visible,
+    style,
+    setActiveIndex,
+    ...restProps
+  } = props;
+
+  const selectAllRef = useRef(null);
+  const OptionListRef = useRef<HTMLDivElement>(null);
+  const VirtualListRef = useRef<ListRef>(null);
+  useImperativeHandle(ref, () => ({
+    onConfirm: () => {
+      onConfirm();
+    },
+    onCancel: () => {
+      onCancel();
+    },
+    onFocus: () => {
+      OptionListRef?.current?.focus();
+    },
+    onBlur: () => {
+      OptionListRef?.current?.blur();
+    },
+    scrollIntoView: (index: number, offset?: number) => {
+      scrollIntoView(index, offset);
+    },
+  }));
+  const filterflattenOptions = useMemo(
+    () => data.filter((filterOption: IOption) => !filterOption.isSelectOptGroup),
+    [data]
+  );
+
+  // 有选中值
+  const isChecked = useMemo(() => (selected as [])?.length >= 1, [selected]);
+  // 部分选中
+  // 全部列表选项选中
+  const isAllChecked = isChecked && (selected as [])?.length === filterflattenOptions?.length;
+  // ”全部“选项是否选中
+  const allOptionChecked = isAllChecked && (Array.isArray(optionChecked) && optionChecked.length === ZERO_LENGTH);
+  // 点击全选
+  const onAllClick = useCallback(() => {
+    onValueChange?.(
+      allOptionChecked
+        ? null
+        : filterflattenOptions.reduce((prev: Array<number | string>, curr: IOption) => [...prev, curr.value], [])
+    );
+  }, [allOptionChecked, filterflattenOptions, onValueChange]);
+  useEffect(() => {
+    if (!visible && !allOptionChecked && multiple && Array.isArray(selected) && selected.length === filterflattenOptions?.length) {
+      onAllClick();
+    }
+  }, [visible, selected, multiple, filterflattenOptions, onAllClick, allOptionChecked]);
+  const onSingleOptionClick = useCallback((selectedValue: string | number) => {
+    onOptionClick?.(selectedValue);
+  }, [onOptionClick]);
+
+  const onConfirm = useCallback(() => onTempValueChange(tempValue), [onTempValueChange, tempValue]);
+  const onCancel = useCallback(() => onTempValueChange([]), [onTempValueChange]);
+
+  const scrollIntoView = (index: number, offset?: number) => {
+    VirtualListRef?.current?.scrollTo({ index, offset });
+  };
+  // 渲染”全部“选项
+  const renderAllOptions = () => (
+    <div
+      ref={selectAllRef}
+      className={classnames(
+        `${prefixCls}-list-option-all`,
+        { [`${prefixCls}-list-option-all-isSelected`]: isChecked }
+      )}
+      onClick={(e) => {
+        e.stopPropagation();
+        onAllClick();
+      }}
+      aria-hidden="true"
+    >
+      <RenderLabelIcon isSelected={allOptionChecked} multiple prefixCls={prefixCls} />
+      全部
+    </div>
+  );
+  return (
+    <div
+      className={`${prefixCls}-list`}
+      style={style}
+      ref={OptionListRef as LegacyRef<HTMLDivElement>}
+      role="list"
+      aria-hidden="true"
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+      tabIndex={0}
+      onMouseLeave={() => setActiveIndex(DEFAULT_ACTIVE_INDEX)}
+    >
+      {/* {searchType === 'inner' && (
+        <div className={classnames(`${prefixCls}-list-search-bar`, {})}>
+          <SearchBar onChange={onInputChange} value={input} placeholder={placeholder} />
+        </div>
+      )} */}
+      {multiple && renderAllOptions()}
+      {data.length > ZERO_LENGTH ? (
+        <VirtualList
+          itemKey="key"
+          prefixCls={prefixCls}
+          ref={VirtualListRef}
+          data={data}
+          height={height}
+          itemHeight={itemHeight}
+          {...restProps}
+        >
+          {(option: IOption, index: number) => (option.isSelectOptGroup ? (
+            <ForwardRenderGroup option={option} prefixCls={prefixCls} groupStyle={groupStyle} />
+          ) : (
+            <ForwardRenderTooltip
+              tooltip={option?.tooltip}
+              render={(
+                <ForwardRenderOption
+                  option={option}
+                  prefixCls={prefixCls}
+                  selected={optionChecked}
+                  index={index}
+                  activeIndex={activeIndex}
+                  multiple={multiple}
+                  onOptionClick={onSingleOptionClick}
+                  setActiveIndex={setActiveIndex}
+                  {...restProps}
+                />
+              )}
+            />
+          ))}
+        </VirtualList>
+      ) : (
+        notFoundContent
+      )}
+    </div>
+  );
+};
+
+const ForwardRenderOptionList = React.forwardRef(OptionsList);
+
+export default ForwardRenderOptionList;