@rainbow-oh/yee-c 0.4.3 → 0.4.5

package/src/Select/interface.ts

@@ -105,3 +105,90 @@ export interface SelectProps extends DataAttributeProps {
    */
   onFilter?: (value: string, options: Array<Option>) => Array<Option>;
 }
+
+/**
+ * Props for the internal Option component (renders a single dropdown option).
+ */
+export interface OptionProps {
+  /**
+   * Display label
+   */
+  label: string;
+  /**
+   * Value
+   */
+  value: string | number;
+  /**
+   * Whether disabled
+   */
+  disabled?: boolean;
+  /**
+   * Native title attribute
+   */
+  title?: string;
+  /**
+   * Test id forwarded to the option element
+   */
+  dataTestId?: string;
+}
+
+/**
+ * Context value shared between Options and each Option.
+ */
+export interface OptionsContextValue {
+  prefixCls: string;
+  selectedKeys: Array<string | number>;
+  focusedKey: string | number;
+  multiple: boolean;
+  onSelect: (
+    key: string | number,
+    e?: React.MouseEvent | React.KeyboardEvent,
+  ) => void;
+}
+
+/**
+ * Props for the internal Options (popup list) component.
+ */
+export interface OptionsProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+  /**
+   * Custom class name prefix
+   */
+  prefixCls: string;
+  /**
+   * Dropdown options
+   */
+  options: Array<Option>;
+  /**
+   * Popup container class name
+   */
+  popupClassName?: string;
+  /**
+   * Popup container inline style
+   */
+  popupStyle?: React.CSSProperties;
+  /**
+   * Selected option values
+   */
+  selectedKeys: Array<string | number>;
+  /**
+   * Currently focused option value
+   */
+  focusedKey: string | number;
+  /**
+   * Test id prefix used to generate each option's test id.
+   * Accepts any `data-*` attribute value (see DataAttributeProps).
+   */
+  dataTestId?: string | number | boolean;
+  /**
+   * Whether multiple selection mode is active
+   */
+  multiple: boolean;
+  /**
+   * Callback when an option is selected
+   */
+  onSelect: (
+    key: string | number,
+    e?: React.MouseEvent | React.KeyboardEvent,
+  ) => void;
+}

package/src/Select/option.tsx

@@ -1,11 +1,13 @@
 import clsx from 'clsx';
+import { Check } from 'lucide-react';
 import React, { useContext } from 'react';
 
+import type { OptionProps } from './interface';
 import { OptionsCtx } from './options';
 
-const Option = (props: any) => {
+const Option = (props: OptionProps) => {
   const { label, value, disabled, title, dataTestId } = props;
-  const { prefixCls, selectedKeys, focusedKey, onSelect } =
+  const { prefixCls, selectedKeys, focusedKey, multiple, onSelect } =
     useContext(OptionsCtx);
 
   const handleClick = (e: React.MouseEvent | React.KeyboardEvent) => {
@@ -20,10 +22,12 @@ const Option = (props: any) => {
       ? label
       : undefined;
 
+  const selected = selectedKeys.includes(value);
+
   return (
     <div
       className={clsx(`${prefixCls}-option`, {
-        [`${prefixCls}-option-selected`]: selectedKeys.includes(value),
+        [`${prefixCls}-option-selected`]: selected,
         [`${prefixCls}-option-focused`]: focusedKey === value,
         [`${prefixCls}-option-disabled`]: disabled,
       })}
@@ -39,7 +43,12 @@ const Option = (props: any) => {
       title={htmlTitle}
       data-testid={dataTestId}
     >
-      {label}
+      <div className={`${prefixCls}-option-content`}>{label}</div>
+      {multiple && selected && (
+        <span className={`${prefixCls}-option-state`}>
+          <Check size={16} />
+        </span>
+      )}
     </div>
   );
 };

package/src/Select/options.tsx

@@ -1,54 +1,60 @@
 import clsx from 'clsx';
 import React, { createContext, forwardRef, useRef } from 'react';
 import { useLocale } from '../locale';
+import type { OptionsContextValue, OptionsProps } from './interface';
 import Option from './option';
 
-export const OptionsCtx = createContext({} as any);
+export const OptionsCtx = createContext<OptionsContextValue>(
+  {} as OptionsContextValue,
+);
 
-const Options = forwardRef((props: any, ref: React.Ref<HTMLDivElement>) => {
-  const { locale } = useLocale();
-  const { select } = locale;
+const Options = forwardRef<HTMLDivElement, OptionsProps>(
+  (props, ref: React.Ref<HTMLDivElement>) => {
+    const { locale } = useLocale();
+    const { select } = locale;
 
-  const {
-    prefixCls,
-    options,
-    popupClassName,
-    popupStyle,
-    selectedKeys,
-    focusedKey,
-    dataTestId,
-    onSelect,
-    ...rest
-  } = props;
+    const {
+      prefixCls,
+      options,
+      popupClassName,
+      popupStyle,
+      selectedKeys,
+      focusedKey,
+      dataTestId,
+      multiple,
+      onSelect,
+      ...rest
+    } = props;
 
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const componentRef = ref || useRef<HTMLDivElement>(null);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const componentRef = ref || useRef<HTMLDivElement>(null);
 
-  return (
-    <div
-      {...rest}
-      className={clsx(`${prefixCls}-popup`, popupClassName)}
-      style={popupStyle}
-      ref={componentRef}
-      tabIndex={-1}
-    >
-      {options.length === 0 ? (
-        <div className={`${prefixCls}-empty`}>{select.noData}</div>
-      ) : (
-        <OptionsCtx.Provider
-          value={{ prefixCls, selectedKeys, focusedKey, onSelect }}
-        >
-          {options.map((option: any, index: number) => (
-            <Option
-              {...option}
-              key={option.value}
-              dataTestId={`${dataTestId}-${index}`}
-            />
-          ))}
-        </OptionsCtx.Provider>
-      )}
-    </div>
-  );
-});
+    return (
+      <div
+        {...rest}
+        className={clsx(`${prefixCls}-popup`, popupClassName)}
+        style={popupStyle}
+        ref={componentRef}
+        tabIndex={-1}
+      >
+        {options.length === 0 ? (
+          <div className={`${prefixCls}-empty`}>{select.noData}</div>
+        ) : (
+          <OptionsCtx.Provider
+            value={{ prefixCls, selectedKeys, focusedKey, multiple, onSelect }}
+          >
+            {options.map((option, index: number) => (
+              <Option
+                {...option}
+                key={option.value}
+                dataTestId={`${dataTestId}-${index}`}
+              />
+            ))}
+          </OptionsCtx.Provider>
+        )}
+      </div>
+    );
+  },
+);
 
 export default Options;

package/src/Select/select.tsx

@@ -65,7 +65,10 @@ const Select = (baseprops: SelectProps) => {
     return options.find((opt) => opt.value === keys);
   };
 
-  const handleSelect = (key: string | number, e?: React.MouseEvent) => {
+  const handleSelect = (
+    key: string | number,
+    e?: React.MouseEvent | React.KeyboardEvent,
+  ) => {
     let keys;
     if (single) {
       setMergedValue([key]);
@@ -137,12 +140,12 @@ const Select = (baseprops: SelectProps) => {
   const popup = (
     <Options
       prefixCls={prefixCls}
+      multiple={mode === 'multiple' || mode === 'tags'}
       options={filteredOpts}
       focusedKey={focusedKey}
       selectedKeys={mergedValue}
       dataTestId={rest['data-testid']}
       onSelect={handleSelect}
-      onClose={() => setOpen(false)}
       ref={popupRef}
     />
   );

package/src/Select/style/index.less

@@ -9,12 +9,20 @@
   }
 
   &-option {
+    display: flex;
     padding: var(--yee-select-option-padding);
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     cursor: pointer;
 
+    &-content {
+      flex: 1;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
     &:not(&-disabled):hover {
       background-color: var(--yee-select-option-hover-bg-color);
     }
@@ -33,16 +41,3 @@
     padding: var(--yee-select-option-padding);
   }
 }
-
-// form error status
-.yee-form-item-error {
-  @{pls} {
-    border-color: var(--yee-error-color);
-  }
-}
-
-.yee-form-item-warning {
-  @{pls} {
-    border-color: var(--yee-warning-color);
-  }
-}

package/src/Selector/interface.ts

@@ -39,6 +39,10 @@ export interface PureSelectorProps {
    * In multiple or tags mode, the maximum number of selectable items
    */
   maxCount?: number;
+  /**
+   * size
+   * */
+  size?: 'small' | 'default' | 'large';
   /**
    * Selection mode
    */

package/src/Selector/selector.tsx

@@ -44,6 +44,7 @@ const Selector = React.forwardRef(
       value,
       open,
       loading,
+      size = 'default',
       onSearch,
       onRemove,
       onClear,
@@ -104,6 +105,7 @@ const Selector = React.forwardRef(
 
     const cls = clsx(
       prefixCls,
+      [`${prefixCls}-${size}`],
       [`${prefixCls}-searchable`],
       [`${prefixCls}-${mode || 'single'}`],
       {

package/src/Selector/style/index.less

@@ -5,10 +5,17 @@
   box-sizing: border-box;
   width: 100%;
   padding: var(--yee-selector-padding);
-  border: var(--yee-selector-border-width) solid
-    var(--yee-selector-border-color);
+  border: var(--yee-selector-border-width) solid var(--yee-input-border-color);
   border-radius: var(--yee-selector-border-radius);
 
+  &-small {
+    padding: var(--yee-selector-small-padding);
+  }
+
+  &-large {
+    padding: var(--yee-selector-large-padding);
+  }
+
   &:focus-visible {
     outline: none;
   }
@@ -31,6 +38,13 @@
       line-height: var(--yee-selector-input-line-height);
     }
 
+    @{pls}-selection-item {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding-right: 16px;
+    }
+
     &:focus-within,
     &:focus {
       @{pls}-input-wrapper {
@@ -39,6 +53,10 @@
 
         &.with-input-value {
           opacity: 1;
+
+          & + @{pls}-selection-item {
+            opacity: 0;
+          }
         }
       }
 
@@ -126,7 +144,7 @@
 
   &:not(@{pls}-disabled) {
     &:hover {
-      border-color: var(--yee-selector-hover-border-color);
+      border-color: var(--yee-input-hover-border-color);
     }
   }
 
@@ -187,137 +205,3 @@
     }
   }
 }
-
-.yee-tags-searchable {
-  cursor: text;
-
-  .yee-tags-input-wrapper {
-    width: 100%;
-    padding: 0;
-    border: none;
-    outline: none;
-
-    &:focus {
-      border: none;
-      box-shadow: none;
-    }
-  }
-
-  .yee-tags-icon {
-    width: auto;
-  }
-}
-
-.yee-tags-single-mode {
-  height: var(--yee-tags-height);
-
-  .yee-tags-input-container {
-    position: absolute;
-    z-index: -1;
-    width: 100%;
-    font-size: var(--yee-tags-input-font-size);
-    line-height: var(--yee-tags-input-line-height);
-
-    input {
-      width: 100%;
-    }
-  }
-
-  &.yee-tags-searchable {
-    .yee-tags-single-option {
-      width: 100%;
-    }
-
-    .yee-tags-container {
-      &:focus-within,
-      &:focus {
-        .yee-tags-input-container {
-          z-index: 1;
-          opacity: var(--yee-tags-input-focus-opacity);
-
-          &.has-value {
-            opacity: 1;
-
-            + .yee-tags-single-option {
-              display: none;
-            }
-          }
-        }
-
-        .yee-tags-single-option {
-          opacity: var(--yee-tags-single-option-focus-opacity);
-        }
-      }
-    }
-  }
-}
-
-.yee-tags-multi-mode {
-  height: auto;
-  min-height: var(--yee-tags-multi-min-height);
-
-  &.yee-tags-searchable {
-    .yee-tag {
-      max-width: var(--yee-tags-multi-tag-max-width);
-      height: var(--yee-tags-multi-tag-height);
-    }
-  }
-
-  .yee-tags-container {
-    flex-wrap: wrap;
-  }
-
-  .yee-tags-input-container {
-    display: inline-grid;
-    // color: var(--yee-tags-input-container-font-color);
-    flex: 1 1 auto;
-    grid-area: 1 / 1 / 2 / 3;
-    grid-template-columns: 0 min-content;
-    box-sizing: border-box;
-    height: var(--yee-tags-multi-input-height);
-
-    &::after {
-      grid-area: 1 / 2 / auto / auto;
-      min-width: var(--yee-tags-multi-input-after-min-width);
-      margin: 0;
-      padding: 0;
-      font: inherit;
-      white-space: pre;
-      border: 0;
-      outline: 0;
-      visibility: hidden;
-      content: attr(data-value) ' ';
-    }
-
-    & > input {
-      grid-area: 1 / 2 / auto / auto;
-      width: 100%;
-      min-width: var(--yee-tags-multi-input-min-width);
-      height: var(--yee-tags-multi-input-height);
-      margin: 0;
-      padding: 0;
-      font: inherit;
-      background-color: transparent;
-      border: 0;
-      outline: 0;
-      opacity: 1;
-    }
-  }
-}
-
-// form error status
-.yee-form-item-error {
-  @{pls} {
-    border-color: var(--yee-error-color);
-
-    &:hover {
-      border-color: var(--yee-error-color-hover);
-    }
-  }
-}
-
-.yee-form-item-warning {
-  @{pls} {
-    border-color: var(--yee-warning-color);
-  }
-}

package/src/Splitter/hooks/useMove.ts

@@ -15,13 +15,13 @@ export default function useMove(
   React.useEffect(() => {
     if (!handler.current) return;
     const ele = handler.current as HTMLElement;
-    const onMouseDown = (e: any) => {
+    const onMouseDown = (e: MouseEvent) => {
       e.preventDefault();
       let x = e.pageX;
       let y = e.pageY;
       setMoving(true);
 
-      const onMouseMove = debounce((e: any) => {
+      const onMouseMove = debounce((e: MouseEvent) => {
         document.body.style.userSelect = 'none';
         document.body.style.cursor =
           direction === 'horizontal' ? 'col-resize' : 'row-resize';

package/src/Table/hooks/useFilter.ts

@@ -18,7 +18,7 @@ export default function useFilter({
   const [filterRecords, setFilterRecords] = useState<Array<FilterRecord>>([]);
   const onFilter = ({ value, dataIndex }: FilterOptions) => {
     let newFilterMap = [...filterRecords];
-    if (!value) {
+    if (!value || (Array.isArray(value) && !value.length)) {
       newFilterMap = newFilterMap.filter(
         (item) => item.dataIndex !== dataIndex,
       );

package/src/Table/interface.ts

@@ -520,6 +520,10 @@ export interface TableProps
    * Row class name, unlike classNames, this prop can be set dynamically via a function
    */
   rowClassName?: (record: object) => string;
+  /**
+   * Row style, unlike styles, this prop can be set dynamically via a function
+   */
+  rowStyle?: (record: object) => React.CSSProperties;
   /**
    * Pagination config
    */

package/src/Table/style/index.less

@@ -47,6 +47,8 @@
   }
 
   &-filter {
+    padding: var(--yee-table-filter-popup-padding);
+
     &-trigger {
       display: inline-flex;
       cursor: pointer;

package/src/Table/theader/filter.tsx

@@ -175,8 +175,7 @@ const HeaderFilter = React.memo((props: any) => {
               <Search size={14} strokeWidth={1.5} />
             )
           }
-          // variant={selectNodes.length ? 'filled' : undefined}
-          color="info"
+          variant={selectNodes.length ? 'filled' : undefined}
           type="text"
           size="small"
         />
@@ -188,6 +187,7 @@ const HeaderFilter = React.memo((props: any) => {
     <Popover
       trigger="click"
       placement="bottomRight"
+      className={clsx(`${prefixCls}-filter`)}
       content={popup}
       arrow
       open={open}

package/src/Tabs/demo/basic.tsx

@@ -90,5 +90,11 @@ export default () => {
     },
   ];
 
-  return <Tabs defaultActiveKey="1" items={items} />;
+  return (
+    <Tabs
+      defaultActiveKey="1"
+      items={items}
+      onChange={(key) => console.log(key)}
+    />
+  );
 };

package/src/Tabs/tabs.tsx

@@ -91,9 +91,10 @@ const Tabs: FC<TabsProps> = (baseprops) => {
     if (result === false) {
       return;
     }
-
     setMergedActiveKey(key);
-    onChange?.(key);
+    if (key !== mergedActiveKey) {
+      onChange?.(key);
+    }
   };
 
   const contextValue = useMemo(

package/src/Tag/demo/checkable.tsx

@@ -8,6 +8,7 @@ export default () => {
     <Space>
       <Tag
         checkable
+        variant="outlined"
         checked={checked}
         onChange={(checked) => setChecked(checked)}
       >

package/src/Tag/tag.tsx

@@ -38,7 +38,6 @@ const Tag = forwardRef(
 
     const cls = clsx(
       prefixCls,
-      [`${prefixCls}-${variant}`],
       {
         [`${prefixCls}-${status}`]: status,
         [`${prefixCls}-dashed`]: dashed,
@@ -46,6 +45,7 @@ const Tag = forwardRef(
         [`${prefixCls}-${size}`]: size,
         [`${prefixCls}-checkable`]: checkable,
       },
+      [`${prefixCls}-${variant}`],
       className,
     );
 

package/src/TextArea/style/index.less

@@ -98,20 +98,3 @@
     cursor: not-allowed;
   }
 }
-
-// form error status
-.yee-form-item-error {
-  @{pls} {
-    border-color: var(--yee-error-color);
-
-    &:hover {
-      border-color: var(--yee-error-color-hover);
-    }
-  }
-}
-
-.yee-form-item-warning {
-  @{pls} {
-    border-color: var(--yee-warning-color);
-  }
-}

package/src/Trigger/trigger.tsx

@@ -135,7 +135,7 @@ const Trigger: FC<TriggerProps> = (baseprops) => {
   return (
     <RcTrigger
       {...rest}
-      prefixCls="yee-trigger"
+      prefixCls={prefixCls}
       mouseEnterDelay={mouseEnterDelay}
       mouseLeaveDelay={mouseLeaveDelay}
       arrow={arrow}