開発環境では、**DB を壊さない前提で、migration → API → 画面 → 同期 → ZIP → 履歴**の順に見るのがよいです。今回の差分は素材管理全体に触っているので、単体でチョンチョン見るより、素材の一生を通すのが早いです。
## 0. 先に方針
**やらないこと:**
```sh id="snb3i6"
rails db:drop
rails db:reset
rails db:setup
DISABLE_DATABASE_ENVIRONMENT_CHECK=1 ...
```
これは禁止。
開発 DB に本番データを入れているなら、床板を剥がして耐震確認するようなものです。
---
## 1. migration 確認
まず現在の状態を見る。
```sh id="qsdfpt"
cd backend
RAILS_ENV=development bundle exec rails db:migrate:status
```
その後、通常 migration。
```sh id="a89fir"
RAILS_ENV=development bundle exec rails db:migrate
```
見るポイント:
```txt id="c1u57a"
materials に source_* / normalized_source_key / version_no がある
material_versions に event_type / file snapshot / source snapshot がある
material_export_items がある
material_sync_suppressions がある
material_sync_sources がある
既存 materials に material_versions version_no=1 create が backfill されている
```
確認用:
```sh id="g4vd4m"
RAILS_ENV=development bundle exec rails runner '
puts "materials=#{Material.count}"
puts "versions=#{MaterialVersion.count}"
puts "materials without versions=#{Material.left_joins(:material_versions).where(material_versions: { id: nil }).count}"
puts "sync suppressions table=#{ActiveRecord::Base.connection.table_exists?(:material_sync_suppressions)}"
'
```
ここで `materials without versions=0` になれば、backfill は通っています。
---
## 2. 既存素材一覧の画面確認
フロントを起動して `/materials` を見る。
```sh id="vl28jd"
cd frontend
npm run dev
```
見る観点:
```txt id="i2ovxw"
初期表示で素材が出る
初期表示ではグルーピングがオフ
タグなし素材も出る
カード表示でサムネまたは代替テキストが出る
一覧表示に切り替えられる
q / tag_state / media_kind / sort / direction が効く
```
ここでまず、普通の素材一覧が壊れていないことを確認します。
---
## 3. 左タグバーの確認
`/materials` を開いて左タグバーからタグを選ぶ。
見る観点:
```txt id="n6udul"
URL が tag_id=...&include_descendants=1&group_by=parent_tag になる
選択中タグが左バーで強調される
一覧上部に「選択中」の表示が出る
「タグ選択を解除」で通常表示に戻れる
解除後、tag_id / include_descendants / group_by / page が消える
子タグ・孫タグの素材も一覧に出る
親タググルーピングされる
```
特に重要なのはこれ。
```txt id="d33os0"
親タグ A を選択
A に直接紐づく素材
A > B に紐づく素材
A > B > C に紐づく素材
が同じ一覧に出ること
```
---
## 4. 選択タグから素材追加
左タグからタグを選択した状態で、一覧上部の **このタグに素材を追加** を押す。
見る観点:
```txt id="qdd5uw"
素材追加画面の tag 欄に選択中タグ名が初期入力されている
file または url を指定して保存できる
保存後 return_to で元のタグ選択済み一覧に戻る
戻った一覧に追加した素材が出る
material_versions に create が 1 件できる
```
Rails console でも確認できます。
```sh id="i07rrb"
RAILS_ENV=development bundle exec rails runner '
m = Material.order(id: :desc).first
puts({ id: m.id, tag: m.tag&.name, versions: m.material_versions.count, version_no: m.version_no }.inspect)
'
```
---
## 5. グループ見出しから素材追加
親タググルーピング表示中に、各グループ見出しの **このタグに素材を追加** を押す。
見る観点:
```txt id="fpx8w4"
グループタグ名が tag 欄に初期入力される
保存後、元の一覧に戻る
追加素材がそのグループ内に出る
```
ここは今回の導線の肝です。棚の見出しから直接その棚へ素材を置けるかを見る。
---
## 6. 素材更新と履歴
既存素材の詳細または編集導線から、タグ・URL・ファイル・export path を更新する。
見る観点:
```txt id="w36i61"
更新前 snapshot が無ければ create が補われる
更新後 update version ができる
file_blob_id / file_filename / file_sha256 が material_versions に入る
export_paths_json が履歴に残る
/materials/changes または /materials/versions で履歴が見える
```
console:
```sh id="a3okhv"
RAILS_ENV=development bundle exec rails runner '
m = Material.order(updated_at: :desc).first
puts m.material_versions.order(:version_no).map { |v|
[v.version_no, v.event_type, v.tag_name, v.file_filename, v.file_sha256, v.export_paths_hash]
}.inspect
'
```
---
## 7. サムネイル
画像素材を追加して、一覧にサムネイルが出るか確認。
動画素材があるなら、`ffmpeg` が入っている環境で backfill。
```sh id="qxm8fj"
cd backend
RAILS_ENV=development bundle exec rails materials:thumbnails:backfill
```
見る観点:
```txt id="s9a1vf"
画像は 180x180 のサムネが付く
動画はフレームからサムネが作られる
非対応ファイルは代替テキスト表示になる
ログに result が出る
```
---
## 8. ZIP export
export path がある素材を用意して、ブラウザで確認。
```txt id="aq7f7o"
/materials/download.zip?profile=legacy_drive
```
見る観点:
```txt id="h4rve5"
ZIP が落ちる
entry path が material_export_items.export_path になる
disabled な export item は入らない
ファイル実体が欠けている場合は 422 と missing_files が返る
```
---
## 9. 抑止
`/materials/suppressions` で path prefix 抑止を追加する。
見る観点:
```txt id="w80jbu"
member で作成できる
guest は forbidden / unauthorized
google_drive_path_prefix で既存素材が discard される
discard 履歴が material_versions に残る
同期時に同じ source_path 配下が再作成されない
```
---
## 10. Google Drive 同期
開発環境では、まず小さいフォルダでやるのがよいです。
いきなり本番素材集フォルダを食わせると、ログが藪になります 🌿
必要な ENV:
```sh id="kzbb7f"
GOOGLE_DRIVE_SERVICE_ACCOUNT_EMAIL=...
GOOGLE_DRIVE_PRIVATE_KEY_PATH=...
MATERIAL_SYNC_SOURCE_KIND=google_drive_path
MATERIAL_SYNC_SOURCE_FILE_ID=<folder_id>
MATERIAL_SYNC_SOURCE_NAME=dev-small-folder
MATERIAL_SYNC_SOURCE_PROFILE=legacy_drive
```
seed で source 作成、または console で作成。
```sh id="sec40c"
RAILS_ENV=development bundle exec rails db:seed
RAILS_ENV=development bundle exec rails materials:sync
```
見る観点:
```txt id="a5ltqu"
imported / updated / unchanged / suppressed / failed がログに出る
2 回目実行で unchanged が増える
tag は nil のままでも保存できる
人手で tag / url を付けた既存同期素材が、再同期で消えない
Google native file は skip される
download 後 sha256 block が効く
```
---
## 11. schema.rb は別途確認
これはテストというより merge gate です。
今回まだ怪しいので、差分に以下が混ざっていないことを確認します。
```txt id="s3k6da"
wiki_assets 削除
wiki_pages.next_asset_no 削除
素材管理と無関係な CHECK constraint 削除
素材管理と無関係な index order 消失
```
ここが残るなら、機能テストが通っても merge は止めた方がいいです。
---
## 最小テスト順
時間がないなら、この順で十分です。
```txt id="c1k2pw"
1. db:migrate
2. materials without versions = 0 を確認
3. /materials 初期表示
4. 左タグ選択 → 子孫込み表示 → グルーピング
5. タグ選択解除
6. 選択タグから素材追加 → return_to で戻る
7. グループ見出しから素材追加
8. 更新して material_versions を確認
9. ZIP export
10. 小さい Drive folder で materials:sync を 2 回
```
これで、今回の差分の主要な導線はほぼ踏めます。
Reviewed-on: #381
Co-authored-by: miteruzo <miteruzo@naver.com>
Co-committed-by: miteruzo <miteruzo@naver.com>
このコミットはPull リクエスト #381 でマージされました．
このコミットが含まれているのは:
@@ -1,23 +1,43 @@
|
||||
import { Fragment, useEffect, useState } from 'react'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { useLocation, useNavigate } from 'react-router-dom'
|
||||
|
||||
import TagLink from '@/components/TagLink'
|
||||
import SidebarComponent from '@/components/layout/SidebarComponent'
|
||||
import { apiGet } from '@/lib/api'
|
||||
import TagLink from '@/components/TagLink'
|
||||
import { fetchMaterialTagTree, parseMaterialFilter } from '@/lib/materials'
|
||||
import { materialsKeys } from '@/lib/queryKeys'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
import type { FC, ReactNode } from 'react'
|
||||
import type { CSSProperties, Dispatch, FC, ReactNode, SetStateAction } from 'react'
|
||||
|
||||
import type { Tag } from '@/types'
|
||||
import type { MaterialFilter, MaterialSidebarTag, Tag } from '@/types'
|
||||
|
||||
type TagWithDepth = Tag & {
|
||||
hasChildren: boolean
|
||||
children: TagWithDepth[] }
|
||||
const FILTERS: MaterialFilter[] = ['missing', 'present', 'any']
|
||||
const FILTER_LABELS: Record<MaterialFilter, string> = { present: '有', missing: '無', any: '全' }
|
||||
|
||||
|
||||
const px = (value: string): number => {
|
||||
const parsed = Number.parseFloat (value)
|
||||
return Number.isFinite (parsed) ? parsed : 0
|
||||
}
|
||||
|
||||
|
||||
const verticalChrome = (el: HTMLElement): number => {
|
||||
const style = window.getComputedStyle (el)
|
||||
|
||||
return (
|
||||
px (style.paddingTop)
|
||||
+ px (style.paddingBottom)
|
||||
+ px (style.borderTopWidth)
|
||||
+ px (style.borderBottomWidth))
|
||||
}
|
||||
|
||||
|
||||
const setChildrenById = (
|
||||
tags: TagWithDepth[],
|
||||
tags: MaterialSidebarTag[],
|
||||
targetId: number,
|
||||
children: TagWithDepth[],
|
||||
): TagWithDepth[] => (
|
||||
children: MaterialSidebarTag[],
|
||||
): MaterialSidebarTag[] => (
|
||||
tags.map (tag => {
|
||||
if (tag.id === targetId)
|
||||
return { ...tag, children }
|
||||
@@ -25,75 +45,462 @@ const setChildrenById = (
|
||||
if (tag.children.length === 0)
|
||||
return tag
|
||||
|
||||
return { ...tag,
|
||||
children: (setChildrenById (tag.children, targetId, children)
|
||||
.filter (t => t.category !== 'meme' || t.hasChildren)) }
|
||||
return { ...tag, children: setChildrenById (tag.children, targetId, children) }
|
||||
}))
|
||||
|
||||
|
||||
const MaterialSidebar: FC = () => {
|
||||
const [tags, setTags] = useState<TagWithDepth[]> ([])
|
||||
const [openTags, setOpenTags] = useState<Record<number, boolean>> ({ })
|
||||
const [tagFetchedFlags, setTagFetchedFlags] = useState<Record<number, boolean>> ({ })
|
||||
const materialPath = (
|
||||
tagId: number,
|
||||
materialFilter: MaterialFilter,
|
||||
): string =>
|
||||
`/materials?tag_id=${ tagId }&include_descendants=1&group_by=parent_tag`
|
||||
+ `&material_filter=${ materialFilter }`
|
||||
|
||||
useEffect (() => {
|
||||
void (async () => {
|
||||
setTags ((await apiGet<TagWithDepth[]> ('/tags/with-depth'))
|
||||
.filter (t => t.category !== 'meme' || t.hasChildren))
|
||||
}) ()
|
||||
}, [])
|
||||
|
||||
const renderTags = (ts: TagWithDepth[], nestLevel = 0): ReactNode => (
|
||||
ts.map (t => (
|
||||
<Fragment key={t.id}>
|
||||
<li>
|
||||
<div className="flex">
|
||||
<div className="flex-none w-4">
|
||||
{t.hasChildren && (
|
||||
<a
|
||||
href="#"
|
||||
onClick={async e => {
|
||||
e.preventDefault ()
|
||||
if (!(tagFetchedFlags[t.id]))
|
||||
{
|
||||
try
|
||||
{
|
||||
const data =
|
||||
await apiGet<TagWithDepth[]> (
|
||||
'/tags/with-depth', { params: { parent: String (t.id) } })
|
||||
setTags (prev => setChildrenById (prev, t.id, data))
|
||||
setTagFetchedFlags (prev => ({ ...prev, [t.id]: true }))
|
||||
}
|
||||
catch
|
||||
{
|
||||
;
|
||||
}
|
||||
}
|
||||
setOpenTags (prev => ({ ...prev, [t.id]: !(prev[t.id]) }))
|
||||
}}>
|
||||
{openTags[t.id] ? <>−</> : '+'}
|
||||
</a>)}
|
||||
</div>
|
||||
<div className="flex-1 truncate">
|
||||
<TagLink
|
||||
tag={t}
|
||||
nestLevel={nestLevel}
|
||||
title={t.name}
|
||||
withCount={false}
|
||||
withWiki={false}
|
||||
to={`/materials?tag=${ encodeURIComponent (t.name) }`}/>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{openTags[t.id] && renderTags (t.children, nestLevel + 1)}
|
||||
</Fragment>)))
|
||||
const sidebarTagToTag = (tag: MaterialSidebarTag): Tag => ({
|
||||
id: tag.id,
|
||||
name: tag.name,
|
||||
category: tag.category,
|
||||
deprecatedAt: tag.deprecated ? '' : null,
|
||||
aliases: [],
|
||||
parents: [],
|
||||
postCount: 0,
|
||||
createdAt: '',
|
||||
updatedAt: '',
|
||||
hasWiki: false,
|
||||
materialId: null,
|
||||
hasDeerjikists: false,
|
||||
matchedAlias: null })
|
||||
|
||||
return (
|
||||
<SidebarComponent>
|
||||
<ul>
|
||||
{renderTags (tags)}
|
||||
</ul>
|
||||
</SidebarComponent>)
|
||||
|
||||
const tagSelectionShellClass = (selected: boolean): string =>
|
||||
cn (selected
|
||||
? ['rounded-md border border-sky-500 bg-sky-50 px-2 py-1 text-sky-700',
|
||||
'dark:border-sky-400 dark:bg-sky-950 dark:text-sky-100']
|
||||
: 'px-2 py-1')
|
||||
|
||||
|
||||
const updateMaterialFilterQuery = (
|
||||
pathname: string,
|
||||
locationSearch: string,
|
||||
navigate: ReturnType<typeof useNavigate>,
|
||||
materialFilter: MaterialFilter,
|
||||
) => {
|
||||
const qs = new URLSearchParams (locationSearch)
|
||||
qs.set ('material_filter', materialFilter)
|
||||
navigate (`${ pathname }${ qs.toString () ? `?${ qs.toString () }` : '' }`)
|
||||
}
|
||||
|
||||
export default MaterialSidebar
|
||||
|
||||
const MaterialFilterButtons: FC<{ materialFilter: MaterialFilter
|
||||
onChange: (materialFilter: MaterialFilter) => void }> = (
|
||||
{ materialFilter, onChange },
|
||||
) => (
|
||||
<div className="flex flex-wrap gap-2 justify-end md:justify-start flex-center">
|
||||
<label className="my-auto text-sm font-bold">素材：</label>
|
||||
{FILTERS.map (value => (
|
||||
<button
|
||||
key={value}
|
||||
type="button"
|
||||
onClick={() => onChange (value)}
|
||||
className={cn (
|
||||
'rounded-full border px-3 py-1 text-sm',
|
||||
(materialFilter === value
|
||||
? ['border-sky-500 bg-sky-50 text-sky-700 dark:border-sky-400',
|
||||
'dark:bg-sky-950 dark:text-sky-100']
|
||||
: ['border-neutral-300 bg-white text-neutral-700 dark:border-stone-700',
|
||||
'dark:bg-stone-900 dark:text-stone-200']))}>
|
||||
{FILTER_LABELS[value]}
|
||||
</button>))}
|
||||
</div>)
|
||||
|
||||
|
||||
const MaterialTreeNode: FC<{
|
||||
materialFilter: MaterialFilter
|
||||
selectedTagId: number | null
|
||||
nestLevel?: number
|
||||
onChildren: (tagId: number, children: MaterialSidebarTag[]) => void
|
||||
openTags: Record<number, boolean>
|
||||
setOpenTags: Dispatch<SetStateAction<Record<number, boolean>>>
|
||||
tag: MaterialSidebarTag
|
||||
}> = ({ materialFilter, nestLevel = 0, onChildren, openTags, selectedTagId,
|
||||
setOpenTags, tag }) => {
|
||||
const open = Boolean (openTags[tag.id])
|
||||
const { data } = useQuery ({
|
||||
queryKey: materialsKeys.tree ({ parentId: tag.id, materialFilter }),
|
||||
queryFn: () => fetchMaterialTagTree ({ parentId: tag.id, materialFilter }),
|
||||
enabled: open && tag.hasChildren && tag.children.length === 0})
|
||||
|
||||
useEffect (() => {
|
||||
if (open && data && tag.children.length === 0)
|
||||
onChildren (tag.id, data)
|
||||
}, [data, onChildren, open, tag.children.length, tag.id])
|
||||
|
||||
return (
|
||||
<>
|
||||
<li>
|
||||
<div className="flex flex-center">
|
||||
<div className="flex-none w-4 my-auto">
|
||||
{tag.hasChildren && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpenTags (prev => ({ ...prev, [tag.id]: !prev[tag.id] }))}
|
||||
className="text-neutral-500 dark:text-stone-400">
|
||||
{open ? <>−</> : '+'}
|
||||
</button>)}
|
||||
</div>
|
||||
<div className="min-w-0 flex-1 my-auto">
|
||||
<div className={cn (tagSelectionShellClass (selectedTagId === tag.id),
|
||||
'min-w-0 truncate')}>
|
||||
<TagLink
|
||||
tag={sidebarTagToTag (tag)}
|
||||
nestLevel={nestLevel}
|
||||
title={tag.name}
|
||||
withCount={false}
|
||||
withWiki={false}
|
||||
to={materialPath (tag.id, materialFilter)}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{open && tag.children.length > 0 && (
|
||||
<ul>
|
||||
{tag.children.map (child => (
|
||||
<MaterialTreeNode
|
||||
key={child.id}
|
||||
tag={child}
|
||||
nestLevel={nestLevel + 1}
|
||||
materialFilter={materialFilter}
|
||||
selectedTagId={selectedTagId}
|
||||
openTags={openTags}
|
||||
setOpenTags={setOpenTags}
|
||||
onChildren={onChildren}/>))}
|
||||
</ul>)}
|
||||
</>)
|
||||
}
|
||||
|
||||
|
||||
const MobileMaterialTreeNode: FC<{ depth?: number
|
||||
availableInlineSizePx?: number | null
|
||||
materialFilter: MaterialFilter
|
||||
selectedTagId: number | null
|
||||
onChildren: (tagId: number, children: MaterialSidebarTag[]) =>
|
||||
void
|
||||
openTags: Record<number, boolean>
|
||||
setOpenTags: Dispatch<SetStateAction<Record<number, boolean>>>
|
||||
tag: MaterialSidebarTag }> = (
|
||||
{
|
||||
depth = 0,
|
||||
availableInlineSizePx = null,
|
||||
materialFilter,
|
||||
onChildren,
|
||||
openTags,
|
||||
selectedTagId,
|
||||
setOpenTags,
|
||||
tag,
|
||||
},
|
||||
) => {
|
||||
const open = Boolean (openTags[tag.id])
|
||||
const tagColumnRef = useRef<HTMLDivElement | null> (null)
|
||||
const chipRef = useRef<HTMLDivElement | null> (null)
|
||||
const buttonRef = useRef<HTMLButtonElement | null> (null)
|
||||
const expansionSlotRef = useRef<HTMLDivElement | null> (null)
|
||||
const expansionBorderRef = useRef<HTMLDivElement | null> (null)
|
||||
const [tagChipInlineSizePx, setTagChipInlineSizePx] = useState<number | null> (null)
|
||||
const [tagLinkInlineSizePx, setTagLinkInlineSizePx] = useState<number | null> (null)
|
||||
const [childAvailableInlineSizePx, setChildAvailableInlineSizePx] = useState<number | null> (null)
|
||||
const { data } = useQuery ({
|
||||
queryKey: materialsKeys.tree ({ parentId: tag.id, materialFilter }),
|
||||
queryFn: () => fetchMaterialTagTree ({ parentId: tag.id, materialFilter }),
|
||||
enabled: open && tag.hasChildren && tag.children.length === 0})
|
||||
|
||||
useEffect (() => {
|
||||
if (open && data && tag.children.length === 0)
|
||||
onChildren (tag.id, data)
|
||||
}, [data, onChildren, open, tag.children.length, tag.id])
|
||||
|
||||
useEffect (() => {
|
||||
const tagColumn = tagColumnRef.current
|
||||
const chip = chipRef.current
|
||||
if (!(tagColumn) || !(chip))
|
||||
return
|
||||
|
||||
const updateTagInlineSize = () => {
|
||||
const buttonHeight = buttonRef.current?.offsetHeight ?? 0
|
||||
const gap = tag.hasChildren ? px (window.getComputedStyle (tagColumn).rowGap) : 0
|
||||
const columnHeight =
|
||||
availableInlineSizePx == null
|
||||
? tagColumn.clientHeight
|
||||
: Math.min (tagColumn.clientHeight, availableInlineSizePx)
|
||||
const nextChipInlineSize = Math.max (24, columnHeight - buttonHeight - gap)
|
||||
const nextLinkInlineSize = Math.max (
|
||||
16,
|
||||
nextChipInlineSize - verticalChrome (chip),
|
||||
)
|
||||
|
||||
setTagChipInlineSizePx (prev => prev === nextChipInlineSize ? prev : nextChipInlineSize)
|
||||
setTagLinkInlineSizePx (prev => prev === nextLinkInlineSize ? prev : nextLinkInlineSize)
|
||||
}
|
||||
|
||||
updateTagInlineSize ()
|
||||
|
||||
const resizeObserver = new ResizeObserver (() => {
|
||||
updateTagInlineSize ()
|
||||
})
|
||||
|
||||
resizeObserver.observe (tagColumn)
|
||||
resizeObserver.observe (chip)
|
||||
|
||||
if (buttonRef.current)
|
||||
resizeObserver.observe (buttonRef.current)
|
||||
|
||||
return () => {
|
||||
resizeObserver.disconnect ()
|
||||
}
|
||||
}, [availableInlineSizePx, open, tag.hasChildren, tag.children.length])
|
||||
|
||||
useEffect (() => {
|
||||
const expansionSlot = expansionSlotRef.current
|
||||
const expansionBorder = expansionBorderRef.current
|
||||
if (!(expansionSlot) || !(expansionBorder))
|
||||
return
|
||||
|
||||
const updateChildInlineSize = () => {
|
||||
const base =
|
||||
availableInlineSizePx == null
|
||||
? expansionSlot.clientHeight
|
||||
: availableInlineSizePx
|
||||
const chrome = verticalChrome (expansionSlot) + verticalChrome (expansionBorder)
|
||||
const nextInlineSize = Math.max (24, base - chrome)
|
||||
setChildAvailableInlineSizePx (prev => prev === nextInlineSize ? prev : nextInlineSize)
|
||||
}
|
||||
|
||||
updateChildInlineSize ()
|
||||
|
||||
const resizeObserver = new ResizeObserver (() => {
|
||||
updateChildInlineSize ()
|
||||
})
|
||||
|
||||
resizeObserver.observe (expansionSlot)
|
||||
resizeObserver.observe (expansionBorder)
|
||||
|
||||
return () => {
|
||||
resizeObserver.disconnect ()
|
||||
}
|
||||
}, [availableInlineSizePx, open, tag.children.length])
|
||||
|
||||
return (
|
||||
<div className="flex h-full min-h-0 max-h-full flex-row-reverse items-start gap-2
|
||||
overflow-hidden">
|
||||
<div
|
||||
ref={tagColumnRef}
|
||||
className="flex h-full min-h-0 max-h-full flex-col items-center gap-1
|
||||
overflow-hidden">
|
||||
<div
|
||||
ref={chipRef}
|
||||
className={cn (
|
||||
tagSelectionShellClass (selectedTagId === tag.id),
|
||||
'box-border rounded-xl border px-3 py-2 text-sm shadow-sm',
|
||||
'min-h-0 overflow-hidden [max-inline-size:var(--tag-chip-inline-size)]',
|
||||
'[max-height:var(--tag-chip-inline-size)]',
|
||||
)}
|
||||
style={{
|
||||
writingMode: 'vertical-rl',
|
||||
'--tag-chip-inline-size': (
|
||||
tagChipInlineSizePx == null
|
||||
? undefined
|
||||
: `${ tagChipInlineSizePx }px`),
|
||||
'--tag-link-inline-size': (
|
||||
tagLinkInlineSizePx == null
|
||||
? undefined
|
||||
: `${ tagLinkInlineSizePx }px`),
|
||||
} as CSSProperties}>
|
||||
<TagLink
|
||||
tag={sidebarTagToTag (tag)}
|
||||
title={tag.name}
|
||||
withCount={false}
|
||||
withWiki={false}
|
||||
to={materialPath (tag.id, materialFilter)}
|
||||
className="block overflow-hidden text-ellipsis whitespace-nowrap
|
||||
[max-inline-size:var(--tag-link-inline-size)]
|
||||
[max-height:var(--tag-link-inline-size)]"/>
|
||||
</div>
|
||||
{tag.hasChildren && (
|
||||
<button
|
||||
ref={buttonRef}
|
||||
type="button"
|
||||
onClick={() => setOpenTags (prev => ({ ...prev, [tag.id]: !prev[tag.id] }))}
|
||||
className="flex-none rounded-full border border-stone-300 bg-white
|
||||
px-2 py-0.5 text-sm text-stone-700 dark:border-stone-700
|
||||
dark:bg-stone-900 dark:text-stone-100">
|
||||
{open ? <>−</> : '+'}
|
||||
</button>)}
|
||||
</div>
|
||||
{open && tag.children.length > 0 && (
|
||||
<div
|
||||
ref={expansionSlotRef}
|
||||
className={cn (
|
||||
'h-full min-h-0 max-h-full overflow-hidden box-border',
|
||||
depth === 0 ? 'pt-5' : 'pt-3')}>
|
||||
<div
|
||||
ref={expansionBorderRef}
|
||||
className="relative max-h-full overflow-hidden rounded-2xl border border-stone-200
|
||||
bg-stone-100/70 py-2 pl-2 pr-2 text-stone-900
|
||||
dark:border-stone-700 dark:bg-stone-900/70 dark:text-stone-100">
|
||||
<div className="flex h-full min-h-0 max-h-full flex-row-reverse items-start gap-2
|
||||
overflow-hidden">
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="absolute -right-3 top-4 h-px w-3 bg-stone-300 dark:bg-stone-600"/>
|
||||
{tag.children.map (child => (
|
||||
<div
|
||||
key={child.id}
|
||||
className="relative h-full min-h-0 max-h-full overflow-hidden">
|
||||
<MobileMaterialTreeNode
|
||||
tag={child}
|
||||
depth={depth + 1}
|
||||
availableInlineSizePx={childAvailableInlineSizePx}
|
||||
materialFilter={materialFilter}
|
||||
selectedTagId={selectedTagId}
|
||||
openTags={openTags}
|
||||
setOpenTags={setOpenTags}
|
||||
onChildren={onChildren}/>
|
||||
</div>))}
|
||||
</div>
|
||||
</div>
|
||||
</div>)}
|
||||
</div>)
|
||||
}
|
||||
|
||||
|
||||
const MaterialSidebar: FC = () => {
|
||||
const location = useLocation ()
|
||||
const navigate = useNavigate ()
|
||||
const qs = new URLSearchParams (location.search)
|
||||
const materialFilter = parseMaterialFilter (qs.get ('material_filter'), 'any')
|
||||
const selectedTagId = Number (qs.get ('tag_id') ?? 0) || null
|
||||
|
||||
const [desktopTags, setDesktopTags] = useState<MaterialSidebarTag[]> ([])
|
||||
const [openTags, setOpenTags] = useState<Record<number, boolean>> ({ })
|
||||
const mobileRailRef = useRef<HTMLDivElement | null> (null)
|
||||
const [mobileAvailableInlineSizePx, setMobileAvailableInlineSizePx] =
|
||||
useState<number | null> (null)
|
||||
|
||||
const { data: rootTags = [], isLoading, isError } = useQuery ({
|
||||
queryKey: materialsKeys.tree ({ parentId: null, materialFilter }),
|
||||
queryFn: () => fetchMaterialTagTree ({ parentId: null, materialFilter })})
|
||||
|
||||
useEffect (() => {
|
||||
setDesktopTags (rootTags)
|
||||
}, [rootTags])
|
||||
|
||||
useEffect (() => {
|
||||
const el = mobileRailRef.current
|
||||
if (!(el))
|
||||
return
|
||||
|
||||
requestAnimationFrame (() => {
|
||||
el.scrollLeft = el.scrollWidth
|
||||
})
|
||||
}, [rootTags, materialFilter])
|
||||
|
||||
useEffect (() => {
|
||||
const el = mobileRailRef.current
|
||||
if (!(el))
|
||||
return
|
||||
|
||||
const updateAvailableInlineSize = () => {
|
||||
const nextInlineSize = Math.max (24, el.clientHeight)
|
||||
setMobileAvailableInlineSizePx (prev => prev === nextInlineSize ? prev : nextInlineSize)
|
||||
}
|
||||
|
||||
updateAvailableInlineSize ()
|
||||
|
||||
const resizeObserver = new ResizeObserver (() => {
|
||||
updateAvailableInlineSize ()
|
||||
})
|
||||
|
||||
resizeObserver.observe (el)
|
||||
|
||||
return () => {
|
||||
resizeObserver.disconnect ()
|
||||
}
|
||||
}, [rootTags, materialFilter])
|
||||
|
||||
const visibleRootTags = desktopTags.length > 0 ? desktopTags : rootTags
|
||||
|
||||
const setChildren = (tagId: number, children: MaterialSidebarTag[]) => {
|
||||
setDesktopTags (prev => {
|
||||
const base = prev.length > 0 ? prev : rootTags
|
||||
return setChildrenById (base, tagId, children)
|
||||
})
|
||||
}
|
||||
|
||||
const handleFilterChange = (value: MaterialFilter) => {
|
||||
setDesktopTags ([])
|
||||
setOpenTags ({ })
|
||||
updateMaterialFilterQuery (location.pathname, location.search, navigate, value)
|
||||
}
|
||||
|
||||
const renderDesktopTree = (tags: MaterialSidebarTag[]): ReactNode => (
|
||||
tags.map (tag => (
|
||||
<MaterialTreeNode
|
||||
key={tag.id}
|
||||
tag={tag}
|
||||
materialFilter={materialFilter}
|
||||
selectedTagId={selectedTagId}
|
||||
openTags={openTags}
|
||||
setOpenTags={setOpenTags}
|
||||
onChildren={setChildren}/>)))
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="border-b bg-stone-50 p-3 dark:border-stone-700 dark:bg-stone-950
|
||||
dark:text-stone-100 md:hidden flex h-[25dvh] min-h-0 flex-col
|
||||
overflow-hidden">
|
||||
<MaterialFilterButtons
|
||||
materialFilter={materialFilter}
|
||||
onChange={handleFilterChange}/>
|
||||
<div
|
||||
ref={mobileRailRef}
|
||||
className="mt-3 min-h-0 flex-1 overflow-x-auto overflow-y-hidden">
|
||||
<div className="flex min-w-max flex-row-reverse items-start gap-3 pb-1 h-full
|
||||
min-h-0 max-h-full">
|
||||
{visibleRootTags.map (tag => (
|
||||
<MobileMaterialTreeNode
|
||||
key={tag.id}
|
||||
tag={tag}
|
||||
availableInlineSizePx={mobileAvailableInlineSizePx}
|
||||
materialFilter={materialFilter}
|
||||
selectedTagId={selectedTagId}
|
||||
openTags={openTags}
|
||||
setOpenTags={setOpenTags}
|
||||
onChildren={setChildren}/>))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="hidden md:block">
|
||||
<SidebarComponent>
|
||||
<div className="space-y-4">
|
||||
<MaterialFilterButtons
|
||||
materialFilter={materialFilter}
|
||||
onChange={handleFilterChange}/>
|
||||
{isLoading && (
|
||||
<p className="text-sm text-neutral-500 dark:text-stone-400">読込中……</p>)}
|
||||
{isError && (
|
||||
<p className="text-sm text-red-600 dark:text-red-300">
|
||||
タグ一覧の取得に失敗しました．
|
||||
</p>)}
|
||||
{(!isLoading && !isError) && (
|
||||
<ul>
|
||||
{renderDesktopTree (visibleRootTags)}
|
||||
</ul>)}
|
||||
</div>
|
||||
</SidebarComponent>
|
||||
</div>
|
||||
</>)
|
||||
}
|
||||
|
||||
|
||||
export default MaterialSidebar
|
||||
|
||||
@@ -107,8 +107,7 @@ export default forwardRef ((props: Props, ref: ForwardedRef<NiconicoViewerHandle
|
||||
loadCompleteTimerRef.current = setTimeout (() => {
|
||||
onError?.({
|
||||
eventName: 'loadCompleteTimeout',
|
||||
reason: 'niconico video length was not reported by embed',
|
||||
})
|
||||
reason: 'niconico video length was not reported by embed'})
|
||||
}, LOAD_COMPLETE_TIMEOUT_MS)
|
||||
}, [clearLoadCompleteTimer, onError])
|
||||
|
||||
|
||||
@@ -19,8 +19,7 @@ const PostOriginalCreatedTimeField: FC<Props> = (
|
||||
setOriginalCreatedFrom,
|
||||
originalCreatedBefore,
|
||||
setOriginalCreatedBefore,
|
||||
errors }: Props,
|
||||
) => (
|
||||
errors }: Props) => (
|
||||
<FormField label="オリジナルの作成日時" messages={errors}>
|
||||
{({ describedBy, invalid }) => (
|
||||
<>
|
||||
|
||||
@@ -37,8 +37,7 @@ const renderTagTree = (
|
||||
path: string,
|
||||
suppressClickRef: MutableRefObject<boolean>,
|
||||
parentTagId?: number,
|
||||
sp?: boolean,
|
||||
): ReactNode[] => {
|
||||
sp?: boolean): ReactNode[] => {
|
||||
const key = `${ path }-${ tag.id }`
|
||||
|
||||
const self = (
|
||||
@@ -64,8 +63,7 @@ const renderTagTree = (
|
||||
|
||||
const isDescendant = (
|
||||
root: Tag,
|
||||
targetId: number,
|
||||
): boolean => {
|
||||
targetId: number): boolean => {
|
||||
if (!(root.children))
|
||||
return false
|
||||
|
||||
@@ -83,8 +81,7 @@ const isDescendant = (
|
||||
|
||||
const findTag = (
|
||||
byCat: TagByCategory,
|
||||
id: number,
|
||||
): Tag | undefined => {
|
||||
id: number): Tag | undefined => {
|
||||
const walk = (nodes: Tag[]): Tag | undefined => {
|
||||
for (const t of nodes)
|
||||
{
|
||||
@@ -130,8 +127,7 @@ const buildTagByCategory = (post: Post): TagByCategory => {
|
||||
|
||||
const changeCategory = async (
|
||||
tagId: number,
|
||||
category: Category,
|
||||
): Promise<void> => {
|
||||
category: Category): Promise<void> => {
|
||||
await apiPatch (`/tags/${ tagId }`, { category })
|
||||
}
|
||||
|
||||
@@ -294,8 +290,7 @@ const TagDetailSidebar: FC<Props> = ({ post, sp }) => {
|
||||
addEventListener ('click', e => {
|
||||
e.preventDefault ()
|
||||
e.stopPropagation ()
|
||||
suppressClickRef.current = false
|
||||
}, { capture: true, once: true })
|
||||
suppressClickRef.current = false}, { capture: true, once: true })
|
||||
}}
|
||||
onDragCancel={() => {
|
||||
setActiveTagId (null)
|
||||
|
||||
@@ -28,11 +28,12 @@ type Props =
|
||||
|
||||
|
||||
const TagLink: FC<Props> = ({ tag,
|
||||
nestLevel = 0,
|
||||
linkFlg = true,
|
||||
withWiki = true,
|
||||
withCount = true,
|
||||
...props }) => {
|
||||
nestLevel = 0,
|
||||
linkFlg = true,
|
||||
withWiki = true,
|
||||
withCount = true,
|
||||
className,
|
||||
...props }) => {
|
||||
const spanClass = cn (
|
||||
`text-${ TAG_COLOUR[tag.category] }-${ LIGHT_COLOUR_SHADE }`,
|
||||
`dark:text-${ TAG_COLOUR[tag.category] }-${ DARK_COLOUR_SHADE }`)
|
||||
@@ -105,7 +106,7 @@ const TagLink: FC<Props> = ({ tag,
|
||||
</span>)}
|
||||
{tag.matchedAlias != null && (
|
||||
<>
|
||||
<span className={spanClass} {...props}>
|
||||
<span className={cn (spanClass, className)} {...props}>
|
||||
{tag.matchedAlias}
|
||||
</span>
|
||||
<> → </>
|
||||
@@ -114,12 +115,12 @@ const TagLink: FC<Props> = ({ tag,
|
||||
? (
|
||||
<PrefetchLink
|
||||
to={`/posts?${ (new URLSearchParams ({ tags: tag.name })).toString () }`}
|
||||
className={linkClass}
|
||||
className={cn (linkClass, className)}
|
||||
{...props}>
|
||||
{tag.name}
|
||||
</PrefetchLink>)
|
||||
: (
|
||||
<span className={spanClass}
|
||||
<span className={cn (spanClass, className)}
|
||||
{...props}>
|
||||
{tag.name}
|
||||
</span>)}
|
||||
|
||||
@@ -7,30 +7,36 @@ import Separator from '@/components/MenuSeparator'
|
||||
import PrefetchLink from '@/components/PrefetchLink'
|
||||
import TopNavUser from '@/components/TopNavUser'
|
||||
import { WikiIdBus } from '@/lib/eventBus/WikiIdBus'
|
||||
import { tagsKeys, wikiKeys } from '@/lib/queryKeys'
|
||||
import { materialsKeys, tagsKeys, wikiKeys } from '@/lib/queryKeys'
|
||||
import { fetchTag, fetchTagByName } from '@/lib/tags'
|
||||
import { fetchMaterial } from '@/lib/materials'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { fetchWikiPage } from '@/lib/wiki'
|
||||
|
||||
import type { FC, MouseEvent } from 'react'
|
||||
|
||||
import type { Menu, MenuVisibleItem, Tag, User } from '@/types'
|
||||
import type { Material, Menu, MenuVisibleItem, Tag, User } from '@/types'
|
||||
|
||||
type Props = { user: User | null }
|
||||
|
||||
|
||||
export const menuOutline = ({ tag, wikiId, user, pathName }: {
|
||||
tag?: Tag | null
|
||||
wikiId: number | null
|
||||
user: User | null,
|
||||
pathName: string }): Menu => {
|
||||
const postCount = tag?.postCount ?? 0
|
||||
export const menuOutline = (
|
||||
{ tag, material, wikiId, user, pathName }: {
|
||||
tag?: Tag | null
|
||||
material?: Material | null
|
||||
wikiId: number | null
|
||||
user: User | null,
|
||||
pathName: string },
|
||||
): Menu => {
|
||||
const postCount = tag?.postCount ?? material?.tag?.postCount ?? 0
|
||||
|
||||
const wikiPageFlg = Boolean (/^\/wiki\/(?!new|changes)[^/]+/.test (pathName) && wikiId)
|
||||
const wikiTitle = pathName.split ('/')[2] ?? ''
|
||||
|
||||
const tagFlg = /^\/tags\/\d+/.test (pathName)
|
||||
|
||||
const materialFlg = /^\/materials\/\d+/.test (pathName)
|
||||
|
||||
return [
|
||||
{ name: '広場', to: '/posts', subMenu: [
|
||||
{ name: '一覧', to: '/posts' },
|
||||
@@ -49,12 +55,18 @@ export const menuOutline = ({ tag, wikiId, user, pathName }: {
|
||||
visible: tagFlg },
|
||||
{ name: '履歴', to: `/tags/changes?id=${ tag?.id }`,
|
||||
visible: tagFlg && tag?.category !== 'nico' }] },
|
||||
{ name: '素材', to: '/materials', visible: false, subMenu: [
|
||||
{ name: '素材', to: '/materials', visible: true, subMenu: [
|
||||
{ name: '一覧', to: '/materials' },
|
||||
{ name: '検索', to: '/materials/search', visible: false },
|
||||
{ name: '追加', to: '/materials/new' },
|
||||
{ name: '全体履歴', to: '/materials/changes', visible: false },
|
||||
{ name: 'ヘルプ', to: '/wiki/ヘルプ:素材集' }] },
|
||||
{ name: '抑止', to: '/materials/suppressions' },
|
||||
{ name: '全体履歴', to: '/materials/changes' },
|
||||
{ name: 'ヘルプ', to: '/wiki/ヘルプ:素材管理' },
|
||||
{ component: <Separator/>, visible: materialFlg },
|
||||
{ name: `広場 (${ postCount || 0 })`,
|
||||
to: `/posts?tags=${ encodeURIComponent (material?.tag?.name ?? '') }`,
|
||||
visible: materialFlg && Boolean (material?.tag) },
|
||||
{ name: '履歴', to: `/materials/changes?material_id=${ material?.id }`,
|
||||
visible: materialFlg }] },
|
||||
{ name: 'Wiki', to: '/wiki/ヘルプ:ホーム', base: '/wiki', subMenu: [
|
||||
{ name: '検索', to: '/wiki' },
|
||||
{ name: '新規', to: '/wiki/new' },
|
||||
@@ -119,15 +131,23 @@ const TopNav: FC<Props> = ({ user }) => {
|
||||
queryFn: () => fetchWikiPage (wikiIdStr, { }) })
|
||||
|
||||
const tagFlg = /^\/tags\/\d+/.test (location.pathname)
|
||||
const effectiveTitle = (tagFlg ? location.pathname.split ('/')[2] : wikiPage?.title) ?? ''
|
||||
const materialFlg = /^\/materials\/\d+/.test (location.pathname)
|
||||
const effectiveTitle = (((tagFlg || materialFlg)
|
||||
? location.pathname.split ('/')[2]
|
||||
: wikiPage?.title)
|
||||
?? '')
|
||||
|
||||
const { data: tag } = useQuery ({
|
||||
enabled: Boolean (effectiveTitle),
|
||||
queryKey: tagsKeys.show (effectiveTitle),
|
||||
queryFn: () => (tagFlg ? fetchTag : fetchTagByName) (effectiveTitle) })
|
||||
|
||||
const { data: material } = useQuery ({
|
||||
enabled: Boolean (effectiveTitle),
|
||||
queryKey: materialsKeys.show (effectiveTitle),
|
||||
queryFn: () => fetchMaterial (effectiveTitle) })
|
||||
|
||||
const menu = menuOutline ({ tag, wikiId, user, pathName: location.pathname })
|
||||
const menu = menuOutline ({ tag, material, wikiId, user, pathName: location.pathname })
|
||||
const visibleMenu = menu.filter ((item): item is MenuVisibleItem => item.visible ?? true)
|
||||
const moreMenu = menu.filter (item =>
|
||||
!(item.visible ?? true)
|
||||
|
||||
@@ -1,12 +1,14 @@
|
||||
import React from 'react'
|
||||
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
import type { FC } from 'react'
|
||||
|
||||
type Props = { children: React.ReactNode }
|
||||
type Props = { children: React.ReactNode; className?: string }
|
||||
|
||||
|
||||
const PageTitle: FC<Props> = ({ children }) => (
|
||||
<h1 className="text-2xl font-bold mb-2">
|
||||
const PageTitle: FC<Props> = ({ children, className, ...rest }) => (
|
||||
<h1 className={cn ('text-2xl font-bold mb-2', className)} {...rest}>
|
||||
{children}
|
||||
</h1>)
|
||||
|
||||
|
||||
@@ -16,8 +16,7 @@ const range = (start: number, end: number): number[] =>
|
||||
const getPages = (
|
||||
page: number,
|
||||
total: number,
|
||||
siblingCount: number,
|
||||
): (number | '…')[] => {
|
||||
siblingCount: number): (number | '…')[] => {
|
||||
if (total <= 1)
|
||||
return [1]
|
||||
|
||||
|
||||
@@ -103,8 +103,7 @@ const DialogueProvider: FC<Props> = ({ children }) => {
|
||||
choice: options => new Promise (resolve => {
|
||||
push ({ kind: 'choice',
|
||||
options: options as ChoiceOptions<string>,
|
||||
resolve: resolve as (value: string | null) => void })
|
||||
}) }), [push])
|
||||
resolve: resolve as (value: string | null) => void })}) }), [push])
|
||||
|
||||
const active = queue[0]
|
||||
|
||||
|
||||
@@ -10,41 +10,35 @@ const buttonVariants = cva (
|
||||
'rounded-md text-sm font-medium transition-colors',
|
||||
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400',
|
||||
'disabled:pointer-events-none disabled:opacity-50',
|
||||
'[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
|
||||
].join (' '),
|
||||
'[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0'].join (' '),
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
'bg-slate-900 text-white hover:bg-slate-700 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-300',
|
||||
default:
|
||||
'bg-slate-900 text-white hover:bg-slate-700 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-300',
|
||||
|
||||
destructive:
|
||||
'bg-red-600 text-white hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-600',
|
||||
destructive:
|
||||
'bg-red-600 text-white hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-600',
|
||||
|
||||
outline:
|
||||
'border border-slate-300 bg-white text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800',
|
||||
outline:
|
||||
'border border-slate-300 bg-white text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800',
|
||||
|
||||
secondary:
|
||||
'bg-slate-100 text-slate-900 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700',
|
||||
secondary:
|
||||
'bg-slate-100 text-slate-900 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700',
|
||||
|
||||
ghost:
|
||||
'text-slate-900 hover:bg-slate-100 dark:text-slate-100 dark:hover:bg-slate-800',
|
||||
ghost:
|
||||
'text-slate-900 hover:bg-slate-100 dark:text-slate-100 dark:hover:bg-slate-800',
|
||||
|
||||
link:
|
||||
'text-blue-700 underline-offset-4 hover:underline dark:text-blue-300',
|
||||
},
|
||||
link:
|
||||
'text-blue-700 underline-offset-4 hover:underline dark:text-blue-300'},
|
||||
size: {
|
||||
default: 'h-10 px-4 py-2',
|
||||
sm: 'h-9 rounded-md px-3',
|
||||
lg: 'h-11 rounded-md px-8',
|
||||
icon: 'h-10 w-10',
|
||||
},
|
||||
},
|
||||
default: 'h-10 px-4 py-2',
|
||||
sm: 'h-9 rounded-md px-3',
|
||||
lg: 'h-11 rounded-md px-8',
|
||||
icon: 'h-10 w-10'}},
|
||||
defaultVariants: {
|
||||
variant: 'default',
|
||||
size: 'default',
|
||||
},
|
||||
})
|
||||
size: 'default'}})
|
||||
|
||||
export interface ButtonProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||
@@ -57,13 +51,11 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
const Comp = asChild ? Slot : "button"
|
||||
return (
|
||||
<Comp
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
)
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>)
|
||||
})
|
||||
Button.displayName = "Button"
|
||||
|
||||
export { Button, buttonVariants }
|
||||
|
||||
@@ -22,11 +22,9 @@ const DialogOverlay = React.forwardRef<
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
||||
className
|
||||
)}
|
||||
className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
/>))
|
||||
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
|
||||
|
||||
const DialogContent = React.forwardRef<
|
||||
@@ -62,8 +60,7 @@ const DialogContent = React.forwardRef<
|
||||
<span className="sr-only">閉ぢる</span>
|
||||
</DialogPrimitive.Close>
|
||||
</DialogPrimitive.Content>
|
||||
</DialogPortal>
|
||||
))
|
||||
</DialogPortal>))
|
||||
DialogContent.displayName = DialogPrimitive.Content.displayName
|
||||
|
||||
const DialogHeader = ({
|
||||
@@ -73,11 +70,9 @@ const DialogHeader = ({
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col space-y-1.5 text-center sm:text-left",
|
||||
className
|
||||
)}
|
||||
className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
/>)
|
||||
DialogHeader.displayName = "DialogHeader"
|
||||
|
||||
const DialogFooter = ({
|
||||
@@ -87,11 +82,9 @@ const DialogFooter = ({
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
||||
className
|
||||
)}
|
||||
className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
/>)
|
||||
DialogFooter.displayName = "DialogFooter"
|
||||
|
||||
const DialogTitle = React.forwardRef<
|
||||
@@ -102,11 +95,9 @@ const DialogTitle = React.forwardRef<
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"text-lg font-semibold leading-none tracking-tight",
|
||||
className
|
||||
)}
|
||||
className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
/>))
|
||||
DialogTitle.displayName = DialogPrimitive.Title.displayName
|
||||
|
||||
const DialogDescription = React.forwardRef<
|
||||
@@ -117,8 +108,7 @@ const DialogDescription = React.forwardRef<
|
||||
ref={ref}
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
/>))
|
||||
DialogDescription.displayName = DialogPrimitive.Description.displayName
|
||||
|
||||
export {
|
||||
|
||||
@@ -1,22 +1,19 @@
|
||||
import * as React from "react"
|
||||
import * as React from 'react'
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
|
||||
const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
|
||||
({ className, type, ...props }, ref) => {
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
className={cn(
|
||||
"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
)
|
||||
Input.displayName = "Input"
|
||||
type={type}
|
||||
className={cn(
|
||||
'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
|
||||
className)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>)
|
||||
})
|
||||
Input.displayName = 'Input'
|
||||
|
||||
export { Input }
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
"use client"
|
||||
'use client'
|
||||
|
||||
import * as React from "react"
|
||||
import * as SwitchPrimitives from "@radix-ui/react-switch"
|
||||
import * as React from 'react'
|
||||
import * as SwitchPrimitives from '@radix-ui/react-switch'
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const Switch = React.forwardRef<
|
||||
React.ElementRef<typeof SwitchPrimitives.Root>,
|
||||
@@ -11,19 +11,16 @@ const Switch = React.forwardRef<
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SwitchPrimitives.Root
|
||||
className={cn(
|
||||
"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
|
||||
className
|
||||
)}
|
||||
'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
|
||||
className)}
|
||||
{...props}
|
||||
ref={ref}
|
||||
>
|
||||
<SwitchPrimitives.Thumb
|
||||
className={cn(
|
||||
"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
|
||||
)}
|
||||
'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0')}
|
||||
/>
|
||||
</SwitchPrimitives.Root>
|
||||
))
|
||||
</SwitchPrimitives.Root>))
|
||||
Switch.displayName = SwitchPrimitives.Root.displayName
|
||||
|
||||
export { Switch }
|
||||
|
||||
+115
-129
@@ -1,129 +1,115 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as ToastPrimitives from "@radix-ui/react-toast"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { X } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const ToastProvider = ToastPrimitives.Provider
|
||||
|
||||
const ToastViewport = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Viewport>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Viewport
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
ToastViewport.displayName = ToastPrimitives.Viewport.displayName
|
||||
|
||||
const toastVariants = cva(
|
||||
"group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "border bg-background text-foreground",
|
||||
destructive:
|
||||
"destructive group border-destructive bg-destructive text-destructive-foreground",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
const Toast = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
|
||||
VariantProps<typeof toastVariants>
|
||||
>(({ className, variant, ...props }, ref) => {
|
||||
return (
|
||||
<ToastPrimitives.Root
|
||||
ref={ref}
|
||||
className={cn(toastVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
})
|
||||
Toast.displayName = ToastPrimitives.Root.displayName
|
||||
|
||||
const ToastAction = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Action>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Action
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
ToastAction.displayName = ToastPrimitives.Action.displayName
|
||||
|
||||
const ToastClose = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Close>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Close
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
|
||||
className
|
||||
)}
|
||||
toast-close=""
|
||||
{...props}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</ToastPrimitives.Close>
|
||||
))
|
||||
ToastClose.displayName = ToastPrimitives.Close.displayName
|
||||
|
||||
const ToastTitle = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Title>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Title
|
||||
ref={ref}
|
||||
className={cn("text-sm font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
ToastTitle.displayName = ToastPrimitives.Title.displayName
|
||||
|
||||
const ToastDescription = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Description>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Description
|
||||
ref={ref}
|
||||
className={cn("text-sm opacity-90", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
ToastDescription.displayName = ToastPrimitives.Description.displayName
|
||||
|
||||
type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
|
||||
|
||||
type ToastActionElement = React.ReactElement<typeof ToastAction>
|
||||
|
||||
export {
|
||||
type ToastProps,
|
||||
type ToastActionElement,
|
||||
ToastProvider,
|
||||
ToastViewport,
|
||||
Toast,
|
||||
ToastTitle,
|
||||
ToastDescription,
|
||||
ToastClose,
|
||||
ToastAction,
|
||||
}
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as ToastPrimitives from "@radix-ui/react-toast"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { X } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const ToastProvider = ToastPrimitives.Provider
|
||||
|
||||
const ToastViewport = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Viewport>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Viewport
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
ToastViewport.displayName = ToastPrimitives.Viewport.displayName
|
||||
|
||||
const toastVariants = cva(
|
||||
"group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "border bg-background text-foreground",
|
||||
destructive:
|
||||
"destructive group border-destructive bg-destructive text-destructive-foreground",
|
||||
},
|
||||
},
|
||||
defaultVariants: { variant: "default" } }
|
||||
)
|
||||
|
||||
const Toast = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
|
||||
VariantProps<typeof toastVariants>
|
||||
>(({ className, variant, ...props }, ref) => {
|
||||
return (
|
||||
<ToastPrimitives.Root
|
||||
ref={ref}
|
||||
className={cn(toastVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
})
|
||||
Toast.displayName = ToastPrimitives.Root.displayName
|
||||
|
||||
const ToastAction = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Action>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Action
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
ToastAction.displayName = ToastPrimitives.Action.displayName
|
||||
|
||||
const ToastClose = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Close>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Close
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
|
||||
className
|
||||
)}
|
||||
toast-close=""
|
||||
{...props}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</ToastPrimitives.Close>
|
||||
))
|
||||
ToastClose.displayName = ToastPrimitives.Close.displayName
|
||||
|
||||
const ToastTitle = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Title>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Title
|
||||
ref={ref}
|
||||
className={cn("text-sm font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
ToastTitle.displayName = ToastPrimitives.Title.displayName
|
||||
|
||||
const ToastDescription = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Description>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Description
|
||||
ref={ref}
|
||||
className={cn("text-sm opacity-90", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
ToastDescription.displayName = ToastPrimitives.Description.displayName
|
||||
|
||||
type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
|
||||
|
||||
type ToastActionElement = React.ReactElement<typeof ToastAction>
|
||||
|
||||
|
||||
@@ -1,31 +1,30 @@
|
||||
'use client'
|
||||
|
||||
import { useToast } from '@/components/ui/use-toast'
|
||||
import { Toast,
|
||||
ToastClose,
|
||||
ToastDescription,
|
||||
ToastProvider,
|
||||
ToastTitle,
|
||||
ToastViewport } from '@/components/ui/toast'
|
||||
|
||||
|
||||
export const Toaster = () => {
|
||||
const { toasts } = useToast ()
|
||||
|
||||
return (
|
||||
<ToastProvider>
|
||||
{toasts.map (({ id, title, description, action, ...props }) => (
|
||||
<Toast key={id}
|
||||
className="bg-gray-300/80 dark:bg-gray-700/80"
|
||||
{...props}>
|
||||
<div className="grid gap-1">
|
||||
{title && <ToastTitle>{title}</ToastTitle>}
|
||||
{description && <ToastDescription>{description}</ToastDescription>}
|
||||
</div>
|
||||
{action}
|
||||
<ToastClose />
|
||||
</Toast>))}
|
||||
<ToastViewport />
|
||||
</ToastProvider>
|
||||
)
|
||||
}
|
||||
'use client'
|
||||
|
||||
import { useToast } from '@/components/ui/use-toast'
|
||||
import { Toast,
|
||||
ToastClose,
|
||||
ToastDescription,
|
||||
ToastProvider,
|
||||
ToastTitle,
|
||||
ToastViewport } from '@/components/ui/toast'
|
||||
|
||||
|
||||
export const Toaster = () => {
|
||||
const { toasts } = useToast ()
|
||||
|
||||
return (
|
||||
<ToastProvider>
|
||||
{toasts.map (({ id, title, description, action, ...props }) => (
|
||||
<Toast key={id}
|
||||
className="bg-gray-300/80 dark:bg-gray-700/80"
|
||||
{...props}>
|
||||
<div className="grid gap-1">
|
||||
{title && <ToastTitle>{title}</ToastTitle>}
|
||||
{description && <ToastDescription>{description}</ToastDescription>}
|
||||
</div>
|
||||
{action}
|
||||
<ToastClose />
|
||||
</Toast>))}
|
||||
<ToastViewport />
|
||||
</ToastProvider>
|
||||
)
|
||||
|
||||
@@ -58,8 +58,7 @@ const addToRemoveQueue = (toastId: string) => {
|
||||
toastTimeouts.delete(toastId)
|
||||
dispatch({
|
||||
type: "REMOVE_TOAST",
|
||||
toastId: toastId,
|
||||
})
|
||||
toastId: toastId})
|
||||
}, TOAST_REMOVE_DELAY)
|
||||
|
||||
toastTimeouts.set(toastId, timeout)
|
||||
@@ -69,17 +68,14 @@ export const reducer = (state: State, action: Action): State => {
|
||||
switch (action.type) {
|
||||
case "ADD_TOAST":
|
||||
return {
|
||||
...state,
|
||||
toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
|
||||
}
|
||||
...state,
|
||||
toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT)}
|
||||
|
||||
case "UPDATE_TOAST":
|
||||
return {
|
||||
...state,
|
||||
toasts: state.toasts.map((t) =>
|
||||
t.id === action.toast.id ? { ...t, ...action.toast } : t
|
||||
),
|
||||
}
|
||||
...state,
|
||||
toasts: state.toasts.map((t) =>
|
||||
t.id === action.toast.id ? { ...t, ...action.toast } : t)}
|
||||
|
||||
case "DISMISS_TOAST": {
|
||||
const { toastId } = action
|
||||
@@ -87,36 +83,31 @@ export const reducer = (state: State, action: Action): State => {
|
||||
// ! Side effects ! - This could be extracted into a dismissToast() action,
|
||||
// but I'll keep it here for simplicity
|
||||
if (toastId) {
|
||||
addToRemoveQueue(toastId)
|
||||
addToRemoveQueue(toastId)
|
||||
} else {
|
||||
state.toasts.forEach((toast) => {
|
||||
addToRemoveQueue(toast.id)
|
||||
})
|
||||
state.toasts.forEach((toast) => {
|
||||
addToRemoveQueue(toast.id)
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
...state,
|
||||
toasts: state.toasts.map((t) =>
|
||||
t.id === toastId || toastId === undefined
|
||||
? {
|
||||
...t,
|
||||
open: false,
|
||||
}
|
||||
: t
|
||||
),
|
||||
}
|
||||
...state,
|
||||
toasts: state.toasts.map((t) =>
|
||||
t.id === toastId || toastId === undefined
|
||||
? {
|
||||
...t,
|
||||
open: false}
|
||||
: t)}
|
||||
}
|
||||
case "REMOVE_TOAST":
|
||||
if (action.toastId === undefined) {
|
||||
return {
|
||||
...state,
|
||||
toasts: [],
|
||||
}
|
||||
return {
|
||||
...state,
|
||||
toasts: []}
|
||||
}
|
||||
return {
|
||||
...state,
|
||||
toasts: state.toasts.filter((t) => t.id !== action.toastId),
|
||||
}
|
||||
...state,
|
||||
toasts: state.toasts.filter((t) => t.id !== action.toastId)}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -139,8 +130,7 @@ function toast({ ...props }: Toast) {
|
||||
const update = (props: ToasterToast) =>
|
||||
dispatch({
|
||||
type: "UPDATE_TOAST",
|
||||
toast: { ...props, id },
|
||||
})
|
||||
toast: { ...props, id }})
|
||||
const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
|
||||
|
||||
dispatch({
|
||||
@@ -150,16 +140,13 @@ function toast({ ...props }: Toast) {
|
||||
id,
|
||||
open: true,
|
||||
onOpenChange: (open) => {
|
||||
if (!open) dismiss()
|
||||
},
|
||||
},
|
||||
})
|
||||
if (!open) dismiss()
|
||||
}}})
|
||||
|
||||
return {
|
||||
id: id,
|
||||
dismiss,
|
||||
update,
|
||||
}
|
||||
update}
|
||||
}
|
||||
|
||||
function useToast() {
|
||||
@@ -170,7 +157,7 @@ function useToast() {
|
||||
return () => {
|
||||
const index = listeners.indexOf(setState)
|
||||
if (index > -1) {
|
||||
listeners.splice(index, 1)
|
||||
listeners.splice(index, 1)
|
||||
}
|
||||
}
|
||||
}, [state])
|
||||
@@ -178,8 +165,7 @@ function useToast() {
|
||||
return {
|
||||
...state,
|
||||
toast,
|
||||
dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
|
||||
}
|
||||
dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId })}
|
||||
}
|
||||
|
||||
export { useToast, toast }
|
||||
|
||||
新しい課題から参照
ユーザをブロックする