Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-03 23:00:14 -05:00
Code Issues Activity

Added createable selector to embed in AdminX (#18094)

Browse source 
no issue

Added the ability to create new labels for the embed signup form in the
admin-x-settings app. This involved importing a new component and adding
a prop to the `MultiSelect` component, and enabling the prop in the
`EmbedSignupSidebar` component.
This commit is contained in:
Ronald Langeveld 2023-09-13 10:32:55 +07:00 • committed by GitHub
parent 60b69f510c
commit 2554c0df31
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 57 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
apps/admin-x-settings/src/admin-x-ds/global/form/MultiSelect.tsx
View file

@ -1,3 +1,4 @@
import CreatableSelect from 'react-select/creatable';
import Heading from '../Heading'; import Heading from '../Heading';
import Hint from '../Hint'; import Hint from '../Hint';
import React, {useId, useMemo} from 'react'; import React, {useId, useMemo} from 'react';
@ -20,7 +21,8 @@ interface MultiSelectProps {
placeholder?: string; placeholder?: string;
color?: MultiSelectColor color?: MultiSelectColor
hint?: string; hint?: string;
onChange: (selected: MultiValue<MultiSelectOption>) => void onChange: (selected: MultiValue<MultiSelectOption>) => void;
canCreate?: boolean;
} }
const multiValueColor = (color?: MultiSelectColor) => { const multiValueColor = (color?: MultiSelectColor) => {
@ -60,6 +62,7 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
options, options,
values, values,
onChange, onChange,
canCreate = false,
...props ...props
}) => { }) => {
const id = useId(); const id = useId();
@ -84,30 +87,58 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
return ( return (
<div className='flex flex-col'> <div className='flex flex-col'>
{title && <Heading htmlFor={id} grey useLabelTag>{title}</Heading>} {title && <Heading htmlFor={id} grey useLabelTag>{title}</Heading>}
<ReactSelect {
classNames={{ canCreate ?
menuList: () => 'z-50', <CreatableSelect
valueContainer: () => customClasses.valueContainer, classNames={{
control: () => customClasses.control, menuList: () => 'z-50',
placeholder: () => customClasses.placeHolder, valueContainer: () => customClasses.valueContainer,
menu: () => customClasses.menu, control: () => customClasses.control,
option: () => customClasses.option, placeholder: () => customClasses.placeHolder,
multiValue: ({data}) => customClasses.multiValue(data.color), menu: () => customClasses.menu,
noOptionsMessage: () => customClasses.noOptionsMessage, option: () => customClasses.option,
groupHeading: () => customClasses.groupHeading multiValue: ({data}) => customClasses.multiValue(data.color),
}} noOptionsMessage: () => customClasses.noOptionsMessage,
closeMenuOnSelect={false} groupHeading: () => customClasses.groupHeading
components={{DropdownIndicator: dropdownIndicatorComponent, Option}} }}
inputId={id} closeMenuOnSelect={false}
isClearable={false} components={{DropdownIndicator: dropdownIndicatorComponent, Option}}
options={options} inputId={id}
placeholder={placeholder ? placeholder : ''} isClearable={false}
value={values} options={options}
isMulti placeholder={placeholder ? placeholder : ''}
unstyled value={values}
onChange={onChange} isMulti
{...props} unstyled
/> onChange={onChange}
{...props}
/>
:
<ReactSelect
classNames={{
menuList: () => 'z-50',
valueContainer: () => customClasses.valueContainer,
control: () => customClasses.control,
placeholder: () => customClasses.placeHolder,
menu: () => customClasses.menu,
option: () => customClasses.option,
multiValue: ({data}) => customClasses.multiValue(data.color),
noOptionsMessage: () => customClasses.noOptionsMessage,
groupHeading: () => customClasses.groupHeading
}}
closeMenuOnSelect={false}
components={{DropdownIndicator: dropdownIndicatorComponent, Option}}
inputId={id}
isClearable={false}
options={options}
placeholder={placeholder ? placeholder : ''}
value={values}
isMulti
unstyled
onChange={onChange}
{...props}
/>
}
{hint && <Hint color={error ? 'red' : ''}>{hint}</Hint>} {hint && <Hint color={error ? 'red' : ''}>{hint}</Hint>}
</div> </div>
); );

1
apps/admin-x-settings/src/components/settings/membership/embedSignup/EmbedSignupSidebar.tsx
View file

@ -124,6 +124,7 @@ const EmbedSignupSidebar: React.FC<SidebarProps> = ({selectedLayout,
} }
<MultiSelect <MultiSelect
canCreate={true}
hint='Will be applied to all members signing up via this form' hint='Will be applied to all members signing up via this form'
options={labelOptions} options={labelOptions}
placeholder='Pick one or more labels (optional)' placeholder='Pick one or more labels (optional)'