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

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

@@ -0,0 +1,138 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _ahooks = require("ahooks");
+var _layoutRatio = _interopRequireDefault(require("../style/layout-ratio.less"));
+var _utils = require("@luck-design-biz/base/utils");
+var _RuleInput = _interopRequireDefault(require("../components/RuleInput"));
+var _PanelItem = _interopRequireDefault(require("../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元素。
+ */
+var LayoutRatio = function LayoutRatio(_ref) {
+  var defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange;
+  var _useState = (0, _react.useState)(defaultValue || _DEFAULTRATIO_),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    currentRatio = _useState2[0],
+    setCurrentRatio = _useState2[1];
+  var handleInputChange = function handleInputChange(_, value) {
+    // console.log('value', value);
+    // if (!value) value = _DEFAULTRATIO_;
+    setCurrentRatio(value);
+    onChange === null || onChange === void 0 || onChange(value);
+  };
+  var handGridClick = function handGridClick(selectedRadio) {
+    // console.log('selectedRadio', selectedRadio);
+    setCurrentRatio(selectedRadio);
+    onChange === null || onChange === void 0 || onChange(selectedRadio);
+  };
+
+  // 定义验证规则
+  var rules = [{
+    func: function func(value) {
+      // 首先，检查value是否为字符串
+      if (typeof value !== 'string') return false;
+
+      // 使用正则表达式检查字符串是否只包含数字和冒号，并且不以冒号开始或结束
+      return /^[0-9]+(:[0-9]+)*$/.test(value);
+    },
+    err: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.Layoutratio.err',
+      label: '必须是数字或者数字加:号的组合，且数字之和必须等于12'
+    })
+  }];
+  var _useCreation = (0, _ahooks.useCreation)(function () {
+      return {
+        isCurrentInRatios: _RATIOS_.includes(currentRatio),
+        currentItemRatios: currentRatio.split(':')
+      };
+    }, [currentRatio]),
+    isCurrentInRatios = _useCreation.isCurrentInRatios,
+    currentItemRatios = _useCreation.currentItemRatios;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _layoutRatio.default['lc-painter-panel-section-layoutratio']
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _layoutRatio.default['ratio-view']
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _layoutRatio.default['gridbox-container']
+  }, _RATIOS_.map(function (ratio, i) {
+    var itemRatios = ratio.split(':');
+    var isCurrent = ratio == currentRatio;
+    var className = _layoutRatio.default['gridbox'];
+    if (isCurrent) className = className + ' ' + _layoutRatio.default['current'];
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: "grid-".concat(i),
+      className: className,
+      onClick: function onClick() {
+        return handGridClick(ratio);
+      }
+    }, itemRatios.map(function (itemRatio, j) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: "gridItem-".concat(j),
+        className: _layoutRatio.default['girditem'],
+        style: {
+          gridColumn: 'span ' + itemRatio
+        }
+      });
+    }));
+  }), !isCurrentInRatios && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_layoutRatio.default['gridbox'], " ").concat(_layoutRatio.default['current']),
+    onClick: function onClick() {
+      return handGridClick(ratio);
+    }
+  }, currentItemRatios.map(function (itemRatio, index) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: "itemRatio-".concat(index),
+      className: _layoutRatio.default['girditem'],
+      style: {
+        gridColumn: 'span ' + itemRatio
+      }
+    });
+  }))))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _layoutRatio.default['ratio-input']
+  }, /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    label: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.Layoutratio.label',
+      label: '列比例'
+    })
+  }, /*#__PURE__*/_react.default.createElement(_RuleInput.default, {
+    placeholder: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.Layoutratio.placeholder',
+      label: '请输入列比例'
+    }),
+    rules: rules,
+    onValueChange: handleInputChange,
+    value: currentRatio
+  }))));
+};
+var _default = exports.default = LayoutRatio;

package/lib/lowcode/painter/panel-section/StylePanel/Display.js

@@ -0,0 +1,299 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = _default;
+var _react = _interopRequireDefault(require("react"));
+var _PanelItem = _interopRequireDefault(require("../../components/PanelItem"));
+var _uiDesign = require("@luck-helper/ui-design");
+var _utils = require("@luck-design-biz/base/utils");
+var _antd = require("luck-design/antd");
+var _display = _interopRequireDefault(require("../../style/display.less"));
+var _DisplaySvg = _interopRequireDefault(require("./DisplaySvg"));
+var _StyleContext = require("./StyleContext");
+function _default() {
+  var style = (0, _StyleContext.useStyle)();
+  var dispatch = (0, _StyleContext.useStyleDispatch)();
+  var handleDisplayChange = function handleDisplayChange(id, value) {
+    dispatch({
+      type: 'edit',
+      payload: {
+        id: id,
+        value: value
+      }
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    label: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.display',
+      label: '显示'
+    }),
+    collapsed: style.display != 'flex',
+    addon: style.display == 'flex' ? /*#__PURE__*/_react.default.createElement(FlexTypeSelector, {
+      dispatch: dispatch
+    }) : null
+  }, /*#__PURE__*/_react.default.createElement(_uiDesign.Segmented, {
+    options: options,
+    onChange: function onChange(value) {
+      return handleDisplayChange('display', value);
+    },
+    value: style.display
+  }));
+}
+var FlexTypeSelector = function FlexTypeSelector() {
+  var style = (0, _StyleContext.useStyle)();
+  var dispatch = (0, _StyleContext.useStyleDispatch)();
+  var handleChange = function handleChange(id, value) {
+    dispatch({
+      type: 'edit',
+      payload: {
+        id: id,
+        value: value
+      }
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _display.default['lc-painter-panel-section-style-panel-display']
+  }, /*#__PURE__*/_react.default.createElement(_uiDesign.Segmented, {
+    options: directOptions,
+    onChange: function onChange(value) {
+      return handleChange('flex-direction', value);
+    },
+    value: style['flex-direction']
+  }), /*#__PURE__*/_react.default.createElement(_uiDesign.Segmented, {
+    options: alignOptions,
+    onChange: function onChange(value) {
+      return handleChange('align-items', value);
+    },
+    value: style['align-items']
+  }), /*#__PURE__*/_react.default.createElement(_uiDesign.Segmented, {
+    options: justifyOptions,
+    onChange: function onChange(value) {
+      return handleChange('justify-content', value);
+    },
+    value: style['justify-content']
+  }));
+};
+var options = [{
+  label: /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+    placement: "top",
+    title: "block"
+  }, (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.display.block',
+    label: '块'
+  })),
+  value: 'block'
+}, {
+  label: /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+    placement: "top",
+    title: "inline-block"
+  }, (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.display.inline-block',
+    label: '行内块'
+  })),
+  value: 'inline-block'
+}, {
+  label: /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+    placement: "top",
+    title: "inline"
+  }, (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.display.inline',
+    label: '行内'
+  })),
+  value: 'inline'
+}, {
+  label: /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+    placement: "top",
+    title: "flex"
+  }, (0, _utils.formatMessage)({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.display.flex',
+    label: '弹性'
+  })),
+  value: 'flex'
+}];
+function parseDirection(input) {
+  var parts = input.split('-');
+  var type = parts[0];
+  var isReverse = parts.length > 1 && parts[1] === 'reverse';
+  return {
+    type: type,
+    isReverse: isReverse
+  };
+}
+var SvgLabel = function SvgLabel(_ref) {
+  var name = _ref.name,
+    tip = _ref.tip,
+    pre = _ref.pre;
+  var style = (0, _StyleContext.useStyle)();
+  var direct = null;
+  var SvgComponent = null;
+  var className = null;
+  if (pre) {
+    var _style$flexDirection;
+    direct = parseDirection((_style$flexDirection = style['flex-direction']) !== null && _style$flexDirection !== void 0 ? _style$flexDirection : 'row');
+    SvgComponent = _DisplaySvg.default["".concat(direct.type, "-").concat(pre, "-").concat(name)];
+  } else {
+    direct = parseDirection(name);
+    SvgComponent = _DisplaySvg.default[name];
+  }
+  if (direct.isReverse) {
+    className = direct.type == 'row' ? _display.default['revert-h'] : _display.default['revert-v'];
+  }
+  return SvgComponent ? /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+    placement: "top",
+    title: tip
+  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(SvgComponent, {
+    className: className
+  }))) : null;
+};
+var directOptions = [{
+  label: /*#__PURE__*/_react.default.createElement(SvgLabel, {
+    name: "row",
+    tip: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.display.direct.row',
+      label: '方向：横向'
+    })
+  }),
+  value: 'row'
+}, {
+  label: /*#__PURE__*/_react.default.createElement(SvgLabel, {
+    name: "column",
+    tip: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.display.direct.column',
+      label: '方向：纵向'
+    })
+  }),
+  value: 'column'
+}, {
+  label: /*#__PURE__*/_react.default.createElement(SvgLabel, {
+    name: "row-reverse",
+    tip: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.display.direct.column',
+      label: '方向：横向反转'
+    })
+  }),
+  value: 'row-reverse'
+}, {
+  label: /*#__PURE__*/_react.default.createElement(SvgLabel, {
+    name: "column-reverse",
+    tip: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.display.direct.column',
+      label: '方向：纵向反转'
+    })
+  }),
+  value: 'column-reverse'
+}];
+var alignOptions = [{
+  label: /*#__PURE__*/_react.default.createElement(SvgLabel, {
+    name: "flex-start",
+    pre: "align",
+    tip: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.display.align-items.flex-start',
+      label: '交叉轴：起始对齐'
+    })
+  }),
+  value: 'flex-start'
+}, {
+  label: /*#__PURE__*/_react.default.createElement(SvgLabel, {
+    name: "center",
+    pre: "align",
+    tip: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.display.align-items.center',
+      label: '交叉轴：居中'
+    })
+  }),
+  value: 'center'
+}, {
+  label: /*#__PURE__*/_react.default.createElement(SvgLabel, {
+    name: "flex-end",
+    pre: "align",
+    tip: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.display.align-items.flex-end',
+      label: '交叉轴：终点对齐'
+    })
+  }),
+  value: 'flex-end'
+}, {
+  label: /*#__PURE__*/_react.default.createElement(SvgLabel, {
+    name: "stretch",
+    pre: "align",
+    top: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.display.align-items.stretch',
+      label: '交叉轴：拉伸'
+    })
+  }),
+  value: 'stretch'
+}, {
+  label: /*#__PURE__*/_react.default.createElement(SvgLabel, {
+    name: "baseline",
+    pre: "align",
+    tip: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.display.align-items.baseline',
+      label: '交叉轴：基线'
+    })
+  }),
+  value: 'baseline'
+}];
+var justifyOptions = [{
+  label: /*#__PURE__*/_react.default.createElement(SvgLabel, {
+    name: "flex-start",
+    pre: "justify",
+    tip: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.display.justify.flex-start',
+      label: '水平轴：起始对齐'
+    })
+  }),
+  value: 'flex-start'
+}, {
+  label: /*#__PURE__*/_react.default.createElement(SvgLabel, {
+    name: "center",
+    pre: "justify",
+    tip: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.display.justify.center',
+      label: '水平轴：居中对齐'
+    })
+  }),
+  value: 'center'
+}, {
+  label: /*#__PURE__*/_react.default.createElement(SvgLabel, {
+    name: "flex-end",
+    pre: "justify",
+    tip: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.display.justify.flex-end',
+      label: '水平轴：结束对齐'
+    })
+  }),
+  value: 'flex-end'
+}, {
+  label: /*#__PURE__*/_react.default.createElement(SvgLabel, {
+    name: "space-between",
+    pre: "justify",
+    tip: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.display.justify.space-between',
+      label: '水平轴：两端对齐'
+    })
+  }),
+  value: 'space-between'
+}, {
+  label: /*#__PURE__*/_react.default.createElement(SvgLabel, {
+    name: "space-around",
+    pre: "justify",
+    tip: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.display.justify.space-around',
+      label: '水平轴：均匀对齐，项目周围间隔相等'
+    })
+  }),
+  value: 'space-around'
+}, {
+  label: /*#__PURE__*/_react.default.createElement(SvgLabel, {
+    name: "space-evenly",
+    pre: "justify",
+    tip: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.display.justify.space-evenly',
+      label: '水平轴：均匀分布，所有项目与容器边缘的间隔相等'
+    })
+  }),
+  value: 'space-evenly'
+}];