@hw-component/form 1.10.81 → 1.10.82

package/es/Select/TreeSelect.d.ts

@@ -1,8 +1,12 @@
 import type { TreeSelectProps } from "antd/lib/tree-select";
 import type { PromiseFnResult } from "../modal";
+import React from "react";
 export interface HTreeSelectProps extends TreeSelectProps {
     request?: PromiseFnResult;
     onlyCheckChild?: boolean;
+    addonBefore?: React.ReactNode;
+    addonAfter?: React.ReactNode;
+    className?: string;
 }
-declare const _default: ({ request, onlyCheckChild, multiple, treeCheckable, treeData, fieldNames, ...props }: HTreeSelectProps) => JSX.Element;
+declare const _default: ({ request, onlyCheckChild, multiple, treeCheckable, treeData, fieldNames, addonBefore, style, addonAfter, className, ...props }: HTreeSelectProps) => JSX.Element;
 export default _default;

package/es/Select/TreeSelect.js

@@ -3,11 +3,12 @@ import _asyncToGenerator from '@babel/runtime-corejs3/helpers/asyncToGenerator';
 import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/objectWithoutProperties';
 import _defineProperty from '@babel/runtime-corejs3/helpers/defineProperty';
 import _regeneratorRuntime from '@babel/runtime-corejs3/regenerator';
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { TreeSelect } from 'antd';
 import { useRequest } from 'ahooks';
+import { useClassName } from '../hooks/index.js';
 
-var _excluded = ["request", "onlyCheckChild", "multiple", "treeCheckable", "treeData", "fieldNames"];
+var _excluded = ["request", "onlyCheckChild", "multiple", "treeCheckable", "treeData", "fieldNames", "addonBefore", "style", "addonAfter", "className"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var _opMk = function opMk(_ref) {
@@ -41,7 +42,17 @@ var HTreeSelect = (function (_ref3) {
     treeCheckable = _ref3.treeCheckable,
     treeData = _ref3.treeData,
     fieldNames = _ref3.fieldNames,
+    addonBefore = _ref3.addonBefore,
+    style = _ref3.style,
+    addonAfter = _ref3.addonAfter,
+    className = _ref3.className,
     props = _objectWithoutProperties(_ref3, _excluded);
+  var boxClassName = useClassName("hw-select-box");
+  var addonBeforeClassName = useClassName("hw-group-addon-before");
+  var addonBeforeBoxClassName = useClassName("hw-select-box-addon-before");
+  var addonAfterClassName = useClassName("hw-group-addon-after");
+  var addonAfterBoxClassName = useClassName("hw-select-box-addon-after");
+  var addonClassname = useClassName(["hw-addon"]);
   var _useRequest = useRequest(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
       var options;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
@@ -70,13 +81,26 @@ var HTreeSelect = (function (_ref3) {
     }))),
     loading = _useRequest.loading,
     data = _useRequest.data;
-  return jsx(TreeSelect, _objectSpread({
-    treeData: data,
-    loading: loading,
-    fieldNames: fieldNames,
-    treeCheckable: treeCheckable,
-    multiple: multiple
-  }, props));
+  return jsxs("div", {
+    className: "".concat(boxClassName, " ").concat(addonBefore ? addonBeforeBoxClassName : "", " ").concat(addonAfter ? addonAfterBoxClassName : "", " ").concat(className),
+    style: style,
+    children: [addonBefore && jsx("div", {
+      className: "".concat(addonClassname, " ").concat(addonBeforeClassName),
+      children: addonBefore
+    }), jsx(TreeSelect, _objectSpread({
+      treeData: data,
+      loading: loading,
+      style: {
+        width: "100%"
+      },
+      fieldNames: fieldNames,
+      treeCheckable: treeCheckable,
+      multiple: multiple
+    }, props)), addonAfter && jsx("div", {
+      className: "".concat(addonClassname, " ").concat(addonAfterClassName),
+      children: addonAfter
+    })]
+  });
 });
 
 export { HTreeSelect as default };

package/es/index.d.ts

@@ -28,6 +28,7 @@ export declare const HModalForm: import("react").FC<import("./DialogForm/modal")
 export declare const HDrawerForm: import("react").FC<import("./DialogForm/modal").DialogFormProps<any, any>>;
 export declare const HCascader: ({ request, options, fieldNames: propsFieldNames, ...props }: import("./Cascader").HCascaderProps) => JSX.Element;
 export declare const HVerificationCodeInput: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
+export declare const HTreeSelect: ({ request, onlyCheckChild, multiple, treeCheckable, treeData, fieldNames, addonBefore, style, addonAfter, className, ...props }: import("./Select/TreeSelect").HTreeSelectProps) => JSX.Element;
 export declare const HTrimInput: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
 export declare const HTrimTextArea: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
 export declare const HInputNumberGroup: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;

package/es/index.js

@@ -33,11 +33,12 @@ var HModalForm = Index$1;
 var HDrawerForm = Index$2;
 var HCascader = componentConfig.cascader;
 var HVerificationCodeInput = componentConfig.verificationCodeInput;
+var HTreeSelect = componentConfig.treeSelect;
 var HTrimInput = componentConfig.trimInput;
 var HTrimTextArea = componentConfig.trimTextArea;
 var HInputNumberGroup = componentConfig.inputNumberGroup.Component;
 var HTagSelect = componentConfig.tagSelect;
 var HTimeRangePicker = componentConfig.timeRangePicker.Component;
 
-export { HButtonInput, HCascader, HCheckBox, HCheckboxGroup, HColorInput, HDatePicker, HDrawerForm, HInput, HInputNumber, HInputNumberGroup, HModalForm, HPageHandler, HRadioGroup, HRangePicker, HRichEditor, HSelect, HSelectInput, HSwitch, HTagSelect, HTextArea, HTimePicker, HTimeRangePicker, HTrimInput, HTrimTextArea, HUpload, HUrlUpload, HVerificationCodeInput };
+export { HButtonInput, HCascader, HCheckBox, HCheckboxGroup, HColorInput, HDatePicker, HDrawerForm, HInput, HInputNumber, HInputNumberGroup, HModalForm, HPageHandler, HRadioGroup, HRangePicker, HRichEditor, HSelect, HSelectInput, HSwitch, HTagSelect, HTextArea, HTimePicker, HTimeRangePicker, HTreeSelect, HTrimInput, HTrimTextArea, HUpload, HUrlUpload, HVerificationCodeInput };
 // powered by hdj

package/lib/Select/TreeSelect.d.ts

@@ -1,8 +1,12 @@
 import type { TreeSelectProps } from "antd/lib/tree-select";
 import type { PromiseFnResult } from "../modal";
+import React from "react";
 export interface HTreeSelectProps extends TreeSelectProps {
     request?: PromiseFnResult;
     onlyCheckChild?: boolean;
+    addonBefore?: React.ReactNode;
+    addonAfter?: React.ReactNode;
+    className?: string;
 }
-declare const _default: ({ request, onlyCheckChild, multiple, treeCheckable, treeData, fieldNames, ...props }: HTreeSelectProps) => JSX.Element;
+declare const _default: ({ request, onlyCheckChild, multiple, treeCheckable, treeData, fieldNames, addonBefore, style, addonAfter, className, ...props }: HTreeSelectProps) => JSX.Element;
 export default _default;

package/lib/Select/TreeSelect.js

@@ -9,8 +9,9 @@ var _regeneratorRuntime = require('@babel/runtime-corejs3/regenerator');
 var jsxRuntime = require('react/jsx-runtime');
 var antd = require('antd');
 var ahooks = require('ahooks');
+var index = require('../hooks/index.js');
 
-var _excluded = ["request", "onlyCheckChild", "multiple", "treeCheckable", "treeData", "fieldNames"];
+var _excluded = ["request", "onlyCheckChild", "multiple", "treeCheckable", "treeData", "fieldNames", "addonBefore", "style", "addonAfter", "className"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var _opMk = function opMk(_ref) {
@@ -44,7 +45,17 @@ var HTreeSelect = (function (_ref3) {
     treeCheckable = _ref3.treeCheckable,
     treeData = _ref3.treeData,
     fieldNames = _ref3.fieldNames,
+    addonBefore = _ref3.addonBefore,
+    style = _ref3.style,
+    addonAfter = _ref3.addonAfter,
+    className = _ref3.className,
     props = _objectWithoutProperties(_ref3, _excluded);
+  var boxClassName = index.useClassName("hw-select-box");
+  var addonBeforeClassName = index.useClassName("hw-group-addon-before");
+  var addonBeforeBoxClassName = index.useClassName("hw-select-box-addon-before");
+  var addonAfterClassName = index.useClassName("hw-group-addon-after");
+  var addonAfterBoxClassName = index.useClassName("hw-select-box-addon-after");
+  var addonClassname = index.useClassName(["hw-addon"]);
   var _useRequest = ahooks.useRequest(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
       var options;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
@@ -73,13 +84,26 @@ var HTreeSelect = (function (_ref3) {
     }))),
     loading = _useRequest.loading,
     data = _useRequest.data;
-  return jsxRuntime.jsx(antd.TreeSelect, _objectSpread({
-    treeData: data,
-    loading: loading,
-    fieldNames: fieldNames,
-    treeCheckable: treeCheckable,
-    multiple: multiple
-  }, props));
+  return jsxRuntime.jsxs("div", {
+    className: "".concat(boxClassName, " ").concat(addonBefore ? addonBeforeBoxClassName : "", " ").concat(addonAfter ? addonAfterBoxClassName : "", " ").concat(className),
+    style: style,
+    children: [addonBefore && jsxRuntime.jsx("div", {
+      className: "".concat(addonClassname, " ").concat(addonBeforeClassName),
+      children: addonBefore
+    }), jsxRuntime.jsx(antd.TreeSelect, _objectSpread({
+      treeData: data,
+      loading: loading,
+      style: {
+        width: "100%"
+      },
+      fieldNames: fieldNames,
+      treeCheckable: treeCheckable,
+      multiple: multiple
+    }, props)), addonAfter && jsxRuntime.jsx("div", {
+      className: "".concat(addonClassname, " ").concat(addonAfterClassName),
+      children: addonAfter
+    })]
+  });
 });
 
 exports.default = HTreeSelect;

package/lib/index.d.ts

@@ -28,6 +28,7 @@ export declare const HModalForm: import("react").FC<import("./DialogForm/modal")
 export declare const HDrawerForm: import("react").FC<import("./DialogForm/modal").DialogFormProps<any, any>>;
 export declare const HCascader: ({ request, options, fieldNames: propsFieldNames, ...props }: import("./Cascader").HCascaderProps) => JSX.Element;
 export declare const HVerificationCodeInput: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
+export declare const HTreeSelect: ({ request, onlyCheckChild, multiple, treeCheckable, treeData, fieldNames, addonBefore, style, addonAfter, className, ...props }: import("./Select/TreeSelect").HTreeSelectProps) => JSX.Element;
 export declare const HTrimInput: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
 export declare const HTrimTextArea: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
 export declare const HInputNumberGroup: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;

package/lib/index.js

@@ -34,6 +34,7 @@ var HModalForm = ModalForm.default;
 var HDrawerForm = index$3.default;
 var HCascader = config.default.cascader;
 var HVerificationCodeInput = config.default.verificationCodeInput;
+var HTreeSelect = config.default.treeSelect;
 var HTrimInput = config.default.trimInput;
 var HTrimTextArea = config.default.trimTextArea;
 var HInputNumberGroup = config.default.inputNumberGroup.Component;
@@ -69,6 +70,7 @@ exports.HTagSelect = HTagSelect;
 exports.HTextArea = HTextArea;
 exports.HTimePicker = HTimePicker;
 exports.HTimeRangePicker = HTimeRangePicker;
+exports.HTreeSelect = HTreeSelect;
 exports.HTrimInput = HTrimInput;
 exports.HTrimTextArea = HTrimTextArea;
 exports.HUpload = HUpload;

package/package.json

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

package/src/components/Select/TreeSelect.tsx

@@ -2,9 +2,14 @@ import { TreeSelect } from "antd";
 import type { TreeSelectProps } from "antd/lib/tree-select";
 import type { PromiseFnResult } from "../modal";
 import { useRequest } from "ahooks";
+import React from "react";
+import {useClassName} from "@/components/hooks";
 export interface HTreeSelectProps extends TreeSelectProps {
   request?: PromiseFnResult;
   onlyCheckChild?: boolean;
+  addonBefore?:React.ReactNode;
+  addonAfter?:React.ReactNode;
+  className?: string;
 }
 interface OpMkParamsModal {
   options?: any[];
@@ -40,8 +45,19 @@ export default ({
   treeCheckable,
   treeData,
   fieldNames,
+                  addonBefore,
+                  style,
+                  addonAfter,
+                  className,
   ...props
 }: HTreeSelectProps) => {
+  const boxClassName = useClassName("hw-select-box");
+  const addonBeforeClassName = useClassName("hw-group-addon-before");
+  const addonBeforeBoxClassName = useClassName("hw-select-box-addon-before");
+  const addonAfterClassName = useClassName("hw-group-addon-after");
+  const addonAfterBoxClassName = useClassName("hw-select-box-addon-after");
+  const addonClassname = useClassName(["hw-addon"]);
+
   const { loading, data } = useRequest(async () => {
     let options = treeData;
     if (request) {
@@ -54,13 +70,31 @@ export default ({
     });
   });
   return (
-    <TreeSelect
-      treeData={data}
-      loading={loading}
-      fieldNames={fieldNames}
-      treeCheckable={treeCheckable}
-      multiple={multiple}
-      {...props}
-    />
+    <div
+        className={`${boxClassName} ${
+            addonBefore ? addonBeforeBoxClassName : ""
+        } ${addonAfter ? addonAfterBoxClassName : ""} ${className}`}
+        style={style}
+    >
+      {addonBefore && (
+          <div className={`${addonClassname} ${addonBeforeClassName}`}>
+            {addonBefore}
+          </div>
+      )}
+      <TreeSelect
+          treeData={data}
+          loading={loading}
+          style={{width:"100%"}}
+          fieldNames={fieldNames}
+          treeCheckable={treeCheckable}
+          multiple={multiple}
+          {...props}
+      />
+      {addonAfter && (
+          <div className={`${addonClassname} ${addonAfterClassName}`}>
+            {addonAfter}
+          </div>
+      )}
+    </div>
   );
 };

package/src/components/index.tsx

@@ -36,6 +36,9 @@ export const HCascader = FormConfig.cascader;
 // @ts-ignore
 export const HVerificationCodeInput = FormConfig.verificationCodeInput;
 
+export const HTreeSelect = FormConfig.treeSelect;
+
+
 export const HTrimInput = FormConfig.trimInput;
 
 export const HTrimTextArea = FormConfig.trimTextArea;

package/src/pages/Select/index.tsx

@@ -1,6 +1,7 @@
-import { HSelect, HTagSelect } from "../../components";
+import { HSelect, HTagSelect,HTreeSelect } from "../../components";
 import { Form, Space } from "antd";
 import { useEffect, useState } from "react";
+
 export default () => {
   const [selectVal, setSelectVal] = useState([{ name: "11", id: -100 }]);
   const [op, setOp] = useState([{ label: "1", value: 1 }]);
@@ -8,7 +9,8 @@ export default () => {
   const [tagVal, setTagVal] = useState([]);
   const [visible, setVisible] = useState(true);
   return (
-    <Space size={"large"} direction={"vertical"} style={{ width: "100%" }}>
+    <Space size={"large"} direction={"vertical"} style={{ width: "100%" ,padding:20}} >
+        <HTreeSelect  addonBefore="你好" style={{width:1000}} addonAfter="我很好"/>
       <HSelect
         placeholder="分页"
         serviceSearch