lkb-fields-document 1.0.0 → 1.0.1

package/dist/form-from-preview-9e501058.node.cjs.js

@@ -1,512 +0,0 @@
-'use strict';
-
-var context = require('lkb-core/admin-ui/context');
-var views = require('lkb-core/fields/types/relationship/views');
-var utils$1 = require('lkb-core/admin-ui/utils');
-var button = require('@keystar/ui/button');
-var dialog = require('@keystar/ui/dialog');
-var field = require('@keystar/ui/field');
-var typography = require('@keystar/ui/typography');
-var icon = require('@keystar/ui/icon');
-var listView = require('@keystar/ui/list-view');
-var dragAndDrop = require('@keystar/ui/drag-and-drop');
-var tooltip = require('@keystar/ui/tooltip');
-var layout = require('@keystar/ui/layout');
-var trash2Icon = require('@keystar/ui/icon/icons/trash2Icon');
-var React = require('react');
-var utils = require('./utils-06bcddc4.node.cjs.js');
-var slots = require('@keystar/ui/slots');
-var jsxRuntime = require('react/jsx-runtime');
-
-const previewPropsToValueConverter = {
-  child() {
-    return null;
-  },
-  form(props) {
-    return props.value;
-  },
-  array(props) {
-    const values = props.elements.map(x => previewPropsToValue(x));
-    utils.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 = utils.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;
-  }
-  utils.assertNever(props);
-}
-function ArrayFieldPreview(props) {
-  const {
-    elements,
-    onChange,
-    schema
-  } = props;
-  const {
-    label
-  } = schema;
-  const [modalState, setModalState] = React.useState('closed');
-  return /*#__PURE__*/jsxRuntime.jsx(field.Field, {
-    label: label,
-    labelElementType: "span",
-    children: groupProps => /*#__PURE__*/jsxRuntime.jsxs(layout.VStack, {
-      gap: "medium",
-      role: "group",
-      minWidth: 0,
-      ...groupProps,
-      children: [/*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(button.ActionButton, {
-        alignSelf: "start",
-        autoFocus: props.autoFocus,
-        onPress: () => {
-          onChange([...elements.map(x => ({
-            key: x.key
-          })), {
-            key: undefined
-          }]);
-        },
-        children: "\u6DFB\u52A0\u9009\u9879"
-      }), /*#__PURE__*/jsxRuntime.jsx(dialog.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__*/jsxRuntime.jsxs(dialog.Dialog, {
-            children: [/*#__PURE__*/jsxRuntime.jsx(typography.Heading, {
-              children: "\u7F16\u8F91\u9009\u9879"
-            }), /*#__PURE__*/jsxRuntime.jsx(slots.Content, {
-              children: /*#__PURE__*/jsxRuntime.jsx(ArrayFieldItemModalContent, {
-                onChange: onModalChange,
-                schema: element.schema /* TODO FIXME */,
-                value: modalState.value
-              })
-            }), /*#__PURE__*/jsxRuntime.jsxs(button.ButtonGroup, {
-              children: [/*#__PURE__*/jsxRuntime.jsx(button.Button, {
-                prominence: "low",
-                onPress: () => {
-                  setModalState('closed');
-                },
-                children: "\u53D6\u6D88"
-              }), /*#__PURE__*/jsxRuntime.jsx(button.Button, {
-                prominence: "high",
-                onPress: () => {
-                  if (!utils.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 = context.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__*/jsxRuntime.jsx(views.Field, {
-    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__*/jsxRuntime.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;
-  }
-  utils.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__*/jsxRuntime.jsxs(layout.HStack, {
-    gap: "medium",
-    paddingTop: "medium",
-    children: [/*#__PURE__*/jsxRuntime.jsx(utils$1.GroupIndicatorLine, {}), /*#__PURE__*/jsxRuntime.jsx(layout.VStack, {
-      gap: "xlarge",
-      flex: true,
-      minWidth: 0,
-      children: [...function* () {
-        for (const [key, propVal] of Object.entries(fields)) {
-          if (!isNonChildFieldPreviewProps(propVal)) continue;
-          yield /*#__PURE__*/jsxRuntime.jsx(FormValueContentFromPreviewProps, {
-            autoFocus: key === firstFocusable,
-            ...propVal
-          }, key);
-        }
-      }()]
-    })]
-  });
-}
-function ConditionalFieldPreview({
-  schema,
-  autoFocus,
-  discriminant,
-  onChange,
-  value
-}) {
-  const schemaDiscriminant = schema.discriminant;
-  return /*#__PURE__*/jsxRuntime.jsxs(layout.HStack, {
-    gap: "xlarge",
-    children: [React.useMemo(() => /*#__PURE__*/jsxRuntime.jsx(schemaDiscriminant.Input, {
-      autoFocus: !!autoFocus,
-      value: discriminant,
-      onChange: onChange,
-      forceValidation: false
-    }), [autoFocus, schemaDiscriminant, discriminant, onChange]), isNonChildFieldPreviewProps(value) && /*#__PURE__*/jsxRuntime.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__*/React.memo(function FormValueContentFromPreview(props) {
-  const Comp = fieldRenderers[props.schema.kind];
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
-    ...props
-  });
-});
-function useEventCallback(callback) {
-  const callbackRef = React.useRef(callback);
-  const cb = React.useCallback((...args) => {
-    return callbackRef.current(...args);
-  }, []);
-  React.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(dragAndDrop.move(allKeys, indices, indexToMoveTo));
-  };
-  const dragType = React.useMemo(() => Math.random().toString(36), []);
-  const {
-    dragAndDropHooks
-  } = dragAndDrop.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__*/jsxRuntime.jsx(listView.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__*/jsxRuntime.jsxs(listView.Item, {
-        textValue: label,
-        children: [/*#__PURE__*/jsxRuntime.jsx(typography.Text, {
-          children: label
-        }), /*#__PURE__*/jsxRuntime.jsxs(tooltip.TooltipTrigger, {
-          placement: "start",
-          children: [/*#__PURE__*/jsxRuntime.jsx(button.ActionButton, {
-            onPress: () => onRemoveKey(item.key),
-            children: /*#__PURE__*/jsxRuntime.jsx(icon.Icon, {
-              src: trash2Icon.trash2Icon
-            })
-          }), /*#__PURE__*/jsxRuntime.jsx(tooltip.Tooltip, {
-            children: "\u5220\u9664"
-          })]
-        })]
-      }, item.key);
-    }
-  });
-}
-function ArrayFieldItemModalContent(props) {
-  const previewProps = React.useMemo(() => utils.createGetPreviewProps(props.schema, props.onChange, () => undefined), [props.schema, props.onChange])(props.value);
-  return /*#__PURE__*/jsxRuntime.jsx(FormValueContentFromPreviewProps, {
-    ...previewProps
-  });
-}
-function arrayFieldEmptyState() {
-  return /*#__PURE__*/jsxRuntime.jsxs(layout.VStack, {
-    gap: "large",
-    alignItems: "center",
-    justifyContent: "center",
-    height: "100%",
-    padding: "regular",
-    children: [/*#__PURE__*/jsxRuntime.jsx(typography.Text, {
-      elementType: "h3",
-      align: "center",
-      color: "neutralSecondary",
-      size: "large",
-      weight: "medium",
-      children: "Empty list"
-    }), /*#__PURE__*/jsxRuntime.jsx(typography.Text, {
-      align: "center",
-      color: "neutralTertiary",
-      children: "Add the first item to see it here."
-    })]
-  });
-}
-
-exports.FormValueContentFromPreviewProps = FormValueContentFromPreviewProps;
-exports.previewPropsOnChange = previewPropsOnChange;
-exports.previewPropsToValue = previewPropsToValue;