Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@arkui/hooks
Advanced tools
@arkui/hooks - npm Package Compare versions
Comparing version 0.1.0 to 0.1.1
@@ -6,336 +6,20 @@ 'use strict'; | ||
| var react = require('react'); | ||
| var reactPopper = require('react-popper'); | ||
| var useClickaway = function useClickaway(container, active, onTrigger) { | ||
| react.useEffect(function () { | ||
| if (!active || !onTrigger) return undefined; | ||
| var useClickaway=function(a,b,c){react.useEffect(function(){if(b&&c){var d=function(b){var d;if(null==a||null==(d=a.current)||!d.contains(b.target))return b.stopPropagation(),c()};return window.addEventListener("click",d),function(){return window.removeEventListener("click",d)}}},[b,a,c]);}; | ||
| var handleClick = function handleClick(e) { | ||
| var _container$current; | ||
| var usePrevious=function(a){var b=react.useRef();return react.useEffect(function(){b.current=a;}),b.current}; | ||
| if (container === null || container === void 0 ? void 0 : (_container$current = container.current) === null || _container$current === void 0 ? void 0 : _container$current.contains(e.target)) return undefined; | ||
| e.stopPropagation(); | ||
| return onTrigger(); | ||
| }; | ||
| var useInput=function(a,b,c,d){void 0===a&&(a=null),void 0===b&&(b=null),void 0===d&&(d=null);var e=react.useMemo(function(){return "undefined"!=typeof c},[c]),f=react.useState(e?c:""),g=f[0],h=f[1],i=react.useState(!1),j=i[0],k=i[1],l=react.useState(!1),m=l[0],n=l[1],o=react.useState(!1),p=o[0],q=o[1],r=usePrevious(d),s=react.useMemo(function(){return e?c:g},[e,c,g]);react.useEffect(function(){q(!!(s&&null!==s&&s!==void 0));},[p,s]);var t=react.useCallback(function(a){b&&b(a),n(!1),k(function(a){return !a||a});},[b]),u=react.useCallback(function(b){return a?a(b):h(b.target.value)},[a]),v=react.useCallback(function(){n(!0);},[]);return [{error:j?d||r:null,focused:m,hasValue:p,touched:j},{onBlur:t,onChange:u,onFocus:v,value:s}]}; | ||
| window.addEventListener('click', handleClick); | ||
| return function () { | ||
| return window.removeEventListener('click', handleClick); | ||
| }; | ||
| }, [active, container, onTrigger]); | ||
| }; | ||
| var useMatchMedia=function(a){var b=react.useState(),c=b[0],d=b[1],e=react.useCallback(function(a){var b=a.matches;return d(b)},[]);return react.useEffect(function(){if("undefined"!=typeof window&&"matchMedia"in window&&a){var b=window.matchMedia(a);return d(b.matches),b.addEventListener("change",e),function(){return b.removeEventListener("change",e)}}},[e,a]),c}; | ||
| 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; | ||
| } | ||
| var useSwitch=function(a){void 0===a&&(a=!1);var b=react.useState(a),c=b[0],d=b[1],e=react.useCallback(function(){return d(!1)},[]),f=react.useCallback(function(){return d(!0)},[]),g=react.useCallback(function(){return d(function(a){return !a})},[]);return [c,{off:e,on:f,toggle:g}]}; | ||
| return obj; | ||
| } | ||
| var useSystemDarkMode=function(a,b){void 0===b&&(b=!1);var c=react.useState(b),d=c[0],e=c[1],f=react.useCallback(function(a){var b=a.matches;return e(b)},[]);return react.useEffect(function(){if("undefined"!=typeof window&&"matchMedia"in window&&!a){var b=window.matchMedia("(prefers-color-scheme: dark)");return e(b.matches),b.addEventListener("change",f),function(){return b.removeEventListener("change",f)}}},[f,a]),d}; | ||
| 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 usePrevious(value) { | ||
| var ref = react.useRef(); | ||
| react.useEffect(function () { | ||
| ref.current = value; | ||
| }); | ||
| return ref.current; | ||
| }; | ||
| var useInput = function useInput() { | ||
| 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 useMatchMedia = function useMatchMedia(query) { | ||
| var _useState = react.useState(), | ||
| _useState2 = _slicedToArray(_useState, 2), | ||
| match = _useState2[0], | ||
| setMatch = _useState2[1]; | ||
| var handleChange = react.useCallback(function (_ref) { | ||
| var matches = _ref.matches; | ||
| return setMatch(matches); | ||
| }, []); | ||
| react.useEffect(function () { | ||
| if (typeof window !== 'undefined' && 'matchMedia' in window) { | ||
| if (query) { | ||
| var media = window.matchMedia(query); | ||
| setMatch(media.matches); | ||
| media.addEventListener('change', handleChange); | ||
| return function () { | ||
| return media.removeEventListener('change', handleChange); | ||
| }; | ||
| } | ||
| } | ||
| return undefined; | ||
| }, [handleChange, query]); | ||
| return match; | ||
| }; | ||
| 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 useSwitch() { | ||
| 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 | ||
| }]; | ||
| }; | ||
| var useSystemDarkMode = function useSystemDarkMode(stop) { | ||
| var init = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; | ||
| var _useState = react.useState(init), | ||
| _useState2 = _slicedToArray(_useState, 2), | ||
| darkMode = _useState2[0], | ||
| setDarkMode = _useState2[1]; | ||
| var handleChange = react.useCallback(function (_ref) { | ||
| var matches = _ref.matches; | ||
| return setDarkMode(matches); | ||
| }, []); | ||
| react.useEffect(function () { | ||
| if (typeof window !== 'undefined' && 'matchMedia' in window) { | ||
| if (!stop) { | ||
| var media = window.matchMedia('(prefers-color-scheme: dark)'); | ||
| setDarkMode(media.matches); | ||
| media.addEventListener('change', handleChange); | ||
| return function () { | ||
| return media.removeEventListener('change', handleChange); | ||
| }; | ||
| } | ||
| } | ||
| return undefined; | ||
| }, [handleChange, stop]); | ||
| return darkMode; | ||
| }; | ||
| exports.useClickaway = useClickaway; | ||
| exports.useInput = useInput; | ||
| exports.useMatchMedia = useMatchMedia; | ||
| exports.usePopover = usePopover; | ||
| exports.usePrevious = usePrevious; | ||
| exports.useSwitch = useSwitch; | ||
| exports.useSystemDarkMode = useSystemDarkMode; |
| import { useEffect, useRef, useMemo, useState, useCallback } from 'react'; | ||
| import { usePopper } from 'react-popper'; | ||
| var useClickaway = function useClickaway(container, active, onTrigger) { | ||
| useEffect(function () { | ||
| if (!active || !onTrigger) return undefined; | ||
| var useClickaway=function(a,b,c){useEffect(function(){if(b&&c){var d=function(b){var d;if(null==a||null==(d=a.current)||!d.contains(b.target))return b.stopPropagation(),c()};return window.addEventListener("click",d),function(){return window.removeEventListener("click",d)}}},[b,a,c]);}; | ||
| var handleClick = function handleClick(e) { | ||
| var _container$current; | ||
| var usePrevious=function(a){var b=useRef();return useEffect(function(){b.current=a;}),b.current}; | ||
| if (container === null || container === void 0 ? void 0 : (_container$current = container.current) === null || _container$current === void 0 ? void 0 : _container$current.contains(e.target)) return undefined; | ||
| e.stopPropagation(); | ||
| return onTrigger(); | ||
| }; | ||
| var useInput=function(a,b,c,d){void 0===a&&(a=null),void 0===b&&(b=null),void 0===d&&(d=null);var e=useMemo(function(){return "undefined"!=typeof c},[c]),f=useState(e?c:""),g=f[0],h=f[1],i=useState(!1),j=i[0],k=i[1],l=useState(!1),m=l[0],n=l[1],o=useState(!1),p=o[0],q=o[1],r=usePrevious(d),s=useMemo(function(){return e?c:g},[e,c,g]);useEffect(function(){q(!!(s&&null!==s&&s!==void 0));},[p,s]);var t=useCallback(function(a){b&&b(a),n(!1),k(function(a){return !a||a});},[b]),u=useCallback(function(b){return a?a(b):h(b.target.value)},[a]),v=useCallback(function(){n(!0);},[]);return [{error:j?d||r:null,focused:m,hasValue:p,touched:j},{onBlur:t,onChange:u,onFocus:v,value:s}]}; | ||
| window.addEventListener('click', handleClick); | ||
| return function () { | ||
| return window.removeEventListener('click', handleClick); | ||
| }; | ||
| }, [active, container, onTrigger]); | ||
| }; | ||
| var useMatchMedia=function(a){var b=useState(),c=b[0],d=b[1],e=useCallback(function(a){var b=a.matches;return d(b)},[]);return useEffect(function(){if("undefined"!=typeof window&&"matchMedia"in window&&a){var b=window.matchMedia(a);return d(b.matches),b.addEventListener("change",e),function(){return b.removeEventListener("change",e)}}},[e,a]),c}; | ||
| 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; | ||
| } | ||
| var useSwitch=function(a){void 0===a&&(a=!1);var b=useState(a),c=b[0],d=b[1],e=useCallback(function(){return d(!1)},[]),f=useCallback(function(){return d(!0)},[]),g=useCallback(function(){return d(function(a){return !a})},[]);return [c,{off:e,on:f,toggle:g}]}; | ||
| return obj; | ||
| } | ||
| var useSystemDarkMode=function(a,b){void 0===b&&(b=!1);var c=useState(b),d=c[0],e=c[1],f=useCallback(function(a){var b=a.matches;return e(b)},[]);return useEffect(function(){if("undefined"!=typeof window&&"matchMedia"in window&&!a){var b=window.matchMedia("(prefers-color-scheme: dark)");return e(b.matches),b.addEventListener("change",f),function(){return b.removeEventListener("change",f)}}},[f,a]),d}; | ||
| 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 usePrevious(value) { | ||
| var ref = useRef(); | ||
| useEffect(function () { | ||
| ref.current = value; | ||
| }); | ||
| return ref.current; | ||
| }; | ||
| var useInput = function useInput() { | ||
| 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 useMatchMedia = function useMatchMedia(query) { | ||
| var _useState = useState(), | ||
| _useState2 = _slicedToArray(_useState, 2), | ||
| match = _useState2[0], | ||
| setMatch = _useState2[1]; | ||
| var handleChange = useCallback(function (_ref) { | ||
| var matches = _ref.matches; | ||
| return setMatch(matches); | ||
| }, []); | ||
| useEffect(function () { | ||
| if (typeof window !== 'undefined' && 'matchMedia' in window) { | ||
| if (query) { | ||
| var media = window.matchMedia(query); | ||
| setMatch(media.matches); | ||
| media.addEventListener('change', handleChange); | ||
| return function () { | ||
| return media.removeEventListener('change', handleChange); | ||
| }; | ||
| } | ||
| } | ||
| return undefined; | ||
| }, [handleChange, query]); | ||
| return match; | ||
| }; | ||
| 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 useSwitch() { | ||
| 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 | ||
| }]; | ||
| }; | ||
| var useSystemDarkMode = function useSystemDarkMode(stop) { | ||
| var init = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; | ||
| var _useState = useState(init), | ||
| _useState2 = _slicedToArray(_useState, 2), | ||
| darkMode = _useState2[0], | ||
| setDarkMode = _useState2[1]; | ||
| var handleChange = useCallback(function (_ref) { | ||
| var matches = _ref.matches; | ||
| return setDarkMode(matches); | ||
| }, []); | ||
| useEffect(function () { | ||
| if (typeof window !== 'undefined' && 'matchMedia' in window) { | ||
| if (!stop) { | ||
| var media = window.matchMedia('(prefers-color-scheme: dark)'); | ||
| setDarkMode(media.matches); | ||
| media.addEventListener('change', handleChange); | ||
| return function () { | ||
| return media.removeEventListener('change', handleChange); | ||
| }; | ||
| } | ||
| } | ||
| return undefined; | ||
| }, [handleChange, stop]); | ||
| return darkMode; | ||
| }; | ||
| export { useClickaway, useInput, useMatchMedia, usePopover, usePrevious, useSwitch, useSystemDarkMode }; | ||
| export { useClickaway, useInput, useMatchMedia, usePrevious, useSwitch, useSystemDarkMode }; |
| { | ||
| "name": "@arkui/hooks", | ||
| "version": "0.1.0", | ||
| "version": "0.1.1", | ||
| "license": "MIT", | ||
@@ -9,7 +9,8 @@ "main": "lib/index.cjs.js", | ||
| "peerDependencies": { | ||
| "@popperjs/core": "^2.4.4", | ||
| "react": "^16.13.1", | ||
| "react-popper": "^2.2.3" | ||
| "react": "^16.13.1" | ||
| }, | ||
| "gitHead": "28381557013ab95ebca19dfad91c9050a5d4c82e" | ||
| "scripts": { | ||
| "build": "rollup -c" | ||
| }, | ||
| "gitHead": "2018e1b448127405d6296066ba66de337f2de762" | ||
| } |
| export * from './useClickaway'; | ||
| export * from './useInput'; | ||
| export * from './useMatchMedia'; | ||
| export * from './usePopover'; | ||
| export * from './usePrevious'; | ||
| export * from './useSwitch'; | ||
| export * from './useSystemDarkMode'; |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Minified code
QualityThis 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
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Dependency count
- decreased by-66.67%
1
Worsened metrics
- Total package byte prevSize
- decreased by-36.63%
27580
- Number of package files
- decreased by-8.57%
32
- Lines of code
- decreased by-47.86%
646
- Number of low quality alerts
- increased by50%
3
No dependency changes