feat:add Input.Password (#16)

matto49 · web-flow · commit a810d3e02f55 · 2023-07-10T22:27:45.000+08:00
diff --git a/package.json b/package.json
@@ -17,4 +17,4 @@
   "dependencies": {
     "core-js": "^3.25.1"
   }
-}
+}
diff --git a/packages/demo/src/components/Input/demo/Password.tsx b/packages/demo/src/components/Input/demo/Password.tsx
@@ -0,0 +1,18 @@
+import { Button, Input } from 'pivot-design';
+import React, { useState } from 'react';
+
+const App: React.FC = () => {
+  const [visible, setVisible] = useState(false);
+  return (
+    <>
+      <Input.Password placeholder="请输入" />
+      <div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
+        <Input.Password visibilityToggle={{ visible, onVisibleChange: setVisible }} placeholder="不可选中" />
+        <Button size="middle" onClick={() => setVisible(!visible)}>
+          Show
+        </Button>
+      </div>
+    </>
+  );
+};
+export default App;
diff --git a/packages/demo/src/components/Input/index.mdx b/packages/demo/src/components/Input/index.mdx
@@ -13,4 +13,9 @@
 <div className="title">固定前缀和后缀</div>
 <CodeBlock line={'5-7'}>
   <Prepend/>
-</CodeBlock>
+</CodeBlock>
+
+<div className="title">密码框</div>
+<CodeBlock line={'5-7'}>
+  <Password/>
+</CodeBlock>
diff --git a/packages/design-icon/Icon/icon-svg/passwordHidden.tsx b/packages/design-icon/Icon/icon-svg/passwordHidden.tsx
@@ -0,0 +1,18 @@
+const PasswordHidden: React.FC<any> = (props) => {
+  return (
+    <svg
+      viewBox="0 0 1024 1024"
+      focusable="false"
+      data-icon="eye-invisible"
+      width={props.size ?? '16'}
+      height={props.size ?? '16'}
+      fill={props.color ?? 'currentColor'}
+      aria-hidden="true"
+    >
+      <path d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"></path>
+      <path d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"></path>
+    </svg>
+  );
+};
+
+export default PasswordHidden;
diff --git a/packages/design-icon/Icon/icon-svg/passwordShow.tsx b/packages/design-icon/Icon/icon-svg/passwordShow.tsx
@@ -0,0 +1,17 @@
+const PasswordHidden: React.FC<any> = (props) => {
+  return (
+    <svg
+      viewBox="0 0 1024 1024"
+      focusable="false"
+      data-icon="eye"
+      width={props.size ?? '16'}
+      height={props.size ?? '16'}
+      fill={props.color ?? 'currentColor'}
+      aria-hidden="true"
+    >
+      <path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"></path>
+    </svg>
+  );
+};
+
+export default PasswordHidden;
diff --git a/packages/design-icon/Icon/iconComponent.tsx b/packages/design-icon/Icon/iconComponent.tsx
@@ -13,6 +13,7 @@ const Icon: React.FC<IconProps> = (props) => {
     [`${prefix}-icon-${theme}`]: theme,
     [`${prefix}-icon-rotate`]: rotate,
   });
+  console.log(Icons, iconName, 'name');
 
   return (
     <>
diff --git a/packages/design-icon/Icon/icons-svg.tsx b/packages/design-icon/Icon/icons-svg.tsx
@@ -4,5 +4,7 @@ import Close from './icon-svg/close';
 import DefautError from './icon-svg/defautError';
 import Warning from './icon-svg/warning';
 import Search from './icon-svg/search';
+import PasswordHidden from './icon-svg/passwordHidden';
+import PasswordShow from './icon-svg/passwordShow';
 
-export { Loading, Back, Close, DefautError, Warning, Search };
+export { Loading, Back, Close, DefautError, Warning, Search, PasswordHidden, PasswordShow };
diff --git a/packages/design-icon/Icon/icons/PasswordHidden.tsx b/packages/design-icon/Icon/icons/PasswordHidden.tsx
@@ -0,0 +1,7 @@
+import Icon from '../iconComponent';
+
+const Loading: React.FC<any> = (props) => {
+  return <Icon icon="PasswordHidden" {...props} />;
+};
+
+export default Loading;
diff --git a/packages/design-icon/Icon/icons/PasswordVisible.tsx b/packages/design-icon/Icon/icons/PasswordVisible.tsx
@@ -0,0 +1,7 @@
+import Icon from '../iconComponent';
+
+const Loading: React.FC<any> = (props) => {
+  return <Icon icon="PasswordVisible" {...props} />;
+};
+
+export default Loading;
diff --git a/packages/design-icon/Icon/index.tsx b/packages/design-icon/Icon/index.tsx
@@ -4,5 +4,6 @@ import DefautError from './icons/DefautError';
 import Loading from './icons/Loading';
 import Search from './icons/Search';
 import Warning from './icons/Warning';
+import Icon from './iconComponent';
 
-export { Back, Close, DefautError, Loading, Search, Warning };
+export { Back, Close, DefautError, Loading, Search, Warning, Icon };
diff --git a/packages/design-props/components/input.ts b/packages/design-props/components/input.ts
@@ -1,4 +1,4 @@
-import { ChangeEvent } from 'react';
+import React, { ChangeEvent } from 'react';
 import { PivotDesignProps } from '.';
 
 type InputSize = 'lg' | 'sm' | 'md';
@@ -27,7 +27,7 @@ export interface InputProps extends PivotDesignProps, HTMLInputElement {
    * @description 右侧悬浮图标
    * @default undefined
    */
-  icon?: string;
+  icon?: string | React.ReactNode;
   /**
    * @version 1.0.0
    * @description 固定前缀
@@ -59,3 +59,27 @@ export interface InputProps extends PivotDesignProps, HTMLInputElement {
    */
   value?: string;
 }
+
+interface VisibilityToggle {
+  /**
+   * @version 1.0.0
+   * @description 密码是否可见
+   * @default false
+   */
+  visible: boolean;
+  /**
+   * @version 1.0.0
+   * @description 点击密码icon后的回调函数
+   * @default undefined
+   */
+  onVisibleChange?: (visible: boolean) => void;
+}
+
+export interface InputPasswdProps extends InputProps {
+  /**
+   * @version 1.0.0
+   * @description 控制密码Input的内容
+   * @default false
+   */
+  visibilityToggle?: VisibilityToggle | boolean;
+}
diff --git a/packages/design-props/index.ts b/packages/design-props/index.ts
@@ -1,7 +1,7 @@
-export type { ButtonProps } from './components/button';
+export * from './components/button';
 export type { DraggableItemProps } from './components/draggable';
 export type { IconProps } from './components/icon';
-export type { InputProps } from './components/input';
+export * from './components/input';
 export { CardProps } from './components/card';
 export { DraggableListProps, DraggableItemProps } from './components/draggableList';
-export { SkeletonProps } from './components/skeleton';
+export { SkeletonProps } from './components/skeleton';
diff --git a/packages/design/components/Input/Input.tsx b/packages/design/components/Input/Input.tsx
@@ -3,12 +3,17 @@ import classNames from 'classnames';
 import { InputProps } from 'pivot-design-props';
 import './index.scss';
 import { prefix } from '../constants';
-import { Search } from 'pivot-design-icon';
+import { Icon } from 'pivot-design-icon';
 
 export const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
   const { disabled, size, icon, prepend, append, onClick, style, onChange, iconOnClick, value, ...restProps } = props;
   const [inputValue, setInputValue] = useState(value);
 
+  function getIcon(): React.ReactNode {
+    if (typeof icon !== 'string') return icon;
+    else return <Icon icon={icon}></Icon>;
+  }
+
   const classes = classNames([`${prefix}-input-wrapper`], {
     [`${prefix}-input-size-${size}`]: size,
     // 'is-disabled': disabled,
@@ -24,11 +29,10 @@ export const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
         <div
           className={`${prefix}-icon-wrapper`}
           onClick={() => {
-            console.log(1);
             iconOnClick?.();
           }}
         >
-          <Search />
+          {getIcon()}
         </div>
       )}
       <input
diff --git a/packages/design/components/Input/Password.tsx b/packages/design/components/Input/Password.tsx
@@ -0,0 +1,28 @@
+import React, { forwardRef, useState } from 'react';
+import classNames from 'classnames';
+import Input from './Input';
+import { InputPasswdProps } from 'pivot-design-props';
+
+export const Password = forwardRef<HTMLInputElement, InputPasswdProps>((props, ref) => {
+  const { visibilityToggle = false } = props;
+  let [isVisible, setIsVisible] = useState(false);
+  if (visibilityToggle == true) setIsVisible(true);
+  else if (typeof visibilityToggle == 'object') {
+    isVisible = visibilityToggle.visible;
+    setIsVisible = visibilityToggle.onVisibleChange;
+  }
+
+  const icon = isVisible ? 'PasswordShow' : 'PasswordHidden';
+  const type = isVisible ? 'text' : 'password';
+
+  const iconOnClick = () => {
+    setIsVisible(!isVisible);
+  };
+
+  const omittedProps = { ...props, icon, type, iconOnClick };
+  return <Input ref={ref} {...omittedProps} />;
+});
+
+Password.displayName = 'Password';
+
+export default Password;
diff --git a/packages/design/components/Input/index.scss b/packages/design/components/Input/index.scss
@@ -3,7 +3,6 @@
 .#{$prefix}-input-wrapper {
   display: flex;
   width: 100%;
-  margin-bottom: 20px;
   position: relative;
   .#{$prefix}-icon-wrapper {
     position: absolute;
diff --git a/packages/design/components/Input/index.ts b/packages/design/components/Input/index.ts
@@ -0,0 +1,15 @@
+import InternelInput from './Input';
+import Password from './Password';
+import React from 'react';
+import { InputProps } from 'pivot-design-props';
+
+interface ComputedComponent
+  extends React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>> {
+  Password: typeof Password;
+}
+
+const Input = InternelInput as ComputedComponent;
+
+Input.Password = Password;
+
+export default Input;

Original file line number	Diff line number	Diff line change
`@@ -17,4 +17,4 @@`
`17`	`17`	`"dependencies": {`
`18`	`18`	`"core-js": "^3.25.1"`
`19`	`19`	`}`
`20`		`-}`
	`20`	`+}`