@plaso-design/pro-card
Version:
@plaso-design/pro-card
230 lines • 8.53 kB
JavaScript
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["prefixCls", "className", "style", "options", "loading", "multiple", "bordered", "onChange"];
import { useMountMergeState } from '@plaso-design/pro-utils';
import { Col, ConfigProvider, Row } from 'plasod';
import classNames from 'classnames';
import omit from 'omit.js';
import React, { createContext, useCallback, useContext, useMemo, useRef } from 'react';
import CheckCard from "./index";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export var CardLoading = function CardLoading(_ref) {
var prefixCls = _ref.prefixCls;
var loadingBlockClass = "".concat(prefixCls, "-loading-block");
return /*#__PURE__*/_jsxs("div", {
className: "".concat(prefixCls, "-loading-content"),
children: [/*#__PURE__*/_jsx(Row, {
gutter: {
xs: 8,
sm: 8,
md: 8,
lg: 12
},
children: /*#__PURE__*/_jsx(Col, {
span: 22,
children: /*#__PURE__*/_jsx("div", {
className: loadingBlockClass
})
})
}), /*#__PURE__*/_jsxs(Row, {
gutter: 8,
children: [/*#__PURE__*/_jsx(Col, {
span: 8,
children: /*#__PURE__*/_jsx("div", {
className: loadingBlockClass
})
}), /*#__PURE__*/_jsx(Col, {
span: 14,
children: /*#__PURE__*/_jsx("div", {
className: loadingBlockClass
})
})]
}), /*#__PURE__*/_jsxs(Row, {
gutter: 8,
children: [/*#__PURE__*/_jsx(Col, {
span: 6,
children: /*#__PURE__*/_jsx("div", {
className: loadingBlockClass
})
}), /*#__PURE__*/_jsx(Col, {
span: 16,
children: /*#__PURE__*/_jsx("div", {
className: loadingBlockClass
})
})]
}), /*#__PURE__*/_jsxs(Row, {
gutter: 8,
children: [/*#__PURE__*/_jsx(Col, {
span: 13,
children: /*#__PURE__*/_jsx("div", {
className: loadingBlockClass
})
}), /*#__PURE__*/_jsx(Col, {
span: 9,
children: /*#__PURE__*/_jsx("div", {
className: loadingBlockClass
})
})]
}), /*#__PURE__*/_jsxs(Row, {
gutter: 8,
children: [/*#__PURE__*/_jsx(Col, {
span: 4,
children: /*#__PURE__*/_jsx("div", {
className: loadingBlockClass
})
}), /*#__PURE__*/_jsx(Col, {
span: 3,
children: /*#__PURE__*/_jsx("div", {
className: loadingBlockClass
})
}), /*#__PURE__*/_jsx(Col, {
span: 14,
children: /*#__PURE__*/_jsx("div", {
className: loadingBlockClass
})
})]
})]
});
};
export var CheckCardGroupConnext = /*#__PURE__*/createContext(null);
var CheckCardGroup = function CheckCardGroup(props) {
var customizePrefixCls = props.prefixCls,
className = props.className,
style = props.style,
_props$options = props.options,
options = _props$options === void 0 ? [] : _props$options,
_props$loading = props.loading,
loading = _props$loading === void 0 ? false : _props$loading,
_props$multiple = props.multiple,
multiple = _props$multiple === void 0 ? false : _props$multiple,
_props$bordered = props.bordered,
bordered = _props$bordered === void 0 ? true : _props$bordered,
onChange = props.onChange,
restProps = _objectWithoutProperties(props, _excluded);
var antdContext = useContext(ConfigProvider.ConfigContext);
var getOptions = useCallback(function () {
return options === null || options === void 0 ? void 0 : options.map(function (option) {
if (typeof option === 'string') {
return {
title: option,
value: option
};
}
return option;
});
}, [options]);
var prefixCls = antdContext.getPrefixCls('pro-checkcard', customizePrefixCls);
var groupPrefixCls = "".concat(prefixCls, "-group");
var domProps = omit(restProps, ['children', 'defaultValue', 'value', 'disabled', 'size']);
var _useMountMergeState = useMountMergeState(props.defaultValue, {
value: props.value,
onChange: props.onChange
}),
_useMountMergeState2 = _slicedToArray(_useMountMergeState, 2),
stateValue = _useMountMergeState2[0],
setStateValue = _useMountMergeState2[1];
var registerValueMap = useRef(new Map());
var registerValue = function registerValue(value) {
var _registerValueMap$cur;
(_registerValueMap$cur = registerValueMap.current) === null || _registerValueMap$cur === void 0 || _registerValueMap$cur.set(value, true);
};
var cancelValue = function cancelValue(value) {
var _registerValueMap$cur2;
(_registerValueMap$cur2 = registerValueMap.current) === null || _registerValueMap$cur2 === void 0 || _registerValueMap$cur2.delete(value);
};
var toggleOption = function toggleOption(option) {
if (!multiple) {
var changeValue;
changeValue = stateValue;
// 单选模式
if (changeValue === option.value) {
changeValue = undefined;
} else {
changeValue = option.value;
}
setStateValue === null || setStateValue === void 0 || setStateValue(changeValue);
}
if (multiple) {
var _changeValue2;
var _changeValue = [];
var stateValues = stateValue;
var hasOption = stateValues === null || stateValues === void 0 ? void 0 : stateValues.includes(option.value);
_changeValue = _toConsumableArray(stateValues || []);
if (!hasOption) {
_changeValue.push(option.value);
}
if (hasOption) {
_changeValue = _changeValue.filter(function (itemValue) {
return itemValue !== option.value;
});
}
var newOptions = getOptions();
var newValue = (_changeValue2 = _changeValue) === null || _changeValue2 === void 0 || (_changeValue2 = _changeValue2.filter(function (val) {
return registerValueMap.current.has(val);
})) === null || _changeValue2 === void 0 ? void 0 : _changeValue2.sort(function (a, b) {
var indexA = newOptions.findIndex(function (opt) {
return opt.value === a;
});
var indexB = newOptions.findIndex(function (opt) {
return opt.value === b;
});
return indexA - indexB;
});
setStateValue(newValue);
}
};
var children = useMemo(function () {
if (loading) {
return new Array(options.length || React.Children.toArray(props.children).length || 1).fill(0)
// eslint-disable-next-line react/no-array-index-key
.map(function (_, index) {
return /*#__PURE__*/_jsx(CheckCard, {
loading: true
}, index);
});
}
if (options && options.length > 0) {
var optionValue = stateValue;
return getOptions().map(function (option) {
var _option$size;
return /*#__PURE__*/_jsx(CheckCard, {
disabled: option.disabled,
size: (_option$size = option.size) !== null && _option$size !== void 0 ? _option$size : props.size,
value: option.value,
checked: multiple ? optionValue === null || optionValue === void 0 ? void 0 : optionValue.includes(option.value) : optionValue === option.value,
onChange: option.onChange,
title: option.title,
avatar: option.avatar,
description: option.description,
cover: option.cover
}, option.value.toString());
});
}
return props.children;
}, [getOptions, loading, multiple, options, props.children, props.size, stateValue]);
var classString = classNames(groupPrefixCls, className);
return /*#__PURE__*/_jsx(CheckCardGroupConnext.Provider, {
value: {
toggleOption: toggleOption,
bordered: bordered,
value: stateValue,
disabled: props.disabled,
size: props.size,
loading: props.loading,
multiple: props.multiple,
// https://github.com/ant-design/ant-design/issues/16376
registerValue: registerValue,
cancelValue: cancelValue
},
children: /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
className: classString,
style: style
}, domProps), {}, {
children: children
}))
});
};
export default CheckCardGroup;