@hero-design/rn 7.10.2 → 7.12.0

package/src/components/PinInput/__tests__/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,1028 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rendering renders correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignContent": "flex-start",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "flexDirection": "row",
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "#292a2b",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "height": 48,
+            "justifyContent": "center",
+            "width": 40,
+          },
+          undefined,
+        ]
+      }
+      themeFocused={false}
+      themeState="default"
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#292a2b",
+              "borderColor": "#292a2b",
+              "borderRadius": 999,
+              "borderWidth": 1,
+              "height": 16,
+              "width": 16,
+            },
+            undefined,
+          ]
+        }
+        testID="pin-cell-filled-mask"
+        themeState="default"
+      />
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "marginLeft": 16,
+          },
+          undefined,
+        ]
+      }
+    />
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "#292a2b",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "height": 48,
+            "justifyContent": "center",
+            "width": 40,
+          },
+          undefined,
+        ]
+      }
+      themeFocused={false}
+      themeState="default"
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#292a2b",
+              "borderColor": "#292a2b",
+              "borderRadius": 999,
+              "borderWidth": 1,
+              "height": 16,
+              "width": 16,
+            },
+            undefined,
+          ]
+        }
+        testID="pin-cell-filled-mask"
+        themeState="default"
+      />
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "marginLeft": 16,
+          },
+          undefined,
+        ]
+      }
+    />
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "#292a2b",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "height": 48,
+            "justifyContent": "center",
+            "width": 40,
+          },
+          undefined,
+        ]
+      }
+      themeFocused={false}
+      themeState="default"
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "borderColor": "#292a2b",
+              "borderRadius": 999,
+              "borderWidth": 1,
+              "height": 16,
+              "width": 16,
+            },
+            undefined,
+          ]
+        }
+        testID="pin-cell-mask"
+        themeState="default"
+      />
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "marginLeft": 16,
+          },
+          undefined,
+        ]
+      }
+    />
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "#292a2b",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "height": 48,
+            "justifyContent": "center",
+            "width": 40,
+          },
+          undefined,
+        ]
+      }
+      themeFocused={false}
+      themeState="default"
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "borderColor": "#292a2b",
+              "borderRadius": 999,
+              "borderWidth": 1,
+              "height": 16,
+              "width": 16,
+            },
+            undefined,
+          ]
+        }
+        testID="pin-cell-mask"
+        themeState="default"
+      />
+    </View>
+  </View>
+  <TextInput
+    autoFocus={false}
+    caretHidden={true}
+    contextMenuHidden={true}
+    editable={true}
+    keyboardType="numeric"
+    maxLength={4}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    secureTextEntry={true}
+    style={
+      Array [
+        Object {
+          "height": "100%",
+          "left": 0,
+          "opacity": 0,
+          "position": "absolute",
+          "top": 0,
+          "width": 208,
+        },
+        undefined,
+      ]
+    }
+    testID="pin-hidden-input"
+    themePinLength={4}
+    value="12"
+  />
+</View>
+`;
+
+exports[`rendering renders correctly when disabled 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignContent": "flex-start",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "flexDirection": "row",
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "#bfc1c5",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "height": 48,
+            "justifyContent": "center",
+            "width": 40,
+          },
+          undefined,
+        ]
+      }
+      themeFocused={false}
+      themeState="disabled"
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#bfc1c5",
+              "borderColor": "#bfc1c5",
+              "borderRadius": 999,
+              "borderWidth": 1,
+              "height": 16,
+              "width": 16,
+            },
+            undefined,
+          ]
+        }
+        testID="pin-cell-filled-mask"
+        themeState="disabled"
+      />
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "marginLeft": 16,
+          },
+          undefined,
+        ]
+      }
+    />
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "#bfc1c5",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "height": 48,
+            "justifyContent": "center",
+            "width": 40,
+          },
+          undefined,
+        ]
+      }
+      themeFocused={false}
+      themeState="disabled"
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#bfc1c5",
+              "borderColor": "#bfc1c5",
+              "borderRadius": 999,
+              "borderWidth": 1,
+              "height": 16,
+              "width": 16,
+            },
+            undefined,
+          ]
+        }
+        testID="pin-cell-filled-mask"
+        themeState="disabled"
+      />
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "marginLeft": 16,
+          },
+          undefined,
+        ]
+      }
+    />
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "#bfc1c5",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "height": 48,
+            "justifyContent": "center",
+            "width": 40,
+          },
+          undefined,
+        ]
+      }
+      themeFocused={false}
+      themeState="disabled"
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "borderColor": "#bfc1c5",
+              "borderRadius": 999,
+              "borderWidth": 1,
+              "height": 16,
+              "width": 16,
+            },
+            undefined,
+          ]
+        }
+        testID="pin-cell-mask"
+        themeState="disabled"
+      />
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "marginLeft": 16,
+          },
+          undefined,
+        ]
+      }
+    />
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "#bfc1c5",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "height": 48,
+            "justifyContent": "center",
+            "width": 40,
+          },
+          undefined,
+        ]
+      }
+      themeFocused={false}
+      themeState="disabled"
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "borderColor": "#bfc1c5",
+              "borderRadius": 999,
+              "borderWidth": 1,
+              "height": 16,
+              "width": 16,
+            },
+            undefined,
+          ]
+        }
+        testID="pin-cell-mask"
+        themeState="disabled"
+      />
+    </View>
+  </View>
+  <TextInput
+    autoFocus={false}
+    caretHidden={true}
+    contextMenuHidden={true}
+    editable={false}
+    keyboardType="numeric"
+    maxLength={4}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    secureTextEntry={true}
+    style={
+      Array [
+        Object {
+          "height": "100%",
+          "left": 0,
+          "opacity": 0,
+          "position": "absolute",
+          "top": 0,
+          "width": 208,
+        },
+        undefined,
+      ]
+    }
+    testID="pin-hidden-input"
+    themePinLength={4}
+    value="12"
+  />
+</View>
+`;
+
+exports[`rendering renders correctly when length is 6 and secure is false 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignContent": "flex-start",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "flexDirection": "row",
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "#292a2b",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "height": 48,
+            "justifyContent": "center",
+            "width": 40,
+          },
+          undefined,
+        ]
+      }
+      themeFocused={false}
+      themeState="default"
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontFamily": "BeVietnamPro-SemiBold",
+              "fontSize": 28,
+            },
+            undefined,
+          ]
+        }
+        themeState="default"
+      >
+        1
+      </Text>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "marginLeft": 16,
+          },
+          undefined,
+        ]
+      }
+    />
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "#292a2b",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "height": 48,
+            "justifyContent": "center",
+            "width": 40,
+          },
+          undefined,
+        ]
+      }
+      themeFocused={false}
+      themeState="default"
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontFamily": "BeVietnamPro-SemiBold",
+              "fontSize": 28,
+            },
+            undefined,
+          ]
+        }
+        themeState="default"
+      >
+        2
+      </Text>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "marginLeft": 16,
+          },
+          undefined,
+        ]
+      }
+    />
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "#292a2b",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "height": 48,
+            "justifyContent": "center",
+            "width": 40,
+          },
+          undefined,
+        ]
+      }
+      themeFocused={false}
+      themeState="default"
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontFamily": "BeVietnamPro-SemiBold",
+              "fontSize": 28,
+            },
+            undefined,
+          ]
+        }
+        themeState="default"
+      >
+        3
+      </Text>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "marginLeft": 16,
+          },
+          undefined,
+        ]
+      }
+    />
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "#292a2b",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "height": 48,
+            "justifyContent": "center",
+            "width": 40,
+          },
+          undefined,
+        ]
+      }
+      themeFocused={false}
+      themeState="default"
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "borderColor": "#292a2b",
+              "borderRadius": 999,
+              "borderWidth": 1,
+              "height": 16,
+              "width": 16,
+            },
+            undefined,
+          ]
+        }
+        testID="pin-cell-mask"
+        themeState="default"
+      />
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "marginLeft": 16,
+          },
+          undefined,
+        ]
+      }
+    />
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "#292a2b",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "height": 48,
+            "justifyContent": "center",
+            "width": 40,
+          },
+          undefined,
+        ]
+      }
+      themeFocused={false}
+      themeState="default"
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "borderColor": "#292a2b",
+              "borderRadius": 999,
+              "borderWidth": 1,
+              "height": 16,
+              "width": 16,
+            },
+            undefined,
+          ]
+        }
+        testID="pin-cell-mask"
+        themeState="default"
+      />
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "marginLeft": 16,
+          },
+          undefined,
+        ]
+      }
+    />
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "#292a2b",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "height": 48,
+            "justifyContent": "center",
+            "width": 40,
+          },
+          undefined,
+        ]
+      }
+      themeFocused={false}
+      themeState="default"
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "borderColor": "#292a2b",
+              "borderRadius": 999,
+              "borderWidth": 1,
+              "height": 16,
+              "width": 16,
+            },
+            undefined,
+          ]
+        }
+        testID="pin-cell-mask"
+        themeState="default"
+      />
+    </View>
+  </View>
+  <TextInput
+    autoFocus={false}
+    caretHidden={true}
+    contextMenuHidden={true}
+    editable={true}
+    keyboardType="numeric"
+    maxLength={6}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    secureTextEntry={false}
+    style={
+      Array [
+        Object {
+          "height": "100%",
+          "left": 0,
+          "opacity": 0,
+          "position": "absolute",
+          "top": 0,
+          "width": 320,
+        },
+        undefined,
+      ]
+    }
+    testID="pin-hidden-input"
+    themePinLength={6}
+    value="123"
+  />
+</View>
+`;
+
+exports[`rendering renders correctly when there is error 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignContent": "flex-start",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "flexDirection": "row",
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "#de350b",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "height": 48,
+            "justifyContent": "center",
+            "width": 40,
+          },
+          undefined,
+        ]
+      }
+      themeFocused={false}
+      themeState="error"
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#de350b",
+              "borderColor": "#de350b",
+              "borderRadius": 999,
+              "borderWidth": 1,
+              "height": 16,
+              "width": 16,
+            },
+            undefined,
+          ]
+        }
+        testID="pin-cell-filled-mask"
+        themeState="error"
+      />
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "marginLeft": 16,
+          },
+          undefined,
+        ]
+      }
+    />
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "#de350b",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "height": 48,
+            "justifyContent": "center",
+            "width": 40,
+          },
+          undefined,
+        ]
+      }
+      themeFocused={false}
+      themeState="error"
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#de350b",
+              "borderColor": "#de350b",
+              "borderRadius": 999,
+              "borderWidth": 1,
+              "height": 16,
+              "width": 16,
+            },
+            undefined,
+          ]
+        }
+        testID="pin-cell-filled-mask"
+        themeState="error"
+      />
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "marginLeft": 16,
+          },
+          undefined,
+        ]
+      }
+    />
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "#de350b",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "height": 48,
+            "justifyContent": "center",
+            "width": 40,
+          },
+          undefined,
+        ]
+      }
+      themeFocused={false}
+      themeState="error"
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "borderColor": "#de350b",
+              "borderRadius": 999,
+              "borderWidth": 1,
+              "height": 16,
+              "width": 16,
+            },
+            undefined,
+          ]
+        }
+        testID="pin-cell-mask"
+        themeState="error"
+      />
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "marginLeft": 16,
+          },
+          undefined,
+        ]
+      }
+    />
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "#de350b",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "height": 48,
+            "justifyContent": "center",
+            "width": 40,
+          },
+          undefined,
+        ]
+      }
+      themeFocused={false}
+      themeState="error"
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "borderColor": "#de350b",
+              "borderRadius": 999,
+              "borderWidth": 1,
+              "height": 16,
+              "width": 16,
+            },
+            undefined,
+          ]
+        }
+        testID="pin-cell-mask"
+        themeState="error"
+      />
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "flexDirection": "row",
+          "paddingTop": 4,
+        },
+        undefined,
+      ]
+    }
+  >
+    <HeroIcon
+      name="circle-info"
+      style={
+        Array [
+          Object {
+            "color": "#de350b",
+            "fontSize": 16,
+          },
+          undefined,
+        ]
+      }
+      testID="pin-error-icon"
+      themeIntent="danger"
+      themeSize="xsmall"
+    />
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#de350b",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 12,
+            "paddingLeft": 4,
+          },
+          undefined,
+        ]
+      }
+    >
+      PIN is not correct
+    </Text>
+  </View>
+  <TextInput
+    autoFocus={false}
+    caretHidden={true}
+    contextMenuHidden={true}
+    editable={true}
+    keyboardType="numeric"
+    maxLength={4}
+    onBlur={[Function]}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    secureTextEntry={true}
+    style={
+      Array [
+        Object {
+          "height": "100%",
+          "left": 0,
+          "opacity": 0,
+          "position": "absolute",
+          "top": 0,
+          "width": 208,
+        },
+        undefined,
+      ]
+    }
+    testID="pin-hidden-input"
+    themePinLength={4}
+    value="12"
+  />
+</View>
+`;