Skip to content

Commit fff72c6

Browse files
fritz-cfritz-c
committed
feat(node-renderer): Make title and subtitle insertable via props
1 parent 0abba80 commit fff72c6

File tree

4 files changed

+407
-7
lines changed

4 files changed

+407
-7
lines changed

‎examples/storybooks/__snapshots__/storyshots.test.js.snap

+335
Original file line numberDiff line numberDiff line change
@@ -1398,3 +1398,338 @@ exports[`Storyshots Basics Minimal implementation 1`] = `
13981398
</a>
13991399
</div>
14001400
`;
1401+
1402+
exports[`Storyshots Basics Modify nodes 1`] = `
1403+
<div>
1404+
<div>
1405+
<div
1406+
style={
1407+
Object {
1408+
"height": 300,
1409+
}
1410+
}
1411+
>
1412+
<div
1413+
className="tree"
1414+
style={
1415+
Object {
1416+
"height": "100%",
1417+
}
1418+
}
1419+
>
1420+
<div>
1421+
<div
1422+
aria-label="grid"
1423+
className="ReactVirtualized__Grid ReactVirtualized__List virtualScrollOverride"
1424+
id={undefined}
1425+
onScroll={[Function]}
1426+
role="grid"
1427+
style={
1428+
Object {
1429+
"WebkitOverflowScrolling": "touch",
1430+
"boxSizing": "border-box",
1431+
"direction": "ltr",
1432+
"height": 99999,
1433+
"overflowX": "hidden",
1434+
"overflowY": "hidden",
1435+
"position": "relative",
1436+
"width": 200,
1437+
"willChange": "transform",
1438+
}
1439+
}
1440+
tabIndex={0}
1441+
>
1442+
<div
1443+
className="ReactVirtualized__Grid__innerScrollContainer"
1444+
style={
1445+
Object {
1446+
"height": 186,
1447+
"maxHeight": 186,
1448+
"maxWidth": 200,
1449+
"overflow": "hidden",
1450+
"pointerEvents": "",
1451+
"position": "relative",
1452+
"width": "auto",
1453+
}
1454+
}
1455+
>
1456+
<div
1457+
className="node"
1458+
style={
1459+
Object {
1460+
"height": 62,
1461+
"left": 0,
1462+
"position": "absolute",
1463+
"top": 0,
1464+
"width": "100%",
1465+
}
1466+
}
1467+
>
1468+
<div
1469+
className="lineBlock lineHalfHorizontalRight lineHalfVerticalBottom"
1470+
style={
1471+
Object {
1472+
"width": 44,
1473+
}
1474+
}
1475+
/>
1476+
<div
1477+
className="nodeContent"
1478+
style={
1479+
Object {
1480+
"left": 44,
1481+
}
1482+
}
1483+
>
1484+
<div
1485+
style={
1486+
Object {
1487+
"height": "100%",
1488+
}
1489+
}
1490+
>
1491+
<div
1492+
className="rowWrapper"
1493+
>
1494+
<div
1495+
className="row"
1496+
style={
1497+
Object {
1498+
"opacity": 1,
1499+
}
1500+
}
1501+
>
1502+
<div
1503+
className="moveHandle"
1504+
/>
1505+
<div
1506+
className="rowContents"
1507+
>
1508+
<div
1509+
className="rowLabel"
1510+
>
1511+
<span
1512+
className="rowTitle"
1513+
>
1514+
<input
1515+
onChange={[Function]}
1516+
style={
1517+
Object {
1518+
"fontSize": "1.1rem",
1519+
}
1520+
}
1521+
value="IT Manager"
1522+
/>
1523+
</span>
1524+
</div>
1525+
<div
1526+
className="rowToolbar"
1527+
/>
1528+
</div>
1529+
</div>
1530+
</div>
1531+
</div>
1532+
</div>
1533+
</div>
1534+
<div
1535+
className="node"
1536+
style={
1537+
Object {
1538+
"height": 62,
1539+
"left": 0,
1540+
"position": "absolute",
1541+
"top": 62,
1542+
"width": "100%",
1543+
}
1544+
}
1545+
>
1546+
<div
1547+
className="lineBlock lineHalfVerticalTop lineHalfHorizontalRight"
1548+
style={
1549+
Object {
1550+
"width": 44,
1551+
}
1552+
}
1553+
/>
1554+
<div
1555+
className="nodeContent"
1556+
style={
1557+
Object {
1558+
"left": 44,
1559+
}
1560+
}
1561+
>
1562+
<div
1563+
style={
1564+
Object {
1565+
"height": "100%",
1566+
}
1567+
}
1568+
>
1569+
<div>
1570+
<button
1571+
aria-label="Collapse"
1572+
className="collapseButton"
1573+
onClick={[Function]}
1574+
style={
1575+
Object {
1576+
"left": -22,
1577+
}
1578+
}
1579+
type="button"
1580+
/>
1581+
<div
1582+
className="lineChildren"
1583+
style={
1584+
Object {
1585+
"width": 44,
1586+
}
1587+
}
1588+
/>
1589+
</div>
1590+
<div
1591+
className="rowWrapper"
1592+
>
1593+
<div
1594+
className="row"
1595+
style={
1596+
Object {
1597+
"opacity": 1,
1598+
}
1599+
}
1600+
>
1601+
<div
1602+
className="moveHandle"
1603+
/>
1604+
<div
1605+
className="rowContents"
1606+
>
1607+
<div
1608+
className="rowLabel"
1609+
>
1610+
<span
1611+
className="rowTitle"
1612+
>
1613+
<input
1614+
onChange={[Function]}
1615+
style={
1616+
Object {
1617+
"fontSize": "1.1rem",
1618+
}
1619+
}
1620+
value="Regional Manager"
1621+
/>
1622+
</span>
1623+
</div>
1624+
<div
1625+
className="rowToolbar"
1626+
/>
1627+
</div>
1628+
</div>
1629+
</div>
1630+
</div>
1631+
</div>
1632+
</div>
1633+
<div
1634+
className="node"
1635+
style={
1636+
Object {
1637+
"height": 62,
1638+
"left": 0,
1639+
"position": "absolute",
1640+
"top": 124,
1641+
"width": "100%",
1642+
}
1643+
}
1644+
>
1645+
<div
1646+
className="lineBlock "
1647+
style={
1648+
Object {
1649+
"width": 44,
1650+
}
1651+
}
1652+
/>
1653+
<div
1654+
className="lineBlock lineHalfVerticalTop lineHalfHorizontalRight"
1655+
style={
1656+
Object {
1657+
"width": 44,
1658+
}
1659+
}
1660+
/>
1661+
<div
1662+
className="nodeContent"
1663+
style={
1664+
Object {
1665+
"left": 88,
1666+
}
1667+
}
1668+
>
1669+
<div
1670+
style={
1671+
Object {
1672+
"height": "100%",
1673+
}
1674+
}
1675+
>
1676+
<div
1677+
className="rowWrapper"
1678+
>
1679+
<div
1680+
className="row"
1681+
style={
1682+
Object {
1683+
"opacity": 1,
1684+
}
1685+
}
1686+
>
1687+
<div
1688+
className="moveHandle"
1689+
/>
1690+
<div
1691+
className="rowContents"
1692+
>
1693+
<div
1694+
className="rowLabel"
1695+
>
1696+
<span
1697+
className="rowTitle"
1698+
>
1699+
<input
1700+
onChange={[Function]}
1701+
style={
1702+
Object {
1703+
"fontSize": "1.1rem",
1704+
}
1705+
}
1706+
value="Branch Manager"
1707+
/>
1708+
</span>
1709+
</div>
1710+
<div
1711+
className="rowToolbar"
1712+
/>
1713+
</div>
1714+
</div>
1715+
</div>
1716+
</div>
1717+
</div>
1718+
</div>
1719+
</div>
1720+
</div>
1721+
</div>
1722+
</div>
1723+
</div>
1724+
</div>
1725+
<br />
1726+
<a
1727+
className="sourceLink"
1728+
href="https://github.com/fritz-c/react-sortable-tree/blob/master/examples/storybooks/modify-nodes.js"
1729+
rel="noopener noreferrer"
1730+
target="_top"
1731+
>
1732+
VIEW SOURCE →
1733+
</a>
1734+
</div>
1735+
`;

‎examples/storybooks/index.js

+4
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { storiesOf } from '@storybook/react';
55
// import { action } from '@storybook/addon-actions';
66
import BarebonesExample from './barebones';
77
import AddRemoveExample from './add-remove';
8+
import ModifyNodesExample from './modify-nodes';
89
import ExternalNodeExample from './external-node';
910
import TouchSupportExample from './touch-support';
1011
import TreeToTreeExample from './tree-to-tree';
@@ -31,6 +32,9 @@ storiesOf('Basics', module)
3132
)
3233
.add('Add and remove nodes programmatically', () =>
3334
wrapWithSource(<AddRemoveExample />, 'add-remove.js')
35+
)
36+
.add('Modify nodes', () =>
37+
wrapWithSource(<ModifyNodesExample />, 'modify-nodes.js')
3438
);
3539

3640
storiesOf('Advanced', module)

0 commit comments

Comments
 (0)