@kaspernj/api-maker 1.0.2024 → 1.0.2026

package/src/super-admin/edit-page/edit-attribute-input.jsx

@@ -47,13 +47,21 @@ export default memo(shapeComponent(class EditAttributeInput extends BaseComponen
         <Text>{label}</Text>
         <View>
           <TextInput
-            dataSet={{
+            dataSet={this.cache("textInputDataSet", {
               attribute: attributeName,
               id,
               name
-            }}
+            }, [attributeName, id, name])}
             onChangeText={this.tt.onChangeText}
-            style={{paddingTop: 9, paddingRight: 13, paddingBottom: 9, paddingLeft: 13, borderRadius: 5, backgroundColor: "#fff", border: "1px solid #cecece"}}
+            style={this.textInputStyle ||= {
+              paddingTop: 9,
+              paddingRight: 13,
+              paddingBottom: 9,
+              paddingLeft: 13,
+              borderRadius: 5,
+              backgroundColor: "#fff",
+              border: "1px solid #cecece"
+            }}
             value={value}
           />
         </View>

package/src/super-admin/edit-page/edit-attribute.jsx

@@ -26,7 +26,10 @@ export default memo(shapeComponent(class EditAttribute extends BaseComponent {
     const modelAttribute = modelClass.attributes().find((modelAttributeI) => modelAttributeI.name() == attribute.attribute)
 
     return (
-      <View dataSet={{component: "api-maker/super-admin/edit-page/edit-attribute"}} style={{marginBottom: attribute.translated ? undefined : 12}}>
+      <View
+        dataSet={this.rootViewDataSet ||= {component: "api-maker/super-admin/edit-page/edit-attribute"}}
+        style={this.cache("rootViewStyle", {marginBottom: attribute.translated ? undefined : 12}, [attribute.translated])}
+      >
         {(() => {
           if (attribute.content) {
             return (
@@ -41,7 +44,7 @@ export default memo(shapeComponent(class EditAttribute extends BaseComponent {
             return (
               <>
                 {availableLocales.map((locale) =>
-                  <View key={locale} style={{marginBottom: 12}}>
+                  <View key={locale} style={this.localeViewStyle ||= {marginBottom: 12}}>
                     <EditAttributeInput
                       attributeName={`${attribute.attribute}${inflection.camelize(locale)}`}
                       id={`${inflection.underscore(camelizedLower)}_${inflection.underscore(attribute.attribute)}_${locale}`}

package/src/super-admin/edit-page.jsx

@@ -74,16 +74,16 @@ export default memo(shapeComponent(class ApiMakerSuperAdminEditPage extends Base
     const extraContent = this.configReader.modelConfig?.edit?.extraContentconst
 
     return (
-      <View dataSet={{class: "super-admin--edit-page"}}>
+      <View dataSet={this.rootViewDataSet ||= {class: "super-admin--edit-page"}}>
         <Form setForm={this.setStates.form}>
           {model && attributes?.map((attribute) =>
             <EditAttribute attribute={attribute} key={attribute.attribute} model={model} modelClass={modelClass} />
           )}
           {extraContent && extraContent(modelArgs)}
           <Pressable
-            dataSet={{class: "submit-button"}}
+            dataSet={this.pressableDataSet ||= {class: "submit-button"}}
             onPress={this.tt.onSubmit}
-            style={{
+            style={this.pressableStyle ||= {
               paddingTop: 18,
               paddingRight: 24,
               paddingBottom: 18,
@@ -93,7 +93,7 @@ export default memo(shapeComponent(class ApiMakerSuperAdminEditPage extends Base
               marginTop: 10
             }}
           >
-            <Text style={{color: "#fff"}}>
+            <Text style={this.buttonTextStyle ||= {color: "#fff"}}>
               Submit
             </Text>
           </Pressable>

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/column-content.jsx

@@ -73,7 +73,7 @@ export default class ApiMakerTableColumnContent {
     }
   }
 
-  presentColumnValue(value) {
+  presentColumnValue = (value) => {
     let contentText
 
     if (value instanceof Date) {
@@ -106,7 +106,7 @@ export default class ApiMakerTableColumnContent {
     return <Text>{contentText}</Text>
   }
 
-  presentDateTime({apiMakerType, value}) {
+  presentDateTime = ({apiMakerType, value}) => {
     if (!apiMakerType || apiMakerType == "time") {
       const dateTimeFormatName = this.table.props.defaultDateTimeFormatName || "time.formats.default"
 

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

@@ -1,11 +1,12 @@
-import BaseComponent from "../base-component"
+import React, {useMemo} from "react"
+import classNames from "classnames"
 import memo from "set-state-compare/src/memo"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
-import {shapeComponent} from "set-state-compare/src/shape-component"
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
 import Text from "./text"
 
-export default memo(shapeComponent(class ApiMakerUtilsCard extends BaseComponent {
+export default memo(shapeComponent(class ApiMakerUtilsCard extends ShapeComponent {
   static propTypes = propTypesExact({
     children: PropTypes.node,
     controls: PropTypes.node,
@@ -17,28 +18,34 @@ export default memo(shapeComponent(class ApiMakerUtilsCard extends BaseComponent
   render() {
     const {children, controls, dataSet, header, style} = this.props
     const {component, ...restDataSet} = dataSet || {}
-    const actualDataSet = Object.assign(
-      {component: classNames("api-maker/utils/card", component)},
-      restDataSet
-    )
-    const actualStyle = Object.assign(
-      {
-        backgroundColor: "#fff",
-        borderRadius: 15,
-        padding: 30
-      },
-      style
-    )
+
+    const actualDataSet = useMemo(() =>
+      Object.assign(
+        {component: classNames("api-maker/utils/card", component)},
+        restDataSet
+      )
+    , [component, restDataSet])
+
+    const actualStyle = useMemo(() =>
+      Object.assign(
+        {
+          backgroundColor: "#fff",
+          borderRadius: 15,
+          padding: 30
+        },
+        style
+      )
+    , [style])
 
     return (
       <View dataSet={actualDataSet} style={actualStyle}>
         {controls &&
-          <View style={{position: "absolute", top: 15, right: 15}}>
+          <View style={this.controlsViewStyle ||= {position: "absolute", top: 15, right: 15}}>
             {controls}
           </View>
         }
         {header &&
-          <Text style={{fontSize: 24}}>
+          <Text style={this.headerTextStyle ||= {fontSize: 24}}>
             {header}
           </Text>
         }

package/src/utils/checkbox.jsx

@@ -1,15 +1,17 @@
-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"
-import React from "react"
 import {shapeComponent} from "set-state-compare/src/shape-component"
 import Text from "./text"
 
 export default memo(shapeComponent(class ApiMakerUtilsCheckbox extends BaseComponent {
   static defaultProps = {
-    label: undefined
+    dataSet: null,
+    label: undefined,
+    style: null
   }
 
   static propTypes = propTypesExact({
@@ -38,28 +40,19 @@ export default memo(shapeComponent(class ApiMakerUtilsCheckbox extends BaseCompo
 
   render() {
     const {isChecked} = this.tt
-    const {label} = this.p
-    const {dataSet} = this.props
-    const actualStyle = Object.assign(
-      {flexDirection: "row", alignItems: "center"},
-      this.props.style
-    )
-    const actualDataSet = Object.assign(
-      {
-        checked: isChecked
-      },
-      dataSet
-    )
+    const {dataSet, label, style} = this.p
+    const actualStyle = useMemo(() => Object.assign({flexDirection: "row", alignItems: "center"}, style), [style])
+    const actualDataSet = useMemo(() => Object.assign({checked: isChecked}, dataSet), [dataSet, isChecked])
 
     return (
       <View
-        dataSet={{component: "api-maker/utils/checkbox"}}
+        dataSet={this.viewContainerDataSet ||= {component: "api-maker/utils/checkbox"}}
         style={actualStyle}
       >
         <CheckBox dataSet={actualDataSet} onValueChange={this.tt.onValueChange} value={isChecked} />
         {label &&
           <Pressable onPress={this.tt.onLabelPressed}>
-            <Text style={{marginLeft: 3}}>
+            <Text style={this.textStyle ||= {marginLeft: 3}}>
               {label}
             </Text>
           </Pressable>

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") {