84 lines
3.2 KiB
JavaScript
84 lines
3.2 KiB
JavaScript
import PropTypes from 'prop-types';
|
|
|
|
import { Center } from '@astryxdesign/core/Center';
|
|
|
|
import { DT, soft } from './tokens';
|
|
|
|
// ============================================================================
|
|
// Shared DT primitives — the tiny components that every DT-styled operator
|
|
// page used to redeclare verbatim at the top of its own file.
|
|
//
|
|
// They were byte-identical in all 6 copies, so the duplication bought nothing
|
|
// and made the pages drift apart whenever one was tweaked. `deliveries.js` is
|
|
// the visual reference for both (see root CLAUDE.md §6).
|
|
// ============================================================================
|
|
|
|
// Soft popup surface. Under MUI this was a `PaperComponent` handed to every
|
|
// Autocomplete; Astryx's Selector/Typeahead own their own popup chrome, so
|
|
// this now only serves the few hand-rolled dropdowns that remain. Kept as a
|
|
// style object rather than a component for exactly that reason.
|
|
export const softPopupStyle = {
|
|
marginTop: 6,
|
|
background: DT.surface,
|
|
borderRadius: DT.radiusInner + 'px',
|
|
boxShadow: DT.shadowPop,
|
|
border: `1px solid ${DT.borderSubtle}`,
|
|
overflow: 'hidden'
|
|
};
|
|
|
|
// Scroll container for a table. Astryx's Table renders a bare <table> with no
|
|
// sticky-header or max-height affordance (MUI's TableContainer used to provide that),
|
|
// so pages wrap it in this. The brand-red scrollbar can't be expressed inline
|
|
// — ::-webkit-scrollbar-* are pseudo-elements — hence the one-time <style>.
|
|
export const TableScroll = ({ maxHeight = 'calc(100vh - 260px)', minWidth, children }) => (
|
|
<>
|
|
<style>{`
|
|
.dt-table-scroll { overflow: auto; }
|
|
.dt-table-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
|
|
.dt-table-scroll::-webkit-scrollbar-track { background-color: ${DT.surfaceAlt}; }
|
|
.dt-table-scroll::-webkit-scrollbar-thumb {
|
|
background-color: ${DT.brand}55; border-radius: 8px;
|
|
}
|
|
.dt-table-scroll::-webkit-scrollbar-thumb:hover { background-color: ${DT.brand}; }
|
|
.dt-table-scroll thead th { position: sticky; top: 0; z-index: 2; background-color: ${DT.surfaceAlt}; }
|
|
`}</style>
|
|
<div className="dt-table-scroll" style={{ maxHeight }}>
|
|
<div style={{ minWidth }}>{children}</div>
|
|
</div>
|
|
</>
|
|
);
|
|
|
|
TableScroll.propTypes = {
|
|
maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
children: PropTypes.node
|
|
};
|
|
|
|
// Colored icon chip — flips between filled and soft based on `selected`.
|
|
// Astryx's own `Avatar` is for people (src / initials / status corner), so a
|
|
// tinted `Center` is the right primitive for an icon swatch. The accent is a
|
|
// caller-supplied hex, hence the inline style.
|
|
export const AccentAvatar = ({ color, selected, size = 24, children }) => (
|
|
<Center
|
|
isInline
|
|
width={size}
|
|
height={size}
|
|
style={{
|
|
flexShrink: 0,
|
|
borderRadius: '50%',
|
|
backgroundColor: selected ? color : soft(color),
|
|
color: selected ? '#fff' : color,
|
|
transition: 'background-color 0.15s, color 0.15s'
|
|
}}
|
|
>
|
|
{children}
|
|
</Center>
|
|
);
|
|
|
|
AccentAvatar.propTypes = {
|
|
color: PropTypes.string,
|
|
selected: PropTypes.bool,
|
|
size: PropTypes.number,
|
|
children: PropTypes.node
|
|
};
|