feat: picker-field/date-field new triggers

Add `focus`/`blur`/`change` triggers to `picker-field` and `date-field` elements. Relates to #298
Instawork · Apr 13, 2023 · 9a83ae1 · 9a83ae1
1 parent 04d9a41
commit 9a83ae1
Show file tree

Hide file tree

Showing 8 changed files with 340 additions and 0 deletions.
diff --git a/docs/reference_datefield.md b/docs/reference_datefield.md
@@ -40,6 +40,14 @@ A `<date-field>` element can appear anywhere within a `<form>` element.
 - [`id`](#id)
 - [`hide`](#hide)
 
+#### Behavior attributes
+
+A `<date-field>` element accepts the standard [behavior attributes](/docs/reference_behavior_attributes), including the following triggers:
+
+- [blur](/docs/reference_behavior_attributes#blur)
+- [change](/docs/reference_behavior_attributes#change)
+- [focus](/docs/reference_behavior_attributes#focus)
+
 #### `name`
 
 | Type   | Required |

diff --git a/docs/reference_pickerfield.md b/docs/reference_pickerfield.md
@@ -52,6 +52,14 @@ A `<picker-field`> element can appear anywhere within a `<form>` element. Its ch
 - [`id`](#id)
 - [`hide`](#hide)
 
+#### Behavior attributes
+
+A `<picker-field>` element accepts the standard [behavior attributes](/docs/reference_behavior_attributes), including the following triggers:
+
+- [blur](/docs/reference_behavior_attributes#blur)
+- [change](/docs/reference_behavior_attributes#change)
+- [focus](/docs/reference_behavior_attributes#focus)
+
 #### `name`
 
 | Type   | Required |

diff --git a/examples/behaviors/blur.xml b/examples/behaviors/blur.xml
@@ -31,6 +31,7 @@
       />
       <style
         id="Container"
+        flexDirection="row"
         borderColor="#e1e1e1"
         borderRadius="16"
         borderWidth="2"
@@ -71,6 +72,29 @@
         </modifier>
       </style>
       <style id="Tip" color="#FF4847" fontSize="16" />
+      <style id="Input__Text" fontSize="16" fontWeight="normal" />
+      <style
+        id="PickerModal"
+        backgroundColor="white"
+        borderTopColor="#E1E1E1"
+        borderTopWidth="1"
+        shadowOffsetX="0"
+        shadowOffsetY="-5"
+        shadowOpacity="0.2"
+        shadowRadius="5"
+      />
+      <style
+        id="PickerModal__text"
+        color="blue"
+        fontSize="16"
+        fontWeight="600"
+        marginBottom="16"
+        padding="24"
+      >
+        <modifier pressed="true">
+          <style opacity="0.5" />
+        </modifier>
+      </style>
     </styles>
     <body style="Body" safe-area="true">
       <header style="Header">
@@ -139,12 +163,71 @@
             trigger="blur"
           />
         </view>
+        <view style="FormGroup">
+          <text style="Label">Picker field</text>
+          <picker-field
+            field-style="Input"
+            field-text-style="Input__Text"
+            modal-style="PickerModal"
+            modal-text-style="PickerModal__text"
+            name="picker1"
+            placeholder="Select choice"
+            placeholderTextColor="#8D9494"
+            trigger="blur"
+            action="replace-inner"
+            target="container1"
+            href="#pickerBlured"
+          >
+            <behavior
+              trigger="blur"
+              action="append"
+              target="container1"
+              href="#pickerBlured2"
+            />
+            <picker-item label="Choice 0" value="0" />
+            <picker-item label="Choice 1" value="1" />
+            <picker-item label="Choice 2" value="2" />
+            <picker-item label="Choice 3" value="3" />
+            <picker-item label="Choice 4" value="4" />
+            <picker-item label="Choice 5" value="5" />
+            <picker-item label="Choice 6" value="6" />
+          </picker-field>
+        </view>
+        <view style="FormGroup">
+          <text style="Label">Date field</text>
+          <date-field
+            field-style="Input"
+            field-text-style="Input__Text"
+            label-format="MMMM D, YYYY"
+            modal-style="PickerModal"
+            modal-text-style="PickerModal__text"
+            name="date1"
+            mode="spinner"
+            placeholder="Select date"
+            placeholderTextColor="#8D9494"
+            trigger="blur"
+            action="replace-inner"
+            target="container1"
+            href="#dateFieldBlured"
+          >
+            <behavior
+              trigger="blur"
+              action="append"
+              target="container1"
+              href="#dateFieldBlured2"
+            />
+          </date-field>
+        </view>
       </view>
       <view hide="true">
         <text id="field1Blured" style="Tip">Field 1 blured</text>
         <text id="field2Blured" style="Tip">Field 2 blured</text>
         <text id="area1Blured" style="Tip">Area 1 blured</text>
         <text id="area2Blured" style="Tip">Area 2 blured</text>
+        <text id="pickerBlured" style="Tip">Picker field blured</text>
+        <text id="pickerBlured2" style="Tip">!</text>
+        <text id="dateFieldBlured" style="Tip">Date field blured</text>
+        <text id="dateFieldBlured2" style="Tip">!</text>
       </view>
     </body>
   </screen>

diff --git a/examples/behaviors/change.xml b/examples/behaviors/change.xml
@@ -31,6 +31,7 @@
       />
       <style
         id="Container"
+        flexDirection="row"
         borderColor="#e1e1e1"
         borderRadius="16"
         borderWidth="2"
@@ -71,6 +72,29 @@
         </modifier>
       </style>
       <style id="Tip" color="#FF4847" fontSize="16" />
+      <style id="Input__Text" fontSize="16" fontWeight="normal" />
+      <style
+        id="PickerModal"
+        backgroundColor="white"
+        borderTopColor="#E1E1E1"
+        borderTopWidth="1"
+        shadowOffsetX="0"
+        shadowOffsetY="-5"
+        shadowOpacity="0.2"
+        shadowRadius="5"
+      />
+      <style
+        id="PickerModal__text"
+        color="blue"
+        fontSize="16"
+        fontWeight="600"
+        marginBottom="16"
+        padding="24"
+      >
+        <modifier pressed="true">
+          <style opacity="0.5" />
+        </modifier>
+      </style>
     </styles>
     <body style="Body" safe-area="true">
       <header style="Header">
@@ -191,6 +215,61 @@
             trigger="change"
           />
         </view>
+        <view style="FormGroup">
+          <text style="Label">Picker field</text>
+          <picker-field
+            field-style="Input"
+            field-text-style="Input__Text"
+            modal-style="PickerModal"
+            modal-text-style="PickerModal__text"
+            name="picker1"
+            placeholder="Select choice"
+            placeholderTextColor="#8D9494"
+            trigger="change"
+            action="replace-inner"
+            target="container1"
+            href="#pickerChanged"
+          >
+            <behavior
+              trigger="change"
+              action="append"
+              target="container1"
+              href="#pickerChanged2"
+            />
+            <picker-item label="Choice 0" value="0" />
+            <picker-item label="Choice 1" value="1" />
+            <picker-item label="Choice 2" value="2" />
+            <picker-item label="Choice 3" value="3" />
+            <picker-item label="Choice 4" value="4" />
+            <picker-item label="Choice 5" value="5" />
+            <picker-item label="Choice 6" value="6" />
+          </picker-field>
+        </view>
+        <view style="FormGroup">
+          <text style="Label">Date field</text>
+          <date-field
+            field-style="Input"
+            field-text-style="Input__Text"
+            label-format="MMMM D, YYYY"
+            modal-style="PickerModal"
+            modal-text-style="PickerModal__text"
+            name="date1"
+            mode="spinner"
+            placeholder="Select date"
+            placeholderTextColor="#8D9494"
+            trigger="change"
+            action="replace-inner"
+            target="container1"
+            href="#dateFieldChanged"
+          >
+            <behavior
+              trigger="change"
+              action="append"
+              target="container1"
+              href="#dateFieldChanged2"
+            />
+          </date-field>
+        </view>
       </view>
       <view hide="true">
         <text id="switchedToggled" style="Tip">Switch toggled</text>
@@ -207,6 +286,10 @@
         >Field with secure-text changed</text>
         <text id="area1Changed" style="Tip">Area 1 changed</text>
         <text id="area2Changed" style="Tip">Area 2 changed</text>
+        <text id="pickerChanged" style="Tip">Picker changed</text>
+        <text id="pickerChanged2" style="Tip">!</text>
+        <text id="dateFieldChanged" style="Tip">Date field changed</text>
+        <text id="dateFieldChanged2" style="Tip">!</text>
       </view>
     </body>
   </screen>

diff --git a/examples/behaviors/focus.xml b/examples/behaviors/focus.xml
@@ -31,6 +31,7 @@
       />
       <style
         id="Container"
+        flexDirection="row"
         borderColor="#e1e1e1"
         borderRadius="16"
         borderWidth="2"
@@ -71,6 +72,29 @@
         </modifier>
       </style>
       <style id="Tip" color="#FF4847" fontSize="16" />
+      <style id="Input__Text" fontSize="16" fontWeight="normal" />
+      <style
+        id="PickerModal"
+        backgroundColor="white"
+        borderTopColor="#E1E1E1"
+        borderTopWidth="1"
+        shadowOffsetX="0"
+        shadowOffsetY="-5"
+        shadowOpacity="0.2"
+        shadowRadius="5"
+      />
+      <style
+        id="PickerModal__text"
+        color="blue"
+        fontSize="16"
+        fontWeight="600"
+        marginBottom="16"
+        padding="24"
+      >
+        <modifier pressed="true">
+          <style opacity="0.5" />
+        </modifier>
+      </style>
     </styles>
     <body style="Body" safe-area="true">
       <header style="Header">
@@ -139,12 +163,71 @@
             trigger="focus"
           />
         </view>
+        <view style="FormGroup">
+          <text style="Label">Picker field</text>
+          <picker-field
+            field-style="Input"
+            field-text-style="Input__Text"
+            modal-style="PickerModal"
+            modal-text-style="PickerModal__text"
+            name="picker1"
+            placeholder="Select choice"
+            placeholderTextColor="#8D9494"
+            trigger="focus"
+            action="replace-inner"
+            target="container1"
+            href="#pickerFocused"
+          >
+            <behavior
+              trigger="focus"
+              action="append"
+              target="container1"
+              href="#pickerFocused2"
+            />
+            <picker-item label="Choice 0" value="0" />
+            <picker-item label="Choice 1" value="1" />
+            <picker-item label="Choice 2" value="2" />
+            <picker-item label="Choice 3" value="3" />
+            <picker-item label="Choice 4" value="4" />
+            <picker-item label="Choice 5" value="5" />
+            <picker-item label="Choice 6" value="6" />
+          </picker-field>
+        </view>
+        <view style="FormGroup">
+          <text style="Label">Date field</text>
+          <date-field
+            field-style="Input"
+            field-text-style="Input__Text"
+            label-format="MMMM D, YYYY"
+            modal-style="PickerModal"
+            modal-text-style="PickerModal__text"
+            name="date1"
+            mode="spinner"
+            placeholder="Select date"
+            placeholderTextColor="#8D9494"
+            trigger="focus"
+            action="replace-inner"
+            target="container1"
+            href="#dateFieldFocused"
+          >
+            <behavior
+              trigger="focus"
+              action="append"
+              target="container1"
+              href="#dateFieldFocused2"
+            />
+          </date-field>
+        </view>
       </view>
       <view hide="true">
         <text id="field1Focused" style="Tip">Field 1 focused</text>
         <text id="field2Focused" style="Tip">Field 2 focused</text>
         <text id="area1Focused" style="Tip">Area 1 focused</text>
         <text id="area2Focused" style="Tip">Area 2 focused</text>
+        <text id="pickerFocused" style="Tip">Picker field focused</text>
+        <text id="pickerFocused2" style="Tip">!</text>
+        <text id="dateFieldFocused" style="Tip">Date field focused</text>
+        <text id="dateFieldFocused2" style="Tip">!</text>
       </view>
     </body>
   </screen>

diff --git a/schema/core.xsd b/schema/core.xsd
@@ -928,6 +928,11 @@
 
   <xs:element name="date-field">
     <xs:complexType>
+      <xs:sequence>
+        <xs:choice minOccurs="0" maxOccurs="unbounded">
+          <xs:element ref="hv:behavior" />
+        </xs:choice>
+      </xs:sequence>
       <xs:attribute name="name" use="required" type="xs:string" />
       <xs:attribute name="label-format" type="xs:string" />
       <xs:attribute name="mode">
@@ -951,12 +956,16 @@
       <xs:attribute name="id" type="hv:ID" />
       <xs:attribute name="key" type="hv:KEY" />
       <xs:attribute name="hide" type="xs:boolean" />
+      <xs:attributeGroup ref="hv:behaviorAttributes" />
     </xs:complexType>
   </xs:element>
 
   <xs:element name="picker-field">
     <xs:complexType>
       <xs:sequence>
+        <xs:choice minOccurs="0" maxOccurs="unbounded">
+          <xs:element ref="hv:behavior" />
+        </xs:choice>
         <xs:element minOccurs="1" maxOccurs="unbounded" ref="hv:picker-item" />
       </xs:sequence>
       <xs:attribute name="name" use="required" type="xs:string" />
@@ -972,6 +981,7 @@
       <xs:attribute name="id" type="hv:ID" />
       <xs:attribute name="key" type="hv:KEY" />
       <xs:attribute name="hide" type="xs:boolean" />
+      <xs:attributeGroup ref="hv:behaviorAttributes" />
     </xs:complexType>
   </xs:element>