@e-group/material-lab
Version:
EGroup Team Lab - Incubator for EGroup Team experimental React components.
350 lines (323 loc) • 12.5 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
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) { _defineProperty(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; }
/* eslint-disable */
import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import makeStyles from '@material-ui/core/styles/makeStyles';
import { DatePicker } from '@material-ui/pickers';
import Input from '@material-ui/core/Input';
import Select from '@material-ui/core/Select';
import Tooltip from '@material-ui/core/Tooltip';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import TableRow from '@material-ui/core/TableRow';
import TableCell from '@material-ui/core/TableCell';
import CheckIcon from '@material-ui/icons/Check';
import CloseIcon from '@material-ui/icons/Close';
import DeleteOutlineIcon from '@material-ui/icons/DeleteOutline';
import EditIcon from '@material-ui/icons/Edit'; // 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,
select: Select,
date: DatePicker
};
const useStyles = makeStyles(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.useState(rowData),
_React$useState2 = _slicedToArray(_React$useState, 2),
values = _React$useState2[0],
setValues = _React$useState2[1];
const _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
isEditing = _React$useState4[0],
setIsEditing = _React$useState4[1];
const _React$useState5 = React.useState(false),
_React$useState6 = _slicedToArray(_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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
title: "\u5132\u5B58"
}, /*#__PURE__*/React.createElement(IconButton, {
onClick: handleEditSave
}, /*#__PURE__*/React.createElement(CheckIcon, null))), /*#__PURE__*/React.createElement(Tooltip, {
title: "\u53D6\u6D88"
}, /*#__PURE__*/React.createElement(IconButton, {
onClick: () => setIsEditing(false)
}, /*#__PURE__*/React.createElement(CloseIcon, null))));
}
if (isDeleting) {
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
title: "\u5132\u5B58"
}, /*#__PURE__*/React.createElement(IconButton, {
onClick: handleDeleteSave
}, /*#__PURE__*/React.createElement(CheckIcon, null))), /*#__PURE__*/React.createElement(Tooltip, {
title: "\u53D6\u6D88"
}, /*#__PURE__*/React.createElement(IconButton, {
onClick: () => setIsDeleting(false)
}, /*#__PURE__*/React.createElement(CloseIcon, null))));
}
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
title: "\u7DE8\u8F2F"
}, /*#__PURE__*/React.createElement(IconButton, {
onClick: () => setIsEditing(true)
}, /*#__PURE__*/React.createElement(EditIcon, null))), /*#__PURE__*/React.createElement(Tooltip, {
title: "\u522A\u9664"
}, /*#__PURE__*/React.createElement(IconButton, {
onClick: () => setIsDeleting(true)
}, /*#__PURE__*/React.createElement(DeleteOutlineIcon, null))));
};
const renderItems = () => {
if (isEditing) {
return /*#__PURE__*/React.createElement(React.Fragment, null, editItems.map(el => {
const hasOptions = typeof el === 'object';
if (!hasOptions) {
return /*#__PURE__*/React.createElement(TableCell, {
key: el
}, /*#__PURE__*/React.createElement(Input, {
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 = _objectWithoutProperties(el, ["variant", "name", "onChange", "value", "className"]);
const isInput = variant === 'input';
const isDate = variant === 'date';
const EditComponent = variantComponent[variant];
const className = clsx({
[classes.input]: isInput || isDate
}, classNameProp);
return /*#__PURE__*/React.createElement(TableCell, {
key: name
}, /*#__PURE__*/React.createElement(EditComponent, _extends({
className: className,
name: name,
onChange: !isDate ? handleChange(name) : handleDateChange(name),
value: values[name]
}, other)));
}));
}
if (isDeleting) {
return /*#__PURE__*/React.createElement(TableCell, {
colSpan: editItems.length - 1
}, /*#__PURE__*/React.createElement(Typography, {
variant: "h6"
}, "\u4F60\u78BA\u5B9A\u8981\u522A\u9664\u6B64\u7D00\u9304\u55CE\uFF1F"));
}
return /*#__PURE__*/React.createElement(React.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.createElement(TableCell, {
key: "table-cell-".concat(index),
className: classes.breakCell
}, /*#__PURE__*/React.createElement("div", {
className: classes.break
}, text));
}
return /*#__PURE__*/React.createElement(TableCell, {
key: "table-cell-".concat(index)
}, text);
}));
};
return /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableCell, null, renderActions()), renderItems());
};
EditableRow.propTypes = {
rowData: PropTypes.object.isRequired,
editItems: PropTypes.array.isRequired,
displayItems: PropTypes.array.isRequired,
onEditSave: PropTypes.func,
onDeleteSave: PropTypes.func
};
export default EditableRow;