chore: destructure options

Author: hgray-instawork

src/components/hv-date-field/field/index.tsx

@@ -21,6 +21,7 @@ export default (props: Props) => {
     stylesheets,
     value,
   } = props;
+  const { pressedSelected, selected } = options;
   // Styles selected based on pressed state of the field.
   const [pressed, setPressed] = useState(false);
 
@@ -34,9 +35,10 @@ export default (props: Props) => {
 
   const labelStyle: StyleSheetType = StyleSheet.flatten(
     useStyleProp(element, stylesheets, {
-      ...options,
       focused,
       pressed,
+      pressedSelected,
+      selected,
       styleAttr: 'field-text-style',
     }),
   );

src/components/hv-image/index.tsx

@@ -13,12 +13,12 @@ import { useProps } from 'hyperview/src/services';
 const HvImage = (props: HvComponentProps) => {
   // eslint-disable-next-line react/destructuring-assignment
   const { element, onUpdate, options, stylesheets } = props;
-  const { skipHref } = options || {};
+  const { screenUrl, skipHref } = options;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const imageProps: Record<string, any> = {};
   let source = element.getAttribute('source');
   if (source) {
-    source = urlParse(source, options.screenUrl, true).toString();
+    source = urlParse(source, screenUrl, true).toString();
     imageProps.source = { uri: source };
   }
   const componentProps = {

src/components/hv-picker-field/field-label/index.tsx

@@ -12,13 +12,15 @@ import { useStyleProp } from 'hyperview/src/services';
 export default (props: Props) => {
   // eslint-disable-next-line react/destructuring-assignment
   const { element, focused, pressed, options, stylesheets, value } = props;
+  const { pressedSelected, selected } = options;
   const placeholder = element.getAttribute('placeholder');
   const placeholderTextColor = element.getAttribute('placeholderTextColor');
   const style: StyleSheetType = StyleSheet.flatten(
     useStyleProp(element, stylesheets, {
-      ...options,
       focused,
       pressed,
+      pressedSelected,
+      selected,
       styleAttr: 'field-text-style',
     }),
   );

src/components/hv-picker-field/index.ios.tsx

@@ -26,6 +26,7 @@ import { View } from 'react-native';
 const HvPickerField = (props: HvComponentProps) => {
   // eslint-disable-next-line react/destructuring-assignment
   const { element, onUpdate, options, stylesheets } = props;
+  const { focused, pressed, pressedSelected, selected } = options;
 
   const getPickerInitialValue = (): string => {
     const value = getValue();
@@ -143,7 +144,10 @@ const HvPickerField = (props: HvComponentProps) => {
   const isFocused = (): boolean => element.getAttribute('focused') === 'true';
 
   const style: Array<StyleSheet> = useStyleProp(element, stylesheets, {
-    ...options,
+    focused,
+    pressed,
+    pressedSelected,
+    selected,
     styleAttr: 'field-text-style',
   });
   const { testID, accessibilityLabel } = createTestProps(element);

src/components/hv-picker-field/index.tsx

@@ -24,6 +24,7 @@ import { View } from 'react-native';
 const HvPickerField = (props: HvComponentProps) => {
   // eslint-disable-next-line react/destructuring-assignment
   const { element, onUpdate, options, stylesheets } = props;
+  const { focused, pressed, pressedSelected, selected } = options;
 
   /**
    * Returns a string representing the value in the field.
@@ -94,7 +95,10 @@ const HvPickerField = (props: HvComponentProps) => {
   };
 
   const style: Array<StyleSheet> = useStyleProp(element, stylesheets, {
-    ...options,
+    focused,
+    pressed,
+    pressedSelected,
+    selected,
     styleAttr: 'field-text-style',
   });
   const { testID, accessibilityLabel } = createTestProps(element);
@@ -108,7 +112,10 @@ const HvPickerField = (props: HvComponentProps) => {
   }
 
   const fieldStyle: Array<StyleSheet> = useStyleProp(element, stylesheets, {
-    ...options,
+    focused,
+    pressed,
+    pressedSelected,
+    selected,
     styleAttr: 'field-style',
   });
 

src/components/hv-view/View.tsx

@@ -26,6 +26,8 @@ export default (props: ViewProps) => {
     options,
     stylesheets,
   } = props;
+  const { focused, pressed, pressedSelected, selected, styleAttr } = options;
+
   /**
    * Useful when you want keyboard avoiding behavior in non-scrollable views.
    * Note: Android has built-in support for avoiding keyboard.

src/components/hv-view/index.tsx

@@ -21,6 +21,7 @@ import { useStyleProp } from 'hyperview/src/services';
 const HvView = (props: HvComponentProps) => {
   // eslint-disable-next-line react/destructuring-assignment
   const { element, onUpdate, options, stylesheets } = props;
+  const { focused, pressed, pressedSelected, selected, styleAttr } = options;
 
   const getAttributes = (): Attributes => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -42,11 +43,13 @@ const HvView = (props: HvComponentProps) => {
     return textFields.length > 0;
   };
 
-  const style = (useStyleProp(
-    element,
-    stylesheets,
-    options,
-  ) as unknown) as ViewStyle;
+  const style = (useStyleProp(element, stylesheets, {
+    focused,
+    pressed,
+    pressedSelected,
+    selected,
+    styleAttr,
+  }) as unknown) as ViewStyle;
 
   const getCommonProps = (): CommonProps => {
     // TODO: fix type
@@ -64,7 +67,10 @@ const HvView = (props: HvComponentProps) => {
   };
 
   const containerStyle = useStyleProp(element, stylesheets, {
-    ...options,
+    focused,
+    pressed,
+    pressedSelected,
+    selected,
     styleAttr: ATTRIBUTES.CONTENT_CONTAINER_STYLE,
   });
 

src/core/components/modal/index.tsx

@@ -42,7 +42,10 @@ export default (props: Props): JSX.Element => {
   const contentOpacity = useRef(new Animated.Value(0)).current;
 
   const style: Array<StyleSheetType> = useStyleProp(element, stylesheets, {
-    ...options,
+    focused,
+    pressed,
+    pressedSelected,
+    selected,
     styleAttr: 'modal-style',
   });
 
@@ -51,7 +54,10 @@ export default (props: Props): JSX.Element => {
 
   const overlayStyle = StyleSheet.flatten(
     useStyleProp(element, stylesheets, {
-      ...options,
+      focused,
+      pressed,
+      pressedSelected,
+      selected,
       styleAttr: 'modal-overlay-style',
     }),
   );

src/core/components/modal/modal-button/index.tsx

@@ -11,11 +11,14 @@ import { useStyleProp } from 'hyperview/src/services';
 export default (props: Props) => {
   // eslint-disable-next-line react/destructuring-assignment
   const { element, label, onPress, options, stylesheets } = props;
+  const { focused, pressedSelected, selected } = options;
   const [pressed, setPressed] = useState(false);
 
   const style: Array<StyleSheet> = useStyleProp(element, stylesheets, {
-    ...options,
+    focused,
     pressed,
+    pressedSelected,
+    selected,
     styleAttr: 'modal-text-style',
   });