@hw-component/form 0.0.6-beta-v1 → 0.0.6-beta-v2

package/es/Input/ColorInput/index.d.ts

@@ -1,3 +1,3 @@
 import type { HInputProps } from "@/components/Input/modal";
-declare const _default: ({ value, onChange, ...props }: HInputProps) => JSX.Element;
+declare const _default: ({ value, onChange, defaultColor, ...props }: HInputProps) => JSX.Element;
 export default _default;

package/es/Input/ColorInput/index.js

@@ -23,6 +23,7 @@ import _defineProperty from '@babel/runtime-corejs3/helpers/defineProperty';
 import _inherits from '@babel/runtime-corejs3/helpers/inherits';
 import _setPrototypeOf from '@babel/runtime-corejs3/helpers/setPrototypeOf';
 import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/objectWithoutProperties';
+import 'core-js/modules/es.string.trim.js';
 import 'core-js/modules/es.string.starts-with.js';
 import 'core-js/modules/es.regexp.exec.js';
 import 'core-js/modules/es.string.match.js';
@@ -34,25 +35,29 @@ import Picker from './Picker.js';
 import { useMemo } from 'react';
 import { useClassName } from '../../hooks/index.js';
 
-var _excluded = ["value", "onChange"];
+var _excluded = ["value", "onChange", "defaultColor"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _wrapRegExp() { _wrapRegExp = function _wrapRegExp(re, groups) { return new BabelRegExp(re, void 0, groups); }; var _super = RegExp.prototype, _groups = new WeakMap(); function BabelRegExp(re, flags, groups) { var _this = new RegExp(re, flags); return _groups.set(_this, groups || _groups.get(re)), _setPrototypeOf(_this, BabelRegExp.prototype); } function buildGroups(result, re) { var g = _groups.get(re); return Object.keys(g).reduce(function (groups, name) { var i = g[name]; if ("number" == typeof i) groups[name] = result[i];else { for (var k = 0; void 0 === result[i[k]] && k + 1 < i.length;) k++; groups[name] = result[i[k]]; } return groups; }, Object.create(null)); } return _inherits(BabelRegExp, RegExp), BabelRegExp.prototype.exec = function (str) { var result = _super.exec.call(this, str); if (result) { result.groups = buildGroups(result, this); var indices = result.indices; indices && (indices.groups = buildGroups(indices, this)); } return result; }, BabelRegExp.prototype[Symbol.replace] = function (str, substitution) { if ("string" == typeof substitution) { var groups = _groups.get(this); return _super[Symbol.replace].call(this, str, substitution.replace(/\$<([^>]+)>/g, function (_, name) { var group = groups[name]; return "$" + (Array.isArray(group) ? group.join("$") : group); })); } if ("function" == typeof substitution) { var _this = this; return _super[Symbol.replace].call(this, str, function () { var args = arguments; return "object" != _typeof(args[args.length - 1]) && (args = [].slice.call(args)).push(buildGroups(args, _this)), substitution.apply(this, args); }); } return _super[Symbol.replace].call(this, str, substitution); }, _wrapRegExp.apply(this, arguments); }
 var ColorInput = (function (_ref) {
   var value = _ref.value,
     onChange = _ref.onChange,
+    _ref$defaultColor = _ref.defaultColor,
+    defaultColor = _ref$defaultColor === void 0 ? "rgba(0,0,0,1)" : _ref$defaultColor,
     props = _objectWithoutProperties(_ref, _excluded);
   var classname = useClassName("hw-color-box");
+  var inputVal = value === null || value === void 0 ? void 0 : value.trim();
   var pickerValue = useMemo(function () {
-    if (typeof value === "string") {
+    var matchVal = inputVal || defaultColor;
+    if (typeof matchVal === "string") {
       var _result$groups;
-      if (value.startsWith("#")) {
-        return value;
+      if (matchVal.startsWith("#")) {
+        return matchVal;
       }
       var rgbaRegular = /*#__PURE__*/_wrapRegExp(/((rgba\())(.*?)(?=(\)))/, {
         rgba: 3
       });
-      var result = value.match(rgbaRegular);
+      var result = matchVal.match(rgbaRegular);
       if (result !== null && result !== void 0 && (_result$groups = result.groups) !== null && _result$groups !== void 0 && _result$groups.rgba) {
         var rgbas = result.groups.rgba.split(",");
         return {
@@ -64,7 +69,7 @@ var ColorInput = (function (_ref) {
       }
     }
     return "";
-  }, [value]);
+  }, [inputVal]);
   var colorChange = function colorChange(val) {
     var rgb = val.rgb;
     var text = "rgba(".concat(rgb.r, ",").concat(rgb.g, ",").concat(rgb.b, ",").concat(rgb.a, ")");
@@ -82,7 +87,7 @@ var ColorInput = (function (_ref) {
       placement: "topLeft",
       children: jsx("div", {
         style: {
-          backgroundColor: value
+          backgroundColor: inputVal || defaultColor
         },
         className: classname
       })

package/es/Input/modal.d.ts

@@ -7,6 +7,7 @@ import type { AddDispatchListenerFn } from "../Form/modal";
 export interface HInputProps<V = any> extends Omit<InputProps, "onChange" | "value"> {
     onChange?: (value: V) => void;
     value?: V;
+    defaultColor?: string;
 }
 interface ValueNameModal {
     input?: string;

package/lib/Input/ColorInput/index.d.ts

@@ -1,3 +1,3 @@
 import type { HInputProps } from "@/components/Input/modal";
-declare const _default: ({ value, onChange, ...props }: HInputProps) => JSX.Element;
+declare const _default: ({ value, onChange, defaultColor, ...props }: HInputProps) => JSX.Element;
 export default _default;

package/lib/Input/ColorInput/index.js

@@ -26,6 +26,7 @@ var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
 var _setPrototypeOf = require('@babel/runtime-corejs3/helpers/setPrototypeOf');
 var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
+require('core-js/modules/es.string.trim.js');
 require('core-js/modules/es.string.starts-with.js');
 require('core-js/modules/es.regexp.exec.js');
 require('core-js/modules/es.string.match.js');
@@ -37,25 +38,29 @@ var Picker = require('./Picker.js');
 var React = require('react');
 var index = require('../../hooks/index.js');
 
-var _excluded = ["value", "onChange"];
+var _excluded = ["value", "onChange", "defaultColor"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _wrapRegExp() { _wrapRegExp = function _wrapRegExp(re, groups) { return new BabelRegExp(re, void 0, groups); }; var _super = RegExp.prototype, _groups = new WeakMap(); function BabelRegExp(re, flags, groups) { var _this = new RegExp(re, flags); return _groups.set(_this, groups || _groups.get(re)), _setPrototypeOf(_this, BabelRegExp.prototype); } function buildGroups(result, re) { var g = _groups.get(re); return Object.keys(g).reduce(function (groups, name) { var i = g[name]; if ("number" == typeof i) groups[name] = result[i];else { for (var k = 0; void 0 === result[i[k]] && k + 1 < i.length;) k++; groups[name] = result[i[k]]; } return groups; }, Object.create(null)); } return _inherits(BabelRegExp, RegExp), BabelRegExp.prototype.exec = function (str) { var result = _super.exec.call(this, str); if (result) { result.groups = buildGroups(result, this); var indices = result.indices; indices && (indices.groups = buildGroups(indices, this)); } return result; }, BabelRegExp.prototype[Symbol.replace] = function (str, substitution) { if ("string" == typeof substitution) { var groups = _groups.get(this); return _super[Symbol.replace].call(this, str, substitution.replace(/\$<([^>]+)>/g, function (_, name) { var group = groups[name]; return "$" + (Array.isArray(group) ? group.join("$") : group); })); } if ("function" == typeof substitution) { var _this = this; return _super[Symbol.replace].call(this, str, function () { var args = arguments; return "object" != _typeof(args[args.length - 1]) && (args = [].slice.call(args)).push(buildGroups(args, _this)), substitution.apply(this, args); }); } return _super[Symbol.replace].call(this, str, substitution); }, _wrapRegExp.apply(this, arguments); }
 var ColorInput = (function (_ref) {
   var value = _ref.value,
     onChange = _ref.onChange,
+    _ref$defaultColor = _ref.defaultColor,
+    defaultColor = _ref$defaultColor === void 0 ? "rgba(0,0,0,1)" : _ref$defaultColor,
     props = _objectWithoutProperties(_ref, _excluded);
   var classname = index.useClassName("hw-color-box");
+  var inputVal = value === null || value === void 0 ? void 0 : value.trim();
   var pickerValue = React.useMemo(function () {
-    if (typeof value === "string") {
+    var matchVal = inputVal || defaultColor;
+    if (typeof matchVal === "string") {
       var _result$groups;
-      if (value.startsWith("#")) {
-        return value;
+      if (matchVal.startsWith("#")) {
+        return matchVal;
       }
       var rgbaRegular = /*#__PURE__*/_wrapRegExp(/((rgba\())(.*?)(?=(\)))/, {
         rgba: 3
       });
-      var result = value.match(rgbaRegular);
+      var result = matchVal.match(rgbaRegular);
       if (result !== null && result !== void 0 && (_result$groups = result.groups) !== null && _result$groups !== void 0 && _result$groups.rgba) {
         var rgbas = result.groups.rgba.split(",");
         return {
@@ -67,7 +72,7 @@ var ColorInput = (function (_ref) {
       }
     }
     return "";
-  }, [value]);
+  }, [inputVal]);
   var colorChange = function colorChange(val) {
     var rgb = val.rgb;
     var text = "rgba(".concat(rgb.r, ",").concat(rgb.g, ",").concat(rgb.b, ",").concat(rgb.a, ")");
@@ -85,7 +90,7 @@ var ColorInput = (function (_ref) {
       placement: "topLeft",
       children: jsxRuntime.jsx("div", {
         style: {
-          backgroundColor: value
+          backgroundColor: inputVal || defaultColor
         },
         className: classname
       })

package/lib/Input/modal.d.ts

@@ -7,6 +7,7 @@ import type { AddDispatchListenerFn } from "../Form/modal";
 export interface HInputProps<V = any> extends Omit<InputProps, "onChange" | "value"> {
     onChange?: (value: V) => void;
     value?: V;
+    defaultColor?: string;
 }
 interface ValueNameModal {
     input?: string;

package/package.json

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

package/src/components/Input/ColorInput/index.tsx

@@ -3,15 +3,17 @@ import { Input, Popover } from "antd";
 import Picker from "./Picker";
 import { useMemo } from "react";
 import { useClassName } from "../../hooks";
-export default ({ value, onChange, ...props }: HInputProps) => {
+export default ({ value, onChange,defaultColor="rgba(0,0,0,1)", ...props }: HInputProps) => {
   const classname = useClassName("hw-color-box");
+  const inputVal=value?.trim();
   const pickerValue = useMemo(() => {
-    if (typeof value === "string") {
-      if (value.startsWith("#")) {
-        return value;
+    const  matchVal=inputVal||defaultColor;
+    if (typeof matchVal === "string") {
+      if (matchVal.startsWith("#")) {
+        return matchVal;
       }
       const rgbaRegular = /((rgba\())(?<rgba>.*?)(?=(\)))/;
-      const result = value.match(rgbaRegular);
+      const result = matchVal.match(rgbaRegular);
       if (result?.groups?.rgba) {
         const rgbas = result.groups.rgba.split(",");
         return {
@@ -23,7 +25,7 @@ export default ({ value, onChange, ...props }: HInputProps) => {
       }
     }
     return "";
-  }, [value]);
+  }, [inputVal]);
   const colorChange = (val) => {
     const { rgb } = val;
     const text = `rgba(${rgb.r},${rgb.g},${rgb.b},${rgb.a})`;
@@ -40,7 +42,7 @@ export default ({ value, onChange, ...props }: HInputProps) => {
           content={<Picker value={pickerValue} onChange={colorChange} />}
           placement="topLeft"
         >
-          <div style={{ backgroundColor: value }} className={classname} />
+          <div style={{ backgroundColor: inputVal||defaultColor }} className={classname} />
         </Popover>
       }
     />

package/src/components/Input/modal.ts

@@ -8,6 +8,7 @@ export interface HInputProps<V = any>
   extends Omit<InputProps, "onChange" | "value"> {
   onChange?: (value: V) => void;
   value?: V;
+  defaultColor?:string;
 }
 
 interface ValueNameModal {