What are animation and CSSTransform properties of store.register()

[ddenev]

In the playgrounds you have the following call:

store.register({
  id,
  depth,
  readonly,
  animation: isCI ? null : undefined,
  CSSTransform: {
    background: '#ae51ff',
    'box-shadow': '0 0 8px 4px rgba(255, 255, 255, 0.5)',
    opacity: '0.8'
  }
})

The animation and CSSTransform properties are not described in the docs. What is their purpose? Are there other undocumented properties?

Thank you!

[jalal246]

I don't know if it's documented on the site, but it's somehow documented in TypeScript (which is not enough).

By default, there's an ease-in animation, and the duration is dynamically calculated based on the distance between the dragged and the targeted element.

CSSTransform instructs DFlex to apply this class or style during the transformation.

To disable animation, you have to pass animation:null. Therefore, I am disabling it when it's running in a CI environment for the sake of testing. If you disable animation, then CSSTransform will be ignored.

EDIT: I checked the docs and it's not documented. 😞

type CubicBezier =
  | "ease"
  | "ease-in"
  | "ease-out"
  | "ease-in-out"
  | "linear";

type AnimationOpts = {
  /**
   * The easing function to use for the animation.
   * Specifies the speed curve of the animation.
   * Example values: 'linear', 'ease-in', 'ease-out', 'ease-in-out'.
   * (Default: 'ease-in')
   */
  easing: CubicBezier;

  /**
   * The duration of the animation in milliseconds.
   * Specifies how long the animation should take to complete.
   * (Default: 'dynamic')
   */
  duration: number | "dynamic";
} | null;

/**
 * The options for the `register` method in DnD store.
 */
export type RegisterInputOpts = {
  /** Targeted element ID. */
  id: string;

  /**
   * The depth of the targeted element within its container, starting from zero.
   * A higher depth value means the element is visually positioned above elements with lower depth values.
   * Default: 0
   *
   * `Example`: 1, 2, 3, ...
   *
   */ depth?: number;

  /**
   * Indicates whether the element is read-only and won't be transformed during drag and drop interactions,
   * but it still belongs to the same interactive container.
   * Default: false
   *
   */
  readonly?: boolean;

  /**
   * Configuration options for animations applied to the element being transformed during dragging.
   * If specified, the element will animate according to these options, overwriting the default values.
   * To disable animation altogether set the property to `null`.
   *
   * `Example`: { easing: 'ease-out', duration: 500 }
   */
  animation?: Partial<AnimationOpts>;

  /**
   * CSS to be applied to the element when it is being transformed during dragging.
   * The CSS will be removed when the element is settled in its new position.
   *
   * `Example`: "CSSTransform: 'dragged-element'" or "CSSTransform: { background: '#ff0000', opacity: 0.5 }"
   *
   * __Note__: CSS property names should be in snake_case.
   */
  CSSTransform?: CSSClass | CSSStyle;
};

[ddenev]

Thank you, @jalal246!

[jalal246]

@ddenev You're welcome! Thank you for initiating discussions and opening issues. If you're interested in contributing to the documentation, playground, or any of the core packages, please feel free to do so. Your contributions would be greatly appreciated.

[ddenev]

No problem, @jalal246, my pleasure. I'm still playing w/ DFlex and will be asking more questions and reporting more finds in the near future as it seems it has some good potential. My time goes mostly on my own project but I might definitely contribute at some point, although I'm not so proficient w/ TS.