renderScrollRail function

Component renderScrollRail(ScrollRailProps props)

Renders a Codex scroll rail component.

Implementation

Component renderScrollRail(ScrollRailProps props) {
  final String heightCalc = 'calc(100vh - ${props.topOffset} - ${props.bottomOffset})';
  final String scrollbarId = props.scrollPersistenceId ?? 'scroll-rail-${props.position.name}';
  final String widthValue = _getWidthValue(props.size, props.width);

  return dom.div(
    id: scrollbarId,
    styles: dom.Styles(raw: {
      'position': 'sticky',
      'top': props.topOffset,
      'width': widthValue,
      'height': heightCalc,
      'max-height': heightCalc,
      'flex-shrink': '0',
      'overflow-y': 'auto',
      'overflow-x': 'hidden',
      'background': props.background ?? 'var(--card)',
      if (props.position == ScrollRailPosition.left)
        'border-right': _getBorderStyle(props.showBorder)
      else
        'border-left': _getBorderStyle(props.showBorder),
      if (props.customScrollbar) ...{
        'scrollbar-width': 'thin',
        'scrollbar-color': 'rgba(var(--primary-rgb), 0.3) transparent',
      },
    }),
    [
      dom.div(
        styles: dom.Styles(raw: {
          'padding': props.padding,
          'min-height': '100%',
        }),
        props.children,
      ),
      if (props.scrollPersistenceId != null)
        dom.script(content: '''
          (function() {
            var rail = document.getElementById('$scrollbarId');
            if (!rail) return;
            var storageKey = 'scroll-rail-$scrollbarId';
            var savedPos = sessionStorage.getItem(storageKey);
            if (savedPos) {
              rail.scrollTop = parseInt(savedPos, 10);
            }
            var saveTimeout;
            rail.addEventListener('scroll', function() {
              clearTimeout(saveTimeout);
              saveTimeout = setTimeout(function() {
                sessionStorage.setItem(storageKey, rail.scrollTop.toString());
              }, 100);
            });
          })();
        '''),
    ],
  );
}