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

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);

package/src/Select/OptionsList/OptionItem.tsx

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

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

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