@alifd/meet-react
Version:
Fusion Mobile React UI System Component
145 lines (144 loc) • 6.96 kB
JavaScript
;
exports.__esModule = true;
exports.default = void 0;
var _babelRuntimeJsxStyleTransform = require("@alifd/babel-runtime-jsx-style-transform");
var _tslib = require("tslib");
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _meetReactComponentOne = require("@alifd/meet-react-component-one");
var _view = _interopRequireDefault(require("../view"));
var _checkbox = _interopRequireDefault(require("./checkbox"));
var _utils = require("../utils");
var _hooks = require("../utils/hooks");
var _tree = require("../utils/tree");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 && Object.prototype.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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
var CheckboxGroup = function (props, ref) {
var _props$size = props.size,
size = _props$size === void 0 ? 'medium' : _props$size,
_props$prefix = props.prefix,
prefix = _props$prefix === void 0 ? 'mt-' : _props$prefix,
_props$direction = props.direction,
direction = _props$direction === void 0 ? 'ver' : _props$direction,
defaultValue = props.defaultValue,
dataSource = props.dataSource,
className = props.className,
onChange = props.onChange,
disabled = props.disabled,
children = props.children,
readOnly = props.readOnly,
valueProp = props.value,
labelAlign = props.labelAlign,
isPreview = props.isPreview,
renderPreview = props.renderPreview,
previewClassNameProp = props.previewClassName,
previewStyle = props.previewStyle,
others = (0, _tslib.__rest)(props, ["size", "prefix", "direction", "defaultValue", "dataSource", "className", "onChange", "disabled", "children", "readOnly", "value", "labelAlign", "isPreview", "renderPreview", "previewClassName", "previewStyle"]);
var previewClassName = (0, _classnames.default)(previewClassNameProp, prefix + "form-item-input--preview-" + size);
var _useValue = (0, _hooks.useValue)(props, [], {
fitValue: function fitValue(v) {
if (v && !Array.isArray(v)) {
return [v];
}
if (!(0, _utils.isValidArray)(v)) {
return [];
}
return v;
},
compare: function compare(a, b) {
return a.toString() === b.toString();
}
}),
value = _useValue[0],
setValue = _useValue[1],
isControlled = _useValue[2];
var handleChange = (0, _react.useCallback)(function (selected, checkBoxValue, e) {
if (!selected) {
var index = value.indexOf(checkBoxValue);
var newGroup = [].concat(value);
if (index >= 0) {
newGroup.splice(index, 1);
if (!isControlled) {
setValue(newGroup);
}
}
if (!disabled && !readOnly && onChange) {
onChange(newGroup, e);
}
}
if (!disabled && !readOnly && selected) {
var _newGroup = [].concat(value, [checkBoxValue]);
if (!isControlled) {
setValue(_newGroup);
}
if (onChange) {
onChange(_newGroup, e);
}
}
}, [value, setValue, isControlled, onChange]);
var content;
var ds = dataSource;
if (!ds && _react.Children.count(children) > 0) {
ds = (0, _utils.getDataSourceFromChildren)(children);
}
if ((0, _utils.isValidArray)(ds)) {
content = ds.map(function (item, index) {
var _classNames;
var itemData = {
style: {},
value: null,
checked: false,
label: '',
text: '',
disabled: false,
size: size
};
var itemOnClick = item.onClick,
itemOnChange = item.onChange,
itemClassName = item.className,
itemLabel = item.label,
itemText = item.text,
itemRest = (0, _tslib.__rest)(item, ["onClick", "onChange", "className", "label", "text"]);
if ((0, _utils.isString)(item) || (0, _utils.isNumber)(item)) {
itemData.value = item;
} else {
itemData = Object.assign(Object.assign({}, itemData), itemRest);
}
var label = itemLabel || itemText || itemData.value;
var isLast = index === ds.length - 1;
return /*#__PURE__*/(0, _react.createElement)(_checkbox.default, _extends({}, itemData, {
key: "meet_ck_" + index,
className: (0, _classnames.default)(itemClassName, (_classNames = {}, _classNames[prefix + "checkbox-item--" + direction + "-" + size] = !isLast, _classNames)),
style: (0, _babelRuntimeJsxStyleTransform.rpx2vw4style)(itemData.style),
onChange: function (selected, e) {
return handleChange(selected, itemData.value, e);
},
checked: itemData.checked || value.includes(itemData.value),
disabled: disabled || itemData.disabled,
onClick: itemOnClick
}), label);
});
}
if (isPreview) {
if ((0, _utils.isFunction)(renderPreview)) {
return /*#__PURE__*/(0, _react.createElement)(_view.default, {
className: previewClassName,
style: (0, _babelRuntimeJsxStyleTransform.rpx2vw4style)(previewStyle)
}, renderPreview((0, _tree.getItemsFromDataSource)(ds, value)));
}
return /*#__PURE__*/(0, _react.createElement)(_meetReactComponentOne.Text, {
className: previewClassName,
style: (0, _babelRuntimeJsxStyleTransform.rpx2vw4style)(previewStyle)
}, (0, _tree.getItemsFromDataSource)(ds, value).map(function (v) {
return v.label || v.text;
}).join(','));
}
return /*#__PURE__*/(0, _react.createElement)(_view.default, _extends({
ref: ref,
className: (0, _classnames.default)(className, prefix + "checkbox-group", prefix + "checkbox-group--" + direction, prefix + "checkbox-group--" + labelAlign + "-" + size)
}, others), content);
};
CheckboxGroup.displayName = 'Checkbox.Group';
var _default = exports.default = /*#__PURE__*/(0, _react.forwardRef)(CheckboxGroup);