Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(TreeSelect): added props allowMultiple #621

Merged
merged 21 commits into from
Aug 5, 2022
Merged

feat(TreeSelect): added props allowMultiple #621

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
87e85fd
feat(TreeSelect): added props allowMultiple
dzonidoo May 19, 2022
508ced8
fix(TreeSelect): fixed interface one of part
dzonidoo May 20, 2022
08a63db
Merge branch 'beta-3.0.0' of https://github.com/superdesk/superdesk-u…
dzonidoo May 30, 2022
f2d35af
feat(TreeSelect): Component impruvment with asynhronus mode.
dzonidoo May 30, 2022
243f766
fix(TreeSelect): fixed lint and fixed dark theme style.
dzonidoo May 31, 2022
8e99705
Merge branch 'beta-3.0.0' of https://github.com/superdesk/superdesk-u…
dzonidoo Jun 21, 2022
1d22561
Merge branch 'beta-3.0.0' of https://github.com/superdesk/superdesk-u…
dzonidoo Jun 21, 2022
c5aa342
feat(TreeSelect): add label functionality on TreeSelect component.
Jun 21, 2022
a171fa0
.p-multiselect
Jul 11, 2022
b9004a3
fix(TreeSelect): Fix functionality of onChange to return value array.
Jul 11, 2022
e2950ee
fix(TreeSelect): Remove margin on button.
Jul 11, 2022
c52ea82
fix(TreeSelect): Exported component from ui-framework.
Jul 14, 2022
9c514d1
add examples for testing
tomaskikutis Jul 15, 2022
2345855
fix(TreeSelect): Started working on improvment value props.
Jul 19, 2022
0bae6e5
Merge branch 'beta-3.0.0' of https://github.com/superdesk/superdesk-u…
Jul 27, 2022
ce27cdc
fix(TreeSelect): added getLabel and getId functions.
Jul 27, 2022
833ad77
fix(TreeSelect): Improved functionality.
Jul 28, 2022
65049ed
fix(TreeSelect): Finished improvment functionality.
Aug 5, 2022
7cd9740
fix(TreeSelect): fix lint
Aug 5, 2022
2cd5c23
fix(TreeSelect): fix lint
Aug 5, 2022
53debee
fix(TreeSelect): fix lint
Aug 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
608 changes: 408 additions & 200 deletions app-typescript/components/TreeSelect.tsx
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion app-typescript/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,6 @@ export { IconPicker } from './components/IconPicker';
export { ThemeSelector } from './components/ThemeSelector';
export { DropZone } from './components/DropZone';
export { CreateButton } from './components/CreateButton';
// export { TreeSelect } from './components/TreeSelect';
export { SearchBar } from './components/SearchBar';
export { WithSizeObserver } from './components/WithSizeObserver';

Expand All @@ -86,6 +85,7 @@ export { Text } from './components/Text/Text';
export { Time } from './components/Text/Time';
export { Heading } from './components/Text/Heading';
export { BottomNav } from './components/Navigation/BottomNav';
export { TreeSelect } from './components/TreeSelect';
export { ContentListItem } from './components/Lists/ContentList';

// declare non-typescript exports to prevent errors
Expand Down
102 changes: 88 additions & 14 deletions app/styles/_sd-tag-input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,10 @@ tags-input, .tags-input {
cursor: text;
background-color: transparent;
border:none;
transition: border linear 0.2s, box-shadow linear 0.2s;
border-bottom: 1px solid $sd-inputBorderColor;
//transition: border linear 0.2s, box-shadow linear 0.2s;
//border-bottom: 1px solid $sd-inputBorderColor;
height: 100%;
gap: 0.4rem;
&:hover {
border-color: rgba(0,0,0,0.3);
}
Expand Down Expand Up @@ -230,7 +231,6 @@ tags-input, .tags-input {
display: flex;
align-items: center;
text-align: center;
margin: 0.2rem 0.4rem 0.2rem 0;
transition: all 0.3s;
border-radius: $border-radius__base--x-small;
opacity: 0.5;
Expand Down Expand Up @@ -262,10 +262,18 @@ tags-input, .tags-input {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
gap: 4px;
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
padding: 4px;
}
&__category-header {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
//border-bottom: 1px solid rgba(0, 0, 0, 0.15);
padding: 4px;
}
&__icon {
display: flex;
align-items: center;
Expand All @@ -287,19 +295,29 @@ tags-input, .tags-input {
&__filter {
height: 32px;
width: 100%;
display: flex;
align-items: center;
gap: 4px;
}
&__button {
height: 32px;
padding: 0 15px;
font-weight: bold;
width: 100%;
font-weight: 600;
width: auto;
cursor: default;
margin-inline-start: auto;
}
&__category-title {
font-weight: 600;
padding: 0;
}
&__input {
height: 32px;
width: 100%;
padding: 4px;
border: none;
background-color: transparent;
color: var(--color-text);
}
&__button--multiselect {
background-color: var(--sd-colour-interactive--alpha-10);
Expand All @@ -323,18 +341,23 @@ tags-input, .tags-input {
max-height: 28rem;
overflow-y: auto;
position: relative;

}
.suggestion-list--multi-select {
padding: 4px 0 !important;
}
.suggestion-list--loader {
padding: 4px 0 !important;
position: relative;
min-height: 56px;
}
.suggestion-item {
padding: 0.5rem 1rem;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: $sd-text;
background-color: $white;
transition: all ease-in-out 0.1s;
&.selected {
background-color: var(--sd-colour-interactive--alpha-30);
Expand Down Expand Up @@ -369,10 +392,65 @@ tags-input, .tags-input {
}
}

.tags-input--multiselect {
.tags-input--multiselect, .tags-input--singleselect {
position: relative;
}

.tags-input--singleselect {
&::after {
position: absolute;
z-index: 1;
display: inline-block;
margin-inline-end: 1rem;
vertical-align: middle;
border-left: 0.4rem solid transparent;
border-right: 0.4rem solid transparent;
border-top: 0.4rem solid var(--color-text);
pointer-events: none;
opacity: 0.4;
content: "";
z-index: 0;
inset-inline-end: 0;
inset-block-start: 1.5rem;
}
&:hover {
&::after {
opacity: 0.6;
}
}
}

.tags-input__overlay-button {
position: absolute;
inset: 0;
}

.tags-input__single-item {
display: flex;
align-items: center;
width: 100%;
justify-content: stretch;
padding-inline-end: 20px;
.tags-input__helper-box {
display: flex;
width: 100%;
align-items: center;
}
.tags-input__remove-button {
display: flex;
align-items: center;
align-self: flex-end;
margin-inline-start: auto;
z-index: 2;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.2s ease;
&:hover {
opacity: 1;
}
}
}


//TESTING TAG INPUT REACT NEW CSS

Expand All @@ -394,8 +472,8 @@ tags-input, .tags-input {
cursor: text;
background-color: transparent;
border:none;
transition: border linear 0.2s, box-shadow linear 0.2s;
border-bottom: 1px solid $sd-inputBorderColor;
//transition: border linear 0.2s, box-shadow linear 0.2s;
//border-bottom: 1px solid $sd-inputBorderColor;
height: 100%;
display: flex;
align-items: center;
Expand Down Expand Up @@ -563,10 +641,6 @@ tags-input, .tags-input {
display: flex;
align-items: center;
text-align: center;
margin-block-start: 0.2rem;
margin-block-end: 0.2rem;
margin-inline-start: 0;
margin-inline-end: 0.4rem;
transition: all 0.3s;
border-radius: $border-radius__base--x-small;
opacity: 0.5;
Expand Down
7 changes: 7 additions & 0 deletions app/styles/form-elements/_inputs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -745,6 +745,12 @@
box-shadow: none;
}
}
.tags-input__add-button {
pointer-events: none;
}
.sd-input__label,
.sd-input__message-box,
.sd-input__char-count {
.sd-input__label, .sd-input__message-box, .sd-input__char-count {
opacity: 0.5;
}
Expand Down Expand Up @@ -911,4 +917,5 @@
grid-row: 2/3;
grid-column: 2/4;
}
}
}
Loading