antd-mobile 5.39.0 → 5.41.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/2x/README.md +8 -1
- package/2x/bundle/antd-mobile.cjs.development.js +2495 -1614
- package/2x/bundle/antd-mobile.cjs.js +7 -7
- package/2x/bundle/antd-mobile.es.development.js +1530 -649
- package/2x/bundle/antd-mobile.es.js +7495 -6799
- package/2x/bundle/antd-mobile.umd.development.js +2494 -1613
- package/2x/bundle/antd-mobile.umd.js +7 -7
- package/2x/bundle/style.css +11 -5
- package/2x/cjs/components/button/button.d.ts +2 -2
- package/2x/cjs/components/button/button.js +1 -0
- package/2x/cjs/components/calendar-picker-view/calendar-picker-view.js +3 -0
- package/2x/cjs/components/date-picker/date-picker-date-utils.d.ts +1 -1
- package/2x/cjs/components/date-picker/date-picker-date-utils.js +23 -8
- package/2x/cjs/components/date-picker/date-picker-quarter-utils.d.ts +3 -1
- package/2x/cjs/components/date-picker/date-picker-quarter-utils.js +7 -2
- package/2x/cjs/components/date-picker/date-picker-week-utils.d.ts +3 -1
- package/2x/cjs/components/date-picker/date-picker-week-utils.js +12 -4
- package/2x/cjs/components/date-picker-view/date-picker-view.d.ts +5 -3
- package/2x/cjs/components/date-picker-view/date-picker-view.js +3 -3
- package/2x/cjs/components/date-picker-view/useRenderLabel.js +2 -2
- package/2x/cjs/components/ellipsis/ellipsis.d.ts +3 -0
- package/2x/cjs/components/ellipsis/ellipsis.js +10 -2
- package/2x/cjs/components/number-keyboard/number-keyboard.d.ts +1 -1
- package/2x/cjs/components/popover/wrapper.d.ts +6 -9
- package/2x/cjs/components/popover/wrapper.js +32 -6
- package/2x/cjs/components/space/space.css +4 -4
- package/2x/cjs/components/swiper/swiper.js +1 -1
- package/2x/cjs/components/tabs/tabs.js +45 -13
- package/2x/cjs/components/virtual-input/virtual-input.css +7 -1
- package/2x/cjs/components/virtual-input/virtual-input.d.ts +6 -0
- package/2x/cjs/components/virtual-input/virtual-input.js +133 -7
- package/2x/cjs/index.d.ts +1 -0
- package/2x/cjs/index.js +7 -0
- package/2x/cjs/locales/ar-SA.d.ts +1 -0
- package/2x/cjs/locales/ar-SA.js +1 -0
- package/2x/cjs/locales/base.d.ts +1 -0
- package/2x/cjs/locales/base.js +1 -0
- package/2x/cjs/locales/cnr-ME.d.ts +1 -0
- package/2x/cjs/locales/cnr-ME.js +1 -0
- package/2x/cjs/locales/da-DK.d.ts +1 -0
- package/2x/cjs/locales/de-DE.d.ts +1 -0
- package/2x/cjs/locales/de-DE.js +1 -0
- package/2x/cjs/locales/en-US.d.ts +1 -0
- package/2x/cjs/locales/es-ES.d.ts +1 -0
- package/2x/cjs/locales/fa-IR.d.ts +1 -0
- package/2x/cjs/locales/fr-FR.d.ts +1 -0
- package/2x/cjs/locales/hr-HR.d.ts +1 -0
- package/2x/cjs/locales/hr-HR.js +1 -0
- package/2x/cjs/locales/hu-HU.d.ts +1 -0
- package/2x/cjs/locales/id-ID.d.ts +1 -0
- package/2x/cjs/locales/in-ID.d.ts +1 -0
- package/2x/cjs/locales/in-ID.js +1 -0
- package/2x/cjs/locales/it-IT.d.ts +1 -0
- package/2x/cjs/locales/ja-JP.d.ts +1 -0
- package/2x/cjs/locales/kk-KZ.d.ts +1 -0
- package/2x/cjs/locales/ko-KR.d.ts +1 -0
- package/2x/cjs/locales/ms-MY.d.ts +1 -0
- package/2x/cjs/locales/ms-MY.js +1 -0
- package/2x/cjs/locales/nb-NO.d.ts +1 -0
- package/2x/cjs/locales/nl-NL.d.ts +1 -0
- package/2x/cjs/locales/pt-BR.d.ts +1 -0
- package/2x/cjs/locales/ru-RU.d.ts +1 -0
- package/2x/cjs/locales/ru-RU.js +8 -2
- package/2x/cjs/locales/sr-RS.d.ts +1 -0
- package/2x/cjs/locales/sr-RS.js +1 -0
- package/2x/cjs/locales/th-TH.d.ts +1 -0
- package/2x/cjs/locales/th-TH.js +1 -0
- package/2x/cjs/locales/tr-TR.d.ts +1 -0
- package/2x/cjs/locales/vi-VN.d.ts +1 -0
- package/2x/cjs/locales/vi-VN.js +1 -0
- package/2x/cjs/locales/zh-CN.js +1 -0
- package/2x/cjs/locales/zh-HK.d.ts +1 -0
- package/2x/cjs/locales/zh-TW.d.ts +1 -0
- package/2x/cjs/utils/render-to-body.d.ts +1 -1
- package/2x/cjs/utils/render-to-body.js +2 -9
- package/2x/cjs/utils/render.d.ts +1 -9
- package/2x/cjs/utils/render.js +10 -68
- package/2x/cjs/utils/unstable-render.d.ts +9 -0
- package/2x/cjs/utils/unstable-render.js +37 -0
- package/2x/es/components/button/button.d.ts +2 -2
- package/2x/es/components/button/button.js +1 -0
- package/2x/es/components/calendar-picker-view/calendar-picker-view.js +3 -0
- package/2x/es/components/date-picker/date-picker-date-utils.d.ts +1 -1
- package/2x/es/components/date-picker/date-picker-date-utils.js +23 -8
- package/2x/es/components/date-picker/date-picker-quarter-utils.d.ts +3 -1
- package/2x/es/components/date-picker/date-picker-quarter-utils.js +7 -2
- package/2x/es/components/date-picker/date-picker-week-utils.d.ts +3 -1
- package/2x/es/components/date-picker/date-picker-week-utils.js +12 -4
- package/2x/es/components/date-picker-view/date-picker-view.d.ts +5 -3
- package/2x/es/components/date-picker-view/date-picker-view.js +4 -4
- package/2x/es/components/date-picker-view/useRenderLabel.js +2 -2
- package/2x/es/components/ellipsis/ellipsis.d.ts +3 -0
- package/2x/es/components/ellipsis/ellipsis.js +10 -2
- package/2x/es/components/number-keyboard/number-keyboard.d.ts +1 -1
- package/2x/es/components/popover/wrapper.d.ts +6 -9
- package/2x/es/components/popover/wrapper.js +30 -5
- package/2x/es/components/space/space.css +4 -4
- package/2x/es/components/swiper/swiper.js +1 -1
- package/2x/es/components/tabs/tabs.js +44 -12
- package/2x/es/components/virtual-input/virtual-input.css +7 -1
- package/2x/es/components/virtual-input/virtual-input.d.ts +6 -0
- package/2x/es/components/virtual-input/virtual-input.js +133 -7
- package/2x/es/index.d.ts +1 -0
- package/2x/es/index.js +3 -1
- package/2x/es/locales/ar-SA.d.ts +1 -0
- package/2x/es/locales/ar-SA.js +1 -0
- package/2x/es/locales/base.d.ts +1 -0
- package/2x/es/locales/base.js +1 -0
- package/2x/es/locales/cnr-ME.d.ts +1 -0
- package/2x/es/locales/cnr-ME.js +1 -0
- package/2x/es/locales/da-DK.d.ts +1 -0
- package/2x/es/locales/de-DE.d.ts +1 -0
- package/2x/es/locales/de-DE.js +1 -0
- package/2x/es/locales/en-US.d.ts +1 -0
- package/2x/es/locales/es-ES.d.ts +1 -0
- package/2x/es/locales/fa-IR.d.ts +1 -0
- package/2x/es/locales/fr-FR.d.ts +1 -0
- package/2x/es/locales/hr-HR.d.ts +1 -0
- package/2x/es/locales/hr-HR.js +1 -0
- package/2x/es/locales/hu-HU.d.ts +1 -0
- package/2x/es/locales/id-ID.d.ts +1 -0
- package/2x/es/locales/in-ID.d.ts +1 -0
- package/2x/es/locales/in-ID.js +1 -0
- package/2x/es/locales/it-IT.d.ts +1 -0
- package/2x/es/locales/ja-JP.d.ts +1 -0
- package/2x/es/locales/kk-KZ.d.ts +1 -0
- package/2x/es/locales/ko-KR.d.ts +1 -0
- package/2x/es/locales/ms-MY.d.ts +1 -0
- package/2x/es/locales/ms-MY.js +1 -0
- package/2x/es/locales/nb-NO.d.ts +1 -0
- package/2x/es/locales/nl-NL.d.ts +1 -0
- package/2x/es/locales/pt-BR.d.ts +1 -0
- package/2x/es/locales/ru-RU.d.ts +1 -0
- package/2x/es/locales/ru-RU.js +8 -2
- package/2x/es/locales/sr-RS.d.ts +1 -0
- package/2x/es/locales/sr-RS.js +1 -0
- package/2x/es/locales/th-TH.d.ts +1 -0
- package/2x/es/locales/th-TH.js +1 -0
- package/2x/es/locales/tr-TR.d.ts +1 -0
- package/2x/es/locales/vi-VN.d.ts +1 -0
- package/2x/es/locales/vi-VN.js +1 -0
- package/2x/es/locales/zh-CN.js +1 -0
- package/2x/es/locales/zh-HK.d.ts +1 -0
- package/2x/es/locales/zh-TW.d.ts +1 -0
- package/2x/es/utils/render-to-body.d.ts +1 -1
- package/2x/es/utils/render-to-body.js +2 -9
- package/2x/es/utils/render.d.ts +1 -9
- package/2x/es/utils/render.js +1 -65
- package/2x/es/utils/unstable-render.d.ts +9 -0
- package/2x/es/utils/unstable-render.js +28 -0
- package/2x/package.json +4 -4
- package/README.md +8 -1
- package/bundle/antd-mobile.cjs.development.js +2495 -1614
- package/bundle/antd-mobile.cjs.js +7 -7
- package/bundle/antd-mobile.compatible.umd.js +1 -1
- package/bundle/antd-mobile.es.development.js +1530 -649
- package/bundle/antd-mobile.es.js +7495 -6799
- package/bundle/antd-mobile.umd.development.js +2494 -1613
- package/bundle/antd-mobile.umd.js +7 -7
- package/bundle/style.css +1 -1
- package/cjs/components/button/button.d.ts +2 -2
- package/cjs/components/button/button.js +1 -0
- package/cjs/components/calendar-picker-view/calendar-picker-view.js +3 -0
- package/cjs/components/date-picker/date-picker-date-utils.d.ts +1 -1
- package/cjs/components/date-picker/date-picker-date-utils.js +23 -8
- package/cjs/components/date-picker/date-picker-quarter-utils.d.ts +3 -1
- package/cjs/components/date-picker/date-picker-quarter-utils.js +7 -2
- package/cjs/components/date-picker/date-picker-week-utils.d.ts +3 -1
- package/cjs/components/date-picker/date-picker-week-utils.js +12 -4
- package/cjs/components/date-picker-view/date-picker-view.d.ts +5 -3
- package/cjs/components/date-picker-view/date-picker-view.js +3 -3
- package/cjs/components/date-picker-view/useRenderLabel.js +2 -2
- package/cjs/components/ellipsis/ellipsis.d.ts +3 -0
- package/cjs/components/ellipsis/ellipsis.js +10 -2
- package/cjs/components/number-keyboard/number-keyboard.d.ts +1 -1
- package/cjs/components/popover/wrapper.d.ts +6 -9
- package/cjs/components/popover/wrapper.js +32 -6
- package/cjs/components/space/space.css +3 -3
- package/cjs/components/swiper/swiper.js +1 -1
- package/cjs/components/tabs/tabs.js +45 -13
- package/cjs/components/virtual-input/virtual-input.css +6 -1
- package/cjs/components/virtual-input/virtual-input.d.ts +6 -0
- package/cjs/components/virtual-input/virtual-input.js +133 -7
- package/cjs/index.d.ts +1 -0
- package/cjs/index.js +7 -0
- package/cjs/locales/ar-SA.d.ts +1 -0
- package/cjs/locales/ar-SA.js +1 -0
- package/cjs/locales/base.d.ts +1 -0
- package/cjs/locales/base.js +1 -0
- package/cjs/locales/cnr-ME.d.ts +1 -0
- package/cjs/locales/cnr-ME.js +1 -0
- package/cjs/locales/da-DK.d.ts +1 -0
- package/cjs/locales/de-DE.d.ts +1 -0
- package/cjs/locales/de-DE.js +1 -0
- package/cjs/locales/en-US.d.ts +1 -0
- package/cjs/locales/es-ES.d.ts +1 -0
- package/cjs/locales/fa-IR.d.ts +1 -0
- package/cjs/locales/fr-FR.d.ts +1 -0
- package/cjs/locales/hr-HR.d.ts +1 -0
- package/cjs/locales/hr-HR.js +1 -0
- package/cjs/locales/hu-HU.d.ts +1 -0
- package/cjs/locales/id-ID.d.ts +1 -0
- package/cjs/locales/in-ID.d.ts +1 -0
- package/cjs/locales/in-ID.js +1 -0
- package/cjs/locales/it-IT.d.ts +1 -0
- package/cjs/locales/ja-JP.d.ts +1 -0
- package/cjs/locales/kk-KZ.d.ts +1 -0
- package/cjs/locales/ko-KR.d.ts +1 -0
- package/cjs/locales/ms-MY.d.ts +1 -0
- package/cjs/locales/ms-MY.js +1 -0
- package/cjs/locales/nb-NO.d.ts +1 -0
- package/cjs/locales/nl-NL.d.ts +1 -0
- package/cjs/locales/pt-BR.d.ts +1 -0
- package/cjs/locales/ru-RU.d.ts +1 -0
- package/cjs/locales/ru-RU.js +8 -2
- package/cjs/locales/sr-RS.d.ts +1 -0
- package/cjs/locales/sr-RS.js +1 -0
- package/cjs/locales/th-TH.d.ts +1 -0
- package/cjs/locales/th-TH.js +1 -0
- package/cjs/locales/tr-TR.d.ts +1 -0
- package/cjs/locales/vi-VN.d.ts +1 -0
- package/cjs/locales/vi-VN.js +1 -0
- package/cjs/locales/zh-CN.js +1 -0
- package/cjs/locales/zh-HK.d.ts +1 -0
- package/cjs/locales/zh-TW.d.ts +1 -0
- package/cjs/utils/render-to-body.d.ts +1 -1
- package/cjs/utils/render-to-body.js +2 -9
- package/cjs/utils/render.d.ts +1 -9
- package/cjs/utils/render.js +10 -68
- package/cjs/utils/unstable-render.d.ts +9 -0
- package/cjs/utils/unstable-render.js +37 -0
- package/es/components/button/button.d.ts +2 -2
- package/es/components/button/button.js +1 -0
- package/es/components/calendar-picker-view/calendar-picker-view.js +3 -0
- package/es/components/date-picker/date-picker-date-utils.d.ts +1 -1
- package/es/components/date-picker/date-picker-date-utils.js +23 -8
- package/es/components/date-picker/date-picker-quarter-utils.d.ts +3 -1
- package/es/components/date-picker/date-picker-quarter-utils.js +7 -2
- package/es/components/date-picker/date-picker-week-utils.d.ts +3 -1
- package/es/components/date-picker/date-picker-week-utils.js +12 -4
- package/es/components/date-picker-view/date-picker-view.d.ts +5 -3
- package/es/components/date-picker-view/date-picker-view.js +4 -4
- package/es/components/date-picker-view/useRenderLabel.js +2 -2
- package/es/components/ellipsis/ellipsis.d.ts +3 -0
- package/es/components/ellipsis/ellipsis.js +10 -2
- package/es/components/number-keyboard/number-keyboard.d.ts +1 -1
- package/es/components/popover/wrapper.d.ts +6 -9
- package/es/components/popover/wrapper.js +30 -5
- package/es/components/space/space.css +3 -3
- package/es/components/swiper/swiper.js +1 -1
- package/es/components/tabs/tabs.js +44 -12
- package/es/components/virtual-input/virtual-input.css +6 -1
- package/es/components/virtual-input/virtual-input.d.ts +6 -0
- package/es/components/virtual-input/virtual-input.js +133 -7
- package/es/index.d.ts +1 -0
- package/es/index.js +3 -1
- package/es/locales/ar-SA.d.ts +1 -0
- package/es/locales/ar-SA.js +1 -0
- package/es/locales/base.d.ts +1 -0
- package/es/locales/base.js +1 -0
- package/es/locales/cnr-ME.d.ts +1 -0
- package/es/locales/cnr-ME.js +1 -0
- package/es/locales/da-DK.d.ts +1 -0
- package/es/locales/de-DE.d.ts +1 -0
- package/es/locales/de-DE.js +1 -0
- package/es/locales/en-US.d.ts +1 -0
- package/es/locales/es-ES.d.ts +1 -0
- package/es/locales/fa-IR.d.ts +1 -0
- package/es/locales/fr-FR.d.ts +1 -0
- package/es/locales/hr-HR.d.ts +1 -0
- package/es/locales/hr-HR.js +1 -0
- package/es/locales/hu-HU.d.ts +1 -0
- package/es/locales/id-ID.d.ts +1 -0
- package/es/locales/in-ID.d.ts +1 -0
- package/es/locales/in-ID.js +1 -0
- package/es/locales/it-IT.d.ts +1 -0
- package/es/locales/ja-JP.d.ts +1 -0
- package/es/locales/kk-KZ.d.ts +1 -0
- package/es/locales/ko-KR.d.ts +1 -0
- package/es/locales/ms-MY.d.ts +1 -0
- package/es/locales/ms-MY.js +1 -0
- package/es/locales/nb-NO.d.ts +1 -0
- package/es/locales/nl-NL.d.ts +1 -0
- package/es/locales/pt-BR.d.ts +1 -0
- package/es/locales/ru-RU.d.ts +1 -0
- package/es/locales/ru-RU.js +8 -2
- package/es/locales/sr-RS.d.ts +1 -0
- package/es/locales/sr-RS.js +1 -0
- package/es/locales/th-TH.d.ts +1 -0
- package/es/locales/th-TH.js +1 -0
- package/es/locales/tr-TR.d.ts +1 -0
- package/es/locales/vi-VN.d.ts +1 -0
- package/es/locales/vi-VN.js +1 -0
- package/es/locales/zh-CN.js +1 -0
- package/es/locales/zh-HK.d.ts +1 -0
- package/es/locales/zh-TW.d.ts +1 -0
- package/es/utils/render-to-body.d.ts +1 -1
- package/es/utils/render-to-body.js +2 -9
- package/es/utils/render.d.ts +1 -9
- package/es/utils/render.js +1 -65
- package/es/utils/unstable-render.d.ts +9 -0
- package/es/utils/unstable-render.js +28 -0
- package/package.json +4 -4
- package/umd/antd-mobile.js +1 -1
- package/2x/cjs/components/ellipsis/~ellipsis.d.ts +0 -15
- package/2x/cjs/components/ellipsis/~ellipsis.js +0 -161
- package/2x/es/components/ellipsis/~ellipsis.d.ts +0 -15
- package/2x/es/components/ellipsis/~ellipsis.js +0 -151
- package/cjs/components/ellipsis/~ellipsis.d.ts +0 -15
- package/cjs/components/ellipsis/~ellipsis.js +0 -161
- package/es/components/ellipsis/~ellipsis.d.ts +0 -15
- package/es/components/ellipsis/~ellipsis.js +0 -151
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { animated, useSpring } from '@react-spring/web';
|
|
2
|
+
import { useIsomorphicLayoutEffect, useThrottleFn } from 'ahooks';
|
|
2
3
|
import classNames from 'classnames';
|
|
3
|
-
import {
|
|
4
|
-
import { withNativeProps } from '../../utils/native-props';
|
|
5
|
-
import { usePropsValue } from '../../utils/use-props-value';
|
|
4
|
+
import React, { isValidElement, useEffect, useRef } from 'react';
|
|
6
5
|
import { bound } from '../../utils/bound';
|
|
7
|
-
import {
|
|
6
|
+
import { withNativeProps } from '../../utils/native-props';
|
|
7
|
+
import { ShouldRender } from '../../utils/should-render';
|
|
8
|
+
import { traverseReactNode } from '../../utils/traverse-react-node';
|
|
9
|
+
import { useIsomorphicUpdateLayoutEffect } from '../../utils/use-isomorphic-update-layout-effect';
|
|
8
10
|
import { useMutationEffect } from '../../utils/use-mutation-effect';
|
|
11
|
+
import { usePropsValue } from '../../utils/use-props-value';
|
|
9
12
|
import { useResizeEffect } from '../../utils/use-resize-effect';
|
|
10
13
|
import { mergeProps } from '../../utils/with-default-props';
|
|
11
|
-
import { useIsomorphicUpdateLayoutEffect } from '../../utils/use-isomorphic-update-layout-effect';
|
|
12
|
-
import { ShouldRender } from '../../utils/should-render';
|
|
13
|
-
import { traverseReactNode } from '../../utils/traverse-react-node';
|
|
14
14
|
const classPrefix = `adm-tabs`;
|
|
15
15
|
export const Tab = () => {
|
|
16
16
|
return null;
|
|
@@ -25,6 +25,7 @@ export const Tabs = p => {
|
|
|
25
25
|
const props = mergeProps(defaultProps, p);
|
|
26
26
|
const tabListContainerRef = useRef(null);
|
|
27
27
|
const activeLineRef = useRef(null);
|
|
28
|
+
const tabRefs = useRef({});
|
|
28
29
|
const keyToIndexRecord = {};
|
|
29
30
|
let firstActiveKey = null;
|
|
30
31
|
const panes = [];
|
|
@@ -166,7 +167,7 @@ export const Tabs = p => {
|
|
|
166
167
|
});
|
|
167
168
|
const {
|
|
168
169
|
run: updateMask
|
|
169
|
-
} = useThrottleFn(
|
|
170
|
+
} = useThrottleFn(immediate => {
|
|
170
171
|
const container = tabListContainerRef.current;
|
|
171
172
|
if (!container) return;
|
|
172
173
|
const scrollLeft = container.scrollLeft;
|
|
@@ -197,6 +198,34 @@ export const Tabs = p => {
|
|
|
197
198
|
useIsomorphicLayoutEffect(() => {
|
|
198
199
|
updateMask(true);
|
|
199
200
|
}, []);
|
|
201
|
+
const handleKeyDown = e => {
|
|
202
|
+
const keys = Object.keys(keyToIndexRecord);
|
|
203
|
+
const currentIndex = keyToIndexRecord[activeKey];
|
|
204
|
+
const isNext = isRTL ? e.key === 'ArrowLeft' : e.key === 'ArrowRight';
|
|
205
|
+
const isPrev = isRTL ? e.key === 'ArrowRight' : e.key === 'ArrowLeft';
|
|
206
|
+
const offsetDirection = isNext ? 1 : -1;
|
|
207
|
+
const findNextEnabledTab = (startIndex, direction) => {
|
|
208
|
+
const length = keys.length;
|
|
209
|
+
for (let i = 0; i < length; i++) {
|
|
210
|
+
const index = (startIndex + direction * (i + 1) + length) % length;
|
|
211
|
+
const key = keys[index];
|
|
212
|
+
const pane = panes.find(p => p.key === key);
|
|
213
|
+
if (!(pane === null || pane === void 0 ? void 0 : pane.props.disabled)) return key;
|
|
214
|
+
}
|
|
215
|
+
return keys[startIndex];
|
|
216
|
+
};
|
|
217
|
+
const currentKey = findNextEnabledTab(currentIndex, offsetDirection);
|
|
218
|
+
if (isNext || isPrev) {
|
|
219
|
+
e.preventDefault();
|
|
220
|
+
setActiveKey(currentKey);
|
|
221
|
+
}
|
|
222
|
+
};
|
|
223
|
+
useEffect(() => {
|
|
224
|
+
var _a;
|
|
225
|
+
if (activeKey && tabRefs.current[activeKey]) {
|
|
226
|
+
(_a = tabRefs.current[activeKey]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
227
|
+
}
|
|
228
|
+
}, [activeKey]);
|
|
200
229
|
return withNativeProps(props, React.createElement("div", {
|
|
201
230
|
className: classPrefix,
|
|
202
231
|
style: {
|
|
@@ -219,6 +248,7 @@ export const Tabs = p => {
|
|
|
219
248
|
ref: tabListContainerRef,
|
|
220
249
|
scrollLeft: scrollLeft,
|
|
221
250
|
onScroll: updateMask,
|
|
251
|
+
onKeyDown: handleKeyDown,
|
|
222
252
|
role: 'tablist'
|
|
223
253
|
}, React.createElement(animated.div, {
|
|
224
254
|
ref: activeLineRef,
|
|
@@ -233,6 +263,10 @@ export const Tabs = p => {
|
|
|
233
263
|
[`${classPrefix}-tab-wrapper-stretch`]: props.stretch
|
|
234
264
|
})
|
|
235
265
|
}, React.createElement("div", {
|
|
266
|
+
role: 'tab',
|
|
267
|
+
"aria-selected": pane.key === activeKey,
|
|
268
|
+
tabIndex: pane.key === activeKey ? 0 : -1,
|
|
269
|
+
ref: el => tabRefs.current[pane.key] = el,
|
|
236
270
|
onClick: () => {
|
|
237
271
|
const {
|
|
238
272
|
key
|
|
@@ -246,9 +280,7 @@ export const Tabs = p => {
|
|
|
246
280
|
className: classNames(`${classPrefix}-tab`, {
|
|
247
281
|
[`${classPrefix}-tab-active`]: pane.key === activeKey,
|
|
248
282
|
[`${classPrefix}-tab-disabled`]: pane.props.disabled
|
|
249
|
-
})
|
|
250
|
-
role: 'tab',
|
|
251
|
-
"aria-selected": pane.key === activeKey
|
|
283
|
+
})
|
|
252
284
|
}, pane.props.title)))))), panes.map(pane => {
|
|
253
285
|
if (pane.props.children === undefined) {
|
|
254
286
|
return null;
|
|
@@ -28,8 +28,10 @@
|
|
|
28
28
|
z-index: 1;
|
|
29
29
|
width: 100%;
|
|
30
30
|
max-width: 100%;
|
|
31
|
+
min-height: 1.5em;
|
|
31
32
|
overflow-y: hidden;
|
|
32
33
|
overflow-x: scroll;
|
|
34
|
+
letter-spacing: 2px;
|
|
33
35
|
scrollbar-width: none;
|
|
34
36
|
}
|
|
35
37
|
|
|
@@ -55,6 +57,7 @@
|
|
|
55
57
|
height: 1.3em;
|
|
56
58
|
vertical-align: top;
|
|
57
59
|
margin-right: 2px;
|
|
60
|
+
position: absolute;
|
|
58
61
|
}
|
|
59
62
|
|
|
60
63
|
.adm-virtual-input-caret {
|
|
@@ -70,7 +73,6 @@
|
|
|
70
73
|
}
|
|
71
74
|
|
|
72
75
|
.adm-virtual-input:focus .adm-virtual-input-caret {
|
|
73
|
-
display: block;
|
|
74
76
|
animation-name: adm-caret-blink;
|
|
75
77
|
animation-duration: 1s;
|
|
76
78
|
animation-timing-function: linear;
|
|
@@ -81,6 +83,10 @@
|
|
|
81
83
|
color: var(--disabled-color);
|
|
82
84
|
}
|
|
83
85
|
|
|
86
|
+
.adm-virtual-input-caret-dragging .adm-virtual-input-caret {
|
|
87
|
+
animation: none !important;
|
|
88
|
+
}
|
|
89
|
+
|
|
84
90
|
@keyframes adm-caret-blink {
|
|
85
91
|
from {
|
|
86
92
|
opacity: 1;
|
|
@@ -3,6 +3,10 @@ import React from 'react';
|
|
|
3
3
|
import { NativeProps } from '../../utils/native-props';
|
|
4
4
|
import type { InputProps } from '../input';
|
|
5
5
|
import { NumberKeyboardProps } from '../number-keyboard';
|
|
6
|
+
export declare type Cursor = {
|
|
7
|
+
movable?: boolean;
|
|
8
|
+
onMove?: (position: number) => void;
|
|
9
|
+
};
|
|
6
10
|
export declare type VirtualInputProps = {
|
|
7
11
|
onFocus?: () => void;
|
|
8
12
|
onBlur?: () => void;
|
|
@@ -10,6 +14,7 @@ export declare type VirtualInputProps = {
|
|
|
10
14
|
keyboard?: ReactElement<NumberKeyboardProps>;
|
|
11
15
|
clearable?: boolean;
|
|
12
16
|
onClear?: () => void;
|
|
17
|
+
cursor?: Cursor;
|
|
13
18
|
} & Pick<InputProps, 'value' | 'onChange' | 'placeholder' | 'disabled' | 'clearIcon'> & NativeProps<'--font-size' | '--color' | '--placeholder-color' | '--disabled-color' | '--text-align' | '--caret-width' | '--caret-color'>;
|
|
14
19
|
export declare type VirtualInputRef = {
|
|
15
20
|
focus: () => void;
|
|
@@ -22,6 +27,7 @@ export declare const VirtualInput: React.ForwardRefExoticComponent<{
|
|
|
22
27
|
keyboard?: ReactElement<NumberKeyboardProps, string | React.JSXElementConstructor<any>> | undefined;
|
|
23
28
|
clearable?: boolean | undefined;
|
|
24
29
|
onClear?: (() => void) | undefined;
|
|
30
|
+
cursor?: Cursor | undefined;
|
|
25
31
|
} & Pick<InputProps, "value" | "onChange" | "disabled" | "placeholder" | "clearIcon"> & {
|
|
26
32
|
className?: string | undefined;
|
|
27
33
|
style?: (React.CSSProperties & Partial<Record<"--color" | "--font-size" | "--placeholder-color" | "--text-align" | "--disabled-color" | "--caret-width" | "--caret-color", string>>) | undefined;
|
|
@@ -8,7 +8,10 @@ import { mergeProp, mergeProps } from '../../utils/with-default-props';
|
|
|
8
8
|
import { useConfig } from '../config-provider';
|
|
9
9
|
const classPrefix = 'adm-virtual-input';
|
|
10
10
|
const defaultProps = {
|
|
11
|
-
defaultValue: ''
|
|
11
|
+
defaultValue: '',
|
|
12
|
+
cursor: {
|
|
13
|
+
movable: false
|
|
14
|
+
}
|
|
12
15
|
};
|
|
13
16
|
export const VirtualInput = forwardRef((props, ref) => {
|
|
14
17
|
const {
|
|
@@ -20,6 +23,14 @@ export const VirtualInput = forwardRef((props, ref) => {
|
|
|
20
23
|
const rootRef = useRef(null);
|
|
21
24
|
const contentRef = useRef(null);
|
|
22
25
|
const [hasFocus, setHasFocus] = useState(false);
|
|
26
|
+
const [caretPosition, setCaretPosition] = useState(value.length); // 光标位置,从 0 开始,如值是 2 则表示光标在顺序下标为 2 的数字之前
|
|
27
|
+
const keyboardDataRef = useRef({}); // 临时记录虚拟键盘输入,在下次更新时用于判断光标位置如何调整
|
|
28
|
+
const touchDataRef = useRef(); // 记录上一次 touch 时的坐标位置
|
|
29
|
+
const charRef = useRef(null); // 第一个字符的 DOM
|
|
30
|
+
const charWidthRef = useRef(0); // 单个字符宽度
|
|
31
|
+
const caretRef = useRef(null); // 光标的 DOM
|
|
32
|
+
const [isCaretDragging, setIsCaretDragging] = useState(false);
|
|
33
|
+
const touchMoveTimeoutRef = useRef();
|
|
23
34
|
const clearIcon = mergeProp(React.createElement(CloseCircleFill, null), componentConfig.clearIcon, props.clearIcon);
|
|
24
35
|
function scrollToEnd() {
|
|
25
36
|
const root = rootRef.current;
|
|
@@ -31,6 +42,24 @@ export const VirtualInput = forwardRef((props, ref) => {
|
|
|
31
42
|
if (!content) return;
|
|
32
43
|
content.scrollLeft = content.clientWidth;
|
|
33
44
|
}
|
|
45
|
+
useEffect(() => {
|
|
46
|
+
// 记录单个字符的宽度,用于光标移动时的计算
|
|
47
|
+
if (charRef.current) {
|
|
48
|
+
charWidthRef.current = charRef.current.getBoundingClientRect().width;
|
|
49
|
+
}
|
|
50
|
+
}, [value]);
|
|
51
|
+
useEffect(() => {
|
|
52
|
+
// 经过外部受控逻辑后,再调整光标位置,如果受控逻辑改动了值则光标放到最后
|
|
53
|
+
if (value === keyboardDataRef.current.newValue) {
|
|
54
|
+
if (keyboardDataRef.current.mode === 'input') {
|
|
55
|
+
setCaretPosition(c => c + 1);
|
|
56
|
+
} else if (keyboardDataRef.current.mode === 'delete') {
|
|
57
|
+
setCaretPosition(c => c - 1);
|
|
58
|
+
}
|
|
59
|
+
} else {
|
|
60
|
+
setCaretPosition(value.length);
|
|
61
|
+
}
|
|
62
|
+
}, [value]);
|
|
34
63
|
useIsomorphicLayoutEffect(() => {
|
|
35
64
|
scrollToEnd();
|
|
36
65
|
}, [value]);
|
|
@@ -63,12 +92,25 @@ export const VirtualInput = forwardRef((props, ref) => {
|
|
|
63
92
|
const keyboardElement = keyboard && React.cloneElement(keyboard, {
|
|
64
93
|
onInput: v => {
|
|
65
94
|
var _a, _b;
|
|
66
|
-
|
|
95
|
+
const newValue = value.substring(0, caretPosition) + v + value.substring(caretPosition);
|
|
96
|
+
// 临时记录,用于后续光标位置
|
|
97
|
+
keyboardDataRef.current = {
|
|
98
|
+
newValue,
|
|
99
|
+
mode: 'input'
|
|
100
|
+
};
|
|
101
|
+
setValue(newValue);
|
|
67
102
|
(_b = (_a = keyboard.props).onInput) === null || _b === void 0 ? void 0 : _b.call(_a, v);
|
|
68
103
|
},
|
|
69
104
|
onDelete: () => {
|
|
70
105
|
var _a, _b;
|
|
71
|
-
|
|
106
|
+
if (caretPosition === 0) return;
|
|
107
|
+
const newValue = value.substring(0, caretPosition - 1) + value.substring(caretPosition);
|
|
108
|
+
// 临时记录,用于后续光标位置
|
|
109
|
+
keyboardDataRef.current = {
|
|
110
|
+
newValue,
|
|
111
|
+
mode: 'delete'
|
|
112
|
+
};
|
|
113
|
+
setValue(newValue);
|
|
72
114
|
(_b = (_a = keyboard.props).onDelete) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
73
115
|
},
|
|
74
116
|
visible: hasFocus,
|
|
@@ -86,10 +128,82 @@ export const VirtualInput = forwardRef((props, ref) => {
|
|
|
86
128
|
},
|
|
87
129
|
getContainer: null
|
|
88
130
|
});
|
|
131
|
+
// 点击输入框时,将光标置于最后
|
|
132
|
+
const setCaretPositionToEnd = () => {
|
|
133
|
+
var _a, _b;
|
|
134
|
+
if (caretPosition !== value.length) {
|
|
135
|
+
setCaretPosition(value.length);
|
|
136
|
+
(_b = (_a = mergedProps.cursor) === null || _a === void 0 ? void 0 : _a.onMove) === null || _b === void 0 ? void 0 : _b.call(_a, value.length);
|
|
137
|
+
}
|
|
138
|
+
};
|
|
139
|
+
// 点击单个字符时,根据点击位置置于字符前或后
|
|
140
|
+
const changeCaretPosition = index => e => {
|
|
141
|
+
var _a, _b, _c;
|
|
142
|
+
if (mergedProps.disabled || !((_a = mergedProps.cursor) === null || _a === void 0 ? void 0 : _a.movable)) return;
|
|
143
|
+
e.stopPropagation();
|
|
144
|
+
const rect = e.target.getBoundingClientRect();
|
|
145
|
+
const midX = rect.left + rect.width / 2;
|
|
146
|
+
const clickX = e.clientX;
|
|
147
|
+
// 点击区域是否偏右
|
|
148
|
+
const isRight = clickX > midX;
|
|
149
|
+
const newCaretPosition = isRight ? index + 1 : index;
|
|
150
|
+
setCaretPosition(newCaretPosition);
|
|
151
|
+
(_c = (_b = mergedProps.cursor) === null || _b === void 0 ? void 0 : _b.onMove) === null || _c === void 0 ? void 0 : _c.call(_b, newCaretPosition);
|
|
152
|
+
};
|
|
153
|
+
// 在光标附近 touchmove 时也可以调整光标位置
|
|
154
|
+
const handleTouchStart = e => {
|
|
155
|
+
var _a;
|
|
156
|
+
if (mergedProps.disabled || !((_a = mergedProps.cursor) === null || _a === void 0 ? void 0 : _a.movable)) return;
|
|
157
|
+
if (!caretRef.current) return;
|
|
158
|
+
const touch = e.touches[0];
|
|
159
|
+
const caretRect = caretRef.current.getBoundingClientRect();
|
|
160
|
+
const distance = Math.abs(touch.clientX - (caretRect.left + caretRect.width / 2));
|
|
161
|
+
if (distance < 20) {
|
|
162
|
+
// 20px 阈值可调整
|
|
163
|
+
touchDataRef.current = {
|
|
164
|
+
startX: touch.clientX,
|
|
165
|
+
startCaretPosition: caretPosition
|
|
166
|
+
};
|
|
167
|
+
} else {
|
|
168
|
+
touchDataRef.current = null;
|
|
169
|
+
}
|
|
170
|
+
};
|
|
171
|
+
const handleTouchMove = e => {
|
|
172
|
+
var _a, _b, _c;
|
|
173
|
+
if (!touchDataRef.current || !((_a = mergedProps.cursor) === null || _a === void 0 ? void 0 : _a.movable)) return;
|
|
174
|
+
setIsCaretDragging(true);
|
|
175
|
+
const touch = e.touches[0];
|
|
176
|
+
const deltaX = touch.clientX - touchDataRef.current.startX;
|
|
177
|
+
const charWidth = charWidthRef.current;
|
|
178
|
+
const moveChars = Math.round(deltaX / charWidth);
|
|
179
|
+
let newCaretPosition = touchDataRef.current.startCaretPosition + moveChars;
|
|
180
|
+
// 边界处理
|
|
181
|
+
newCaretPosition = Math.max(0, Math.min(newCaretPosition, value.length));
|
|
182
|
+
setCaretPosition(newCaretPosition);
|
|
183
|
+
(_c = (_b = mergedProps.cursor) === null || _b === void 0 ? void 0 : _b.onMove) === null || _c === void 0 ? void 0 : _c.call(_b, newCaretPosition);
|
|
184
|
+
// 防止 touchend 不触发
|
|
185
|
+
if (touchMoveTimeoutRef.current) {
|
|
186
|
+
clearTimeout(touchMoveTimeoutRef.current);
|
|
187
|
+
}
|
|
188
|
+
touchMoveTimeoutRef.current = setTimeout(() => {
|
|
189
|
+
setIsCaretDragging(false);
|
|
190
|
+
touchMoveTimeoutRef.current = null;
|
|
191
|
+
}, 500);
|
|
192
|
+
};
|
|
193
|
+
const handleTouchEnd = () => {
|
|
194
|
+
touchDataRef.current = null;
|
|
195
|
+
setIsCaretDragging(false);
|
|
196
|
+
if (touchMoveTimeoutRef.current) {
|
|
197
|
+
clearTimeout(touchMoveTimeoutRef.current);
|
|
198
|
+
touchMoveTimeoutRef.current = null;
|
|
199
|
+
}
|
|
200
|
+
};
|
|
201
|
+
const chars = (value + '').split('');
|
|
89
202
|
return withNativeProps(mergedProps, React.createElement("div", {
|
|
90
203
|
ref: rootRef,
|
|
91
204
|
className: classNames(classPrefix, {
|
|
92
|
-
[`${classPrefix}-disabled`]: mergedProps.disabled
|
|
205
|
+
[`${classPrefix}-disabled`]: mergedProps.disabled,
|
|
206
|
+
[`${classPrefix}-caret-dragging`]: isCaretDragging
|
|
93
207
|
}),
|
|
94
208
|
tabIndex: mergedProps.disabled ? undefined : 0,
|
|
95
209
|
role: 'textbox',
|
|
@@ -100,12 +214,24 @@ export const VirtualInput = forwardRef((props, ref) => {
|
|
|
100
214
|
className: `${classPrefix}-content`,
|
|
101
215
|
ref: contentRef,
|
|
102
216
|
"aria-disabled": mergedProps.disabled,
|
|
103
|
-
"aria-label": mergedProps.placeholder
|
|
104
|
-
|
|
217
|
+
"aria-label": mergedProps.placeholder,
|
|
218
|
+
onClick: setCaretPositionToEnd,
|
|
219
|
+
onTouchStart: handleTouchStart,
|
|
220
|
+
onTouchMove: handleTouchMove,
|
|
221
|
+
onTouchEnd: handleTouchEnd
|
|
222
|
+
}, chars.slice(0, caretPosition).map((i, index) => React.createElement("span", {
|
|
223
|
+
ref: index === 0 ? charRef : undefined,
|
|
224
|
+
key: index,
|
|
225
|
+
onClick: changeCaretPosition(index)
|
|
226
|
+
}, i)), React.createElement("div", {
|
|
105
227
|
className: `${classPrefix}-caret-container`
|
|
106
228
|
}, hasFocus && React.createElement("div", {
|
|
229
|
+
ref: caretRef,
|
|
107
230
|
className: `${classPrefix}-caret`
|
|
108
|
-
}))
|
|
231
|
+
})), chars.slice(caretPosition).map((i, index) => React.createElement("span", {
|
|
232
|
+
key: index,
|
|
233
|
+
onClick: changeCaretPosition(index + caretPosition)
|
|
234
|
+
}, i))), mergedProps.clearable && !!value && hasFocus && React.createElement("div", {
|
|
109
235
|
className: `${classPrefix}-clear`,
|
|
110
236
|
onClick: e => {
|
|
111
237
|
var _a;
|
package/2x/es/index.d.ts
CHANGED
|
@@ -168,3 +168,4 @@ export { default as Footer } from './components/footer';
|
|
|
168
168
|
export type { FooterProps } from './components/footer';
|
|
169
169
|
export { createErrorBlock } from './components/error-block';
|
|
170
170
|
export { reduceMotion, restoreMotion } from './utils/reduce-and-restore-motion';
|
|
171
|
+
export { unstableSetRender } from './utils/unstable-render';
|
package/2x/es/index.js
CHANGED
|
@@ -84,4 +84,6 @@ export { default as VirtualInput } from './components/virtual-input';
|
|
|
84
84
|
export { default as WaterMark } from './components/water-mark';
|
|
85
85
|
export { default as Footer } from './components/footer';
|
|
86
86
|
export { createErrorBlock } from './components/error-block';
|
|
87
|
-
export { reduceMotion, restoreMotion } from './utils/reduce-and-restore-motion';
|
|
87
|
+
export { reduceMotion, restoreMotion } from './utils/reduce-and-restore-motion';
|
|
88
|
+
// compatible
|
|
89
|
+
export { unstableSetRender } from './utils/unstable-render';
|
package/2x/es/locales/ar-SA.d.ts
CHANGED
package/2x/es/locales/ar-SA.js
CHANGED
|
@@ -14,6 +14,7 @@ const arSA = mergeLocale(base, {
|
|
|
14
14
|
'confirm': 'تأكيد',
|
|
15
15
|
'start': 'يبدأ',
|
|
16
16
|
'end': 'ينهي',
|
|
17
|
+
'startAndEnd': 'يبدأ/ينهي',
|
|
17
18
|
'today': 'اليوم',
|
|
18
19
|
'markItems': ['واحد', 'اثنين', 'ثلاثة', 'أربعة', 'خمسة', 'ستة', 'يوم'],
|
|
19
20
|
'yearAndMonth': '${year} سنة ${month} شهر'
|
package/2x/es/locales/base.d.ts
CHANGED
package/2x/es/locales/base.js
CHANGED
package/2x/es/locales/cnr-ME.js
CHANGED
package/2x/es/locales/da-DK.d.ts
CHANGED
package/2x/es/locales/de-DE.d.ts
CHANGED
package/2x/es/locales/de-DE.js
CHANGED
|
@@ -14,6 +14,7 @@ const deDE = mergeLocale(base, {
|
|
|
14
14
|
'confirm': 'Bestätigen',
|
|
15
15
|
'start': 'Starten',
|
|
16
16
|
'end': 'Beenden',
|
|
17
|
+
'startAndEnd': 'Starten/Beenden',
|
|
17
18
|
'today': 'Heute',
|
|
18
19
|
'markItems': ['I', 'II', 'III', 'IV', 'V', 'Sechs', 'Tag'],
|
|
19
20
|
'yearAndMonth': '${year}Jahr${month}Monat'
|
package/2x/es/locales/en-US.d.ts
CHANGED
package/2x/es/locales/es-ES.d.ts
CHANGED
package/2x/es/locales/fa-IR.d.ts
CHANGED
package/2x/es/locales/fr-FR.d.ts
CHANGED
package/2x/es/locales/hr-HR.d.ts
CHANGED
package/2x/es/locales/hr-HR.js
CHANGED
package/2x/es/locales/hu-HU.d.ts
CHANGED
package/2x/es/locales/id-ID.d.ts
CHANGED
package/2x/es/locales/in-ID.d.ts
CHANGED
package/2x/es/locales/in-ID.js
CHANGED
|
@@ -14,6 +14,7 @@ const inID = mergeLocale(base, {
|
|
|
14
14
|
confirm: 'OK',
|
|
15
15
|
start: 'Mulai',
|
|
16
16
|
end: 'Selesai',
|
|
17
|
+
startAndEnd: 'Mulai/Selesai',
|
|
17
18
|
today: 'Hari Ini',
|
|
18
19
|
markItems: ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu', 'Minggu'],
|
|
19
20
|
yearAndMonth: '${year} Tahun ${month} Bulan'
|
package/2x/es/locales/it-IT.d.ts
CHANGED
package/2x/es/locales/ja-JP.d.ts
CHANGED
package/2x/es/locales/kk-KZ.d.ts
CHANGED
package/2x/es/locales/ko-KR.d.ts
CHANGED
package/2x/es/locales/ms-MY.d.ts
CHANGED
package/2x/es/locales/ms-MY.js
CHANGED
|
@@ -14,6 +14,7 @@ const msMY = mergeLocale(base, {
|
|
|
14
14
|
'confirm': 'Ok',
|
|
15
15
|
'start': 'Mula',
|
|
16
16
|
'end': 'Tamat',
|
|
17
|
+
'startAndEnd': 'Mula/Tamat',
|
|
17
18
|
'today': 'Hari ini',
|
|
18
19
|
'markItems': ['Satu', 'Dua', 'Tiga', 'Empat', 'Lima', 'Enam', 'Hari'],
|
|
19
20
|
'yearAndMonth': 'Tahun${year} bulan ${month}'
|
package/2x/es/locales/nb-NO.d.ts
CHANGED
package/2x/es/locales/nl-NL.d.ts
CHANGED
package/2x/es/locales/pt-BR.d.ts
CHANGED