Changing where Flarum listens for extensions

OakleyHippo

datitisev So I would extend the checkbox?

To get text that would be put in the new checkbox what would I use? I see this, but I don't know how to use it exactly 🙂

datitisev

OakleyHippo If you want to use the same properties, just modify its looks, you'd extend the Checkbox component and pass the existing attributes/props when you call .component()

so it'd be something like vnode.children[2] = MyCheckbox.component(vnode.children[2].props) (i think, might be .attrs)

The MyCheckbox would be a class, class MyCheckbox extends Checkbox, and you'd return something different in its view method.

OakleyHippo

datitisev vnode.children[2]

So what is this for? Because when I // Sub for vnode => view.children[2].attrs I get an error saying Cannot read property 'attrs' of undefined

datitisev

OakleyHippo With vnode.children[2] you'd be accessing the 3rd child returned by the view function. You use that to find what element you want to replace and/or retrieve its information (its attributes, classes, etc). That'd look something like this:

return <div>
    <li>Hello</li> // first child, [0]
    <li>Hi</li> // second child, [1]
    <li>Hey</li> // third child, [2]
</div>

OakleyHippo

datitisev So I'd do

class ExtumCheckbox extends Checkbox {
   function view(vnode) {
      return <myCodeForTheNewCheckbox></myCodeForTheNewCheckbox>
   }
}

clarkwinkelmann

Do you need to change all checkboxes ? If so you should extend() or override() the view method of flarum/components/Checkbox, this will make a single place to edit.

OakleyHippo

clarkwinkelmann OK, I've gotten this as @datitisev's suggestion... I took a look at the Checkbox component and copied and pasted.

import app from 'flarum/app';
import { extend } from 'flarum/extend';
import Checkbox from 'flarum/components/Checkbox';
import LoadingIndicator from 'flarum/components/LoadingIndicator';
import icon from 'flarum/helpers/icon';

export default class ExtumCheckbox extends Checkbox {
    init() {
      /**
       * Whether or not the checkbox's value is in the process of being saved.
       *
       * @type {Boolean}
       * @public
       */
      this.loading = false;
    }
  
    view() {
      let className = 'extum-checkbox ' + (this.props.state ? 'on' : 'off') + ' ' + (this.props.className || '');
      if (this.loading) className += ' loading';
      if (this.props.disabled) className += ' disabled';
  
      return (
        <label class={className}>
            <input type="checkbox"
                checked={this.props.state}
                disabled={this.props.disabled}
                onchange={m.withAttr('checked', this.onchange.bind(this))}/>
            <span>{this.props.children}</span>
        </label>
      );
    }
  
    /**
     * Get the template for the checkbox's display (tick/cross icon).
     *
     * @return {*}
     * @protected
     */
    getDisplay() {
      return this.loading
        ? LoadingIndicator.component({size: 'tiny'})
        : icon(this.props.state ? 'fas fa-check' : 'fas fa-times');
    }
  
    /**
     * Run a callback when the state of the checkbox is changed.
     *
     * @param {Boolean} checked
     * @protected
     */
    onchange(checked) {
      if (this.props.onchange) this.props.onchange(checked, this);
    }
}

However, it loads the extension page and the checkboxes, but the below image is what I see....

AHHHH WAIT, I think I know what happened...

OakleyHippo

clarkwinkelmann If I wanted to override each checkbox, how would I do so using the override method? Set the vnode to ExtumCheckbox.component(vnode.attrs)?

I have this now for the checkboxes:

override(Checkbox.prototype, 'view', function(vnode) {
    console.log(vnode);
    return ExtumCheckbox.component(vnode.props)
})

It works, but only for the appearance page.. it changes the switches to checkboxes and they won't check. However on the extensions page, they don't apply at all.

I'm assuming it's because https://github.com/flarum/core/blob/master/js/src/admin/components/ExtensionsPage.js#L51 is not created by Checkbox.component() like https://github.com/flarum/core/blob/master/js/src/admin/components/AppearancePage.js#L42 is with the Switch.component().

OakleyHippo

Just mark this as solved. I've figured out how to rewrite the Extensions Page with the advice given so I'll change the inputs, thanks everyone for the hard work 🙂

Final result:

datitisev

OakleyHippo Just as an FYI, when you extend classes, you don't ahve to copy/paste their methods unless you are changing them (or they are private and you need them). I'm assuming you only changed the view method in the Extum Checkbox class, so that's all you'd need.

OakleyHippo

datitisev I'm assuming you only changed the view method in the Extum Checkbox class, so that's all you'd need.

Yes, but as I said that does not work for the extension page because they aren't created using the Checkbox.component() method. Instead they are created based on one input, so I changed the input... but I need the whole page to do so afaik.

« Previous Page