feat: 添加属性面板演示

limaofeng · Jul 12, 2022 · 55f5894 · 55f5894
1 parent 644c70d
commit 55f5894
Show file tree

Hide file tree

Showing 25 changed files with 626 additions and 97 deletions.
diff --git a/src/components/scena/viewport/ScreenViewport.tsx b/src/components/scena/viewport/ScreenViewport.tsx
@@ -76,7 +76,7 @@ function ScreenSize(props: ScreenSizeProps) {
   return (
     <label className={classnames({ 'is-active': focused })}>
       <span className="title">{label}</span>
-      <InputNumber value={value} onFocus={handleFocus} onBlur={handleBlur} size="small" />
+      <InputNumber value={value} onFocus={handleFocus} onBlur={handleBlur} />
     </label>
   );
 }

diff --git 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 = () => {
       ))}
       <MoreOptions className="more-options">
         <IconButton icon="AsanyEditor/VectorAlign" />
-        <Icon name="AsanyEditor/ArrowBottom" />
+        <Icon className="more-arrow" name="AsanyEditor/ArrowBottom" />
       </MoreOptions>
       {/* TidyUp // DistributeVerticalSpacing // DistributeHorizontalSpacing 
       <div className="more-options icons-pane">
         <Icon name="VectorAlign" />
-        
       </div>
       */}
     </div>

diff --git 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}
         />
         <SegmentedControl
           options={[
-            { value: 'Portrait', label: '竖屏' },
-            { value: 'Landscape', label: '横屏' },
+            { value: 'Portrait', icon: 'AsanyEditor/Portrait', label: '竖屏' },
+            { value: 'Landscape', icon: 'AsanyEditor/Landscape', label: '横屏' },
           ]}
         />
-        <IconButton className="resize-to-fit" icon="ResizeToFit" />
+        <IconButton className="resize-to-fit" icon="AsanyEditor/ResizeToFit" />
       </div>
       <div className="current-box-content">
         <div className="design-rows design-colums content-col">
@@ -152,24 +153,24 @@ const CurrentElementInformation = () => {
           />
           <OptionButton
             onChange={iconsHandleChange(IconsConst.Notch)}
-            icon={notchActive ? 'ConstrainProportionsOn' : 'ConstrainProportionsOff'}
+            icon={notchActive ? 'AsanyEditor/ConstrainProportionsOn' : 'AsanyEditor/ConstrainProportionsOff'}
           />
         </div>
         <div className="design-rows design-colums content-col">
           <ScrubbableControl
             format={rotateFormat}
             onChange={handleChange(IconsConst.Rotate)}
             value={state.current[IconsConst.Rotate]}
-            icon="VectorRotate"
+            icon="AsanyEditor/VectorRotate"
           />
           <ScrubbableControl
             value={state.current[IconsConst.Radius]}
             format={radiusFormat}
             onChange={handleChange(IconsConst.Radius)}
             disabled={radiusDisabled}
-            icon="TopLeftCornerRadius"
+            icon="AsanyEditor/TopLeftCornerRadius"
           />
-          <OptionButton onChange={iconsHandleChange(IconsConst.Semicircle)} icon="VectorSemicircle" />
+          <OptionButton onChange={iconsHandleChange(IconsConst.Semicircle)} icon="AsanyEditor/VectorSemicircle" />
         </div>
         {radiusDisabled && (
           <RadiusAllSetting value={state.current[IconsConst.Radius]} onChange={handleChange(IconsConst.Radius)} />

diff --git 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: '水平方向',
           },
         ]}
       />
-      <ScrubbableControl className="spacing-between-items" format={inputFormat} value={0} icon="VectorSpacing" />
-      <ScrubbableControl className="padding-around-items" format={inputFormat} value={0} icon="VectorPadding" />
+      <ScrubbableControl
+        className="spacing-between-items"
+        format={inputFormat}
+        value={0}
+        icon="AsanyEditor/VectorSpacing"
+      />
+      <ScrubbableControl
+        className="padding-around-items"
+        format={inputFormat}
+        value={0}
+        icon="AsanyEditor/VectorPadding"
+      />
       <IconButton
         ref={ref}
         className={classnames('alignment-and-padding', { active: visible })}
-        icon="AlignmentAndPadding"
+        icon="AsanyEditor/AlignmentAndPadding"
         onClick={handleAlignmentAndPaddingClick}
       />
     </div>

diff --git 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) => {
         </div>
       </div>
       <DsignIcons
-        style={{ gridColumn: '25/span 4' }}
+        style={{ gridColumn: '20/span 4' }}
         className="element-retract design-rows-items"
         onChange={iconHandleChange}
-        icon="VectorEyes"
+        icon="AsanyEditor/VectorEyes"
       />
-      <DsignIcons
-        style={{ gridColumn: '29/span 4' }}
+      <IconButton
+        style={{ gridColumn: '25/span 4' }}
         className="element-retract design-rows-items"
-        onChange={iconHandleChange}
-        icon="VectorSubtraction"
+        // onChange={iconHandleChange}
+        icon="AsanyEditor/VectorSubtraction"
       />
     </div>
   );
 };
+
 export default DsignColor;
diff --git a/src/properties/DynaActionForm.tsx b/src/properties/DynaActionForm.tsx
@@ -23,7 +23,7 @@ interface FormItemWrapperProps {
   component: React.ComponentType<any>;
   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))}
             >
-              <FormItemWrapper {...props} field={item} component={ComponentForm} size="small" />
+              <FormItemWrapper {...props} field={item} component={ComponentForm} />
             </FormField>
           </Form.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
@@ -24,8 +24,8 @@ function FormField({ field, className, children, layout = 'Inline', ...props }:
         </label>
       )}
       <div
-        className={classnames('smart-form-field-value flex items-center', {
-          'justify-start': layout === 'Stacked',
+        className={classnames('smart-form-field-value tw-flex tw-items-center', {
+          'tw-justify-start': layout === 'Stacked',
         })}
       >
         {React.cloneElement(React.Children.only(children), props)}

diff --git 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<HTMLSpanElement>) => {
-  const { tooltip, onClick, icon, className, checked } = props;
+  const { tooltip, onClick, style, icon, className, checked } = props;
   const ref = useRef<HTMLSpanElement>(null);
   const handleClick = () => {
     onClick && onClick();
@@ -29,6 +30,7 @@ const IconButton = (props: IconButtonProps, externalRef: React.ForwardedRef<HTML
       <span
         ref={externalRef || ref}
         tabIndex={0}
+        style={style}
         onMouseDown={handleMouseDown}
         onMouseUp={handleMouseUp}
         className={classnames('icon-button', className, { checked })}

diff --git a/src/properties/ListTree.tsx b/src/properties/ListTree.tsx
@@ -98,7 +98,7 @@ function ListTree(props: ListTreeProps) {
   return (
     <div className="list-tree-container">
       {parentNode && (
-        <div onClick={handleBack} className="tree-current-node flex items-center">
+        <div onClick={handleBack} className="tree-current-node tw-flex tw-items-center">
           <Icon name="AsanyEditor/Drillup" />
           <span className="flex-1">{parentNode[labelName]}</span>
         </div>
@@ -109,7 +109,7 @@ function ListTree(props: ListTreeProps) {
             {dirs.map((item) => (
               <li
                 key={item.id}
-                className={classnames('flex items-center', {
+                className={classnames('tw-flex tw-items-center', {
                   active: selectKeys.includes(item.id),
                 })}
                 onClick={handleClick([...openKeys, item.id])}
@@ -122,7 +122,7 @@ function ListTree(props: ListTreeProps) {
           </ul>
         )}
         <div className="tree-node-content">
-          <ul className="tree-node-item-list flex flex-row flex-wrap content-start">
+          <ul className="tree-node-item-list tw-flex tw-flex-row tw-flex-wrap tw-content-start">
             {list
               .filter((item) => !(item.children || []).length)
               .map((item) => (

diff --git 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
@@ -34,6 +34,7 @@ export interface IMultipleWrapperData<T> {
 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<any>) => (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 (
         <WrapperItem
           {...props}
+          placeholder={placeholder}
           editable={!isObject ? false : undefined}
           nameLink={!isObject ? false : undefined}
           ref={ref}
@@ -133,6 +136,7 @@ export function MultipleWrapper<T>(props: MultipleWrapperProps) {
     canSortItem = true,
     immediatelyShowPopoverWhenCreated: immediatelyShow = true,
     itemName,
+    placeholder,
     pipeline,
     itemClassName,
     itemRender: defaultItemRender,
@@ -208,6 +212,7 @@ export function MultipleWrapper<T>(props: MultipleWrapperProps) {
         buildChange: handleItemChange,
         className: itemClassName,
         isObject,
+        placeholder,
         showPopoverImmediatelyAtCreated: immediatelyShow,
         children,
       }),
@@ -231,7 +236,6 @@ export function MultipleWrapper<T>(props: MultipleWrapperProps) {
         <Sortable
           accept={[sortableType.current]}
           className="multiple-wrapper-list"
-          empty={<div>没有数据</div>}
           tag="ul"
           items={value}
           itemRender={itemRender}

diff --git 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 (
-    <Form form={form} className={className} layout="inline" component={'div'} onValuesChange={handleValuesChange}>
+    <Form
+      form={form}
+      className={className}
+      layout={props.layout || 'inline'}
+      component={'div'}
+      onValuesChange={handleValuesChange}
+    >
       {fields.filter(visibleFilter(props.value)).map((item) => {
         const { component, props = {} } = item.renderer as ComponentPropertyRendererSetting;
         const ComponentForm = component as React.ComponentType<any>;
@@ -43,12 +51,12 @@ function ObjectCombiner(props: ObjectCombinerProps) {
         return (
           <Form.Item
             className={`object-combiner-field-${item.name}`}
-            key={`${item.name}`}
+            key={item.name}
             label={lable}
             name={item.name}
             valuePropName={valuePropName}
           >
-            <FormItemWrapper {...props} field={item} component={ComponentForm} size="small" />
+            <FormItemWrapper {...props} field={item} component={ComponentForm} />
           </Form.Item>
         );
       })}

diff --git a/src/properties/combine/WrapperItem.tsx b/src/properties/combine/WrapperItem.tsx
@@ -32,6 +32,7 @@ export const SortableHandler = () => {
 export interface WrapperItemProps {
   /** 名称只读 */
   nameReadonly: boolean;
+  placeholder?: string;
   /** 名称链接 对应 数据的某个key */
   nameLink?: string;
   displayField?: string;
@@ -63,6 +64,7 @@ function WrapperItem(props: WrapperItemProps) {
     canDelete,
     editable = true,
     nameLink = 'title',
+    placeholder = '请输入内容',
   } = props;
 
   const handleChange = (key: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -89,6 +91,7 @@ function WrapperItem(props: WrapperItemProps) {
         {data.icon && <Icon name={data.icon} />}
         <Input
           className="ant-input-rimless"
+          placeholder={placeholder}
           readOnly={nameReadonly || !!nameLink}
           value={!!nameLink ? data.data[nameLink] : data.data}
           onChange={handleChange(displayField!)}