tqt/Ghost
2
1
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2023-12-13 21:00:40 +01:00
Code Issues 1 Releases Wiki 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 Hint from '../Hint';
import React, {useId, useMemo} from 'react';
@ -20,7 +21,8 @@ interface MultiSelectProps {
placeholder?: string;
color?: MultiSelectColor
hint?: string;
onChange: (selected: MultiValue<MultiSelectOption>) => void
onChange: (selected: MultiValue<MultiSelectOption>) => void;
canCreate?: boolean;
}
const multiValueColor = (color?: MultiSelectColor) => {
@ -60,6 +62,7 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
options,
values,
onChange,
canCreate = false,
...props
}) => {
const id = useId();
@ -84,30 +87,58 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
return (
<div className='flex flex-col'>
{title && <Heading htmlFor={id} grey useLabelTag>{title}</Heading>}
<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}
/>
{
canCreate ?
<CreatableSelect
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}
/>
:
<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>}
</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
canCreate={true}
hint='Will be applied to all members signing up via this form'
options={labelOptions}
placeholder='Pick one or more labels (optional)'