@plaso-design/pro-card
Version:
@plaso-design/pro-card
237 lines (236 loc) • 9.8 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.CheckCardGroupConnext = exports.CardLoading = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _proUtils = require("@plaso-design/pro-utils");
var _plasod = require("plasod");
var _classnames = _interopRequireDefault(require("classnames"));
var _omit = _interopRequireDefault(require("omit.js"));
var _react = _interopRequireWildcard(require("react"));
var _index = _interopRequireDefault(require("./index"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["prefixCls", "className", "style", "options", "loading", "multiple", "bordered", "onChange"];
var CardLoading = exports.CardLoading = function CardLoading(_ref) {
var prefixCls = _ref.prefixCls;
var loadingBlockClass = "".concat(prefixCls, "-loading-block");
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "".concat(prefixCls, "-loading-content"),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_plasod.Row, {
gutter: {
xs: 8,
sm: 8,
md: 8,
lg: 12
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_plasod.Col, {
span: 22,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: loadingBlockClass
})
})
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_plasod.Row, {
gutter: 8,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_plasod.Col, {
span: 8,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: loadingBlockClass
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_plasod.Col, {
span: 14,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: loadingBlockClass
})
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_plasod.Row, {
gutter: 8,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_plasod.Col, {
span: 6,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: loadingBlockClass
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_plasod.Col, {
span: 16,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: loadingBlockClass
})
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_plasod.Row, {
gutter: 8,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_plasod.Col, {
span: 13,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: loadingBlockClass
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_plasod.Col, {
span: 9,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: loadingBlockClass
})
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_plasod.Row, {
gutter: 8,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_plasod.Col, {
span: 4,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: loadingBlockClass
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_plasod.Col, {
span: 3,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: loadingBlockClass
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_plasod.Col, {
span: 14,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: loadingBlockClass
})
})]
})]
});
};
var CheckCardGroupConnext = exports.CheckCardGroupConnext = /*#__PURE__*/(0, _react.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 = (0, _objectWithoutProperties2.default)(props, _excluded);
var antdContext = (0, _react.useContext)(_plasod.ConfigProvider.ConfigContext);
var getOptions = (0, _react.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 = (0, _omit.default)(restProps, ['children', 'defaultValue', 'value', 'disabled', 'size']);
var _useMountMergeState = (0, _proUtils.useMountMergeState)(props.defaultValue, {
value: props.value,
onChange: props.onChange
}),
_useMountMergeState2 = (0, _slicedToArray2.default)(_useMountMergeState, 2),
stateValue = _useMountMergeState2[0],
setStateValue = _useMountMergeState2[1];
var registerValueMap = (0, _react.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 = (0, _toConsumableArray2.default)(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 = (0, _react.useMemo)(function () {
if (loading) {
return new Array(options.length || _react.default.Children.toArray(props.children).length || 1).fill(0)
// eslint-disable-next-line react/no-array-index-key
.map(function (_, index) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, {
loading: true
}, index);
});
}
if (options && options.length > 0) {
var optionValue = stateValue;
return getOptions().map(function (option) {
var _option$size;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, {
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 = (0, _classnames.default)(groupPrefixCls, className);
return /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({
className: classString,
style: style
}, domProps), {}, {
children: children
}))
});
};
var _default = exports.default = CheckCardGroup;