@ant-design/pro-flow
Version:
A React based Flow components
80 lines • 4.23 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
var _excluded = ["id", "onTitleChange", "onCollapsedKeysChange"];
var _templateObject, _templateObject2;
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; }
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; }
import { Card, ConfigProvider } from 'antd';
import { createStyles } from 'antd-style';
import { memo, useRef } from 'react';
import EditableText from "../EditableText";
import { useFlowEditor } from "../FlowEditor";
import { CollapseProvider } from "./CollapseContext";
import { jsx as _jsx } from "react/jsx-runtime";
var useStyles = createStyles(function (_ref) {
var css = _ref.css,
token = _ref.token,
prefixCls = _ref.prefixCls;
return {
container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n will-change: transform;\n width: 100%;\n max-width: 600px;\n border: 1px solid ", ";\n border-radius: 12px;\n .", "-card-head {\n padding-right: 16px;\n }\n\n .editor-field-item-container:not(:last-child) {\n margin-bottom: 24px;\n }\n "])), token.colorBorder, prefixCls),
selected: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n border-color: ", ";\n border-width: 2px;\n box-shadow: 0 9px 25px -6px rgba(0, 0, 0, 0.1);\n "])), token.colorPrimary)
};
});
var Preview = /*#__PURE__*/memo(function (_ref2) {
var active = _ref2.active,
collapsedKeys = _ref2.collapsedKeys,
onCollapsedKeysChange = _ref2.onCollapsedKeysChange,
onTitleChange = _ref2.onTitleChange,
style = _ref2.style,
className = _ref2.className,
title = _ref2.title,
children = _ref2.children,
extra = _ref2.extra;
var _useStyles = useStyles(),
styles = _useStyles.styles,
cx = _useStyles.cx;
var cardRef = useRef(null);
return /*#__PURE__*/_jsx(ConfigProvider
// 不这样做会导致 select 的下拉菜单被遮挡，并且不会正常放大缩小
, {
getPopupContainer: function getPopupContainer() {
return cardRef.current || document.body;
},
children: /*#__PURE__*/_jsx(CollapseProvider, {
collapsedKeys: collapsedKeys,
onCollapsedKeysChange: onCollapsedKeysChange,
children: /*#__PURE__*/_jsx(Card, {
ref: cardRef,
title: /*#__PURE__*/_jsx(EditableText, {
onChange: onTitleChange,
value: title || '基础节点'
}),
className: cx(styles.container, active && styles.selected, className),
extra: extra,
style: style,
children: children
})
})
});
});
var Default = /*#__PURE__*/memo(function (_ref3) {
var id = _ref3.id,
_onTitleChange = _ref3.onTitleChange,
_onCollapsedKeysChange = _ref3.onCollapsedKeysChange,
props = _objectWithoutProperties(_ref3, _excluded);
var editor = useFlowEditor();
return /*#__PURE__*/_jsx(Preview, _objectSpread({
onTitleChange: function onTitleChange(title) {
editor.updateNodeMeta(id, 'title', title);
_onTitleChange === null || _onTitleChange === void 0 || _onTitleChange(title);
},
onCollapsedKeysChange: function onCollapsedKeysChange(collapsedKeys) {
editor.updateNodeState(id, 'collapsedKeys', collapsedKeys);
_onCollapsedKeysChange === null || _onCollapsedKeysChange === void 0 || _onCollapsedKeysChange(collapsedKeys);
}
}, props));
});
var EditNode = Default;
EditNode.Preview = Preview;
export default EditNode;