Row() — react Function Reference

Architecture documentation for the Row() function in StyleEditor.js from the react codebase.

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ Row() — react Function Reference

Dependency Diagram

graph TD
  c07da8d2_540c_1bfe_de10_e8bba4bae3e2["Row()"]
  a7173e0c_ba07_009a_1ada_f864062596b5["StyleEditor.js"]
  c07da8d2_540c_1bfe_de10_e8bba4bae3e2 -->|defined in| a7173e0c_ba07_009a_1ada_f864062596b5
  style c07da8d2_540c_1bfe_de10_e8bba4bae3e2 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js lines 157–247

function Row({
  attribute,
  attributePlaceholder,
  changeAttribute,
  changeValue,
  validAttributes,
  value,
  valuePlaceholder,
}: RowProps) {
  // TODO (RN style editor) Use @reach/combobox to auto-complete attributes.
  // The list of valid attributes would need to be injected by RN backend,
  // which would need to require them from ReactNativeViewViewConfig "validAttributes.style" keys.
  // This would need to degrade gracefully for react-native-web,
  // although we could let it also inject a custom set of allowed attributes.

  const [localAttribute, setLocalAttribute] = useState(attribute);
  const [localValue, setLocalValue] = useState(JSON.stringify(value));
  const [isAttributeValid, setIsAttributeValid] = useState(true);
  const [isValueValid, setIsValueValid] = useState(true);

  // $FlowFixMe[missing-local-annot]
  const validateAndSetLocalAttribute = newAttribute => {
    const isValid =
      newAttribute === '' ||
      validAttributes === null ||
      validAttributes.indexOf(newAttribute) >= 0;

    setLocalAttribute(newAttribute);
    setIsAttributeValid(isValid);
  };

  // $FlowFixMe[missing-local-annot]
  const validateAndSetLocalValue = newValue => {
    let isValid = false;
    try {
      JSON.parse(sanitizeForParse(newValue));
      isValid = true;
    } catch (error) {}

    setLocalValue(newValue);
    setIsValueValid(isValid);
  };

  const resetAttribute = () => {
    setLocalAttribute(attribute);
  };

  const resetValue = () => {
    setLocalValue(value);
  };

  const submitValueChange = () => {
    if (isAttributeValid && isValueValid) {
      const parsedLocalValue = JSON.parse(sanitizeForParse(localValue));
      if (value !== parsedLocalValue) {
        changeValue(attribute, parsedLocalValue);
      }
    }
  };

  const submitAttributeChange = () => {
    if (isAttributeValid && isValueValid) {
      if (attribute !== localAttribute) {
        changeAttribute(attribute, localAttribute, value);
      }
    }
  };

  return (
    <div className={styles.Row}>
      <Field
        className={isAttributeValid ? styles.Attribute : styles.Invalid}
        onChange={validateAndSetLocalAttribute}
        onReset={resetAttribute}
        onSubmit={submitAttributeChange}
        placeholder={attributePlaceholder}
        value={localAttribute}
      />
      :&nbsp;
      <Field
        className={isValueValid ? styles.Value : styles.Invalid}