Skip to content

Commit

Permalink
fix: add image field hint (#212)
Browse files Browse the repository at this point in the history
* fix: add image field hint

* fix: image modal dimmed
  • Loading branch information
chiol authored Mar 6, 2024
1 parent 71ad823 commit a112799
Showing 5 changed files with 26 additions and 29 deletions.
Original file line number Diff line number Diff line change
@@ -61,7 +61,6 @@ const ImagePreviewButton: React.FC<IProps> = (props) => {
<PopoverContent
className="border-fill-secondary flex flex-col gap-5 border p-5"
onClick={(e) => e.stopPropagation()}
diabledDimmed
>
<div className="flex items-center justify-between">
<h1 className="font-14-bold">{t('modal.image-preview.title')}</h1>
Original file line number Diff line number Diff line change
@@ -254,15 +254,24 @@ const FieldSettingPopover: React.FC<IProps> = (props) => {
{t('main.setting.same-key')}
</label>
</div>
<SelectBox
label="Field Format"
onChange={(value) => value?.key && setValue('format', value?.key)}
options={FieldFormatEnumList.map((v) => ({ key: v, name: v }))}
value={{ key: watch('format'), name: watch('format') }}
isDisabled={isOriginalData}
getOptionValue={(option) => option.key}
getOptionLabel={(option) => option.name}
/>
<div>
<SelectBox
label="Field Format"
onChange={(value) =>
value?.key && setValue('format', value?.key)
}
options={FieldFormatEnumList.map((v) => ({ key: v, name: v }))}
value={{ key: watch('format'), name: watch('format') }}
isDisabled={isOriginalData}
getOptionValue={(option) => option.key}
getOptionLabel={(option) => option.name}
/>
{watch('format') === 'images' && (
<p className="text-primary font-12-regular mt-2">
{t('hint.image-format')}
</p>
)}
</div>
{(watch('format') === 'select' ||
watch('format') === 'multiSelect') && (
<div>
@@ -289,11 +298,7 @@ const FieldSettingPopover: React.FC<IProps> = (props) => {
isSubmitted={optionSubmitted}
hint={formState.errors.options?.message}
/>
{watch('format') === 'images' && (
<p className="text-primary font-12-regular">
{t('hint.image-format')}
</p>
)}

{(watch('options') ?? []).length > 0 && (
<div className="mt-4 flex flex-wrap gap-2">
{watch('options')?.map((v, i) => (
Original file line number Diff line number Diff line change
@@ -221,7 +221,7 @@ const ImageSetting: React.FC<IProps> = ({ channelId, projectId }) => {
onClick={() => {
if (typeof window === 'undefined') return;
window.open(
'https://github.com/line/abc-user-feedback/blob/main/GUIDE.md',
'https://github.com/line/abc-user-feedback/blob/main/GUIDE.md#image-storage-integration',
'_blank',
);
}}
@@ -233,7 +233,7 @@ const ImageSetting: React.FC<IProps> = ({ channelId, projectId }) => {
onClick={() => {
if (typeof window === 'undefined') return;
window.open(
'https://github.com/line/abc-user-feedback/blob/main/GUIDE.md',
'https://github.com/line/abc-user-feedback/blob/main/GUIDE.md#image-storage-integration',
'_blank',
);
}}
Original file line number Diff line number Diff line change
@@ -62,7 +62,7 @@ const CreateChannel: NextPage = () => {
onClick={() => {
if (typeof window === 'undefined') return;
window.open(
'https://github.com/line/abc-user-feedback/blob/main/GUIDE.md',
'https://github.com/line/abc-user-feedback/blob/main/GUIDE.md#image-storage-integration',
'_blank',
);
}}
@@ -74,7 +74,7 @@ const CreateChannel: NextPage = () => {
onClick={() => {
if (typeof window === 'undefined') return;
window.open(
'https://github.com/line/abc-user-feedback/blob/main/GUIDE.md',
'https://github.com/line/abc-user-feedback/blob/main/GUIDE.md#image-storage-integration',
'_blank',
);
}}
13 changes: 3 additions & 10 deletions packages/ufb-ui/src/Popover/Popover.tsx
Original file line number Diff line number Diff line change
@@ -183,16 +183,9 @@ export const PopoverContent = React.forwardRef<
React.HTMLProps<HTMLDivElement> & {
isPortal?: boolean;
disabledFloatingStyle?: boolean;
diabledDimmed?: boolean;
}
>(function PopoverContent(
{
style,
isPortal = false,
disabledFloatingStyle = false,
diabledDimmed = false,
...props
},
{ style, isPortal = false, disabledFloatingStyle = false, ...props },
propRef,
) {
const { context: floatingContext, ...context } = usePopoverContext();
@@ -227,8 +220,8 @@ export const PopoverContent = React.forwardRef<
const modalChild = context.modal ? (
<FloatingOverlay
lockScroll={context.modal}
className={diabledDimmed ? '' : 'bg-dim'}
style={{ display: 'grid', placeItems: 'center', zIndex: 20 }}
className="bg-dim"
style={{ display: 'grid', placeItems: 'center', zIndex: 100 }}
>
{child}
</FloatingOverlay>

0 comments on commit a112799

Please sign in to comment.