actbase - npm Package Compare versions

Comparing version 0.0.47 to 0.0.48

dist/apps/index.js

@@ -10,2 +10,4 @@ "use strict";
 
+var _tslib = require("tslib");
+
 var React = _interopRequireWildcard(require("react"));
@@ -17,2 +19,4 @@
 
+var _reactNative = require("react-native");
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
@@ -23,9 +27,51 @@
 var ABApp = function ABApp(RootComponent, overrideStyle) {
-  (0, _styles.setOverride)(overrideStyle);
-  var value = {};
+  (0, _styles.setOverrideStyle)(overrideStyle);
 
   var HoC = function HoC(props) {
+    var _a = React.useState([]),
+        components = _a[0],
+        setComponents = _a[1];
+
+    var addComponent = function addComponent(data) {
+      setComponents(function (v) {
+        return (0, _tslib.__spreadArrays)(v, [data]);
+      });
+    };
+
+    var popComponent = function popComponent() {
+      setComponents(function (v) {
+        var data = (0, _tslib.__spreadArrays)(v);
+        data.splice(data.length - 1, 1);
+        return data;
+      });
+    };
+
+    var value = {
+      addComponent: addComponent,
+      popComponent: popComponent
+    };
     return React.createElement(_utils.ABContext.Provider, {
       value: value
-    }, React.createElement(React.Fragment, null, React.createElement(RootComponent, props)));
+    }, React.createElement(React.Fragment, null, React.createElement(RootComponent, props), !!components.length && React.createElement(_reactNative.View, {
+      style: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0
+      }
+    }, React.createElement(_reactNative.TouchableOpacity, {
+      style: {
+        flex: 1
+      },
+      onPress: popComponent
+    }), components.map(function (component) {
+      return React.createElement(_reactNative.View, {
+        style: {
+          position: 'absolute',
+          top: component.y,
+          left: component.x
+        }
+      }, component.child);
+    }))));
   };
@@ -32,0 +78,0 @@

dist/apps/styles.data.d.ts

@@ -9,2 +9,3 @@ export declare const STYLE_LAYOUT_PREFIX: string;
 export declare const STYLE_SELECT_JSON: any;
+export declare const STYLE_SELECT_ASSETS: any;
 export declare const STYLE_NAMES: string[];
@@ -14,3 +15,6 @@ export declare const styles: {
 };
+export declare const assets: {
+    [x: string]: any;
+};
 export declare const enableStyles: string[];
-export declare const setOverride: (overrideStyle: any) => void;
+export declare const setOverrideStyle: (overrideStyle: any) => void;

dist/apps/styles.data.js

@@ -6,7 +6,7 @@ "use strict";
 });
-exports.setOverride = exports.enableStyles = exports.styles = exports.STYLE_NAMES = exports.STYLE_SELECT_JSON = exports.STYLE_SELECT_PREFIX = exports.STYLE_INPUT_TEXT_JSON = exports.STYLE_INPUT_TEXT_PREFIX = exports.STYLE_BUTTON_JSON = exports.STYLE_BUTTON_PREFIX = exports.STYLE_LAYOUT_JSON = exports.STYLE_LAYOUT_PREFIX = void 0;
+exports.setOverrideStyle = exports.enableStyles = exports.assets = exports.styles = exports.STYLE_NAMES = exports.STYLE_SELECT_ASSETS = exports.STYLE_SELECT_JSON = exports.STYLE_SELECT_PREFIX = exports.STYLE_INPUT_TEXT_JSON = exports.STYLE_INPUT_TEXT_PREFIX = exports.STYLE_BUTTON_JSON = exports.STYLE_BUTTON_PREFIX = exports.STYLE_LAYOUT_JSON = exports.STYLE_LAYOUT_PREFIX = void 0;
 
 var _lodash = require("lodash");
 
-var _a;
+var _a, _b;
 
@@ -31,8 +31,11 @@ var STYLE_LAYOUT_PREFIX = 'ab-layout';
 exports.STYLE_INPUT_TEXT_JSON = STYLE_INPUT_TEXT_JSON;
+
+var selectObject = require('../select/styles');
+
 var STYLE_SELECT_PREFIX = 'ab-select';
 exports.STYLE_SELECT_PREFIX = STYLE_SELECT_PREFIX;
-
-var STYLE_SELECT_JSON = require('../select/styles.json');
-
+var STYLE_SELECT_JSON = selectObject.styles;
 exports.STYLE_SELECT_JSON = STYLE_SELECT_JSON;
+var STYLE_SELECT_ASSETS = selectObject.assets;
+exports.STYLE_SELECT_ASSETS = STYLE_SELECT_ASSETS;
 var STYLE_NAMES = [STYLE_LAYOUT_PREFIX, STYLE_BUTTON_PREFIX, STYLE_INPUT_TEXT_PREFIX, STYLE_SELECT_PREFIX];
@@ -42,6 +45,8 @@ exports.STYLE_NAMES = STYLE_NAMES;
 exports.styles = styles;
+var assets = (_b = {}, _b[STYLE_SELECT_PREFIX] = STYLE_SELECT_ASSETS, _b);
+exports.assets = assets;
 var enableStyles = [];
 exports.enableStyles = enableStyles;
 
-var setOverride = function setOverride(overrideStyle) {
+var setOverrideStyle = function setOverrideStyle(overrideStyle) {
   (0, _lodash.forIn)(overrideStyle, function (value, key) {
@@ -58,2 +63,2 @@ var styleName = STYLE_NAMES.find(function (v) {
 
-exports.setOverride = setOverride;
+exports.setOverrideStyle = setOverrideStyle;

dist/apps/utils.d.ts

 import * as React from 'react';
+export interface AbsoluteComponent {
+    child: any;
+    x: number;
+    y: number;
+}
 export interface MeasureResult {
@@ -17,2 +22,4 @@ originX: number;
 export interface ContextArgs {
+    addComponent?: (child: AbsoluteComponent) => void;
+    popComponent?: () => void;
     styles?: any;
@@ -19,0 +26,0 @@ }

dist/apps/utils.native.d.ts

 import * as React from 'react';
 import { ScaledSize } from 'react-native';
+export interface AbsoluteComponent {
+    child: any;
+    x: number;
+    y: number;
+}
 export interface MeasureResult {
@@ -4,0 +9,0 @@ originX: number;

dist/forms/index.js

@@ -169,6 +169,2 @@ "use strict";
                 if (error && (!error.level || error.level === 'error')) {
-                  opt.setProps({
-                    hint: error.message,
-                    error: error.level
-                  });
                   formErrors.push(error);
@@ -175,0 +171,0 @@ }

dist/index.d.ts

@@ -7,2 +7,3 @@ /// <reference types="react" />
 export { default as Select } from './select';
+export { default as Option } from './select/Option';
 export { default as Row } from './layouts/Row';
@@ -9,0 +10,0 @@ export { default as Col } from './layouts/Col';

dist/index.js

@@ -36,2 +36,8 @@ "use strict";
 });
+Object.defineProperty(exports, "Option", {
+  enumerable: true,
+  get: function get() {
+    return _Option["default"];
+  }
+});
 Object.defineProperty(exports, "Row", {
@@ -105,2 +111,4 @@ enumerable: true,
 
+var _Option = _interopRequireDefault(require("./select/Option"));
+
 var _Row = _interopRequireDefault(require("./layouts/Row"));
@@ -107,0 +115,0 @@

dist/inputs/index.props.d.ts

@@ -14,3 +14,3 @@ export interface InputProps {
     validateMode?: 'focus' | 'blur' | 'while-editing' | 'always' | 'submit' | 'never';
-    onValidate?: any;
+    validators?: Validator | Validator[];
     readonly?: boolean;
@@ -22,1 +22,8 @@ disabled?: boolean;
 }
+export interface Validator {
+    (value: any, values?: any): ValidateResult;
+}
+export interface ValidateResult {
+    level?: string;
+    message?: string;
+}

dist/inputs/TextField.native.js

@@ -48,3 +48,3 @@ "use strict";
 var TextField = _react["default"].forwardRef(function (props, ref) {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f;
 
@@ -54,15 +54,7 @@ var formContext = (0, _react.useContext)(_forms.FormContext);
   var styles = (0, _styles["default"])(STYLE_GROUP_NAME);
-  var nameRef = (0, _react.useRef)(0);
-  (0, _react.useEffect)(function () {
-    return function () {
-      var _a, _b;
 
-      return (_b = (_a = formContext).unsubscribe) === null || _b === void 0 ? void 0 : _b.call(_a, nameRef);
-    };
-  }, []);
+  var _g = (0, _react.useState)({}),
+      extraProps = _g[0],
+      setExtraProps = _g[1];
 
-  var _f = (0, _react.useState)({}),
-      extraProps = _f[0],
-      setExtraProps = _f[1];
-
   var setProps = (0, _react.useCallback)(function (props) {
@@ -82,13 +74,15 @@ if (!(0, _lodash.isEqual)(props, extraProps)) {
       rightDeco = props.rightDeco,
-      _onBlur = props.onBlur,
-      _onFocus = props.onFocus,
+      onBlur = props.onBlur,
+      onFocus = props.onFocus,
       disabled = props.disabled,
       multiline = props.multiline,
       clearButtonMode = props.clearButtonMode,
-      onValidate = props.onValidate,
+      validateMode = props.validateMode,
+      validators = props.validators,
       hintStyle = props.hintStyle,
-      oProps = (0, _tslib.__rest)(props, ["type", "tpl", "style", "name", "onChangeText", "leftDeco", "rightDeco", "onBlur", "onFocus", "disabled", "multiline", "clearButtonMode", "onValidate", "hintStyle"]);
+      oProps = (0, _tslib.__rest)(props, ["type", "tpl", "style", "name", "onChangeText", "leftDeco", "rightDeco", "onBlur", "onFocus", "disabled", "multiline", "clearButtonMode", "validateMode", "validators", "hintStyle"]);
   var eProps = {
     hint: extraProps.hint || props.hint,
-    error: extraProps.error
+    error: extraProps.error,
+    submited: extraProps.submited || false
   };
@@ -104,5 +98,5 @@ var suffix = '';
 
-  var _g = (0, _react.useState)(false),
-      focused = _g[0],
-      setFocused = _g[1];
+  var _h = (0, _react.useState)(false),
+      focused = _h[0],
+      setFocused = _h[1];
 
@@ -113,3 +107,28 @@ if (focused) classes.push("" + STYLE_GROUP_NAME + suffix + "-focused");
 
-  if (eProps.error) {
+  var _j = (0, _react.useState)(null),
+      error = _j[0],
+      setError = _j[1];
+
+  var onValidate = function onValidate(value) {
+    if (!validators) return null;
+
+    var _validators = (0, _lodash.isArray)(validators) ? validators : [validators];
+
+    var currentError = null;
+
+    for (var _i = 0, _validators_1 = _validators; _i < _validators_1.length; _i++) {
+      var validator = _validators_1[_i];
+      var err = validator(value);
+
+      if (err) {
+        currentError = err;
+        break;
+      }
+    }
+
+    setError(currentError);
+    return currentError;
+  };
+
+  if (error) {
     classes.push("" + STYLE_GROUP_NAME + suffix + "-error");
@@ -119,5 +138,5 @@ hitClasses.push("" + STYLE_GROUP_NAME + suffix + "-hint-error");
 
-  var _h = (0, _react.useState)(((_a = props) === null || _a === void 0 ? void 0 : _a.value) || ''),
-      text = _h[0],
-      setText = _h[1];
+  var _k = (0, _react.useState)(((_a = props) === null || _a === void 0 ? void 0 : _a.value) || ''),
+      text = _k[0],
+      setText = _k[1];
 
@@ -129,7 +148,33 @@ var handleChangeText = (0, _react.useCallback)(function (text) {
     (_a = setText) === null || _a === void 0 ? void 0 : _a(text);
-  }, []);
+    var validateEnabled = validateMode === 'always' || validateMode === 'while-editing' || validateMode === 'focus' || validateMode == 'submit' && extraProps.submited;
+    if (validateEnabled) onValidate(text);
+  }, [extraProps, validateMode]);
+  var handleFocus = (0, _react.useCallback)(function (e) {
+    setFocused(true);
+    onFocus && onFocus(e);
+    var validateEnabled = validateMode === 'focus';
+    if (validateEnabled) onValidate(text);
+  }, [text, validateMode]);
+  var handleBlur = (0, _react.useCallback)(function (e) {
+    setFocused(false);
+    onBlur && onBlur(e);
+    var validateEnabled = validateMode === 'blur';
+    if (validateEnabled) onValidate(text);
+  }, [text, validateMode]);
   var getValue = (0, _react.useCallback)(function () {
     return text;
   }, [text]);
+  var nameRef = (0, _react.useRef)(0);
+  (0, _react.useEffect)(function () {
+    if (props.validateMode === 'always') {
+      onValidate(text);
+    }
 
+    return function () {
+      var _a, _b;
+
+      return (_b = (_a = formContext).unsubscribe) === null || _b === void 0 ? void 0 : _b.call(_a, nameRef);
+    };
+  }, []);
+
   var handleRef = function handleRef(el) {
@@ -143,5 +188,3 @@ var _a, _b;
       getValue: getValue,
-      onValidate: onValidate || function () {
-        return true;
-      },
+      onValidate: onValidate,
       focus: function focus() {
@@ -203,10 +246,4 @@ var _a;
     }, (0, _lodash.pick)(elementStyle, _utils.TEXT_STYLE_NAMES)],
-    onFocus: function onFocus(e) {
-      setFocused(true);
-      _onFocus && _onFocus(e);
-    },
-    onBlur: function onBlur(e) {
-      setFocused(false);
-      _onBlur && _onBlur(e);
-    },
+    onFocus: handleFocus,
+    onBlur: handleBlur,
     editable: !disabled || !props.readonly || !extraProps.submitting,
@@ -231,7 +268,7 @@ multiline: multiline,
     }]
-  })), rightDeco), !!((_d = eProps) === null || _d === void 0 ? void 0 : _d.hint) && _react["default"].createElement(_reactNative.View, {
+  })), rightDeco), (!!error || !!((_d = eProps) === null || _d === void 0 ? void 0 : _d.hint)) && _react["default"].createElement(_reactNative.View, {
     style: (0, _lodash.omit)(hintElStyle, _utils.TEXT_STYLE_NAMES)
   }, _react["default"].createElement(_reactNative.Text, {
     style: (0, _lodash.pick)(hintElStyle, _utils.TEXT_STYLE_NAMES)
-  }, (_e = eProps) === null || _e === void 0 ? void 0 : _e.hint)));
+  }, ((_e = error) === null || _e === void 0 ? void 0 : _e.message) || ((_f = eProps) === null || _f === void 0 ? void 0 : _f.hint))));
 });
@@ -238,0 +275,0 @@

dist/select/index.d.ts

@@ -0,3 +1,23 @@
+import React from 'react';
+import { Validator } from '../inputs/index.props';
+export interface SelectProps {
+    name?: string;
+    tpl?: string;
+    value?: any;
+    style?: any;
+    hintStyle?: any;
+    validateMode?: 'focus' | 'blur' | 'while-editing' | 'always' | 'submit' | 'never';
+    validators?: Validator | Validator[];
+    readonly?: boolean;
+    disabled?: boolean;
+    hint?: string;
+    options?: OptionProps[];
+    children?: React.ComponentType<OptionProps> | React.ComponentType<OptionProps>[];
+}
+export interface OptionProps {
+    value?: any;
+    children?: any;
+    text?: string;
+}
+declare const Select: React.MemoExoticComponent<(props: SelectProps) => JSX.Element>;
 export default Select;
-declare const Select: React.NamedExoticComponent<object>;
-import React from "react";

dist/select/index.js

 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
@@ -8,10 +10,66 @@ value: true
 
-var _react = _interopRequireDefault(require("react"));
+var _tslib = require("tslib");
 
+var _react = _interopRequireWildcard(require("react"));
+
 var _View = _interopRequireDefault(require("../web/View"));
 
+var _lodash = require("lodash");
+
+var _utils = require("../apps/utils");
+
+var _reactNative = require("react-native");
+
 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; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 var Select = _react["default"].memo(function (props) {
-  return _react["default"].createElement(_View["default"], props);
+  var abContext = (0, _react.useContext)(_utils.ABContext);
+  var children = (0, _lodash.isArray)(props.children) ? props.children : [props.children]; // @ts-ignore
+
+  var options = props.options || children.map(function (_a) {
+    var props = _a.props;
+
+    var _b, _c;
+
+    return {
+      value: (_b = props) === null || _b === void 0 ? void 0 : _b.value,
+      text: (_c = props) === null || _c === void 0 ? void 0 : _c.children
+    };
+  });
+  console.log(options);
+
+  var handlePress = function handlePress() {
+    return (0, _tslib.__awaiter)(void 0, void 0, void 0, function () {
+      var _a;
+
+      return (0, _tslib.__generator)(this, function (_b) {
+        alert('a'); // @ts-ignore
+
+        (_a = abContext) === null || _a === void 0 ? void 0 : _a.addComponent({
+          child: _react["default"].createElement(_View["default"], {
+            style: {
+              width: 100,
+              height: 100,
+              backgroundColor: '#F00'
+            }
+          }),
+          x: 10,
+          y: 10
+        });
+        return [2
+        /*return*/
+        ];
+      });
+    });
+  };
+
+  return _react["default"].createElement(_reactNative.TouchableOpacity, _extends({
+    onPress: handlePress
+  }, props));
 });
@@ -18,0 +76,0 @@

dist/select/Option.d.ts

@@ -0,3 +1,6 @@
+import React from 'react';
+export interface OptionProps {
+    value?: any;
+}
+declare const Option: React.FC;
 export default Option;
-declare const Option: React.NamedExoticComponent<object>;
-import React from "react";

dist/select/Option.js

@@ -8,13 +8,7 @@ "use strict";
 
-var _react = _interopRequireDefault(require("react"));
+var Option = function Option() {
+  return null;
+};
 
-var _reactNative = require("react-native");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-var Option = _react["default"].memo(function (props) {
-  return _react["default"].createElement(_reactNative.View, props);
-});
-
 var _default = Option;
 exports["default"] = _default;

package.json

 {
   "name": "actbase",
-  "version": "0.0.47",
+  "version": "0.0.48",
   "description": "React & React-Native Design Components",
@@ -51,2 +51,3 @@ "main": "dist/index.js",
     "babel-eslint": "^10.0.3",
+    "babel-plugin-inline-import-data-uri": "^1.0.1",
     "copyfiles": "^2.2.0",
@@ -53,0 +54,0 @@ "cross-env": "^6.0.3",

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

181097

increased by24.51%

Number of package files

139

increased by6.92%

Lines of code

2607

increased by19.75%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

27

increased by3.85%

No dependency changes