@react-native-ohos/native-base 3.4.29-rc.1

package/lib/commonjs/components/primitives/Image/index.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+var _useThemeProps = require("../../../hooks/useThemeProps");
+
+var _useHasResponsiveProps = require("../../../hooks/useHasResponsiveProps");
+
+var _styled = require("../../../utils/styled");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { 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); }
+
+const StyledImage = (0, _styled.makeStyledComponent)(_reactNative.Image);
+const Image = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    source,
+    src,
+    fallbackElement,
+    alt,
+    fallbackSource,
+    ignoreFallback,
+    _alt,
+    ...resolvedProps
+  } = (0, _useThemeProps.usePropsResolution)('Image', props);
+  const finalSource = (0, _react.useRef)(null);
+  const getSource = (0, _react.useCallback)(() => {
+    if (source) {
+      finalSource.current = source;
+    } else if (src) {
+      finalSource.current = {
+        uri: src
+      };
+    }
+
+    return finalSource.current; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [source === null || source === void 0 ? void 0 : source.uri, src]);
+  const [renderedSource, setSource] = (0, _react.useState)(getSource());
+  const [alternate, setAlternate] = (0, _react.useState)(false);
+  const [fallbackSourceFlag, setfallbackSourceFlag] = (0, _react.useState)(true);
+
+  _react.default.useEffect(() => {
+    setSource(getSource());
+    return () => {
+      finalSource.current = null;
+    };
+  }, [source === null || source === void 0 ? void 0 : source.uri, src, getSource]);
+
+  const onImageLoadError = (0, _react.useCallback)(event => {
+    props.onError && props.onError(event);
+    console.warn(event.nativeEvent.error);
+
+    if (!ignoreFallback && fallbackSource && fallbackSource !== renderedSource && fallbackSourceFlag) {
+      setfallbackSourceFlag(false);
+      setSource(fallbackSource);
+    } else {
+      setAlternate(true);
+    }
+  }, [fallbackSource, fallbackSourceFlag, ignoreFallback, props, renderedSource]); //TODO: refactor for responsive prop
+
+  if ((0, _useHasResponsiveProps.useHasResponsiveProps)(props)) {
+    return null;
+  }
+
+  if (typeof alt !== 'string') {
+    console.warn('Please pass alt prop to Image component');
+  }
+
+  if (alternate) {
+    if (fallbackElement) {
+      if ( /*#__PURE__*/_react.default.isValidElement(fallbackElement)) {
+        return fallbackElement;
+      }
+    } else return /*#__PURE__*/_react.default.createElement(_Text.default, _alt, alt);
+  }
+
+  return /*#__PURE__*/_react.default.createElement(StyledImage, _extends({
+    source: renderedSource,
+    accessibilityLabel: alt,
+    alt: alt
+  }, resolvedProps, {
+    onError: onImageLoadError,
+    ref: ref
+  }));
+}));
+const ImageWithStatics = { ...Image,
+  //@ts-ignore
+  getSize: _reactNative.Image.getSize,
+  prefetch: _reactNative.Image.prefetch,
+  queryCache: _reactNative.Image.queryCache
+};
+var _default = ImageWithStatics;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/primitives/Image/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.tsx"],"names":["StyledImage","RNImage","Image","props","ref","source","src","fallbackElement","alt","fallbackSource","ignoreFallback","_alt","resolvedProps","finalSource","getSource","current","uri","renderedSource","setSource","alternate","setAlternate","fallbackSourceFlag","setfallbackSourceFlag","React","useEffect","onImageLoadError","event","onError","console","warn","nativeEvent","error","isValidElement","ImageWithStatics","getSize","prefetch","queryCache"],"mappings":"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","sourcesContent":["import React, { useState, memo, forwardRef, useCallback, useRef } from 'react';\r\nimport { Image as RNImage } from 'react-native';\r\nimport Text from '../Text';\r\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\r\nimport type { IImageProps } from './types';\r\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\r\nimport { makeStyledComponent } from '../../../utils/styled';\r\n\r\nconst StyledImage = makeStyledComponent(RNImage);\r\n\r\nconst Image = memo(\r\n  forwardRef((props: IImageProps, ref: any) => {\r\n    const {\r\n      source,\r\n      src,\r\n      fallbackElement,\r\n      alt,\r\n      fallbackSource,\r\n      ignoreFallback,\r\n      _alt,\r\n      ...resolvedProps\r\n    } = usePropsResolution('Image', props);\r\n\r\n    const finalSource: any = useRef(null);\r\n    const getSource = useCallback(() => {\r\n      if (source) {\r\n        finalSource.current = source;\r\n      } else if (src) {\r\n        finalSource.current = { uri: src };\r\n      }\r\n      return finalSource.current;\r\n      // eslint-disable-next-line react-hooks/exhaustive-deps\r\n    }, [source?.uri, src]);\r\n\r\n    const [renderedSource, setSource] = useState(getSource());\r\n    const [alternate, setAlternate] = useState(false);\r\n    const [fallbackSourceFlag, setfallbackSourceFlag] = useState(true);\r\n\r\n    React.useEffect(() => {\r\n      setSource(getSource());\r\n      return () => {\r\n        finalSource.current = null;\r\n      };\r\n    }, [source?.uri, src, getSource]);\r\n\r\n    const onImageLoadError = useCallback(\r\n      (event: any) => {\r\n        props.onError && props.onError(event);\r\n        console.warn(event.nativeEvent.error);\r\n        if (\r\n          !ignoreFallback &&\r\n          fallbackSource &&\r\n          fallbackSource !== renderedSource &&\r\n          fallbackSourceFlag\r\n        ) {\r\n          setfallbackSourceFlag(false);\r\n          setSource(fallbackSource);\r\n        } else {\r\n          setAlternate(true);\r\n        }\r\n      },\r\n      [\r\n        fallbackSource,\r\n        fallbackSourceFlag,\r\n        ignoreFallback,\r\n        props,\r\n        renderedSource,\r\n      ]\r\n    );\r\n    //TODO: refactor for responsive prop\r\n    if (useHasResponsiveProps(props)) {\r\n      return null;\r\n    }\r\n\r\n    if (typeof alt !== 'string') {\r\n      console.warn('Please pass alt prop to Image component');\r\n    }\r\n\r\n    if (alternate) {\r\n      if (fallbackElement) {\r\n        if (React.isValidElement(fallbackElement)) {\r\n          return fallbackElement;\r\n        }\r\n      } else return <Text {..._alt}>{alt}</Text>;\r\n    }\r\n    return (\r\n      <StyledImage\r\n        source={renderedSource}\r\n        accessibilityLabel={alt}\r\n        alt={alt}\r\n        {...resolvedProps}\r\n        onError={onImageLoadError}\r\n        ref={ref}\r\n      />\r\n    );\r\n  })\r\n);\r\n\r\ninterface ImageStatics {\r\n  getSize: typeof RNImage.prefetch;\r\n  prefetch: typeof RNImage.prefetch;\r\n  queryCache: typeof RNImage.queryCache;\r\n}\r\nconst ImageWithStatics: typeof Image & ImageStatics = {\r\n  ...Image,\r\n  //@ts-ignore\r\n  getSize: RNImage.getSize,\r\n  prefetch: RNImage.prefetch,\r\n  queryCache: RNImage.queryCache,\r\n};\r\n\r\nexport default ImageWithStatics;\r\nexport type { IImageProps };\r\n"]}

package/lib/commonjs/components/primitives/Image/types.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=types.js.map

package/lib/commonjs/components/primitives/Image/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/lib/commonjs/components/primitives/Input/Input.js

@@ -0,0 +1,165 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _hooks = require("../../../hooks");
+
+var _FormControl = require("../../composites/FormControl");
+
+var _useHasResponsiveProps = require("../../../hooks/useHasResponsiveProps");
+
+var _interactions = require("@react-native-aria/interactions");
+
+var _utils = require("../../../theme/tools/utils");
+
+var _useThemeProps = require("../../../hooks/useThemeProps");
+
+var _utils2 = require("../../../utils");
+
+var _Stack = require("../Stack");
+
+var _styled = require("../../../utils/styled");
+
+var _useResolvedFontFamily = require("../../../hooks/useResolvedFontFamily");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { 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); }
+
+const StyledInput = (0, _styled.makeStyledComponent)(_reactNative.TextInput);
+
+const Input = ({
+  isHovered: isHoveredProp,
+  isFocused: isFocusedProp,
+  onKeyPress,
+  InputLeftElement,
+  InputRightElement,
+  leftElement,
+  rightElement,
+  ...props
+}, ref) => {
+  const inputProps = (0, _FormControl.useFormControl)({
+    isDisabled: props.isDisabled,
+    isInvalid: props.isInvalid,
+    isReadOnly: props.isReadOnly,
+    isRequired: props.isRequired,
+    nativeID: props.nativeID
+  });
+
+  const [isFocused, setIsFocused] = _react.default.useState(false);
+
+  const handleFocus = (focusState, callback) => {
+    setIsFocused(focusState);
+    callback();
+  };
+
+  const _ref = _react.default.useRef(null);
+
+  const {
+    isHovered
+  } = (0, _interactions.useHover)({}, _ref);
+  const inputThemeProps = {
+    isDisabled: inputProps.disabled,
+    isInvalid: inputProps.accessibilityInvalid,
+    isReadOnly: inputProps.accessibilityReadOnly,
+    isRequired: inputProps.required
+  };
+  const {
+    ariaLabel,
+    accessibilityLabel,
+    type,
+    isFullWidth,
+    isDisabled,
+    isReadOnly,
+    fontFamily,
+    fontWeight,
+    fontStyle,
+    placeholderTextColor,
+    selectionColor,
+    underlineColorAndroid,
+    onFocus,
+    onBlur,
+    wrapperRef,
+    _stack,
+    _input,
+    ...resolvedProps
+  } = (0, _useThemeProps.usePropsResolution)('Input', { ...inputThemeProps,
+    ...props
+  }, {
+    isDisabled: inputThemeProps.isDisabled,
+    isHovered: isHoveredProp || isHovered,
+    isFocused: isFocusedProp || isFocused,
+    isInvalid: inputThemeProps.isInvalid,
+    isReadOnly: inputThemeProps.isReadOnly
+  });
+  const [layoutProps, nonLayoutProps] = (0, _utils.extractInObject)(resolvedProps, [..._utils.stylingProps.margin, ..._utils.stylingProps.border, ..._utils.stylingProps.layout, ..._utils.stylingProps.flexbox, ..._utils.stylingProps.position, ..._utils.stylingProps.background, 'shadow', 'opacity']);
+  const resolvedFontFamily = (0, _useResolvedFontFamily.useResolvedFontFamily)({
+    fontFamily,
+    fontWeight: fontWeight !== null && fontWeight !== void 0 ? fontWeight : 400,
+    fontStyle: fontStyle !== null && fontStyle !== void 0 ? fontStyle : 'normal'
+  });
+  const resolvedPlaceholderTextColor = (0, _hooks.useToken)('colors', placeholderTextColor);
+  const resolvedSelectionColor = (0, _hooks.useToken)('colors', selectionColor);
+  const resolvedUnderlineColorAndroid = (0, _hooks.useToken)('colors', underlineColorAndroid);
+  /**Converting into Hash Color Code */
+  //@ts-ignore
+
+  resolvedProps.focusOutlineColor = (0, _hooks.useToken)('colors', resolvedProps.focusOutlineColor); //@ts-ignore
+
+  resolvedProps.invalidOutlineColor = (0, _hooks.useToken)('colors', resolvedProps.invalidOutlineColor); //TODO: refactor for responsive prop
+
+  if ((0, _useHasResponsiveProps.useHasResponsiveProps)(props)) {
+    return null;
+  }
+
+  if (resolvedProps.focusOutlineColor && isFocused) {
+    layoutProps.borderColor = resolvedProps.focusOutlineColor;
+    _stack.style = (0, _utils2.resolveStackStyleInput)(props.variant, resolvedProps.focusOutlineColor);
+  }
+
+  if (resolvedProps.invalidOutlineColor && props.isInvalid) {
+    layoutProps.borderColor = resolvedProps.invalidOutlineColor;
+    _stack.style = (0, _utils2.resolveStackStyleInput)(props.variant, resolvedProps.invalidOutlineColor);
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_Stack.Stack, _extends({}, _stack, layoutProps, {
+    ref: (0, _utils2.mergeRefs)([_ref, wrapperRef]),
+    isFocused: isFocused
+  }), InputLeftElement || leftElement ? InputLeftElement || leftElement : null, /*#__PURE__*/_react.default.createElement(StyledInput, _extends({}, inputProps, {
+    secureTextEntry: type === 'password',
+    accessible: true,
+    accessibilityLabel: ariaLabel || accessibilityLabel,
+    editable: isDisabled || isReadOnly ? false : true,
+    w: isFullWidth ? '100%' : undefined
+  }, nonLayoutProps, resolvedFontFamily, {
+    placeholderTextColor: resolvedPlaceholderTextColor,
+    selectionColor: resolvedSelectionColor,
+    underlineColorAndroid: resolvedUnderlineColorAndroid,
+    onKeyPress: e => {
+      e.persist();
+      onKeyPress && onKeyPress(e);
+    },
+    onFocus: e => {
+      handleFocus(true, onFocus ? () => onFocus(e) : () => {});
+    },
+    onBlur: e => {
+      handleFocus(false, onBlur ? () => onBlur(e) : () => {});
+    }
+  }, _input, {
+    ref: (0, _utils2.mergeRefs)([ref, _ref, wrapperRef])
+  })), InputRightElement || rightElement ? InputRightElement || rightElement : null);
+};
+
+var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(Input));
+
+exports.default = _default;
+//# sourceMappingURL=Input.js.map

package/lib/commonjs/components/primitives/Input/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Input.tsx"],"names":["StyledInput","TextInput","Input","isHovered","isHoveredProp","isFocused","isFocusedProp","onKeyPress","InputLeftElement","InputRightElement","leftElement","rightElement","props","ref","inputProps","isDisabled","isInvalid","isReadOnly","isRequired","nativeID","setIsFocused","React","useState","handleFocus","focusState","callback","_ref","useRef","inputThemeProps","disabled","accessibilityInvalid","accessibilityReadOnly","required","ariaLabel","accessibilityLabel","type","isFullWidth","fontFamily","fontWeight","fontStyle","placeholderTextColor","selectionColor","underlineColorAndroid","onFocus","onBlur","wrapperRef","_stack","_input","resolvedProps","layoutProps","nonLayoutProps","stylingProps","margin","border","layout","flexbox","position","background","resolvedFontFamily","resolvedPlaceholderTextColor","resolvedSelectionColor","resolvedUnderlineColorAndroid","focusOutlineColor","invalidOutlineColor","borderColor","style","variant","undefined","e","persist"],"mappings":"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","sourcesContent":["import React, { memo, forwardRef } from 'react';\r\nimport type { IInputProps } from './types';\r\nimport { TextInput } from 'react-native';\r\nimport { useToken } from '../../../hooks';\r\nimport { useFormControl } from '../../composites/FormControl';\r\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\r\nimport { useHover } from '@react-native-aria/interactions';\r\nimport { extractInObject, stylingProps } from '../../../theme/tools/utils';\r\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\r\nimport { mergeRefs, resolveStackStyleInput } from '../../../utils';\r\nimport { Stack } from '../Stack';\r\nimport { makeStyledComponent } from '../../../utils/styled';\r\nimport { useResolvedFontFamily } from '../../../hooks/useResolvedFontFamily';\r\n\r\nconst StyledInput = makeStyledComponent(TextInput);\r\n\r\nconst Input = (\r\n  {\r\n    isHovered: isHoveredProp,\r\n    isFocused: isFocusedProp,\r\n    onKeyPress,\r\n    InputLeftElement,\r\n    InputRightElement,\r\n    leftElement,\r\n    rightElement,\r\n    ...props\r\n  }: IInputProps,\r\n  ref: any\r\n) => {\r\n  const inputProps = useFormControl({\r\n    isDisabled: props.isDisabled,\r\n    isInvalid: props.isInvalid,\r\n    isReadOnly: props.isReadOnly,\r\n    isRequired: props.isRequired,\r\n    nativeID: props.nativeID,\r\n  });\r\n  const [isFocused, setIsFocused] = React.useState(false);\r\n  const handleFocus = (focusState: boolean, callback: any) => {\r\n    setIsFocused(focusState);\r\n    callback();\r\n  };\r\n\r\n  const _ref = React.useRef(null);\r\n  const { isHovered } = useHover({}, _ref);\r\n\r\n  const inputThemeProps = {\r\n    isDisabled: inputProps.disabled,\r\n    isInvalid: inputProps.accessibilityInvalid,\r\n    isReadOnly: inputProps.accessibilityReadOnly,\r\n    isRequired: inputProps.required,\r\n  };\r\n\r\n  const {\r\n    ariaLabel,\r\n    accessibilityLabel,\r\n    type,\r\n    isFullWidth,\r\n    isDisabled,\r\n    isReadOnly,\r\n    fontFamily,\r\n    fontWeight,\r\n    fontStyle,\r\n    placeholderTextColor,\r\n    selectionColor,\r\n    underlineColorAndroid,\r\n    onFocus,\r\n    onBlur,\r\n    wrapperRef,\r\n    _stack,\r\n    _input,\r\n\r\n    ...resolvedProps\r\n  } = usePropsResolution(\r\n    'Input',\r\n    {\r\n      ...inputThemeProps,\r\n      ...props,\r\n    },\r\n    {\r\n      isDisabled: inputThemeProps.isDisabled,\r\n      isHovered: isHoveredProp || isHovered,\r\n      isFocused: isFocusedProp || isFocused,\r\n      isInvalid: inputThemeProps.isInvalid,\r\n      isReadOnly: inputThemeProps.isReadOnly,\r\n    }\r\n  );\r\n\r\n  const [layoutProps, nonLayoutProps] = extractInObject(resolvedProps, [\r\n    ...stylingProps.margin,\r\n    ...stylingProps.border,\r\n    ...stylingProps.layout,\r\n    ...stylingProps.flexbox,\r\n    ...stylingProps.position,\r\n    ...stylingProps.background,\r\n    'shadow',\r\n    'opacity',\r\n  ]);\r\n\r\n  const resolvedFontFamily = useResolvedFontFamily({\r\n    fontFamily,\r\n    fontWeight: fontWeight ?? 400,\r\n    fontStyle: fontStyle ?? 'normal',\r\n  });\r\n  const resolvedPlaceholderTextColor = useToken('colors', placeholderTextColor);\r\n  const resolvedSelectionColor = useToken('colors', selectionColor);\r\n  const resolvedUnderlineColorAndroid = useToken(\r\n    'colors',\r\n    underlineColorAndroid\r\n  );\r\n\r\n  /**Converting into Hash Color Code */\r\n  //@ts-ignore\r\n  resolvedProps.focusOutlineColor = useToken(\r\n    'colors',\r\n    resolvedProps.focusOutlineColor\r\n  );\r\n  //@ts-ignore\r\n  resolvedProps.invalidOutlineColor = useToken(\r\n    'colors',\r\n    resolvedProps.invalidOutlineColor\r\n  );\r\n  //TODO: refactor for responsive prop\r\n  if (useHasResponsiveProps(props)) {\r\n    return null;\r\n  }\r\n\r\n  if (resolvedProps.focusOutlineColor && isFocused) {\r\n    layoutProps.borderColor = resolvedProps.focusOutlineColor;\r\n    _stack.style = resolveStackStyleInput(\r\n      props.variant,\r\n      resolvedProps.focusOutlineColor\r\n    );\r\n  }\r\n\r\n  if (resolvedProps.invalidOutlineColor && props.isInvalid) {\r\n    layoutProps.borderColor = resolvedProps.invalidOutlineColor;\r\n    _stack.style = resolveStackStyleInput(\r\n      props.variant,\r\n      resolvedProps.invalidOutlineColor\r\n    );\r\n  }\r\n\r\n  return (\r\n    <Stack\r\n      {..._stack}\r\n      {...layoutProps}\r\n      ref={mergeRefs([_ref, wrapperRef])}\r\n      isFocused={isFocused}\r\n    >\r\n      {InputLeftElement || leftElement ? InputLeftElement || leftElement : null}\r\n      <StyledInput\r\n        {...inputProps}\r\n        secureTextEntry={type === 'password'}\r\n        accessible\r\n        accessibilityLabel={ariaLabel || accessibilityLabel}\r\n        editable={isDisabled || isReadOnly ? false : true}\r\n        w={isFullWidth ? '100%' : undefined}\r\n        {...nonLayoutProps}\r\n        {...resolvedFontFamily}\r\n        placeholderTextColor={resolvedPlaceholderTextColor}\r\n        selectionColor={resolvedSelectionColor}\r\n        underlineColorAndroid={resolvedUnderlineColorAndroid}\r\n        onKeyPress={(e: any) => {\r\n          e.persist();\r\n          onKeyPress && onKeyPress(e);\r\n        }}\r\n        onFocus={(e: any) => {\r\n          handleFocus(true, onFocus ? () => onFocus(e) : () => {});\r\n        }}\r\n        onBlur={(e: any) => {\r\n          handleFocus(false, onBlur ? () => onBlur(e) : () => {});\r\n        }}\r\n        {..._input}\r\n        ref={mergeRefs([ref, _ref, wrapperRef])}\r\n      />\r\n      {InputRightElement || rightElement\r\n        ? InputRightElement || rightElement\r\n        : null}\r\n    </Stack>\r\n  );\r\n};\r\n\r\nexport default memo(forwardRef(Input));\r\n"]}

package/lib/commonjs/components/primitives/Input/InputAddons.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InputRightAddon = exports.InputLeftAddon = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _useHasResponsiveProps = require("../../../hooks/useHasResponsiveProps");
+
+var _usePropsResolution = require("../../../hooks/useThemeProps/usePropsResolution");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { 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); }
+
+const InputLeftAddon = /*#__PURE__*/(0, _react.memo)(
+/*#__PURE__*/
+//@r
+(0, _react.forwardRef)((props, ref) => {
+  const resolvedProps = (0, _usePropsResolution.usePropsResolution)('InputLeftAddon', props); //TODO: refactor for responsive prop
+
+  if ((0, _useHasResponsiveProps.useHasResponsiveProps)(props)) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({}, resolvedProps, {
+    ref: ref
+  }), props.children);
+}));
+exports.InputLeftAddon = InputLeftAddon;
+const InputRightAddon = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const resolvedProps = (0, _usePropsResolution.usePropsResolution)('InputRightAddon', props); //TODO: refactor for responsive prop
+
+  if ((0, _useHasResponsiveProps.useHasResponsiveProps)(props)) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({}, resolvedProps, {
+    ref: ref
+  }), props.children);
+}));
+exports.InputRightAddon = InputRightAddon;
+//# sourceMappingURL=InputAddons.js.map

package/lib/commonjs/components/primitives/Input/InputAddons.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["InputAddons.tsx"],"names":["InputLeftAddon","props","ref","resolvedProps","children","InputRightAddon"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;AAEO,MAAMA,cAAc,gBAAG;AAAA;AAC5B;AACA,uBAAW,CAACC,KAAD,EAAmBC,GAAnB,KAAiC;AAC1C,QAAMC,aAAa,GAAG,4CAAmB,gBAAnB,EAAqCF,KAArC,CAAtB,CAD0C,CAE1C;;AACA,MAAI,kDAAsBA,KAAtB,CAAJ,EAAkC;AAChC,WAAO,IAAP;AACD;;AACD,sBACE,6BAAC,YAAD,eAASE,aAAT;AAAwB,IAAA,GAAG,EAAED;AAA7B,MACGD,KAAK,CAACG,QADT,CADF;AAKD,CAXD,CAF4B,CAAvB;;AAeA,MAAMC,eAAe,gBAAG,+BAC7B,uBAAW,CAACJ,KAAD,EAAmBC,GAAnB,KAAiC;AAC1C,QAAMC,aAAa,GAAG,4CAAmB,iBAAnB,EAAsCF,KAAtC,CAAtB,CAD0C,CAE1C;;AACA,MAAI,kDAAsBA,KAAtB,CAAJ,EAAkC;AAChC,WAAO,IAAP;AACD;;AACD,sBACE,6BAAC,YAAD,eAASE,aAAT;AAAwB,IAAA,GAAG,EAAED;AAA7B,MACGD,KAAK,CAACG,QADT,CADF;AAKD,CAXD,CAD6B,CAAxB","sourcesContent":["import React, { memo, forwardRef } from 'react';\r\nimport { default as Box, IBoxProps } from '../Box';\r\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\r\nimport { usePropsResolution } from '../../../hooks/useThemeProps/usePropsResolution';\r\n\r\nexport const InputLeftAddon = memo(\r\n  //@r\r\n  forwardRef((props: IBoxProps, ref?: any) => {\r\n    const resolvedProps = usePropsResolution('InputLeftAddon', props);\r\n    //TODO: refactor for responsive prop\r\n    if (useHasResponsiveProps(props)) {\r\n      return null;\r\n    }\r\n    return (\r\n      <Box {...resolvedProps} ref={ref}>\r\n        {props.children}\r\n      </Box>\r\n    );\r\n  })\r\n);\r\nexport const InputRightAddon = memo(\r\n  forwardRef((props: IBoxProps, ref?: any) => {\r\n    const resolvedProps = usePropsResolution('InputRightAddon', props);\r\n    //TODO: refactor for responsive prop\r\n    if (useHasResponsiveProps(props)) {\r\n      return null;\r\n    }\r\n    return (\r\n      <Box {...resolvedProps} ref={ref}>\r\n        {props.children}\r\n      </Box>\r\n    );\r\n  })\r\n);\r\n"]}

package/lib/commonjs/components/primitives/Input/InputAdvanced.js

@@ -0,0 +1,122 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _InputBase = _interopRequireDefault(require("./InputBase"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _useThemeProps = require("../../../hooks/useThemeProps");
+
+var _utils = require("../../../theme/tools/utils");
+
+var _interactions = require("@react-native-aria/interactions");
+
+var _utils2 = require("../../../utils");
+
+var _useHasResponsiveProps = require("../../../hooks/useHasResponsiveProps");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { 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); }
+
+const InputAdvance = ({
+  InputLeftElement,
+  InputRightElement,
+  leftElement,
+  rightElement,
+  onFocus,
+  onBlur,
+  inputProps,
+  wrapperRef,
+  ...props
+}, ref) => {
+  const inputThemeProps = {
+    isDisabled: inputProps.disabled,
+    isInvalid: inputProps.accessibilityInvalid,
+    isReadOnly: inputProps.accessibilityReadOnly,
+    isRequired: inputProps.required
+  };
+
+  if (InputLeftElement) {
+    leftElement = InputLeftElement;
+  }
+
+  if (InputRightElement) {
+    rightElement = InputRightElement;
+  }
+
+  const [isFocused, setIsFocused] = _react.default.useState(false);
+
+  const handleFocus = (focusState, callback) => {
+    setIsFocused(focusState);
+    callback();
+  };
+
+  const _ref = _react.default.useRef(null);
+
+  const {
+    isHovered
+  } = (0, _interactions.useHover)({}, _ref);
+  const resolvedProps = (0, _useThemeProps.usePropsResolution)('Input', { ...inputThemeProps,
+    ...props
+  }, {
+    isDisabled: inputThemeProps.isDisabled,
+    isHovered,
+    isFocused,
+    isInvalid: inputThemeProps.isInvalid,
+    isReadOnly: inputThemeProps.isReadOnly
+  });
+  const [layoutProps, nonLayoutProps] = (0, _utils.extractInObject)(resolvedProps, [..._utils.stylingProps.margin, ..._utils.stylingProps.border, ..._utils.stylingProps.layout, ..._utils.stylingProps.flexbox, ..._utils.stylingProps.position, ..._utils.stylingProps.background, 'shadow', 'opacity']); // Extracting baseInputProps from remaining props
+
+  const [, baseInputProps] = (0, _utils.extractInObject)(nonLayoutProps, ['variant']); //TODO: refactor for responsive prop
+
+  if ((0, _useHasResponsiveProps.useHasResponsiveProps)({ ...props,
+    InputLeftElement,
+    InputRightElement,
+    onFocus,
+    onBlur,
+    inputProps,
+    wrapperRef
+  })) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  }, layoutProps, {
+    ref: (0, _utils2.mergeRefs)([_ref, wrapperRef])
+  }), InputLeftElement || leftElement ? InputLeftElement || leftElement : null, /*#__PURE__*/_react.default.createElement(_InputBase.default, _extends({
+    inputProps: inputProps,
+    bg: "transparent"
+  }, baseInputProps, {
+    flex: 1,
+    disableFocusHandling: true,
+    ref: ref,
+    variant: "unstyled",
+    onFocus: e => {
+      handleFocus(true, onFocus ? () => onFocus(e) : () => {});
+    },
+    onBlur: e => {
+      handleFocus(false, onBlur ? () => onBlur(e) : () => {});
+    },
+    shadow: "none"
+  })), InputRightElement || rightElement ? InputRightElement || rightElement : null);
+};
+
+var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(InputAdvance));
+
+exports.default = _default;
+//# sourceMappingURL=InputAdvanced.js.map

package/lib/commonjs/components/primitives/Input/InputAdvanced.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["InputAdvanced.tsx"],"names":["InputAdvance","InputLeftElement","InputRightElement","leftElement","rightElement","onFocus","onBlur","inputProps","wrapperRef","props","ref","inputThemeProps","isDisabled","disabled","isInvalid","accessibilityInvalid","isReadOnly","accessibilityReadOnly","isRequired","required","isFocused","setIsFocused","React","useState","handleFocus","focusState","callback","_ref","useRef","isHovered","resolvedProps","layoutProps","nonLayoutProps","stylingProps","margin","border","layout","flexbox","position","background","baseInputProps","e"],"mappings":"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","sourcesContent":["import React, { memo, forwardRef } from 'react';\r\nimport InputBase from './InputBase';\r\nimport Box from '../Box';\r\nimport type { IInputProps } from './types';\r\nimport { usePropsResolution } from '../../../hooks/useThemeProps';\r\nimport { extractInObject, stylingProps } from '../../../theme/tools/utils';\r\nimport { useHover } from '@react-native-aria/interactions';\r\nimport { mergeRefs } from '../../../utils';\r\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\r\n\r\nconst InputAdvance = (\r\n  {\r\n    InputLeftElement,\r\n    InputRightElement,\r\n    leftElement,\r\n    rightElement,\r\n    onFocus,\r\n    onBlur,\r\n    inputProps,\r\n    wrapperRef,\r\n    ...props\r\n  }: IInputProps & {\r\n    inputProps: any;\r\n  },\r\n  ref: any\r\n) => {\r\n  const inputThemeProps = {\r\n    isDisabled: inputProps.disabled,\r\n    isInvalid: inputProps.accessibilityInvalid,\r\n    isReadOnly: inputProps.accessibilityReadOnly,\r\n    isRequired: inputProps.required,\r\n  };\r\n\r\n  if (InputLeftElement) {\r\n    leftElement = InputLeftElement;\r\n  }\r\n  if (InputRightElement) {\r\n    rightElement = InputRightElement;\r\n  }\r\n\r\n  const [isFocused, setIsFocused] = React.useState(false);\r\n  const handleFocus = (focusState: boolean, callback: any) => {\r\n    setIsFocused(focusState);\r\n    callback();\r\n  };\r\n\r\n  const _ref = React.useRef(null);\r\n  const { isHovered } = useHover({}, _ref);\r\n\r\n  const resolvedProps = usePropsResolution(\r\n    'Input',\r\n    {\r\n      ...inputThemeProps,\r\n      ...props,\r\n    },\r\n    {\r\n      isDisabled: inputThemeProps.isDisabled,\r\n      isHovered,\r\n      isFocused,\r\n      isInvalid: inputThemeProps.isInvalid,\r\n      isReadOnly: inputThemeProps.isReadOnly,\r\n    }\r\n  );\r\n\r\n  const [layoutProps, nonLayoutProps] = extractInObject(resolvedProps, [\r\n    ...stylingProps.margin,\r\n    ...stylingProps.border,\r\n    ...stylingProps.layout,\r\n    ...stylingProps.flexbox,\r\n    ...stylingProps.position,\r\n    ...stylingProps.background,\r\n    'shadow',\r\n    'opacity',\r\n  ]);\r\n\r\n  // Extracting baseInputProps from remaining props\r\n  const [, baseInputProps] = extractInObject(nonLayoutProps, ['variant']);\r\n\r\n  //TODO: refactor for responsive prop\r\n  if (\r\n    useHasResponsiveProps({\r\n      ...props,\r\n      InputLeftElement,\r\n      InputRightElement,\r\n      onFocus,\r\n      onBlur,\r\n      inputProps,\r\n      wrapperRef,\r\n    })\r\n  ) {\r\n    return null;\r\n  }\r\n\r\n  return (\r\n    <Box\r\n      display=\"flex\"\r\n      flexDirection=\"row\"\r\n      alignItems=\"center\"\r\n      justifyContent=\"space-between\"\r\n      {...layoutProps}\r\n      ref={mergeRefs([_ref, wrapperRef])}\r\n    >\r\n      {InputLeftElement || leftElement ? InputLeftElement || leftElement : null}\r\n      <InputBase\r\n        inputProps={inputProps}\r\n        bg=\"transparent\"\r\n        {...baseInputProps}\r\n        flex={1}\r\n        disableFocusHandling\r\n        ref={ref}\r\n        variant=\"unstyled\"\r\n        onFocus={(e: any) => {\r\n          handleFocus(true, onFocus ? () => onFocus(e) : () => {});\r\n        }}\r\n        onBlur={(e: any) => {\r\n          handleFocus(false, onBlur ? () => onBlur(e) : () => {});\r\n        }}\r\n        shadow=\"none\"\r\n      />\r\n      {InputRightElement || rightElement\r\n        ? InputRightElement || rightElement\r\n        : null}\r\n    </Box>\r\n  );\r\n};\r\n\r\nexport default memo(forwardRef(InputAdvance));\r\n"]}