@trionesdev/antd-mobile-react 0.0.2-beta.13 → 0.0.2-beta.15
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/dist/FloatButton/FloatButton.d.ts +21 -0
- package/dist/FloatButton/FloatButton.js +66 -0
- package/dist/FloatButton/FloatButtonGroup.d.ts +21 -0
- package/dist/FloatButton/FloatButtonGroup.js +120 -0
- package/dist/FloatButton/context.d.ts +13 -0
- package/dist/FloatButton/context.js +2 -0
- package/dist/FloatButton/demo/base.d.ts +3 -0
- package/dist/FloatButton/demo/base.js +10 -0
- package/dist/FloatButton/demo/group.d.ts +3 -0
- package/dist/FloatButton/demo/group.js +20 -0
- package/dist/FloatButton/demo/square.d.ts +3 -0
- package/dist/FloatButton/demo/square.js +12 -0
- package/dist/FloatButton/index.d.ts +10 -0
- package/dist/FloatButton/index.js +5 -0
- package/dist/FloatButton/style.scss +123 -0
- package/dist/Segmented/demo/base.d.ts +3 -0
- package/dist/Segmented/demo/base.js +33 -0
- package/dist/Segmented/index.d.ts +3 -0
- package/dist/Segmented/index.js +2 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.js +2 -0
- package/package.json +4 -4
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React, { FC } from 'react';
|
|
2
|
+
import type { BadgeProps } from '@trionesdev/antd-mobile-base-react';
|
|
3
|
+
import './style.scss';
|
|
4
|
+
export type FloatButtonProps = {
|
|
5
|
+
icon?: React.ReactNode;
|
|
6
|
+
/** 文字等内容;仅建议在 `shape="square"` 时使用 */
|
|
7
|
+
content?: React.ReactNode;
|
|
8
|
+
type?: 'primary' | 'default';
|
|
9
|
+
shape?: 'circle' | 'square';
|
|
10
|
+
onClick?: (e: any) => void;
|
|
11
|
+
href?: string;
|
|
12
|
+
target?: string;
|
|
13
|
+
htmlType?: 'button' | 'submit' | 'reset';
|
|
14
|
+
badge?: Partial<BadgeProps>;
|
|
15
|
+
className?: string;
|
|
16
|
+
style?: React.CSSProperties;
|
|
17
|
+
right?: number;
|
|
18
|
+
bottom?: number;
|
|
19
|
+
zIndex?: number;
|
|
20
|
+
};
|
|
21
|
+
export declare const FloatButton: FC<FloatButtonProps>;
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
5
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
6
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
7
|
+
import classNames from 'classnames';
|
|
8
|
+
import React, { useContext } from 'react';
|
|
9
|
+
import { Badge } from '@trionesdev/antd-mobile-base-react';
|
|
10
|
+
import { FloatButtonGroupContext } from "./context";
|
|
11
|
+
import "./style.scss";
|
|
12
|
+
import { AddOutline } from '@trionesdev/antd-mobile-icons-react';
|
|
13
|
+
var cls = 'triones-antm-float-button';
|
|
14
|
+
export var FloatButton = function FloatButton(_ref) {
|
|
15
|
+
var _groupCtx$shape;
|
|
16
|
+
var icon = _ref.icon,
|
|
17
|
+
content = _ref.content,
|
|
18
|
+
_ref$type = _ref.type,
|
|
19
|
+
type = _ref$type === void 0 ? 'default' : _ref$type,
|
|
20
|
+
_ref$shape = _ref.shape,
|
|
21
|
+
shape = _ref$shape === void 0 ? 'circle' : _ref$shape,
|
|
22
|
+
onClick = _ref.onClick,
|
|
23
|
+
href = _ref.href,
|
|
24
|
+
target = _ref.target,
|
|
25
|
+
_ref$htmlType = _ref.htmlType,
|
|
26
|
+
htmlType = _ref$htmlType === void 0 ? 'button' : _ref$htmlType,
|
|
27
|
+
badge = _ref.badge,
|
|
28
|
+
className = _ref.className,
|
|
29
|
+
style = _ref.style,
|
|
30
|
+
right = _ref.right,
|
|
31
|
+
bottom = _ref.bottom,
|
|
32
|
+
zIndex = _ref.zIndex;
|
|
33
|
+
var groupCtx = useContext(FloatButtonGroupContext);
|
|
34
|
+
var mergedShape = (_groupCtx$shape = groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.shape) !== null && _groupCtx$shape !== void 0 ? _groupCtx$shape : shape;
|
|
35
|
+
var mergedContent = content;
|
|
36
|
+
var mergedIcon = icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React.createElement(AddOutline, null);
|
|
37
|
+
var mergedRight = right !== null && right !== void 0 ? right : 24;
|
|
38
|
+
var mergedBottom = bottom !== null && bottom !== void 0 ? bottom : 24;
|
|
39
|
+
var mergedZIndex = zIndex !== null && zIndex !== void 0 ? zIndex : 100;
|
|
40
|
+
var rootClass = classNames(cls, "".concat(cls, "--type-").concat(type), "".concat(cls, "--shape-").concat(mergedShape), _defineProperty(_defineProperty({}, "".concat(cls, "--embedded"), groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.inGroup), "".concat(cls, "--has-content"), mergedShape === 'square' && mergedContent != null && mergedContent !== false), className);
|
|
41
|
+
var inner = /*#__PURE__*/React.createElement(React.Fragment, null, mergedIcon ? /*#__PURE__*/React.createElement("span", {
|
|
42
|
+
className: "".concat(cls, "-icon")
|
|
43
|
+
}, mergedIcon) : null, mergedShape === 'square' && mergedContent ? /*#__PURE__*/React.createElement("span", {
|
|
44
|
+
className: "".concat(cls, "-content")
|
|
45
|
+
}, mergedContent) : null);
|
|
46
|
+
var interactive = href ? /*#__PURE__*/React.createElement("a", {
|
|
47
|
+
className: "".concat(cls, "-body"),
|
|
48
|
+
href: href,
|
|
49
|
+
target: target,
|
|
50
|
+
rel: target === '_blank' ? 'noopener noreferrer' : undefined,
|
|
51
|
+
onClick: onClick
|
|
52
|
+
}, inner) : /*#__PURE__*/React.createElement("button", {
|
|
53
|
+
type: htmlType,
|
|
54
|
+
className: "".concat(cls, "-body"),
|
|
55
|
+
onClick: onClick
|
|
56
|
+
}, inner);
|
|
57
|
+
var withBadge = badge != null && Object.keys(badge).length > 0 ? /*#__PURE__*/React.createElement(Badge, badge, interactive) : interactive;
|
|
58
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
59
|
+
className: rootClass,
|
|
60
|
+
style: _objectSpread({
|
|
61
|
+
zIndex: groupCtx !== null && groupCtx !== void 0 && groupCtx.inGroup ? undefined : mergedZIndex,
|
|
62
|
+
right: groupCtx !== null && groupCtx !== void 0 && groupCtx.inGroup ? undefined : "".concat(mergedRight, "Px"),
|
|
63
|
+
bottom: groupCtx !== null && groupCtx !== void 0 && groupCtx.inGroup ? undefined : "calc(".concat(mergedBottom, "Px + env(safe-area-inset-bottom, 0px))")
|
|
64
|
+
}, style)
|
|
65
|
+
}, withBadge);
|
|
66
|
+
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React, { FC } from 'react';
|
|
2
|
+
import './style.scss';
|
|
3
|
+
export type FloatButtonGroupProps = {
|
|
4
|
+
shape?: 'circle' | 'square';
|
|
5
|
+
type?: 'primary' | 'default';
|
|
6
|
+
/** 菜单模式下主按钮图标(收起态) */
|
|
7
|
+
icon?: React.ReactNode;
|
|
8
|
+
trigger?: 'click' | 'hover';
|
|
9
|
+
open?: boolean;
|
|
10
|
+
onOpenChange?: (open: boolean) => void;
|
|
11
|
+
closeIcon?: React.ReactNode;
|
|
12
|
+
placement?: 'top' | 'bottom' | 'left' | 'right';
|
|
13
|
+
onClick?: (e: React.MouseEvent) => void;
|
|
14
|
+
className?: string;
|
|
15
|
+
style?: React.CSSProperties;
|
|
16
|
+
children?: React.ReactNode;
|
|
17
|
+
right?: number;
|
|
18
|
+
bottom?: number;
|
|
19
|
+
zIndex?: number;
|
|
20
|
+
};
|
|
21
|
+
export declare const FloatButtonGroup: FC<FloatButtonGroupProps>;
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
5
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
6
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
7
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
8
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
9
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
10
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
11
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
12
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
13
|
+
import classNames from 'classnames';
|
|
14
|
+
import { CloseOutline } from "@trionesdev/antd-mobile-icons-react";
|
|
15
|
+
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
16
|
+
import { FloatButton } from "./FloatButton";
|
|
17
|
+
import { FloatButtonGroupContext } from "./context";
|
|
18
|
+
import "./style.scss";
|
|
19
|
+
var groupCls = 'triones-antm-float-button-group';
|
|
20
|
+
export var FloatButtonGroup = function FloatButtonGroup(_ref) {
|
|
21
|
+
var _ref$shape = _ref.shape,
|
|
22
|
+
shape = _ref$shape === void 0 ? 'circle' : _ref$shape,
|
|
23
|
+
_ref$type = _ref.type,
|
|
24
|
+
type = _ref$type === void 0 ? 'default' : _ref$type,
|
|
25
|
+
icon = _ref.icon,
|
|
26
|
+
trigger = _ref.trigger,
|
|
27
|
+
openProp = _ref.open,
|
|
28
|
+
onOpenChange = _ref.onOpenChange,
|
|
29
|
+
closeIcon = _ref.closeIcon,
|
|
30
|
+
_ref$placement = _ref.placement,
|
|
31
|
+
placement = _ref$placement === void 0 ? 'top' : _ref$placement,
|
|
32
|
+
onClick = _ref.onClick,
|
|
33
|
+
className = _ref.className,
|
|
34
|
+
style = _ref.style,
|
|
35
|
+
children = _ref.children,
|
|
36
|
+
_ref$right = _ref.right,
|
|
37
|
+
right = _ref$right === void 0 ? 24 : _ref$right,
|
|
38
|
+
_ref$bottom = _ref.bottom,
|
|
39
|
+
bottom = _ref$bottom === void 0 ? 24 : _ref$bottom,
|
|
40
|
+
_ref$zIndex = _ref.zIndex,
|
|
41
|
+
zIndex = _ref$zIndex === void 0 ? 100 : _ref$zIndex;
|
|
42
|
+
var rootRef = useRef(null);
|
|
43
|
+
var isMenu = trigger === 'click' || trigger === 'hover';
|
|
44
|
+
var _useState = useState(false),
|
|
45
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
46
|
+
uncontrolledOpen = _useState2[0],
|
|
47
|
+
setUncontrolledOpen = _useState2[1];
|
|
48
|
+
var mergedOpen = openProp !== null && openProp !== void 0 ? openProp : uncontrolledOpen;
|
|
49
|
+
var setOpen = useCallback(function (next) {
|
|
50
|
+
if (openProp === undefined) {
|
|
51
|
+
setUncontrolledOpen(next);
|
|
52
|
+
}
|
|
53
|
+
onOpenChange === null || onOpenChange === void 0 || onOpenChange(next);
|
|
54
|
+
}, [openProp, onOpenChange]);
|
|
55
|
+
var triggerOpen = useCallback(function (next) {
|
|
56
|
+
if (mergedOpen !== next) {
|
|
57
|
+
setOpen(next);
|
|
58
|
+
}
|
|
59
|
+
}, [mergedOpen, setOpen]);
|
|
60
|
+
useEffect(function () {
|
|
61
|
+
if (!isMenu || trigger !== 'click') return;
|
|
62
|
+
var onDoc = function onDoc(e) {
|
|
63
|
+
var _rootRef$current;
|
|
64
|
+
if ((_rootRef$current = rootRef.current) !== null && _rootRef$current !== void 0 && _rootRef$current.contains(e.target)) return;
|
|
65
|
+
triggerOpen(false);
|
|
66
|
+
};
|
|
67
|
+
document.addEventListener('click', onDoc, true);
|
|
68
|
+
return function () {
|
|
69
|
+
return document.removeEventListener('click', onDoc, true);
|
|
70
|
+
};
|
|
71
|
+
}, [isMenu, trigger, triggerOpen]);
|
|
72
|
+
var onMouseEnter = function onMouseEnter() {
|
|
73
|
+
if (trigger === 'hover') triggerOpen(true);
|
|
74
|
+
};
|
|
75
|
+
var onMouseLeave = function onMouseLeave() {
|
|
76
|
+
if (trigger === 'hover') triggerOpen(false);
|
|
77
|
+
};
|
|
78
|
+
var onTriggerClick = function onTriggerClick(e) {
|
|
79
|
+
if (trigger === 'click') {
|
|
80
|
+
triggerOpen(!mergedOpen);
|
|
81
|
+
}
|
|
82
|
+
onClick === null || onClick === void 0 || onClick(e);
|
|
83
|
+
};
|
|
84
|
+
var mergedCloseIcon = closeIcon !== null && closeIcon !== void 0 ? closeIcon : /*#__PURE__*/React.createElement(CloseOutline, null);
|
|
85
|
+
var listVisible = !isMenu || mergedOpen;
|
|
86
|
+
var listNode = /*#__PURE__*/React.createElement("div", {
|
|
87
|
+
className: classNames("".concat(groupCls, "-list"), _defineProperty({}, "".concat(groupCls, "-list--hidden"), !listVisible)),
|
|
88
|
+
"aria-hidden": !listVisible
|
|
89
|
+
}, children);
|
|
90
|
+
var triggerNode = /*#__PURE__*/React.createElement(FloatButton, {
|
|
91
|
+
type: type,
|
|
92
|
+
shape: shape,
|
|
93
|
+
icon: mergedOpen ? mergedCloseIcon : icon,
|
|
94
|
+
onClick: onTriggerClick
|
|
95
|
+
});
|
|
96
|
+
var ctxValue = useMemo(function () {
|
|
97
|
+
return {
|
|
98
|
+
inGroup: true,
|
|
99
|
+
shape: shape,
|
|
100
|
+
individual: shape === 'circle',
|
|
101
|
+
right: right,
|
|
102
|
+
bottom: bottom,
|
|
103
|
+
zIndex: zIndex
|
|
104
|
+
};
|
|
105
|
+
}, [shape, right, bottom, zIndex]);
|
|
106
|
+
var rootClass = classNames(groupCls, "".concat(groupCls, "--placement-").concat(placement), _defineProperty({}, "".concat(groupCls, "--menu"), isMenu), className);
|
|
107
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
108
|
+
ref: rootRef,
|
|
109
|
+
className: rootClass,
|
|
110
|
+
style: _objectSpread({
|
|
111
|
+
zIndex: zIndex,
|
|
112
|
+
right: "".concat(right, "Px"),
|
|
113
|
+
bottom: "calc(".concat(bottom, "Px + env(safe-area-inset-bottom, 0px))")
|
|
114
|
+
}, style),
|
|
115
|
+
onMouseEnter: onMouseEnter,
|
|
116
|
+
onMouseLeave: onMouseLeave
|
|
117
|
+
}, /*#__PURE__*/React.createElement(FloatButtonGroupContext.Provider, {
|
|
118
|
+
value: ctxValue
|
|
119
|
+
}, isMenu ? /*#__PURE__*/React.createElement(React.Fragment, null, placement === 'bottom' ? /*#__PURE__*/React.createElement(React.Fragment, null, triggerNode, listNode) : placement === 'right' ? /*#__PURE__*/React.createElement(React.Fragment, null, triggerNode, listNode) : /*#__PURE__*/React.createElement(React.Fragment, null, listNode, triggerNode)) : children));
|
|
120
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export type FloatButtonGroupContextValue = {
|
|
3
|
+
/** 是否在 FloatButton.Group 内(组内子按钮不使用 fixed 定位) */
|
|
4
|
+
inGroup: boolean;
|
|
5
|
+
/** 组级 shape,覆盖子项 */
|
|
6
|
+
shape?: 'circle' | 'square';
|
|
7
|
+
/** 与 antd 一致:circle 组为 true */
|
|
8
|
+
individual?: boolean;
|
|
9
|
+
right?: number;
|
|
10
|
+
bottom?: number;
|
|
11
|
+
zIndex?: number;
|
|
12
|
+
};
|
|
13
|
+
export declare const FloatButtonGroupContext: React.Context<FloatButtonGroupContextValue | null>;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { DemoBlock } from "../../DemoBlock";
|
|
3
|
+
import FloatButton from "../index";
|
|
4
|
+
export default (function () {
|
|
5
|
+
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DemoBlock, {
|
|
6
|
+
title: "\u57FA\u7840\u7528\u6CD5"
|
|
7
|
+
}, /*#__PURE__*/React.createElement(FloatButton, {
|
|
8
|
+
type: "primary"
|
|
9
|
+
})));
|
|
10
|
+
});
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { DemoBlock } from "../../DemoBlock";
|
|
3
|
+
import FloatButton from "../index";
|
|
4
|
+
export default (function () {
|
|
5
|
+
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DemoBlock, {
|
|
6
|
+
title: "\u6309\u94AE\u7EC4\uFF08\u83DC\u5355\uFF09"
|
|
7
|
+
}, /*#__PURE__*/React.createElement(FloatButton.Group, {
|
|
8
|
+
trigger: "click",
|
|
9
|
+
type: "primary",
|
|
10
|
+
placement: "top"
|
|
11
|
+
}, /*#__PURE__*/React.createElement(FloatButton, {
|
|
12
|
+
icon: /*#__PURE__*/React.createElement("span", {
|
|
13
|
+
"aria-label": "search"
|
|
14
|
+
}, "\uD83D\uDD0D")
|
|
15
|
+
}), /*#__PURE__*/React.createElement(FloatButton, {
|
|
16
|
+
icon: /*#__PURE__*/React.createElement("span", {
|
|
17
|
+
"aria-label": "edit"
|
|
18
|
+
}, "\u270E")
|
|
19
|
+
}))));
|
|
20
|
+
});
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { DemoBlock } from "../../DemoBlock";
|
|
3
|
+
import FloatButton from "../index";
|
|
4
|
+
export default (function () {
|
|
5
|
+
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DemoBlock, {
|
|
6
|
+
title: "\u65B9\u5F62\u4E0E\u63CF\u8FF0"
|
|
7
|
+
}, /*#__PURE__*/React.createElement(FloatButton, {
|
|
8
|
+
type: "primary",
|
|
9
|
+
shape: "square",
|
|
10
|
+
content: "\u5E2E\u52A9"
|
|
11
|
+
})));
|
|
12
|
+
});
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { FloatButton as InternalFloatButton, FloatButtonProps } from "./FloatButton";
|
|
2
|
+
import { FloatButtonGroup } from "./FloatButtonGroup";
|
|
3
|
+
type InternalFloatButtonType = typeof InternalFloatButton;
|
|
4
|
+
type CompoundedComponent = InternalFloatButtonType & {
|
|
5
|
+
Group: typeof FloatButtonGroup;
|
|
6
|
+
};
|
|
7
|
+
declare const FloatButton: CompoundedComponent;
|
|
8
|
+
export type { FloatButtonProps };
|
|
9
|
+
export type { FloatButtonGroupProps } from "./FloatButtonGroup";
|
|
10
|
+
export default FloatButton;
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
@use "../style/variable" as variable;
|
|
2
|
+
|
|
3
|
+
$floatButtonCls: "triones-antm-float-button";
|
|
4
|
+
$floatButtonGroupCls: "triones-antm-float-button-group";
|
|
5
|
+
|
|
6
|
+
$floatButtonSize: 48Px;
|
|
7
|
+
$floatButtonShadow: 0 6Px 16Px 0 rgba(0, 0, 0, 0.08),
|
|
8
|
+
0 3Px 6Px -4Px rgba(0, 0, 0, 0.12), 0 9Px 28Px 8Px rgba(0, 0, 0, 0.05);
|
|
9
|
+
|
|
10
|
+
.#{$floatButtonCls} {
|
|
11
|
+
position: fixed;
|
|
12
|
+
display: inline-flex;
|
|
13
|
+
flex-shrink: 0;
|
|
14
|
+
box-sizing: border-box;
|
|
15
|
+
|
|
16
|
+
&--embedded {
|
|
17
|
+
position: relative;
|
|
18
|
+
right: auto;
|
|
19
|
+
bottom: auto;
|
|
20
|
+
z-index: auto;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
&-body {
|
|
24
|
+
box-sizing: border-box;
|
|
25
|
+
margin: 0;
|
|
26
|
+
padding: 0;
|
|
27
|
+
display: inline-flex;
|
|
28
|
+
align-items: center;
|
|
29
|
+
justify-content: center;
|
|
30
|
+
gap: 8Px;
|
|
31
|
+
min-width: $floatButtonSize;
|
|
32
|
+
min-height: $floatButtonSize;
|
|
33
|
+
border: none;
|
|
34
|
+
border-radius: 50%;
|
|
35
|
+
cursor: pointer;
|
|
36
|
+
font-size: 20Px;
|
|
37
|
+
line-height: 1;
|
|
38
|
+
color: rgba(0, 0, 0, 0.88);
|
|
39
|
+
background: #fff;
|
|
40
|
+
box-shadow: $floatButtonShadow;
|
|
41
|
+
transition: color 0.2s, background 0.2s, box-shadow 0.2s;
|
|
42
|
+
-webkit-tap-highlight-color: transparent;
|
|
43
|
+
text-decoration: none;
|
|
44
|
+
|
|
45
|
+
&:active {
|
|
46
|
+
filter: brightness(0.95);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
&--shape-square &-body {
|
|
51
|
+
border-radius: variable.$trionesBorderRadius;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&--has-content &-body {
|
|
55
|
+
min-height: $floatButtonSize;
|
|
56
|
+
display: inline-flex;
|
|
57
|
+
flex-direction: column;
|
|
58
|
+
align-items: center;
|
|
59
|
+
justify-content: center;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
&--type-primary &-body {
|
|
63
|
+
color: #fff;
|
|
64
|
+
background: variable.$trionesColorPrimary;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
&-icon {
|
|
68
|
+
display: inline-flex;
|
|
69
|
+
align-items: center;
|
|
70
|
+
justify-content: center;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
&-content {
|
|
74
|
+
font-size: variable.$trionesFontSizeSm;
|
|
75
|
+
font-weight: 500;
|
|
76
|
+
white-space: nowrap;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.#{$floatButtonGroupCls} {
|
|
81
|
+
position: fixed;
|
|
82
|
+
z-index: 100;
|
|
83
|
+
bottom: calc(24Px + env(safe-area-inset-bottom, 0px));
|
|
84
|
+
display: flex;
|
|
85
|
+
gap: 12Px;
|
|
86
|
+
align-items: flex-end;
|
|
87
|
+
box-sizing: border-box;
|
|
88
|
+
|
|
89
|
+
&--placement {
|
|
90
|
+
&-top {
|
|
91
|
+
flex-direction: column;
|
|
92
|
+
}
|
|
93
|
+
&-bottom {
|
|
94
|
+
flex-direction: column;
|
|
95
|
+
}
|
|
96
|
+
&-left {
|
|
97
|
+
flex-direction: row;
|
|
98
|
+
}
|
|
99
|
+
&-right {
|
|
100
|
+
flex-direction: row;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
&--menu {
|
|
105
|
+
align-items: center;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
&-list {
|
|
109
|
+
display: flex;
|
|
110
|
+
flex-direction: column;
|
|
111
|
+
gap: 12Px;
|
|
112
|
+
align-items: flex-end;
|
|
113
|
+
|
|
114
|
+
&--hidden {
|
|
115
|
+
display: none;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
&--placement-left &-list,
|
|
120
|
+
&--placement-right &-list {
|
|
121
|
+
flex-direction: column;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { Segmented } from "@trionesdev/antd-mobile-base-react";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { DemoBlock } from "../../DemoBlock";
|
|
4
|
+
export default (function () {
|
|
5
|
+
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DemoBlock, {
|
|
6
|
+
title: "\u57FA\u672C\u4F7F\u7528"
|
|
7
|
+
}, /*#__PURE__*/React.createElement(Segmented, {
|
|
8
|
+
options: [{
|
|
9
|
+
label: '选项1',
|
|
10
|
+
value: '1'
|
|
11
|
+
}, {
|
|
12
|
+
label: '选项2',
|
|
13
|
+
value: '2'
|
|
14
|
+
}, {
|
|
15
|
+
label: '选项3',
|
|
16
|
+
value: '3'
|
|
17
|
+
}]
|
|
18
|
+
})), /*#__PURE__*/React.createElement(DemoBlock, {
|
|
19
|
+
title: "block \u5C5E\u6027\u4F7F\u5176\u9002\u5408\u7236\u5143\u7D20\u5BBD\u5EA6"
|
|
20
|
+
}, /*#__PURE__*/React.createElement(Segmented, {
|
|
21
|
+
block: true,
|
|
22
|
+
options: [{
|
|
23
|
+
label: '选项1',
|
|
24
|
+
value: '1'
|
|
25
|
+
}, {
|
|
26
|
+
label: '选项2',
|
|
27
|
+
value: '2'
|
|
28
|
+
}, {
|
|
29
|
+
label: '选项3',
|
|
30
|
+
value: '3'
|
|
31
|
+
}]
|
|
32
|
+
})));
|
|
33
|
+
});
|
package/dist/index.d.ts
CHANGED
|
@@ -42,6 +42,8 @@ export { default as Empty } from './Empty';
|
|
|
42
42
|
export type { EmptyProps } from './Empty';
|
|
43
43
|
export { default as ErrorBlock } from './ErrorBlock';
|
|
44
44
|
export type { ErrorBlockStatus, ErrorBlockProps } from './ErrorBlock';
|
|
45
|
+
export { default as FloatButton } from './FloatButton';
|
|
46
|
+
export type { FloatButtonProps, FloatButtonGroupProps } from './FloatButton';
|
|
45
47
|
export { default as Footer } from './Footer';
|
|
46
48
|
export type { FooterProps } from './Footer';
|
|
47
49
|
export { default as Form } from './Form';
|
|
@@ -86,6 +88,8 @@ export { default as Scaffold } from './Scaffold';
|
|
|
86
88
|
export type { ScaffoldProps } from './Scaffold';
|
|
87
89
|
export { default as ScrollView } from './ScrollView';
|
|
88
90
|
export type { ScrollViewProps } from './ScrollView';
|
|
91
|
+
export { default as Segmented } from './Segmented';
|
|
92
|
+
export type { SegmentedProps } from './Segmented';
|
|
89
93
|
export { default as SideBar } from './SideBar';
|
|
90
94
|
export type { SideBarProps } from './SideBar';
|
|
91
95
|
export { default as Space } from './Space';
|
package/dist/index.js
CHANGED
|
@@ -20,6 +20,7 @@ export { default as Divider } from "./Divider";
|
|
|
20
20
|
export { default as Ellipsis } from "./Ellipsis";
|
|
21
21
|
export { default as Empty } from "./Empty";
|
|
22
22
|
export { default as ErrorBlock } from "./ErrorBlock";
|
|
23
|
+
export { default as FloatButton } from "./FloatButton";
|
|
23
24
|
export { default as Footer } from "./Footer";
|
|
24
25
|
export { default as Form } from "./Form";
|
|
25
26
|
export { default as Grid } from "./Grid";
|
|
@@ -42,6 +43,7 @@ export { default as Result } from "./Result";
|
|
|
42
43
|
export { default as SafeArea } from "./SafeArea";
|
|
43
44
|
export { default as Scaffold } from "./Scaffold";
|
|
44
45
|
export { default as ScrollView } from "./ScrollView";
|
|
46
|
+
export { default as Segmented } from "./Segmented";
|
|
45
47
|
export { default as SideBar } from "./SideBar";
|
|
46
48
|
export { default as Space } from "./Space";
|
|
47
49
|
export { default as SpinLoading } from "./SpinLoading";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@trionesdev/antd-mobile-react",
|
|
3
|
-
"version": "0.0.2-beta.
|
|
3
|
+
"version": "0.0.2-beta.15",
|
|
4
4
|
"description": "antd mobile react ",
|
|
5
5
|
"module": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -89,7 +89,7 @@
|
|
|
89
89
|
"stylelint": "^16.12.0"
|
|
90
90
|
},
|
|
91
91
|
"dependencies": {
|
|
92
|
-
"@trionesdev/antd-mobile-base-react": "^0.0.2-beta.
|
|
92
|
+
"@trionesdev/antd-mobile-base-react": "^0.0.2-beta.15",
|
|
93
93
|
"ahooks": "^3.8.4",
|
|
94
94
|
"crypto-js": "^4.2.0",
|
|
95
95
|
"dayjs": "^1.11.19",
|
|
@@ -97,7 +97,7 @@
|
|
|
97
97
|
},
|
|
98
98
|
"optionalDependencies": {
|
|
99
99
|
"@trionesdev/antd-mobile-base-react": "workspace:*",
|
|
100
|
-
"@trionesdev/antd-mobile-icons-react": "0.0.2-beta.
|
|
100
|
+
"@trionesdev/antd-mobile-icons-react": "0.0.2-beta.14"
|
|
101
101
|
},
|
|
102
|
-
"gitHead": "
|
|
102
|
+
"gitHead": "5d9e7dbf380ca19c5e35509f0a31865ec5bdcc06"
|
|
103
103
|
}
|