Repository URL to install this package:
Version:
0.9.6 ▾
|
"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
/**
* @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 = exotic_1.EMPTY_ARRAY;
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}`);
}
/**
* onChange - (select list level)
* onClick - item level
*/
else if (exotic_1.isFunction(this.props.onChange)) {
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);
}
}
__decorate([
mobx_1.observable.ref
], SelectionState.prototype, "list", void 0);
__decorate([
mobx_1.observable
], SelectionState.prototype, "isVisible", void 0);
__decorate([
mobx_1.action.bound
], SelectionState.prototype, "handleToggleVisibility", null);
__decorate([
mobx_1.action
], SelectionState.prototype, "setIsVisible", null);
__decorate([
mobx_1.action
], SelectionState.prototype, "selectItem", null);
__decorate([
mobx_1.action.bound
], SelectionState.prototype, "unselectItem", null);
__decorate([
mobx_1.action
], SelectionState.prototype, "unselectList", null);
__decorate([
mobx_1.action.bound
], SelectionState.prototype, "decorateItem", null);
__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