Why Gemfury? Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Debian packages RPM packages NuGet packages

Repository URL to install this package:

Details    
@skava/ui / dist / state / SelectionState.js
Size: Mime:
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

const tslib_1 = require("tslib");
/**
 * @todo find an optimized understandable way to mixin...
 * also split this file probably
 */


const exotic_1 = require("exotic");

const mobx_1 = require("xmobx/mobx");
/**
 * @todo belongs in deps...
 */


exports.isSatisfiedByIsSelected = item => item.isSelected;
/**
 * props | props.list | props.options | []
 */


exports.toList = props => exotic_1.isArray(props) ? props : exotic_1.isArray(props.list) ? props.list : exotic_1.isArray(props.options) ? props.options : exotic_1.EMPTY_ARRAY;
/**
 * optimizations...
 */


exports.isDecorated = item => exotic_1.isFunction(item.onClick) && item.onClick.isDecorated === true;

exports.isEveryItemInListDecoratedWithOnClick = props => exports.toList(props).every(exports.isDecorated);
/**
 * This way we can provide the selction state in a list
 */


class SelectionState {
  constructor() {
    this.list = [];
    this.isVisible = false;
    this.props = exotic_1.EMPTY_OBJ; // yagni
    // @action setList(list: SelectableList) { this.list = list }
    // @action setProps(props: SelectableProps) { this.props = props }
  }
  /**
   * @todo @name toggleIsVisible
   */


  handleToggleVisibility() {
    this.isVisible = !this.isVisible;
  }

  setIsVisible(isVisible) {
    this.isVisible = isVisible;
  }
  /**
   * This function selects the particular item
   */


  selectItem(item) {
    item.isSelected = true;
  }
  /**
   * This function deSelects the item in the array list
   *
   * .bound because @see this.unselectList
   */


  unselectItem(item) {
    console.info('[SelectionState] unselecting item: ', item.label);
    item.isSelected = false;
  }
  /**
   * This function loops the items in the array list
   */


  unselectList(list) {
    console.info('[SelectionState] unselecting list: ', list.length);
    list.forEach(this.unselectItem);
  }
  /**
   * here we set properties on each item so we can handle each click
   */


  decorateItem(item, index) {
    console.debug('[SelectionState] decorateItem: ' + item.label);

    if (exotic_1.isFunction(item.onClick)) {
      /**
       * we put .isDecorated on this so that we can call it multiple times
       * & not double d
       */
      if (item.onClick.isDecorated === true) {
        console.debug(`[SelectionState] item is already decorated: ${item.label}`);
      } else if (exotic_1.isFunction(this.props.onChange)) {
        /**
         * onChange - (select list level)
         * onClick - item level
         */
        console.warn(`[SelectionState] already had onClick ${item.label}`);
        console.info(`[SelectionState] - adding a wrapper since we passed in onChange`); // ref

        const itemOnClick = item.onClick; // wrap

        const selectionStateItemOnClickWrappingExistingOnClick = event => {
          console.info('[SelectionState] calling onChange + itemOnClick: ', item.label);
          itemOnClick(event, item, this);
          this.props.onChange(event, item, this);
        };

        item.onClick = mobx_1.action(selectionStateItemOnClickWrappingExistingOnClick);
      } else {
        console.warn(`[SelectionState] already had onClick ${item.label} and no "onChange" was passed in`);
      }
    } else {
      const selectionStateItemOnClick = event => {
        console.info('[SelectionState] selecting item: ', item.label);
        this.unselectList(this.list);
        this.selectItem(item);

        if (exotic_1.isFunction(this.props.onChange)) {
          console.info('[SelectionState] calling onChange: ', item.label); // @todo there is no real event, need to finish standardizing

          this.props.onChange(event, item, this);
        }
      }; // for enforced actions


      item.onClick = mobx_1.action(selectionStateItemOnClick);
    } // added either way


    item.onClick.isDecorated = true;
  }

  get selectedItem() {
    // @todo Default Select Label || this.list[0]
    return this.list.find(exports.isSatisfiedByIsSelected);
  }
  /**
   * was named unSelectedListWithSelectedItem
   */


  decorateWithProps(props) {
    this.props = props; // @note - compat for skreact

    this.list = exports.toList(this.props); // @note - we can see this without logs using mobx devtools

    console.debug('[decorateWithProps]');
    console.dir(this.list);
    this.list.forEach(this.decorateItem);
  }

}

tslib_1.__decorate([mobx_1.observable.ref], SelectionState.prototype, "list", void 0);

tslib_1.__decorate([mobx_1.observable], SelectionState.prototype, "isVisible", void 0);

tslib_1.__decorate([mobx_1.action.bound], SelectionState.prototype, "handleToggleVisibility", null);

tslib_1.__decorate([mobx_1.action.bound], SelectionState.prototype, "setIsVisible", null);

tslib_1.__decorate([mobx_1.action], SelectionState.prototype, "selectItem", null);

tslib_1.__decorate([mobx_1.action.bound], SelectionState.prototype, "unselectItem", null);

tslib_1.__decorate([mobx_1.action], SelectionState.prototype, "unselectList", null);

tslib_1.__decorate([mobx_1.action.bound], SelectionState.prototype, "decorateItem", null);

tslib_1.__decorate([mobx_1.action], SelectionState.prototype, "decorateWithProps", null);

exports.SelectionState = SelectionState;

function toSelectionState(props) {
  const state = new SelectionState();
  state.decorateWithProps(props);
  return state;
}

exports.toSelectionState = toSelectionState;
exports.default = SelectionState; //# sourceMappingURL=SelectionState.js.map