@neko-os/ui 0.5.2 → 0.5.3

package/README.md

@@ -1,3 +1,5 @@
 # Neko UI
 
 Universal React Native UI library (works on react-native, react-native-web and react).
+
+https://nekoui.surge.sh/guides/install

package/dist/components/form/FormItem.js

@@ -62,6 +62,7 @@ export function FormItem(_ref)
 
   var handleBlur = function handleBlur(e, originalOnBlur) {
     if (originalOnBlur) originalOnBlur(e);
+    form.markTouched(listPath);
 
     if (shouldValidateOn('onBlur', rules, validateTrigger)) {
       form.validateField(listPath, 'onBlur');

package/dist/components/form/useNewForm.js

@@ -1,4 +1,4 @@
-function asyncGeneratorStep(n, t, e, r, o, a, c) {try {var i = n[a](c),u = i.value;} catch (n) {return void e(n);}i.done ? t(u) : Promise.resolve(u).then(r, o);}function _asyncToGenerator(n) {return function () {var t = this,e = arguments;return new Promise(function (r, o) {var a = n.apply(t, e);function _next(n) {asyncGeneratorStep(a, r, o, _next, _throw, "next", n);}function _throw(n) {asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);}_next(void 0);});};}function _slicedToArray(r, e) {return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();}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.");}function _unsupportedIterableToArray(r, a) {if (r) {if ("string" == typeof r) return _arrayLikeToArray(r, a);var t = {}.toString.call(r).slice(8, -1);return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;}}function _arrayLikeToArray(r, a) {(null == a || a > r.length) && (a = r.length);for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];return n;}function _iterableToArrayLimit(r, l) {var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];if (null != t) {var e,n,i,u,a = [],f = !0,o = !1;try {if (i = (t = t.call(r)).next, 0 === l) {if (Object(t) !== t) return;f = !1;} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);} catch (r) {o = !0, n = r;} finally {try {if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;} finally {if (o) throw n;}}return a;}}function _arrayWithHoles(r) {if (Array.isArray(r)) return r;}import { assocPath, path } from 'ramda';
+function asyncGeneratorStep(n, t, e, r, o, a, c) {try {var i = n[a](c),u = i.value;} catch (n) {return void e(n);}i.done ? t(u) : Promise.resolve(u).then(r, o);}function _asyncToGenerator(n) {return function () {var t = this,e = arguments;return new Promise(function (r, o) {var a = n.apply(t, e);function _next(n) {asyncGeneratorStep(a, r, o, _next, _throw, "next", n);}function _throw(n) {asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);}_next(void 0);});};}function _slicedToArray(r, e) {return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();}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.");}function _iterableToArrayLimit(r, l) {var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];if (null != t) {var e,n,i,u,a = [],f = !0,o = !1;try {if (i = (t = t.call(r)).next, 0 === l) {if (Object(t) !== t) return;f = !1;} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);} catch (r) {o = !0, n = r;} finally {try {if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;} finally {if (o) throw n;}}return a;}}function _arrayWithHoles(r) {if (Array.isArray(r)) return r;}function _toConsumableArray(r) {return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();}function _nonIterableSpread() {throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(r, a) {if (r) {if ("string" == typeof r) return _arrayLikeToArray(r, a);var t = {}.toString.call(r).slice(8, -1);return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;}}function _iterableToArray(r) {if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);}function _arrayWithoutHoles(r) {if (Array.isArray(r)) return _arrayLikeToArray(r);}function _arrayLikeToArray(r, a) {(null == a || a > r.length) && (a = r.length);for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];return n;}import { assocPath, path } from 'ramda';
 import React from 'react';
 import { validateRules, validateAllFields, normalizeRules } from "./validation";
 
@@ -6,6 +6,8 @@ export function useNewForm() {var _ref = arguments.length > 0 && arguments[0] !=
   var valuesRef = React.useRef(Object.assign({}, initialValues));
   var initialValuesRef = React.useRef(Object.assign({}, initialValues));
   var errorsRef = React.useRef({});
+  var touchedRef = React.useRef(new Set());
+  var dirtyRef = React.useRef(new Set());
   var listenersRef = React.useRef({});
   var errorListenersRef = React.useRef({});
   var rulesRegistryRef = React.useRef(new Map());
@@ -45,8 +47,37 @@ export function useNewForm() {var _ref = arguments.length > 0 && arguments[0] !=
       });
     };
 
+    var markTouched = function markTouched(name) {
+      touchedRef.current.add(toKey(name));
+    };
+
+    var updateDirty = function updateDirty(name) {
+      var key = toKey(name);
+      var current = path(toPath(name), valuesRef.current);
+      var initial = path(toPath(name), initialValuesRef.current);
+      if (current === initial) {
+        dirtyRef.current.delete(key);
+      } else {
+        dirtyRef.current.add(key);
+      }
+    };
+
+    var isTouched = function isTouched(name) {
+      if (!name) return touchedRef.current.size > 0;
+      return touchedRef.current.has(toKey(name));
+    };
+
+    var isDirty = function isDirty(name) {
+      if (!name) return dirtyRef.current.size > 0;
+      return dirtyRef.current.has(toKey(name));
+    };
+
+    var getTouchedFields = function getTouchedFields() {return _toConsumableArray(touchedRef.current);};
+    var getDirtyFields = function getDirtyFields() {return _toConsumableArray(dirtyRef.current);};
+
     var setFieldValue = function setFieldValue(name, value) {
       valuesRef.current = assocPath(toPath(name), value, valuesRef.current);
+      updateDirty(name);
       notify(name);
       var fn = callbacksRef.current.onValuesChange;
       if (fn) fn(name, valuesRef.current);
@@ -69,6 +100,8 @@ export function useNewForm() {var _ref = arguments.length > 0 && arguments[0] !=
     var resetFields = function resetFields() {
       valuesRef.current = Object.assign({}, initialValuesRef.current);
       errorsRef.current = {};
+      touchedRef.current.clear();
+      dirtyRef.current.clear();
       notifyAll();
       notifyAllErrors();
     };
@@ -196,6 +229,11 @@ export function useNewForm() {var _ref = arguments.length > 0 && arguments[0] !=
       getError: getError,
       setError: setError,
       clearErrors: clearErrors,
+      markTouched: markTouched,
+      isTouched: isTouched,
+      isDirty: isDirty,
+      getTouchedFields: getTouchedFields,
+      getDirtyFields: getDirtyFields,
       registerListener: registerListener,
       registerErrorListener: registerErrorListener,
       registerRules: registerRules,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neko-os/ui",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "author": "Christian Storch <ccstorch@gmail.com>",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/components/form/FormItem.js

@@ -62,6 +62,7 @@ export function FormItem({
 
   const handleBlur = (e, originalOnBlur) => {
     if (originalOnBlur) originalOnBlur(e)
+    form.markTouched(listPath)
 
     if (shouldValidateOn('onBlur', rules, validateTrigger)) {
       form.validateField(listPath, 'onBlur')

package/src/components/form/useNewForm.js

@@ -6,6 +6,8 @@ export function useNewForm({ initialValues = {}, validate, onSubmit, onValuesCha
   const valuesRef = React.useRef({ ...initialValues })
   const initialValuesRef = React.useRef({ ...initialValues })
   const errorsRef = React.useRef({}) // Flat structure: { 'users': 'error', 'users.0.name': 'error' }
+  const touchedRef = React.useRef(new Set())
+  const dirtyRef = React.useRef(new Set())
   const listenersRef = React.useRef({})
   const errorListenersRef = React.useRef({})
   const rulesRegistryRef = React.useRef(new Map())
@@ -45,8 +47,37 @@ export function useNewForm({ initialValues = {}, validate, onSubmit, onValuesCha
       })
     }
 
+    const markTouched = (name) => {
+      touchedRef.current.add(toKey(name))
+    }
+
+    const updateDirty = (name) => {
+      const key = toKey(name)
+      const current = path(toPath(name), valuesRef.current)
+      const initial = path(toPath(name), initialValuesRef.current)
+      if (current === initial) {
+        dirtyRef.current.delete(key)
+      } else {
+        dirtyRef.current.add(key)
+      }
+    }
+
+    const isTouched = (name) => {
+      if (!name) return touchedRef.current.size > 0
+      return touchedRef.current.has(toKey(name))
+    }
+
+    const isDirty = (name) => {
+      if (!name) return dirtyRef.current.size > 0
+      return dirtyRef.current.has(toKey(name))
+    }
+
+    const getTouchedFields = () => [...touchedRef.current]
+    const getDirtyFields = () => [...dirtyRef.current]
+
     const setFieldValue = (name, value) => {
       valuesRef.current = assocPath(toPath(name), value, valuesRef.current)
+      updateDirty(name)
       notify(name)
       const fn = callbacksRef.current.onValuesChange
       if (fn) fn(name, valuesRef.current)
@@ -69,6 +100,8 @@ export function useNewForm({ initialValues = {}, validate, onSubmit, onValuesCha
     const resetFields = () => {
       valuesRef.current = { ...initialValuesRef.current }
       errorsRef.current = {}
+      touchedRef.current.clear()
+      dirtyRef.current.clear()
       notifyAll()
       notifyAllErrors()
     }
@@ -196,6 +229,11 @@ export function useNewForm({ initialValues = {}, validate, onSubmit, onValuesCha
       getError,
       setError,
       clearErrors,
+      markTouched,
+      isTouched,
+      isDirty,
+      getTouchedFields,
+      getDirtyFields,
       registerListener,
       registerErrorListener,
       registerRules,