@luck-design-biz/luckda 0.0.27 → 1.0.0-1-alpha

package/es/lowcode/painter/components/ActionBindModal.js

@@ -0,0 +1,308 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useRef, useState } from 'react';
+import { useMemoizedFn, useLatest, useCreation, useMap, useUpdateEffect, useDebounceFn } from 'ahooks';
+import { Modal, Icon, Input, Checkbox, Tooltip } from 'luck-design/antd';
+import classNames from 'classnames';
+import { reduce } from 'lodash';
+import { formatMessage } from '@luck-design-biz/base/utils';
+import { useRemoteSource, useGet } from "../../engine/provider/ContextProvider";
+import { useContext } from "../../engine/provider/ContextProvider";
+import JSEditor from "./code-editor/JSEditor";
+import { extractKeywords } from "../../engine/tools/helper";
+import styles from "../style/action-bind-modal.less";
+var _I18N_PREFIX_ = 'luckda.lowcode.painter.actionBindModal';
+var _ACTION_CATEGORY_ = [{
+  key: 'page-action',
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".pageActions"),
+    label: '页面行为'
+  })
+}, {
+  key: 'trigger',
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".trigger"),
+    label: '触发器'
+  })
+}, {
+  key: 'custom',
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".custom"),
+    label: '自定义动作'
+  })
+}];
+var _DEFAULT_JSON_CODE_ = '{"params":{},"data":{}}';
+var _DEFAULT_JS_CODE_ = 'function todo() {\n\n}';
+var ActionBindModal = function ActionBindModal(_ref) {
+  var nodeId = _ref.nodeId,
+    event = _ref.event,
+    _ref$defaultCode = _ref.defaultCode,
+    defaultCode = _ref$defaultCode === void 0 ? _DEFAULT_JS_CODE_ : _ref$defaultCode,
+    onComfirm = _ref.onComfirm,
+    onClose = _ref.onClose;
+  var context = useContext();
+  var _useRemoteSource = useRemoteSource(),
+    module = _useRemoteSource.module;
+  var editorRef = useRef();
+  var _useMap = useMap([]),
+    _useMap2 = _slicedToArray(_useMap, 2),
+    actionPool = _useMap2[0],
+    _useMap2$ = _useMap2[1],
+    set = _useMap2$.set,
+    remove = _useMap2$.remove,
+    get = _useMap2$.get,
+    setAll = _useMap2$.setAll,
+    reset = _useMap2$.reset;
+  var _useState = useState('page-action'),
+    _useState2 = _slicedToArray(_useState, 2),
+    category = _useState2[0],
+    setCategory = _useState2[1];
+  var _useState3 = useState(void 0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    activeKey = _useState4[0],
+    setActiveKey = _useState4[1];
+  var _useState5 = useState(void 0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    searchValue = _useState6[0],
+    setSearchValue = _useState6[1];
+  var latestActiveKey = useLatest(activeKey);
+  var pageData = useGet();
+  var keywords = useCreation(function () {
+    return extractKeywords(pageData, ['id', ['dataset', 'code'], 'field']);
+  }, []);
+  var options = useCreation(function () {
+    if (category === 'page-action') {
+      return reduce(module.actions, function (ret, actionName, actionKey) {
+        ret.push({
+          key: actionKey,
+          label: actionName
+        });
+        return ret;
+      }, []);
+    } else if (category === 'trigger') {
+      return reduce(context.componentList, function (ret, _ref2) {
+        var _ref3 = _slicedToArray(_ref2, 2),
+          key = _ref3[0],
+          target = _ref3[1];
+        ret.push({
+          key: key,
+          label: "".concat(target.api.getSelfData().props.name, "(").concat(key, ")")
+        });
+        return ret;
+      }, []);
+    } else if (category === 'custom') {
+      return [{
+        key: 'coding',
+        label: formatMessage({
+          id: "".concat(_I18N_PREFIX_, ".coding"),
+          label: '动作编写'
+        })
+      }];
+    }
+    return [];
+  }, [category]);
+  useUpdateEffect(function () {
+    if (activeKey) {
+      var _editorRef$current;
+      var action = get(activeKey);
+      (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 || _editorRef$current.editor.setValue(action === null || action === void 0 ? void 0 : action.code);
+    }
+  }, [category, activeKey]);
+  useUpdateEffect(function () {
+    setAll(event === null || event === void 0 ? void 0 : event.actionPool);
+  }, [event]);
+  var _useDebounceFn = useDebounceFn(function (code) {
+      if (latestActiveKey.current) {
+        var action = get(latestActiveKey.current);
+        action.code = code;
+      }
+    }, {
+      wait: 500
+    }),
+    handleEditorValueChange = _useDebounceFn.run;
+  var handleOptionClick = useMemoizedFn(function (key) {
+    setActiveKey(key);
+    var action;
+    if (actionPool.has(key)) {
+      action = get(key);
+    } else {
+      var code = event.func || (category === 'custom' ? defaultCode : "".concat(defaultCode.slice(0, -1), "\n\treturn ").concat(_DEFAULT_JSON_CODE_, " \n}"));
+      action = {
+        category: category,
+        key: key,
+        code: code
+      };
+      set(key, action);
+    }
+  });
+  var handleChecked = useMemoizedFn(function (key, checked) {
+    if (checked) {
+      if (activeKey !== key) {
+        setActiveKey(key);
+      }
+      var code = event.func || (category === 'custom' ? defaultCode : "".concat(defaultCode.slice(0, -1), "\n\treturn ").concat(_DEFAULT_JSON_CODE_, " \n}"));
+      set(key, {
+        category: category,
+        key: key,
+        code: code
+      });
+    } else {
+      if (activeKey === key) {
+        setActiveKey(void 0);
+      }
+      remove(key);
+    }
+  });
+  var handleClose = useMemoizedFn(function () {
+    onClose();
+    reset();
+    setCategory('page-action');
+    setActiveKey(void 0);
+    setSearchValue(void 0);
+  });
+  var handleComfirm = useMemoizedFn(function () {
+    onComfirm(Array.from(actionPool), event);
+    handleClose();
+  });
+  return /*#__PURE__*/React.createElement(Modal, {
+    className: styles['lc-painter-panel-action-bind-modal'],
+    bodyStyle: {
+      marginTop: 0,
+      padding: '4px 24px'
+    },
+    title: "".concat(event === null || event === void 0 ? void 0 : event.name, "(").concat(nodeId, ")"),
+    visible: !!event,
+    width: "70vw",
+    closable: false,
+    maskClosable: false,
+    getContainer: function getContainer() {
+      return document.getElementById('lc-design-workspace');
+    },
+    onCancel: handleClose,
+    onOk: handleComfirm
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-panel-action-bind-modal-body']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-panel-action-bind-modal-body-left']
+  }, /*#__PURE__*/React.createElement("p", null, formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".bind"),
+    label: '绑定动作'
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles['selector-box']
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: classNames(styles['selector-box-ul'], styles['action-category'])
+  }, _ACTION_CATEGORY_.map(function (_ref4) {
+    var key = _ref4.key,
+      label = _ref4.label;
+    return /*#__PURE__*/React.createElement("li", {
+      key: key,
+      className: classNames(_defineProperty({}, styles.active, key === category)),
+      onClick: function onClick() {
+        setCategory(key);
+        if ('custom' === key) {
+          var _activeKey = 'coding';
+          setActiveKey(_activeKey);
+          if (!actionPool.has(_activeKey)) {
+            set(_activeKey, {
+              category: key,
+              key: _activeKey,
+              code: event.func || defaultCode
+            });
+          }
+        } else {
+          setActiveKey(void 0);
+        }
+      }
+    }, label, key === category && /*#__PURE__*/React.createElement(Icon, {
+      type: "check",
+      className: styles['check-icon']
+    }));
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles['selecter-items-box']
+  }, category !== 'custom' && /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: 42,
+      display: 'flex',
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(Input.Search, {
+    placeholder: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".search"),
+      label: '搜索'
+    }),
+    size: "small",
+    onChange: function onChange(e) {
+      return setSearchValue(e.target.value);
+    },
+    style: {
+      width: 170,
+      alignSelf: 'center'
+    }
+  })), /*#__PURE__*/React.createElement("ul", {
+    className: classNames(styles['selector-box-ul'], styles['selecter-items'])
+  }, options.filter(function (_ref5) {
+    var key = _ref5.key,
+      label = _ref5.label;
+    return !searchValue || "".concat(key, " ").concat(label).toLowerCase().includes(searchValue.toLowerCase());
+  }).map(function (_ref6) {
+    var key = _ref6.key,
+      label = _ref6.label;
+    return /*#__PURE__*/React.createElement("li", {
+      key: key,
+      className: classNames(_defineProperty({}, styles.active, key === activeKey)),
+      onClick: function onClick() {
+        return handleOptionClick(key);
+      }
+    }, /*#__PURE__*/React.createElement(Checkbox, {
+      checked: actionPool.has(key),
+      style: {
+        marginRight: 4
+      },
+      onChange: function onChange(e) {
+        return handleChecked(key, e.target.checked);
+      },
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      }
+    }), label);
+  }))))), /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-panel-action-bind-modal-body-right']
+  }, category === 'page-action' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".params"),
+    label: '配置参数'
+  }), /*#__PURE__*/React.createElement(Tooltip, {
+    title: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".params.info"),
+      label: '请勿随意修改配置参数结构和参数名称，参数异常可能会导致请求失败'
+    }),
+    getPopupContainer: function getPopupContainer() {
+      return document.getElementById('lc-design-workspace');
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    style: {
+      marginLeft: 4
+    },
+    type: "exclamation-circle"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: styles['code-box']
+  }, activeKey ? /*#__PURE__*/React.createElement(JSEditor, {
+    ref: editorRef,
+    onChange: handleEditorValueChange
+  }) : formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".noActionSelected"),
+    label: '请在右侧选择行为项'
+  }))), category === 'custom' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".coding"),
+    label: '动作编写'
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles['code-box']
+  }, activeKey ? /*#__PURE__*/React.createElement(JSEditor, {
+    ref: editorRef,
+    keywords: keywords,
+    onChange: handleEditorValueChange
+  }) : formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".noActionSelected"),
+    label: '请在右侧选择行为项'
+  }))))));
+};
+export default ActionBindModal;

package/es/lowcode/painter/components/AdvancePanel.js

@@ -0,0 +1,217 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _excluded = ["events"],
+  _excluded2 = ["events"],
+  _excluded3 = ["render"],
+  _excluded4 = ["render"];
+import React, { useState, useRef } from 'react';
+import { useCreation, useMemoizedFn } from 'ahooks';
+import { Menu, Dropdown, Button, Tooltip, Icon, Switch } from 'luck-design/antd';
+import styled from 'styled-components';
+import { isNil, keyBy, keys, omit, reduce } from 'lodash';
+import { useGet } from "../../engine/provider/ContextProvider";
+import { formatMessage } from '@luck-design-biz/base/utils';
+import Collapse from "./Collapse";
+import PopConfirm from "./PopConfirm";
+import FullScreenEditor from "./code-editor/FullScreenEditor";
+import JSEditor from "./code-editor/JSEditor";
+import ActionBindModal from "./ActionBindModal";
+import { LC_BUILDIN_UNIT_KEY_LIST } from "../../constants";
+var _I18N_PREFIX_ = 'luckda.lowcode.painter.advancePanel';
+var EventItem = styled.div.withConfig({
+  displayName: "EventItem",
+  componentId: "luckda-6530__sc-6426fo-0"
+})(["display:flex;align-items:center;justify-content:space-between;padding:4px 8px;border:1px solid #e5e6e8;border-radius:6px;margin-bottom:6px;font-size:12px;i{color:rgba(0,0,0,0.4);cursor:pointer;}i:not(:last-child){margin-right:6px;}"]);
+var _DEFAULT_FUNC_ = 'function isTrue() {\n return true; \n}';
+var AdvancePanel = function AdvancePanel(_ref) {
+  var _value$render2;
+  var meta = _ref.meta,
+    nodeId = _ref.nodeId,
+    target = _ref.target,
+    onChange = _ref.onChange;
+  var value = useGet(isNil(target) ? {
+    id: nodeId,
+    path: 'props.advance'
+  } : {
+    id: target.ancestorId,
+    path: "props.".concat(target.keyPath, ".advance")
+  });
+  var editorRef = useRef();
+  var _useState = useState((value === null || value === void 0 ? void 0 : value.events) || {}),
+    _useState2 = _slicedToArray(_useState, 2),
+    events = _useState2[0],
+    setEvents = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    event = _useState4[0],
+    setEvent = _useState4[1];
+  var metaMap = useCreation(function () {
+    var _meta$advance;
+    return keyBy((meta === null || meta === void 0 || (_meta$advance = meta.advance) === null || _meta$advance === void 0 ? void 0 : _meta$advance.events) || [], 'key');
+  }, [meta]);
+  var handleEventClick = useMemoizedFn(function (e) {
+    var payload = e.item.props.payload;
+    setEvent(_objectSpread(_objectSpread({}, payload), {}, {
+      actionPool: null
+    }));
+  });
+  var handleDeleteEvent = useMemoizedFn(function (ek) {
+    var _ref2 = value || {},
+      events = _ref2.events,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+    var _events = omit(events, [ek]);
+    setEvents(_events);
+    onChange(_objectSpread(_objectSpread({}, rest), {}, {
+      events: _events
+    }));
+  });
+  var handleComfirm = useMemoizedFn(function (actionPool) {
+    var _ref3 = value || {},
+      events = _ref3.events,
+      rest = _objectWithoutProperties(_ref3, _excluded2);
+    var _events = _objectSpread(_objectSpread({}, events), {}, _defineProperty({}, event.key, actionPool));
+    setEvents(_events);
+    onChange(_objectSpread(_objectSpread({}, rest), {}, {
+      events: _events
+    }));
+  });
+  var handleRenderComfirm = useMemoizedFn(function () {
+    var val = editorRef.current.editor.getValue();
+    var _ref4 = value || {},
+      render = _ref4.render,
+      rest = _objectWithoutProperties(_ref4, _excluded3);
+    onChange(_objectSpread(_objectSpread({}, rest), {}, {
+      render: {
+        value: isNil(render === null || render === void 0 ? void 0 : render.value) ? true : render.value,
+        code: val
+      }
+    }));
+  });
+  var handleRenderChange = useMemoizedFn(function (checked) {
+    var _ref5 = value || {},
+      render = _ref5.render,
+      rest = _objectWithoutProperties(_ref5, _excluded4);
+    onChange(_objectSpread(_objectSpread({}, rest), {}, {
+      render: {
+        value: checked,
+        code: render === null || render === void 0 ? void 0 : render.code
+      }
+    }));
+  });
+  var eventsMenu = useCreation(function () {
+    var _meta$advance2;
+    return /*#__PURE__*/React.createElement(Menu, {
+      onClick: handleEventClick,
+      style: {
+        fontSize: 12
+      }
+    }, reduce((_meta$advance2 = meta.advance) === null || _meta$advance2 === void 0 ? void 0 : _meta$advance2.events, function (ret, event) {
+      var _value$events;
+      if (!(value !== null && value !== void 0 && (_value$events = value.events) !== null && _value$events !== void 0 && _value$events[event.key])) {
+        ret.push( /*#__PURE__*/React.createElement(Menu.Item, {
+          key: event.key,
+          payload: event
+        }, /*#__PURE__*/React.createElement(Tooltip, {
+          title: event.desc || event.name,
+          placement: "left",
+          getPopupContainer: function getPopupContainer() {
+            return document.getElementById('lc-design-workspace');
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          style: {
+            width: '100%',
+            fontSize: 12
+          }
+        }, event.name))));
+      }
+      return ret;
+    }, []));
+  }, [value]);
+  return /*#__PURE__*/React.createElement("div", null, meta.group !== 'field' && !LC_BUILDIN_UNIT_KEY_LIST.includes(nodeId) && /*#__PURE__*/React.createElement(Collapse, {
+    field: "render",
+    label: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".render"),
+      label: '是否渲染'
+    }),
+    bodyStyle: {
+      padding: '12px 16px'
+    },
+    suppressIcon: true,
+    extraRender: function extraRender() {
+      var _value$render;
+      return /*#__PURE__*/React.createElement(PopConfirm, {
+        placement: "left",
+        title: /*#__PURE__*/React.createElement(FullScreenEditor, {
+          ref: editorRef,
+          EditorComponent: JSEditor,
+          width: "600px",
+          height: "400px"
+        }, (value === null || value === void 0 || (_value$render = value.render) === null || _value$render === void 0 ? void 0 : _value$render.code) || _DEFAULT_FUNC_),
+        showBtn: true,
+        onConfirm: handleRenderComfirm
+      }, /*#__PURE__*/React.createElement(Icon, {
+        type: "code"
+      }));
+    }
+  }, /*#__PURE__*/React.createElement(Switch, {
+    checked: isNil(value === null || value === void 0 || (_value$render2 = value.render) === null || _value$render2 === void 0 ? void 0 : _value$render2.value) ? true : value.render.value,
+    onChange: handleRenderChange
+  })), /*#__PURE__*/React.createElement(Collapse, {
+    field: "events",
+    label: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".events"),
+      label: '事件'
+    }),
+    bodyStyle: {
+      padding: '12px 16px'
+    }
+  }, keys(events).map(function (ek) {
+    return /*#__PURE__*/React.createElement(EventItem, {
+      key: ek
+    }, /*#__PURE__*/React.createElement("span", null, metaMap[ek].name), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Tooltip, {
+      title: formatMessage({
+        id: 'luckda.lowcode.painter.edit',
+        label: '编辑'
+      })
+    }, /*#__PURE__*/React.createElement(Icon, {
+      type: "edit",
+      onClick: function onClick() {
+        return setEvent(_objectSpread(_objectSpread({}, metaMap[ek]), {}, {
+          actionPool: events[ek]
+        }));
+      }
+    })), /*#__PURE__*/React.createElement(Tooltip, {
+      title: formatMessage({
+        id: 'luckda.lowcode.painter.delete',
+        label: '删除'
+      })
+    }, /*#__PURE__*/React.createElement(Icon, {
+      type: "delete",
+      onClick: function onClick() {
+        return handleDeleteEvent(ek);
+      }
+    }))));
+  }), /*#__PURE__*/React.createElement(Dropdown, {
+    overlay: eventsMenu,
+    placement: "bottomCenter",
+    getPopupContainer: function getPopupContainer() {
+      return document.getElementById('lc-design-workspace');
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    size: "small",
+    block: true
+  }, formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".addEventAction"),
+    label: '添加事件动作'
+  })))), /*#__PURE__*/React.createElement(ActionBindModal, {
+    nodeId: nodeId,
+    event: event,
+    onComfirm: handleComfirm,
+    onClose: function onClose() {
+      return setEvent(null);
+    }
+  }));
+};
+export default AdvancePanel;

package/es/lowcode/painter/components/AttrsPanel.js

@@ -0,0 +1,160 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _excluded = ["type", "key", "valueKey", "name", "desc", "default", "props", "wrapper", "wrapperProps", "next", "repositioning"];
+import React, { useRef, useEffect } from 'react';
+import { useBoolean, useCreation, useMemoizedFn } from 'ahooks';
+import { Drawer, Icon } from 'luck-design/antd';
+import classNames from 'classnames';
+import { startsWith, isNil, get } from 'lodash';
+import { useGet } from "../../engine/provider/ContextProvider";
+import PanelItemFactory from "../../engine/factory/panel-item-factory";
+import PanelItem from "./PanelItem";
+import Collapse from "./Collapse";
+import styles from "../style/panel-attrs.less";
+var AttrsPanel = function AttrsPanel(_ref) {
+  var _nextRef$current2, _nextRef$current3;
+  var meta = _ref.meta,
+    nodeId = _ref.nodeId,
+    ancestorId = _ref.ancestorId,
+    onChange = _ref.onChange;
+  var compMap = useRef({});
+  var nextRef = useRef(null);
+  var factory = useRef(new PanelItemFactory());
+  var _useBoolean = useBoolean(false),
+    _useBoolean2 = _slicedToArray(_useBoolean, 2),
+    open = _useBoolean2[0],
+    _useBoolean2$ = _useBoolean2[1],
+    setTrue = _useBoolean2$.setTrue,
+    setFalse = _useBoolean2$.setFalse;
+  var node = useGet({
+    id: isNil(ancestorId) ? nodeId : ancestorId,
+    path: 'props'
+  });
+  var handleChange = useMemoizedFn(function (field, val, _ref2) {
+    var _nextRef$current;
+    var repositioning = _ref2.repositioning,
+      before = _ref2.before;
+    onChange(field, val, {
+      repositioning: repositioning,
+      before: before
+    });
+    if ((_nextRef$current = nextRef.current) !== null && _nextRef$current !== void 0 && _nextRef$current.autoClose) {
+      setFalse();
+    }
+  });
+  var goNext = useMemoizedFn(function (_next, dynamicProps) {
+    if (!_next) return;
+    nextRef.current = {
+      name: _next.name,
+      autoClose: _next.autoClose,
+      NextComp: renderPanelItems(_next.props, dynamicProps)
+    };
+    setTrue();
+  });
+  var renderPanelItems = useMemoizedFn(function (items, dynamicProps) {
+    return items.map(function (_ref3) {
+      var type = _ref3.type,
+        key = _ref3.key,
+        valueKey = _ref3.valueKey,
+        name = _ref3.name,
+        desc = _ref3.desc,
+        defaultValue = _ref3.default,
+        props = _ref3.props,
+        wrapper = _ref3.wrapper,
+        wrapperProps = _ref3.wrapperProps,
+        next = _ref3.next,
+        repositioning = _ref3.repositioning,
+        rest = _objectWithoutProperties(_ref3, _excluded);
+      if (!compMap.current[type]) {
+        compMap.current[type] = factory.current.getPanelItemFor(startsWith(type, '_') ? 'dynamic' : type, type);
+      }
+      var Comp = compMap.current[type];
+      var _valueKey = (dynamicProps === null || dynamicProps === void 0 ? void 0 : dynamicProps.valueKey) || valueKey;
+      if (type === 'group') {
+        return /*#__PURE__*/React.createElement(Comp, {
+          nodeId: nodeId,
+          key: key,
+          field: key,
+          label: name,
+          next: next ? function (_dp) {
+            return goNext(next, _dp);
+          } : null,
+          defaultCollapsed: defaultValue,
+          desc: desc
+        }, renderPanelItems(props || [], dynamicProps));
+      }
+      var _originalVal = get(node, _valueKey || key);
+      var comp = Comp && /*#__PURE__*/React.createElement(Comp, _extends({
+        nodeId: nodeId,
+        key: key,
+        defaultValue: isNil(_originalVal) ? defaultValue : _originalVal,
+        next: next !== null && next !== void 0 && next.props ? function (_dp) {
+          return goNext(next, _dp);
+        } : null,
+        onChange: function onChange(val, before) {
+          return handleChange(_valueKey || key, val, {
+            repositioning: repositioning,
+            before: before
+          });
+        },
+        size: "small",
+        settings: node,
+        renderPanelItems: renderPanelItems
+      }, rest, dynamicProps));
+      if (wrapper === 'hidden') return comp;
+      var Wrapper = wrapper === 'collapse' ? Collapse : PanelItem;
+      return /*#__PURE__*/React.createElement(Wrapper, _extends({
+        key: key,
+        nodeId: nodeId,
+        field: key,
+        label: name,
+        desc: desc
+      }, wrapperProps), comp);
+    });
+  });
+  var PropsComps = useCreation(function () {
+    setFalse();
+    if (!meta) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
+    return renderPanelItems(meta.props);
+  }, [nodeId]);
+  useEffect(function () {
+    if (!open) {
+      nextRef.current = null;
+    }
+  }, [open]);
+  return /*#__PURE__*/React.createElement("div", {
+    id: "lc-painter-panel-attrs-container",
+    className: classNames(styles['lc-painter-panel-attrs'], _defineProperty(_defineProperty({}, styles.hidden, !nodeId), styles.showNext, open))
+  }, PropsComps, /*#__PURE__*/React.createElement(Drawer, {
+    visible: open,
+    width: 320,
+    mask: false,
+    closable: false,
+    getContainer: false,
+    destroyOnClose: true,
+    style: {
+      position: 'absolute',
+      transform: 'none'
+    },
+    bodyStyle: {
+      padding: 0,
+      height: '100%'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-panel-attrs-next']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-panel-attrs-next-header'],
+    onClick: setFalse
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "left"
+  }), (_nextRef$current2 = nextRef.current) === null || _nextRef$current2 === void 0 ? void 0 : _nextRef$current2.name, /*#__PURE__*/React.createElement(Icon, {
+    type: "close"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-panel-attrs-next-body']
+  }, (_nextRef$current3 = nextRef.current) === null || _nextRef$current3 === void 0 ? void 0 : _nextRef$current3.NextComp))));
+};
+export default AttrsPanel;