feat: 增加图片裁剪属性配置 & 增加根据名称获取自定义FormItem方法 (#5120)

* 修复人员组件默认值

* 图片选择器增加裁剪配置

* 增加根据name获取自定义组件的方法

Co-authored-by: zhangxulong <zhangxulong@baidu.com>

docs/zh-CN/components/form/input-image.md

@@ -386,6 +386,8 @@ app.listen(8080, function () {});
 | fixedSize          | `boolean`                       |                        | 是否开启固定尺寸,若开启，需同时设置 fixedSizeClassName                                                                                           |
 | fixedSizeClassName | `string`                        |                        | 开启固定尺寸时，根据此值控制展示尺寸。例如`h-30`,即图片框高为 h-30,AMIS 将自动缩放比率设置默认图所占位置的宽度，最终上传图片根据此尺寸对应缩放。 |
 | initAutoFill       | `boolean`                       | `false`                | 表单反显时是否执行 autoFill                                                                                                                      |
+| dropCrop           | `boolean`                       | `true`                 | 图片上传后是否进入裁剪模式                                                                                                                       |
+| initCrop           | `boolean`                       | `false`                | 图片选择器初始化后是否立即进入裁剪模式                                                                                                           |
 
 ### Limit 属性表
 

packages/amis-core/src/factory.tsx

@@ -104,7 +104,7 @@ export interface fetcherConfig {
 }
 
 const renderers: Array<RendererConfig> = [];
-const renderersMap: {
+export const renderersMap: {
   [propName: string]: boolean;
 } = {};
 const schemaFilters: Array<RenderSchemaFilter> = [];

packages/amis-core/src/index.tsx

@@ -63,7 +63,8 @@ import FormItem, {
   FormControlProps,
   FormItemWrap,
   FormItemProps,
-  registerFormItem
+  registerFormItem,
+  getFormItemByName
 } from './renderers/Item';
 import {
   FormOptionsControl,
@@ -115,6 +116,7 @@ export {
   unRegisterRenderer,
   getRenderers,
   registerFormItem,
+  getFormItemByName,
   registerOptionsControl,
   resolveRenderer,
   filterSchema,

packages/amis-core/src/renderers/Item.tsx

@@ -4,6 +4,7 @@ import {IFormItemStore, IFormStore} from '../store/form';
 import {reaction} from 'mobx';
 
 import {
+  renderersMap,
   RendererProps,
   registerRenderer,
   TestFunc,
@@ -1621,4 +1622,8 @@ export function FormItem(config: FormItemBasicConfig) {
   };
 }
 
+export function getFormItemByName(name: string) {
+  return renderersMap[name];
+}
+
 export default FormItem;

packages/amis/src/renderers/Form/InputImage.tsx

@@ -242,6 +242,16 @@ export interface ImageControlSchema extends FormBaseControlSchema {
    */
   initAutoFill?: boolean;
 
+  /**
+   * 初始化时是否打开裁剪模式
+   */
+   initCrop?: boolean;
+
+   /**
+    * 图片上传完毕是否进入裁剪模式
+    */
+    dropCrop?: boolean;
+
   /**
    * 默认占位图图片地址
    */
@@ -327,7 +337,8 @@ export default class ImageControl extends React.Component<
     extractValue: false,
     delimiter: ',',
     autoUpload: true,
-    multiple: false
+    multiple: false,
+    dropCrop: true
   };
 
   static formatFileSize(
@@ -454,6 +465,10 @@ export default class ImageControl extends React.Component<
         ? this.syncAutoFill()
         : addHook(this.syncAutoFill, 'init');
     }
+
+    if (this.props.initCrop && this.files.length){
+      this.editImage(0);
+    }
   }
 
   componentDidUpdate(prevProps: ImageProps) {
@@ -873,9 +888,9 @@ export default class ImageControl extends React.Component<
   }
 
   handleDrop(files: Array<FileX>) {
-    const {multiple, crop} = this.props;
+    const {multiple, crop, dropCrop} = this.props;
 
-    if (crop && !multiple) {
+    if (crop && !multiple && dropCrop) {
       const file = files[0] as any;
       if (!file.preview || !file.url) {
         file.preview = window.URL.createObjectURL(file);