rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: migrate disclosure & combobox from reach-ui (#2316)

Browse Source
This commit is contained in:
Aman Harwara
2023-04-21 22:56:09 +05:30
committed by GitHub
parent bf294eccd4
commit c02c45b916
13 changed files with 171 additions and 362 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
packages/web/src/javascripts/Components/SmartViewBuilder/AddSmartViewModal.tsx
View File

@@ -11,9 +11,9 @@ import TabPanel from '../Tabs/TabPanel'
import { useTabState } from '../Tabs/useTabState'
import TabsContainer from '../Tabs/TabsContainer'
import CopyableCodeBlock from '../Shared/CopyableCodeBlock'
import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
import { classNames } from '@standardnotes/utils'
import Modal, { ModalAction } from '../Modal/Modal'
import { Disclosure, DisclosureContent, useDisclosureStore } from '@ariakit/react'
type Props = {
controller: AddSmartViewModalController
@@ -77,7 +77,8 @@ const AddSmartViewModal = ({ controller, platform }: Props) => {
const [shouldShowIconPicker, setShouldShowIconPicker] = useState(false)
const iconPickerButtonRef = useRef<HTMLButtonElement>(null)
const [shouldShowJsonExamples, setShouldShowJsonExamples] = useState(false)
const jsonExamplesDisclosure = useDisclosureStore()
const showingJsonExamples = jsonExamplesDisclosure.useState('open')
const toggleIconPicker = () => {
setShouldShowIconPicker((shouldShow) => !shouldShow)
@@ -223,22 +224,26 @@ const AddSmartViewModal = ({ controller, platform }: Props) => {
</TabPanel>
</TabsContainer>
{tabState.activeTab === 'custom' && (
<Disclosure open={shouldShowJsonExamples} onChange={() => setShouldShowJsonExamples((show) => !show)}>
<div className="flex flex-col gap-1.5 rounded-md border-2 border-info-backdrop bg-info-backdrop py-3 px-4">
<DisclosureButton className="flex items-center justify-between focus:shadow-none focus:outline-none">
<div className="text-sm font-semibold">Examples</div>
<Icon type={shouldShowJsonExamples ? 'chevron-up' : 'chevron-down'} />
</DisclosureButton>
<DisclosurePanel className={classNames(shouldShowJsonExamples && 'flex', 'flex-col gap-2.5')}>
<div className="text-sm font-medium">1. List notes that are conflicted copies of another note:</div>
<CopyableCodeBlock code={ConflictedNotesExampleCode} />
<div className="text-sm font-medium">
2. List notes that have the tag `todo` but not the tag `completed`:
</div>
<CopyableCodeBlock code={ComplexCompoundExampleCode} />
</DisclosurePanel>
</div>
</Disclosure>
<div className="flex flex-col gap-1.5 rounded-md border-2 border-info-backdrop bg-info-backdrop py-3 px-4">
<Disclosure
store={jsonExamplesDisclosure}
className="flex items-center justify-between focus:shadow-none focus:outline-none"
>
<div className="text-sm font-semibold">Examples</div>
<Icon type={showingJsonExamples ? 'chevron-up' : 'chevron-down'} />
</Disclosure>
<DisclosureContent
store={jsonExamplesDisclosure}
className={classNames(showingJsonExamples && 'flex', 'flex-col gap-2.5')}
>
<div className="text-sm font-medium">1. List notes that are conflicted copies of another note:</div>
<CopyableCodeBlock code={ConflictedNotesExampleCode} />
<div className="text-sm font-medium">
2. List notes that have the tag `todo` but not the tag `completed`:
</div>
<CopyableCodeBlock code={ComplexCompoundExampleCode} />
</DisclosureContent>
</div>
)}
</div>
</div>