@arkui/hooks - npm Package Compare versions

Comparing version 0.0.3-alpha.0 to 0.0.3-alpha.1

lib/index.cjs.js

@@ -1,1 +0,262 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/slicedToArray"),t=require("react"),r=require("@babel/runtime/helpers/defineProperty"),n=require("react-popper");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=u(e),l=u(r),a=function(e){var r=t.useRef();return t.useEffect((function(){r.current=e})),r.current};function c(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function s(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?c(Object(r),!0).forEach((function(t){l.default(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):c(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}exports.useInput=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=arguments.length>2?arguments[2]:void 0,u=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null,l=t.useMemo((function(){return void 0!==n}),[n]),c=t.useState(l?n:""),s=o.default(c,2),f=s[0],i=s[1],p=t.useState(!1),b=o.default(p,2),d=b[0],v=b[1],y=t.useState(!1),O=o.default(y,2),g=O[0],h=O[1],m=t.useState(!1),j=o.default(m,2),P=j[0],w=j[1],S=a(u),k=t.useMemo((function(){return l?n:f}),[l,n,f]);t.useEffect((function(){w(Boolean(k&&null!=k))}),[P,k]);var C=t.useCallback((function(e){r&&r(e),h(!1),v((function(e){return e||!0}))}),[r]),x=t.useCallback((function(t){return e?e(t):i(t.target.value)}),[e]),q=t.useCallback((function(){h(!0)}),[]);return[{error:d?u||S:null,focused:g,hasValue:P,touched:d},{onBlur:C,onChange:x,onFocus:q,value:k}]},exports.usePopover=function(e){var r=t.useState(null),u=o.default(r,2),l=u[0],a=u[1],c=t.useState(null),f=o.default(c,2),i=f[0],p=f[1],b=t.useMemo((function(){return{modifiers:[{name:"arrow",options:{element:i}},{name:"offset",options:{offset:[0,8]}}],placement:"bottom",strategy:"fixed"}}),[i]),d=n.usePopper(e,l,b),v=d.styles,y=d.attributes;return[s({ref:a,style:v.popper},y.popper),s({ref:p,style:v.arrow},y.arrow)]},exports.usePrevious=a,exports.useSwitch=function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],r=t.useState(e),n=o.default(r,2),u=n[0],l=n[1],a=t.useCallback((function(){return l(!1)}),[]),c=t.useCallback((function(){return l(!0)}),[]),s=t.useCallback((function(){return l((function(e){return!e}))}),[]);return[u,{off:a,on:c,toggle:s}]};
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var reactPopper = require('react-popper');
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    });
+    keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+
+  return target;
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(arr, i) {
+  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+  var _e = undefined;
+
+  try {
+    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
+    }
+  }
+
+  return _arr;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+  return arr2;
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+var usePrevious = (function (value) {
+  var ref = react.useRef();
+  react.useEffect(function () {
+    ref.current = value;
+  });
+  return ref.current;
+});
+
+var useInput = (function () {
+  var handleChange = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+  var handleBlur = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  var controlledValue = arguments.length > 2 ? arguments[2] : undefined;
+  var error = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+  var isControlled = react.useMemo(function () {
+    return typeof controlledValue !== 'undefined';
+  }, [controlledValue]);
+
+  var _useState = react.useState(isControlled ? controlledValue : ''),
+      _useState2 = _slicedToArray(_useState, 2),
+      inputValue = _useState2[0],
+      setInputValue = _useState2[1];
+
+  var _useState3 = react.useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      touched = _useState4[0],
+      setTouched = _useState4[1];
+
+  var _useState5 = react.useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      focused = _useState6[0],
+      setFocus = _useState6[1];
+
+  var _useState7 = react.useState(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      hasValue = _useState8[0],
+      setHasValue = _useState8[1];
+
+  var prevError = usePrevious(error);
+  var value = react.useMemo(function () {
+    return isControlled ? controlledValue : inputValue;
+  }, [isControlled, controlledValue, inputValue]);
+  react.useEffect(function () {
+    var hasValidValue = value && value !== null && value !== undefined;
+    setHasValue(Boolean(hasValidValue));
+  }, [hasValue, value]);
+  var onBlur = react.useCallback(function (e) {
+    if (handleBlur) {
+      handleBlur(e);
+    }
+
+    setFocus(false);
+    setTouched(function (prev) {
+      return !prev ? true : prev;
+    });
+  }, [handleBlur]);
+  var onChange = react.useCallback(function (e) {
+    if (handleChange) {
+      return handleChange(e);
+    }
+
+    return setInputValue(e.target.value);
+  }, [handleChange]);
+  var onFocus = react.useCallback(function () {
+    setFocus(true);
+  }, []);
+  return [{
+    error: touched ? error || prevError : null,
+    focused: focused,
+    hasValue: hasValue,
+    touched: touched
+  }, {
+    onBlur: onBlur,
+    onChange: onChange,
+    onFocus: onFocus,
+    value: value
+  }];
+});
+
+var usePopover = function usePopover(anchor) {
+  var _useState = react.useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      popover = _useState2[0],
+      setPopover = _useState2[1];
+
+  var _useState3 = react.useState(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      arrow = _useState4[0],
+      setArrow = _useState4[1];
+
+  var options = react.useMemo(function () {
+    return {
+      modifiers: [{
+        name: 'arrow',
+        options: {
+          element: arrow
+        }
+      }, {
+        name: 'offset',
+        options: {
+          offset: [0, 8]
+        }
+      }],
+      placement: 'bottom',
+      strategy: 'fixed'
+    };
+  }, [arrow]);
+
+  var _usePopper = reactPopper.usePopper(anchor, popover, options),
+      styles = _usePopper.styles,
+      attributes = _usePopper.attributes;
+
+  return [_objectSpread2({
+    ref: setPopover,
+    style: styles.popper
+  }, attributes.popper), _objectSpread2({
+    ref: setArrow,
+    style: styles.arrow
+  }, attributes.arrow)];
+};
+
+var useSwitch = (function () {
+  var init = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+
+  var _useState = react.useState(init),
+      _useState2 = _slicedToArray(_useState, 2),
+      enabled = _useState2[0],
+      setEnabled = _useState2[1];
+
+  var off = react.useCallback(function () {
+    return setEnabled(false);
+  }, []);
+  var on = react.useCallback(function () {
+    return setEnabled(true);
+  }, []);
+  var toggle = react.useCallback(function () {
+    return setEnabled(function (prev) {
+      return !prev;
+    });
+  }, []);
+  return [enabled, {
+    off: off,
+    on: on,
+    toggle: toggle
+  }];
+});
+
+exports.useInput = useInput;
+exports.usePopover = usePopover;
+exports.usePrevious = usePrevious;
+exports.useSwitch = useSwitch;

lib/index.esm.js

@@ -1,1 +0,255 @@
-import r from"@babel/runtime/helpers/slicedToArray";import{useRef as e,useEffect as t,useMemo as n,useState as o,useCallback as u}from"react";import i from"@babel/runtime/helpers/defineProperty";import{usePopper as c}from"react-popper";var f=function(r){var n=e();return t((function(){n.current=r})),n.current},l=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,c=arguments.length>2?arguments[2]:void 0,l=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null,a=n((function(){return void 0!==c}),[c]),p=o(a?c:""),s=r(p,2),b=s[0],m=s[1],v=o(!1),g=r(v,2),y=g[0],O=g[1],d=o(!1),h=r(d,2),j=h[0],w=h[1],P=o(!1),D=r(P,2),x=D[0],B=D[1],E=f(l),S=n((function(){return a?c:b}),[a,c,b]);t((function(){B(Boolean(S&&null!=S))}),[x,S]);var k=u((function(r){i&&i(r),w(!1),O((function(r){return r||!0}))}),[i]),A=u((function(r){return e?e(r):m(r.target.value)}),[e]),C=u((function(){w(!0)}),[]);return[{error:y?l||E:null,focused:j,hasValue:x,touched:y},{onBlur:k,onChange:A,onFocus:C,value:S}]};function a(r,e){var t=Object.keys(r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(r);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable}))),t.push.apply(t,n)}return t}function p(r){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{};e%2?a(Object(t),!0).forEach((function(e){i(r,e,t[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(t)):a(Object(t)).forEach((function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(t,e))}))}return r}var s=function(e){var t=o(null),u=r(t,2),i=u[0],f=u[1],l=o(null),a=r(l,2),s=a[0],b=a[1],m=n((function(){return{modifiers:[{name:"arrow",options:{element:s}},{name:"offset",options:{offset:[0,8]}}],placement:"bottom",strategy:"fixed"}}),[s]),v=c(e,i,m),g=v.styles,y=v.attributes;return[p({ref:f,style:g.popper},y.popper),p({ref:b,style:g.arrow},y.arrow)]},b=function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=o(e),n=r(t,2),i=n[0],c=n[1],f=u((function(){return c(!1)}),[]),l=u((function(){return c(!0)}),[]),a=u((function(){return c((function(r){return!r}))}),[]);return[i,{off:f,on:l,toggle:a}]};export{l as useInput,s as usePopover,f as usePrevious,b as useSwitch};
+import { useRef, useEffect, useMemo, useState, useCallback } from 'react';
+import { usePopper } from 'react-popper';
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    });
+    keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+
+  return target;
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(arr, i) {
+  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+  var _e = undefined;
+
+  try {
+    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
+    }
+  }
+
+  return _arr;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+  return arr2;
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+var usePrevious = (function (value) {
+  var ref = useRef();
+  useEffect(function () {
+    ref.current = value;
+  });
+  return ref.current;
+});
+
+var useInput = (function () {
+  var handleChange = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+  var handleBlur = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  var controlledValue = arguments.length > 2 ? arguments[2] : undefined;
+  var error = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+  var isControlled = useMemo(function () {
+    return typeof controlledValue !== 'undefined';
+  }, [controlledValue]);
+
+  var _useState = useState(isControlled ? controlledValue : ''),
+      _useState2 = _slicedToArray(_useState, 2),
+      inputValue = _useState2[0],
+      setInputValue = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      touched = _useState4[0],
+      setTouched = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      focused = _useState6[0],
+      setFocus = _useState6[1];
+
+  var _useState7 = useState(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      hasValue = _useState8[0],
+      setHasValue = _useState8[1];
+
+  var prevError = usePrevious(error);
+  var value = useMemo(function () {
+    return isControlled ? controlledValue : inputValue;
+  }, [isControlled, controlledValue, inputValue]);
+  useEffect(function () {
+    var hasValidValue = value && value !== null && value !== undefined;
+    setHasValue(Boolean(hasValidValue));
+  }, [hasValue, value]);
+  var onBlur = useCallback(function (e) {
+    if (handleBlur) {
+      handleBlur(e);
+    }
+
+    setFocus(false);
+    setTouched(function (prev) {
+      return !prev ? true : prev;
+    });
+  }, [handleBlur]);
+  var onChange = useCallback(function (e) {
+    if (handleChange) {
+      return handleChange(e);
+    }
+
+    return setInputValue(e.target.value);
+  }, [handleChange]);
+  var onFocus = useCallback(function () {
+    setFocus(true);
+  }, []);
+  return [{
+    error: touched ? error || prevError : null,
+    focused: focused,
+    hasValue: hasValue,
+    touched: touched
+  }, {
+    onBlur: onBlur,
+    onChange: onChange,
+    onFocus: onFocus,
+    value: value
+  }];
+});
+
+var usePopover = function usePopover(anchor) {
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      popover = _useState2[0],
+      setPopover = _useState2[1];
+
+  var _useState3 = useState(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      arrow = _useState4[0],
+      setArrow = _useState4[1];
+
+  var options = useMemo(function () {
+    return {
+      modifiers: [{
+        name: 'arrow',
+        options: {
+          element: arrow
+        }
+      }, {
+        name: 'offset',
+        options: {
+          offset: [0, 8]
+        }
+      }],
+      placement: 'bottom',
+      strategy: 'fixed'
+    };
+  }, [arrow]);
+
+  var _usePopper = usePopper(anchor, popover, options),
+      styles = _usePopper.styles,
+      attributes = _usePopper.attributes;
+
+  return [_objectSpread2({
+    ref: setPopover,
+    style: styles.popper
+  }, attributes.popper), _objectSpread2({
+    ref: setArrow,
+    style: styles.arrow
+  }, attributes.arrow)];
+};
+
+var useSwitch = (function () {
+  var init = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+
+  var _useState = useState(init),
+      _useState2 = _slicedToArray(_useState, 2),
+      enabled = _useState2[0],
+      setEnabled = _useState2[1];
+
+  var off = useCallback(function () {
+    return setEnabled(false);
+  }, []);
+  var on = useCallback(function () {
+    return setEnabled(true);
+  }, []);
+  var toggle = useCallback(function () {
+    return setEnabled(function (prev) {
+      return !prev;
+    });
+  }, []);
+  return [enabled, {
+    off: off,
+    on: on,
+    toggle: toggle
+  }];
+});
+
+export { useInput, usePopover, usePrevious, useSwitch };

package.json

 {
     "name": "@arkui/hooks",
-    "version": "0.0.3-alpha.0",
+    "version": "0.0.3-alpha.1",
     "license": "MIT",
@@ -9,3 +9,3 @@ "main": "lib/index.cjs.js",
     "peerDependencies": {
-        "@arkui/portal": "^0.1.5",
+        "@arkui/portal": "^0.1.6-alpha.0",
         "@popperjs/core": "^2.4.4",
@@ -15,3 +15,3 @@ "react": "^16.13.1",
     },
-    "gitHead": "a247eec01fbe36fcae9114caf0072390a2e7aae8"
+    "gitHead": "de746d0371421ac557f0492774f332cd57989e35"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

28778

increased by46.44%

Lines of code

870

increased by93.76%

Number of low quality alerts

2

decreased by-33.33%

No dependency changes