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

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Select, Button } from 'luck-design/antd';
+import { useRemoteSource } from "../../engine/provider/ContextProvider";
+var Div = styled.div.withConfig({
+  displayName: "Div",
+  componentId: "luckda-6530__sc-nsshdj-0"
+})(["display:flex;align-items:center;"]);
+var SerialsSelector = function SerialsSelector(_ref) {
+  var defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange,
+    size = _ref.size;
+  var _useRemoteSource = useRemoteSource(),
+    serials = _useRemoteSource.serials,
+    refreshSerials = _useRemoteSource.refreshSerials,
+    fetchAllSerialsLoading = _useRemoteSource.fetchAllSerialsLoading;
+  return /*#__PURE__*/React.createElement(Div, null, /*#__PURE__*/React.createElement(Select, {
+    defaultValue: defaultValue,
+    size: size,
+    allowClear: true,
+    onChange: onChange,
+    getPopupContainer: function getPopupContainer() {
+      return document.getElementById('lc-design-workspace');
+    },
+    style: {
+      flex: 1
+    },
+    loading: fetchAllSerialsLoading
+  }, serials.map(function (opt) {
+    return /*#__PURE__*/React.createElement(Select.Option, {
+      key: opt.uid,
+      value: opt.serial
+    }, opt.name);
+  })), /*#__PURE__*/React.createElement(Button, {
+    size: size,
+    icon: "cloud-sync",
+    loading: fetchAllSerialsLoading,
+    style: {
+      marginLeft: 4
+    },
+    onClick: refreshSerials
+  }));
+};
+export default SerialsSelector;

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

@@ -0,0 +1,248 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+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 { 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',
+    label: '横向'
+  }),
+  value: 'vertical'
+}, {
+  label: formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.splitdisplay.splitHorizontal',
+    label: '纵向'
+  }),
+  value: 'horizontal'
+}];
+var _RULES_ = [{
+  func: function func(value) {
+    // 首先，检查value是否为字符串
+    if (!isString(value)) return false;
+
+    // 使用正则表达式检查字符串是否只包含数字和冒号，并且不以冒号开始或结束
+    return /^[0-9]+(:[0-9]+)*$/.test(value);
+  },
+  err: formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.splitdisplay.err',
+    label: '必须是数字或者数字加:号的组合'
+  })
+}];
+var _FAST_TO_MAPPING_ = {
+  right: 'left',
+  left: 'right',
+  up: 'down',
+  down: 'up'
+};
+var FastToBox = styled.div.withConfig({
+  displayName: "FastToBox",
+  componentId: "luckda-6530__sc-aassai-0"
+})(["display:flex;justify-content:flex-start;align-items:center;i:not(:last-child){margin-right:4px;}"]);
+var SplitDisplay = function SplitDisplay(_ref) {
+  var defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange;
+  var valueRef = useRef(defaultValue);
+  var _useState = useState(defaultValue.type || 'normal'),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeType = _useState2[0],
+    setActiveType = _useState2[1];
+  var _useState3 = useState(defaultValue.split || 'vertical'),
+    _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];
+  var ratioArr = useCreation(function () {
+    return ratio.split(':').map(function (r) {
+      return parseInt(r);
+    });
+  }, [ratio]);
+  var _useState7 = 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);
+  });
+  var handleFastToItemClick = useMemoizedFn(function (d, i) {
+    var _fastTo = _toConsumableArray(fastTo);
+    _fastTo[i] = _FAST_TO_MAPPING_[d];
+    setFastTo(_fastTo);
+    valueRef.current.fastTo = _fastTo;
+    onChange(_objectSpread({}, valueRef.current));
+  });
+  var handleSplitChange = useMemoizedFn(function (value) {
+    var _fastTo = drop(ratio.split(':')).map(function () {
+      return value === 'vertical' ? 'right' : 'down';
+    });
+    setSplit(value);
+    setFastTo(_fastTo);
+    valueRef.current.split = value;
+    valueRef.current.fastTo = _fastTo;
+    onChange(_objectSpread({}, valueRef.current));
+  });
+  var handleInputChange = useMemoizedFn(function (_, value) {
+    var _fastTo = drop(value.split(':')).map(function () {
+      return split === 'vertical' ? 'right' : 'down';
+    });
+    setRatio(value);
+    setFastTo(_fastTo);
+    valueRef.current.ratio = value;
+    valueRef.current.fastTo = _fastTo;
+    onChange(_objectSpread({}, valueRef.current));
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    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%'
+      },
+      className: styles['item-block']
+    })))));
+  })), activeType === 'normal' && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: 8
+    }
+  }, /*#__PURE__*/React.createElement(PanelItem, {
+    label: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.splitdisplay.fastTo',
+      label: '收缩方向'
+    }),
+    suppressPadding: true
+  }, /*#__PURE__*/React.createElement(FastToBox, null, fastTo.map(function (d, i) {
+    return /*#__PURE__*/React.createElement(Icon, {
+      type: "arrow-".concat(d),
+      onClick: function onClick() {
+        return handleFastToItemClick(d, i);
+      }
+    });
+  }))), /*#__PURE__*/React.createElement(PanelItem, {
+    label: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.splitdisplay.split',
+      label: '分割方向'
+    }),
+    suppressPadding: true
+  }, /*#__PURE__*/React.createElement(Segmented, {
+    options: _OPTIONS_,
+    defaultValue: split,
+    onChange: handleSplitChange
+  })), /*#__PURE__*/React.createElement(PanelItem, {
+    label: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.splitdisplay.ratio',
+      label: '列比例'
+    }),
+    suppressPadding: true
+  }, /*#__PURE__*/React.createElement(RuleInput, {
+    placeholder: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.Layoutratio.placeholder',
+      label: '请输入列比例'
+    }),
+    rules: _RULES_,
+    onValueChange: handleInputChange,
+    value: ratio
+  }))));
+};
+export default SplitDisplay;

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);
+    }
+  })));
+};

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

@@ -0,0 +1,150 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import { formatMessage } from '@luck-design-biz/base/utils';
+import { useStyle, useStyleDispatch, isModified } from "./StyleContext";
+import BorderSelector from "./BorderSelector";
+import styles from "../../style/border-editor.less";
+import { Select } from 'luck-design/antd';
+import Size from "./Size";
+import ColorInput from "../../components/ColorInput";
+import HighLightPanel from "./HighLightPanel";
+import HighLigthtSpan from "./HighLigthtSpan";
+var Option = Select.Option;
+var borderMainProps = ['border-width', 'border-color', 'border-style'];
+var borderSideProps = ['border-top-width', 'border-top-color', 'border-top-style', 'border-right-width', 'border-right-color', 'border-right-style', 'border-bottom-width', 'border-bottom-color', 'border-bottom-style', 'border-left-width', 'border-left-color', 'border-left-style'];
+var textRelatedStyles = [].concat(borderMainProps, borderSideProps);
+var getPropName = function getPropName(str) {
+  return str.split('-').pop();
+};
+
+/**
+ * 边框样式设置控件
+ */
+export default function () {
+  return /*#__PURE__*/React.createElement(HighLightPanel, {
+    highLightFields: textRelatedStyles,
+    addon: /*#__PURE__*/React.createElement(BorderEditor, null),
+    label: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.border',
+      label: '边框'
+    })
+  });
+}
+var BorderEditor = function BorderEditor() {
+  var _style$styleField;
+  var _useState = useState('all'),
+    _useState2 = _slicedToArray(_useState, 2),
+    curDirection = _useState2[0],
+    setCurDirection = _useState2[1];
+  var style = useStyle();
+  var dispatch = useStyleDispatch();
+  var handleChange = function handleChange(field, value) {
+    if (curDirection == 'all') {
+      var mainPropsName = getPropName(field);
+      borderSideProps.forEach(function (item) {
+        if (mainPropsName === getPropName(item)) delete style[item];
+      });
+    }
+    if (value) {
+      style[field] = value;
+    } else {
+      delete style[field];
+    }
+    dispatch({
+      type: 'new',
+      payload: style
+    });
+  };
+  var handleDirectChange = function handleDirectChange(value) {
+    setCurDirection(value);
+  };
+  var styleField = 'border-style';
+  var widthField = 'border-width';
+  var colorField = 'border-color';
+  if (curDirection != 'all') {
+    styleField = "border-".concat(curDirection, "-style");
+    widthField = "border-".concat(curDirection, "-width");
+    colorField = "border-".concat(curDirection, "-color");
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-panel-section-style-panel-border-editor']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['border-editor-wrapper']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['wrapper-left']
+  }, /*#__PURE__*/React.createElement(BorderSelector, {
+    onChange: handleDirectChange
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles['wrapper-right']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['editor-item']
+  }, /*#__PURE__*/React.createElement(HighLigthtSpan, {
+    highLightFields: [styleField]
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.border.style',
+    label: '边框'
+  })), /*#__PURE__*/React.createElement(Select, {
+    style: {
+      flex: 1
+    },
+    size: "small",
+    onChange: function onChange(value) {
+      handleChange(styleField, value);
+    },
+    value: (_style$styleField = style[styleField]) !== null && _style$styleField !== void 0 ? _style$styleField : ''
+  }, /*#__PURE__*/React.createElement(Option, {
+    value: ""
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.border.style.none',
+    label: '无'
+  })), /*#__PURE__*/React.createElement(Option, {
+    value: "solid"
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.border.style.solid',
+    label: '实线条'
+  })), /*#__PURE__*/React.createElement(Option, {
+    value: "dotted"
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.border.style.dotted',
+    label: '点线'
+  })), /*#__PURE__*/React.createElement(Option, {
+    value: "dashed"
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.border.style.dashed',
+    label: '虚线'
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: styles['editor-item']
+  }, /*#__PURE__*/React.createElement(HighLigthtSpan, {
+    highLightFields: [widthField]
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.border.width',
+    label: '线宽'
+  })), /*#__PURE__*/React.createElement(Size, {
+    field: widthField,
+    style: {
+      flex: 1
+    },
+    placeholder: formatMessage({
+      id: "luckda.lowcode.painter.panel-section.style-panel.border.width.ph",
+      label: '线宽'
+    }),
+    onChange: function onChange(value) {
+      return handleChange(widthField, value);
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles['editor-item']
+  }, /*#__PURE__*/React.createElement(HighLigthtSpan, {
+    highLightFields: [colorField]
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.border.color',
+    label: '颜色'
+  })), /*#__PURE__*/React.createElement(ColorInput, {
+    wrapperStyle: {
+      flex: 1
+    },
+    value: style[colorField],
+    onChange: function onChange(value) {
+      return handleChange(colorField, value);
+    }
+  })))));
+};

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

@@ -0,0 +1,87 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import { formatMessage } from '@luck-design-biz/base/utils';
+import { useStyle, useStyleDispatch, isModified } from "./StyleContext";
+import BorderRadiusSelector from "./BorderRadiusSelector";
+import styles from "../../style/border-editor.less";
+import Size from "./Size";
+import HighLightPanel from "./HighLightPanel";
+import HighLigthtSpan from "./HighLigthtSpan";
+var borderMainProps = ['border-radius'];
+var borderSideProps = ['border-top-right-radius', 'border-top-left-radius', 'border-bottom-left-radius', 'border-bottom-right-radius'];
+var textRelatedStyles = [].concat(borderMainProps, borderSideProps);
+
+/**
+ * 圆角样式设置控件
+ */
+export default function () {
+  return /*#__PURE__*/React.createElement(HighLightPanel, {
+    highLightFields: textRelatedStyles,
+    addon: /*#__PURE__*/React.createElement(BorderRadiusEditor, null),
+    label: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.border-radius',
+      label: ' 圆角'
+    })
+  });
+}
+var BorderRadiusEditor = function BorderRadiusEditor() {
+  var _useState = useState('all'),
+    _useState2 = _slicedToArray(_useState, 2),
+    curDirection = _useState2[0],
+    setCurDirection = _useState2[1];
+  var style = useStyle();
+  var dispatch = useStyleDispatch();
+  var handleChange = function handleChange(field, value) {
+    if (curDirection == 'all') {
+      borderSideProps.forEach(function (item) {
+        delete style[item];
+      });
+    }
+    if (value) {
+      style[field] = value;
+    } else {
+      delete style[field];
+    }
+    dispatch({
+      type: 'new',
+      payload: style
+    });
+  };
+  var handleDirectChange = function handleDirectChange(value) {
+    setCurDirection(value);
+  };
+  var field = 'border-radius';
+  if (curDirection != 'all') {
+    field = "border-".concat(curDirection, "-radius");
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-panel-section-style-panel-border-editor']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['border-editor-wrapper']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['wrapper-left']
+  }, /*#__PURE__*/React.createElement(BorderRadiusSelector, {
+    onChange: handleDirectChange
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles['wrapper-right-single']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['editor-item']
+  }, /*#__PURE__*/React.createElement(HighLigthtSpan, {
+    highLightFields: [field]
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.border-radius.width',
+    label: '半径'
+  })), /*#__PURE__*/React.createElement(Size, {
+    field: field,
+    style: {
+      flex: 1
+    },
+    placeholder: formatMessage({
+      id: "luckda.lowcode.painter.panel-section.style-panel.border-radius.width.ph",
+      label: '半径'
+    }),
+    onChange: function onChange(value) {
+      return handleChange(field, value);
+    }
+  })))));
+};

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

@@ -0,0 +1,66 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import styles from "../../style/border-radius-selector.less";
+
+/**
+ * 圆角设置组件
+ */
+export default function (_ref) {
+  var onChange = _ref.onChange;
+  var _useState = useState('all'),
+    _useState2 = _slicedToArray(_useState, 2),
+    curSelect = _useState2[0],
+    setCurSelect = _useState2[1];
+  var handleSelected = function handleSelected(direction) {
+    if (onChange) onChange(direction);
+    setCurSelect(direction);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-panel-section-style-panel-border-radius-selector']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['selector-box']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['selector-row']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-row'], " ").concat(styles['b-left'])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-wrapper']).concat(curSelect === 'top-left' ? " ".concat(styles['selector-over']) : ''),
+    onClick: function onClick() {
+      return handleSelected('top-left');
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles['selector-item']
+  }, "\u250F")), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-wrapper']).concat(curSelect === 'bottom-left' ? " ".concat(styles['selector-over']) : ''),
+    onClick: function onClick() {
+      return handleSelected('bottom-left');
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles['selector-item']
+  }, "\u2517")))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-row'], " ").concat(styles['b-center'])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-wrapper']).concat(curSelect === 'all' ? " ".concat(styles['selector-over']) : ''),
+    onClick: function onClick() {
+      return handleSelected('all');
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles['selector-item']
+  }, "\u254B"))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-row'], " ").concat(styles['b-right'])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-wrapper']).concat(curSelect === 'top-right' ? " ".concat(styles['selector-over']) : ''),
+    onClick: function onClick() {
+      return handleSelected('top-right');
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles['selector-item']
+  }, "\u2513")), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-wrapper']).concat(curSelect === 'bottom-right' ? " ".concat(styles['selector-over']) : ''),
+    onClick: function onClick() {
+      return handleSelected('bottom-right');
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles['selector-item']
+  }, "\u251B")))));
+}