@douyinfe/semi-ui 2.9.0 → 2.9.1

package/form/hoc/withField.tsx

@@ -15,6 +15,7 @@ import { Col } from '../../grid';
 import { CallOpts, WithFieldOption } from '@douyinfe/semi-foundation/form/interface';
 import { CommonFieldProps, CommonexcludeType } from '../interface';
 import { Subtract } from 'utility-types';
+import { noop } from "lodash";
 
 const prefix = cssClasses.PREFIX;
 
@@ -121,6 +122,7 @@ function withField<
         const [status, setStatus] = useState(validateStatus); // use props.validateStatus to init
 
         const rulesRef = useRef(rules);
+        const validateRef = useRef(validate);
 
         // notNotify is true means that the onChange of the Form does not need to be triggered
         // notUpdate is true means that this operation does not need to trigger the forceUpdate
@@ -221,7 +223,7 @@ function withField<
                 let maybePromisedErrors;
                 // let errorThrowSync;
                 try {
-                    maybePromisedErrors = validate(val, values);
+                    maybePromisedErrors = validateRef.current(val, values);
                 } catch (err) {
                     // error throw by syncValidate
                     maybePromisedErrors = err;
@@ -258,7 +260,7 @@ function withField<
             if (transform) {
                 finalVal = transform(val);
             }
-            if (validate) {
+            if (validateRef.current) {
                 return _validate(finalVal, updater.getValue(), callOpts);
             } else if (latestRules) {
                 return _validateInternal(finalVal, callOpts);
@@ -357,7 +359,8 @@ function withField<
         // avoid hooks capture value, fixed issue 346
         useLayoutEffect(() => {
             rulesRef.current = rules;
-        }, [rules]);
+            validateRef.current = validate;
+        }, [rules, validate]);
 
         // exec validate once when trigger inlcude 'mount'
         useLayoutEffect(() => {
@@ -442,11 +445,11 @@ function withField<
             if (helpText) {
                 newProps['aria-describedby'] = extraText ? `${helpTextId} ${extraTextId}` : helpTextId;
             }
-            
+
             if (extraText) {
                 newProps['aria-describedby'] = helpText ? `${helpTextId} ${extraTextId}` : extraTextId;
             }
-            
+
             if (status === 'error') {
                 newProps['aria-errormessage'] = errorMessageId;
                 newProps['aria-invalid'] = true;

package/lib/cjs/form/hoc/withField.js

@@ -147,7 +147,8 @@ function withField(Component, opts) {
     const [cursor, setCursor, getCursor] = (0, _index.useStateWithGetter)(0);
     const [status, setStatus] = (0, _react.useState)(validateStatus); // use props.validateStatus to init
 
-    const rulesRef = (0, _react.useRef)(rules); // notNotify is true means that the onChange of the Form does not need to be triggered
+    const rulesRef = (0, _react.useRef)(rules);
+    const validateRef = (0, _react.useRef)(validate); // notNotify is true means that the onChange of the Form does not need to be triggered
     // notUpdate is true means that this operation does not need to trigger the forceUpdate
 
     const updateTouched = (isTouched, callOpts) => {
@@ -246,7 +247,7 @@ function withField(Component, opts) {
       let maybePromisedErrors; // let errorThrowSync;
 
       try {
-        maybePromisedErrors = validate(val, values);
+        maybePromisedErrors = validateRef.current(val, values);
       } catch (err) {
         // error throw by syncValidate
         maybePromisedErrors = err;
@@ -286,7 +287,7 @@ function withField(Component, opts) {
         finalVal = transform(val);
       }
 
-      if (validate) {
+      if (validateRef.current) {
         return _validate(finalVal, updater.getValue(), callOpts);
       } else if (latestRules) {
         return _validateInternal(finalVal, callOpts);
@@ -395,7 +396,8 @@ function withField(Component, opts) {
 
     (0, _react.useLayoutEffect)(() => {
       rulesRef.current = rules;
-    }, [rules]); // exec validate once when trigger inlcude 'mount'
+      validateRef.current = validate;
+    }, [rules, validate]); // exec validate once when trigger inlcude 'mount'
 
     (0, _react.useLayoutEffect)(() => {
       if (validateOnMount) {

package/lib/cjs/scrollList/scrollItem.js

@@ -201,7 +201,7 @@ class ScrollItem extends _baseComponent.default {
       } = this;
       const wrapperHeight = wrapper.offsetHeight;
       const itemHeight = this.getItmHeight(node);
-      const targetTop = node.offsetTop - (wrapperHeight - itemHeight) / 2;
+      const targetTop = (node.offsetTop || this.list.children.length * itemHeight / 2) - (wrapperHeight - itemHeight) / 2;
       this.scrollToPos(targetTop, duration);
     };
 

package/lib/cjs/toast/toast.d.ts

@@ -41,7 +41,7 @@ declare class Toast extends BaseComponent<ToastReactProps, ToastState> {
     close(e: React.MouseEvent): void;
     clearCloseTimer: () => void;
     startCloseTimer: () => void;
-    renderIcon(): true | React.ReactChild | React.ReactFragment;
+    renderIcon(): string | number | true | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment;
     render(): JSX.Element;
 }
 export default Toast;

package/lib/cjs/tooltip/index.js

@@ -258,7 +258,7 @@ class Tooltip extends _baseComponent.default {
       }, portalEventSet, {
         "x-placement": placement,
         style: (0, _assign.default)({
-          visibility: motion ? undefined : 'visible'
+          visibility: motion ? 'hidden' : 'visible'
         }, style)
       }), contentNode, icon);
       return /*#__PURE__*/_react.default.createElement(_index.default, {

package/lib/es/form/hoc/withField.js

@@ -112,7 +112,8 @@ function withField(Component, opts) {
     const [cursor, setCursor, getCursor] = useStateWithGetter(0);
     const [status, setStatus] = useState(validateStatus); // use props.validateStatus to init
 
-    const rulesRef = useRef(rules); // notNotify is true means that the onChange of the Form does not need to be triggered
+    const rulesRef = useRef(rules);
+    const validateRef = useRef(validate); // notNotify is true means that the onChange of the Form does not need to be triggered
     // notUpdate is true means that this operation does not need to trigger the forceUpdate
 
     const updateTouched = (isTouched, callOpts) => {
@@ -213,7 +214,7 @@ function withField(Component, opts) {
       let maybePromisedErrors; // let errorThrowSync;
 
       try {
-        maybePromisedErrors = validate(val, values);
+        maybePromisedErrors = validateRef.current(val, values);
       } catch (err) {
         // error throw by syncValidate
         maybePromisedErrors = err;
@@ -253,7 +254,7 @@ function withField(Component, opts) {
         finalVal = transform(val);
       }
 
-      if (validate) {
+      if (validateRef.current) {
         return _validate(finalVal, updater.getValue(), callOpts);
       } else if (latestRules) {
         return _validateInternal(finalVal, callOpts);
@@ -362,7 +363,8 @@ function withField(Component, opts) {
 
     useLayoutEffect(() => {
       rulesRef.current = rules;
-    }, [rules]); // exec validate once when trigger inlcude 'mount'
+      validateRef.current = validate;
+    }, [rules, validate]); // exec validate once when trigger inlcude 'mount'
 
     useLayoutEffect(() => {
       if (validateOnMount) {

package/lib/es/scrollList/scrollItem.js

@@ -176,7 +176,7 @@ export default class ScrollItem extends BaseComponent {
       } = this;
       const wrapperHeight = wrapper.offsetHeight;
       const itemHeight = this.getItmHeight(node);
-      const targetTop = node.offsetTop - (wrapperHeight - itemHeight) / 2;
+      const targetTop = (node.offsetTop || this.list.children.length * itemHeight / 2) - (wrapperHeight - itemHeight) / 2;
       this.scrollToPos(targetTop, duration);
     };
 

package/lib/es/toast/toast.d.ts

@@ -41,7 +41,7 @@ declare class Toast extends BaseComponent<ToastReactProps, ToastState> {
     close(e: React.MouseEvent): void;
     clearCloseTimer: () => void;
     startCloseTimer: () => void;
-    renderIcon(): true | React.ReactChild | React.ReactFragment;
+    renderIcon(): string | number | true | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment;
     render(): JSX.Element;
 }
 export default Toast;

package/lib/es/tooltip/index.js

@@ -212,7 +212,7 @@ export default class Tooltip extends BaseComponent {
       }, portalEventSet, {
         "x-placement": placement,
         style: _Object$assign({
-          visibility: motion ? undefined : 'visible'
+          visibility: motion ? 'hidden' : 'visible'
         }, style)
       }), contentNode, icon);
       return /*#__PURE__*/React.createElement(Portal, {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.9.0",
+    "version": "2.9.1",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -14,12 +14,12 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation": "2.9.0",
-        "@douyinfe/semi-animation-react": "2.9.0",
-        "@douyinfe/semi-foundation": "2.9.0",
-        "@douyinfe/semi-icons": "2.9.0",
-        "@douyinfe/semi-illustrations": "2.9.0",
-        "@douyinfe/semi-theme-default": "2.9.0",
+        "@douyinfe/semi-animation": "2.9.1",
+        "@douyinfe/semi-animation-react": "2.9.1",
+        "@douyinfe/semi-foundation": "2.9.1",
+        "@douyinfe/semi-icons": "2.9.1",
+        "@douyinfe/semi-illustrations": "2.9.1",
+        "@douyinfe/semi-theme-default": "2.9.1",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -69,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "22b74e58077b068daa6b35bc8b32f47a064734a3",
+    "gitHead": "9593ab23b59b5a18305627ac402cfd4527072f9c",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.9.0",
+        "@douyinfe/semi-scss-compile": "2.9.1",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

package/scrollList/scrollItem.tsx

@@ -329,7 +329,7 @@ export default class ScrollItem<T extends Item> extends BaseComponent<ScrollItem
         const { wrapper } = this;
         const wrapperHeight = wrapper.offsetHeight;
         const itemHeight = this.getItmHeight(node);
-        const targetTop = node.offsetTop - (wrapperHeight - itemHeight) / 2;
+        const targetTop =  (node.offsetTop || this.list.children.length * itemHeight / 2 )  - (wrapperHeight - itemHeight) / 2;
 
         this.scrollToPos(targetTop, duration);
     };

package/timePicker/TimePicker.tsx

@@ -475,7 +475,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
 
         const panelPrefix = classNames({
             [`${prefixCls}-panel`]: true,
-            [`${prefixCls}-panel-${ size}`]: size,
+            [`${prefixCls}-panel-${size}`]: size,
         });
 
         const inputProps = {

package/timePicker/_story/timepicker.stories.js

@@ -1,6 +1,6 @@
 import React, { Component, useState } from 'react';
 import TimePickerPanel from '../index';
-import { TimePicker as BasicTimePicker, Button } from '../../index';
+import { TimePicker as BasicTimePicker, Button, Form } from '../../index';
 import { strings } from '@douyinfe/semi-foundation/timePicker/constants';
 import { get } from 'lodash';
 
@@ -44,6 +44,12 @@ const init = () => {
 init();
 
 export const TimePickerPanelDefault = () => {
+   const initValues = {
+    testRange: [
+      new Date("2022-04-17T15:00:00"),
+      new Date("2022-04-17T18:00:00"),
+    ],
+  };
   return (
     <div>
       <TimePicker panelHeader={'Time Select'} onChange={val => console.log(val)} />
@@ -53,6 +59,19 @@ export const TimePickerPanelDefault = () => {
         defaultOpen={true}
         scrollItemProps={{ cycled: false }}
       />
+      <TimePicker use12Hours defaultValue={"上午 10:32:33"}/>
+      <br/><br/>
+      <TimePicker type="timeRange" use12Hours format="a h:mm"  defaultValue={["下午 08:11", "上午 11:21"]} />
+      <Form initValues={initValues}>
+      <pre>{JSON.stringify(initValues)}</pre>
+      <Form.TimePicker
+        use12Hours
+        field="testRange"
+        label="Time Range"
+        type="timeRange"
+        format="a hh:mm"
+      />
+    </Form>
     </div>
   );
 };

package/tooltip/index.tsx

@@ -581,7 +581,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
                 }
             </TooltipTransition>
         ) : (
-            <div className={className} {...portalEventSet} x-placement={placement} style={{ visibility: motion ? undefined : 'visible', ...style }}>
+            <div className={className} {...portalEventSet} x-placement={placement} style={{ visibility: motion ? 'hidden' : 'visible', ...style }}>
                 {contentNode}
                 {icon}
             </div>