@luck-design-biz/luckda 0.0.25-2 → 0.0.25-21

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

@@ -12,7 +12,8 @@ var I18nInput = function I18nInput(_ref) {
   return /*#__PURE__*/React.createElement(Input, {
     defaultValue: defaultValue,
     onChange: function onChange(e) {
-      return run(e.target.value);
+      var _e$target$value;
+      return run((_e$target$value = e.target.value) === null || _e$target$value === void 0 ? void 0 : _e$target$value.trim());
     },
     size: size
   });

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

@@ -2,29 +2,29 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useState } from 'react';
 import styles from "../style/icon.less";
 import IconFont from "../../../components/IconFont";
-/**
- * 一个简单的图标选择器组件，展示了一个图标并允许用户点击选择。
- * 该组件使用了`Icon.createFromIconfontCN`来创建一个可以从Iconfont.cn加载图标的`IconFont`组件。
- * 当图标被点击时，会调用`onSelect`回调函数，并传递一个对象，其中包含了`field`字段。
- *
- * @component
- * @example
- * ```jsx
- * <IconSelector
- *   field="iconField"
- *   onSelect={({ field }) => console.log(`Selected icon field: ${field}`)}
- *   defaultValue="icon-example"
- * />
- * ```
- *
- * @param {Object} props 组件的props
- * @param {string} props.field 用于识别选择的图标字段的标识符。
- * @param {Function} props.onSelect 当图标被点击时触发的回调函数。
- *                                  接收一个对象参数，该对象包含`field`字段。
- * @param {string} [props.defaultValue='iconyingyongguanli'] 初始化时图标的类型，
- *                                                     默认为'iconyingyongguanli'。
- *
- * @returns {React.Element} 渲染的React元素。
+/**
+ * 一个简单的图标选择器组件，展示了一个图标并允许用户点击选择。
+ * 该组件使用了`Icon.createFromIconfontCN`来创建一个可以从Iconfont.cn加载图标的`IconFont`组件。
+ * 当图标被点击时，会调用`onSelect`回调函数，并传递一个对象，其中包含了`field`字段。
+ *
+ * @component
+ * @example
+ * ```jsx
+ * <IconSelector
+ *   field="iconField"
+ *   onSelect={({ field }) => console.log(`Selected icon field: ${field}`)}
+ *   defaultValue="icon-example"
+ * />
+ * ```
+ *
+ * @param {Object} props 组件的props
+ * @param {string} props.field 用于识别选择的图标字段的标识符。
+ * @param {Function} props.onSelect 当图标被点击时触发的回调函数。
+ *                                  接收一个对象参数，该对象包含`field`字段。
+ * @param {string} [props.defaultValue='iconyingyongguanli'] 初始化时图标的类型，
+ *                                                     默认为'iconyingyongguanli'。
+ *
+ * @returns {React.Element} 渲染的React元素。
  */
 export default function (_ref) {
   var defaultValue = _ref.defaultValue,

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

@@ -10,22 +10,22 @@ 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 当图标被选中时触发的回调函数，接受选中图标的信息作为参数
+/**
+ * 一个用于选择图标的组件，提供了图标的搜索和选择功能。
+ *
+ * 该组件首先从预定义的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,

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

@@ -1,9 +1,11 @@
 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, 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) {
@@ -13,6 +15,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(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    exportDisabled = _useState2[0],
+    setExportDisabled = _useState2[1];
   useUpdateEffect(function () {
     onChange(state);
   }, [state]);
@@ -41,51 +51,135 @@ var ImpExp = function ImpExp(_ref) {
       });
     }
   });
-  return /*#__PURE__*/React.createElement(Row, {
-    gutter: [0, 8],
-    className: styles['lc-painter-panel-section-impexp']
-  }, /*#__PURE__*/React.createElement(Col, {
-    span: 6
-  }, /*#__PURE__*/React.createElement(Checkbox, {
-    value: "import",
-    checked: !!state.import,
-    onChange: handleCheckboxChange
-  }, formatMessage({
-    id: 'luckda.lowcode.painter.import',
-    label: '导入'
-  }))), /*#__PURE__*/React.createElement(Col, {
-    span: 18
-  }, /*#__PURE__*/React.createElement(Input, {
+  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_, ".impUrl.placeholder"),
-      label: '请输入模版ID或自定义接口'
+      id: "".concat(_I18N_PREFIX_, ".impType.placeholder"),
+      label: '请选择自定义行为'
     })
-  })), /*#__PURE__*/React.createElement(Col, {
-    span: 6
-  }, /*#__PURE__*/React.createElement(Checkbox, {
-    value: "export",
-    checked: state.export,
-    onChange: handleCheckboxChange
-  }, formatMessage({
-    id: 'luckda.lowcode.painter.export',
-    label: '导出'
-  }))), /*#__PURE__*/React.createElement(Col, {
-    span: 18
-  }, /*#__PURE__*/React.createElement(Input, {
+  }, 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",
-    value: isString(state.export) ? state.export : '',
-    onChange: function onChange(e) {
-      return handleInputChange('export', e);
+    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_, ".expUrl.placeholder"),
-      label: '请输入自定义接口'
+      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,124 @@
+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, 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";
+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(),
+    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/LayoutRatio.js

@@ -8,27 +8,27 @@ import PanelItem from "../components/PanelItem";
 var _RATIOS_ = ['12', '6:6', '3:9', '9:3', '4:4:4', '3:6:3', '3:3:3:3', '2:2:2:2:2:2'];
 var _DEFAULTRATIO_ = '12:3:9';
 
-/**
- * `LayoutRatio`组件提供了一个布局比例选择器，允许用户选择或输入特定的比例配置。
- * 支持的比例配置包括预定义的比例数组`_RATIOS_`，用户还可以通过输入框自定义比例，
- * 自定义比例需要符合一定的规则：是数字或数字与冒号的组合，且数字之和必须等于12。
- * ，
- * 允许父组件获取当前选中的布局比例。
- *
- * @component
- * @example
- * ```jsxsdsdsdsdsdsdsd
- * <LayoutRatio
- *   value="6:6"
- *   onChange={(option) => console.log(option)}
- * />
- * ```
- *
- * @param {Object} props
- * @param {string} [props.value='12'] 初始化时选中的布局比例，默认为"12"。
- * @param {Function} props.onChange 当用户选择一个新的布局比例时调用的回调函数。
- *
- * @returns {React.Element} 渲染的React元素。
+/**
+ * `LayoutRatio`组件提供了一个布局比例选择器，允许用户选择或输入特定的比例配置。
+ * 支持的比例配置包括预定义的比例数组`_RATIOS_`，用户还可以通过输入框自定义比例，
+ * 自定义比例需要符合一定的规则：是数字或数字与冒号的组合，且数字之和必须等于12。
+ * ，
+ * 允许父组件获取当前选中的布局比例。
+ *
+ * @component
+ * @example
+ * ```jsxsdsdsdsdsdsdsd
+ * <LayoutRatio
+ *   value="6:6"
+ *   onChange={(option) => console.log(option)}
+ * />
+ * ```
+ *
+ * @param {Object} props
+ * @param {string} [props.value='12'] 初始化时选中的布局比例，默认为"12"。
+ * @param {Function} props.onChange 当用户选择一个新的布局比例时调用的回调函数。
+ *
+ * @returns {React.Element} 渲染的React元素。
  */
 var LayoutRatio = function LayoutRatio(_ref) {
   var defaultValue = _ref.defaultValue,

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

@@ -0,0 +1,112 @@
+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', 'tb', '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 === 'tb' && /*#__PURE__*/React.createElement("div", {
+      style: {
+        flex: 1,
+        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']
+    })), _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');
     },