@luck-design-biz/luckda 0.0.26 → 1.0.0-alpha

package/lib/lowcode/engine/tools/usePageDataStore.js

@@ -0,0 +1,367 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTemporalStore = exports.useTask = exports.useGet = exports.setNeedPrompt = exports.resetPageData = exports.modifyNode = exports.getSelfAndParent = exports.getNeedPrompt = exports.getModuleData = exports.getLevelNodes = exports.deleteNode = exports.default = exports.clearChildren = exports.addNode = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _react = require("react");
+var _zustand = require("zustand");
+var _immer = require("zustand/middleware/immer");
+var _middleware = require("zustand/middleware");
+var _shallow = require("zustand/react/shallow");
+var _lodash = require("lodash");
+var _fastDeepEqual = _interopRequireDefault(require("fast-deep-equal"));
+var _dataProcess = require("./dataProcess");
+var _constants = require("../../constants");
+var temporalStateCreator = function temporalStateCreator(userSet, userGet, options) {
+  var stateCreator = function stateCreator(set, get) {
+    return {
+      pastStates: (options === null || options === void 0 ? void 0 : options.pastStates) || [],
+      futureStates: (options === null || options === void 0 ? void 0 : options.futureStates) || [],
+      undo: function undo() {
+        var steps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+        if (get().pastStates.length) {
+          var _options$partialize, _options$diff;
+          var currentState = (options === null || options === void 0 || (_options$partialize = options.partialize) === null || _options$partialize === void 0 ? void 0 : _options$partialize.call(options, userGet())) || userGet();
+          var statesToApply = get().pastStates.splice(-steps, steps);
+          var nextState = statesToApply.shift();
+          userSet(nextState);
+          set({
+            pastStates: get().pastStates,
+            futureStates: get().futureStates.concat((options === null || options === void 0 || (_options$diff = options.diff) === null || _options$diff === void 0 ? void 0 : _options$diff.call(options, currentState, nextState)) || currentState, statesToApply.reverse())
+          });
+        }
+      },
+      redo: function redo() {
+        var steps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+        if (get().futureStates.length) {
+          var _options$partialize2, _options$diff2;
+          var currentState = (options === null || options === void 0 || (_options$partialize2 = options.partialize) === null || _options$partialize2 === void 0 ? void 0 : _options$partialize2.call(options, userGet())) || userGet();
+          var statesToApply = get().futureStates.splice(-steps, steps);
+          var nextState = statesToApply.shift();
+          userSet(nextState);
+          set({
+            pastStates: get().pastStates.concat((options === null || options === void 0 || (_options$diff2 = options.diff) === null || _options$diff2 === void 0 ? void 0 : _options$diff2.call(options, currentState, nextState)) || currentState, statesToApply.reverse()),
+            futureStates: get().futureStates
+          });
+        }
+      },
+      clear: function clear() {
+        return set({
+          pastStates: [],
+          futureStates: []
+        });
+      },
+      isTracking: true,
+      pause: function pause() {
+        return set({
+          isTracking: false
+        });
+      },
+      resume: function resume() {
+        return set({
+          isTracking: true
+        });
+      },
+      setOnSave: function setOnSave(_onSave) {
+        return set({
+          _onSave: _onSave
+        });
+      },
+      // Internal properties
+      _onSave: options === null || options === void 0 ? void 0 : options.onSave,
+      _handleSet: function _handleSet(pastState, replace, currentState, deltaState) {
+        var _get$_onSave, _get;
+        if (options !== null && options !== void 0 && options.limit && get().pastStates.length >= (options === null || options === void 0 ? void 0 : options.limit)) {
+          get().pastStates.shift();
+        }
+        (_get$_onSave = (_get = get())._onSave) === null || _get$_onSave === void 0 || _get$_onSave.call(_get, pastState, currentState);
+        set({
+          pastStates: get().pastStates.concat(deltaState || pastState),
+          futureStates: []
+        });
+      }
+    };
+  };
+  return stateCreator;
+};
+var temporal = function temporal(config, options) {
+  var configWithTemporal = function configWithTemporal(set, get, store) {
+    var _options$wrapTemporal, _options$handleSet;
+    store.temporal = (0, _zustand.createStore)((options === null || options === void 0 || (_options$wrapTemporal = options.wrapTemporal) === null || _options$wrapTemporal === void 0 ? void 0 : _options$wrapTemporal.call(options, temporalStateCreator(set, get, options))) || temporalStateCreator(set, get, options));
+    var curriedHandleSet = (options === null || options === void 0 || (_options$handleSet = options.handleSet) === null || _options$handleSet === void 0 ? void 0 : _options$handleSet.call(options, store.temporal.getState()._handleSet)) || store.temporal.getState()._handleSet;
+    var temporalHandleSet = function temporalHandleSet(pastState) {
+      var _options$partialize3, _options$diff3, _options$equality;
+      if (!store.temporal.getState().isTracking) return;
+      var currentState = (options === null || options === void 0 || (_options$partialize3 = options.partialize) === null || _options$partialize3 === void 0 ? void 0 : _options$partialize3.call(options, get())) || get();
+      var deltaState = options === null || options === void 0 || (_options$diff3 = options.diff) === null || _options$diff3 === void 0 ? void 0 : _options$diff3.call(options, pastState, currentState);
+      if (
+      // Don't call handleSet if state hasn't changed, as determined by diff fn or equality fn
+      !(
+      // If the user has provided a diff function but nothing has been changed, deltaState will be null
+
+      deltaState === null || // If the user has provided an equality function, use it
+      options !== null && options !== void 0 && (_options$equality = options.equality) !== null && _options$equality !== void 0 && _options$equality.call(options, pastState, currentState))) {
+        curriedHandleSet(pastState, void 0, currentState, deltaState);
+      }
+    };
+    var setState = store.setState;
+    store.setState = function () {
+      var _options$partialize4;
+      var pastState = (options === null || options === void 0 || (_options$partialize4 = options.partialize) === null || _options$partialize4 === void 0 ? void 0 : _options$partialize4.call(options, get())) || get();
+      setState.apply(void 0, arguments);
+      temporalHandleSet(pastState);
+    };
+    return config(
+    // Modify the set function to call the userlandSet function
+    function () {
+      var _options$partialize5;
+      var pastState = (options === null || options === void 0 || (_options$partialize5 = options.partialize) === null || _options$partialize5 === void 0 ? void 0 : _options$partialize5.call(options, get())) || get();
+      set.apply(void 0, arguments);
+      temporalHandleSet(pastState);
+    }, get, store);
+  };
+  return configWithTemporal;
+};
+var findNode = function findNode(obj, id) {
+  for (var key in obj) {
+    if (!['props', 'children'].includes(key)) {
+      if (key === id) {
+        return {
+          target: obj[key],
+          parent: obj
+        };
+      }
+      if ((0, _typeof2.default)(obj[key]) === 'object' && !Array.isArray(obj[key])) {
+        var result = findNode(obj[key], id);
+        if (result) {
+          return result;
+        }
+      }
+    }
+  }
+  return null;
+};
+var usePageDataStore = (0, _zustand.create)()((0, _immer.immer)((0, _middleware.subscribeWithSelector)(temporal(function (set) {
+  return {
+    pageData: null,
+    moduleData: null,
+    needPrompt: false,
+    initialize: function initialize(data) {
+      return set(function (state) {
+        state.pageData = data;
+      });
+    },
+    initializeModule: function initializeModule(data) {
+      return set(function (state) {
+        state.moduleData = data;
+      });
+    },
+    reset: function reset(data) {
+      return set(function (state) {
+        state.pageData = data || null;
+      });
+    }
+  };
+}, {
+  partialize: function partialize(state) {
+    return {
+      pageData: state.pageData
+    };
+  },
+  equality: function equality(pastState, newState) {
+    return (0, _fastDeepEqual.default)(pastState, newState);
+  },
+  handleSet: function handleSet(_handleSet2) {
+    return (0, _lodash.debounce)(function (state) {
+      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key2 = 1; _key2 < _len; _key2++) {
+        args[_key2 - 1] = arguments[_key2];
+      }
+      return _handleSet2.apply(void 0, [state].concat(args));
+    }, 400, {
+      leading: true,
+      trailing: false
+    });
+  }
+}))));
+var _default = exports.default = usePageDataStore;
+usePageDataStore.subscribe(function (state) {
+  return state.pageData;
+}, function (_, prev) {
+  if (prev !== null) {
+    usePageDataStore.setState(function (state) {
+      if (state.needPrompt === false) state.needPrompt = true;
+    });
+  }
+});
+var resetPageData = exports.resetPageData = function resetPageData(data) {
+  usePageDataStore.setState(function (state) {
+    state.pageData = data || null;
+  });
+};
+var addNode = exports.addNode = function addNode(parentId, id, data) {
+  usePageDataStore.setState(function (state) {
+    if (parentId === _constants.LC_BUILDIN_UNIT_KEY.PAGE_ROOT) {
+      state.pageData.children.push(id);
+      state.pageData[id] = {
+        props: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, data), {}, {
+          id: id,
+          parentId: parentId
+        })
+      };
+      return;
+    }
+    var _ref = findNode(state.pageData, parentId) || {},
+      target = _ref.target;
+    if (!target) return;
+    if (!target.hasOwnProperty('children')) {
+      target.children = [];
+    }
+    if (!target.children.includes(id)) {
+      target.children.push(id);
+      target[id] = {
+        props: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, data), {}, {
+          id: id,
+          parentId: parentId
+        })
+      };
+    }
+  });
+};
+var deleteNode = exports.deleteNode = function deleteNode(id) {
+  usePageDataStore.setState(function (state) {
+    var _parent$children;
+    var _ref2 = findNode(state.pageData, id) || {},
+      parent = _ref2.parent;
+    if (!parent || !((_parent$children = parent.children) !== null && _parent$children !== void 0 && _parent$children.length)) return;
+    parent.children.splice(parent.children.indexOf(id), 1);
+    if (parent.children.length === 0) {
+      delete parent['children'];
+    }
+    delete parent[id];
+  });
+};
+var modifyNode = exports.modifyNode = function modifyNode(id, data) {
+  usePageDataStore.setState(function (state) {
+    if (id === _constants.LC_BUILDIN_UNIT_KEY.PAGE_ROOT) {
+      (0, _lodash.assign)(state.pageData.props, (0, _lodash.omit)(data, ['id', 'parentId', 'component', 'buildIn']));
+      return;
+    }
+    var _ref3 = findNode(state.pageData, id) || {},
+      target = _ref3.target;
+    if (!target) return;
+    (0, _lodash.forOwn)((0, _lodash.omit)(data, ['id', 'parentId', 'component', 'buildIn']), function (_val, _key) {
+      if ((0, _lodash.isNil)(_val)) {
+        (0, _lodash.unset)(target.props, _key, _val);
+      } else {
+        (0, _lodash.set)(target.props, _key, _val);
+      }
+    });
+  });
+};
+var clearChildren = exports.clearChildren = function clearChildren(id) {
+  usePageDataStore.setState(function (state) {
+    if (id === _constants.LC_BUILDIN_UNIT_KEY.PAGE_ROOT) {
+      return;
+    }
+    var _ref4 = findNode(state.pageData, id) || {},
+      target = _ref4.target;
+    if (!target) return;
+    (0, _lodash.forEach)(target.children, function (c) {
+      delete target[c];
+    });
+    delete target['children'];
+  });
+};
+var useTask = exports.useTask = function useTask(type) {
+  var promiseRef = (0, _react.useRef)(null);
+  var task = (0, _react.useCallback)(function () {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key3 = 0; _key3 < _len2; _key3++) {
+      args[_key3] = arguments[_key3];
+    }
+    return new Promise(function (resolve) {
+      promiseRef.current = resolve;
+      switch (type) {
+        case 'add':
+          addNode.apply(void 0, args);
+          break;
+        case 'update':
+        case 'modify':
+          modifyNode.apply(void 0, args);
+          break;
+        case 'delete':
+          deleteNode.apply(void 0, args);
+          break;
+        default:
+          break;
+      }
+    });
+  }, []);
+  (0, _react.useEffect)(function () {
+    var unsub = usePageDataStore.subscribe(function (state, prevState) {
+      if (!promiseRef.current) {
+        return;
+      }
+      promiseRef.current(state.pageData, prevState.pageData);
+      promiseRef.current = null;
+    });
+    return unsub;
+  }, []);
+  return task;
+};
+var useGet = exports.useGet = function useGet(_) {
+  var result = usePageDataStore((0, _shallow.useShallow)(function (state) {
+    if ((0, _lodash.isNil)(_)) {
+      return state.pageData;
+    } else if ((0, _lodash.isFunction)(_)) {
+      return _(state.pageData);
+    } else if ((0, _lodash.isArray)(_)) {
+      return _.map(function (k) {
+        var _findNode;
+        return k.includes('.') ? (0, _lodash.get)(state.pageData, k) : (_findNode = findNode(state.pageData, k)) === null || _findNode === void 0 ? void 0 : _findNode.target;
+      });
+    } else if ((0, _lodash.isObject)(_) && _.id) {
+      var _findNode2;
+      var path = _.path;
+      var _target = _.id === _constants.LC_BUILDIN_UNIT_KEY.PAGE_ROOT ? state.pageData : (_findNode2 = findNode(state.pageData, _.id)) === null || _findNode2 === void 0 ? void 0 : _findNode2.target;
+      return (0, _lodash.isNil)(path) ? _target : (0, _lodash.get)(_target, path);
+    } else if ((0, _lodash.isString)(_)) {
+      return (0, _lodash.get)(state.pageData, _);
+    }
+  }));
+  return result;
+};
+var getModuleData = exports.getModuleData = function getModuleData() {
+  return usePageDataStore.getState().moduleData;
+};
+var setNeedPrompt = exports.setNeedPrompt = function setNeedPrompt(_need) {
+  usePageDataStore.setState(function (state) {
+    state.needPrompt = _need;
+  });
+};
+var getNeedPrompt = exports.getNeedPrompt = function getNeedPrompt() {
+  return usePageDataStore.getState().needPrompt;
+};
+var useTemporalStore = exports.useTemporalStore = function useTemporalStore(selector) {
+  var _temp$pastStates, _temp$futureStates;
+  var temp = (0, _zustand.useStore)(usePageDataStore.temporal, selector);
+  if (!temp) return {
+    canUndo: false,
+    canRedo: false
+  };
+  var canUndo = !!((_temp$pastStates = temp.pastStates) !== null && _temp$pastStates !== void 0 && _temp$pastStates.length);
+  var canRedo = !!((_temp$futureStates = temp.futureStates) !== null && _temp$futureStates !== void 0 && _temp$futureStates.length);
+  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, temp), {}, {
+    canUndo: canUndo,
+    canRedo: canRedo
+  });
+};
+var getLevelNodes = exports.getLevelNodes = function getLevelNodes(id) {
+  return (0, _dataProcess.getPathNodesById)(usePageDataStore.getState().pageData, id);
+};
+var getSelfAndParent = exports.getSelfAndParent = function getSelfAndParent(id) {
+  return (0, _dataProcess.findNodeAndParent)(id, usePageDataStore.getState().pageData);
+};

package/lib/lowcode/engine/tools/usePromiseState.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _ahooks = require("ahooks");
+var usePromiseState = function usePromiseState(initialState) {
+  var _useState = (0, _react.useState)(initialState),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var promiseRef = (0, _react.useRef)(null);
+  var setStatePromise = (0, _react.useCallback)(function (_state) {
+    return new Promise(function (resolve) {
+      promiseRef.current = resolve;
+      setState(_state);
+    });
+  }, []);
+  (0, _ahooks.useUpdateLayoutEffect)(function () {
+    if (promiseRef.current) {
+      promiseRef.current(state);
+      promiseRef.current = null;
+    }
+  }, [state]);
+  return [state, setStatePromise];
+};
+var _default = exports.default = usePromiseState;

package/lib/lowcode/engine/tools/useTodo.js

@@ -0,0 +1,95 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _ahooks = require("ahooks");
+var _antd = require("luck-design/antd");
+var _lodash = require("lodash");
+var _usePageDataStore = _interopRequireDefault(require("./usePageDataStore"));
+var _helper = require("./helper");
+var _apiUrl = require("../../constants/api-url");
+var _excluded = ["datasetCode"];
+var useTodo = function useTodo() {
+  var _useBoolean = (0, _ahooks.useBoolean)(),
+    _useBoolean2 = (0, _slicedToArray2.default)(_useBoolean, 2),
+    loading = _useBoolean2[0],
+    _useBoolean2$ = _useBoolean2[1],
+    setTrue = _useBoolean2$.setTrue,
+    setFalse = _useBoolean2$.setFalse;
+  var callBehavior = (0, _ahooks.useMemoizedFn)(function (_ref, params, data) {
+    var moduleCode = _ref.moduleCode,
+      datasetCode = _ref.datasetCode,
+      behaviorKey = _ref.behaviorKey;
+    return (0, _apiUrl.fetchCallBehavior)((0, _objectSpread2.default)({
+      moduleCode: moduleCode,
+      datasetCode: datasetCode,
+      behaviorKey: behaviorKey
+    }, params), data);
+  });
+  var moduleData = (0, _usePageDataStore.default)(function (state) {
+    return state.moduleData;
+  });
+  var todo = (0, _ahooks.useMemoizedFn)(function (ctx, actionPool) {
+    var argsMap = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    if ((0, _lodash.isNil)(actionPool)) {
+      return Promise.resolve();
+    }
+    var dsCode = argsMap.datasetCode,
+      args = (0, _objectWithoutProperties2.default)(argsMap, _excluded);
+    var argsName = (0, _lodash.keys)(args);
+    var _args = argsName.map(function (n) {
+      return args[n];
+    });
+    if (actionPool.length > 0) {
+      setTrue();
+      var tasks = actionPool.map(function (_ref2) {
+        var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
+          actionKey = _ref3[0],
+          info = _ref3[1];
+        switch (info.category) {
+          case 'custom':
+            return Promise.resolve(_helper.executeCode.apply(void 0, [ctx, info.code, argsName].concat((0, _toConsumableArray2.default)(_args))));
+          case 'page-action':
+            {
+              var _ref4 = _helper.executeCode.apply(void 0, [ctx, info.code, argsName].concat((0, _toConsumableArray2.default)(_args))) || {},
+                moduleCode = _ref4.moduleCode,
+                datasetCode = _ref4.datasetCode,
+                params = _ref4.params,
+                data = _ref4.data,
+                after = _ref4.after;
+              var _moduleCode = moduleCode || moduleData.moduleCode;
+              var _dscode = datasetCode || dsCode;
+              if (!_moduleCode || !_dscode) {
+                _antd.message.warning('接口重要参数（模块编码或数据集编码）丢失');
+                return;
+              }
+              return callBehavior({
+                datasetCode: _dscode,
+                moduleCode: _moduleCode,
+                behaviorKey: actionKey
+              }, params, data).then(function (res) {
+                if ((0, _lodash.isFunction)(after)) {
+                  after(ctx, res);
+                }
+              });
+            }
+          case 'trigger':
+            return Promise.resolve();
+          default:
+            break;
+        }
+      });
+      return Promise.all(tasks).finally(setFalse);
+    }
+    return Promise.resolve();
+  });
+  return [todo, callBehavior, loading];
+};
+var _default = exports.default = useTodo;

package/lib/lowcode/index.js

@@ -10,6 +10,12 @@ Object.defineProperty(exports, "Painter", {
     return _painter.default;
   }
 });
+Object.defineProperty(exports, "Preview", {
+  enumerable: true,
+  get: function get() {
+    return _preview.default;
+  }
+});
 Object.defineProperty(exports, "View", {
   enumerable: true,
   get: function get() {
@@ -17,4 +23,5 @@ Object.defineProperty(exports, "View", {
   }
 });
 var _painter = _interopRequireDefault(require("./painter"));
-var _view = _interopRequireDefault(require("./view"));
+var _view = _interopRequireDefault(require("./view"));
+var _preview = _interopRequireDefault(require("./preview"));

package/lib/lowcode/painter/Components.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
@@ -13,8 +14,10 @@ var _antd = require("luck-design/antd");
 var _ahooks = require("ahooks");
 var _utils = require("@luck-design-biz/base/utils");
 var _ContextProvider = require("../engine/provider/ContextProvider");
+var _core = require("@dnd-kit/core");
 var _components = _interopRequireDefault(require("./style/components.less"));
 var _componentsList = _interopRequireDefault(require("../engine/meta/components-list.json"));
+var _DragDropContext = require("./components/DragDrop/DragDropContext");
 var TabPane = _antd.Tabs.TabPane;
 var Search = _antd.Input.Search;
 var BaseCom = function BaseCom(_ref) {
@@ -36,7 +39,7 @@ var BaseCom = function BaseCom(_ref) {
     }).filter(function (group) {
       return group.components.length > 0;
     });
-  }, [_componentsList.default]);
+  }, [searchTerm]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: _components.default['components-search']
   }, /*#__PURE__*/_react.default.createElement(Search, {
@@ -52,30 +55,53 @@ var BaseCom = function BaseCom(_ref) {
       key: group.group,
       className: _components.default['components-wrapper']
     }, /*#__PURE__*/_react.default.createElement("h3", null, group.groupName), group.components.map(function (item) {
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/_react.default.createElement(CompItem, {
         key: item.component,
-        className: _components.default['components-item'],
-        onClick: function onClick() {
-          return onComponentClick(item);
-        }
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: _components.default['icon-wrapper']
-      }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
-        type: item.icon || 'home'
-      })), /*#__PURE__*/_react.default.createElement("div", {
-        className: _components.default['text-content']
-      }, /*#__PURE__*/_react.default.createElement("span", null, item.name)));
+        item: item,
+        onComponentClick: onComponentClick
+      });
     }));
   })));
 };
+var CompItem = function CompItem(_ref2) {
+  var item = _ref2.item,
+    onComponentClick = _ref2.onComponentClick;
+  // console.log('CompItem', item.component);
+  var _useDraggable = (0, _core.useDraggable)({
+      id: 'comlist-' + item.component,
+      data: {
+        component: item,
+        action: _DragDropContext.Action.ADD
+      }
+    }),
+    attributes = _useDraggable.attributes,
+    listeners = _useDraggable.listeners,
+    transform = _useDraggable.transform,
+    setNodeRef = _useDraggable.setNodeRef;
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    ref: setNodeRef
+  }, listeners, attributes, {
+    key: item.component,
+    className: _components.default['components-item'],
+    onClick: function onClick() {
+      return onComponentClick(item);
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _components.default['icon-wrapper']
+  }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+    type: item.icon || 'home'
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _components.default['text-content']
+  }, /*#__PURE__*/_react.default.createElement("span", null, item.name)));
+};
 
 /**
  * 组件清单
  */
-var Components = function Components(_ref2) {
-  var _ref2$dataset = _ref2.dataset,
-    dataset = _ref2$dataset === void 0 ? 'test' : _ref2$dataset;
-  var context = (0, _ContextProvider.useLDContext)();
+var Components = function Components(_ref3) {
+  var _ref3$dataset = _ref3.dataset,
+    dataset = _ref3$dataset === void 0 ? 'test' : _ref3$dataset;
+  var context = (0, _ContextProvider.useContext)();
   var onComponentClick = (0, _ahooks.useMemoizedFn)(function (data) {
     context.$publisher(context.topics.COMPONENT_SETTING_CLICK, {
       data: data
@@ -103,10 +129,10 @@ var Components = function Components(_ref2) {
     onComponentClick: onComponentClick
   })), /*#__PURE__*/_react.default.createElement(TabPane, {
     tab: (0, _utils.formatMessage)({
-      id: 'ccm.dev.page.set.components.dataset',
-      label: '数据集字段'
+      id: 'ccm.dev.page.set.components.custom',
+      label: '自定义组件'
     }),
     key: "dataset"
-  })));
+  }, "\u656C\u8BF7\u671F\u5F85")));
 };
 var _default = exports.default = Components;