Skip to content

Commit

Permalink
feat: Allow scroll bars in scroll views to be hidden
Browse files Browse the repository at this point in the history
Resolves #377.

Notes:
- Update docs for `<body>`, `<form>` and `<list>`
- Update schema
- Add examples for scroll view and list view
- `<section-list>` **does not** implement this property, it does not seem supported by RN <SectionView>
  • Loading branch information
flochtililoch committed Apr 12, 2022
1 parent 22a4809 commit 7c12160
Show file tree
Hide file tree
Showing 10 changed files with 360 additions and 9 deletions.
9 changes: 9 additions & 0 deletions docs/reference_body.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ A `<body>` element can only appear as a direct child of a `<screen>` element. Th
- [`style`](#style)
- [`scroll`](#scroll)
- [`scroll-orientation`](#scroll-orientation)
- [`shows-scroll-indicator`](#shows-scroll-indicator)
- [`id`](#id)

#### Behavior attributes
Expand Down Expand Up @@ -74,6 +75,14 @@ An attribute indicating whether the content in the can be scrollable. The style

An attribute indicating the direction in which the body will scroll.

#### `shows-scroll-indicator`

| Type | Required |
| ------------------------- | -------- |
| **true** (default), false | No |

An attribute indicating whether the scroll bar should be shown. Attribute `scroll` should be set in for this to have any effect.

#### `id`

| Type | Required |
Expand Down
27 changes: 27 additions & 0 deletions docs/reference_form.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,9 @@ A `<form>` element can appear anywhere within a `<screen>` element. It can conta
- [`style`](#style)
- [`id`](#id)
- [`hide`](#hide)
- [`scroll`](#scroll)
- [`scroll-orientation`](#scroll-orientation)
- [`shows-scroll-indicator`](#shows-scroll-indicator)

#### `style`

Expand All @@ -84,3 +87,27 @@ A global attribute uniquely identifying the element in the whole document.
| **false** (default), true | No |

If `hide="true"`, the element will not be rendered on screen. If the element or any of the element's children have a behavior that triggers on "load" or "visible", those behaviors will not trigger while the element is hidden.

#### `scroll`

| Type | Required |
| ------------------------- | -------- |
| true, **false** (default) | No |

An attribute indicating whether the content in the can be scrollable. The style rules of the body will determine the viewport size.

#### `scroll-orientation`

| Type | Required |
| ---------------------------------- | -------- |
| **vertical** (default), horizontal | No |

An attribute indicating the direction in which the body will scroll.

#### `shows-scroll-indicator`

| Type | Required |
| ------------------------- | -------- |
| **true** (default), false | No |

An attribute indicating whether the scroll bar should be shown. Attribute `scroll` should be set in for this to have any effect.
18 changes: 18 additions & 0 deletions docs/reference_list.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ A `<list>` element will only render `<item>` and `<items>` children elements. Ot
- [`itemHeight`](#itemheight)
- [`id`](#id)
- [`hide`](#hide)
- [`scroll-orientation`](#scroll-orientation)
- [`shows-scroll-indicator`](#shows-scroll-indicator)

#### Behavior attributes

Expand Down Expand Up @@ -69,3 +71,19 @@ A global attribute uniquely identifying the element in the whole document.
| **false** (default), true | No |

If `hide="true"`, the element will not be rendered on screen. If the element or any of the element's children have a behavior that triggers on "load" or "visible", those behaviors will not trigger while the element is hidden.

#### `scroll-orientation`

| Type | Required |
| ---------------------------------- | -------- |
| **vertical** (default), horizontal | No |

An attribute indicating the direction in which the body will scroll.

#### `shows-scroll-indicator`

| Type | Required |
| ------------------------- | -------- |
| **true** (default), false | No |

An attribute indicating whether the scroll bar should be shown.
9 changes: 9 additions & 0 deletions docs/reference_view.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ A `<view>` element can only appear anywhere within a `<screen>` element.
- [`scroll`](#scroll)
- [`scroll-orientation`](#scroll-orientation)
- [`scroll-to-input-offset`](#scroll-to-input-offset)
- [`shows-scroll-indicator`](#shows-scroll-indicator)
- [`id`](#id)
- [`hide`](#hide)
- [`avoid-keyboard`](#avoid-keyboard)
Expand Down Expand Up @@ -103,6 +104,14 @@ An attribute indicating the direction in which the view will scroll.

An attribute defining an additional scroll offset to be applied to the view, when a `<text-field>` or `<text-area>` is focused. Only valid in combination with attribute `scroll` set to `"true"`.

#### `shows-scroll-indicator`

| Type | Required |
| ------------------------- | -------- |
| **true** (default), false | No |

An attribute indicating whether the scroll bar should be shown. Attribute `scroll` should be set in for this to have any effect.

#### `id`

| Type | Required |
Expand Down
118 changes: 118 additions & 0 deletions examples/ui_elements/list/hidden_scroll_bar.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
<doc xmlns="https://hyperview.org/hyperview">
<screen>
<styles>
<style
id="Header"
alignItems="center"
backgroundColor="white"
borderBottomColor="#eee"
borderBottomWidth="1"
flexDirection="row"
paddingLeft="24"
paddingRight="24"
paddingBottom="16"
/>
<style
id="Header__Back"
color="blue"
fontSize="16"
fontWeight="600"
paddingRight="16"
/>
<style id="Header__Title" color="black" fontSize="24" fontWeight="600" />
<style id="Body" backgroundColor="white" flex="1" />
<style
id="Description"
borderColor="red"
borderRadius="4"
borderWidth="2"
fontSize="16"
fontWeight="600"
margin="24"
padding="16"
/>
<style
id="Item"
alignItems="center"
borderBottomColor="#eee"
borderBottomWidth="1"
flex="1"
flexDirection="row"
height="48"
justifyContent="space-between"
paddingLeft="24"
paddingRight="24"
/>
<style id="Item__Label" fontSize="18" fontWeight="normal" />
<style id="Item__Chevron" fontSize="18" fontWeight="bold" />
</styles>
<body style="Body" safe-area="true">
<header style="Header">
<text action="back" href="#" style="Header__Back">Back</text>
<text style="Header__Title">List With Hidden Scroll Bar</text>
</header>
<list shows-scroll-indicator="false">
<item key="1" style="Item">
<text style="Item__Label">List 1</text>
</item>
<item key="2" style="Item">
<text style="Item__Label">List 2</text>
</item>
<item key="3" style="Item">
<text style="Item__Label">List 3</text>
</item>
<item key="4" style="Item">
<text style="Item__Label">List 4</text>
</item>
<item key="5" style="Item">
<text style="Item__Label">List 5</text>
</item>
<item key="6" style="Item">
<text style="Item__Label">List 6</text>
</item>
<item key="7" style="Item">
<text style="Item__Label">List 7</text>
</item>
<item key="8" style="Item">
<text style="Item__Label">List 8</text>
</item>
<item key="9" style="Item">
<text style="Item__Label">List 9</text>
</item>
<item key="10" style="Item">
<text style="Item__Label">List 10</text>
</item>
<item key="11" style="Item">
<text style="Item__Label">List 11</text>
</item>
<item key="12" style="Item">
<text style="Item__Label">List 12</text>
</item>
<item key="13" style="Item">
<text style="Item__Label">List 13</text>
</item>
<item key="14" style="Item">
<text style="Item__Label">List 14</text>
</item>
<item key="15" style="Item">
<text style="Item__Label">List 15</text>
</item>
<item key="16" style="Item">
<text style="Item__Label">List 16</text>
</item>
<item key="17" style="Item">
<text style="Item__Label">List 17</text>
</item>
<item key="18" style="Item">
<text style="Item__Label">List 18</text>
</item>
<item key="19" style="Item">
<text style="Item__Label">List 19</text>
</item>
<item key="20" style="Item">
<text style="Item__Label">List 20</text>
</item>
</list>
</body>
</screen>
</doc>
118 changes: 118 additions & 0 deletions examples/ui_elements/list/horizontal.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
<doc xmlns="https://hyperview.org/hyperview">
<screen>
<styles>
<style
id="Header"
alignItems="center"
backgroundColor="white"
borderBottomColor="#eee"
borderBottomWidth="1"
flexDirection="row"
paddingLeft="24"
paddingRight="24"
paddingBottom="16"
/>
<style
id="Header__Back"
color="blue"
fontSize="16"
fontWeight="600"
paddingRight="16"
/>
<style id="Header__Title" color="black" fontSize="24" fontWeight="600" />
<style id="Body" backgroundColor="white" flex="1" />
<style
id="Description"
borderColor="red"
borderRadius="4"
borderWidth="2"
fontSize="16"
fontWeight="600"
margin="24"
padding="16"
/>
<style
id="Item"
alignItems="center"
borderBottomColor="#eee"
borderBottomWidth="1"
flex="1"
flexDirection="row"
height="48"
justifyContent="space-between"
paddingLeft="24"
paddingRight="24"
/>
<style id="Item__Label" fontSize="18" fontWeight="normal" />
<style id="Item__Chevron" fontSize="18" fontWeight="bold" />
</styles>
<body style="Body" safe-area="true">
<header style="Header">
<text action="back" href="#" style="Header__Back">Back</text>
<text style="Header__Title">Horizontal List</text>
</header>
<list scroll-orientation="horizontal">
<item key="1" style="Item">
<text style="Item__Label">List 1</text>
</item>
<item key="2" style="Item">
<text style="Item__Label">List 2</text>
</item>
<item key="3" style="Item">
<text style="Item__Label">List 3</text>
</item>
<item key="4" style="Item">
<text style="Item__Label">List 4</text>
</item>
<item key="5" style="Item">
<text style="Item__Label">List 5</text>
</item>
<item key="6" style="Item">
<text style="Item__Label">List 6</text>
</item>
<item key="7" style="Item">
<text style="Item__Label">List 7</text>
</item>
<item key="8" style="Item">
<text style="Item__Label">List 8</text>
</item>
<item key="9" style="Item">
<text style="Item__Label">List 9</text>
</item>
<item key="10" style="Item">
<text style="Item__Label">List 10</text>
</item>
<item key="11" style="Item">
<text style="Item__Label">List 11</text>
</item>
<item key="12" style="Item">
<text style="Item__Label">List 12</text>
</item>
<item key="13" style="Item">
<text style="Item__Label">List 13</text>
</item>
<item key="14" style="Item">
<text style="Item__Label">List 14</text>
</item>
<item key="15" style="Item">
<text style="Item__Label">List 15</text>
</item>
<item key="16" style="Item">
<text style="Item__Label">List 16</text>
</item>
<item key="17" style="Item">
<text style="Item__Label">List 17</text>
</item>
<item key="18" style="Item">
<text style="Item__Label">List 18</text>
</item>
<item key="19" style="Item">
<text style="Item__Label">List 19</text>
</item>
<item key="20" style="Item">
<text style="Item__Label">List 20</text>
</item>
</list>
</body>
</screen>
</doc>
18 changes: 18 additions & 0 deletions examples/ui_elements/list/index.xml
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,24 @@
<text style="Item__Label">Basic List</text>
<text style="Item__Chevron">&gt;</text>
</item>
<item
href="/ui_elements/list/horizontal.xml"
key="basic"
show-during-load="loadingScreen"
style="Item"
>
<text style="Item__Label">Horizontal List</text>
<text style="Item__Chevron">&gt;</text>
</item>
<item
href="/ui_elements/list/hidden_scroll_bar.xml"
key="hidden-scroll-bar"
show-during-load="loadingScreen"
style="Item"
>
<text style="Item__Label">List With Hidden Scroll Bar</text>
<text style="Item__Chevron">&gt;</text>
</item>
<item
href="/ui_elements/list/refresh.xml"
key="refresh"
Expand Down
Loading

0 comments on commit 7c12160

Please sign in to comment.