{"ast":null,"code":"var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _objectWithoutProperties2=_interopRequireDefault(require(\"@babel/runtime/helpers/objectWithoutProperties\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf3=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var React=_interopRequireWildcard(require(\"react\"));var _color=_interopRequireDefault(require(\"color\"));var _Animated=_interopRequireDefault(require(\"react-native-web/dist/exports/Animated\"));var _StyleSheet=_interopRequireDefault(require(\"react-native-web/dist/exports/StyleSheet\"));var _AnimatedText=_interopRequireDefault(require(\"./Typography/AnimatedText\"));var _theming=require(\"../core/theming\");var _jsxFileName=\"/Users/satya/Workspace/Callstack/react-native-paper/src/components/HelperText.tsx\";var HelperText=function(_React$PureComponent){(0,_inherits2.default)(HelperText,_React$PureComponent);function HelperText(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,HelperText);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(HelperText)).call.apply(_getPrototypeOf2,[this].concat(args)));_this.state={shown:new _Animated.default.Value(_this.props.visible?1:0),textHeight:0};_this.showText=function(){_Animated.default.timing(_this.state.shown,{toValue:1,duration:150,useNativeDriver:true}).start();};_this.hideText=function(){_Animated.default.timing(_this.state.shown,{toValue:0,duration:180,useNativeDriver:true}).start();};_this.handleTextLayout=function(e){_this.props.onLayout&&_this.props.onLayout(e);_this.setState({textHeight:e.nativeEvent.layout.height});};return _this;}(0,_createClass2.default)(HelperText,[{key:\"componentDidUpdate\",value:function componentDidUpdate(prevProps,prevState){if(prevProps.visible!==this.props.visible||prevState.textHeight!==this.state.textHeight){if(this.props.visible){this.showText();}else{this.hideText();}}}},{key:\"render\",value:function render(){var _this$props=this.props,style=_this$props.style,type=_this$props.type,visible=_this$props.visible,theme=_this$props.theme,onLayout=_this$props.onLayout,padding=_this$props.padding,rest=(0,_objectWithoutProperties2.default)(_this$props,[\"style\",\"type\",\"visible\",\"theme\",\"onLayout\",\"padding\"]);var colors=theme.colors,dark=theme.dark;var textColor=this.props.type==='error'?colors.error:(0,_color.default)(colors.text).alpha(dark?0.7:0.54).rgb().string();return React.createElement(_AnimatedText.default,(0,_extends2.default)({onLayout:this.handleTextLayout,style:[styles.text,padding!=='none'?styles.padding:{},{color:textColor,opacity:this.state.shown,transform:visible&&type==='error'?[{translateY:this.state.shown.interpolate({inputRange:[0,1],outputRange:[-this.state.textHeight/2,0]})}]:[]},style]},rest,{__source:{fileName:_jsxFileName,lineNumber:158}}),this.props.children);}}]);return HelperText;}(React.PureComponent);HelperText.defaultProps={type:'info',padding:'normal',visible:true};var styles=_StyleSheet.default.create({text:{fontSize:12,paddingVertical:4},padding:{paddingHorizontal:12}});var _default=(0,_theming.withTheme)(HelperText);exports.default=_default;","map":{"version":3,"sources":["HelperText.tsx"],"names":["HelperText","React","PureComponent","defaultProps","type","padding","visible","state","shown","Animated","textHeight","prevProps","prevState","showText","toValue","duration","useNativeDriver","hideText","handleTextLayout","e","style","theme","onLayout","rest","colors","dark","textColor","color","styles","opacity","transform","translateY","inputRange","outputRange","StyleSheet","text","fontSize","paddingVertical","paddingHorizontal","withTheme"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport color from 'color';\nimport {\n  Animated,\n  StyleSheet,\n  StyleProp,\n  TextStyle,\n  LayoutChangeEvent,\n} from 'react-native';\nimport AnimatedText from './Typography/AnimatedText';\nimport { withTheme } from '../core/theming';\nimport { Theme, $Omit } from '../types';\n\ntype Props = $Omit<\n  $Omit<React.ComponentProps<typeof Animated.Text>, 'padding'>,\n  'type'\n> & {\n  /**\n   * Type of the helper text.\n   */\n  type: 'error' | 'info';\n  /**\n   * Whether to display the helper text.\n   */\n  visible?: boolean;\n  /**\n   * Whether to apply padding to the helper text.\n   */\n  padding?: 'none' | 'normal';\n  /**\n   * Text content of the HelperText.\n   */\n  children: React.ReactNode;\n  style?: StyleProp<TextStyle>;\n  /**\n   * @optional\n   */\n  theme: Theme;\n  /**\n   * TestID used for testing purposes\n   */\n  testID?: string;\n};\n\ntype State = {\n  shown: Animated.Value;\n  textHeight: number;\n};\n\n/**\n * Helper text is used in conjuction with input elements to provide additional hints for the user.\n *\n * <div class=\"screenshots\">\n *   <img class=\"medium\" src=\"screenshots/helper-text.gif\" />\n * </div>\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { View } from 'react-native';\n * import { HelperText, TextInput } from 'react-native-paper';\n *\n * export default class MyComponent extends React.Component {\n *   state = {\n *     text: ''\n *   };\n *\n *   render(){\n *     return (\n *       <View>\n *         <TextInput\n *           label=\"Email\"\n *           value={this.state.text}\n *           onChangeText={text => this.setState({ text })}\n *         />\n *         <HelperText\n *           type=\"error\"\n *           visible={!this.state.text.includes('@')}\n *         >\n *           Email address is invalid!\n *         </HelperText>\n *       </View>\n *     );\n *   }\n * }\n * ```\n */\nclass HelperText extends React.PureComponent<Props, State> {\n  static defaultProps: Partial<Props> = {\n    type: 'info',\n    padding: 'normal',\n    visible: true,\n  };\n\n  state = {\n    shown: new Animated.Value(this.props.visible ? 1 : 0),\n    textHeight: 0,\n  };\n\n  componentDidUpdate(prevProps: Props, prevState: State) {\n    if (\n      prevProps.visible !== this.props.visible ||\n      prevState.textHeight !== this.state.textHeight\n    ) {\n      if (this.props.visible) {\n        this.showText();\n      } else {\n        this.hideText();\n      }\n    }\n  }\n\n  private showText = () => {\n    Animated.timing(this.state.shown, {\n      toValue: 1,\n      duration: 150,\n      useNativeDriver: true,\n    }).start();\n  };\n\n  private hideText = () => {\n    Animated.timing(this.state.shown, {\n      toValue: 0,\n      duration: 180,\n      useNativeDriver: true,\n    }).start();\n  };\n\n  private handleTextLayout = (e: LayoutChangeEvent) => {\n    this.props.onLayout && this.props.onLayout(e);\n    this.setState({\n      textHeight: e.nativeEvent.layout.height,\n    });\n  };\n\n  render() {\n    const {\n      style,\n      type,\n      visible,\n      theme,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onLayout,\n      padding,\n      ...rest\n    } = this.props;\n    const { colors, dark } = theme;\n\n    const textColor =\n      this.props.type === 'error'\n        ? colors.error\n        : color(colors.text)\n            .alpha(dark ? 0.7 : 0.54)\n            .rgb()\n            .string();\n\n    return (\n      <AnimatedText\n        onLayout={this.handleTextLayout}\n        style={[\n          styles.text,\n          padding !== 'none' ? styles.padding : {},\n          {\n            color: textColor,\n            opacity: this.state.shown,\n            transform:\n              visible && type === 'error'\n                ? [\n                    {\n                      translateY: this.state.shown.interpolate({\n                        inputRange: [0, 1],\n                        outputRange: [-this.state.textHeight / 2, 0],\n                      }),\n                    },\n                  ]\n                : [],\n          },\n          style,\n        ]}\n        {...rest}\n      >\n        {this.props.children}\n      </AnimatedText>\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  text: {\n    fontSize: 12,\n    paddingVertical: 4,\n  },\n  padding: {\n    paddingHorizontal: 12,\n  },\n});\n\nexport default withTheme(HelperText);\n"]},"metadata":{},"sourceType":"script"}