mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-03-11 02:12:21 -05:00
Updated 'upload theme' component in AdminX
refs. https://github.com/TryGhost/Team/issues/3432
This commit is contained in:
parent
327600171c
commit
1071d4437c
3 changed files with 32 additions and 12 deletions
|
@ -12,6 +12,16 @@ export default meta;
|
||||||
type Story = StoryObj<typeof FileUpload>;
|
type Story = StoryObj<typeof FileUpload>;
|
||||||
|
|
||||||
export const Default: Story = {
|
export const Default: Story = {
|
||||||
|
args: {
|
||||||
|
id: 'test-file',
|
||||||
|
onUpload: (file: File) => {
|
||||||
|
alert(`You're uploading: ${file.name}`);
|
||||||
|
},
|
||||||
|
children: 'Click here to upload'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Custom: Story = {
|
||||||
args: {
|
args: {
|
||||||
id: 'test-file',
|
id: 'test-file',
|
||||||
onUpload: (file: File) => {
|
onUpload: (file: File) => {
|
||||||
|
|
|
@ -4,9 +4,11 @@ export interface FileUploadProps {
|
||||||
id: string;
|
id: string;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Can be any component that has no default onClick eventh handline. E.g. buttons and links won't work
|
* Can be string or any component that has no default onClick eventh handline.
|
||||||
|
* E.g. buttons and links won't work. If it's text then it's styled as the
|
||||||
|
* default button.
|
||||||
*/
|
*/
|
||||||
children?: React.ReactNode;
|
children?: string | React.ReactNode;
|
||||||
className?: string;
|
className?: string;
|
||||||
onUpload: (file: File) => void;
|
onUpload: (file: File) => void;
|
||||||
style?: {}
|
style?: {}
|
||||||
|
@ -23,7 +25,12 @@ const FileUpload: React.FC<FileUploadProps> = ({id, onUpload, children, style, .
|
||||||
return (
|
return (
|
||||||
<label htmlFor={id} style={style} {...props}>
|
<label htmlFor={id} style={style} {...props}>
|
||||||
<input id={id} type="file" hidden onChange={handleFileChange} />
|
<input id={id} type="file" hidden onChange={handleFileChange} />
|
||||||
{children}
|
{(typeof children === 'string') ?
|
||||||
|
<div className='inline-flex h-[34px] cursor-pointer items-center justify-center rounded px-4 text-sm font-semibold hover:bg-grey-100'>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
:
|
||||||
|
children}
|
||||||
</label>
|
</label>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import AdvancedThemeSettings from './theme/AdvancedThemeSettings';
|
import AdvancedThemeSettings from './theme/AdvancedThemeSettings';
|
||||||
import Button from '../../../admin-x-ds/global/Button';
|
import Button from '../../../admin-x-ds/global/Button';
|
||||||
import ButtonGroup from '../../../admin-x-ds/global/ButtonGroup';
|
import ButtonGroup from '../../../admin-x-ds/global/ButtonGroup';
|
||||||
|
import FileUpload from '../../../admin-x-ds/global/FileUpload';
|
||||||
import Modal from '../../../admin-x-ds/global/Modal';
|
import Modal from '../../../admin-x-ds/global/Modal';
|
||||||
import NewThemePreview from './theme/ThemePreview';
|
import NewThemePreview from './theme/ThemePreview';
|
||||||
import NiceModal, {useModal} from '@ebay/nice-modal-react';
|
import NiceModal, {useModal} from '@ebay/nice-modal-react';
|
||||||
|
@ -80,16 +81,18 @@ const ChangeThemeModal = NiceModal.create(() => {
|
||||||
Installed
|
Installed
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<ButtonGroup
|
<div className='flex items-center gap-3'>
|
||||||
buttons={[
|
<FileUpload id='theme-uplaod' onUpload={(file: File) => {
|
||||||
{label: 'Upload theme', onClick: () => {
|
alert(file.name);
|
||||||
alert('Upload');
|
}}>Upload theme</FileUpload>
|
||||||
}},
|
<Button
|
||||||
{label: 'OK', color: 'black', className: 'min-w-[75px]', onClick: () => {
|
className='min-w-[75px]'
|
||||||
|
color='black'
|
||||||
|
label='OK'
|
||||||
|
onClick = {() => {
|
||||||
modal.remove();
|
modal.remove();
|
||||||
}}
|
}} />
|
||||||
]}
|
</div>
|
||||||
/>
|
|
||||||
</div>;
|
</div>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Add table
Reference in a new issue