Merge pull request #735 from sheinsight/dev-3.4.4

Textarea
sheinsight · Oct 17, 2024 · e2d8b02 · e2d8b02
2 parents 311f3bc + 11c4ac9
commit e2d8b02
Show file tree

Hide file tree

Showing 14 changed files with 110 additions and 103 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "sheinx",
   "private": true,
-  "version": "3.4.4-beta.6",
+  "version": "3.4.4-beta.7",
   "description": "A react library developed with sheinx",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/packages/base/src/common/use-tip.tsx b/packages/base/src/common/use-tip.tsx
@@ -38,7 +38,12 @@ const useTip = (
 ) => {
   const { popover, popoverProps, error, tip, focused, rootRef, jssStyle } = props;
   const config = useConfig();
-  const dfp = config.direction === 'rtl' ? 'bottom-right' : 'bottom-left';
+  let dfp: PopoverProps['position'] = config.direction === 'rtl' ? 'bottom-right' : 'bottom-left';
+
+  if(typeof popover === 'string') {
+    dfp = popover
+  }
+
   const styles =
     popoverProps?.style && popoverProps?.style?.width
       ? popoverProps?.style

diff --git a/packages/base/src/textarea/textarea.tsx b/packages/base/src/textarea/textarea.tsx
@@ -127,50 +127,52 @@ const Textarea = (props0: TextareaProps) => {
     ...innerTitleProps,
   });
 
-  const getInfo = () => {
+  const getInfoState = () => {
     const notNumber = typeof info !== 'number';
     if (typeof info !== 'function' && typeof info !== 'object' && notNumber) return null;
     let infoContent: number | ((value: string) => React.ReactNode | Error);
-    let infoPosition;
     if (typeof info === 'object') {
       infoContent = info.content;
-      infoPosition = info.position;
     } else {
       infoContent = info;
     }
     const notContentNumber = typeof infoContent !== 'number';
     const textInfo = notContentNumber
       ? (infoContent as (value: string) => React.ReactNode | Error)
       : defaultInfo.bind(null, infoContent as number);
-    const res = textInfo(inputAbleProps.value!);
-    // empty
-    if (!res) return null;
-    const isError = res instanceof Error;
-    const text = isError ? res.message : res;
+    const error = textInfo(inputAbleProps.value!);
+    if (!error) return null;
+    const isError = error instanceof Error;
+    const text = isError ? error.message : error;
     if (!isError && !focused) return null;
-
-    return (
-      <div
-        key='info'
-        style={{ minWidth: 'auto' }}
-        dir={config.direction}
-        className={classNames(
-          textareaClasses?.info,
-          !!isError && textareaClasses?.infoError,
-          infoPosition === 'bottom-left' && textareaClasses?.bottomLeft,
-          infoPosition === 'bottom-right' && textareaClasses?.bottomRight,
-        )}
-      >
-        {text}
-      </div>
-    );
+    return { text, error }
+  }
+
+  const infoState = useMemo(getInfoState, [info, inputAbleProps.value, focused])
+  const infoPopoverProps = {
+    popover: resetProps.popover || (typeof info === 'object' ? info.position : 'bottom-right'),
+    popoverProps: Object.assign(
+      {
+        style: { width: 'auto' },
+       },
+      resetProps.popoverProps,
+    ),
+    error: infoState?.error && infoState?.error instanceof Error ? infoState?.error?.message : undefined,
+    tip: <div className={textareaClasses?.info}>{infoState?.text}</div>,
   };
 
+  const infoPopoverNode = useTip({
+    ...infoPopoverProps,
+    focused,
+    rootRef,
+    jssStyle,
+  });
+
   const mergeSuffix = (
     <React.Fragment>
       {suffix}
-      {getInfo()}
       {tipNode}
+      {infoState?.text && infoPopoverNode}
       {util.isFunc(renderFooter) && (
         <div
           onMouseDown={(e) => {

diff --git a/packages/base/src/textarea/textarea.type.ts b/packages/base/src/textarea/textarea.type.ts
@@ -34,9 +34,6 @@ export interface TextareaClasses {
   resize: string;
   shadow: string;
   info: string;
-  infoError: string;
-  bottomLeft:string;
-  bottomRight:string;
   footer: string;
 }
 

diff --git a/packages/shineout-style/src/textarea/textarea.ts b/packages/shineout-style/src/textarea/textarea.ts
@@ -94,64 +94,8 @@ const input: JsStyles<keyof TextareaClasses> = {
     resize: 'vertical',
   },
   info: {
-    position: 'absolute',
-    zIndex: 1000,
-    '&[dir=ltr]': { right: '0' },
-    '&[dir=rtl]': { left: '0' },
-    '&$bottomLeft': { right: 'auto' },
-    '&$bottomRight': { left: 'auto' },
-    top: '100%',
-    transformOrigin: '100% 0',
-    marginTop: '10px',
-    animation: 'so-input-fade .16s ease-in',
-    maxWidth: '400px',
-    padding: '5px 8px',
     background: token.textareaInfoBackgroundColor,
-    borderRadius: token.textareaBorderRadius,
-    boxShadow: `0 0 0 1px ${token.textareaBorderColor}`,
-    fontSize: '12px',
     color: token.textareaInfoFontColor,
-    '&::before': {
-      display: 'block',
-      position: 'absolute',
-
-      bottom: '100%',
-      transform: 'rotate(45deg) translateY(3px)',
-      width: '6px',
-      height: '6px',
-      borderTop: `1px solid ${token.textareaBorderColor}`,
-      borderLeft: `1px solid ${token.textareaBorderColor}`,
-      background: 'inherit',
-      content: "'  '",
-    },
-    '&[dir=ltr]::before': {
-      right: '4px',
-    },
-    '&[dir=rtl]::before': {
-      left: '8px',
-    },
-    '&$bottomLeft::before': {
-      left: '8px',
-      right: 'auto',
-    },
-    '&$bottomRight::before': {
-      right: '4px',
-      left: 'auto',
-    },
-  },
-  bottomLeft: {
-    left: 0,
-  },
-  bottomRight: {
-    right: 0,
-  },
-  infoError: {
-    boxShadow: `0 0 0 1px ${token.textareaInfoErrorBorderColor}`,
-    color: token.textareaInfoErrorFontColor,
-    background: token.textareaInfoErrorBackgroundColor,
-    '&::before': {
-      borderColor: token.textareaInfoErrorBorderColor,
-    },
   },
   shadow: {
     position: 'absolute',

diff --git a/packages/shineout/src/textarea/__doc__/changelog.cn.md b/packages/shineout/src/textarea/__doc__/changelog.cn.md
@@ -1,3 +1,10 @@
+## 3.4.4-beta.7
+2024-10-16
+
+### 💎 Enhancement
+
+- `Textarea` 的 `info` 重构为Popover实现，支持`popoverProps`设置 ([#735](https://github.com/sheinsight/shineout-next/pull/735))
+
 ## 3.4.0
 2024-09-19
 

diff --git a/packages/shineout/src/textarea/__example__/01-01-base.tsx b/packages/shineout/src/textarea/__example__/01-01-base.tsx
@@ -1,8 +1,8 @@
 /**
  * cn - 基本用法
- *    --基础 textarea 用法
+ *    --基础用法
  * en - Base
- *    --Base Textarea
+ *    --Basic usage of `Textarea`
  */
 import { Textarea } from 'shineout';
 

diff --git a/packages/shineout/src/textarea/__example__/01-02-resize.tsx b/packages/shineout/src/textarea/__example__/01-02-resize.tsx
@@ -1,8 +1,8 @@
 /**
  * cn - 拖动高度
- *    -- 设置 resize 属性可以拖动改变高度
+ *    -- 设置 `resize` 属性可以拖动改变高度
  * en - resize
- *    -- Set the resize property to change the height by dragging
+ *    -- Set the `resize` property to change the height by dragging
  */
 import { Textarea } from 'shineout';
 

diff --git a/packages/shineout/src/textarea/__example__/02-size.tsx b/packages/shineout/src/textarea/__example__/02-size.tsx
@@ -1,6 +1,6 @@
 /**
  * cn - 尺寸
- *    -- 提供了三种尺寸 small default large
+ *    -- 提供了三种尺寸 `small | default | large`
  * en - Size
  *    -- There are three sizes: small, default, and large
  */

diff --git a/packages/shineout/src/textarea/__example__/03-autosize.tsx b/packages/shineout/src/textarea/__example__/03-autosize.tsx
@@ -1,8 +1,8 @@
 /**
  * cn - 自适应高度
- *    -- autosize 为 true 时， rows 为最小高度，如果要设置最大高度，使用 maxHeight 即可
+ *    -- `autosize` 为 true 时， rows 为最小高度，如果要设置最大高度，使用 `maxHeight` 即可
  * en - Adaptive height
- *    -- autosize 为 true 时， rows 为最小高度，如果要设置最大高度，使用 maxHeight 即可
+ *    -- `autosize` 为 true 时， rows 为最小高度，如果要设置最大高度，使用 `maxHeight` 即可
  */
 import { Textarea } from 'shineout';
 

diff --git a/packages/shineout/src/textarea/__example__/04-info.tsx b/packages/shineout/src/textarea/__example__/04-info.tsx
@@ -1,11 +1,11 @@
 /**
  * cn - 信息
- *    -- 设置 info 为数字, 设定最大长度，用户 focus 时会显示用户已输入文字长度。
- *    -- 如果超出长度， 则会报错. 不会隐藏。
+ *    -- 设置 `info` 为数字, 设定最大长度，用户 focus 时会显示用户已输入文字长度。
+ *    -- 如果超出长度， 则会报错，不会隐藏。
  * en - Info
  *    -- Set info to number, set the maximum length, and the user's focus shows the length of text that the user has entered
  *    -- If the length is exceeded, the error is reported. It is not hidden
- * 
+ *
  */
 import React from 'react';
 import { Textarea } from 'shineout';

diff --git a/packages/shineout/src/textarea/__example__/05-custom.tsx b/packages/shineout/src/textarea/__example__/05-custom.tsx
@@ -1,10 +1,12 @@
 /**
  * cn - 自定义信息
- *    -- 可以通过设置 info 为函数去自定义提示信息
- *     -- 如果 info 返回类型为 Error，不会隐藏。
+ *    -- 可以通过设置 `info` 为函数去自定义提示信息;
+ *    -- 如果 `info` 返回类型为 Error，不会隐藏；
+ *    -- 可以通过设置 `popoverProps` 来自定义弹窗的属性， 参考Popover组件的属性。
  * en - Custom Info
- *    -- can customize the info by setting info as a function
- *    -- if the functio return an Error , the info doesn't hide
+ *    -- can customize the info by setting info as a function;
+ *    -- if the functio return an Error , the info doesn't hide;
+ *    -- can customize the popover by setting `popoverProps` , reference to Popover component's props.
  */
 import React from 'react';
 import { Textarea } from 'shineout';
@@ -17,7 +19,16 @@ const renderInfo = (value?: string) => {
 };
 
 const App: React.FC = () => (
-  <Textarea rows={4} trim placeholder='input something' info={renderInfo} />
+  <Textarea
+    rows={4}
+    trim
+    placeholder='input something'
+    info={renderInfo}
+    popoverProps={{
+      position: 'bottom-left',
+      getPopupContainer: () => document.body
+    }}
+    />
 );
 
 export default App;
diff --git a/packages/shineout/src/textarea/__example__/06-footer.tsx b/packages/shineout/src/textarea/__example__/06-footer.tsx
@@ -1,8 +1,8 @@
 /**
  * cn - 渲染底部信息
- *    -- 渲染 textarea footer
+ *    -- 渲染 textarea `footer`
  * en - RenderFooter
- *    -- render textarea footer
+ *    -- render textarea `footer`
  */
 import React from 'react';
 import { Textarea } from 'shineout';

diff --git a/packages/shineout/src/upload/__example__/10-before-upload.tsx b/packages/shineout/src/upload/__example__/10-before-upload.tsx
@@ -0,0 +1,41 @@
+/**
+ * cn - 上传前处理
+ *    -- 选择文件后可以使用beforeUpload对文件进行处理
+ * en - Before Upload
+ *    -- After selecting a file, you can use beforeUpload to process the file
+ */
+import React from 'react';
+import { Upload } from 'shineout';
+
+const App: React.FC = () => {
+
+  return (
+    <Upload.Image
+      leftHandler
+      multiple
+      limit={2}
+      // beforeUpload需要返回Promise
+      beforeUpload={async(file) => {
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            console.log('beforeUpload file: >>', file)
+            resolve(true)
+          })
+        })
+      }}
+      request={(options) => {
+        const f = options.file
+        if (f) {
+          setTimeout(() => {
+            options.onLoad({ status: 200 })
+          }, 100)
+        }
+      }}
+      onSuccess={(_res, file) => {
+        return file instanceof File ? URL.createObjectURL(file) : file
+      }}
+    />
+  );
+}
+
+export default App;