@lobehub/ui 1.79.0 → 1.81.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/es/ChatHeader/ChatHeaderTitle.js +1 -1
- package/es/MobileNavBar/MobileNavBarTitle.d.ts +8 -0
- package/es/MobileNavBar/MobileNavBarTitle.js +68 -0
- package/es/MobileNavBar/index.d.ts +28 -0
- package/es/MobileNavBar/index.js +73 -0
- package/es/MobileNavBar/style.d.ts +7 -0
- package/es/MobileNavBar/style.js +17 -0
- package/es/MobileSafeArea/index.d.ts +7 -0
- package/es/MobileSafeArea/index.js +20 -0
- package/es/MobileSafeArea/style.d.ts +5 -0
- package/es/MobileSafeArea/style.js +11 -0
- package/es/MobileTabBar/index.d.ts +18 -0
- package/es/MobileTabBar/index.js +63 -0
- package/es/MobileTabBar/style.d.ts +8 -0
- package/es/MobileTabBar/style.js +18 -0
- package/es/Tag/index.d.ts +1 -0
- package/es/Tag/index.js +7 -4
- package/es/index.d.ts +4 -0
- package/es/index.js +4 -0
- package/package.json +1 -1
|
@@ -33,7 +33,7 @@ var ChatHeaderTitle = /*#__PURE__*/memo(function (_ref2) {
|
|
|
33
33
|
children: [/*#__PURE__*/_jsx("div", {
|
|
34
34
|
className: styles.titleWithDesc,
|
|
35
35
|
children: title
|
|
36
|
-
}), /*#__PURE__*/_jsx(Flexbox, {
|
|
36
|
+
}), tag && /*#__PURE__*/_jsx(Flexbox, {
|
|
37
37
|
className: styles.tag,
|
|
38
38
|
horizontal: true,
|
|
39
39
|
children: tag
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export interface MobileNavBarTitleProps {
|
|
3
|
+
desc?: string | ReactNode;
|
|
4
|
+
tag?: ReactNode;
|
|
5
|
+
title: string | ReactNode;
|
|
6
|
+
}
|
|
7
|
+
declare const MobileNavBarTitle: import("react").NamedExoticComponent<MobileNavBarTitleProps>;
|
|
8
|
+
export default MobileNavBarTitle;
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
2
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
3
|
+
import { createStyles } from 'antd-style';
|
|
4
|
+
import { memo } from 'react';
|
|
5
|
+
import { Flexbox } from 'react-layout-kit';
|
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
|
+
var useStyles = createStyles(function (_ref) {
|
|
9
|
+
var css = _ref.css,
|
|
10
|
+
token = _ref.token;
|
|
11
|
+
return {
|
|
12
|
+
desc: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n overflow: hidden;\n\n width: 100%;\n\n font-size: 12px;\n line-height: 1;\n color: ", ";\n text-overflow: ellipsis;\n white-space: nowrap;\n "])), token.colorTextTertiary),
|
|
13
|
+
tag: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n flex: none;\n "]))),
|
|
14
|
+
title: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n overflow: hidden;\n\n font-size: 16px;\n font-weight: bold;\n line-height: 1;\n text-overflow: ellipsis;\n white-space: nowrap;\n "]))),
|
|
15
|
+
titleContainer: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n flex: 1;\n "]))),
|
|
16
|
+
titleWithDesc: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n overflow: hidden;\n\n font-weight: bold;\n line-height: 1;\n text-overflow: ellipsis;\n white-space: nowrap;\n "])))
|
|
17
|
+
};
|
|
18
|
+
});
|
|
19
|
+
var MobileNavBarTitle = /*#__PURE__*/memo(function (_ref2) {
|
|
20
|
+
var title = _ref2.title,
|
|
21
|
+
desc = _ref2.desc,
|
|
22
|
+
tag = _ref2.tag;
|
|
23
|
+
var _useStyles = useStyles(),
|
|
24
|
+
styles = _useStyles.styles;
|
|
25
|
+
if (desc) return /*#__PURE__*/_jsxs(Flexbox, {
|
|
26
|
+
align: 'center',
|
|
27
|
+
flex: 1,
|
|
28
|
+
gap: 4,
|
|
29
|
+
justify: 'center',
|
|
30
|
+
children: [/*#__PURE__*/_jsxs(Flexbox, {
|
|
31
|
+
align: 'center',
|
|
32
|
+
className: styles.titleContainer,
|
|
33
|
+
gap: 4,
|
|
34
|
+
horizontal: true,
|
|
35
|
+
children: [/*#__PURE__*/_jsx("div", {
|
|
36
|
+
className: styles.titleWithDesc,
|
|
37
|
+
children: title
|
|
38
|
+
}), tag && /*#__PURE__*/_jsx(Flexbox, {
|
|
39
|
+
className: styles.tag,
|
|
40
|
+
horizontal: true,
|
|
41
|
+
children: tag
|
|
42
|
+
})]
|
|
43
|
+
}), /*#__PURE__*/_jsx(Flexbox, {
|
|
44
|
+
align: 'center',
|
|
45
|
+
horizontal: true,
|
|
46
|
+
children: /*#__PURE__*/_jsx("div", {
|
|
47
|
+
className: styles.desc,
|
|
48
|
+
children: desc
|
|
49
|
+
})
|
|
50
|
+
})]
|
|
51
|
+
});
|
|
52
|
+
return /*#__PURE__*/_jsxs(Flexbox, {
|
|
53
|
+
align: 'center',
|
|
54
|
+
flex: 1,
|
|
55
|
+
gap: 4,
|
|
56
|
+
horizontal: true,
|
|
57
|
+
justify: 'center',
|
|
58
|
+
children: [/*#__PURE__*/_jsx("div", {
|
|
59
|
+
className: styles.title,
|
|
60
|
+
children: title
|
|
61
|
+
}), /*#__PURE__*/_jsx(Flexbox, {
|
|
62
|
+
className: styles.tag,
|
|
63
|
+
horizontal: true,
|
|
64
|
+
children: tag
|
|
65
|
+
})]
|
|
66
|
+
});
|
|
67
|
+
});
|
|
68
|
+
export default MobileNavBarTitle;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { CSSProperties, ReactNode } from 'react';
|
|
2
|
+
export interface MobileNavBarProps {
|
|
3
|
+
center?: ReactNode;
|
|
4
|
+
className?: string;
|
|
5
|
+
classNames?: {
|
|
6
|
+
center?: string;
|
|
7
|
+
left?: string;
|
|
8
|
+
right?: string;
|
|
9
|
+
};
|
|
10
|
+
contentStyles?: {
|
|
11
|
+
center?: CSSProperties;
|
|
12
|
+
left?: CSSProperties;
|
|
13
|
+
right?: CSSProperties;
|
|
14
|
+
};
|
|
15
|
+
gap?: {
|
|
16
|
+
center?: number;
|
|
17
|
+
left?: number;
|
|
18
|
+
right?: number;
|
|
19
|
+
};
|
|
20
|
+
left?: ReactNode;
|
|
21
|
+
onBackClick?: () => void;
|
|
22
|
+
right?: ReactNode;
|
|
23
|
+
safeArea?: boolean;
|
|
24
|
+
showBackButton?: boolean;
|
|
25
|
+
style?: CSSProperties;
|
|
26
|
+
}
|
|
27
|
+
declare const MobileNavBar: import("react").NamedExoticComponent<MobileNavBarProps>;
|
|
28
|
+
export default MobileNavBar;
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { ChevronLeft } from 'lucide-react';
|
|
2
|
+
import { memo } from 'react';
|
|
3
|
+
import { Flexbox } from 'react-layout-kit';
|
|
4
|
+
import ActionIcon from "../ActionIcon";
|
|
5
|
+
import MobileSafeArea from "../MobileSafeArea";
|
|
6
|
+
import { useStyles } from "./style";
|
|
7
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
|
+
var MobileNavBar = /*#__PURE__*/memo(function (_ref) {
|
|
10
|
+
var className = _ref.className,
|
|
11
|
+
_ref$safeArea = _ref.safeArea,
|
|
12
|
+
safeArea = _ref$safeArea === void 0 ? true : _ref$safeArea,
|
|
13
|
+
style = _ref.style,
|
|
14
|
+
center = _ref.center,
|
|
15
|
+
left = _ref.left,
|
|
16
|
+
right = _ref.right,
|
|
17
|
+
gap = _ref.gap,
|
|
18
|
+
classNames = _ref.classNames,
|
|
19
|
+
onBackClick = _ref.onBackClick,
|
|
20
|
+
showBackButton = _ref.showBackButton,
|
|
21
|
+
contentStyles = _ref.contentStyles;
|
|
22
|
+
var _useStyles = useStyles(),
|
|
23
|
+
styles = _useStyles.styles,
|
|
24
|
+
cx = _useStyles.cx;
|
|
25
|
+
return /*#__PURE__*/_jsxs(Flexbox, {
|
|
26
|
+
className: cx(styles.container, className),
|
|
27
|
+
style: style,
|
|
28
|
+
children: [safeArea && /*#__PURE__*/_jsx(MobileSafeArea, {
|
|
29
|
+
position: 'bottom'
|
|
30
|
+
}), /*#__PURE__*/_jsxs(Flexbox, {
|
|
31
|
+
align: 'center',
|
|
32
|
+
className: styles.inner,
|
|
33
|
+
flex: 1,
|
|
34
|
+
horizontal: true,
|
|
35
|
+
justify: 'space-between',
|
|
36
|
+
children: [/*#__PURE__*/_jsxs(Flexbox, {
|
|
37
|
+
align: 'center',
|
|
38
|
+
className: cx(styles.left, classNames === null || classNames === void 0 ? void 0 : classNames.left),
|
|
39
|
+
flex: 1,
|
|
40
|
+
gap: gap === null || gap === void 0 ? void 0 : gap.left,
|
|
41
|
+
horizontal: true,
|
|
42
|
+
style: contentStyles === null || contentStyles === void 0 ? void 0 : contentStyles.left,
|
|
43
|
+
children: [showBackButton && /*#__PURE__*/_jsx(ActionIcon, {
|
|
44
|
+
icon: ChevronLeft,
|
|
45
|
+
onClick: function onClick() {
|
|
46
|
+
return onBackClick === null || onBackClick === void 0 ? void 0 : onBackClick();
|
|
47
|
+
},
|
|
48
|
+
size: {
|
|
49
|
+
fontSize: 24
|
|
50
|
+
}
|
|
51
|
+
}), left]
|
|
52
|
+
}), /*#__PURE__*/_jsx(Flexbox, {
|
|
53
|
+
align: 'center',
|
|
54
|
+
className: cx(styles.center, classNames === null || classNames === void 0 ? void 0 : classNames.center),
|
|
55
|
+
flex: 1,
|
|
56
|
+
gap: gap === null || gap === void 0 ? void 0 : gap.center,
|
|
57
|
+
horizontal: true,
|
|
58
|
+
justify: 'center',
|
|
59
|
+
style: contentStyles === null || contentStyles === void 0 ? void 0 : contentStyles.center,
|
|
60
|
+
children: center
|
|
61
|
+
}), /*#__PURE__*/_jsx(Flexbox, {
|
|
62
|
+
align: 'center',
|
|
63
|
+
className: cx(styles.right, classNames === null || classNames === void 0 ? void 0 : classNames.right),
|
|
64
|
+
flex: 1,
|
|
65
|
+
gap: gap === null || gap === void 0 ? void 0 : gap.right,
|
|
66
|
+
horizontal: true,
|
|
67
|
+
style: contentStyles === null || contentStyles === void 0 ? void 0 : contentStyles.right,
|
|
68
|
+
children: right
|
|
69
|
+
})]
|
|
70
|
+
})]
|
|
71
|
+
});
|
|
72
|
+
});
|
|
73
|
+
export default MobileNavBar;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
|
|
2
|
+
center: import("antd-style").SerializedStyles;
|
|
3
|
+
container: string;
|
|
4
|
+
inner: import("antd-style").SerializedStyles;
|
|
5
|
+
left: import("antd-style").SerializedStyles;
|
|
6
|
+
right: import("antd-style").SerializedStyles;
|
|
7
|
+
}>;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
2
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
3
|
+
import { createStyles } from 'antd-style';
|
|
4
|
+
import { rgba } from 'polished';
|
|
5
|
+
export var useStyles = createStyles(function (_ref) {
|
|
6
|
+
var css = _ref.css,
|
|
7
|
+
token = _ref.token,
|
|
8
|
+
cx = _ref.cx,
|
|
9
|
+
stylish = _ref.stylish;
|
|
10
|
+
return {
|
|
11
|
+
center: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n height: 100%;\n "]))),
|
|
12
|
+
container: cx(stylish.blurStrong, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n overflow: hidden;\n flex: 0;\n\n width: 100vw;\n\n background: linear-gradient(\n to bottom,\n ", ",\n ", "\n );\n border-bottom: 1px solid ", ";\n "])), rgba(token.colorBgLayout, 0.8), rgba(token.colorBgLayout, 0.4), token.colorBorder)),
|
|
13
|
+
inner: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: relative;\n\n width: 100%;\n height: 44px;\n min-height: 44px;\n max-height: 44px;\n padding: 0 6px;\n "]))),
|
|
14
|
+
left: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n justify-content: flex-start;\n height: 100%;\n "]))),
|
|
15
|
+
right: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n justify-content: flex-end;\n height: 100%;\n "])))
|
|
16
|
+
};
|
|
17
|
+
});
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { DivProps } from "../types";
|
|
3
|
+
export interface MobileSafeAreaProps extends DivProps {
|
|
4
|
+
position: 'top' | 'bottom';
|
|
5
|
+
}
|
|
6
|
+
declare const MobileSafeArea: React.NamedExoticComponent<MobileSafeAreaProps>;
|
|
7
|
+
export default MobileSafeArea;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
|
+
var _excluded = ["position", "className"];
|
|
4
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
5
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
6
|
+
import React, { memo } from 'react';
|
|
7
|
+
import { useStyles } from "./style";
|
|
8
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
|
+
var MobileSafeArea = /*#__PURE__*/memo(function (_ref) {
|
|
10
|
+
var position = _ref.position,
|
|
11
|
+
className = _ref.className,
|
|
12
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
13
|
+
var _useStyles = useStyles(),
|
|
14
|
+
styles = _useStyles.styles,
|
|
15
|
+
cx = _useStyles.cx;
|
|
16
|
+
return /*#__PURE__*/_jsx("div", _objectSpread({
|
|
17
|
+
className: cx(styles.container, styles[position], className)
|
|
18
|
+
}, props));
|
|
19
|
+
});
|
|
20
|
+
export default MobileSafeArea;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
2
|
+
var _templateObject, _templateObject2, _templateObject3;
|
|
3
|
+
import { createStyles } from 'antd-style';
|
|
4
|
+
export var useStyles = createStyles(function (_ref) {
|
|
5
|
+
var css = _ref.css;
|
|
6
|
+
return {
|
|
7
|
+
bottom: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding-bottom: env(safe-area-inset-bottom);\n "]))),
|
|
8
|
+
container: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n overflow: hidden;\n flex: 0;\n width: 100vw;\n "]))),
|
|
9
|
+
top: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n padding-top: env(safe-area-inset-top);\n "])))
|
|
10
|
+
};
|
|
11
|
+
});
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { CSSProperties, ReactNode } from 'react';
|
|
2
|
+
export interface MobileTabBarItemProps {
|
|
3
|
+
icon: ReactNode | ((active: boolean) => ReactNode);
|
|
4
|
+
key: string;
|
|
5
|
+
onClick?: () => void;
|
|
6
|
+
title: ReactNode | ((active: boolean) => ReactNode);
|
|
7
|
+
}
|
|
8
|
+
export interface MobileTabBarProps {
|
|
9
|
+
activeKey?: string;
|
|
10
|
+
className?: string;
|
|
11
|
+
defaultActiveKey?: string;
|
|
12
|
+
items: MobileTabBarItemProps[];
|
|
13
|
+
onChange?: (key: string) => void;
|
|
14
|
+
safeArea?: boolean;
|
|
15
|
+
style?: CSSProperties;
|
|
16
|
+
}
|
|
17
|
+
declare const MobileTabBar: import("react").NamedExoticComponent<MobileTabBarProps>;
|
|
18
|
+
export default MobileTabBar;
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
2
|
+
import { memo, useEffect, useState } from 'react';
|
|
3
|
+
import { Flexbox } from 'react-layout-kit';
|
|
4
|
+
import MobileSafeArea from "../MobileSafeArea";
|
|
5
|
+
import { useStyles } from "./style";
|
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
|
+
var MobileTabBar = /*#__PURE__*/memo(function (_ref) {
|
|
9
|
+
var className = _ref.className,
|
|
10
|
+
_ref$safeArea = _ref.safeArea,
|
|
11
|
+
safeArea = _ref$safeArea === void 0 ? true : _ref$safeArea,
|
|
12
|
+
style = _ref.style,
|
|
13
|
+
items = _ref.items,
|
|
14
|
+
activeKey = _ref.activeKey,
|
|
15
|
+
defaultActiveKey = _ref.defaultActiveKey,
|
|
16
|
+
onChange = _ref.onChange;
|
|
17
|
+
var _useState = useState(activeKey || defaultActiveKey || items[0].key),
|
|
18
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
19
|
+
currentActive = _useState2[0],
|
|
20
|
+
setCurrentActive = _useState2[1];
|
|
21
|
+
var _useStyles = useStyles(),
|
|
22
|
+
styles = _useStyles.styles,
|
|
23
|
+
cx = _useStyles.cx;
|
|
24
|
+
useEffect(function () {
|
|
25
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(currentActive);
|
|
26
|
+
}, [currentActive]);
|
|
27
|
+
return /*#__PURE__*/_jsxs(Flexbox, {
|
|
28
|
+
className: cx(styles.container, className),
|
|
29
|
+
style: style,
|
|
30
|
+
children: [/*#__PURE__*/_jsx(Flexbox, {
|
|
31
|
+
align: 'center',
|
|
32
|
+
className: styles.inner,
|
|
33
|
+
horizontal: true,
|
|
34
|
+
justify: 'space-around',
|
|
35
|
+
children: items.map(function (item) {
|
|
36
|
+
var active = activeKey ? item.key === activeKey : item.key === currentActive;
|
|
37
|
+
return /*#__PURE__*/_jsxs(Flexbox, {
|
|
38
|
+
align: 'center',
|
|
39
|
+
className: cx(styles.tab, active && styles.active),
|
|
40
|
+
gap: 4,
|
|
41
|
+
justify: 'center',
|
|
42
|
+
onClick: function onClick() {
|
|
43
|
+
var _item$onClick;
|
|
44
|
+
setCurrentActive(item.key);
|
|
45
|
+
item === null || item === void 0 ? void 0 : (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item);
|
|
46
|
+
},
|
|
47
|
+
children: [/*#__PURE__*/_jsx(Flexbox, {
|
|
48
|
+
align: 'center',
|
|
49
|
+
className: styles.icon,
|
|
50
|
+
justify: 'center',
|
|
51
|
+
children: typeof item.icon === 'function' ? item.icon(active) : item.icon
|
|
52
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
53
|
+
className: styles.title,
|
|
54
|
+
children: typeof item.title === 'function' ? item.title(active) : item.title
|
|
55
|
+
})]
|
|
56
|
+
}, item.key);
|
|
57
|
+
})
|
|
58
|
+
}), safeArea && /*#__PURE__*/_jsx(MobileSafeArea, {
|
|
59
|
+
position: 'bottom'
|
|
60
|
+
})]
|
|
61
|
+
});
|
|
62
|
+
});
|
|
63
|
+
export default MobileTabBar;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
|
|
2
|
+
active: import("antd-style").SerializedStyles;
|
|
3
|
+
container: string;
|
|
4
|
+
icon: import("antd-style").SerializedStyles;
|
|
5
|
+
inner: import("antd-style").SerializedStyles;
|
|
6
|
+
tab: import("antd-style").SerializedStyles;
|
|
7
|
+
title: import("antd-style").SerializedStyles;
|
|
8
|
+
}>;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
2
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
3
|
+
import { createStyles } from 'antd-style';
|
|
4
|
+
import { rgba } from 'polished';
|
|
5
|
+
export var useStyles = createStyles(function (_ref) {
|
|
6
|
+
var css = _ref.css,
|
|
7
|
+
token = _ref.token,
|
|
8
|
+
cx = _ref.cx,
|
|
9
|
+
stylish = _ref.stylish;
|
|
10
|
+
return {
|
|
11
|
+
active: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n color: ", ";\n "])), token.colorPrimary),
|
|
12
|
+
container: cx(stylish.blur, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n overflow: hidden;\n flex: 0;\n\n width: 100vw;\n\n background: ", ";\n border-top: 1px solid ", ";\n "])), rgba(token.colorBgContainer, 0.5), token.colorBorder)),
|
|
13
|
+
icon: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n width: 24px;\n height: 24px;\n font-size: 24px;\n "]))),
|
|
14
|
+
inner: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: relative;\n width: 100%;\n height: 48px;\n "]))),
|
|
15
|
+
tab: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n cursor: pointer;\n\n width: 48px;\n height: 48px;\n padding-top: env(safe-area-inset-top);\n\n color: ", ";\n "])), token.colorTextSecondary),
|
|
16
|
+
title: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n font-size: 12px;\n line-height: 1;\n "])))
|
|
17
|
+
};
|
|
18
|
+
});
|
package/es/Tag/index.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ import { type TagProps as AntTagProps } from 'antd';
|
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
3
|
export interface TagProps extends AntTagProps {
|
|
4
4
|
icon?: ReactNode;
|
|
5
|
+
size?: 'default' | 'small';
|
|
5
6
|
}
|
|
6
7
|
declare const Tag: import("react").NamedExoticComponent<TagProps>;
|
|
7
8
|
export default Tag;
|
package/es/Tag/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
3
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
4
|
-
var _excluded = ["icon", "children"];
|
|
4
|
+
var _excluded = ["icon", "children", "size"];
|
|
5
5
|
var _templateObject, _templateObject2;
|
|
6
6
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
7
7
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
@@ -16,19 +16,22 @@ var useStyles = createStyles(function (_ref) {
|
|
|
16
16
|
css = _ref.css,
|
|
17
17
|
token = _ref.token;
|
|
18
18
|
return {
|
|
19
|
-
|
|
19
|
+
small: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding: 2px 6px;\n line-height: 1;\n "]))),
|
|
20
20
|
tag: cx(css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n color: ", " !important;\n background: ", ";\n border: ", "px;\n\n &:hover {\n color: ", ";\n background: ", ";\n }\n "])), token.colorTextSecondary, token.colorFillSecondary, token.borderRadius, token.colorText, token.colorFill))
|
|
21
21
|
};
|
|
22
22
|
});
|
|
23
23
|
var Tag = /*#__PURE__*/memo(function (_ref2) {
|
|
24
24
|
var icon = _ref2.icon,
|
|
25
25
|
children = _ref2.children,
|
|
26
|
+
_ref2$size = _ref2.size,
|
|
27
|
+
size = _ref2$size === void 0 ? 'default' : _ref2$size,
|
|
26
28
|
props = _objectWithoutProperties(_ref2, _excluded);
|
|
27
29
|
var _useStyles = useStyles(),
|
|
28
|
-
styles = _useStyles.styles
|
|
30
|
+
styles = _useStyles.styles,
|
|
31
|
+
cx = _useStyles.cx;
|
|
29
32
|
return /*#__PURE__*/_jsx(AntTag, _objectSpread(_objectSpread({
|
|
30
33
|
bordered: false,
|
|
31
|
-
className: styles.tag
|
|
34
|
+
className: cx(styles.tag, size === 'small' && styles.small)
|
|
32
35
|
}, props), {}, {
|
|
33
36
|
children: /*#__PURE__*/_jsxs(Flexbox, {
|
|
34
37
|
align: 'center',
|
package/es/index.d.ts
CHANGED
|
@@ -48,6 +48,10 @@ export { default as LogoThree, type LogoThreeProps } from './LogoThree';
|
|
|
48
48
|
export { default as Markdown, type MarkdownProps } from './Markdown';
|
|
49
49
|
export { default as MessageInput, type MessageInputProps } from './MessageInput';
|
|
50
50
|
export { default as MessageModal, type MessageModalProps } from './MessageModal';
|
|
51
|
+
export { default as MobileNavBar, type MobileNavBarProps } from './MobileNavBar';
|
|
52
|
+
export { default as MobileNavBarTitle, type MobileNavBarTitleProps, } from './MobileNavBar/MobileNavBarTitle';
|
|
53
|
+
export { default as MobileSafeArea, type MobileSafeAreaProps } from './MobileSafeArea';
|
|
54
|
+
export { default as MobileTabBar, type MobileTabBarItemProps, type MobileTabBarProps, } from './MobileTabBar';
|
|
51
55
|
export { default as SearchBar, type SearchBarProps } from './SearchBar';
|
|
52
56
|
export { default as SideNav, type SideNavProps } from './SideNav';
|
|
53
57
|
export { default as SliderWithInput, type SliderWithInputProps } from './SliderWithInput';
|
package/es/index.js
CHANGED
|
@@ -47,6 +47,10 @@ export { default as LogoThree } from "./LogoThree";
|
|
|
47
47
|
export { default as Markdown } from "./Markdown";
|
|
48
48
|
export { default as MessageInput } from "./MessageInput";
|
|
49
49
|
export { default as MessageModal } from "./MessageModal";
|
|
50
|
+
export { default as MobileNavBar } from "./MobileNavBar";
|
|
51
|
+
export { default as MobileNavBarTitle } from "./MobileNavBar/MobileNavBarTitle";
|
|
52
|
+
export { default as MobileSafeArea } from "./MobileSafeArea";
|
|
53
|
+
export { default as MobileTabBar } from "./MobileTabBar";
|
|
50
54
|
export { default as SearchBar } from "./SearchBar";
|
|
51
55
|
export { default as SideNav } from "./SideNav";
|
|
52
56
|
export { default as SliderWithInput } from "./SliderWithInput";
|