@pisell/materials 3.0.48 → 3.0.49-gray

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.
@@ -0,0 +1,17 @@
1
+ import React from 'react';
2
+ import './index.less';
3
+ export interface PisellFloatingPanelProps {
4
+ fullHeight?: string | number;
5
+ retractHeight?: string | number;
6
+ width?: string | number;
7
+ open?: boolean;
8
+ onOpenChange?: (open: boolean) => void;
9
+ defaultOpen?: boolean;
10
+ isFloat?: boolean;
11
+ children?: React.ReactNode;
12
+ retractSlot?: React.ReactNode;
13
+ style?: React.CSSProperties;
14
+ retractIconStyle?: React.CSSProperties;
15
+ }
16
+ declare const PisellFloatingPanel: (props: PisellFloatingPanelProps) => React.JSX.Element;
17
+ export default PisellFloatingPanel;
@@ -0,0 +1,89 @@
1
+ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
2
+ 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; }
3
+ 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; }
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(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
6
+ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
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(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
12
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
13
+ import React, { useEffect, useMemo, useState } from 'react';
14
+ import classNames from 'classnames';
15
+ import { useUpdateEffect } from "ahooks";
16
+ import Iconfont from "../iconfont";
17
+ import "./index.less";
18
+ var PisellFloatingPanel = function PisellFloatingPanel(props) {
19
+ var _props$defaultOpen = props.defaultOpen,
20
+ defaultOpen = _props$defaultOpen === void 0 ? false : _props$defaultOpen,
21
+ onOpenChange = props.onOpenChange,
22
+ isFloat = props.isFloat,
23
+ open = props.open,
24
+ width = props.width,
25
+ children = props.children,
26
+ retractHeight = props.retractHeight,
27
+ fullHeight = props.fullHeight,
28
+ retractSlot = props.retractSlot,
29
+ propsStyle = props.style,
30
+ retractIconStyle = props.retractIconStyle;
31
+ var _useState = useState(defaultOpen),
32
+ _useState2 = _slicedToArray(_useState, 2),
33
+ isOpen = _useState2[0],
34
+ setIsOpen = _useState2[1];
35
+ useUpdateEffect(function () {
36
+ if (open !== undefined) {
37
+ setIsOpen(open);
38
+ }
39
+ }, [open]);
40
+ useEffect(function () {
41
+ document.body.id = 'body';
42
+ }, []);
43
+
44
+ // 切换面板状态
45
+ var togglePanel = function togglePanel() {
46
+ var newOpenState = !isOpen;
47
+ setIsOpen(newOpenState);
48
+ if (onOpenChange) {
49
+ onOpenChange(newOpenState);
50
+ }
51
+ };
52
+ var style = useMemo(function () {
53
+ var height = fullHeight;
54
+ var transform = isOpen ? 'translateY(0)' : "translateY(calc(100% - ".concat(retractHeight, "))");
55
+ if (!isFloat) {
56
+ height = isOpen ? fullHeight : retractHeight;
57
+ transform = 'none';
58
+ }
59
+ return _objectSpread(_objectSpread({}, propsStyle), {}, {
60
+ height: height,
61
+ width: width,
62
+ position: isFloat ? 'fixed' : 'relative',
63
+ bottom: 0,
64
+ transition: '0.3s',
65
+ transform: transform
66
+ });
67
+ }, [fullHeight, isFloat, retractHeight, isOpen, width, propsStyle]);
68
+ var iconType = useMemo(function () {
69
+ if (isOpen) {
70
+ return isFloat ? 'pisell2-chevron-down-double' : 'pisell2-chevron-up-double';
71
+ }
72
+ return isFloat ? 'pisell2-chevron-up-double' : 'pisell2-chevron-down-double';
73
+ }, [isOpen, isFloat]);
74
+ return /*#__PURE__*/React.createElement("div", {
75
+ className: classNames('pisell-lowcode-floating-panel-wrap', _defineProperty({}, 'pisell-lowcode-floating-panel-wrap-floating', isFloat)),
76
+ style: style
77
+ }, /*#__PURE__*/React.createElement("div", {
78
+ className: "pisell-lowcode-floating-panel-header",
79
+ onClick: togglePanel
80
+ }, /*#__PURE__*/React.createElement("div", {
81
+ className: "pisell-lowcode-floating-panel-handle"
82
+ }, /*#__PURE__*/React.createElement(Iconfont, {
83
+ type: iconType,
84
+ style: retractIconStyle
85
+ }))), !isOpen && retractSlot, /*#__PURE__*/React.createElement("div", {
86
+ className: "pisell-lowcode-floating-panel-content"
87
+ }, children));
88
+ };
89
+ export default PisellFloatingPanel;
@@ -0,0 +1,30 @@
1
+ .pisell-lowcode-floating-panel-wrap {
2
+ background-color: #fff;
3
+ border-top-left-radius: 16px;
4
+ border-top-right-radius: 16px;
5
+ box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
6
+ overflow: hidden;
7
+ display: flex;
8
+ flex-direction: column;
9
+ }
10
+
11
+ .pisell-lowcode-floating-panel-wrap.pisell-lowcode-floating-panel-wrap-floating {
12
+ position: fixed;
13
+ bottom: 0;
14
+ left: 0;
15
+ }
16
+
17
+ .pisell-lowcode-floating-panel-content {
18
+ overflow-y: auto;
19
+ height: 100%;
20
+ }
21
+
22
+ .pisell-lowcode-floating-panel-header {
23
+ padding: 10px;
24
+ width: 100%;
25
+ height: 32px;
26
+ display: flex;
27
+ align-items: center;
28
+ justify-content: center;
29
+ cursor: pointer;
30
+ }
@@ -0,0 +1,18 @@
1
+ import React from 'react';
2
+ import './index.less';
3
+ export interface PisellStatisticListProps extends React.HTMLAttributes<HTMLDivElement> {
4
+ backgroundColors?: string[];
5
+ labelColor?: string;
6
+ valueColor?: string;
7
+ data: {
8
+ label: string;
9
+ value: string;
10
+ tip?: string;
11
+ children?: {
12
+ label: string;
13
+ value: string;
14
+ }[];
15
+ }[];
16
+ }
17
+ declare const PisellStatisticList: (props: PisellStatisticListProps) => React.JSX.Element;
18
+ export default PisellStatisticList;
@@ -0,0 +1,66 @@
1
+ var _excluded = ["backgroundColors", "labelColor", "valueColor", "data"];
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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
4
+ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
5
+ import React from 'react';
6
+ import { Col, Row } from 'antd';
7
+ import PisellTooltip from "../pisellTooltip";
8
+ import Iconfont from "../iconfont";
9
+ import "./index.less";
10
+ var defaultColors = ['rgba(224, 79, 22, 0.20)', 'rgba(202, 133, 4, 0.20)', 'rgba(127, 86, 217, 0.22)', 'rgba(7, 148, 85, 0.20)', 'rgba(21, 112, 239, 0.23)'];
11
+ var PisellStatisticList = function PisellStatisticList(props) {
12
+ var _props$backgroundColo = props.backgroundColors,
13
+ backgroundColors = _props$backgroundColo === void 0 ? defaultColors : _props$backgroundColo,
14
+ _props$labelColor = props.labelColor,
15
+ labelColor = _props$labelColor === void 0 ? '#fff' : _props$labelColor,
16
+ _props$valueColor = props.valueColor,
17
+ valueColor = _props$valueColor === void 0 ? '#fff' : _props$valueColor,
18
+ data = props.data,
19
+ others = _objectWithoutProperties(props, _excluded);
20
+ return /*#__PURE__*/React.createElement("div", _extends({
21
+ className: "pisell-lowcode-statistic-list-wrap"
22
+ }, others), data.map(function (item, index) {
23
+ var _item$children;
24
+ return /*#__PURE__*/React.createElement("div", {
25
+ className: "pisell-lowcode-statistic-list-item",
26
+ style: {
27
+ background: backgroundColors[index % backgroundColors.length]
28
+ }
29
+ }, /*#__PURE__*/React.createElement("div", {
30
+ className: "pisell-lowcode-statistic-list-item-label",
31
+ style: {
32
+ color: labelColor
33
+ }
34
+ }, item.label, item.tip && /*#__PURE__*/React.createElement(PisellTooltip, {
35
+ title: item.tip
36
+ }, /*#__PURE__*/React.createElement(Iconfont, {
37
+ style: {
38
+ color: labelColor
39
+ },
40
+ type: "pisell2-help-circle",
41
+ className: "pisell-lowcode-statistic-list-item-label-tip-icon"
42
+ }))), /*#__PURE__*/React.createElement("div", {
43
+ className: "pisell-lowcode-statistic-list-item-value",
44
+ style: {
45
+ color: valueColor
46
+ }
47
+ }, item.value), !!((_item$children = item.children) !== null && _item$children !== void 0 && _item$children.length) && /*#__PURE__*/React.createElement(Row, {
48
+ className: "pisell-lowcode-statistic-list-item-children-wrap"
49
+ }, item.children.map(function (child) {
50
+ return /*#__PURE__*/React.createElement(Col, {
51
+ span: 12
52
+ }, /*#__PURE__*/React.createElement("span", {
53
+ className: "pisell-lowcode-statistic-list-item-children-label",
54
+ style: {
55
+ color: labelColor
56
+ }
57
+ }, child.label), /*#__PURE__*/React.createElement("span", {
58
+ className: "pisell-lowcode-statistic-list-item-children-value",
59
+ style: {
60
+ color: valueColor
61
+ }
62
+ }, child.value));
63
+ })));
64
+ }));
65
+ };
66
+ export default PisellStatisticList;
@@ -0,0 +1,43 @@
1
+ .pisell-lowcode-statistic-list-wrap {
2
+ display: flex;
3
+ flex-direction: column;
4
+ gap: 16px;
5
+ .pisell-lowcode-statistic-list-item {
6
+ padding: 16px;
7
+ border-radius: 8px;
8
+ border: 1px solid var(--Gray-600, #475467);
9
+ .pisell-lowcode-statistic-list-item-label {
10
+ color: var(--Base-White, #fff);
11
+ font-size: 14px;
12
+ font-weight: 600;
13
+ line-height: 20px; /* 142.857% */
14
+ display: flex;
15
+ gap: 10px;
16
+ align-items: center;
17
+ .pisell-lowcode-statistic-list-item-label-tip-icon {
18
+ font-size: 20px;
19
+ }
20
+ }
21
+ .pisell-lowcode-statistic-list-item-value {
22
+ color: var(--Base-White, #fff);
23
+ font-size: 18px;
24
+ font-weight: 700;
25
+ line-height: 28px; /* 155.556% */
26
+ }
27
+ .pisell-lowcode-statistic-list-item-children-wrap {
28
+ .pisell-lowcode-statistic-list-item-children-label {
29
+ color: var(--Base-White, #fff);
30
+ font-size: 12px;
31
+ font-weight: 400;
32
+ line-height: 18px; /* 150% */
33
+ margin-right: 4px;
34
+ }
35
+ .pisell-lowcode-statistic-list-item-children-value {
36
+ color: var(--Base-White, #fff);
37
+ font-size: 18px;
38
+ font-weight: 700;
39
+ line-height: 28px; /* 155.556% */
40
+ }
41
+ }
42
+ }
43
+ }
package/es/index.d.ts CHANGED
@@ -102,3 +102,5 @@ export { default as PisellCard } from './components/pisellCard';
102
102
  export { default as PisellInformationEntry } from './components/pisellInformationEntry';
103
103
  export { default as usePisellConfig } from './components/pisell-config-provider/hooks/usePisellConfig';
104
104
  export { globalConfig, default as PisellContext } from './components/pisell-config-provider/context';
105
+ export { default as PisellStatisticList } from './components/pisellStatisticList';
106
+ export { default as PisellFloatingPanel } from './components/pisellFloatingPanel';
package/es/index.js CHANGED
@@ -123,4 +123,6 @@ export { default as PisellAlert } from "./components/pisellAlert";
123
123
  export { default as PisellCard } from "./components/pisellCard";
124
124
  export { default as PisellInformationEntry } from "./components/pisellInformationEntry";
125
125
  export { default as usePisellConfig } from "./components/pisell-config-provider/hooks/usePisellConfig";
126
- export { globalConfig, default as PisellContext } from "./components/pisell-config-provider/context";
126
+ export { globalConfig, default as PisellContext } from "./components/pisell-config-provider/context";
127
+ export { default as PisellStatisticList } from "./components/pisellStatisticList";
128
+ export { default as PisellFloatingPanel } from "./components/pisellFloatingPanel";
@@ -0,0 +1,17 @@
1
+ import React from 'react';
2
+ import './index.less';
3
+ export interface PisellFloatingPanelProps {
4
+ fullHeight?: string | number;
5
+ retractHeight?: string | number;
6
+ width?: string | number;
7
+ open?: boolean;
8
+ onOpenChange?: (open: boolean) => void;
9
+ defaultOpen?: boolean;
10
+ isFloat?: boolean;
11
+ children?: React.ReactNode;
12
+ retractSlot?: React.ReactNode;
13
+ style?: React.CSSProperties;
14
+ retractIconStyle?: React.CSSProperties;
15
+ }
16
+ declare const PisellFloatingPanel: (props: PisellFloatingPanelProps) => React.JSX.Element;
17
+ export default PisellFloatingPanel;
@@ -0,0 +1,113 @@
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __export = (target, all) => {
8
+ for (var name in all)
9
+ __defProp(target, name, { get: all[name], enumerable: true });
10
+ };
11
+ var __copyProps = (to, from, except, desc) => {
12
+ if (from && typeof from === "object" || typeof from === "function") {
13
+ for (let key of __getOwnPropNames(from))
14
+ if (!__hasOwnProp.call(to, key) && key !== except)
15
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
+ }
17
+ return to;
18
+ };
19
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
20
+ // If the importer is in node compatibility mode or this is not an ESM
21
+ // file that has been converted to a CommonJS file using a Babel-
22
+ // compatible transform (i.e. "__esModule" has not been set), then set
23
+ // "default" to the CommonJS "module.exports" for node compatibility.
24
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
25
+ mod
26
+ ));
27
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
28
+
29
+ // src/components/pisellFloatingPanel/index.tsx
30
+ var pisellFloatingPanel_exports = {};
31
+ __export(pisellFloatingPanel_exports, {
32
+ default: () => pisellFloatingPanel_default
33
+ });
34
+ module.exports = __toCommonJS(pisellFloatingPanel_exports);
35
+ var import_react = __toESM(require("react"));
36
+ var import_classnames = __toESM(require("classnames"));
37
+ var import_ahooks = require("ahooks");
38
+ var import_iconfont = __toESM(require("../iconfont"));
39
+ var import_index = require("./index.less");
40
+ var PisellFloatingPanel = (props) => {
41
+ const {
42
+ defaultOpen = false,
43
+ onOpenChange,
44
+ isFloat,
45
+ open,
46
+ width,
47
+ children,
48
+ retractHeight,
49
+ fullHeight,
50
+ retractSlot,
51
+ style: propsStyle,
52
+ retractIconStyle
53
+ } = props;
54
+ const [isOpen, setIsOpen] = (0, import_react.useState)(defaultOpen);
55
+ (0, import_ahooks.useUpdateEffect)(() => {
56
+ if (open !== void 0) {
57
+ setIsOpen(open);
58
+ }
59
+ }, [open]);
60
+ (0, import_react.useEffect)(() => {
61
+ document.body.id = "body";
62
+ }, []);
63
+ const togglePanel = () => {
64
+ const newOpenState = !isOpen;
65
+ setIsOpen(newOpenState);
66
+ if (onOpenChange) {
67
+ onOpenChange(newOpenState);
68
+ }
69
+ };
70
+ const style = (0, import_react.useMemo)(() => {
71
+ let height = fullHeight;
72
+ let transform = isOpen ? "translateY(0)" : `translateY(calc(100% - ${retractHeight}))`;
73
+ if (!isFloat) {
74
+ height = isOpen ? fullHeight : retractHeight;
75
+ transform = "none";
76
+ }
77
+ return {
78
+ ...propsStyle,
79
+ height,
80
+ width,
81
+ position: isFloat ? "fixed" : "relative",
82
+ bottom: 0,
83
+ transition: "0.3s",
84
+ transform
85
+ };
86
+ }, [fullHeight, isFloat, retractHeight, isOpen, width, propsStyle]);
87
+ const iconType = (0, import_react.useMemo)(() => {
88
+ if (isOpen) {
89
+ return isFloat ? "pisell2-chevron-down-double" : "pisell2-chevron-up-double";
90
+ }
91
+ return isFloat ? "pisell2-chevron-up-double" : "pisell2-chevron-down-double";
92
+ }, [isOpen, isFloat]);
93
+ return /* @__PURE__ */ import_react.default.createElement(
94
+ "div",
95
+ {
96
+ className: (0, import_classnames.default)("pisell-lowcode-floating-panel-wrap", {
97
+ ["pisell-lowcode-floating-panel-wrap-floating"]: isFloat
98
+ }),
99
+ style
100
+ },
101
+ /* @__PURE__ */ import_react.default.createElement(
102
+ "div",
103
+ {
104
+ className: "pisell-lowcode-floating-panel-header",
105
+ onClick: togglePanel
106
+ },
107
+ /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-floating-panel-handle" }, /* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { type: iconType, style: retractIconStyle }))
108
+ ),
109
+ !isOpen && retractSlot,
110
+ /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-floating-panel-content" }, children)
111
+ );
112
+ };
113
+ var pisellFloatingPanel_default = PisellFloatingPanel;
@@ -0,0 +1,30 @@
1
+ .pisell-lowcode-floating-panel-wrap {
2
+ background-color: #fff;
3
+ border-top-left-radius: 16px;
4
+ border-top-right-radius: 16px;
5
+ box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
6
+ overflow: hidden;
7
+ display: flex;
8
+ flex-direction: column;
9
+ }
10
+
11
+ .pisell-lowcode-floating-panel-wrap.pisell-lowcode-floating-panel-wrap-floating {
12
+ position: fixed;
13
+ bottom: 0;
14
+ left: 0;
15
+ }
16
+
17
+ .pisell-lowcode-floating-panel-content {
18
+ overflow-y: auto;
19
+ height: 100%;
20
+ }
21
+
22
+ .pisell-lowcode-floating-panel-header {
23
+ padding: 10px;
24
+ width: 100%;
25
+ height: 32px;
26
+ display: flex;
27
+ align-items: center;
28
+ justify-content: center;
29
+ cursor: pointer;
30
+ }
@@ -0,0 +1,18 @@
1
+ import React from 'react';
2
+ import './index.less';
3
+ export interface PisellStatisticListProps extends React.HTMLAttributes<HTMLDivElement> {
4
+ backgroundColors?: string[];
5
+ labelColor?: string;
6
+ valueColor?: string;
7
+ data: {
8
+ label: string;
9
+ value: string;
10
+ tip?: string;
11
+ children?: {
12
+ label: string;
13
+ value: string;
14
+ }[];
15
+ }[];
16
+ }
17
+ declare const PisellStatisticList: (props: PisellStatisticListProps) => React.JSX.Element;
18
+ export default PisellStatisticList;
@@ -0,0 +1,109 @@
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __export = (target, all) => {
8
+ for (var name in all)
9
+ __defProp(target, name, { get: all[name], enumerable: true });
10
+ };
11
+ var __copyProps = (to, from, except, desc) => {
12
+ if (from && typeof from === "object" || typeof from === "function") {
13
+ for (let key of __getOwnPropNames(from))
14
+ if (!__hasOwnProp.call(to, key) && key !== except)
15
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
+ }
17
+ return to;
18
+ };
19
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
20
+ // If the importer is in node compatibility mode or this is not an ESM
21
+ // file that has been converted to a CommonJS file using a Babel-
22
+ // compatible transform (i.e. "__esModule" has not been set), then set
23
+ // "default" to the CommonJS "module.exports" for node compatibility.
24
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
25
+ mod
26
+ ));
27
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
28
+
29
+ // src/components/pisellStatisticList/index.tsx
30
+ var pisellStatisticList_exports = {};
31
+ __export(pisellStatisticList_exports, {
32
+ default: () => pisellStatisticList_default
33
+ });
34
+ module.exports = __toCommonJS(pisellStatisticList_exports);
35
+ var import_react = __toESM(require("react"));
36
+ var import_antd = require("antd");
37
+ var import_pisellTooltip = __toESM(require("../pisellTooltip"));
38
+ var import_iconfont = __toESM(require("../iconfont"));
39
+ var import_index = require("./index.less");
40
+ var defaultColors = [
41
+ "rgba(224, 79, 22, 0.20)",
42
+ "rgba(202, 133, 4, 0.20)",
43
+ "rgba(127, 86, 217, 0.22)",
44
+ "rgba(7, 148, 85, 0.20)",
45
+ "rgba(21, 112, 239, 0.23)"
46
+ ];
47
+ var PisellStatisticList = (props) => {
48
+ const {
49
+ backgroundColors = defaultColors,
50
+ labelColor = "#fff",
51
+ valueColor = "#fff",
52
+ data,
53
+ ...others
54
+ } = props;
55
+ return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-statistic-list-wrap", ...others }, data.map((item, index) => {
56
+ var _a;
57
+ return /* @__PURE__ */ import_react.default.createElement(
58
+ "div",
59
+ {
60
+ className: "pisell-lowcode-statistic-list-item",
61
+ style: {
62
+ background: backgroundColors[index % backgroundColors.length]
63
+ }
64
+ },
65
+ /* @__PURE__ */ import_react.default.createElement(
66
+ "div",
67
+ {
68
+ className: "pisell-lowcode-statistic-list-item-label",
69
+ style: { color: labelColor }
70
+ },
71
+ item.label,
72
+ item.tip && /* @__PURE__ */ import_react.default.createElement(import_pisellTooltip.default, { title: item.tip }, /* @__PURE__ */ import_react.default.createElement(
73
+ import_iconfont.default,
74
+ {
75
+ style: { color: labelColor },
76
+ type: "pisell2-help-circle",
77
+ className: "pisell-lowcode-statistic-list-item-label-tip-icon"
78
+ }
79
+ ))
80
+ ),
81
+ /* @__PURE__ */ import_react.default.createElement(
82
+ "div",
83
+ {
84
+ className: "pisell-lowcode-statistic-list-item-value",
85
+ style: { color: valueColor }
86
+ },
87
+ item.value
88
+ ),
89
+ !!((_a = item.children) == null ? void 0 : _a.length) && /* @__PURE__ */ import_react.default.createElement(import_antd.Row, { className: "pisell-lowcode-statistic-list-item-children-wrap" }, item.children.map((child) => {
90
+ return /* @__PURE__ */ import_react.default.createElement(import_antd.Col, { span: 12 }, /* @__PURE__ */ import_react.default.createElement(
91
+ "span",
92
+ {
93
+ className: "pisell-lowcode-statistic-list-item-children-label",
94
+ style: { color: labelColor }
95
+ },
96
+ child.label
97
+ ), /* @__PURE__ */ import_react.default.createElement(
98
+ "span",
99
+ {
100
+ className: "pisell-lowcode-statistic-list-item-children-value",
101
+ style: { color: valueColor }
102
+ },
103
+ child.value
104
+ ));
105
+ }))
106
+ );
107
+ }));
108
+ };
109
+ var pisellStatisticList_default = PisellStatisticList;
@@ -0,0 +1,43 @@
1
+ .pisell-lowcode-statistic-list-wrap {
2
+ display: flex;
3
+ flex-direction: column;
4
+ gap: 16px;
5
+ .pisell-lowcode-statistic-list-item {
6
+ padding: 16px;
7
+ border-radius: 8px;
8
+ border: 1px solid var(--Gray-600, #475467);
9
+ .pisell-lowcode-statistic-list-item-label {
10
+ color: var(--Base-White, #fff);
11
+ font-size: 14px;
12
+ font-weight: 600;
13
+ line-height: 20px; /* 142.857% */
14
+ display: flex;
15
+ gap: 10px;
16
+ align-items: center;
17
+ .pisell-lowcode-statistic-list-item-label-tip-icon {
18
+ font-size: 20px;
19
+ }
20
+ }
21
+ .pisell-lowcode-statistic-list-item-value {
22
+ color: var(--Base-White, #fff);
23
+ font-size: 18px;
24
+ font-weight: 700;
25
+ line-height: 28px; /* 155.556% */
26
+ }
27
+ .pisell-lowcode-statistic-list-item-children-wrap {
28
+ .pisell-lowcode-statistic-list-item-children-label {
29
+ color: var(--Base-White, #fff);
30
+ font-size: 12px;
31
+ font-weight: 400;
32
+ line-height: 18px; /* 150% */
33
+ margin-right: 4px;
34
+ }
35
+ .pisell-lowcode-statistic-list-item-children-value {
36
+ color: var(--Base-White, #fff);
37
+ font-size: 18px;
38
+ font-weight: 700;
39
+ line-height: 28px; /* 155.556% */
40
+ }
41
+ }
42
+ }
43
+ }
package/lib/index.d.ts CHANGED
@@ -102,3 +102,5 @@ export { default as PisellCard } from './components/pisellCard';
102
102
  export { default as PisellInformationEntry } from './components/pisellInformationEntry';
103
103
  export { default as usePisellConfig } from './components/pisell-config-provider/hooks/usePisellConfig';
104
104
  export { globalConfig, default as PisellContext } from './components/pisell-config-provider/context';
105
+ export { default as PisellStatisticList } from './components/pisellStatisticList';
106
+ export { default as PisellFloatingPanel } from './components/pisellFloatingPanel';
package/lib/index.js CHANGED
@@ -83,12 +83,14 @@ __export(src_exports, {
83
83
  PisellCountdown: () => import_pisellCountdown.default,
84
84
  PisellDatePicker: () => import_pisellDatePicker.default,
85
85
  PisellEmpty: () => import_pisellEmpty.default,
86
+ PisellFloatingPanel: () => import_pisellFloatingPanel.default,
86
87
  PisellInformationEntry: () => import_pisellInformationEntry.default,
87
88
  PisellInput: () => import_pisellInput.default,
88
89
  PisellLoading: () => import_pisellLoading.default,
89
90
  PisellModal: () => import_pisellModal.default,
90
91
  PisellRow: () => import_pisellRow.default,
91
92
  PisellScan: () => import_pisellScan.default,
93
+ PisellStatisticList: () => import_pisellStatisticList.default,
92
94
  PisellText: () => import_pisellText.default,
93
95
  PisellToast: () => import_pisellToast.default,
94
96
  PisellTooltip: () => import_pisellTooltip.default,
@@ -240,6 +242,8 @@ var import_pisellCard = __toESM(require("./components/pisellCard"));
240
242
  var import_pisellInformationEntry = __toESM(require("./components/pisellInformationEntry"));
241
243
  var import_usePisellConfig = __toESM(require("./components/pisell-config-provider/hooks/usePisellConfig"));
242
244
  var import_context = __toESM(require("./components/pisell-config-provider/context"));
245
+ var import_pisellStatisticList = __toESM(require("./components/pisellStatisticList"));
246
+ var import_pisellFloatingPanel = __toESM(require("./components/pisellFloatingPanel"));
243
247
  // Annotate the CommonJS export names for ESM import in node:
244
248
  0 && (module.exports = {
245
249
  Affix,
@@ -296,12 +300,14 @@ var import_context = __toESM(require("./components/pisell-config-provider/contex
296
300
  PisellCountdown,
297
301
  PisellDatePicker,
298
302
  PisellEmpty,
303
+ PisellFloatingPanel,
299
304
  PisellInformationEntry,
300
305
  PisellInput,
301
306
  PisellLoading,
302
307
  PisellModal,
303
308
  PisellRow,
304
309
  PisellScan,
310
+ PisellStatisticList,
305
311
  PisellText,
306
312
  PisellToast,
307
313
  PisellTooltip,