Remove old files
This commit is contained in:
parent
8fd8aed172
commit
925cc648f5
@ -1,51 +0,0 @@
|
||||
{
|
||||
"name": "@docspace/common",
|
||||
"version": "2.0.3",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "echo 'skip it'",
|
||||
"clean": "echo 'skip it'",
|
||||
"deploy": "echo 'skip it'",
|
||||
"start": "echo 'skip it'",
|
||||
"start-prod": "echo 'skip it'"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.21.0",
|
||||
"@loadable/component": "^5.15.3",
|
||||
"axios": "^0.22.0",
|
||||
"cross-fetch": "3.1.5",
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"global": "^4.4.0",
|
||||
"i18next": "^20.6.1",
|
||||
"mobx": "^6.8.0",
|
||||
"mobx-react": "^7.6.0",
|
||||
"moment": "^2.29.4",
|
||||
"moment-timezone": "^0.5.43",
|
||||
"prop-types": "^15.8.1",
|
||||
"query-string": "7.1.3",
|
||||
"re-resizable": "^6.9.9",
|
||||
"react": "^18.2.0",
|
||||
"react-autosize-textarea": "^7.1.0",
|
||||
"react-content-loader": "^5.1.4",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-hammerjs": "^1.0.1",
|
||||
"react-i18next": "^13.2.1",
|
||||
"react-player": "^1.15.3",
|
||||
"react-router": "^6.10.0",
|
||||
"react-router-dom": "^6.10.0",
|
||||
"react-tooltip": "^5.23.0",
|
||||
"react-viewer": "^3.2.2",
|
||||
"react-virtualized-auto-sizer": "^1.0.7",
|
||||
"react-window": "^1.8.8",
|
||||
"react-window-infinite-loader": "^1.0.8",
|
||||
"screenfull": "^5.2.0",
|
||||
"sjcl": "^1.0.8",
|
||||
"socket.io-client": "^4.6.1",
|
||||
"styled-components": "^5.3.9",
|
||||
"workbox-window": "^6.5.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/crypto-js": "^4.2.1",
|
||||
"@welldone-software/why-did-you-render": "^6.2.3"
|
||||
}
|
||||
}
|
||||
@ -1,244 +0,0 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
import TextInput from "../text-input";
|
||||
import { Icons } from "../icons";
|
||||
import IconButton from "../icon-button";
|
||||
import {
|
||||
StyledInputGroup,
|
||||
StyledChildrenBlock,
|
||||
StyledIconBlock,
|
||||
} from "./styled-input-block";
|
||||
|
||||
//const iconNames = Object.keys(Icons);
|
||||
|
||||
class InputBlock extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
onIconClick = (e) => {
|
||||
if (
|
||||
typeof this.props.onIconClick === "function" /*&& !this.props.isDisabled*/
|
||||
)
|
||||
this.props.onIconClick(e);
|
||||
};
|
||||
onChange = (e) => {
|
||||
if (typeof this.props.onChange === "function") this.props.onChange(e);
|
||||
};
|
||||
|
||||
render() {
|
||||
let iconButtonSize = 0;
|
||||
const {
|
||||
hasError,
|
||||
hasWarning,
|
||||
isDisabled,
|
||||
scale,
|
||||
size,
|
||||
className,
|
||||
style,
|
||||
children,
|
||||
id,
|
||||
name,
|
||||
type,
|
||||
value,
|
||||
placeholder,
|
||||
tabIndex,
|
||||
maxLength,
|
||||
onBlur,
|
||||
onFocus,
|
||||
onKeyDown,
|
||||
isReadOnly,
|
||||
isAutoFocussed,
|
||||
autoComplete,
|
||||
mask,
|
||||
keepCharPositions,
|
||||
iconName,
|
||||
iconColor,
|
||||
hoverColor,
|
||||
isIconFill,
|
||||
onIconClick,
|
||||
iconSize,
|
||||
theme,
|
||||
forwardedRef,
|
||||
onClick,
|
||||
iconButtonClassName,
|
||||
iconNode,
|
||||
...props
|
||||
} = this.props;
|
||||
|
||||
if (typeof iconSize == "number" && iconSize > 0) {
|
||||
iconButtonSize = iconSize;
|
||||
} else {
|
||||
switch (size) {
|
||||
case "base":
|
||||
iconButtonSize = 16;
|
||||
break;
|
||||
case "middle":
|
||||
iconButtonSize = 18;
|
||||
break;
|
||||
case "big":
|
||||
iconButtonSize = 21;
|
||||
break;
|
||||
case "huge":
|
||||
iconButtonSize = 24;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return (
|
||||
<StyledInputGroup
|
||||
hasError={hasError}
|
||||
hasWarning={hasWarning}
|
||||
isDisabled={isDisabled}
|
||||
scale={scale}
|
||||
size={size}
|
||||
className={className}
|
||||
style={style}
|
||||
color={iconColor}
|
||||
hoverColor={hoverColor}
|
||||
>
|
||||
<div className="prepend">
|
||||
<StyledChildrenBlock className="prepend-children">
|
||||
{children}
|
||||
</StyledChildrenBlock>
|
||||
</div>
|
||||
<TextInput
|
||||
id={id}
|
||||
className={className}
|
||||
name={name}
|
||||
type={type}
|
||||
value={value}
|
||||
onClick={onClick}
|
||||
isDisabled={isDisabled}
|
||||
hasError={hasError}
|
||||
hasWarning={hasWarning}
|
||||
placeholder={placeholder}
|
||||
tabIndex={tabIndex}
|
||||
maxLength={maxLength}
|
||||
onBlur={onBlur}
|
||||
onFocus={onFocus}
|
||||
isReadOnly={isReadOnly}
|
||||
isAutoFocussed={isAutoFocussed}
|
||||
autoComplete={autoComplete}
|
||||
size={size}
|
||||
scale={scale}
|
||||
onChange={this.onChange}
|
||||
onKeyDown={onKeyDown}
|
||||
withBorder={false}
|
||||
mask={mask}
|
||||
keepCharPositions={keepCharPositions}
|
||||
forwardedRef={forwardedRef}
|
||||
{...props}
|
||||
/>
|
||||
{iconName && (
|
||||
<div className="append">
|
||||
<StyledIconBlock
|
||||
className={`input-block-icon ${iconButtonClassName}`}
|
||||
//isDisabled={isDisabled}
|
||||
onClick={this.onIconClick}
|
||||
isClickable={typeof onIconClick === "function"}
|
||||
>
|
||||
<IconButton
|
||||
size={iconButtonSize}
|
||||
iconNode={iconNode}
|
||||
iconName={iconName}
|
||||
isFill={isIconFill}
|
||||
//isDisabled={isDisabled}
|
||||
isClickable={typeof onIconClick === "function"}
|
||||
color={iconColor}
|
||||
hoverColor={hoverColor}
|
||||
/>
|
||||
</StyledIconBlock>
|
||||
</div>
|
||||
)}
|
||||
</StyledInputGroup>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
InputBlock.propTypes = {
|
||||
/** Used as HTML `id` property */
|
||||
id: PropTypes.string,
|
||||
/** Forwarded ref */
|
||||
forwardedRef: PropTypes.object,
|
||||
/** Used as HTML `name` property */
|
||||
name: PropTypes.string,
|
||||
/** Supported type of the input fields. */
|
||||
type: PropTypes.oneOf(["text", "password"]),
|
||||
/** Defines max length of value */
|
||||
maxLength: PropTypes.number,
|
||||
/** Placeholder text for the input */
|
||||
placeholder: PropTypes.string,
|
||||
/** Accepts css tab-index */
|
||||
tabIndex: PropTypes.number,
|
||||
/** input text mask */
|
||||
mask: PropTypes.oneOfType([PropTypes.array, PropTypes.func]),
|
||||
/** Allows to add or delete characters without changing the positions of the existing characters.*/
|
||||
keepCharPositions: PropTypes.bool,
|
||||
/** Supported size of the input fields. */
|
||||
size: PropTypes.oneOf(["base", "middle", "big", "huge", "large"]),
|
||||
/** Indicates that the input field has scale */
|
||||
scale: PropTypes.bool,
|
||||
/** The callback function that is required when the input is not read only. The function is called with the new value. Parent should pass it back as `value` */
|
||||
onChange: PropTypes.func,
|
||||
/** The callback function that is called when the field is blurred */
|
||||
onBlur: PropTypes.func,
|
||||
/** The callback function that is called when the field is focused */
|
||||
onFocus: PropTypes.func,
|
||||
/** Focuses on the input field on initial render */
|
||||
isAutoFocussed: PropTypes.bool,
|
||||
/** Indicates that the field cannot be used (e.g not authorised, or changes not saved) */
|
||||
isDisabled: PropTypes.bool,
|
||||
/** Indicates that the field is displaying read-only content */
|
||||
isReadOnly: PropTypes.bool,
|
||||
/** Indicates the input field has an error */
|
||||
hasError: PropTypes.bool,
|
||||
/** Indicates the input field has a warning */
|
||||
hasWarning: PropTypes.bool,
|
||||
/** Used as HTML `autocomplete` */
|
||||
autoComplete: PropTypes.string,
|
||||
/** Value of the input */
|
||||
value: PropTypes.string,
|
||||
/** Path to icon */
|
||||
iconName: PropTypes.string,
|
||||
/** Specifies the icon color */
|
||||
iconColor: PropTypes.string,
|
||||
/** Icon color on hover action */
|
||||
hoverColor: PropTypes.string,
|
||||
/** Size icon */
|
||||
iconSize: PropTypes.number,
|
||||
/** Determines if icon fill is needed */
|
||||
isIconFill: PropTypes.bool,
|
||||
/** The callback function that is triggered when the icon is clicked */
|
||||
onIconClick: PropTypes.func,
|
||||
|
||||
children: PropTypes.oneOfType([
|
||||
PropTypes.arrayOf(PropTypes.node),
|
||||
PropTypes.node,
|
||||
]),
|
||||
/** Accepts class */
|
||||
className: PropTypes.string,
|
||||
/** Accepts css style */
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
/** Sets the classNaame of the icon button */
|
||||
iconButtonClassName: PropTypes.string,
|
||||
};
|
||||
|
||||
InputBlock.defaultProps = {
|
||||
type: "text",
|
||||
maxLength: 255,
|
||||
size: "base",
|
||||
scale: false,
|
||||
tabIndex: -1,
|
||||
hasError: false,
|
||||
hasWarning: false,
|
||||
autoComplete: "off",
|
||||
|
||||
value: "",
|
||||
iconName: "",
|
||||
isIconFill: false,
|
||||
isDisabled: false,
|
||||
keepCharPositions: false,
|
||||
iconButtonClassName: "",
|
||||
};
|
||||
|
||||
export default InputBlock;
|
||||
@ -1,99 +0,0 @@
|
||||
import React from "react";
|
||||
import CrossReactSvgUrl from "PUBLIC_DIR/images/cross.react.svg?url";
|
||||
import { StyledSelectedItem, StyledLabel } from "./styled-selected-item";
|
||||
import PropTypes from "prop-types";
|
||||
import IconButton from "../icon-button";
|
||||
|
||||
const SelectedItem = (props) => {
|
||||
const {
|
||||
label,
|
||||
onClose,
|
||||
isDisabled,
|
||||
onClick,
|
||||
isInline,
|
||||
className,
|
||||
id,
|
||||
propKey,
|
||||
group,
|
||||
forwardedRef,
|
||||
classNameCloseButton,
|
||||
hideCross,
|
||||
} = props;
|
||||
if (!label) return <></>;
|
||||
|
||||
const onCloseClick = (e) => {
|
||||
!isDisabled && onClose && onClose(propKey, label, group, e);
|
||||
};
|
||||
|
||||
const handleOnClick = (e) => {
|
||||
!isDisabled &&
|
||||
onClick &&
|
||||
!e.target.classList.contains("selected-tag-removed") &&
|
||||
onClick(propKey, label, group, e);
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledSelectedItem
|
||||
onClick={handleOnClick}
|
||||
isInline={isInline}
|
||||
className={className}
|
||||
isDisabled={isDisabled}
|
||||
id={id}
|
||||
ref={forwardedRef}
|
||||
>
|
||||
<StyledLabel
|
||||
className="selected-item_label"
|
||||
truncate={true}
|
||||
noSelect
|
||||
isDisabled={isDisabled}
|
||||
>
|
||||
{label}
|
||||
</StyledLabel>
|
||||
{!hideCross && (
|
||||
<IconButton
|
||||
className={"selected-tag-removed " + classNameCloseButton}
|
||||
iconName={CrossReactSvgUrl}
|
||||
size={12}
|
||||
onClick={onCloseClick}
|
||||
isFill
|
||||
isDisabled={isDisabled}
|
||||
/>
|
||||
)}
|
||||
</StyledSelectedItem>
|
||||
);
|
||||
};
|
||||
|
||||
SelectedItem.propTypes = {
|
||||
/** Selected item text */
|
||||
label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
||||
/** Sets the 'width: fit-content' property */
|
||||
isInline: PropTypes.bool,
|
||||
/** Hide cross icon */
|
||||
hideCross: PropTypes.bool,
|
||||
/** Sets a callback function that is triggered when the cross icon is clicked */
|
||||
onClose: PropTypes.func.isRequired,
|
||||
/** Sets a callback function that is triggered when the selected item is clicked */
|
||||
onClick: PropTypes.func,
|
||||
/** Sets the button to present a disabled state */
|
||||
isDisabled: PropTypes.bool,
|
||||
/** Accepts class */
|
||||
className: PropTypes.string,
|
||||
/** Accepts id */
|
||||
id: PropTypes.string,
|
||||
/** Accepts css style */
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
/** Accepts key to remove item */
|
||||
propKey: PropTypes.string,
|
||||
/** Accepts group key to remove item */
|
||||
group: PropTypes.string,
|
||||
/** Passes ref to component */
|
||||
forwardedRef: PropTypes.object,
|
||||
};
|
||||
|
||||
SelectedItem.defaultProps = {
|
||||
isInline: true,
|
||||
hideCross: false,
|
||||
isDisabled: false,
|
||||
};
|
||||
|
||||
export default React.memo(SelectedItem);
|
||||
@ -1,70 +0,0 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import equal from "fast-deep-equal/react";
|
||||
|
||||
import Text from "../text";
|
||||
import StyledSocialButton from "./styled-social-button";
|
||||
import { ReactSVG } from "react-svg";
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
|
||||
class SocialButton extends React.Component {
|
||||
shouldComponentUpdate(nextProps) {
|
||||
return !equal(this.props, nextProps);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { label, iconName, IconComponent, image, isConnect, ...otherProps } =
|
||||
this.props;
|
||||
return (
|
||||
<StyledSocialButton isConnect={isConnect} {...otherProps}>
|
||||
{IconComponent ? (
|
||||
<IconComponent className="iconWrapper" />
|
||||
) : (
|
||||
<ReactSVG className="iconWrapper" src={iconName} />
|
||||
)}
|
||||
{label && (
|
||||
<Text as="div" className="social_button_text">
|
||||
{label}
|
||||
</Text>
|
||||
)}
|
||||
</StyledSocialButton>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
SocialButton.propTypes = {
|
||||
/** Button text */
|
||||
label: PropTypes.string,
|
||||
/** Button icon */
|
||||
iconName: PropTypes.string,
|
||||
/** Accepts tabindex prop */
|
||||
tabIndex: PropTypes.number,
|
||||
/** Sets the button to present a disabled state */
|
||||
isDisabled: PropTypes.bool,
|
||||
/** Accepts class */
|
||||
className: PropTypes.string,
|
||||
/** Accepts id */
|
||||
id: PropTypes.string,
|
||||
/** Accepts css style */
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
/** Sets a callback function that is triggered when the button is clicked */
|
||||
onClick: PropTypes.func,
|
||||
/** Accepts the icon options */
|
||||
$iconOptions: PropTypes.object,
|
||||
/** Sets the image size. Contains the small and the basic size options */
|
||||
size: PropTypes.oneOf(["base", "small"]),
|
||||
/** Changes the button style if the user is connected to the social network account */
|
||||
isConnect: PropTypes.bool,
|
||||
};
|
||||
|
||||
SocialButton.defaultProps = {
|
||||
label: "",
|
||||
iconName: "SocialButtonGoogleIcon",
|
||||
tabIndex: -1,
|
||||
isDisabled: false,
|
||||
$iconOptions: {},
|
||||
size: "base",
|
||||
isConnect: false,
|
||||
};
|
||||
|
||||
export default SocialButton;
|
||||
@ -1,208 +0,0 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { ReactSVG } from "react-svg";
|
||||
import CrossIconReactSvgUrl from "PUBLIC_DIR/images/cross.react.svg?url";
|
||||
import TagIconReactSvgUrl from "PUBLIC_DIR/images/tag.react.svg?url";
|
||||
import DropDown from "../drop-down";
|
||||
import DropDownItem from "../drop-down-item";
|
||||
import IconButton from "../icon-button";
|
||||
import Text from "../text";
|
||||
|
||||
import {
|
||||
StyledTag,
|
||||
StyledDropdownIcon,
|
||||
StyledDropdownText,
|
||||
} from "./styled-tag";
|
||||
|
||||
const Tag = ({
|
||||
tag,
|
||||
label,
|
||||
isNewTag,
|
||||
isDisabled,
|
||||
isDefault,
|
||||
isLast,
|
||||
onDelete,
|
||||
onClick,
|
||||
advancedOptions,
|
||||
tagMaxWidth,
|
||||
id,
|
||||
className,
|
||||
style,
|
||||
icon,
|
||||
removeTagIcon,
|
||||
}) => {
|
||||
const [openDropdown, setOpenDropdown] = React.useState(false);
|
||||
|
||||
const tagRef = React.useRef(null);
|
||||
const isMountedRef = React.useRef(true);
|
||||
const onClickOutside = React.useCallback((e) => {
|
||||
if (e?.target?.className?.includes("advanced-tag") || !isMountedRef.current)
|
||||
return;
|
||||
|
||||
setOpenDropdown(false);
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (openDropdown) {
|
||||
return document.addEventListener("click", onClickOutside);
|
||||
}
|
||||
|
||||
document.removeEventListener("click", onClickOutside);
|
||||
return () => {
|
||||
document.removeEventListener("click", onClickOutside);
|
||||
};
|
||||
}, [openDropdown, onClickOutside]);
|
||||
|
||||
React.useEffect(() => {
|
||||
return () => {
|
||||
isMountedRef.current = false;
|
||||
};
|
||||
}, []);
|
||||
|
||||
const openDropdownAction = (e) => {
|
||||
if (e?.target?.className?.includes("backdrop-active")) return;
|
||||
|
||||
setOpenDropdown(true);
|
||||
};
|
||||
|
||||
const onClickAction = React.useCallback(
|
||||
(e) => {
|
||||
if (onClick && !isDisabled) {
|
||||
onClick(e.target.dataset.tag);
|
||||
}
|
||||
},
|
||||
[onClick, isDisabled]
|
||||
);
|
||||
|
||||
const onDeleteAction = React.useCallback(
|
||||
(e) => {
|
||||
if (e.target != tagRef.current && onDelete) {
|
||||
onDelete && onDelete(tag);
|
||||
}
|
||||
},
|
||||
[onDelete, tag, tagRef]
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{!!advancedOptions ? (
|
||||
<>
|
||||
<StyledTag
|
||||
id={id}
|
||||
className={`tag advanced-tag ${className ? ` ${className}` : ""}`}
|
||||
style={style}
|
||||
ref={tagRef}
|
||||
onClick={openDropdownAction}
|
||||
isDisabled={isDisabled}
|
||||
isDefault={isDefault}
|
||||
isLast={isLast}
|
||||
tagMaxWidth={tagMaxWidth}
|
||||
isClickable={!!onClick}
|
||||
>
|
||||
<Text className={"tag-text"} font-size={"13px"} noSelect>
|
||||
...
|
||||
</Text>
|
||||
</StyledTag>
|
||||
<DropDown
|
||||
open={openDropdown}
|
||||
forwardedRef={tagRef}
|
||||
clickOutsideAction={onClickOutside}
|
||||
// directionX={"right"}
|
||||
manualY={"4px"}
|
||||
>
|
||||
{advancedOptions.map((tag, index) => (
|
||||
<DropDownItem
|
||||
className="tag__dropdown-item tag"
|
||||
key={`${tag}_${index}`}
|
||||
onClick={onClickAction}
|
||||
data-tag={tag}
|
||||
>
|
||||
{!removeTagIcon && (
|
||||
<StyledDropdownIcon
|
||||
className="tag__dropdown-item-icon"
|
||||
src={TagIconReactSvgUrl}
|
||||
/>
|
||||
)}
|
||||
<StyledDropdownText
|
||||
className="tag__dropdown-item-text"
|
||||
fontWeight={600}
|
||||
fontSize={"12px"}
|
||||
truncate
|
||||
removeTagIcon={removeTagIcon}
|
||||
>
|
||||
{tag}
|
||||
</StyledDropdownText>
|
||||
</DropDownItem>
|
||||
))}
|
||||
</DropDown>
|
||||
</>
|
||||
) : (
|
||||
<StyledTag
|
||||
title={label}
|
||||
onClick={onClickAction}
|
||||
isNewTag={isNewTag}
|
||||
isDisabled={isDisabled}
|
||||
isDefault={isDefault}
|
||||
tagMaxWidth={tagMaxWidth}
|
||||
data-tag={label}
|
||||
id={id}
|
||||
className={`tag${className ? ` ${className}` : ""}`}
|
||||
style={style}
|
||||
isLast={isLast}
|
||||
isClickable={!!onClick}
|
||||
>
|
||||
{icon ? (
|
||||
<ReactSVG className="third-party-tag" src={icon} />
|
||||
) : (
|
||||
<>
|
||||
<Text
|
||||
className={"tag-text"}
|
||||
title={label}
|
||||
font-size={"13px"}
|
||||
noSelect
|
||||
truncate
|
||||
>
|
||||
{label}
|
||||
</Text>
|
||||
{isNewTag && (
|
||||
<IconButton
|
||||
className={"tag-icon"}
|
||||
iconName={CrossIconReactSvgUrl}
|
||||
size={"10px"}
|
||||
onClick={onDeleteAction}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</StyledTag>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Tag.propTypes = {
|
||||
/** Accepts the tag id */
|
||||
tag: PropTypes.string,
|
||||
/** Accepts the tag label */
|
||||
label: PropTypes.string,
|
||||
/** Accepts class */
|
||||
className: PropTypes.string,
|
||||
/** Accepts id */
|
||||
id: PropTypes.string,
|
||||
/** Accepts css style */
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
/** Accepts the tag styles as new and adds the delete button */
|
||||
isNewTag: PropTypes.bool,
|
||||
/** Accepts the tag styles as disabled and disables clicking */
|
||||
isDisabled: PropTypes.bool,
|
||||
/** Accepts the function that is called when the tag is clicked */
|
||||
onClick: PropTypes.func,
|
||||
/** Accepts the function that ist called when the tag delete button is clicked */
|
||||
onDelete: PropTypes.func,
|
||||
/** Accepts the max width of the tag */
|
||||
tagMaxWidth: PropTypes.string,
|
||||
/** Accepts the dropdown options */
|
||||
advancedOptions: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
};
|
||||
|
||||
export default React.memo(Tag);
|
||||
@ -1,147 +0,0 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import Tag from "../tag";
|
||||
|
||||
import StyledTags from "./StyledTags";
|
||||
|
||||
const Tags = ({
|
||||
id,
|
||||
className,
|
||||
style,
|
||||
tags,
|
||||
columnCount,
|
||||
onSelectTag,
|
||||
removeTagIcon,
|
||||
}) => {
|
||||
const [renderedTags, setRenderedTags] = React.useState(null);
|
||||
|
||||
const tagsRef = React.useRef(null);
|
||||
|
||||
const updateRenderedTags = React.useCallback(() => {
|
||||
if (tags && tagsRef) {
|
||||
if (!columnCount) return;
|
||||
|
||||
const newTags = [];
|
||||
const containerWidth = tagsRef.current.offsetWidth;
|
||||
|
||||
if (tags.length === 1) {
|
||||
if (tags[0]?.isDefault) {
|
||||
const tag = { ...tags[0], maxWidth: `100%` };
|
||||
newTags.push(tag);
|
||||
} else if (tags[0]?.isThirdParty) {
|
||||
const tag = { ...tags[0], maxWidth: `36px` };
|
||||
newTags.push(tag);
|
||||
} else {
|
||||
const tag = { label: tags[0].label || tags[0], maxWidth: `100%` };
|
||||
newTags.push(tag);
|
||||
}
|
||||
|
||||
return setRenderedTags(newTags);
|
||||
}
|
||||
|
||||
if (
|
||||
columnCount >= tags.length ||
|
||||
(tags.length === 2 && tags[0]?.isThirdParty && tags[1]?.isDefault)
|
||||
) {
|
||||
const thirdPartyTagCount = tags[0]?.isThirdParty ? 1 : 0;
|
||||
|
||||
const currentTagMaxWidth =
|
||||
(containerWidth -
|
||||
thirdPartyTagCount * 40 -
|
||||
(tags.length - thirdPartyTagCount) * 4) /
|
||||
(tags.length - thirdPartyTagCount);
|
||||
|
||||
const maxWidthPercent = Math.floor(
|
||||
(currentTagMaxWidth / containerWidth) * 100
|
||||
);
|
||||
|
||||
for (let i = 0; i < tags.length; i++) {
|
||||
if (tags[i]?.isThirdParty) {
|
||||
const tag = { ...tags[i], maxWidth: `36px` };
|
||||
newTags.push(tag);
|
||||
} else if (tags[i]?.isDefault) {
|
||||
const tag = { ...tags[i], maxWidth: `${maxWidthPercent}%` };
|
||||
newTags.push(tag);
|
||||
} else {
|
||||
const tag = { label: tags[i], maxWidth: `${maxWidthPercent}%` };
|
||||
newTags.push(tag);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
const tagWithDropdown = {
|
||||
key: "selector",
|
||||
advancedOptions: tags.slice(columnCount, tags.length),
|
||||
};
|
||||
|
||||
const currentTagMaxWidth =
|
||||
(containerWidth - columnCount * 4 - 35) / columnCount;
|
||||
|
||||
const maxWidthPercent = Math.floor(
|
||||
(currentTagMaxWidth / containerWidth) * 100
|
||||
);
|
||||
|
||||
if (columnCount !== 0) {
|
||||
for (let i = 0; i < columnCount; i++) {
|
||||
if (tags[i]?.isThirdParty) {
|
||||
const tag = { ...tags[i], maxWidth: `36px` };
|
||||
newTags.push(tag);
|
||||
} else if (tags[i]?.isDefault) {
|
||||
const tag = { ...tags[i], maxWidth: `${maxWidthPercent}%` };
|
||||
newTags.push(tag);
|
||||
} else {
|
||||
const tag = { label: tags[i], maxWidth: `${maxWidthPercent}%` };
|
||||
newTags.push(tag);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
newTags.push(tagWithDropdown);
|
||||
|
||||
newTags[newTags.length - 1].maxWidth = `35px`;
|
||||
}
|
||||
|
||||
setRenderedTags(newTags);
|
||||
}
|
||||
}, [tags, tagsRef, columnCount]);
|
||||
|
||||
React.useEffect(() => {
|
||||
updateRenderedTags();
|
||||
}, [tags, tagsRef, columnCount]);
|
||||
|
||||
return (
|
||||
<StyledTags id={id} className={className} style={style} ref={tagsRef}>
|
||||
{renderedTags?.length > 0 &&
|
||||
renderedTags.map((tag, index) => (
|
||||
<Tag
|
||||
key={`${tag.label}_${index}`}
|
||||
label={tag.label}
|
||||
advancedOptions={tag.advancedOptions}
|
||||
tagMaxWidth={tag.maxWidth}
|
||||
tagMinWidth={tag.minWidth}
|
||||
isNewTag={false}
|
||||
onClick={onSelectTag}
|
||||
isLast={index === renderedTags.length - 1}
|
||||
removeTagIcon={removeTagIcon}
|
||||
{...tag}
|
||||
/>
|
||||
))}
|
||||
</StyledTags>
|
||||
);
|
||||
};
|
||||
|
||||
Tags.propTypes = {
|
||||
/** Accepts the tags */
|
||||
tags: PropTypes.array,
|
||||
/** Accepts the tag column count */
|
||||
columnCount: PropTypes.number,
|
||||
/** Accepts class */
|
||||
className: PropTypes.string,
|
||||
/** Accepts id */
|
||||
id: PropTypes.string,
|
||||
/** Accepts css style */
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
/** Accepts the function that is called when the tag is selected */
|
||||
onSelectTag: PropTypes.func,
|
||||
};
|
||||
|
||||
export default Tags;
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user