@gympass/yoga 7.87.1 → 7.88.1

package/esm/Input/native/Input.js

@@ -1,206 +1,332 @@
-var _excluded = ["cleanable", "disabled", "error", "full", "helper", "label", "maxLength", "readOnly", "style", "textContentType", "value", "onBlur", "onClean", "onFocus", "hideMaxLength", "theme"],
-    _excluded2 = ["height"];
-
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect, useRef } from "react";
+import { TouchableWithoutFeedback, Animated, Easing } from "react-native";
+import {
+  func,
+  string,
+  bool,
+  number,
+  oneOfType,
+  shape,
+  arrayOf
+} from "prop-types";
+import styled, { withTheme } from "styled-components";
+import { Close } from "@gympass/yoga-icons";
+import Helper from "./Helper";
+const ICON_SIZE = 20;
+const Wrapper = styled.View(
+  ({
+    full,
+    theme: {
+      yoga: {
+        components: { input }
+      }
+    }
+  }) => `
+    position: relative;
+    width: ${full ? "100%" : `${input.width}px`};
+  `
+);
+const Field = styled.TextInput(
+  ({
+    cleanable,
+    disabled,
+    error,
+    focus,
+    full,
+    textContentType,
+    typed,
+    theme: {
+      yoga: {
+        baseFont,
+        colors,
+        components: { input }
+      }
+    }
+  }) => `
+    width: ${full ? "100%" : `${input.width}px`};
 
-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; }
+    padding-top: ${input.padding.top}px;
+    padding-right: ${cleanable || textContentType === "password" ? ICON_SIZE + input.padding.right * 2 : input.padding.right}px;
+    padding-bottom: ${input.padding.bottom}px;
+    padding-left: ${input.padding.left}px;
 
-import React, { useState, useEffect, useRef } from 'react';
-import { TouchableWithoutFeedback, Animated, Easing } from 'react-native';
-import { func, string, bool, number, oneOfType, shape, arrayOf } from 'prop-types';
-import styled, { withTheme } from 'styled-components';
-import { Close } from '@gympass/yoga-icons';
-import Helper from './Helper';
-var ICON_SIZE = 20;
-var Wrapper = styled.View(function (_ref) {
-  var full = _ref.full,
-      input = _ref.theme.yoga.components.input;
-  return "\n    position: relative;\n    width: " + (full ? '100%' : input.width + "px") + ";\n  ";
-});
-var Field = styled.TextInput(function (_ref2) {
-  var cleanable = _ref2.cleanable,
-      disabled = _ref2.disabled,
-      error = _ref2.error,
-      focus = _ref2.focus,
-      full = _ref2.full,
-      textContentType = _ref2.textContentType,
-      typed = _ref2.typed,
-      _ref2$theme$yoga = _ref2.theme.yoga,
-      baseFont = _ref2$theme$yoga.baseFont,
-      colors = _ref2$theme$yoga.colors,
-      input = _ref2$theme$yoga.components.input;
-  return "\n    width: " + (full ? '100%' : input.width + "px") + ";\n\n    padding-top: " + input.padding.top + "px;\n    padding-right: " + (cleanable || textContentType === 'password' ? ICON_SIZE + input.padding.right * 2 : input.padding.right) + "px;\n    padding-bottom: " + input.padding.bottom + "px;\n    padding-left: " + input.padding.left + "px;\n\n    border-radius: " + input.border.radius + "px;\n    border: " + input.border.width + "px solid " + input.border.color["default"] + ";\n\n    color: " + input.font.color["default"] + ";\n    font-family: " + baseFont.family + ";\n    font-size: " + input.font.size + "px;\n\n    " + (focus ? "border-color: " + input.border.color.typed + ";" : '') + "\n    " + (focus || typed ? "color: " + input.font.color.focus + ";" : '') + "\n    " + (error ? "border-color: " + colors.feedback.attention[1] + ";" : '') + "\n\n    " + (disabled ? "\n          border-color: " + colors.elements.lineAndBorders + ";\n          color: " + colors.text.disabled + ";\n        " : '') + "\n  ";
-});
-var LabelWrapper = styled(Animated.View)(function (_ref3) {
-  var focus = _ref3.focus,
-      typed = _ref3.typed,
-      input = _ref3.theme.yoga.components.input;
-  return "\n    position: absolute;\n    left: " + input.padding.left + "px;\n\n    transform: translateY(-" + input.padding.top / 2 + "px);\n\n    " + (focus || typed ? "left: " + (input.padding.left - 2) + "px;" : '') + "\n  ";
-});
-var Label = styled(Animated.Text)(function (_ref4) {
-  var disabled = _ref4.disabled,
-      error = _ref4.error,
-      focus = _ref4.focus,
-      typed = _ref4.typed,
-      _ref4$theme$yoga = _ref4.theme.yoga,
-      colors = _ref4$theme$yoga.colors,
-      baseFont = _ref4$theme$yoga.baseFont,
-      input = _ref4$theme$yoga.components.input;
-  return "\n    background-color: " + colors.white + ";\n\n    font-family: " + baseFont.family + ";\n    color: " + input.label.color["default"] + ";\n\n    " + (focus ? "\n          color: " + input.label.color.focus + ";\n        " : '') + "\n\n    " + (focus || typed ? "\n        padding-right: " + input.label.padding.right + "px;\n        padding-left: " + input.label.padding.left + "px;\n      " : '') + "\n\n    " + (error ? "color: " + colors.feedback.attention[1] + ";" : '') + "\n    " + (disabled ? "color: " + colors.text.disabled + ";" : '') + "\n  ";
-});
-var CloseIcon = styled.View(function (_ref5) {
-  var spacing = _ref5.theme.yoga.spacing;
-  return "\n    position: absolute;\n    top: 0px;\n    right: 0px;\n\n    padding-right: " + spacing.small + "px;\n    padding-left: " + spacing.small + "px;\n  ";
-});
-var Input = /*#__PURE__*/React.forwardRef(function (_ref6, ref) {
-  var cleanable = _ref6.cleanable,
-      disabled = _ref6.disabled,
-      error = _ref6.error,
-      full = _ref6.full,
-      helper = _ref6.helper,
-      label = _ref6.label,
-      maxLength = _ref6.maxLength,
-      readOnly = _ref6.readOnly,
-      style = _ref6.style,
-      textContentType = _ref6.textContentType,
-      value = _ref6.value,
-      _onBlur = _ref6.onBlur,
-      onClean = _ref6.onClean,
-      _onFocus = _ref6.onFocus,
-      hideMaxLength = _ref6.hideMaxLength,
-      _ref6$theme$yoga = _ref6.theme.yoga,
-      colors = _ref6$theme$yoga.colors,
-      transition = _ref6$theme$yoga.transition,
-      input = _ref6$theme$yoga.components.input,
-      props = _objectWithoutPropertiesLoose(_ref6, _excluded);
+    border-radius: ${input.border.radius}px;
+    border: ${input.border.width}px solid ${input.border.color.default};
 
-  var inputRef = ref || useRef(null);
+    color: ${input.font.color.default};
+    font-family: ${baseFont.family};
+    font-size: ${input.font.size}px;
 
-  var _useState = useState(false),
-      focused = _useState[0],
-      setFocused = _useState[1];
+    ${focus ? `border-color: ${input.border.color.typed};` : ""}
+    ${focus || typed ? `color: ${input.font.color.focus};` : ""}
+    ${error ? `border-color: ${colors.feedback.attention[1]};` : ""}
 
-  var _useState2 = useState(Boolean(value)),
-      typed = _useState2[0],
-      setTyped = _useState2[1];
+    ${disabled ? `
+          border-color: ${colors.elements.lineAndBorders};
+          color: ${colors.text.disabled};
+        ` : ""}
+  `
+);
+const LabelWrapper = styled(Animated.View)(
+  ({
+    focus,
+    typed,
+    theme: {
+      yoga: {
+        components: { input }
+      }
+    }
+  }) => `
+    position: absolute;
+    left: ${input.padding.left}px;
 
-  useEffect(function () {
-    setTyped(Boolean(value));
-  }, [value]);
+    transform: translateY(-${input.padding.top / 2}px);
 
-  var iconColor = function iconColor() {
-    if (disabled) {
-      return colors.elements.backgroundAndDisabled;
+    ${focus || typed ? `left: ${input.padding.left - 2}px;` : ""}
+  `
+);
+const Label = styled(Animated.Text)(
+  ({
+    disabled,
+    error,
+    focus,
+    typed,
+    theme: {
+      yoga: {
+        colors,
+        baseFont,
+        components: { input }
+      }
     }
+  }) => `
+    background-color: ${colors.white};
 
-    if (focused) {
-      return input.font.color.focus;
-    }
+    font-family: ${baseFont.family};
+    color: ${input.label.color.default};
 
-    return input.font.color["default"];
-  };
+    ${focus ? `
+          color: ${input.label.color.focus};
+        ` : ""}
 
-  var _useState3 = useState(new Animated.Value(input.padding.top * 1.5)),
-      labelTopAnimation = _useState3[0];
+    ${focus || typed ? `
+        padding-right: ${input.label.padding.right}px;
+        padding-left: ${input.label.padding.left}px;
+      ` : ""}
 
-  var _useState4 = useState(new Animated.Value(input.label.font.size["default"])),
-      fontSizeAnimation = _useState4[0];
+    ${error ? `color: ${colors.feedback.attention[1]};` : ""}
+    ${disabled ? `color: ${colors.text.disabled};` : ""}
+  `
+);
+const CloseIcon = styled.View(
+  ({
+    theme: {
+      yoga: { spacing }
+    }
+  }) => `
+    position: absolute;
+    top: 0px;
+    right: 0px;
 
-  var animate = function animate(animation, toValue) {
-    return Animated.timing(animation, {
-      toValue: toValue,
+    padding-right: ${spacing.small}px;
+    padding-left: ${spacing.small}px;
+  `
+);
+const Input = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      cleanable,
+      disabled,
+      error,
+      full,
+      helper,
+      label,
+      maxLength,
+      readOnly,
+      style,
+      textContentType,
+      value,
+      onBlur,
+      onClean,
+      onFocus,
+      hideMaxLength,
+      theme: {
+        yoga: {
+          colors,
+          transition,
+          components: { input }
+        }
+      }
+    } = _b, props = __objRest(_b, [
+      "cleanable",
+      "disabled",
+      "error",
+      "full",
+      "helper",
+      "label",
+      "maxLength",
+      "readOnly",
+      "style",
+      "textContentType",
+      "value",
+      "onBlur",
+      "onClean",
+      "onFocus",
+      "hideMaxLength",
+      "theme"
+    ]);
+    const inputRef = ref || useRef(null);
+    const [focused, setFocused] = useState(false);
+    const [typed, setTyped] = useState(Boolean(value));
+    useEffect(() => {
+      setTyped(Boolean(value));
+    }, [value]);
+    const iconColor = () => {
+      if (disabled) {
+        return colors.elements.backgroundAndDisabled;
+      }
+      if (focused) {
+        return input.font.color.focus;
+      }
+      return input.font.color.default;
+    };
+    const [labelTopAnimation] = useState(
+      new Animated.Value(input.padding.top * 1.5)
+    );
+    const [fontSizeAnimation] = useState(
+      new Animated.Value(input.label.font.size.default)
+    );
+    const animate = (animation, toValue) => Animated.timing(animation, {
+      toValue,
       duration: transition.duration[1],
-      easing: Easing.bezier.apply(Easing, transition.timing[0]),
+      easing: Easing.bezier(...transition.timing[0]),
       useNativeDriver: false
     }).start();
-  };
-
-  useEffect(function () {
-    var shouldAnimate = typed || focused;
-    animate(labelTopAnimation, shouldAnimate ? 1 : input.padding.top * 1.5);
-    animate(fontSizeAnimation, shouldAnimate ? input.label.font.size.typed : input.label.font.size["default"]);
-  }, [focused, typed]);
-
-  var _ref7 = Array.isArray(style) ? Object.assign.apply(Object, [{}].concat(style)) : style,
-      _ref7$height = _ref7.height,
-      height = _ref7$height === void 0 ? input.height : _ref7$height,
-      styles = _objectWithoutPropertiesLoose(_ref7, _excluded2);
-
-  return /*#__PURE__*/React.createElement(Wrapper, {
-    full: full,
-    style: styles
-  }, /*#__PURE__*/React.createElement(Field, _extends({}, props, {
-    cleanable: cleanable,
-    disabled: disabled,
-    editable: !(readOnly || disabled),
-    error: error,
-    focus: focused,
-    full: full,
-    maxLength: maxLength,
-    style: {
-      height: height
-    },
-    textContentType: textContentType,
-    typed: typed,
-    value: value,
-    onFocus: function onFocus(e) {
-      setFocused(true);
-
-      _onFocus(e);
-    },
-    onBlur: function onBlur(e) {
-      setFocused(false);
-
-      _onBlur(e);
-    },
-    ref: inputRef
-  })), Boolean(label) && /*#__PURE__*/React.createElement(LabelWrapper, {
-    focus: focused,
-    pointerEvents: "none",
-    typed: typed,
-    style: {
-      top: labelTopAnimation
-    }
-  }, /*#__PURE__*/React.createElement(Label, {
-    disabled: disabled,
-    error: error,
-    focus: focused,
-    typed: typed,
-    style: {
-      fontSize: fontSizeAnimation
-    }
-  }, label)), cleanable && typed && /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
-    accessibilityRole: "button",
-    onPress: function onPress() {
-      if (disabled) return;
-      onClean('');
-    }
-  }, /*#__PURE__*/React.createElement(CloseIcon, null, /*#__PURE__*/React.createElement(Close, {
-    height: input.height,
-    width: 20,
-    fill: iconColor()
-  }))), (helper || maxLength || error) && /*#__PURE__*/React.createElement(Helper, {
-    full: full,
-    error: error,
-    helper: helper,
-    focused: focused,
-    disabled: disabled,
-    maxLength: maxLength,
-    length: value.length,
-    hideMaxLength: hideMaxLength
-  }));
-});
+    useEffect(() => {
+      const shouldAnimate = typed || focused;
+      animate(labelTopAnimation, shouldAnimate ? 1 : input.padding.top * 1.5);
+      animate(
+        fontSizeAnimation,
+        shouldAnimate ? input.label.font.size.typed : input.label.font.size.default
+      );
+    }, [focused, typed]);
+    const _a2 = Array.isArray(style) ? Object.assign({}, ...style) : style, { height = input.height } = _a2, styles = __objRest(_a2, ["height"]);
+    return /* @__PURE__ */ jsxs(Wrapper, { full, style: styles, children: [
+      /* @__PURE__ */ jsx(
+        Field,
+        __spreadProps(__spreadValues({}, props), {
+          cleanable,
+          disabled,
+          editable: !(readOnly || disabled),
+          error,
+          focus: focused,
+          full,
+          maxLength,
+          style: {
+            height
+          },
+          textContentType,
+          typed,
+          value,
+          onFocus: (e) => {
+            setFocused(true);
+            onFocus(e);
+          },
+          onBlur: (e) => {
+            setFocused(false);
+            onBlur(e);
+          },
+          ref: inputRef
+        })
+      ),
+      Boolean(label) && /* @__PURE__ */ jsx(
+        LabelWrapper,
+        {
+          focus: focused,
+          pointerEvents: "none",
+          typed,
+          style: { top: labelTopAnimation },
+          children: /* @__PURE__ */ jsx(
+            Label,
+            {
+              disabled,
+              error,
+              focus: focused,
+              typed,
+              style: { fontSize: fontSizeAnimation },
+              children: label
+            }
+          )
+        }
+      ),
+      cleanable && typed && /* @__PURE__ */ jsx(
+        TouchableWithoutFeedback,
+        {
+          accessibilityRole: "button",
+          onPress: () => {
+            if (disabled)
+              return;
+            onClean("");
+          },
+          children: /* @__PURE__ */ jsx(CloseIcon, { children: /* @__PURE__ */ jsx(Close, { height: input.height, width: 20, fill: iconColor() }) })
+        }
+      ),
+      (helper || maxLength || error) && /* @__PURE__ */ jsx(
+        Helper,
+        {
+          full,
+          error,
+          helper,
+          focused,
+          disabled,
+          maxLength,
+          length: value.length,
+          hideMaxLength
+        }
+      )
+    ] });
+  }
+);
 Input.propTypes = {
   /** display a close icon to clean the field */
   cleanable: bool,
   disabled: bool,
   error: string,
   full: bool,
-
   /** A helper text to be displayed below field */
   helper: string,
   label: string,
-
   /** maximum length (number of characters) of value */
   maxLength: number,
   readOnly: bool,
@@ -208,7 +334,6 @@ Input.propTypes = {
   value: oneOfType([string, number]),
   style: oneOfType([shape({}), arrayOf(shape({}))]),
   onBlur: func,
-
   /** callback invoked when close icon is clicked */
   onClean: func,
   onFocus: func,
@@ -217,18 +342,24 @@ Input.propTypes = {
 Input.defaultProps = {
   cleanable: true,
   disabled: false,
-  error: undefined,
+  error: void 0,
   full: false,
-  helper: undefined,
-  label: '',
-  maxLength: undefined,
+  helper: void 0,
+  label: "",
+  maxLength: void 0,
   readOnly: false,
   style: {},
-  textContentType: undefined,
-  value: '',
-  onBlur: function onBlur() {},
-  onClean: function onClean() {},
-  onFocus: function onFocus() {},
+  textContentType: void 0,
+  value: "",
+  onBlur: () => {
+  },
+  onClean: () => {
+  },
+  onFocus: () => {
+  },
   hideMaxLength: false
 };
-export default withTheme(Input);
+var Input_default = withTheme(Input);
+export {
+  Input_default as default
+};