Skip to content

Commit e7a3b8c

Browse files
mdroidianmdroidian
authored
prettier format (#502)
1 parent 6172842 commit e7a3b8c

File tree

1 file changed

+102
-83
lines changed

1 file changed

+102
-83
lines changed

‎src/features/attributeSelect.tsx‎

Lines changed: 102 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -41,36 +41,40 @@ const CONFIG = `roam/js/attribute-select`;
4141
const TEMPLATE_MAP = {
4242
"No styling": {
4343
transform: (text: string) => text,
44-
description: "No styling"
44+
description: "No styling",
4545
},
4646
"Remove Double Brackets": {
47-
transform: (text: string) => text.replace(/\[\[(.*?)\]\]/g, '$1'),
48-
description: "Removes [[text]] format"
47+
transform: (text: string) => text.replace(/\[\[(.*?)\]\]/g, "$1"),
48+
description: "Removes [[text]] format",
4949
},
5050
"Convert to Uppercase": {
5151
transform: (text: string) => text.toUpperCase(),
52-
description: "Makes text all caps"
52+
description: "Makes text all caps",
5353
},
5454
"Capitalize Words": {
55-
transform: (text: string) => text.split(' ').map(word => {
56-
if (!word) return '';
57-
return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
58-
}).join(' '),
59-
description: "Makes first letter of each word uppercase"
55+
transform: (text: string) =>
56+
text
57+
.split(" ")
58+
.map((word) => {
59+
if (!word) return "";
60+
return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
61+
})
62+
.join(" "),
63+
description: "Makes first letter of each word uppercase",
6064
},
6165
"Custom Format": {
6266
transform: (text: string, pattern?: string, replacement?: string) => {
6367
if (!pattern) return text;
6468
try {
6569
const regex = new RegExp(pattern);
66-
return text.replace(regex, replacement || '');
70+
return text.replace(regex, replacement || "");
6771
} catch (e) {
6872
console.error("Invalid regex:", e);
6973
return text;
7074
}
7175
},
72-
description: "Apply custom regex pattern"
73-
}
76+
description: "Apply custom regex pattern",
77+
},
7478
} as const;
7579

7680
type TemplateName = keyof typeof TEMPLATE_MAP;
@@ -86,16 +90,16 @@ const applyFormatting = ({
8690
text,
8791
templateName,
8892
customPattern,
89-
customReplacement
93+
customReplacement,
9094
}: FormatParams): string => {
9195
try {
9296
const template = TEMPLATE_MAP[templateName as TemplateName];
9397
if (!template) return text;
94-
98+
9599
if (templateName === "Custom Format" && customPattern) {
96100
return template.transform(text, customPattern, customReplacement);
97101
}
98-
102+
99103
return template.transform(text);
100104
} catch (e) {
101105
console.error("Error in transform function:", e);
@@ -128,7 +132,7 @@ const AttributeButtonPopover = <T extends ReactText>({
128132
useEffect(() => {
129133
setSliderValue(Number(currentValue));
130134
}, [isOpen, currentValue]);
131-
135+
132136
const formatConfig = useMemo(() => {
133137
try {
134138
const configUid = getPageUidByPageTitle(CONFIG);
@@ -140,39 +144,42 @@ const AttributeButtonPopover = <T extends ReactText>({
140144
key: attributeName,
141145
parentUid: attributesNode.uid,
142146
}).uid;
143-
147+
144148
return {
145-
templateName: getSettingValueFromTree({
146-
key: "template",
147-
parentUid: attributeUid,
148-
}) || "No styling",
149-
149+
templateName:
150+
getSettingValueFromTree({
151+
key: "template",
152+
parentUid: attributeUid,
153+
}) || "No styling",
154+
150155
customPattern: getSettingValueFromTree({
151156
key: "customPattern",
152157
parentUid: attributeUid,
153158
}),
154-
159+
155160
customReplacement: getSettingValueFromTree({
156161
key: "customReplacement",
157162
parentUid: attributeUid,
158-
})
163+
}),
159164
};
160165
} catch (e) {
161166
console.error("Error getting format config:", e);
162167
return {
163168
templateName: "No styling",
164169
customPattern: undefined,
165-
customReplacement: undefined
170+
customReplacement: undefined,
166171
};
167172
}
168173
}, [attributeName]);
169174

170-
const formatText = useMemo(() =>
171-
(text: string) => applyFormatting({
172-
text,
173-
...formatConfig
174-
}),
175-
[formatConfig]);
175+
const formatText = useMemo(
176+
() => (text: string) =>
177+
applyFormatting({
178+
text,
179+
...formatConfig,
180+
}),
181+
[formatConfig]
182+
);
176183

177184
// Only show filter if we have more than 10 items
178185
const shouldFilter = filterable && items.length > 10;
@@ -586,36 +593,41 @@ const TabsPanel = ({
586593
const [optionType, setOptionType] = useState(initialOptionType || "text");
587594
const [min, setMin] = useState(Number(rangeNode.children[0]?.text) || 0);
588595
const [max, setMax] = useState(Number(rangeNode.children[1]?.text) || 10);
589-
590-
const { initialTemplate, initialCustomPattern, initialCustomReplacement } = useMemo(() => {
591-
const savedTemplate = getSettingValueFromTree({
592-
key: "template",
593-
parentUid: attributeUid,
594-
}) || "No styling";
595-
596-
const savedCustomPattern = getSettingValueFromTree({
597-
key: "customPattern",
598-
parentUid: attributeUid,
599-
}) || "";
600-
601-
const savedCustomReplacement = getSettingValueFromTree({
602-
key: "customReplacement",
603-
parentUid: attributeUid,
604-
}) || "";
605-
606-
return {
607-
initialTemplate: savedTemplate,
608-
initialCustomPattern: savedCustomPattern,
609-
initialCustomReplacement: savedCustomReplacement
610-
};
611-
}, [attributeUid]);
596+
597+
const { initialTemplate, initialCustomPattern, initialCustomReplacement } =
598+
useMemo(() => {
599+
const savedTemplate =
600+
getSettingValueFromTree({
601+
key: "template",
602+
parentUid: attributeUid,
603+
}) || "No styling";
604+
605+
const savedCustomPattern =
606+
getSettingValueFromTree({
607+
key: "customPattern",
608+
parentUid: attributeUid,
609+
}) || "";
610+
611+
const savedCustomReplacement =
612+
getSettingValueFromTree({
613+
key: "customReplacement",
614+
parentUid: attributeUid,
615+
}) || "";
616+
617+
return {
618+
initialTemplate: savedTemplate,
619+
initialCustomPattern: savedCustomPattern,
620+
initialCustomReplacement: savedCustomReplacement,
621+
};
622+
}, [attributeUid]);
612623

613624
const [selectedTemplate, setSelectedTemplate] = useState(initialTemplate);
614625
const [customPattern, setCustomPattern] = useState(initialCustomPattern);
615-
const [customReplacement, setCustomReplacement] = useState(initialCustomReplacement);
626+
const [customReplacement, setCustomReplacement] = useState(
627+
initialCustomReplacement
628+
);
616629
const [isValidRegex, setIsValidRegex] = useState(true);
617630

618-
619631
// For a better UX replace renderBlock with a controlled list
620632
// add Edit, Delete, and Add New buttons
621633
const contentRef = useRef(null);
@@ -712,7 +724,7 @@ const TabsPanel = ({
712724

713725
{optionType === "text" && (
714726
<>
715-
<FormGroup
727+
<FormGroup
716728
label={
717729
<div className="flex items-center gap-2">
718730
<span>Display Format</span>
@@ -723,7 +735,7 @@ const TabsPanel = ({
723735
<Icon icon="info-sign" className="opacity-80" />
724736
</Tooltip>
725737
</div>
726-
}
738+
}
727739
className="m-0"
728740
>
729741
<div className="flex flex-col space-y-2">
@@ -740,31 +752,35 @@ const TabsPanel = ({
740752
}}
741753
activeItem={selectedTemplate}
742754
/>
743-
<Tooltip
755+
<Tooltip
744756
content={
745757
<div className="text-sm">
746758
<p className="font-bold mb-2">Available Templates:</p>
747759
<ul className="list-disc list-inside space-y-1">
748-
{Object.entries(TEMPLATE_MAP).map(([name, { description }]) => (
749-
<li key={name}>
750-
<span className="font-mono">{name}:</span>{" "}
751-
{description}
752-
</li>
753-
))}
760+
{Object.entries(TEMPLATE_MAP).map(
761+
([name, { description }]) => (
762+
<li key={name}>
763+
<span className="font-mono">{name}:</span>{" "}
764+
{description}
765+
</li>
766+
)
767+
)}
754768
</ul>
755769
</div>
756770
}
757771
placement="top"
758-
>
759-
<Icon icon="info-sign" className="opacity-80" />
772+
>
773+
<Icon icon="info-sign" className="opacity-80" />
760774
</Tooltip>
761775
</div>
762-
776+
763777
{selectedTemplate === "Custom Format" && (
764778
<div className="space-y-2">
765779
<FormGroup label="Pattern (regex)" className="m-0">
766780
<input
767-
className={`bp3-input font-mono text-sm w-full ${!isValidRegex ? 'bp3-intent-danger' : ''}`}
781+
className={`bp3-input font-mono text-sm w-full ${
782+
!isValidRegex ? "bp3-intent-danger" : ""
783+
}`}
768784
placeholder="E.g., \[\[(.*?)\]\]"
769785
value={customPattern}
770786
onChange={(e) => {
@@ -789,7 +805,7 @@ const TabsPanel = ({
789805
</div>
790806
)}
791807
</FormGroup>
792-
808+
793809
<FormGroup label="Replacement" className="m-0">
794810
<input
795811
className="bp3-input font-mono text-sm w-full"
@@ -806,22 +822,24 @@ const TabsPanel = ({
806822
}}
807823
/>
808824
</FormGroup>
809-
825+
810826
<div className="bg-gray-100 p-2 rounded text-sm">
811827
<div className="font-bold mb-1">Preview:</div>
812828
<div>
813-
<span className="font-bold">Input:</span> <span className="font-mono">[[Example]]</span>
829+
<span className="font-bold">Input:</span>{" "}
830+
<span className="font-mono">[[Example]]</span>
814831
</div>
815832
<div>
816-
<span className="font-bold">Output:</span> <span className="font-mono">
817-
{customPattern ?
818-
applyFormatting({
819-
text: "[[Example]]",
820-
templateName: "Custom Format",
821-
customPattern,
822-
customReplacement
823-
}) :
824-
"[[Example]]"}
833+
<span className="font-bold">Output:</span>{" "}
834+
<span className="font-mono">
835+
{customPattern
836+
? applyFormatting({
837+
text: "[[Example]]",
838+
templateName: "Custom Format",
839+
customPattern,
840+
customReplacement,
841+
})
842+
: "[[Example]]"}
825843
</span>
826844
</div>
827845
</div>
@@ -834,7 +852,8 @@ const TabsPanel = ({
834852
text={"Find All Current Values"}
835853
rightIcon={"search"}
836854
onClick={() => {
837-
const potentialOptions = findAllPotentialOptions(attributeName);
855+
const potentialOptions =
856+
findAllPotentialOptions(attributeName);
838857
setPotentialOptions(potentialOptions);
839858
setShowPotentialOptions(true);
840859
}}
@@ -1010,7 +1029,7 @@ export const toggleFeature = async (flag: boolean) => {
10101029
.inline-menu-item-select > span > div {display:inline}
10111030
#attribute-select-config .rm-block-separator {display: none;}
10121031
`);
1013-
1032+
10141033
definedAttributes = getDefinedAttributes();
10151034
const pageUid =
10161035
getPageUidByPageTitle(CONFIG) ||

0 commit comments

Comments
 (0)