actbase - npm Package Compare versions

Comparing version 0.0.39 to 0.0.40

dist/App/utils.d.ts

@@ -1,2 +0,2 @@
-import { Context } from 'react';
+import * as React from 'react';
 export interface MeasureResult {
@@ -10,14 +10,23 @@ originX: number;
 }
+export interface ScaledSize {
+    width: number;
+    height: number;
+    scale: number;
+    fontScale: number;
+}
 export interface ContextArgs {
+    styles?: any;
 }
-export declare const ABContext: Context<ContextArgs>;
-export declare const measure: (target: number) => Promise<MeasureResult | Error | null>;
+export declare const ABContext: React.Context<ContextArgs>;
+export declare const measure: (target: number) => Promise<MeasureResult>;
+export declare const getWindowSize: () => ScaledSize;
 export declare const TEXT_STYLE_NAMES: string[];
 export declare const COVER_STYLE_NAMES: string[];
 declare const _default: {
-    ABContext: Context<ContextArgs>;
+    ABContext: React.Context<ContextArgs>;
+    measure: (target: number) => Promise<MeasureResult>;
+    getWindowSize: () => ScaledSize;
     TEXT_STYLE_NAMES: string[];
     COVER_STYLE_NAMES: string[];
-    measure: (target: number) => Promise<MeasureResult | Error | null>;
 };
 export default _default;

dist/App/utils.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", {
   value: true
 });
-exports["default"] = exports.COVER_STYLE_NAMES = exports.TEXT_STYLE_NAMES = exports.measure = exports.ABContext = void 0;
+exports["default"] = exports.COVER_STYLE_NAMES = exports.TEXT_STYLE_NAMES = exports.getWindowSize = exports.measure = exports.ABContext = void 0;
 
-var _react = require("react");
+var React = _interopRequireWildcard(require("react"));
 
-var ABContext = (0, _react.createContext)({});
+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; }
+
+var ABContext = React.createContext({});
 exports.ABContext = ABContext;
@@ -16,3 +22,10 @@
     if (target) {
-      resolve(null);
+      resolve({
+        originX: 0,
+        originY: 0,
+        width: 0,
+        height: 0,
+        pageX: 0,
+        pageY: 0
+      });
     } else {
@@ -25,2 +38,13 @@ reject(null);
 exports.measure = measure;
+
+var getWindowSize = function getWindowSize() {
+  return {
+    width: 0,
+    height: 0,
+    scale: 1,
+    fontScale: 1
+  };
+};
+
+exports.getWindowSize = getWindowSize;
 var TEXT_STYLE_NAMES = ['color', 'fontFamily', 'fontSize', 'fontStyle', 'fontWeight', 'fontVariant', 'textShadowOffset', 'textShadowRadius', 'textShadowColor', 'letterSpacing', 'lineHeight', 'textAlign', 'textAlignVertical', 'includeFontPadding', 'textDecorationLine', 'textDecorationStyle', 'textDecorationColor', 'textTransform', 'writingDirection'];
@@ -32,6 +56,7 @@ exports.TEXT_STYLE_NAMES = TEXT_STYLE_NAMES;
   ABContext: ABContext,
+  measure: measure,
+  getWindowSize: getWindowSize,
   TEXT_STYLE_NAMES: TEXT_STYLE_NAMES,
-  COVER_STYLE_NAMES: COVER_STYLE_NAMES,
-  measure: measure
+  COVER_STYLE_NAMES: COVER_STYLE_NAMES
 };
 exports["default"] = _default;

dist/App/utils.native.d.ts

@@ -1,2 +0,3 @@
-import React from 'react';
+import * as React from 'react';
+import { ScaledSize } from 'react-native';
 export interface MeasureResult {
@@ -11,5 +12,6 @@ originX: number;
 export interface ContextArgs {
-    styles: object | null;
+    styles?: any;
 }
 export declare const ABContext: React.Context<ContextArgs>;
+export declare const getWindowSize: () => ScaledSize;
 export declare const measure: (target: number | React.Component<any, any, any> | React.ComponentClass<any, any> | null) => Promise<Error | MeasureResult>;
@@ -20,6 +22,7 @@ export declare const TEXT_STYLE_NAMES: string[];
     ABContext: React.Context<ContextArgs>;
+    getWindowSize: () => ScaledSize;
+    measure: (target: number | React.Component<any, any, any> | React.ComponentClass<any, any> | null) => Promise<Error | MeasureResult>;
     TEXT_STYLE_NAMES: string[];
     COVER_STYLE_NAMES: string[];
-    measure: (target: number | React.Component<any, any, any> | React.ComponentClass<any, any> | null) => Promise<Error | MeasureResult>;
 };
 export default _default;

dist/App/utils.native.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", {
   value: true
 });
-exports["default"] = exports.COVER_STYLE_NAMES = exports.TEXT_STYLE_NAMES = exports.measure = exports.ABContext = void 0;
+exports["default"] = exports.COVER_STYLE_NAMES = exports.TEXT_STYLE_NAMES = exports.measure = exports.getWindowSize = exports.ABContext = void 0;
 
-var _react = require("react");
+var React = _interopRequireWildcard(require("react"));
 
 var _reactNative = require("react-native");
 
-var ABContext = (0, _react.createContext)({
-  styles: {}
-});
+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; }
+
+var ABContext = React.createContext({});
 exports.ABContext = ABContext;
 
+var getWindowSize = function getWindowSize() {
+  return _reactNative.Dimensions.get('screen');
+};
+
+exports.getWindowSize = getWindowSize;
+
 var measure = function measure(target) {
@@ -46,6 +56,7 @@ return new Promise(function (resolve, reject) {
   ABContext: ABContext,
+  getWindowSize: getWindowSize,
+  measure: measure,
   TEXT_STYLE_NAMES: TEXT_STYLE_NAMES,
-  COVER_STYLE_NAMES: COVER_STYLE_NAMES,
-  measure: measure
+  COVER_STYLE_NAMES: COVER_STYLE_NAMES
 };
 exports["default"] = _default;

dist/Button/index.native.js

@@ -20,3 +20,3 @@ "use strict";
 
-var _index = require("../Form/index.native");
+var _Form = require("../Form");
 
@@ -50,3 +50,3 @@ var _lodash = require("lodash");
   var context = (0, _react.useContext)(_utils.ABContext);
-  var formContext = (0, _react.useContext)(_index.FormContext);
+  var formContext = (0, _react.useContext)(_Form.FormContext);
   var styles = context.styles;
@@ -53,0 +53,0 @@

dist/Form/index.js

@@ -1,1 +0,219 @@
-"use strict";
+"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", {
+  value: true
+});
+exports["default"] = exports.FormContext = void 0;
+
+var _tslib = require("tslib");
+
+var React = _interopRequireWildcard(require("react"));
+
+var _lodash = require("lodash");
+
+var _View = _interopRequireDefault(require("../web/View"));
+
+var _utils = require("../App/utils");
+
+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 FormContext = React.createContext({});
+exports.FormContext = FormContext;
+
+var Form = function Form(props) {
+  var items = React.useRef({});
+  var index = React.useRef(0);
+  var subscribe = React.useCallback(function (oRef, input, options) {
+    var name = oRef.current;
+
+    if (!name) {
+      name = "FormField_" + index.current;
+      oRef.current = name;
+      index.current = index.current + 1;
+    }
+
+    items.current[name] = {
+      input: input,
+      options: options,
+      area: 0
+    };
+  }, []);
+  var unsubscribe = React.useCallback(function (oRef) {
+    var name = oRef.current;
+    delete items.current[name];
+  }, []);
+
+  var _a = React.useState({}),
+      lastLayout = _a[0],
+      setLastLayout = _a[1];
+
+  var onLayout = props.onLayout,
+      oProps = (0, _tslib.__rest)(props, ["onLayout"]);
+  var handleLayout = React.useCallback(function (e) {
+    return (0, _tslib.__awaiter)(void 0, void 0, void 0, function () {
+      var _a, width, height, pos, _i, _b, key, el, pos_1, area, elements;
+
+      var _c, _d, _e, _f, _g, _h, _j;
+
+      return (0, _tslib.__generator)(this, function (_k) {
+        switch (_k.label) {
+          case 0:
+            onLayout && onLayout(e);
+            _a = e.nativeEvent.layout, width = _a.width, height = _a.height;
+            pos = {
+              width: width,
+              height: height
+            };
+            if ((0, _lodash.isEqual)(lastLayout, pos)) return [2
+            /*return*/
+            ];
+            setLastLayout(pos);
+            _i = 0, _b = Object.keys((_c = items) === null || _c === void 0 ? void 0 : _c.current);
+            _k.label = 1;
+
+          case 1:
+            if (!(_i < _b.length)) return [3
+            /*break*/
+            , 4];
+            key = _b[_i];
+            el = (_d = items) === null || _d === void 0 ? void 0 : _d.current[key];
+            if (!el.input) return [3
+            /*break*/
+            , 3];
+            return [4
+            /*yield*/
+            , (0, _utils.measure)(el.input)];
+
+          case 2:
+            pos_1 = _k.sent();
+            area = -parseFloat(Math.floor((_e = pos_1) === null || _e === void 0 ? void 0 : _e.pageY) + "." + Math.floor((_f = pos_1) === null || _f === void 0 ? void 0 : _f.pageX));
+            items.current[key].area = area;
+            _k.label = 3;
+
+          case 3:
+            _i++;
+            return [3
+            /*break*/
+            , 1];
+
+          case 4:
+            elements = (_h = (_g = Object.values(items.current)) === null || _g === void 0 ? void 0 : _g.filter(function (v) {
+              return !!v.options.focus;
+            })) === null || _h === void 0 ? void 0 : _h.sort(function (a, b) {
+              return a.area < b.area ? 1 : a.area > b.area ? -1 : 0;
+            });
+            (_j = elements) === null || _j === void 0 ? void 0 : _j.forEach(function (v, index) {
+              var _a, _b, _c;
+
+              var args = {};
+
+              if (elements.length - 1 <= index) {
+                args.returnKeyType = 'done';
+                args.onSubmitEditing = submit;
+              } else {
+                args.returnKeyType = 'next';
+                args.onSubmitEditing = elements[index + 1].options.focus;
+              }
+
+              (_c = (_a = v.options) === null || _a === void 0 ? void 0 : (_b = _a).setProps) === null || _c === void 0 ? void 0 : _c.call(_b, args);
+            });
+            return [2
+            /*return*/
+            ];
+        }
+      });
+    });
+  }, []);
+  var submit = React.useCallback(function () {
+    return (0, _tslib.__awaiter)(void 0, void 0, void 0, function () {
+      var elements, params, result, o;
+
+      var _a, _b, _c, _d, _e;
+
+      return (0, _tslib.__generator)(this, function (_f) {
+        switch (_f.label) {
+          case 0:
+            elements = Object.values((_a = items) === null || _a === void 0 ? void 0 : _a.current).filter(function (v) {
+              var _a, _b, _c, _d;
+
+              (_c = (_a = v.options) === null || _a === void 0 ? void 0 : (_b = _a).setProps) === null || _c === void 0 ? void 0 : _c.call(_b, {
+                submitting: true
+              });
+              return !!((_d = v.options) === null || _d === void 0 ? void 0 : _d.name);
+            });
+            params = {};
+            elements.forEach(function (v) {
+              var _a, _b;
+
+              var opt = v.options;
+
+              if ((_a = opt) === null || _a === void 0 ? void 0 : _a.name) {
+                if (params[opt.name] === undefined) {
+                  params[opt.name] = opt.getValue();
+                } else if (((_b = params[opt.name]) === null || _b === void 0 ? void 0 : _b.push) !== undefined) {
+                  params[opt.name].push(opt.getValue());
+                } else if (params[opt.name] !== null && params[opt.name] !== undefined) {
+                  var values = (0, _tslib.__spreadArrays)(params[opt.name], [opt.getValue()]);
+                  params[opt.name] = values;
+                }
+              }
+            });
+            result = params;
+
+            if (props.output === 'FormData') {
+              result = new FormData();
+              (0, _lodash.forIn)(params, function (value, name) {
+                var _a, _b;
+
+                if ((_a = value) === null || _a === void 0 ? void 0 : _a.push) {
+                  (_b = value) === null || _b === void 0 ? void 0 : _b.forEach(function (v) {
+                    return result.append(name, "" + v);
+                  });
+                } else {
+                  result.append(name, "" + value);
+                }
+              });
+            }
+
+            return [4
+            /*yield*/
+            , (_d = (_b = props) === null || _b === void 0 ? void 0 : (_c = _b).onSubmit) === null || _d === void 0 ? void 0 : _d.call(_c, result)];
+
+          case 1:
+            o = _f.sent();
+            (0, _lodash.forIn)((_e = items) === null || _e === void 0 ? void 0 : _e.current, function (v) {
+              var _a, _b, _c;
+
+              (_c = (_a = v.options) === null || _a === void 0 ? void 0 : (_b = _a).setProps) === null || _c === void 0 ? void 0 : _c.call(_b, {
+                submitting: false
+              });
+            });
+            return [2
+            /*return*/
+            , o];
+        }
+      });
+    });
+  }, []);
+  var value = {
+    subscribe: subscribe,
+    unsubscribe: unsubscribe,
+    submit: submit
+  };
+  return React.createElement(FormContext.Provider, {
+    value: value
+  }, React.createElement(_View["default"], _extends({
+    onLayout: handleLayout
+  }, oProps)));
+};
+
+var _default = Form;
+exports["default"] = _default;

dist/index.d.ts

@@ -0,1 +1,17 @@
+/// <reference types="react" />
+export { default as Button } from './Button';
+export { default as ScrollView } from './ScrollView';
+export { default as Form } from './Form';
+export { default as Input } from './Input';
+export { default as Select } from './Select';
 export { default as Row } from './Layout/Row';
+export { default as Col } from './Layout/Col';
+export { default as View } from './web/View';
+export { default as Div } from './web/Div';
+export { default as Header } from './web/Header';
+export { default as Footer } from './web/Footer';
+export { default as Section } from './web/Section';
+export { default as Aside } from './web/Aside';
+export { default as Article } from './web/Article';
+export declare const ActBase: (RootComponent: import("react").ComponentType<{}>, overrideStyle: object) => import("react").FC<{}>;
+export default ActBase;

dist/index.js

@@ -6,2 +6,32 @@ "use strict";
 });
+Object.defineProperty(exports, "Button", {
+  enumerable: true,
+  get: function get() {
+    return _Button["default"];
+  }
+});
+Object.defineProperty(exports, "ScrollView", {
+  enumerable: true,
+  get: function get() {
+    return _ScrollView["default"];
+  }
+});
+Object.defineProperty(exports, "Form", {
+  enumerable: true,
+  get: function get() {
+    return _Form["default"];
+  }
+});
+Object.defineProperty(exports, "Input", {
+  enumerable: true,
+  get: function get() {
+    return _Input["default"];
+  }
+});
+Object.defineProperty(exports, "Select", {
+  enumerable: true,
+  get: function get() {
+    return _Select["default"];
+  }
+});
 Object.defineProperty(exports, "Row", {
@@ -13,5 +43,90 @@ enumerable: true,
 });
+Object.defineProperty(exports, "Col", {
+  enumerable: true,
+  get: function get() {
+    return _Col["default"];
+  }
+});
+Object.defineProperty(exports, "View", {
+  enumerable: true,
+  get: function get() {
+    return _View["default"];
+  }
+});
+Object.defineProperty(exports, "Div", {
+  enumerable: true,
+  get: function get() {
+    return _Div["default"];
+  }
+});
+Object.defineProperty(exports, "Header", {
+  enumerable: true,
+  get: function get() {
+    return _Header["default"];
+  }
+});
+Object.defineProperty(exports, "Footer", {
+  enumerable: true,
+  get: function get() {
+    return _Footer["default"];
+  }
+});
+Object.defineProperty(exports, "Section", {
+  enumerable: true,
+  get: function get() {
+    return _Section["default"];
+  }
+});
+Object.defineProperty(exports, "Aside", {
+  enumerable: true,
+  get: function get() {
+    return _Aside["default"];
+  }
+});
+Object.defineProperty(exports, "Article", {
+  enumerable: true,
+  get: function get() {
+    return _Article["default"];
+  }
+});
+exports["default"] = exports.ActBase = void 0;
 
+var _App = _interopRequireDefault(require("./App"));
+
+var _Button = _interopRequireDefault(require("./Button"));
+
+var _ScrollView = _interopRequireDefault(require("./ScrollView"));
+
+var _Form = _interopRequireDefault(require("./Form"));
+
+var _Input = _interopRequireDefault(require("./Input"));
+
+var _Select = _interopRequireDefault(require("./Select"));
+
 var _Row = _interopRequireDefault(require("./Layout/Row"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _Col = _interopRequireDefault(require("./Layout/Col"));
+
+var _View = _interopRequireDefault(require("./web/View"));
+
+var _Div = _interopRequireDefault(require("./web/Div"));
+
+var _Header = _interopRequireDefault(require("./web/Header"));
+
+var _Footer = _interopRequireDefault(require("./web/Footer"));
+
+var _Section = _interopRequireDefault(require("./web/Section"));
+
+var _Aside = _interopRequireDefault(require("./web/Aside"));
+
+var _Article = _interopRequireDefault(require("./web/Article"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+// Data Entry
+// Layout
+// Web Migrated
+var ActBase = _App["default"];
+exports.ActBase = ActBase;
+var _default = ActBase;
+exports["default"] = _default;

dist/Input/Radio.js

@@ -12,3 +12,3 @@ "use strict";
 
-var _index = require("../Form/index.native");
+var _Form = require("../Form");
 
@@ -23,3 +23,3 @@ var _utils = require("../App/utils.native");
   var abContext = (0, _react.useContext)(_utils.ABContext);
-  var formContext = (0, _react.useContext)(_index.FormContext); // return (
+  var formContext = (0, _react.useContext)(_Form.FormContext); // return (
   //   <TouchableOpacity {...props}>
@@ -26,0 +26,0 @@ //     {checked && (

dist/Input/TextField.native.js

@@ -18,3 +18,3 @@ "use strict";
 
-var _index = require("../Form/index.native");
+var _Form = require("../Form");
 
@@ -65,3 +65,3 @@ var _utils = require("../App/utils.native");
   var context = (0, _react.useContext)(_utils.ABContext);
-  var formContext = (0, _react.useContext)(_index.FormContext);
+  var formContext = (0, _react.useContext)(_Form.FormContext);
 
@@ -125,2 +125,7 @@ var _d = (0, _react.useState)(((_a = props) === null || _a === void 0 ? void 0 : _a.value) || ''),
         return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      },
+      blur: function blur() {
+        var _a;
+
+        return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
       }
@@ -127,0 +132,0 @@ });

dist/Layout/Col.js

@@ -1,1 +0,72 @@
-"use strict";
+"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", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _tslib = require("tslib");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _utils = require("../App/utils");
+
+var _Row = require("./Row");
+
+var _View = _interopRequireDefault(require("../web/View"));
+
+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; }
+
+var STYLE_GROUP_NAME = 'ab-layout';
+
+var Col = function Col(props) {
+  var xs = props.xs,
+      sm = props.sm,
+      md = props.md,
+      lg = props.lg,
+      xlg = props.xlg,
+      span = props.span,
+      oProps = (0, _tslib.__rest)(props, ["xs", "sm", "md", "lg", "xlg", "span"]);
+  var width = (0, _utils.getWindowSize)().width;
+  var context = (0, _react.useContext)(_utils.ABContext);
+  var rowContext = (0, _react.useContext)(_Row.RowContext);
+  var styles = context.styles;
+  var ratio = 12;
+
+  if (width <= 576) {
+    ratio = xs || sm || md || lg || xlg || span;
+  } else if (width <= 768) {
+    ratio = sm || md || lg || xlg || span;
+  } else if (width <= 992) {
+    ratio = md || lg || xlg || span;
+  } else if (width <= 1200) {
+    ratio = lg || xlg || span;
+  } else {
+    ratio = xlg || span;
+  }
+
+  var gutterH = rowContext.gutter[0] || 0;
+  var gutterV = rowContext.gutter[1] || 0;
+  return _react["default"].createElement(_View["default"], {
+    style: [styles[STYLE_GROUP_NAME + "-col"], {
+      width: 100 * (Math.abs(ratio) / 12) + "%",
+      maxWidth: 100 * (Math.abs(ratio) / 12) + "%",
+      paddingLeft: gutterH / 2,
+      paddingRight: gutterH / 2,
+      paddingTop: gutterV / 2,
+      paddingBottom: gutterV / 2
+    }]
+  }, _react["default"].createElement(_View["default"], oProps));
+};
+
+Col.defaultProps = {
+  span: 12
+};
+var _default = Col;
+exports["default"] = _default;

dist/Layout/Row.d.ts

 import * as React from 'react';
-export declare const RowContext: React.Context<{}>;
+export declare type RowAligns = 'top' | 'middle' | 'bottom' | 'stretch';
+export declare type RowJustify = 'start' | 'end' | 'center' | 'space-around' | 'space-between';
 export interface RowProps {
-    gap: number;
-    style: any;
-    children: any;
+    gutter: [number, number] | number;
+    align?: RowAligns;
+    justify?: RowJustify;
+    style?: any;
 }
+export interface RowContextProps {
+    gutter: [number, number];
+}
+export declare const STYLE_GROUP_NAME = "ab-layout";
+export declare const RowContext: React.Context<RowContextProps>;
 declare const Row: React.FC<RowProps>;
 export default Row;

dist/Layout/Row.js

@@ -8,3 +8,3 @@ "use strict";
 });
-exports["default"] = exports.RowContext = void 0;
+exports["default"] = exports.RowContext = exports.STYLE_GROUP_NAME = void 0;
 
@@ -15,6 +15,10 @@ var _tslib = require("tslib");
 
-var _reactNative = require("react-native");
+var _lodash = require("lodash");
 
-var _utils = require("../App/utils.native");
+var _utils = require("../App/utils");
 
+var _View = _interopRequireDefault(require("../web/View"));
+
+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; }
@@ -27,3 +31,6 @@
 var STYLE_GROUP_NAME = 'ab-layout';
-var RowContext = React.createContext({});
+exports.STYLE_GROUP_NAME = STYLE_GROUP_NAME;
+var RowContext = React.createContext({
+  gutter: [10, 10]
+});
 exports.RowContext = RowContext;
@@ -33,20 +40,22 @@
   var style = props.style,
-      oProps = (0, _tslib.__rest)(props, ["style"]);
+      align = props.align,
+      justify = props.justify,
+      oProps = (0, _tslib.__rest)(props, ["style", "align", "justify"]);
   var context = React.useContext(_utils.ABContext);
   var styles = context.styles;
-  var gap = props.gap || 0; // @ts-ignore
-
-  var elementStyle = _reactNative.StyleSheet.flatten([styles[STYLE_GROUP_NAME + "-row"], {
-    marginLeft: -(gap / 2),
-    marginRight: -(gap / 2)
-  }]);
-
+  var gutter = (0, _lodash.isArray)(props.gutter) ? props.gutter : [props.gutter, props.gutter];
+  var extStyle = {
+    marginLeft: -(gutter[0] / 2),
+    marginRight: -(gutter[0] / 2),
+    marginTop: -(gutter[1] / 2),
+    marginBottom: -(gutter[1] / 2)
+  };
   return React.createElement(RowContext.Provider, {
     value: {
-      gap: gap
+      gutter: gutter
     }
-  }, React.createElement(_reactNative.View, {
+  }, React.createElement(_View["default"], {
     style: style
-  }, React.createElement(_reactNative.View, _extends({
-    style: elementStyle
+  }, React.createElement(_View["default"], _extends({
+    style: [styles[STYLE_GROUP_NAME + "-row"], extStyle]
   }, oProps))));
@@ -56,5 +65,5 @@ };
 Row.defaultProps = {
-  gap: 10
+  gutter: [10, 10]
 };
 var _default = Row;
 exports["default"] = _default;

dist/Select/index.js

@@ -1,1 +0,19 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var Select = _react["default"].memo(function (props) {
+  return _react["default"].createElement(_reactNative.View, props);
+});
+
+var _default = Select;
+exports["default"] = _default;

dist/Select/Option.js

@@ -1,1 +0,19 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+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.39",
+  "version": "0.0.40",
   "description": "React & React-Native Design Components",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

129575

increased by19.71%

Number of package files

119

increased by21.43%

Lines of code

2018

increased by17.94%

No dependency changes