@airtable/blocks 0.0.0-experimental-3e47d4d04-20250909 → 0.0.0-experimental-446b49015-20251008

package/dist/esm/base/ui/record_card.js

@@ -1,556 +0,0 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-/** @module @airtable/blocks/ui: RecordCard */ /** */
-import { cx } from 'emotion';
-import * as React from 'react';
-import { compose } from '@styled-system/core';
-import { isNullOrUndefinedOrEmpty, keyBy, uniqBy, has } from '../../shared/private_utils';
-import { invariant, spawnError } from '../../shared/error_utils';
-import { FieldType } from '../../shared/types/field_core';
-import Record from '../models/record';
-import useWatchable from '../../shared/ui/use_watchable';
-import withHooks from '../../shared/ui/with_hooks';
-import { useSdk } from '../../shared/ui/sdk_context';
-import colorUtils from '../../shared/color_utils';
-import { baymax } from './baymax_utils';
-import Box from './box';
-import { isCommandModifierKeyEvent } from './key_codes';
-import useStyledSystem from './use_styled_system';
-import { flexItemSet, positionSet, margin } from './system';
-import { splitStyleProps } from './with_styled_system';
-import useViewMetadata from './use_view_metadata';
-import CellRenderer from './cell_renderer';
-import expandRecord from './expand_record';
-
-// Mirrored from client_server_shared_config_settings
-const FALLBACK_RECORD_NAME_FOR_DISPLAY = 'Unnamed record';
-
-/**
- * Style props for the {@link RecordCard} component. Accepts:
- * * {@link FlexItemSetProps}
- * * {@link MarginProps}
- * * {@link PositionSetProps}
- *
- * @noInheritDoc
- */
-
-const styleParser = compose(flexItemSet, positionSet, margin);
-const CARD_PADDING = 12;
-
-/** @hidden */
-
-const CellValueAndFieldLabel = _ref => {
-  let {
-    record,
-    cellValue,
-    field,
-    width,
-    renderInvalidCellValue
-  } = _ref;
-  useWatchable(field, ['name', 'type', 'options']);
-  return /*#__PURE__*/React.createElement(Box, {
-    style: {
-      verticalAlign: 'top'
-    },
-    position: "relative",
-    display: "inline-block",
-    margin: 0,
-    paddingRight: 2,
-    width: width
-  }, /*#__PURE__*/React.createElement(Box, {
-    className: baymax('caps truncate'),
-    fontSize: "11px",
-    lineHeight: "13px",
-    textColor: "#898989"
-  }, field.name), /*#__PURE__*/React.createElement(CellRenderer, {
-    record: record,
-    cellValue: cellValue,
-    field: field,
-    shouldWrap: false,
-    cellClassName: "recordCardCellValue truncate",
-    cellStyle: {
-      lineHeight: '16px',
-      fontSize: '12px'
-    },
-    renderInvalidCellValue: renderInvalidCellValue
-  }));
-};
-
-/**
- * Props for the {@link RecordCard} component. Also accepts:
- * * {@link RecordCardStyleProps}
- *
- * @noInheritDoc
- * @docsPath UI/components/RecordCard
- */
-
-// TODO(jb): move this stuff into the field model when we decide on an api for it.
-const FormulaicFieldTypes = {
-  [FieldType.FORMULA]: true,
-  [FieldType.ROLLUP]: true,
-  [FieldType.MULTIPLE_LOOKUP_VALUES]: true
-};
-const isFieldFormulaic = field => {
-  return has(FormulaicFieldTypes, field.type);
-};
-const getFieldResultType = field => {
-  if (field.type === FieldType.COUNT) {
-    return FieldType.NUMBER;
-  }
-  if (isFieldFormulaic(field)) {
-    invariant(field.options, 'options');
-    const result = field.options.result;
-    if (typeof result === 'object' && result) {
-      const resultType = result.type;
-      invariant(typeof resultType === 'string', 'resultType must be string');
-      return resultType;
-    } else {
-      // Formula is misconfigured.
-      return FieldType.SINGLE_LINE_TEXT;
-    }
-  } else {
-    return field.type;
-  }
-};
-
-/**
- * @internal
- * Given a container size (ie, height of the record card), calculate the height and width of an
- * attachment thumbnail image to fit inside the square attachment preview. Left and top margin
- * are used to center non-square images.
- */
-const calculateAttachmentDimensionsAndMargin = (attachment, containerSize) => {
-  if (!attachment || !attachment.thumbnails || !attachment.thumbnails.large) {
-    return {};
-  }
-  const {
-    thumbnails: {
-      large: {
-        width: thumbWidth,
-        height: thumbHeight
-      }
-    }
-  } = attachment;
-  const height = Math.min(containerSize, thumbHeight);
-  const width = Math.round(thumbWidth * height / thumbHeight);
-  const marginTop = Math.round((containerSize - height) / 2);
-  const marginLeft = Math.round((containerSize - width) / 2);
-  return {
-    height,
-    width,
-    marginTop,
-    marginLeft
-  };
-};
-
-/**
- * A card component that displays an Airtable record.
- *
- * [[ Story id="recordcard--example" title="RecordCard example" ]]
- *
- * @docsPath UI/components/RecordCard
- * @component
- */
-export class RecordCard extends React.Component {
-  /** @hidden */
-  static defaultProps = {
-    width: 568,
-    height: 80,
-    className: '',
-    style: {}
-  };
-
-  /** @hidden */
-  constructor(props) {
-    super(props);
-    this._onClick = this._onClick.bind(this);
-    this._validateProps(props);
-  }
-  /** @hidden */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this._validateProps(nextProps);
-  }
-  /** @internal */
-  _validateProps(props) {
-    const {
-      record,
-      view,
-      fields,
-      attachmentCoverField
-    } = props;
-    if (record && record instanceof Record && record.isDeleted) {
-      throw spawnError('Record %s is deleted', record.id);
-    }
-    if (!record) {
-      throw spawnError('Must provide record');
-    }
-    if (record && record instanceof Record && attachmentCoverField) {
-      if (attachmentCoverField.parentTable.id !== record.parentTable.id) {
-        throw spawnError('Attachment cover field %s must have the same parent table as record (record ID %s, table ID %s)', attachmentCoverField.id, record.id, record.parentTable.id);
-      }
-    }
-    if (record && record instanceof Record && fields) {
-      for (const field of fields) {
-        if (!field.isDeleted && field.parentTable.id !== record.parentTable.id) {
-          throw spawnError('Field %s must have the same parent table as record (record ID %s, table ID %s)', field.id, record.id, record.parentTable.id);
-        }
-      }
-    }
-    if (record && record instanceof Record && view && !view.isDeleted) {
-      if (view.parentTable.id !== record.parentTable.id) {
-        throw spawnError('View %s must have the same parent table as record (record ID %s, table ID %s)', view.id, record.id, record.parentTable.id);
-      }
-    }
-  }
-  /** @internal */
-  _onClick(e) {
-    if (this.props.onClick) {
-      this.props.onClick(e);
-    }
-    // Explicitly check if `hasOnClick` is false, which is only set by the Tooltip wrapper.
-    // When wrapped in Tooltip, `onClick` will always exist because Tooltip supplies it. We use
-    // `hasOnClick`, to account for whether the user defined their own `onClick`. We only want
-    // to run this default expandRecord behavior if the user did not supply their own `onClick`.
-    if (this.props.onClick === undefined || this.props.hasOnClick === false // TODO (stephen): remove tooltip anchor props
-    ) {
-      // NOTE: `null` disables the default click behavior.
-
-      const {
-        record
-      } = this.props;
-      const recordModel = record && record instanceof Record ? record : null;
-      if (recordModel) {
-        if (isCommandModifierKeyEvent(e) || e.shiftKey) {
-          // No-op, let the <a> tag handle opening in new tab or window.
-        } else {
-          e.preventDefault();
-          const opts = this.props.expandRecordOptions || {};
-          expandRecord(recordModel, opts);
-        }
-      }
-    }
-  }
-  /** @internal */
-  _getAttachmentCover(fieldsToUse) {
-    const attachmentField = this._getAttachmentField(fieldsToUse);
-    return attachmentField ? this._getFirstAttachmentInField(attachmentField) : null;
-  }
-  /** @internal */
-  _getAttachmentField(fieldsToUse) {
-    const {
-      attachmentCoverField
-    } = this.props;
-    if (attachmentCoverField && !attachmentCoverField.isDeleted && this._isAttachment(attachmentCoverField)) {
-      return attachmentCoverField;
-    } else if (attachmentCoverField === undefined) {
-      // The attachment field in this case is either coming from the view
-      // if there is a view, or from the table's arbitrary field ordering
-      // if there is no view.
-      // TODO: use the real cover field if the view is gallery or kanban instead of
-      // the first attachment field
-      const firstAttachmentFieldInView = fieldsToUse.find(field => {
-        return this._isAttachment(field);
-      });
-      if (firstAttachmentFieldInView === undefined) {
-        return null;
-      }
-      return firstAttachmentFieldInView;
-    } else {
-      return null;
-    }
-  }
-  /** @internal */
-  _isAttachment(field) {
-    return getFieldResultType(field) === FieldType.MULTIPLE_ATTACHMENTS;
-  }
-  /** @internal */
-  _getCellValue(field) {
-    const {
-      record
-    } = this.props;
-    if (record && record instanceof Record) {
-      return record.getCellValue(field.id);
-    } else {
-      const cellValue = record[field.id];
-
-      // To validate public cell values, we only have validateCellValueForUpdate
-      // However, this is not implemented for computed fields (since you can't update them)
-      // so we just skip the check.
-      // TODO(emma): actually check this somehow.
-      if (!field.isComputed) {
-        const airtableInterface = this.props.sdk.__airtableInterface;
-        const appInterface = this.props.sdk.__appInterface;
-        const validationResult = airtableInterface.fieldTypeProvider.validateCellValueForUpdate(appInterface, cellValue, null, field._data);
-        if (!validationResult.isValid) {
-          throw spawnError(validationResult.reason);
-        }
-      }
-      return cellValue;
-    }
-  }
-  /** @internal */
-  _getFirstAttachmentInField(attachmentField) {
-    let attachmentsInField;
-    if (attachmentField.type === FieldType.MULTIPLE_LOOKUP_VALUES) {
-      const cellValue = this._getCellValue(attachmentField);
-      attachmentsInField = cellValue ? cellValue.map(cv => cv.value) : [];
-    } else {
-      attachmentsInField = this._getCellValue(attachmentField);
-    }
-    return attachmentsInField && attachmentsInField.length > 0 ? attachmentsInField[0] : null;
-  }
-  /** @internal */
-  _getFields() {
-    const {
-      viewMetadata,
-      fields,
-      record
-    } = this.props;
-    let fieldsToUse;
-    if (fields) {
-      fieldsToUse = fields.filter(field => !field.isDeleted);
-    } else if (viewMetadata && !viewMetadata.isDeleted) {
-      fieldsToUse = viewMetadata.visibleFields;
-    } else if (record && record instanceof Record && !record.isDeleted) {
-      const parentTable = record.parentTable;
-      fieldsToUse = parentTable.fields;
-    } else {
-      console.warn('RecordCard: no fields, view, or record, so rendering an empty card'); // eslint-disable-line no-console
-      fieldsToUse = [];
-    }
-    return uniqBy(fieldsToUse, field => field.id);
-  }
-  /** @internal */
-  _getPossibleFieldsForCard() {
-    const fields = this._getFields();
-
-    // remove primary field if it exists
-    return fields.filter(field => {
-      return !field.isPrimaryField;
-    });
-  }
-  /** @internal */
-  _getWidthAndFieldIdArray(cellContainerWidth, fieldsToUse) {
-    const widthAndFieldIdArray = [];
-    let runningWidth = 0;
-    const airtableInterface = this.props.sdk.__airtableInterface;
-    const appInterface = this.props.sdk.__appInterface;
-    for (const field of fieldsToUse) {
-      const uiConfig = airtableInterface.fieldTypeProvider.getUiConfig(appInterface, field._data);
-      const desiredWidth = uiConfig.desiredCellWidthForRecordCard;
-      if (runningWidth + desiredWidth < cellContainerWidth) {
-        widthAndFieldIdArray.push({
-          width: desiredWidth,
-          fieldId: field.id
-        });
-        runningWidth += desiredWidth;
-      } else {
-        const minCellWidth = uiConfig.minimumCellWidthForRecordCard;
-        if (runningWidth + minCellWidth < cellContainerWidth) {
-          widthAndFieldIdArray.push({
-            width: minCellWidth,
-            fieldId: field.id
-          });
-          runningWidth += minCellWidth;
-        } else {
-          break;
-        }
-      }
-    }
-    if (runningWidth < cellContainerWidth && widthAndFieldIdArray.length > 0) {
-      const lastWidthAndFieldId = widthAndFieldIdArray[widthAndFieldIdArray.length - 1];
-      lastWidthAndFieldId.width += cellContainerWidth - runningWidth;
-    }
-    return widthAndFieldIdArray;
-  }
-  /** @internal */
-  _getRecord() {
-    const {
-      record
-    } = this.props;
-    if (record && record instanceof Record) {
-      return record;
-    } else {
-      return null;
-    }
-  }
-  /** @internal */
-  _renderCellsAndFieldLabels(attachmentSize, fieldsToUse) {
-    const {
-      record,
-      width,
-      renderInvalidCellValue
-    } = this.props;
-    invariant(typeof width === 'number', 'width in defaultProps');
-    const cellContainerWidth = width - CARD_PADDING - attachmentSize;
-    const widthAndFieldIdArray = this._getWidthAndFieldIdArray(cellContainerWidth, fieldsToUse);
-    const fieldsById = keyBy(fieldsToUse, o => o.id);
-    return widthAndFieldIdArray.map(widthAndFieldId => {
-      const field = fieldsById[widthAndFieldId.fieldId];
-      return /*#__PURE__*/React.createElement(CellValueAndFieldLabel, _extends({
-        key: field.id,
-        field: field,
-        width: widthAndFieldId.width,
-        renderInvalidCellValue: renderInvalidCellValue
-      }, record instanceof Record ? {
-        record
-      } : {
-        cellValue: record[field.id]
-      }));
-    });
-  }
-  /** @hidden */
-  render() {
-    const {
-      record,
-      view,
-      width,
-      height,
-      onClick,
-      onMouseEnter,
-      onMouseLeave,
-      className,
-      style
-    } = this.props;
-    if (record && record instanceof Record && record.isDeleted) {
-      return null;
-    }
-    const allFields = this._getFields();
-    const fieldsToUse = this._getPossibleFieldsForCard();
-    const attachmentObjIfAvailable = this._getAttachmentCover(fieldsToUse);
-    const hasAttachment = !!attachmentObjIfAvailable;
-    const hasOnClick = !!onClick || !!this._getRecord();
-    const containerClasses = cx(baymax('white rounded relative block overflow-hidden'), {
-      [baymax('pointer cardBoxShadow')]: hasOnClick,
-      [baymax('stroked1')]: !hasOnClick
-    }, className);
-
-    // use height as size in order to get square attachment
-    invariant(typeof height === 'number', 'height in defaultProps');
-    const attachmentSize = hasAttachment ? height : 0;
-    let primaryValue;
-    let isUnnamed;
-    let recordName;
-    let recordUrl;
-    let recordColor;
-    if (record instanceof Record) {
-      recordUrl = record.url;
-      recordName = record.name;
-      if (view) {
-        recordColor = record.getColorInView(view);
-      }
-    } else {
-      const primaryField = allFields.length > 0 ? allFields[0].parentTable.primaryField : null;
-      const primaryCellValue = primaryField ? record[primaryField.id] : null;
-      recordName = primaryCellValue === null || primaryCellValue === undefined ? null : String(primaryCellValue);
-    }
-    if (isNullOrUndefinedOrEmpty(recordName)) {
-      primaryValue = FALLBACK_RECORD_NAME_FOR_DISPLAY;
-      isUnnamed = true;
-    } else {
-      primaryValue = recordName;
-      isUnnamed = false;
-    }
-    const attachmentDimensionsAndPosition = calculateAttachmentDimensionsAndMargin(attachmentObjIfAvailable, attachmentSize);
-    return /*#__PURE__*/React.createElement("a", {
-      href: onClick === undefined && recordUrl ? recordUrl : undefined,
-      className: containerClasses,
-      style: {
-        ...style,
-        width,
-        height
-      },
-      onClick: this._onClick,
-      onMouseEnter: onMouseEnter || undefined,
-      onMouseLeave: onMouseLeave || undefined
-    }, /*#__PURE__*/React.createElement(Box, {
-      right: `${attachmentSize}px`,
-      backgroundColor: "transparent",
-      padding: `${CARD_PADDING}px`,
-      position: "absolute",
-      top: 0,
-      bottom: 0,
-      left: 0,
-      textColor: "dark"
-    }, /*#__PURE__*/React.createElement(Box, {
-      className: cx({
-        unnamed: isUnnamed
-      }),
-      fontWeight: 500,
-      position: "relative",
-      marginTop: 0,
-      display: "flex",
-      alignItems: "center",
-      lineHeight: 1.5,
-      height: "18px",
-      fontSize: "14px"
-    }, recordColor && /*#__PURE__*/React.createElement(Box, {
-      width: "6px",
-      height: "20px",
-      flex: "none",
-      marginRight: 1,
-      borderRadius: "circle",
-      backgroundColor: colorUtils.getHexForColor(recordColor)
-    }), /*#__PURE__*/React.createElement(Box, {
-      className: baymax('truncate'),
-      flex: "auto"
-    }, primaryValue)), /*#__PURE__*/React.createElement(Box, {
-      textColor: "#555555",
-      position: "absolute",
-      marginTop: "3px"
-    }, this._renderCellsAndFieldLabels(attachmentSize, fieldsToUse))), attachmentObjIfAvailable && attachmentObjIfAvailable.thumbnails && attachmentObjIfAvailable.thumbnails.large && /*#__PURE__*/React.createElement(Box, {
-      className: baymax('noevents'),
-      style: {
-        borderTopRightRadius: 2,
-        borderBottomRightRadius: 2
-      },
-      height: `${attachmentSize}px`,
-      width: `${attachmentSize}px`,
-      position: "absolute",
-      right: "0",
-      overflow: "hidden"
-    }, /*#__PURE__*/React.createElement("img", {
-      draggable: false,
-      height: attachmentDimensionsAndPosition.height,
-      width: attachmentDimensionsAndPosition.width,
-      style: {
-        marginTop: attachmentDimensionsAndPosition.marginTop,
-        marginLeft: attachmentDimensionsAndPosition.marginLeft
-      },
-      src: attachmentObjIfAvailable.thumbnails.large.url
-    })));
-  }
-}
-export default withHooks(RecordCard, props => {
-  const {
-    styleProps,
-    nonStyleProps
-  } = splitStyleProps(props, styleParser.propNames);
-  const {
-    record,
-    fields,
-    view,
-    className
-  } = nonStyleProps;
-  const classNameForStyledProps = useStyledSystem(styleProps, styleParser);
-  const recordModel = record && record instanceof Record ? record : null;
-  let parentTable = null;
-  if (recordModel) {
-    parentTable = recordModel.parentTable;
-  } else if (fields && fields.length > 0) {
-    parentTable = fields[0].parentTable;
-  } else if (view) {
-    parentTable = view.parentTable;
-  }
-  useWatchable(recordModel, ['name', view ? `colorInView:${view.id}` : null]);
-  // It's safe to watch the record's parentTable since a record's parent table never changes.
-  useWatchable(parentTable, ['fields']);
-
-  // if a view is supplied, we need to load the field order to use it for rendering the card
-  const viewMetadata = useViewMetadata(view);
-  const sdk = useSdk();
-  return {
-    viewMetadata,
-    className: cx(classNameForStyledProps, className),
-    sdk
-  };
-});