@pega/react-sdk-overrides 0.23.6

package/lib/widgets/Followers/Followers.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+// import PropTypes from "prop-types";
+import { Card, CardContent, CardHeader, Typography } from "@material-ui/core";
+import { makeStyles } from '@material-ui/core/styles';
+// import { green } from "@material-ui/core/colors";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    paddingRight: theme.spacing(1),
+    paddingLeft: theme.spacing(1),
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    marginRight: theme.spacing(1),
+    marginLeft: theme.spacing(1),
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
+    // borderLeft: "6px solid",
+    // borderLeftColor: green[300]
+  },
+}));
+
+export default function Followers(/* props */) {
+  const componentName = "Followers";
+  // const { children } = props;
+  const classes = useStyles();
+
+  return (
+      <Card className={classes.root}>
+        <CardHeader title={<Typography variant="h6" component="div">{componentName} - <em>unsupported</em></Typography>} />
+        <CardContent>
+          <Typography>{componentName} content</Typography>
+        </CardContent>
+      </Card>
+    );
+}
+
+Followers.defaultProps = {
+  // children: []
+}
+
+Followers.propTypes = {
+  // children: PropTypes.arrayOf(PropTypes.node)
+};

package/lib/widgets/Followers/index.tsx

@@ -0,0 +1 @@
+export { default } from './Followers';

package/lib/widgets/SummaryItem/SummaryItem.css

@@ -0,0 +1,78 @@
+.psdk-utility {
+  width: 100%;
+  padding: 0.625rem 0rem;
+  text-align: left;
+  border-radius: 0.6125rem;
+  margin: 0.3125rem 0rem;
+}
+
+.psdk-utility-card {
+  display: flex;
+  flex-direction: row;
+  padding: 0.25rem 0rem 0.25rem 0.25rem;
+  margin-bottom: 0.5rem
+}
+
+.psdk-utility-card-icon {
+  flex-grow: 1;
+  max-width: 2.813rem;
+  align-content: center;
+  display: flex;
+}
+
+.psdk-utility-card-svg-icon {
+  width: 2.5rem;
+  display: inline-block;
+}
+
+.psdk-utility-card-main {
+  flex-grow: 2;
+  margin-left: 5px;
+}
+
+.psdk-utility-card-main-primary-label {
+  font-weight: bold;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: normal;
+}
+
+.psdk-utility-card-action-svg-icon {
+  width: 1.4rem;
+  display: inline-block;
+}
+
+.psdk-utility-card {
+display: flex;
+align-items: center;
+border: 0.0625rem solid rgb(207, 207, 207);
+border-radius: calc(0.25rem);
+min-height: 3rem;
+}
+
+.psdk-utility-button {
+background: none;
+border: none;
+cursor: pointer;
+}
+
+.psdk-utility-action {
+  flex-grow: 1;
+  text-align: right;
+}
+
+.psdk-utility-card-actions-svg-icon {
+  width: 1.4rem;
+  display: inline-block;
+  vertical-align: middle;
+  filter: invert(28%) sepia(20%) saturate(3903%) hue-rotate(209deg) brightness(101%) contrast(87%);
+}
+
+.psdk-link-button {
+  background: none;
+  border: none;
+  align-items: center;
+  display: flex;
+  padding: 0;
+  color: #3f51b5;
+}

package/lib/widgets/SummaryItem/SummaryItem.tsx

@@ -0,0 +1,80 @@
+import React, { useState } from "react";
+import { Utils } from "@pega/react-sdk-components/lib/components/helpers/utils";
+import './SummaryItem.css'
+import  { IconButton, Menu, MenuItem } from '@material-ui/core';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+
+declare const PCore: any;
+
+export default function SummaryItem(props) {
+  let imagePath$ = "";
+  let menuIconOverride$;
+  menuIconOverride$ = props.menuIconOverride$
+  imagePath$ = Utils.getIconPath(PCore.getAssetLoader().getStaticServerUrl());
+  const item = props.arItems$;
+  const srcImg = `${imagePath$}${item.visual.icon}.svg`
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  if (menuIconOverride$) {
+    menuIconOverride$ = Utils.getImageSrc(menuIconOverride$ , PCore.getAssetLoader().getStaticServerUrl());
+  }
+
+  function removeAttachment() {
+    props.menuIconOverrideAction$(item)
+  }
+
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <div className="psdk-utility-card">
+      <div className="psdk-utility-card-icon">
+        <img className="psdk-utility-card-svg-icon" src={srcImg}></img>
+      </div>
+      <div className="psdk-utility-card-main">
+        {item.primary.type !== 'URL' && (<div className="psdk-utility-card-main-primary-label">{item.primary.name}</div>)}
+        {item.primary.type === 'URL' && (<div className="psdk-utility-card-main-primary-url">
+          <button type="button" className="psdk-link-button">
+            {item.primary.name}&nbsp;
+            <img className="psdk-utility-card-actions-svg-icon" src={`${imagePath$}${item.primary.icon}.svg`}></img>
+          </button>
+        </div>)}
+        {item.secondary.text && (<div>{item.secondary.text}</div>)}
+      </div>
+      <div className="psdk-utility-action">
+        {menuIconOverride$ && (<button type="button" className="psdk-utility-button" onClick={removeAttachment}>
+            <img className="psdk-utility-card-action-svg-icon" src={menuIconOverride$}></img>
+        </button>)}
+        {!menuIconOverride$ && (<div>
+          <IconButton
+            id="setting-button"
+            aria-controls={open ? 'file-menu' : undefined}
+            aria-expanded={open ? 'true' : undefined}
+            aria-haspopup="true"
+            onClick={handleClick}
+          >
+          <MoreVertIcon />
+          </IconButton>
+          <Menu style={{marginTop: '3rem'}}
+            id="file-menu"
+            anchorEl={anchorEl}
+            keepMounted
+            open={Boolean(anchorEl)}
+            onClose={handleClose}
+          >
+          {item.actions && item.actions.map((option) => (
+            <MenuItem style={{fontSize: '14px'}} key={option.id} onClick={option.onClick}>
+              {option.text}
+            </MenuItem>
+          ))}
+          </Menu>
+        </div>)}
+      </div>
+    </div>
+  )
+}

package/lib/widgets/SummaryItem/index.tsx

@@ -0,0 +1 @@
+export { default } from './SummaryItem';

package/lib/widgets/SummaryList/SummaryList.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import SummaryItem from '@pega/react-sdk-components/lib/components/widgets/SummaryItem/index'
+
+export default function SummaryList(props) {
+  return (
+    <div>
+      {props.arItems$.map(file => (
+        <SummaryItem key={file.id} menuIconOverride$={props.menuIconOverride$} arItems$={file} menuIconOverrideAction$={props.menuIconOverrideAction$}></SummaryItem>
+      ))}
+    </div>
+  );
+}

package/lib/widgets/SummaryList/index.tsx

@@ -0,0 +1 @@
+export { default } from './SummaryList';

package/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@pega/react-sdk-overrides",
+  "version": "0.23.6",
+  "description": "React SDK - Code for overriding components",
+  "_filesComment": "During packing, npm ignores everything NOT in the files list",
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Pegasystems",
+  "license": "SEE LICENCE IN LICENSE"
+}