@luck-design-biz/luckda 0.0.25-1 → 0.0.25-11

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

@@ -1,9 +1,10 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React from 'react';
+import React, { useState } from 'react';
 import { useMemoizedFn, useSetState, useUpdateEffect } from 'ahooks';
-import { Checkbox, Row, Col, Input } from 'luck-design/antd';
+import { Checkbox, Row, Col, Input, Switch, Select, Tooltip } from 'luck-design/antd';
 import { formatMessage } from '@luck-design-biz/base/utils';
 import { isString } from 'lodash';
+import { useRemoteSource } from "../../engine/provider/ContextProvider";
 import styles from "../style/impexp.less";
 var _I18N_PREFIX_ = 'luckda.lowcode.painter.panel-section.impexp';
 var ImpExp = function ImpExp(_ref) {
@@ -13,6 +14,14 @@ var ImpExp = function ImpExp(_ref) {
     _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(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    exportDisabled = _useState2[0],
+    setExportDisabled = _useState2[1];
   useUpdateEffect(function () {
     onChange(state);
   }, [state]);
@@ -41,6 +50,34 @@ var ImpExp = function ImpExp(_ref) {
       });
     }
   });
+  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 handleSelectChangeExport = useMemoizedFn(function (value, _ref2) {
+    var key = _ref2.key;
+    var _value = value;
+    setState({
+      export: _value
+    });
+  });
+  var handleSelectChangeImport = useMemoizedFn(function (value, _ref3) {
+    var key = _ref3.key;
+    var _value = value;
+    setState({
+      import: _value
+    });
+  });
   return /*#__PURE__*/React.createElement(Row, {
     gutter: [0, 8],
     className: styles['lc-painter-panel-section-impexp']
@@ -54,17 +91,43 @@ var ImpExp = function ImpExp(_ref) {
     id: 'luckda.lowcode.painter.import',
     label: '导入'
   }))), /*#__PURE__*/React.createElement(Col, {
-    span: 18
-  }, /*#__PURE__*/React.createElement(Input, {
+    span: 14
+  }, !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_, ".impUrl.placeholder"),
-      label: '请输入模版ID或自定义接口'
+      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(Col, {
+    span: 4,
+    style: {
+      textAlign: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(Switch, {
+    size: "small",
+    defaultChecked: !!state.importType,
+    onChange: handleSwitchChangeImport,
+    checkedChildren: "\u884C\u4E3A",
+    unCheckedChildren: "\u6A21\u7248"
   })), /*#__PURE__*/React.createElement(Col, {
     span: 6
   }, /*#__PURE__*/React.createElement(Checkbox, {
@@ -75,17 +138,39 @@ var ImpExp = function ImpExp(_ref) {
     id: 'luckda.lowcode.painter.export',
     label: '导出'
   }))), /*#__PURE__*/React.createElement(Col, {
-    span: 18
-  }, /*#__PURE__*/React.createElement(Input, {
+    span: 14
+  }, /*#__PURE__*/React.createElement(Select, {
     size: "small",
-    value: isString(state.export) ? state.export : '',
-    onChange: function onChange(e) {
-      return handleInputChange('export', e);
+    style: {
+      width: '100%'
     },
+    value: isString(state.export) ? state.export : undefined,
+    onChange: handleSelectChangeExport,
     placeholder: formatMessage({
-      id: "".concat(_I18N_PREFIX_, ".expUrl.placeholder"),
-      label: '请输入自定义接口'
-    })
+      id: "".concat(_I18N_PREFIX_, ".expType.placeholder"),
+      label: '请选择自定义行为'
+    }),
+    disabled: !!exportDisabled
+  }, 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));
+  }))), /*#__PURE__*/React.createElement(Col, {
+    span: 4,
+    style: {
+      textAlign: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(Switch, {
+    size: "small",
+    defaultChecked: false,
+    onChange: function onChange(val) {
+      setExportDisabled(!val);
+    },
+    checkedChildren: "\u884C\u4E3A",
+    unCheckedChildren: "\u9ED8\u8BA4"
   })));
 };
 export default ImpExp;

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

@@ -0,0 +1,108 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React from 'react';
+import { useMemoizedFn, useSetState, useUpdateEffect } from 'ahooks';
+import { Checkbox, Row, Col, Input, Switch, Select, Tooltip, Spin } 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";
+import styles from "../style/impexp.less";
+var _I18N_PREFIX_ = 'luckda.lowcode.painter.panel-section.impexp';
+var ImpExp = function ImpExp(_ref) {
+  var _ref2;
+  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
+    });
+  });
+  var handleSwitchChange = useMemoizedFn(function (field, e) {
+    var _value = field;
+    setState({
+      customType: _value,
+      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
+  })), /*#__PURE__*/React.createElement(PanelItem, {
+    label: "\u81EA\u5B9A\u4E49",
+    suppressPadding: true
+  }, /*#__PURE__*/React.createElement(Col, {
+    span: 14
+  }, !state.customType && state.type === 'import' ? /*#__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: '请选择自定义行为'
+    })
+  }, (_ref2 = state.type === 'export' ? expTypeList : impTypeList) === null || _ref2 === void 0 ? void 0 : _ref2.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 === 'import' && /*#__PURE__*/React.createElement(Col, {
+    span: 4,
+    style: {
+      textAlign: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(Switch, {
+    size: "small",
+    defaultChecked: !!state.customType,
+    onChange: handleSwitchChange,
+    checkedChildren: "\u884C\u4E3A",
+    unCheckedChildren: "\u6A21\u7248"
+  }))));
+};
+export default ImpExp;

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

@@ -0,0 +1,95 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import { useMemoizedFn } from 'ahooks';
+import classNames from 'classnames';
+import { Tooltip } from 'luck-design/antd';
+import styles from "../style/page-layout-display.less";
+var _TYPES_ = ['lr', 'lmr', 'ltb'];
+var PageLayoutDisplay = function PageLayoutDisplay(_ref) {
+  var defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange;
+  var _useState = useState(defaultValue || 'lr'),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeType = _useState2[0],
+    setActiveType = _useState2[1];
+  var handleTypeChange = useMemoizedFn(function (value) {
+    setActiveType(value);
+    onChange(value);
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-panel-section-pagelayoutdisplay']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['display-type-box']
+  }, _TYPES_.map(function (_type) {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      key: _type,
+      title: _type
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classNames(styles['display-type-item'], _defineProperty({}, styles.active, activeType === _type)),
+      style: {
+        flexDirection: 'row'
+      },
+      onClick: function onClick() {
+        return handleTypeChange(_type);
+      }
+    }, _type === 'lr' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        flex: 1,
+        marginRight: 4
+      },
+      className: styles['item-block']
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        flex: 3
+      },
+      className: styles['item-block']
+    })), _type === 'lmr' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        flex: 1,
+        marginRight: 4
+      },
+      className: styles['item-block']
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        flex: 3,
+        display: 'flex'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '50%',
+        borderRight: '1px solid #eee'
+      },
+      className: styles['item-block']
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '50%'
+      },
+      className: styles['item-block']
+    }))), _type === 'ltb' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        flex: 1,
+        marginRight: 4
+      },
+      className: styles['item-block']
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        flex: 3,
+        display: 'flex',
+        flexDirection: 'column'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: '50%',
+        borderBottom: '1px solid #eee'
+      },
+      className: styles['item-block']
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: '50%'
+      },
+      className: styles['item-block']
+    })))));
+  })));
+};
+export default PageLayoutDisplay;

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

@@ -8,7 +8,7 @@ var Div = styled.div.withConfig({
 })(["display:flex;align-items:center;"]);
 var SerialsSelector = function SerialsSelector(_ref) {
   var defaultValue = _ref.defaultValue,
-    onChange = _ref.onChange,
+    _onChange = _ref.onChange,
     size = _ref.size;
   var _useRemoteSource = useRemoteSource(),
     serials = _useRemoteSource.serials,
@@ -18,7 +18,9 @@ var SerialsSelector = function SerialsSelector(_ref) {
     defaultValue: defaultValue,
     size: size,
     allowClear: true,
-    onChange: onChange,
+    onChange: function onChange(val) {
+      return _onChange(val);
+    },
     getPopupContainer: function getPopupContainer() {
       return document.getElementById('lc-design-workspace');
     },

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

@@ -5,14 +5,12 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useRef, useState } from 'react';
 import { useMemoizedFn, useCreation } from 'ahooks';
 import styled from 'styled-components';
-import classNames from 'classnames';
 import { isString, drop } from 'lodash';
-import { Tooltip, Segmented, Icon } from 'luck-design/antd';
+import { Segmented, Icon } from 'luck-design/antd';
 import { formatMessage } from '@luck-design-biz/base/utils';
 import RuleInput from "../components/RuleInput";
 import PanelItem from "../components/PanelItem";
 import styles from "../style/split-display.less";
-var _TYPES_ = ['normal', 'lr', 'lmr', 'ltb'];
 var _OPTIONS_ = [{
   label: formatMessage({
     id: 'luckda.lowcode.painter.panel-section.splitdisplay.splitVertical',
@@ -53,47 +51,27 @@ var SplitDisplay = function SplitDisplay(_ref) {
   var defaultValue = _ref.defaultValue,
     onChange = _ref.onChange;
   var valueRef = useRef(defaultValue);
-  var _useState = useState(defaultValue.type || 'normal'),
+  var _useState = useState(defaultValue.split || 'vertical'),
     _useState2 = _slicedToArray(_useState, 2),
-    activeType = _useState2[0],
-    setActiveType = _useState2[1];
-  var _useState3 = useState(defaultValue.split || 'vertical'),
+    split = _useState2[0],
+    setSplit = _useState2[1];
+  var _useState3 = useState(defaultValue.ratio || '1:1'),
     _useState4 = _slicedToArray(_useState3, 2),
-    split = _useState4[0],
-    setSplit = _useState4[1];
-  var _useState5 = useState(defaultValue.ratio || '1:1'),
-    _useState6 = _slicedToArray(_useState5, 2),
-    ratio = _useState6[0],
-    setRatio = _useState6[1];
+    ratio = _useState4[0],
+    setRatio = _useState4[1];
   var ratioArr = useCreation(function () {
     return ratio.split(':').map(function (r) {
       return parseInt(r);
     });
   }, [ratio]);
-  var _useState7 = useState(function () {
+  var _useState5 = useState(function () {
       return drop(ratioArr).map(function () {
         return split === 'vertical' ? 'right' : 'down';
       });
     }),
-    _useState8 = _slicedToArray(_useState7, 2),
-    fastTo = _useState8[0],
-    setFastTo = _useState8[1];
-  var handleTypeChange = useMemoizedFn(function (value) {
-    setActiveType(value);
-    if (value === 'normal') {
-      valueRef.current = {
-        type: value,
-        fastTo: fastTo,
-        split: split,
-        ratio: ratio
-      };
-    } else {
-      valueRef.current = {
-        type: value
-      };
-    }
-    onChange(valueRef.current);
-  });
+    _useState6 = _slicedToArray(_useState5, 2),
+    fastTo = _useState6[0],
+    setFastTo = _useState6[1];
   var handleFastToItemClick = useMemoizedFn(function (d, i) {
     var _fastTo = _toConsumableArray(fastTo);
     _fastTo[i] = _FAST_TO_MAPPING_[d];
@@ -125,84 +103,20 @@ var SplitDisplay = function SplitDisplay(_ref) {
     className: styles['lc-painter-panel-section-splitdisplay']
   }, /*#__PURE__*/React.createElement("div", {
     className: styles['display-type-box']
-  }, _TYPES_.map(function (_type) {
-    return /*#__PURE__*/React.createElement(Tooltip, {
-      key: _type,
-      title: _type
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classNames(styles['display-type-item'], _defineProperty({}, styles.active, activeType === _type)),
-      style: {
-        flexDirection: _type === 'normal' && split === 'horizontal' ? 'column' : 'row'
-      },
-      onClick: function onClick() {
-        return handleTypeChange(_type);
-      }
-    }, _type === 'normal' && ratioArr.map(function (r, i) {
-      return /*#__PURE__*/React.createElement("div", {
-        key: i,
-        style: _defineProperty({
-          flex: r
-        }, split === 'horizontal' ? 'borderBottom' : 'borderRight', i < ratioArr.length - 1 ? '1px solid #eee' : 'none'),
-        className: styles['item-block']
-      });
-    }), _type === 'lr' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-      style: {
-        flex: 1,
-        marginRight: 4
-      },
-      className: styles['item-block']
-    }), /*#__PURE__*/React.createElement("div", {
-      style: {
-        flex: 3
-      },
-      className: styles['item-block']
-    })), _type === 'lmr' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-      style: {
-        flex: 1,
-        marginRight: 4
-      },
-      className: styles['item-block']
-    }), /*#__PURE__*/React.createElement("div", {
-      style: {
-        flex: 3,
-        display: 'flex'
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        width: '50%',
-        borderRight: '1px solid #eee'
-      },
-      className: styles['item-block']
-    }), /*#__PURE__*/React.createElement("div", {
-      style: {
-        width: '50%'
-      },
-      className: styles['item-block']
-    }))), _type === 'ltb' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-      style: {
-        flex: 1,
-        marginRight: 4
-      },
-      className: styles['item-block']
-    }), /*#__PURE__*/React.createElement("div", {
-      style: {
-        flex: 3,
-        display: 'flex',
-        flexDirection: 'column'
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        height: '50%',
-        borderBottom: '1px solid #eee'
-      },
-      className: styles['item-block']
-    }), /*#__PURE__*/React.createElement("div", {
-      style: {
-        height: '50%'
-      },
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['display-type-item'],
+    style: {
+      flexDirection: split === 'horizontal' ? 'column' : 'row'
+    }
+  }, ratioArr.map(function (r, i) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: i,
+      style: _defineProperty({
+        flex: r
+      }, split === 'horizontal' ? 'borderBottom' : 'borderRight', i < ratioArr.length - 1 ? '1px solid #eee' : 'none'),
       className: styles['item-block']
-    })))));
-  })), activeType === 'normal' && /*#__PURE__*/React.createElement("div", {
+    });
+  }))), /*#__PURE__*/React.createElement("div", {
     style: {
       marginTop: 8
     }
@@ -214,6 +128,7 @@ var SplitDisplay = function SplitDisplay(_ref) {
     suppressPadding: true
   }, /*#__PURE__*/React.createElement(FastToBox, null, fastTo.map(function (d, i) {
     return /*#__PURE__*/React.createElement(Icon, {
+      key: i,
       type: "arrow-".concat(d),
       onClick: function onClick() {
         return handleFastToItemClick(d, i);

package/es/lowcode/painter/panel-section/StylePanel/StyleContext.js

@@ -1,7 +1,7 @@
 import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import { createContext, useContext, useReducer, useRef } from 'react';
+import React, { createContext, useContext, useReducer, useRef } from 'react';
 import postcss from 'postcss';
 import { isNil } from 'lodash';
 import { useUpdateEffect } from 'ahooks';

package/es/lowcode/painter/panel-section/StylePanel/index.js

@@ -1,29 +1,35 @@
 import React from 'react';
+import { useGet } from "../../../engine/provider/ContextProvider";
 import { StyleProvider } from "./StyleContext";
 import MainPanel from "./MainPanel";
 
 /**
  * StylePanel 组件是一个 React 组件，用于提供样式设置主面板。
  * 该组件通过 StyleProvider 将样式变更和当前样式值传递给其子组件。
- * 
+ *
  * @component
  * @example
  * const handleChange = (newValue) => console.log(newValue);
  * const initialValue = "dark";
  * <StylePanel onChange={handleChange} value={initialValue} />
- * 
+ *
  * @param {Object} props - 组件的属性。
  * @param {Function} props.onChange - 当样式变更时调用的函数，该函数接受新的样式值作为参数。
  * @param {any} props.value - 样式字符串
- * 
+ *
  * @returns {ReactElement} 返回一个 React 元素，其中包含了 StyleProvider 和 MainPanel 组件。
  */
 var StylePanel = function StylePanel(_ref) {
   var onChange = _ref.onChange,
+    nodeId = _ref.nodeId,
     value = _ref.value;
+  var _value = useGet({
+    id: nodeId,
+    path: 'props.css'
+  });
   return /*#__PURE__*/React.createElement(StyleProvider, {
     onChange: onChange,
-    value: value
+    value: value || _value
   }, /*#__PURE__*/React.createElement(MainPanel, null));
 };
 export default StylePanel;