tf-checkout-react-native 1.0.37 → 1.0.39

package/src/packages/rn-material-ui-textfield/components/field-filled/index.js

@@ -0,0 +1,21 @@
+import TextField from '../field'
+import styles from './styles'
+
+export default class FilledTextField extends TextField {
+  static contentInset = {
+    ...TextField.contentInset,
+
+    top: 8,
+    left: 12,
+    right: 12,
+  }
+
+  static labelOffset = {
+    ...TextField.labelOffset,
+
+    y0: -10,
+    y1: -2,
+  }
+
+  static inputContainerStyle = [TextField.inputContainerStyle, styles.inputContainer]
+}

package/src/packages/rn-material-ui-textfield/components/field-filled/styles.js

@@ -0,0 +1,10 @@
+import { StyleSheet } from 'react-native'
+
+export default StyleSheet.create({
+  inputContainer: {
+    borderTopLeftRadius: 4,
+    borderTopRightRadius: 4,
+
+    backgroundColor: 'rgb(204, 204, 204)',
+  },
+})

package/src/packages/rn-material-ui-textfield/components/field-outlined/index.js

@@ -0,0 +1,59 @@
+import React from 'react'
+import { Animated, StyleSheet } from 'react-native'
+
+import TextField from '../field'
+import Outline from '../outline'
+
+export default class OutlinedTextField extends TextField {
+  static contentInset = {
+    ...TextField.contentInset,
+
+    input: 16,
+
+    top: 0,
+    left: 12,
+    right: 12,
+  }
+
+  static labelOffset = {
+    ...TextField.labelOffset,
+
+    y0: 0,
+    y1: -10,
+  }
+
+  static defaultProps = {
+    ...TextField.defaultProps,
+
+    lineWidth: 1,
+    disabledLineWidth: StyleSheet.hairlineWidth,
+  }
+
+  constructor(props) {
+    super(props)
+
+    this.onTextLayout = this.onTextLayout.bind(this)
+    this.state.labelWidth = new Animated.Value(0)
+  }
+
+  onTextLayout({ nativeEvent: { lines } }) {
+    const { fontSize, labelFontSize } = this.props
+    const { labelWidth } = this.state
+
+    const scale = labelFontSize / fontSize
+
+    labelWidth.setValue(lines[0].width * scale)
+  }
+
+  renderLabel(props) {
+    const { onTextLayout } = this
+
+    return super.renderLabel({ ...props, onTextLayout })
+  }
+
+  renderLine(props) {
+    const { labelWidth } = this.state
+
+    return <Outline {...props} labelWidth={labelWidth} />
+  }
+}

package/src/packages/rn-material-ui-textfield/components/helper/index.js

@@ -0,0 +1,78 @@
+import PropTypes from 'prop-types'
+import React, { PureComponent } from 'react'
+import { Animated } from 'react-native'
+import { TextPropTypes } from 'deprecated-react-native-prop-types'
+
+import styles from './styles'
+
+export default class Helper extends PureComponent {
+  static propTypes = {
+    title: PropTypes.string,
+    error: PropTypes.string,
+    disabled: PropTypes.bool,
+    style: TextPropTypes.style,
+    baseColor: PropTypes.string,
+    errorColor: PropTypes.string,
+    focusAnimation: PropTypes.instanceOf(Animated.Value),
+  }
+
+  constructor(props) {
+    super(props)
+
+    const { error, focusAnimation } = this.props
+
+    const opacity = focusAnimation.interpolate({
+      inputRange: [-1, -0.5, 0],
+      outputRange: [1, 0, 1],
+      extrapolate: 'clamp',
+    })
+
+    this.state = {
+      errored: !!error,
+      opacity,
+    }
+  }
+
+  componentDidMount() {
+    const { focusAnimation } = this.props
+
+    this.listener = focusAnimation.addListener(this.onAnimation.bind(this))
+  }
+
+  componentWillUnmount() {
+    const { focusAnimation } = this.props
+
+    focusAnimation.removeListener(this.listener)
+  }
+
+  onAnimation({ value }) {
+    if (this.animationValue > -0.5 && value <= -0.5) {
+      this.setState({ errored: true })
+    }
+
+    if (this.animationValue < -0.5 && value >= -0.5) {
+      this.setState({ errored: false })
+    }
+
+    this.animationValue = value
+  }
+
+  render() {
+    const { errored, opacity } = this.state
+    const { style, title, error, disabled, baseColor, errorColor } = this.props
+
+    const text = errored ? error : title
+
+    if (text == null) {
+      return null
+    }
+
+    const textStyle = {
+      opacity,
+
+      color: !disabled && errored ? errorColor : baseColor,
+    }
+
+    return <Animated.Text style={[styles.text, style, textStyle]}>{text}</Animated.Text>
+  }
+}

package/src/packages/rn-material-ui-textfield/components/helper/styles.js

@@ -0,0 +1,12 @@
+import { StyleSheet } from 'react-native'
+
+export default StyleSheet.create({
+  text: {
+    flex: 1,
+    fontSize: 12,
+    lineHeight: 16,
+    backgroundColor: 'transparent',
+    paddingVertical: 2,
+    textAlign: 'left',
+  },
+})

package/src/packages/rn-material-ui-textfield/components/label/index.js

@@ -0,0 +1,123 @@
+import PropTypes from 'prop-types'
+import React, { PureComponent } from 'react'
+import { Animated } from 'react-native'
+import { TextPropTypes } from 'deprecated-react-native-prop-types'
+
+import styles from './styles'
+
+export default class Label extends PureComponent {
+  static defaultProps = {
+    numberOfLines: 1,
+    disabled: false,
+    restricted: false,
+  }
+
+  static propTypes = {
+    numberOfLines: PropTypes.number,
+
+    disabled: PropTypes.bool,
+    restricted: PropTypes.bool,
+
+    fontSize: PropTypes.number.isRequired,
+    activeFontSize: PropTypes.number.isRequired,
+
+    baseColor: PropTypes.string.isRequired,
+    tintColor: PropTypes.string.isRequired,
+    errorColor: PropTypes.string.isRequired,
+
+    focusAnimation: PropTypes.instanceOf(Animated.Value).isRequired,
+
+    labelAnimation: PropTypes.instanceOf(Animated.Value).isRequired,
+
+    contentInset: PropTypes.shape({
+      label: PropTypes.number,
+    }),
+
+    offset: PropTypes.shape({
+      x0: PropTypes.number,
+      y0: PropTypes.number,
+      x1: PropTypes.number,
+      y1: PropTypes.number,
+    }),
+
+    style: TextPropTypes.style,
+    label: PropTypes.string,
+  }
+
+  render() {
+    const {
+      label,
+      offset,
+      disabled,
+      restricted,
+      fontSize,
+      activeFontSize,
+      contentInset,
+      errorColor,
+      baseColor,
+      tintColor,
+      style,
+      focusAnimation,
+      labelAnimation,
+      ...props
+    } = this.props
+
+    if (label == null) {
+      return null
+    }
+
+    const color = disabled
+      ? baseColor
+      : restricted
+        ? errorColor
+        : focusAnimation.interpolate({
+            inputRange: [-1, 0, 1],
+            outputRange: [errorColor, baseColor, tintColor],
+          })
+
+    const textStyle = {
+      lineHeight: style?.lineHeight || fontSize,
+      fontSize,
+      color,
+    }
+
+    let { x0, y0, x1, y1 } = offset
+
+    y0 += activeFontSize
+    y0 += contentInset.label
+    y0 += fontSize * 0.25
+
+    const scale = labelAnimation.interpolate({
+      inputRange: [0, 1],
+      outputRange: [1, activeFontSize / fontSize],
+    })
+
+    const containerStyle = {
+      transform: [
+        {
+          translateX: labelAnimation.interpolate({
+            inputRange: [0, 1],
+            outputRange: [x0, x1],
+          }),
+        },
+        {
+          translateY: labelAnimation.interpolate({
+            inputRange: [0, 1],
+            outputRange: [y0, y1],
+          }),
+        },
+        {
+          scale,
+        },
+      ],
+    }
+
+    return (
+      <Animated.View style={[styles.container, containerStyle]}>
+        <Animated.Text style={[styles.text, style, textStyle]} {...props}>
+          {label}
+        </Animated.Text>
+      </Animated.View>
+    )
+  }
+}

package/src/packages/rn-material-ui-textfield/components/label/styles.js

@@ -0,0 +1,16 @@
+import { StyleSheet } from 'react-native'
+
+export default StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 0,
+    transformOrigin: 'left',
+    transform: [{ translateX: '-50%' }],
+  },
+
+  text: {
+    textAlign: 'left',
+    includeFontPadding: false,
+    textAlignVertical: 'top',
+  },
+})

package/src/packages/rn-material-ui-textfield/components/line/index.js

@@ -0,0 +1,117 @@
+import PropTypes from 'prop-types'
+import React, { PureComponent } from 'react'
+import { View, Animated } from 'react-native'
+
+import styles from './styles'
+
+const lineTypes = PropTypes.oneOf(['solid', 'dotted', 'dashed', 'none'])
+
+export default class Line extends PureComponent {
+  static defaultProps = {
+    lineType: 'solid',
+    disabledLineType: 'dotted',
+
+    disabled: false,
+    restricted: false,
+  }
+
+  static propTypes = {
+    lineType: lineTypes,
+    disabledLineType: lineTypes,
+
+    disabled: PropTypes.bool,
+    restricted: PropTypes.bool,
+
+    tintColor: PropTypes.string,
+    baseColor: PropTypes.string,
+    errorColor: PropTypes.string,
+
+    lineWidth: PropTypes.number,
+    activeLineWidth: PropTypes.number,
+    disabledLineWidth: PropTypes.number,
+
+    focusAnimation: PropTypes.instanceOf(Animated.Value),
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    const { lineWidth, activeLineWidth, disabledLineWidth } = props
+
+    const maxLineWidth = Math.max(lineWidth, activeLineWidth, disabledLineWidth, 1)
+
+    if (maxLineWidth !== state.maxLineWidth) {
+      return { maxLineWidth }
+    }
+
+    return null
+  }
+
+  state = { maxLineWidth: 1 }
+
+  borderProps() {
+    const {
+      disabled,
+      restricted,
+      lineWidth,
+      activeLineWidth,
+      disabledLineWidth,
+      baseColor,
+      tintColor,
+      errorColor,
+      focusAnimation,
+    } = this.props
+
+    if (disabled) {
+      return {
+        borderColor: baseColor,
+        borderWidth: disabledLineWidth,
+      }
+    }
+
+    if (restricted) {
+      return {
+        borderColor: errorColor,
+        borderWidth: activeLineWidth,
+      }
+    }
+
+    return {
+      borderColor: focusAnimation.interpolate({
+        inputRange: [-1, 0, 1],
+        outputRange: [errorColor, baseColor, tintColor],
+      }),
+
+      borderWidth: focusAnimation.interpolate({
+        inputRange: [-1, 0, 1],
+        outputRange: [activeLineWidth, lineWidth, activeLineWidth],
+      }),
+    }
+  }
+
+  render() {
+    const { maxLineWidth } = this.state
+    const { disabled, lineType, disabledLineType } = this.props
+
+    const borderStyle = disabled ? disabledLineType : lineType
+
+    if (borderStyle === 'none') {
+      return null
+    }
+
+    const [top, right, left] = Array.from(new Array(3), () => -1.5 * maxLineWidth)
+
+    const lineStyle = {
+      ...this.borderProps(),
+
+      borderStyle,
+      top,
+      right,
+      left,
+    }
+
+    return (
+      <View style={styles.container} pointerEvents="none">
+        <Animated.View style={[styles.line, lineStyle]} />
+      </View>
+    )
+  }
+}

package/src/packages/rn-material-ui-textfield/components/line/styles.js

@@ -0,0 +1,18 @@
+import { StyleSheet, Platform } from 'react-native'
+
+export default StyleSheet.create({
+  line: {
+    position: 'absolute',
+    bottom: 0,
+
+    ...Platform.select({
+      android: { borderRadius: Number.EPSILON },
+    }),
+  },
+
+  container: {
+    ...StyleSheet.absoluteFillObject,
+
+    overflow: 'hidden',
+  },
+})

package/src/packages/rn-material-ui-textfield/components/outline/index.js

@@ -0,0 +1,139 @@
+import PropTypes from 'prop-types'
+import React, { Fragment, PureComponent } from 'react'
+import { View, Animated, I18nManager } from 'react-native'
+
+import styles, { borderRadius } from './styles'
+
+export default class Line extends PureComponent {
+  static defaultProps = {
+    lineType: 'solid',
+    disabled: false,
+    restricted: false,
+  }
+
+  static propTypes = {
+    lineType: PropTypes.oneOf(['solid', 'none']),
+
+    disabled: PropTypes.bool,
+    restricted: PropTypes.bool,
+
+    tintColor: PropTypes.string,
+    baseColor: PropTypes.string,
+    errorColor: PropTypes.string,
+
+    lineWidth: PropTypes.number,
+    activeLineWidth: PropTypes.number,
+    disabledLineWidth: PropTypes.number,
+
+    focusAnimation: PropTypes.instanceOf(Animated.Value),
+    labelAnimation: PropTypes.instanceOf(Animated.Value),
+    labelWidth: PropTypes.instanceOf(Animated.Value),
+
+    contentInset: PropTypes.shape({
+      left: PropTypes.number,
+      right: PropTypes.number,
+    }),
+  }
+
+  borderProps() {
+    const {
+      disabled,
+      restricted,
+      lineType,
+      lineWidth,
+      activeLineWidth,
+      disabledLineWidth,
+      baseColor,
+      tintColor,
+      errorColor,
+      focusAnimation,
+    } = this.props
+
+    if (disabled) {
+      return {
+        borderColor: baseColor,
+        borderWidth: disabledLineWidth,
+      }
+    }
+
+    if (restricted) {
+      return {
+        borderColor: errorColor,
+        borderWidth: activeLineWidth,
+      }
+    }
+
+    return {
+      borderColor: focusAnimation.interpolate({
+        inputRange: [-1, 0, 1],
+        outputRange: [errorColor, baseColor, tintColor],
+      }),
+
+      borderWidth: focusAnimation.interpolate({
+        inputRange: [-1, 0, 1],
+        outputRange: [activeLineWidth, lineWidth, activeLineWidth],
+      }),
+
+      borderStyle: lineType,
+    }
+  }
+
+  render() {
+    const { lineType, labelWidth, labelAnimation, contentInset } = this.props
+
+    if (lineType === 'none') {
+      return null
+    }
+
+    const labelOffset = 2 * (contentInset.left - 2 * borderRadius)
+    const lineOffset = Animated.add(labelWidth, labelOffset)
+
+    const topLineContainerStyle = {
+      transform: [
+        {
+          scaleX: I18nManager.isRTL ? -1 : 1,
+        },
+        {
+          translateX: Animated.multiply(labelAnimation, lineOffset),
+        },
+      ],
+    }
+
+    const leftContainerStyle = {
+      width: contentInset.left - borderRadius,
+    }
+
+    const rightContainerStyle = {
+      width: contentInset.right - borderRadius,
+    }
+
+    const topContainerStyle = {
+      left: leftContainerStyle.width,
+      right: rightContainerStyle.width,
+    }
+
+    const lineStyle = this.borderProps()
+
+    return (
+      <Fragment>
+        <View style={[styles.topContainer, topContainerStyle]} pointerEvents="none">
+          <Animated.View style={[styles.topLineContainer, topLineContainerStyle]}>
+            <Animated.View style={[styles.borderTop, lineStyle]} />
+          </Animated.View>
+        </View>
+
+        <View style={[styles.rightContainer, rightContainerStyle]} pointerEvents="none">
+          <Animated.View style={[styles.borderRight, lineStyle]} />
+        </View>
+
+        <View style={styles.bottomContainer} pointerEvents="none">
+          <Animated.View style={[styles.borderBottom, lineStyle]} />
+        </View>
+
+        <View style={[styles.leftContainer, leftContainerStyle]} pointerEvents="none">
+          <Animated.View style={[styles.borderLeft, lineStyle]} />
+        </View>
+      </Fragment>
+    )
+  }
+}

package/src/packages/rn-material-ui-textfield/components/outline/styles.js

@@ -0,0 +1,83 @@
+import { StyleSheet, Platform } from 'react-native'
+
+export const borderRadius = 4
+
+const containerStyle = {
+  position: 'absolute',
+  overflow: 'hidden',
+}
+
+export default StyleSheet.create({
+  borderLeft: {
+    ...StyleSheet.absoluteFillObject,
+    borderRadius,
+
+    right: -borderRadius,
+    bottom: -borderRadius,
+  },
+
+  borderRight: {
+    ...StyleSheet.absoluteFillObject,
+    borderRadius,
+
+    left: -borderRadius,
+    bottom: -borderRadius,
+  },
+
+  borderBottom: {
+    ...StyleSheet.absoluteFillObject,
+    borderRadius,
+
+    top: -borderRadius,
+
+    /* XXX: Android positioning error workaround */
+    bottom: StyleSheet.hairlineWidth,
+  },
+
+  borderTop: {
+    ...StyleSheet.absoluteFillObject,
+    borderRadius,
+
+    left: -borderRadius,
+    right: -borderRadius,
+    bottom: -borderRadius,
+  },
+
+  leftContainer: {
+    ...containerStyle,
+
+    top: 0,
+    left: 0,
+    width: borderRadius,
+    height: borderRadius,
+  },
+
+  rightContainer: {
+    ...containerStyle,
+
+    top: 0,
+    right: 0,
+    height: borderRadius,
+  },
+
+  bottomContainer: {
+    ...containerStyle,
+
+    top: borderRadius - (Platform.OS === 'android' ? 0.25 : 0),
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+
+  topContainer: {
+    ...containerStyle,
+
+    top: 0,
+    height: borderRadius,
+  },
+
+  topLineContainer: {
+    ...StyleSheet.absoluteFillObject,
+    overflow: 'hidden',
+  },
+})