actbase - npm Package Compare versions

Comparing version 1.0.86 to 1.0.90

lib/absolute/Provider.native.js

@@ -126,5 +126,2 @@ "use strict";
         };
-
-        _reactNative.LayoutAnimation.configureNext(_reactNative.LayoutAnimation.Presets.spring);
-
         var index = 0;
@@ -141,4 +138,2 @@ setToasts((0, _immer.default)(function (draft) {
 
-            _reactNative.LayoutAnimation.configureNext(_reactNative.LayoutAnimation.Presets.easeInEaseOut);
-
             var ix = (_a = draft === null || draft === void 0 ? void 0 : draft.items) === null || _a === void 0 ? void 0 : _a.findIndex(function (v) {
@@ -145,0 +140,0 @@ return v.index === index;

lib/elements/Button.native.js

@@ -22,17 +22,160 @@ "use strict";
 
+var _mergeRefs = require("../common/mergeRefs");
+
+var _Form = require("../forms/Form");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var AEButton = _react.default.forwardRef(function (props, forwardedRef) {
-  var extraProps = (0, _useParseProps.useParseProps)('button', props);
+  /** Form Context Sync **/
+  var formContext = _react.default.useContext(_Form.FormContext);
 
-  var children = _react.default.Children.toArray(props.children); //
+  var nameRef = _react.default.useRef(0);
 
+  var nodeRef = _react.default.useRef();
 
+  var _a = _react.default.useState({}),
+      formProps = _a[0],
+      setFormProps = _a[1];
+
+  var setProps = _react.default.useCallback(function (props) {
+    if (!(0, _lodash.isEqual)(props, formProps)) {
+      setFormProps(function (p) {
+        return Object.assign((0, _tslib.__assign)((0, _tslib.__assign)({}, p), props));
+      });
+    }
+  }, [formProps]);
+
+  _react.default.useEffect(function () {
+    if (!nodeRef.current) return;
+
+    var apply = function apply() {
+      return (0, _tslib.__awaiter)(void 0, void 0, void 0, function () {
+        var pos, position;
+
+        var _a;
+
+        return (0, _tslib.__generator)(this, function (_b) {
+          switch (_b.label) {
+            case 0:
+              return [4
+              /*yield*/
+              , (0, _utils.measure)(nodeRef.current)];
+
+            case 1:
+              pos = _b.sent();
+              position = -parseFloat(Math.floor(pos === null || pos === void 0 ? void 0 : pos.pageY) + "." + Math.floor(pos === null || pos === void 0 ? void 0 : pos.pageX));
+              (_a = formContext.subscribe) === null || _a === void 0 ? void 0 : _a.call(formContext, nameRef, {
+                m: 'button',
+                position: position,
+                setProps: setProps
+              });
+              return [2
+              /*return*/
+              ];
+          }
+        });
+      });
+    };
+
+    apply()["catch"](console.warn);
+  }, [nodeRef.current]);
+
+  var handlePressIn = _react.default.useCallback(function (e) {
+    var _a;
+
+    (_a = props === null || props === void 0 ? void 0 : props.onPressIn) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    setFocused(true);
+  }, []);
+
+  var handlePressOut = _react.default.useCallback(function (e) {
+    var _a;
+
+    (_a = props === null || props === void 0 ? void 0 : props.onPressOut) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    setFocused(false);
+  }, []);
+
+  var _b = _react.default.useState(0),
+      process = _b[0],
+      setProcess = _b[1];
+
+  var handleClick = function handleClick() {
+    if (process > 0) return;
+    setProcess(1);
+
+    try {
+      var isPromise = false;
+
+      if (onPress) {
+        var o = onPress && onPress();
+
+        if (o instanceof Promise) {
+          isPromise = true;
+          setProcess(2);
+          o.then(function () {
+            setProcess(0);
+          })["catch"](function (e) {
+            setProcess(0);
+            console.warn(e);
+          });
+        }
+      } else if (formContext === null || formContext === void 0 ? void 0 : formContext.submit) {
+        var o = (formContext === null || formContext === void 0 ? void 0 : formContext.submit) && (formContext === null || formContext === void 0 ? void 0 : formContext.submit());
+
+        if (o instanceof Promise) {
+          isPromise = true;
+          setProcess(2);
+          o.then(function () {
+            setProcess(0);
+          })["catch"](function (e) {
+            setProcess(0);
+            console.warn(e);
+          });
+        }
+      }
+
+      if (!isPromise) setTimeout(function () {
+        return setProcess(0);
+      }, 500);
+    } catch (e) {
+      console.warn(e);
+      setProcess(0);
+    }
+  };
+
+  var children = _react.default.Children.toArray(props.children);
+
+  var disabled = props === null || props === void 0 ? void 0 : props.disabled;
+
+  var _c = _react.default.useState(false),
+      focused = _c[0],
+      setFocused = _c[1];
+
+  var prefixes = [];
+  if (disabled || (formProps === null || formProps === void 0 ? void 0 : formProps.disabled) || (formProps === null || formProps === void 0 ? void 0 : formProps.readOnly)) prefixes.push('disabled');
+  if (focused) prefixes.push('focus');
+
+  var _d = (0, _useParseProps.useParseProps)('button', props, prefixes),
+      outStyle = _d.style,
+      onPress = _d.onPress,
+      extraProps = (0, _tslib.__rest)(_d, ["style", "onPress"]);
+
+  var style = outStyle === null || outStyle === void 0 ? void 0 : outStyle.filter(function (v) {
+    return !!v;
+  }).reduce(function (a, v) {
+    return (0, _tslib.__assign)((0, _tslib.__assign)({}, a), v);
+  }, {});
   return _react.default.createElement(_reactNative.TouchableOpacity, (0, _tslib.__assign)({
-    ref: forwardedRef,
+    ref: (0, _mergeRefs.mergeRefs)(forwardedRef, nodeRef),
+    onPress: handleClick,
+    onPressIn: handlePressIn,
+    onPressOut: handlePressOut,
     activeOpacity: _Actbase.default.Touchable.activeOpacity
-  }, extraProps), children === null || children === void 0 ? void 0 : children.map(function (v, index) {
+  }, extraProps, formProps, {
+    disabled: disabled,
+    style: style
+  }), children === null || children === void 0 ? void 0 : children.map(function (v, index) {
     return typeof v === 'string' ? _react.default.createElement(_reactNative.Text, {
       key: "" + index,
-      style: (0, _lodash.pick)(extraProps.style, _utils.TEXT_STYLE_NAMES)
+      style: (0, _lodash.pick)(style, _utils.TEXT_STYLE_NAMES)
     }, v) : _react.default.createElement(_react.default.Fragment, {
@@ -39,0 +182,0 @@ key: "" + index

lib/forms/textinput/TextInput.d.ts

 import * as React from 'react';
-import { InputProps } from 'styles/Props';
+import { InputProps } from '../../styles/Props';
 declare const AFTextInput: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLElement>>;
 export default AFTextInput;

lib/forms/textinput/TextInput.js

@@ -16,3 +16,3 @@ "use strict";
 
-var _View = _interopRequireDefault(require("../../tags/container/View"));
+var _useFields = _interopRequireDefault(require("../useFields"));
 
@@ -25,11 +25,17 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+// @ts-ignore // style,
 var AFTextInput = React.forwardRef(function (props, forwardedRef) {
-  var _a = (0, React.useState)(''),
-      data = _a[0],
-      setData = _a[1];
+  // @ts-ignore // style,
+  var _a = (0, _useFields.default)(props),
+      nodeRef = _a.nodeRef,
+      error = _a.error,
+      formProps = _a.formProps,
+      value = _a.value,
+      onChangeValue = _a.onChangeValue;
 
   var _b = (0, React.useState)(false),
       focused = _b[0],
-      setFocused = _b[1];
+      setFocused = _b[1]; // @ts-ignore // style,
 
+
   var handleFocus = (0, React.useCallback)(function (e) {
@@ -40,3 +46,4 @@ var _a;
     (_a = props === null || props === void 0 ? void 0 : props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
-  }, [props === null || props === void 0 ? void 0 : props.onFocus]);
+  }, [props === null || props === void 0 ? void 0 : props.onFocus]); // @ts-ignore // style,
+
   var handleBlur = (0, React.useCallback)(function (e) {
@@ -50,2 +57,3 @@ var _a;
   if (focused) prefixes.push('focus');
+  if (error) prefixes.push('invalid'); // @ts-ignore // style,
 
@@ -55,44 +63,32 @@ var _c = (0, _useParseProps.useParseProps)(props._elem || 'textinput', props, prefixes),
       style = _c.style,
-      extraProps = (0, _tslib.__rest)(_c, ["className", "style"]);
+      extraProps = (0, _tslib.__rest)(_c, ["className", "style"]); // @ts-ignore // style,
 
-  var handleChangeText = function handleChangeText(e) {
-    var _a, _b;
 
-    setData(e.target.value);
-    (_a = props === null || props === void 0 ? void 0 : props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
-    (_b = props === null || props === void 0 ? void 0 : props.onChangeValue) === null || _b === void 0 ? void 0 : _b.call(props, e.target.value);
-  };
+  var beforeElement = undefined;
 
-  var value = props.value !== undefined ? props.value : data;
-  return React.createElement(_View.default, {
-    className: className,
-    style: {
-      flexDirection: 'row',
-      alignItems: 'center'
-    }
-  }, props.before, React.createElement("input", (0, _tslib.__assign)({
-    type: 'text',
-    ref: forwardedRef,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    value: value,
-    onChange: handleChangeText
-  }, extraProps, {
-    style: {
-      flex: 1,
-      height: '100%',
-      background: 'transparent',
-      border: 'none',
-      outline: 'none'
-    }
-  })), React.createElement("div", null, React.createElement("img", {
-    src: require('../../assets/clear.png'),
-    style: {
-      width: 14,
-      height: 14,
-      marginLeft: 8
-    }
-  })), props.after);
+  if (props.before && typeof props.before === 'function') {
+    beforeElement = props.before(value, error);
+  } else if (props.after) {
+    beforeElement = props.after;
+  } // @ts-ignore // style,
+
+
+  var afterElement = undefined;
+
+  if (props.after && typeof props.after === 'function') {
+    afterElement = props.after(value, error);
+  } else if (props.after) {
+    afterElement = props.after;
+  }
+
+  return (// @ts-ignore // style,
+    React.createElement("div", {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center'
+      }
+    })
+  );
 });
 var _default = AFTextInput;
 exports.default = _default;

lib/forms/textinput/TextInput.native.d.ts

 import * as React from 'react';
 import { TextInput } from 'react-native';
-import { InputProps } from 'styles/Props';
+import { InputProps } from '../../styles/Props';
 declare const AFTextInput: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<TextInput>>;
 export default AFTextInput;

lib/forms/textinput/TextInput.native.js

@@ -18,2 +18,12 @@ "use strict";
 
+var _lodash = require("lodash");
+
+var _mergeRefs = require("../../common/mergeRefs");
+
+var _utils = require("../../common/utils");
+
+var _useFields = _interopRequireDefault(require("../useFields"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
@@ -24,5 +34,8 @@
 var AFTextInput = React.forwardRef(function (props, forwardedRef) {
-  var _a = (0, React.useState)(''),
-      data = _a[0],
-      setData = _a[1];
+  var _a = (0, _useFields.default)(props),
+      nodeRef = _a.nodeRef,
+      error = _a.error,
+      formProps = _a.formProps,
+      value = _a.value,
+      onChangeValue = _a.onChangeValue;
 
@@ -47,13 +60,27 @@ var _b = (0, React.useState)(false),
   if (focused) prefixes.push('focus');
+  if (error) prefixes.push('invalid');
 
   var _c = (0, _useParseProps.useParseProps)(props._elem || 'textinput', props, prefixes),
       className = _c.className,
-      style = _c.style,
+      outStyle = _c.style,
       extraProps = (0, _tslib.__rest)(_c, ["className", "style"]);
 
-  var handleChangeText = function handleChangeText(text) {
-    setData(text);
-  };
+  var style = _reactNative.StyleSheet.flatten(outStyle);
 
-  var value = props.value !== undefined ? props.value : data;
+  var beforeElement = undefined;
+
+  if (props.before && typeof props.before === 'function') {
+    beforeElement = props.before(value, error);
+  } else if (props.after) {
+    beforeElement = props.after;
+  }
+
+  var afterElement = undefined;
+
+  if (props.after && typeof props.after === 'function') {
+    afterElement = props.after(value, error);
+  } else if (props.after) {
+    afterElement = props.after;
+  }
+
   return React.createElement(_reactNative.View, {
@@ -64,15 +91,18 @@ style: [style, {
     }]
-  }, props.before, React.createElement(_reactNative.TextInput, (0, _tslib.__assign)({
-    ref: forwardedRef,
+  }, beforeElement, React.createElement(_reactNative.TextInput, (0, _tslib.__assign)({
+    ref: (0, _mergeRefs.mergeRefs)(forwardedRef, nodeRef),
     onFocus: handleFocus,
     onBlur: handleBlur,
     value: value,
-    onChangeText: handleChangeText
-  }, extraProps, {
-    style: {
+    onChangeText: onChangeValue
+  }, formProps, extraProps, {
+    style: [{
       flex: 1,
       height: '100%'
+    }, (0, _lodash.pick)(style, _utils.TEXT_STYLE_NAMES)]
+  })), !!value && React.createElement(_reactNative.TouchableOpacity, {
+    activeOpacity: 0.8,
+    onPress: function onPress() {
+      return onChangeValue('');
     }
-  })), React.createElement(_reactNative.TouchableOpacity, {
-    activeOpacity: 0.8
   }, React.createElement(_reactNative.Image, {
@@ -86,5 +116,5 @@ source: require('../../assets/clear.png'),
     resizeMode: 'contain'
-  })), props.after);
+  })), afterElement);
 });
 var _default = AFTextInput;
 exports.default = _default;

lib/index.d.ts

@@ -25,2 +25,4 @@ export { Application, Providers } from './Application';
 export { default as FlatList } from './scrollable/flatlist/FlatList';
+export { default as Form } from './forms/Form';
+export { default as Rules } from './forms/Rules';
 export { default as TextInput } from './forms/textinput/TextInput';
@@ -27,0 +29,0 @@ export { default as useToast } from './tools/useToast';

lib/index.js

@@ -156,2 +156,14 @@ "use strict";
 });
+Object.defineProperty(exports, "Form", {
+  enumerable: true,
+  get: function get() {
+    return _Form.default;
+  }
+});
+Object.defineProperty(exports, "Rules", {
+  enumerable: true,
+  get: function get() {
+    return _Rules.default;
+  }
+});
 Object.defineProperty(exports, "TextInput", {
@@ -221,2 +233,6 @@ enumerable: true,
 
+var _Form = _interopRequireDefault(require("./forms/Form"));
+
+var _Rules = _interopRequireDefault(require("./forms/Rules"));
+
 var _TextInput = _interopRequireDefault(require("./forms/textinput/TextInput"));
@@ -223,0 +239,0 @@

lib/styles/Props.d.ts

@@ -15,7 +15,10 @@ import { ReactNode } from 'react';
     value?: any;
-    onChange: (e: any) => void;
+    onChange?: (e: any) => void;
     onChangeValue?: (value: any) => void;
+    onError?: (e: Error | undefined, value: any) => void;
     validateMode?: string;
     before?: any;
-    after?: any;
+    after?: ReactNode | ((value: any, error: any) => ReactNode) | undefined;
+    rules?: Promise<void>[] | ((value: any) => void)[];
+    multiline?: boolean;
 }
@@ -22,0 +25,0 @@ export interface ImageProps extends ViewProps {

lib/styles/useParseProps.native.js

@@ -20,4 +20,17 @@ "use strict";
 
+var propTemplate = {
+  email: {
+    keyboardType: 'email-address',
+    autoCorrect: false,
+    autoCapitalize: 'none'
+  },
+  password: {
+    secureTextEntry: true,
+    autoCorrect: false,
+    autoCapitalize: 'none'
+  }
+};
+
 var useParseProps = function useParseProps(elem, _a, prefixes) {
-  var _b, _c;
+  var _b, _c, _d, _e;
 
@@ -45,2 +58,13 @@ if (prefixes === void 0) {
 
+  if ((classStyle === null || classStyle === void 0 ? void 0 : classStyle.whiteSpace) && (classStyle === null || classStyle === void 0 ? void 0 : classStyle.textOverflow)) {
+    extraProps.numberOfLines = 1;
+    delete classStyle.whiteSpace;
+    delete classStyle.textOverflow;
+  }
+
+  if (classStyle === null || classStyle === void 0 ? void 0 : classStyle.verticalAlign) {
+    classStyle.textAlignVertical = classStyle.verticalAlign === 'middle' ? 'center' : classStyle.verticalAlign;
+    delete classStyle.verticalAlign;
+  }
+
   if (elem === 'img') {
@@ -68,2 +92,16 @@ extraProps.resizeMode = 'cover';
 
+  if (elem === 'input' || elem === 'textinput') {
+    var placeHolderStyle = (_d = context === null || context === void 0 ? void 0 : context.getStyle) === null || _d === void 0 ? void 0 : _d.call(context, elem, className, ['placeholder']);
+
+    if (placeHolderStyle === null || placeHolderStyle === void 0 ? void 0 : placeHolderStyle.color) {
+      extraProps.placeholderTextColor = placeHolderStyle.color;
+    }
+
+    if (propTemplate === null || propTemplate === void 0 ? void 0 : propTemplate[props.type]) {
+      (_e = Object.keys(propTemplate === null || propTemplate === void 0 ? void 0 : propTemplate[props.type])) === null || _e === void 0 ? void 0 : _e.map(function (key) {
+        extraProps[key] = propTemplate === null || propTemplate === void 0 ? void 0 : propTemplate[props.type][key];
+      });
+    }
+  }
+
   return (0, _tslib.__assign)({
@@ -70,0 +108,0 @@ style: [classStyle, style],

package.json

 {
   "name": "actbase",
-  "version": "1.0.86",
+  "version": "1.0.90",
   "description": "React-Native Design Components",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

No alert changes

Improved metrics

Total package byte prevSize

353514

increased by14.09%

Number of package files

269

increased by4.67%

Lines of code

6832

increased by11.34%

No dependency changes