feat: 给formItem组件加data-id标识,方便dom操作

baidu · Sep 6, 2024 · 6f5c5ec · 6f5c5ec
1 parent acfb3ff
commit 6f5c5ec
Show file tree

Hide file tree

Showing 7 changed files with 123 additions and 72 deletions.
diff --git a/packages/amis-core/src/renderers/Item.tsx b/packages/amis-core/src/renderers/Item.tsx
@@ -1266,10 +1266,13 @@ export class FormItemWrap extends React.Component<FormItemProps> {
         (props.labelAlign !== 'inherit' && props.labelAlign) ||
         props.formLabelAlign;
       const labelWidth = props.labelWidth || props.formLabelWidth;
-
+      const dataId = props.name
+        ? `amis-form-item-${props.name?.split('.').pop()}`
+        : undefined;
       return (
         <div
           data-role="form-item"
+          data-id={dataId}
           className={cx(
             `Form-item Form-item--horizontal`,
             isStatic && staticClassName ? staticClassName : className,
@@ -1421,10 +1424,13 @@ export class FormItemWrap extends React.Component<FormItemProps> {
       } = props;
 
       description = description || desc;
-
+      const dataId = props.name
+        ? `amis-form-item-${props.name?.split('.').pop()}`
+        : undefined;
       return (
         <div
           data-role="form-item"
+          data-id={dataId}
           className={cx(
             `Form-item Form-item--normal`,
             isStatic && staticClassName ? staticClassName : className,
@@ -1609,9 +1615,13 @@ export class FormItemWrap extends React.Component<FormItemProps> {
       const labelWidth = props.labelWidth || props.formLabelWidth;
       description = description || desc;
 
+      const dataId = props.name
+        ? `amis-form-item-${props.name?.split('.').pop()}`
+        : undefined;
       return (
         <div
           data-role="form-item"
+          data-id={dataId}
           className={cx(
             `Form-item Form-item--inline`,
             isStatic && staticClassName ? staticClassName : className,
@@ -1743,9 +1753,13 @@ export class FormItemWrap extends React.Component<FormItemProps> {
       } = props;
       description = description || desc;
       const labelWidth = props.labelWidth || props.formLabelWidth;
+      const dataId = props.name
+        ? `amis-form-item-${props.name?.split('.').pop()}`
+        : undefined;
       return (
         <div
           data-role="form-item"
+          data-id={dataId}
           className={cx(
             `Form-item Form-item--row`,
             isStatic && staticClassName ? staticClassName : className,
@@ -1882,9 +1896,13 @@ export class FormItemWrap extends React.Component<FormItemProps> {
       const labelWidth = props.labelWidth || props.formLabelWidth;
       description = description || desc;
 
+      const dataId = props.name
+        ? `amis-form-item-${props.name?.split('.').pop()}`
+        : undefined;
       return (
         <div
           data-role="form-item"
+          data-id={dataId}
           className={cx(
             `Form-item Form-item--flex`,
             isStatic && staticClassName ? staticClassName : className,

diff --git a/packages/amis-ui/src/components/Checkbox.tsx b/packages/amis-ui/src/components/Checkbox.tsx
@@ -29,6 +29,7 @@ interface CheckboxProps extends ThemeProps {
   optionType?: 'default' | 'button';
   children?: React.ReactNode | Array<React.ReactNode>;
   testIdBuilder?: TestIdBuilder;
+  dataId?: string;
 }
 
 export class Checkbox extends React.Component<CheckboxProps, any> {
@@ -99,6 +100,7 @@ export class Checkbox extends React.Component<CheckboxProps, any> {
         })}
         data-role="checkbox"
         {...testIdBuilder?.getTestId()}
+        data-id={this.props.dataId}
       >
         <input
           type={type}

diff --git a/packages/amis-ui/src/components/InputBox.tsx b/packages/amis-ui/src/components/InputBox.tsx
@@ -23,6 +23,7 @@ export interface InputBoxProps
   borderMode?: 'full' | 'half' | 'none';
   testIdBuilder?: TestIdBuilder;
   inputRender?: (props: any, ref?: any) => JSX.Element;
+  dataId?: string;
 }
 
 export interface InputBoxState {
@@ -91,6 +92,7 @@ export class InputBox extends React.Component<InputBoxProps, InputBoxState> {
       mobileUI,
       testIdBuilder,
       inputRender,
+      dataId,
       ...rest
     } = this.props;
     const isFocused = this.state.isFocused;
@@ -106,6 +108,7 @@ export class InputBox extends React.Component<InputBoxProps, InputBoxState> {
           [`InputBox--border${ucFirst(borderMode)}`]: borderMode
         })}
         onClick={onClick}
+        data-id={dataId}
       >
         {result}
 

diff --git a/packages/amis-ui/src/components/Select.tsx b/packages/amis-ui/src/components/Select.tsx
@@ -401,6 +401,8 @@ export interface SelectProps
    * 检索函数
    */
   filterOption?: FilterOption;
+
+  dataId?: string;
 }
 
 interface SelectState {
@@ -1375,6 +1377,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
                 },
                 className
               )}
+              data-id={this.props.dataId}
             >
               <div
                 className={cx(`Select-valueWrap`, {

diff --git a/packages/amis-ui/src/components/schema-editor/Array.tsx b/packages/amis-ui/src/components/schema-editor/Array.tsx
@@ -57,6 +57,7 @@ export class SchemaEditorItemArray extends SchemaEditorItemCommon {
         })}
       >
         <SchemaEditorItem
+          dataId={this.props.dataId}
           types={types}
           onTypeChange={onTypeChange}
           label={
@@ -135,6 +136,7 @@ export class SchemaEditorItemArray extends SchemaEditorItemCommon {
         className={cx('SchemaEditorItem SchemaEditorArray', {
           'SchemaEditorItem--mini': mini
         })}
+        data-id={'amis-schema-editor-' + this.props.dataId}
       >
         {showInfo !== false ? (
           <>

diff --git a/packages/amis-ui/src/components/schema-editor/Common.tsx b/packages/amis-ui/src/components/schema-editor/Common.tsx
@@ -27,6 +27,7 @@ export type SchemaEditorItemPlaceholder = Partial<
 export interface SchemaEditorItemCommonProps extends LocaleProps, ThemeProps {
   label?: string;
   value?: JSONSchema;
+  dataId?: string;
   onChange: (value: JSONSchema) => void;
   types: Array<{
     label: string;
@@ -141,7 +142,8 @@ export class SchemaEditorItemCommon<
       mobileUI,
       mini,
       formPrefixRender,
-      formAffixRender
+      formAffixRender,
+      showInfo
     } = this.props;
 
     return (
@@ -175,6 +177,11 @@ export class SchemaEditorItemCommon<
             simpleValue
             mobileUI={mobileUI}
             popOverContainer={popOverContainer}
+            dataId={
+              showInfo === false
+                ? `amis-schema-editor-${this.props.dataId}-type`
+                : ''
+            }
           />
         ) : null}
 
@@ -185,6 +192,7 @@ export class SchemaEditorItemCommon<
             value={required}
             onChange={onRequiredChange}
             disabled={disabled}
+            dataId={`amis-schema-editor-${this.props.dataId}-required`}
           />
         ) : null}
 
@@ -371,6 +379,7 @@ export class SchemaEditorItemCommon<
         className={cx('SchemaEditorItem', {
           'SchemaEditorItem--mini': mini
         })}
+        data-id={'amis-schema-editor-' + this.props.dataId}
       >
         {this.renderCommon()}
       </div>

diff --git a/packages/amis-ui/src/components/schema-editor/Object.tsx b/packages/amis-ui/src/components/schema-editor/Object.tsx
@@ -288,7 +288,8 @@ export class SchemaEditorItemObject extends SchemaEditorItemCommon<
       placeholder,
       mobileUI,
       mini,
-      addButtonText
+      addButtonText,
+      dataId
     } = this.props;
     const members = this.state.members;
 
@@ -299,74 +300,86 @@ export class SchemaEditorItemObject extends SchemaEditorItemCommon<
         })}
       >
         {members.length ? (
-          members.map((member, index) => (
-            <SchemaEditorItem
-              mobileUI={mobileUI}
-              mini={mini}
-              key={member.id}
-              types={types}
-              onTypeChange={onTypeChange}
-              enableAdvancedSetting={enableAdvancedSetting}
-              popOverContainer={popOverContainer}
-              prefix={
-                mini ? undefined : (
-                  <>
-                    <InputBox
-                      className={cx('SchemaEditor-key')}
-                      hasError={member.hasError}
-                      value={member.key || ''}
-                      onChange={this.handlePropKeyChange.bind(this, index)}
-                      placeholder={__(placeholder?.key ?? '')}
-                      disabled={disabled || !!value?.$ref}
-                      mobileUI={mobileUI}
-                    />
-
-                    <InputBox
-                      className={cx('SchemaEditor-title')}
-                      value={member.schema.title || ''}
-                      onChange={this.handlePropTitleChange.bind(this, index)}
-                      placeholder={__(placeholder?.title ?? '')}
-                      disabled={disabled || !!value?.$ref}
-                      mobileUI={mobileUI}
-                    />
-                  </>
-                )
-              }
-              affix={
-                <Button
-                  className={cx('SchemaEditor-btn')}
-                  onClick={this.handlePropRemove.bind(this, index)}
-                  iconOnly={!mini}
-                  level={mini ? 'link' : 'default'}
-                  disabled={disabled || !!value?.$ref}
-                >
-                  <Icon icon="remove" className="icon" />
-                </Button>
-              }
-              value={
-                mini
-                  ? ({
-                      ...member.schema,
-                      key: member.key,
-                      isRequired: member.required
-                    } as any)
-                  : member.schema
-              }
-              onChange={this.handlePropChange.bind(this, index)}
-              onFormConfirm={this.handleEditProppertyConfirm.bind(this, index)}
-              renderExtraProps={renderExtraProps}
-              renderModalProps={renderModalProps}
-              locale={locale}
-              translate={__}
-              classnames={cx}
-              classPrefix={classPrefix}
-              disabled={disabled || !!value?.$ref}
-              required={member.required}
-              onRequiredChange={this.handlePropRequiredChange.bind(this, index)}
-              placeholder={placeholder}
-              formPrefixRender={this.renderFormPrefix}
-            />
-          ))
+          members.map((member, index) => {
+            const memberKey = dataId ? dataId + '-' + member.key : member.key;
+            return (
+              <SchemaEditorItem
+                dataId={memberKey}
+                mobileUI={mobileUI}
+                mini={mini}
+                key={member.id}
+                types={types}
+                onTypeChange={onTypeChange}
+                enableAdvancedSetting={enableAdvancedSetting}
+                popOverContainer={popOverContainer}
+                prefix={
+                  mini ? undefined : (
+                    <>
+                      <InputBox
+                        className={cx('SchemaEditor-key')}
+                        hasError={member.hasError}
+                        value={member.key || ''}
+                        onChange={this.handlePropKeyChange.bind(this, index)}
+                        placeholder={__(placeholder?.key ?? '')}
+                        disabled={disabled || !!value?.$ref}
+                        mobileUI={mobileUI}
+                        dataId={`amis-schema-editor-${memberKey}-key`}
+                      />
+
+                      <InputBox
+                        className={cx('SchemaEditor-title')}
+                        value={member.schema.title || ''}
+                        onChange={this.handlePropTitleChange.bind(this, index)}
+                        placeholder={__(placeholder?.title ?? '')}
+                        disabled={disabled || !!value?.$ref}
+                        mobileUI={mobileUI}
+                        dataId={`amis-schema-editor-${memberKey}-title`}
+                      />
+                    </>
+                  )
+                }
+                affix={
+                  <Button
+                    className={cx('SchemaEditor-btn')}
+                    onClick={this.handlePropRemove.bind(this, index)}
+                    iconOnly={!mini}
+                    level={mini ? 'link' : 'default'}
+                    disabled={disabled || !!value?.$ref}
+                  >
+                    <Icon icon="remove" className="icon" />
+                  </Button>
+                }
+                value={
+                  mini
+                    ? ({
+                        ...member.schema,
+                        key: member.key,
+                        isRequired: member.required
+                      } as any)
+                    : member.schema
+                }
+                onChange={this.handlePropChange.bind(this, index)}
+                onFormConfirm={this.handleEditProppertyConfirm.bind(
+                  this,
+                  index
+                )}
+                renderExtraProps={renderExtraProps}
+                renderModalProps={renderModalProps}
+                locale={locale}
+                translate={__}
+                classnames={cx}
+                classPrefix={classPrefix}
+                disabled={disabled || !!value?.$ref}
+                required={member.required}
+                onRequiredChange={this.handlePropRequiredChange.bind(
+                  this,
+                  index
+                )}
+                placeholder={placeholder}
+                formPrefixRender={this.renderFormPrefix}
+              />
+            );
+          })
         ) : (
           <div className={cx('SchemaEditorProps-placeholder')}>
             {__(placeholder?.empty ?? '')}
@@ -492,6 +505,7 @@ export class SchemaEditorItemObject extends SchemaEditorItemCommon<
           'is-collapsed': this.state.collapsed,
           'SchemaEditorItem--mini': mini
         })}
+        data-id={'amis-schema-editor-' + this.props.dataId}
       >
         {showInfo !== false ? (
           <>