refactor(in-code): 重构in-code组件样式 (#883,#845)

uiwjs · Jul 23, 2022 · 6249b8c · 6249b8c
1 parent 461820a
commit 6249b8c
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 4 deletions.
diff --git a/packages/react-pin-code/src/index.tsx b/packages/react-pin-code/src/index.tsx
@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { IProps, noop } from '@uiw/utils';
 import Input, { InputProps } from '@uiw/react-input';
-import './style/input.less';
+// import './style/input.less';
+import { DivWrap, InputWrap } from './style';
 
 export interface PinCodeProps extends IProps {
   value?: string[];
@@ -78,7 +79,7 @@ function InternalPinCode(props: PinCodeProps = {}, ref: React.ForwardedRef<HTMLD
   }
 
   return (
-    <div className={cls} style={style} {...otherProps} ref={ref}>
+    <DivWrap className={cls} style={style} {...otherProps} ref={ref}>
       {[...values].map((val, key) => {
         const inpProps: InputProps = {
           min: 0,
@@ -99,7 +100,7 @@ function InternalPinCode(props: PinCodeProps = {}, ref: React.ForwardedRef<HTMLD
           inpProps.autoFocus = true;
         }
         const child = (
-          <Input
+          <InputWrap
             ref={(instance) => {
               if (instance) {
                 input[key] = instance;
@@ -111,7 +112,7 @@ function InternalPinCode(props: PinCodeProps = {}, ref: React.ForwardedRef<HTMLD
         );
         return child;
       })}
-    </div>
+    </DivWrap>
   );
 }
 

diff --git a/packages/react-pin-code/src/style/index.ts b/packages/react-pin-code/src/style/index.ts
@@ -0,0 +1,38 @@
+import styled, { css } from 'styled-components';
+import Input, { InputProps, InputBase } from '@uiw/react-input';
+
+// React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+export const DivWrap = styled.div`
+  display: flex;
+`;
+
+export const InputWrap = styled(Input)<InputProps>`
+  width: 30px;
+  & + & {
+    margin-left: 8px;
+  }
+  > ${InputBase} {
+    text-align: center;
+    padding: 0 !important;
+    font-size: 14px;
+    font-weight: bold;
+  }
+
+  ${(props) =>
+    props?.size === 'large' &&
+    css`
+      width: 36px;
+      ${InputBase} {
+        font-size: 16px;
+      }
+    `}
+
+  ${(props) =>
+    props?.size === 'small' &&
+    css`
+      width: 24px;
+      ${InputBase} {
+        font-size: 12px;
+      }
+    `}
+`;