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

package/es/lowcode/painter/panel-section/IconConditionSelector.js

@@ -0,0 +1,111 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import { cloneDeep } from 'lodash';
+import { useMemoizedFn } from 'ahooks';
+import { Tooltip, Icon, Popover } from 'luck-design/antd';
+import { formatMessage } from '@luck-design-biz/base/utils';
+import { ListEditor, ListEditorItem } from "../components/ListEditor";
+import IconChoice from "./Icon";
+import IconSelector from "./IconSelector";
+import JSEditor from "./JSEditor";
+var _I18N_PREFIX_ = 'luckda.lowcode.painter.panel-section.iconConditionSelector';
+var IconConditionSelector = function IconConditionSelector(_ref) {
+  var defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange,
+    defaultCode = _ref.defaultCode;
+  var _useState = useState(cloneDeep(defaultValue)),
+    _useState2 = _slicedToArray(_useState, 2),
+    list = _useState2[0],
+    setList = _useState2[1];
+  var handleChange = useMemoizedFn(function (type, index, value) {
+    var _list = cloneDeep(list);
+    switch (type) {
+      case 'icon':
+        _list[index] = _objectSpread(_objectSpread({}, _list[index]), {}, {
+          icon: value
+        });
+        break;
+      case 'code':
+        _list[index] = _objectSpread(_objectSpread({}, _list[index]), {}, {
+          condition: value
+        });
+        break;
+      case 'delete':
+        _list.splice(index, 1);
+        break;
+      default:
+        ;
+    }
+    setList(_list);
+    onChange(_list);
+  });
+  var renderItemRight = useMemoizedFn(function (item, index) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
+      title: formatMessage({
+        id: 'luckda.lowcode.painter.bindCondition',
+        label: '绑定条件'
+      })
+    }, /*#__PURE__*/React.createElement(JSEditor, {
+      mustConfirm: true,
+      defaultCode: defaultCode,
+      onChange: function onChange(value) {
+        return handleChange('code', index, value);
+      }
+    }, /*#__PURE__*/React.createElement(Icon, {
+      type: "paper-clip",
+      style: {
+        marginRight: '8px',
+        cursor: 'pointer'
+      }
+    }))), /*#__PURE__*/React.createElement(Tooltip, {
+      title: formatMessage({
+        id: 'luckda.lowcode.painter.delete',
+        label: '删除'
+      })
+    }, /*#__PURE__*/React.createElement(Icon, {
+      type: "delete",
+      style: {
+        marginRight: '8px',
+        cursor: 'pointer'
+      },
+      onClick: function onClick() {
+        return handleChange('delete', index);
+      }
+    })));
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: '100%',
+      padding: '0 16px'
+    }
+  }, /*#__PURE__*/React.createElement(ListEditor, {
+    addText: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".add"),
+      label: '添加条件'
+    }),
+    handleAdd: function handleAdd() {
+      var _list = list.concat([{}]);
+      setList(_list);
+      onChange(_list);
+    }
+  }, list.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(ListEditorItem, {
+      sortable: false,
+      left: /*#__PURE__*/React.createElement(Popover, {
+        placement: "left",
+        content: /*#__PURE__*/React.createElement(IconSelector, {
+          value: item.icon,
+          onChange: function onChange(value) {
+            return handleChange('icon', index, value);
+          }
+        }),
+        trigger: "click"
+      }, /*#__PURE__*/React.createElement(IconChoice, {
+        value: item.icon
+      })),
+      right: renderItemRight(item, index)
+    });
+  })));
+};
+export default IconConditionSelector;

package/es/lowcode/painter/panel-section/IconSelector.js

@@ -0,0 +1,137 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useEffect, useState, useMemo, useCallback } from 'react';
+import { Icon, Input, Tooltip } from 'luck-design/antd';
+import { useMemoizedFn } from 'ahooks';
+import styles from "../style/icon-selector.less";
+import { request } from '@luck-design-biz/base/utils';
+import { formatMessage } from '@luck-design-biz/base/utils';
+import { ICONLIST_URL, ICONLIST_JS } from "../../constants/api-url";
+var Search = Input.Search;
+
+/**
+ * 一个用于选择图标的组件，提供了图标的搜索和选择功能。
+ *
+ * 该组件首先从预定义的URL加载图标列表，然后显示这些图标。用户可以通过输入框搜索图标，
+ * 点击图标时，会通过 `onChange` 回调将选中的图标信息返回给父组件。
+ *
+ * @component
+ * @example
+ * ```jsx
+ * <IconSelector
+ *   onChange={(selectedIcon) => console.log(selectedIcon)}
+ * />
+ * ```
+ *
+ * @param {Object} props 组件接受的props
+ * @param {Function} props.onChange 当图标被选中时触发的回调函数，接受选中图标的信息作为参数
+ */
+export default function (_ref) {
+  var onChange = _ref.onChange,
+    onSelect = _ref.onSelect;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    iconData = _useState2[0],
+    setIconData = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    searchTerm = _useState4[0],
+    setSearchTerm = _useState4[1];
+  var IconFont = Icon.createFromIconfontCN({
+    scriptUrl: ICONLIST_JS
+  });
+  function getIconList() {
+    return _getIconList.apply(this, arguments);
+  }
+  function _getIconList() {
+    _getIconList = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            return _context2.abrupt("return", request(ICONLIST_URL, {
+              method: 'get'
+            }));
+          case 1:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return _getIconList.apply(this, arguments);
+  }
+  useEffect(function () {
+    var fetchData = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        var data;
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              _context.next = 3;
+              return getIconList();
+            case 3:
+              data = _context.sent;
+              setIconData(data);
+              _context.next = 10;
+              break;
+            case 7:
+              _context.prev = 7;
+              _context.t0 = _context["catch"](0);
+              console.error('获取数据失败', _context.t0);
+            case 10:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[0, 7]]);
+      }));
+      return function fetchData() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    fetchData();
+  }, []);
+  var handleSearch = useCallback(function (e) {
+    setSearchTerm(e.target.value.toLowerCase());
+  }, []);
+  var filteredData = useMemo(function () {
+    if (iconData && iconData.glyphs) {
+      return iconData.glyphs.filter(function (item) {
+        return item.name.toLowerCase().includes(searchTerm) || item.font_class.toLowerCase().includes(searchTerm);
+      });
+    }
+    return [];
+  }, [iconData, searchTerm]);
+  var handleClick = useMemoizedFn(function (icon) {
+    var _iconfont = "".concat(iconData.css_prefix_text).concat(icon.font_class);
+    onSelect === null || onSelect === void 0 || onSelect(_iconfont);
+    onChange(_iconfont);
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-panel-section-iconselector']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['components-search']
+  }, /*#__PURE__*/React.createElement(Search, {
+    placeholder: formatMessage({
+      id: 'luckda.lowcode.painter.components.search',
+      label: '搜索组件'
+    }),
+    onChange: handleSearch
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles['icon-warp']
+  }, filteredData && filteredData.length > 0 && filteredData.map(function (iconItem) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: iconItem.font_class,
+      className: styles['icon-box'],
+      onClick: function onClick() {
+        return handleClick(iconItem);
+      }
+    }, /*#__PURE__*/React.createElement(Tooltip, {
+      placement: "top",
+      title: iconItem.name
+    }, /*#__PURE__*/React.createElement(IconFont, {
+      className: styles['icon-item'],
+      type: "".concat(iconData.css_prefix_text).concat(iconItem.font_class)
+    })));
+  })));
+}

package/es/lowcode/painter/panel-section/ImpExp.js

@@ -0,0 +1,185 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import { useMemoizedFn, useSetState, useUpdateEffect } from 'ahooks';
+import { Checkbox, Row, Col, Input, Switch, Select, Spin, Tooltip, Radio } from 'luck-design/antd';
+import { formatMessage } from '@luck-design-biz/base/utils';
+import { isString } from 'lodash';
+import { useRemoteSource } from "../../engine/provider/ContextProvider";
+import PanelItem from "../components/PanelItem";
+import styles from "../style/impexp.less";
+var _I18N_PREFIX_ = 'luckda.lowcode.painter.panel-section.impexp';
+var ImpExp = function ImpExp(_ref) {
+  var defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange;
+  var _useSetState = useSetState(defaultValue || {}),
+    _useSetState2 = _slicedToArray(_useSetState, 2),
+    state = _useSetState2[0],
+    setState = _useSetState2[1];
+  var _useRemoteSource = useRemoteSource(),
+    module = _useRemoteSource.module,
+    impTypeList = _useRemoteSource.impTypeList,
+    expTypeList = _useRemoteSource.expTypeList;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    exportDisabled = _useState2[0],
+    setExportDisabled = _useState2[1];
+  useUpdateEffect(function () {
+    onChange(state);
+  }, [state]);
+  var handleCheckboxChange = useMemoizedFn(function (e) {
+    if (e.target.value === 'import') {
+      setState({
+        import: e.target.checked
+      });
+    } else if (e.target.value === 'export') {
+      setState({
+        export: e.target.checked
+      });
+    }
+  });
+  var handleInputChange = useMemoizedFn(function (field, e) {
+    var value = e.target.value.trim();
+    var _val = value === '' ? true : value;
+    console.log(_val);
+    if (field === 'import') {
+      setState({
+        import: _val
+      });
+    } else if (field === 'export') {
+      setState({
+        export: _val
+      });
+    }
+  });
+  var handleSwitchChangeExport = useMemoizedFn(function (field, e) {
+    var _value = field;
+    setState({
+      exportType: _value,
+      export: true
+    });
+  });
+  var handleSwitchChangeImport = useMemoizedFn(function (field, e) {
+    var _value = field;
+    setState({
+      importType: _value,
+      import: true
+    });
+  });
+  var handleRadioChangeExport = useMemoizedFn(function (value, _ref2) {
+    var key = _ref2.key;
+    var _value = value;
+    setState({
+      export: _value
+    });
+    setExportDisabled(false);
+  });
+  var handleSelectChangeExport = useMemoizedFn(function (value, _ref3) {
+    var key = _ref3.key;
+    var _value = value;
+    setState({
+      export: _value
+    });
+  });
+  var handleSelectChangeImport = useMemoizedFn(function (value, _ref4) {
+    var key = _ref4.key;
+    var _value = value;
+    setState({
+      import: _value
+    });
+  });
+  var handleTypeChange = useMemoizedFn(function (e) {
+    var _value = e.target.value;
+    setState({
+      importType: "".concat(_value) === '2',
+      import: true
+    });
+  });
+  var handleTypeChangeExport = useMemoizedFn(function (e) {
+    var _value = e.target.value;
+    setState({
+      export: "".concat(_value) === '2' ? '' : true
+    });
+    setExportDisabled("".concat(_value) === '2');
+  });
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PanelItem, {
+    label: "\u5BFC\u5165",
+    suppressPadding: true
+  }, /*#__PURE__*/React.createElement(Switch, {
+    size: "small",
+    defaultChecked: !!state.import,
+    onChange: handleSelectChangeImport
+  })), state.import && /*#__PURE__*/React.createElement(PanelItem, {
+    suppressPadding: true
+  }, /*#__PURE__*/React.createElement(Radio.Group, {
+    onChange: handleTypeChange,
+    defaultValue: !state.importType ? '1' : '2'
+  }, /*#__PURE__*/React.createElement(Radio, {
+    value: "1"
+  }, "\u6A21\u7248ID"), /*#__PURE__*/React.createElement(Radio, {
+    value: "2"
+  }, "\u81EA\u5B9A\u4E49\u884C\u4E3A"))), state.import && /*#__PURE__*/React.createElement(PanelItem, {
+    suppressPadding: true
+  }, !state.importType ? /*#__PURE__*/React.createElement(Input, {
+    size: "small",
+    value: isString(state.import) ? state.import : '',
+    onChange: function onChange(e) {
+      return handleInputChange('import', e);
+    },
+    placeholder: "\u8BF7\u8F93\u5165\u6A21\u7248ID"
+  }) : /*#__PURE__*/React.createElement(Select, {
+    size: "small",
+    style: {
+      width: '100%'
+    },
+    value: isString(state.import) ? state.import : undefined,
+    onChange: handleSelectChangeImport,
+    placeholder: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".impType.placeholder"),
+      label: '请选择自定义行为'
+    })
+  }, impTypeList.map(function (opt) {
+    return /*#__PURE__*/React.createElement(Select.Option, {
+      key: opt.key,
+      value: opt.value
+    }, /*#__PURE__*/React.createElement(Tooltip, {
+      title: opt.label
+    }, opt.label));
+  }))), /*#__PURE__*/React.createElement(PanelItem, {
+    label: "\u5BFC\u51FA",
+    suppressPadding: true
+  }, /*#__PURE__*/React.createElement(Switch, {
+    size: "small",
+    defaultChecked: !!(isString(state.export) ? true : state.export),
+    onChange: handleRadioChangeExport
+  })), (state.export || isString(state.export)) && /*#__PURE__*/React.createElement(PanelItem, {
+    suppressPadding: true
+  }, /*#__PURE__*/React.createElement(Radio.Group, {
+    onChange: handleTypeChangeExport,
+    defaultValue: !isString(state.export) ? '1' : '2'
+  }, /*#__PURE__*/React.createElement(Radio, {
+    value: "1"
+  }, "\u9ED8\u8BA4"), /*#__PURE__*/React.createElement(Radio, {
+    value: "2"
+  }, "\u81EA\u5B9A\u4E49\u884C\u4E3A"))), (!!exportDisabled || isString(state.export)) && /*#__PURE__*/React.createElement(PanelItem, {
+    suppressPadding: true
+  }, /*#__PURE__*/React.createElement(Select, {
+    size: "small",
+    style: {
+      width: '100%'
+    },
+    value: isString(state.export) && state.export ? state.export : undefined,
+    onChange: handleSelectChangeExport,
+    placeholder: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".expType.placeholder"),
+      label: '请选择自定义行为'
+    })
+  }, expTypeList === null || expTypeList === void 0 ? void 0 : expTypeList.map(function (opt) {
+    return /*#__PURE__*/React.createElement(Select.Option, {
+      key: opt.key,
+      value: opt.value
+    }, /*#__PURE__*/React.createElement(Tooltip, {
+      title: opt.label
+    }, opt.label));
+  }))));
+};
+export default ImpExp;

package/es/lowcode/painter/panel-section/ImpExpAlone.js

@@ -0,0 +1,123 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React from 'react';
+import { useMemoizedFn, useSetState, useUpdateEffect } from 'ahooks';
+import { Input, Select, Tooltip, Radio } from 'luck-design/antd';
+import { Segmented } from 'luck-design/antd';
+import { formatMessage } from '@luck-design-biz/base/utils';
+import PanelItem from "../components/PanelItem";
+import { isString } from 'lodash';
+import { useRemoteSource } from "../../engine/provider/ContextProvider";
+var _I18N_PREFIX_ = 'luckda.lowcode.painter.panel-section.impexp';
+var ImpExp = function ImpExp(_ref) {
+  var defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange;
+  var _useSetState = useSetState(defaultValue || {}),
+    _useSetState2 = _slicedToArray(_useSetState, 2),
+    state = _useSetState2[0],
+    setState = _useSetState2[1];
+  var _useRemoteSource = useRemoteSource(),
+    impTypeList = _useRemoteSource.impTypeList,
+    expTypeList = _useRemoteSource.expTypeList;
+  useUpdateEffect(function () {
+    onChange(state);
+  }, [state]);
+  var handleInputChange = useMemoizedFn(function (field, e) {
+    var _value = e.target.value.trim();
+    setState({
+      customParam: _value
+    });
+  });
+  var handleSelectChange = useMemoizedFn(function (value, e) {
+    var _value = value;
+    setState({
+      customParam: _value
+    });
+  });
+  var handleSegmentChange = useMemoizedFn(function (field, e) {
+    var _value = field;
+    setState({
+      type: _value,
+      customType: false,
+      customParam: undefined
+    });
+  });
+  var handleSwitchChange = useMemoizedFn(function (e) {
+    var _value = e.target.value;
+    setState({
+      customType: _value === '2',
+      customParam: undefined
+    });
+  });
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PanelItem, {
+    label: "\u7C7B\u578B",
+    suppressPadding: true
+  }, /*#__PURE__*/React.createElement(Segmented, {
+    options: [{
+      value: 'import',
+      label: '导入'
+    }, {
+      value: 'export',
+      label: '导出'
+    }],
+    onChange: handleSegmentChange,
+    defaultValue: state.type,
+    block: true
+  })), state.type === 'import' && /*#__PURE__*/React.createElement(PanelItem, {
+    suppressPadding: true
+  }, /*#__PURE__*/React.createElement(Radio.Group, {
+    onChange: handleSwitchChange,
+    defaultValue: !state.customType ? '1' : '2'
+  }, /*#__PURE__*/React.createElement(Radio, {
+    value: "1"
+  }, "\u6A21\u7248ID"), /*#__PURE__*/React.createElement(Radio, {
+    value: "2"
+  }, "\u81EA\u5B9A\u4E49\u884C\u4E3A"))), state.type === 'import' && /*#__PURE__*/React.createElement(PanelItem, {
+    suppressPadding: true
+  }, !state.customType ? /*#__PURE__*/React.createElement(Input, {
+    size: "small",
+    value: isString(state.customParam) ? state.customParam : '',
+    onChange: function onChange(e) {
+      return handleInputChange(state.type, e);
+    },
+    placeholder: "\u8BF7\u8F93\u5165\u6A21\u7248ID"
+  }) : /*#__PURE__*/React.createElement(Select, {
+    size: "small",
+    style: {
+      width: '100%'
+    },
+    value: isString(state.customParam) ? state.customParam : undefined,
+    onChange: handleSelectChange,
+    placeholder: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".expType.placeholder"),
+      label: '请选择自定义行为'
+    })
+  }, impTypeList.map(function (opt) {
+    return /*#__PURE__*/React.createElement(Select.Option, {
+      key: opt.key,
+      value: opt.value
+    }, /*#__PURE__*/React.createElement(Tooltip, {
+      title: opt.label
+    }, opt.label));
+  }))), state.type === 'export' && /*#__PURE__*/React.createElement(PanelItem, {
+    suppressPadding: true
+  }, /*#__PURE__*/React.createElement(Select, {
+    size: "small",
+    style: {
+      width: '100%'
+    },
+    value: isString(state.customParam) ? state.customParam : undefined,
+    onChange: handleSelectChange,
+    placeholder: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".expType.placeholder"),
+      label: '请选择自定义行为'
+    })
+  }, expTypeList === null || expTypeList === void 0 ? void 0 : expTypeList.map(function (opt) {
+    return /*#__PURE__*/React.createElement(Select.Option, {
+      key: opt.key,
+      value: opt.value
+    }, /*#__PURE__*/React.createElement(Tooltip, {
+      title: opt.label
+    }, opt.label));
+  }))));
+};
+export default ImpExp;

package/es/lowcode/painter/panel-section/JSEditor.js

@@ -0,0 +1,49 @@
+import React, { useRef } from 'react';
+import { useMemoizedFn } from 'ahooks';
+import { Button } from 'luck-design/antd';
+import { debounce } from 'lodash';
+import { formatMessage } from '@luck-design-biz/base/utils';
+import PopConfirm from "../components/PopConfirm";
+import FullScreenEditor from "../components/code-editor/FullScreenEditor";
+import JSEditor from "../components/code-editor/JSEditor";
+var _JSEditor = function _JSEditor(_ref) {
+  var defaultValue = _ref.defaultValue,
+    defaultCode = _ref.defaultCode,
+    onChange = _ref.onChange,
+    mustConfirm = _ref.mustConfirm,
+    children = _ref.children;
+  var editorRef = useRef();
+  var handleCodeChange = useRef(debounce(function (code) {
+    if (!mustConfirm) onChange(code);
+  }, 400));
+  var handleConfirm = useMemoizedFn(function () {
+    onChange(editorRef.current.editor.getValue());
+  });
+  var handleEditorLoad = useMemoizedFn(function () {
+    editorRef.current.editor.setValue(defaultValue || defaultCode);
+  });
+  return /*#__PURE__*/React.createElement(PopConfirm, {
+    placement: "left",
+    title: /*#__PURE__*/React.createElement(FullScreenEditor, {
+      ref: editorRef,
+      EditorComponent: JSEditor,
+      width: "600px",
+      height: "400px",
+      onChange: handleCodeChange.current,
+      onLoad: handleEditorLoad
+    }),
+    showBtn: mustConfirm,
+    onConfirm: handleConfirm
+  }, children !== null && children !== void 0 ? children : /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: '0 16px'
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    block: true,
+    size: "small"
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.sourceedit',
+    label: '源码编辑'
+  }))));
+};
+export default _JSEditor;