test-isc
Version:
An Ionic component similar to Ionic Select, that allows to search items, including async search, group, add, edit, delete items, and much more.
383 lines (382 loc) • 20.8 kB
JavaScript
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
import { r as registerInstance, d as createEvent, h, H as Host, e as getElement } from './index-b6f64b02.js';
import { g as getIonMode } from './ionic-global-5d790111.js';
import { c as clamp } from './helpers-4a6bd295.js';
import { a as hapticSelectionChanged } from './haptic-fc16a4d8.js';
var pickerColumnIosCss = ".picker-col{display:-ms-flexbox;display:flex;position:relative;-ms-flex:1;flex:1;-ms-flex-pack:center;justify-content:center;height:100%;-webkit-box-sizing:content-box;box-sizing:content-box;contain:content}.picker-opts{position:relative;-ms-flex:1;flex:1;max-width:100%}.picker-opt{left:0;top:0;display:block;position:absolute;width:100%;border:0;text-align:center;text-overflow:ellipsis;white-space:nowrap;contain:strict;overflow:hidden;will-change:transform}[dir=rtl] .picker-opt,:host-context([dir=rtl]) .picker-opt{left:unset;right:unset;right:0}.picker-opt.picker-opt-disabled{pointer-events:none}.picker-opt-disabled{opacity:0}.picker-opts-left{-ms-flex-pack:start;justify-content:flex-start}.picker-opts-right{-ms-flex-pack:end;justify-content:flex-end}.picker-opt:active,.picker-opt:focus{outline:none}.picker-prefix{position:relative;-ms-flex:1;flex:1;text-align:end;white-space:nowrap}.picker-suffix{position:relative;-ms-flex:1;flex:1;text-align:start;white-space:nowrap}.picker-col{padding-left:4px;padding-right:4px;padding-top:0;padding-bottom:0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.picker-col{padding-left:unset;padding-right:unset;-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px}}.picker-prefix,.picker-suffix,.picker-opts{top:77px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;color:inherit;font-size:20px;line-height:42px;pointer-events:none}.picker-opt{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-transform-origin:center center;transform-origin:center center;height:46px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;background:transparent;color:inherit;font-size:20px;line-height:42px;-webkit-backface-visibility:hidden;backface-visibility:hidden;pointer-events:auto}[dir=rtl] .picker-opt,:host-context([dir=rtl]) .picker-opt{-webkit-transform-origin:calc(100% - center) center;transform-origin:calc(100% - center) center}";
var pickerColumnMdCss = ".picker-col{display:-ms-flexbox;display:flex;position:relative;-ms-flex:1;flex:1;-ms-flex-pack:center;justify-content:center;height:100%;-webkit-box-sizing:content-box;box-sizing:content-box;contain:content}.picker-opts{position:relative;-ms-flex:1;flex:1;max-width:100%}.picker-opt{left:0;top:0;display:block;position:absolute;width:100%;border:0;text-align:center;text-overflow:ellipsis;white-space:nowrap;contain:strict;overflow:hidden;will-change:transform}[dir=rtl] .picker-opt,:host-context([dir=rtl]) .picker-opt{left:unset;right:unset;right:0}.picker-opt.picker-opt-disabled{pointer-events:none}.picker-opt-disabled{opacity:0}.picker-opts-left{-ms-flex-pack:start;justify-content:flex-start}.picker-opts-right{-ms-flex-pack:end;justify-content:flex-end}.picker-opt:active,.picker-opt:focus{outline:none}.picker-prefix{position:relative;-ms-flex:1;flex:1;text-align:end;white-space:nowrap}.picker-suffix{position:relative;-ms-flex:1;flex:1;text-align:start;white-space:nowrap}.picker-col{padding-left:8px;padding-right:8px;padding-top:0;padding-bottom:0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.picker-col{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px}}.picker-prefix,.picker-suffix,.picker-opts{top:77px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;color:inherit;font-size:22px;line-height:42px;pointer-events:none}.picker-opt{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;height:43px;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;background:transparent;color:inherit;font-size:22px;line-height:42px;-webkit-backface-visibility:hidden;backface-visibility:hidden;pointer-events:auto}.picker-prefix,.picker-suffix,.picker-opt.picker-opt-selected{color:var(--ion-color-primary, #3880ff)}";
var PickerColumnCmp = /** @class */ (function () {
function class_1(hostRef) {
registerInstance(this, hostRef);
this.optHeight = 0;
this.rotateFactor = 0;
this.scaleFactor = 1;
this.velocity = 0;
this.y = 0;
this.noAnimate = true;
this.ionPickerColChange = createEvent(this, "ionPickerColChange", 7);
}
class_1.prototype.colChanged = function () {
this.refresh();
};
class_1.prototype.connectedCallback = function () {
return __awaiter(this, void 0, void 0, function () {
var pickerRotateFactor, pickerScaleFactor, mode, _a;
var _this = this;
return __generator(this, function (_b) {
switch (_b.label) {
case 0:
pickerRotateFactor = 0;
pickerScaleFactor = 0.81;
mode = getIonMode(this);
if (mode === 'ios') {
pickerRotateFactor = -0.46;
pickerScaleFactor = 1;
}
this.rotateFactor = pickerRotateFactor;
this.scaleFactor = pickerScaleFactor;
_a = this;
return [4 /*yield*/, import('./index-9b41fcc6.js')];
case 1:
_a.gesture = (_b.sent()).createGesture({
el: this.el,
gestureName: 'picker-swipe',
gesturePriority: 100,
threshold: 0,
passive: false,
onStart: function (ev) { return _this.onStart(ev); },
onMove: function (ev) { return _this.onMove(ev); },
onEnd: function (ev) { return _this.onEnd(ev); },
});
this.gesture.enable();
this.tmrId = setTimeout(function () {
_this.noAnimate = false;
_this.refresh(true);
}, 250);
return [2 /*return*/];
}
});
});
};
class_1.prototype.componentDidLoad = function () {
var colEl = this.optsEl;
if (colEl) {
// DOM READ
// We perfom a DOM read over a rendered item, this needs to happen after the first render
this.optHeight = (colEl.firstElementChild ? colEl.firstElementChild.clientHeight : 0);
}
this.refresh();
};
class_1.prototype.disconnectedCallback = function () {
cancelAnimationFrame(this.rafId);
clearTimeout(this.tmrId);
if (this.gesture) {
this.gesture.destroy();
this.gesture = undefined;
}
};
class_1.prototype.emitColChange = function () {
this.ionPickerColChange.emit(this.col);
};
class_1.prototype.setSelected = function (selectedIndex, duration) {
// if there is a selected index, then figure out it's y position
// if there isn't a selected index, then just use the top y position
var y = (selectedIndex > -1) ? -(selectedIndex * this.optHeight) : 0;
this.velocity = 0;
// set what y position we're at
cancelAnimationFrame(this.rafId);
this.update(y, duration, true);
this.emitColChange();
};
class_1.prototype.update = function (y, duration, saveY) {
if (!this.optsEl) {
return;
}
// ensure we've got a good round number :)
var translateY = 0;
var translateZ = 0;
var _a = this, col = _a.col, rotateFactor = _a.rotateFactor;
var selectedIndex = col.selectedIndex = this.indexForY(-y);
var durationStr = (duration === 0) ? '' : duration + 'ms';
var scaleStr = "scale(" + this.scaleFactor + ")";
var children = this.optsEl.children;
for (var i = 0; i < children.length; i++) {
var button = children[i];
var opt = col.options[i];
var optOffset = (i * this.optHeight) + y;
var transform = '';
if (rotateFactor !== 0) {
var rotateX = optOffset * rotateFactor;
if (Math.abs(rotateX) <= 90) {
translateY = 0;
translateZ = 90;
transform = "rotateX(" + rotateX + "deg) ";
}
else {
translateY = -9999;
}
}
else {
translateZ = 0;
translateY = optOffset;
}
var selected = selectedIndex === i;
transform += "translate3d(0px," + translateY + "px," + translateZ + "px) ";
if (this.scaleFactor !== 1 && !selected) {
transform += scaleStr;
}
// Update transition duration
if (this.noAnimate) {
opt.duration = 0;
button.style.transitionDuration = '';
}
else if (duration !== opt.duration) {
opt.duration = duration;
button.style.transitionDuration = durationStr;
}
// Update transform
if (transform !== opt.transform) {
opt.transform = transform;
button.style.transform = transform;
}
// Update selected item
if (selected !== opt.selected) {
opt.selected = selected;
if (selected) {
button.classList.add(PICKER_OPT_SELECTED);
}
else {
button.classList.remove(PICKER_OPT_SELECTED);
}
}
}
this.col.prevSelected = selectedIndex;
if (saveY) {
this.y = y;
}
if (this.lastIndex !== selectedIndex) {
// have not set a last index yet
hapticSelectionChanged();
this.lastIndex = selectedIndex;
}
};
class_1.prototype.decelerate = function () {
var _this = this;
if (this.velocity !== 0) {
// still decelerating
this.velocity *= DECELERATION_FRICTION;
// do not let it go slower than a velocity of 1
this.velocity = (this.velocity > 0)
? Math.max(this.velocity, 1)
: Math.min(this.velocity, -1);
var y = this.y + this.velocity;
if (y > this.minY) {
// whoops, it's trying to scroll up farther than the options we have!
y = this.minY;
this.velocity = 0;
}
else if (y < this.maxY) {
// gahh, it's trying to scroll down farther than we can!
y = this.maxY;
this.velocity = 0;
}
this.update(y, 0, true);
var notLockedIn = (Math.round(y) % this.optHeight !== 0) || (Math.abs(this.velocity) > 1);
if (notLockedIn) {
// isn't locked in yet, keep decelerating until it is
this.rafId = requestAnimationFrame(function () { return _this.decelerate(); });
}
else {
this.velocity = 0;
this.emitColChange();
}
}
else if (this.y % this.optHeight !== 0) {
// needs to still get locked into a position so options line up
var currentPos = Math.abs(this.y % this.optHeight);
// create a velocity in the direction it needs to scroll
this.velocity = (currentPos > (this.optHeight / 2) ? 1 : -1);
this.decelerate();
}
};
class_1.prototype.indexForY = function (y) {
return Math.min(Math.max(Math.abs(Math.round(y / this.optHeight)), 0), this.col.options.length - 1);
};
// TODO should this check disabled?
class_1.prototype.onStart = function (detail) {
// We have to prevent default in order to block scrolling under the picker
// but we DO NOT have to stop propagation, since we still want
// some "click" events to capture
detail.event.preventDefault();
detail.event.stopPropagation();
// reset everything
cancelAnimationFrame(this.rafId);
var options = this.col.options;
var minY = (options.length - 1);
var maxY = 0;
for (var i = 0; i < options.length; i++) {
if (!options[i].disabled) {
minY = Math.min(minY, i);
maxY = Math.max(maxY, i);
}
}
this.minY = -(minY * this.optHeight);
this.maxY = -(maxY * this.optHeight);
};
class_1.prototype.onMove = function (detail) {
detail.event.preventDefault();
detail.event.stopPropagation();
// update the scroll position relative to pointer start position
var y = this.y + detail.deltaY;
if (y > this.minY) {
// scrolling up higher than scroll area
y = Math.pow(y, 0.8);
this.bounceFrom = y;
}
else if (y < this.maxY) {
// scrolling down below scroll area
y += Math.pow(this.maxY - y, 0.9);
this.bounceFrom = y;
}
else {
this.bounceFrom = 0;
}
this.update(y, 0, false);
};
class_1.prototype.onEnd = function (detail) {
if (this.bounceFrom > 0) {
// bounce back up
this.update(this.minY, 100, true);
this.emitColChange();
return;
}
else if (this.bounceFrom < 0) {
// bounce back down
this.update(this.maxY, 100, true);
this.emitColChange();
return;
}
this.velocity = clamp(-MAX_PICKER_SPEED, detail.velocityY * 23, MAX_PICKER_SPEED);
if (this.velocity === 0 && detail.deltaY === 0) {
var opt = detail.event.target.closest('.picker-opt');
if (opt && opt.hasAttribute('opt-index')) {
this.setSelected(parseInt(opt.getAttribute('opt-index'), 10), TRANSITION_DURATION);
}
}
else {
this.y += detail.deltaY;
if (Math.abs(detail.velocityY) < 0.05) {
var isScrollingUp = detail.deltaY > 0;
var optHeightFraction = (Math.abs(this.y) % this.optHeight) / this.optHeight;
if (isScrollingUp && optHeightFraction > 0.5) {
this.velocity = Math.abs(this.velocity) * -1;
}
else if (!isScrollingUp && optHeightFraction <= 0.5) {
this.velocity = Math.abs(this.velocity);
}
}
this.decelerate();
}
};
class_1.prototype.refresh = function (forceRefresh) {
var min = this.col.options.length - 1;
var max = 0;
var options = this.col.options;
for (var i = 0; i < options.length; i++) {
if (!options[i].disabled) {
min = Math.min(min, i);
max = Math.max(max, i);
}
}
/**
* Only update selected value if column has a
* velocity of 0. If it does not, then the
* column is animating might land on
* a value different than the value at
* selectedIndex
*/
if (this.velocity !== 0) {
return;
}
var selectedIndex = clamp(min, this.col.selectedIndex || 0, max);
if (this.col.prevSelected !== selectedIndex || forceRefresh) {
var y = (selectedIndex * this.optHeight) * -1;
this.velocity = 0;
this.update(y, TRANSITION_DURATION, true);
}
};
class_1.prototype.render = function () {
var _a;
var _this = this;
var col = this.col;
var Button = 'button';
var mode = getIonMode(this);
return (h(Host, { class: (_a = {},
_a[mode] = true,
_a['picker-col'] = true,
_a['picker-opts-left'] = this.col.align === 'left',
_a['picker-opts-right'] = this.col.align === 'right',
_a), style: {
'max-width': this.col.columnWidth
} }, col.prefix && (h("div", { class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: function (el) { return _this.optsEl = el; } }, col.options.map(function (o, index) { return h(Button, { type: "button", class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text); })), col.suffix && (h("div", { class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
};
Object.defineProperty(class_1.prototype, "el", {
get: function () { return getElement(this); },
enumerable: true,
configurable: true
});
Object.defineProperty(class_1, "watchers", {
get: function () {
return {
"col": ["colChanged"]
};
},
enumerable: true,
configurable: true
});
return class_1;
}());
var PICKER_OPT_SELECTED = 'picker-opt-selected';
var DECELERATION_FRICTION = 0.97;
var MAX_PICKER_SPEED = 90;
var TRANSITION_DURATION = 150;
PickerColumnCmp.style = {
/*STENCIL:MODE:ios*/ ios: pickerColumnIosCss,
/*STENCIL:MODE:md*/ md: pickerColumnMdCss
};
export { PickerColumnCmp as ion_picker_column };