diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/configurationApp/src/components')
| -rw-r--r-- | sdnr/wt/odlux/apps/configurationApp/src/components/baseProps.ts | 8 | ||||
| -rw-r--r-- | sdnr/wt/odlux/apps/configurationApp/src/components/uiElementLeafList.tsx | 204 |
2 files changed, 211 insertions, 1 deletions
diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/baseProps.ts b/sdnr/wt/odlux/apps/configurationApp/src/components/baseProps.ts index 8f7300cfb..73812a4b8 100644 --- a/sdnr/wt/odlux/apps/configurationApp/src/components/baseProps.ts +++ b/sdnr/wt/odlux/apps/configurationApp/src/components/baseProps.ts @@ -18,4 +18,10 @@ import { ViewElement } from "../models/uiModels"; -export type BaseProps<TValue = string> = { value: ViewElement, inputValue: TValue, readOnly: boolean, disabled: boolean, onChange(newValue: TValue): void };
\ No newline at end of file +export type BaseProps<TValue = string> = { + value: ViewElement, + inputValue: TValue, + readOnly: boolean, + disabled: boolean, + onChange(newValue: TValue): void +}; diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementLeafList.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementLeafList.tsx new file mode 100644 index 000000000..c705b982f --- /dev/null +++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementLeafList.tsx @@ -0,0 +1,204 @@ +/** + * ============LICENSE_START======================================================================== + * ONAP : ccsdk feature sdnr wt odlux + * ================================================================================================= + * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved. + * ================================================================================================= + * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under the License + * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing permissions and limitations under + * the License. + * ============LICENSE_END========================================================================== + */ + +import * as React from "react" +import { FormControl, InputLabel, Paper, Chip, FormHelperText, Dialog, DialogTitle, DialogContentText, DialogActions, Button, DialogContent } from "@material-ui/core"; +import { makeStyles } from '@material-ui/core/styles'; +import AddIcon from '@material-ui/icons/Add'; + +import { ViewElement } from "../models/uiModels"; + +import { BaseProps } from "./baseProps"; + +type LeafListProps = BaseProps<any []> & { + getEditorForViewElement: (uiElement: ViewElement) => (null | React.ComponentType<BaseProps<any>>) +}; + +const useStyles = makeStyles((theme) => { + const light = theme.palette.type === 'light'; + const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)'; + + return ({ + root: { + display: 'flex', + justifyContent: 'left', + verticalAlign: 'bottom', + flexWrap: 'wrap', + listStyle: 'none', + margin: 0, + padding: 0, + paddingTop: theme.spacing(0.5), + marginTop: theme.spacing(1), + }, + chip: { + margin: theme.spacing(0.5), + }, + underline: { + '&:after': { + borderBottom: `2px solid ${theme.palette.primary.main}`, + left: 0, + bottom: 0, + // Doing the other way around crash on IE 11 "''" https://github.com/cssinjs/jss/issues/242 + content: '""', + position: 'absolute', + right: 0, + transform: 'scaleX(0)', + transition: theme.transitions.create('transform', { + duration: theme.transitions.duration.shorter, + easing: theme.transitions.easing.easeOut, + }), + pointerEvents: 'none', // Transparent to the hover style. + }, + '&$focused:after': { + transform: 'scaleX(1)', + }, + '&$error:after': { + borderBottomColor: theme.palette.error.main, + transform: 'scaleX(1)', // error is always underlined in red + }, + '&:before': { + borderBottom: `1px solid ${bottomLineColor}`, + left: 0, + bottom: 0, + // Doing the other way around crash on IE 11 "''" https://github.com/cssinjs/jss/issues/242 + content: '"\\00a0"', + position: 'absolute', + right: 0, + transition: theme.transitions.create('border-bottom-color', { + duration: theme.transitions.duration.shorter, + }), + pointerEvents: 'none', // Transparent to the hover style. + }, + '&:hover:not($disabled):before': { + borderBottom: `2px solid ${theme.palette.text.primary}`, + // Reset on touch devices, it doesn't add specificity + '@media (hover: none)': { + borderBottom: `1px solid ${bottomLineColor}`, + }, + }, + '&$disabled:before': { + borderBottomStyle: 'dotted', + }, + }, + }) +}); + +export const UiElementLeafList = (props: LeafListProps) => { + const { value: element, inputValue, onChange } = props; + + const classes = useStyles(); + + const [open, setOpen] = React.useState(false); + const [editorValue, setEditorValue] = React.useState(""); + const [editorValueIndex, setEditorValueIndex] = React.useState(-1); + + + const handleClickOpen = () => { + setOpen(true); + }; + + const handleClose = () => { + setOpen(false); + }; + + const onApplyButton = () => { + if (editorValue != null && editorValue != "" && editorValueIndex < 0) { + props.onChange([ + ...inputValue, + editorValue, + ]); + } else if (editorValue != null && editorValue != "") { + props.onChange([ + ...inputValue.slice(0, editorValueIndex), + editorValue, + ...inputValue.slice(editorValueIndex+1), + ]); + } + setOpen(false); + }; + + const onDelete = (index : number) => { + const newValue : any[] = [ + ...inputValue.slice(0, index), + ...inputValue.slice(index+1), + ]; + onChange(newValue); + }; + + const ValueEditor = props.getEditorForViewElement(props.value); + + return ( + <> + <FormControl style={{ width: 485, marginLeft: 20, marginRight: 20 }}> + <InputLabel htmlFor={`list-${element.id}`} shrink={!props.readOnly || !!(inputValue && inputValue.length)} >{element.label}</InputLabel> + <ul className={`${classes.root} ${classes.underline}`} id={`list-${element.id}`}> + { !props.readOnly ? <li> + <Chip + icon={<AddIcon />} + label={"Add"} + className={classes.chip} + size="small" + color="secondary" + onClick={ () => { + setOpen(true); + setEditorValue(""); + setEditorValueIndex(-1); + } + } + /> + </li> : null } + { inputValue.map((val, ind) => ( + <li key={ind}> + <Chip + className={classes.chip} + size="small" + variant="outlined" + label={String(val)} + onDelete={ !props.readOnly ? () => { onDelete(ind); } : undefined } + onClick={ !props.readOnly ? () => { + setOpen(true); + setEditorValue(val); + setEditorValueIndex(ind); + } : undefined + } + /> + </li> + )) + } + </ul> + {/* <FormHelperText>{ "Value is mandetory"}</FormHelperText> */} + </FormControl> + <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title"> + <DialogTitle id="form-dialog-title">{editorValueIndex < 0 ? "Add new value" : "Edit value" } </DialogTitle> + <DialogContent> + { ValueEditor && <ValueEditor + inputValue={ editorValue } + value={{ ...element, isList: false}} + disabled={false} + readOnly={props.readOnly} + onChange={ setEditorValue } + /> || null } + </DialogContent> + <DialogActions> + <Button onClick={ handleClose }> Cancel </Button> + <Button disabled={editorValue == null || editorValue === "" } onClick={ onApplyButton } color="secondary"> {editorValueIndex < 0 ? "Add" : "Apply"} </Button> + </DialogActions> + </Dialog> + </> + ); +};
\ No newline at end of file |