@e-group/material-lab
Version:
EGroup Team Lab - Incubator for EGroup Team experimental React components.
377 lines (330 loc) • 14 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _clsx = _interopRequireDefault(require("clsx"));
var _makeStyles = _interopRequireDefault(require("@material-ui/core/styles/makeStyles"));
var _pickers = require("@material-ui/pickers");
var _Input = _interopRequireDefault(require("@material-ui/core/Input"));
var _Select = _interopRequireDefault(require("@material-ui/core/Select"));
var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
var _TableRow = _interopRequireDefault(require("@material-ui/core/TableRow"));
var _TableCell = _interopRequireDefault(require("@material-ui/core/TableCell"));
var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
var _DeleteOutline = _interopRequireDefault(require("@material-ui/icons/DeleteOutline"));
var _Edit = _interopRequireDefault(require("@material-ui/icons/Edit"));
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
// Basic example,
// const renderDataRow = rowData => (
// <EditableRow
// key={rowData.acaseDebtId}
// rowData={{
// ...rowData,
// debtType: rowData.debtType.debtTypeId
// }}
// editItems={[
// {
// name: 'debtType',
// variant: 'select',
// children: options.get('debtType', List()).map(el => (
// <MenuItem key={el.get('key')} value={el.get('key')}>
// {el.get('value')}
// </MenuItem>
// ))
// },
// {
// name: 'acaseDebtAmount',
// type: 'number',
// startAdornment: <InputAdornment position="start">$</InputAdornment>
// },
// {
// name: 'acaseDebtAnnualRate',
// type: 'number',
// endAdornment: <InputAdornment position="end">%</InputAdornment>
// },
// {
// name: 'acaseDebtRepaymentFrequency',
// variant: 'select',
// children: options
// .get('acaseDebtRepaymentFrequency', List())
// .map(el => (
// <MenuItem key={el.get('key')} value={el.get('key')}>
// {el.get('value')}
// </MenuItem>
// ))
// },
// {
// name: 'acaseDebtRepaymentAmount',
// type: 'number',
// startAdornment: <InputAdornment position="start">$</InputAdornment>
// },
// {
// name: 'acaseDebtRepaymentStatus',
// variant: 'select',
// children: options.get('acaseDebtRepaymentStatus', List()).map(el => (
// <MenuItem key={el.get('key')} value={el.get('key')}>
// {el.get('value')}
// </MenuItem>
// ))
// },
// {
// name: 'acaseDebtReason',
// variant: 'select',
// children: options.get('acaseDebtReason', List()).map(el => (
// <MenuItem key={el.get('key')} value={el.get('key')}>
// {el.get('value')}
// </MenuItem>
// ))
// },
// {
// name: 'acaseDebtStartDateString',
// variant: 'date',
// format: 'YYYY-MM-DD'
// },
// {
// name: 'acaseDebtExpireDateString',
// variant: 'date',
// format: 'YYYY-MM-DD'
// },
// {
// name: 'acaseDebtNegotiationStatus',
// variant: 'select',
// children: options
// .get('acaseDebtNegotiationStatus', List())
// .map(el => (
// <MenuItem key={el.get('key')} value={el.get('key')}>
// {el.get('value')}
// </MenuItem>
// ))
// },
// {
// name: 'acaseDebtEffect',
// variant: 'select',
// children: options.get('acaseDebtEffect', List()).map(el => (
// <MenuItem key={el.get('key')} value={el.get('key')}>
// {el.get('value')}
// </MenuItem>
// ))
// },
// 'acaseDebtNote'
// ]}
// displayItems={[
// rowData.debtType.debtTypeName,
// `$${rowData.acaseDebtAmount}`,
// `${rowData.acaseDebtAnnualRate}%`,
// rowData.acaseDebtRepaymentFrequency,
// `$${rowData.acaseDebtRepaymentAmount}`,
// rowData.acaseDebtRepaymentStatus,
// rowData.acaseDebtReason,
// rowData.acaseDebtStartDateString.format('YYYY-MM-DD'),
// rowData.acaseDebtExpireDateString.format('YYYY-MM-DD'),
// rowData.acaseDebtNegotiationStatus,
// rowData.acaseDebtEffect,
// {
// text: rowData.acaseDebtNote,
// breakAll: true
// }
// ]}
// onEditSave={values => {
// const payload = fromJS(values)
// .deleteAll([
// 'acase',
// 'acaseDebtCreateDateString',
// 'acaseDebtUpdateDateString'
// ])
// .update('acaseDebtStartDateString', val => val.format('YYYY-MM-DD'))
// .update('acaseDebtExpireDateString', val => val.format('YYYY-MM-DD'))
// .update('debtType', val =>
// Map({
// debtTypeId: val
// })
// )
// .set('acaseId', match.params.acaseId)
// .toJS();
// fetchPatchAcaseDebt(payload);
// }}
// onDeleteSave={() => {
// fetchDeleteAcaseDebt({
// acaseId: match.params.acaseId,
// acaseDebtId: rowData.acaseDebtId
// });
// }}
// />
// );
const variantComponent = {
input: _Input.default,
select: _Select.default,
date: _pickers.DatePicker
};
const useStyles = (0, _makeStyles.default)(theme => ({
input: {
minWidth: 100
},
breakCell: {
whiteSpace: 'normal'
},
break: {
wordBreak: 'break-all',
minWidth: 100
}
}));
const EditableRow = props => {
const rowData = props.rowData,
editItems = props.editItems,
displayItems = props.displayItems,
onEditSave = props.onEditSave,
onDeleteSave = props.onDeleteSave;
const classes = useStyles(props);
const _React$useState = _react.default.useState(rowData),
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
values = _React$useState2[0],
setValues = _React$useState2[1];
const _React$useState3 = _react.default.useState(false),
_React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
isEditing = _React$useState4[0],
setIsEditing = _React$useState4[1];
const _React$useState5 = _react.default.useState(false),
_React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
isDeleting = _React$useState6[0],
setIsDeleting = _React$useState6[1];
const handleChange = name => e => {
const value = e.target.value;
setValues(values => _objectSpread(_objectSpread({}, values), {}, {
[name]: value
}));
};
const handleDateChange = name => date => {
const value = date;
setValues(values => _objectSpread(_objectSpread({}, values), {}, {
[name]: value
}));
};
const handleEditSave = e => {
if (onEditSave) {
onEditSave(values);
}
setIsEditing(false);
};
const handleDeleteSave = e => {
if (onDeleteSave) {
onDeleteSave(values);
}
setIsDeleting(false);
};
const renderActions = () => {
if (isEditing) {
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
title: "\u5132\u5B58"
}, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
onClick: handleEditSave
}, /*#__PURE__*/_react.default.createElement(_Check.default, null))), /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
title: "\u53D6\u6D88"
}, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
onClick: () => setIsEditing(false)
}, /*#__PURE__*/_react.default.createElement(_Close.default, null))));
}
if (isDeleting) {
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
title: "\u5132\u5B58"
}, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
onClick: handleDeleteSave
}, /*#__PURE__*/_react.default.createElement(_Check.default, null))), /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
title: "\u53D6\u6D88"
}, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
onClick: () => setIsDeleting(false)
}, /*#__PURE__*/_react.default.createElement(_Close.default, null))));
}
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
title: "\u7DE8\u8F2F"
}, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
onClick: () => setIsEditing(true)
}, /*#__PURE__*/_react.default.createElement(_Edit.default, null))), /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
title: "\u522A\u9664"
}, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
onClick: () => setIsDeleting(true)
}, /*#__PURE__*/_react.default.createElement(_DeleteOutline.default, null))));
};
const renderItems = () => {
if (isEditing) {
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, editItems.map(el => {
const hasOptions = typeof el === 'object';
if (!hasOptions) {
return /*#__PURE__*/_react.default.createElement(_TableCell.default, {
key: el
}, /*#__PURE__*/_react.default.createElement(_Input.default, {
className: classes.input,
name: el,
onChange: handleChange(el),
value: values[el]
}));
}
const _el$variant = el.variant,
variant = _el$variant === void 0 ? 'input' : _el$variant,
name = el.name,
onChange = el.onChange,
value = el.value,
classNameProp = el.className,
other = (0, _objectWithoutProperties2.default)(el, ["variant", "name", "onChange", "value", "className"]);
const isInput = variant === 'input';
const isDate = variant === 'date';
const EditComponent = variantComponent[variant];
const className = (0, _clsx.default)({
[classes.input]: isInput || isDate
}, classNameProp);
return /*#__PURE__*/_react.default.createElement(_TableCell.default, {
key: name
}, /*#__PURE__*/_react.default.createElement(EditComponent, (0, _extends2.default)({
className: className,
name: name,
onChange: !isDate ? handleChange(name) : handleDateChange(name),
value: values[name]
}, other)));
}));
}
if (isDeleting) {
return /*#__PURE__*/_react.default.createElement(_TableCell.default, {
colSpan: editItems.length - 1
}, /*#__PURE__*/_react.default.createElement(_Typography.default, {
variant: "h6"
}, "\u4F60\u78BA\u5B9A\u8981\u522A\u9664\u6B64\u7D00\u9304\u55CE\uFF1F"));
}
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, displayItems.map((el, index) => {
const hasOptions = typeof el === 'object';
const text = hasOptions ? el.text : el;
const breakAll = hasOptions ? el.breakAll : false;
if (breakAll) {
return /*#__PURE__*/_react.default.createElement(_TableCell.default, {
key: "table-cell-".concat(index),
className: classes.breakCell
}, /*#__PURE__*/_react.default.createElement("div", {
className: classes.break
}, text));
}
return /*#__PURE__*/_react.default.createElement(_TableCell.default, {
key: "table-cell-".concat(index)
}, text);
}));
};
return /*#__PURE__*/_react.default.createElement(_TableRow.default, null, /*#__PURE__*/_react.default.createElement(_TableCell.default, null, renderActions()), renderItems());
};
EditableRow.propTypes = {
rowData: _propTypes.default.object.isRequired,
editItems: _propTypes.default.array.isRequired,
displayItems: _propTypes.default.array.isRequired,
onEditSave: _propTypes.default.func,
onDeleteSave: _propTypes.default.func
};
var _default = EditableRow;
exports.default = _default;