antd-mobile 5.37.1 → 5.38.1
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 +2 -2
- package/2x/bundle/antd-mobile.cjs.development.js +2276 -1113
- package/2x/bundle/antd-mobile.cjs.js +7 -7
- package/2x/bundle/antd-mobile.es.development.js +2279 -1116
- package/2x/bundle/antd-mobile.es.js +7914 -7141
- package/2x/bundle/antd-mobile.umd.development.js +2276 -1113
- package/2x/bundle/antd-mobile.umd.js +7 -7
- package/2x/bundle/css-vars-patch.css +42 -0
- package/2x/bundle/style.css +142 -4
- package/2x/cjs/components/calendar-picker-view/calendar-picker-view.d.ts +1 -1
- package/2x/cjs/components/calendar-picker-view/calendar-picker-view.js +31 -10
- package/2x/cjs/components/card/card.css +1 -0
- package/2x/cjs/components/card/card.d.ts +2 -1
- package/2x/cjs/components/card/card.js +7 -3
- package/2x/cjs/components/card/card.patch.css +8 -0
- package/2x/cjs/components/date-picker/date-picker-quarter-utils.d.ts +7 -0
- package/2x/cjs/components/date-picker/date-picker-quarter-utils.js +77 -0
- package/2x/cjs/components/date-picker/date-picker-utils.d.ts +3 -2
- package/2x/cjs/components/date-picker/date-picker-utils.js +7 -0
- package/2x/cjs/components/ellipsis/ellipsis.css +1 -0
- package/2x/cjs/components/ellipsis/ellipsis.d.ts +1 -1
- package/2x/cjs/components/ellipsis/ellipsis.js +28 -124
- package/2x/cjs/components/ellipsis/useMeasure.d.ts +2 -0
- package/2x/cjs/components/ellipsis/useMeasure.js +108 -0
- package/2x/cjs/components/ellipsis/~ellipsis.d.ts +15 -0
- package/2x/cjs/components/ellipsis/~ellipsis.js +161 -0
- package/2x/cjs/components/image-uploader/image-uploader.js +2 -2
- package/2x/cjs/components/input/input.d.ts +2 -2
- package/2x/cjs/components/input/input.js +1 -0
- package/2x/cjs/components/notice-bar/notice-bar.css +30 -4
- package/2x/cjs/components/notice-bar/notice-bar.d.ts +5 -1
- package/2x/cjs/components/notice-bar/notice-bar.js +7 -3
- package/2x/cjs/components/search-bar/search-bar.d.ts +2 -2
- package/2x/cjs/components/search-bar/search-bar.js +1 -0
- package/2x/cjs/components/segmented/index.d.ts +4 -0
- package/2x/cjs/components/segmented/index.js +10 -0
- package/2x/cjs/components/segmented/segmented.css +113 -0
- package/2x/cjs/components/segmented/segmented.d.ts +21 -0
- package/2x/cjs/components/segmented/segmented.js +57 -0
- package/2x/cjs/components/segmented/segmented.patch.css +41 -0
- package/2x/cjs/components/tab-bar/tab-bar.d.ts +1 -0
- package/2x/cjs/components/tab-bar/tab-bar.js +2 -0
- package/2x/cjs/components/tabs/tabs.js +1 -1
- package/2x/cjs/components/toast/methods.js +9 -3
- package/2x/cjs/global/css-vars-patch.css +42 -0
- package/2x/cjs/index.d.ts +2 -0
- package/2x/cjs/index.js +7 -0
- package/2x/cjs/locales/cnr-ME.d.ts +139 -0
- package/2x/cjs/locales/cnr-ME.js +149 -0
- package/2x/cjs/locales/hr-HR.d.ts +139 -0
- package/2x/cjs/locales/hr-HR.js +149 -0
- package/2x/cjs/locales/kk-KZ.js +6 -6
- package/2x/cjs/locales/sr-RS.d.ts +139 -0
- package/2x/cjs/locales/sr-RS.js +149 -0
- package/2x/cjs/utils/render-imperatively.d.ts +1 -0
- package/2x/cjs/utils/render-imperatively.js +6 -3
- package/2x/es/components/calendar-picker-view/calendar-picker-view.d.ts +1 -1
- package/2x/es/components/calendar-picker-view/calendar-picker-view.js +32 -11
- package/2x/es/components/card/card.css +1 -0
- package/2x/es/components/card/card.d.ts +2 -1
- package/2x/es/components/card/card.js +7 -3
- package/2x/es/components/card/card.patch.css +8 -0
- package/2x/es/components/date-picker/date-picker-quarter-utils.d.ts +7 -0
- package/2x/es/components/date-picker/date-picker-quarter-utils.js +68 -0
- package/2x/es/components/date-picker/date-picker-utils.d.ts +3 -2
- package/2x/es/components/date-picker/date-picker-utils.js +7 -0
- package/2x/es/components/ellipsis/ellipsis.css +1 -0
- package/2x/es/components/ellipsis/ellipsis.d.ts +1 -1
- package/2x/es/components/ellipsis/ellipsis.js +28 -122
- package/2x/es/components/ellipsis/useMeasure.d.ts +2 -0
- package/2x/es/components/ellipsis/useMeasure.js +101 -0
- package/2x/es/components/ellipsis/~ellipsis.d.ts +15 -0
- package/2x/es/components/ellipsis/~ellipsis.js +151 -0
- package/2x/es/components/image-uploader/image-uploader.js +2 -2
- package/2x/es/components/input/input.d.ts +2 -2
- package/2x/es/components/input/input.js +1 -0
- package/2x/es/components/notice-bar/notice-bar.css +30 -4
- package/2x/es/components/notice-bar/notice-bar.d.ts +5 -1
- package/2x/es/components/notice-bar/notice-bar.js +7 -3
- package/2x/es/components/search-bar/search-bar.d.ts +2 -2
- package/2x/es/components/search-bar/search-bar.js +1 -0
- package/2x/es/components/segmented/index.d.ts +4 -0
- package/2x/es/components/segmented/index.js +3 -0
- package/2x/es/components/segmented/segmented.css +113 -0
- package/2x/es/components/segmented/segmented.d.ts +21 -0
- package/2x/es/components/segmented/segmented.js +48 -0
- package/2x/es/components/segmented/segmented.patch.css +41 -0
- package/2x/es/components/tab-bar/tab-bar.d.ts +1 -0
- package/2x/es/components/tab-bar/tab-bar.js +2 -0
- package/2x/es/components/tabs/tabs.js +1 -1
- package/2x/es/components/toast/methods.js +9 -3
- package/2x/es/global/css-vars-patch.css +42 -0
- package/2x/es/index.d.ts +2 -0
- package/2x/es/index.js +1 -0
- package/2x/es/locales/cnr-ME.d.ts +139 -0
- package/2x/es/locales/cnr-ME.js +142 -0
- package/2x/es/locales/hr-HR.d.ts +139 -0
- package/2x/es/locales/hr-HR.js +142 -0
- package/2x/es/locales/kk-KZ.js +6 -6
- package/2x/es/locales/sr-RS.d.ts +139 -0
- package/2x/es/locales/sr-RS.js +142 -0
- package/2x/es/utils/render-imperatively.d.ts +1 -0
- package/2x/es/utils/render-imperatively.js +6 -3
- package/2x/package.json +3 -2
- package/README.md +2 -2
- package/bundle/antd-mobile.cjs.development.js +2276 -1113
- package/bundle/antd-mobile.cjs.js +7 -7
- package/bundle/antd-mobile.compatible.umd.js +1 -1
- package/bundle/antd-mobile.es.development.js +2279 -1116
- package/bundle/antd-mobile.es.js +7914 -7141
- package/bundle/antd-mobile.umd.development.js +2276 -1113
- package/bundle/antd-mobile.umd.js +7 -7
- package/bundle/css-vars-patch.css +32 -0
- package/bundle/style.css +1 -1
- package/cjs/components/calendar-picker-view/calendar-picker-view.d.ts +1 -1
- package/cjs/components/calendar-picker-view/calendar-picker-view.js +31 -10
- package/cjs/components/card/card.css +1 -0
- package/cjs/components/card/card.d.ts +2 -1
- package/cjs/components/card/card.js +7 -3
- package/cjs/components/card/card.patch.css +6 -0
- package/cjs/components/date-picker/date-picker-quarter-utils.d.ts +7 -0
- package/cjs/components/date-picker/date-picker-quarter-utils.js +77 -0
- package/cjs/components/date-picker/date-picker-utils.d.ts +3 -2
- package/cjs/components/date-picker/date-picker-utils.js +7 -0
- package/cjs/components/ellipsis/ellipsis.css +1 -0
- package/cjs/components/ellipsis/ellipsis.d.ts +1 -1
- package/cjs/components/ellipsis/ellipsis.js +28 -124
- package/cjs/components/ellipsis/useMeasure.d.ts +2 -0
- package/cjs/components/ellipsis/useMeasure.js +108 -0
- package/cjs/components/ellipsis/~ellipsis.d.ts +15 -0
- package/cjs/components/ellipsis/~ellipsis.js +161 -0
- package/cjs/components/image-uploader/image-uploader.js +2 -2
- package/cjs/components/input/input.d.ts +2 -2
- package/cjs/components/input/input.js +1 -0
- package/cjs/components/notice-bar/notice-bar.css +25 -4
- package/cjs/components/notice-bar/notice-bar.d.ts +5 -1
- package/cjs/components/notice-bar/notice-bar.js +7 -3
- package/cjs/components/search-bar/search-bar.d.ts +2 -2
- package/cjs/components/search-bar/search-bar.js +1 -0
- package/cjs/components/segmented/index.d.ts +4 -0
- package/cjs/components/segmented/index.js +10 -0
- package/cjs/components/segmented/segmented.css +97 -0
- package/cjs/components/segmented/segmented.d.ts +21 -0
- package/cjs/components/segmented/segmented.js +57 -0
- package/cjs/components/segmented/segmented.patch.css +32 -0
- package/cjs/components/tab-bar/tab-bar.d.ts +1 -0
- package/cjs/components/tab-bar/tab-bar.js +2 -0
- package/cjs/components/tabs/tabs.js +1 -1
- package/cjs/components/toast/methods.js +9 -3
- package/cjs/global/css-vars-patch.css +32 -0
- package/cjs/index.d.ts +2 -0
- package/cjs/index.js +7 -0
- package/cjs/locales/cnr-ME.d.ts +139 -0
- package/cjs/locales/cnr-ME.js +149 -0
- package/cjs/locales/hr-HR.d.ts +139 -0
- package/cjs/locales/hr-HR.js +149 -0
- package/cjs/locales/kk-KZ.js +6 -6
- package/cjs/locales/sr-RS.d.ts +139 -0
- package/cjs/locales/sr-RS.js +149 -0
- package/cjs/utils/render-imperatively.d.ts +1 -0
- package/cjs/utils/render-imperatively.js +6 -3
- package/es/components/calendar-picker-view/calendar-picker-view.d.ts +1 -1
- package/es/components/calendar-picker-view/calendar-picker-view.js +32 -11
- package/es/components/card/card.css +1 -0
- package/es/components/card/card.d.ts +2 -1
- package/es/components/card/card.js +7 -3
- package/es/components/card/card.patch.css +6 -0
- package/es/components/date-picker/date-picker-quarter-utils.d.ts +7 -0
- package/es/components/date-picker/date-picker-quarter-utils.js +68 -0
- package/es/components/date-picker/date-picker-utils.d.ts +3 -2
- package/es/components/date-picker/date-picker-utils.js +7 -0
- package/es/components/ellipsis/ellipsis.css +1 -0
- package/es/components/ellipsis/ellipsis.d.ts +1 -1
- package/es/components/ellipsis/ellipsis.js +28 -122
- package/es/components/ellipsis/useMeasure.d.ts +2 -0
- package/es/components/ellipsis/useMeasure.js +101 -0
- package/es/components/ellipsis/~ellipsis.d.ts +15 -0
- package/es/components/ellipsis/~ellipsis.js +151 -0
- package/es/components/image-uploader/image-uploader.js +2 -2
- package/es/components/input/input.d.ts +2 -2
- package/es/components/input/input.js +1 -0
- package/es/components/notice-bar/notice-bar.css +25 -4
- package/es/components/notice-bar/notice-bar.d.ts +5 -1
- package/es/components/notice-bar/notice-bar.js +7 -3
- package/es/components/search-bar/search-bar.d.ts +2 -2
- package/es/components/search-bar/search-bar.js +1 -0
- package/es/components/segmented/index.d.ts +4 -0
- package/es/components/segmented/index.js +3 -0
- package/es/components/segmented/segmented.css +97 -0
- package/es/components/segmented/segmented.d.ts +21 -0
- package/es/components/segmented/segmented.js +48 -0
- package/es/components/segmented/segmented.patch.css +32 -0
- package/es/components/tab-bar/tab-bar.d.ts +1 -0
- package/es/components/tab-bar/tab-bar.js +2 -0
- package/es/components/tabs/tabs.js +1 -1
- package/es/components/toast/methods.js +9 -3
- package/es/global/css-vars-patch.css +32 -0
- package/es/index.d.ts +2 -0
- package/es/index.js +1 -0
- package/es/locales/cnr-ME.d.ts +139 -0
- package/es/locales/cnr-ME.js +142 -0
- package/es/locales/hr-HR.d.ts +139 -0
- package/es/locales/hr-HR.js +142 -0
- package/es/locales/kk-KZ.js +6 -6
- package/es/locales/sr-RS.d.ts +139 -0
- package/es/locales/sr-RS.js +142 -0
- package/es/utils/render-imperatively.d.ts +1 -0
- package/es/utils/render-imperatively.js +6 -3
- package/package.json +3 -2
- package/umd/antd-mobile.js +1 -1
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.Ellipsis = void 0;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _runes = _interopRequireDefault(require("runes2"));
|
|
9
|
+
var _withDefaultProps = require("../../utils/with-default-props");
|
|
10
|
+
var _nativeProps = require("../../utils/native-props");
|
|
11
|
+
var _useResizeEffect = require("../../utils/use-resize-effect");
|
|
12
|
+
var _ahooks = require("ahooks");
|
|
13
|
+
var _withStopPropagation = require("../../utils/with-stop-propagation");
|
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
16
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
17
|
+
const classPrefix = `adm-ellipsis`;
|
|
18
|
+
const defaultProps = {
|
|
19
|
+
direction: 'end',
|
|
20
|
+
rows: 1,
|
|
21
|
+
expandText: '',
|
|
22
|
+
content: '',
|
|
23
|
+
collapseText: '',
|
|
24
|
+
stopPropagationForActionButtons: [],
|
|
25
|
+
onContentClick: () => {},
|
|
26
|
+
defaultExpanded: false
|
|
27
|
+
};
|
|
28
|
+
const Ellipsis = p => {
|
|
29
|
+
const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
|
|
30
|
+
const rootRef = (0, _react.useRef)(null);
|
|
31
|
+
const expandElRef = (0, _react.useRef)(null);
|
|
32
|
+
const collapseElRef = (0, _react.useRef)(null);
|
|
33
|
+
const [ellipsised, setEllipsised] = (0, _react.useState)({});
|
|
34
|
+
const [expanded, setExpanded] = (0, _react.useState)(props.defaultExpanded);
|
|
35
|
+
const [exceeded, setExceeded] = (0, _react.useState)(false);
|
|
36
|
+
const chars = (0, _react.useMemo)(() => (0, _runes.default)(props.content), [props.content]);
|
|
37
|
+
function getSubString(start, end) {
|
|
38
|
+
return chars.slice(start, end).join('');
|
|
39
|
+
}
|
|
40
|
+
function calcEllipsised() {
|
|
41
|
+
var _a, _b;
|
|
42
|
+
const root = rootRef.current;
|
|
43
|
+
if (!root) return;
|
|
44
|
+
const originDisplay = root.style.display;
|
|
45
|
+
root.style.display = 'block';
|
|
46
|
+
const originStyle = window.getComputedStyle(root);
|
|
47
|
+
const container = document.createElement('div');
|
|
48
|
+
const styleNames = Array.prototype.slice.apply(originStyle);
|
|
49
|
+
styleNames.forEach(name => {
|
|
50
|
+
container.style.setProperty(name, originStyle.getPropertyValue(name));
|
|
51
|
+
});
|
|
52
|
+
root.style.display = originDisplay;
|
|
53
|
+
container.style.height = 'auto';
|
|
54
|
+
container.style.minHeight = 'auto';
|
|
55
|
+
container.style.maxHeight = 'auto';
|
|
56
|
+
container.style.textOverflow = 'clip';
|
|
57
|
+
container.style.webkitLineClamp = 'unset';
|
|
58
|
+
container.style.display = 'block';
|
|
59
|
+
const lineHeight = pxToNumber(originStyle.lineHeight);
|
|
60
|
+
const maxHeight = Math.floor(lineHeight * (props.rows + 0.5) + pxToNumber(originStyle.paddingTop) + pxToNumber(originStyle.paddingBottom));
|
|
61
|
+
container.innerText = props.content;
|
|
62
|
+
document.body.appendChild(container);
|
|
63
|
+
if (container.offsetHeight <= maxHeight) {
|
|
64
|
+
setExceeded(false);
|
|
65
|
+
} else {
|
|
66
|
+
setExceeded(true);
|
|
67
|
+
const end = props.content.length;
|
|
68
|
+
const collapseEl = typeof props.collapseText === 'string' ? props.collapseText : (_a = collapseElRef.current) === null || _a === void 0 ? void 0 : _a.innerHTML;
|
|
69
|
+
const expandEl = typeof props.expandText === 'string' ? props.expandText : (_b = expandElRef.current) === null || _b === void 0 ? void 0 : _b.innerHTML;
|
|
70
|
+
const actionText = expanded ? collapseEl : expandEl;
|
|
71
|
+
function check(left, right) {
|
|
72
|
+
if (right - left <= 1) {
|
|
73
|
+
if (props.direction === 'end') {
|
|
74
|
+
return {
|
|
75
|
+
leading: getSubString(0, left) + '...'
|
|
76
|
+
};
|
|
77
|
+
} else {
|
|
78
|
+
return {
|
|
79
|
+
tailing: '...' + getSubString(right, end)
|
|
80
|
+
};
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
const middle = Math.round((left + right) / 2);
|
|
84
|
+
if (props.direction === 'end') {
|
|
85
|
+
container.innerHTML = getSubString(0, middle) + '...' + actionText;
|
|
86
|
+
} else {
|
|
87
|
+
container.innerHTML = actionText + '...' + getSubString(middle, end);
|
|
88
|
+
}
|
|
89
|
+
if (container.offsetHeight <= maxHeight) {
|
|
90
|
+
if (props.direction === 'end') {
|
|
91
|
+
return check(middle, right);
|
|
92
|
+
} else {
|
|
93
|
+
return check(left, middle);
|
|
94
|
+
}
|
|
95
|
+
} else {
|
|
96
|
+
if (props.direction === 'end') {
|
|
97
|
+
return check(left, middle);
|
|
98
|
+
} else {
|
|
99
|
+
return check(middle, right);
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
function checkMiddle(leftPart, rightPart) {
|
|
104
|
+
if (leftPart[1] - leftPart[0] <= 1 && rightPart[1] - rightPart[0] <= 1) {
|
|
105
|
+
return {
|
|
106
|
+
leading: getSubString(0, leftPart[0]) + '...',
|
|
107
|
+
tailing: '...' + getSubString(rightPart[1], end)
|
|
108
|
+
};
|
|
109
|
+
}
|
|
110
|
+
const leftPartMiddle = Math.floor((leftPart[0] + leftPart[1]) / 2);
|
|
111
|
+
const rightPartMiddle = Math.ceil((rightPart[0] + rightPart[1]) / 2);
|
|
112
|
+
container.innerHTML = getSubString(0, leftPartMiddle) + '...' + actionText + '...' + getSubString(rightPartMiddle, end);
|
|
113
|
+
if (container.offsetHeight <= maxHeight) {
|
|
114
|
+
return checkMiddle([leftPartMiddle, leftPart[1]], [rightPart[0], rightPartMiddle]);
|
|
115
|
+
} else {
|
|
116
|
+
return checkMiddle([leftPart[0], leftPartMiddle], [rightPartMiddle, rightPart[1]]);
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
const middle = Math.floor((0 + end) / 2);
|
|
120
|
+
const ellipsised = props.direction === 'middle' ? checkMiddle([0, middle], [middle, end]) : check(0, end);
|
|
121
|
+
setEllipsised(ellipsised);
|
|
122
|
+
}
|
|
123
|
+
document.body.removeChild(container);
|
|
124
|
+
}
|
|
125
|
+
(0, _useResizeEffect.useResizeEffect)(calcEllipsised, rootRef);
|
|
126
|
+
(0, _ahooks.useIsomorphicLayoutEffect)(() => {
|
|
127
|
+
calcEllipsised();
|
|
128
|
+
}, [props.content, props.direction, props.rows, props.expandText, props.collapseText]);
|
|
129
|
+
const expandActionElement = !!props.expandText && (0, _withStopPropagation.withStopPropagation)(props.stopPropagationForActionButtons, _react.default.createElement("a", {
|
|
130
|
+
ref: expandElRef,
|
|
131
|
+
onClick: () => {
|
|
132
|
+
setExpanded(true);
|
|
133
|
+
}
|
|
134
|
+
}, props.expandText));
|
|
135
|
+
const collapseActionElement = !!props.collapseText && (0, _withStopPropagation.withStopPropagation)(props.stopPropagationForActionButtons, _react.default.createElement("a", {
|
|
136
|
+
ref: collapseElRef,
|
|
137
|
+
onClick: () => {
|
|
138
|
+
setExpanded(false);
|
|
139
|
+
}
|
|
140
|
+
}, props.collapseText));
|
|
141
|
+
const renderContent = () => {
|
|
142
|
+
if (!exceeded) return props.content;
|
|
143
|
+
if (expanded) return _react.default.createElement(_react.default.Fragment, null, props.content, collapseActionElement);
|
|
144
|
+
return _react.default.createElement(_react.default.Fragment, null, ellipsised.leading, expandActionElement, ellipsised.tailing);
|
|
145
|
+
};
|
|
146
|
+
return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
|
|
147
|
+
ref: rootRef,
|
|
148
|
+
className: classPrefix,
|
|
149
|
+
onClick: e => {
|
|
150
|
+
if (e.target === e.currentTarget) {
|
|
151
|
+
props.onContentClick(e);
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
}, renderContent()));
|
|
155
|
+
};
|
|
156
|
+
exports.Ellipsis = Ellipsis;
|
|
157
|
+
function pxToNumber(value) {
|
|
158
|
+
if (!value) return 0;
|
|
159
|
+
const match = value.match(/^\d*(\.\d*)?/);
|
|
160
|
+
return match ? Number(match[0]) : 0;
|
|
161
|
+
}
|
|
@@ -227,14 +227,14 @@ const ImageUploader = (0, _react.forwardRef)((p, ref) => {
|
|
|
227
227
|
}, _react.default.createElement("span", {
|
|
228
228
|
className: `${classPrefix}-upload-button-icon`
|
|
229
229
|
}, _react.default.createElement(_antdMobileIcons.AddOutline, null))), !props.disableUpload && _react.default.createElement("input", {
|
|
230
|
+
"aria-label": locale.ImageUploader.upload,
|
|
230
231
|
ref: inputRef,
|
|
231
232
|
capture: props.capture,
|
|
232
233
|
accept: props.accept,
|
|
233
234
|
multiple: props.multiple,
|
|
234
235
|
type: 'file',
|
|
235
236
|
className: `${classPrefix}-input`,
|
|
236
|
-
onChange: onChange
|
|
237
|
-
"aria-hidden": true
|
|
237
|
+
onChange: onChange
|
|
238
238
|
})));
|
|
239
239
|
(0, _react.useImperativeHandle)(ref, () => ({
|
|
240
240
|
get nativeElement() {
|
|
@@ -4,7 +4,7 @@ declare type NativeInputProps = React.DetailedHTMLProps<React.InputHTMLAttribute
|
|
|
4
4
|
declare type AriaProps = {
|
|
5
5
|
role?: string;
|
|
6
6
|
};
|
|
7
|
-
export declare type InputProps = Pick<NativeInputProps, 'maxLength' | 'minLength' | 'autoComplete' | 'autoFocus' | 'pattern' | 'inputMode' | 'type' | 'name' | 'onFocus' | 'onBlur' | 'autoCapitalize' | 'autoCorrect' | 'onKeyDown' | 'onKeyUp' | 'onCompositionStart' | 'onCompositionEnd' | 'onClick' | 'step' | 'id' | 'placeholder' | 'readOnly' | 'disabled' | 'enterKeyHint'> & {
|
|
7
|
+
export declare type InputProps = Pick<NativeInputProps, 'maxLength' | 'minLength' | 'autoComplete' | 'autoFocus' | 'pattern' | 'inputMode' | 'type' | 'name' | 'onFocus' | 'onBlur' | 'onPaste' | 'autoCapitalize' | 'autoCorrect' | 'onKeyDown' | 'onKeyUp' | 'onCompositionStart' | 'onCompositionEnd' | 'onClick' | 'step' | 'id' | 'placeholder' | 'readOnly' | 'disabled' | 'enterKeyHint'> & {
|
|
8
8
|
value?: string;
|
|
9
9
|
defaultValue?: string;
|
|
10
10
|
onChange?: (val: string) => void;
|
|
@@ -22,7 +22,7 @@ export declare type InputRef = {
|
|
|
22
22
|
blur: () => void;
|
|
23
23
|
nativeElement: HTMLInputElement | null;
|
|
24
24
|
};
|
|
25
|
-
export declare const Input: React.ForwardRefExoticComponent<Pick<NativeInputProps, "pattern" | "id" | "onClick" | "disabled" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "type" | "step" | "autoFocus" | "placeholder" | "autoCapitalize" | "autoCorrect" | "inputMode" | "name" | "readOnly" | "autoComplete" | "enterKeyHint" | "maxLength" | "minLength"> & {
|
|
25
|
+
export declare const Input: React.ForwardRefExoticComponent<Pick<NativeInputProps, "pattern" | "id" | "onClick" | "disabled" | "onPaste" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "type" | "step" | "autoFocus" | "placeholder" | "autoCapitalize" | "autoCorrect" | "inputMode" | "name" | "readOnly" | "autoComplete" | "enterKeyHint" | "maxLength" | "minLength"> & {
|
|
26
26
|
value?: string | undefined;
|
|
27
27
|
defaultValue?: string | undefined;
|
|
28
28
|
onChange?: ((val: string) => void) | undefined;
|
|
@@ -96,6 +96,7 @@ const Input = (0, _react.forwardRef)((props, ref) => {
|
|
|
96
96
|
checkValue();
|
|
97
97
|
(_a = mergedProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(mergedProps, e);
|
|
98
98
|
},
|
|
99
|
+
onPaste: mergedProps.onPaste,
|
|
99
100
|
id: mergedProps.id,
|
|
100
101
|
placeholder: mergedProps.placeholder,
|
|
101
102
|
disabled: mergedProps.disabled,
|
|
@@ -5,6 +5,8 @@
|
|
|
5
5
|
--font-size: var(--adm-font-size-7);
|
|
6
6
|
--icon-font-size: var(--adm-font-size-10);
|
|
7
7
|
--height: 40px;
|
|
8
|
+
--adm-notice-bar-border-radius: 4px;
|
|
9
|
+
--adm-notice-bar-border-width: 1px;
|
|
8
10
|
height: var(--height);
|
|
9
11
|
box-sizing: border-box;
|
|
10
12
|
font-size: var(--font-size);
|
|
@@ -12,9 +14,9 @@
|
|
|
12
14
|
display: flex;
|
|
13
15
|
align-items: center;
|
|
14
16
|
justify-content: space-between;
|
|
15
|
-
border: solid
|
|
16
|
-
border-left:
|
|
17
|
-
border-right:
|
|
17
|
+
border: solid var(--adm-notice-bar-border-width) var(--border-color);
|
|
18
|
+
border-left-width: 0;
|
|
19
|
+
border-right-width: 0;
|
|
18
20
|
background-color: var(--background-color);
|
|
19
21
|
color: var(--text-color);
|
|
20
22
|
}
|
|
@@ -29,13 +31,18 @@
|
|
|
29
31
|
.adm-notice-bar.adm-notice-bar-error {
|
|
30
32
|
--background-color: var(--adm-color-danger);
|
|
31
33
|
--border-color: #d9281e;
|
|
32
|
-
--text-color: #
|
|
34
|
+
--text-color: #fff;
|
|
33
35
|
}
|
|
34
36
|
.adm-notice-bar.adm-notice-bar-info {
|
|
35
37
|
--background-color: #d0e4ff;
|
|
36
38
|
--border-color: #bcd8ff;
|
|
37
39
|
--text-color: var(--adm-color-primary);
|
|
38
40
|
}
|
|
41
|
+
.adm-notice-bar.adm-notice-bar-success {
|
|
42
|
+
--background-color: #d1fff0;
|
|
43
|
+
--border-color: #a8f0d8;
|
|
44
|
+
--text-color: var(--adm-color-success);
|
|
45
|
+
}
|
|
39
46
|
.adm-notice-bar .adm-notice-bar-left {
|
|
40
47
|
flex-shrink: 0;
|
|
41
48
|
margin-right: 8px;
|
|
@@ -79,3 +86,17 @@
|
|
|
79
86
|
padding-bottom: 8px;
|
|
80
87
|
line-height: 22px;
|
|
81
88
|
}
|
|
89
|
+
.adm-notice-bar-neutral {
|
|
90
|
+
border-radius: var(--adm-notice-bar-border-radius);
|
|
91
|
+
}
|
|
92
|
+
.adm-notice-bar-rounded {
|
|
93
|
+
border-radius: 1000px;
|
|
94
|
+
}
|
|
95
|
+
.adm-notice-bar-bordered {
|
|
96
|
+
border-left-width: var(--adm-notice-bar-border-width);
|
|
97
|
+
border-right-width: var(--adm-notice-bar-border-width);
|
|
98
|
+
}
|
|
99
|
+
.adm-notice-bar-without-border {
|
|
100
|
+
border-top-width: 0;
|
|
101
|
+
border-bottom-width: 0;
|
|
102
|
+
}
|
|
@@ -3,7 +3,7 @@ import React from 'react';
|
|
|
3
3
|
import { NativeProps } from '../../utils/native-props';
|
|
4
4
|
export declare type NoticeBarProps = {
|
|
5
5
|
/** The type of the NoticeBar */
|
|
6
|
-
color?: 'default' | 'alert' | 'error' | 'info';
|
|
6
|
+
color?: 'default' | 'alert' | 'error' | 'success' | 'info';
|
|
7
7
|
/** TDelay to start scrolling, unit ms */
|
|
8
8
|
delay?: number;
|
|
9
9
|
/** Scroll speed, unit px/s */
|
|
@@ -24,5 +24,9 @@ export declare type NoticeBarProps = {
|
|
|
24
24
|
icon?: ReactNode;
|
|
25
25
|
/** Whether to display multiple lines */
|
|
26
26
|
wrap?: boolean;
|
|
27
|
+
/** Block shape */
|
|
28
|
+
shape?: 'rectangular' | 'neutral' | 'rounded';
|
|
29
|
+
/** Border visibility */
|
|
30
|
+
bordered?: 'block' | boolean;
|
|
27
31
|
} & NativeProps<'--background-color' | '--border-color' | '--text-color' | '--font-size' | '--icon-font-size' | '--height'>;
|
|
28
32
|
export declare const NoticeBar: React.NamedExoticComponent<NoticeBarProps>;
|
|
@@ -22,7 +22,9 @@ const defaultProps = {
|
|
|
22
22
|
delay: 2000,
|
|
23
23
|
speed: 50,
|
|
24
24
|
icon: _react.default.createElement(_antdMobileIcons.SoundOutline, null),
|
|
25
|
-
wrap: false
|
|
25
|
+
wrap: false,
|
|
26
|
+
shape: 'rectangular',
|
|
27
|
+
bordered: 'block'
|
|
26
28
|
};
|
|
27
29
|
const NoticeBar = (0, _react.memo)(props => {
|
|
28
30
|
const {
|
|
@@ -78,8 +80,10 @@ const NoticeBar = (0, _react.memo)(props => {
|
|
|
78
80
|
});
|
|
79
81
|
if (!visible) return null;
|
|
80
82
|
return (0, _nativeProps.withNativeProps)(mergedProps, _react.default.createElement("div", {
|
|
81
|
-
className: (0, _classnames.default)(classPrefix, `${classPrefix}-${mergedProps.color}`, {
|
|
82
|
-
[`${classPrefix}-wrap`]: mergedProps.wrap
|
|
83
|
+
className: (0, _classnames.default)(classPrefix, `${classPrefix}-${mergedProps.color}`, `${classPrefix}-${mergedProps.shape}`, {
|
|
84
|
+
[`${classPrefix}-wrap`]: mergedProps.wrap,
|
|
85
|
+
[`${classPrefix}-bordered`]: mergedProps.bordered === true,
|
|
86
|
+
[`${classPrefix}-without-border`]: mergedProps.bordered === false
|
|
83
87
|
}),
|
|
84
88
|
onClick: mergedProps.onClick
|
|
85
89
|
}, mergedProps.icon && _react.default.createElement("span", {
|
|
@@ -3,7 +3,7 @@ import React from 'react';
|
|
|
3
3
|
import { NativeProps } from '../../utils/native-props';
|
|
4
4
|
import { InputProps, InputRef } from '../input';
|
|
5
5
|
export declare type SearchBarRef = InputRef;
|
|
6
|
-
export declare type SearchBarProps = Pick<InputProps, 'onFocus' | 'onBlur' | 'onClear' | 'onCompositionStart' | 'onCompositionEnd'> & {
|
|
6
|
+
export declare type SearchBarProps = Pick<InputProps, 'onFocus' | 'onBlur' | 'onClear' | 'onCompositionStart' | 'onCompositionEnd' | 'autoFocus'> & {
|
|
7
7
|
value?: string;
|
|
8
8
|
defaultValue?: string;
|
|
9
9
|
maxLength?: number;
|
|
@@ -22,7 +22,7 @@ export declare type SearchBarProps = Pick<InputProps, 'onFocus' | 'onBlur' | 'on
|
|
|
22
22
|
onChange?: (val: string) => void;
|
|
23
23
|
onCancel?: () => void;
|
|
24
24
|
} & NativeProps<'--background' | '--border-radius' | '--placeholder-color' | '--height' | '--padding-left'>;
|
|
25
|
-
export declare const SearchBar: React.ForwardRefExoticComponent<Pick<InputProps, "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "onClear"> & {
|
|
25
|
+
export declare const SearchBar: React.ForwardRefExoticComponent<Pick<InputProps, "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "autoFocus" | "onClear"> & {
|
|
26
26
|
value?: string | undefined;
|
|
27
27
|
defaultValue?: string | undefined;
|
|
28
28
|
maxLength?: number | undefined;
|
|
@@ -96,6 +96,7 @@ const SearchBar = (0, _react.forwardRef)((props, ref) => {
|
|
|
96
96
|
value: value,
|
|
97
97
|
onChange: setValue,
|
|
98
98
|
maxLength: mergedProps.maxLength,
|
|
99
|
+
autoFocus: mergedProps.autoFocus,
|
|
99
100
|
placeholder: mergedProps.placeholder,
|
|
100
101
|
clearable: mergedProps.clearable,
|
|
101
102
|
onlyShowClearWhenFocus: mergedProps.onlyShowClearWhenFocus,
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
.adm-segmented {
|
|
2
|
+
--segmented-background: var(--adm-color-fill-content);
|
|
3
|
+
--segmented-item-color: var(--adm-color-text-secondary);
|
|
4
|
+
--segmented-item-selected-background: var(--adm-color-background);
|
|
5
|
+
--segmented-item-selected-color: var(--adm-color-text);
|
|
6
|
+
--segmented-item-disabled-color: var(--adm-color-weak);
|
|
7
|
+
--transition-time-function: cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
8
|
+
display: inline-block;
|
|
9
|
+
padding: 2px;
|
|
10
|
+
color: var(--segmented-item-color);
|
|
11
|
+
background-color: var(--segmented-background);
|
|
12
|
+
border-radius: 2px;
|
|
13
|
+
transition: all 0.3s var(--transition-time-function);
|
|
14
|
+
}
|
|
15
|
+
.adm-segmented-group {
|
|
16
|
+
position: relative;
|
|
17
|
+
display: flex;
|
|
18
|
+
align-items: stretch;
|
|
19
|
+
justify-items: flex-start;
|
|
20
|
+
width: 100%;
|
|
21
|
+
}
|
|
22
|
+
.adm-segmented.adm-segmented-block {
|
|
23
|
+
display: flex;
|
|
24
|
+
}
|
|
25
|
+
.adm-segmented.adm-segmented-block .adm-segmented-item {
|
|
26
|
+
flex: 1;
|
|
27
|
+
min-width: 0;
|
|
28
|
+
}
|
|
29
|
+
.adm-segmented-item {
|
|
30
|
+
position: relative;
|
|
31
|
+
text-align: center;
|
|
32
|
+
cursor: pointer;
|
|
33
|
+
transition: color 0.3s var(--transition-time-function);
|
|
34
|
+
}
|
|
35
|
+
.adm-segmented-item-selected {
|
|
36
|
+
background-color: var(--segmented-item-selected-background);
|
|
37
|
+
border-radius: 2px;
|
|
38
|
+
box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.05), 0 1px 4px -1px rgba(0, 0, 0, 0.07), 0 0 1px 0 rgba(0, 0, 0, 0.08);
|
|
39
|
+
color: var(--segmented-item-selected-color);
|
|
40
|
+
}
|
|
41
|
+
.adm-segmented-item-label {
|
|
42
|
+
min-height: 10px;
|
|
43
|
+
padding: 0 11px;
|
|
44
|
+
line-height: 28px;
|
|
45
|
+
overflow: hidden;
|
|
46
|
+
white-space: nowrap;
|
|
47
|
+
text-overflow: ellipsis;
|
|
48
|
+
word-break: keep-all;
|
|
49
|
+
}
|
|
50
|
+
.adm-segmented-item-icon + * {
|
|
51
|
+
margin-left: 6px;
|
|
52
|
+
}
|
|
53
|
+
.adm-segmented-item-input {
|
|
54
|
+
position: absolute;
|
|
55
|
+
top: 0;
|
|
56
|
+
left: 0;
|
|
57
|
+
width: 0;
|
|
58
|
+
height: 0;
|
|
59
|
+
opacity: 0;
|
|
60
|
+
pointer-events: none;
|
|
61
|
+
}
|
|
62
|
+
.adm-segmented-item-disabled {
|
|
63
|
+
color: var(--segmented-item-disabled-color);
|
|
64
|
+
cursor: not-allowed;
|
|
65
|
+
}
|
|
66
|
+
.adm-segmented-thumb {
|
|
67
|
+
background-color: var(--segmented-item-selected-background);
|
|
68
|
+
border-radius: 2px;
|
|
69
|
+
box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.05), 0 1px 4px -1px rgba(0, 0, 0, 0.07), 0 0 1px 0 rgba(0, 0, 0, 0.08);
|
|
70
|
+
position: absolute;
|
|
71
|
+
top: 0;
|
|
72
|
+
left: 0;
|
|
73
|
+
width: 0;
|
|
74
|
+
height: 100%;
|
|
75
|
+
padding: 4px 0;
|
|
76
|
+
}
|
|
77
|
+
.adm-segmented-thumb-motion-appear-active {
|
|
78
|
+
transition: transform 0.3s var(--transition-time-function), width 0.3s var(--transition-time-function);
|
|
79
|
+
will-change: transform, width;
|
|
80
|
+
}
|
|
81
|
+
/* ---- mixins part starts ---- */
|
|
82
|
+
.segmented-disabled-item {
|
|
83
|
+
color: var(--segmented-item-disabled-color);
|
|
84
|
+
cursor: not-allowed;
|
|
85
|
+
}
|
|
86
|
+
.segmented-item-selected {
|
|
87
|
+
background-color: var(--segmented-item-selected-background);
|
|
88
|
+
border-radius: 2px;
|
|
89
|
+
box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.05), 0 1px 4px -1px rgba(0, 0, 0, 0.07), 0 0 1px 0 rgba(0, 0, 0, 0.08);
|
|
90
|
+
}
|
|
91
|
+
.segmented-text-ellipsis {
|
|
92
|
+
overflow: hidden;
|
|
93
|
+
white-space: nowrap;
|
|
94
|
+
text-overflow: ellipsis;
|
|
95
|
+
word-break: keep-all;
|
|
96
|
+
}
|
|
97
|
+
/* ---- mixins part ends ---- */
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import type { SegmentedLabeledOption as RcSegmentedLabeledOption, SegmentedProps as RCSegmentedProps, SegmentedRawOption } from 'rc-segmented';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { NativeProps } from '../../utils/native-props';
|
|
4
|
+
export type { SegmentedValue } from 'rc-segmented';
|
|
5
|
+
interface SegmentedLabeledOptionWithoutIcon extends RcSegmentedLabeledOption {
|
|
6
|
+
label: RcSegmentedLabeledOption['label'];
|
|
7
|
+
}
|
|
8
|
+
interface SegmentedLabeledOptionWithIcon extends Omit<RcSegmentedLabeledOption, 'label'> {
|
|
9
|
+
label?: RcSegmentedLabeledOption['label'];
|
|
10
|
+
/** Set icon for Segmented item */
|
|
11
|
+
icon: React.ReactNode;
|
|
12
|
+
}
|
|
13
|
+
export declare type SegmentedLabeledOption = SegmentedLabeledOptionWithIcon | SegmentedLabeledOptionWithoutIcon;
|
|
14
|
+
interface InternalSegmentedProps extends Omit<RCSegmentedProps, 'size' | 'options'> {
|
|
15
|
+
options: (SegmentedRawOption | SegmentedLabeledOption)[];
|
|
16
|
+
/** Option to fit width to its parent's width */
|
|
17
|
+
block?: boolean;
|
|
18
|
+
}
|
|
19
|
+
export declare type SegmentedProps = InternalSegmentedProps & NativeProps<'--segmented-background' | '--segmented-item-color' | '--segmented-item-selected-background' | '--segmented-item-selected-color' | '--segmented-item-disabled-color'>;
|
|
20
|
+
declare const Segmented: React.ForwardRefExoticComponent<Omit<SegmentedProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
21
|
+
export { Segmented };
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.Segmented = void 0;
|
|
7
|
+
var _tslib = require("tslib");
|
|
8
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
9
|
+
var _rcSegmented = _interopRequireDefault(require("rc-segmented"));
|
|
10
|
+
var React = _interopRequireWildcard(require("react"));
|
|
11
|
+
var _nativeProps = require("../../utils/native-props");
|
|
12
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
13
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
+
function isSegmentedLabeledOptionWithIcon(option) {
|
|
16
|
+
return typeof option === 'object' && !!(option === null || option === void 0 ? void 0 : option.icon);
|
|
17
|
+
}
|
|
18
|
+
const classPrefix = `adm-segmented`;
|
|
19
|
+
const Segmented = React.forwardRef((props, ref) => {
|
|
20
|
+
const {
|
|
21
|
+
prefixCls: customizePrefixCls,
|
|
22
|
+
className,
|
|
23
|
+
block,
|
|
24
|
+
options = []
|
|
25
|
+
} = props,
|
|
26
|
+
restProps = (0, _tslib.__rest)(props
|
|
27
|
+
// syntactic sugar to support `icon` for Segmented Item
|
|
28
|
+
, ["prefixCls", "className", "block", "options"]);
|
|
29
|
+
// syntactic sugar to support `icon` for Segmented Item
|
|
30
|
+
const extendedOptions = React.useMemo(() => options.map(option => {
|
|
31
|
+
if (isSegmentedLabeledOptionWithIcon(option)) {
|
|
32
|
+
const {
|
|
33
|
+
icon,
|
|
34
|
+
label
|
|
35
|
+
} = option,
|
|
36
|
+
restOption = (0, _tslib.__rest)(option, ["icon", "label"]);
|
|
37
|
+
return Object.assign(Object.assign({}, restOption), {
|
|
38
|
+
label: React.createElement(React.Fragment, null, React.createElement("span", {
|
|
39
|
+
className: `${classPrefix}-item-icon`
|
|
40
|
+
}, icon), label && React.createElement("span", null, label))
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
return option;
|
|
44
|
+
}), [options, classPrefix]);
|
|
45
|
+
return (0, _nativeProps.withNativeProps)(props, React.createElement(_rcSegmented.default, Object.assign({}, restProps, {
|
|
46
|
+
className: (0, _classnames.default)(className, {
|
|
47
|
+
[`${classPrefix}-block`]: block
|
|
48
|
+
}),
|
|
49
|
+
options: extendedOptions,
|
|
50
|
+
ref: ref,
|
|
51
|
+
prefixCls: classPrefix
|
|
52
|
+
})));
|
|
53
|
+
});
|
|
54
|
+
exports.Segmented = Segmented;
|
|
55
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
56
|
+
Segmented.displayName = 'Segmented';
|
|
57
|
+
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
.adm-segmented {
|
|
2
|
+
color: #666;
|
|
3
|
+
background-color: #f5f5f5;
|
|
4
|
+
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
5
|
+
}
|
|
6
|
+
.adm-segmented-item {
|
|
7
|
+
transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
8
|
+
}
|
|
9
|
+
.adm-segmented-item-selected {
|
|
10
|
+
background-color: #fff;
|
|
11
|
+
box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.05), 0 1px 4px -1px rgba(0, 0, 0, 0.07), 0 0 1px 0 rgba(0, 0, 0, 0.08);
|
|
12
|
+
color: #333;
|
|
13
|
+
}
|
|
14
|
+
.adm-segmented-item-disabled {
|
|
15
|
+
color: #999;
|
|
16
|
+
}
|
|
17
|
+
.adm-segmented-thumb {
|
|
18
|
+
background-color: #fff;
|
|
19
|
+
box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.05), 0 1px 4px -1px rgba(0, 0, 0, 0.07), 0 0 1px 0 rgba(0, 0, 0, 0.08);
|
|
20
|
+
}
|
|
21
|
+
.adm-segmented-thumb-motion-appear-active {
|
|
22
|
+
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
23
|
+
}
|
|
24
|
+
/* ---- mixins part starts ---- */
|
|
25
|
+
.segmented-disabled-item {
|
|
26
|
+
color: #999;
|
|
27
|
+
}
|
|
28
|
+
.segmented-item-selected {
|
|
29
|
+
background-color: #fff;
|
|
30
|
+
box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.05), 0 1px 4px -1px rgba(0, 0, 0, 0.07), 0 0 1px 0 rgba(0, 0, 0, 0.08);
|
|
31
|
+
}
|
|
32
|
+
/* ---- mixins part ends ---- */
|
|
@@ -5,6 +5,7 @@ export declare type TabBarItemProps = {
|
|
|
5
5
|
icon?: ReactNode | ((active: boolean) => ReactNode);
|
|
6
6
|
title?: ReactNode | ((active: boolean) => ReactNode);
|
|
7
7
|
badge?: BadgeProps['content'];
|
|
8
|
+
onClick?: () => void;
|
|
8
9
|
} & NativeProps;
|
|
9
10
|
export declare const TabBarItem: FC<TabBarItemProps>;
|
|
10
11
|
export declare type TabBarProps = {
|
|
@@ -76,11 +76,13 @@ const TabBar = p => {
|
|
|
76
76
|
return (0, _nativeProps.withNativeProps)(item.props, _react.default.createElement("div", {
|
|
77
77
|
key: item.key,
|
|
78
78
|
onClick: () => {
|
|
79
|
+
var _a, _b;
|
|
79
80
|
const {
|
|
80
81
|
key
|
|
81
82
|
} = item;
|
|
82
83
|
if (key === undefined || key === null) return;
|
|
83
84
|
setActiveKey(key.toString());
|
|
85
|
+
(_b = (_a = item.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
84
86
|
},
|
|
85
87
|
className: (0, _classnames.default)(`${classPrefix}-item`, {
|
|
86
88
|
[`${classPrefix}-item-active`]: active
|
|
@@ -163,7 +163,7 @@ const Tabs = p => {
|
|
|
163
163
|
}, []);
|
|
164
164
|
(0, _useIsomorphicUpdateLayoutEffect.useIsomorphicUpdateLayoutEffect)(() => {
|
|
165
165
|
animate();
|
|
166
|
-
}, [activeKey]);
|
|
166
|
+
}, [activeKey, isRTL, props.activeLineMode]);
|
|
167
167
|
(0, _useResizeEffect.useResizeEffect)(() => {
|
|
168
168
|
animate(!x.isAnimating);
|
|
169
169
|
}, tabListContainerRef);
|
|
@@ -7,9 +7,9 @@ exports.clear = clear;
|
|
|
7
7
|
exports.config = config;
|
|
8
8
|
exports.show = show;
|
|
9
9
|
var _react = _interopRequireDefault(require("react"));
|
|
10
|
-
var _toast = require("./toast");
|
|
11
|
-
var _withDefaultProps = require("../../utils/with-default-props");
|
|
12
10
|
var _renderImperatively = require("../../utils/render-imperatively");
|
|
11
|
+
var _withDefaultProps = require("../../utils/with-default-props");
|
|
12
|
+
var _toast = require("./toast");
|
|
13
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
14
|
let currentHandler = null;
|
|
15
15
|
let currentTimeout = null;
|
|
@@ -20,6 +20,7 @@ const defaultProps = {
|
|
|
20
20
|
};
|
|
21
21
|
const ToastInner = props => _react.default.createElement(_toast.InternalToast, Object.assign({}, props));
|
|
22
22
|
function show(p) {
|
|
23
|
+
var _a;
|
|
23
24
|
const props = (0, _withDefaultProps.mergeProps)(defaultProps, typeof p === 'string' ? {
|
|
24
25
|
content: p
|
|
25
26
|
} : p);
|
|
@@ -29,7 +30,12 @@ function show(p) {
|
|
|
29
30
|
}
|
|
30
31
|
}));
|
|
31
32
|
if (currentHandler) {
|
|
32
|
-
currentHandler.
|
|
33
|
+
if ((_a = currentHandler.isRendered) === null || _a === void 0 ? void 0 : _a.call(currentHandler)) {
|
|
34
|
+
currentHandler.replace(element);
|
|
35
|
+
} else {
|
|
36
|
+
currentHandler.close();
|
|
37
|
+
currentHandler = (0, _renderImperatively.renderImperatively)(element);
|
|
38
|
+
}
|
|
33
39
|
} else {
|
|
34
40
|
currentHandler = (0, _renderImperatively.renderImperatively)(element);
|
|
35
41
|
}
|