react-native-cross-components
Version:
Beautiful React-Native components using RN Paper by Callstack
1 lines • 5.32 kB
Source Map (JSON)
{"file":"/Users/thomas/Source/react-native-core/source/components/input/CrossEditor.tsx","mappings":";;;;;AAAA,kDAA0B;AAC1B,2DAA+D;AAC/D,uEAA6E;AAwC7E,IAAI,SAAS,GAAe,IAAI,CAAC;AAEjC;;;;;;;;;;;;;;;;GAgBG;AACH,MAAa,WAAY,SAAQ,eAAK,CAAC,SAA4B;IACjE,YAAY,KAAwB;QAClC,KAAK,CAAC,KAAK,CAAC,CAAC;IACf,CAAC;IAED,MAAM;QACJ,MAAM,UAAU,GAAG,kBACd,IAAI,CAAC,KAAK,IACb,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,IAAK,UAAkC,GAC3C,CAAC;QACpB,OAAO,CAAC,GAAG,CAAC,4BAA4B,EAAE,UAAU,CAAC,CAAC;QAEtD,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,EAAE;YACrD,MAAM,WAAW,GAAG,kBACf,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,KAAK,CAAC,SAAS,CACF,CAAC;YACxB,OAAO,CAAC,GAAG,CAAC,6BAA6B,EAAE,WAAW,CAAC,CAAC;YAExD,OAAO,CAAC,GAAG,CAAC,uCAAuC,CAAC,CAAC;YAErD,OAAO,CACL,8BAAC,wCAAa,oBACR,WAAW,IACf,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,SAAS,GAAG,IAAI,CAAC;gBACjC,uBAAuB;gBACvB,eAAe,EAAE,8BAAS,EAC1B,oBAAoB,EAAE,UAAU,EAChC,YAAY,EAAE,GAAG,EAAE;oBACjB,OAAO,CAAC,GAAG,CAAC,gCAAgC,CAAC,CAAC;oBAC9C,IAAI,CAAC,SAAS,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE;wBACxC,OAAO,CAAC,GAAG,CAAC,mCAAmC,EAAE,SAAS,CAAC,CAAC;wBAC5D,OAAO;qBACR;oBAED,uBAAuB;oBACvB,MAAM,QAAQ,GAAG,SAAS,CAAC,WAAW,EAAE,CAAC;oBACzC,OAAO,CAAC,GAAG,CAAC,yBAAyB,EAAE,QAAQ,IAAI,SAAS,CAAC,CAAC;oBAE9D,IAAI,UAAU,CAAC,YAAY,EAAE;wBAC3B,UAAU,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;wBAClC,OAAO;qBACR;yBAAM,IAAI,WAAW,IAAI,WAAW,CAAC,YAAY,EAAE;wBAClD,WAAW,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;wBACnC,OAAO;qBACR;oBAED,OAAO,CAAC,GAAG,CAAC,0BAA0B,CAAC,CAAC;gBAC1C,CAAC,IACD,CACH,CAAC;SACH;QAED,OAAO,8BAAC,8BAAS,oBAAK,UAAU,IAAE,IAAI,EAAE,UAAU,CAAC,IAAI,IAAI,CAAC;IAC9D,CAAC;CACF;AAvDD,kCAuDC;AAED,kBAAe,WAAW,CAAC","names":[],"sources":["/Users/thomas/Source/react-native-core/source/components/input/CrossEditor.tsx"],"sourcesContent":["import React from 'react';\nimport { TextInput, TextInputProps } from 'react-native-paper';\nimport { TextInputMask, TextInputMaskProps } from 'react-native-masked-text';\n\n/**\n * Properties for the {@link CrossEditor} component. Supports masking through {@link maskProps}. This allows getting the masked value.\n *\n * The `onChangeText` event will isntead export the raw value.\n *\n * Inherits react-native-paper {@link https://callstack.github.io/react-native-paper/text-input.html TextInputProps}\n */\nexport interface ICrossEditorProps extends TextInputProps {\n /**\n * Text for floating label\n * https://callstack.github.io/react-native-paper/text-input.html\n */\n label: string;\n /**\n * `True` to use error styling\n * https://callstack.github.io/react-native-paper/text-input.html\n */\n error?: boolean | undefined;\n /**\n * Visual appearence. Default value is 'outlined'\n *\n * https://callstack.github.io/react-native-paper/text-input.html\n */\n mode?: 'flat' | 'outlined' | undefined;\n /**\n * Allows masking the input.\n * \n * https://github.com/benhurott/react-native-masked-text\n * \n * @example\n * ```\n <CrossEditor\n label='Mobile'\n maskProps={{ type: 'cel-phone' }} />```\n */\n maskProps?: TextInputMaskProps | undefined;\n}\n\nlet maskInput: any | null = null;\n\n/**\n * A text input supporting mask through {@see ICrossEditorProps.maskProps}.\n * \n * When using mask the raw value will be exported in the `onChangeText` event, not the masked value.\n * \n * Default {@see ICrossEditorProps.mode mode} is 'outlined'.\n *\n * Props are {@see ICrossEditorProps}\n * \n * \n * @example\n * ```\n <CrossEditor\n label='Mobile'\n maskProps={{ type: 'cel-phone' }} />\n ```\n */\nexport class CrossEditor extends React.Component<ICrossEditorProps> {\n constructor(props: ICrossEditorProps) {\n super(props);\n }\n\n render() {\n const paperProps = {\n ...this.props,\n mode: this.props.mode || ('outlined' as 'flat' | 'outlined'),\n } as TextInputProps;\n console.log('CrossEditor paper props = ', paperProps);\n\n if (this.props.maskProps && this.props.maskProps.type) {\n const maskedProps = {\n ...this.props,\n ...this.props.maskProps,\n } as TextInputMaskProps;\n console.log('CrossEditor masked props = ', maskedProps);\n\n console.log('*** CrossEditor: render TextInputMask');\n\n return (\n <TextInputMask\n {...maskedProps}\n ref={(comp) => (maskInput = comp)}\n // @ts-ignore - bad map\n customTextInput={TextInput}\n customTextInputProps={paperProps}\n onChangeText={() => {\n console.log('**** CrossEditor: onChangeText');\n if (!maskInput || !maskInput.getRawValue) {\n console.log('TextInputMask missing getRawValue', maskInput);\n return;\n }\n\n // @ts-ignore - bad map\n const rawValue = maskInput.getRawValue();\n console.log('CrossEditor rawValue = ', rawValue || 'nothing');\n\n if (paperProps.onChangeText) {\n paperProps.onChangeText(rawValue);\n return;\n } else if (maskedProps && maskedProps.onChangeText) {\n maskedProps.onChangeText(rawValue);\n return;\n }\n\n console.log('CrossEditor: no listener');\n }}\n />\n );\n }\n\n return <TextInput {...paperProps} mode={paperProps.mode} />;\n }\n}\n\nexport default CrossEditor;\n"],"version":3}