@bytedance/mona-client-web
Version:
web for mona
39 lines • 2.22 kB
JavaScript
import React, { useRef, useState, useEffect, forwardRef, useImperativeHandle } from 'react';
import FormatWrapper from './components/formatWrapper';
import styles from '../PickerView/index.module.less';
var PickerView = forwardRef(function (props, ref) {
var _a = props.cols, cols = _a === void 0 ? 5 : _a, _b = props.rows, rows = _b === void 0 ? 5 : _b, data = props.data, value = props.value, onColumnChange = props.onColumnChange;
var _c = useState(value), innerValue = _c[0], setInnerValue = _c[1];
var _d = useState(0), itemHeight = _d[0], setItemHeight = _d[1];
var _e = useState(0), wrapperHeight = _e[0], setWrapperHeight = _e[1];
var wrapperRef = useRef(null);
var barRef = useRef(null);
var innerValueRef = useRef(value);
innerValueRef.current = innerValue;
useImperativeHandle(ref, function () { return ({
getData: function () {
return innerValueRef.current;
},
}); });
function _onColumnChange(value, index) {
setInnerValue(value);
onColumnChange === null || onColumnChange === void 0 ? void 0 : onColumnChange(value, index);
}
useEffect(function () {
if (wrapperRef.current) {
setWrapperHeight(wrapperRef.current.offsetHeight);
}
if (barRef.current) {
setItemHeight(barRef.current.clientHeight);
}
}, []);
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: styles.pickerView, style: { height: "".concat(itemHeight * rows, "px") }, ref: wrapperRef },
React.createElement(FormatWrapper, { cols: cols, data: data, selectedValue: innerValue, onColumnChange: _onColumnChange, itemHeight: itemHeight, wrapperHeight: wrapperHeight, rows: rows }),
React.createElement("div", { className: styles.pickerViewSelection },
React.createElement("div", { className: styles.pickerViewSelectionMaskTop }),
React.createElement("div", { ref: barRef, className: styles.pickerViewSelectionBar }),
React.createElement("div", { className: styles.pickerViewSelectionMaskTop })))));
});
export default PickerView;
//# sourceMappingURL=pickerView.js.map