IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

text component was substituted with StyledLabel

Browse Source
This commit is contained in:
Vladimir Khvan 2023-07-07 17:44:20 +05:00
parent 3f440064d8
commit 9ad34c3c77
2 changed files with 22 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/components/selected-item/index.js
View File

@ -1,9 +1,7 @@
import React from "react"; import React from "react";
import CrossReactSvgUrl from "PUBLIC_DIR/images/cross.react.svg?url"; import CrossReactSvgUrl from "PUBLIC_DIR/images/cross.react.svg?url";
import { StyledSelectedItem } from "./styled-selected-item"; import { StyledSelectedItem, StyledLabel } from "./styled-selected-item";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import Text from "@docspace/components/text";
import IconButton from "@docspace/components/icon-button"; import IconButton from "@docspace/components/icon-button";
const SelectedItem = (props) => { const SelectedItem = (props) => {
@ -39,15 +37,14 @@ const SelectedItem = (props) => {
isDisabled={isDisabled} isDisabled={isDisabled}
id={id} id={id}
> >
<Text <StyledLabel
className={"selected-item_label"} className={"selected-item_label"}
title={label}
truncate={true} truncate={true}
noSelect noSelect
isDisabled={isDisabled} isDisabled={isDisabled}
> >
{label} {label}
</Text> </StyledLabel>
<IconButton <IconButton
className="selected-tag-removed" className="selected-tag-removed"
iconName={CrossReactSvgUrl} iconName={CrossReactSvgUrl}

26
packages/components/selected-item/styled-selected-item.js
View File

@ -2,6 +2,8 @@ import React from "react";
import { Base } from "@docspace/components/themes"; import { Base } from "@docspace/components/themes";
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
import NoUserSelect from "@docspace/components/utils/commonStyles";
const StyledSelectedItem = styled.div` const StyledSelectedItem = styled.div`
width: ${(props) => (props.isInline ? "fit-content" : "100%")}; width: ${(props) => (props.isInline ? "fit-content" : "100%")};
height: 32px; height: 32px;
@ -29,15 +31,25 @@ const StyledSelectedItem = styled.div`
props.theme.filterInput.selectedItems.hoverBackground}; props.theme.filterInput.selectedItems.hoverBackground};
} }
`} `}
`;
.selected-item_label { const StyledLabel = styled.div`
line-height: 20px; line-height: 20px;
margin-right: 10px; margin-right: 10px;
max-width: 23ch; max-width: 23ch;
color: ${(props) => props.isDisabled && props.theme.text.disableColor}; color: ${(props) => props.isDisabled && props.theme.text.disableColor};
}
${() => NoUserSelect}
${(props) =>
props.truncate &&
css`
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
`}
`; `;
StyledSelectedItem.defaultProps = { theme: Base }; StyledSelectedItem.defaultProps = { theme: Base };
export { StyledSelectedItem }; export { StyledSelectedItem, StyledLabel };