feat: 增加input组件密码可见切换/增加清除输入按钮 (#119)

* fix: fix: 修改交互问题

* fix: fix: 修改交互问题

* fix: fix：修改样式

src/input/_example/clearable.tsx

@@ -0,0 +1,17 @@
+import 'tdesign-web-components/input';
+import 'tdesign-web-components/space';
+import 'tdesign-icons-web-components/esm/components/lock-on';
+
+import { Component } from 'omi';
+
+export default class InputBase extends Component {
+ value1 = 'Welcome to TDesign';
+
+ render() {
+ return (
+ <t-space direction="vertical">
+ <t-input value={this.value1} placeholder="请输入" clearable />
+ </t-space>
+ );
+ }
+}

src/input/_example/password.tsx

@@ -0,0 +1,20 @@
+import 'tdesign-web-components/input';
+import 'tdesign-web-components/space';
+import 'tdesign-icons-web-components/esm/components/lock-on';
+
+import { Component } from 'omi';
+
+export default class InputBase extends Component {
+ value1 = '';
+
+ value2 = 'Welcome to TDesign';
+
+ render() {
+ return (
+ <t-space direction="vertical">
+ <t-input value={this.value1} placeholder="请输入密码" type="password" prefixIcon={<t-icon-lock-on />} />
+ <t-input value={this.value2} placeholder="请输入密码" type="password" prefixIcon={<t-icon-lock-on />} />
+ </t-space>
+ );
+ }
+}

src/input/input.tsx

@@ -1,8 +1,11 @@
 import 'tdesign-icons-web-components/esm/components/close-circle-filled';
+import 'tdesign-icons-web-components/esm/components/browse';
+import 'tdesign-icons-web-components/esm/components/browse-off';
 
-import { Component, createRef, OmiProps, tag } from 'omi';
+import { cloneElement, Component, createRef, OmiProps, tag, VNode } from 'omi';
 
 import classname, { getClassPrefix } from '../_util/classname';
+import { convertToLightDomNode } from '../_util/lightDom';
 import parseTNode from '../_util/parseTNode';
 import { StyledProps, TElement, TNode } from '../common';
 import { InputValue, TdInputProps } from './type';
@@ -90,7 +93,7 @@ export default class Input extends Component<InputProps> {
 
  status: TdInputProps['status'] = 'default';
 
- renderType = '';
+ renderType = 'text';
 
  isFocused = false;
 
@@ -100,6 +103,14 @@ export default class Input extends Component<InputProps> {
 
  eventProps;
 
+ private handlePasswordVisible = (e: MouseEvent) => {
+ e.stopImmediatePropagation();
+ if (this.props.disabled) return;
+ const toggleType = this.renderType === 'password' ? 'text' : 'password';
+ this.renderType = toggleType;
+ this.update();
+ };
+
  private handleChange = (e) => {
  e.stopImmediatePropagation();
  const { maxlength, maxcharacter, allowInputOverMax, status, onValidate, onChange } = this.props;
@@ -158,13 +169,15 @@ export default class Input extends Component<InputProps> {
  };
 
  private handleMouseEnter = (e: MouseEvent) => {
+ e.stopImmediatePropagation();
  const { onMouseenter } = this.props;
  this.isHover = true;
- this.update();
  onMouseenter?.({ e });
+ this.update();
  };
 
  private handleMouseLeave = (e: MouseEvent) => {
+ e.stopImmediatePropagation();
  const { onMouseleave } = this.props;
  this.isHover = false;
  this.update();
@@ -310,20 +323,62 @@ export default class Input extends Component<InputProps> {
  });
 
  const isShowClearIcon = ((clearable && this.value && !disabled) || showClearIconOnEmpty) && this.isHover;
- const prefixIconContent = renderIcon('t', 'prefix', parseTNode(prefixIcon));
- let suffixIconNew = suffixIcon;
 
+ const prefixIconContent = prefixIcon
+ ? renderIcon(
+ 't',
+ 'prefix',
+ cloneElement(parseTNode(convertToLightDomNode(prefixIcon)) as VNode, {
+ className: `${classPrefix}-input__prefix`,
+ style: { marginRight: '0px' },
+ }),
+ )
+ : renderIcon('t', 'prefix', parseTNode(convertToLightDomNode(prefixIcon)));
+ let suffixIconNew = suffixIcon;
+ const cleanMargin = { marginLeft: '0px' };
  if (isShowClearIcon) {
  suffixIconNew = (
  <t-icon-close-circle-filled
  name={'close-circle-filled'}
- class={classname(`${classPrefix}-input__suffix-clear`)}
+ className={classname(
+ `${classPrefix}-input__suffix-clear`,
+ `${classPrefix}-input__suffix`,
+ `${classPrefix}-input__suffix-icon`,
+ )}
+ style={cleanMargin}
  onClick={this.handleClear}
  />
  ) as any;
  }
+ if (props.type === 'password' && typeof suffixIcon === 'undefined') {
+ if (this.renderType === 'password') {
+ suffixIconNew = (
+ <t-icon-browse-off
+ onClick={this.handlePasswordVisible}
+ className={classname(
+ `${classPrefix}-input__suffix-clear`,
+ `${classPrefix}-input__suffix`,
+ `${classPrefix}-input__suffix-icon`,
+ )}
+ style={cleanMargin}
+ />
+ ) as any;
+ } else if (this.renderType === 'text') {
+ suffixIconNew = (
+ <t-icon-browse
+ onClick={this.handlePasswordVisible}
+ className={classname(
+ `${classPrefix}-input__suffix-clear`,
+ `${classPrefix}-input__suffix`,
+ `${classPrefix}-input__suffix-icon`,
+ )}
+ style={cleanMargin}
+ />
+ ) as any;
+ }
+ }
 
- const suffixIconContent = renderIcon('t', 'suffix', parseTNode(suffixIconNew));
+ const suffixIconContent = renderIcon('t', 'suffix', parseTNode(convertToLightDomNode(suffixIconNew)));
  const labelContent = isFunction(label) ? label() : label;
  const suffixContent = isFunction(suffix) ? suffix() : suffix;
 

src/skeleton/skeleton.tsx

@@ -1,11 +1,11 @@
 import isNumber from 'lodash/isNumber';
-import { classNames, Component, createRef,tag } from 'omi';
+import { classNames, Component, createRef, tag } from 'omi';
 
 import { pxCompat } from '../_common/js/utils/helper';
 import { getClassPrefix } from '../_util/classname';
 import parseTNode from '../_util/parseTNode';
 import { StyledProps, Styles, TNode } from '../common';
-import { SkeletonRowCol, SkeletonRowColObj,TdSkeletonProps } from './type';
+import { SkeletonRowCol, SkeletonRowColObj, TdSkeletonProps } from './type';
 
 export type SkeletonProps = TdSkeletonProps & StyledProps & { children: TNode };
 type SkeletonInjection = (props: SkeletonProps) => SkeletonProps;