@hero-design/rn 8.20.0 → 8.22.0-alpha.0

package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.spec.tsx.snap

@@ -0,0 +1,670 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
+<View
+  accessibilityState={
+    Object {
+      "disabled": false,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "opacity": 1,
+    }
+  }
+>
+  <View
+    pointerEvents="none"
+    testID="datePickerInputAndroid"
+  >
+    <View
+      pointerEvents="auto"
+      style={
+        Array [
+          Object {
+            "marginTop": 8,
+            "width": "100%",
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "backgroundColor": "#ffffff",
+              "borderRadius": 8,
+              "flexDirection": "row",
+              "padding": 16,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "borderColor": "#001f23",
+                "borderRadius": 8,
+                "borderWidth": 1,
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              Array [
+                Object {
+                  "backgroundColor": "#ffffff",
+                },
+                undefined,
+              ],
+            ]
+          }
+          testID="text-input-border"
+          themeFocused={false}
+          themeVariant="filled"
+        />
+        <View
+          pointerEvents="none"
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#ffffff",
+                "flexDirection": "row",
+                "left": 16,
+                "paddingHorizontal": 4,
+                "position": "absolute",
+                "top": -10,
+                "zIndex": 1,
+              },
+              Object {
+                "backgroundColor": "#ffffff",
+              },
+            ]
+          }
+          testID="label-container"
+        >
+          <Text
+            allowFontScaling={false}
+            style={
+              Array [
+                Object {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 12,
+                  "letterSpacing": 0.36,
+                  "lineHeight": 20,
+                },
+                Array [
+                  Object {
+                    "color": "#001f23",
+                  },
+                  Object {
+                    "backgroundColor": "#ffffff",
+                  },
+                ],
+              ]
+            }
+            testID="input-label"
+            themeFontSize="small"
+            themeFontWeight="regular"
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="filled"
+          >
+            Start date
+          </Text>
+        </View>
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "alignSelf": "stretch",
+                "flexDirection": "row",
+                "flexGrow": 2,
+                "flexShrink": 1,
+              },
+              undefined,
+            ]
+          }
+        >
+          <TextInput
+            accessibilityState={
+              Object {
+                "disabled": false,
+              }
+            }
+            allowFontScaling={false}
+            editable={true}
+            onBlur={[Function]}
+            onChangeText={[Function]}
+            onFocus={[Function]}
+            placeholder=" "
+            style={
+              Array [
+                Object {
+                  "alignSelf": "stretch",
+                  "flexGrow": 2,
+                  "fontSize": 14,
+                  "marginHorizontal": 8,
+                  "paddingVertical": 0,
+                  "textAlignVertical": "center",
+                },
+                Object {
+                  "backgroundColor": "#ffffff",
+                  "color": "#001f23",
+                },
+              ]
+            }
+            testID="text-input"
+            value="17/12/1995"
+          />
+        </View>
+        <HeroIcon
+          name="calendar-dates-outlined"
+          style={
+            Array [
+              Object {
+                "color": "#001f23",
+                "fontSize": 16,
+              },
+              undefined,
+            ]
+          }
+          testID="input-suffix"
+          themeIntent="text"
+          themeSize="xsmall"
+        />
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "minHeight": 16,
+              "paddingLeft": 16,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+                "justifyContent": "space-between",
+              },
+              undefined,
+            ]
+          }
+        />
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
+<View
+  accessibilityState={
+    Object {
+      "disabled": false,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "opacity": 1,
+    }
+  }
+>
+  <View
+    pointerEvents="none"
+    testID="datePickerInputIOS"
+  >
+    <View
+      pointerEvents="auto"
+      style={
+        Array [
+          Object {
+            "marginTop": 8,
+            "width": "100%",
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "backgroundColor": "#ffffff",
+              "borderRadius": 8,
+              "flexDirection": "row",
+              "padding": 16,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "borderColor": "#001f23",
+                "borderRadius": 8,
+                "borderWidth": 1,
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              Array [
+                Object {
+                  "backgroundColor": "#ffffff",
+                },
+                undefined,
+              ],
+            ]
+          }
+          testID="text-input-border"
+          themeFocused={false}
+          themeVariant="filled"
+        />
+        <View
+          pointerEvents="none"
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#ffffff",
+                "flexDirection": "row",
+                "left": 16,
+                "paddingHorizontal": 4,
+                "position": "absolute",
+                "top": -10,
+                "zIndex": 1,
+              },
+              Object {
+                "backgroundColor": "#ffffff",
+              },
+            ]
+          }
+          testID="label-container"
+        >
+          <Text
+            allowFontScaling={false}
+            style={
+              Array [
+                Object {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 12,
+                  "letterSpacing": 0.36,
+                  "lineHeight": 20,
+                },
+                Array [
+                  Object {
+                    "color": "#001f23",
+                  },
+                  Object {
+                    "backgroundColor": "#ffffff",
+                  },
+                ],
+              ]
+            }
+            testID="input-label"
+            themeFontSize="small"
+            themeFontWeight="regular"
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="filled"
+          >
+            Start date
+          </Text>
+        </View>
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "alignSelf": "stretch",
+                "flexDirection": "row",
+                "flexGrow": 2,
+                "flexShrink": 1,
+              },
+              undefined,
+            ]
+          }
+        >
+          <TextInput
+            accessibilityState={
+              Object {
+                "disabled": false,
+              }
+            }
+            allowFontScaling={false}
+            editable={true}
+            onBlur={[Function]}
+            onChangeText={[Function]}
+            onFocus={[Function]}
+            placeholder=" "
+            style={
+              Array [
+                Object {
+                  "alignSelf": "stretch",
+                  "flexGrow": 2,
+                  "fontSize": 14,
+                  "marginHorizontal": 8,
+                  "paddingVertical": 0,
+                  "textAlignVertical": "center",
+                },
+                Object {
+                  "backgroundColor": "#ffffff",
+                  "color": "#001f23",
+                },
+              ]
+            }
+            testID="text-input"
+            value="17/12/1995"
+          />
+        </View>
+        <HeroIcon
+          name="calendar-dates-outlined"
+          style={
+            Array [
+              Object {
+                "color": "#001f23",
+                "fontSize": 16,
+              },
+              undefined,
+            ]
+          }
+          testID="input-suffix"
+          themeIntent="text"
+          themeSize="xsmall"
+        />
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "minHeight": 16,
+              "paddingLeft": 16,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+                "justifyContent": "space-between",
+              },
+              undefined,
+            ]
+          }
+        />
+      </View>
+    </View>
+  </View>
+  <Modal
+    hardwareAccelerated={false}
+    onRequestClose={[Function]}
+    transparent={true}
+    visible={false}
+  />
+</View>
+`;
+
+exports[`DatePicker renders variant Calendar 1`] = `
+<View
+  accessibilityState={
+    Object {
+      "disabled": false,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "opacity": 1,
+    }
+  }
+>
+  <View
+    pointerEvents="none"
+    testID="datePickerCalendar"
+  >
+    <View
+      pointerEvents="auto"
+      style={
+        Array [
+          Object {
+            "marginTop": 8,
+            "width": "100%",
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "backgroundColor": "#ffffff",
+              "borderRadius": 8,
+              "flexDirection": "row",
+              "padding": 16,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "borderColor": "#001f23",
+                "borderRadius": 8,
+                "borderWidth": 1,
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              Array [
+                Object {
+                  "backgroundColor": "#ffffff",
+                },
+                undefined,
+              ],
+            ]
+          }
+          testID="text-input-border"
+          themeFocused={false}
+          themeVariant="filled"
+        />
+        <View
+          pointerEvents="none"
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#ffffff",
+                "flexDirection": "row",
+                "left": 16,
+                "paddingHorizontal": 4,
+                "position": "absolute",
+                "top": -10,
+                "zIndex": 1,
+              },
+              Object {
+                "backgroundColor": "#ffffff",
+              },
+            ]
+          }
+          testID="label-container"
+        >
+          <Text
+            allowFontScaling={false}
+            style={
+              Array [
+                Object {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 12,
+                  "letterSpacing": 0.36,
+                  "lineHeight": 20,
+                },
+                Array [
+                  Object {
+                    "color": "#001f23",
+                  },
+                  Object {
+                    "backgroundColor": "#ffffff",
+                  },
+                ],
+              ]
+            }
+            testID="input-label"
+            themeFontSize="small"
+            themeFontWeight="regular"
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="filled"
+          >
+            Start date
+          </Text>
+        </View>
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "alignSelf": "stretch",
+                "flexDirection": "row",
+                "flexGrow": 2,
+                "flexShrink": 1,
+              },
+              undefined,
+            ]
+          }
+        >
+          <TextInput
+            accessibilityState={
+              Object {
+                "disabled": false,
+              }
+            }
+            allowFontScaling={false}
+            editable={true}
+            onBlur={[Function]}
+            onChangeText={[Function]}
+            onFocus={[Function]}
+            placeholder=" "
+            style={
+              Array [
+                Object {
+                  "alignSelf": "stretch",
+                  "flexGrow": 2,
+                  "fontSize": 14,
+                  "marginHorizontal": 8,
+                  "paddingVertical": 0,
+                  "textAlignVertical": "center",
+                },
+                Object {
+                  "backgroundColor": "#ffffff",
+                  "color": "#001f23",
+                },
+              ]
+            }
+            testID="text-input"
+            value="17/12/1995"
+          />
+        </View>
+        <HeroIcon
+          name="calendar-dates-outlined"
+          style={
+            Array [
+              Object {
+                "color": "#001f23",
+                "fontSize": 16,
+              },
+              undefined,
+            ]
+          }
+          testID="input-suffix"
+          themeIntent="text"
+          themeSize="xsmall"
+        />
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "minHeight": 16,
+              "paddingLeft": 16,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+                "justifyContent": "space-between",
+              },
+              undefined,
+            ]
+          }
+        />
+      </View>
+    </View>
+  </View>
+  <Modal
+    hardwareAccelerated={false}
+    onRequestClose={[Function]}
+    transparent={true}
+    visible={false}
+  />
+</View>
+`;