mirror of
https://github.com/zebrajr/react.git
synced 2026-01-15 12:15:22 +00:00
a4ead704ba
Builds on top of the existing Playwright tests to plug in the test selector API: https://gist.github.com/bvaughn/d3c8b8842faf2ac2439bb11773a19cec My goals in doing this are to... 1. Experiment with the new API to see what works and what doesn't. 2. Add some test selector attributes (and remove DOM-structure based selectors). 3. Focus the tests on DevTools itself (rather than the test app). I also took this opportunity to add a few new test cases– like named hooks, editable props, component search, and profiling- just to play around more with the Playwright API. Relates to issue #22646
102 lines
2.4 KiB
JavaScript
102 lines
2.4 KiB
JavaScript
/**
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow
|
|
*/
|
|
|
|
import * as React from 'react';
|
|
import {useCallback, useState} from 'react';
|
|
import AutoSizeInput from './NativeStyleEditor/AutoSizeInput';
|
|
import styles from './EditableName.css';
|
|
|
|
type Type = 'props' | 'state' | 'context' | 'hooks';
|
|
type OverrideNameFn = (
|
|
oldName: Array<string | number>,
|
|
newName: Array<string | number>,
|
|
) => void;
|
|
|
|
type EditableNameProps = {|
|
|
allowEmpty?: boolean,
|
|
allowWhiteSpace?: boolean,
|
|
autoFocus?: boolean,
|
|
className?: string,
|
|
initialValue?: string,
|
|
overrideName: OverrideNameFn,
|
|
path: Array<string | number>,
|
|
type: Type,
|
|
|};
|
|
|
|
export default function EditableName({
|
|
allowEmpty = false,
|
|
allowWhiteSpace = false,
|
|
autoFocus = false,
|
|
className = '',
|
|
initialValue = '',
|
|
overrideName,
|
|
path,
|
|
type,
|
|
}: EditableNameProps) {
|
|
const [editableName, setEditableName] = useState(initialValue);
|
|
const [isValid, setIsValid] = useState(false);
|
|
|
|
const handleChange = useCallback(
|
|
({target}) => {
|
|
let value = target.value;
|
|
if (!allowWhiteSpace) {
|
|
value = value.trim();
|
|
}
|
|
|
|
if (allowEmpty || value !== '') {
|
|
setIsValid(true);
|
|
} else {
|
|
setIsValid(false);
|
|
}
|
|
|
|
setEditableName(value);
|
|
},
|
|
[overrideName],
|
|
);
|
|
|
|
const handleKeyDown = useCallback(
|
|
event => {
|
|
// Prevent keydown events from e.g. change selected element in the tree
|
|
event.stopPropagation();
|
|
|
|
switch (event.key) {
|
|
case 'Enter':
|
|
case 'Tab':
|
|
if (isValid) {
|
|
const basePath = path.slice(0, path.length - 1);
|
|
overrideName(
|
|
[...basePath, initialValue],
|
|
[...basePath, editableName],
|
|
);
|
|
}
|
|
break;
|
|
case 'Escape':
|
|
setEditableName(initialValue);
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
},
|
|
[editableName, setEditableName, isValid, initialValue, overrideName],
|
|
);
|
|
|
|
return (
|
|
<AutoSizeInput
|
|
autoFocus={autoFocus}
|
|
className={[styles.Input, className].join(' ')}
|
|
onChange={handleChange}
|
|
onKeyDown={handleKeyDown}
|
|
placeholder="new entry"
|
|
testName="EditableName"
|
|
type="text"
|
|
value={editableName}
|
|
/>
|
|
);
|
|
}
|