tf-checkout-react-native 1.0.37 → 1.0.39

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

@@ -0,0 +1,700 @@
+import PropTypes from 'prop-types'
+import React, { PureComponent } from 'react'
+import { View, TextInput, Animated, StyleSheet, Platform } from 'react-native'
+import {
+  TextPropTypes,
+  ViewPropTypes,
+  TextInputPropTypes,
+} from 'deprecated-react-native-prop-types'
+
+import Line from '../line'
+import Label from '../label'
+import Affix from '../affix'
+import Helper from '../helper'
+import Counter from '../counter'
+
+import styles from './styles'
+
+function startAnimation(animation, options, callback) {
+  Animated.timing(animation, options).start(callback)
+}
+
+function labelStateFromProps(props, state) {
+  const { placeholder, defaultValue } = props
+  const { value, receivedFocus } = state
+
+  return !!(placeholder || value || (!receivedFocus && defaultValue))
+}
+
+function errorStateFromProps(props, state) {
+  const { error } = props
+
+  return !!error
+}
+
+export default class TextField extends PureComponent {
+  static defaultProps = {
+    underlineColorAndroid: 'transparent',
+    disableFullscreenUI: true,
+    autoCapitalize: 'sentences',
+    editable: true,
+
+    animationDuration: 225,
+
+    fontSize: 16,
+    labelFontSize: 12,
+
+    tintColor: 'rgb(0, 145, 234)',
+    textColor: 'rgba(0, 0, 0, .87)',
+    baseColor: 'rgba(0, 0, 0, .38)',
+
+    errorColor: 'rgb(213, 0, 0)',
+
+    lineWidth: StyleSheet.hairlineWidth,
+    activeLineWidth: 2,
+    disabledLineWidth: 1,
+
+    lineType: 'solid',
+    disabledLineType: 'dotted',
+
+    disabled: false,
+  }
+
+  static propTypes = {
+    ...TextInputPropTypes,
+
+    animationDuration: PropTypes.number,
+
+    fontSize: PropTypes.number,
+    labelFontSize: PropTypes.number,
+
+    contentInset: PropTypes.shape({
+      top: PropTypes.number,
+      label: PropTypes.number,
+      input: PropTypes.number,
+      left: PropTypes.number,
+      right: PropTypes.number,
+      bottom: PropTypes.number,
+    }),
+
+    labelOffset: Label.propTypes.offset,
+
+    labelTextStyle: TextPropTypes.style,
+    titleTextStyle: TextPropTypes.style,
+    affixTextStyle: TextPropTypes.style,
+
+    tintColor: PropTypes.string,
+    textColor: PropTypes.string,
+    baseColor: PropTypes.string,
+
+    label: PropTypes.string,
+    title: PropTypes.string,
+
+    characterRestriction: PropTypes.number,
+
+    error: PropTypes.string,
+    errorColor: PropTypes.string,
+
+    lineWidth: PropTypes.number,
+    activeLineWidth: PropTypes.number,
+    disabledLineWidth: PropTypes.number,
+
+    lineType: Line.propTypes.lineType,
+    disabledLineType: Line.propTypes.lineType,
+
+    disabled: PropTypes.bool,
+
+    formatText: PropTypes.func,
+
+    renderLeftAccessory: PropTypes.func,
+    renderRightAccessory: PropTypes.func,
+
+    prefix: PropTypes.string,
+    suffix: PropTypes.string,
+
+    containerStyle: ViewPropTypes.style,
+    inputContainerStyle: ViewPropTypes.style,
+  }
+
+  static inputContainerStyle = styles.inputContainer
+
+  static contentInset = {
+    top: 16,
+    label: 4,
+    input: 8,
+    left: 0,
+    right: 0,
+    bottom: 8,
+  }
+
+  static labelOffset = {
+    x0: 0,
+    y0: 0,
+    x1: 0,
+    y1: 0,
+  }
+
+  static getDerivedStateFromProps({ error, value }, state) {
+    const newState = {}
+    /* Keep last received error in state */
+    if (error && error !== state.error) {
+      newState.error = error
+    }
+
+    if (value !== undefined && value !== state.value) {
+      newState.value = value
+    }
+
+    return newState
+  }
+
+  constructor(props) {
+    super(props)
+
+    this.onBlur = this.onBlur.bind(this)
+    this.onFocus = this.onFocus.bind(this)
+    this.onPress = this.focus.bind(this)
+    this.onChange = this.onChange.bind(this)
+    this.onChangeText = this.onChangeText.bind(this)
+    this.onContentSizeChange = this.onContentSizeChange.bind(this)
+    this.onFocusAnimationEnd = this.onFocusAnimationEnd.bind(this)
+
+    this.createGetter('contentInset')
+    this.createGetter('labelOffset')
+
+    this.inputRef = this.props.inputRef ?? React.createRef()
+    this.mounted = false
+    this.focused = false
+
+    const { value, error, fontSize } = this.props
+
+    const labelState = labelStateFromProps(this.props, { value }) ? 1 : 0
+    const focusState = errorStateFromProps(this.props) ? -1 : 0
+
+    this.state = {
+      value,
+      error,
+
+      focusAnimation: new Animated.Value(focusState),
+      labelAnimation: new Animated.Value(labelState),
+
+      receivedFocus: false,
+
+      height: fontSize * 1.5,
+    }
+  }
+
+  createGetter(name) {
+    this[name] = () => {
+      const { [name]: value } = this.props
+      const { [name]: defaultValue } = this.constructor
+
+      return { ...defaultValue, ...value }
+    }
+  }
+
+  componentDidMount() {
+    this.mounted = true
+  }
+
+  componentWillUnmount() {
+    this.mounted = false
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const errorState = errorStateFromProps(this.props)
+    const prevErrorState = errorStateFromProps(prevProps)
+
+    if (errorState ^ prevErrorState) {
+      this.startFocusAnimation()
+    }
+
+    const labelState = labelStateFromProps(this.props, this.state)
+    const prevLabelState = labelStateFromProps(prevProps, prevState)
+
+    if (labelState ^ prevLabelState) {
+      this.startLabelAnimation()
+    }
+  }
+
+  startFocusAnimation() {
+    const { focusAnimation } = this.state
+    const { animationDuration: duration } = this.props
+
+    const options = {
+      toValue: this.focusState(),
+      duration,
+      useNativeDriver: false,
+    }
+
+    startAnimation(focusAnimation, options, this.onFocusAnimationEnd)
+  }
+
+  startLabelAnimation() {
+    const { labelAnimation } = this.state
+    const { animationDuration: duration } = this.props
+
+    const options = {
+      toValue: this.labelState(),
+      useNativeDriver: true,
+      duration,
+    }
+
+    startAnimation(labelAnimation, options)
+  }
+
+  setNativeProps(props) {
+    const { current: input } = this.inputRef
+
+    input.setNativeProps(props)
+  }
+
+  focusState() {
+    if (errorStateFromProps(this.props)) {
+      return -1
+    }
+
+    return this.focused ? 1 : 0
+  }
+
+  labelState() {
+    if (labelStateFromProps(this.props, this.state)) {
+      return 1
+    }
+
+    return this.focused ? 1 : 0
+  }
+
+  focus() {
+    const { disabled, editable } = this.props
+    const { current: input } = this.inputRef
+
+    if (!disabled && editable) {
+      input.focus()
+    }
+  }
+
+  blur() {
+    const { current: input } = this.inputRef
+
+    input.blur()
+  }
+
+  clear() {
+    const { current: input } = this.inputRef
+
+    input.clear()
+
+    /* onChangeText is not triggered by .clear() */
+    this.onChangeText('')
+  }
+
+  value() {
+    const { defaultValue } = this.props
+
+    const value = this.isDefaultVisible() ? defaultValue : this.state.value
+
+    if (value == null) {
+      return ''
+    }
+
+    return typeof value === 'string' ? value : String(value)
+  }
+
+  setValue(value) {
+    this.setState({ value })
+  }
+
+  isFocused() {
+    const { current: input } = this.inputRef
+
+    return input.isFocused()
+  }
+
+  isRestricted() {
+    const { characterRestriction: limit } = this.props
+    const { length: count } = this.value()
+
+    return limit < count
+  }
+
+  isErrored() {
+    return errorStateFromProps(this.props)
+  }
+
+  isDefaultVisible() {
+    const { value, receivedFocus } = this.state
+    const { defaultValue } = this.props
+
+    return !receivedFocus && value == null && defaultValue != null
+  }
+
+  isPlaceholderVisible() {
+    const { placeholder } = this.props
+
+    return placeholder && !this.focused && !this.value()
+  }
+
+  isLabelActive() {
+    return this.labelState() === 1
+  }
+
+  onFocus(event) {
+    const { onFocus, clearTextOnFocus } = this.props
+    const { receivedFocus } = this.state
+
+    if (typeof onFocus === 'function') {
+      onFocus(event)
+    }
+
+    if (clearTextOnFocus) {
+      this.clear()
+    }
+
+    this.focused = true
+
+    this.startFocusAnimation()
+    this.startLabelAnimation()
+
+    if (!receivedFocus) {
+      this.setState({ receivedFocus: true, value: this.value() })
+    }
+  }
+
+  onBlur(event) {
+    const { onBlur } = this.props
+
+    if (typeof onBlur === 'function') {
+      onBlur(event)
+    }
+
+    this.focused = false
+
+    this.startFocusAnimation()
+    this.startLabelAnimation()
+  }
+
+  onChange(event) {
+    const { onChange } = this.props
+
+    if (typeof onChange === 'function') {
+      onChange(event)
+    }
+  }
+
+  onChangeText(text) {
+    const { onChangeText, formatText } = this.props
+
+    if (typeof formatText === 'function') {
+      text = formatText(text)
+    }
+
+    this.setState({ value: text })
+
+    if (typeof onChangeText === 'function') {
+      onChangeText(text)
+    }
+  }
+
+  onContentSizeChange(event) {
+    const { onContentSizeChange, fontSize } = this.props
+    const { height } = event.nativeEvent.contentSize
+
+    if (typeof onContentSizeChange === 'function') {
+      onContentSizeChange(event)
+    }
+
+    this.setState({
+      height: Math.max(
+        fontSize * 1.5,
+        Math.ceil(height) + Platform.select({ ios: 4, android: 1 })
+      ),
+    })
+  }
+
+  onFocusAnimationEnd() {
+    const { error } = this.props
+    const { error: retainedError } = this.state
+
+    if (this.mounted && !error && retainedError) {
+      this.setState({ error: null })
+    }
+  }
+
+  inputHeight() {
+    const { height: computedHeight } = this.state
+    const { multiline, fontSize, height = computedHeight } = this.props
+
+    return multiline ? height : fontSize * 1.5
+  }
+
+  inputContainerHeight() {
+    const { labelFontSize, multiline } = this.props
+    const contentInset = this.contentInset()
+
+    if (Platform.OS === 'web' && multiline) {
+      return 'auto'
+    }
+
+    return (
+      contentInset.top +
+      labelFontSize +
+      contentInset.label +
+      this.inputHeight() +
+      contentInset.input
+    )
+  }
+
+  inputProps() {
+    const store = {}
+
+    for (const key in TextInputPropTypes) {
+      if (key === 'defaultValue') {
+        continue
+      }
+
+      if (key in this.props) {
+        store[key] = this.props[key]
+      }
+    }
+
+    return store
+  }
+
+  inputStyle() {
+    const { fontSize, baseColor, textColor, disabled, multiline } = this.props
+
+    const color = disabled || this.isDefaultVisible() ? baseColor : textColor
+
+    const style = {
+      fontSize,
+      color,
+
+      height: this.inputHeight(),
+    }
+
+    if (multiline) {
+      const lineHeight = fontSize * 1.5
+      const offset = Platform.OS === 'ios' ? 2 : 0
+
+      style.height += lineHeight
+      style.transform = [
+        {
+          translateY: lineHeight + offset,
+        },
+      ]
+    }
+
+    return style
+  }
+
+  renderLabel(props) {
+    const offset = this.labelOffset()
+
+    const { label, fontSize, labelFontSize, labelTextStyle } = this.props
+
+    return (
+      <Label
+        {...props}
+        fontSize={fontSize}
+        activeFontSize={labelFontSize}
+        offset={offset}
+        label={label}
+        style={labelTextStyle}
+      />
+    )
+  }
+
+  renderLine(props) {
+    return <Line {...props} />
+  }
+
+  renderAccessory(prop) {
+    const { [prop]: renderAccessory } = this.props
+
+    return typeof renderAccessory === 'function' ? renderAccessory() : null
+  }
+
+  renderAffix(type) {
+    const { labelAnimation } = this.state
+    const {
+      [type]: affix,
+      fontSize,
+      baseColor: color,
+      affixTextStyle: style,
+    } = this.props
+
+    if (affix == null) {
+      return null
+    }
+
+    const props = {
+      type,
+      style,
+      color,
+      fontSize,
+      labelAnimation,
+    }
+
+    return <Affix {...props}>{affix}</Affix>
+  }
+
+  renderHelper() {
+    const { focusAnimation, error } = this.state
+
+    const {
+      title,
+      disabled,
+      baseColor,
+      errorColor,
+      titleTextStyle: style,
+      characterRestriction: limit,
+    } = this.props
+
+    const { length: count } = this.value()
+    const contentInset = this.contentInset()
+
+    const containerStyle = {
+      paddingLeft: contentInset.left,
+      paddingRight: contentInset.right,
+      minHeight: contentInset.bottom,
+    }
+
+    const styleProps = {
+      style,
+      baseColor,
+      errorColor,
+    }
+
+    const counterProps = {
+      ...styleProps,
+      limit,
+      count,
+    }
+
+    const helperProps = {
+      ...styleProps,
+      title,
+      error,
+      disabled,
+      focusAnimation,
+    }
+
+    return (
+      <View style={[styles.helperContainer, containerStyle]}>
+        <Helper {...helperProps} />
+        <Counter {...counterProps} />
+      </View>
+    )
+  }
+
+  renderInput() {
+    const { disabled, editable, tintColor, style: inputStyleOverrides } = this.props
+
+    const props = this.inputProps()
+    const inputStyle = this.inputStyle()
+
+    return (
+      <TextInput
+        selectionColor={tintColor}
+        {...props}
+        style={[styles.input, inputStyle, inputStyleOverrides]}
+        editable={!disabled && editable}
+        onChange={this.onChange}
+        onChangeText={this.onChangeText}
+        onContentSizeChange={this.onContentSizeChange}
+        onFocus={this.onFocus}
+        onBlur={this.onBlur}
+        value={this.value()}
+        ref={this.inputRef}
+      />
+    )
+  }
+
+  render() {
+    const { labelAnimation, focusAnimation } = this.state
+    const {
+      editable,
+      disabled,
+      lineType,
+      disabledLineType,
+      lineWidth,
+      activeLineWidth,
+      disabledLineWidth,
+      tintColor,
+      baseColor,
+      errorColor,
+      containerStyle,
+      inputContainerStyle: inputContainerStyleOverrides,
+    } = this.props
+
+    const restricted = this.isRestricted()
+    const contentInset = this.contentInset()
+
+    const inputContainerStyle = {
+      paddingTop: contentInset.top,
+      paddingRight: contentInset.right,
+      paddingBottom: contentInset.input,
+      paddingLeft: contentInset.left,
+      height: this.inputContainerHeight(),
+    }
+
+    const containerProps = {
+      style: containerStyle,
+      onStartShouldSetResponder: () => true,
+      onResponderRelease: this.onPress,
+      pointerEvents: !disabled ? 'auto' : 'none',
+    }
+
+    const inputContainerProps = {
+      style: [
+        this.constructor.inputContainerStyle,
+        inputContainerStyle,
+        inputContainerStyleOverrides,
+      ],
+    }
+
+    const styleProps = {
+      disabled,
+      restricted,
+      baseColor,
+      tintColor,
+      errorColor,
+
+      contentInset,
+
+      focusAnimation,
+      labelAnimation,
+    }
+
+    const lineProps = {
+      ...styleProps,
+
+      lineWidth,
+      activeLineWidth,
+      disabledLineWidth,
+
+      lineType,
+      disabledLineType,
+    }
+
+    return (
+      <View {...containerProps}>
+        <Animated.View {...inputContainerProps}>
+          {this.renderLine(lineProps)}
+          {this.renderAccessory('renderLeftAccessory')}
+          <View style={styles.stack} pointerEvents={editable ? 'auto' : 'none'}>
+            {this.renderLabel(styleProps)}
+            <View style={styles.row}>
+              {this.renderAffix('prefix')}
+              {this.renderInput()}
+              {this.renderAffix('suffix')}
+            </View>
+          </View>
+          {this.renderAccessory('renderRightAccessory')}
+        </Animated.View>
+        {this.renderHelper()}
+      </View>
+    )
+  }
+}

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

@@ -0,0 +1,42 @@
+import { StyleSheet, I18nManager } from 'react-native'
+
+export default StyleSheet.create({
+  inputContainer: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+  },
+
+  input: {
+    top: 2,
+    padding: 0,
+    paddingTop: 0 /* XXX: iOS has paddingTop set for multiline input */,
+    margin: 0,
+    flex: 1,
+
+    textAlign: I18nManager.isRTL ? 'right' : 'left',
+
+    includeFontPadding: false,
+    textAlignVertical: 'top',
+  },
+
+  helperContainer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'flex-start',
+  },
+
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+  },
+
+  stack: {
+    flex: 1,
+    alignSelf: 'stretch',
+  },
+
+  flex: {
+    flex: 1,
+  },
+})