Fix range disabled (#569)

alibaba · Dec 31, 2019 · e9c4c9d · e9c4c9d
1 parent cab64d2
commit e9c4c9d
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 9 deletions.
diff --git a/packages/antd/src/components/FormTextBox.tsx b/packages/antd/src/components/FormTextBox.tsx
@@ -7,7 +7,7 @@ import styled from 'styled-components'
 
 export const FormTextBox = createControllerBox<IFormTextBox>(
   'text-box',
-  styled(({ props, className, children }) => {
+  styled(({ props, form, className, children }) => {
     const schema = new Schema(props)
     const {
       title,
@@ -38,16 +38,22 @@ export const FormTextBox = createControllerBox<IFormTextBox>(
               el,
               () => {
                 const ctrl = el.querySelector(
-                  '.ant-form-item-control:first-child'
+                  '.ant-form-item-children'
                 )
-                if (ctrl) {
-                  el.style.width = ctrl.getBoundingClientRect().width + 'px'
-                }
+                setTimeout(() => {
+                  if (ctrl) {
+                    const editable = form.getFormState(state => state.editable)
+                    el.style.width = editable
+                      ? ctrl.getBoundingClientRect().width + 'px'
+                      : 'auto'
+                  }
+                })
               }
             ]
           }
         )
         syncLayouts.forEach(([el, handler]) => {
+          handler()
           el.addEventListener('DOMSubtreeModified', handler)
         })
 
@@ -111,8 +117,14 @@ export const FormTextBox = createControllerBox<IFormTextBox>(
     .text-box-words:nth-child(1) {
       margin-left: 0;
     }
+    .text-box-words {
+      margin-bottom: 0 !important;
+    }
     .text-box-field {
       display: inline-block;
+      .ant-form-item {
+        margin-bottom: 0 !important;
+      }
     }
     .next-form-item {
       margin-bottom: 0 !important;

diff --git a/packages/antd/src/fields/range.tsx b/packages/antd/src/fields/range.tsx
@@ -36,7 +36,7 @@ registerFormField(
   })(
     class Component extends React.Component<ISliderProps> {
       public render() {
-        const { onChange, value, min, max, marks } = this.props
+        const { onChange, value, min, max, marks, ...rest } = this.props
         let newMarks = {}
         if (Array.isArray(marks)) {
           marks.forEach(mark => {
@@ -47,6 +47,7 @@ registerFormField(
         }
         return (
           <Slider
+            {...rest}
             onChange={onChange}
             value={value}
             min={min}

diff --git a/packages/next/src/components/FormTextBox.tsx b/packages/next/src/components/FormTextBox.tsx
@@ -7,7 +7,7 @@ import styled from 'styled-components'
 
 export const FormTextBox = createControllerBox<IFormTextBox>(
   'text-box',
-  styled(({ props, className, children }) => {
+  styled(({ props, form, className, children }) => {
     const schema = new Schema(props)
     const {
       title,
@@ -41,7 +41,10 @@ export const FormTextBox = createControllerBox<IFormTextBox>(
                   '.next-form-item-control:first-child'
                 )
                 if (ctrl) {
-                  el.style.width = ctrl.getBoundingClientRect().width + 'px'
+                  const editable = form.getFormState(state => state.editable)
+                  el.style.width = editable
+                    ? ctrl.getBoundingClientRect().width + 'px'
+                    : 'auto'
                 }
               }
             ]
@@ -119,7 +122,10 @@ export const FormTextBox = createControllerBox<IFormTextBox>(
     }
     .preview-text {
       text-align: center !important;
-      white-space:nowrap;
+      white-space: nowrap;
+    }
+    .next-form-item-control {
+      position: relative;
     }
   `
 )