fx-form-widget
Version:
244 lines (236 loc) • 10.8 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _button = _interopRequireDefault(require("antd/lib/button"));
var _space = _interopRequireDefault(require("antd/lib/space"));
var _checkbox = _interopRequireDefault(require("antd/lib/checkbox"));
var _input = _interopRequireDefault(require("antd/lib/input"));
var _react = _interopRequireWildcard(require("react"));
var _reactSortablejs = require("react-sortablejs");
var _nanoid = require("nanoid");
var _classnames = _interopRequireDefault(require("classnames"));
var _icons = require("@ant-design/icons");
require("./index.less");
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 && {}.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; }
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 = (0, _react.useState)([]),
optionList = _ref2[0],
setOptionList = _ref2[1];
var _useState = (0, _react.useState)(false),
hasDefaultValue = _useState[0],
setHasDefaultValue = _useState[1];
var _useState2 = (0, _react.useState)(''),
defaultValue = _useState2[0],
setDefaultValue = _useState2[1];
(0, _react.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 || []);
}, []);
(0, _react.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]);
(0, _react.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: (0, _nanoid.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["default"].createElement("div", {
key: item.id
}, true ? /*#__PURE__*/_react["default"].createElement(_input["default"], {
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["default"].createElement("span", {
style: {
display: 'inline-block',
marginLeft: hasDefaultValue ? '12px' : '22px',
width: '150px'
}
}, item.value), /*#__PURE__*/_react["default"].createElement("div", {
className: "options_operate"
}, /*#__PURE__*/_react["default"].createElement(_icons.DragOutlined, null), /*#__PURE__*/_react["default"].createElement(_icons.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["default"].createElement("div", {
key: item.id,
className: (0, _classnames["default"])('options_edit_components', {
options_edit_components_choosable: item.id !== 'add',
options_add_components: item.id === 'add'
})
}, item.id !== 'add' && /*#__PURE__*/_react["default"].createElement(_space["default"], null, hasDefaultValue && /*#__PURE__*/_react["default"].createElement(_checkbox["default"], {
value: item.id,
checked: item.checked,
onChange: function onChange(e) {
return handleCheckboxChange(e, index);
}
}), pureOption(item, index)), item.id === 'add' && /*#__PURE__*/_react["default"].createElement("div", {
className: "add_operate",
key: item.id
}, /*#__PURE__*/_react["default"].createElement(_button["default"], {
type: "link",
onClick: function onClick() {
return changeOptionsList('add', index);
}
}, /*#__PURE__*/_react["default"].createElement(_icons.PlusOutlined, null), item.value), /*#__PURE__*/_react["default"].createElement(_button["default"], {
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["default"].createElement("div", {
className: "options_set_wrap"
}, readonly && /*#__PURE__*/_react["default"].createElement("div", {
className: "shade_cover"
}), /*#__PURE__*/_react["default"].createElement("div", {
className: "options_set_sort_wrap"
}, /*#__PURE__*/_react["default"].createElement(_reactSortablejs.ReactSortable, {
chosenClass: "sortable-chosen",
list: [].concat(optionList, addData),
setList: handleSetList
}, optionList && [].concat(optionList, addData).map(function (item, index) {
return renderOptions(item, index);
}))));
};
var _default = exports["default"] = OptionsSet;