@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
404 lines • 15.7 kB
JavaScript
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["disabled", "data", "labelName", "bodyHeight", "renderShow", "fieldName", "value", "onChange", "searchLoading", "searchData", "checkAll", "limit", "allowClear", "placeholder", "searchPlaceholder", "placeholderColor", "searchShow", "showArrowDown", "showArrowRight"];
import _regeneratorRuntime from "@babel/runtime/regenerator";
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) { _defineProperty(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; }
import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
import { View } from '@tarojs/components';
import classNames from 'classnames';
import Popup from '../popup/index';
import Search from '../search/index';
import Checkbox from '../checkbox/index';
import { Button } from '../button/index';
import Loading from '../loading/index';
import Empty from '../empty/index';
import Icon from '../icon/index';
import { get } from '../default-props';
import { jsx as _jsx } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var d = get().CheckList;
export 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 = _objectWithoutProperties(_d$props, _excluded);
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
show = _useState2[0],
setShow = _useState2[1];
var _useState3 = useState([]),
_useState4 = _slicedToArray(_useState3, 2),
checked = _useState4[0],
setChecked = _useState4[1];
var _useState5 = useState([]),
_useState6 = _slicedToArray(_useState5, 2),
checkedData = _useState6[0],
setCheckedData = _useState6[1];
var _useState7 = useState(''),
_useState8 = _slicedToArray(_useState7, 2),
keyWord = _useState8[0],
setKeyWord = _useState8[1];
var _useState9 = useState([]),
_useState10 = _slicedToArray(_useState9, 2),
innerData = _useState10[0],
setData = _useState10[1];
var _useState11 = useState(false),
_useState12 = _slicedToArray(_useState11, 2),
loading = _useState12[0],
setLoading = _useState12[1];
var _useState13 = useState([]),
_useState14 = _slicedToArray(_useState13, 2),
innerAllData = _useState14[0],
setInnerAllData = _useState14[1];
var clear = useCallback(function () {
onChange === null || onChange === void 0 ? void 0 : onChange({
detail: []
}, []);
setChecked([]);
setCheckedData([]);
}, []);
var handleCheck = useCallback(function (d) {
if (loading) return;
var checkedNew = _toConsumableArray(checked);
if (checkedNew.includes(d)) {
checkedNew = checkedNew.filter(function (it) {
return it !== d;
});
} else {
checkedNew.push(d);
}
setChecked(_toConsumableArray(checkedNew));
}, [checked, loading]);
var set_Show = function set_Show() {
if (!disabled) {
setShow(true);
}
};
var renderShowInner = useCallback(function () {
if (!(checkedData !== null && checkedData !== void 0 && checkedData.length)) {
return /*#__PURE__*/_jsx(View, {
onClick: set_Show,
children: placeholder
});
} else if (checkedData.length === 1) {
var _checkedData$;
return /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(View, {
onClick: set_Show,
children: ((_checkedData$ = checkedData[0]) === null || _checkedData$ === void 0 ? void 0 : _checkedData$[labelName]) || '--'
}), allowClear && !disabled && /*#__PURE__*/_jsx(View, {
className: "clear-box",
onClick: clear,
children: /*#__PURE__*/_jsx(Icon, {
name: "clear",
size: "18px"
})
})]
});
} else {
return /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(View, {
onClick: set_Show,
children: "\u5DF2\u9009".concat(checkedData.length, "\u9879")
}), allowClear && /*#__PURE__*/_jsx(View, {
className: "clear-box",
onClick: clear,
children: /*#__PURE__*/_jsx(Icon, {
name: "clear",
size: "18px"
})
})]
});
}
}, [checkedData, allowClear]);
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]);
useEffect(function () {
if (!show) {
setChecked([]);
setKeyWord('');
} else {
setChecked(checkedData.map(function (it) {
return it[fieldName];
}));
}
}, [show]);
var handleConfirm = 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 = 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]);
useEffect(function () {
setLoading(searchLoading);
}, [searchLoading]);
var searchDataInner = useCallback( /*#__PURE__*/function () {
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(vv) {
var res;
return _regeneratorRuntime.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]);
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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(vv) {
var fData, ddd;
return _regeneratorRuntime.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 = useCallback(function (key) {
if (checked.length === limit && !checked.includes(key)) {
return true;
} else return false;
}, [checked, limit]);
return /*#__PURE__*/_jsxs(View, _objectSpread(_objectSpread({
className: "van-check-list-wrapper"
}, others), {}, {
children: [/*#__PURE__*/_jsx(View, {
className: classNames({
'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__*/_jsx(Icon, {
className: "check-list-arrow-down",
onClick: set_Show,
name: "arrow-down",
size: "14px"
}), showArrowRight && /*#__PURE__*/_jsx(Icon, {
className: "check-list-arrow-down",
onClick: set_Show,
name: "arrow",
size: "14px"
}), /*#__PURE__*/_jsxs(Popup, {
show: show,
position: "bottom",
onClose: function onClose() {
return setShow(false);
},
children: [/*#__PURE__*/_jsx(View, {
className: "check-list-title",
children: placeholder
}), searchShow && /*#__PURE__*/_jsx(Search, {
value: keyWord,
onChange: function onChange(e) {
return setKeyWord(e.detail);
},
placeholder: searchPlaceholder,
background: "#f5f5f5"
}), /*#__PURE__*/_jsxs(View, {
className: "check-list-body",
style: {
height: bodyHeight || '40vh'
},
children: [loading && /*#__PURE__*/_jsx(View, {
className: "check-list-loading",
children: /*#__PURE__*/_jsx(Loading, {})
}), !loading && innerData.length === 0 && /*#__PURE__*/_jsx(View, {
className: "check-list-empty",
children: /*#__PURE__*/_jsx(Empty, {
description: "\u6682\u65E0\u6570\u636E"
})
}), checkAll && limit === undefined && /*#__PURE__*/_jsxs(View, {
className: "check-list-item",
onClick: handleCheckAll,
children: [/*#__PURE__*/_jsx(Checkbox, {
shape: "square",
value: checked.length !== 0 && (checked.length === data.length || checked.length === innerAllData.length),
disabled: disabledItem('ALL'),
parent: undefined
}), /*#__PURE__*/_jsx(View, {
className: "check-label-name",
children: "\u5168\u9009"
})]
}), innerData === null || innerData === void 0 ? void 0 : innerData.map(function (it, index) {
return /*#__PURE__*/_jsx(View, {
className: "check-list-item",
children: /*#__PURE__*/_jsx(Checkbox, {
onChange: function onChange() {
return handleCheck(it[fieldName]);
},
disabled: disabledItem(it[fieldName]),
shape: "square",
value: checked.includes(it[fieldName]),
parent: undefined,
children: /*#__PURE__*/_jsx(View, {
className: "check-label-name",
children: it[labelName] || '-'
})
})
}, "check-list-".concat(index, "-").concat(it[labelName]));
})]
}), /*#__PURE__*/_jsxs(View, {
className: "check-list-footer",
children: [/*#__PURE__*/_jsx(Button, {
square: true,
block: true,
className: "check-list-cancel-btn",
onClick: function onClick() {
return setShow(false);
},
children: "\u53D6\u6D88"
}), /*#__PURE__*/_jsx(Button, {
square: true,
block: true,
type: "primary",
onClick: handleConfirm,
children: "\u786E\u5B9A"
})]
})]
})]
}));
}
export default CheckList;
function useDebounce(value, fn, delay) {
var timer = useRef(null);
useEffect(function () {
if (timer.current) {
clearTimeout(timer.current);
}
timer.current = setTimeout(function () {
fn(value);
}, delay);
return function () {
clearTimeout(timer.current);
timer.current = null;
};
}, [value]);
}