type: Support TypeScript v5.

uiwjs · Sep 19, 2023 · 768b841 · 768b841
1 parent 533e760
commit 768b841
Show file tree

Hide file tree

Showing 7 changed files with 128 additions and 120 deletions.
diff --git a/README-zh.md b/README-zh.md
diff --git a/package.json b/package.json
@@ -4,25 +4,25 @@
   "homepage": "https://uiwjs.github.io",
   "private": true,
   "scripts": {
-    "lib": "lerna exec --scope @uiw/react-descriptions -- tsbb build --target react",
-    "lib:css": "lerna exec --scope @uiw/react-descriptions -- compile-less -d src -o esm",
-    "lib:css:dist": "lerna exec --scope @uiw/react-descriptions -- compile-less -d src -o lib --combine=dist.css",
-    "lib:css:watch": "lerna exec --scope @uiw/react-descriptions -- compile-less -d src -o esm --watch",
-    "lib:watch": "lerna exec --scope @uiw/react-descriptions -- tsbb watch & npm run lib:css:watch",
-    "lib:bootstrap": "lerna bootstrap --hoist --scope @uiw/react-descriptions",
+    "lib": "lerna exec --scope @uiw/react-slider -- tsbb build \"src/*.{ts,tsx}\" --use-babel --cjs cjs",
+    "lib:css": "lerna exec --scope @uiw/react-slider -- compile-less -d src -o esm",
+    "lib:css:dist": "lerna exec --scope @uiw/react-slider -- compile-less -d src -o lib --combine=dist.css",
+    "lib:css:watch": "lerna exec --scope @uiw/react-slider -- compile-less -d src -o esm --watch",
+    "lib:watch": "lerna exec --scope @uiw/react-slider -- tsbb watch \"src/*.{ts,tsx}\" --use-babel --cjs cjs & npm run lib:css:watch",
+    "lib:bootstrap": "lerna bootstrap --hoist --scope @uiw/react-slider",
     "lib:build": "npm run lib && npm run lib:css && npm run lib:css:dist",
     "//>>>>>>>>>>>>": "<<<<<<<<<<",
-    "watch:other:lib": "lerna exec --parallel --scope @uiw/* --ignore @uiw/doc -- tsbb watch",
-    "watch:uiw": "lerna exec --scope uiw -- tsbb watch",
-    "watch:react-menu": "lerna exec --scope @uiw/react-menu -- tsbb watch",
+    "watch:other:lib": "lerna exec --parallel --scope @uiw/* --ignore @uiw/doc -- tsbb watch \"src/*.{ts,tsx}\" --use-babel --cjs cjs",
+    "watch:uiw": "lerna exec --scope uiw -- tsbb watch \"src/*.{ts,tsx}\" --use-babel --cjs cjs",
+    "watch:react-menu": "lerna exec --scope @uiw/react-menu -- tsbb watch \"src/*.{ts,tsx}\" --use-babel --cjs cjs",
     "watch:css:react-menu": "lerna exec --scope @uiw/react-menu -- 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",
     "doc": "npm run b:website && npm run b:doc",
     "b:website": "lerna exec --scope website -- npm run build",
     "b:doc": "lerna exec --scope @uiw/doc -- node script/released.js",
-    "b:uiw": "lerna exec --scope @uiw/* --scope uiw --ignore @uiw/doc -- tsbb build",
+    "b:uiw": "lerna exec --scope @uiw/* --scope uiw --ignore @uiw/doc -- tsbb build \"src/*.{ts,tsx}\" --use-babel --cjs cjs",
     "b:css": "lerna exec --scope @uiw/* -- compile-less -d src -o esm",
     "b:css:dist": "lerna exec --scope @uiw/* --scope @uiw/utils -- compile-less -d src -o lib --combine=dist.css",
     "b:bundle": "lerna exec --scope uiw -- ncc build --target web --filename uiw",
@@ -63,21 +63,21 @@
     "node": ">=16.0.0"
   },
   "devDependencies": {
-    "@kkt/less-modules": "~7.3.0",
+    "@kkt/less-modules": "^7.5.2",
     "@kkt/ncc": "~1.0.15",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
     "@types/react-test-renderer": "~18.0.0",
     "@types/react-transition-group": "~4.4.4",
     "compile-less-cli": "~1.8.11",
     "husky": "~8.0.0",
-    "kkt": "~7.3.0",
+    "kkt": "^7.5.2",
     "lerna": "~6.0.0",
     "lint-staged": "^13.0.3",
     "prettier": "~2.8.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "react-test-renderer": "~18.2.0",
-    "tsbb": "~3.7.0"
+    "tsbb": "^4.1.14"
   }
 }
diff --git a/packages/react-back-top/src/index.tsx b/packages/react-back-top/src/index.tsx
@@ -9,7 +9,7 @@ export interface ChildrenFunction {
   current: number;
 }
 
-export interface BackTopProps extends IProps, Omit<HTMLDivProps, 'children'> {
+export interface BackTopProps extends IProps, Omit<HTMLDivProps, 'children' | 'content'> {
   offsetTop?: number;
   clickable?: boolean;
   content?: JSX.Element | string;

diff --git a/packages/react-icon/src/index.tsx b/packages/react-icon/src/index.tsx
@@ -3,64 +3,63 @@ import svgPaths from '@uiw/icons/fonts/w-icon.json';
 import './style/index.less';
 
 export type IconsName = keyof typeof svgPaths;
-type TagType = React.ComponentType | keyof JSX.IntrinsicElements;
-
-export interface IconProps<Tag extends TagType = 'span', E = React.ReactElement> extends React.HTMLAttributes<Tag> {
+type TagType = React.ElementType | keyof JSX.IntrinsicElements;
+type ElementProps<T extends TagType, E = React.ReactElement> = {
+  fill?: string;
   style?: React.CSSProperties;
   className?: string;
   prefixCls?: string;
   /**
    * HTML tag to use for the rendered element.
    * @default "span"
    */
-  tagName?: Tag;
+  tagName?: T;
   type?: IconsName | null | E;
   spin?: boolean;
   color?: string;
   verticalAlign?: 'middle' | 'baseline';
-}
+};
+
+export type IconProps<T extends TagType> = ElementProps<T> & React.ComponentPropsWithoutRef<T>;
 
-export default function Icon<Tag extends TagType = 'span'>(props: IconProps<Tag>) {
+const Icon = <T extends TagType = 'span'>(props: IconProps<T>) => {
   const {
     className,
     prefixCls = 'w-icon',
     verticalAlign = 'middle',
-    tagName: TagName = 'span',
+    tagName: Element = 'span',
     color,
     type,
     spin = false,
-    ...others
+    style,
+    ...reset
   } = props;
 
   let svg = null;
   if (typeof type === 'string') {
     svg = (
-      <svg fill={color} viewBox="0 0 20 20">
-        {(svgPaths[type] || []).map((d, i) => (
+      <svg fill={color || props.fill} viewBox="0 0 20 20">
+        {(svgPaths[type as IconsName] || []).map((d, i) => (
           <path key={i} d={d} fillRule="evenodd" />
         ))}
       </svg>
     );
-  } else if (React.isValidElement(type)) {
-    svg = React.cloneElement(type, {
-      fill: color,
-    });
-  } else {
-    return null;
   }
-  others.style = { fill: 'currentColor', ...others.style };
-  const propps = {
-    ...others,
-    className: [
-      prefixCls,
-      className,
-      prefixCls && verticalAlign ? `${prefixCls}-${verticalAlign}` : null,
-      spin && prefixCls ? `${prefixCls}-spin` : null,
-    ]
-      .filter(Boolean)
-      .join(' ')
-      .trim(),
-  };
+  const initStyle = { fill: 'currentColor', ...style };
+  const cls = [
+    prefixCls,
+    className,
+    prefixCls && verticalAlign ? `${prefixCls}-${verticalAlign}` : null,
+    spin && prefixCls ? `${prefixCls}-spin` : null,
+  ]
+    .filter(Boolean)
+    .join(' ')
+    .trim();
+  return (
+    <Element className={cls} {...reset} style={initStyle}>
+      {svg}
+    </Element>
+  );
+};
 
-  return React.createElement(TagName, { ...propps } as any, svg);
-}
+export default Icon;
diff --git a/packages/react-slider/src/index.tsx b/packages/react-slider/src/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { ReactElement, useEffect, useState } from 'react';
 import { IProps, HTMLDivProps } from '@uiw/utils';
 import Dots from './Dots';
 import './style/index.less';
@@ -66,7 +66,7 @@ export default function Slider(props: SliderProps) {
     handleChange(curr);
   };
 
-  function getRangeValue(val: number | number[]) {
+  function getRangeValue(val: number) {
     if (!Array.isArray(value)) {
       return Array.isArray(val) ? val : [val];
     }
@@ -202,10 +202,17 @@ export default function Slider(props: SliderProps) {
     if (marks && marks !== true && marks[val] && marks[val].label) {
       return marks[val].label;
     } else if (marks && marks !== true && marks[val] && typeof marks[val] === 'string') {
-      return marks[val];
+      return marks[val] as ReactElement;
     } else if (renderMarks && typeof renderMarks === 'function' && renderMarks(val)) {
       return renderMarks(val);
     }
+    // if (marks && typeof marks !== 'boolean' && marks[val].label) {
+    //   return marks[val].label;
+    // } else if (marks && typeof marks !== 'boolean' && typeof marks[val] === 'string') {
+    //   return marks[val] as ReactElement;
+    // } else if (renderMarks && typeof renderMarks === 'function' && renderMarks(val)) {
+    //   return renderMarks(val);
+    // }
     return val;
   }
 

diff --git a/packages/react-tag/src/index.tsx b/packages/react-tag/src/index.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { IProps, HTMLSpanProps } from '@uiw/utils';
 import './style/index.less';
 
@@ -47,15 +47,16 @@ export default (props: TagProps = {}) => {
   if (!visible) {
     return null;
   }
+  const iconClose = !disabled && closable && (
+    <svg onClick={onClose} className={`${prefixCls}-close`} width="15" height="15" viewBox="0 0 16 16">
+      <path d="M9.41 8l2.29-2.29c.19-.18.3-.43.3-.71a1.003 1.003 0 0 0-1.71-.71L8 6.59l-2.29-2.3a1.003 1.003 0 0 0-1.42 1.42L6.59 8 4.3 10.29c-.19.18-.3.43-.3.71a1.003 1.003 0 0 0 1.71.71L8 9.41l2.29 2.29c.18.19.43.3.71.3a1.003 1.003 0 0 0 .71-1.71L9.41 8z" />
+    </svg>
+  );
 
   return (
     <span className={cls} style={styl} {...other}>
       {title || children}
-      {!disabled && closable ? (
-        <svg onClick={onClose} className={`${prefixCls}-close`} width="15" height="15" viewBox="0 0 16 16">
-          <path d="M9.41 8l2.29-2.29c.19-.18.3-.43.3-.71a1.003 1.003 0 0 0-1.71-.71L8 6.59l-2.29-2.3a1.003 1.003 0 0 0-1.42 1.42L6.59 8 4.3 10.29c-.19.18-.3.43-.3.71a1.003 1.003 0 0 0 1.71.71L8 9.41l2.29 2.29c.18.19.43.3.71.3a1.003 1.003 0 0 0 .71-1.71L9.41 8z" />
-        </svg>
-      ) : null}
+      {iconClose}
     </span>
   );
 };
diff --git a/website/package.json b/website/package.json
@@ -40,16 +40,16 @@
     "react": ">=16.9.0",
     "react-code-preview-layout": "^2.0.6",
     "react-dom": ">=16.9.0",
-    "react-router-dom": "~6.4.2",
+    "react-router-dom": "^6.16.0",
     "uiw": "^4.21.28"
   },
   "devDependencies": {
-    "@kkt/less-modules": "~7.3.0",
-    "@kkt/raw-modules": "~7.3.0",
-    "@kkt/scope-plugin-options": "~7.3.0",
+    "@kkt/less-modules": "^7.5.2",
+    "@kkt/raw-modules": "^7.5.2",
+    "@kkt/scope-plugin-options": "^7.5.2",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
-    "kkt": "~7.3.0",
+    "kkt": "^7.5.2",
     "react-test-renderer": "~18.2.0"
   },
   "author": "kenny wang <wowohoo@qq.com>",