fix(antd/next): fix FormItem styles

alibaba · Jun 11, 2021 · 4ca5fa4 · 4ca5fa4
1 parent 9030911
commit 4ca5fa4
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 35 deletions.
diff --git a/designable/antd/src/components/FormContainer/index.tsx b/designable/antd/src/components/FormContainer/index.tsx
@@ -5,41 +5,18 @@ import { Empty } from 'antd'
 import cls from 'classnames'
 import './styles.less'
 
-const groupProps = (props: any) => {
-  const keys = Object.keys(props || {})
-  const dataKeys = keys.filter((key) => key.indexOf('data-') > -1)
-  const otherKeys = keys.filter((key) => key.indexOf('data-') === -1)
-  const dataProps = dataKeys.reduce((buf, key) => {
-    buf[key] = props[key]
-    return buf
-  }, {})
-  const otherProps = otherKeys.reduce((buf, key) => {
-    buf[key] = props[key]
-    return buf
-  }, {})
-  return {
-    dataProps,
-    otherProps,
-  }
-}
-
 export const createFormContainer = (
   Target: React.JSXElementConstructor<any>,
   inlineLayout = false
 ) => {
   const Component = (props: any) => {
     const prefix = usePrefix('form-container')
-    const { dataProps, otherProps } = groupProps(props)
     if (props.children) {
-      return (
-        <div {...dataProps} className={prefix + '-wrapper'}>
-          <Target {...otherProps}>{props.children}</Target>
-        </div>
-      )
+      return <Target {...props}>{props.children}</Target>
     }
     return (
       <Empty
-        {...dataProps}
+        {...props}
         className={cls(prefix, props.className)}
         description={GlobalRegistry.getDesignerMessage('droppable')}
       />

diff --git a/designable/antd/src/components/FormContainer/styles.less b/designable/antd/src/components/FormContainer/styles.less
@@ -4,8 +4,4 @@
   margin: 0 !important;
   padding: 20px;
   border: 1px solid @border-color-split;
-
-  &-wrapper {
-    padding: 8px;
-  }
 }
diff --git a/packages/antd/src/form-item/index.tsx b/packages/antd/src/form-item/index.tsx
@@ -209,7 +209,7 @@ export const BaseItem: React.FC<IFormItemProps> = (props) => {
         }
       }}
     >
-      {label !== undefined && (
+      {label && (
         <div
           className={cls({
             [`${prefixCls}-label`]: true,
@@ -240,7 +240,7 @@ export const BaseItem: React.FC<IFormItemProps> = (props) => {
               </Tooltip>
             </span>
           )}
-          {label && (
+          {colon && (
             <span className={cls(`${prefixCls}-colon`)}>
               {colon ? ':' : ''}
             </span>
@@ -251,7 +251,8 @@ export const BaseItem: React.FC<IFormItemProps> = (props) => {
       <div
         className={cls({
           [`${prefixCls}-control`]: true,
-          [`${prefixCls}-item-col-${wrapperCol}`]: enableCol && !!wrapperCol,
+          [`${prefixCls}-item-col-${wrapperCol}`]:
+            enableCol && !!wrapperCol && label,
         })}
       >
         <div className={cls(`${prefixCls}-control-content`)}>

diff --git a/packages/next/src/form-item/index.tsx b/packages/next/src/form-item/index.tsx
@@ -210,7 +210,7 @@ export const BaseItem: React.FC<IFormItemProps> = (props) => {
         }
       }}
     >
-      {label !== undefined && (
+      {label && (
         <div
           className={cls({
             [`${prefixCls}-label`]: true,
@@ -233,7 +233,7 @@ export const BaseItem: React.FC<IFormItemProps> = (props) => {
               </Balloon.Tooltip>
             </span>
           )}
-          {label && (
+          {colon && (
             <span className={cls(`${prefixCls}-colon`)}>
               {colon ? ':' : ''}
             </span>
@@ -244,7 +244,8 @@ export const BaseItem: React.FC<IFormItemProps> = (props) => {
       <div
         className={cls({
           [`${prefixCls}-control`]: true,
-          [`${prefixCls}-item-col-${wrapperCol}`]: enableCol && !!wrapperCol,
+          [`${prefixCls}-item-col-${wrapperCol}`]:
+            enableCol && !!wrapperCol && label,
         })}
       >
         <div className={cls(`${prefixCls}-control-content`)}>