fx-form-widget
Version:
237 lines (230 loc) • 9.26 kB
JavaScript
import _Button from "antd/es/button";
import _Space from "antd/es/space";
import _Checkbox from "antd/es/checkbox";
import _Input from "antd/es/input";
import React, { useState, useEffect } from 'react';
import { ReactSortable } from 'react-sortablejs';
import { nanoid } from 'nanoid';
import classnames from 'classnames';
import { PlusOutlined, DeleteOutlined, DragOutlined } from '@ant-design/icons';
import './index.less';
var OptionsSet = function OptionsSet(_ref) {
var _ref$schema = _ref.schema,
schema = _ref$schema === void 0 ? {} : _ref$schema,
_ref$onChange = _ref.onChange,
onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
_ref$value = _ref.value,
value = _ref$value === void 0 ? {
enumKeys: [],
enumNames: []
} : _ref$value;
var _schema$enumKeys = schema.enumKeys,
enumKeys = _schema$enumKeys === void 0 ? [] : _schema$enumKeys,
_schema$enumNames = schema.enumNames,
enumNames = _schema$enumNames === void 0 ? [] : _schema$enumNames,
_schema$data = schema.data,
data = _schema$data === void 0 ? {
enumKeys: [],
enumNames: []
} : _schema$data,
_schema$readonly = schema.readonly,
readonly = _schema$readonly === void 0 ? false : _schema$readonly;
var _ref2 = useState([]),
optionList = _ref2[0],
setOptionList = _ref2[1];
var _useState = useState(false),
hasDefaultValue = _useState[0],
setHasDefaultValue = _useState[1];
var _useState2 = useState(''),
defaultValue = _useState2[0],
setDefaultValue = _useState2[1];
useEffect(function () {
var _data$enumKeys, _data$enumNames;
var localOptionList = [];
// let traverseKeys = value?.enumKeys?.length !== 0 ? value.enumKeys : (data?.enumKeys.length !== 0 ? data?.enumKeys : enumKeys);
// let traverseNames = value?.enumNames?.length !== 0 ? value.enumNames : (data?.enumNames.length !== 0 ? data?.enumNames : enumNames);
var traverseKeys = (data === null || data === void 0 ? void 0 : (_data$enumKeys = data.enumKeys) === null || _data$enumKeys === void 0 ? void 0 : _data$enumKeys.length) !== 0 ? data === null || data === void 0 ? void 0 : data.enumKeys : enumKeys;
var traverseNames = (data === null || data === void 0 ? void 0 : (_data$enumNames = data.enumNames) === null || _data$enumNames === void 0 ? void 0 : _data$enumNames.length) !== 0 ? data === null || data === void 0 ? void 0 : data.enumNames : enumNames;
localOptionList = traverseKeys === null || traverseKeys === void 0 ? void 0 : traverseKeys.map(function (key, index) {
var _schema$ui_options, _schema$ui_options2, _schema$ui_options3;
return {
id: key,
value: traverseNames[index],
edit: false,
chosen: false,
selected: false,
checked: Array.isArray(schema === null || schema === void 0 ? void 0 : (_schema$ui_options = schema['ui_options']) === null || _schema$ui_options === void 0 ? void 0 : _schema$ui_options['defaultValue']) ? (schema === null || schema === void 0 ? void 0 : (_schema$ui_options2 = schema['ui_options']) === null || _schema$ui_options2 === void 0 ? void 0 : _schema$ui_options2['defaultValue'][0]) === key ? true : false : (schema === null || schema === void 0 ? void 0 : (_schema$ui_options3 = schema['ui_options']) === null || _schema$ui_options3 === void 0 ? void 0 : _schema$ui_options3['defaultValue']) === key ? true : false
};
});
// 默认选中
if (schema['ui_options']) {
Object.keys(schema['ui_options']).forEach(function (key) {
if (key === 'defaultValue') {
if (Array.isArray(schema['ui_options'][key])) {
if (schema['ui_options'][key].length) {
setHasDefaultValue(true);
setDefaultValue(schema['ui_options'][key][0]);
}
} else {
if (schema['ui_options'][key]) {
setDefaultValue(schema['ui_options'][key]);
setHasDefaultValue(true);
}
}
}
});
}
setOptionList(localOptionList || []);
}, []);
useEffect(function () {
setTimeout(function () {
var content = document.getElementsByClassName('options_set_sort_wrap')[0];
if ((content === null || content === void 0 ? void 0 : content.scrollHeight) >= 329) content.scrollTop = content.scrollHeight;
}, 300);
onChange([].concat(optionList));
}, [optionList]);
useEffect(function () {
if (!hasDefaultValue) {
setDefaultValue('');
}
}, [hasDefaultValue]);
var addData = [{
id: 'add',
value: '增加一项',
edit: false,
chosen: false,
selected: false
}];
var changeOptionsList = function changeOptionsList(type, index, value) {
switch (type) {
case 'add':
optionList.push({
id: nanoid(6),
value: '新选项',
edit: false,
checked: false
});
break;
case 'edit':
optionList[index].edit = !optionList[index].edit;
break;
case 'delete':
optionList.splice(index, 1);
break;
case 'change':
optionList[index].value = value;
break;
}
setOptionList([].concat(optionList));
};
// 配置项
var pureOption = function pureOption(item, index) {
return /*#__PURE__*/React.createElement("div", {
key: item.id
}, true ? /*#__PURE__*/React.createElement(_Input, {
className: "options_input " + (!hasDefaultValue ? 'options_input2' : ''),
value: item.value,
onChange: function onChange(e) {
return changeOptionsList('change', index, e.target.value);
},
onBlur: function onBlur(e) {
return changeOptionsList('edit', index);
},
onPressEnter: function onPressEnter(e) {
return changeOptionsList('edit', index);
}
}) : /*#__PURE__*/React.createElement("span", {
style: {
display: 'inline-block',
marginLeft: hasDefaultValue ? '12px' : '22px',
width: '150px'
}
}, item.value), /*#__PURE__*/React.createElement("div", {
className: "options_operate"
}, /*#__PURE__*/React.createElement(DragOutlined, null), /*#__PURE__*/React.createElement(DeleteOutlined, {
className: optionList.length === 1 ? 'noDelete' : '',
onClick: function onClick() {
if (optionList.length > 1) changeOptionsList('delete', index);
}
})));
};
// Checkbox change逻辑
var handleCheckboxChange = function handleCheckboxChange(e, index) {
if (e.target.value) {
optionList.forEach(function (item, ix) {
if (ix !== index) {
item.checked = false;
} else {
item.checked = !item.checked;
}
});
}
// 默认选中值
if (optionList[index].checked) {
// 选了
setDefaultValue(optionList[index].id);
} else {
// 没选
setDefaultValue('');
}
setOptionList([].concat(optionList));
};
// 渲染 添加配置项
var renderOptions = function renderOptions(item, index) {
return /*#__PURE__*/React.createElement("div", {
key: item.id,
className: classnames('options_edit_components', {
options_edit_components_choosable: item.id !== 'add',
options_add_components: item.id === 'add'
})
}, item.id !== 'add' && /*#__PURE__*/React.createElement(_Space, null, hasDefaultValue && /*#__PURE__*/React.createElement(_Checkbox, {
value: item.id,
checked: item.checked,
onChange: function onChange(e) {
return handleCheckboxChange(e, index);
}
}), pureOption(item, index)), item.id === 'add' && /*#__PURE__*/React.createElement("div", {
className: "add_operate",
key: item.id
}, /*#__PURE__*/React.createElement(_Button, {
type: "link",
onClick: function onClick() {
return changeOptionsList('add', index);
}
}, /*#__PURE__*/React.createElement(PlusOutlined, null), item.value), /*#__PURE__*/React.createElement(_Button, {
type: "link",
onClick: hasDefaultOption
}, hasDefaultValue ? '关闭' : '编辑', "\u9ED8\u8BA4\u9009\u4E2D")));
};
// sortable的setList方法
var handleSetList = function handleSetList(data, sortable, store) {
if (!!store.dragging) {
var sortData = data && data.filter(function (item) {
return item.id !== 'add';
});
setOptionList([].concat(sortData));
}
};
// 开启/关闭默认选中
var hasDefaultOption = function hasDefaultOption() {
setHasDefaultValue(!hasDefaultValue);
optionList.forEach(function (item) {
item.checked = false;
});
setOptionList([].concat(optionList));
};
return /*#__PURE__*/React.createElement("div", {
className: "options_set_wrap"
}, readonly && /*#__PURE__*/React.createElement("div", {
className: "shade_cover"
}), /*#__PURE__*/React.createElement("div", {
className: "options_set_sort_wrap"
}, /*#__PURE__*/React.createElement(ReactSortable, {
chosenClass: "sortable-chosen",
list: [].concat(optionList, addData),
setList: handleSetList
}, optionList && [].concat(optionList, addData).map(function (item, index) {
return renderOptions(item, index);
}))));
};
export default OptionsSet;