@nutui/nutui-react 2.3.12-beta.0 → 2.3.12
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/CHANGELOG.md +18 -0
- package/dist/esm/ActionSheet.js +30 -76
- package/dist/esm/Address.js +80 -171
- package/dist/esm/Animate.js +21 -49
- package/dist/esm/AnimatingNumbers.js +47 -120
- package/dist/esm/Audio.js +88 -159
- package/dist/esm/Avatar.js +44 -91
- package/dist/esm/AvatarCropper.js +149 -268
- package/dist/esm/AvatarGroup.js +13 -44
- package/dist/esm/BackTop.js +34 -75
- package/dist/esm/Barrage.js +49 -83
- package/dist/esm/Calendar.js +27 -119
- package/dist/esm/CalendarCard.js +180 -291
- package/dist/esm/CalendarItem.js +253 -314
- package/dist/esm/Card.js +38 -72
- package/dist/esm/Cell.js +27 -62
- package/dist/esm/CellGroup.js +16 -45
- package/dist/esm/CheckboxGroup.js +49 -85
- package/dist/esm/CircleProgress.js +42 -93
- package/dist/esm/Col.js +17 -48
- package/dist/esm/Collapse.js +18 -49
- package/dist/esm/ConfigProvider.js +3 -2
- package/dist/esm/CountDown.js +62 -101
- package/dist/esm/DatePicker.js +87 -127
- package/dist/esm/Dialog.js +116 -196
- package/dist/esm/Divider.js +16 -36
- package/dist/esm/Drag.js +32 -76
- package/dist/esm/Elevator.js +93 -133
- package/dist/esm/Ellipsis.js +71 -92
- package/dist/esm/Empty.js +31 -70
- package/dist/esm/FixedNav.js +32 -81
- package/dist/esm/Form.js +28 -61
- package/dist/esm/Grid.js +27 -51
- package/dist/esm/Image.js +47 -102
- package/dist/esm/ImagePreview.js +82 -135
- package/dist/esm/InfiniteLoading.js +77 -159
- package/dist/esm/Input.js +57 -125
- package/dist/esm/InputNumber.js +66 -96
- package/dist/esm/Layout.js +4 -28
- package/dist/esm/Loading.js +13 -40
- package/dist/esm/Menu.js +51 -105
- package/dist/esm/NavBar.js +46 -85
- package/dist/esm/NoticeBar.js +153 -226
- package/dist/esm/Notify.js +87 -178
- package/dist/esm/NumberKeyboard.js +84 -150
- package/dist/esm/Pagination.js +58 -97
- package/dist/esm/Picker.js +215 -276
- package/dist/esm/Popover.js +111 -159
- package/dist/esm/Price.js +23 -60
- package/dist/esm/Progress.js +47 -77
- package/dist/esm/PullToRefresh.js +94 -201
- package/dist/esm/RadioGroup.js +23 -53
- package/dist/esm/Range.js +113 -177
- package/dist/esm/Rate.js +48 -95
- package/dist/esm/Row.js +19 -43
- package/dist/esm/SearchBar.js +52 -119
- package/dist/esm/ShortPassword.js +58 -106
- package/dist/esm/SideNavBar.js +34 -59
- package/dist/esm/SideNavBarItem.js +7 -36
- package/dist/esm/Signature.js +49 -84
- package/dist/esm/Skeleton.js +31 -68
- package/dist/esm/Space.js +7 -34
- package/dist/esm/Step.js +35 -64
- package/dist/esm/Steps.js +16 -40
- package/dist/esm/Sticky.js +64 -108
- package/dist/esm/SubSideNavBar.js +42 -71
- package/dist/esm/Swipe.js +79 -143
- package/dist/esm/Swiper.js +136 -183
- package/dist/esm/SwiperItem.js +13 -38
- package/dist/esm/Switch.js +20 -53
- package/dist/esm/TabPane.js +6 -30
- package/dist/esm/Tabbar.js +29 -59
- package/dist/esm/Table.js +92 -141
- package/dist/esm/Tag.js +30 -74
- package/dist/esm/TextArea.js +37 -82
- package/dist/esm/TimeDetail.js +20 -58
- package/dist/esm/TimeSelect.js +57 -95
- package/dist/esm/Toast.js +110 -197
- package/dist/esm/Tour.js +88 -132
- package/dist/esm/TrendArrow.js +32 -74
- package/dist/esm/Uploader.js +226 -346
- package/dist/esm/UserContext.js +1 -1
- package/dist/esm/Video.js +34 -67
- package/dist/esm/VirtualList.js +127 -160
- package/dist/esm/WaterMark.js +24 -68
- package/dist/esm/badge2.js +23 -53
- package/dist/esm/button2.js +30 -63
- package/dist/esm/can-use-dom.js +1 -1
- package/dist/esm/cascader2.js +307 -536
- package/dist/esm/checkbox2.js +59 -96
- package/dist/esm/collapseitem2.js +48 -86
- package/dist/esm/configprovider2.js +43 -1003
- package/dist/esm/context.js +1 -1
- package/dist/esm/context2.js +1 -1
- package/dist/esm/context3.js +1 -1
- package/dist/esm/context4.js +1 -1
- package/dist/esm/context5.js +8 -8
- package/dist/esm/date.js +88 -66
- package/dist/esm/formitem2.js +236 -1510
- package/dist/esm/get-scroll-parent.js +8 -10
- package/dist/esm/griditem2.js +34 -52
- package/dist/esm/index.js +5 -12
- package/dist/esm/indicator2.js +13 -42
- package/dist/esm/menuitem2.js +81 -124
- package/dist/esm/overlay2.js +39 -78
- package/dist/esm/pad-zero.js +3 -4
- package/dist/esm/popup2.js +79 -124
- package/dist/esm/px-check.js +2 -2
- package/dist/esm/radio2.js +48 -79
- package/dist/esm/raf.js +5 -3
- package/dist/esm/render.js +17 -54
- package/dist/esm/safearea2.js +3 -5
- package/dist/esm/supports-passive.js +3 -3
- package/dist/esm/tabbaritem2.js +42 -58
- package/dist/esm/tabs2.js +82 -120
- package/dist/esm/tslib.es6.js +47 -0
- package/dist/esm/types/src/packages/button/demos/h5/demo1.d.ts +3 -0
- package/dist/esm/types/src/packages/button/demos/h5/demo2.d.ts +3 -0
- package/dist/esm/types/src/packages/button/demos/h5/demo3.d.ts +3 -0
- package/dist/esm/types/src/packages/button/demos/h5/demo4.d.ts +3 -0
- package/dist/esm/types/src/packages/button/demos/h5/demo5.d.ts +3 -0
- package/dist/esm/types/src/packages/button/demos/h5/demo6.d.ts +3 -0
- package/dist/esm/types/src/packages/button/demos/h5/demo7.d.ts +3 -0
- package/dist/esm/types/src/packages/button/demos/h5/demo8.d.ts +3 -0
- package/dist/esm/types/src/packages/button/demos/h5/demo9.d.ts +3 -0
- package/dist/esm/types/src/packages/button/demos/taro/demo1.d.ts +3 -0
- package/dist/esm/types/src/packages/button/demos/taro/demo10.d.ts +3 -0
- package/dist/esm/types/src/packages/button/demos/taro/demo2.d.ts +3 -0
- package/dist/esm/types/src/packages/button/demos/taro/demo3.d.ts +3 -0
- package/dist/esm/types/src/packages/button/demos/taro/demo4.d.ts +3 -0
- package/dist/esm/types/src/packages/button/demos/taro/demo5.d.ts +3 -0
- package/dist/esm/types/src/packages/button/demos/taro/demo6.d.ts +3 -0
- package/dist/esm/types/src/packages/button/demos/taro/demo7.d.ts +3 -0
- package/dist/esm/types/src/packages/button/demos/taro/demo8.d.ts +3 -0
- package/dist/esm/types/src/packages/button/demos/taro/demo9.d.ts +3 -0
- package/dist/esm/types/src/packages/configprovider/configprovider.d.ts +1 -0
- package/dist/esm/types/src/packages/configprovider/configprovider.taro.d.ts +1 -0
- package/dist/esm/types/src/packages/configprovider/index.d.ts +2 -2
- package/dist/esm/types/src/packages/configprovider/index.taro.d.ts +2 -2
- package/dist/esm/types/src/packages/inputnumber/inputnumber.taro.d.ts +2 -0
- package/dist/esm/typings.js +1 -1
- package/dist/esm/use-click-away.js +9 -13
- package/dist/esm/use-client-rect.js +4 -4
- package/dist/esm/use-props-value.js +10 -15
- package/dist/esm/use-refs.js +5 -7
- package/dist/esm/use-touch.js +16 -20
- package/dist/locales/base.js +1 -1
- package/dist/locales/en-US.js +1 -1
- package/dist/locales/id-ID.js +1 -1
- package/dist/locales/tr-TR.js +1 -1
- package/dist/locales/zh-CN.js +1 -1
- package/dist/locales/zh-TW.js +1 -1
- package/dist/locales/zh-UG.js +1 -1
- package/dist/nutui.react.es.js +242 -284
- package/dist/nutui.react.umd.js +239 -281
- package/dist/style.mjs +1 -1
- package/dist/styles/variables-jmapp.scss +4 -0
- package/dist/types/packages/button/demos/h5/demo1.d.ts +3 -0
- package/dist/types/packages/button/demos/h5/demo2.d.ts +3 -0
- package/dist/types/packages/button/demos/h5/demo3.d.ts +3 -0
- package/dist/types/packages/button/demos/h5/demo4.d.ts +3 -0
- package/dist/types/packages/button/demos/h5/demo5.d.ts +3 -0
- package/dist/types/packages/button/demos/h5/demo6.d.ts +3 -0
- package/dist/types/packages/button/demos/h5/demo7.d.ts +3 -0
- package/dist/types/packages/button/demos/h5/demo8.d.ts +3 -0
- package/dist/types/packages/button/demos/h5/demo9.d.ts +3 -0
- package/dist/types/packages/button/demos/taro/demo1.d.ts +3 -0
- package/dist/types/packages/button/demos/taro/demo10.d.ts +3 -0
- package/dist/types/packages/button/demos/taro/demo2.d.ts +3 -0
- package/dist/types/packages/button/demos/taro/demo3.d.ts +3 -0
- package/dist/types/packages/button/demos/taro/demo4.d.ts +3 -0
- package/dist/types/packages/button/demos/taro/demo5.d.ts +3 -0
- package/dist/types/packages/button/demos/taro/demo6.d.ts +3 -0
- package/dist/types/packages/button/demos/taro/demo7.d.ts +3 -0
- package/dist/types/packages/button/demos/taro/demo8.d.ts +3 -0
- package/dist/types/packages/button/demos/taro/demo9.d.ts +3 -0
- package/dist/types/packages/configprovider/configprovider.d.ts +1 -0
- package/dist/types/packages/configprovider/configprovider.taro.d.ts +1 -0
- package/dist/types/packages/configprovider/index.d.ts +2 -2
- package/dist/types/packages/configprovider/index.taro.d.ts +2 -2
- package/dist/types/packages/empty/empty.d.ts +15 -3
- package/dist/types/packages/inputnumber/inputnumber.taro.d.ts +2 -0
- package/dist/types/packages/rate/rate.d.ts +1 -1
- package/package.json +5 -1
package/dist/esm/raf.js
CHANGED
|
@@ -1,15 +1,17 @@
|
|
|
1
|
+
const inBrowser = typeof window !== "undefined";
|
|
1
2
|
function requestAniFrame() {
|
|
2
3
|
if (typeof window !== "undefined") {
|
|
3
|
-
|
|
4
|
+
const _window = window;
|
|
4
5
|
return _window.requestAnimationFrame || _window.webkitRequestAnimationFrame || function(callback) {
|
|
5
6
|
_window.setTimeout(callback, 1e3 / 60);
|
|
6
7
|
};
|
|
7
8
|
}
|
|
8
|
-
return
|
|
9
|
+
return (callback) => {
|
|
9
10
|
setTimeout(callback, 1e3 / 60);
|
|
10
11
|
};
|
|
11
12
|
}
|
|
12
|
-
|
|
13
|
+
const requestAniFrame$1 = requestAniFrame();
|
|
13
14
|
export {
|
|
15
|
+
inBrowser as i,
|
|
14
16
|
requestAniFrame$1 as r
|
|
15
17
|
};
|
package/dist/esm/render.js
CHANGED
|
@@ -1,52 +1,28 @@
|
|
|
1
|
-
import
|
|
2
|
-
import _typeof from "@babel/runtime/helpers/typeof";
|
|
3
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
4
|
-
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
5
|
-
function ownKeys(e, r) {
|
|
6
|
-
var t = Object.keys(e);
|
|
7
|
-
if (Object.getOwnPropertySymbols) {
|
|
8
|
-
var o = Object.getOwnPropertySymbols(e);
|
|
9
|
-
r && (o = o.filter(function(r2) {
|
|
10
|
-
return Object.getOwnPropertyDescriptor(e, r2).enumerable;
|
|
11
|
-
})), t.push.apply(t, o);
|
|
12
|
-
}
|
|
13
|
-
return t;
|
|
14
|
-
}
|
|
15
|
-
function _objectSpread(e) {
|
|
16
|
-
for (var r = 1; r < arguments.length; r++) {
|
|
17
|
-
var t = null != arguments[r] ? arguments[r] : {};
|
|
18
|
-
r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
|
|
19
|
-
_defineProperty(e, r2, t[r2]);
|
|
20
|
-
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
|
|
21
|
-
Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
|
|
22
|
-
});
|
|
23
|
-
}
|
|
24
|
-
return e;
|
|
25
|
-
}
|
|
1
|
+
import { a as __awaiter } from "./tslib.es6.js";
|
|
26
2
|
import * as ReactDOM from "react-dom";
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
3
|
+
const fullClone = Object.assign({}, ReactDOM);
|
|
4
|
+
const { version, render: reactRender, unmountComponentAtNode } = fullClone;
|
|
5
|
+
let createRoot;
|
|
30
6
|
try {
|
|
31
|
-
|
|
7
|
+
const mainVersion = Number((version || "").split(".")[0]);
|
|
32
8
|
if (mainVersion >= 18 && fullClone.createRoot) {
|
|
33
9
|
createRoot = fullClone.createRoot;
|
|
34
10
|
}
|
|
35
11
|
} catch (e) {
|
|
36
12
|
}
|
|
37
13
|
function toggleWarning(skip) {
|
|
38
|
-
|
|
39
|
-
if (__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED &&
|
|
14
|
+
const { __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED } = fullClone;
|
|
15
|
+
if (__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED && typeof __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED === "object") {
|
|
40
16
|
__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.usingClientEntryPoint = skip;
|
|
41
17
|
}
|
|
42
18
|
}
|
|
43
|
-
|
|
19
|
+
const MARK = "__nutui_react_root__";
|
|
44
20
|
function legacyRender(node, container) {
|
|
45
21
|
reactRender(node, container);
|
|
46
22
|
}
|
|
47
23
|
function concurrentRender(node, container) {
|
|
48
24
|
toggleWarning(true);
|
|
49
|
-
|
|
25
|
+
const root = container[MARK] || createRoot(container);
|
|
50
26
|
toggleWarning(false);
|
|
51
27
|
root.render(node);
|
|
52
28
|
container[MARK] = root;
|
|
@@ -61,27 +37,14 @@ function render(node, container) {
|
|
|
61
37
|
function legacyUnmount(container) {
|
|
62
38
|
return unmountComponentAtNode(container);
|
|
63
39
|
}
|
|
64
|
-
function concurrentUnmount(
|
|
65
|
-
return
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
case 0:
|
|
73
|
-
return _context.abrupt("return", Promise.resolve().then(function() {
|
|
74
|
-
var _container$MARK;
|
|
75
|
-
(_container$MARK = container[MARK]) === null || _container$MARK === void 0 || _container$MARK.unmount();
|
|
76
|
-
delete container[MARK];
|
|
77
|
-
}));
|
|
78
|
-
case 1:
|
|
79
|
-
case "end":
|
|
80
|
-
return _context.stop();
|
|
81
|
-
}
|
|
82
|
-
}, _callee);
|
|
83
|
-
}));
|
|
84
|
-
return _concurrentUnmount.apply(this, arguments);
|
|
40
|
+
function concurrentUnmount(container) {
|
|
41
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
42
|
+
return Promise.resolve().then(() => {
|
|
43
|
+
var _a;
|
|
44
|
+
(_a = container[MARK]) === null || _a === void 0 ? void 0 : _a.unmount();
|
|
45
|
+
delete container[MARK];
|
|
46
|
+
});
|
|
47
|
+
});
|
|
85
48
|
}
|
|
86
49
|
function unmount(container) {
|
|
87
50
|
if (createRoot) {
|
package/dist/esm/safearea2.js
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
import React__default from "react";
|
|
2
2
|
import classNames from "classnames";
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
return React__default.createElement("div", {
|
|
6
|
-
className: classNames(classPrefix, "".concat(classPrefix, "-position-").concat(props.position))
|
|
7
|
-
});
|
|
3
|
+
const classPrefix = "nut-safe-area";
|
|
4
|
+
const SafeArea = (props) => {
|
|
5
|
+
return React__default.createElement("div", { className: classNames(classPrefix, `${classPrefix}-position-${props.position}`) });
|
|
8
6
|
};
|
|
9
7
|
export {
|
|
10
8
|
SafeArea as S
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { c as canUseDom } from "./can-use-dom.js";
|
|
2
|
-
|
|
2
|
+
let passiveSupported = false;
|
|
3
3
|
if (canUseDom) {
|
|
4
4
|
try {
|
|
5
|
-
|
|
6
|
-
get
|
|
5
|
+
const opts = Object.defineProperty({}, "passive", {
|
|
6
|
+
get() {
|
|
7
7
|
passiveSupported = true;
|
|
8
8
|
}
|
|
9
9
|
});
|
package/dist/esm/tabbaritem2.js
CHANGED
|
@@ -1,50 +1,35 @@
|
|
|
1
|
-
import
|
|
2
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
|
-
var _excluded = ["className", "style", "title", "icon", "value", "dot", "max", "top", "right", "index"];
|
|
4
|
-
function ownKeys(e, r) {
|
|
5
|
-
var t = Object.keys(e);
|
|
6
|
-
if (Object.getOwnPropertySymbols) {
|
|
7
|
-
var o = Object.getOwnPropertySymbols(e);
|
|
8
|
-
r && (o = o.filter(function(r2) {
|
|
9
|
-
return Object.getOwnPropertyDescriptor(e, r2).enumerable;
|
|
10
|
-
})), t.push.apply(t, o);
|
|
11
|
-
}
|
|
12
|
-
return t;
|
|
13
|
-
}
|
|
14
|
-
function _objectSpread(e) {
|
|
15
|
-
for (var r = 1; r < arguments.length; r++) {
|
|
16
|
-
var t = null != arguments[r] ? arguments[r] : {};
|
|
17
|
-
r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
|
|
18
|
-
_defineProperty(e, r2, t[r2]);
|
|
19
|
-
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
|
|
20
|
-
Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
|
|
21
|
-
});
|
|
22
|
-
}
|
|
23
|
-
return e;
|
|
24
|
-
}
|
|
1
|
+
import { _ as __rest } from "./tslib.es6.js";
|
|
25
2
|
import React__default, { useContext } from "react";
|
|
26
3
|
import classNames from "classnames";
|
|
27
4
|
import { C as ComponentDefaults } from "./typings.js";
|
|
28
5
|
import { B as Badge } from "./badge2.js";
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
6
|
+
const TabbarContext = React__default.createContext(null);
|
|
7
|
+
const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { title: "", icon: null, value: "", dot: false, max: 99, top: "0", right: "5" });
|
|
8
|
+
const TabbarItem = (props) => {
|
|
9
|
+
const ctx = useContext(TabbarContext);
|
|
10
|
+
const _a = Object.assign(Object.assign({}, defaultProps), props), {
|
|
11
|
+
className,
|
|
12
|
+
style,
|
|
13
|
+
title,
|
|
14
|
+
icon,
|
|
15
|
+
value,
|
|
16
|
+
dot,
|
|
17
|
+
max,
|
|
18
|
+
top,
|
|
19
|
+
right,
|
|
20
|
+
// @ts-ignore
|
|
21
|
+
index
|
|
22
|
+
} = _a, rest = __rest(_a, ["className", "style", "title", "icon", "value", "dot", "max", "top", "right", "index"]);
|
|
23
|
+
const active = index === (ctx === null || ctx === void 0 ? void 0 : ctx.selectIndex);
|
|
24
|
+
const classPrefix = "nut-tabbar-item";
|
|
25
|
+
const tabbarItemClass = classNames(classPrefix, {
|
|
26
|
+
[`${classPrefix}-active`]: active
|
|
27
|
+
}, className);
|
|
28
|
+
const boxPrefix = `${classPrefix}-icon-box`;
|
|
29
|
+
const titleClass = classNames(boxPrefix, `${boxPrefix}-nav`, {
|
|
30
|
+
[`${boxPrefix}-large`]: !icon
|
|
31
|
+
});
|
|
32
|
+
const badgeProps = {
|
|
48
33
|
value,
|
|
49
34
|
dot,
|
|
50
35
|
max,
|
|
@@ -52,21 +37,20 @@ var TabbarItem = function TabbarItem2(props) {
|
|
|
52
37
|
right,
|
|
53
38
|
color: ctx === null || ctx === void 0 ? void 0 : ctx.activeColor
|
|
54
39
|
};
|
|
55
|
-
return React__default.createElement("div",
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
}, title)));
|
|
40
|
+
return React__default.createElement("div", Object.assign({ className: tabbarItemClass, style: Object.assign({ color: active ? ctx === null || ctx === void 0 ? void 0 : ctx.activeColor : ctx === null || ctx === void 0 ? void 0 : ctx.inactiveColor }, style), onClick: () => ctx === null || ctx === void 0 ? void 0 : ctx.handleClick(index) }, rest), icon ? React__default.createElement(
|
|
41
|
+
React__default.Fragment,
|
|
42
|
+
null,
|
|
43
|
+
React__default.createElement(
|
|
44
|
+
Badge,
|
|
45
|
+
Object.assign({}, badgeProps),
|
|
46
|
+
React__default.createElement("div", { className: boxPrefix }, icon)
|
|
47
|
+
),
|
|
48
|
+
React__default.createElement("div", { className: titleClass }, title)
|
|
49
|
+
) : React__default.createElement(
|
|
50
|
+
Badge,
|
|
51
|
+
Object.assign({}, badgeProps),
|
|
52
|
+
React__default.createElement("div", { className: titleClass }, title)
|
|
53
|
+
));
|
|
70
54
|
};
|
|
71
55
|
export {
|
|
72
56
|
TabbarItem as T,
|
package/dist/esm/tabs2.js
CHANGED
|
@@ -1,28 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
4
|
-
var _excluded = ["activeColor", "tabStyle", "direction", "activeType", "duration", "align", "title", "children", "onClick", "onChange", "className", "autoHeight"];
|
|
5
|
-
function ownKeys(e, r) {
|
|
6
|
-
var t = Object.keys(e);
|
|
7
|
-
if (Object.getOwnPropertySymbols) {
|
|
8
|
-
var o = Object.getOwnPropertySymbols(e);
|
|
9
|
-
r && (o = o.filter(function(r2) {
|
|
10
|
-
return Object.getOwnPropertyDescriptor(e, r2).enumerable;
|
|
11
|
-
})), t.push.apply(t, o);
|
|
12
|
-
}
|
|
13
|
-
return t;
|
|
14
|
-
}
|
|
15
|
-
function _objectSpread(e) {
|
|
16
|
-
for (var r = 1; r < arguments.length; r++) {
|
|
17
|
-
var t = null != arguments[r] ? arguments[r] : {};
|
|
18
|
-
r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
|
|
19
|
-
_defineProperty(e, r2, t[r2]);
|
|
20
|
-
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
|
|
21
|
-
Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
|
|
22
|
-
});
|
|
23
|
-
}
|
|
24
|
-
return e;
|
|
25
|
-
}
|
|
1
|
+
import { _ as __rest } from "./tslib.es6.js";
|
|
26
2
|
import React__default, { useState, useRef, useEffect } from "react";
|
|
27
3
|
import classNames from "classnames";
|
|
28
4
|
import { JoySmile } from "@nutui/icons-react";
|
|
@@ -30,30 +6,23 @@ import { C as ComponentDefaults } from "./typings.js";
|
|
|
30
6
|
import TabPane from "./TabPane.js";
|
|
31
7
|
import { r as requestAniFrame } from "./raf.js";
|
|
32
8
|
import { u as usePropsValue, a as useForceUpdate } from "./use-props-value.js";
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
direction
|
|
37
|
-
|
|
38
|
-
duration: 300,
|
|
39
|
-
autoHeight: false
|
|
40
|
-
});
|
|
41
|
-
var classPrefix = "nut-tabs";
|
|
42
|
-
var Tabs = function Tabs2(props) {
|
|
43
|
-
var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), activeColor = _defaultProps$props.activeColor, tabStyle = _defaultProps$props.tabStyle, direction = _defaultProps$props.direction, activeType = _defaultProps$props.activeType, duration = _defaultProps$props.duration, align = _defaultProps$props.align, title = _defaultProps$props.title, children = _defaultProps$props.children, onClick = _defaultProps$props.onClick, onChange = _defaultProps$props.onChange, className = _defaultProps$props.className, autoHeight = _defaultProps$props.autoHeight, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
|
|
44
|
-
var _usePropsValue = usePropsValue({
|
|
9
|
+
const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { tabStyle: {}, activeColor: "", direction: "horizontal", activeType: "line", duration: 300, autoHeight: false });
|
|
10
|
+
const classPrefix = "nut-tabs";
|
|
11
|
+
const Tabs = (props) => {
|
|
12
|
+
const _a = Object.assign(Object.assign({}, defaultProps), props), { activeColor, tabStyle, direction, activeType, duration, align, title, children, onClick, onChange, className, autoHeight } = _a, rest = __rest(_a, ["activeColor", "tabStyle", "direction", "activeType", "duration", "align", "title", "children", "onClick", "onChange", "className", "autoHeight"]);
|
|
13
|
+
const [value, setValue] = usePropsValue({
|
|
45
14
|
value: props.value,
|
|
46
15
|
defaultValue: props.defaultValue,
|
|
47
16
|
finalValue: 0,
|
|
48
17
|
onChange
|
|
49
|
-
})
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
18
|
+
});
|
|
19
|
+
const [contentStyle, setContentStyle] = useState({});
|
|
20
|
+
const titleItemsRef = useRef([]);
|
|
21
|
+
const navRef = useRef(null);
|
|
22
|
+
const scrollDirection = (nav, to, duration2, direction2) => {
|
|
23
|
+
let count = 0;
|
|
24
|
+
const from = direction2 === "horizontal" ? nav.scrollLeft : nav.scrollTop;
|
|
25
|
+
const frames = duration2 === 0 ? 1 : Math.round(duration2 * 1e3 / 16);
|
|
57
26
|
function animate() {
|
|
58
27
|
if (direction2 === "horizontal") {
|
|
59
28
|
nav.scrollLeft += (to - from) / frames;
|
|
@@ -66,28 +35,28 @@ var Tabs = function Tabs2(props) {
|
|
|
66
35
|
}
|
|
67
36
|
animate();
|
|
68
37
|
};
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
38
|
+
const scrollIntoView = (index, immediate) => {
|
|
39
|
+
const nav = navRef.current;
|
|
40
|
+
const titleItem = titleItemsRef.current;
|
|
72
41
|
if (!nav || !titleItem || !titleItem[index]) {
|
|
73
42
|
return;
|
|
74
43
|
}
|
|
75
|
-
|
|
76
|
-
|
|
44
|
+
const title2 = titleItem[index];
|
|
45
|
+
let to = 0;
|
|
77
46
|
if (props.direction === "vertical") {
|
|
78
|
-
|
|
47
|
+
const runTop = title2.offsetTop - nav.offsetTop + 10;
|
|
79
48
|
to = runTop - (nav.offsetHeight - title2.offsetHeight) / 2;
|
|
80
49
|
} else {
|
|
81
50
|
to = title2.offsetLeft - (nav.offsetWidth - title2.offsetWidth) / 2;
|
|
82
51
|
}
|
|
83
52
|
scrollDirection(nav, to, immediate ? 0 : 0.3, props.direction);
|
|
84
53
|
};
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
React__default.Children.forEach(children,
|
|
54
|
+
const getTitles = () => {
|
|
55
|
+
const titles2 = [];
|
|
56
|
+
React__default.Children.forEach(children, (child, idx) => {
|
|
88
57
|
if (React__default.isValidElement(child)) {
|
|
89
|
-
|
|
90
|
-
if (props2
|
|
58
|
+
const props2 = child === null || child === void 0 ? void 0 : child.props;
|
|
59
|
+
if ((props2 === null || props2 === void 0 ? void 0 : props2.title) || (props2 === null || props2 === void 0 ? void 0 : props2.value)) {
|
|
91
60
|
titles2.push({
|
|
92
61
|
title: props2.title,
|
|
93
62
|
value: props2.value || idx,
|
|
@@ -98,12 +67,12 @@ var Tabs = function Tabs2(props) {
|
|
|
98
67
|
});
|
|
99
68
|
return titles2;
|
|
100
69
|
};
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
useEffect(
|
|
70
|
+
const titles = useRef(getTitles());
|
|
71
|
+
const forceUpdate = useForceUpdate();
|
|
72
|
+
useEffect(() => {
|
|
104
73
|
titles.current = getTitles();
|
|
105
|
-
|
|
106
|
-
titles.current.forEach(
|
|
74
|
+
let current = "";
|
|
75
|
+
titles.current.forEach((title2) => {
|
|
107
76
|
if (title2.value === value) {
|
|
108
77
|
current = value;
|
|
109
78
|
}
|
|
@@ -114,79 +83,72 @@ var Tabs = function Tabs2(props) {
|
|
|
114
83
|
forceUpdate();
|
|
115
84
|
}
|
|
116
85
|
}, [children]);
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
86
|
+
const classes = classNames(classPrefix, `${classPrefix}-${direction}`, className);
|
|
87
|
+
const classesTitle = classNames(`${classPrefix}-titles`, {
|
|
88
|
+
[`${classPrefix}-titles-${activeType}`]: activeType,
|
|
89
|
+
[`${classPrefix}-titles-scrollable`]: true,
|
|
90
|
+
[`${classPrefix}-titles-${align}`]: align
|
|
91
|
+
});
|
|
92
|
+
const tabsActiveStyle = {
|
|
120
93
|
color: activeType === "smile" ? activeColor : "",
|
|
121
94
|
background: activeType === "line" ? activeColor : ""
|
|
122
95
|
};
|
|
123
|
-
useEffect(
|
|
124
|
-
|
|
125
|
-
return t.value == value;
|
|
126
|
-
});
|
|
96
|
+
useEffect(() => {
|
|
97
|
+
const index = titles.current.findIndex((t) => t.value == value);
|
|
127
98
|
setContentStyle({
|
|
128
|
-
transform: direction === "horizontal" ?
|
|
129
|
-
transitionDuration:
|
|
99
|
+
transform: direction === "horizontal" ? `translate3d(-${index * 100}%, 0, 0)` : `translate3d( 0,-${index * 100}%, 0)`,
|
|
100
|
+
transitionDuration: `${duration}ms`
|
|
130
101
|
});
|
|
131
|
-
setTimeout(
|
|
102
|
+
setTimeout(() => {
|
|
132
103
|
scrollIntoView(index);
|
|
133
104
|
});
|
|
134
105
|
}, [value]);
|
|
135
|
-
|
|
106
|
+
const tabChange = (item) => {
|
|
136
107
|
onClick && onClick(item.value);
|
|
137
108
|
if (item.disabled) {
|
|
138
109
|
return;
|
|
139
110
|
}
|
|
140
111
|
setValue(item.value);
|
|
141
112
|
};
|
|
142
|
-
return React__default.createElement(
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
className: classesTitle,
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
active: value === child.props.value
|
|
182
|
-
});
|
|
183
|
-
if (String(value) !== String(child.props.value || idx) && autoHeight) {
|
|
184
|
-
childProps = _objectSpread(_objectSpread({}, childProps), {}, {
|
|
185
|
-
autoHeightClassName: "inactive"
|
|
186
|
-
});
|
|
187
|
-
}
|
|
188
|
-
return React__default.cloneElement(child, childProps);
|
|
189
|
-
}))));
|
|
113
|
+
return React__default.createElement(
|
|
114
|
+
"div",
|
|
115
|
+
Object.assign({ className: classes }, rest),
|
|
116
|
+
React__default.createElement("div", { className: classesTitle, style: Object.assign({}, tabStyle), ref: navRef }, !!title && typeof title === "function" ? title() : titles.current.map((item) => {
|
|
117
|
+
return React__default.createElement(
|
|
118
|
+
"div",
|
|
119
|
+
{ onClick: () => {
|
|
120
|
+
tabChange(item);
|
|
121
|
+
}, className: classNames(`${classPrefix}-titles-item`, {
|
|
122
|
+
[`nut-tabs-titles-item-active`]: !item.disabled && String(item.value) === String(value),
|
|
123
|
+
[`nut-tabs-titles-item-disabled`]: item.disabled,
|
|
124
|
+
[`nut-tabs-titles-item-${align}`]: align
|
|
125
|
+
}), ref: (ref) => titleItemsRef.current.push(ref), key: item.value },
|
|
126
|
+
activeType === "line" && React__default.createElement("div", { className: classNames(`${classPrefix}-titles-item-line`, {
|
|
127
|
+
[`${classPrefix}-titles-item-line-${direction}`]: true
|
|
128
|
+
}), style: tabsActiveStyle }),
|
|
129
|
+
activeType === "smile" && React__default.createElement(
|
|
130
|
+
"div",
|
|
131
|
+
{ className: `${classPrefix}-titles-item-smile`, style: tabsActiveStyle },
|
|
132
|
+
React__default.createElement(JoySmile, { color: activeColor, width: 40, height: 20 })
|
|
133
|
+
),
|
|
134
|
+
React__default.createElement("div", { className: classNames(`${classPrefix}-ellipsis`, `${classPrefix}-titles-item-text`) }, item.title)
|
|
135
|
+
);
|
|
136
|
+
})),
|
|
137
|
+
React__default.createElement(
|
|
138
|
+
"div",
|
|
139
|
+
{ className: `${classPrefix}-content-wrap` },
|
|
140
|
+
React__default.createElement("div", { className: `${classPrefix}-content`, style: contentStyle }, React__default.Children.map(children, (child, idx) => {
|
|
141
|
+
if (!React__default.isValidElement(child)) {
|
|
142
|
+
return null;
|
|
143
|
+
}
|
|
144
|
+
let childProps = Object.assign(Object.assign({}, child.props), { active: value === child.props.value });
|
|
145
|
+
if (String(value) !== String(child.props.value || idx) && autoHeight) {
|
|
146
|
+
childProps = Object.assign(Object.assign({}, childProps), { autoHeightClassName: "inactive" });
|
|
147
|
+
}
|
|
148
|
+
return React__default.cloneElement(child, childProps);
|
|
149
|
+
}))
|
|
150
|
+
)
|
|
151
|
+
);
|
|
190
152
|
};
|
|
191
153
|
Tabs.defaultProps = defaultProps;
|
|
192
154
|
Tabs.displayName = "NutTabs";
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
function __rest(s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s)
|
|
4
|
+
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
+
t[p] = s[p];
|
|
6
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
+
t[p[i]] = s[p[i]];
|
|
10
|
+
}
|
|
11
|
+
return t;
|
|
12
|
+
}
|
|
13
|
+
function __awaiter(thisArg, _arguments, P, generator) {
|
|
14
|
+
function adopt(value) {
|
|
15
|
+
return value instanceof P ? value : new P(function(resolve) {
|
|
16
|
+
resolve(value);
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
return new (P || (P = Promise))(function(resolve, reject) {
|
|
20
|
+
function fulfilled(value) {
|
|
21
|
+
try {
|
|
22
|
+
step(generator.next(value));
|
|
23
|
+
} catch (e) {
|
|
24
|
+
reject(e);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
function rejected(value) {
|
|
28
|
+
try {
|
|
29
|
+
step(generator["throw"](value));
|
|
30
|
+
} catch (e) {
|
|
31
|
+
reject(e);
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
function step(result) {
|
|
35
|
+
result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
|
|
36
|
+
}
|
|
37
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
typeof SuppressedError === "function" ? SuppressedError : function(error, suppressed, message) {
|
|
41
|
+
var e = new Error(message);
|
|
42
|
+
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
43
|
+
};
|
|
44
|
+
export {
|
|
45
|
+
__rest as _,
|
|
46
|
+
__awaiter as a
|
|
47
|
+
};
|