app-studio 0.0.15 → 0.1.2

package/dist/app-studio.cjs.development.js

@@ -26,21 +26,6 @@ function _setPrototypeOf(o, p) {
   return _setPrototypeOf(o, p);
 }
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
 var palette = {
   whiteAlpha: {
     50: 'rgba(255, 255, 255, 0.04)',
@@ -618,64 +603,29 @@ var applyStyle = function applyStyle(props) {
   });
   return newProps;
 }; // function convertToCSS(props: any) {
-//   return Object.entries(props).reduce((str, [key, val]) => {
-//     const casedKey = key.replace(
-//       /[A-Z]/g,
-//       (match) => `-${match.toLowerCase()}`
-//     );
-//     return `${str}${casedKey}:${typeof val === 'number' ? val + 'px' : val};\n`;
-//   }, '');
-// }
-// export const getResponsiveMediaQueries = (props: any) => {
-//   const { breakpointKeys, breakpoints } = useResponsive();
-//   console.log('mediaQueries', props);
-//   const mediaQueries = breakpointKeys
-//     .map((size) => {
-//       return props && props[size] !== undefined
-//         ? `
-//     @media ${
-//       breakpoints[size].min
-//         ? ' (min-width:' +
-//           (breakpoints[size].min > 0 ? breakpoints[size].min : 0) +
-//           'px)'
-//         : ''
-//     } ${
-//             breakpoints[size].min &&
-//             breakpoints[size].max &&
-//             breakpoints[size].max >= 0 &&
-//             breakpoints[size].max < Infinity
-//               ? ' and '
-//               : ''
-//           } ${
-//             breakpoints[size].max &&
-//             breakpoints[size].max >= 0 &&
-//             breakpoints[size].max < Infinity
-//               ? ' (max-width:' + breakpoints[size].max + 'px)'
-//               : ''
-//           } {
-//      ${convertToCSS(props[size])}
-//     }`
-//         : '';
-//     })
-//     .join('\n');
-//   return mediaQueries;
-// };
-
-var StyledView = /*#__PURE__*/styled.div(function (props) {
-  return applyStyle(props);
-});
-var StyledImage = /*#__PURE__*/styled.img(function (props) {
-  return applyStyle(props);
-});
-var StyledSpan = /*#__PURE__*/styled.span(function (props) {
-  return applyStyle(props);
-});
-var StyledInput = /*#__PURE__*/styled.input(function (props) {
-  return applyStyle(props);
-});
-var StyledForm = /*#__PURE__*/styled.form(function (props) {
-  return applyStyle(props);
-});
+var elements = {
+  form: /*#__PURE__*/styled.form(function (props) {
+    return applyStyle(props);
+  }),
+  button: /*#__PURE__*/styled.button(function (props) {
+    return applyStyle(props);
+  }),
+  input: /*#__PURE__*/styled.input(function (props) {
+    return applyStyle(props);
+  }),
+  span: /*#__PURE__*/styled.span(function (props) {
+    return applyStyle(props);
+  }),
+  img: /*#__PURE__*/styled.img(function (props) {
+    return applyStyle(props);
+  }),
+  div: /*#__PURE__*/styled.div(function (props) {
+    return applyStyle(props);
+  }),
+  video: /*#__PURE__*/styled.video(function (props) {
+    return applyStyle(props);
+  })
+};
 var ViewElement = /*#__PURE__*/function (_React$PureComponent) {
   _inheritsLoose(ViewElement, _React$PureComponent);
 
@@ -686,112 +636,14 @@ var ViewElement = /*#__PURE__*/function (_React$PureComponent) {
   var _proto = ViewElement.prototype;
 
   _proto.render = function render() {
-    var onClick = this.props.onClick;
-
-    if (this.props.onPress !== undefined) {
-      onClick = this.props.onPress;
-    } //console.log(this.props);
-
-
-    return React__default.createElement(StyledView, Object.assign({}, this.props, {
-      onClick: onClick
+    var Element = elements[this.props.tag] ? elements[this.props.tag] : elements.div;
+    return React__default.createElement(Element, Object.assign({}, this.props, {
+      onClick: this.props.onPress !== undefined ? this.props.onPress : this.props.onClick
     }));
   };
 
   return ViewElement;
 }(React__default.PureComponent);
-var ImageElement = /*#__PURE__*/function (_React$PureComponent2) {
-  _inheritsLoose(ImageElement, _React$PureComponent2);
-
-  function ImageElement() {
-    return _React$PureComponent2.apply(this, arguments) || this;
-  }
-
-  var _proto2 = ImageElement.prototype;
-
-  _proto2.render = function render() {
-    var onClick = this.props.onClick;
-
-    if (this.props.onPress !== undefined) {
-      onClick = this.props.onPress;
-    }
-
-    return React__default.createElement(StyledImage, Object.assign({}, this.props, {
-      onClick: onClick
-    }));
-  };
-
-  return ImageElement;
-}(React__default.PureComponent);
-var SpanElement = /*#__PURE__*/function (_React$PureComponent3) {
-  _inheritsLoose(SpanElement, _React$PureComponent3);
-
-  function SpanElement() {
-    return _React$PureComponent3.apply(this, arguments) || this;
-  }
-
-  var _proto3 = SpanElement.prototype;
-
-  _proto3.render = function render() {
-    var onClick = this.props.onClick;
-
-    if (this.props.onPress !== undefined) {
-      onClick = this.props.onPress;
-    }
-
-    return React__default.createElement(StyledSpan, Object.assign({}, this.props, {
-      onClick: onClick
-    }));
-  };
-
-  return SpanElement;
-}(React__default.PureComponent);
-var InputElement = /*#__PURE__*/function (_React$PureComponent4) {
-  _inheritsLoose(InputElement, _React$PureComponent4);
-
-  function InputElement() {
-    return _React$PureComponent4.apply(this, arguments) || this;
-  }
-
-  var _proto4 = InputElement.prototype;
-
-  _proto4.render = function render() {
-    var onClick = this.props.onClick;
-
-    if (this.props.onPress !== undefined) {
-      onClick = this.props.onPress;
-    }
-
-    return React__default.createElement(StyledInput, Object.assign({}, this.props, {
-      onClick: onClick
-    }));
-  };
-
-  return InputElement;
-}(React__default.PureComponent);
-var FormElement = /*#__PURE__*/function (_React$PureComponent5) {
-  _inheritsLoose(FormElement, _React$PureComponent5);
-
-  function FormElement() {
-    return _React$PureComponent5.apply(this, arguments) || this;
-  }
-
-  var _proto5 = FormElement.prototype;
-
-  _proto5.render = function render() {
-    var onClick = this.props.onClick;
-
-    if (this.props.onPress !== undefined) {
-      onClick = this.props.onPress;
-    }
-
-    return React__default.createElement(StyledForm, Object.assign({}, this.props, {
-      onClick: onClick
-    }));
-  };
-
-  return FormElement;
-}(React__default.PureComponent);
 
 var View = function View(props) {
   return React__default.createElement(ViewElement, Object.assign({}, props));
@@ -804,51 +656,35 @@ var Scroll = function Scroll(props) {
   }, props));
 };
 var Span = function Span(props) {
-  return React__default.createElement(SpanElement, Object.assign({}, props));
+  return React__default.createElement(ViewElement, Object.assign({}, props, {
+    tag: "span"
+  }));
 };
 
 var Image = function Image(props) {
-  return React__default.createElement(ImageElement, Object.assign({}, props));
+  return React__default.createElement(ViewElement, Object.assign({}, props, {
+    tag: "img"
+  }));
 };
 
-var _excluded = ["toUpperCase", "children"];
-var TextSpan = /*#__PURE__*/styled.span(function (props) {
-  return applyStyle(props);
-});
 var Text = function Text(props) {
-  var _props$toUpperCase = props.toUpperCase,
-      toUpperCase = _props$toUpperCase === void 0 ? false : _props$toUpperCase,
-      children = props.children,
-      textPops = _objectWithoutPropertiesLoose(props, _excluded);
-
-  var content = children;
-
-  if (typeof content === 'string' && toUpperCase) {
-    content = content.toUpperCase();
-  } // if (typeof content === 'string' && toFormat) {
-  //   const newtext: any = content
-  //     .split('\n')
-  //     .map((item: any, key: number): any => {
-  //       return (
-  //         <span key={key.toString()}>
-  //           {item}
-  //           <br />
-  //         </span>
-  //       );
-  //     });
-  // }
-
-
-  return React__default.createElement(TextSpan, Object.assign({}, textPops, {
-    children: content
-  }));
+  return React__default.createElement(ViewElement, Object.assign({}, props));
 };
 
 var Form = function Form(props) {
-  return React__default.createElement(FormElement, Object.assign({}, props));
+  return React__default.createElement(ViewElement, Object.assign({}, props, {
+    tag: "form"
+  }));
 };
 var Input = function Input(props) {
-  return React__default.createElement(InputElement, Object.assign({}, props));
+  return React__default.createElement(ViewElement, Object.assign({}, props, {
+    tag: "input"
+  }));
+};
+var Button = function Button(props) {
+  return React__default.createElement(ViewElement, Object.assign({}, props, {
+    tag: "button"
+  }));
 };
 
 var useMount = function useMount(callback) {
@@ -964,6 +800,7 @@ var useResponsive = function useResponsive() {
   };
 };
 
+exports.Button = Button;
 exports.Div = Div;
 exports.Form = Form;
 exports.Image = Image;
@@ -974,7 +811,6 @@ exports.SafeArea = SafeArea;
 exports.Scroll = Scroll;
 exports.Span = Span;
 exports.Text = Text;
-exports.TextSpan = TextSpan;
 exports.ThemeContext = ThemeContext;
 exports.ThemeProvider = ThemeProvider;
 exports.View = View;