@alifd/meet-react
Version:
Fusion Mobile React UI System Component
343 lines • 12.7 kB
JavaScript
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import { __rest } from "tslib";
import React, { createElement, createRef, forwardRef, useEffect, useRef } from "react";
import classNames from 'classnames';
import { findDOMNode } from "react-dom";
import { Text } from "@alifd/meet-react-component-one";
import { isIOS, nextTick, osVersion } from '../utils';
import { useForceUpdate } from '../utils/hooks';
import View from '../view';
var isIOS10 = isIOS && /^10./.test(osVersion);
var isPassiveSupported = function isPassiveSupported() {
var passiveSupported = false;
try {
var options = Object.defineProperty({}, 'passive', {
get: function get() {
passiveSupported = true;
}
});
window.addEventListener('test', null, options);
} catch (err) {}
return passiveSupported;
};
var createScrollHandlers = function createScrollHandlers(fromOptions) {
var options = fromOptions;
var scrollY = -1;
var lastY = 0;
var startY = 0;
var scrollDisabled = false;
var isMoving = false;
var cachedTransform = null;
var isTransformRunning = false;
var setTransform = function setTransform(nodeStyle, value) {
cachedTransform = value;
if (isTransformRunning) {
return;
}
isTransformRunning = true;
nextTick(function () {
nodeStyle.transform = cachedTransform;
nodeStyle.webkitTransform = cachedTransform;
isTransformRunning = false;
});
};
var cachedTransition = null;
var isTransitionRunning = false;
var setTransition = function setTransition(nodeStyle, value) {
cachedTransition = value;
if (isTransitionRunning) {
return;
}
isTransitionRunning = true;
nextTick(function () {
nodeStyle.transition = cachedTransition;
nodeStyle.webkitTransition = cachedTransition;
isTransitionRunning = false;
});
};
var scrollTo = function scrollTo(_x, y) {
var time = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.3;
if (scrollY !== y) {
scrollY = y;
if (time) {
setTransition(options.contentDOM.style, "cubic-bezier(0,0,0.2,1.15) ".concat(time, "s"));
}
setTransform(options.contentDOM.style, "translate3d(0,".concat(-y, "px,0)"));
setTimeout(function () {
options.scrollingComplete();
if (options.contentDOM) {
setTransition(options.contentDOM.style, '');
}
}, +time * 1000);
}
};
var Velocity = function () {
var minInterval = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 30;
var maxInterval = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100;
var _time = 0;
var _y = 0;
var _velocity = 0;
var recorder = {
record: function record(y) {
var now = +new Date();
_velocity = (y - _y) / (now - _time);
if (now - _time >= minInterval) {
_velocity = now - _time <= maxInterval ? _velocity : 0;
_y = y;
_time = now;
}
},
getVelocity: function getVelocity(y) {
if (y !== _y) {
recorder.record(y);
}
return _velocity;
}
};
return recorder;
}();
var onFinish = function onFinish() {
isMoving = false;
var targetY = scrollY;
var height = (options.items.length - 1) * options.itemHeight;
var time = 0.3;
var velocity = Velocity.getVelocity(targetY) * 4;
if (velocity) {
targetY = velocity * 40 + targetY;
time = Math.abs(velocity) * 0.1;
}
if (targetY % options.itemHeight !== 0) {
targetY = Math.round(targetY / options.itemHeight) * options.itemHeight;
}
if (targetY < 0) {
targetY = 0;
} else if (targetY > height) {
targetY = height;
}
scrollTo(0, targetY, time < 0.3 ? 0.3 : time);
options.onScrollChange();
};
var onStart = function onStart(y) {
if (scrollDisabled) {
return;
}
isMoving = true;
startY = y;
lastY = scrollY;
};
var onMove = function onMove(y) {
if (scrollDisabled || !isMoving) {
return;
}
scrollY = lastY - y + startY;
Velocity.record(scrollY);
options.onScrollChange();
setTransform(options.contentDOM.style, "translate3d(0,".concat(-scrollY, "px,0)"));
};
return {
setOptions: function setOptions(x) {
return options = x;
},
touchstart: function touchstart(evt) {
return onStart(evt.touches[0].pageY);
},
mousedown: function mousedown(evt) {
return onStart(evt.pageY);
},
touchmove: function touchmove(evt) {
evt.preventDefault();
onMove(evt.touches[0].pageY);
},
mousemove: function mousemove(evt) {
evt.preventDefault();
onMove(evt.pageY);
},
touchend: function touchend() {
return onFinish();
},
touchcancel: function touchcancel() {
return onFinish();
},
mouseup: function mouseup() {
return onFinish();
},
getValue: function getValue() {
return scrollY;
},
scrollTo: scrollTo,
setDisabled: function setDisabled() {
var disabled = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
scrollDisabled = disabled;
}
};
};
var PickerColumn = function PickerColumn(props, ref) {
var _props$prefix = props.prefix,
prefix = _props$prefix === void 0 ? 'mt-' : _props$prefix,
value = props.value,
_props$data = props.data,
data = _props$data === void 0 ? [] : _props$data,
_props$onChange = props.onChange,
onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
onScrollChange = props.onScrollChange,
others = __rest(props, ["prefix", "value", "data", "onChange", "onScrollChange"]);
var forceUpdate = useForceUpdate();
var scrollHandlers = useRef(null);
var scrollRef = /*#__PURE__*/createRef();
var contentRef = /*#__PURE__*/createRef();
var itemRef = /*#__PURE__*/createRef();
var maskRef = /*#__PURE__*/createRef();
var itemHeight;
var scrollValue;
var selectByIndex = function selectByIndex(index, height, zscrollTo) {
if (index < 0 || index >= data.length || !height) {
return;
}
zscrollTo(index * height);
};
var select = function select(v, height, scrollTo) {
for (var i = 0; i < data.length; i++) {
if (data[i].value === v) {
selectByIndex(i, height, scrollTo);
return;
}
}
selectByIndex(0, height, scrollTo);
};
var computeChildIndex = function computeChildIndex(top, height, length) {
var index = Math.round(top / height);
return Math.min(index, length - 1);
};
var doScrollingComplete = function doScrollingComplete(top, height, doValueChange) {
var index = computeChildIndex(top, height, data.length);
var child = data[index];
if (child) {
if (!child.disabled) {
doValueChange(child.value);
} else {
nextTick(function () {
select(value, itemHeight, function (t) {
return scrollHandlers.current.scrollTo(0, t, 0.4);
});
});
}
} else if (console.warn) {
console.warn('item not found', data, index);
}
};
var fireValueChange = function fireValueChange(sValue) {
if (sValue !== value) {
onChange(sValue);
nextTick(function () {
return forceUpdate();
});
}
};
var scrollToWithoutAnimation = function scrollToWithoutAnimation(top) {
if (scrollHandlers.current) {
scrollHandlers.current.scrollTo(0, top, 0);
}
};
var handleScrollChange = function handleScrollChange() {
var top = scrollHandlers.current.getValue();
if (top >= 0) {
var index = computeChildIndex(top, itemHeight, data.length);
if (scrollValue !== index) {
scrollValue = index;
var child = data[index];
if (child && onScrollChange) {
onScrollChange(child.value);
} else if (!child && console.warn) {
console.warn('child not found', data, index);
}
}
}
};
var handleScrollComplete = function handleScrollComplete() {
var top = scrollHandlers.current.getValue();
if (top >= 0) {
doScrollingComplete(top, itemHeight, fireValueChange);
}
};
useEffect(function () {
setTimeout(function () {
var itemNode = itemRef.current;
var maskNode = maskRef.current;
var scrollNode = scrollRef.current;
var contentNode = contentRef.current;
if (!itemNode) {
return undefined;
}
itemHeight = itemNode.getBoundingClientRect().height;
maskNode.style.backgroundSize = "100% ".concat(3 * itemHeight, "px");
if (!scrollHandlers.current) {
scrollHandlers.current = createScrollHandlers({
onScrollChange: handleScrollChange,
scrollingComplete: handleScrollComplete,
contentDOM: contentNode,
items: data,
itemHeight: itemHeight
});
var passiveSupported = isPassiveSupported();
var willPreventDefault = passiveSupported ? {
passive: false
} : false;
var willNotPreventDefault = passiveSupported ? {
passive: true
} : false;
Object.keys(scrollHandlers.current).forEach(function (key) {
if (key.indexOf('touch') === 0 || key.indexOf('mouse') === 0) {
var pd = key.indexOf('move') >= 0 ? willPreventDefault : willNotPreventDefault;
scrollNode.addEventListener(key, scrollHandlers.current[key], pd);
}
});
} else {
scrollHandlers.current.setOptions({
onScrollChange: handleScrollChange,
scrollingComplete: handleScrollComplete,
contentDOM: contentNode,
items: data,
itemHeight: itemHeight
});
}
select(value, itemHeight, scrollToWithoutAnimation);
return function () {
Object.keys(scrollHandlers).forEach(function (key) {
if (key.indexOf('touch') === 0 || key.indexOf('mouse') === 0) {
scrollNode.removeEventListener(key, scrollHandlers[key]);
}
});
};
}, 50);
});
var clsPrefix = "".concat(prefix, "picker");
return /*#__PURE__*/React.createElement(View, _extends({}, others, {
className: "".concat(clsPrefix, "-item"),
ref: ref
}), /*#__PURE__*/React.createElement(View, {
className: classNames("".concat(clsPrefix, "-col"), _defineProperty({}, "".concat(clsPrefix, "-col--ios10"), isIOS10)),
ref: scrollRef
}, /*#__PURE__*/React.createElement(View, {
className: "".concat(clsPrefix, "-mask"),
ref: maskRef
}), /*#__PURE__*/React.createElement(View, {
className: "".concat(clsPrefix, "-indicator")
}), /*#__PURE__*/React.createElement(View, {
className: "".concat(clsPrefix, "-content"),
ref: contentRef
}, data.map(function (item, index) {
return /*#__PURE__*/React.createElement(View, {
key: index,
className: classNames("".concat(clsPrefix, "-col-item"), _defineProperty(_defineProperty({}, "".concat(clsPrefix, "-col-item--disabled"), item.disabled), "".concat(clsPrefix, "-col-item--selected"), !item.disabled && item.value === value)),
ref: index === 0 ? itemRef : null
}, /*#__PURE__*/React.createElement(Text, {
className: "".concat(clsPrefix, "-col-item-text"),
numberOfLines: 1
}, item.label));
}))));
};
export default /*#__PURE__*/forwardRef(PickerColumn);