@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
411 lines (410 loc) • 17.4 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CheckList = CheckList;
exports.default = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = require("react");
var _components = require("@tarojs/components");
var _classnames = _interopRequireDefault(require("classnames"));
var _index = _interopRequireDefault(require("../popup/index"));
var _index2 = _interopRequireDefault(require("../search/index"));
var _index3 = _interopRequireDefault(require("../checkbox/index"));
var _index4 = require("../button/index");
var _index5 = _interopRequireDefault(require("../loading/index"));
var _index6 = _interopRequireDefault(require("../empty/index"));
var _index7 = _interopRequireDefault(require("../icon/index"));
var _defaultProps = require("../default-props");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["disabled", "data", "labelName", "bodyHeight", "renderShow", "fieldName", "value", "onChange", "searchLoading", "searchData", "checkAll", "limit", "allowClear", "placeholder", "searchPlaceholder", "placeholderColor", "searchShow", "showArrowDown", "showArrowRight"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var d = (0, _defaultProps.get)().CheckList;
function CheckList(props) {
var _d$props = _objectSpread(_objectSpread({}, d), props),
_d$props$disabled = _d$props.disabled,
disabled = _d$props$disabled === void 0 ? false : _d$props$disabled,
_d$props$data = _d$props.data,
data = _d$props$data === void 0 ? [] : _d$props$data,
_d$props$labelName = _d$props.labelName,
labelName = _d$props$labelName === void 0 ? 'name' : _d$props$labelName,
bodyHeight = _d$props.bodyHeight,
renderShow = _d$props.renderShow,
_d$props$fieldName = _d$props.fieldName,
fieldName = _d$props$fieldName === void 0 ? 'id' : _d$props$fieldName,
value = _d$props.value,
onChange = _d$props.onChange,
_d$props$searchLoadin = _d$props.searchLoading,
searchLoading = _d$props$searchLoadin === void 0 ? false : _d$props$searchLoadin,
searchData = _d$props.searchData,
checkAll = _d$props.checkAll,
limit = _d$props.limit,
_d$props$allowClear = _d$props.allowClear,
allowClear = _d$props$allowClear === void 0 ? true : _d$props$allowClear,
_d$props$placeholder = _d$props.placeholder,
placeholder = _d$props$placeholder === void 0 ? '请选择' : _d$props$placeholder,
_d$props$searchPlaceh = _d$props.searchPlaceholder,
searchPlaceholder = _d$props$searchPlaceh === void 0 ? '请输入搜索关键词' : _d$props$searchPlaceh,
placeholderColor = _d$props.placeholderColor,
_d$props$searchShow = _d$props.searchShow,
searchShow = _d$props$searchShow === void 0 ? true : _d$props$searchShow,
_d$props$showArrowDow = _d$props.showArrowDown,
showArrowDown = _d$props$showArrowDow === void 0 ? false : _d$props$showArrowDow,
_d$props$showArrowRig = _d$props.showArrowRight,
showArrowRight = _d$props$showArrowRig === void 0 ? false : _d$props$showArrowRig,
others = (0, _objectWithoutProperties2.default)(_d$props, _excluded);
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
show = _useState2[0],
setShow = _useState2[1];
var _useState3 = (0, _react.useState)([]),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
checked = _useState4[0],
setChecked = _useState4[1];
var _useState5 = (0, _react.useState)([]),
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
checkedData = _useState6[0],
setCheckedData = _useState6[1];
var _useState7 = (0, _react.useState)(''),
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
keyWord = _useState8[0],
setKeyWord = _useState8[1];
var _useState9 = (0, _react.useState)([]),
_useState10 = (0, _slicedToArray2.default)(_useState9, 2),
innerData = _useState10[0],
setData = _useState10[1];
var _useState11 = (0, _react.useState)(false),
_useState12 = (0, _slicedToArray2.default)(_useState11, 2),
loading = _useState12[0],
setLoading = _useState12[1];
var _useState13 = (0, _react.useState)([]),
_useState14 = (0, _slicedToArray2.default)(_useState13, 2),
innerAllData = _useState14[0],
setInnerAllData = _useState14[1];
var clear = (0, _react.useCallback)(function () {
onChange === null || onChange === void 0 ? void 0 : onChange({
detail: []
}, []);
setChecked([]);
setCheckedData([]);
}, []);
var handleCheck = (0, _react.useCallback)(function (d) {
if (loading) return;
var checkedNew = (0, _toConsumableArray2.default)(checked);
if (checkedNew.includes(d)) {
checkedNew = checkedNew.filter(function (it) {
return it !== d;
});
} else {
checkedNew.push(d);
}
setChecked((0, _toConsumableArray2.default)(checkedNew));
}, [checked, loading]);
var set_Show = function set_Show() {
if (!disabled) {
setShow(true);
}
};
var renderShowInner = (0, _react.useCallback)(function () {
if (!(checkedData !== null && checkedData !== void 0 && checkedData.length)) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
onClick: set_Show,
children: placeholder
});
} else if (checkedData.length === 1) {
var _checkedData$;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
onClick: set_Show,
children: ((_checkedData$ = checkedData[0]) === null || _checkedData$ === void 0 ? void 0 : _checkedData$[labelName]) || '--'
}), allowClear && !disabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "clear-box",
onClick: clear,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index7.default, {
name: "clear",
size: "18px"
})
})]
});
} else {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
onClick: set_Show,
children: "\u5DF2\u9009".concat(checkedData.length, "\u9879")
}), allowClear && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "clear-box",
onClick: clear,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index7.default, {
name: "clear",
size: "18px"
})
})]
});
}
}, [checkedData, allowClear]);
(0, _react.useEffect)(function () {
if (value && Array.isArray(value)) {
var ddd = data !== null && data !== void 0 && data.length ? data : innerAllData;
var _checkedData = ddd.filter(function (it) {
return value.includes(it[fieldName]);
});
setCheckedData(_checkedData);
}
}, [value]);
(0, _react.useEffect)(function () {
if (!show) {
setChecked([]);
setKeyWord('');
} else {
setChecked(checkedData.map(function (it) {
return it[fieldName];
}));
}
}, [show]);
var handleConfirm = (0, _react.useCallback)(function () {
var ddd = data !== null && data !== void 0 && data.length ? data : innerAllData;
var cData = ddd.filter(function (d) {
return checked.includes(d[fieldName]);
});
setCheckedData(cData);
onChange === null || onChange === void 0 ? void 0 : onChange({
detail: checked
}, cData);
setShow(false);
}, [checked, data, innerAllData]);
var handleCheckAll = (0, _react.useCallback)(function () {
if (loading) return;
var ddd = data !== null && data !== void 0 && data.length ? data : innerAllData;
if (checked.length === ddd.length) {
setChecked([]);
} else {
setChecked(ddd.map(function (it) {
return it[fieldName];
}));
}
}, [checked, innerData, innerAllData, loading]);
(0, _react.useEffect)(function () {
setLoading(searchLoading);
}, [searchLoading]);
var searchDataInner = (0, _react.useCallback)( /*#__PURE__*/function () {
var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(vv) {
var res;
return _regenerator.default.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
if (!searchData) {
_context.next = 16;
break;
}
setLoading(true);
_context.prev = 2;
_context.next = 5;
return searchData(vv);
case 5:
res = _context.sent;
if (!vv) {
setInnerAllData(res);
}
setData(res);
_context.next = 13;
break;
case 10:
_context.prev = 10;
_context.t0 = _context["catch"](2);
throw new Error(_context.t0 === null || _context.t0 === void 0 ? void 0 : _context.t0.toString());
case 13:
_context.prev = 13;
setLoading(false);
return _context.finish(13);
case 16:
case "end":
return _context.stop();
}
}, _callee, null, [[2, 10, 13, 16]]);
}));
return function (_x) {
return _ref.apply(this, arguments);
};
}(), [searchData]);
(0, _react.useLayoutEffect)(function () {
if (searchData && !(innerAllData !== null && innerAllData !== void 0 && innerAllData.length)) {
searchDataInner('');
} else if (searchData) {
setData(innerAllData);
}
if (!searchData) {
setData(data);
}
}, []);
useDebounce(keyWord, /*#__PURE__*/function () {
var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(vv) {
var fData, ddd;
return _regenerator.default.wrap(function _callee2$(_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
if (!show) {
_context2.next = 7;
break;
}
if (!searchData) {
_context2.next = 4;
break;
}
searchDataInner(vv);
return _context2.abrupt("return");
case 4:
if (vv) {
fData = (data === null || data === void 0 ? void 0 : data.filter(function (it) {
return it[labelName].includes(vv);
})) || [];
setData(fData);
} else {
setData(data);
}
_context2.next = 9;
break;
case 7:
ddd = data !== null && data !== void 0 && data.length ? data : innerAllData;
setData(ddd);
case 9:
case "end":
return _context2.stop();
}
}, _callee2);
}));
return function (_x2) {
return _ref2.apply(this, arguments);
};
}(), 800);
var disabledItem = (0, _react.useCallback)(function (key) {
if (checked.length === limit && !checked.includes(key)) {
return true;
} else return false;
}, [checked, limit]);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, _objectSpread(_objectSpread({
className: "van-check-list-wrapper"
}, others), {}, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: (0, _classnames.default)({
'check-list-content': true,
'check-list-nocontent': checkedData.length === 0,
'check-list-disabled': !!disabled
}),
style: placeholderColor && checkedData.length === 0 ? {
color: placeholderColor
} : {},
children: renderShow ? renderShow(checkedData, set_Show) : renderShowInner()
}), showArrowDown && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index7.default, {
className: "check-list-arrow-down",
onClick: set_Show,
name: "arrow-down",
size: "14px"
}), showArrowRight && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index7.default, {
className: "check-list-arrow-down",
onClick: set_Show,
name: "arrow",
size: "14px"
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index.default, {
show: show,
position: "bottom",
onClose: function onClose() {
return setShow(false);
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "check-list-title",
children: placeholder
}), searchShow && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.default, {
value: keyWord,
onChange: function onChange(e) {
return setKeyWord(e.detail);
},
placeholder: searchPlaceholder,
background: "#f5f5f5"
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
className: "check-list-body",
style: {
height: bodyHeight || '40vh'
},
children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "check-list-loading",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.default, {})
}), !loading && innerData.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "check-list-empty",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index6.default, {
description: "\u6682\u65E0\u6570\u636E"
})
}), checkAll && limit === undefined && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
className: "check-list-item",
onClick: handleCheckAll,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.default, {
shape: "square",
value: checked.length !== 0 && (checked.length === data.length || checked.length === innerAllData.length),
disabled: disabledItem('ALL'),
parent: undefined
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "check-label-name",
children: "\u5168\u9009"
})]
}), innerData === null || innerData === void 0 ? void 0 : innerData.map(function (it, index) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "check-list-item",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.default, {
onChange: function onChange() {
return handleCheck(it[fieldName]);
},
disabled: disabledItem(it[fieldName]),
shape: "square",
value: checked.includes(it[fieldName]),
parent: undefined,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "check-label-name",
children: it[labelName] || '-'
})
})
}, "check-list-".concat(index, "-").concat(it[labelName]));
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
className: "check-list-footer",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Button, {
square: true,
block: true,
className: "check-list-cancel-btn",
onClick: function onClick() {
return setShow(false);
},
children: "\u53D6\u6D88"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Button, {
square: true,
block: true,
type: "primary",
onClick: handleConfirm,
children: "\u786E\u5B9A"
})]
})]
})]
}));
}
var _default = CheckList;
exports.default = _default;
function useDebounce(value, fn, delay) {
var timer = (0, _react.useRef)(null);
(0, _react.useEffect)(function () {
if (timer.current) {
clearTimeout(timer.current);
}
timer.current = setTimeout(function () {
fn(value);
}, delay);
return function () {
clearTimeout(timer.current);
timer.current = null;
};
}, [value]);
}