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

Merge branch 'feature/groups' of https://github.com/ONLYOFFICE/DocSpace-client into feature/groups

Browse Source
This commit is contained in:
namushka 2024-02-29 11:48:17 +03:00
commit 0d1ccf3115
14 changed files with 189 additions and 529 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
packages/client/src/pages/Home/Section/AccountsBody/Groups/RowView/index.styled.js
View File

@ -7,24 +7,20 @@ import { mobile, tablet } from "@docspace/shared/utils/device";
import { RowContent } from "@docspace/shared/components/row-content";
const marginStyles = css`
margin-left: -24px;
margin-right: -24px;
padding-left: 24px;
padding-right: 24px;
margin-inline: -24px;
padding-inline: 24px;
@media ${tablet} {
margin-left: -16px;
margin-right: -16px;
padding-left: 16px;
padding-right: 16px;
margin-inline: -16px;
padding-inline: 16px;
}
`;
const marginStylesGroupRowContainer = css`
margin-right: -48px !important;
margin-inline-end: -48px !important;
@media ${tablet} {
margin-right: -32px !important;
margin-inline-end: -32px !important;
}
`;
@ -62,16 +58,8 @@ export const GroupsRowContainer = styled(RowContainer)`
export const GroupsRowWrapper = styled.div`
.group-item {
border: 1px solid transparent;
border-left: none;
border-right: none;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: 0;
`
: css`
margin-left: 0;
`}
border-inline: none;
margin-inline-start: 0;
height: 100%;
group-select: none;
position: relative;
@ -89,13 +77,12 @@ export const GroupsRowWrapper = styled.div`
const checkedStyle = css`
background: ${({ theme }) => theme.filesSection.rowView.checkedBackground};
margin-left: -24px;
padding-left: 24px;
padding-right: 24px;
margin-inline-start: -24px;
padding-inline: 24px;
@media ${tablet} {
margin-left: -16px;
padding-left: 16px;
padding-right: 16px;
margin-inline-start: -16px;
padding-inline: 16px;
}
`;
@ -125,14 +112,7 @@ export const GroupsRow = styled(Row)`
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
.styled-element {
height: 32px;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 12px;
`
: css`
margin-right: 12px;
`}
margin-inline-end: 12px;
}
.group-row-element {
display: flex;

93
packages/client/src/pages/Home/Section/AccountsBody/Groups/TableView/index.styled.js
View File

@ -9,30 +9,14 @@ const marginCss = css`
`;
const groupTitleCss = css`
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: -24px;
padding-right: 24px;
`
: css`
margin-left: -24px;
padding-left: 24px;
`}
margin-inline-start: -24px;
padding-inline-start: 24px;
${marginCss}
`;
const contextCss = css`
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: -20px;
padding-left: 20px;
`
: css`
margin-right: -20px;
padding-right: 20px;
`}
margin-inline-end: -20px;
padding-inline-end: 20px;
${marginCss}
`;
@ -60,8 +44,7 @@ export const GroupsTableContainer = styled(TableContainer)`
.table-row {
.table-container_group-title-cell {
${groupTitleCss}
border-left: 0; //for Safari macOS
border-right: 0; //for Safari macOS
border-inline: 0; //for Safari macOS
border-image-source: ${(props) => `linear-gradient(to right,
${props.theme.filesSection.tableView.row.borderColorTransition} 17px, ${props.theme.filesSection.tableView.row.borderColor} 31px)`};
}
@ -93,7 +76,7 @@ export const GroupsRowWrapper = styled.div`
export const GroupsRow = styled(TableRow)`
.table-container_cell:not(.table-container_row-checkbox-wrapper) {
height: auto;
max-height: 48;
max-height: 48px;
}
.table-container_cell {
@ -114,49 +97,21 @@ export const GroupsRow = styled(TableRow)`
.table-container_row-checkbox-wrapper {
min-width: 48px;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
padding-left: 0px;
`
: css`
padding-right: 0px;
`}
padding-inline-end: 0;
.table-container_row-checkbox {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: -4px;
padding: 16px 12px 16px 0px;
`
: css`
margin-left: -4px;
padding: 16px 0px 16px 12px;
`}
margin-inline-start: -4px;
padding-block: 16px;
padding-inline: 12px 0;
}
.table-container_element {
}
}
.table-cell_group-title {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 12px;
`
: css`
margin-right: 12px;
`}
margin-inline-end: 12px;
}
.table-container_row-context-menu-wrapper {
justify-content: flex-end;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
padding-left: 0px;
`
: css`
padding-right: 0px;
`}
padding-inline-end: 0;
}
:hover {
.table-container_cell {
@ -165,28 +120,12 @@ export const GroupsRow = styled(TableRow)`
`${props.theme.filesSection.tableView.row.backgroundActive} !important`};
}
.table-container_group-title-cell {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: -24px;
padding-right: 24px;
`
: css`
margin-left: -24px;
padding-left: 24px;
`}
margin-inline-start: -24px;
padding-inline-start: 24px;
}
.table-container_row-context-menu-wrapper {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: -20px;
padding-left: 20px;
`
: css`
margin-right: -20px;
padding-right: 20px;
`}
margin-inline-end: -20px;
padding-inline-end: 20px;
}
}
`;

12
packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/RowView/PeopleRowContainer.js
View File

@ -10,16 +10,12 @@ import EmptyScreen from "../../EmptyScreen";
import SimpleUserRow from "./SimpleUserRow";
const marginStyles = css`
margin-left: -24px;
margin-right: -24px;
padding-left: 24px;
padding-right: 24px;
margin-inline: -24px;
padding-inline: 24px;
@media ${tablet} {
margin-left: -16px;
margin-right: -16px;
padding-left: 16px;
padding-right: 16px;
margin-inline: -16px;
padding-inline: 16px;
}
`;

35
packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/RowView/SimpleUserRow.js
View File

@ -11,22 +11,20 @@ import UserContent from "./userContent";
import { mobile, tablet } from "@docspace/shared/utils";
const marginStyles = css`
margin-left: -24px;
padding-left: 24px;
padding-right: 24px;
margin-inline-start: -24px;
padding-inline: 24px;
@media ${tablet} {
margin-left: -16px;
padding-left: 16px;
padding-right: 16px;
margin-inline-start: -16px;
padding-inline: 16px;
}
`;
const marginStylesUserRowContainer = css`
margin-right: -48px !important;
margin-inline-end: -48px !important;
@media ${tablet} {
margin-right: -32px !important;
margin-inline-end: -32px !important;
}
`;
@ -38,16 +36,8 @@ const checkedStyle = css`
const StyledWrapper = styled.div`
.user-item {
border: 1px solid transparent;
border-left: none;
border-right: none;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: 0;
`
: css`
margin-left: 0;
`}
border-inline: none;
margin-inline-start: 0;
height: 100%;
user-select: none;
@ -98,14 +88,7 @@ const StyledSimpleUserRow = styled(Row)`
.styled-element {
height: 32px;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 12px;
`
: css`
margin-right: 12px;
`}
margin-inline-end: 12px;
}
`;

22
packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/RowView/userContent.js
View File

@ -22,26 +22,10 @@ const StyledRowContent = styled(RowContent)`
.badges {
flex-direction: row-reverse;
margin-top: 10px;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 12px;
`
: css`
margin-right: 12px;
`}
margin-inline-end: 12px;
.paid-badge {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: 8px;
margin-left: 0px;
`
: css`
margin-left: 8px;
margin-right: 0px;
`}
margin-inline: 8px 0;
}
}
}
@ -110,7 +94,7 @@ const UserContent = ({
t,
usedSpace,
quotaLimit,
isDefaultUsersQuotaSet
isDefaultUsersQuotaSet,
);
return (

29
packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/TableView/TableContainer.js
View File

@ -24,31 +24,15 @@ const marginCss = css`
`;
const userNameCss = css`
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: -24px;
padding-right: 24px;
`
: css`
margin-left: -24px;
padding-left: 24px;
`}
margin-inline-start: -24px;
padding-inline-start: 24px;
${marginCss}
`;
const contextCss = css`
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: -20px;
padding-left: 20px;
`
: css`
margin-right: -20px;
padding-right: 20px;
`}
margin-inline-end: -20px;
padding-inline-end: 20px;
${marginCss}
`;
@ -86,8 +70,7 @@ const StyledTableContainer = styled(TableContainer)`
}
.table-container_user-name-cell {
${userNameCss}
border-left: 0; //for Safari macOS
border-right: 0; //for Safari macOS
border-inline: 0; //for Safari macOS
border-image-source: ${(props) => `linear-gradient(to right,
${props.theme.filesSection.tableView.row.borderColorTransition} 17px, ${props.theme.filesSection.tableView.row.borderColor} 31px)`};
@ -245,7 +228,7 @@ export default inject(
currentDeviceType,
typeAccountsColumnIsEnabled,
emailAccountsColumnIsEnabled,
setCurrentGroup:peopleStore.groupsStore.setCurrentGroup,
setCurrentGroup: peopleStore.groupsStore.setCurrentGroup,
};
},
)(observer(Table));

181
packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/TableView/TableRow.js
View File

@ -28,28 +28,12 @@ const StyledPeopleRow = styled(TableRow)`
}
.table-container_user-name-cell {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: -24px;
padding-right: 24px;
`
: css`
margin-left: -24px;
padding-left: 24px;
`}
margin-inline-start: -24px;
padding-inline-start: 24px;
}
.table-container_row-context-menu-wrapper {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: -20px;
padding-left: 20px;
`
: css`
margin-right: -20px;
padding-right: 20px;
`}
margin-inline-end: -20px;
padding-inline-end: 20px;
}
}
@ -63,76 +47,33 @@ const StyledPeopleRow = styled(TableRow)`
}
.table-container_row-checkbox-wrapper {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
padding-left: 0px;
`
: css`
padding-right: 0px;
`}
padding-inline-end: 0;
min-width: 48px;
.table-container_row-checkbox {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: -4px;
padding: 16px 12px 16px 0px;
`
: css`
margin-left: -4px;
padding: 16px 0px 16px 12px;
`}
margin-inline-start: -4px;
padding-block: 16px;
padding-inline: 12px 0;
}
}
.link-with-dropdown-group {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 12px;
`
: css`
margin-right: 12px;
`}
margin-inline-end: 12px;
}
.table-cell_username {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 12px;
`
: css`
margin-right: 12px;
`}
margin-inline-end: 12px;
}
.table-container_row-context-menu-wrapper {
justify-content: flex-end;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
padding-left: 0px;
`
: css`
padding-right: 0px;
`}
padding-inline-end: 0;
}
.table-cell_type,
.table-cell_groups,
.table-cell_room {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: -8px;
`
: css`
margin-left: -8px;
`}
margin-inline-start: -8px;
}
.groups-combobox,
@ -148,14 +89,7 @@ const StyledPeopleRow = styled(TableRow)`
.type-combobox,
.groups-combobox,
.room-combobox {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
padding-right: 8px;
`
: css`
padding-left: 8px;
`}
padding-inline-start: 8px;
overflow: hidden;
}
@ -163,16 +97,8 @@ const StyledPeopleRow = styled(TableRow)`
.groups-combobox,
.room-combobox {
.combo-button {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
padding-right: 8px;
margin-right: -8px;
`
: css`
padding-left: 8px;
margin-left: -8px;
`}
padding-inline-start: 8px;
margin-inline-start: -8px;
.combo-button-label {
font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
@ -183,16 +109,8 @@ const StyledPeopleRow = styled(TableRow)`
.groups-combobox {
.combo-button {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
padding-right: 8px;
margin-right: -8px;
`
: css`
padding-left: 8px;
margin-left: -8px;
`}
padding-inline-start: 8px;
margin-inline-start: -8px;
}
}
@ -201,6 +119,10 @@ const StyledPeopleRow = styled(TableRow)`
display: none;
}
}
.plainTextItem {
padding-inline-start: 8px;
}
`;
StyledPeopleRow.defaultProps = { theme: Base };
@ -223,11 +145,6 @@ const StyledGroupsComboBox = styled(ComboBox)`
StyledGroupsComboBox.defaultProps = { theme: Base };
const StyledTextWrapper = styled.div`
padding-inline-start: 8px;
overflow: hidden;
`;
const fakeRooms = [
{
name: "Room 1",
@ -428,20 +345,19 @@ const InsideGroupTableRow = (props) => {
if (groups.length === 1)
return (
<StyledTextWrapper>
<Text
type="page"
title={position}
fontSize="13px"
fontWeight={600}
color={sideInfoColor}
truncate
noSelect
dir="auto"
>
{groups[0].name}
</Text>
</StyledTextWrapper>
<Text
className="plainTextItem"
type="page"
title={position}
fontSize="13px"
fontWeight={600}
color={sideInfoColor}
truncate
noSelect
dir="auto"
>
{groups[0].name}
</Text>
);
return null;
@ -469,20 +385,19 @@ const InsideGroupTableRow = (props) => {
);
const text = (
<StyledTextWrapper>
<Text
type="page"
title={position}
fontSize="13px"
fontWeight={600}
color={sideInfoColor}
truncate
noSelect
dir="auto"
>
{typeLabel}
</Text>
</StyledTextWrapper>
<Text
className="plainTextItem"
type="page"
title={position}
fontSize="13px"
fontWeight={600}
color={sideInfoColor}
truncate
noSelect
dir="auto"
>
{typeLabel}
</Text>
);
const canChange = canChangeUserType(item);
@ -644,4 +559,4 @@ const InsideGroupTableRow = (props) => {
export default withTranslation(["People", "Common", "Settings"])(
withContent(InsideGroupTableRow),
);
);

12
packages/client/src/pages/Home/Section/AccountsBody/People/RowView/PeopleRowContainer.js
View File

@ -11,16 +11,12 @@ import EmptyScreen from "../../EmptyScreen";
import SimpleUserRow from "./SimpleUserRow";
const marginStyles = css`
margin-left: -24px;
margin-right: -24px;
padding-left: 24px;
padding-right: 24px;
margin-inline: -24px;
padding-inline: 24px;
@media ${tablet} {
margin-left: -16px;
margin-right: -16px;
padding-left: 16px;
padding-right: 16px;
margin-inline: -16px;
padding-inline: 16px;
}
`;

35
packages/client/src/pages/Home/Section/AccountsBody/People/RowView/SimpleUserRow.js
View File

@ -11,22 +11,20 @@ import UserContent from "./userContent";
import { mobile, tablet } from "@docspace/shared/utils/device";
const marginStyles = css`
margin-left: -24px;
padding-left: 24px;
padding-right: 24px;
margin-inline-start: -24px;
padding-inline: 24px;
@media ${tablet} {
margin-left: -16px;
padding-left: 16px;
padding-right: 16px;
margin-inline-start: -16px;
padding-inline: 16px;
}
`;
const marginStylesUserRowContainer = css`
margin-right: -48px !important;
margin-inline-end: -48px !important;
@media ${tablet} {
margin-right: -32px !important;
margin-inline-end: -32px !important;
}
`;
@ -38,16 +36,8 @@ const checkedStyle = css`
const StyledWrapper = styled.div`
.user-item {
border: 1px solid transparent;
border-left: none;
border-right: none;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: 0;
`
: css`
margin-left: 0;
`}
border-inline: none;
margin-inline-start: 0;
height: 100%;
user-select: none;
@ -98,14 +88,7 @@ const StyledSimpleUserRow = styled(Row)`
.styled-element {
height: 32px;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 12px;
`
: css`
margin-right: 12px;
`}
margin-inline-end: 12px;
}
`;

20
packages/client/src/pages/Home/Section/AccountsBody/People/RowView/userContent.js
View File

@ -21,26 +21,10 @@ const StyledRowContent = styled(RowContent)`
.badges {
flex-direction: row-reverse;
margin-top: 9px;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 12px;
`
: css`
margin-right: 12px;
`}
margin-inline-end: 12px;
.paid-badge {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: 8px;
margin-left: 0px;
`
: css`
margin-left: 8px;
margin-right: 0px;
`}
margin-inline: 8px 0;
}
}
}

27
packages/client/src/pages/Home/Section/AccountsBody/People/TableView/TableContainer.js
View File

@ -16,29 +16,13 @@ const COLUMNS_SIZE = `peopleColumnsSize_ver-${TableVersions.People}`;
const INFO_PANEL_COLUMNS_SIZE = `infoPanelPeopleColumnsSize_ver-${TableVersions.People}`;
const userNameCss = css`
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: -24px;
padding-right: 24px;
`
: css`
margin-left: -24px;
padding-left: 24px;
`}
margin-inline-start: -24px;
padding-inline-start: 24px;
`;
const contextCss = css`
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: -20px;
padding-left: 20px;
`
: css`
margin-right: -20px;
padding-right: 20px;
`}
margin-inline-end: -20px;
padding-inline-end: 20px;
`;
const StyledTableContainer = styled(TableContainer)`
@ -72,8 +56,7 @@ const StyledTableContainer = styled(TableContainer)`
}
.table-container_user-name-cell {
${userNameCss}
border-left: 0; //for Safari macOS
border-right: 0; //for Safari macOS
border-inline: 0; //for Safari macOS
border-image-source: ${(props) => `linear-gradient(to right,
${props.theme.filesSection.tableView.row.borderColorTransition} 17px, ${props.theme.filesSection.tableView.row.borderColor} 31px)`};

181
packages/client/src/pages/Home/Section/AccountsBody/People/TableView/TableRow.js
View File

@ -39,28 +39,12 @@ const StyledPeopleRow = styled(TableRow)`
}
.table-container_user-name-cell {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: -24px;
padding-right: 24px;
`
: css`
margin-left: -24px;
padding-left: 24px;
`}
margin-inline-start: -24px;
padding-inline-start: 24px;
}
.table-container_row-context-menu-wrapper {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: -20px;
padding-left: 20px;
`
: css`
margin-right: -20px;
padding-right: 20px;
`}
margin-inline-end: -20px;
padding-inline-end: 20px;
}
}
@ -72,7 +56,7 @@ const StyledPeopleRow = styled(TableRow)`
.table-container_cell:not(.table-container_row-checkbox-wrapper) {
height: auto;
max-height: 48;
max-height: 48px;
}
.table-container_cell {
@ -82,76 +66,33 @@ const StyledPeopleRow = styled(TableRow)`
}
.table-container_row-checkbox-wrapper {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
padding-left: 0px;
`
: css`
padding-right: 0px;
`}
padding-inline-end: 0;
min-width: 48px;
.table-container_row-checkbox {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: -4px;
padding: 16px 12px 16px 0px;
`
: css`
margin-left: -4px;
padding: 16px 0px 16px 12px;
`}
margin-inline-start: -4px;
padding-block: 16px;
padding-inline: 12px 0;
}
}
.link-with-dropdown-group {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 12px;
`
: css`
margin-right: 12px;
`}
margin-inline-end: 12px;
}
.table-cell_username {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 12px;
`
: css`
margin-right: 12px;
`}
margin-inline-end: 12px;
}
.table-container_row-context-menu-wrapper {
justify-content: flex-end;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
padding-left: 0px;
`
: css`
padding-right: 0px;
`}
padding-inline-end: 0;
}
.table-cell_type,
.table-cell_groups,
.table-cell_room {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: -8px;
`
: css`
margin-left: -8px;
`}
margin-inline-start: -8px;
}
.groups-combobox,
@ -167,14 +108,7 @@ const StyledPeopleRow = styled(TableRow)`
.type-combobox,
.groups-combobox,
.room-combobox {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
padding-right: 8px;
`
: css`
padding-left: 8px;
`}
padding-inline-start: 8px;
overflow: hidden;
}
@ -182,16 +116,8 @@ const StyledPeopleRow = styled(TableRow)`
.groups-combobox,
.room-combobox {
.combo-button {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
padding-right: 8px;
margin-right: -8px;
`
: css`
padding-left: 8px;
margin-left: -8px;
`}
padding-inline-start: 8px;
margin-inline-start: -8px;
.combo-button-label {
font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
@ -202,16 +128,8 @@ const StyledPeopleRow = styled(TableRow)`
.groups-combobox {
.combo-button {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
padding-right: 8px;
margin-right: -8px;
`
: css`
padding-left: 8px;
margin-left: -8px;
`}
padding-inline-start: 8px;
margin-inline-start: -8px;
}
}
@ -220,6 +138,10 @@ const StyledPeopleRow = styled(TableRow)`
display: none;
}
}
.plainTextItem {
padding-inline-start: 8px;
}
`;
StyledPeopleRow.defaultProps = { theme: Base };
@ -242,11 +164,6 @@ const StyledGroupsComboBox = styled(ComboBox)`
StyledGroupsComboBox.defaultProps = { theme: Base };
const StyledTextWrapper = styled.div`
padding-inline-start: 8px;
overflow: hidden;
`;
const fakeRooms = [
{
name: "Room 1",
@ -448,20 +365,19 @@ const PeopleTableRow = (props) => {
if (groups.length === 1)
return (
<StyledTextWrapper>
<Text
type="page"
title={position}
fontSize="13px"
fontWeight={600}
color={sideInfoColor}
truncate
noSelect
dir="auto"
>
{groups[0].name}
</Text>
</StyledTextWrapper>
<Text
className="plainTextItem"
type="page"
title={position}
fontSize="13px"
fontWeight={600}
color={sideInfoColor}
truncate
noSelect
dir="auto"
>
{groups[0].name}
</Text>
);
return null;
@ -489,20 +405,19 @@ const PeopleTableRow = (props) => {
);
const text = (
<StyledTextWrapper>
<Text
type="page"
title={position}
fontSize="13px"
fontWeight={600}
color={sideInfoColor}
truncate
noSelect
dir="auto"
>
{typeLabel}
</Text>
</StyledTextWrapper>
<Text
className="plainTextItem"
type="page"
title={position}
fontSize="13px"
fontWeight={600}
color={sideInfoColor}
truncate
noSelect
dir="auto"
>
{typeLabel}
</Text>
);
const canChange = canChangeUserType(item);

7
packages/shared/components/text/Text.styled.ts
View File

@ -52,4 +52,11 @@ const StyledText = styled.p<TextProps & StyledTextProps>`
StyledText.defaultProps = { theme: Base };
export const StyledAutoDirSpan = styled.span`
display: inherit;
white-space: inherit;
overflow: inherit;
text-overflow: inherit;
`;
export default StyledText;

16
packages/shared/components/text/Text.tsx
View File

@ -1,6 +1,6 @@
import React from "react";
import StyledText from "./Text.styled";
import StyledText, { StyledAutoDirSpan } from "./Text.styled";
import { TextProps } from "./Text.types";
const TextPure = ({
@ -12,8 +12,13 @@ const TextPure = ({
color,
textAlign,
onClick,
dir,
children,
...rest
}: TextProps) => {
const isAutoDir = dir === "auto";
const dirProp = isAutoDir ? {} : { dir };
return (
<StyledText
fontSizeProp={fontSize}
@ -24,8 +29,15 @@ const TextPure = ({
title={title}
data-testid="text"
onClick={onClick}
{...dirProp}
{...rest}
/>
>
{isAutoDir ? (
<StyledAutoDirSpan dir="auto">{children}</StyledAutoDirSpan>
) : (
children
)}
</StyledText>
);
};