diff --git a/web/components/enum-settings-option.css b/web/components/enum-settings-option.css --- a/web/components/enum-settings-option.css +++ b/web/components/enum-settings-option.css @@ -1,6 +1,6 @@ div.optionContainer { display: flex; - padding: 16px 32px 16px 16px; + padding: 16px; align-items: center; border-radius: 8px; cursor: pointer; @@ -11,7 +11,7 @@ } div.optionIcon { - margin-right: 24px; + margin-right: 16px; } div.optionIconTop { diff --git a/web/components/enum-settings-option.react.js b/web/components/enum-settings-option.react.js --- a/web/components/enum-settings-option.react.js +++ b/web/components/enum-settings-option.react.js @@ -21,7 +21,7 @@ +selected: boolean, +onSelect: () => void, +disabled?: boolean, - +icon: React.Node, + +icon?: React.Node, +title: string, +type?: InputType, +iconPosition?: IconPosition, @@ -81,19 +81,40 @@ iconPositionClassnames[iconPosition], ); - return ( -
-
{icon}
-
-
{title}
-
{descriptionItems}
+ const optionIcon = React.useMemo(() => { + if (!icon) { + return null; + } + + return
{icon}
; + }, [icon, optionIconClasses]); + + const enumSettingsOption = React.useMemo( + () => ( +
+ {optionIcon} +
+
{title}
+
{descriptionItems}
+
+ {inputIcon}
- {inputIcon} -
+ ), + [ + descriptionItems, + disabled, + inputIcon, + onSelect, + optionContainerClasses, + optionIcon, + title, + ], ); + + return enumSettingsOption; } export default EnumSettingsOption;