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

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;

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