actbase - npm Package Compare versions

Comparing version 1.0.90 to 1.0.91

lib/elements/Button.native.js

@@ -51,32 +51,34 @@ "use strict";
 
-    var apply = function apply() {
-      return (0, _tslib.__awaiter)(void 0, void 0, void 0, function () {
-        var pos, position;
+    if (formContext && !(props === null || props === void 0 ? void 0 : props.onClick) && !(props === null || props === void 0 ? void 0 : props.onPress)) {
+      var apply = function apply() {
+        return (0, _tslib.__awaiter)(void 0, void 0, void 0, function () {
+          var pos, position;
 
-        var _a;
+          var _a;
 
-        return (0, _tslib.__generator)(this, function (_b) {
-          switch (_b.label) {
-            case 0:
-              return [4
-              /*yield*/
-              , (0, _utils.measure)(nodeRef.current)];
+          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*/
-              ];
-          }
+              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);
+      apply()["catch"](console.warn);
+    }
   }, [nodeRef.current]);
@@ -154,4 +156,5 @@
 
+  var isSubmit = props.type === 'submit' && !props.onClick && !props.onPress;
   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 (disabled || isSubmit && (formProps === null || formProps === void 0 ? void 0 : formProps.disabled) || isSubmit && (formProps === null || formProps === void 0 ? void 0 : formProps.readOnly)) prefixes.push('disabled');
   if (focused) prefixes.push('focus');
@@ -175,3 +178,3 @@
     activeOpacity: _Actbase.default.Touchable.activeOpacity
-  }, extraProps, formProps, {
+  }, formProps, extraProps, {
     disabled: disabled,
@@ -185,3 +188,3 @@ style: style
       key: "" + index
-    }, "v");
+    }, v);
   }));
@@ -191,3 +194,6 @@ });
 AEButton.displayName = 'Button';
+AEButton.defaultProps = {
+  type: 'submit'
+};
 var _default = AEButton;
 exports.default = _default;

lib/forms/Form.js

@@ -133,3 +133,3 @@ "use strict";
     return (0, _tslib.__awaiter)(void 0, void 0, void 0, function () {
-      var key, opt, params, key, v, opt, result;
+      var focused_1, _loop_1, key, params, key, v, opt, result;
 
@@ -142,5 +142,18 @@ var _a, _b, _c, _d, _e;
             if (!valid) {
+              focused_1 = false;
+
+              _loop_1 = function _loop_1(key) {
+                var opt = (_a = items === null || items === void 0 ? void 0 : items.current[key]) === null || _a === void 0 ? void 0 : _a.options;
+                (_b = opt === null || opt === void 0 ? void 0 : opt.validate) === null || _b === void 0 ? void 0 : _b.call(opt, values === null || values === void 0 ? void 0 : values.current[key], false)["catch"](function () {
+                  var _a;
+
+                  if (!focused_1 && opt.focus) {
+                    focused_1 = true;
+                    (_a = opt.focus) === null || _a === void 0 ? void 0 : _a.call(opt);
+                  }
+                });
+              };
+
               for (key in errors) {
-                opt = (_a = items === null || items === void 0 ? void 0 : items.current[key]) === null || _a === void 0 ? void 0 : _a.options;
-                (_b = opt === null || opt === void 0 ? void 0 : opt.validate) === null || _b === void 0 ? void 0 : _b.call(opt, values === null || values === void 0 ? void 0 : values.current[key], false);
+                _loop_1(key);
               }
@@ -147,0 +160,0 @@

lib/forms/textinput/TextInput.js

@@ -16,2 +16,4 @@ "use strict";
 
+var _mergeRefs = require("../../common/mergeRefs");
+
 var _useFields = _interopRequireDefault(require("../useFields"));
@@ -25,5 +27,5 @@
 
-// @ts-ignore // style,
+// import { pick } from 'lodash';
+// import { TEXT_STYLE_NAMES } from '../../common/utils';
 var AFTextInput = React.forwardRef(function (props, forwardedRef) {
-  // @ts-ignore // style,
   var _a = (0, _useFields.default)(props),
@@ -38,5 +40,4 @@ nodeRef = _a.nodeRef,
       focused = _b[0],
-      setFocused = _b[1]; // @ts-ignore // style,
+      setFocused = _b[1];
 
-
   var handleFocus = (0, React.useCallback)(function (e) {
@@ -47,4 +48,3 @@ 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]); // @ts-ignore // style,
-
+  }, [props === null || props === void 0 ? void 0 : props.onFocus]);
   var handleBlur = (0, React.useCallback)(function (e) {
@@ -58,3 +58,3 @@ var _a;
   if (focused) prefixes.push('focus');
-  if (error) prefixes.push('invalid'); // @ts-ignore // style,
+  if (error) prefixes.push('invalid');
 
@@ -64,5 +64,5 @@ var _c = (0, _useParseProps.useParseProps)(props._elem || 'textinput', props, prefixes),
       style = _c.style,
-      extraProps = (0, _tslib.__rest)(_c, ["className", "style"]); // @ts-ignore // style,
+      rules = _c.rules,
+      extraProps = (0, _tslib.__rest)(_c, ["className", "style", "rules"]);
 
-
   var beforeElement = undefined;
@@ -74,5 +74,4 @@
     beforeElement = props.after;
-  } // @ts-ignore // style,
+  }
 
-
   var afterElement = undefined;
@@ -86,12 +85,50 @@
 
-  return (// @ts-ignore // style,
-    React.createElement("div", {
-      style: {
-        flexDirection: 'row',
-        alignItems: 'center'
-      }
-    })
-  );
+  return React.createElement("div", {
+    style: {
+      position: 'relative'
+    }
+  }, React.createElement("div", {
+    style: {
+      position: 'absolute',
+      left: 10,
+      top: 0,
+      bottom: 0,
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center'
+    }
+  }, beforeElement), React.createElement("input", (0, _tslib.__assign)({
+    type: 'text',
+    className: className,
+    ref: (0, _mergeRefs.mergeRefs)(forwardedRef, nodeRef),
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    value: value,
+    onChange: function onChange(e) {
+      return onChangeValue(e.target.value);
+    }
+  }, formProps, extraProps)), React.createElement("div", {
+    style: {
+      position: 'absolute',
+      right: 10,
+      top: 0,
+      bottom: 0,
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center'
+    }
+  }, !!value && React.createElement("div", {
+    onClick: function onClick() {
+      return onChangeValue('');
+    }
+  }, React.createElement("img", {
+    src: require('../../assets/clear.png'),
+    style: {
+      width: 14,
+      height: 14,
+      marginLeft: 8
+    }
+  })), afterElement));
 });
 var _default = AFTextInput;
 exports.default = _default;

lib/forms/textinput/TextInput.native.js

@@ -90,7 +90,8 @@ "use strict";
     ref: (0, _mergeRefs.mergeRefs)(forwardedRef, nodeRef),
-    onFocus: handleFocus,
-    onBlur: handleBlur,
     value: value,
     onChangeText: onChangeValue
   }, formProps, extraProps, {
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    editable: !((extraProps === null || extraProps === void 0 ? void 0 : extraProps.disabled) || props.readOnly),
     style: [{
@@ -100,3 +101,3 @@ flex: 1,
     }, (0, _lodash.pick)(style, _utils.TEXT_STYLE_NAMES)]
-  })), !!value && React.createElement(_reactNative.TouchableOpacity, {
+  })), !!value && !((extraProps === null || extraProps === void 0 ? void 0 : extraProps.disabled) || props.readOnly) && React.createElement(_reactNative.TouchableOpacity, {
     activeOpacity: 0.8,
@@ -103,0 +104,0 @@ onPress: function onPress() {

lib/scrollable/scrollview/ScrollView.js

@@ -51,4 +51,4 @@ "use strict";
     autoHeightMax: 500,
-    autohide: !indicatorShow,
-    autoHideTimeout: 1000,
+    autoHide: !indicatorShow,
+    autoHideTimeout: 300,
     autoHideDuration: 200,
@@ -55,0 +55,0 @@ autoHeight: !!props.horizontal,

lib/scrollable/scrollview/ScrollView.native.d.ts

 import * as React from 'react';
-import { ScrollView } from 'react-native';
 import { ScrollableProps } from '../../styles/Props';
-declare const ASScrollView: React.ForwardRefExoticComponent<ScrollableProps & React.RefAttributes<ScrollView>>;
+declare const ASScrollView: React.ForwardRefExoticComponent<ScrollableProps & React.RefAttributes<any>>;
 export default ASScrollView;

lib/scrollable/scrollview/ScrollView.native.js

@@ -18,2 +18,4 @@ "use strict";
 
+var _utils = require("../../common/utils");
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
@@ -23,7 +25,208 @@
 
+var height = _reactNative.Dimensions.get('screen').height; // @ts-ignore
+
+
 var ASScrollView = React.forwardRef(function (props, forwardedRef) {
+  // @ts-ignore
   var extraProps = (0, _useParseProps.useParseProps)('scrollview', props);
-  return React.createElement(_reactNative.ScrollView, (0, _tslib.__assign)({
-    ref: forwardedRef
-  }, extraProps));
+  var animated = null;
+  var refs = React.useRef({
+    scroll: null,
+    container: null
+  }).current;
+
+  var _a = React.useState(null),
+      focusItem = _a[0],
+      setFocusItem = _a[1];
+
+  var _b = React.useState(0),
+      footDimen = _b[0],
+      setFootDimen = _b[1];
+
+  var keyboardHeight = React.useRef(new _reactNative.Animated.Value(0)).current;
+
+  var handleKDS = function handleKDS(e) {
+    return (0, _tslib.__awaiter)(void 0, void 0, void 0, function () {
+      var posScroll, bottom, toValue;
+      return (0, _tslib.__generator)(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            if (!(refs === null || refs === void 0 ? void 0 : refs.scroll)) return [3
+            /*break*/
+            , 2];
+            return [4
+            /*yield*/
+            , (0, _utils.measure)(refs === null || refs === void 0 ? void 0 : refs.scroll)];
+
+          case 1:
+            posScroll = _a.sent();
+            bottom = height - (posScroll.pageY + posScroll.height);
+            toValue = e.endCoordinates.height - bottom;
+            setFootDimen(toValue);
+
+            if (animated) {
+              animated.stop();
+              animated = null;
+            }
+
+            keyboardHeight.setValue(toValue > 0 ? toValue : 0);
+            _a.label = 2;
+
+          case 2:
+            return [2
+            /*return*/
+            ];
+        }
+      });
+    });
+  };
+
+  var handleKWH = function handleKWH(e) {
+    if (animated) {
+      animated.stop();
+      animated = null;
+    }
+
+    animated = _reactNative.Animated.timing(keyboardHeight, {
+      duration: e.duration,
+      toValue: 0
+    });
+    animated.start();
+  };
+
+  var handleKDH = function handleKDH() {
+    if (animated) {
+      animated.stop();
+      animated = null;
+    }
+
+    keyboardHeight.setValue(0);
+  };
+
+  React.useEffect(function () {
+    if (!focusItem || !footDimen) {
+      return;
+    }
+
+    (0, _utils.measure)(refs === null || refs === void 0 ? void 0 : refs.scroll).then(function (posScroll) {
+      return (0, _tslib.__awaiter)(void 0, void 0, void 0, function () {
+        var offsetY, posContainer, posFocus, offset, y, nowY, moveY;
+
+        var _a, _b;
+
+        return (0, _tslib.__generator)(this, function (_c) {
+          switch (_c.label) {
+            case 0:
+              if (!(focusItem && (refs === null || refs === void 0 ? void 0 : refs.container))) return [3
+              /*break*/
+              , 3];
+              offsetY = ((props === null || props === void 0 ? void 0 : props.offsetY) || 0) + 50;
+              return [4
+              /*yield*/
+              , (0, _utils.measure)(refs === null || refs === void 0 ? void 0 : refs.container)];
+
+            case 1:
+              posContainer = _c.sent();
+              return [4
+              /*yield*/
+              , (0, _utils.measure)(focusItem)];
+
+            case 2:
+              posFocus = _c.sent();
+              offset = posScroll.pageY - posContainer.pageY;
+              y = posFocus.pageY - posScroll.pageY;
+
+              if (y < 0) {
+                // @ts-ignore
+                (_a = refs === null || refs === void 0 ? void 0 : refs.scroll) === null || _a === void 0 ? void 0 : _a.scrollTo({
+                  y: offset + y - 30,
+                  animated: true
+                });
+              } else {
+                nowY = posFocus.pageY - posScroll.pageY + offsetY;
+
+                if (nowY > posScroll.height - footDimen) {
+                  moveY = offset + (nowY - (posScroll.height - footDimen)); // @ts-ignore
+
+                  (_b = refs === null || refs === void 0 ? void 0 : refs.scroll) === null || _b === void 0 ? void 0 : _b.scrollTo({
+                    y: moveY,
+                    animated: true
+                  });
+                }
+              }
+
+              _c.label = 3;
+
+            case 3:
+              return [2
+              /*return*/
+              ];
+          }
+        });
+      });
+    });
+  }, [focusItem, footDimen]);
+  React.useEffect(function () {
+    var listeners = [];
+
+    if (_reactNative.Platform.OS === 'ios') {
+      listeners.push(_reactNative.Keyboard.addListener('keyboardWillShow', handleKDS));
+      listeners.push(_reactNative.Keyboard.addListener('keyboardWillHide', handleKWH));
+    }
+
+    listeners.push(_reactNative.Keyboard.addListener('keyboardDidShow', handleKDS));
+    listeners.push(_reactNative.Keyboard.addListener('keyboardDidHide', handleKDH));
+    return function () {
+      listeners.forEach(function (listener) {
+        return (listener === null || listener === void 0 ? void 0 : listener.remove) && (listener === null || listener === void 0 ? void 0 : listener.remove());
+      });
+    };
+  }, []); // @ts-ignore
+
+  var keyboardShouldPersistTaps = props.keyboardShouldPersistTaps,
+      _onFocus = props.onFocus,
+      _onBlur = props.onBlur,
+      children = props.children,
+      stickyHeaderIndices = props.stickyHeaderIndices,
+      oProps = (0, _tslib.__rest)(props, ["keyboardShouldPersistTaps", "onFocus", "onBlur", "children", "stickyHeaderIndices"]); // @ts-ignore
+
+  var Element = (props === null || props === void 0 ? void 0 : props.onScroll) ? _reactNative.Animated.ScrollView : _reactNative.ScrollView;
+  return React.createElement(Element, (0, _tslib.__assign)({
+    stickyHeaderIndices: stickyHeaderIndices === null || stickyHeaderIndices === void 0 ? void 0 : stickyHeaderIndices.map(function (v) {
+      return v + 1;
+    }),
+    ref: function ref(e) {
+      // @ts-ignore
+      if ((props === null || props === void 0 ? void 0 : props.onRef) && Object.keys(props === null || props === void 0 ? void 0 : props.onRef).includes('current')) {
+        // @ts-ignore
+        props.onRef.current = e;
+      }
+
+      if (e) {
+        // @ts-ignore
+        refs.scroll = (props === null || props === void 0 ? void 0 : props.onScroll) ? e.getNode() : e;
+      }
+    }
+  }, oProps, extraProps, {
+    // @ts-ignore
+    onFocus: function onFocus(e) {
+      setFocusItem(e.target);
+      _onFocus && _onFocus(e);
+    },
+    onBlur: function onBlur(e) {
+      setFocusItem(null);
+      _onBlur && _onBlur(e);
+    },
+    keyboardShouldPersistTaps: keyboardShouldPersistTaps || 'handled'
+  }), React.createElement(_reactNative.View, {
+    ref: function ref(e) {
+      // @ts-ignore
+      refs.container = e;
+    }
+  }), children, React.createElement(_reactNative.Animated.View, {
+    style: {
+      flexGrow: 1,
+      marginBottom: keyboardHeight
+    }
+  }));
 });
@@ -30,0 +233,0 @@ ASScrollView.defaultProps = {

lib/styles/Props.d.ts

@@ -23,2 +23,3 @@ import { ReactNode } from 'react';
     multiline?: boolean;
+    readOnly?: boolean;
 }
@@ -33,2 +34,3 @@ export interface ImageProps extends ViewProps {
 export interface TouchableProps extends ViewProps {
+    type?: 'button' | 'submit' | undefined;
     onClick?: () => void;
@@ -35,0 +37,0 @@ onPress?: () => void;

lib/styles/useParseProps.d.ts

@@ -1,2 +0,2 @@
-export declare const useParseProps: (elem: string, { className, ...props }: any, prefixes?: String[]) => any;
+export declare const useParseProps: (elem: string, { className, style, ...props }: any, prefixes?: String[]) => any;
 export default useParseProps;

lib/styles/useParseProps.js

@@ -16,2 +16,4 @@ "use strict";
 
+var _lodash = require("lodash");
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
@@ -29,3 +31,4 @@
   var className = _a.className,
-      props = (0, _tslib.__rest)(_a, ["className"]);
+      style = _a.style,
+      props = (0, _tslib.__rest)(_a, ["className", "style"]);
   var context = React.useContext(_Context.StyleContext);
@@ -41,4 +44,19 @@ var classStyle = (_b = context === null || context === void 0 ? void 0 : context.getStyle) === null || _b === void 0 ? void 0 : _b.call(context, elem, className, prefixes);
 
+  var parsedStyle = undefined;
+
+  if ((0, _lodash.isArray)(style)) {
+    parsedStyle = (0, _lodash.flattenDeep)(style);
+
+    if ((0, _lodash.isArray)(parsedStyle)) {
+      // @ts-ignore
+      parsedStyle = _lodash.defaultsDeep.apply(void 0, parsedStyle);
+    }
+  } else if (style) {
+    parsedStyle = style;
+  }
+
+  console.log((0, _lodash.isArray)(style), parsedStyle);
   return (0, _tslib.__assign)((0, _tslib.__assign)({}, props), {
     onClick: onClick,
+    style: parsedStyle,
     className: classStyle
@@ -45,0 +63,0 @@ });

lib/tools/useToast.js

@@ -23,3 +23,3 @@ "use strict";
       if (duration === void 0) {
-        duration = 5000;
+        duration = 500;
       }
@@ -26,0 +26,0 @@

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

369615

increased by4.55%

Lines of code

7101

increased by3.94%

No dependency changes