lkb-fields-document 1.0.0

package/dist/form-from-preview-5df6e492.node.esm.js

@@ -0,0 +1,508 @@
+import { useList } from 'lkb-core/admin-ui/context';
+import { Field as Field$1 } from 'lkb-core/fields/types/relationship/views';
+import { GroupIndicatorLine } from 'lkb-core/admin-ui/utils';
+import { ActionButton, ButtonGroup, Button } from '@keystar/ui/button';
+import { DialogContainer, Dialog } from '@keystar/ui/dialog';
+import { Field } from '@keystar/ui/field';
+import { Heading, Text } from '@keystar/ui/typography';
+import { Icon } from '@keystar/ui/icon';
+import { ListView, Item } from '@keystar/ui/list-view';
+import { useDragAndDrop, move } from '@keystar/ui/drag-and-drop';
+import { TooltipTrigger, Tooltip } from '@keystar/ui/tooltip';
+import { VStack, HStack } from '@keystar/ui/layout';
+import { trash2Icon } from '@keystar/ui/icon/icons/trash2Icon';
+import { memo, useState, useMemo, useRef, useCallback, useEffect } from 'react';
+import { p as clientSideValidateProp, q as createGetPreviewProps, a as assertNever, s as setKeysForArrayValue, f as getKeysForArrayValue } from './utils-200ff260.node.esm.js';
+import { Content } from '@keystar/ui/slots';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+const previewPropsToValueConverter = {
+  child() {
+    return null;
+  },
+  form(props) {
+    return props.value;
+  },
+  array(props) {
+    const values = props.elements.map(x => previewPropsToValue(x));
+    setKeysForArrayValue(values, props.elements.map(x => x.key));
+    return values;
+  },
+  conditional(props) {
+    return {
+      discriminant: props.discriminant,
+      value: previewPropsToValue(props.value)
+    };
+  },
+  object(props) {
+    return Object.fromEntries(Object.entries(props.fields).map(([key, val]) => [key, previewPropsToValue(val)]));
+  },
+  relationship(props) {
+    return props.value;
+  }
+};
+const valueToUpdaters = {
+  child() {
+    return undefined;
+  },
+  form(value) {
+    return value;
+  },
+  array(value, schema) {
+    const keys = getKeysForArrayValue(value);
+    return value.map((x, i) => ({
+      key: keys[i],
+      value: valueToUpdater(x, schema.element)
+    }));
+  },
+  conditional(value, schema) {
+    return {
+      discriminant: value.discriminant,
+      value: valueToUpdater(value.value, schema.values[value.discriminant.toString()])
+    };
+  },
+  object(value, schema) {
+    return Object.fromEntries(Object.entries(schema.fields).map(([key, schema]) => [key, valueToUpdater(value[key], schema)]));
+  },
+  relationship(value) {
+    return value;
+  }
+};
+function previewPropsToValue(props) {
+  return previewPropsToValueConverter[props.schema.kind](props);
+}
+function valueToUpdater(value, schema) {
+  return valueToUpdaters[schema.kind](value, schema);
+}
+
+// this exists because for props.schema.kind === 'form', ts doesn't narrow props, only props.schema
+function isKind(props, kind) {
+  return props.schema.kind === kind;
+}
+function previewPropsOnChange(value, props) {
+  // child fields can't be updated through preview props, so we don't do anything here
+  if (isKind(props, 'child')) return;
+  if (isKind(props, 'form') || isKind(props, 'relationship') || isKind(props, 'object') || isKind(props, 'array')) {
+    props.onChange(valueToUpdater(value, props.schema));
+    return;
+  }
+  if (isKind(props, 'conditional')) {
+    const updater = valueToUpdater(value, props.schema);
+    props.onChange(updater.discriminant, updater.value);
+    return;
+  }
+  assertNever(props);
+}
+function ArrayFieldPreview(props) {
+  const {
+    elements,
+    onChange,
+    schema
+  } = props;
+  const {
+    label
+  } = schema;
+  const [modalState, setModalState] = useState('closed');
+  return /*#__PURE__*/jsx(Field, {
+    label: label,
+    labelElementType: "span",
+    children: groupProps => /*#__PURE__*/jsxs(VStack, {
+      gap: "medium",
+      role: "group",
+      minWidth: 0,
+      ...groupProps,
+      children: [/*#__PURE__*/jsx(ArrayFieldListView, {
+        ...props,
+        "aria-label": label !== null && label !== void 0 ? label : '',
+        onOpenItem: index => {
+          const element = elements.at(index);
+          if (!element) return;
+          setModalState({
+            index,
+            value: previewPropsToValue(element),
+            forceValidation: false
+          });
+        }
+      }), /*#__PURE__*/jsx(ActionButton, {
+        alignSelf: "start",
+        autoFocus: props.autoFocus,
+        onPress: () => {
+          onChange([...elements.map(x => ({
+            key: x.key
+          })), {
+            key: undefined
+          }]);
+        },
+        children: "\u6DFB\u52A0\u9009\u9879"
+      }), /*#__PURE__*/jsx(DialogContainer, {
+        onDismiss: () => {
+          setModalState('closed');
+        },
+        children: (() => {
+          if (props.schema.element.kind === 'child') return;
+          if (modalState === 'closed') return;
+          const element = elements.at(modalState.index);
+          if (!element) return;
+          const onModalChange = cb => {
+            setModalState(state => {
+              if (state === 'closed') return state;
+              return {
+                index: modalState.index,
+                forceValidation: state.forceValidation,
+                value: cb(state.value)
+              };
+            });
+          };
+          return /*#__PURE__*/jsxs(Dialog, {
+            children: [/*#__PURE__*/jsx(Heading, {
+              children: "\u7F16\u8F91\u9009\u9879"
+            }), /*#__PURE__*/jsx(Content, {
+              children: /*#__PURE__*/jsx(ArrayFieldItemModalContent, {
+                onChange: onModalChange,
+                schema: element.schema /* TODO FIXME */,
+                value: modalState.value
+              })
+            }), /*#__PURE__*/jsxs(ButtonGroup, {
+              children: [/*#__PURE__*/jsx(Button, {
+                prominence: "low",
+                onPress: () => {
+                  setModalState('closed');
+                },
+                children: "\u53D6\u6D88"
+              }), /*#__PURE__*/jsx(Button, {
+                prominence: "high",
+                onPress: () => {
+                  if (!clientSideValidateProp(element.schema, modalState.value)) {
+                    setModalState(state => ({
+                      ...state /* TODO FIXME */,
+                      forceValidation: true
+                    }));
+                    return;
+                  }
+                  previewPropsOnChange(modalState.value, element);
+                  setModalState('closed');
+                },
+                children: "\u786E\u5B9A"
+              })]
+            })]
+          });
+        })()
+      })]
+    })
+  });
+}
+function RelationshipFieldPreview(props) {
+  const {
+    autoFocus,
+    onChange,
+    schema,
+    value
+  } = props;
+  const {
+    label,
+    listKey,
+    many
+  } = schema;
+  const list = useList(listKey);
+  const formValue = function () {
+    if (many) {
+      if (value !== null && !('length' in value)) throw TypeError('bad value');
+      const manyValue = value === null ? [] : value.map(x => ({
+        id: x.id,
+        label: x.label || x.id.toString(),
+        data: x.data,
+        built: undefined
+      }));
+      return {
+        kind: 'many',
+        id: '',
+        // unused
+        initialValue: manyValue,
+        value: manyValue
+      };
+    }
+    if (value !== null && 'length' in value) throw TypeError('bad value');
+    const oneValue = value ? {
+      id: value.id,
+      label: value.label || value.id.toString(),
+      data: value.data,
+      built: undefined
+    } : null;
+    return {
+      kind: 'one',
+      id: '',
+      // unused
+      initialValue: oneValue,
+      value: oneValue
+    };
+  }();
+  return /*#__PURE__*/jsx(Field$1, {
+    autoFocus: autoFocus,
+    isRequired: false,
+    field: {
+      path: '',
+      // unused
+      label,
+      description: '',
+      // TODO
+      display: 'select',
+      listKey: '',
+      // unused
+      refListKey: list.key,
+      refLabelField: list.labelField,
+      refSearchFields: list.initialSearchFields,
+      hideCreate: true,
+      many
+    },
+    onChange: val => {
+      if (val.kind === 'count') return; // shouldnt happen
+      const {
+        value
+      } = val;
+      if (value === null) {
+        onChange(null);
+        return;
+      }
+      if (Array.isArray(value)) {
+        onChange(value.map(x => ({
+          id: x.id,
+          label: x.label
+        })));
+        return;
+      }
+      onChange({
+        id: value.id,
+        label: value.label
+      });
+    },
+    value: formValue,
+    itemValue: {}
+  });
+}
+function FormFieldPreview({
+  schema,
+  autoFocus,
+  forceValidation,
+  onChange,
+  value
+}) {
+  return /*#__PURE__*/jsx(schema.Input, {
+    autoFocus: !!autoFocus,
+    value: value,
+    onChange: onChange,
+    forceValidation: !!forceValidation
+  });
+}
+function canFieldBeFocused(schema) {
+  if (schema.kind === 'child') return false;
+  if (schema.kind === 'array') return true;
+  if (schema.kind === 'conditional') return true;
+  if (schema.kind === 'form') return true;
+  if (schema.kind === 'relationship') return true;
+  if (schema.kind === 'object') {
+    for (const innerProp of Object.values(schema.fields)) {
+      if (canFieldBeFocused(innerProp)) return true;
+    }
+    return false;
+  }
+  assertNever(schema);
+}
+function findFocusableObjectFieldKey(schema) {
+  for (const [key, innerProp] of Object.entries(schema.fields)) {
+    const childFocusable = canFieldBeFocused(innerProp);
+    if (childFocusable) return key;
+  }
+}
+function ObjectFieldPreview({
+  schema,
+  autoFocus,
+  fields
+}) {
+  const firstFocusable = autoFocus ? findFocusableObjectFieldKey(schema) : undefined;
+  return /*#__PURE__*/jsxs(HStack, {
+    gap: "medium",
+    paddingTop: "medium",
+    children: [/*#__PURE__*/jsx(GroupIndicatorLine, {}), /*#__PURE__*/jsx(VStack, {
+      gap: "xlarge",
+      flex: true,
+      minWidth: 0,
+      children: [...function* () {
+        for (const [key, propVal] of Object.entries(fields)) {
+          if (!isNonChildFieldPreviewProps(propVal)) continue;
+          yield /*#__PURE__*/jsx(FormValueContentFromPreviewProps, {
+            autoFocus: key === firstFocusable,
+            ...propVal
+          }, key);
+        }
+      }()]
+    })]
+  });
+}
+function ConditionalFieldPreview({
+  schema,
+  autoFocus,
+  discriminant,
+  onChange,
+  value
+}) {
+  const schemaDiscriminant = schema.discriminant;
+  return /*#__PURE__*/jsxs(HStack, {
+    gap: "xlarge",
+    children: [useMemo(() => /*#__PURE__*/jsx(schemaDiscriminant.Input, {
+      autoFocus: !!autoFocus,
+      value: discriminant,
+      onChange: onChange,
+      forceValidation: false
+    }), [autoFocus, schemaDiscriminant, discriminant, onChange]), isNonChildFieldPreviewProps(value) && /*#__PURE__*/jsx(FormValueContentFromPreviewProps, {
+      ...value
+    })]
+  });
+}
+function isNonChildFieldPreviewProps(props) {
+  return props.schema.kind !== 'child';
+}
+const fieldRenderers = {
+  array: ArrayFieldPreview,
+  relationship: RelationshipFieldPreview,
+  child: () => null,
+  form: FormFieldPreview,
+  object: ObjectFieldPreview,
+  conditional: ConditionalFieldPreview
+};
+const FormValueContentFromPreviewProps = /*#__PURE__*/memo(function FormValueContentFromPreview(props) {
+  const Comp = fieldRenderers[props.schema.kind];
+  return /*#__PURE__*/jsx(Comp, {
+    ...props
+  });
+});
+function useEventCallback(callback) {
+  const callbackRef = useRef(callback);
+  const cb = useCallback((...args) => {
+    return callbackRef.current(...args);
+  }, []);
+  useEffect(() => {
+    callbackRef.current = callback;
+  });
+  return cb;
+}
+function ArrayFieldListView(props) {
+  const onMove = (keys, target) => {
+    const targetIndex = props.elements.findIndex(x => x.key === target.key);
+    if (targetIndex === -1) return;
+    const allKeys = props.elements.map(x => ({
+      key: x.key
+    }));
+    const indexToMoveTo = target.dropPosition === 'before' ? targetIndex : targetIndex + 1;
+    const indices = keys.map(key => allKeys.findIndex(x => x.key === key));
+    props.onChange(move(allKeys, indices, indexToMoveTo));
+  };
+  const dragType = useMemo(() => Math.random().toString(36), []);
+  const {
+    dragAndDropHooks
+  } = useDragAndDrop({
+    getItems(keys) {
+      // Use a drag type so the items can only be reordered within this list
+      // and not dragged elsewhere.
+      return [...keys].map(key => {
+        key = JSON.stringify(key);
+        return {
+          [dragType]: key,
+          'text/plain': key
+        };
+      });
+    },
+    getAllowedDropOperations() {
+      return ['move', 'cancel'];
+    },
+    async onDrop(e) {
+      if (e.target.type !== 'root' && e.target.dropPosition !== 'on') {
+        let keys = [];
+        for (let item of e.items) {
+          if (item.kind === 'text') {
+            let key;
+            if (item.types.has(dragType)) {
+              key = JSON.parse(await item.getText(dragType));
+              keys.push(key);
+            } else if (item.types.has('text/plain')) {
+              // Fallback for Chrome Android case: https://bugs.chromium.org/p/chromium/issues/detail?id=1293803
+              // Multiple drag items are contained in a single string so we need to split them out
+              key = await item.getText('text/plain');
+              keys = key.split('\n').map(val => val.replaceAll('"', ''));
+            }
+          }
+        }
+        onMove(keys, e.target);
+      }
+    },
+    getDropOperation(target) {
+      if (target.type === 'root' || target.dropPosition === 'on') return 'cancel';
+      return 'move';
+    }
+  });
+  const onRemoveKey = useEventCallback(key => {
+    props.onChange(props.elements.map(x => ({
+      key: x.key
+    })).filter(val => val.key !== key));
+  });
+  return /*#__PURE__*/jsx(ListView, {
+    items: props.elements,
+    dragAndDropHooks: dragAndDropHooks,
+    height: props.elements.length ? undefined : 'scale.2000',
+    selectionMode: "none",
+    renderEmptyState: arrayFieldEmptyState,
+    onAction: key => {
+      const i = props.elements.findIndex(x => x.key === key);
+      if (i === -1) return;
+      props.onOpenItem(i);
+    },
+    children: item => {
+      var _props$schema$itemLab, _props$schema;
+      const label = ((_props$schema$itemLab = (_props$schema = props.schema).itemLabel) === null || _props$schema$itemLab === void 0 ? void 0 : _props$schema$itemLab.call(_props$schema, item)) || `选项 ${props.elements.indexOf(item) + 1}`;
+      return /*#__PURE__*/jsxs(Item, {
+        textValue: label,
+        children: [/*#__PURE__*/jsx(Text, {
+          children: label
+        }), /*#__PURE__*/jsxs(TooltipTrigger, {
+          placement: "start",
+          children: [/*#__PURE__*/jsx(ActionButton, {
+            onPress: () => onRemoveKey(item.key),
+            children: /*#__PURE__*/jsx(Icon, {
+              src: trash2Icon
+            })
+          }), /*#__PURE__*/jsx(Tooltip, {
+            children: "\u5220\u9664"
+          })]
+        })]
+      }, item.key);
+    }
+  });
+}
+function ArrayFieldItemModalContent(props) {
+  const previewProps = useMemo(() => createGetPreviewProps(props.schema, props.onChange, () => undefined), [props.schema, props.onChange])(props.value);
+  return /*#__PURE__*/jsx(FormValueContentFromPreviewProps, {
+    ...previewProps
+  });
+}
+function arrayFieldEmptyState() {
+  return /*#__PURE__*/jsxs(VStack, {
+    gap: "large",
+    alignItems: "center",
+    justifyContent: "center",
+    height: "100%",
+    padding: "regular",
+    children: [/*#__PURE__*/jsx(Text, {
+      elementType: "h3",
+      align: "center",
+      color: "neutralSecondary",
+      size: "large",
+      weight: "medium",
+      children: "Empty list"
+    }), /*#__PURE__*/jsx(Text, {
+      align: "center",
+      color: "neutralTertiary",
+      children: "Add the first item to see it here."
+    })]
+  });
+}
+
+export { FormValueContentFromPreviewProps as F, previewPropsOnChange as a, previewPropsToValue as p };