ish-ui 1.0.47 → 1.0.48

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -12,7 +12,7 @@ export type EventHandler<Event> = (event: Event, name?: string) => void;
12
12
  export interface EventOrValueHandler<Event> extends EventHandler<Event> {
13
13
  (value: any): void;
14
14
  }
15
- export interface TagLike {
15
+ export interface TagLike extends Record<string, any> {
16
16
  id?: number;
17
17
  name?: string;
18
18
  color?: string;
@@ -235,6 +235,7 @@ export interface TagsFieldProps<T, IP, MP> extends EditInPlaceFieldProps<IP, MP>
235
235
  showConfirm?: ShowConfirmCaller;
236
236
  validateEntity?: string;
237
237
  allowParentSelect?: boolean;
238
+ hideColor?: boolean;
238
239
  }
239
240
  export interface FormFieldBaseProps {
240
241
  required?: boolean;
@@ -3,6 +3,7 @@ import { MenuTag, TagLike } from '../model';
3
3
  interface Props<T> {
4
4
  classes?: any;
5
5
  allowParentSelect?: boolean;
6
+ hideColor?: boolean;
6
7
  tags: MenuTag<T>[];
7
8
  handleAdd: (tag: MenuTag<T>) => void;
8
9
  activeTag: MenuTag<T>;
@@ -22,7 +22,7 @@ const styles = theme => ({
22
22
  borderRadius: '100%'
23
23
  }
24
24
  });
25
- function AddTagMenu({ classes, tags, handleAdd, activeTag, setActiveTag, allowParentSelect }) {
25
+ function AddTagMenu({ classes, tags, hideColor, handleAdd, activeTag, setActiveTag, allowParentSelect }) {
26
26
  const handleBack = () => {
27
27
  setActiveTag(prev => prev.parent);
28
28
  };
@@ -31,6 +31,6 @@ function AddTagMenu({ classes, tags, handleAdd, activeTag, setActiveTag, allowPa
31
31
  React.createElement("span", { className: clsx('d-flex textSecondaryColor', classes.backContainer) },
32
32
  React.createElement(KeyboardArrowLeft, { color: "inherit" }),
33
33
  "Back"))),
34
- (activeTag ? activeTag.children : tags).map(t => (React.createElement(AddTagMenuItem, { key: t.tagBody.id, tag: t, classes: classes, setActiveTag: setActiveTag, handleAdd: handleAdd, allowParentSelect: allowParentSelect })))));
34
+ (activeTag ? activeTag.children : tags).map(t => (React.createElement(AddTagMenuItem, { key: t.tagBody.id, tag: t, classes: classes, setActiveTag: setActiveTag, handleAdd: handleAdd, allowParentSelect: allowParentSelect, hideColor: hideColor })))));
35
35
  }
36
36
  export default withStyles(styles)(AddTagMenu);
@@ -6,6 +6,7 @@ interface Props<T> {
6
6
  handleAdd: (tag: MenuTag<T>) => void;
7
7
  tag: MenuTag<T>;
8
8
  allowParentSelect?: boolean;
9
+ hideColor?: boolean;
9
10
  }
10
- declare function AddTagMenuItem<T extends TagLike>({ setActiveTag, tag, classes, handleAdd, allowParentSelect }: Props<T>): React.JSX.Element;
11
+ declare function AddTagMenuItem<T extends TagLike>({ setActiveTag, tag, classes, handleAdd, hideColor, allowParentSelect }: Props<T>): React.JSX.Element;
11
12
  export default AddTagMenuItem;
@@ -11,7 +11,7 @@ import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
11
11
  import Checkbox from '@mui/material/Checkbox';
12
12
  import MenuItem from '@mui/material/MenuItem';
13
13
  import { IconButton } from '@mui/material';
14
- function AddTagMenuItem({ setActiveTag, tag, classes, handleAdd, allowParentSelect }) {
14
+ function AddTagMenuItem({ setActiveTag, tag, classes, handleAdd, hideColor, allowParentSelect }) {
15
15
  const openSubmenu = () => {
16
16
  setActiveTag(tag);
17
17
  };
@@ -20,7 +20,7 @@ function AddTagMenuItem({ setActiveTag, tag, classes, handleAdd, allowParentSele
20
20
  };
21
21
  const hasChildren = Boolean(tag.children.length);
22
22
  return (React.createElement(MenuItem, { classes: { root: classes.listItem }, onClick: allowParentSelect ? null : (hasChildren ? openSubmenu : toggleChecked), disableRipple: allowParentSelect },
23
- React.createElement("div", { className: clsx(classes.tagColorDotSmall, 'mr-1'), style: { background: '#' + tag.tagBody.color } }),
23
+ !hideColor && React.createElement("div", { className: clsx(classes.tagColorDotSmall, 'mr-1'), style: { background: '#' + tag.tagBody.color } }),
24
24
  React.createElement("span", { className: "mr-2 flex-fill" }, tag.tagBody.name),
25
25
  (allowParentSelect || !hasChildren) && React.createElement(Checkbox, { onClick: toggleChecked, classes: { root: 'smallIconButton' }, checked: tag.active }),
26
26
  hasChildren && React.createElement(IconButton, { size: "small", onClick: openSubmenu },
@@ -1,4 +1,4 @@
1
1
  import React from 'react';
2
2
  import { FieldInputProps, FieldMetaProps, TagLike, TagsFieldProps } from '../model';
3
- declare function TagInputList<T extends TagLike, IP extends FieldInputProps, MP extends FieldMetaProps>({ input, tags, placeholder, labelAdornment, meta, label, disabled, className, warning, allowParentSelect, fieldClasses, editIcon, variant }: TagsFieldProps<T, IP, MP>): React.JSX.Element;
3
+ declare function TagInputList<T extends TagLike, IP extends FieldInputProps, MP extends FieldMetaProps>({ input, tags, placeholder, labelAdornment, meta, label, disabled, className, warning, allowParentSelect, fieldClasses, editIcon, variant, hideColor }: TagsFieldProps<T, IP, MP>): React.JSX.Element;
4
4
  export default TagInputList;
@@ -77,7 +77,7 @@ const getInputString = (tagIds, allTags) => ((tagIds === null || tagIds === void
77
77
  return (tag ? `${acc}#${tag.name} ` : acc);
78
78
  }, '')
79
79
  : '');
80
- function TagInputList({ input, tags, placeholder, labelAdornment, meta, label = 'Tags', disabled, className, warning, allowParentSelect, fieldClasses = {}, editIcon, variant }) {
80
+ function TagInputList({ input, tags, placeholder, labelAdornment, meta, label = 'Tags', disabled, className, warning, allowParentSelect, fieldClasses = {}, editIcon, variant, hideColor }) {
81
81
  const [menuIsOpen, setMenuIsOpen] = useState(false);
82
82
  const [activeTag, setActiveTag] = useState(null);
83
83
  const [isEditing, setIsEditing] = useState(false);
@@ -93,9 +93,9 @@ function TagInputList({ input, tags, placeholder, labelAdornment, meta, label =
93
93
  if (!(arrayOfTags === null || arrayOfTags === void 0 ? void 0 : arrayOfTags.length))
94
94
  return '';
95
95
  return arrayOfTags.map((tag, index) => (React.createElement("span", { key: tag.id, className: clsx('centeredFlex', index !== arrayOfTags.length - 1 ? 'pr-1' : '') },
96
- React.createElement("div", { key: tag.id, className: clsx(classes.tagColorDotSmall, 'mr-0-5'), style: { background: '#' + tag.color } }),
96
+ !hideColor && React.createElement("div", { key: tag.id, className: clsx(classes.tagColorDotSmall, 'mr-0-5'), style: { background: '#' + tag.color } }),
97
97
  React.createElement("span", { className: "text-nowrap" }, `#${tag.name} `))));
98
- }, [tags, input.value, inputValue]);
98
+ }, [tags, input.value, inputValue, hideColor]);
99
99
  const inputNode = useRef();
100
100
  const tagMenuNode = useRef();
101
101
  const menuTags = useMemo(() => (tags && input.value ? getMenuTags(tags.filter(t => t.childrenCount > 0), input.value.map(id => getFullTag(id, tags)).filter(t => t)) : []), [tags, input.value]);
@@ -236,7 +236,7 @@ function TagInputList({ input, tags, placeholder, labelAdornment, meta, label =
236
236
  React.createElement(ClickAwayListener, { onClickAway: onTagListBlur }, params.children)));
237
237
  }, [allMenuTags, inputValue, currentInputString, inputNode.current, tagMenuNode.current, input.value]);
238
238
  const listboxAdapter = useCallback(params => (React.createElement("div", { className: params.className, ref: tagMenuNode },
239
- React.createElement(AddTagMenu, { tags: menuTags, handleAdd: onTagAdd, activeTag: activeTag, setActiveTag: setActiveTag, allowParentSelect: allowParentSelect }))), [menuTags, activeTag, setActiveTag, onTagAdd]);
239
+ React.createElement(AddTagMenu, { tags: menuTags, handleAdd: onTagAdd, hideColor: hideColor, activeTag: activeTag, setActiveTag: setActiveTag, allowParentSelect: allowParentSelect }))), [menuTags, activeTag, setActiveTag, onTagAdd, hideColor]);
240
240
  return (React.createElement("div", { className: className, id: input.name },
241
241
  React.createElement("div", { className: clsx('relative', {
242
242
  'pointer-events-none': disabled
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ish-ui",
3
3
  "sideEffects": false,
4
- "version": "1.0.47",
4
+ "version": "1.0.48",
5
5
  "description": "UI elements for onCourse and other ish apps",
6
6
  "main": "main.ts",
7
7
  "devDependencies": {