@fruits-chain/react-native-xiaoshu
Version:
🌈 React Native UI library
200 lines (189 loc) • 7.74 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _isNil = _interopRequireDefault(require("lodash/isNil"));
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _index = _interopRequireDefault(require("../divider/index.js"));
var _index2 = require("../hooks/index.js");
var _index3 = _interopRequireDefault(require("../loading/index.js"));
var _index4 = _interopRequireDefault(require("../theme/index.js"));
var _picker = require("./helper/picker.js");
var _pickerViewColumn = _interopRequireDefault(require("./picker-view-column.js"));
var _style = require("./style.js");
var _jsxRuntime = require("react/jsx-runtime");
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; }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const getVisibleItemCount = n => {
if (n % 2 === 0) {
return n + 1;
}
return n;
};
/**
* 选择器视图
*/
const PickerView = ({
theme,
visibleItemCount = 5,
itemHeight = 50,
loading = false,
columns,
testID,
...restProps
}) => {
const _visibleItemCount = getVisibleItemCount(visibleItemCount);
/** 选项的高度 */
const columnsHeight = _visibleItemCount * itemHeight;
/** 居中选中的偏移量 */
const markMargin = itemHeight / 2;
const [CV, STYLES] = _index4.default.useStyle({
varCreator: _style.varCreator,
styleCreator: _style.styleCreator,
theme
});
/**
* 数据类型
* @description cascade 联级选择，multiple 多列选择，single 单列选择
*/
const dataType = (0, _react.useMemo)(() => (0, _picker.getDataType)(columns), [columns]);
const isControlled = 'value' in restProps;
const isNoDefaultValue = 'defaultValue' in restProps;
const [value, onChange] = (0, _index2.useControllableValue)(restProps, {
defaultValue: []
});
const [options, setOptions] = (0, _react.useState)([]);
const ColumnDefaultValues = (0, _react.useRef)([]);
// 初始化数据
(0, _react.useEffect)(() => {
if (dataType !== 'cascade') {
const [_options, defaultValues] = (0, _picker.buildOptions)(dataType, columns);
ColumnDefaultValues.current = defaultValues;
setOptions(_options);
// 非受控的情况、并且没有默认值才去同步数据
// 既然有默认数据了，由外面自己负责
// 把数据同步到内部状态，初始化的时候看起来是选中默认数据或第一个数据的样子
if (!isControlled && !isNoDefaultValue) {
const [v, o] = (0, _picker.buildSelectedValue)(defaultValues, _options);
onChange(v, o);
}
}
}, [columns, dataType, onChange, isControlled, isNoDefaultValue]);
// 联级依赖 value 单独处理
(0, _react.useEffect)(() => {
if (dataType === 'cascade') {
const [_options,, _values] = (0, _picker.buildOptions)(dataType, columns, value);
const [v, o] = (0, _picker.buildSelectedValue)(_values, _options);
setOptions(_options);
// 当
if (value !== _values) {
onChange(v, o);
}
}
}, [columns, value, dataType, onChange]);
const bodyStyle = {
height: columnsHeight,
backgroundColor: CV.picker_view_background_color,
flexDirection: 'row',
overflow: 'hidden'
};
const maskTopStyles = [STYLES.mask, {
top: 0,
bottom: '50%',
flexDirection: 'column-reverse',
transform: [{
translateY: -markMargin
}]
}];
const maskBottomStyles = [STYLES.mask, {
top: '50%',
bottom: 0,
transform: [{
translateY: markMargin
}]
}];
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
testID: testID,
style: STYLES.picker,
children: [loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.default, {
style: STYLES.loading
}) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: bodyStyle,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: maskTopStyles,
pointerEvents: "none",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, {})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: maskBottomStyles,
pointerEvents: "none",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, {})
}), options.map((optionItem, optionIndex) => {
const _value = (() => {
if (!(0, _isNil.default)(value[optionIndex])) {
return value[optionIndex];
}
// 默认值
// 非受控的情况才去同步数据
// 并且没有默认值
if (!isControlled && !isNoDefaultValue) {
if (dataType === 'multiple') {
return ColumnDefaultValues.current[optionIndex];
}
// 真的没有就默认第一个选项
return (0, _picker.findDefaultValue)(options[optionIndex][0].value, optionItem);
}
return undefined;
})();
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_pickerViewColumn.default, {
theme: theme,
itemHeight: itemHeight,
visibleItemCount: _visibleItemCount,
options: optionItem,
value: _value,
onChange: column => {
switch (dataType) {
// 联级选择
// 如果是 cascade 需要重置选项
case 'cascade':
{
const nextAll = (0, _picker.findNextAllColumns)(column?.children || []);
const _options = options.slice(0, optionIndex + 1).concat(nextAll.options);
const values = value.slice(0, optionIndex).concat(column?.value).concat(nextAll.values);
const [v, o] = (0, _picker.buildSelectedValue)(values, _options);
onChange(v, o);
break;
}
// 多选
case 'multiple':
{
const newValues = value.concat([]);
// 先从默认数据中拼凑好数据
ColumnDefaultValues.current.forEach((cdv, cdvIndex) => {
if ((0, _isNil.default)(newValues[cdvIndex])) {
newValues[cdvIndex] = cdv;
}
});
newValues[optionIndex] = column.value;
const [v, o] = (0, _picker.buildSelectedValue)(newValues, options);
onChange(v, o);
break;
}
// 单选
default:
{
const columnsIndex = columns.findIndex(c => c.value === column.value);
onChange([column.value], [columns[columnsIndex]]);
break;
}
}
}
}, optionIndex);
})]
})]
});
};
var _default = exports.default = /*#__PURE__*/(0, _react.memo)(PickerView);
//# sourceMappingURL=picker-view.js.map