Merge branch 'uiwjs:v5' into v5

cuilanxin · Jul 23, 2022 · 6302267 · 6302267
2 parents 7f57107 + 6249b8c
commit 6302267
Show file tree

Hide file tree

Showing 9 changed files with 133 additions and 36 deletions.
diff --git a/package.json b/package.json
@@ -17,8 +17,8 @@
     "watch:react-menu": "lerna exec --scope @uiw/react-menu -- tsbb watch",
     "watch:css:react-menu": "lerna exec --scope @uiw/react-menu -- compile-less -d src -o esm --watch",
     "watch": "lerna exec  --scope @uiw/react-menu -- tsbb watch",
-    "watch2": "lerna exec  --scope @uiw/react-pagination -- tsbb watch",
-    "watch:css": "lerna exec --scope @uiw/react-pagination -- compile-less -d src -o esm --watch",
+    "watch2": "lerna exec  --scope @uiw/react-search-select -- tsbb watch",
+    "watch:css": "lerna exec --scope @uiw/react-search-select -- compile-less -d src -o esm --watch",
     "//-----------": "//-----------",
     "build": "npm run b:uiw && npm run b:css && npm run b:css:dist",
     "start": "lerna exec --scope website -- npm run start",

diff --git a/packages/react-month-picker/package.json b/packages/react-month-picker/package.json
@@ -49,6 +49,7 @@
     "@uiw/react-date-picker": "^4.21.2",
     "@uiw/react-input": "^4.21.2",
     "@uiw/react-popover": "^4.21.2",
-    "@uiw/utils": "^4.21.2"
+    "@uiw/utils": "^4.21.2",
+    "@uiw/react-icon": "^4.21.14"
   }
-}
+}
diff --git a/packages/react-month-picker/src/index.tsx b/packages/react-month-picker/src/index.tsx
@@ -1,12 +1,14 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import Input, { InputProps } from '@uiw/react-input';
+import { InputProps } from '@uiw/react-input';
 import Popover, { PopoverProps } from '@uiw/react-popover';
 import { IProps } from '@uiw/utils';
-import Button from '@uiw/react-button';
+// import Button from '@uiw/react-button';
 import formatter from '@uiw/formatter';
 import { DatePickerMonth, DatePickerYear, DatePickerCaption, DatePickerCaptionProps } from '@uiw/react-date-picker';
-import './style/index.less';
-
+// import './style/index.less';
+import { MonthPickerPopoverBase, MonthPickerInputBase, MonthPickerCloseButton } from './style';
+import { Close } from '@uiw/icons/lib/Close';
+import { IconBase } from '@uiw/react-icon';
 export interface MonthPickerProps extends IProps, Omit<InputProps, 'value' | 'onChange'> {
   popoverProps?: PopoverProps;
   pickerCaptionProps?: DatePickerCaptionProps;
@@ -59,9 +61,9 @@ export default function MonthPicker(props: MonthPickerProps) {
 
   if (allowClear && inputProps.value) {
     inputProps.addonAfter = (
-      <Button
+      <MonthPickerCloseButton
         className={`${prefixCls}-close-btn`}
-        icon="close"
+        icon={<IconBase as={Close} />}
         onClick={() => {
           setDate('');
           onChange && onChange();
@@ -96,7 +98,7 @@ export default function MonthPicker(props: MonthPickerProps) {
       {...popoverProps}
       onVisibleChange={(open) => setIsOpen(open)}
       content={
-        <div className={`${prefixCls}-popover`}>
+        <MonthPickerPopoverBase className={`${prefixCls}-popover`}>
           <DatePickerCaption
             panelDate={panelDate}
             monthLabel={monthLabel}
@@ -124,10 +126,10 @@ export default function MonthPicker(props: MonthPickerProps) {
               onSelected={(year, paging) => handleSelectedDate('setFullYear', year, paging)}
             />
           )}
-        </div>
+        </MonthPickerPopoverBase>
       }
     >
-      <Input
+      <MonthPickerInputBase
         placeholder="请输入日期"
         readOnly
         {...(inputProps as any)}

diff --git a/packages/react-month-picker/src/style/index.less b/packages/react-month-picker/src/style/index.less
@@ -1,27 +1,27 @@
 @monthpicker-prefix: ~'w-monthpicker';
 
 .@{monthpicker-prefix} {
-  display: inline-block;
+  // display: inline-block;
   &-popover {
-    padding: 5px;
-    min-width: 192px;
-    max-width: 192px;
-    font-size: 14px;
-    line-height: 21px;
+    // padding: 5px;
+    // min-width: 192px;
+    // max-width: 192px;
+    // font-size: 14px;
+    // line-height: 21px;
   }
   &.disabled &-close-btn {
-    display: none !important;
+    // display: none !important;
   }
   & &-close-btn {
-    min-height: initial;
-    color: #a5a5a5;
-    cursor: pointer;
-    &:hover {
-      color: #393e48;
-    }
-    &:active,
-    &:hover {
-      background-color: transparent !important;
-    }
+    // min-height: initial;
+    // color: #a5a5a5;
+    // cursor: pointer;
+    // &:hover {
+    //   color: #393e48;
+    // }
+    // &:active,
+    // &:hover {
+    //   background-color: transparent !important;
+    // }
   }
 }
diff --git a/packages/react-month-picker/src/style/index.ts b/packages/react-month-picker/src/style/index.ts
@@ -0,0 +1,45 @@
+import styled, { css } from 'styled-components';
+import { ThemeVariantValueOptions } from '@uiw/utils';
+import Input, { InputProps } from '@uiw/react-input';
+import Button, { ButtonProps } from '@uiw/react-button';
+
+export interface MonthPickerCloseButtonProps extends ButtonProps {}
+
+export const MonthPickerCloseButton = styled(Button)``;
+
+export interface MonthPickerPopoverBaseProps
+  extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
+    ThemeVariantValueOptions {}
+
+export const MonthPickerPopoverBase = styled.div<MonthPickerPopoverBaseProps>`
+  padding: 5px;
+  min-width: 192px;
+  max-width: 192px;
+  font-size: 14px;
+  line-height: 21px;
+`;
+
+export interface MonthPickerInputBase extends InputProps {}
+
+export const MonthPickerInputBase = styled(Input)<MonthPickerInputBase>`
+  display: inline-block;
+  & ${MonthPickerCloseButton} {
+    min-height: initial;
+    fill: #a5a5a5;
+    cursor: pointer;
+    &:hover {
+      fill: #393e48;
+    }
+    &:active,
+    &:hover {
+      background-color: transparent !important;
+    }
+  }
+  ${(props) =>
+    props.disabled &&
+    css`
+      & ${MonthPickerCloseButton} {
+        display: none !important;
+      }
+    `}
+`;
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;
+      }
+    `}
+`;
diff --git a/packages/react-tree-checked/src/index.tsx b/packages/react-tree-checked/src/index.tsx
@@ -1,7 +1,8 @@
 import React, { Fragment } from 'react';
 import Tree, { TreeProps, TreeRenderTitleNode, TreeData } from '@uiw/react-tree';
 import Checkbox, { CheckboxProps } from '@uiw/react-checkbox';
-import './style/index.less';
+// import './style/index.less';
+import { TreeCheckbox } from './style/index';
 
 export interface TreeCheckedProps extends TreeProps {}
 
@@ -24,7 +25,7 @@ export default function TreeChecked({ prefixCls = 'w-treechecked', ...props }: T
         }
         return (
           <Fragment>
-            <Checkbox className={`${prefixCls}-checked`} disabled={node.disabled} {...checkedProps} />
+            <TreeCheckbox as={Checkbox} className={`${prefixCls}-checked`} disabled={node.disabled} {...checkedProps} />
             {item.label && <span className={node.disabledClass}>{item.label}</span>}
           </Fragment>
         );

diff --git a/packages/react-tree-checked/src/style/index.ts b/packages/react-tree-checked/src/style/index.ts
@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+interface TreeCheckedProps {
+  defaultTheme?: Record<string, string | number>;
+}
+
+export const TreeCheckbox = styled.div<TreeCheckedProps>`
+  margin-right: 5px;
+`;