Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00
Code Issues Activity

Added default option for global Dropdown component

Browse source 
refs https://github.com/TryGhost/Team/issues/3150

- updates Dropdown component to allow a default selected option on first render
This commit is contained in:
Rishabh 2023-05-19 18:11:56 +05:30
parent 50f5aef902
commit a420adf684
2 changed files with 18 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
ghost/admin-x-settings/src/admin-x-ds/global/Dropdown.stories.tsx
View file

@ -47,6 +47,15 @@ export const WithHint: Story = {
}
};
export const WithDefaultSelectedOption: Story = {
args: {
title: 'Title',
options: dropdownOptions,
defaultSelectedOption: 'option-3',
hint: 'Here\'s some hint'
}
};
export const Error: Story = {
args: {
title: 'Title',

11
ghost/admin-x-settings/src/admin-x-ds/global/Dropdown.tsx
View file

@ -1,4 +1,4 @@
import React, {useState} from 'react';
import React, {useEffect, useState} from 'react';
import Heading from './Heading';
import Hint from './Hint';
@ -14,11 +14,18 @@ interface DropdownProps {
onSelect: (value: string) => void;
error?:boolean;
hint?: React.ReactNode;
defaultSelectedOption?: string;
}
const Dropdown: React.FC<DropdownProps> = ({title, options, onSelect, error, hint}) => {
const Dropdown: React.FC<DropdownProps> = ({title, options, onSelect, error, hint, defaultSelectedOption}) => {
const [selectedOption, setSelectedOption] = useState('');
useEffect(() => {
if (defaultSelectedOption) {
setSelectedOption(defaultSelectedOption);
}
}, [defaultSelectedOption]);
const handleOptionChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
const selectedValue = event.target.value;
setSelectedOption(selectedValue);