@hw-component/form 1.9.93 → 1.9.94

package/es/TDPicker/index.js

@@ -1,13 +1,14 @@
 // welcome to hoo hoo hoo
 import _defineProperty from '@babel/runtime-corejs3/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/objectWithoutProperties';
-import { jsx } from 'react/jsx-runtime';
-import { DatePicker } from 'antd';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Input, DatePicker } from 'antd';
 import { useTimeVal, useTimeChange } from './hooks.js';
 import { useMemo } from 'react';
 import HFormConnect from '../Form/HFormConnect.js';
+import { useClassName } from '../hooks/index.js';
 
-var _excluded = ["value", "onChange", "showTime", "format", "disabledDate", "addFormat", "style", "showSecond"];
+var _excluded = ["value", "onChange", "showTime", "format", "disabledDate", "addFormat", "style", "showSecond", "addonBefore", "addonAfter"];
 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 Picker = DatePicker;
@@ -26,12 +27,15 @@ var Index = function Index(_ref) {
     } : _ref$style,
     _ref$showSecond = _ref.showSecond,
     showSecond = _ref$showSecond === void 0 ? true : _ref$showSecond,
+    addonBefore = _ref.addonBefore,
+    addonAfter = _ref.addonAfter,
     props = _objectWithoutProperties(_ref, _excluded);
   addFormat === null || addFormat === void 0 || addFormat({});
   var timeVal = useTimeVal({
     value: value,
     format: format
   });
+  var addonClassName = useClassName("hw-addon");
   var change = useTimeChange({
     format: format,
     onChange: onChange,
@@ -47,17 +51,31 @@ var Index = function Index(_ref) {
     }
     return "YYYY-MM-DD HH:mm";
   }, [showSecond, showTime]);
-  return jsx(Picker, _objectSpread({
-    value: timeVal,
-    onChange: change,
-    showTime: showTime,
-    format: pickerFormat,
-    style: style,
-    showSecond: showSecond,
-    disabledDate: function disabledDate(currentDate) {
-      return !!(_disabledDate !== null && _disabledDate !== void 0 && _disabledDate(currentDate, timeVal));
-    }
-  }, props));
+  return jsxs(Input.Group, {
+    compact: true,
+    style: _objectSpread({
+      display: "flex"
+    }, style),
+    children: [addonBefore ? jsx("div", {
+      className: addonClassName,
+      children: addonBefore
+    }) : null, jsx(Picker, _objectSpread({
+      value: timeVal,
+      onChange: change,
+      showTime: showTime,
+      format: pickerFormat,
+      style: {
+        flex: 1
+      },
+      showSecond: showSecond,
+      disabledDate: function disabledDate(currentDate) {
+        return !!(_disabledDate !== null && _disabledDate !== void 0 && _disabledDate(currentDate, timeVal));
+      }
+    }, props)), addonAfter ? jsx("div", {
+      className: addonClassName,
+      children: addonAfter
+    }) : null]
+  });
 };
 var HDatePicker = HFormConnect(Index);
 

package/es/TDPicker/modal.d.ts

@@ -7,6 +7,7 @@ import type { DurationInputArg2 } from "moment";
 import type { DateRangePickerValueMapModal } from "../modal";
 import type { addFormatItemModal } from "../Form/modal";
 import { TimeRangePickerProps } from "antd/lib/time-picker";
+import React from "react";
 interface DisabledDateFnModal<T = Moment | undefined> {
     (currentDate: Moment, value: T): boolean;
 }
@@ -17,6 +18,8 @@ export interface HDatePickerProps extends Omit<DatePickerProps, "onChange" | "fo
     disabledDate?: DisabledDateFnModal;
     addFormat?: (config: Record<string, addFormatItemModal>) => void;
     showSecond?: boolean;
+    addonBefore?: React.ReactNode;
+    addonAfter?: React.ReactNode;
 }
 export interface HRangePickerProps extends Omit<RangePickerProps, "onChange" | "format" | "ranges" | "value" | "disabledDate"> {
     value?: [any, any] | Record<string, any>;

package/lib/TDPicker/index.js

@@ -9,8 +9,9 @@ var antd = require('antd');
 var hooks = require('./hooks.js');
 var React = require('react');
 var HFormConnect = require('../Form/HFormConnect.js');
+var index = require('../hooks/index.js');
 
-var _excluded = ["value", "onChange", "showTime", "format", "disabledDate", "addFormat", "style", "showSecond"];
+var _excluded = ["value", "onChange", "showTime", "format", "disabledDate", "addFormat", "style", "showSecond", "addonBefore", "addonAfter"];
 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 Picker = antd.DatePicker;
@@ -29,12 +30,15 @@ var Index = function Index(_ref) {
     } : _ref$style,
     _ref$showSecond = _ref.showSecond,
     showSecond = _ref$showSecond === void 0 ? true : _ref$showSecond,
+    addonBefore = _ref.addonBefore,
+    addonAfter = _ref.addonAfter,
     props = _objectWithoutProperties(_ref, _excluded);
   addFormat === null || addFormat === void 0 || addFormat({});
   var timeVal = hooks.useTimeVal({
     value: value,
     format: format
   });
+  var addonClassName = index.useClassName("hw-addon");
   var change = hooks.useTimeChange({
     format: format,
     onChange: onChange,
@@ -50,17 +54,31 @@ var Index = function Index(_ref) {
     }
     return "YYYY-MM-DD HH:mm";
   }, [showSecond, showTime]);
-  return jsxRuntime.jsx(Picker, _objectSpread({
-    value: timeVal,
-    onChange: change,
-    showTime: showTime,
-    format: pickerFormat,
-    style: style,
-    showSecond: showSecond,
-    disabledDate: function disabledDate(currentDate) {
-      return !!(_disabledDate !== null && _disabledDate !== void 0 && _disabledDate(currentDate, timeVal));
-    }
-  }, props));
+  return jsxRuntime.jsxs(antd.Input.Group, {
+    compact: true,
+    style: _objectSpread({
+      display: "flex"
+    }, style),
+    children: [addonBefore ? jsxRuntime.jsx("div", {
+      className: addonClassName,
+      children: addonBefore
+    }) : null, jsxRuntime.jsx(Picker, _objectSpread({
+      value: timeVal,
+      onChange: change,
+      showTime: showTime,
+      format: pickerFormat,
+      style: {
+        flex: 1
+      },
+      showSecond: showSecond,
+      disabledDate: function disabledDate(currentDate) {
+        return !!(_disabledDate !== null && _disabledDate !== void 0 && _disabledDate(currentDate, timeVal));
+      }
+    }, props)), addonAfter ? jsxRuntime.jsx("div", {
+      className: addonClassName,
+      children: addonAfter
+    }) : null]
+  });
 };
 var HDatePicker = HFormConnect.default(Index);
 

package/lib/TDPicker/modal.d.ts

@@ -7,6 +7,7 @@ import type { DurationInputArg2 } from "moment";
 import type { DateRangePickerValueMapModal } from "../modal";
 import type { addFormatItemModal } from "../Form/modal";
 import { TimeRangePickerProps } from "antd/lib/time-picker";
+import React from "react";
 interface DisabledDateFnModal<T = Moment | undefined> {
     (currentDate: Moment, value: T): boolean;
 }
@@ -17,6 +18,8 @@ export interface HDatePickerProps extends Omit<DatePickerProps, "onChange" | "fo
     disabledDate?: DisabledDateFnModal;
     addFormat?: (config: Record<string, addFormatItemModal>) => void;
     showSecond?: boolean;
+    addonBefore?: React.ReactNode;
+    addonAfter?: React.ReactNode;
 }
 export interface HRangePickerProps extends Omit<RangePickerProps, "onChange" | "format" | "ranges" | "value" | "disabledDate"> {
     value?: [any, any] | Record<string, any>;

package/package.json

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

package/src/components/TDPicker/index.tsx

@@ -1,8 +1,9 @@
-import { DatePicker } from "antd";
+import {DatePicker, Input} from "antd";
 import type { HDatePickerProps } from "./modal";
 import { useTimeChange, useTimeVal } from "./hooks";
 import React, { useMemo } from "react";
 import HFormConnect from "../Form/HFormConnect";
+import {useClassName} from "@/components/hooks";
 const Picker = DatePicker as any;
 const Index: React.FC<HDatePickerProps> = ({
   value,
@@ -13,10 +14,13 @@ const Index: React.FC<HDatePickerProps> = ({
   addFormat,
   style = { width: "100%" },
   showSecond = true,
+                                             addonBefore,
+    addonAfter,
   ...props
 }) => {
   addFormat?.({});
   const timeVal = useTimeVal({ value, format });
+  const addonClassName=useClassName("hw-addon")
   const change = useTimeChange({ format, onChange, showTime, showSecond });
   const pickerFormat = useMemo(() => {
     if (!showTime) {
@@ -28,18 +32,22 @@ const Index: React.FC<HDatePickerProps> = ({
     return "YYYY-MM-DD HH:mm";
   }, [showSecond, showTime]);
   return (
-    <Picker
-      value={timeVal}
-      onChange={change}
-      showTime={showTime}
-      format={pickerFormat}
-      style={style}
-      showSecond={showSecond}
-      disabledDate={(currentDate) => {
-        return !!disabledDate?.(currentDate, timeVal);
-      }}
-      {...props}
-    />
+   <Input.Group compact style={{display:"flex",...style}}>
+     {addonBefore? <div className={addonClassName}>{addonBefore}</div>:null}
+     <Picker
+         value={timeVal}
+         onChange={change}
+         showTime={showTime}
+         format={pickerFormat}
+         style={{flex:1}}
+         showSecond={showSecond}
+         disabledDate={(currentDate) => {
+           return !!disabledDate?.(currentDate, timeVal);
+         }}
+         {...props}
+     />
+     {addonAfter? <div className={addonClassName}>{addonAfter}</div>:null}
+   </Input.Group>
   );
 };
 export default HFormConnect(Index);

package/src/components/TDPicker/modal.ts

@@ -7,6 +7,7 @@ import type { DurationInputArg2 } from "moment";
 import type { DateRangePickerValueMapModal } from "../modal";
 import type { addFormatItemModal } from "../Form/modal";
 import {TimeRangePickerProps} from "antd/lib/time-picker";
+import React from "react";
 interface DisabledDateFnModal<T = Moment | undefined> {
   (currentDate: Moment, value: T): boolean;
 }
@@ -22,6 +23,8 @@ export interface HDatePickerProps
   disabledDate?: DisabledDateFnModal;
   addFormat?: (config: Record<string, addFormatItemModal>) => void;
   showSecond?: boolean;
+  addonBefore?:React.ReactNode;
+  addonAfter?:React.ReactNode;
 }
 export interface HRangePickerProps
   extends Omit<

package/src/pages/DatePicker/index.tsx

@@ -8,29 +8,33 @@ export default () => {
   });
   const [timeVal1, setTimeVal1] = useState(1692070068);
   return (
-    <Space size={"large"} direction={"vertical"} style={{ width: "100%" }}>
-      <HDatePicker
-        value={timeVal1}
-        showTime={false}
-        onChange={(val) => {
-          console.log(val);
-          setTimeVal1(val);
-        }}
-      />
-      <HRangePicker
-        value={timeVal}
-        valueMap={{ start: "start", end: "end" }}
-        onChange={(val) => {
-          console.log(val);
-          setTimeVal(val);
-        }}
-      />
-      <HTimePicker
-        value={55135}
-        onChange={(val) => {
-          console.log(val);
-        }}
-      />
-    </Space>
+   <div style={{padding:20}}>
+       <Space size={"large"} direction={"vertical"} style={{ width: "100%" }}>
+           <HDatePicker
+               value={timeVal1}
+               showTime={false}
+               addonBefore="你好"
+               addonAfter="我很好"
+               onChange={(val) => {
+                   console.log(val);
+                   setTimeVal1(val);
+               }}
+           />
+           <HRangePicker
+               value={timeVal}
+               valueMap={{ start: "start", end: "end" }}
+               onChange={(val) => {
+                   console.log(val);
+                   setTimeVal(val);
+               }}
+           />
+           <HTimePicker
+               value={55135}
+               onChange={(val) => {
+                   console.log(val);
+               }}
+           />
+       </Space>
+   </div>
   );
 };