Merge pull request #1546 from alibaba/widget-extra

feat: 支持配置自定义功能槽

Author: lhbxs

docs/form-render/api-schema.md

@@ -59,7 +59,7 @@ url: {
 
 ### type
 - 描述：表单字段的类型
-- 类型：`'string' | 'number' | 'boolean' | 'array' | 'range' | 'html' | 'block'`
+- 类型：`'string' | 'number' | 'boolean' | 'array' | 'range' | 'html' | 'void'`
 
 ### title 
 - 描述：表单字段的标签
@@ -159,14 +159,12 @@ rules: [
 ### props
 配置额外属性，如果使用的是 antd 组件 对应的就是 antd 组件的其他属性。例如：
 
+
+### action
+- 描述：输入控件支持配置自定义功能槽，显示在输入控件右边，通过 actions 值和 widgets 字段间映射，渲染自定义自定义功能槽。
+- 类型
 ```js
-props: {
-  options: [
-    lable: '',
-    value: '',
-    // disabled: '',
-  ]
-}
+actions: 'toolWidget' | { widget: 'toolWidget' } // toolWidget 通过 widgets 透传
 ```
 
 ## 三、嵌套控件配置项

packages/form-render/src/render-core/FieldItem/field.tsx

@@ -4,7 +4,7 @@ import { useUpdateEffect } from 'ahooks';
 import { _get, translation, isFunction } from '../../utils';
 
 export const FieldWrapperStatus = (props: any) => {
-  const { Field, fieldProps, maxWidth, initialValue, ...otherProps } = props;
+  const { Field, fieldProps, maxWidth, initialValue, acitonRender, ...otherProps } = props;
   const { onStatusChange, addons, ...otherFieldProps } = fieldProps;
   const style = maxWidth ? { maxWidth, ...fieldProps?.style } : { ...fieldProps?.style } ;
 
@@ -20,17 +20,24 @@ export const FieldWrapperStatus = (props: any) => {
   }, [JSON.stringify(initialValue)]);
 
   return (
-    <Field 
-      {...otherProps} 
-      {...otherFieldProps} 
-      style={style}
-      addons={addons}
-    />
+    <>
+      <Field 
+        {...otherProps}
+        {...otherFieldProps}
+        style={style}
+        addons={addons}
+      />
+      {acitonRender && (
+        <span className='ant-form-item-actions'>
+          {acitonRender()}
+        </span>
+      )}
+    </>
   );
 };
 
 export const FieldWrapper = (props: any) => {
-  const { Field, fieldProps, maxWidth, initialValue, ...otherProps } = props;
+  const { Field, fieldProps, maxWidth, initialValue, acitonRender, ...otherProps } = props;
   const { addons, schema } = fieldProps;
 
   const _style = maxWidth ? { maxWidth, ...fieldProps?.style }: { ...fieldProps?.style }
@@ -55,7 +62,7 @@ export const FieldWrapper = (props: any) => {
 
   return (
     <>
-      <Field 
+      <Field
         {...otherProps} 
         {...fieldProps}
         style={_style}
@@ -70,6 +77,11 @@ export const FieldWrapper = (props: any) => {
           {removeBtn?.text || t('delete')}
         </Button>
       )}
+      {acitonRender && (
+        <span className='fr-item-actions'>
+          {acitonRender()}
+        </span>
+      )}
     </>
   );
 }

packages/form-render/src/render-core/FieldItem/main.tsx

@@ -39,7 +39,18 @@ export default (props: any) => {
   const upperCtx: any = useContext(UpperContext);
 
   const { form, widgets, methods, globalProps } = configCtx;
-  const { reserveLabel, hidden, properties, dependencies, inlineMode: _inlineMode, remove, removeText, visible = true, ...otherSchema } = schema;
+  const { 
+    reserveLabel,
+    hidden,
+    properties,
+    dependencies,
+    inlineMode: _inlineMode,
+    remove,
+    removeText,
+    visible = true,
+    ...otherSchema
+  } = schema;
+
   const getValueFromKey = getParamValue(formCtx, upperCtx, schema);
 
   const widgetName = getWidgetName(schema);
@@ -130,8 +141,9 @@ export default (props: any) => {
   let noStyle = getValueFromKey('noStyle');
 
   const span = getColSpan(formCtx, upperCtx, schema);
-  const extra = getExtraView('extra', schema, widgets);
-  const help = getExtraView('help', schema, widgets);
+  const extra = getExtraView('extra', schema, widgets, fieldProps.addons);
+  const help = getExtraView('help', schema, widgets, fieldProps.addons);
+  const action = getExtraView('action', schema, widgets, fieldProps.addons);
 
   const tooltip = getTooltip(schema, displayType);
   const ruleList = getRuleList(schema, form, methods, fieldRef);
@@ -198,13 +210,15 @@ export default (props: any) => {
           fieldProps={fieldProps}
           maxWidth={maxWidth}
           initialValue={initialValue}
+          acitonRender={() => action}
         />
       ) : (
         <FieldWrapper
           Field={Widget}
           fieldProps={fieldProps}
           maxWidth={maxWidth}
           initialValue={initialValue}
+          acitonRender={() => action}
         />
       )}
     </Form.Item>

packages/form-render/src/render-core/FieldItem/module.tsx

@@ -165,27 +165,26 @@ export const getTooltip = (schema: any, displayType: string) => {
   return null;
 };
 
-export const getExtraView = (extraKey: string, schema: any, widgets: any) => {
+export const getExtraView = (extraKey: string, schema: any, widgets: any, addons: any) => {
   const extra = schema[extraKey];
   if (!extra) {
     return;
   }
-
+  
   // extra 自定义
-  const widgetName = extra?.widget;
-  if (widgetName) {
-    const Widget = widgets[widgetName];
-    if (!Widget) {
-      return;
-    }
-    return <Widget schema={schema} />;
+  const widgetName = extra?.widget || extra;
+  const Widget = widgets[widgetName];
+  if (!!Widget) {
+    return <Widget schema={schema} addons={addons} />;
+  } if (!Widget && extra?.widget) {
+    return;
   }
 
-
   let __html = '';
   if (typeof extra === 'string') {
     __html = extra;
   }
+
   // 内部BU使用的口子，这个api不对外，也没有必要
   if (extra?.text) {
     __html = extra.text;

packages/form-render/src/render-core/index.less

@@ -28,4 +28,10 @@
   margin-left: 5px;
   font-weight: normal;
   font-size: 14px;
+}
+
+.fr-item-actions {
+  margin-left: 12px;
+  display: inline-flex;
+  align-items: center;
 }