Skip to content

Commit 23c4ccf

Browse files
typescreeptypescreep
authored
Merge pull request #173 from PRO-Robotech/feature/dev
search top design
2 parents f805760 + 061be9b commit 23c4ccf

File tree

9 files changed

+409
-132
lines changed

9 files changed

+409
-132
lines changed

‎src/components/molecules/Search/Search.tsx‎

Lines changed: 261 additions & 120 deletions
Large diffs are not rendered by default.

‎src/components/molecules/Search/styled.ts‎

Lines changed: 113 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { Tag } from 'antd'
21
import styled from 'styled-components'
2+
import { Form, Tag, Select, Input } from 'antd'
33

44
const SelectTag = styled(Tag)`
55
margin-inline-end: 4px;
@@ -16,10 +16,44 @@ const SelectTagSpan = styled.span`
1616
flex-direction: column;
1717
`
1818

19+
const MaxTagPlacheolder = styled.div`
20+
padding-left: 16px;
21+
`
22+
23+
type TMaxTagPlaceholderLengthProps = {
24+
$colorBorder: string
25+
}
26+
27+
const MaxTagPlacheolderLength = styled.span<TMaxTagPlaceholderLengthProps>`
28+
min-height: 20px;
29+
padding-right: 4px;
30+
padding-left: 4px;
31+
border: 1px solid ${({ $colorBorder }) => $colorBorder};
32+
border-radius: 20px;
33+
`
34+
35+
type TBackgroundContainerProps = {
36+
$colorBorder: string
37+
$colorBgLayout: string
38+
}
39+
40+
const BackgroundContainer = styled.div<TBackgroundContainerProps>`
41+
width: 100%;
42+
gap: 8px;
43+
border: 1px solid ${({ $colorBorder }) => $colorBorder};
44+
border-radius: 6px;
45+
background: ${({ $colorBgLayout }) => $colorBgLayout};
46+
padding: 8px;
47+
`
48+
1949
const FormContainer = styled.div`
2050
display: grid;
21-
grid-template-columns: 300px 100px 1fr 100px;
22-
gap: 16px;
51+
grid-template-columns: 2fr 10fr 75px;
52+
gap: 8px;
53+
`
54+
55+
const ResetedFormItem = styled(Form.Item)`
56+
margin-bottom: 0;
2357
`
2458

2559
type THideableContainerProps = {
@@ -30,9 +64,85 @@ const HideableContainer = styled.div<THideableContainerProps>`
3064
display: ${({ $isHidden }) => ($isHidden ? 'none' : 'initial')};
3165
`
3266

67+
const CompoundItem = styled.div`
68+
display: grid;
69+
grid-template-columns: 130px 1fr;
70+
`
71+
72+
const LeftSideSelect = styled(Select)`
73+
/* stylelint-disable declaration-no-important */
74+
75+
.ant-select-selector {
76+
border-top-right-radius: 0 !important;
77+
border-bottom-right-radius: 0 !important;
78+
border-right-width: 0 !important;
79+
height: 32px !important;
80+
}
81+
`
82+
83+
const RightSideInput = styled(Input)`
84+
&&&.ant-input-outlined {
85+
border-top-left-radius: 0 !important;
86+
border-bottom-left-radius: 0 !important;
87+
border-left-width: 0 !important;
88+
height: 32px !important;
89+
}
90+
`
91+
92+
const RightSideSelect = styled(Select)`
93+
.ant-select-selector {
94+
border-top-left-radius: 0 !important;
95+
border-bottom-left-radius: 0 !important;
96+
border-left-width: 0 !important;
97+
height: 32px !important;
98+
}
99+
`
100+
101+
const BottomTagsHolder = styled.div`
102+
display: flex;
103+
gap: 4px;
104+
flex-wrap: wrap;
105+
margin-top: 8px;
106+
`
107+
108+
const CustomTag = styled(Tag)`
109+
font-size: 14px;
110+
height: 22px;
111+
margin-inline-end: 0 !important;
112+
`
113+
114+
type TAbbrProps = {
115+
$bgColor: string
116+
}
117+
118+
const Abbr = styled.span<TAbbrProps>`
119+
background-color: ${({ $bgColor }) => $bgColor};
120+
border-radius: 13px;
121+
padding: 2px 5px;
122+
margin-right: 10px;
123+
`
124+
125+
const ClearButtonHolder = styled.div`
126+
display: flex;
127+
justify-content: flex-end;
128+
margin-top: 8px;
129+
`
130+
33131
export const Styled = {
34132
SelectTag,
35133
SelectTagSpan,
134+
MaxTagPlacheolder,
135+
MaxTagPlacheolderLength,
136+
BackgroundContainer,
36137
FormContainer,
138+
ResetedFormItem,
37139
HideableContainer,
140+
CompoundItem,
141+
LeftSideSelect,
142+
RightSideInput,
143+
RightSideSelect,
144+
BottomTagsHolder,
145+
CustomTag,
146+
Abbr,
147+
ClearButtonHolder,
38148
}

‎src/components/molecules/Search/utils.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { useRef } from 'react'
2+
import { TKindWithVersion } from 'localTypes/search'
23

34
// eslint-disable-next-line @typescript-eslint/no-explicit-any
45
export const useDebouncedCallback = <T extends (...args: any[]) => void>(fn: T, delay = 300) => {
@@ -40,3 +41,24 @@ export const setStringParam = (sp: URLSearchParams, key: string, value: string |
4041
else next.set(key, v)
4142
return next
4243
}
44+
45+
/**
46+
* Build a lookup function: given "group~version~resource" return the unique kind.
47+
* Functional, side-effect free, and tolerant of empty group (e.g. "~v1~bindings").
48+
*/
49+
export const kindByGvr =
50+
(entries: readonly TKindWithVersion[]) =>
51+
(gvr: string): string | undefined => {
52+
const [group = '', v = '', resource = ''] = gvr.split('~', 3)
53+
54+
// normalize core-group as empty string for consistent matching
55+
const norm = (s: string) => s.trim()
56+
57+
const kinds = entries
58+
.filter(e => norm(e.group) === norm(group) && e.version.version === v && e.version.resource === resource)
59+
.map(e => e.kind)
60+
61+
// ensure uniqueness of kind result
62+
const uniq = Array.from(new Set(kinds))
63+
return uniq.length === 1 ? uniq[0] : undefined
64+
}

‎src/components/organisms/DynamicComponents/molecules/ResourceBadge/ResourceBadge.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
/* eslint-disable no-console */
22
/* eslint-disable react/no-array-index-key */
33
import React, { FC } from 'react'
4+
import { hslFromString } from 'utils/hslFromString'
5+
import { getUppercase } from 'utils/getUppercase'
46
import { TDynamicComponentsAppTypeMap } from '../../types'
57
import { useMultiQuery } from '../../../DynamicRendererWithProviders/multiQueryProvider'
68
import { usePartsOfUrl } from '../../../DynamicRendererWithProviders/partsOfUrlContext'
79
import { useTheme } from '../../../DynamicRendererWithProviders/themeContext'
810
import { parseAll } from '../utils'
9-
import { hslFromString, getUppercase } from './utils'
1011
import { Styled } from './styled'
1112

1213
export const ResourceBadge: FC<{ data: TDynamicComponentsAppTypeMap['ResourceBadge'] }> = ({ data }) => {

‎src/utils/getUppercase/getUppercase.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export const getUppercase = (s: string): string => {
2+
const uppercases = [...s] // spread string into array of chars
3+
.filter(c => c >= 'A' && c <= 'Z') // keep only A–Z
4+
.join('') // join back into string
5+
6+
return uppercases.length > 0 ? uppercases : s[0].toUpperCase()
7+
}

‎src/utils/getUppercase/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './getUppercase'

‎src/components/organisms/DynamicComponents/molecules/ResourceBadge/utils.ts‎ renamed to ‎src/utils/hslFromString/hslFromString.ts‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -44,11 +44,3 @@ export const hslFromString: (value: string, theme: Theme) => string = (value, th
4444
hslFromString('alice@example.com', 'light'); // e.g. "hsl(123, 8%, 92%)"
4545
hslFromString('alice@example.com', 'dark'); // e.g. "hsl(123, 12%, 21%)"
4646
*/
47-
48-
export const getUppercase = (s: string): string => {
49-
const uppercases = [...s] // spread string into array of chars
50-
.filter(c => c >= 'A' && c <= 'Z') // keep only A–Z
51-
.join('') // join back into string
52-
53-
return uppercases.length > 0 ? uppercases : s[0].toUpperCase()
54-
}

‎src/utils/hslFromString/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './hslFromString'

‎src/utils/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,5 @@ export * from './createContextFactory'
1212
export * from './prepareUrlsToFetchForDynamicRenderer'
1313
export * from './deepMerge'
1414
export * from './getSortedKinds'
15+
export * from './hslFromString'
16+
export * from './getUppercase'

0 commit comments

Comments
 (0)