@quidone/react-native-wheel-picker
Version:
Picker is a UI component for selecting an item from a list of options.
165 lines (164 loc) • 6.4 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _PickerItem = _interopRequireDefault(require("../item/PickerItem"));
var _ScrollContentOffsetContext = require("../contexts/ScrollContentOffsetContext");
var _PickerItemHeightContext = require("../contexts/PickerItemHeightContext");
var _useValueEventsEffect = _interopRequireDefault(require("./hooks/useValueEventsEffect"));
var _useSyncScrollEffect = _interopRequireDefault(require("./hooks/useSyncScrollEffect"));
var _Overlay = _interopRequireDefault(require("../overlay/Overlay"));
var _faces = require("../item/faces");
var _PickerItemContainer = _interopRequireDefault(require("../item/PickerItemContainer"));
var _react2 = require("../../utils/react");
var _reactUsefulHooks = require("@rozhkov/react-useful-hooks");
var _List = _interopRequireDefault(require("../list/List"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
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); }
const defaultKeyExtractor = (_, index) => index.toString();
const defaultRenderItem = _ref => {
let {
item: {
value,
label
},
itemTextStyle
} = _ref;
return /*#__PURE__*/_react.default.createElement(_PickerItem.default, {
value: value,
label: label,
itemTextStyle: itemTextStyle
});
};
const defaultRenderItemContainer = _ref2 => {
let {
key,
...props
} = _ref2;
return /*#__PURE__*/_react.default.createElement(_PickerItemContainer.default, _extends({
key: key
}, props));
};
const defaultRenderOverlay = props => /*#__PURE__*/_react.default.createElement(_Overlay.default, props);
const defaultRenderList = props => {
return /*#__PURE__*/_react.default.createElement(_List.default, props);
};
const useValueIndex = (data, value) => {
return (0, _react.useMemo)(() => {
const index = data.findIndex(x => x.value === value);
return index >= 0 ? index : 0;
}, [data, value]);
};
const Picker = _ref3 => {
let {
data,
value,
width = 'auto',
itemHeight = 48,
visibleItemCount = 5,
readOnly = false,
testID,
onValueChanged,
onValueChanging,
keyExtractor = defaultKeyExtractor,
renderItem = defaultRenderItem,
renderItemContainer = defaultRenderItemContainer,
renderOverlay = defaultRenderOverlay,
renderList = defaultRenderList,
style,
itemTextStyle,
overlayItemStyle,
contentContainerStyle,
...restProps
} = _ref3;
const valueIndex = useValueIndex(data, value);
const initialIndex = (0, _reactUsefulHooks.useInit)(() => valueIndex);
const offsetY = (0, _react.useRef)(new _reactNative.Animated.Value(valueIndex * itemHeight)).current;
const listRef = (0, _react.useRef)(null);
const touching = (0, _react2.useBoolean)(false);
const [faces, pickerHeight] = (0, _react.useMemo)(() => {
const items = (0, _faces.createFaces)(itemHeight, visibleItemCount);
const height = (0, _faces.calcPickerHeight)(items, itemHeight);
return [items, height];
}, [itemHeight, visibleItemCount]);
const renderPickerItem = (0, _react.useCallback)(_ref4 => {
let {
item,
index,
key
} = _ref4;
return renderItemContainer({
key,
item,
index,
faces,
renderItem,
itemTextStyle
});
}, [faces, itemTextStyle, renderItem, renderItemContainer]);
const {
activeIndexRef,
onScrollEnd
} = (0, _useValueEventsEffect.default)({
data,
valueIndex,
itemHeight,
offsetYAv: offsetY
}, {
onValueChanging,
onValueChanged
});
(0, _useSyncScrollEffect.default)({
listRef,
valueIndex,
activeIndexRef,
touching: touching.value
});
return /*#__PURE__*/_react.default.createElement(_ScrollContentOffsetContext.ScrollContentOffsetContext.Provider, {
value: offsetY
}, /*#__PURE__*/_react.default.createElement(_PickerItemHeightContext.PickerItemHeightContext.Provider, {
value: itemHeight
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
testID: testID,
style: [styles.root, style, {
height: pickerHeight,
width
}]
}, renderList({
...restProps,
ref: listRef,
data,
initialIndex,
itemHeight,
pickerHeight,
visibleItemCount,
readOnly,
keyExtractor,
renderItem: renderPickerItem,
scrollOffset: offsetY,
onTouchStart: touching.setTrue,
onTouchEnd: touching.setFalse,
onTouchCancel: touching.setFalse,
onScrollEnd,
contentContainerStyle
}), renderOverlay && renderOverlay({
itemHeight,
pickerWidth: width,
pickerHeight,
overlayItemStyle
}))));
};
const styles = _reactNative.StyleSheet.create({
root: {
justifyContent: 'center',
alignItems: 'center'
}
});
var _default = Picker;
exports.default = _default;
//# sourceMappingURL=Picker.js.map