@parkassist/pa-ui-library
Version:
INX Platform elements
237 lines • 7.15 kB
JavaScript
var __rest = this && this.__rest || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useEffect, useState } from 'react';
import styled from '@emotion/styled';
import Fade from 'react-reveal/Fade';
import Input from '../Input';
import { Column, Row } from '../Layout/Flex';
import { Palette } from '../../index';
import * as Icons from '../Icons';
import FontStyles from '../../constants/FontStyles';
import makeStyles from '@mui/styles/makeStyles';
import clsx from 'clsx';
import CustomTooltip from '../Tooltip';
const useStyles = makeStyles(() => ({
label: {
justifyContent: 'space-between',
alignItems: 'center'
},
labelNextToIcon: {
gap: '8px',
justifyContent: 'flex-start',
alignItems: 'center'
},
editable: {
cursor: 'pointer',
'&:hover': {
boxShadow: `0 0 5px ${Palette.DARK_GREY}`
}
}
}));
const Wrapper = styled.div(({
width
}) => ({
width,
font: FontStyles.BODY2_FONT
}));
const IconWrapper = styled(Column)(({
color = Palette.BLACK,
marginTop
}) => ({
cursor: 'pointer',
font: FontStyles.BODY1_FONT,
color,
transition: 'all 0.2s',
justifyContent: 'center',
alignItems: 'center',
width: 20,
marginTop,
'&:hover': {
transform: 'scale(1.2)'
}
}));
const EditableLabel = _a => {
var {
value,
label,
onChange = () => null,
editable = true,
height = null,
multiline = false,
width,
unit = '',
inputType = 'text',
showLabel,
showEditIcon = false,
canBeEmpty = true,
maxLength = null,
style,
validFunction,
errorText = '',
keepOpen = false,
editIconNextToText = false
} = _a,
inputProps = __rest(_a, ["value", "label", "onChange", "editable", "height", "multiline", "width", "unit", "inputType", "showLabel", "showEditIcon", "canBeEmpty", "maxLength", "style", "validFunction", "errorText", "keepOpen", "editIconNextToText"]);
const classes = useStyles();
const [edition, setEdition] = useState(false);
const [text, setText] = useState(value);
useEffect(() => {
let isMounted = true;
if (isMounted) {
setText(value);
}
return () => {
isMounted = false;
};
}, [value]);
const confirmChanges = () => {
setEdition(false);
onChange(text);
};
const cancelChanges = () => {
setText(value);
setEdition(false);
};
const checkIfCanBeConfirmed = () => {
let canBeConfirmed = true;
if (inputType === 'text' && (text.trim().length === 0 && !canBeEmpty || maxLength && text.length > maxLength)) {
canBeConfirmed = false;
}
if (inputType === 'number' && text === '') {
canBeConfirmed = false;
}
if (validFunction && !validFunction(text)) {
canBeConfirmed = false;
}
return canBeConfirmed;
};
if (edition) {
const canBeConfirmed = checkIfCanBeConfirmed();
return _jsx(Fade, {
children: _jsxs(Wrapper, {
width: width,
children: [_jsxs(Row, {
style: style,
children: [_jsx(Input, Object.assign({
width: width - 45,
height: height,
multiline: multiline,
type: inputType,
label: label,
value: text,
onChange: e => setText(e.target.value),
onKeyDown: e => {
if (!e) e = window.event;
if (e.key === 'Enter' && !multiline) {
canBeConfirmed && confirmChanges();
}
if (e.key === 'Escape') {
cancelChanges();
}
},
autoFocus: true
}, !keepOpen && {
onBlur: () => cancelChanges(),
onFocus: e => {
if (!multiline) {
return;
}
return e.currentTarget.setSelectionRange(e.currentTarget.value.length, e.currentTarget.value.length);
}
}, inputProps)), canBeConfirmed && _jsx(IconWrapper, {
style: {
marginLeft: 5
},
marginTop: label && 16,
color: Palette.SUCCESS_GREEN,
onClick: confirmChanges,
onMouseDown: e => e.preventDefault(),
children: _jsx(Icons.DoneIcon, {
filter: `${Palette.FILTER_SUCCESS_GREEN}`
})
}), _jsx(IconWrapper, {
style: {
marginLeft: !canBeConfirmed && 5
},
color: Palette.ERROR_RED,
marginTop: label && 16,
onClick: cancelChanges,
onMouseDown: e => e.preventDefault(),
children: _jsx(Icons.CloseIcon, {
filter: `${Palette.FILTER_ERROR_RED}`
})
})]
}), text && !canBeConfirmed && errorText && _jsx(Row, {
style: {
color: Palette.ERROR_RED,
marginLeft: '15px'
},
children: errorText
})]
})
});
}
return _jsx(Fade, {
children: _jsx(Wrapper, {
width: width,
children: _jsxs(Row, {
"data-testid": 'editable-label',
className: clsx(classes.label, {
[classes.editable]: editable && !showEditIcon,
[classes.labelNextToIcon]: showEditIcon && editIconNextToText
}),
onClick: () => editable && setEdition(true),
style: style,
children: [_jsxs(Column, {
style: {
minHeight: showLabel && 32,
justifyContent: 'space-between'
},
children: [showLabel && _jsx(Row, {
style: {
fontWeight: 600
},
children: label
}), editable && !showEditIcon ? _jsx(CustomTooltip, {
backgroundColor: Palette.BLACK,
color: Palette.WHITE,
placement: 'top',
content: _jsx(Column, {
style: {
width: 'fit-content',
marginLeft: 8
},
children: "Click to edit"
}),
children: _jsxs(Row, {
style: {
whiteSpace: 'pre',
maxWidth: width - 45,
overflowX: 'hidden'
},
children: [text, " ", ' ', " ", unit]
})
}) : _jsxs(Row, {
style: {
whiteSpace: 'pre',
maxWidth: width - 45,
overflowX: 'hidden'
},
children: [text, " ", ' ', " ", unit]
})]
}), editable && showEditIcon && _jsx(IconWrapper, {
onClick: () => editable && setEdition(true),
children: _jsx(Icons.EditIcon, {})
})]
})
})
});
};
export default EditableLabel;