feat: add okbuttonprops for modalwithform (#234)

* feat: add okbuttonprops for modalwithform * Beta 3.0.0 lint (#235) * chore: add ko-lint-config * feat: remove eslint disable * chore: prettier fix * chore: eslint fix * chore: stylelint fix * ci: lint ci Co-authored-by: liuyi <liuyi@dtstack.com> * feat: add onButtonProps test * feat: update doc and eslint * feat: add okbuttonprops for modalwithform * feat: add onButtonProps test * feat: update doc and eslint * fix: update eslint Co-authored-by: Liuyi <liuxy0551@qq.com> Co-authored-by: liuyi <liuyi@dtstack.com>
DTStack · Oct 23, 2022 · 944f04d · 944f04d
1 parent cb42586
commit 944f04d
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 10 deletions.
diff --git a/src/components/modalWithForm/__tests__/modalWithForm.test.tsx b/src/components/modalWithForm/__tests__/modalWithForm.test.tsx
@@ -35,6 +35,7 @@ class App extends React.Component<any, any> {
                     okText="ok"
                     cancelText="quit"
                     record="hi"
+                    okButtonProps={{ danger: true }}
                 />
             </>
         );
@@ -93,3 +94,9 @@ test('should trigger submit methond when form validate successful', () => {
     fireEvent.click(eleOk);
     expect(eleOk.onclick).toHaveBeenCalled();
 });
+
+test('should render ModalWithForm render correct button props', () => {
+    fireEvent.click(wrapper.getByText('click'));
+    const eleOk = wrapper.getByText('ok');
+    expect(eleOk.parentNode).toHaveClass('ant-btn-dangerous');
+});
diff --git a/src/components/modalWithForm/index.tsx b/src/components/modalWithForm/index.tsx
@@ -4,15 +4,12 @@ import { ButtonProps, ButtonType } from 'antd/es/button';
 
 export interface IProps {
     confirmLoading?: boolean;
-    hideModalHandler: () => void;
-    onSubmit?: (values: any, record: any) => void;
     cancelText?: string;
     okText?: string;
     okType?: ButtonType;
     record?: string | number | object;
     visible?: boolean;
     title?: React.ReactNode | string;
-    onCancel?: (func: Function) => any;
     width?: string | number;
     modelClass?: string;
     footer?: React.ReactNode;
@@ -21,6 +18,10 @@ export interface IProps {
     layout?: 'horizontal' | 'vertical' | 'inline';
     preserve?: boolean;
     children?: React.ReactElement;
+    okButtonProps?: ButtonProps;
+    hideModalHandler: () => void;
+    onCancel?: (func: Function) => any;
+    onSubmit?: (values: any, record: any) => void;
     [key: string]: any;
 }
 
@@ -43,6 +44,7 @@ const ModalForm = (props: ModalProps) => {
         hideModalHandler,
         onSubmit,
         children,
+        okButtonProps,
         ...restProps
     } = props;
 
@@ -74,6 +76,7 @@ const ModalForm = (props: ModalProps) => {
             centered={centered}
             cancelButtonProps={cancelButtonProps}
             confirmLoading={confirmLoading}
+            okButtonProps={okButtonProps}
         >
             <Form form={form} layout={layout} {...restProps}>
                 {React.cloneElement(children, { form, ...props })}

diff --git a/src/stories/modalWithForm.stories.tsx b/src/stories/modalWithForm.stories.tsx
@@ -125,6 +125,13 @@ const propDefinitions = [
         property: 'confirmLoading',
         propType: 'Boolean',
         require: false,
+        description: 'ok 按钮 props',
+        defaultValue: '--',
+    },
+    {
+        property: 'okButtonProps',
+        propType: 'ButtonProps',
+        require: false,
         description: '确定按钮 loading',
         defaultValue: 'false',
     },
@@ -154,12 +161,12 @@ const basicFunctionCode = `
             visible: false
         };
      }
-     
+
     hideModalHandler = () => {
         const { visible } = this.state
         this.setState({ visible: !visible });
     }
-    
+
 `;
 const basicOtherCode = `
 const FormItem = Form.Item;
@@ -206,15 +213,15 @@ stories.add(
             ~~~js
             import { Form, Input } from 'antd';
             import { ModalWithForm } from 'dt-react-component';
-            
+
             const EnhancedModal = ModalWithForm(props => {
                 return (
                     <FormItem label="test-label" name='test' rules={[{ max: 10 }]}>
                         <Input data-testid="test-input" />)
                     </FormItem>
                 );
             });
-            
+
             class Demo extends React.Component<any, any> {
                 constructor (props) {
                     super(props);
@@ -242,7 +249,7 @@ stories.add(
             ~~~js
             import { Form, Input } from 'antd';
             import { ModalWithForm } from 'dt-react-component'
-            
+
             const EnhancedModal = ModalWithForm(props => {
                 return (
                     <FormItem label="test-label" name='test' rules={[{ max: 10 }]}>
@@ -266,14 +273,14 @@ stories.add(
                     this.setState({
                        confirmLoading: true;
                     });
-                    
+
                     setTimeout(() => {
                         this.setState({
                            visible: false,
                            confirmLoading: false
                         })
                     })
-                   
+
                 }
                 showModal = () => {
                     this.setState({