Skip to content

Commit c4a41d1

Browse files
wuweiweiwuwuweiweiwu
authored
feat: add storybook for onlyExpandSearchedNode prop (#354)
1 parent 4977cb1 commit c4a41d1

File tree

3 files changed

+385
-0
lines changed

3 files changed

+385
-0
lines changed

‎stories/__snapshots__/storyshots.test.js.snap

+217
Original file line numberDiff line numberDiff line change
@@ -1783,6 +1783,223 @@ exports[`Storyshots Advanced Tree-to-tree dragging 1`] = `
17831783
</div>
17841784
`;
17851785

1786+
exports[`Storyshots Advanced onlyExpandSearchedNodes 1`] = `
1787+
<div>
1788+
<div>
1789+
<h2>
1790+
Find the needle!
1791+
</h2>
1792+
<form
1793+
onSubmit={[Function]}
1794+
style={
1795+
Object {
1796+
"display": "inline-block",
1797+
}
1798+
}
1799+
>
1800+
<input
1801+
id="find-box"
1802+
onChange={[Function]}
1803+
placeholder="Search..."
1804+
style={
1805+
Object {
1806+
"fontSize": "1rem",
1807+
}
1808+
}
1809+
type="text"
1810+
value=""
1811+
/>
1812+
<button
1813+
disabled={true}
1814+
onClick={[Function]}
1815+
type="button"
1816+
>
1817+
&lt;
1818+
</button>
1819+
<button
1820+
disabled={true}
1821+
onClick={[Function]}
1822+
type="submit"
1823+
>
1824+
&gt;
1825+
</button>
1826+
<span>
1827+
 
1828+
0
1829+
 / 
1830+
0
1831+
</span>
1832+
</form>
1833+
<div
1834+
style={
1835+
Object {
1836+
"height": 300,
1837+
}
1838+
}
1839+
>
1840+
<div
1841+
className="rst__tree"
1842+
style={
1843+
Object {
1844+
"height": "100%",
1845+
}
1846+
}
1847+
>
1848+
<div>
1849+
<div
1850+
aria-label="grid"
1851+
aria-readonly={true}
1852+
className="ReactVirtualized__Grid ReactVirtualized__List rst__virtualScrollOverride"
1853+
onScroll={[Function]}
1854+
role="grid"
1855+
style={
1856+
Object {
1857+
"WebkitOverflowScrolling": "touch",
1858+
"boxSizing": "border-box",
1859+
"direction": "ltr",
1860+
"height": 99999,
1861+
"overflowX": "hidden",
1862+
"overflowY": "hidden",
1863+
"position": "relative",
1864+
"width": 200,
1865+
"willChange": "transform",
1866+
}
1867+
}
1868+
tabIndex={0}
1869+
>
1870+
<div
1871+
className="ReactVirtualized__Grid__innerScrollContainer"
1872+
role="rowgroup"
1873+
style={
1874+
Object {
1875+
"height": 62,
1876+
"maxHeight": 62,
1877+
"maxWidth": 200,
1878+
"overflow": "hidden",
1879+
"pointerEvents": "",
1880+
"position": "relative",
1881+
"width": "auto",
1882+
}
1883+
}
1884+
>
1885+
<div
1886+
className="rst__node"
1887+
style={
1888+
Object {
1889+
"height": 62,
1890+
"left": 0,
1891+
"position": "absolute",
1892+
"top": 0,
1893+
"width": "100%",
1894+
}
1895+
}
1896+
>
1897+
<div
1898+
className="rst__lineBlock rst__lineHalfHorizontalRight"
1899+
style={
1900+
Object {
1901+
"width": 44,
1902+
}
1903+
}
1904+
/>
1905+
<div
1906+
className="rst__nodeContent"
1907+
style={
1908+
Object {
1909+
"left": 44,
1910+
}
1911+
}
1912+
>
1913+
<div
1914+
style={
1915+
Object {
1916+
"height": "100%",
1917+
}
1918+
}
1919+
>
1920+
<div>
1921+
<button
1922+
aria-label="Expand"
1923+
className="rst__expandButton"
1924+
onClick={[Function]}
1925+
style={
1926+
Object {
1927+
"left": -22,
1928+
}
1929+
}
1930+
type="button"
1931+
/>
1932+
</div>
1933+
<div
1934+
className="rst__rowWrapper"
1935+
>
1936+
<div
1937+
className="rst__row"
1938+
style={
1939+
Object {
1940+
"opacity": 1,
1941+
}
1942+
}
1943+
>
1944+
<div
1945+
className="rst__moveHandle"
1946+
/>
1947+
<div
1948+
className="rst__rowContents"
1949+
>
1950+
<div
1951+
className="rst__rowLabel"
1952+
>
1953+
<span
1954+
className="rst__rowTitle"
1955+
>
1956+
Haystack
1957+
</span>
1958+
</div>
1959+
<div
1960+
className="rst__rowToolbar"
1961+
/>
1962+
</div>
1963+
</div>
1964+
</div>
1965+
</div>
1966+
</div>
1967+
</div>
1968+
</div>
1969+
</div>
1970+
</div>
1971+
</div>
1972+
</div>
1973+
</div>
1974+
<br />
1975+
<form
1976+
action="https://codesandbox.io/api/v1/sandboxes/define"
1977+
id="codesandbox-form"
1978+
method="POST"
1979+
>
1980+
<input
1981+
id="codesandbox-parameters"
1982+
name="parameters"
1983+
type="hidden"
1984+
/>
1985+
</form>
1986+
<button
1987+
className="sandboxButton"
1988+
onClick={[Function]}
1989+
>
1990+
PLAY WITH THIS CODE →
1991+
</button>
1992+
<a
1993+
className="sourceLink"
1994+
href="https://github.com/frontend-collective/react-sortable-tree/blob/master/stories/only-expand-searched-node.js"
1995+
rel="noopener noreferrer"
1996+
target="_top"
1997+
>
1998+
VIEW SOURCE →
1999+
</a>
2000+
</div>
2001+
`;
2002+
17862003
exports[`Storyshots Basics Add and remove nodes programmatically 1`] = `
17872004
<div>
17882005
<div>

‎stories/index.js

+7
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import ExternalNodeExample from './external-node';
1111
import GenerateNodePropsExample from './generate-node-props';
1212
import ModifyNodesExample from './modify-nodes';
1313
import SearchExample from './search';
14+
import OnlyExpandSearchedNodesExample from './only-expand-searched-node';
1415
import ThemesExample from './themes';
1516
import TouchSupportExample from './touch-support';
1617
import TreeDataIOExample from './tree-data-io';
@@ -78,4 +79,10 @@ storiesOf('Advanced', module)
7879
)
7980
.add('Drag out to remove', () =>
8081
wrapWithSource(<DragOutToRemoveExample />, 'drag-out-to-remove.js')
82+
)
83+
.add('onlyExpandSearchedNodes', () =>
84+
wrapWithSource(
85+
<OnlyExpandSearchedNodesExample />,
86+
'only-expand-searched-node.js'
87+
)
8188
);

0 commit comments

Comments
 (0)