Merge pull request #31 from streamich/api-improvements

Api improvements
streamich · Jul 12, 2024 · f860dd6 · f860dd6
2 parents 54fa412 + c6cfaef
commit f860dd6
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 16 deletions.
diff --git a/src/ClickableJsonCrdt/JsonCrdtRegion.tsx b/src/ClickableJsonCrdt/JsonCrdtRegion.tsx
@@ -25,7 +25,7 @@ export interface JsonCrdtRegionProps {
 
 export const JsonCrdtRegion: React.FC<JsonCrdtRegionProps> = ({node, editing, children}) => {
   const {model} = useJsonCrdt();
-  const {compact} = useStyles();
+  const {compact, readonly} = useStyles();
   const {focused, focus, pointed, point} = useFocus();
   const nodeId = id(node);
   const [edit, setEdit] = React.useState(false);
@@ -81,7 +81,7 @@ export const JsonCrdtRegion: React.FC<JsonCrdtRegionProps> = ({node, editing, ch
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
       onDelete={
-        editing
+        editing || readonly
           ? undefined
           : !isFocused || isTombstone
             ? undefined
@@ -108,7 +108,7 @@ export const JsonCrdtRegion: React.FC<JsonCrdtRegionProps> = ({node, editing, ch
                     : undefined
       }
       onEdit={
-        editing
+        editing || readonly
           ? undefined
           : isFocused &&
               (parentNodeType === 'obj' ||

diff --git a/src/ClickableJsonCrdt/index.stories.tsx b/src/ClickableJsonCrdt/index.stories.tsx
@@ -70,7 +70,14 @@ const doc2 = {
 };
 
 export const Primary: StoryObj<typeof meta> = {
-  render: () => <Demo view={schema1} />,
+  render: () => <Demo view={schema1} onFocus={(id) => console.log('onFocus', id)} />,
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const Readonly: StoryObj<typeof meta> = {
+  render: () => <Demo view={schema1} readonly />,
   parameters: {
     layout: 'fullscreen',
   },

diff --git a/src/ClickableJsonCrdt/index.tsx b/src/ClickableJsonCrdt/index.tsx
@@ -3,7 +3,7 @@ import {context as crdt} from './context';
 import {StyleContextValue, context as styles} from '../context/style';
 import {NodeRef, nodeRef} from './NodeRef';
 import {Root} from '../Root';
-import {FocusProvider} from '../context/focus';
+import {FocusProvider, FocusProviderProps} from '../context/focus';
 import {
   ConNode,
   ValNode,
@@ -34,7 +34,7 @@ const render = (node: NodeRef<JsonNode>): React.ReactNode => {
   return '∅';
 };
 
-export interface ClickableJsonCrdtProps extends StyleContextValue {
+export interface ClickableJsonCrdtProps extends StyleContextValue, Pick<FocusProviderProps, 'onFocus'> {
   /**
    * The JSON CRDT model to display.
    */
@@ -47,13 +47,13 @@ export interface ClickableJsonCrdtProps extends StyleContextValue {
 }
 
 export const ClickableJsonCrdt: React.FC<ClickableJsonCrdtProps> = (props) => {
-  const {model, compact, readonly, showRoot} = props;
+  const {model, compact, readonly, showRoot, onFocus} = props;
   const node = React.useMemo(() => nodeRef(showRoot ? model.root : model.root.node(), null, ''), [model]);
 
   return (
     <styles.Provider value={{compact, readonly}}>
       <crdt.Provider value={{model, render}}>
-        <FocusProvider>
+        <FocusProvider onFocus={onFocus}>
           <Root>{render(node)}</Root>
         </FocusProvider>
       </crdt.Provider>

diff --git a/src/ClickableJsonCrdt/nodes/JsonCrdtArrNode/index.tsx b/src/ClickableJsonCrdt/nodes/JsonCrdtArrNode/index.tsx
@@ -7,13 +7,15 @@ import {JsonCrdtProperty} from '../../JsonCrdtProperty';
 import {JsonCrdtObjectLayout} from '../../JsonCrdtObjectLayout';
 import {useRerender} from '../../hooks';
 import {InsertElement} from './InsertElement';
+import {useStyles} from '../../../context/style';
 import type {ArrNode} from 'json-joy/lib/json-crdt';
 
 export interface JsonCrdtArrNodeProps {
   node: NodeRef<ArrNode>;
 }
 
 export const JsonCrdtArrNode: React.FC<JsonCrdtArrNodeProps> = ({node}) => {
+  const {readonly} = useStyles();
   const {render} = useJsonCrdt();
   useRerender(node);
 
@@ -27,7 +29,7 @@ export const JsonCrdtArrNode: React.FC<JsonCrdtArrNodeProps> = ({node}) => {
     const key = child.id.sid + '.' + child.id.time + '.' + i;
     entries.push(
       <React.Fragment key={key}>
-        <InsertElement key={key} node={node} index={i} />
+        {!readonly && <InsertElement key={key} node={node} index={i} />}
         <span className={css.line}>{render(childNodeRef)}</span>
       </React.Fragment>,
     );
@@ -43,7 +45,7 @@ export const JsonCrdtArrNode: React.FC<JsonCrdtArrNodeProps> = ({node}) => {
         brackets={['[', ']']}
       >
         {entries}
-        <InsertElement key={node.node.length()} node={node} index={node.node.length()} />
+        {!readonly && <InsertElement key={node.node.length()} node={node} index={node.node.length()} />}
       </JsonCrdtObjectLayout>
     </JsonCrdtRegion>
   );

diff --git a/src/ClickableJsonCrdt/nodes/JsonCrdtObjNode/index.tsx b/src/ClickableJsonCrdt/nodes/JsonCrdtObjNode/index.tsx
@@ -9,6 +9,7 @@ import {JsonCrdtObjectLayout} from '../../JsonCrdtObjectLayout';
 import {useRerender} from '../../hooks';
 import {AddKey} from './AddKey';
 import {Tombstones} from './Tombstones';
+import {useStyles} from '../../../context/style';
 
 const isTombstone = (node: JsonNode) => node instanceof ConNode && node.val === undefined;
 
@@ -17,6 +18,7 @@ export interface JsonCrdtObjNodeProps {
 }
 
 export const JsonCrdtObjNode: React.FC<JsonCrdtObjNodeProps> = ({node}) => {
+  const {readonly} = useStyles();
   const {render} = useJsonCrdt();
   useRerender(node);
 
@@ -42,7 +44,7 @@ export const JsonCrdtObjNode: React.FC<JsonCrdtObjNodeProps> = ({node}) => {
         collapsedView={!!entries.length && entries.length}
       >
         {entries}
-        <AddKey node={node} />
+        {!readonly && <AddKey node={node} />}
         {!!tombstones.length && <Tombstones tombstones={tombstones} />}
       </JsonCrdtObjectLayout>
     </JsonCrdtRegion>

diff --git a/src/ClickableJsonCrdt/nodes/JsonCrdtStrNode/index.tsx b/src/ClickableJsonCrdt/nodes/JsonCrdtStrNode/index.tsx
@@ -35,7 +35,7 @@ export interface JsonCrdtStrNodeProps {
 
 export const JsonCrdtStrNode: React.FC<JsonCrdtStrNodeProps> = ({node}) => {
   const [t] = useT();
-  const {formal} = useStyles();
+  const {formal, readonly} = useStyles();
   const {focused} = useFocus();
   const [editing, setEditing] = React.useState(false);
 
@@ -49,7 +49,7 @@ export const JsonCrdtStrNode: React.FC<JsonCrdtStrNodeProps> = ({node}) => {
       ) : (
         <span
           className={atomClass + (isFocused ? atomFocusedClass : '')}
-          onClick={isFocused ? () => setEditing(true) : undefined}
+          onClick={isFocused && !readonly ? () => setEditing(true) : undefined}
         >
           <JsonAtom value={node.node.view()} />
           <span className={css.tooltip}>{t('Edit')}</span>

diff --git a/src/ClickableJsonCrdt/nodes/JsonCrdtVecNode/index.tsx b/src/ClickableJsonCrdt/nodes/JsonCrdtVecNode/index.tsx
@@ -8,12 +8,14 @@ import {JsonCrdtObjectLayout} from '../../JsonCrdtObjectLayout';
 import {useRerenderModel} from '../../hooks';
 import type {VecNode} from 'json-joy/lib/json-crdt';
 import {PushElement} from './PushElement';
+import {useStyles} from '../../../context/style';
 
 export interface JsonCrdtVecNodeProps {
   node: NodeRef<VecNode>;
 }
 
 export const JsonCrdtVecNode: React.FC<JsonCrdtVecNodeProps> = ({node}) => {
+  const {readonly} = useStyles();
   const {render} = useJsonCrdt();
   useRerenderModel();
 
@@ -40,7 +42,7 @@ export const JsonCrdtVecNode: React.FC<JsonCrdtVecNodeProps> = ({node}) => {
         header={<span style={{opacity: 0.5, display: 'inline-block', margin: '0.25em 0 0 -0.3em'}}>→</span>}
       >
         {entries}
-        <PushElement node={node} />
+        {!readonly && <PushElement node={node} />}
       </JsonCrdtObjectLayout>
     </JsonCrdtRegion>
   );

diff --git a/src/context/focus.tsx b/src/context/focus.tsx
@@ -16,10 +16,23 @@ export const useIsFocused = (node: string) => {
   return focused === node;
 };
 
-export const FocusProvider: React.FC<{children: React.ReactNode}> = ({children}) => {
-  const [focused, focus] = React.useState<string | null>(null);
+export interface FocusProviderProps {
+  children: React.ReactNode;
+  onFocus?: (id: string | null) => void;
+}
+
+export const FocusProvider: React.FC<FocusProviderProps> = ({children, onFocus}) => {
+  const [focused, _focus] = React.useState<string | null>(null);
   const [pointed, point] = React.useState<string | null>(null);
 
+  const focus = React.useCallback(
+    (node: string | null) => {
+      _focus(node);
+      onFocus?.(node);
+    },
+    [onFocus],
+  );
+
   React.useEffect(() => {
     const listener = (e: KeyboardEvent) => {
       const active = document.activeElement;