imporve(desgin): Empty design restoration

oceanbase · Jan 12, 2024 · b5dac62 · b5dac62
1 parent f203da8
commit b5dac62
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 27 deletions.
diff --git a/packages/design/src/empty/demo/customize-icon-desc.tsx b/packages/design/src/empty/demo/customize-icon-desc.tsx
@@ -2,5 +2,10 @@ import React from 'react';
 import { Empty } from '@oceanbase/design';
 import { GithubOutlined } from '@oceanbase/icons';
 export default () => {
-  return <Empty image={<GithubOutlined />} description="这是一段描述文字" />;
+  return (
+    <Empty
+      image={<GithubOutlined style={{ fontSize: '100px' }} />}
+      description="这是一段描述文字"
+    />
+  );
 };
diff --git a/packages/design/src/empty/demo/empty-guide-page.tsx b/packages/design/src/empty/demo/empty-guide-page.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Empty, Button, Steps } from '@oceanbase/design';
+import { Empty, Button } from '@oceanbase/design';
 import EmptyIcon from '../icon/EmptyIcon';
 
 export default () => {
@@ -19,17 +19,13 @@ export default () => {
     },
     {
       title: '第四步',
-      description,
+      description:
+        'This is a description.This is a description.This is a description.This is a description.This is a description.',
     },
   ];
 
   return (
-    <Empty
-      mode="page"
-      image={<EmptyIcon />}
-      title="Your description title"
-      description={<Steps current={0} items={steps} />}
-    >
+    <Empty mode="page" image={<EmptyIcon />} title="Your description title" steps={steps}>
       <Button type="primary">操作项</Button>
     </Empty>
   );

diff --git a/packages/design/src/empty/demo/empty-page.tsx b/packages/design/src/empty/demo/empty-page.tsx
@@ -47,7 +47,6 @@ export default () => {
           mode="page"
           title="Your description title"
           description="Your description title content"
-          // style={{ height: 500, marginTop: 24 }}
         >
           <Button type="primary" key="console">
             your operations

diff --git a/packages/design/src/empty/icon/WellcomeIcon.tsx b/packages/design/src/empty/icon/WellcomeIcon.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import Icon from '@oceanbase/icons';
 import type { CustomIconComponentProps } from '@oceanbase/icons/es/components/Icon';
 
-const HeartSvg = () => (
+const WellcomeSvg = () => (
   <svg width="160px" height="160px" viewBox="0 0 160 160" version="1.1">
     <defs>
       <path
@@ -124,7 +124,7 @@ const HeartSvg = () => (
 );
 
 const WellcomeIcon: React.FC = (props: Partial<CustomIconComponentProps>) => (
-  <Icon component={HeartSvg} {...props} />
+  <Icon component={WellcomeSvg} {...props} />
 );
 
 export default WellcomeIcon;
diff --git a/packages/design/src/empty/index.md b/packages/design/src/empty/index.md
@@ -31,6 +31,14 @@ nav:
 | layout | 布局 | horizontal \| vertical | horizontal | - |
 | title | 标题 | React.ReactNode | horizontal | - |
 | extra | 额外内容 | React.ReactNode | horizontal | - |
+| steps | 开启向导模式 | Step | - | - |
 | mode | 展示模式: 页面模式 \| 卡片模式 \| 组件模式 | page \| pageCard \| component | pageCard | - |
 
+## Step
+
+| 参数             | 说明     | 类型            | 默认值 | 版本 |
+| :--------------- | :------- | :-------------- | :----- | :--- |
+| title            | 标题     | React.ReactNode | -      | -    |
+| exdescriptiontra | 额外内容 | React.ReactNode | -      | -    |
+
 - 更多 API 详见 antd Empty 文档: https://ant.design/components/Empty-cn
diff --git a/packages/design/src/empty/index.tsx b/packages/design/src/empty/index.tsx
@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { Empty as AntEmpty } from 'antd';
-import { Card } from '@oceanbase/design';
+import { Card, Steps } from '@oceanbase/design';
 import type { EmptyProps as AntEmptyProps } from 'antd/es/empty';
 import classNames from 'classnames';
 import ConfigProvider from '../config-provider';
@@ -22,8 +22,13 @@ const Extra: React.FC<ExtraProps> = ({ prefixCls, extra }) => {
   return <div className={`${prefixCls}-extra`}>{extra}</div>;
 };
 
+export interface Step {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+}
 export interface EmptyProps extends AntEmptyProps {
   layout?: string;
+  steps?: Step[];
   title?: React.ReactNode;
   extra?: React.ReactNode;
   children?: React.ReactNode;
@@ -40,10 +45,12 @@ const Empty: CompoundedComponent = ({
   prefixCls: customizePrefixCls,
   className,
   layout = 'vertical',
+  steps,
   title,
   description,
   extra,
-  image = defaultEmptyImg,
+  image,
+  // image = defaultEmptyImg,
   children,
   // 默认为页面模式
   mode = 'pageCard',
@@ -59,15 +66,19 @@ const Empty: CompoundedComponent = ({
     <AntEmpty
       className={classNames(`${emptyCls} ${prefixCls}-${layout}`)}
       description={
-        (title || description || extra) && (
-          <>
-            {title && <div className={`${prefixCls}-title`}>{title}</div>}
-            <div className={`${prefixCls}-subTitle`}>{description}</div>
-            {layout === 'horizontal' && children && (
-              <div className={`${prefixCls}-content`}>{children}</div>
-            )}
-            {extra && <Extra prefixCls={prefixCls} extra={extra} />}
-          </>
+        steps ? (
+          <Steps current={0} items={steps} />
+        ) : (
+          (title || description || extra) && (
+            <>
+              {title && <div className={`${prefixCls}-title`}>{title}</div>}
+              <div className={`${prefixCls}-subTitle`}>{description}</div>
+              {layout === 'horizontal' && children && (
+                <div className={`${prefixCls}-content`}>{children}</div>
+              )}
+              {extra && <Extra prefixCls={prefixCls} extra={extra} />}
+            </>
+          )
         )
       }
       image={image}
@@ -88,7 +99,7 @@ const Empty: CompoundedComponent = ({
   return wrapSSR(MyEmpty);
 };
 
-AntEmpty.PRESENTED_IMAGE_DEFAULT = defaultEmptyImg;
+AntEmpty.PRESENTED_IMAGE_SIMPLE = defaultEmptyImg;
 
 Empty.PRESENTED_IMAGE_DEFAULT = AntEmpty.PRESENTED_IMAGE_DEFAULT;
 Empty.PRESENTED_IMAGE_SIMPLE = AntEmpty.PRESENTED_IMAGE_SIMPLE;

diff --git a/packages/design/src/empty/style/index.ts b/packages/design/src/empty/style/index.ts
@@ -20,6 +20,7 @@ export const genEmptyStyle: GenerateStyle<EmptyToken> = (token: EmptyToken): CSS
       padding: '32px 0',
       [`${componentCls}-image`]: {
         height: 'auto',
+        marginBottom: 0,
       },
       [`${componentCls}-description`]: {
         [`${componentCls}-title`]: {
@@ -68,12 +69,12 @@ export const genEmptyStyle: GenerateStyle<EmptyToken> = (token: EmptyToken): CSS
 
           [`${antCls}-steps-item-content`]: {
             [`${antCls}-steps-item-title`]: {
-              color: colorText,
+              color: `${colorText}!important`,
               lineHeight: '24px',
               fontSize: '14px',
             },
             ['.ant-steps-item-description']: {
-              color: colorTextTertiary,
+              color: `${colorTextTertiary}!important`,
               lineHeight: '20px',
               fontSize: '12px',
               marginTop: '8px',

diff --git a/packages/ui/src/Password/index.tsx b/packages/ui/src/Password/index.tsx
@@ -1,7 +1,7 @@
 import { Button, Input, message, Popover } from '@oceanbase/design';
 import type { PasswordProps as InputPasswordProps } from '@oceanbase/design/es/input';
 import RandExp from 'randexp';
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import { theme } from '@oceanbase/design';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
@@ -41,6 +41,8 @@ const Password: React.FC<PasswordProps> = ({
   generatePasswordRegex,
   ...restProps
 }) => {
+  const inputRef = useRef(null);
+
   const { token } = theme.useToken();
   const [fieldError, setFieldError] = useState<string[]>([]);
   const [isValidating, setIsValidating] = useState(false);
@@ -84,9 +86,20 @@ const Password: React.FC<PasswordProps> = ({
     setFieldError(newFieldError);
     onValidate?.(newFieldError.length === 0);
     // 先触发 onValidate，再异步触发 onChange，以便在 antd3 Form 的类组件场景下，校验规则 validator 能获取到最新的 passed 值。
+    const startPos = inputRef?.current?.input?.selectionStart;
+    const endPos = inputRef.current.input.selectionEnd;
     setTimeout(() => {
       onChange?.(newValue);
     }, 0);
+    /***
+     * TODO 快速编辑时会发生焦点移至末尾的问题
+     * 解决方案1   去除 onChange 的异步处理  但是会引起antd3 Form 不兼容的问题
+     * 解决方案2   手动设置光标位置，由于onChange 异步处理，光标设置需要延后设置
+     * */
+    setTimeout(() => {
+      // 设置光标位置
+      inputRef.current.setSelectionRange(startPos, endPos, newValue);
+    }, 3);
   };
 
   // 根据正则表达式获取符合要求的随机密码
@@ -118,6 +131,7 @@ const Password: React.FC<PasswordProps> = ({
         >
           <Input.Password
             value={value}
+            ref={inputRef}
             autoComplete="new-password"
             onChange={e => {
               handleChange(e?.target?.value);