feat: Allow scroll bars in scroll views to be hidden

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>
Instawork · Apr 12, 2022 · 7c12160 · 7c12160
1 parent 22a4809
commit 7c12160
Show file tree

Hide file tree

Showing 10 changed files with 360 additions and 9 deletions.
diff --git a/docs/reference_body.md b/docs/reference_body.md
@@ -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
@@ -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 |

diff --git a/docs/reference_form.md b/docs/reference_form.md
@@ -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`
 
@@ -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.
diff --git a/docs/reference_list.md b/docs/reference_list.md
@@ -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
 
@@ -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.
diff --git a/docs/reference_view.md b/docs/reference_view.md
@@ -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)
@@ -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 |

diff --git a/examples/ui_elements/list/hidden_scroll_bar.xml b/examples/ui_elements/list/hidden_scroll_bar.xml
@@ -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>
diff --git a/examples/ui_elements/list/horizontal.xml b/examples/ui_elements/list/horizontal.xml
@@ -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>
diff --git a/examples/ui_elements/list/index.xml b/examples/ui_elements/list/index.xml
@@ -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"