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

package/es/lowcode/painter/panel-section/ActionsEditor/ActionEditor.js

@@ -0,0 +1,154 @@
+import React, { useRef } from 'react';
+import { useMemoizedFn } from 'ahooks';
+import { Tooltip, Icon, Input, Segmented, Select } from 'luck-design/antd';
+import { cloneDeep, debounce } from 'lodash';
+import PopConfirm from "../../components/PopConfirm";
+import { PopForm, PopFormItem, PopFormItemLeft, PopFormItemRight } from "../../components/PopForm";
+import JSEditor from "../../components/code-editor/JSEditor";
+import FullScreenEditor from "../../components/code-editor/FullScreenEditor";
+import { formatMessage } from '@luck-design-biz/base/utils';
+import styles from "../../style/actions-editor.less";
+var _I18N_PREFIX_ = 'luckda.lowcode.painter.panel-section.actionEditor';
+var _SERIAL_EFFECT_OPTIONS_ = [{
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".hidden"),
+    label: '隐藏'
+  }),
+  value: 'hidden'
+}, {
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".disable"),
+    label: '禁用'
+  }),
+  value: 'disable'
+}];
+var _RISK_LEVEL_OPTIONS_ = [{
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".default"),
+    label: '一般'
+  }),
+  value: 'default'
+}, {
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".primary"),
+    label: '重要'
+  }),
+  value: 'primary'
+}, {
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".danger"),
+    label: '危险'
+  }),
+  value: 'danger'
+}, {
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".destroy"),
+    label: '毁灭'
+  }),
+  value: 'destroy'
+}];
+var _DEFAULT_CODE_ = 'function todo(ctx) {}';
+var ActionEditor = function ActionEditor(_ref) {
+  var action = _ref.action,
+    onChange = _ref.onChange;
+  var editorRef = useRef();
+  var valueRef = useRef(cloneDeep(action));
+  var handleCodeChange = useRef(debounce(function (code) {
+    valueRef.current.actionCode = code;
+    onChange(valueRef.current);
+  }, 400));
+  var handleChange = useMemoizedFn(function (field, value) {
+    valueRef.current[field] = value;
+    onChange(valueRef.current);
+  });
+  var handleEditorLoad = useMemoizedFn(function () {
+    editorRef.current.editor.setValue(action.actionCode || _DEFAULT_CODE_);
+  });
+  return /*#__PURE__*/React.createElement(PopForm, null, /*#__PURE__*/React.createElement(PopFormItem, null, /*#__PURE__*/React.createElement(PopFormItemLeft, null, formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".name"),
+    label: '名称'
+  })), /*#__PURE__*/React.createElement(PopFormItemRight, null, /*#__PURE__*/React.createElement(Input, {
+    size: "small",
+    defaultValue: action.name,
+    onChange: function onChange(e) {
+      return handleChange('name', e.target.value);
+    },
+    placeholder: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".name.placeholder"),
+      label: '请输入行为名称'
+    })
+  }))), /*#__PURE__*/React.createElement(PopFormItem, null, /*#__PURE__*/React.createElement(PopFormItemLeft, null, formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".serial"),
+    label: '资源串'
+  })), /*#__PURE__*/React.createElement(PopFormItemRight, null, /*#__PURE__*/React.createElement(Input, {
+    size: "small",
+    defaultValue: action.serial,
+    onChange: function onChange(e) {
+      return handleChange('serial', e.target.value);
+    },
+    placeholder: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".serial.placeholder"),
+      label: '请输入行为名称'
+    })
+  }))), /*#__PURE__*/React.createElement(PopFormItem, null, /*#__PURE__*/React.createElement(PopFormItemLeft, null, formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".serialEffect"),
+    label: '越权效果'
+  })), /*#__PURE__*/React.createElement(PopFormItemRight, null, /*#__PURE__*/React.createElement(Segmented, {
+    size: "small",
+    options: _SERIAL_EFFECT_OPTIONS_,
+    value: action.serialEffect,
+    onChange: function onChange(value) {
+      return handleChange('serialEffect', value);
+    }
+  }))), /*#__PURE__*/React.createElement(PopFormItem, null, /*#__PURE__*/React.createElement(PopFormItemLeft, null, formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".serialEffect"),
+    label: '风险等级'
+  })), /*#__PURE__*/React.createElement(PopFormItemRight, null, /*#__PURE__*/React.createElement(Segmented, {
+    size: "small",
+    options: _RISK_LEVEL_OPTIONS_,
+    value: action.riskLevel,
+    onChange: function onChange(value) {
+      return handleChange('riskLevel', value);
+    }
+  }))), /*#__PURE__*/React.createElement(PopFormItem, null, /*#__PURE__*/React.createElement(PopFormItemLeft, null, formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".actionPool"),
+    label: '行为池'
+  })), /*#__PURE__*/React.createElement(PopFormItemRight, {
+    style: {
+      position: 'relative'
+    }
+  }, /*#__PURE__*/React.createElement(Select, {
+    size: "small",
+    mode: "multiple",
+    className: styles['action-pool-selector'],
+    defaultValue: action.actionPool,
+    onChange: function onChange(value) {
+      return handleChange('actionPool', value);
+    }
+  }, /*#__PURE__*/React.createElement(Select.Option, {
+    value: "jack"
+  }, "Jack"), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "lucy"
+  }, "Lucy"), /*#__PURE__*/React.createElement(Select.Option, {
+    value: "yiminghe"
+  }, "Yiminghe")), /*#__PURE__*/React.createElement(Tooltip, {
+    title: formatMessage({
+      id: 'luckda.lowcode.painter.coder',
+      label: '编码器'
+    })
+  }, /*#__PURE__*/React.createElement(PopConfirm, {
+    placement: "top",
+    title: /*#__PURE__*/React.createElement(FullScreenEditor, {
+      ref: editorRef,
+      EditorComponent: JSEditor,
+      width: "640px",
+      height: "300px",
+      onChange: handleCodeChange.current,
+      onLoad: handleEditorLoad
+    })
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "code",
+    className: styles['action-pool-coder']
+  }))))));
+};
+export default ActionEditor;

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

@@ -0,0 +1,198 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useRef, useReducer } from 'react';
+import { useMemoizedFn } from 'ahooks';
+import { Tooltip, Icon, Segmented, InputNumber, Input } from 'luck-design/antd';
+import { cloneDeep } from 'lodash';
+import ActionEditor from "./ActionEditor";
+import PanelItem from "../../components/PanelItem";
+import { SortBox, SortItem } from "../../components/SortBox";
+import { ListEditor, ListEditorItem } from "../../components/ListEditor";
+import PopConfirm from "../../components/PopConfirm";
+import { formatMessage, suid } from '@luck-design-biz/base/utils';
+import { listReducer } from "../../../engine/tools/helper";
+import styles from "../../style/actions-editor.less";
+var _I18N_PREFIX_ = 'luckda.lowcode.painter.panel-section.actionsEditor';
+var _DISPLAY_OPTIONS_ = [{
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".button"),
+    label: '按钮'
+  }),
+  value: 'button'
+}, {
+  label: formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".text"),
+    label: '文本'
+  }),
+  value: 'text'
+}];
+var ActionsEditor = function ActionsEditor(_ref) {
+  var defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange,
+    suppressDisplay = _ref.suppressDisplay,
+    suppressMax = _ref.suppressMax,
+    suppressMore = _ref.suppressMore;
+  var valueRef = useRef(cloneDeep(defaultValue));
+  var _useReducer = useReducer(listReducer, defaultValue.todoList || []),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    todoList = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  var handleAdd = useMemoizedFn(function () {
+    dispatch({
+      type: 'add',
+      payload: {
+        id: suid(),
+        name: "\u64CD\u4F5C".concat(todoList.length + 1),
+        serial: void 0,
+        serialEffect: 'hidden',
+        riskLevel: 'default',
+        actionPool: [],
+        actionCode: void 0
+      },
+      callback: function callback(newActions) {
+        valueRef.current.todoList = newActions;
+        onChange(cloneDeep(valueRef.current));
+      }
+    });
+  });
+  var handleDelete = useMemoizedFn(function (action) {
+    dispatch({
+      type: 'delete',
+      payload: action.id,
+      callback: function callback(newActions) {
+        valueRef.current.todoList = newActions;
+        onChange(cloneDeep(valueRef.current));
+      }
+    });
+  });
+  var handleSortChange = useMemoizedFn(function (sortItems) {
+    dispatch({
+      type: 'sort',
+      payload: sortItems,
+      callback: function callback(newActions) {
+        valueRef.current.todoList = newActions;
+        onChange(cloneDeep(valueRef.current));
+      }
+    });
+  });
+  var handleValueChange = useMemoizedFn(function (field, value) {
+    if (field === 'action') {
+      dispatch({
+        type: 'edit',
+        payload: {
+          id: value.id,
+          data: value
+        },
+        callback: function callback(newActions) {
+          valueRef.current.todoList = newActions;
+        }
+      });
+    } else {
+      valueRef.current[field] = value;
+    }
+    onChange(cloneDeep(valueRef.current));
+  });
+  var renderItemRight = useMemoizedFn(function (action) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
+      title: formatMessage({
+        id: 'luckda.lowcode.painter.edit',
+        label: '编辑'
+      })
+    }, /*#__PURE__*/React.createElement(PopConfirm, {
+      placement: "left",
+      title: /*#__PURE__*/React.createElement(ActionEditor, {
+        action: action,
+        onChange: function onChange(value) {
+          return handleValueChange('action', value);
+        }
+      })
+    }, /*#__PURE__*/React.createElement(Icon, {
+      type: "edit",
+      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 handleDelete(action);
+      }
+    })));
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-panel-section-components-actionsEditor']
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: '100%',
+      padding: '0 16px'
+    }
+  }, !suppressDisplay && /*#__PURE__*/React.createElement(PanelItem, {
+    suppressPadding: true,
+    label: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".display"),
+      label: '展现形式'
+    })
+  }, /*#__PURE__*/React.createElement(Segmented, {
+    size: "small",
+    options: _DISPLAY_OPTIONS_,
+    defaultValue: defaultValue.display,
+    onChange: function onChange(value) {
+      return handleValueChange('display', value);
+    }
+  })), !suppressMax && /*#__PURE__*/React.createElement(PanelItem, {
+    suppressPadding: true,
+    label: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".max"),
+      label: '最大显示数'
+    })
+  }, /*#__PURE__*/React.createElement(InputNumber, {
+    size: "small",
+    defaultValue: defaultValue.max,
+    onChange: function onChange(value) {
+      return handleValueChange('max', value);
+    }
+  })), !suppressMore && /*#__PURE__*/React.createElement(PanelItem, {
+    suppressPadding: true,
+    label: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".moreText"),
+      label: '更多显示文字'
+    })
+  }, /*#__PURE__*/React.createElement(Input, {
+    size: "small",
+    defaultValue: defaultValue.moreText,
+    onChange: function onChange(e) {
+      return handleValueChange('moreText', e.target.value);
+    }
+  })), /*#__PURE__*/React.createElement(SortBox, {
+    datas: todoList.map(function (_ref2) {
+      var id = _ref2.id;
+      return id;
+    }),
+    onChange: handleSortChange
+  }, /*#__PURE__*/React.createElement(ListEditor, {
+    addText: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".add"),
+      label: '添加操作'
+    }),
+    handleAdd: handleAdd
+  }, todoList.map(function (action) {
+    return /*#__PURE__*/React.createElement(SortItem, {
+      key: action.id,
+      id: action.id
+    }, /*#__PURE__*/React.createElement(ListEditorItem, {
+      left: /*#__PURE__*/React.createElement("span", null, action.name),
+      right: renderItemRight(action),
+      item: action,
+      dispatch: dispatch
+    }));
+  })))));
+};
+export default ActionsEditor;

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

@@ -0,0 +1,61 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useEffect, useState } from 'react';
+import { useMemoizedFn } from 'ahooks';
+import { Select } from 'luck-design/antd';
+import { request } from '@luck-design-biz/base/utils';
+import { SERVICE_READ_DATASET } from "../../constants/api-url";
+var DataSetSelector = function DataSetSelector(_ref) {
+  var defaultValue = _ref.defaultValue,
+    size = _ref.size,
+    onChange = _ref.onChange;
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    options = _useState2[0],
+    setOptions = _useState2[1];
+  useEffect(function () {
+    setOptions([{
+      value: 'dsWmsOutboundOrder',
+      label: '出库单'
+    }, {
+      value: 'dsWmsMaterialsData',
+      label: '物料主数据'
+    }, {
+      value: 'dsStockInboundOrder',
+      label: '库存台账'
+    }]);
+    // request(
+    //   `${SERVICE_READ_DATASET}`,
+    //   {
+    //     method: 'GET',
+    //     body: { dataModelKey: '' },
+    //   }.then((res) => {
+    //     console.log('res', res);
+    //     setOptions([
+    //       { value: 'dsWmsOutboundOrder', label: '出库单' },
+    //       { value: 'dsWmsMaterialsData', label: '物料主数据' },
+    //       { value: 'dsStockInboundOrder', label: '库存台账' },
+    //     ]);
+    //   }),
+    // );
+  }, []);
+  var handleChange = useMemoizedFn(function (value) {
+    console.log('value', value);
+    onChange(value);
+  });
+  return /*#__PURE__*/React.createElement(Select, {
+    defaultValue: defaultValue,
+    size: size,
+    onChange: handleChange,
+    getPopupContainer: function getPopupContainer() {
+      return document.getElementById('lc-design-workspace');
+    }
+  }, options.map(function (_ref2) {
+    var value = _ref2.value,
+      label = _ref2.label;
+    return /*#__PURE__*/React.createElement(Select.Option, {
+      key: value,
+      value: value
+    }, label);
+  }));
+};
+export default DataSetSelector;

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

@@ -0,0 +1,91 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React from 'react';
+import { useMemoizedFn, useSetState, useUpdateEffect } from 'ahooks';
+import { Checkbox, Row, Col, Input } from 'luck-design/antd';
+import { formatMessage } from '@luck-design-biz/base/utils';
+import { isString } from 'lodash';
+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];
+  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
+      });
+    }
+  });
+  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, {
+    size: "small",
+    value: isString(state.import) ? state.import : '',
+    onChange: function onChange(e) {
+      return handleInputChange('import', e);
+    },
+    placeholder: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".impUrl.placeholder"),
+      label: '请输入模版ID或自定义接口'
+    })
+  })), /*#__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, {
+    size: "small",
+    value: isString(state.export) ? state.export : '',
+    onChange: function onChange(e) {
+      return handleInputChange('export', e);
+    },
+    placeholder: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".expUrl.placeholder"),
+      label: '请输入自定义接口'
+    })
+  })));
+};
+export default ImpExp;

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

@@ -0,0 +1,48 @@
+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;
+  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
+  }, /*#__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;

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

@@ -116,7 +116,8 @@ var LayoutRatio = function LayoutRatio(_ref) {
     label: formatMessage({
       id: 'luckda.lowcode.painter.panel-section.Layoutratio.label',
       label: '列比例'
-    })
+    }),
+    suppressPadding: true
   }, /*#__PURE__*/React.createElement(RuleInput, {
     placeholder: formatMessage({
       id: 'luckda.lowcode.painter.panel-section.Layoutratio.placeholder',

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import { formatMessage } from '@luck-design-biz/base/utils';
+import { useStyle, useStyleDispatch } from "./StyleContext";
+import panelStyles from "../../style/style-panel.less";
+import StyleRow from "./StyleRow";
+import { Tooltip } from 'luck-design/antd';
+import ColorInput from "../../components/ColorInput";
+import HighLightPanel from "./HighLightPanel";
+import HightLightSvg from "./HightLightSvg";
+var textRelatedStyles = ['background-color'];
+
+/**
+ * 背景设置控件
+ */
+export default function () {
+  return /*#__PURE__*/React.createElement(HighLightPanel, {
+    highLightFields: textRelatedStyles,
+    addon: /*#__PURE__*/React.createElement(BackGroundEditor, null),
+    label: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.background',
+      label: '背景'
+    })
+  });
+}
+var BackGroundEditor = function BackGroundEditor() {
+  var style = useStyle();
+  var dispatch = useStyleDispatch();
+  var handleChange = function handleChange(field, value) {
+    dispatch({
+      type: 'edit',
+      payload: {
+        id: field,
+        value: value
+      }
+    });
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyleRow, null, /*#__PURE__*/React.createElement(Tooltip, {
+    placement: "top",
+    title: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.font.weight',
+      label: '字重'
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: panelStyles['svg-label']
+  }, /*#__PURE__*/React.createElement(HightLightSvg, {
+    field: "background-color",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 1024 1024"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M881.2544 1004.3392c-50.9952 0-92.3648-41.3696-92.3648-92.3648 0-50.9952 92.3648-215.6544 92.3648-215.6544s92.3648 164.6592 92.3648 215.6544S932.4544 1004.3392 881.2544 1004.3392L881.2544 1004.3392zM50.3808 546.6112 449.9456 151.552l399.7696 395.264-399.7696 395.264L50.3808 546.6112 50.3808 546.6112zM449.9456 239.2064l-277.0944 272.384 554.3936 0L449.9456 239.2064 449.9456 239.2064zM272.384 63.488l44.4416-43.8272L449.9456 151.552 405.504 195.3792 272.384 63.488 272.384 63.488zM272.384 63.488"
+  })))), /*#__PURE__*/React.createElement(ColorInput, {
+    wrapperStyle: {
+      flex: 1
+    },
+    value: style['background-color'],
+    onChange: function onChange(value) {
+      return handleChange('background-color', value);
+    }
+  })));
+};