@hw-component/form 1.9.25 → 1.9.27

package/es/Switch/index.js

@@ -29,7 +29,8 @@ var Index = function Index(_ref) {
     _useMatchConfigProps$ = _useMatchConfigProps.valueSwitchMap,
     valueSwitchMap = _useMatchConfigProps$ === void 0 ? {} : _useMatchConfigProps$;
   var switchClassName = useClassName("hw-switch");
-  var switchBody = useClassName("hw-switch-body");
+  var switchBefore = useClassName("hw-switch-before");
+  var switchAfter = useClassName("hw-switch-after");
   var swChecked = useMemo(function () {
     var open = valueSwitchMap.open;
     return value === open;
@@ -63,15 +64,16 @@ var Index = function Index(_ref) {
   return jsxs("div", {
     style: style,
     className: switchClassName,
-    children: [jsx("span", {
+    children: [beforeText && jsx("span", {
+      className: switchBefore,
       children: beforeText
     }), jsx(Switch, _objectSpread({
       checked: swChecked,
       checkedChildren: checkedChildren,
       unCheckedChildren: unCheckedChildren,
-      className: switchBody,
       onChange: change
-    }, props)), jsx("span", {
+    }, props)), children && jsx("span", {
+      className: switchAfter,
       children: children
     })]
   });

package/es/index.css

@@ -125,6 +125,17 @@
 .ant-hw-form-form-item .ant-form-item-label {
   overflow: visible;
 }
+.ant-form-item-has-error .ant-hw-input-group-body {
+  border-color: #ff4d4f !important;
+}
+.ant-form-item-has-error .ant-hw-input-group-active {
+  border-color: #ff4d4f !important;
+  box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2) !important;
+}
+.ant-form-item-has-error .ant-hw-input-group-addon {
+  color: #ff4d4f;
+  border-color: #ff4d4f !important;
+}
 .ant-hw-input-group {
   display: -webkit-box !important;
   display: -webkit-flex !important;
@@ -227,7 +238,9 @@
       -ms-flex-align: center;
           align-items: center;
 }
-.ant-hw-switch .ant-hw-switch-body {
-  margin-left: 4px;
+.ant-hw-switch .ant-hw-switch-before {
   margin-right: 4px;
 }
+.ant-hw-switch .ant-hw-switch-after {
+  margin-left: 4px;
+}

package/lib/Switch/index.js

@@ -32,7 +32,8 @@ var Index = function Index(_ref) {
     _useMatchConfigProps$ = _useMatchConfigProps.valueSwitchMap,
     valueSwitchMap = _useMatchConfigProps$ === void 0 ? {} : _useMatchConfigProps$;
   var switchClassName = index.useClassName("hw-switch");
-  var switchBody = index.useClassName("hw-switch-body");
+  var switchBefore = index.useClassName("hw-switch-before");
+  var switchAfter = index.useClassName("hw-switch-after");
   var swChecked = React.useMemo(function () {
     var open = valueSwitchMap.open;
     return value === open;
@@ -66,15 +67,16 @@ var Index = function Index(_ref) {
   return jsxRuntime.jsxs("div", {
     style: style,
     className: switchClassName,
-    children: [jsxRuntime.jsx("span", {
+    children: [beforeText && jsxRuntime.jsx("span", {
+      className: switchBefore,
       children: beforeText
     }), jsxRuntime.jsx(antd.Switch, _objectSpread({
       checked: swChecked,
       checkedChildren: checkedChildren,
       unCheckedChildren: unCheckedChildren,
-      className: switchBody,
       onChange: change
-    }, props)), jsxRuntime.jsx("span", {
+    }, props)), children && jsxRuntime.jsx("span", {
+      className: switchAfter,
       children: children
     })]
   });

package/lib/index.css

@@ -125,6 +125,17 @@
 .ant-hw-form-form-item .ant-form-item-label {
   overflow: visible;
 }
+.ant-form-item-has-error .ant-hw-input-group-body {
+  border-color: #ff4d4f !important;
+}
+.ant-form-item-has-error .ant-hw-input-group-active {
+  border-color: #ff4d4f !important;
+  box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2) !important;
+}
+.ant-form-item-has-error .ant-hw-input-group-addon {
+  color: #ff4d4f;
+  border-color: #ff4d4f !important;
+}
 .ant-hw-input-group {
   display: -webkit-box !important;
   display: -webkit-flex !important;
@@ -227,7 +238,9 @@
       -ms-flex-align: center;
           align-items: center;
 }
-.ant-hw-switch .ant-hw-switch-body {
-  margin-left: 4px;
+.ant-hw-switch .ant-hw-switch-before {
   margin-right: 4px;
 }
+.ant-hw-switch .ant-hw-switch-after {
+  margin-left: 4px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hw-component/form",
-  "version": "1.9.25",
+  "version": "1.9.27",
   "description": "基于antd二次开发",
   "repository": {
     "type": "git",

package/src/components/Input/index.less

@@ -1,6 +1,18 @@
 @import "../styles/local.less";
 @all-input-group: ~"@{ant-prefix}-hw-input-group";
-
+.@{ant-prefix}-form-item-has-error {
+  .@{all-input-group}-body {
+    border-color:#ff4d4f !important;
+  }
+  .@{all-input-group}-active {
+    border-color: #ff4d4f !important;
+    box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2) !important;
+  }
+  .@{all-input-group}-addon{
+     color:#ff4d4f;
+     border-color:#ff4d4f !important;
+  }
+}
 .@{all-input-group} {
   display: flex !important;
   width: 100%;

package/src/components/Switch/index.less

@@ -4,8 +4,10 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  .@{ant-prefix}-hw-switch-body{
-     margin-left: 4px;
-     margin-right: 4px;
+  .@{ant-prefix}-hw-switch-before{
+    margin-right: 4px;
+  }
+  .@{ant-prefix}-hw-switch-after{
+    margin-left: 4px;
   }
 }

package/src/components/Switch/index.tsx

@@ -1,5 +1,5 @@
 import type { SwitchProps } from "antd";
-import { Space, Switch } from "antd";
+import {Switch } from "antd";
 import React, { useMemo } from "react";
 import {useClassName, useMatchConfigProps} from "../hooks";
 import type { ValueSwitchMapModal } from "../modal";
@@ -29,7 +29,9 @@ const Index: React.FC<HSwitchProps> = ({
     valueSwitchMap: propsValueSwitchMap,
   });
   const switchClassName=useClassName("hw-switch");
-  const switchBody=useClassName("hw-switch-body")
+  const switchBefore=useClassName("hw-switch-before");
+  const switchAfter=useClassName("hw-switch-after")
+
   const swChecked = useMemo(() => {
     const { open } = valueSwitchMap;
     return value === open;
@@ -64,18 +66,17 @@ const Index: React.FC<HSwitchProps> = ({
   });
   return (
     <div style={style} className={switchClassName}>
-      <span>
+      {beforeText&&<span className={switchBefore}>
         {beforeText}
-      </span>
+      </span>}
       <Switch
           checked={swChecked}
           checkedChildren={checkedChildren}
           unCheckedChildren={unCheckedChildren}
-          className={switchBody}
           onChange={change}
           {...props}
       />
-      <span >{children}</span>
+      {children&&   <span className={switchAfter}>{children}</span>}
     </div>
   );
 };

package/src/pages/Form/index.tsx

@@ -70,18 +70,34 @@ const formData = (options) => {
     {
       name: "name",
       label: "输入框",
+        rules:[{validator:()=>{
+                return Promise.reject(new Error("错误"))
+            }}],
       itemProps: {
-
+          addonBefore:"前面",
+          addonAfter:"后面"
       }
     },
+      {
+          name: "inputNumberGroup",
+          label: "输入框",
+          rules:[{validator:()=>{
+              return Promise.reject(new Error("错误"))
+              }}],
+          type: "inputNumberGroup",
+          itemProps: {
+              addonBefore:"前面",
+              addonAfter:"后面"
+          }
+      },
     {
       name: "url",
       type: "urlUpload",
       label: "文本",
-        itemSpan:{
-          span:24
-        },
         hideLabel:true,
+        rules:[{validator:()=>{
+                return Promise.reject(new Error("错误"))
+            }}],
         itemProps: {
             initValueProvider:(props,val)=>{
                 console.log(props,val,"fff")
@@ -162,9 +178,6 @@ export default () => {
           configData={formData(options)}
           dismissOnPressEnter={false}
           labelWidth={88}
-          itemSpan={{
-              span:12
-          }}
           form={form}
           labelAlign={"left"}
           onFinish={(value) => {
@@ -195,7 +208,7 @@ export default () => {
       </div>
       <div
         onClick={() => {
-          console.log(form.formatValues());
+          form.submit()
         }}
       >
         提交