@kaspernj/api-maker 1.0.253 → 1.0.254

package/package.json

@@ -16,7 +16,7 @@
     ]
   },
   "name": "@kaspernj/api-maker",
-  "version": "1.0.253",
+  "version": "1.0.254",
   "type": "module",
   "description": "",
   "main": "index.js",

package/src/bootstrap/card.jsx

@@ -13,6 +13,7 @@ export default class ApiMakerBootstrapCard extends React.PureComponent {
   }
 
   static propTypes = {
+    cardRef: PropTypes.object,
     className: PropTypes.string,
     children: PropTypes.node,
     controls: PropTypes.node,
@@ -26,6 +27,8 @@ export default class ApiMakerBootstrapCard extends React.PureComponent {
     table: PropTypes.bool.isRequired
   }
 
+  cardRef = React.createRef()
+
   constructor (props) {
     super(props)
     this.state = {
@@ -35,6 +38,7 @@ export default class ApiMakerBootstrapCard extends React.PureComponent {
 
   render () {
     const {
+      cardRef,
       children,
       className,
       controls,
@@ -50,11 +54,17 @@ export default class ApiMakerBootstrapCard extends React.PureComponent {
     } = this.props
     const {expanded} = digs(this.state, "expanded")
     const cardHeaderStyle = {display: "flex"}
+    const cardRefToUse = cardRef || this.cardRef
 
     if (!expanded) cardHeaderStyle["borderBottom"] = "0"
 
     return (
-      <div className={classNames("component-bootstrap-card", "card", "card-default", className)} data-has-footer={Boolean(footer)} ref="card" {...restProps}>
+      <div
+        className={classNames("component-bootstrap-card", "card", "card-default", className)}
+        data-has-footer={Boolean(footer)}
+        ref={cardRefToUse}
+        {...restProps}
+      >
         {(controls || expandable || header) &&
           <div className="card-header" style={cardHeaderStyle}>
             <div className="card-header-label" style={{alignSelf: "center", marginRight: "auto"}}>

package/src/inputs/attachment.jsx

@@ -4,11 +4,17 @@ import {Checkbox} from "./checkbox"
 export default class ApiMakerInputsAttachment extends BaseComponent {
   static propTypes = {
     className: PropTypes.string,
-    model: PropTypes.object.isRequired
+    model: PropTypes.object.isRequired,
+    onPurgeChanged: PropTypes.func,
+    purgeName: PropTypes.string
+  }
+
+  state = {
+    purgeChecked: false
   }
 
   render() {
-    const {checkboxComponent, className, inputProps, model, wrapperOpts, ...restProps} = this.props
+    const {attribute, checkboxComponent, className, inputProps, label, model, name, onPurgeChanged, purgeName, wrapperOpts, ...restProps} = this.props
     const CheckboxComponent = checkboxComponent || Checkbox
 
     inputProps.type = "file"
@@ -22,17 +28,19 @@ export default class ApiMakerInputsAttachment extends BaseComponent {
         }
         {this.getUrl() &&
           <div className="input-checkbox" style={{paddingTop: "15px", paddingBottom: "15px"}}>
-            <CheckboxComponent inputProps={{id: this.getPurgeInputId(), name: this.getPurgeInputName()}} />
+            <CheckboxComponent inputProps={{id: this.getPurgeInputId(), name: this.getPurgeInputName()}} onChange={this.props.onPurgeChanged} />
             <label className="checkbox-label" htmlFor={this.getPurgeInputId()}>
               {I18n.t("js.shared.delete")}
             </label>
           </div>
         }
-        <ApiMakerInput
-          defaultValue={null}
-          inputProps={inputProps}
-          model={model}
-        />
+        {!this.state.purgeChecked &&
+          <ApiMakerInput
+            defaultValue={null}
+            inputProps={inputProps}
+            model={model}
+          />
+        }
       </div>
     )
   }
@@ -53,7 +61,12 @@ export default class ApiMakerInputsAttachment extends BaseComponent {
   }
 
   getPurgeInputName() {
+    if ("purgeName" in this.props) return this.props.purgeName
+
     const {inputProps} = digs(this.props, "inputProps")
+
+    if (!inputProps.name) return null
+
     const match = inputProps.name.match(/^(.+)\[(.+?)\]$/)
     const purgeInputName = `${match[1]}[${match[2]}_purge]`
 
@@ -72,4 +85,10 @@ export default class ApiMakerInputsAttachment extends BaseComponent {
   isImage() {
     return this.getContentType()?.startsWith("image/")
   }
+
+  onPurgeChanged = (e) => {
+    this.setState({purgeChecked: digg(e, "target", "checked")})
+
+    if (this.props.onPurgeChanged) this.props.onPurgeChanged(e)
+  }
 }