@pisell/materials 6.0.18 → 6.0.20
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/build/lowcode/assets-daily.json +11 -11
- package/build/lowcode/assets-dev.json +2 -2
- package/build/lowcode/assets-prod.json +11 -11
- package/build/lowcode/index.js +1 -1
- package/build/lowcode/meta.js +7 -7
- package/build/lowcode/preview.js +146 -146
- package/build/lowcode/render/default/view.css +1 -1
- package/build/lowcode/render/default/view.js +51 -20
- package/build/lowcode/view.css +1 -1
- package/build/lowcode/view.js +51 -20
- package/es/components/badge/index.d.ts +7 -0
- package/es/components/badge/index.js +44 -0
- package/es/components/badge/index.less +2 -0
- package/es/components/buttonGroupEdit/index.d.ts +8 -0
- package/es/components/buttonGroupEdit/index.js +408 -0
- package/es/components/buttonGroupPreview/index.d.ts +19 -0
- package/es/components/buttonGroupPreview/index.js +74 -0
- package/es/components/cardMetricItem/index.d.ts +12 -0
- package/es/components/cardMetricItem/index.js +39 -0
- package/es/components/cardMetricItem/index.less +39 -0
- package/es/components/cardPro/index.d.ts +3 -0
- package/es/components/cardPro/index.js +66 -0
- package/es/components/cardPro/index.less +55 -0
- package/es/components/cropPhoto/index.d.ts +3 -0
- package/es/components/cropPhoto/index.js +72 -0
- package/es/components/cropPhoto/index.less +15 -0
- package/es/components/dataSourceComponents/dataSourceMenu/Basic.d.ts +8 -2
- package/es/components/dataSourceComponents/dataSourceMenu/Basic.js +13 -3
- package/es/components/dataSourceComponents/dataSourceMenu/index.d.ts +8 -2
- package/es/components/dataSourceComponents/fields/Input/WithMode.js +24 -1
- package/es/components/dataSourceComponents/fields/Input.Mobile/serve.js +31 -3
- package/es/components/dataSourceComponents/fields/Input.Phone/serve.js +31 -3
- package/es/components/dataSourceComponents/fields/Input.Subdomain/index.d.ts +1 -1
- package/es/components/dataSourceComponents/fields/Input.Url/ReadPretty.less +2 -0
- package/es/components/dataSourceComponents/fields/Upload/BaseUpload.js +102 -141
- package/es/components/dataSourceComponents/fields/Upload/WithMode.js +6 -3
- package/es/components/dataSourceComponents/fields/Upload/serve.js +13 -3
- package/es/components/dataSourceComponents/fields/Upload/shopUploadServe.d.ts +56 -0
- package/es/components/dataSourceComponents/fields/Upload/shopUploadServe.js +396 -0
- package/es/components/dataSourceComponents/fields/Upload/type.d.ts +1 -0
- package/es/components/dataSourceComponents/fields/Upload/utils.d.ts +1 -0
- package/es/components/dataSourceComponents/fields/Upload/utils.js +17 -2
- package/es/components/dataSourceComponents/fields/index.d.ts +8 -8
- package/es/components/dataSourceComponents/hooks/usePlatform.d.ts +3 -0
- package/es/components/dataSourceComponents/hooks/usePlatform.js +12 -0
- package/es/components/login-and-register/index.js +23 -21
- package/es/components/login-and-register/index.less +7 -7
- package/es/components/page/index.js +23 -57
- package/es/components/pisellAnchor/index.d.ts +23 -0
- package/es/components/pisellAnchor/index.js +303 -0
- package/es/components/pisellAnchor/index.less +197 -0
- package/es/components/pisellNavigationMenu/PisellNavigationMenu.js +18 -2
- package/es/components/pisellQrcode/index.d.ts +10 -0
- package/es/components/pisellQrcode/index.js +70 -0
- package/es/components/pisellQrcode/index.less +41 -0
- package/es/components/pisellStatisticList/index.d.ts +3 -0
- package/es/components/pisellStatisticList/index.js +17 -5
- package/es/components/pisellStatisticList/index.less +1 -1
- package/es/components/pisellText/components/Amount/index.d.ts +2 -0
- package/es/components/pisellText/components/Amount/index.js +3 -2
- package/es/components/pisellWalletPassCard/index.d.ts +4 -4
- package/es/components/pisellWalletPassCard/index.js +28 -12
- package/es/components/pisellWalletPassCard/index.less +26 -4
- package/es/components/record-view/index.d.ts +13 -5
- package/es/components/record-view/index.js +81 -30
- package/es/components/record-view/index.less +37 -2
- package/es/components/table/Table/utils.d.ts +1 -1
- package/es/components/tabs/index.d.ts +1 -0
- package/es/components/tabs/index.js +25 -7
- package/es/components/tabs/index.less +5 -5
- package/es/components/walletCard/Guest/index.d.ts +3 -0
- package/es/components/walletCard/Guest/index.js +83 -0
- package/es/components/walletCard/Guest/index.less +71 -0
- package/es/components/walletCard/index.d.ts +65 -0
- package/es/components/walletCard/index.js +402 -0
- package/es/components/walletCard/index.less +267 -0
- package/es/index.d.ts +10 -1
- package/es/index.js +10 -1
- package/es/locales/en-US.d.ts +38 -2
- package/es/locales/en-US.js +55 -10
- package/es/locales/index.js +4 -2
- package/es/locales/zh-CN.d.ts +36 -0
- package/es/locales/zh-CN.js +41 -1
- package/es/locales/zh-TW.d.ts +36 -0
- package/es/locales/zh-TW.js +41 -1
- package/es/utils/index.d.ts +1 -0
- package/es/utils/index.js +3 -0
- package/es/utils/platform.d.ts +1 -1
- package/lib/components/badge/index.d.ts +7 -0
- package/lib/components/badge/index.js +70 -0
- package/lib/components/badge/index.less +2 -0
- package/lib/components/buttonGroupEdit/index.d.ts +8 -0
- package/lib/components/buttonGroupEdit/index.js +317 -0
- package/lib/components/buttonGroupPreview/index.d.ts +19 -0
- package/lib/components/buttonGroupPreview/index.js +79 -0
- package/lib/components/cardMetricItem/index.d.ts +12 -0
- package/lib/components/cardMetricItem/index.js +75 -0
- package/lib/components/cardMetricItem/index.less +39 -0
- package/lib/components/cardPro/index.d.ts +3 -0
- package/lib/components/cardPro/index.js +98 -0
- package/lib/components/cardPro/index.less +55 -0
- package/lib/components/cropPhoto/index.d.ts +3 -0
- package/lib/components/cropPhoto/index.js +70 -0
- package/lib/components/cropPhoto/index.less +15 -0
- package/lib/components/dataSourceComponents/dataSourceMenu/Basic.d.ts +8 -2
- package/lib/components/dataSourceComponents/dataSourceMenu/Basic.js +12 -3
- package/lib/components/dataSourceComponents/dataSourceMenu/index.d.ts +8 -2
- package/lib/components/dataSourceComponents/fields/Input/WithMode.js +21 -0
- package/lib/components/dataSourceComponents/fields/Input.Mobile/serve.js +37 -3
- package/lib/components/dataSourceComponents/fields/Input.Phone/serve.js +37 -3
- package/lib/components/dataSourceComponents/fields/Input.Subdomain/index.d.ts +1 -1
- package/lib/components/dataSourceComponents/fields/Input.Url/ReadPretty.less +2 -0
- package/lib/components/dataSourceComponents/fields/Upload/BaseUpload.js +47 -72
- package/lib/components/dataSourceComponents/fields/Upload/WithMode.js +11 -9
- package/lib/components/dataSourceComponents/fields/Upload/serve.js +11 -2
- package/lib/components/dataSourceComponents/fields/Upload/shopUploadServe.d.ts +56 -0
- package/lib/components/dataSourceComponents/fields/Upload/shopUploadServe.js +247 -0
- package/lib/components/dataSourceComponents/fields/Upload/type.d.ts +1 -0
- package/lib/components/dataSourceComponents/fields/Upload/utils.d.ts +1 -0
- package/lib/components/dataSourceComponents/fields/Upload/utils.js +17 -2
- package/lib/components/dataSourceComponents/fields/index.d.ts +8 -8
- package/lib/components/dataSourceComponents/hooks/usePlatform.d.ts +3 -0
- package/lib/components/dataSourceComponents/hooks/usePlatform.js +51 -0
- package/lib/components/login-and-register/index.js +23 -21
- package/lib/components/login-and-register/index.less +7 -7
- package/lib/components/page/index.js +37 -65
- package/lib/components/pisellAnchor/index.d.ts +23 -0
- package/lib/components/pisellAnchor/index.js +251 -0
- package/lib/components/pisellAnchor/index.less +197 -0
- package/lib/components/pisellNavigationMenu/PisellNavigationMenu.js +24 -3
- package/lib/components/pisellQrcode/index.d.ts +10 -0
- package/lib/components/pisellQrcode/index.js +82 -0
- package/lib/components/pisellQrcode/index.less +41 -0
- package/lib/components/pisellStatisticList/index.d.ts +3 -0
- package/lib/components/pisellStatisticList/index.js +35 -15
- package/lib/components/pisellStatisticList/index.less +1 -1
- package/lib/components/pisellText/components/Amount/index.d.ts +2 -0
- package/lib/components/pisellText/components/Amount/index.js +2 -1
- package/lib/components/pisellWalletPassCard/index.d.ts +4 -4
- package/lib/components/pisellWalletPassCard/index.js +17 -9
- package/lib/components/pisellWalletPassCard/index.less +26 -4
- package/lib/components/record-view/index.d.ts +13 -5
- package/lib/components/record-view/index.js +63 -11
- package/lib/components/record-view/index.less +37 -2
- package/lib/components/table/Table/utils.d.ts +1 -1
- package/lib/components/tabs/index.d.ts +1 -0
- package/lib/components/tabs/index.js +12 -1
- package/lib/components/tabs/index.less +5 -5
- package/lib/components/walletCard/Guest/index.d.ts +3 -0
- package/lib/components/walletCard/Guest/index.js +138 -0
- package/lib/components/walletCard/Guest/index.less +71 -0
- package/lib/components/walletCard/index.d.ts +65 -0
- package/lib/components/walletCard/index.js +374 -0
- package/lib/components/walletCard/index.less +267 -0
- package/lib/index.d.ts +10 -1
- package/lib/index.js +26 -1
- package/lib/locales/en-US.d.ts +38 -2
- package/lib/locales/en-US.js +41 -3
- package/lib/locales/index.js +4 -2
- package/lib/locales/zh-CN.d.ts +36 -0
- package/lib/locales/zh-CN.js +41 -1
- package/lib/locales/zh-TW.d.ts +36 -0
- package/lib/locales/zh-TW.js +41 -1
- package/lib/utils/index.d.ts +1 -0
- package/lib/utils/index.js +6 -1
- package/lib/utils/platform.d.ts +1 -1
- package/lowcode/badge/meta.ts +20 -11
- package/lowcode/badge/snippets.ts +2 -0
- package/lowcode/button/meta.ts +2 -6
- package/lowcode/button-group/meta.ts +198 -0
- package/lowcode/button-group/snippets.ts +68 -0
- package/lowcode/button-group-edit/meta.ts +32 -0
- package/lowcode/button-group-edit/snippets.ts +98 -0
- package/lowcode/button-group-preview/meta.ts +55 -0
- package/lowcode/button-group-preview/snippets.ts +57 -0
- package/lowcode/card/snippets.ts +55 -55
- package/lowcode/card-metric-item/meta.ts +83 -0
- package/lowcode/card-metric-item/snippets.ts +13 -0
- package/lowcode/card-pro/meta.ts +338 -0
- package/lowcode/card-pro/snippe.ts +39 -0
- package/lowcode/crop-photo/meta.ts +77 -0
- package/lowcode/crop-photo/snippe.ts +12 -0
- package/lowcode/form-item-input/snippets.ts +1 -1
- package/lowcode/form-item-upload/meta.ts +11 -0
- package/lowcode/pisell-anchor/meta.ts +118 -0
- package/lowcode/pisell-anchor/snippets.ts +26 -0
- package/lowcode/pisell-card/meta.ts +63 -27
- package/lowcode/pisell-card/snippets.ts +6 -0
- package/lowcode/pisell-modal.information/meta.ts +8 -0
- package/lowcode/pisell-qrcode/__screenshots__/upload-1.png +0 -0
- package/lowcode/pisell-qrcode/meta.ts +46 -0
- package/lowcode/pisell-qrcode/snippets.ts +13 -0
- package/lowcode/pisell-tooltip/meta.ts +1 -1
- package/lowcode/record-view/meta.ts +20 -0
- package/lowcode/section-footers/meta.ts +66 -0
- package/lowcode/section-footers/snippe.ts +21 -0
- package/lowcode/spin/meta.ts +9 -0
- package/lowcode/tag/meta.ts +6 -0
- package/lowcode/timeline/meta.ts +32 -9
- package/lowcode/timeline/snippets.ts +12 -2
- package/lowcode/timeline.item/meta.ts +1 -1
- package/lowcode/wallet-card/meta.ts +283 -0
- package/lowcode/wallet-card/snippets.ts +44 -0
- package/package.json +5 -1
|
@@ -0,0 +1,44 @@
|
|
|
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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
3
|
+
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; }
|
|
4
|
+
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; }
|
|
5
|
+
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; }
|
|
6
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
7
|
+
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); }
|
|
8
|
+
import React, { useEffect } from 'react';
|
|
9
|
+
import { Badge as OriginalBadge } from 'antd';
|
|
10
|
+
import { withWrap } from "../../utils/hoc";
|
|
11
|
+
import "./index.less";
|
|
12
|
+
// @ts-ignore
|
|
13
|
+
|
|
14
|
+
var Badge = withWrap(function (props) {
|
|
15
|
+
var _props$styleType = props.styleType,
|
|
16
|
+
styleType = _props$styleType === void 0 ? '' : _props$styleType,
|
|
17
|
+
_props$color = props.color,
|
|
18
|
+
color = _props$color === void 0 ? '' : _props$color;
|
|
19
|
+
var state = props;
|
|
20
|
+
useEffect(function () {
|
|
21
|
+
document.body.id = 'body';
|
|
22
|
+
}, []);
|
|
23
|
+
var formatColor = function formatColor() {
|
|
24
|
+
var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
|
25
|
+
var newColor = color;
|
|
26
|
+
if (styleType === 'default') {
|
|
27
|
+
newColor = '#f6f7f9';
|
|
28
|
+
} else if (styleType === 'warning') {
|
|
29
|
+
newColor = '#D92D20';
|
|
30
|
+
}
|
|
31
|
+
return newColor;
|
|
32
|
+
};
|
|
33
|
+
var BadgeProps = _objectSpread(_objectSpread({}, state), {}, {
|
|
34
|
+
className: 'pisell-badge-wrap',
|
|
35
|
+
color: formatColor(color)
|
|
36
|
+
});
|
|
37
|
+
return /*#__PURE__*/React.createElement(OriginalBadge, _extends({}, BadgeProps, {
|
|
38
|
+
style: {
|
|
39
|
+
borderColor: styleType === 'default' ? '#e7e9ed' : state.color,
|
|
40
|
+
color: styleType === 'default' ? '#344054' : '#fff'
|
|
41
|
+
}
|
|
42
|
+
}));
|
|
43
|
+
});
|
|
44
|
+
export default Badge;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ButtonGroupListItemProps } from './../buttonGroupPreview';
|
|
3
|
+
interface ButtonGroupEditProps {
|
|
4
|
+
buttonList: ButtonGroupListItemProps[];
|
|
5
|
+
buttonGroupList: ButtonGroupListItemProps[][];
|
|
6
|
+
}
|
|
7
|
+
declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<ButtonGroupEditProps & React.RefAttributes<any>>>;
|
|
8
|
+
export default _default;
|
|
@@ -0,0 +1,408 @@
|
|
|
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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
3
|
+
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
4
|
+
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
5
|
+
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
6
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
7
|
+
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."); }
|
|
8
|
+
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); }
|
|
9
|
+
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; }
|
|
10
|
+
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; } }
|
|
11
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
12
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
13
|
+
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; }
|
|
14
|
+
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; }
|
|
15
|
+
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; }
|
|
16
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
17
|
+
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); }
|
|
18
|
+
import React, { useState, useEffect, memo, forwardRef } from 'react';
|
|
19
|
+
import { Button, Card, Dropdown, Flex, Form, Input, Modal, Radio } from 'antd';
|
|
20
|
+
import { MoreOutlined, SwapOutlined } from '@ant-design/icons';
|
|
21
|
+
import { DndContext, closestCenter, useSensor, useSensors, PointerSensor } from '@dnd-kit/core';
|
|
22
|
+
import { useSortable, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
|
|
23
|
+
import { uuid } from "../../utils/index";
|
|
24
|
+
var commonStyle = {
|
|
25
|
+
cursor: 'move',
|
|
26
|
+
transition: 'transform 0.3s ease'
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
// 按钮组件
|
|
30
|
+
var DraggableButton = function DraggableButton(_ref) {
|
|
31
|
+
var buttonItem = _ref.buttonItem,
|
|
32
|
+
buttonList = _ref.buttonList,
|
|
33
|
+
onEdit = _ref.onEdit;
|
|
34
|
+
var id = buttonItem.id,
|
|
35
|
+
_buttonItem$isMore = buttonItem.isMore,
|
|
36
|
+
isMore = _buttonItem$isMore === void 0 ? false : _buttonItem$isMore,
|
|
37
|
+
_buttonItem$children = buttonItem.children,
|
|
38
|
+
children = _buttonItem$children === void 0 ? '' : _buttonItem$children,
|
|
39
|
+
_buttonItem$buttonPro = buttonItem.buttonProps,
|
|
40
|
+
buttonProps = _buttonItem$buttonPro === void 0 ? {} : _buttonItem$buttonPro;
|
|
41
|
+
var _useSortable = useSortable({
|
|
42
|
+
id: id
|
|
43
|
+
}),
|
|
44
|
+
listeners = _useSortable.listeners,
|
|
45
|
+
setNodeRef = _useSortable.setNodeRef,
|
|
46
|
+
transform = _useSortable.transform,
|
|
47
|
+
transition = _useSortable.transition,
|
|
48
|
+
isDragging = _useSortable.isDragging;
|
|
49
|
+
var style = transform ? _objectSpread(_objectSpread({}, commonStyle), {}, {
|
|
50
|
+
transform: "translate3d(".concat(transform.x, "px, ").concat(transform.y, "px, 0)"),
|
|
51
|
+
transition: isDragging ? 'unset' : transition
|
|
52
|
+
}) : commonStyle;
|
|
53
|
+
|
|
54
|
+
// 防止拖拽时阻止点击事件
|
|
55
|
+
var handleClick = function handleClick(e) {
|
|
56
|
+
if (isDragging) {
|
|
57
|
+
// 防止拖拽时触发点击事件
|
|
58
|
+
e.stopPropagation();
|
|
59
|
+
e.preventDefault();
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
// 触发编辑按钮
|
|
64
|
+
};
|
|
65
|
+
var menu = {
|
|
66
|
+
items: buttonList.filter(function (item) {
|
|
67
|
+
return !item.isMore;
|
|
68
|
+
}).map(function (item) {
|
|
69
|
+
return {
|
|
70
|
+
key: item.id,
|
|
71
|
+
label: item.children
|
|
72
|
+
};
|
|
73
|
+
}),
|
|
74
|
+
onClick: function onClick(e) {
|
|
75
|
+
var item = buttonList.find(function (item) {
|
|
76
|
+
return item.id === e.key;
|
|
77
|
+
});
|
|
78
|
+
onEdit(item);
|
|
79
|
+
}
|
|
80
|
+
};
|
|
81
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
82
|
+
ref: setNodeRef
|
|
83
|
+
}, listeners, {
|
|
84
|
+
style: style
|
|
85
|
+
}), isMore ? /*#__PURE__*/React.createElement(Dropdown, {
|
|
86
|
+
menu: menu
|
|
87
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
88
|
+
onClick: handleClick
|
|
89
|
+
}, /*#__PURE__*/React.createElement(MoreOutlined, null))) : /*#__PURE__*/React.createElement(Button, _extends({
|
|
90
|
+
style: style
|
|
91
|
+
}, buttonProps, {
|
|
92
|
+
onClick: function onClick() {
|
|
93
|
+
return onEdit(buttonItem);
|
|
94
|
+
}
|
|
95
|
+
}), children));
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
// 主组件
|
|
99
|
+
var ButtonGroupEdit = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
100
|
+
var _useState = useState(props.buttonList),
|
|
101
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
102
|
+
buttonList = _useState2[0],
|
|
103
|
+
setButtonList = _useState2[1]; // 左侧按钮列表
|
|
104
|
+
var _useState3 = useState(props.buttonGroupList),
|
|
105
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
106
|
+
buttonGroupList = _useState4[0],
|
|
107
|
+
setButtonGroupList = _useState4[1]; // 右侧二维按钮组
|
|
108
|
+
|
|
109
|
+
var sensors = useSensors(useSensor(PointerSensor, {
|
|
110
|
+
activationConstraint: {
|
|
111
|
+
distance: 5
|
|
112
|
+
}
|
|
113
|
+
}));
|
|
114
|
+
var _useState5 = useState(false),
|
|
115
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
116
|
+
isModalVisible = _useState6[0],
|
|
117
|
+
setIsModalVisible = _useState6[1]; // Modal 控制显示状态
|
|
118
|
+
var _useState7 = useState(null),
|
|
119
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
120
|
+
currentButton = _useState8[0],
|
|
121
|
+
setCurrentButton = _useState8[1]; // 当前要编辑按钮
|
|
122
|
+
|
|
123
|
+
var _Form$useForm = Form.useForm(),
|
|
124
|
+
_Form$useForm2 = _slicedToArray(_Form$useForm, 1),
|
|
125
|
+
form = _Form$useForm2[0];
|
|
126
|
+
useEffect(function () {
|
|
127
|
+
setButtonList(props.buttonList);
|
|
128
|
+
if (props.buttonList.length > 0) {
|
|
129
|
+
// 如果按钮列表还有按钮 就在最后增加一个更多的按钮选项
|
|
130
|
+
setButtonList([].concat(_toConsumableArray(buttonList), [{
|
|
131
|
+
id: uuid(),
|
|
132
|
+
isMore: true
|
|
133
|
+
}]));
|
|
134
|
+
} else {
|
|
135
|
+
setButtonGroupList(props.buttonGroupList);
|
|
136
|
+
}
|
|
137
|
+
}, [props.buttonList, props.buttonGroupList]);
|
|
138
|
+
|
|
139
|
+
// 增加一行按钮组
|
|
140
|
+
var addRow = function addRow() {
|
|
141
|
+
var newButton = {
|
|
142
|
+
id: uuid(),
|
|
143
|
+
children: "\u6309\u94AE".concat(uuid()),
|
|
144
|
+
// 默认按钮文本
|
|
145
|
+
buttonProps: {
|
|
146
|
+
type: 'default'
|
|
147
|
+
}
|
|
148
|
+
};
|
|
149
|
+
setButtonGroupList(function (prev) {
|
|
150
|
+
return [].concat(_toConsumableArray(prev), [[newButton]]);
|
|
151
|
+
});
|
|
152
|
+
};
|
|
153
|
+
useEffect(function () {
|
|
154
|
+
if (currentButton) {
|
|
155
|
+
var _currentButton$button;
|
|
156
|
+
form.setFieldsValue({
|
|
157
|
+
children: currentButton.children,
|
|
158
|
+
type: (_currentButton$button = currentButton.buttonProps) === null || _currentButton$button === void 0 ? void 0 : _currentButton$button.type
|
|
159
|
+
}); // 动态设置按钮名称
|
|
160
|
+
}
|
|
161
|
+
}, [currentButton, form]); // 每次 currentButton 改变时,更新表单值
|
|
162
|
+
|
|
163
|
+
// 打开编辑Modal
|
|
164
|
+
var handleEditButton = function handleEditButton(button) {
|
|
165
|
+
setCurrentButton(button); // 设置当前编辑按钮
|
|
166
|
+
setIsModalVisible(true); // 显示 Modal
|
|
167
|
+
};
|
|
168
|
+
|
|
169
|
+
// 关闭 Modal
|
|
170
|
+
var handleCancel = function handleCancel() {
|
|
171
|
+
setIsModalVisible(false);
|
|
172
|
+
setCurrentButton(null); // 清空当前编辑的按钮
|
|
173
|
+
};
|
|
174
|
+
|
|
175
|
+
// 保存按钮修改
|
|
176
|
+
var handleSave = function handleSave(values) {
|
|
177
|
+
if (!currentButton) return;
|
|
178
|
+
var updatedButton = _objectSpread(_objectSpread({}, currentButton), {}, {
|
|
179
|
+
children: values.children,
|
|
180
|
+
buttonProps: values
|
|
181
|
+
});
|
|
182
|
+
// 更新 buttonList
|
|
183
|
+
setButtonList(function (prevList) {
|
|
184
|
+
return prevList.map(function (item) {
|
|
185
|
+
return item.id === currentButton.id ? _objectSpread(_objectSpread({}, item), updatedButton) : item;
|
|
186
|
+
});
|
|
187
|
+
});
|
|
188
|
+
|
|
189
|
+
// 更新 buttonGroupList
|
|
190
|
+
setButtonGroupList(function (prevGroupList) {
|
|
191
|
+
return prevGroupList.map(function (row) {
|
|
192
|
+
return row.map(function (item) {
|
|
193
|
+
return item.id === currentButton.id ? _objectSpread(_objectSpread({}, item), updatedButton) : item;
|
|
194
|
+
});
|
|
195
|
+
});
|
|
196
|
+
});
|
|
197
|
+
handleCancel(); // 关闭 Modal
|
|
198
|
+
};
|
|
199
|
+
|
|
200
|
+
// 拖拽结束的处理函数
|
|
201
|
+
var onDragEnd = function onDragEnd(event) {
|
|
202
|
+
var _active$data, _over$data;
|
|
203
|
+
var active = event.active,
|
|
204
|
+
over = event.over;
|
|
205
|
+
if (!over) return;
|
|
206
|
+
var activeId = active.id;
|
|
207
|
+
var overId = over.id;
|
|
208
|
+
var activeContainerId = '';
|
|
209
|
+
var overContainerId = '';
|
|
210
|
+
if (active !== null && active !== void 0 && (_active$data = active.data) !== null && _active$data !== void 0 && _active$data.current) {
|
|
211
|
+
activeContainerId = active.data.current.sortable.containerId;
|
|
212
|
+
}
|
|
213
|
+
if (over !== null && over !== void 0 && (_over$data = over.data) !== null && _over$data !== void 0 && _over$data.current) {
|
|
214
|
+
overContainerId = over.data.current.sortable.containerId;
|
|
215
|
+
}
|
|
216
|
+
try {
|
|
217
|
+
// 从 buttonList 拖拽到 buttonGroupList
|
|
218
|
+
if (activeContainerId === 'list1' && overContainerId === 'list2') {
|
|
219
|
+
var activeIndex = buttonList.findIndex(function (item) {
|
|
220
|
+
return item.id === activeId;
|
|
221
|
+
});
|
|
222
|
+
if (activeIndex === -1) return;
|
|
223
|
+
var movedItem = _objectSpread({}, buttonList[activeIndex]);
|
|
224
|
+
// 找到目标位置
|
|
225
|
+
var overRowIndex = buttonGroupList.findIndex(function (row) {
|
|
226
|
+
return row.some(function (item) {
|
|
227
|
+
return item.id === overId;
|
|
228
|
+
});
|
|
229
|
+
});
|
|
230
|
+
if (overRowIndex === -1) return;
|
|
231
|
+
var updatedGroupList = _toConsumableArray(buttonGroupList);
|
|
232
|
+
updatedGroupList[overRowIndex].push(movedItem); // 将按钮添加到目标行
|
|
233
|
+
// 更新状态
|
|
234
|
+
var updatedButtonList = buttonList.filter(function (item) {
|
|
235
|
+
return item.id !== activeId;
|
|
236
|
+
}); // 删除拖拽的元素
|
|
237
|
+
setButtonGroupList(updatedGroupList);
|
|
238
|
+
setButtonList(updatedButtonList);
|
|
239
|
+
}
|
|
240
|
+
// 从 buttonGroupList 拖拽到 buttonList
|
|
241
|
+
if (activeContainerId === 'list2' && overContainerId === 'list1') {
|
|
242
|
+
var _buttonGroupList$_ove;
|
|
243
|
+
var _overRowIndex = buttonGroupList.findIndex(function (row) {
|
|
244
|
+
return row.some(function (item) {
|
|
245
|
+
return item.id === overId;
|
|
246
|
+
});
|
|
247
|
+
});
|
|
248
|
+
if (_overRowIndex === -1) return;
|
|
249
|
+
var overColIndex = (_buttonGroupList$_ove = buttonGroupList[_overRowIndex]) === null || _buttonGroupList$_ove === void 0 ? void 0 : _buttonGroupList$_ove.findIndex(function (item) {
|
|
250
|
+
return item.id === overId;
|
|
251
|
+
});
|
|
252
|
+
if (overColIndex === -1) return;
|
|
253
|
+
var _buttonGroupList$_ove2 = buttonGroupList[_overRowIndex].splice(overColIndex, 1),
|
|
254
|
+
_buttonGroupList$_ove3 = _slicedToArray(_buttonGroupList$_ove2, 1),
|
|
255
|
+
_movedItem = _buttonGroupList$_ove3[0];
|
|
256
|
+
setButtonGroupList(_toConsumableArray(buttonGroupList));
|
|
257
|
+
setButtonList(function (prev) {
|
|
258
|
+
return [].concat(_toConsumableArray(prev), [_movedItem]);
|
|
259
|
+
});
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
// 同一个列表内的拖拽排序:在 buttonList 内拖拽排序
|
|
263
|
+
if (activeContainerId === 'list1' && overContainerId === 'list1') {
|
|
264
|
+
var _activeIndex = buttonList.findIndex(function (item) {
|
|
265
|
+
return item.id === activeId;
|
|
266
|
+
});
|
|
267
|
+
var overIndex = buttonList.findIndex(function (item) {
|
|
268
|
+
return item.id === overId;
|
|
269
|
+
});
|
|
270
|
+
if (_activeIndex === -1 || overIndex === -1) return;
|
|
271
|
+
var updatedList = _toConsumableArray(buttonList);
|
|
272
|
+
var _updatedList$splice = updatedList.splice(_activeIndex, 1),
|
|
273
|
+
_updatedList$splice2 = _slicedToArray(_updatedList$splice, 1),
|
|
274
|
+
_movedItem2 = _updatedList$splice2[0];
|
|
275
|
+
updatedList.splice(overIndex, 0, _movedItem2);
|
|
276
|
+
setButtonList(updatedList);
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
// 同一个列表内的拖拽排序:在 buttonGroupList 内拖拽排序
|
|
280
|
+
if (activeContainerId === 'list2' && overContainerId === 'list2') {
|
|
281
|
+
var _buttonGroupList$acti, _buttonGroupList$_ove4;
|
|
282
|
+
var activeRowIndex = buttonGroupList.findIndex(function (row) {
|
|
283
|
+
return row.some(function (item) {
|
|
284
|
+
return item.id === activeId;
|
|
285
|
+
});
|
|
286
|
+
});
|
|
287
|
+
var activeColIndex = (_buttonGroupList$acti = buttonGroupList[activeRowIndex]) === null || _buttonGroupList$acti === void 0 ? void 0 : _buttonGroupList$acti.findIndex(function (item) {
|
|
288
|
+
return item.id === activeId;
|
|
289
|
+
});
|
|
290
|
+
var _overRowIndex2 = buttonGroupList.findIndex(function (row) {
|
|
291
|
+
return row.some(function (item) {
|
|
292
|
+
return item.id === overId;
|
|
293
|
+
});
|
|
294
|
+
});
|
|
295
|
+
var _overColIndex = (_buttonGroupList$_ove4 = buttonGroupList[_overRowIndex2]) === null || _buttonGroupList$_ove4 === void 0 ? void 0 : _buttonGroupList$_ove4.findIndex(function (item) {
|
|
296
|
+
return item.id === overId;
|
|
297
|
+
});
|
|
298
|
+
if (activeRowIndex === -1 || _overRowIndex2 === -1 || activeColIndex === -1 || _overColIndex === -1) return;
|
|
299
|
+
var _updatedGroupList = _toConsumableArray(buttonGroupList);
|
|
300
|
+
var _updatedGroupList$act = _updatedGroupList[activeRowIndex].splice(activeColIndex, 1),
|
|
301
|
+
_updatedGroupList$act2 = _slicedToArray(_updatedGroupList$act, 1),
|
|
302
|
+
_movedItem3 = _updatedGroupList$act2[0];
|
|
303
|
+
_updatedGroupList[_overRowIndex2].splice(_overColIndex, 0, _movedItem3);
|
|
304
|
+
setButtonGroupList(_updatedGroupList);
|
|
305
|
+
}
|
|
306
|
+
} catch (error) {
|
|
307
|
+
console.error('拖拽结束时出错:', error);
|
|
308
|
+
}
|
|
309
|
+
};
|
|
310
|
+
return /*#__PURE__*/React.createElement(Flex, {
|
|
311
|
+
wrap: true,
|
|
312
|
+
justify: "space-between",
|
|
313
|
+
align: "center",
|
|
314
|
+
gap: "middle"
|
|
315
|
+
}, /*#__PURE__*/React.createElement(DndContext, {
|
|
316
|
+
onDragEnd: onDragEnd,
|
|
317
|
+
sensors: sensors,
|
|
318
|
+
collisionDetection: closestCenter
|
|
319
|
+
}, /*#__PURE__*/React.createElement(Card, {
|
|
320
|
+
title: "\u6309\u94AE\u5217\u8868"
|
|
321
|
+
}, /*#__PURE__*/React.createElement(SortableContext, {
|
|
322
|
+
id: "list1",
|
|
323
|
+
items: buttonList.map(function (item) {
|
|
324
|
+
return item.id;
|
|
325
|
+
}),
|
|
326
|
+
strategy: verticalListSortingStrategy
|
|
327
|
+
}, /*#__PURE__*/React.createElement(Flex, {
|
|
328
|
+
gap: "middle",
|
|
329
|
+
vertical: true
|
|
330
|
+
}, buttonList.map(function (item) {
|
|
331
|
+
return /*#__PURE__*/React.createElement(DraggableButton, {
|
|
332
|
+
key: item.id,
|
|
333
|
+
buttonItem: item,
|
|
334
|
+
buttonList: buttonList,
|
|
335
|
+
onEdit: handleEditButton
|
|
336
|
+
});
|
|
337
|
+
})))), /*#__PURE__*/React.createElement(Button, {
|
|
338
|
+
type: "primary",
|
|
339
|
+
icon: /*#__PURE__*/React.createElement(SwapOutlined, null)
|
|
340
|
+
}), /*#__PURE__*/React.createElement(Card, {
|
|
341
|
+
title: "\u8C03\u6574\u5217\u8868",
|
|
342
|
+
style: {
|
|
343
|
+
flex: 1
|
|
344
|
+
}
|
|
345
|
+
}, /*#__PURE__*/React.createElement(SortableContext, {
|
|
346
|
+
id: "list2",
|
|
347
|
+
items: buttonGroupList.flat().map(function (item) {
|
|
348
|
+
return item.id;
|
|
349
|
+
}),
|
|
350
|
+
strategy: verticalListSortingStrategy
|
|
351
|
+
}, /*#__PURE__*/React.createElement(Flex, {
|
|
352
|
+
gap: "middle",
|
|
353
|
+
vertical: true
|
|
354
|
+
}, buttonGroupList.map(function (subItem, rowIndex) {
|
|
355
|
+
return /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(Flex, {
|
|
356
|
+
key: rowIndex,
|
|
357
|
+
gap: "middle"
|
|
358
|
+
}, subItem.map(function (item) {
|
|
359
|
+
return /*#__PURE__*/React.createElement(DraggableButton, {
|
|
360
|
+
key: item.id,
|
|
361
|
+
buttonItem: item,
|
|
362
|
+
buttonList: buttonList,
|
|
363
|
+
onEdit: handleEditButton
|
|
364
|
+
});
|
|
365
|
+
})));
|
|
366
|
+
}))))), /*#__PURE__*/React.createElement(Button, {
|
|
367
|
+
type: "primary",
|
|
368
|
+
onClick: addRow
|
|
369
|
+
}, "\u65B0\u589E\u4E00\u884C"), /*#__PURE__*/React.createElement(Modal, {
|
|
370
|
+
title: "\u7F16\u8F91\u6309\u94AE\u5C5E\u6027",
|
|
371
|
+
open: isModalVisible,
|
|
372
|
+
onCancel: handleCancel,
|
|
373
|
+
footer: null
|
|
374
|
+
}, currentButton && /*#__PURE__*/React.createElement(Form, {
|
|
375
|
+
form: form,
|
|
376
|
+
onFinish: handleSave
|
|
377
|
+
}, /*#__PURE__*/React.createElement(Form.Item, {
|
|
378
|
+
name: "children",
|
|
379
|
+
label: "\u6309\u94AE\u540D\u79F0",
|
|
380
|
+
rules: [{
|
|
381
|
+
required: true,
|
|
382
|
+
message: '请输入按钮名称'
|
|
383
|
+
}]
|
|
384
|
+
}, /*#__PURE__*/React.createElement(Input, {
|
|
385
|
+
placeholder: "\u8BF7\u8F93\u5165\u6309\u94AE\u540D\u79F0"
|
|
386
|
+
})), /*#__PURE__*/React.createElement(Form.Item, {
|
|
387
|
+
name: "type",
|
|
388
|
+
label: "\u6309\u94AE\u7C7B\u578B",
|
|
389
|
+
rules: [{
|
|
390
|
+
required: true,
|
|
391
|
+
message: '请选择按钮类型'
|
|
392
|
+
}]
|
|
393
|
+
}, /*#__PURE__*/React.createElement(Radio.Group, null, /*#__PURE__*/React.createElement(Radio.Button, {
|
|
394
|
+
value: "primary"
|
|
395
|
+
}, "primary"), /*#__PURE__*/React.createElement(Radio.Button, {
|
|
396
|
+
value: "dashed"
|
|
397
|
+
}, "dashed"), /*#__PURE__*/React.createElement(Radio.Button, {
|
|
398
|
+
value: "link"
|
|
399
|
+
}, "link"), /*#__PURE__*/React.createElement(Radio.Button, {
|
|
400
|
+
value: "text"
|
|
401
|
+
}, "text"), /*#__PURE__*/React.createElement(Radio.Button, {
|
|
402
|
+
value: "default"
|
|
403
|
+
}, "default"))), /*#__PURE__*/React.createElement(Form.Item, null, /*#__PURE__*/React.createElement(Button, {
|
|
404
|
+
type: "primary",
|
|
405
|
+
htmlType: "submit"
|
|
406
|
+
}, "\u4FDD\u5B58")))));
|
|
407
|
+
});
|
|
408
|
+
export default /*#__PURE__*/memo(ButtonGroupEdit);
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { MenuProps, ButtonProps } from 'antd';
|
|
3
|
+
export interface ButtonGroupListItemProps {
|
|
4
|
+
id?: string;
|
|
5
|
+
isMore?: boolean;
|
|
6
|
+
menuData?: MenuProps['items'];
|
|
7
|
+
buttonProps?: ButtonProps;
|
|
8
|
+
}
|
|
9
|
+
interface ButtonConfigProps {
|
|
10
|
+
[id: string]: ButtonGroupListItemProps;
|
|
11
|
+
}
|
|
12
|
+
export declare type ButtonGroupListProps = ButtonGroupListItemProps[][];
|
|
13
|
+
interface ButtonGroupPreviewProps {
|
|
14
|
+
buttonConfig?: ButtonConfigProps;
|
|
15
|
+
buttonGroupList?: ButtonGroupListProps;
|
|
16
|
+
updateButtonProps?: ButtonGroupListItemProps;
|
|
17
|
+
}
|
|
18
|
+
declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<ButtonGroupPreviewProps & React.RefAttributes<any>>>;
|
|
19
|
+
export default _default;
|
|
@@ -0,0 +1,74 @@
|
|
|
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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
3
|
+
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; }
|
|
4
|
+
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; }
|
|
5
|
+
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; }
|
|
6
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
7
|
+
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); }
|
|
8
|
+
import React, { forwardRef, memo, useMemo } from 'react';
|
|
9
|
+
import Button from "./../button";
|
|
10
|
+
import { Space, Dropdown, Flex } from 'antd';
|
|
11
|
+
import { MoreOutlined } from '@ant-design/icons';
|
|
12
|
+
|
|
13
|
+
// 二维数组数据源
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
*
|
|
17
|
+
* @param param0 { buttonConfig, buttonGroupList }
|
|
18
|
+
* @returns 整合按钮配置 返回最新的组件数据
|
|
19
|
+
*/
|
|
20
|
+
var updateSourceData = function updateSourceData(_ref) {
|
|
21
|
+
var buttonConfig = _ref.buttonConfig,
|
|
22
|
+
buttonGroupList = _ref.buttonGroupList;
|
|
23
|
+
if (Object.keys(buttonConfig).length !== 0) {
|
|
24
|
+
return buttonGroupList.map(function (subArray) {
|
|
25
|
+
return subArray.map(function (item) {
|
|
26
|
+
if (buttonConfig.hasOwnProperty(item.id)) {
|
|
27
|
+
return buttonConfig[item.id]; // 如果存在,则替换为新的对象
|
|
28
|
+
}
|
|
29
|
+
return item; // 保持其他对象不变
|
|
30
|
+
});
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
return buttonGroupList;
|
|
34
|
+
};
|
|
35
|
+
var ButtonGroupPreview = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
36
|
+
var _props$buttonConfig = props.buttonConfig,
|
|
37
|
+
buttonConfig = _props$buttonConfig === void 0 ? {} : _props$buttonConfig,
|
|
38
|
+
_props$buttonGroupLis = props.buttonGroupList,
|
|
39
|
+
buttonGroupList = _props$buttonGroupLis === void 0 ? [] : _props$buttonGroupLis;
|
|
40
|
+
var sourceDatas = useMemo(function () {
|
|
41
|
+
return updateSourceData({
|
|
42
|
+
buttonConfig: buttonConfig,
|
|
43
|
+
buttonGroupList: buttonGroupList
|
|
44
|
+
});
|
|
45
|
+
}, [buttonGroupList, buttonConfig]);
|
|
46
|
+
return /*#__PURE__*/React.createElement(Flex, {
|
|
47
|
+
wrap: true,
|
|
48
|
+
vertical: true,
|
|
49
|
+
style: {
|
|
50
|
+
marginBottom: 10
|
|
51
|
+
}
|
|
52
|
+
}, sourceDatas.map(function (item, index) {
|
|
53
|
+
return /*#__PURE__*/React.createElement(Space, {
|
|
54
|
+
key: index
|
|
55
|
+
}, item.map(function (items, index) {
|
|
56
|
+
var _items$isMore = items.isMore,
|
|
57
|
+
isMore = _items$isMore === void 0 ? false : _items$isMore,
|
|
58
|
+
_items$id = items.id,
|
|
59
|
+
id = _items$id === void 0 ? '' : _items$id,
|
|
60
|
+
_items$menuData = items.menuData,
|
|
61
|
+
menuData = _items$menuData === void 0 ? [] : _items$menuData,
|
|
62
|
+
buttonProps = items.buttonProps;
|
|
63
|
+
var btnProps = _objectSpread(_objectSpread({}, buttonProps), props.updateButtonProps);
|
|
64
|
+
return isMore ? /*#__PURE__*/React.createElement(Dropdown, {
|
|
65
|
+
menu: {
|
|
66
|
+
items: menuData
|
|
67
|
+
}
|
|
68
|
+
}, /*#__PURE__*/React.createElement(Button, null, /*#__PURE__*/React.createElement(MoreOutlined, null))) : /*#__PURE__*/React.createElement(Button, _extends({
|
|
69
|
+
key: id
|
|
70
|
+
}, btnProps));
|
|
71
|
+
}));
|
|
72
|
+
}));
|
|
73
|
+
});
|
|
74
|
+
export default /*#__PURE__*/memo(ButtonGroupPreview);
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './index.less';
|
|
3
|
+
interface PisellStatisticProps {
|
|
4
|
+
title: string;
|
|
5
|
+
number: string | number;
|
|
6
|
+
hint?: React.ReactNode;
|
|
7
|
+
tags?: React.ReactNode;
|
|
8
|
+
showCurrencySymbol?: boolean;
|
|
9
|
+
style?: any;
|
|
10
|
+
}
|
|
11
|
+
declare const CardMetricItem: (props: PisellStatisticProps) => JSX.Element;
|
|
12
|
+
export default CardMetricItem;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import React, { useEffect, useMemo } from 'react';
|
|
2
|
+
import { Statistic } from 'antd';
|
|
3
|
+
import classNames from 'classnames';
|
|
4
|
+
import { formatAmountWithOptions } from '@pisell/utils';
|
|
5
|
+
import { useResponsive } from "../../hooks";
|
|
6
|
+
import usePisellConfig from "./../pisell-config-provider/hooks/usePisellConfig";
|
|
7
|
+
import "./index.less";
|
|
8
|
+
var CardMetricItem = function CardMetricItem(props) {
|
|
9
|
+
useEffect(function () {
|
|
10
|
+
document.body.id = 'body';
|
|
11
|
+
}, []);
|
|
12
|
+
var _props$title = props.title,
|
|
13
|
+
title = _props$title === void 0 ? '' : _props$title,
|
|
14
|
+
number = props.number,
|
|
15
|
+
hint = props.hint,
|
|
16
|
+
tags = props.tags,
|
|
17
|
+
_props$showCurrencySy = props.showCurrencySymbol,
|
|
18
|
+
showCurrencySymbol = _props$showCurrencySy === void 0 ? true : _props$showCurrencySy,
|
|
19
|
+
style = props.style;
|
|
20
|
+
var config = usePisellConfig();
|
|
21
|
+
var amount = useMemo(function () {
|
|
22
|
+
return formatAmountWithOptions(number, (config === null || config === void 0 ? void 0 : config.symbol) || '', {
|
|
23
|
+
showCurrencySymbol: showCurrencySymbol
|
|
24
|
+
});
|
|
25
|
+
}, [number, showCurrencySymbol]);
|
|
26
|
+
var responsive = useResponsive();
|
|
27
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
28
|
+
className: classNames('pisell-statistic-wrap', responsive === 'pc' ? 'pc' : 'phone'),
|
|
29
|
+
style: style
|
|
30
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
31
|
+
className: classNames('pisell-statistic-hint')
|
|
32
|
+
}, hint), /*#__PURE__*/React.createElement("div", {
|
|
33
|
+
className: classNames('pisell-statistic-tags')
|
|
34
|
+
}, tags), /*#__PURE__*/React.createElement(Statistic, {
|
|
35
|
+
title: title,
|
|
36
|
+
value: amount
|
|
37
|
+
}));
|
|
38
|
+
};
|
|
39
|
+
export default CardMetricItem;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
.pisell-statistic-wrap {
|
|
2
|
+
position: relative;
|
|
3
|
+
padding: 24px;
|
|
4
|
+
border: 1px solid var(--Gray-200, #eaecf0);
|
|
5
|
+
border-radius: 12px;
|
|
6
|
+
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
|
|
7
|
+
|
|
8
|
+
&.pc {
|
|
9
|
+
width: fit-content;
|
|
10
|
+
min-width: 300px;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
&.phone {
|
|
14
|
+
width: 100%;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.pisell-statistic-hint {
|
|
18
|
+
position: absolute;
|
|
19
|
+
right: 20px;
|
|
20
|
+
top: 20px;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.pisell-statistic-tags {
|
|
24
|
+
position: absolute;
|
|
25
|
+
right: 24px;
|
|
26
|
+
bottom: 30px;
|
|
27
|
+
}
|
|
28
|
+
.pisell-lowcode-statistic-content-value {
|
|
29
|
+
color: var(--Gray-900, #101828);
|
|
30
|
+
|
|
31
|
+
/* Display md/Semibold */
|
|
32
|
+
font-family: Inter;
|
|
33
|
+
font-size: 36px;
|
|
34
|
+
font-style: normal;
|
|
35
|
+
font-weight: 600;
|
|
36
|
+
line-height: 44px; /* 122.222% */
|
|
37
|
+
letter-spacing: -0.72px;
|
|
38
|
+
}
|
|
39
|
+
}
|