diff --git a/src/components/profile/group-item.tsx b/src/components/profile/group-item.tsx index 7bf18cf..79d67f6 100644 --- a/src/components/profile/group-item.tsx +++ b/src/components/profile/group-item.tsx @@ -137,7 +137,7 @@ export const GroupItem = (props: Props) => { ); }; -const StyledPrimary = styled("span")` +const StyledPrimary = styled("div")` font-size: 15px; font-weight: 700; line-height: 1.5; diff --git a/src/components/profile/groups-editor-viewer.tsx b/src/components/profile/groups-editor-viewer.tsx index 8f6557d..5a59e09 100644 --- a/src/components/profile/groups-editor-viewer.tsx +++ b/src/components/profile/groups-editor-viewer.tsx @@ -78,10 +78,18 @@ export const GroupsEditorViewer = (props: Props) => { const [appendSeq, setAppendSeq] = useState([]); const [deleteSeq, setDeleteSeq] = useState([]); + const filteredPrependSeq = useMemo( + () => prependSeq.filter((group) => match(group.name)), + [prependSeq, match] + ); const filteredGroupList = useMemo( () => groupList.filter((group) => match(group.name)), [groupList, match] ); + const filteredAppendSeq = useMemo( + () => appendSeq.filter((group) => match(group.name)), + [appendSeq, match] + ); const sensors = useSensors( useSensor(PointerSensor), @@ -376,6 +384,7 @@ export const GroupsEditorViewer = (props: Props) => { }} multiple options={proxyPolicyList} + disableCloseOnSelect onChange={(_, value) => value && field.onChange(value)} renderInput={(params) => } /> @@ -393,6 +402,7 @@ export const GroupsEditorViewer = (props: Props) => { sx={{ width: "calc(100% - 150px)" }} multiple options={proxyProviderList} + disableCloseOnSelect onChange={(_, value) => value && field.onChange(value)} renderInput={(params) => } /> @@ -541,23 +551,33 @@ export const GroupsEditorViewer = (props: Props) => { { @@ -576,7 +596,6 @@ export const GroupsEditorViewer = (props: Props) => { { @@ -705,13 +724,13 @@ export const GroupsEditorViewer = (props: Props) => { style={{ height: "calc(100% - 24px)", marginTop: "8px" }} totalCount={ filteredGroupList.length + - (prependSeq.length > 0 ? 1 : 0) + - (appendSeq.length > 0 ? 1 : 0) + (filteredPrependSeq.length > 0 ? 1 : 0) + + (filteredAppendSeq.length > 0 ? 1 : 0) } increaseViewportBy={256} itemContent={(index) => { - let shift = prependSeq.length > 0 ? 1 : 0; - if (prependSeq.length > 0 && index === 0) { + let shift = filteredPrependSeq.length > 0 ? 1 : 0; + if (filteredPrependSeq.length > 0 && index === 0) { return ( { onDragEnd={onPrependDragEnd} > { + items={filteredPrependSeq.map((x) => { return x.name; })} > - {prependSeq.map((item, index) => { + {filteredPrependSeq.map((item, index) => { return ( { onDragEnd={onAppendDragEnd} > { + items={filteredAppendSeq.map((x) => { return x.name; })} > - {appendSeq.map((item, index) => { + {filteredAppendSeq.map((item, index) => { return ( { const [appendSeq, setAppendSeq] = useState([]); const [deleteSeq, setDeleteSeq] = useState([]); + const filteredPrependSeq = useMemo( + () => prependSeq.filter((proxy) => match(proxy.name)), + [prependSeq, match] + ); const filteredProxyList = useMemo( () => proxyList.filter((proxy) => match(proxy.name)), [proxyList, match] ); + const filteredAppendSeq = useMemo( + () => appendSeq.filter((proxy) => match(proxy.name)), + [appendSeq, match] + ); const sensors = useSensors( useSensor(PointerSensor), @@ -228,7 +236,6 @@ export const ProxiesEditorViewer = (props: Props) => { placeholder={t("Use newlines for multiple uri")} fullWidth rows={9} - sx={{ height: "100px" }} multiline size="small" onChange={(e) => setProxyUri(e.target.value)} @@ -297,13 +304,13 @@ export const ProxiesEditorViewer = (props: Props) => { style={{ height: "calc(100% - 24px)", marginTop: "8px" }} totalCount={ filteredProxyList.length + - (prependSeq.length > 0 ? 1 : 0) + - (appendSeq.length > 0 ? 1 : 0) + (filteredPrependSeq.length > 0 ? 1 : 0) + + (filteredAppendSeq.length > 0 ? 1 : 0) } increaseViewportBy={256} itemContent={(index) => { - let shift = prependSeq.length > 0 ? 1 : 0; - if (prependSeq.length > 0 && index === 0) { + let shift = filteredPrependSeq.length > 0 ? 1 : 0; + if (filteredPrependSeq.length > 0 && index === 0) { return ( { onDragEnd={onPrependDragEnd} > { + items={filteredPrependSeq.map((x) => { return x.name; })} > - {prependSeq.map((item, index) => { + {filteredPrependSeq.map((item, index) => { return ( { onDragEnd={onAppendDragEnd} > { + items={filteredAppendSeq.map((x) => { return x.name; })} > - {appendSeq.map((item, index) => { + {filteredAppendSeq.map((item, index) => { return ( { ); }; -const StyledPrimary = styled("span")` +const StyledPrimary = styled("div")` font-size: 15px; font-weight: 700; line-height: 1.5; diff --git a/src/components/profile/rule-item.tsx b/src/components/profile/rule-item.tsx index 44e1478..96fca7d 100644 --- a/src/components/profile/rule-item.tsx +++ b/src/components/profile/rule-item.tsx @@ -92,7 +92,7 @@ export const RuleItem = (props: Props) => { ); }; -const StyledPrimary = styled("span")` +const StyledPrimary = styled("div")` font-size: 15px; font-weight: 700; line-height: 1.5; diff --git a/src/components/profile/rules-editor-viewer.tsx b/src/components/profile/rules-editor-viewer.tsx index 99e20db..e4cb130 100644 --- a/src/components/profile/rules-editor-viewer.tsx +++ b/src/components/profile/rules-editor-viewer.tsx @@ -254,10 +254,18 @@ export const RulesEditorViewer = (props: Props) => { const [appendSeq, setAppendSeq] = useState([]); const [deleteSeq, setDeleteSeq] = useState([]); + const filteredPrependSeq = useMemo( + () => prependSeq.filter((rule) => match(rule)), + [prependSeq, match] + ); const filteredRuleList = useMemo( () => ruleList.filter((rule) => match(rule)), [ruleList, match] ); + const filteredAppendSeq = useMemo( + () => appendSeq.filter((rule) => match(rule)), + [appendSeq, match] + ); const sensors = useSensors( useSensor(PointerSensor), @@ -573,13 +581,13 @@ export const RulesEditorViewer = (props: Props) => { style={{ height: "calc(100% - 24px)", marginTop: "8px" }} totalCount={ filteredRuleList.length + - (prependSeq.length > 0 ? 1 : 0) + - (appendSeq.length > 0 ? 1 : 0) + (filteredPrependSeq.length > 0 ? 1 : 0) + + (filteredAppendSeq.length > 0 ? 1 : 0) } increaseViewportBy={256} itemContent={(index) => { - let shift = prependSeq.length > 0 ? 1 : 0; - if (prependSeq.length > 0 && index === 0) { + let shift = filteredPrependSeq.length > 0 ? 1 : 0; + if (filteredPrependSeq.length > 0 && index === 0) { return ( { onDragEnd={onPrependDragEnd} > { + items={filteredPrependSeq.map((x) => { return x; })} > - {prependSeq.map((item, index) => { + {filteredPrependSeq.map((item, index) => { return ( { onDragEnd={onAppendDragEnd} > { + items={filteredAppendSeq.map((x) => { return x; })} > - {appendSeq.map((item, index) => { + {filteredAppendSeq.map((item, index) => { return (