feat(select-input): 完成select-input&优化popup (#146)

* fix(icon): 修复icon不居中显示和class重复设置问题

* fix(icon): 修复icon不居中显示和class重复设置问题

* fix(icon): 修复icon不居中显示和class重复设置问题

* fix(watermark): 修复watermark无法生成水印及其它展示问题

* fix(message): 临时使用console代替

* feat(select-input): 增加select-input组件

* refactor(input): restore input

* perf(popup): 优化popup dom结构

* feat(popup): 优化popup

* feat(input-select): add input-select

* fix(omi-transition): 动画enter、leave多次同时运行问题修复

* feat(select-input): add select-input

* feat(select-input): add select-input

* feat(select-input): 去除--force

* feat(select-input): 优化css字符串

package.json

@@ -65,7 +65,7 @@
     "copy-to-clipboard": "^3.3.3",
     "lodash": "~4.17.15",
     "omi": "^7.7.1",
-    "omi-transition": "^0.1.8",
+    "omi-transition": "^0.1.10",
     "tailwind-merge": "^2.2.1",
     "tdesign-icons-web-components": "^0.1.4"
   },

site/sidebar.config.ts

@@ -154,6 +154,13 @@ export default [
         path: '/components/range-input',
         component: () => import('tdesign-web-components/range-input/README.md'),
       },
+      {
+        title: 'SelectInput 筛选器输入框',
+        name: 'select-input',
+        docType: 'form',
+        path: '/components/select-input',
+        component: () => import('tdesign-web-components/select-input/README.md'),
+      },
       {
         title: 'TagInput 标签输入框',
         name: ' tag-input',

src/_util/useControlled.ts

@@ -0,0 +1,53 @@
+import upperFirst from 'lodash/upperFirst';
+import { Component, setActiveComponent, signal, SignalValue } from 'omi';
+
+export interface ChangeHandler<T, P extends any[]> {
+  (value: T, ...args: P);
+}
+
+type Defaultoptions<T extends string> = `default${Capitalize<T>}`;
+
+type ToString<T extends string | number | symbol> = T extends string ? T : `${Extract<T, number>}`;
+
+const useControlled: <P extends any[], R extends object, K extends keyof R>(
+  props: R,
+  valueKey: K,
+  onChange: ChangeHandler<R[K], P>,
+  defaultOptions?: {
+    [key in Defaultoptions<ToString<K>>]?: R[K];
+  } & { [key: string]: any; activeComponent?: Component },
+) => [SignalValue<R[K]> | R[K], ChangeHandler<R[K], P>] = (
+  // eslint-disable-next-line default-param-last
+  props = {} as any,
+  valueKey,
+  onChange,
+  defaultOptions = {},
+) => {
+  // 外部设置 props，说明希望受控
+  const controlled = Reflect.has(props, valueKey);
+  // 受控属性
+  const value = props[valueKey];
+  // 约定受控属性的非受控 key 为 defaultXxx，某些条件下要在运行时确定 defaultXxx 则通过 defaultOptions 来覆盖
+  const defaultValue =
+    defaultOptions[`default${upperFirst(valueKey as string)}`] || props[`default${upperFirst(valueKey as string)}`];
+
+  // 受控模式
+  if (controlled) return [value, onChange || (() => {})];
+
+  // 无论是否受控，都要维护一个内部变量，默认值由 defaultValue 控制
+  const internalValue = signal(defaultValue);
+  if (defaultOptions.activeComponent) {
+    setActiveComponent(defaultOptions.activeComponent);
+  }
+
+  // 非受控模式
+  return [
+    internalValue.value,
+    (newValue, ...args) => {
+      internalValue.value = newValue;
+      onChange?.(newValue, ...args);
+    },
+  ];
+};
+
+export default useControlled;

src/button/button.tsx

@@ -32,6 +32,7 @@ export default class Button extends Component<ButtonProps> {
     content: [String, Object],
     onClick: Function,
     ignoreAttributes: Array,
+    innerStyle: String,
   };
 
   static defaultProps = {
@@ -73,7 +74,6 @@ export default class Button extends Component<ButtonProps> {
   render(props: ButtonProps) {
     const {
       icon,
-      className,
       variant,
       size,
       block,
@@ -84,10 +84,14 @@ export default class Button extends Component<ButtonProps> {
       ignoreAttributes,
       children,
       suffix,
+      innerClass,
+      innerStyle,
       ...rest
     } = props;
 
     delete rest.onClick;
+    delete rest.className;
+    delete rest.style;
 
     const classPrefix = getClassPrefix();
 
@@ -104,7 +108,7 @@ export default class Button extends Component<ButtonProps> {
     return (
       <Tag
         className={classname(
-          className,
+          innerClass,
           [
             `${classPrefix}-button`,
             `${classPrefix}-button--theme-${this.theme}`,
@@ -121,6 +125,7 @@ export default class Button extends Component<ButtonProps> {
           },
         )}
         onClick={this.clickHandle}
+        style={innerStyle}
         {...rest}
       >
         {iconNode ? iconNode : null}

src/checkbox/checkbox-group.tsx

@@ -1,7 +1,8 @@
 import { intersection, isObject, isString, isUndefined, toArray } from 'lodash';
 import { bind, Component, signal, tag, VNode } from 'omi';
 
-import { getClassPrefix } from '../_util/classname.ts';
+import classname, { getClassPrefix } from '../_util/classname.ts';
+import { convertToLightDomNode } from '../_util/lightDom.ts';
 import { StyledProps, TNode } from '../common';
 import { CheckboxContextKey } from './checkbox';
 import {
@@ -182,22 +183,33 @@ export default class CheckboxGroup extends Component<CheckboxGroupProps> {
     const classPrefix = getClassPrefix();
     let children = null;
     if (this.props.options?.length) {
-      children = this.optionList?.map((option, index) => (
-        <t-checkbox
-          key={`${option.value || ''}${index}`}
-          {...option}
-          index={index}
-          checked={this.tChecked?.includes(option.value)}
-          data={option}
-        ></t-checkbox>
-      ));
+      children = this.optionList?.map((option, index) => {
+        const { isLightDom, ...rest } = option;
+        const checkbox = (
+          <t-checkbox
+            key={`${option.value || ''}${index}`}
+            {...rest}
+            index={index}
+            checked={this.tChecked?.includes(option.value)}
+            data={option}
+          ></t-checkbox>
+        );
+        if (isLightDom) {
+          return convertToLightDomNode(checkbox);
+        }
+        return checkbox;
+      });
     } else {
       this.innerOptionList.value = this.getOptionListBySlots();
       children = this.props.children;
     }
 
     return (
-      <div class={`${classPrefix}-checkbox-group`} role="group" aria-label="checkbox-group">
+      <div
+        class={classname(`${classPrefix}-checkbox-group`, this.props.className)}
+        role="group"
+        aria-label="checkbox-group"
+      >
         {children}
       </div>
     );

src/checkbox/index.ts

@@ -10,4 +10,6 @@ export type CheckboxGroupProps = TdCheckboxGroupProps;
 export const Checkbox = _Checkbox;
 export const CheckboxGroup = _Group;
 
+export * from './type';
+
 export default Checkbox;

src/checkbox/type.ts

@@ -42,6 +42,10 @@ export interface TdCheckboxProps {
    * 多选框的值
    */
   value?: string | number | boolean;
+  /**
+   * 是否去除 t-checkbox 的shadowdom，只在group中生效
+   */
+  isLightDom?: boolean;
   /**
    * 值变化时触发
    */

src/common.ts

@@ -18,6 +18,10 @@ export type Styles = Record<string, string | number>;
 export interface StyledProps {
   className?: string;
   style?: Styles;
+  // shadowDom内部根节点的class
+  innerClass?: string;
+  // shadowDom内部根节点的style
+  innerStyle?: Styles;
 }
 
 /**

src/common/portal.tsx

@@ -68,6 +68,10 @@ export default class Portal extends Component<PortalProps> {
     this.parentElement?.appendChild?.(this.container);
   }
 
+  uninstall(): void {
+    this.parentElement?.removeChild?.(this.container);
+  }
+
   render() {
     const { children } = this.props;
     return render(children, this.container);

src/index.ts

@@ -27,6 +27,7 @@ export * from './popup';
 export * from './progress';
 export * from './radio';
 export * from './range-input';
+export * from './select-input';
 export * from './skeleton';
 export * from './slider';
 export * from './space';

src/input/_example/base.tsx

@@ -12,6 +12,7 @@ export default class InputBase extends Component {
     return (
       <t-space direction="vertical" style={{ width: 500 }}>
         <t-input
+          value={this.value1}
           placeholder="请输入内容（无默认值）"
           onChange={(value) => {
             this.value1 = value;