@kaspernj/api-maker 1.0.2025 → 1.0.2027

package/src/super-admin/layout/header/index.jsx

@@ -90,16 +90,16 @@ export default memo(shapeComponent(class ApiMakerSuperAdminLayoutHeader extends
     }
 
     return (
-      <View dataSet={{component: "super-admin--layout--header"}} style={headerStyle}>
-        <View dataSet={{class: "header-title-container"}}>
-          <Text style={{color: "#282a33", fontSize: 22}}>
+      <View dataSet={this.rootViewDataSet ||= {component: "super-admin--layout--header"}} style={headerStyle}>
+        <View dataSet={this.headerTitleViewDataSet ||= {class: "header-title-container"}}>
+          <Text style={this.headerTitleTextStyle ||= {color: "#282a33", fontSize: 22}}>
             {title}
           </Text>
         </View>
         {actions &&
           <View dataSet={{active: this.s.headerActionsActive, class: "header-actions-container"}} style={headerActionsContainerStyle}>
             <View
-              dataSet={{class: "header-actions"}}
+              dataSet={this.headerActionsViewDataSet ||= {class: "header-actions"}}
               ref={this.tt.headerActionsRef}
               style={headerActionsStyle}
             >
@@ -109,18 +109,22 @@ export default memo(shapeComponent(class ApiMakerSuperAdminLayoutHeader extends
         }
         {!mdUp &&
           <View
-            dataSet={{class: "burger-menu-container"}}
-            style={{
+            dataSet={this.burgerMenuContainerDataSet ||= {class: "burger-menu-container"}}
+            style={this.burgerMenuContainerStyle ||= {
               flexDirection: "row",
               marginLeft: "auto"
             }}
           >
             {actions &&
-              <Pressable dataSet={{class: "actions-link"}} onPress={this.tt.onGearsClicked} style={{marginRight: 8, fontSize: 22}}>
+              <Pressable
+                dataSet={this.actionsLinkDataSet ||= {class: "actions-link"}}
+                onPress={this.tt.onGearsClicked}
+                style={this.actionsLinkStyle ||= {marginRight: 8, fontSize: 22}}
+              >
                 <Icon name="gear" size={20} />
               </Pressable>
             }
-            <Pressable dataSet={{class: "burger-menu-link"}} onPress={onTriggerMenu}>
+            <Pressable dataSet={this.burgerMenuLinkDataSet ||= {class: "burger-menu-link"}} onPress={onTriggerMenu}>
               <Icon name="bars" size={20} />
             </Pressable>
           </View>
@@ -129,11 +133,7 @@ export default memo(shapeComponent(class ApiMakerSuperAdminLayoutHeader extends
     )
   }
 
-  onGearsClicked = () => {
-    console.log("onGearsClicked")
-
-    this.setState({headerActionsActive: !this.s.headerActionsActive})
-  }
+  onGearsClicked = () => this.setState({headerActionsActive: !this.s.headerActionsActive})
 
   onWindowMouseUp = (e) => {
     // Close the header actions menu if clicked happened outside

package/src/super-admin/layout/menu/index.jsx

@@ -85,20 +85,20 @@ export default memo(shapeComponent(class ComponentsAdminLayoutMenu extends BaseC
     }
 
     return (
-      <View dataSet={{component: "super-admin--layout--menu", triggered}} style={style}>
-        <WithDefaultStyle style={{Text: {color: "#fff"}}}>
+      <View dataSet={this.rootViewDataSet ||= {component: "super-admin--layout--menu", triggered}} style={style}>
+        <WithDefaultStyle style={this.withDefaultStyleStyle ||= {Text: {color: "#fff"}}}>
           <View
-            dataSet={{class: "menu-logo"}}
-            style={{
+            dataSet={this.menuLogoViewDataSet ||= {class: "menu-logo"}}
+            style={this.menuLogoViewStyle ||= {
               overflow: "hidden",
               marginTop: 25,
               marginRight: "auto",
               marginLeft: "auto"
             }}
           >
-            <Link dataSet={{class: "menu-logo-link"}} to={Params.withParams({})}>
+            <Link dataSet={this.menuLogoLinkDataSet ||= {class: "menu-logo-link"}} to={Params.withParams({})}>
               <Text
-                style={{
+                style={this.menuLogoLinkTextStyle ||= {
                   fontSize: 42,
                   textOverflow: "ellipsis",
                   whiteSpace: "nowrap"

package/src/table/filters/filter.jsx

@@ -30,7 +30,7 @@ export default memo(shapeComponent(class ApiMakerTableFilter extends BaseCompone
     const {a, pre, sc} = this.props
 
     return (
-      <View style={{alignItems: "center", flexDirection: "row", backgroundColor: "grey", paddingVertical: 10, paddingHorizontal: 6}}>
+      <View style={this.rootViewStyle ||= {alignItems: "center", flexDirection: "row", backgroundColor: "grey", paddingVertical: 10, paddingHorizontal: 6}}>
         <Pressable
           dataSet={{
             attribute: a,
@@ -46,7 +46,11 @@ export default memo(shapeComponent(class ApiMakerTableFilter extends BaseCompone
             {a} {sc} {pre} {v}
           </Text>
         </Pressable>
-        <Pressable dataSet={{class: "remove-filter-button"}} onPress={this.tt.onRemoveFilterPressed} style={{marginLeft: 6}}>
+        <Pressable
+          dataSet={this.removeFilterButtonDataSet ||= {class: "remove-filter-button"}}
+          onPress={this.tt.onRemoveFilterPressed}
+          style={this.removeFilterButtonStyle ||= {marginLeft: 6}}
+        >
           <Icon name="remove" />
         </Pressable>
       </View>

package/src/table/filters/index.jsx

@@ -42,7 +42,7 @@ export default memo(shapeComponent(class ApiMakerTableFilters extends BaseCompon
     const currentFilters = this.currentFilters()
 
     return (
-      <View dataSet={{class: "api-maker--table--filters"}} style={{alignItems: "flex-start"}}>
+      <View dataSet={this.rootViewDataSet ||= {class: "api-maker--table--filters"}} style={this.rootViewStyle ||= {alignItems: "flex-start"}}>
         {filter &&
           <FilterForm
             filter={filter}
@@ -78,7 +78,7 @@ export default memo(shapeComponent(class ApiMakerTableFilters extends BaseCompon
             {...filterData}
           />
         )}
-        <View className="filter-actions" style={{flexDirection: "row", marginTop: 10}}>
+        <View dataSet={this.filterActionsDataSet ||= {class: "filter-actions"}} style={this.filterActionsStyle ||= {flexDirection: "row", marginTop: 10}}>
           <button className="add-new-filter-button" onClick={this.tt.onAddFilterClicked}>
             {this.t(".add_new_filter", {defaultValue: "Add new filter"})}
           </button>

package/src/table/header-column-content.jsx

@@ -26,11 +26,11 @@ export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseC
 
     return (
       <View
-        dataSet={{
+        dataSet={this.cache("rootViewDataSet", {
           component: "api-maker/table/header-column-content",
           identifier: tableSettingColumn.identifier()
-        }}
-        style={{display: "flex", flexDirection: "row", alignItems: "center"}}
+        }, [tableSettingColumn.identifier()])}
+        style={this.rootViewStyle ||= {display: "flex", flexDirection: "row", alignItems: "center"}}
         {...columnProps}
       >
         {tableSettingColumn.hasSortKey() && query &&
@@ -38,14 +38,14 @@ export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseC
             attribute={tableSettingColumn.sortKey()}
             defaultParams={defaultParams}
             query={query}
-            style={{whiteSpace: "nowrap", overflow: "hidden"}}
+            style={this.sortLinkStyle ||= {whiteSpace: "nowrap", overflow: "hidden"}}
             textProps={{ellipsizeMode: "clip", numberOfLines: 1, style: styleForHeaderText()}}
             title={table.headerLabelForColumn(column)}
             {...this.props.sortLinkProps}
           />
         }
         {(!tableSettingColumn.hasSortKey() || !query) &&
-          <Text ellipsizeMode="clip" numberOfLines={1} style={{fontWeight: "bold"}}>
+          <Text ellipsizeMode="clip" numberOfLines={1} style={this.headerLabelStyle ||= {fontWeight: "bold"}}>
             {table.headerLabelForColumn(column)}
           </Text>
         }

package/src/table/header-column.jsx

@@ -100,12 +100,12 @@ export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseC
         {...restColumnProps}
       >
         {mdUp &&
-          <Icon name="bars" style={{marginRight: 3, fontSize: 12}} {...touchProps} />
+          <Icon name="bars" style={this.barsIconStyle ||= {marginRight: 3, fontSize: 12}} {...touchProps} />
         }
         <HeaderColumnContent column={column} table={table} tableSettingColumn={tableSettingColumn} />
         {mdUp &&
           <Animated.View
-            style={{
+            style={this.resizeColumnViewStyle ||= {
               position: "absolute",
               top: 0,
               right: 0,

package/src/table/header-select.jsx

@@ -38,15 +38,20 @@ export default memo(shapeComponent(class ApiMakerTableHeaderSelect extends BaseC
     const columnLabel = column && table.headerLabelForColumn(column)
 
     return (
-      <View dataSet={{component: "api-maker/table/header-select"}}>
+      <View dataSet={this.rootViewDataSet ||= {component: "api-maker/table/header-select"}}>
         {this.s.modalOpen &&
-          <Modal dataSet={{class: "table-header-select-modal"}} onRequestClose={this.tt.onModalRequestClose} transparent>
+          <Modal dataSet={this.modalDataSet ||= {class: "table-header-select-modal"}} onRequestClose={this.tt.onModalRequestClose} transparent>
             {this.p.preparedColumns.map(({column, tableSettingColumn}) =>
               <View
                 key={tableSettingColumn.identifier()}
-                style={{marginVertical: 5}}
+                style={this.headerColumnContentViewStyle ||= {marginVertical: 5}}
               >
-                <HeaderColumnContent column={column} table={table} tableSettingColumn={tableSettingColumn} sortLinkProps={{usePressable: true}} />
+                <HeaderColumnContent
+                  column={column}
+                  table={table}
+                  tableSettingColumn={tableSettingColumn}
+                  sortLinkProps={this.sortLinkProps ||= {usePressable: true}}
+                />
               </View>
             )}
           </Modal>

package/src/table/model-column.jsx

@@ -58,13 +58,13 @@ export default memo(shapeComponent(class ApiMakerTableModelColumn extends BaseCo
         {...restColumnProps}
       >
         {!mdUp &&
-          <View dataSet={{class: "table--column-label"}}>
-            <Text style={{fontWeight: "bold"}}>
+          <View dataSet={this.columnLabelDataSet ||= {class: "table--column-label"}}>
+            <Text style={this.columnLabelTextStyle ||= {fontWeight: "bold"}}>
               {table.headerLabelForColumn(column)}
             </Text>
           </View>
         }
-        <View dataSet={{class: "table--column-value"}}>
+        <View dataSet={this.columnValueDataSet ||= {class: "table--column-value"}}>
           {new ColumnContent({column, l, model, t, table}).content()}
         </View>
       </Column>

package/src/table/model-row.jsx

@@ -63,11 +63,11 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
         style={styleForRow({even})}
       >
         {workplace &&
-          <Column dataSet={{class: "workplace-column"}} style={styleForColumn({even, style: {width: 41}})}>
+          <Column dataSet={this.columnDataSet ||= {class: "workplace-column"}} style={styleForColumn({even, style: {width: 41}})}>
             <WorkerPluginsCheckbox
               currentWorkplace={currentWorkplace}
               model={model}
-              style={{marginHorizontal: "auto"}}
+              style={this.workerPluginsCheckboxStyle ||= {marginHorizontal: "auto"}}
             />
           </Column>
         }
@@ -75,17 +75,21 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
         <Column dataSet={{class: "actions-column"}} style={styleForColumn({even, style: {}, type: "actions"})}>
           {actionsContent && actionsContent(this.tt.modelCallbackArgs)}
           {viewPath &&
-            <Link dataSet={{class: "view-button"}} style={{marginLeft: 2, marginRight: 2}} to={viewPath}>
+            <Link dataSet={this.viewButtonDataSet ||= {class: "view-button"}} style={this.searchLinkStyle ||= {marginLeft: 2, marginRight: 2}} to={viewPath}>
               <Icon name="search" size={18} />
             </Link>
           }
           {editPath &&
-            <Link dataSet={{class: "edit-button"}} style={{marginLeft: 2, marginRight: 2}} to={editPath}>
+            <Link dataSet={this.editButtonDataSet ||= {class: "edit-button"}} style={this.editButtonStyle ||= {marginLeft: 2, marginRight: 2}} to={editPath}>
               <Icon name="pencil" size={20} />
             </Link>
           }
           {destroyEnabled && model.can("destroy") &&
-            <Pressable dataSet={{class: "destroy-button"}} style={{marginLeft: 2, marginRight: 2}} onPress={this.tt.onDestroyClicked}>
+            <Pressable
+              dataSet={this.destroyButtonDataSet ||= {class: "destroy-button"}}
+              style={this.destroyButtonStyle ||= {marginLeft: 2, marginRight: 2}}
+              onPress={this.tt.onDestroyClicked}
+            >
               <Icon name="remove" size={22} />
             </Pressable>
           }

package/src/table/settings/column-row.jsx

@@ -35,7 +35,7 @@ export default memo(shapeComponent(class ColumnRow extends BaseComponent {
     }
 
     return (
-      <View dataSet={{component: "api-maker--table--settings--column-row"}} style={{justifyContent: "center"}}>
+      <View dataSet={this.rootViewDataSet ||= {component: "api-maker--table--settings--column-row"}} style={this.rootViewStyle ||= {justifyContent: "center"}}>
         <label style={{whiteSpace: "nowrap"}}>
           <input
             className="api-maker--table--setings--column-checkbox"

package/src/table/settings/download-action.jsx

@@ -20,9 +20,9 @@ export default memo(shapeComponent(class ApiMakerTableSettingsDownloadAction ext
 
   render() {
     return (
-      <Pressable onPress={this.tt.onDownloadPress} style={{flexDirection: "row", alignItems: "center"}}>
+      <Pressable onPress={this.tt.onDownloadPress} style={this.pressableStyle ||= {flexDirection: "row", alignItems: "center"}}>
         <Icon name="download" size={20} />
-        <Text style={{marginLeft: 5}}>
+        <Text style={this.textStyle ||= {marginLeft: 5}}>
           Download
         </Text>
       </Pressable>

package/src/table/settings/index.jsx

@@ -33,10 +33,10 @@ export default memo(shapeComponent(class ApiMakerTableSettings extends BaseCompo
     const {preparedColumns} = table.s
 
     return (
-      <Modal onBackdropPress={this.p.onRequestClose} onRequestClose={this.p.onRequestClose} style={{backgroundColor: "#000"}} transparent>
+      <Modal onBackdropPress={this.p.onRequestClose} onRequestClose={this.p.onRequestClose} style={this.rootModalStyle ||= {backgroundColor: "#000"}} transparent>
         <View
-          dataSet={{class: "api-maker--table--settings"}}
-          style={{
+          dataSet={this.rootViewDataSet ||= {class: "api-maker--table--settings"}}
+          style={this.rootViewStyle ||= {
             width: "100%",
             maxWidth: 800,
             padding: 20,
@@ -44,14 +44,14 @@ export default memo(shapeComponent(class ApiMakerTableSettings extends BaseCompo
             border: "1px solid black"
           }}
         >
-          <View style={{marginBottom: 5}}>
-            <Text style={{fontSize: 16, fontWeight: "bold"}}>
+          <View style={this.settingsHeaderViewStyle ||= {marginBottom: 5}}>
+            <Text style={this.settingsHeaderTextSTyle ||= {fontSize: 16, fontWeight: "bold"}}>
               {t(".settings", {defaultValue: "Settings"})}
             </Text>
           </View>
           <DownloadAction table={table} />
-          <View style={{marginBottom: 5}}>
-            <Text style={{fontSize: 16, fontWeight: "bold"}}>
+          <View style={this.columnsHeaderViewStyle ||= {marginBottom: 5}}>
+            <Text style={this.columnsHeaderTextStyle ||= {fontSize: 16, fontWeight: "bold"}}>
               {t(".columns", {defaultValue: "Columns"})}
             </Text>
           </View>

package/src/table/table.jsx

@@ -67,10 +67,10 @@ const ListHeaderComponent = memo(shapeComponent(class ListHeaderComponent extend
             <WorkerPluginsCheckAllCheckbox
               currentWorkplace={table.s.currentWorkplace}
               query={queryWithoutPagination}
-              style={{marginHorizontal: "auto"}}
+              style={this.workerPlguinsCheckAllCheckboxStyle ||= {marginHorizontal: "auto"}}
             />
             {!mdUp &&
-              <Text style={{marginLeft: 3}}>
+              <Text style={this.selectAllFoundTextStyle ||= {marginLeft: 3}}>
                 {t(".select_all_found", {defaultValue: "Select all found"})}
               </Text>
             }
@@ -730,16 +730,16 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     const {models, qParams, query, result} = digs(this.collection, "models", "qParams", "query", "result")
 
     return (
-      <View style={{flexDirection: "row"}}>
+      <View style={this.rootViewStyle ||= {flexDirection: "row"}}>
         {controls && controls({models, qParams, query, result})}
         <Pressable dataSet={{class: "filter-button"}} onPress={this.tt.onFilterClicked}>
           <Icon name="search" size={20} />
         </Pressable>
-        <View style={{position: "relative"}}>
+        <View>
           {showSettings &&
             <Settings onRequestClose={this.tt.onRequestCloseSettings} table={this} />
           }
-          <Pressable dataSet={{class: "settings-button"}} onPress={this.tt.onSettingsClicked}>
+          <Pressable dataSet={this.settingsButtonDataSet ||= {class: "settings-button"}} onPress={this.tt.onSettingsClicked}>
             <Icon name="gear" size={20} />
           </Pressable>
         </View>
@@ -759,13 +759,13 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     if (to === 0) from = 0
 
     return (
-      <View style={{flexDirection: "row", justifyContent: "space-between", marginTop: 10}}>
-        <View dataSet={{class: "showing-counts"}} style={{flexDirection: "row"}}>
+      <View style={this.rootViewStyle ||= {flexDirection: "row", justifyContent: "space-between", marginTop: 10}}>
+        <View dataSet={this.showingCountsDataSet ||= {class: "showing-counts"}} style={this.showingCountsStyle ||= {flexDirection: "row"}}>
           <Text>
             {this.t(".showing_from_to_out_of_total", {defaultValue, from, to, total_count: totalCount})}
           </Text>
           {this.p.workplace && this.s.currentWorkplaceCount !== null &&
-            <Text style={{marginLeft: 3}}>
+            <Text style={this.xSelectedTextStyle ||= {marginLeft: 3}}>
               {this.t(".x_selected", {defaultValue: "%{selected} selected.", selected: this.s.currentWorkplaceCount})}
             </Text>
           }

package/src/utils/card.jsx

@@ -5,6 +5,7 @@ import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
 import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
 import Text from "./text"
+import View from "react-native"
 
 export default memo(shapeComponent(class ApiMakerUtilsCard extends ShapeComponent {
   static propTypes = propTypesExact({

package/src/utils/checkbox.jsx

@@ -1,6 +1,6 @@
-import BaseComponent from "../base-component"
 import {CheckBox, Pressable, View} from "react-native"
 import React, {useMemo} from "react"
+import BaseComponent from "../base-component"
 import memo from "set-state-compare/src/memo"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"

package/src/utils/checkboxes.jsx

@@ -22,16 +22,17 @@ const OptionElement = memo(shapeComponent(class OptionElement extends ShapeCompo
 
   render() {
     const {checked, inputName, option} = this.p
+    const dataSet = useMemo(() => ({
+      component: "api-maker/utils/checkboxes/option",
+      name: inputName,
+      value: option[1]
+    }), [inputName, option[1]])
 
     return (
       <View >
         <Checkbox
           checked={checked}
-          dataSet={{
-            component: "api-maker/utils/checkboxes/option",
-            name: inputName,
-            value: option[1]
-          }}
+          dataSet={dataSet}
           label={option[0]}
           onCheckedChange={this.tt.onChange}
         />
@@ -88,8 +89,8 @@ export default memo(shapeComponent(class ApiMakerUtilsCheckboxes extends ShapeCo
     const {errors} = digs(wrapperOpts, "errors")
 
     return (
-      <View dataSet={{component: "api-maker/utils/checkboxes"}}>
-        <Text style={{fontWeight: "bold"}}>
+      <View dataSet={this.rootViewDataSet ||= {component: "api-maker/utils/checkboxes"}}>
+        <Text style={this.textStyle ||= {fontWeight: "bold"}}>
           {this.tt.wrapperOpts.label}
         </Text>
         {this.props.options.map((option) =>
@@ -145,8 +146,6 @@ export default memo(shapeComponent(class ApiMakerUtilsCheckboxes extends ShapeCo
       this.setState({checkedOptions: newOptions})
     }
 
-    console.log({checkedOptions: this.s.checkedOptions})
-
     if (this.props.onChange) {
       this.p.onChange({checked, option})
     }

package/src/utils/icon.jsx

@@ -36,10 +36,6 @@ export default memo(shapeComponent(class ApiMakerUtilsIcon extends BaseComponent
       return actualStylesList
     }, [stylesList, style])
 
-    if (this.props.name == "person") {
-      console.log("Icon", {props: this.props})
-    }
-
     if (version == "FontAwesome") {
       return <FontAwesomeIcon style={actualStylesList} {...restProps} />
     } else if (version == "FontAwesome5") {

package/src/utils/invalid-feedback.jsx

@@ -12,7 +12,7 @@ export default memo(shapeComponent(class ApiMakerUtilsInvalidFeedback extends Sh
 
   render() {
     return (
-      <Text style={{color: "red"}}>
+      <Text style={this.textStyle ||= {color: "red"}}>
         {this.p.message}
       </Text>
     )

package/src/utils/modal.jsx

@@ -1,9 +1,9 @@
 import {Modal, Pressable, View} from "react-native"
+import React, {useMemo} from "react"
 import BaseComponent from "../base-component"
 import Card from "./card"
 import Icon from "../utils/icon"
 import memo from "set-state-compare/src/memo"
-import React from "react"
 import {shapeComponent} from "set-state-compare/src/shape-component"
 import useBreakpoint from "../use-breakpoint"
 
@@ -11,12 +11,14 @@ export default memo(shapeComponent(class ApiMakerUtilsComponent extends BaseComp
   render() {
     const {xs, sm} = useBreakpoint()
     const {children, dataSet, ...restProps} = this.props
-    const actualDataSet = Object.assign(
-      {
-        component: "api-maker/utils/modal"
-      },
-      dataSet
-    )
+
+    const actualDataSet = useMemo(() =>
+      Object.assign(
+        {component: "api-maker/utils/modal"},
+        dataSet
+      )
+    , [dataSet])
+
     let width, maxWidth
 
     if (xs || sm) {
@@ -26,10 +28,12 @@ export default memo(shapeComponent(class ApiMakerUtilsComponent extends BaseComp
       maxWidth = 800
     }
 
+    const cardStyle = useMemo(() => ({width, maxWidth}), [width, maxWidth])
+
     return (
       <Modal dataSet={actualDataSet} {...restProps}>
         <View
-          style={{
+          style={this.rootViewStyle ||= {
             alignItems: "center",
             justifyContent: "center",
             width: "100%",
@@ -39,7 +43,7 @@ export default memo(shapeComponent(class ApiMakerUtilsComponent extends BaseComp
         >
           <Card
             controls={this.cardHeaderControls()}
-            style={{width, maxWidth}}
+            style={cardStyle}
           >
             {children}
           </Card>
@@ -50,7 +54,7 @@ export default memo(shapeComponent(class ApiMakerUtilsComponent extends BaseComp
 
   cardHeaderControls() {
     return (
-      <Pressable onPress={this.tt.onModalClosePress} style={{marginLeft: "auto", padding: 5}}>
+      <Pressable onPress={this.tt.onModalClosePress} style={this.pressableStyle ||= {marginLeft: "auto", padding: 5}}>
         <Icon name="remove" />
       </Pressable>
     )