es-grid-template
Version:
es-grid-template
404 lines (396 loc) • 12.9 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SelectStyle = exports.EditForm = void 0;
var _react = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _reactHookForm = require("react-hook-form");
var _yup = require("@hookform/resolvers/yup");
var _grid = require("rc-master-ui/es/grid");
var _utils = require("../../hook/utils");
var _rcMasterUi = require("rc-master-ui");
var _antd = require("antd");
var _divider = _interopRequireDefault(require("rc-master-ui/es/divider"));
var _button = _interopRequireDefault(require("rc-master-ui/es/button"));
var _InputControl = _interopRequireDefault(require("../InputControl/InputControl"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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; }
const SelectStyle = exports.SelectStyle = _styledComponents.default.div.withConfig({
displayName: "SelectStyle",
componentId: "es-grid-template__sc-18plqpt-0"
})(["width:100%;&.be-select{.input-group-merge{flex-wrap:nowrap;}}"]);
const EditForm = props => {
const {
id,
// menuPortalTarget,
value,
fieldKey,
placeholder,
// invalid,
menuHeight,
menuWidth,
// classNamePrefix,
onChange,
rowData,
// onKeyDown,
t,
cellFocus,
column
} = props;
const formRef = (0, _react.useRef)();
const divRef = (0, _react.useRef)(null);
const inputRef = (0, _react.useRef)(null);
const defaultValue = !(0, _utils.isNullOrUndefined)(value) ? column?.editFromSettings?.formatLabel ? column?.editFromSettings?.formatLabel(value) : value[fieldKey] : '';
const {
control,
handleSubmit,
getValues,
reset,
setValue,
setError,
formState: {
errors
}
} = (0, _reactHookForm.useForm)({
mode: 'onChange',
defaultValues: column.editFromSettings?.defaultValues,
resolver: column.editFromSettings?.schema ? (0, _yup.yupResolver)(column.editFromSettings?.schema) : undefined
});
const handleToggle = () => {
divRef?.current?.click(); // Giả lập click vào nút để mở dropdown
};
_react.default.useEffect(() => {
if (cellFocus) {
handleToggle();
}
}, [cellFocus]);
const handleOnSubmit = val => {
handleToggle();
onChange(val);
};
// const handleOnKeyDown = (e: any) => {
//
// if (dropdownOpen) {
// e.preventDefault()
//
// if (e.code === 'Tab') {
// e.stopPropagation()
// const formElement = document.getElementById('edit-form')
//
// if (formElement) {
//
// formElement.getElementsByTagName('input')[0]?.focus()
//
// }
//
// }
//
// if (e.code === "Escape") {
// e.preventDefault()
// e.stopPropagation()
// return e
// }
//
// const formElement = document.getElementById('edit-form')
//
// if (formElement) {
//
// formElement.getElementsByTagName('input')[0]?.focus()
//
// }
// return e.code
//
//
// } else {
// if (e.code === 'ArrowDown') {
// e.preventDefault()
//
// setTimeout(() => {
// const formElement = document.getElementById('edit-form')
// if (formElement) {
// formElement.getElementsByTagName('input')[0]?.focus()
//
// }
//
// }, 100)
//
//
// }
// }
//
// if (onKeyDown) {
// onKeyDown(e)
// }
//
//
// }
//
const handleOnFocus = e => {
e.target.setSelectionRange(0, e.target.innerText.length - 1);
};
const formItemKeyDown = (e, index, length) => {
if (e.code === 'Tab' || e.code === 'ArrowDown') {
const itemElement = document.getElementById(`edit-form-${index + 1}`);
if (itemElement && index < length) {
if (itemElement.className.includes('be-select')) {
itemElement.getElementsByTagName('input')[0]?.focus();
} else {
itemElement.focus();
}
}
e.preventDefault();
}
if (e.code === 'ArrowUp') {
const itemElement = document.getElementById(`edit-form-${index - 1}`);
if (itemElement && index !== 0) {
if (itemElement.className.includes('be-select')) {
itemElement.getElementsByTagName('input')[0]?.focus();
} else {
itemElement.focus();
}
}
e.preventDefault();
}
if (e.code === 'Enter') {
if ((0, _utils.isObjEmpty)(errors)) {
const rs = getValues();
if (column.editFromSettings?.schema) {
column.editFromSettings?.schema.validate(rs, {
abortEarly: false
}).then(() => {
handleToggle();
onChange(rs);
if (column.editFromSettings && column?.editFromSettings?.formClose) {
column?.editFromSettings?.formClose({
value,
setValue,
getValues,
reset
});
}
if (inputRef) {
inputRef.current.focus();
}
}).catch(err => {
e.preventDefault();
e.stopPropagation();
err.inner.forEach(error => {
setError(error.path ? error.path : '', {
type: "manual",
message: error.message
});
});
});
}
} else {
e.preventDefault();
e.stopPropagation();
}
}
};
// const checkErrors = () => {
//
//
// if (isObjEmpty(errors)) {
// const rs = getValues()
// if (column.editFromSettings?.schema) {
// column.editFromSettings?.schema.validate(rs, { abortEarly: false })
// .then(() => {
// handleToggle()
// onChange(rs)
//
// if (column.editFromSettings && column?.editFromSettings?.formClose) {
// column?.editFromSettings?.formClose({value, setValue, getValues, reset})
// }
// if (inputRef) {
// inputRef.current.focus()
// }
// })
// .catch((err: ValidationError) => {
//
// err.inner.forEach((error: ValidationError) => {
//
// setError(error.path ? error.path : '', {
// type: "manual",
// message: error.message
// })
// })
// })
// }
//
//
// } else {
//
// }
// }
const handleFormKeydown = e => {
// if (dropdownOpen) {
if (e.code === 'Tab' || e.code === 'ArrowUp' || e.code === 'ArrowDown') {
e.preventDefault();
e.stopPropagation();
// if (formElement && indexRowForm <= totalRowFrom) {
// setIndexRowForm((prevState) => prevState + 1)
// formElement.getElementsByTagName('input')[indexRowForm + 1]?.focus()
// }
}
// if (e.code === 'Enter') {
// const rs = getValues()
//
//
// onChange(rs)
//
// if (column.editFromSettings && column?.editFromSettings?.formClose) {
// column?.editFromSettings?.formClose({value, setValue, getValues, reset})
// }
// if (inputRef) {
// inputRef.current.focus()
// }
//
// e.preventDefault()
// e.stopPropagation()
// }
if (e.code === "Escape") {
handleToggle();
if (inputRef) {
inputRef.current.focus();
}
e.preventDefault();
e.stopPropagation();
}
return e.code;
// }
};
const renderForm = rows => {
return /*#__PURE__*/_react.default.createElement(_grid.Row, {
gutter: [0, 10]
}, rows.map((item, index) => {
return /*#__PURE__*/_react.default.createElement(_grid.Col, {
key: `${index}`,
xl: column.editFromSettings?.layout?.xl ? column.editFromSettings?.layout?.xl : 24,
lg: column.editFromSettings?.layout?.lg ? column.editFromSettings?.layout?.lg : 24,
md: column.editFromSettings?.layout?.md ? column.editFromSettings?.layout?.md : 24,
sm: column.editFromSettings?.layout?.sm ? column.editFromSettings?.layout?.sm : 24,
xs: column.editFromSettings?.layout?.xs ? column.editFromSettings?.layout?.xs : 24,
className: 'mb-1'
}, /*#__PURE__*/_react.default.createElement(_InputControl.default, {
id: `edit-form-${index}`,
t: t,
control: control
// name={`specificationCode${index + 1}`}
,
name: item.name,
label: item.label ? item.label : '',
labelSize: "label-medium",
errors: errors[item.name],
onKeyDown: e => formItemKeyDown(e, index, column.editFromSettings?.items ? column.editFromSettings?.items.length : 0)
}));
}));
};
const contentStyle = {
padding: 6,
width: menuWidth,
backgroundColor: '#fff',
borderRadius: '6px',
boxShadow: '0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)'
};
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(SelectStyle, {
ref: formRef,
id: id ? id : ''
}, /*#__PURE__*/_react.default.createElement(_antd.Dropdown, {
menu: {
items: []
},
autoFocus: true,
onOpenChange: open => {
if (open) {
setTimeout(() => {
const formElement = document.getElementById('edit-form-0');
if (formElement) {
formElement.focus();
}
}, 10);
if (column.editFromSettings && column?.editFromSettings?.formOpen) {
column?.editFromSettings?.formOpen({
value,
setValue,
getValues,
reset,
rowData
});
}
} else {
if (column.editFromSettings && column?.editFromSettings?.formClose) {
column?.editFromSettings?.formClose({
value,
setValue,
getValues,
reset,
rowData
});
}
}
},
trigger: ['click'],
destroyPopupOnHide: true,
rootClassName: 'be-popup-container',
dropdownRender: () => /*#__PURE__*/_react.default.createElement("div", {
style: contentStyle,
onKeyDown: e => handleFormKeydown(e),
onClick: e => {
e.preventDefault();
e.stopPropagation();
}
}, /*#__PURE__*/_react.default.createElement("form", {
className: "todo-modal",
onSubmit: handleSubmit(handleOnSubmit)
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
className: 'p-1',
style: {
maxHeight: menuHeight ? menuHeight : 300,
overflow: "auto"
}
}, column.editFromSettings?.items ? renderForm(column.editFromSettings?.items) : ''), /*#__PURE__*/_react.default.createElement(_divider.default, {
style: {
margin: 0
}
}), /*#__PURE__*/_react.default.createElement("div", {
className: "d-flex justify-content-end p-1"
// style={{ boxShadow: "0 4px 24px 0 rgb(34 41 47 / 10%)" }}
}, /*#__PURE__*/_react.default.createElement(_button.default, {
variant: "solid",
className: ""
// onSubmit={handleSubmit(handleOnSubmit)}
,
onClick: handleSubmit(handleOnSubmit),
color: "primary",
style: {}
}, /*#__PURE__*/_react.default.createElement("div", {
className: "d-flex "
}, t ? t('Save') : 'Save'))))))
}, /*#__PURE__*/_react.default.createElement("div", {
ref: divRef,
style: {
height: '100%'
}
}, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Input, {
style: {
borderRadius: 0,
height: '100%'
},
ref: inputRef,
defaultValue: defaultValue,
value: defaultValue,
placeholder: placeholder,
className: 'be-select__input'
// onChange={handleOnChange}
,
onFocus: handleOnFocus
// onClick={handleOnClick}
// onKeyDown={handleOnKeyDown}
,
readOnly: true
})))));
};
exports.EditForm = EditForm;