feat(junipero): allow to dissociate field title parsing from options

p3ol · Feb 22, 2022 · 01cc0ed · 01cc0ed
1 parent 973b9c6
commit 01cc0ed
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 1 deletion.
diff --git a/packages/junipero/lib/SelectField/index.js b/packages/junipero/lib/SelectField/index.js
@@ -44,7 +44,9 @@ const SelectField = forwardRef(({
   onChange = () => {},
   onFocus = () => {},
   onToggle = () => {},
+  dissociateFieldParsing = false,
   parseTitle = val => val?.toString?.(),
+  parseFieldTitle = val => val?.toString?.(),
   parseValue = val => val,
   validate = val => !required || typeof val !== 'undefined',
   ...rest
@@ -297,7 +299,12 @@ const SelectField = forwardRef(({
             placeholder={placeholder}
             label={label}
             empty={!state.value}
-            value={parseTitle(state.value || '')}
+            value={
+              (dissociateFieldParsing
+                ? parseFieldTitle
+                : parseTitle
+              )(state.value || '')
+            }
             valid={state.valid}
             focused={state.focused}
             onMouseDown={onMouseDown_}
@@ -390,7 +397,9 @@ SelectField.propTypes = {
   onFocus: PropTypes.func,
   onToggle: PropTypes.func,
   opened: PropTypes.bool,
+  dissociateFieldParsing: PropTypes.bool,
   parseTitle: PropTypes.func,
+  parseFieldTitle: PropTypes.func,
   parseValue: PropTypes.func,
   placeholder: PropTypes.oneOfType([
     PropTypes.string,

diff --git a/packages/junipero/lib/SelectField/index.stories.js b/packages/junipero/lib/SelectField/index.stories.js
@@ -146,3 +146,13 @@ export const alwaysOpened = () => (
     onChange={action('change')}
   />
 );
+
+export const withParsedFieldTitle = () => (
+  <SelectField
+    options={options}
+    placeholder="Choose one item"
+    dissociateFieldParsing={true}
+    parseFieldTitle={o => o && `Custom title: ${o}`}
+    onChange={action('change')}
+  />
+);
diff --git a/packages/junipero/lib/SelectField/index.test.js b/packages/junipero/lib/SelectField/index.test.js
@@ -42,6 +42,28 @@ describe('<SelectField />', () => {
     expect(ref.current.internalValue).toBe('Two');
   });
 
+  it('should dissociate field title parsing from options parsing', () => {
+    const ref = createRef();
+    const component = mount(
+      <SelectField
+        ref={ref}
+        value="One"
+        options={options}
+        dissociateFieldParsing={true}
+        parseFieldTitle={o => o && `Custom parsed title: ${o}`}
+        parseTitle={o => o}
+      />
+    );
+    expect(ref.current.internalValue).toBe('One');
+    expect(component.find('.value').text()).toBe(
+      'Custom parsed title: One'
+    );
+    component.find('.base').simulate('focus');
+    expect(ref.current.opened).toBe(true);
+    expect(component.find('.dropdown-item').at(0).find('a').text())
+      .toBe('One');
+  });
+
   it('should close menu when disabled prop changes', () => {
     const ref = createRef();
     const component = mount(<SelectField ref={ref} options={options} />);