fix(SearchTree): 组件验证样式问题 (#846)

Author: wj0990

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

@@ -1,14 +1,16 @@
-@w-form:~ "w-form";
+@w-form: ~'w-form';
 
 .@{w-form} {
   &-item {
     margin-bottom: 10px;
   }
+
   &-item-error {
     .@{w-form}-help,
     .@{w-form}-label {
       color: #dc3545;
     }
+
     .w-input-inner,
     .w-select,
     .w-select-default,
@@ -18,24 +20,33 @@
     .w-input-inner:focus.w-input-inner:hover,
     .w-textarea,
     .w-textarea:hover,
+    .w-search-tree-inner,
     .w-textarea:focus.w-textarea: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);
     }
+
+    .w-search-tree-inner .w-input .w-input-inner {
+      box-shadow: none !important;
+    }
   }
+
   &-label {
     line-height: 32px;
     min-height: 32px;
     font-weight: 600;
     font-size: 14px;
     padding-right: 5px;
+
     label {
       display: inline-block;
     }
   }
+
   &-row {
     align-items: center;
     display: flex;
   }
+
   &-help {
     color: #c2c2c2;
     font-size: 12px;

packages/react-search-tree/README.md

@@ -191,9 +191,7 @@ ReactDOM.render(<Demo />, _mount_);
 ```jsx
 import React, { useState, useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
-import {  Form, Button, SearchTree, Card, Row, Col } from 'uiw';;
-
-
+import { Notify, Form, Button, SearchTree, Card, Row, Col,Select } from 'uiw';
 const Demo = () => {
 const form=useRef()
 
@@ -258,7 +256,7 @@ const form=useRef()
         }}
         onSubmit={({initial, current}) => {
           const errorObj = {};
-          if (!current.searchTree) {
+           if (!current.searchTree || current.searchTree.length === 0) {
             errorObj.searchTree = '默认需要选择内容，选择入内容';
           }
           if(Object.keys(errorObj).length > 0) {

packages/react-steps/README.md

@@ -209,7 +209,7 @@ function Demo() {
           <Steps.Step title="步骤一" description="这里是步骤一的说明，可以很长很长哦。" />
           <Steps.Step title="步骤二" description="这里是步骤一的说明，可以很长很长哦。" />
           <Steps.Step title="步骤三" description="这里是步骤一的说明，可以很长很长哦。" />
-          <Steps.Step title="步骤四" description="这里是步骤一的说明，可以很长很长哦。" />
+          <Steps.Step icon={<Icon type="user"/>} title="步骤四" description="这里是步骤一的说明，可以很长很长哦。" />
         </Steps>
       </Col>
     </Row>

packages/react-steps/src/Step.tsx

@@ -50,7 +50,7 @@ export default function Step(props: StepProps) {
     }
   }
   let iconNode = null;
-  if (progressDot) {
+  if (progressDot && !icon) {
     iconNode = <span className={`${prefixCls}-dot`} />;
   } else if (icon && typeof icon !== 'string') {
     iconNode = <span className={`${prefixCls}-icon`}>{icon}</span>;
@@ -82,7 +82,7 @@ export default function Step(props: StepProps) {
           {iconNode}
         </div>
       </div>
-      <div className={`${prefixCls}-item-main`}>
+      <div className={[`${prefixCls}-item-main`, !!icon && 'is-icon-main'].filter(Boolean).join(' ').trim()}>
         <div className={`${prefixCls}-item-title`}>{title}</div>
         {description && <div className={`${prefixCls}-item-description`}>{description}</div>}
       </div>

packages/react-steps/src/style/index.less

@@ -223,6 +223,10 @@
     .@{w-steps}-item-head {
       background: transparent;
       margin-top: -4px;
+      .is-icon {
+        margin-left: -10px !important;
+        background-color: transparent;
+      }
     }
     &.@{w-steps}-vertical {
       .@{w-steps}-item {
@@ -244,6 +248,9 @@
         padding-bottom: 24px;
         margin-top: -21px;
       }
+      .is-icon-main {
+        margin-top: -35px;
+      }
       .@{w-steps}-next-error {
         .w-steps-item-tail i:after {
           background-color: #f04134;

website/src/routes/components/search-tree/index.tsx

@@ -1,11 +1,11 @@
 import React, { useState, useRef } from 'react';
-import { Form, Button, TreeChecked, SearchTree, Row, Col, Card, Icon } from 'uiw';
+import { Form, Button, TreeChecked, SearchTree, Row, Col, Card, Icon, Notify } from 'uiw';
 import Markdown from '../../../components/Markdown';
 
 export default () => (
   <Markdown
     path="https://github.com/uiwjs/uiw/tree/master/packages/react-search-tree/README.md"
-    dependencies={{ Form, Button, TreeChecked, SearchTree, Row, Col, Card, Icon, useRef, useState, React }}
+    dependencies={{ Form, Button, TreeChecked, SearchTree, Row, Col, Card, Icon, Notify, useRef, useState, React }}
     renderPage={async () => {
       const md = await import('uiw/node_modules/@uiw/react-search-tree/README.md');
       return md.default || md;