@parkassist/pa-ui-library
Version:
INX Platform elements
247 lines • 7.3 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"
},
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
} = _a,
inputProps = __rest(_a, ["value", "label", "onChange", "editable", "height", "multiline", "width", "unit", "inputType", "showLabel", "showEditIcon", "canBeEmpty", "maxLength", "style", "validFunction", "errorText", "keepOpen"]);
const classes = useStyles();
const [edition, setEdition] = useState(false);
const [text, setText] = useState(value);
const ClickToEditTooltip = () => {
return _jsx(CustomTooltip, {
backgroundColor: Palette.BLACK,
color: Palette.WHITE,
placement: "top",
content: _jsx(Column, {
style: {
width: "fit-content",
marginLeft: 8
},
children: "Click to edit"
})
});
};
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
}),
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, {
style: {
marginLeft: 5
},
onClick: () => editable && setEdition(true),
children: _jsx(Icons.EditIcon, {})
})]
})
})
});
};
export default EditableLabel;