refactor(Form): 重构表单组件 uiwjs#845

Author: cuilanxin

packages/react-form/package.json

@@ -46,6 +46,8 @@
   "dependencies": {
     "@uiw/react-grid": "^4.21.2",
     "@uiw/react-input": "^4.21.2",
-    "@uiw/utils": "^4.21.2"
+    "@uiw/utils": "^4.21.2",
+    "@uiw/react-select": "^4.21.2",
+    "@uiw/react-textarea": "^4.21.2"
   }
 }

packages/react-form/src/Form.tsx

@@ -1,7 +1,8 @@
 import React, { useState, useImperativeHandle, useMemo } from 'react';
 import { IProps } from '@uiw/utils';
 import FormItem, { FormItemProps } from './FormItem';
-import './style/form.less';
+// import './style/form.less';
+import { FormWarp, Fieldset } from './style';
 
 export interface FormProps<T> extends IProps, Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onChange' | 'onSubmit'> {
   prefixCls?: string;
@@ -59,7 +60,10 @@ export type FormElementProps = {
   onChange?: (env: React.BaseSyntheticEvent<HTMLInputElement>, list?: string[]) => void;
 };
 
-export type FormRefType = Record<'onSubmit' | 'resetForm' | 'getFieldValues' | 'setFields' | 'getError' | 'setFieldValue', Function>;
+export type FormRefType = Record<
+  'onSubmit' | 'resetForm' | 'getFieldValues' | 'setFields' | 'getError' | 'setFieldValue',
+  Function
+>;
 
 function newFormState<T>(
   fields: FormProps<T>['fields'],
@@ -303,14 +307,14 @@ function Form<T>(
   }
 
   return (
-    <form
+    <FormWarp
       {...{
         ...others,
         className: [prefixCls, className].filter(Boolean).join(' ').trim(),
         onSubmit: handleSubmit,
       }}
     >
-      <fieldset {...{ disabled: data.submitting }}>
+      <Fieldset {...{ disabled: data.submitting }}>
         {typeof children === 'function'
           ? children({
               fields: formUnits,
@@ -319,8 +323,8 @@ function Form<T>(
               canSubmit: canSubmit,
             })
           : children}
-      </fieldset>
-    </form>
+      </Fieldset>
+    </FormWarp>
   );
 }
 

packages/react-form/src/FormItem.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import { Col, Row } from '@uiw/react-grid';
 import { IProps, HTMLInputProps } from '@uiw/utils';
 import { FormFieldsProps } from './Form';
-import './style/form-item.less';
+// import './style/form-item.less';
+import { ParentDiv, LabelStyle, HelpStyle, RowStyle } from './style/item';
 
 export interface FormItemProps<T> extends IProps, HTMLInputProps {
   inline?: boolean;
@@ -43,37 +44,39 @@ export default class FormItem<T> extends React.PureComponent<FormItemProps<T>> {
     const labelCls = ['w-form-label', labelClassName].filter(Boolean).join(' ').trim();
     if (inline) {
       return (
-        <div className={cls} style={style} {...otherProps}>
-          <Row>
-            <Col fixed className={labelCls}>
+        <ParentDiv hasError={hasError} className={cls} style={style} {...otherProps}>
+          <RowStyle as={Row}>
+            <LabelStyle as={Col} fixed className={labelCls}>
               {required && <label style={{ color: 'red' }}>*</label>}
-              <label style={labelStyle} htmlFor={labelFor}>
+              <LabelStyle style={labelStyle} htmlFor={labelFor}>
                 {label}
-              </label>
-            </Col>
+              </LabelStyle>
+            </LabelStyle>
             <Col className="w-form-row">{this.props.children}</Col>
-          </Row>
+          </RowStyle>
           {help && (
-            <Row>
-              <Col className="w-form-help">{help}</Col>
-            </Row>
+            <RowStyle as={Row}>
+              <HelpStyle as={Col} className="w-form-help">
+                {help}
+              </HelpStyle>
+            </RowStyle>
           )}
-        </div>
+        </ParentDiv>
       );
     }
     return (
-      <div className={cls} style={style} {...otherProps}>
+      <ParentDiv hasError={hasError} className={cls} style={style} {...otherProps}>
         {label && (
           <React.Fragment>
             {required && <label style={{ color: 'red' }}>*</label>}
-            <label className={labelCls} style={labelStyle} htmlFor={labelFor}>
+            <LabelStyle className={labelCls} style={labelStyle} htmlFor={labelFor}>
               {label}
-            </label>
+            </LabelStyle>
           </React.Fragment>
         )}
         <Col className="w-form-row">{this.props.children}</Col>
-        {help && <div className="w-form-help">{help}</div>}
-      </div>
+        {help && <HelpStyle className="w-form-help">{help}</HelpStyle>}
+      </ParentDiv>
     );
   }
 }

packages/react-form/src/style/index.ts

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import { ThemeVariantValueOptions } from '@uiw/utils';
+
+export interface FormStyleProps extends ThemeVariantValueOptions {}
+
+export const FormWarp = styled.form<FormStyleProps>``;
+
+export const Fieldset = styled.fieldset`
+  margin: 0;
+  padding: 0;
+  border-width: 0;
+`;

packages/react-form/src/style/item.ts

@@ -0,0 +1,51 @@
+import styled, { css } from 'styled-components';
+import { HTMLInputProps, ThemeVariantValueOptions } from '@uiw/utils';
+import { InputBase } from '@uiw/react-input';
+import { SelectWarp } from '@uiw/react-select';
+import { TextareaWarp } from '@uiw/react-textarea';
+
+interface ParentDivProps extends HTMLInputProps, ThemeVariantValueOptions {
+  hasError?: boolean;
+}
+
+export const LabelStyle = styled.label`
+  line-height: 32px;
+  min-height: 32px;
+  font-weight: 600;
+  font-size: 14px;
+  padding-right: 5px;
+  label {
+    display: inline-block;
+  }
+`;
+
+export const HelpStyle = styled.div`
+  color: #c2c2c2;
+  font-size: 12px;
+  padding-top: 3px;
+`;
+export const RowStyle = styled.div`
+  align-items: center;
+  display: flex;
+`;
+
+export const ParentDiv = styled.div<ParentDivProps>`
+  margin-bottom: 10px;
+  ${(props) =>
+    props.hasError &&
+    css`
+      ${InputBase},${SelectWarp},${TextareaWarp} {
+        box-shadow: 0 0 0 1px #dc3545, 0 0 0 3px rgba(220, 53, 69, 0.17), inset 0 1px 1px rgba(16, 22, 26, 0.2);
+        &:hover {
+          box-shadow: 0 0 0 1px #dc3545, 0 0 0 3px rgba(220, 53, 69, 0.17), inset 0 1px 1px rgba(16, 22, 26, 0.2);
+        }
+        &:focus,
+        &:hover {
+          box-shadow: 0 0 0 1px #dc3545, 0 0 0 3px rgba(220, 53, 69, 0.17), inset 0 1px 1px rgba(16, 22, 26, 0.2);
+        }
+      }
+      ${LabelStyle}, ${HelpStyle} {
+        color: #dc3545;
+      }
+    `}
+`;

packages/react-select/src/index.tsx

@@ -5,7 +5,7 @@ import Group from './Group';
 // import './style/index.less';
 
 import { SelectWarp } from './style';
-
+export * from './style';
 export interface SelectProps extends IProps, Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
   size?: 'large' | 'default' | 'small';
 }

packages/react-textarea/src/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { IProps, HTMLTextProps } from '@uiw/utils';
 // import './style/index.less';
 import { TextareaWarp } from './style/index';
-
+export * from './style';
 export interface TextareaProps extends IProps, HTMLTextProps {}
 
 export default React.forwardRef<HTMLTextAreaElement, TextareaProps>((props, ref) => {