@kaspernj/api-maker 1.0.431 → 1.0.432

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaspernj/api-maker",
-  "version": "1.0.431",
+  "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.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"
@@ -21,37 +22,58 @@ 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 (
       <View dataSet={{component: "api-maker/super-admin/edit-page/edit-attribute"}} style={{marginBottom: attribute.translated ? undefined : 12}}>
-        {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) =>
-          <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>
-        )}
-        {!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)}
-          />
-        }
+        {(() => {
+          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)
 }))