react-floating-label-wrapper - npm Package Compare versions

Comparing version 0.1.2 to 0.1.4

dist/index.d.ts

@@ -1,18 +0,5 @@
-import React, { ElementType } from 'react';
-import './floating-label-wrapper.css';
-import { defaultVariables } from './utils';
-declare type Styling = Partial<{
-    className: string;
-    style: React.CSSProperties;
-    cssVariables: Partial<typeof defaultVariables>;
-}>;
-export declare type FloatingLabelWrapperProps = Styling & {
-    label: string;
-    children: JSX.Element;
-    component?: ElementType;
-    focused: boolean;
-    valueGetter?: (childrenProps: any) => any;
-    placeholderProperty?: string;
-};
-declare const FloatingLabelWrapper: (props: FloatingLabelWrapperProps) => JSX.Element;
+import { FloatingLabelWrapper } from './floating-label-wrapper';
+export { FloatingLabelWrapperProps } from './floating-label-wrapper';
+export { defaultVariables } from './utils/defaultVariables';
+export { Bind } from './utils/Bind';
 export default FloatingLabelWrapper;

dist/react-floating-label-wrapper.cjs.development.js

@@ -29,5 +29,2 @@ 'use strict';
 
-var defaultValueGetter = function defaultValueGetter(props) {
-  return props.value;
-};
 var defaultVariables = {
@@ -44,2 +41,21 @@ '--input-padding-y': '1em',
 
+var defaultValueGetter = function defaultValueGetter(props) {
+  return props.value;
+};
+
+var isChildrenValid = function isChildrenValid(children) {
+  try {
+    var child = React__default.Children.only(children);
+    return React__default.isValidElement(child);
+  } catch (e) {
+    return false;
+  }
+};
+
+var warning = function warning(message) {
+  {
+    throw new Error(message);
+  }
+};
+
 var FloatingLabelWrapper = function FloatingLabelWrapper(props) {
@@ -66,2 +82,8 @@ var _classNames;
   }, [focused, valueGetter]);
+
+  if (!isChildrenValid(children)) {
+     warning('children type error, children must be a single react component!') ;
+    return children;
+  }
+
   var childrenProps = childrenOriginProps;
@@ -79,3 +101,43 @@ var Root = component || 'div';
 
+/**
+ * memoize passed function to avoid duplicate calls
+ * @param func
+ * @returns
+ */
+function memoize(func) {
+  var cache = new Map();
+  return function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    var key = JSON.stringify(args);
+
+    if (cache.has(key)) {
+      return cache.get(key);
+    }
+
+    var result = func.apply(Function, args);
+    cache.set(key, result);
+    return result;
+  };
+}
+
+/**
+ * Bind utility function.you can use this function to fix part of props.
+ * @param props
+ * @returns
+ */
+
+var Bind = /*#__PURE__*/memoize(function (props) {
+  return function (restProps) {
+    var mergedProps = _extends({}, props, restProps);
+
+    return React__default.createElement(FloatingLabelWrapper, Object.assign({}, mergedProps));
+  };
+});
+
+exports.Bind = Bind;
 exports.default = FloatingLabelWrapper;
+exports.defaultVariables = defaultVariables;
 //# sourceMappingURL=react-floating-label-wrapper.cjs.development.js.map

dist/react-floating-label-wrapper.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var a=e(require("classnames")),l=require("react"),t=e(l);function n(){return(n=Object.assign||function(e){for(var a=1;a<arguments.length;a++){var l=arguments[a];for(var t in l)Object.prototype.hasOwnProperty.call(l,t)&&(e[t]=l[t])}return e}).apply(this,arguments)}var r=function(e){return e.value},o={"--input-padding-y":"1em","--input-padding-x":"0.6em","--floating-label-padding-left":"0.3em","--floating-label-padding-right":"0.5em","--floating-label-font-size":"0.9em","--floating-label-font-size--floating":"0.75em","--floating-label-color":"rgba(0, 0, 0, 0.5)","--active-color":"rgb(43, 116, 226)"};exports.default=function(e){var i,f=e.children,s=e.className,c=void 0===s?"":s,u=e.style,p=void 0===u?{}:u,d=e.label,b=e.component,g=e.focused,m=e.valueGetter,v=void 0===m?r:m,y=e.cssVariables,h=void 0===y?{}:y,j=f.props,O=l.useMemo((function(){return!!v(j)||g}),[g,v]),w=j;return t.createElement(b||"div",{className:a("floating-label-wrapper",(i={},i[c]=c,i["float-label-wrapper--focus"]=g,i)),style:n({},o,h,p)},t.createElement("label",{className:a("floating-label",{"floating-label--float":O})},d),t.cloneElement(f,w))};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("classnames")),r=require("react"),n=e(r);function a(){return(a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}var l={"--input-padding-y":"1em","--input-padding-x":"0.6em","--floating-label-padding-left":"0.3em","--floating-label-padding-right":"0.5em","--floating-label-font-size":"0.9em","--floating-label-font-size--floating":"0.75em","--floating-label-color":"rgba(0, 0, 0, 0.5)","--active-color":"rgb(43, 116, 226)"},i=function(e){return e.value},o=function(e){var o,u=e.children,f=e.className,c=void 0===f?"":f,s=e.style,p=void 0===s?{}:s,d=e.label,g=e.component,v=e.focused,b=e.valueGetter,m=void 0===b?i:b,y=e.cssVariables,h=void 0===y?{}:y,O=u.props,j=r.useMemo((function(){return!!m(O)||v}),[v,m]);if(!function(e){try{var t=n.Children.only(e);return n.isValidElement(t)}catch(e){return!1}}(u))return u;var w=O;return n.createElement(g||"div",{className:t("floating-label-wrapper",(o={},o[c]=c,o["float-label-wrapper--focus"]=v,o)),style:a({},l,h,p)},n.createElement("label",{className:t("floating-label",{"floating-label--float":j})},d),n.cloneElement(u,w))};function u(e){var t=new Map;return function(){for(var r=arguments.length,n=new Array(r),a=0;a<r;a++)n[a]=arguments[a];var l=JSON.stringify(n);if(t.has(l))return t.get(l);var i=e.apply(Function,n);return t.set(l,i),i}}exports.Bind=u((function(e){return function(t){var r=a({},e,t);return n.createElement(o,Object.assign({},r))}})),exports.default=o,exports.defaultVariables=l;
 //# sourceMappingURL=react-floating-label-wrapper.cjs.production.min.js.map

dist/react-floating-label-wrapper.esm.js

@@ -22,5 +22,2 @@ import classNames from 'classnames';
 
-var defaultValueGetter = function defaultValueGetter(props) {
-  return props.value;
-};
 var defaultVariables = {
@@ -37,2 +34,23 @@ '--input-padding-y': '1em',
 
+var defaultValueGetter = function defaultValueGetter(props) {
+  return props.value;
+};
+
+var isChildrenValid = function isChildrenValid(children) {
+  try {
+    var child = React.Children.only(children);
+    return React.isValidElement(child);
+  } catch (e) {
+    return false;
+  }
+};
+
+var warning = function warning(message) {
+  if (process.env.NODE_ENV !== 'production') {
+    throw new Error(message);
+  }
+
+  console.error(message);
+};
+
 var FloatingLabelWrapper = function FloatingLabelWrapper(props) {
@@ -59,2 +77,8 @@ var _classNames;
   }, [focused, valueGetter]);
+
+  if (!isChildrenValid(children)) {
+    process.env.NODE_ENV !== "production" ? warning('children type error, children must be a single react component!') : void 0;
+    return children;
+  }
+
   var childrenProps = childrenOriginProps;
@@ -72,3 +96,42 @@ var Root = component || 'div';
 
+/**
+ * memoize passed function to avoid duplicate calls
+ * @param func
+ * @returns
+ */
+function memoize(func) {
+  var cache = new Map();
+  return function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    var key = JSON.stringify(args);
+
+    if (cache.has(key)) {
+      return cache.get(key);
+    }
+
+    var result = func.apply(Function, args);
+    cache.set(key, result);
+    return result;
+  };
+}
+
+/**
+ * Bind utility function.you can use this function to fix part of props.
+ * @param props
+ * @returns
+ */
+
+var Bind = /*#__PURE__*/memoize(function (props) {
+  return function (restProps) {
+    var mergedProps = _extends({}, props, restProps);
+
+    return React.createElement(FloatingLabelWrapper, Object.assign({}, mergedProps));
+  };
+});
+
 export default FloatingLabelWrapper;
+export { Bind, defaultVariables };
 //# sourceMappingURL=react-floating-label-wrapper.esm.js.map

package.json

 {
-  "version": "0.1.2",
+  "version": "0.1.4",
   "license": "MIT",
@@ -60,2 +60,3 @@ "main": "dist/index.js",
     "@types/react": "^17.0.30",
+    "@types/react-datepicker": "^4.1.7",
     "@types/react-dom": "^17.0.9",
@@ -69,4 +70,6 @@ "autoprefixer": "^10.4.0",
     "react": "^17.0.2",
+    "react-datepicker": "^4.3.0",
     "react-dom": "^17.0.2",
     "react-is": "^17.0.2",
+    "react-select": "^5.1.0",
     "rollup-plugin-postcss": "^4.0.1",
@@ -73,0 +76,0 @@ "size-limit": "^6.0.3",

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

47539

45.81%

Number of package files

32

60%

Lines of code

505

58.31%

Worsened metrics

Dev dependency count

26

13.04%

Number of low supply chain risk alerts

4

100%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes