4919408640

Build # 4919408640

Build Type

push

github

Committed by GitHub

Commit Message

Merge pull request #6 from adobe/path_changes

Run Details

218 of 375 branches covered (58.13%)

Branch coverage included in aggregate %.

124 of 124 new or added lines in 8 files covered. (100.0%)

395 of 561 relevant lines covered (70.41%)

28.44 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

3.7

/src/view/components/wrappedComboBox.jsx

/*
Copyright 2022 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License.
*/

/* eslint-disable react/jsx-props-no-spreading */

import React from 'react';
import { useFormContext, Controller } from 'react-hook-form';
import { ActionButton, ComboBox, Item } from '@adobe/react-spectrum';
import { useTreeData } from 'react-stately';
import Data from '@spectrum-icons/workflow/Data';
import ValidationWrapper from './validationWrapper';

const addDataElementToken = (value, dataElementToken) =>
  `${value || ''}${dataElementToken}`;

const openDataElementSelector = (tokenize, fieldState, onInputChange) => () => {
  // Whenever we're dealing with a data element token, we add it to whatever the existing value
  // is. If we're not dealing with a token, we replace the value entirely. This is just due
  // to how we want the UX to flow.
  window.extensionBridge
    .openDataElementSelector({
      tokenize
    })
    .then((dataElement) => {
      const newValue = tokenize
        ? addDataElementToken(fieldState.inputValue, dataElement)
        : dataElement;

      onInputChange(newValue);
    });
};

export default function WrappedComboBoxField({
  name: componentName,
  onSelectionChange: componentOnSelectionChange,
  onInputChange: componentOnInputChange,
  onBlur: componentOnBlur,
  supportDataElement,
  defaultValue = '',
  defaultItems = [],
  width = 'auto',
  ...rest
}) {
  const methods = useFormContext();
  const hasLabel = Boolean(rest.label);
  const { watch } = methods;

  const list = useTreeData({
    initialItems: defaultItems
  });

  const initialValue = watch(componentName);

  const [fieldState, setFieldState] = React.useState({
    selectedKey: list.getItem(initialValue)?.value.id || '',
    inputValue: initialValue
  });

  return (
    <Controller
      name={componentName}
      defaultValue={defaultValue}
      render={({ field: { onChange, onBlur, name, ref } }) => {
        const onInputChange = (v) => {
          setFieldState((prevState) => ({
            inputValue: v,
            selectedKey: v === '' ? null : prevState.selectedKey
          }));

          onChange(v);

          if (componentOnInputChange) {
            componentOnInputChange(v);
          }
        };

        return (
          <ValidationWrapper width={width}>
            <ComboBox
              {...rest}
              width={width}
              ref={ref}
              name={name}
              onBlur={(e) => {
                onBlur(e);
                if (componentOnBlur) {
                  componentOnBlur(e);
                }
              }}
              defaultItems={list.items}
              selectedKey={fieldState.selectedKey}
              inputValue={fieldState.inputValue}
              onSelectionChange={(key) => {
                setFieldState((prevState) => {
                  const inputValue =
                    list.getItem(key)?.value.name ??
                    (rest.allowsCustomValue ? prevState.inputValue : '');
                  onChange(inputValue);

                  return {
                    inputValue,
                    selectedKey: key
                  };
                });

                if (componentOnSelectionChange) {
                  componentOnSelectionChange(key);
                }
              }}
              onInputChange={onInputChange}
            >
              {(item) => <Item>{item.value.name}</Item>}
            </ComboBox>

            {supportDataElement && (
              <ActionButton
                aria-label="Open data element selector"
                marginStart="size-65"
                marginTop={hasLabel ? 'size-300' : ''}
                onPress={openDataElementSelector(
                  supportDataElement,
                  fieldState,
                  onInputChange
                )}
              >
                <Data />
              </ActionButton>
            )}
          </ValidationWrapper>
        );
      }}
      {...rest}
    />
  );
}

1	/*
2	Copyright 2022 Adobe. All rights reserved.
3	This file is licensed to you under the Apache License, Version 2.0 (the "License");
4	you may not use this file except in compliance with the License. You may obtain a copy
5	of the License at http://www.apache.org/licenses/LICENSE-2.0
6	Unless required by applicable law or agreed to in writing, software distributed under
7	the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
8	OF ANY KIND, either express or implied. See the License for the specific language
9	governing permissions and limitations under the License.
10	*/
11
12	/* eslint-disable react/jsx-props-no-spreading */
13
14	import React from 'react';
15	import { useFormContext, Controller } from 'react-hook-form';
16	import { ActionButton, ComboBox, Item } from '@adobe/react-spectrum';
17	import { useTreeData } from 'react-stately';
18	import Data from '@spectrum-icons/workflow/Data';
19	import ValidationWrapper from './validationWrapper';
20
21	const addDataElementToken = (value, dataElementToken) =>	1✔
22	`${value \|\| ''}${dataElementToken}`;	×
23
24	const openDataElementSelector = (tokenize, fieldState, onInputChange) => () => {	1✔
25	// Whenever we're dealing with a data element token, we add it to whatever the existing value
26	// is. If we're not dealing with a token, we replace the value entirely. This is just due
27	// to how we want the UX to flow.
28	window.extensionBridge	×
29	.openDataElementSelector({
30	tokenize
31	})
32	.then((dataElement) => {
33	const newValue = tokenize	×
34	? addDataElementToken(fieldState.inputValue, dataElement)
35	: dataElement;
36
37	onInputChange(newValue);	×
38	});
39	};
40
41	export default function WrappedComboBoxField({
42	name: componentName,
43	onSelectionChange: componentOnSelectionChange,
44	onInputChange: componentOnInputChange,
45	onBlur: componentOnBlur,
46	supportDataElement,
47	defaultValue = '',	×
48	defaultItems = [],	×
49	width = 'auto',	×
50	...rest
51	}) {
52	const methods = useFormContext();	×
53	const hasLabel = Boolean(rest.label);	×
54	const { watch } = methods;	×
55
56	const list = useTreeData({	×
57	initialItems: defaultItems
58	});
59
60	const initialValue = watch(componentName);	×
61
62	const [fieldState, setFieldState] = React.useState({	×
63	selectedKey: list.getItem(initialValue)?.value.id \|\| '',	×
64	inputValue: initialValue
65	});
66
67	return (	×
68	<Controller
69	name={componentName}
70	defaultValue={defaultValue}
71	render={({ field: { onChange, onBlur, name, ref } }) => {
72	const onInputChange = (v) => {	×
73	setFieldState((prevState) => ({	×
74	inputValue: v,
75	selectedKey: v === '' ? null : prevState.selectedKey	×
76	}));
77
78	onChange(v);	×
79
80	if (componentOnInputChange) {	×
81	componentOnInputChange(v);	×
82	}
83	};
84
85	return (	×
86	<ValidationWrapper width={width}>
87	<ComboBox
88	{...rest}
89	width={width}
90	ref={ref}
91	name={name}
92	onBlur={(e) => {
93	onBlur(e);	×
94	if (componentOnBlur) {	×
95	componentOnBlur(e);	×
96	}
97	}}
98	defaultItems={list.items}
99	selectedKey={fieldState.selectedKey}
100	inputValue={fieldState.inputValue}
101	onSelectionChange={(key) => {
102	setFieldState((prevState) => {	×
103	const inputValue =
104	list.getItem(key)?.value.name ??	×
105	(rest.allowsCustomValue ? prevState.inputValue : '');	×
106	onChange(inputValue);	×
107
108	return {	×
109	inputValue,
110	selectedKey: key
111	};
112	});
113
114	if (componentOnSelectionChange) {	×
115	componentOnSelectionChange(key);	×
116	}
117	}}
118	onInputChange={onInputChange}
119	>
120	{(item) => <Item>{item.value.name}</Item>}	×
121	</ComboBox>
122
123	{supportDataElement && (	×
124	<ActionButton
125	aria-label="Open data element selector"
126	marginStart="size-65"
127	marginTop={hasLabel ? 'size-300' : ''}	×
128	onPress={openDataElementSelector(
129	supportDataElement,
130	fieldState,
131	onInputChange
132	)}
133	>
134	<Data />
135	</ActionButton>
136	)}
137	</ValidationWrapper>
138	);
139	}}
140	{...rest}
141	/>
142	);
143	}

adobe / reactor-extension-core-edge / 4919408640

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous