@fruits-chain/react-native-xiaoshu
Version:
🌈 React Native UI library
110 lines (108 loc) • 4.41 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _index = require("../hooks/index.js");
var _index2 = _interopRequireDefault(require("../theme/index.js"));
var _column = require("./helper/column.js");
var _style = require("./style.js");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const getSelectedIndex = n => n < 0 ? 0 : n;
/**
* 选择器 列
*/
const PickerViewColumn = ({
theme,
itemHeight,
visibleItemCount,
options,
value,
onChange
}) => {
const [, STYLES] = _index2.default.useStyle({
varCreator: _style.varCreator,
styleCreator: _style.styleCreator,
theme
});
const flatListRef = (0, _react.useRef)(null);
const LastTop = (0, _react.useRef)(0);
const paddedOptions = (0, _react.useMemo)(() => {
const array = [...options];
for (let i = 0; i < (visibleItemCount - 1) / 2; i++) {
array.unshift({
value: '',
label: ''
});
array.push({
value: '',
label: ''
});
}
return array;
}, [options, visibleItemCount]);
const offsets = (0, _react.useMemo)(() => [...Array(paddedOptions.length)].map((x, i) => i * itemHeight), [paddedOptions, itemHeight]);
const selectedIndex = getSelectedIndex(options.findIndex(item => item.value === value));
(0, _react.useEffect)(() => {
flatListRef.current?.scrollToIndex({
index: selectedIndex,
animated: false
});
}, [selectedIndex]);
const onMomentumScrollEnd = (0, _index.usePersistFn)(event => {
const offsetY = Math.min(itemHeight * (options.length - 1), Math.max(event.nativeEvent.contentOffset.y, 0));
let index = Math.floor(Math.floor(offsetY) / itemHeight);
const last = Math.floor(offsetY % itemHeight);
if (last > itemHeight / 2) {
index++;
}
const isToNext = offsetY > LastTop.current;
if (options[index].disabled) {
index = (0, _column.findUsableOptionIndex)(options, isToNext, index);
}
LastTop.current = offsetY;
const selectOption = options[index];
if (selectOption.value !== value) {
onChange?.(selectOption);
}
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: STYLES.column,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList
// 当 options 刷新时重置组件，scrollToIndex 并不能完全可靠，借助 showsVerticalScrollIndicator 初始化视图
, {
ref: flatListRef,
showsVerticalScrollIndicator: false,
snapToOffsets: offsets,
onMomentumScrollEnd: onMomentumScrollEnd,
initialScrollIndex: selectedIndex,
getItemLayout: (_, index) => ({
length: itemHeight,
offset: itemHeight * index,
index
}),
decelerationRate: "fast",
data: paddedOptions,
keyExtractor: (_, index) => index.toString(),
renderItem: ({
item
}) => {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: [STYLES.column_text, {
height: itemHeight,
lineHeight: itemHeight
}, item.disabled ? STYLES.column_text_disabled : null],
numberOfLines: 1,
children: item.label
}, item.value);
}
}, paddedOptions.map(item => item.value).join('_'))
});
};
var _default = exports.default = /*#__PURE__*/(0, _react.memo)(PickerViewColumn);
//# sourceMappingURL=picker-view-column.js.map