amis-ui 6.13.0-beta.8 → 6.13.0

package/esm/components/Selection.js

@@ -0,0 +1,166 @@
+/**
+ * amis-ui v6.13.0
+ * Copyright 2018-2025 fex
+ */
+
+import { __extends, __assign, __spreadArray, __read, __decorate, __metadata } from 'tslib';
+import React__default from 'react';
+import isEqual from 'lodash/isEqual';
+import cx from 'classnames';
+import { findTree, getOptionValue, getOptionValueBindField, flattenTree, autobind, themeable, localeable, uncontrollable } from 'amis-core';
+import Checkbox from './Checkbox.js';
+
+/**
+ * @file Checkboxes
+ * @description 多选输入框
+ * @author fex
+ */
+var BaseSelection = /** @class */ (function (_super) {
+    __extends(BaseSelection, _super);
+    function BaseSelection() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    BaseSelection.itemRender = function (option, states) {
+        var label = option[(states === null || states === void 0 ? void 0 : states.labelField) || 'label'];
+        var tip = option.tip || '';
+        var classnames = states.classnames;
+        var testIdBuilder = states.testIdBuilder;
+        var canlabelTitle = typeof label === 'string' || typeof label === 'number';
+        var canTipTitle = typeof tip === 'string' || typeof label === 'number';
+        var title = canlabelTitle && canTipTitle ? "".concat(label, " ").concat(tip) : '';
+        return (React__default.createElement("span", __assign({ title: title, className: "".concat(cx({ 'is-invalid': option === null || option === void 0 ? void 0 : option.__unmatched }), " ").concat(classnames('Selection-ellipsis-line')) }, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('span').getTestId()),
+            label,
+            tip));
+    };
+    BaseSelection.value2array = function (value, options, option2value, valueField) {
+        if (option2value === void 0) { option2value = function (option) { return option; }; }
+        if (value === void 0) {
+            return [];
+        }
+        if (!Array.isArray(value)) {
+            value = [value];
+        }
+        return value.map(function (value) {
+            var option = findTree(options, function (option) { return isEqual(option2value(option), value); }, valueField
+                ? {
+                    value: getOptionValue(value, valueField),
+                    resolve: getOptionValueBindField(valueField)
+                }
+                : undefined);
+            return option || value;
+        });
+    };
+    BaseSelection.resolveSelected = function (value, options, option2value) {
+        if (option2value === void 0) { option2value = function (option) { return option; }; }
+        value = Array.isArray(value) ? value[0] : value;
+        return findTree(options, function (option) { return isEqual(option2value(option), value); });
+    };
+    // 获取两个数组的交集
+    BaseSelection.prototype.intersectArray = function (arr1, arr2) {
+        if (!Array.isArray(arr1) || !Array.isArray(arr2)) {
+            return [];
+        }
+        var len1 = arr1.length;
+        var len2 = arr2.length;
+        if (len1 < len2) {
+            return this.intersectArray(arr2, arr1);
+        }
+        return Array.from(new Set(arr1.filter(function (item) { return arr2.includes(item); })));
+    };
+    BaseSelection.prototype.toggleOption = function (option) {
+        var _b = this.props, value = _b.value, onChange = _b.onChange, option2value = _b.option2value, options = _b.options, disabled = _b.disabled, multiple = _b.multiple, clearable = _b.clearable, valueField = _b.valueField;
+        if (disabled || option.disabled) {
+            return;
+        }
+        var valueArray = BaseSelection.value2array(value, options, option2value, valueField);
+        var idx = valueArray.indexOf(option);
+        if (~idx && (multiple || clearable)) {
+            valueArray.splice(idx, 1);
+        }
+        else if (multiple) {
+            valueArray.push(option);
+        }
+        else {
+            valueArray = [option];
+        }
+        var newValue = option2value
+            ? valueArray.map(function (item) { return option2value(item); })
+            : valueArray;
+        onChange && onChange(multiple ? newValue : newValue[0]);
+    };
+    BaseSelection.prototype.getAvailableOptions = function () {
+        var options = this.props.options;
+        var flattendOptions = flattenTree(options, function (item) {
+            return item.children ? null : item;
+        }).filter(function (a) { return a && !a.disabled; });
+        return flattendOptions;
+    };
+    BaseSelection.prototype.toggleAll = function () {
+        var _b = this.props, value = _b.value, onChange = _b.onChange, option2value = _b.option2value; _b.options;
+        var valueArray = [];
+        var availableOptions = this.getAvailableOptions();
+        var intersectOptions = this.intersectArray(value, availableOptions);
+        if (!Array.isArray(value)) {
+            valueArray = availableOptions;
+        }
+        else if (intersectOptions.length < availableOptions.length) {
+            valueArray = Array.from(new Set(__spreadArray(__spreadArray([], __read(value), false), __read(availableOptions), false)));
+        }
+        else {
+            valueArray = value.filter(function (item) { return !availableOptions.includes(item); });
+        }
+        var newValue = option2value
+            ? valueArray.map(function (item) { return option2value(item); })
+            : valueArray;
+        onChange && onChange(newValue);
+    };
+    BaseSelection.prototype.render = function () {
+        var _this = this;
+        var _b = this.props, value = _b.value, options = _b.options, className = _b.className, placeholder = _b.placeholder, inline = _b.inline, labelClassName = _b.labelClassName, disabled = _b.disabled, cx = _b.classnames, option2value = _b.option2value, itemClassName = _b.itemClassName, itemRender = _b.itemRender, multiple = _b.multiple, labelField = _b.labelField, valueField = _b.valueField, onClick = _b.onClick, testIdBuilder = _b.testIdBuilder;
+        var __ = this.props.translate;
+        var valueArray = BaseSelection.value2array(value, options, option2value, valueField);
+        var body = [];
+        if (Array.isArray(options) && options.length) {
+            body = options.map(function (option, key) { return (React__default.createElement(Checkbox, { type: multiple ? 'checkbox' : 'radio', className: cx(itemClassName, option.className), key: key, onChange: function () { return _this.toggleOption(option); }, checked: !!~valueArray.indexOf(option), disabled: disabled || option.disabled, labelClassName: labelClassName, description: option.description }, itemRender(option, {
+                index: key,
+                multiple: multiple,
+                checked: !!~valueArray.indexOf(option),
+                onChange: function () { return _this.toggleOption(option); },
+                labelField: labelField,
+                classnames: cx,
+                disabled: disabled || option.disabled,
+                testIdBuilder: testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild(key)
+            }))); });
+        }
+        return (React__default.createElement("div", { className: cx('Selection', className, inline ? 'Selection--inline' : ''), onClick: onClick }, body && body.length ? body : React__default.createElement("div", null, __(placeholder))));
+    };
+    var _a;
+    _a = BaseSelection;
+    BaseSelection.defaultProps = {
+        placeholder: 'placeholder.noOption',
+        itemRender: _a.itemRender,
+        multiple: true,
+        clearable: false,
+        virtualThreshold: 1000,
+        itemHeight: 32
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], BaseSelection.prototype, "toggleAll", null);
+    return BaseSelection;
+}(React__default.Component));
+var Selection = /** @class */ (function (_super) {
+    __extends(Selection, _super);
+    function Selection() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return Selection;
+}(BaseSelection));
+var Selection$1 = themeable(localeable(uncontrollable(Selection, {
+    value: 'onChange'
+})));
+
+export { BaseSelection, Selection, Selection$1 as default };

package/esm/components/Shape.d.ts

@@ -0,0 +1,58 @@
+/**
+ * @file Shape.tsx 图形组件
+ *
+ * @author allenve(yupeng12@baidu.com)
+ * @created: 2024/12/12
+ */
+/// <reference types="hoist-non-react-statics" />
+import React from 'react';
+import { ThemeProps } from 'amis-core';
+export type IShapeType = 'square' | 'triangle' | 'right-triangle' | 'rectangle' | 'convex-arc-rectangle' | 'concave-arc-rectangle' | 'double-convex-arc-rectangle' | 'double-concave-arc-rectangle' | 'barrel-rectangle' | 'rhombus' | 'parallelogram' | 'rectangle-1' | 'rectangle-2' | 'rectangle-3' | 'pentagon' | 'hexagon' | 'octagon' | 'hexagon-star' | 'star' | 'heart' | 'circle' | 'arrow' | 'leaf';
+export type IShapeCustomType = 'custom';
+export type ISHapeStrokeType = 'line' | 'dash' | 'dot';
+export interface IShapeProps extends ThemeProps {
+    shapeType: IShapeType | IShapeCustomType;
+    radius: number;
+    width?: number;
+    height?: number;
+    color?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    strokeType?: 'line' | 'dash' | 'dot';
+    paths?: string[];
+    onClick?: (event: React.MouseEvent) => void;
+}
+declare const _default: {
+    new (props: Omit<IShapeProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps): {
+        ref: any;
+        childRef(ref: any): void;
+        getWrappedInstance(): any;
+        render(): React.JSX.Element;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Omit<IShapeProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<Omit<IShapeProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<Omit<IShapeProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Omit<IShapeProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<Omit<IShapeProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<Omit<IShapeProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Omit<IShapeProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<Omit<IShapeProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Omit<IShapeProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    displayName: string;
+    contextType: React.Context<string>;
+    ComposedComponent: React.ComponentType<React.FC<IShapeProps>>;
+} & import("hoist-non-react-statics").NonReactStatics<React.FC<IShapeProps>, {}> & {
+    ComposedComponent: React.FC<IShapeProps>;
+};
+export default _default;

package/esm/components/Shape.js

@@ -0,0 +1,429 @@
+/**
+ * amis-ui v6.13.0
+ * Copyright 2018-2025 fex
+ */
+
+import { __assign, __read } from 'tslib';
+import React__default from 'react';
+import { themeable } from 'amis-core';
+import { radiusStartEndPoint } from '../utils/vectorComputed.js';
+
+/**
+ * @file Shape.tsx 图形组件
+ *
+ * @author allenve(yupeng12@baidu.com)
+ * @created: 2024/12/12
+ */
+var SvgPathGenerator = /** @class */ (function () {
+    function SvgPathGenerator(size) {
+        this.size = size;
+    }
+    SvgPathGenerator.getPath = function (type, props) {
+        var radius = props.radius, paths = props.paths;
+        var generator = new SvgPathGenerator(200);
+        if (type === 'custom') {
+            return this.getCustomPath(paths);
+        }
+        var genFun = generator.getGenerage(type);
+        if (!genFun) {
+            return [];
+        }
+        return genFun(radius * 10);
+    };
+    SvgPathGenerator.getStrokeProps = function (stroke, strokeWidth, strokeType) {
+        if (strokeType === 'line') {
+            return {
+                stroke: stroke,
+                strokeWidth: strokeWidth
+            };
+        }
+        else if (strokeType === 'dash') {
+            return {
+                stroke: stroke,
+                strokeWidth: strokeWidth,
+                strokeDasharray: "".concat(strokeWidth * 2, ",").concat(strokeWidth)
+            };
+        }
+        else if (strokeType === 'dot') {
+            return {
+                stroke: stroke,
+                strokeWidth: strokeWidth,
+                strokeDasharray: "1,".concat(strokeWidth * 2),
+                strokeLinecap: 'round',
+                strokeLinejoin: 'miter'
+            };
+        }
+    };
+    SvgPathGenerator.prototype.toRadians = function (degrees) {
+        return degrees * (Math.PI / 180);
+    };
+    SvgPathGenerator.prototype.getGenerage = function (type) {
+        var ShapeConfig = {
+            'square': this.getSquarePath.bind(this),
+            'triangle': this.getTrianglePath.bind(this),
+            'right-triangle': this.getRightTrianglePath.bind(this),
+            'rectangle': this.getRectanglePath.bind(this),
+            'convex-arc-rectangle': this.getConvexArcRectangle.bind(this),
+            'concave-arc-rectangle': this.getConcaveArcRectangle.bind(this),
+            'double-convex-arc-rectangle': this.getDConvexArcRectangle.bind(this),
+            'double-concave-arc-rectangle': this.getDConcaveArcRectangle.bind(this),
+            'barrel-rectangle': this.getBarrelRectangle.bind(this),
+            'rhombus': this.getRhombusPath.bind(this),
+            'parallelogram': this.getParallelogramPath.bind(this),
+            'rectangle-1': this.getRectangleType1Path.bind(this),
+            'rectangle-2': this.getRectangleType2Path.bind(this),
+            'rectangle-3': this.getRectangleType3Path.bind(this),
+            'pentagon': this.getPentagon.bind(this),
+            'hexagon': this.getHexagon.bind(this),
+            'octagon': this.getOctagonPath.bind(this),
+            'hexagon-star': this.getHexagonStar.bind(this),
+            'star': this.getStar.bind(this),
+            'heart': this.getHeart.bind(this),
+            'circle': this.getCirclePath.bind(this),
+            'arrow': this.getArrowPath.bind(this),
+            'leaf': this.getLeafPath.bind(this)
+        };
+        return ShapeConfig[type];
+    };
+    SvgPathGenerator.prototype.radiusPath = function (radius, _a, _b, _c) {
+        var _d = __read(_a, 2), endX1 = _d[0], endY1 = _d[1];
+        var _e = __read(_b, 2), startX = _e[0], startY = _e[1];
+        var _f = __read(_c, 2), endX2 = _f[0], endY2 = _f[1];
+        var flag = true;
+        if (radius < 0) {
+            radius = radius * -1;
+            // 圆角向内
+            flag = false;
+        }
+        var _g = radiusStartEndPoint([startX, startY, endX1, endY1], [startX, startY, endX2, endY2], radius), start = _g.start, end = _g.end, mxRadius = _g.radius, sweepFlag = _g.sweepFlag;
+        return [
+            "".concat(start[0], ",").concat(start[1]),
+            "".concat(mxRadius, " ").concat(mxRadius, " ").concat(0, " ").concat(0, " ").concat(flag ? sweepFlag : sweepFlag ^ 1, "\n       ").concat(end[0], ",").concat(end[1])
+        ];
+    };
+    /**
+     * 将 SVG 路径的每个角添加圆角
+     *
+     * @param {string[]} path
+     * @param {number} radius
+     * @returns
+     * @memberof SvgPathGenerator
+     */
+    SvgPathGenerator.prototype.addRoundCornersToPath = function (points, radius) {
+        var newPath = [];
+        for (var i = 0; i < points.length; i++) {
+            var nextItem = points[i + 1] || points[0];
+            var preItem = points[i - 1] || points[points.length - 1];
+            var _a = __read(points[i], 2), startX = _a[0], startY = _a[1];
+            var _b = __read(nextItem, 2), endX1 = _b[0], endY1 = _b[1];
+            var _c = __read(preItem, 2), endX2 = _c[0], endY2 = _c[1];
+            if (!radius) {
+                newPath.push("".concat(i === 0 ? 'M' : 'L').concat(startX, ",").concat(startY));
+                continue;
+            }
+            var _d = __read(this.radiusPath(radius, [endX2, endY2], [startX, startY], [endX1, endY1]), 2), start = _d[0], A = _d[1];
+            newPath.push("".concat(i === 0 ? 'M' : 'L').concat(start), "A".concat(A));
+        }
+        newPath.push('Z');
+        return newPath;
+    };
+    // 正方形
+    SvgPathGenerator.prototype.getSquarePath = function (radius) {
+        var S = this.size;
+        var ponits1 = [
+            [0, 0],
+            [S, 0],
+            [S, S],
+            [0, S]
+        ];
+        var path1 = this.addRoundCornersToPath(ponits1, radius);
+        return [path1];
+    };
+    // 等边三角形
+    SvgPathGenerator.prototype.getTrianglePath = function (radius) {
+        var S = this.size;
+        var height = Math.sin(this.toRadians(60)) * S;
+        // 内切圆为最大圆角，其半径是高度的1/3
+        var maxRadius = Math.min(radius, height / 3) || 0;
+        // sin30度，所以斜边是R的2倍，斜边减去R就是高度移动的距离
+        var dy = (S - height - maxRadius) / 2;
+        var points1 = [
+            [0, height + dy],
+            [S / 2, dy],
+            [S, height + dy]
+        ];
+        var path1 = this.addRoundCornersToPath(points1, radius);
+        return [path1];
+    };
+    // 直角三角形
+    SvgPathGenerator.prototype.getRightTrianglePath = function (radius) {
+        var points1 = [
+            [0, 0],
+            [200, 200],
+            [0, 200]
+        ];
+        var path1 = this.addRoundCornersToPath(points1, radius);
+        return [path1];
+    };
+    // 矩形
+    SvgPathGenerator.prototype.getRectanglePath = function (radius) {
+        var S = this.size;
+        var points1 = [
+            [0, S / 4],
+            [S, S / 4],
+            [S, (S / 4) * 3],
+            [0, (S / 4) * 3]
+        ];
+        var path1 = this.addRoundCornersToPath(points1, radius);
+        return [path1];
+    };
+    // 凸弧矩形
+    SvgPathGenerator.prototype.getConvexArcRectangle = function (radius) {
+        var S = this.size;
+        var w = S;
+        var h = (S / 3) * 2;
+        var x = (S - h) / 2 - radius / 4;
+        var path1 = "\n      M 0 ".concat(h + x, "\n      L 0 ").concat(radius + x, "\n      Q ").concat(w / 2, " ").concat(x, " ").concat(w, " ").concat(radius + x, "\n      L ").concat(w, " ").concat(h + x, "\n      Z\n    ");
+        return [path1];
+    };
+    // 凹弧矩形
+    SvgPathGenerator.prototype.getConcaveArcRectangle = function (radius) {
+        var S = this.size;
+        var w = S;
+        var h = S / 2;
+        var x = (S - h) / 2;
+        var path1 = "\n      M 0 ".concat(h + x, "\n      L 0 ").concat(x, "\n      Q ").concat(w / 2, " ").concat(radius + x, " ").concat(w, " ").concat(x, "\n      L ").concat(w, " ").concat(h + x, "\n      Z\n    ");
+        return [path1];
+    };
+    // 双凸弧矩形
+    SvgPathGenerator.prototype.getDConvexArcRectangle = function (radius) {
+        var S = this.size;
+        var dx = radius;
+        var path1 = "\n      M 0 ".concat(S / 4, "\n      Q ").concat(S / 2, " ").concat(S / 4 - dx, " ").concat(S, " ").concat(S / 4, "\n      L ").concat(S, " ").concat((S / 4) * 3, "\n      Q ").concat(S / 2, " ").concat((S / 4) * 3 + dx, " 0 ").concat((S / 4) * 3, "\n      Z\n    ");
+        return [path1];
+    };
+    // 双凹弧矩形
+    SvgPathGenerator.prototype.getDConcaveArcRectangle = function (radius) {
+        var S = this.size;
+        var dx = radius;
+        var path1 = "\n      M 0 ".concat(S / 4, "\n      Q ").concat(S / 2, " ").concat(S / 4 + dx, " ").concat(S, " ").concat(S / 4, "\n      L ").concat(S, " ").concat((S / 4) * 3, "\n      Q ").concat(S / 2, " ").concat((S / 4) * 3 - dx, " 0 ").concat((S / 4) * 3, "\n      Z\n    ");
+        return [path1];
+    };
+    // 桶形矩形
+    SvgPathGenerator.prototype.getBarrelRectangle = function (radius) {
+        var S = this.size;
+        var R = radius;
+        var dx = R / 4;
+        var path1 = "\n      M 0 ".concat(S / 4 - dx, "\n      Q ").concat(S / 2, " ").concat(S / 4 + R - dx, " ").concat(S, " ").concat(S / 4 - dx, "\n      L ").concat(S, " ").concat((S / 4) * 3 - dx, "\n      Q ").concat(S / 2, " ").concat((S / 4) * 3 + R - dx, " 0 ").concat((S / 4) * 3 - dx, "\n      Z\n    ");
+        return [path1];
+    };
+    // 菱形
+    SvgPathGenerator.prototype.getRhombusPath = function (radius) {
+        var ponits1 = [
+            [100, 0],
+            [200, 100],
+            [100, 200],
+            [0, 100]
+        ];
+        var path1 = this.addRoundCornersToPath(ponits1, radius);
+        return [path1];
+    };
+    // 平行四边形
+    SvgPathGenerator.prototype.getParallelogramPath = function (radius) {
+        var points1 = [
+            [50, 0],
+            [200, 0],
+            [150, 200],
+            [0, 200]
+        ];
+        var path1 = this.addRoundCornersToPath(points1, radius);
+        return [path1];
+    };
+    // 矩形-类型1
+    SvgPathGenerator.prototype.getRectangleType1Path = function () {
+        var S = this.size;
+        var x = 20;
+        var points = [
+            [x, 0],
+            [S - x, 0],
+            [S - x, x],
+            [S, x],
+            [S, S - x],
+            [S - x, S - x],
+            [S - x, S],
+            [x, S],
+            [x, S - x],
+            [0, S - x],
+            [0, x],
+            [x, x]
+        ];
+        var path = this.addRoundCornersToPath(points, 0);
+        return [path];
+    };
+    // 矩形-类型2
+    SvgPathGenerator.prototype.getRectangleType2Path = function (radius) {
+        var S = this.size;
+        var dx = 35;
+        var points = [
+            [0, 0],
+            [S - dx, 0],
+            [S, S / 2],
+            [S - dx, S],
+            [0, S],
+            [dx, S / 2]
+        ];
+        var path = this.addRoundCornersToPath(points, radius);
+        return [path];
+    };
+    // 矩形-类型3
+    SvgPathGenerator.prototype.getRectangleType3Path = function (radius) {
+        var S = this.size;
+        var dx = 35;
+        var points = [
+            [0, 0],
+            [S - dx, 0],
+            [S, S / 2],
+            [S - dx, S],
+            [0, S]
+        ];
+        var path = this.addRoundCornersToPath(points, radius);
+        return [path];
+    };
+    // 星形
+    SvgPathGenerator.prototype.getStar = function (radius) {
+        var points = [
+            [100, 11.1297757],
+            [129.05723, 70.0061542],
+            [194.031171, 79.4474205],
+            [147.015586, 125.27629],
+            [158.11446, 189.987692],
+            [100, 159.435112],
+            [41.8855403, 189.987692],
+            [52.9844145, 125.27629],
+            [5.96882894, 79.4474205],
+            [70.9427701, 70.0061542]
+        ];
+        var path = this.addRoundCornersToPath(points, radius);
+        return [path];
+    };
+    // 心形
+    SvgPathGenerator.prototype.getHeart = function () {
+        var path = "\n      M143.526375,12\n      C132.21418,12 124.346417,16.1423074 111.598905,27.0093876\n      C111.007635,27.5125184 107.668026,30.3835001 106.701139,31.2037806\n      C103.410893,33.9868624 98.5891073,33.9868624 95.2988609,31.2037806\n      C94.331974,30.3807731 90.9923649,27.5125184 90.4010952,27.0093876\n      C77.653583,16.1423074 69.78582,12 58.4736246,12\n      C24.0713382,12 2,39.4823959 2,79.1438299\n      C2,109.386491 32.9900653,146.921686 95.9859458,190.440184\n      C99.0044944,192.519939 102.995506,192.519939 106.014054,190.440184\n      C169.009935,146.924413 200,109.386491 200,79.1438299\n      C200,39.4823959 177.928662,12 143.526375,12\n    Z";
+        return [path];
+    };
+    // 五边形
+    SvgPathGenerator.prototype.getPentagon = function (radius) {
+        var S = this.size;
+        var a = S / (Math.tan(this.toRadians(54)) * 2);
+        var b = S / 2;
+        var c = Math.sqrt(a * a + b * b);
+        var x1 = Math.sin(this.toRadians(18)) * c;
+        var x2 = Math.cos(this.toRadians(18)) * c;
+        var dx = (S - (a + x2)) / 2;
+        var points1 = [
+            [S, a + dx],
+            [S - x1, a + x2 + dx],
+            [x1, a + x2 + dx],
+            [0, a + dx],
+            [b, dx]
+        ];
+        var path1 = this.addRoundCornersToPath(points1, radius);
+        return [path1];
+    };
+    // 六边形
+    SvgPathGenerator.prototype.getHexagon = function (radius) {
+        var points1 = [
+            [100, 0.577350269],
+            [186.10254, 50.2886751],
+            [186.10254, 149.711325],
+            [100, 199.42265],
+            [13.8974596, 149.711325],
+            [13.8974596, 50.2886751]
+        ];
+        var path1 = this.addRoundCornersToPath(points1, radius);
+        return [path1];
+    };
+    // 正八边形
+    SvgPathGenerator.prototype.getOctagonPath = function (radius) {
+        var S = this.size;
+        var x = S / (2 + Math.sqrt(2));
+        var points1 = [
+            [x, 0],
+            [S - x, 0],
+            [S, x],
+            [S, S - x],
+            [S - x, S],
+            [x, S],
+            [0, S - x],
+            [0, x]
+        ];
+        var path1 = this.addRoundCornersToPath(points1, radius);
+        return [path1];
+    };
+    // 六角星
+    SvgPathGenerator.prototype.getHexagonStar = function (radius) {
+        var points1 = [
+            [149.380343, 14.4707367],
+            [142.764632, 75.3098284],
+            [198.760686, 100],
+            [142.764632, 124.690172],
+            [149.380343, 185.529263],
+            [100, 149.380343],
+            [50.6196568, 185.529263],
+            [57.2353684, 124.690172],
+            [1.23931367, 100],
+            [57.2353684, 75.3098284],
+            [50.6196568, 14.4707367],
+            [100, 50.6196568]
+        ];
+        var path1 = this.addRoundCornersToPath(points1, radius);
+        return [path1];
+    };
+    // 圆
+    SvgPathGenerator.prototype.getCirclePath = function () {
+        var path = "\n      M 100 0\n      A 100 100 0 0 1 100 200\n      A 100 100 0 0 1 100 0\n      Z\n    ";
+        return [path];
+    };
+    // 箭头
+    SvgPathGenerator.prototype.getArrowPath = function (radius) {
+        var points = [
+            [0, 75],
+            [110, 75],
+            [110, 30],
+            [200, 100],
+            [110, 170],
+            [110, 125],
+            [0, 125]
+        ];
+        return [this.addRoundCornersToPath(points, radius)];
+    };
+    // 树叶形状
+    SvgPathGenerator.prototype.getLeafPath = function () {
+        var path = "\n      M 0 140\n      Q 0 60 80 60\n      L 200 60\n      Q 200 140 120 140\n      Z\n    ";
+        return [path];
+    };
+    SvgPathGenerator.getCustomPath = function (paths) {
+        return paths || [];
+    };
+    return SvgPathGenerator;
+}());
+var Shape = function (props) {
+    var BASE_SIZE = 200;
+    var cx = props.classnames, className = props.className, shapeType = props.shapeType, color = props.color, _a = props.stroke, stroke = _a === void 0 ? 'currentColor' : _a, _b = props.strokeWidth, strokeWidth = _b === void 0 ? 0 : _b, _c = props.strokeType, strokeType = _c === void 0 ? 'line' : _c, _d = props.width, width = _d === void 0 ? BASE_SIZE : _d, _e = props.height, height = _e === void 0 ? BASE_SIZE : _e;
+    var paths = SvgPathGenerator.getPath(shapeType, props);
+    var strokeProps = SvgPathGenerator.getStrokeProps(stroke, strokeWidth, strokeType);
+    var getStyle = React__default.useCallback(function () { return [
+        {
+            width: width + 'px',
+            height: height + 'px'
+        },
+        {
+            transform: "scale(".concat(width / BASE_SIZE, ", ").concat(height / BASE_SIZE, ")")
+        }
+    ]; }, [width, height]);
+    return (React__default.createElement("div", { className: cx('Shape', className), style: getStyle()[0], onClick: props.onClick },
+        React__default.createElement("svg", { className: cx('Shape-svg'), width: BASE_SIZE, height: BASE_SIZE, style: getStyle()[1], fill: color ? color : 'currentColor', viewBox: "0 0 ".concat(BASE_SIZE, " ").concat(BASE_SIZE) }, paths.map(function (path, index) { return (React__default.createElement("path", __assign({}, strokeProps, { key: index, d: path }))); }))));
+};
+var Shape$1 = themeable(Shape);
+
+export { Shape$1 as default };