@rainbow-oh/yee-c 0.8.17 → 0.8.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rainbow-oh/yee-c",
-  "version": "0.8.17",
+  "version": "0.8.18",
   "description": "yee basic components",
   "keywords": [
     "react",

package/src/Select/demo/loading.tsx

@@ -0,0 +1,28 @@
+import { Select, Space } from '@rainbow-oh/yee-c';
+import React from 'react';
+
+const options = [
+  { label: 'Apple', value: 'apple' },
+  { label: 'Banana', value: 'banana' },
+  { label: 'Orange', value: 'orange' },
+];
+
+export default () => {
+  return (
+    <Space direction="vertical">
+      <Select
+        loading
+        options={options}
+        style={{ width: 200 }}
+        placeholder="Loading"
+      />
+      <Select
+        loading
+        disabled
+        defaultValue="apple"
+        options={options}
+        style={{ width: 200 }}
+      />
+    </Space>
+  );
+};

package/src/Select/index.en-US.md

@@ -17,6 +17,7 @@ Select component for choosing from a set of options.
 <code src="./demo/basic.tsx" title="Basic" description="Basic usage of Select"></code>
 <code src="./demo/size.tsx" title="Size" description="Different sizes of Select"></code>
 <code src="./demo/disabled.tsx" title="Disabled" description="Disabled Select"></code>
+<code src="./demo/loading.tsx" title="Loading" description="Loading Select, optionally combined with disabled"></code>
 <code src="./demo/allowClear.tsx" title="Allow Clear" description="Allow clear selected value"></code>
 <code src="./demo/multiple.tsx" title="Multiple" description="Multiple selection mode"></code>
 <code src="./demo/search.tsx" title="Search" description="Searchable Select"></code>
@@ -39,6 +40,7 @@ Select component for choosing from a set of options.
 | defaultValue | `string \| number \| Array<string \| number>` | Default value | - |
 | value | `string \| number \| Array<string \| number>` | Controlled value | - |
 | disabled | `boolean` | Whether disabled | - |
+| loading | `boolean` | Whether data is loading; displays a spinner in the selector suffix | `false` |
 | placeholder | `string` | Placeholder text | - |
 | placement | `'top' \| 'bottom' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight'` | Dropdown position | - |
 | searchable | `boolean` | Whether searchable | - |

package/src/Select/index.zh-CN.md

@@ -17,6 +17,7 @@ toc: 'content'
 <code src="./demo/basic.tsx" title="基础用法" description="Select的基础用法"></code>
 <code src="./demo/size.tsx" title="尺寸" description="不同尺寸的Select"></code>
 <code src="./demo/disabled.tsx" title="禁用" description="禁用的Select"></code>
+<code src="./demo/loading.tsx" title="加载中" description="加载中的 Select，可与 disabled 组合使用"></code>
 <code src="./demo/allowClear.tsx" title="可清除" description="可清除已选值"></code>
 <code src="./demo/multiple.tsx" title="多选" description="多选模式"></code>
 <code src="./demo/search.tsx" title="可搜索" description="可搜索的Select"></code>
@@ -39,6 +40,7 @@ toc: 'content'
 | defaultValue | `string \| number \| Array<string \| number>` | 默认值 | - |
 | value | `string \| number \| Array<string \| number>` | 受控值 | - |
 | disabled | `boolean` | 是否禁用 | - |
+| loading | `boolean` | 是否处于加载状态，加载时选择框后缀显示加载图标 | `false` |
 | placeholder | `string` | 选择框默认文本 | - |
 | placement | `'top' \| 'bottom' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight'` | 下拉框弹出位置 | - |
 | searchable | `boolean` | 是否可搜索 | - |

package/src/Select/interface.ts

@@ -1,7 +1,6 @@
-import type { TriggerProps } from '../Trigger';
 import type { SelectorProps } from '../Selector';
+import type { TriggerProps } from '../Trigger';
 import type { DataAttributeProps } from '../utils/types';
-
 export type Option = {
   /**
    * Whether disabled
@@ -26,7 +25,10 @@ export type Option = {
 };
 
 export interface SelectProps
-  extends DataAttributeProps, Pick<SelectorProps, 'size'>, Omit<TriggerProps, 'popup' | 'children'> {
+  extends
+    DataAttributeProps,
+    Pick<SelectorProps, 'size'>,
+    Omit<TriggerProps, 'popup' | 'children'> {
   /**
    * Custom class name prefix
    * */
@@ -60,6 +62,11 @@ export interface SelectProps
    * Whether disabled
    */
   disabled?: boolean;
+  /**
+   * Whether data is loading
+   * @default false
+   */
+  loading?: boolean;
   /**
    * Placeholder text for the select box
    */

package/src/Select/select.tsx

@@ -51,6 +51,7 @@ const Select = (baseprops: SelectProps) => {
     defaultValue,
     optionFilterProp = 'label',
     disabled,
+    loading,
     onChange,
     onFilter,
     virtual,
@@ -233,6 +234,7 @@ const Select = (baseprops: SelectProps) => {
         value={searchValue}
         options={options}
         disabled={disabled}
+        loading={loading}
         selectedKeys={mergedValue}
         onOpenChange={handleOpenChange}
         onClear={handleClear}

package/src/Selector/selector.tsx

@@ -224,7 +224,16 @@ const Selector = React.forwardRef(
       return (
         <span className={`${prefixCls}-arrow`}>
           {loading ? (
-            <Spin size="small" />
+            <Spin
+              variant="ring"
+              size="small"
+              style={
+                {
+                  '--m-indicator-dot-bg-color':
+                    'var(--yee-text-color-secondary)',
+                } as React.CSSProperties
+              }
+            />
           ) : suffix ? (
             typeof suffix === 'function' ? (
               suffix()

package/src/TableSelect/index.en-US.md

@@ -43,6 +43,7 @@ A component for selecting one or more options from table data, combining feature
 | value | `SelectionKeyType \| SelectionKeyType[]` | Controlled value | - |
 | defaultValue | `SelectionKeyType \| SelectionKeyType[]` | Default value | - |
 | disabled | `boolean` | Whether disabled | - |
+| loading | `boolean` | Whether data is loading; displays a gray loading indicator | `false` |
 | placement | `'bottomLeft' \| 'topLeft'` | Popup placement | `'bottomLeft'` |
 | searchable | `boolean` | Whether searchable | `true` |
 | searchOnInput | `boolean` | Whether to search while typing | `true` |

package/src/TableSelect/index.zh-CN.md

@@ -43,6 +43,7 @@ toc: 'content'
 | value | `SelectionKeyType \| SelectionKeyType[]` | 受控值 | - |
 | defaultValue | `SelectionKeyType \| SelectionKeyType[]` | 默认值 | - |
 | disabled | `boolean` | 是否禁用 | - |
+| loading | `boolean` | 是否处于加载状态，加载时显示灰色加载图标 | `false` |
 | placement | `'bottomLeft' \| 'topLeft'` | 弹出层位置 | `'bottomLeft'` |
 | searchable | `boolean` | 是否可搜索 | `true` |
 | searchOnInput | `boolean` | 是否边输入边搜索 | `true` |

package/src/TableSelect/interface.ts

@@ -131,6 +131,11 @@ export interface TableSelectProps
    * Whether disabled
    */
   disabled?: boolean;
+  /**
+   * Whether data is loading
+   * @default false
+   */
+  loading?: boolean;
   /**
    * Input direction (for special scenarios)
    */

package/src/TableSelect/table-select.tsx

@@ -37,6 +37,7 @@ const TableSelect = (baseprops: TableSelectProps) => {
     defaultValue,
     placement = 'bottomLeft',
     disabled,
+    loading,
     rowSelection,
     dataSource,
     rowKey = 'id',
@@ -175,6 +176,7 @@ const TableSelect = (baseprops: TableSelectProps) => {
     options: selectorOptions,
     open: open,
     disabled: disabled,
+    loading: loading,
     value: searchValue,
     selectedKeys: mergedValue,
     onSearch: handleSearch,

package/src/TreeSelect/index.en-US.md

@@ -37,6 +37,7 @@ Tree selection control.
 | defaultValue | `string \| number \| Array<string \| number>` | Default selected value | - |
 | value | `string \| number \| Array<string \| number>` | Selected value (controlled) | - |
 | disabled | `boolean` | Disable the component | - |
+| loading | `boolean` | Whether data is loading; displays a gray loading indicator | `false` |
 | placeholder | `string` | Placeholder text | - |
 | placement | `'top' \| 'bottom' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight'` | Dropdown placement | `'bottomLeft'` |
 | searchable | `boolean` | Enable search functionality | `true` |

package/src/TreeSelect/index.zh-CN.md

@@ -37,6 +37,7 @@ toc: 'content'
 | defaultValue | `string \| number \| Array<string \| number>` | 默认值 | - |
 | value | `string \| number \| Array<string \| number>` | 受控值 | - |
 | disabled | `boolean` | 是否禁用 | - |
+| loading | `boolean` | 是否处于加载状态，加载时显示灰色加载图标 | `false` |
 | placeholder | `string` | 选择框默认文本 | - |
 | placement | `'top' \| 'bottom' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight'` | 下拉框弹出位置 | `'bottomLeft'` |
 | searchable | `boolean` | 是否可搜索 | `true` |

package/src/TreeSelect/interface.ts

@@ -37,6 +37,11 @@ export interface TreeSelectProps<T = any>
    * Whether disabled
    */
   disabled?: boolean;
+  /**
+   * Whether data is loading
+   * @default false
+   */
+  loading?: boolean;
   /**
    * Placeholder text for the select box
    */

package/src/TreeSelect/tree-select.tsx

@@ -32,6 +32,7 @@ const TreeSelect = <T extends Record<string, unknown> = any>(
     defaultValue,
     checkable = false,
     multiple = false, // eslint-disable-line @typescript-eslint/no-unused-vars
+    loading,
     optionLabelProp = 'label',
     onChange,
     onFilter,
@@ -242,6 +243,7 @@ const TreeSelect = <T extends Record<string, unknown> = any>(
         mode={mode}
         value={searchValue}
         options={selectedOptions}
+        loading={loading}
         selectedKeys={mergedValue}
         onOpenChange={handleOpenChange}
         onClear={handleClear}

package/src/version.ts

@@ -4,7 +4,7 @@ declare global {
   }
 }
 
-export const version = "0.8.17";
+export const version = "0.8.18";
 
 if (typeof window !== 'undefined') {
   window.__yee_c_version__ = version;