diff --git a/src/components/scena/viewport/ScreenViewport.tsx b/src/components/scena/viewport/ScreenViewport.tsx
index 802fe85..c098413 100644
--- a/src/components/scena/viewport/ScreenViewport.tsx
+++ b/src/components/scena/viewport/ScreenViewport.tsx
@@ -76,7 +76,7 @@ function ScreenSize(props: ScreenSizeProps) {
return (
);
}
diff --git a/src/properties/AlignPanel.tsx b/src/properties/AlignPanel.tsx
index 24accaa..c3890cf 100644
--- a/src/properties/AlignPanel.tsx
+++ b/src/properties/AlignPanel.tsx
@@ -6,12 +6,12 @@ import styled from 'styled-components';
import IconButton from './IconButton';
const aligns = [
- { icon: 'AlignLeft', title: '左对齐' },
- { icon: 'AlignHorizontalCenters', title: '水平居中对齐' },
- { icon: 'AlignRight', title: '右对齐' },
- { icon: 'AlignTop', title: '顶部对齐' },
- { icon: 'AlignVerticalCenters', title: '垂直居中对齐' },
- { icon: 'AlignBottom', title: '底部对齐' },
+ { icon: 'AsanyEditor/AlignLeft', title: '左对齐' },
+ { icon: 'AsanyEditor/AlignHorizontalCenters', title: '水平居中对齐' },
+ { icon: 'AsanyEditor/AlignRight', title: '右对齐' },
+ { icon: 'AsanyEditor/AlignTop', title: '顶部对齐' },
+ { icon: 'AsanyEditor/AlignVerticalCenters', title: '垂直居中对齐' },
+ { icon: 'AsanyEditor/AlignBottom', title: '底部对齐' },
];
const MoreOptions = styled.div``;
@@ -24,12 +24,11 @@ const AlignPanel = () => {
))}
-
+
{/* TidyUp // DistributeVerticalSpacing // DistributeHorizontalSpacing
-
*/}
diff --git a/src/properties/CurrentElementInformation.tsx b/src/properties/CurrentElementInformation.tsx
index 9c41be1..aad8057 100644
--- a/src/properties/CurrentElementInformation.tsx
+++ b/src/properties/CurrentElementInformation.tsx
@@ -110,17 +110,18 @@ const CurrentElementInformation = () => {
className="header-font design-rows-items frame-preset-dropdown"
popoverClassName="asanyeditor-frame-preset-popover"
renderTitle={() => '画框'}
+ dropdownMatchSelectWidth={224}
value={{ label: screen.name, value: screen.size.join('x') } as any}
options={[...deviceTypes]}
onChange={handleFrameSizeChange}
/>
-
+
@@ -152,7 +153,7 @@ const CurrentElementInformation = () => {
/>
@@ -160,16 +161,16 @@ const CurrentElementInformation = () => {
format={rotateFormat}
onChange={handleChange(IconsConst.Rotate)}
value={state.current[IconsConst.Rotate]}
- icon="VectorRotate"
+ icon="AsanyEditor/VectorRotate"
/>
-
+
{radiusDisabled && (
diff --git a/src/properties/DsignAutoLayout.tsx b/src/properties/DsignAutoLayout.tsx
index f098cb9..f5b3782 100644
--- a/src/properties/DsignAutoLayout.tsx
+++ b/src/properties/DsignAutoLayout.tsx
@@ -23,22 +23,32 @@ const DsignAutoLayout = () => {
options={[
{
value: 'VerticalDirection',
- icon: 'VectorArrowButtom',
+ icon: 'AsanyEditor/VectorArrowButtom',
label: '垂直方向',
},
{
value: 'HorizontalDirection',
- icon: 'VectorArrowRight',
+ icon: 'AsanyEditor/VectorArrowRight',
label: '水平方向',
},
]}
/>
-
-
+
+
diff --git a/src/properties/DsignColor.tsx b/src/properties/DsignColor.tsx
index 72c6574..601e13a 100644
--- a/src/properties/DsignColor.tsx
+++ b/src/properties/DsignColor.tsx
@@ -1,6 +1,7 @@
import React, { useState } from 'react';
import ScrubbableControl from './data-entry/ScrubbableControl';
+import IconButton from './IconButton';
import DsignIcons from './OptionButton';
import { inputFormat } from './utils';
interface DsignColorProp {}
@@ -33,18 +34,19 @@ const DsignColor = (_: DsignColorProp) => {
-
);
};
+
export default DsignColor;
diff --git a/src/properties/DynaActionForm.tsx b/src/properties/DynaActionForm.tsx
index da20ce9..0b07f7f 100644
--- a/src/properties/DynaActionForm.tsx
+++ b/src/properties/DynaActionForm.tsx
@@ -23,7 +23,7 @@ interface FormItemWrapperProps {
component: React.ComponentType;
field: IField;
defaultValue?: any;
- size: string;
+ size?: string;
}
export function FormItemWrapper({ component: Item, field, defaultValue, ...props }: FormItemWrapperProps) {
@@ -86,7 +86,7 @@ const PanelBody = (props: PanelBodyProps) => {
layout={item.layout || layout}
className={classnames(`form-item-${group}-${item.name}`, getComponentClassName(item))}
>
-
+
);
@@ -99,6 +99,10 @@ function getComponentClassName(item: IField) {
if (typeof item.renderer.name === 'string') {
return `form-component-${item.renderer.name.toLowerCase()}`;
}
+ const name = item.renderer.component.name || item.renderer.component?.type?.name;
+ if (name) {
+ return `form-component-${name.toLowerCase()}`;
+ }
return null;
}
diff --git a/src/properties/FormField.tsx b/src/properties/FormField.tsx
index 4b46855..60fae65 100644
--- a/src/properties/FormField.tsx
+++ b/src/properties/FormField.tsx
@@ -24,8 +24,8 @@ function FormField({ field, className, children, layout = 'Inline', ...props }:
)}
{React.cloneElement(React.Children.only(children), props)}
diff --git a/src/properties/IconButton.tsx b/src/properties/IconButton.tsx
index 84deca4..b29d651 100644
--- a/src/properties/IconButton.tsx
+++ b/src/properties/IconButton.tsx
@@ -1,4 +1,4 @@
-import React, { MutableRefObject, forwardRef, useRef } from 'react';
+import React, { CSSProperties, MutableRefObject, forwardRef, useRef } from 'react';
import Icon from '@asany/icons';
import { Tooltip } from 'antd';
@@ -9,11 +9,12 @@ interface IconButtonProps {
className?: string;
icon: string;
checked?: boolean;
+ style?: CSSProperties;
onClick?: () => void;
}
const IconButton = (props: IconButtonProps, externalRef: React.ForwardedRef
) => {
- const { tooltip, onClick, icon, className, checked } = props;
+ const { tooltip, onClick, style, icon, className, checked } = props;
const ref = useRef(null);
const handleClick = () => {
onClick && onClick();
@@ -29,6 +30,7 @@ const IconButton = (props: IconButtonProps, externalRef: React.ForwardedRef
{parentNode && (
-
+
{parentNode[labelName]}
@@ -109,7 +109,7 @@ function ListTree(props: ListTreeProps) {
{dirs.map((item) => (
)}
-
+
{list
.filter((item) => !(item.children || []).length)
.map((item) => (
diff --git a/src/properties/RadiusAllSetting.tsx b/src/properties/RadiusAllSetting.tsx
index 5f1aa10..8ad04ec 100644
--- a/src/properties/RadiusAllSetting.tsx
+++ b/src/properties/RadiusAllSetting.tsx
@@ -7,7 +7,12 @@ import isEqual from 'lodash/isEqual';
import { onlyNumber } from './utils';
import { RadiusAllSettingProps } from './typings';
-const icons = ['TopLeftCornerRadius', 'TopRightCornerRadius', 'BottomRightCornerRadius', 'BottomLeftCornerRadius'];
+const icons = [
+ 'AsanyEditor/TopLeftCornerRadius',
+ 'AsanyEditor/TopRightCornerRadius',
+ 'AsanyEditor/BottomRightCornerRadius',
+ 'AsanyEditor/BottomLeftCornerRadius',
+];
const RadiusAllSetting = (props: RadiusAllSettingProps) => {
const { onChange, value: [tl = 0, tr = 0, br = 0, bl = 0] = [0, 0, 0, 0] } = props;
diff --git a/src/properties/combine/MultipleWrapper.tsx b/src/properties/combine/MultipleWrapper.tsx
index b88fba8..08671c1 100644
--- a/src/properties/combine/MultipleWrapper.tsx
+++ b/src/properties/combine/MultipleWrapper.tsx
@@ -34,6 +34,7 @@ export interface IMultipleWrapperData {
export interface MultipleWrapperProps {
/** 配置标题 */
name?: string;
+ placeholder?: string;
/** 孩子组件 */
children: React.ReactElement;
/** 可以添加项目,显示按钮且可以使用 */
@@ -60,18 +61,20 @@ type ItemRender = (props: any) => React.ReactElement;
type BuildItemRenderOptions = {
buildChange: (data: IMultipleWrapperData) => (newData: any) => void;
className?: string;
+ placeholder?: string;
isObject: boolean;
showPopoverImmediatelyAtCreated: boolean;
children: any;
};
const buildItemRender = (XItemRender: ItemRender | undefined, options: BuildItemRenderOptions) => {
- const { children, className, isObject, buildChange, showPopoverImmediatelyAtCreated } = options;
+ const { children, placeholder, className, isObject, buildChange, showPopoverImmediatelyAtCreated } = options;
const InnerItemRender = React.forwardRef((props: any, ref: any) => {
if (!children && !XItemRender) {
return (
(props: MultipleWrapperProps) {
canSortItem = true,
immediatelyShowPopoverWhenCreated: immediatelyShow = true,
itemName,
+ placeholder,
pipeline,
itemClassName,
itemRender: defaultItemRender,
@@ -208,6 +212,7 @@ export function MultipleWrapper(props: MultipleWrapperProps) {
buildChange: handleItemChange,
className: itemClassName,
isObject,
+ placeholder,
showPopoverImmediatelyAtCreated: immediatelyShow,
children,
}),
@@ -231,7 +236,6 @@ export function MultipleWrapper(props: MultipleWrapperProps) {
没有数据
}
tag="ul"
items={value}
itemRender={itemRender}
diff --git a/src/properties/combine/ObjectCombiner.tsx b/src/properties/combine/ObjectCombiner.tsx
index a864fa5..2858e8d 100644
--- a/src/properties/combine/ObjectCombiner.tsx
+++ b/src/properties/combine/ObjectCombiner.tsx
@@ -3,12 +3,14 @@ import React, { useEffect } from 'react';
import { Form } from 'antd';
import isEqual from 'lodash/isEqual';
import { ComponentPropertyRendererSetting, IField, useSunmao } from 'sunmao';
+import { FormLayout } from 'antd/lib/form/Form';
import { getRenderer } from '../renderers';
import { FormItemWrapper, visibleFilter } from '../DynaActionForm';
interface ObjectCombinerProps {
value?: any;
+ layout?: FormLayout;
onChange?: (value: any) => void;
className?: string;
fields: IField[];
@@ -34,7 +36,13 @@ function ObjectCombiner(props: ObjectCombinerProps) {
}
}, [form, value]);
return (
-