@kaspernj/api-maker 1.0.430 → 1.0.432

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaspernj/api-maker",
-  "version": "1.0.430",
+  "version": "1.0.432",
   "type": "module",
   "description": "",
   "main": "index.js",

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

@@ -0,0 +1,80 @@
+import {memo, useMemo} from "react"
+import {StyleSheet, View} from "react-native"
+import Checkbox from "../../utils/checkbox"
+import BaseComponent from "../../base-component"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
+import {useForm} from "../../form"
+
+const styles = StyleSheet.create({
+  checkbox: {
+    marginRight: 4
+  }
+})
+
+export default memo(shapeComponent(class EditAttributeInput extends BaseComponent {
+  static propTypes = propTypesExact({
+    attributeName: PropTypes.string.isRequired,
+    id: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    model: PropTypes.object.isRequired,
+    name: PropTypes.string.isRequired
+  })
+
+  setup() {
+    const {attributeName, id, name} = this.p
+
+    this.form = useForm()
+    this.useStates({
+      checked: this.tt.defaultChecked
+    })
+
+    this.dataSet = useMemo(
+      () => ({
+        attribute: attributeName,
+        id,
+        name
+      }),
+      [attributeName, id, name]
+    )
+
+    useMemo(() => {
+      if (this.form) {
+        this.form.setValue(name, this.s.checked)
+      }
+    }, [])
+  }
+
+  defaultChecked = () => this.p.model[this.p.attributeName]() || false
+
+  render() {
+    const {dataSet} = this.tt
+    const {attributeName, label, model} = this.p
+    const {checked} = this.s
+
+    if (!(attributeName in model)) {
+      throw new Error(`${attributeName} isn't set on the resource ${model.modelClassData().name}`)
+    }
+
+    return (
+      <View dataSet={{component: "api-maker/super-admin/edit-page/edit-attribute-input"}} style={{flexDirection: "row", alignItems: "center"}}>
+        <Checkbox
+          checked={checked}
+          dataSet={dataSet}
+          label={label}
+          onCheckedChange={this.tt.onCheckedChange}
+          style={styles.checkbox}
+        />
+      </View>
+    )
+  }
+
+  onCheckedChange = (newChecked) => {
+    if (this.form) {
+      this.form.setValue(this.p.name, newChecked)
+    }
+
+    this.setState({checked: newChecked})
+  }
+}))

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

@@ -34,13 +34,20 @@ export default memo(shapeComponent(class EditAttributeContent extends BaseCompon
         id,
         model
       },
-      onChangeValue: this.tt.onChangeValue
-    }), [attribute.attribute, id, model])
+      onChangeValue: this.tt.onChangeValue,
+      value: this.s.value
+    }), [attribute.attribute, id, model, this.s.value])
 
     return attribute.content(contentArgs)
   }
 
-  defaultValue = () => this.p.model[this.p.attribute.attribute]() || ""
+  defaultValue = () => {
+    if (!(this.p.attribute.attribute in this.p.model)) {
+      throw new Error(`No attribute called ${this.p.attribute.attribute} in model ${this.p.model.modelClassData().name}`)
+    }
+
+    return this.p.model[this.p.attribute.attribute]() || ""
+  }
 
   onChangeValue = (newValue) => {
     this.setState({value: newValue})

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

@@ -42,7 +42,7 @@ export default memo(shapeComponent(class EditAttributeInput extends BaseComponen
     }
 
     return (
-      <View style={{marginBottom: 12}}>
+      <View dataSet={{component: "api-maker/super-admin/edit-page/edit-attribute-input"}}>
         <Text>{label}</Text>
         <View>
           <TextInput

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

@@ -1,5 +1,6 @@
 import BaseComponent from "../../base-component"
 import {digg} from "diggerize"
+import EditAttributeCheckbox from "./edit-attribute-checkbox"
 import EditAttributeContent from "./edit-attribute-content"
 import EditAttributeInput from "./edit-attribute-input"
 import * as inflection from "inflection"
@@ -7,6 +8,7 @@ import Locales from "shared/locales"
 import {memo} from "react"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
+import {View} from "react-native"
 import {shapeComponent} from "set-state-compare/src/shape-component.js"
 
 export default memo(shapeComponent(class EditAttribute extends BaseComponent {
@@ -20,37 +22,59 @@ export default memo(shapeComponent(class EditAttribute extends BaseComponent {
     const {attribute, model, modelClass} = this.props
     const availableLocales = Locales.availableLocales()
     const camelizedLower = digg(modelClass.modelClassData(), "camelizedLower")
+    const modelAttribute = modelClass.attributes().find((modelAttributeI) => modelAttributeI.name() == attribute.attribute)
 
     return (
-      <>
-        {attribute.content &&
-          <EditAttributeContent
-            attribute={attribute}
-            id={`${inflection.underscore(camelizedLower)}_${inflection.underscore(attribute.attribute)}`}
-            model={model}
-            name={inflection.underscore(attribute.attribute)}
-          />
-        }
-        {!attribute.content && attribute.translated && availableLocales.map((locale) =>
-          <EditAttributeInput
-            attributeName={`${attribute.attribute}${inflection.camelize(locale)}`}
-            id={`${inflection.underscore(camelizedLower)}_${inflection.underscore(attribute.attribute)}_${locale}`}
-            label={`${modelClass.humanAttributeName(attribute.attribute)} (${locale})`}
-            model={model}
-            name={`${inflection.underscore(attribute.attribute)}_${locale}`}
-            key={locale}
-          />
-        )}
-        {!attribute.content && !attribute.translated &&
-          <EditAttributeInput
-            attributeName={attribute.attribute}
-            id={`${inflection.underscore(camelizedLower)}_${inflection.underscore(attribute.attribute)}`}
-            label={modelClass.humanAttributeName(attribute.attribute)}
-            model={model}
-            name={inflection.underscore(attribute.attribute)}
-          />
-        }
-      </>
+      <View dataSet={{component: "api-maker/super-admin/edit-page/edit-attribute"}} style={{marginBottom: attribute.translated ? undefined : 12}}>
+        {(() => {
+          if (attribute.content) {
+            return (
+              <EditAttributeContent
+                attribute={attribute}
+                id={`${inflection.underscore(camelizedLower)}_${inflection.underscore(attribute.attribute)}`}
+                model={model}
+                name={inflection.underscore(attribute.attribute)}
+              />
+            )
+          } else if (attribute.translated) {
+            return (
+              <>
+                {availableLocales.map((locale) =>
+                  <View key={locale} style={{marginBottom: 12}}>
+                    <EditAttributeInput
+                      attributeName={`${attribute.attribute}${inflection.camelize(locale)}`}
+                      id={`${inflection.underscore(camelizedLower)}_${inflection.underscore(attribute.attribute)}_${locale}`}
+                      label={`${modelClass.humanAttributeName(attribute.attribute)} (${locale})`}
+                      model={model}
+                      name={`${inflection.underscore(attribute.attribute)}_${locale}`}
+                    />
+                  </View>
+                )}
+              </>
+            )
+          } else if (modelAttribute?.getColumn()?.getType() == "boolean") {
+            return (
+              <EditAttributeCheckbox
+                attributeName={attribute.attribute}
+                id={`${inflection.underscore(camelizedLower)}_${inflection.underscore(attribute.attribute)}`}
+                label={modelClass.humanAttributeName(attribute.attribute)}
+                model={model}
+                name={inflection.underscore(attribute.attribute)}
+              />
+            )
+          } else {
+            return (
+              <EditAttributeInput
+                attributeName={attribute.attribute}
+                id={`${inflection.underscore(camelizedLower)}_${inflection.underscore(attribute.attribute)}`}
+                label={modelClass.humanAttributeName(attribute.attribute)}
+                model={model}
+                name={inflection.underscore(attribute.attribute)}
+              />
+            )
+          }
+        })()}
+      </View>
     )
   }
 }))

package/src/utils/checkbox.jsx

@@ -1,5 +1,5 @@
 import BaseComponent from "../base-component"
-import {CheckBox, View} from "react-native"
+import {CheckBox, Pressable, View} from "react-native"
 import {memo} from "react"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
@@ -13,22 +13,32 @@ export default memo(shapeComponent(class ApiMakerUtilsCheckbox extends BaseCompo
 
   static propTypes = propTypesExact({
     checked: PropTypes.bool.isRequired,
+    dataSet: PropTypes.object,
     label: PropTypes.string,
-    onValueChange: PropTypes.func.isRequired
+    onCheckedChange: PropTypes.func.isRequired,
+    style: PropTypes.object
   })
 
   render() {
-    const {checked, label, onValueChange} = this.p
+    const {checked, label, onCheckedChange} = this.p
+    const actualStyle = Object.assign(
+      {flexDirection: "row", alignItems: "center"},
+      this.props.style
+    )
 
     return (
-      <View dataSet={{component: "api-maker--utils--checkbox"}} style={{flexDirection: "row", alignItems: "center"}}>
-        <CheckBox onValueChange={onValueChange} value={checked} />
+      <View dataSet={{component: "api-maker--utils--checkbox"}} style={actualStyle}>
+        <CheckBox dataSet={this.props.dataSet} onValueChange={onCheckedChange} value={checked} />
         {label &&
-          <Text style={{marginLeft: 3}}>
-            {label}
-          </Text>
+          <Pressable onPress={this.tt.onLabelPressed}>
+            <Text style={{marginLeft: 3}}>
+              {label}
+            </Text>
+          </Pressable>
         }
       </View>
     )
   }
+
+  onLabelPressed = () => this.p.onCheckedChange(!this.p.checked)
 }))