Function EditableThing

src/ui-solid-dom/common/components.tsx:146–309

(props: {
  readonly thing: Cell | Value | undefined;
  readonly onThingChange: (thing: Cell | Value) => void;
  readonly class: string;
  readonly hasSchema: (() => boolean) | undefined;
  readonly showType?: boolean;
})

};

export const EditableThing = (props: {
  readonly thing: Cell | Value | undefined;
  readonly onThingChange: (thing: Cell | Value) => void;
  readonly class: string;
  readonly hasSchema: (() => boolean) | undefined;
  readonly showType?: boolean;
}) => {
  const [thingType, setThingType] = createSignal<CellOrValueType>();
  const [currentThing, setCurrentThing] = createSignal<Cell | Value>();
  const [stringThing, setStringThing] = createSignal<string>();
  const [numberThing, setNumberThing] = createSignal<number>();
  const [booleanThing, setBooleanThing] = createSignal<boolean>();
  const [objectThing, setObjectThing] = createSignal<string>('{}');
  const [arrayThing, setArrayThing] = createSignal<string>('[]');

  const [objectClassName, setObjectClassName] = createSignal<string>('');
  const [arrayClassName, setArrayClassName] = createSignal<string>('');

  createRenderEffect(() => {
    const thing = props.thing;
    if (untrack(currentThing) !== thing) {
      setThingType(getCellOrValueType(thing));
      setCurrentThing(() => thing);
      if (isObject(thing)) {
        setObjectThing(jsonString(thing));
      } else if (isArray(thing)) {
        setArrayThing(jsonString(thing));
      } else {
        setStringThing(string(thing));
        setNumberThing(number(thing) || 0);
        setBooleanThing(boolean(thing));
      }
    }
  });

  const handleThingChange = <Thing extends Cell | Value>(
    thing: Thing,
    setTypedThing: (thing: Thing) => void,
  ) => {
    setTypedThing(thing);
    setCurrentThing(() => thing);
    props.onThingChange(thing);
  };

  const handleJsonThingChange = (
    value: string,
    setTypedThing: (value: string) => void,
    isThing: (thing: any) => boolean,
    setTypedClassName: (className: string) => void,
  ) => {
    setTypedThing(value);
    try {
      const object = jsonParse(value);
      if (isThing(object)) {
        setCurrentThing(() => object);
        props.onThingChange(object);
        setTypedClassName('');
      }