Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@lightningtv/solid-ui
Advanced tools
@lightningtv/solid-ui - npm Package Compare versions
Comparing version 0.24.0 to 0.25.0
@@ -42,9 +42,4 @@ /* | ||
| display: 'flex', | ||
| justifyContent: 'spaceEvenly', | ||
| padding: [ | ||
| theme.spacer.md - theme.stroke.sm, | ||
| theme.spacer.xs + theme.stroke.sm, | ||
| theme.spacer.md + theme.stroke.sm, | ||
| theme.spacer.md + theme.stroke.sm | ||
| ] | ||
| justifyContent: 'flexStart', | ||
| alignItems: 'center' | ||
| }, | ||
@@ -78,3 +73,6 @@ tones: { | ||
| ...theme.typography.tag1, | ||
| color: theme.color.textNeutral | ||
| color: theme.color.textNeutral, | ||
| lineHeight: theme.typography.tag1.lineHeight + 12, | ||
| marginRight: theme.spacer.md + theme.stroke.sm, | ||
| marginLeft: theme.spacer.md + theme.stroke.sm | ||
| }, | ||
@@ -81,0 +79,0 @@ tones: { |
@@ -20,3 +20,3 @@ /** | ||
| import type { IntrinsicNodeCommonProps, ElementNode, NodeStyles, KeyHandler } from '@lightningtv/core'; | ||
| import type { IntrinsicNodeCommonProps, ElementNode, NodeStyles, KeyHandler } from '@lightningtv/solid'; | ||
| import type { ComponentStyleConfig, NodeStyleSet, Tone } from 'types/types.js'; | ||
@@ -23,0 +23,0 @@ import type { UIComponentProps } from 'types/interfaces.js'; |
@@ -32,7 +32,7 @@ /* | ||
| display: 'flex', | ||
| justifyContent: 'center', | ||
| justifyContent: 'flexStart', | ||
| color: theme.color.textNeutral, | ||
| padding: [theme.spacer.md, theme.spacer.lg], // TODO themed padding values | ||
| height: theme.typography.caption1.lineHeight + theme.spacer.md * 2, | ||
| borderRadius: [theme.radius.md, theme.radius.md, theme.radius.md, theme.radius.none], | ||
| height: theme.typography.caption1.lineHeight + theme.spacer.md, | ||
| neutral: { | ||
@@ -62,3 +62,6 @@ backgroundColor: theme.color.fillNeutral | ||
| ...theme.typography.caption1, | ||
| color: theme.color.textInverse | ||
| color: theme.color.textInverse, | ||
| lineHeight: theme.typography.caption1.lineHeight + theme.spacer.md * 2, | ||
| marginRight: theme.spacer.lg, | ||
| marginLeft: theme.spacer.lg | ||
| }, | ||
@@ -65,0 +68,0 @@ tones: { |
@@ -17,3 +17,3 @@ /* | ||
| */ | ||
| import type { ElementNode, IntrinsicNodeCommonProps, NodeStyles, KeyHandler } from '@lightningtv/core'; | ||
| import type { ElementNode, IntrinsicNodeCommonProps, NodeStyles, KeyHandler } from '@lightningtv/solid'; | ||
| import type { ComponentStyleConfig, NodeStyleSet, Tone } from 'types/types.js'; | ||
@@ -20,0 +20,0 @@ import type { UIComponentProps } from 'types/interfaces.js'; |
@@ -81,3 +81,3 @@ /* | ||
| */ | ||
| bottom?: NodeProps['children']; | ||
| bottomCenter?: NodeProps['children']; | ||
@@ -84,0 +84,0 @@ /** |
@@ -19,5 +19,3 @@ /* | ||
| import { View } from '@lightningtv/solid'; | ||
| import { withPadding } from '../../utils/index.js'; | ||
| import styles from './Artwork.styles.js'; | ||
| withPadding; | ||
| const getTone = (props) => props.tone ?? styles.tone; | ||
@@ -24,0 +22,0 @@ const formatSrc = (props, tone) => { |
@@ -18,20 +18,13 @@ /* | ||
| import { createMemo } from 'solid-js'; | ||
| import { Text } from '@lightningtv/solid'; | ||
| import { withPadding } from '../../utils/index.js'; | ||
| import { View, Text } from '@lightningtv/solid'; | ||
| import styles from './Badge.styles.js'; | ||
| withPadding; // Preserve the import. | ||
| const getTone = (props) => props.tone ?? styles.tone; | ||
| const getTitle = (title) => title ?? ''; | ||
| const getPadding = (props, tone) => props.padding ?? styles.Container?.tones[tone]?.padding ?? styles.Container.base.padding; | ||
| const BadgeContainer = props => { | ||
| const tone = createMemo(() => getTone(props)); | ||
| const padding = createMemo(() => getPadding(props, tone())); | ||
| return (<node use:withPadding={padding()} {...props} | ||
| return (<View {...props} | ||
| // borderColor={props.strokeColor} // TODO clew uses strokeColor, but we currently don't account for nested properties (border.color) | ||
| // borderWidth={props.strokeWidth} // TODO clew uses strokeWidth, but we currently don't account for nested properties (border.width) | ||
| color={props.backgroundColor} itemSpacing={props.contentSpacing} borderRadius={props.radius} | ||
| color={props.backgroundColor} borderRadius={props.radius} | ||
| // @ts-expect-error TODO type needs to be fixed in framework | ||
| style={[ | ||
| props.style, // | ||
| styles.Container.tones[tone()], | ||
| styles.Container.tones[props.tone ?? styles.tone], | ||
| styles.Container.base | ||
@@ -41,10 +34,10 @@ ]} forwardStates/>); | ||
| const Badge = (props) => { | ||
| const tone = createMemo(() => getTone(props)); | ||
| const title = createMemo(() => getTitle(props.title)); | ||
| return (<BadgeContainer {...props} padding={props.padding} tone={tone()} style={props.style}> | ||
| <Text color={props.textColor} style={[ | ||
| const tone = createMemo(() => props.tone ?? styles.tone); | ||
| const baseBorderStyle = styles.Container.base.border; | ||
| return (<BadgeContainer {...props} height={props.height || styles.Text.base.lineHeight} tone={tone()} style={props.style}> | ||
| <Text color={props.textColor} lineHeight={(props.height || styles.Text.base.lineHeight) + baseBorderStyle.width} style={[ | ||
| styles.Text.tones[tone()], // | ||
| styles.Text.base | ||
| ]} tone={tone()}> | ||
| {title()} | ||
| ]}> | ||
| {props.title} | ||
| </Text> | ||
@@ -51,0 +44,0 @@ </BadgeContainer>); |
@@ -42,3 +42,4 @@ declare const meta: { | ||
| title: string; | ||
| height: number; | ||
| }; | ||
| }; |
@@ -58,9 +58,10 @@ /* | ||
| return (<BadgeContainer {...args}> | ||
| <Icon style={[styles.Icon.tones[args.tone ?? styles.tone], styles.Icon.base]} tone={args.tone ?? styles.tone} src={lightning} width={25} height={25}/> | ||
| <Text style={[styles.Text.tones[args.tone ?? styles.tone], styles.Text.base]}>{args.title}</Text> | ||
| <Icon style={[styles.Icon.tones[args.tone ?? styles.tone], styles.Icon.base]} tone={args.tone ?? styles.tone} src={lightning} width={25} height={25} marginLeft={10}/> | ||
| <Text marginLeft={6} style={[styles.Text.tones[args.tone ?? styles.tone], styles.Text.base]}>{args.title}</Text> | ||
| </BadgeContainer>); | ||
| }, | ||
| args: { | ||
| title: 'Badge Text' | ||
| title: 'Badge Text', | ||
| height: 38 | ||
| } | ||
| }; |
@@ -38,9 +38,4 @@ /* | ||
| display: 'flex', | ||
| justifyContent: 'spaceEvenly', | ||
| padding: [ | ||
| theme.spacer.md - theme.stroke.sm, | ||
| theme.spacer.xs + theme.stroke.sm, | ||
| theme.spacer.md + theme.stroke.sm, | ||
| theme.spacer.md + theme.stroke.sm | ||
| ] | ||
| justifyContent: 'flexStart', | ||
| alignItems: 'center' | ||
| }, | ||
@@ -73,3 +68,6 @@ tones: { | ||
| ...theme.typography.tag1, | ||
| color: theme.color.textNeutral | ||
| color: theme.color.textNeutral, | ||
| lineHeight: theme.typography.tag1.lineHeight + 12, | ||
| marginRight: theme.spacer.md + theme.stroke.sm, | ||
| marginLeft: theme.spacer.md + theme.stroke.sm | ||
| }, | ||
@@ -76,0 +74,0 @@ tones: { |
@@ -27,5 +27,5 @@ /* | ||
| const scroll = withScrolling(false); | ||
| return (<View {...props} onUp={chainFunctions(props.onUp, onUp)} onDown={chainFunctions(props.onDown, onDown)} selected={props.selected || 0} forwardFocus={onGridFocus} onBeforeLayout={props.selected | ||
| ? chainFunctions(props.onBeforeLayout, (elm, selected) => scroll(elm, selected)) | ||
| : props.onBeforeLayout} onSelectedChanged={chainFunctions(props.onSelectedChanged, props.scroll !== 'none' ? scroll : undefined)} | ||
| return (<View {...props} onUp={chainFunctions(props.onUp, onUp)} onDown={chainFunctions(props.onDown, onDown)} selected={props.selected || 0} forwardFocus={onGridFocus} onLayout={props.selected | ||
| ? chainFunctions(props.onLayout, scroll) | ||
| : props.onLayout} onSelectedChanged={chainFunctions(props.onSelectedChanged, props.scroll !== 'none' ? scroll : undefined)} | ||
| // @ts-expect-error TODO type needs to be fixed in framework | ||
@@ -32,0 +32,0 @@ style={[ |
@@ -19,3 +19,3 @@ /** | ||
| */ | ||
| import type { IntrinsicNodeCommonProps, ElementNode, NodeStyles, KeyHandler } from '@lightningtv/core'; | ||
| import type { IntrinsicNodeCommonProps, ElementNode, NodeStyles, KeyHandler } from '@lightningtv/solid'; | ||
| import type { ComponentStyleConfig, NodeStyleSet, Tone } from 'types/types.js'; | ||
@@ -22,0 +22,0 @@ import type { UIComponentProps } from 'types/interfaces.js'; |
@@ -19,10 +19,6 @@ /** | ||
| import {} from 'solid-js'; | ||
| import { Text } from '@lightningtv/solid'; | ||
| import { withPadding } from '../../utils/index.js'; | ||
| import { View, Text } from '@lightningtv/solid'; | ||
| import styles from './Label.styles.js'; | ||
| withPadding; | ||
| const Label = props => { | ||
| return (<node use:withPadding={props.padding ?? | ||
| styles.Container.tones[props.tone ?? styles.tone]?.padding ?? | ||
| styles.Container.base.padding} {...props} color={props.backgroundColor} borderRadius={props.radius} | ||
| return (<View {...props} color={props.backgroundColor} borderRadius={props.radius} | ||
| // @ts-expect-error TODO type needs to be fixed in framework | ||
@@ -40,4 +36,4 @@ style={[ | ||
| </Text> | ||
| </node>); | ||
| </View>); | ||
| }; | ||
| export default Label; |
@@ -28,7 +28,7 @@ /* | ||
| display: 'flex', | ||
| justifyContent: 'center', | ||
| justifyContent: 'flexStart', | ||
| color: theme.color.textNeutral, | ||
| padding: [theme.spacer.md, theme.spacer.lg], // TODO themed padding values | ||
| height: theme.typography.caption1.lineHeight + theme.spacer.md * 2, | ||
| borderRadius: [theme.radius.md, theme.radius.md, theme.radius.md, theme.radius.none], | ||
| height: theme.typography.caption1.lineHeight + theme.spacer.md, | ||
| neutral: { | ||
@@ -57,3 +57,6 @@ backgroundColor: theme.color.fillNeutral | ||
| ...theme.typography.caption1, | ||
| color: theme.color.textInverse | ||
| color: theme.color.textInverse, | ||
| lineHeight: theme.typography.caption1.lineHeight + theme.spacer.md * 2, | ||
| marginRight: theme.spacer.lg, | ||
| marginLeft: theme.spacer.lg | ||
| }, | ||
@@ -60,0 +63,0 @@ tones: { |
@@ -28,9 +28,3 @@ /* | ||
| styles.Container.base | ||
| ]} forwardStates onBeforeLayout={(node, dimensions) => { | ||
| if (dimensions?.height && node.parent) { | ||
| node.parent.height = dimensions.height; | ||
| return true; // return true to inform renderer we've updated a dimension | ||
| } | ||
| return false; | ||
| }}> | ||
| ]} forwardStates> | ||
| <Show when={props.title}> | ||
@@ -37,0 +31,0 @@ <Text style={[ |
@@ -27,5 +27,5 @@ /* | ||
| const scroll = withScrolling(true); | ||
| return (<View {...props} selected={props.selected || 0} onLeft={chainFunctions(props.onLeft, onLeft)} onRight={chainFunctions(props.onRight, onRight)} forwardFocus={onGridFocus} onBeforeLayout={props.selected | ||
| ? chainFunctions(props.onBeforeLayout, (elm, selected) => scroll(elm, selected)) | ||
| : props.onBeforeLayout} onSelectedChanged={chainFunctions(props.onSelectedChanged, props.scroll !== 'none' ? scroll : undefined)} | ||
| return (<View {...props} selected={props.selected || 0} onLeft={chainFunctions(props.onLeft, onLeft)} onRight={chainFunctions(props.onRight, onRight)} forwardFocus={onGridFocus} onLayout={props.selected | ||
| ? chainFunctions(props.onLayout, scroll) | ||
| : props.onLayout} onSelectedChanged={chainFunctions(props.onSelectedChanged, props.scroll !== 'none' ? scroll : undefined)} | ||
| // @ts-expect-error TODO type needs to be fixed in framework | ||
@@ -32,0 +32,0 @@ style={[ |
@@ -1,2 +0,2 @@ | ||
| import type { ElementNode, IntrinsicNodeCommonProps, NodeStyles, KeyHandler } from '@lightningtv/core'; | ||
| import type { ElementNode, IntrinsicNodeCommonProps, NodeStyles, KeyHandler } from '@lightningtv/solid'; | ||
| import type { ComponentStyleConfig, NodeStyleSet, Tone } from 'types/types.js'; | ||
@@ -3,0 +3,0 @@ import type { UIComponentProps } from 'types/interfaces.js'; |
@@ -50,3 +50,3 @@ /* | ||
| const contentSpacingY = createMemo(() => getContentSpacingY(props)); | ||
| return (<node use:withPadding={padding()} {...props} borderRadius={props.radius} onFocus={() => setIsFocused(true)} onBlur={() => setIsFocused(false)} | ||
| return (<View {...props} borderRadius={props.radius} onFocusChanged={setIsFocused} | ||
| // @ts-expect-error TODO type needs to be fixed in framework | ||
@@ -65,3 +65,3 @@ style={[ | ||
| <View x={width() - padding()[0]} y={padding()[1]} mountX={1}> | ||
| <View right={padding()[0]} y={padding()[1]}> | ||
| {props.topRight} | ||
@@ -81,3 +81,3 @@ </View> | ||
| ]} x={padding()[0]} y={height() + contentSpacingY()} width={width() - padding()[1] * 2}> | ||
| {props.bottom} | ||
| {props.bottomCenter} | ||
| </View> | ||
@@ -87,6 +87,6 @@ </Show> | ||
| {/* @ts-expect-error doesn't get rendered if progress is falsy */} | ||
| <ProgressBar {...props.progressBar} width={width() - padding()[0] * 2} x={padding()[0]} y={height() - paddingYProgress() - Number(props?.progressBar?.height ?? 0)}/> | ||
| <ProgressBar {...props.progressBar} width={width() - padding()[0] * 2} x={padding()[0]} bottom={paddingYProgress()}/> | ||
| </Show> | ||
| </node>); | ||
| </View>); | ||
| }; | ||
| export default Tile; |
@@ -105,3 +105,3 @@ /* | ||
| render: args => { | ||
| return (<Tile {...args} topLeft={<Badge title="HD"/>} topRight={<Label width={75} title="Label" mountX={0.5}/>} inset={<View src={'../../assets/images/Xfinity-Provider-Logo-2x1.png'} width={theme.spacer.lg * 5} height={theme.spacer.xxl + theme.spacer.md}/>} bottom={<Metadata {...args.metadata}/>}/>); | ||
| return (<Tile {...args} topLeft={<Badge title="HD"/>} topRight={<Label width={75} title="Label" mountX={0.5}/>} inset={<View src={'../../assets/images/Xfinity-Provider-Logo-2x1.png'} width={theme.spacer.lg * 5} height={theme.spacer.xxl + theme.spacer.md}/>} bottomCenter={<Metadata {...args.metadata}/>}/>); | ||
| }, | ||
@@ -128,3 +128,3 @@ args: { | ||
| render: args => { | ||
| return (<Tile {...args} topLeft={<Label width={75} title="Label"/>} topRight={<Badge title="HD"/>} inset={<View src={'../../assets/images/Xfinity-Provider-Logo-2x1.png'} width={theme.spacer.lg * 5} height={theme.spacer.xxl + theme.spacer.md}/>} bottom={<Metadata {...args.metadata}/>}/>); | ||
| return (<Tile {...args} topLeft={<Label width={75} title="Label"/>} topRight={<Badge title="HD"/>} inset={<View src={'../../assets/images/Xfinity-Provider-Logo-2x1.png'} width={theme.spacer.lg * 5} height={theme.spacer.xxl + theme.spacer.md}/>} bottomCenter={<Metadata {...args.metadata}/>}/>); | ||
| }, | ||
@@ -131,0 +131,0 @@ args: { |
@@ -59,3 +59,3 @@ import type { NodeProps, NodeStyles } from '@lightningtv/solid'; | ||
| */ | ||
| bottom?: NodeProps['children']; | ||
| bottomCenter?: NodeProps['children']; | ||
| /** | ||
@@ -62,0 +62,0 @@ * props passed to the child ProgressBar, rendered at the bottom of the component. |
@@ -1,2 +0,2 @@ | ||
| import type { TextureMap } from '@lightningjs/renderer'; | ||
| import { type TextureMap } from '@lightningtv/core'; | ||
| export interface SpriteDef { | ||
@@ -3,0 +3,0 @@ name: string; |
@@ -17,4 +17,3 @@ /* | ||
| */ | ||
| import { ElementNode } from '@lightningtv/core'; | ||
| import { assertTruthy } from './index.js'; | ||
| import { ElementNode, assertTruthy } from '@lightningtv/core'; | ||
| export function onGridFocus() { | ||
@@ -21,0 +20,0 @@ if (!this || this.children.length === 0) |
@@ -5,3 +5,2 @@ export { makeComponentStyles } from './getThemeStyles.js'; | ||
| export { chainFunctions } from './chainFunctions.js'; | ||
| export { assertTruthy } from './assertTruthy.js'; | ||
| export { handleNavigation, onGridFocus } from './handleNavigation.js'; | ||
@@ -8,0 +7,0 @@ export { scrollToIndex } from './scrollToIndex.js'; |
@@ -21,3 +21,2 @@ /* | ||
| export { chainFunctions } from './chainFunctions.js'; | ||
| export { assertTruthy } from './assertTruthy.js'; | ||
| export { handleNavigation, onGridFocus } from './handleNavigation.js'; | ||
@@ -24,0 +23,0 @@ export { scrollToIndex } from './scrollToIndex.js'; |
@@ -39,27 +39,25 @@ /* | ||
| } | ||
| el.onBeforeLayout = (_, size) => { | ||
| if (size) { | ||
| el.width = | ||
| el.children.reduce((acc, c) => { | ||
| return acc + (c.width || 0); | ||
| }, 0) + | ||
| left + | ||
| right; | ||
| const firstChild = el.children[0]; | ||
| if (firstChild) { | ||
| // set padding or marginLeft for flex | ||
| firstChild.x = left; | ||
| firstChild.marginLeft = left; | ||
| } | ||
| let maxHeight = 0; | ||
| el.children.forEach(c => { | ||
| c.y = top; | ||
| c.marginTop = top; | ||
| maxHeight = Math.max(maxHeight, c.height || 0); | ||
| }); | ||
| el.height = maxHeight + top + bottom; | ||
| // let flex know we need to re-layout | ||
| return true; | ||
| el.onBeforeLayout = () => { | ||
| el.width = | ||
| el.children.reduce((acc, c) => { | ||
| return acc + (c.width || 0); | ||
| }, 0) + | ||
| left + | ||
| right; | ||
| const firstChild = el.children[0]; | ||
| if (firstChild) { | ||
| // set padding or marginLeft for flex | ||
| firstChild.x = left; | ||
| firstChild.marginLeft = left; | ||
| } | ||
| let maxHeight = 0; | ||
| el.children.forEach(c => { | ||
| c.y = top; | ||
| c.marginTop = top; | ||
| maxHeight = Math.max(maxHeight, c.height || 0); | ||
| }); | ||
| el.height = maxHeight + top + bottom; | ||
| // let flex know we need to re-layout | ||
| return true; | ||
| }; | ||
| } |
@@ -8,2 +8,2 @@ import type { ElementNode, ElementText } from '@lightningtv/core'; | ||
| } | ||
| export declare function withScrolling(isRow: boolean): (componentRef: ScrollableElement, selectedElement: ElementNode | ElementText, selected?: number, lastSelected?: number) => void; | ||
| export declare function withScrolling(isRow: boolean): (componentRef: ScrollableElement, selectedElement?: ElementNode | ElementText, selected?: number, lastSelected?: number) => void; |
@@ -28,4 +28,5 @@ /* | ||
| const offset = componentRef.offset; | ||
| const selectedPosition = selectedElement?.[axis] ?? 0; | ||
| const selectedSize = selectedElement?.[dimension] ?? 0; | ||
| selectedElement = selectedElement || componentRef.children[selected]; | ||
| const selectedPosition = selectedElement[axis] ?? 0; | ||
| const selectedSize = selectedElement[dimension] ?? 0; | ||
| const movement = lastSelected === undefined ? 'none' : selected > lastSelected ? 'incremental' : 'decremental'; | ||
@@ -32,0 +33,0 @@ let nextPosition = rootPosition; |
| { | ||
| "name": "@lightningtv/solid-ui", | ||
| "version": "0.24.0", | ||
| "version": "0.25.0", | ||
| "description": "A shared library of components for the LightningJS Solid Framework.", | ||
@@ -41,4 +41,4 @@ "main": "dist/index.js", | ||
| "peerDependencies": { | ||
| "@lightningtv/core": "^1.4.1", | ||
| "@lightningtv/solid": "^1.5.0", | ||
| "@lightningtv/core": "^1.5.7", | ||
| "@lightningtv/solid": "^1.6.6", | ||
| "solid-js": "*" | ||
@@ -67,3 +67,3 @@ }, | ||
| "typescript": "^5.4.5", | ||
| "vite": "^5.2.12", | ||
| "vite": "^5.3.5", | ||
| "vite-bundle-visualizer": "^1.2.1", | ||
@@ -70,0 +70,0 @@ "vite-plugin-cross-origin-isolation": "^0.1.6", |
@@ -18,4 +18,3 @@ /* | ||
| import { renderer } from '@lightningtv/core'; | ||
| import type { TextureMap } from '@lightningjs/renderer'; | ||
| import { renderer, type TextureMap } from '@lightningtv/core'; | ||
@@ -22,0 +21,0 @@ export interface SpriteDef { |
@@ -18,4 +18,3 @@ /* | ||
| import { ElementNode, type KeyHandler } from '@lightningtv/core'; | ||
| import { assertTruthy } from './index.js'; | ||
| import { ElementNode, type KeyHandler, assertTruthy } from '@lightningtv/core'; | ||
@@ -22,0 +21,0 @@ export function onGridFocus(this: ElementNode) { |
@@ -22,3 +22,2 @@ /* | ||
| export { chainFunctions } from './chainFunctions.js'; | ||
| export { assertTruthy } from './assertTruthy.js'; | ||
| export { handleNavigation, onGridFocus } from './handleNavigation.js'; | ||
@@ -25,0 +24,0 @@ export { scrollToIndex } from './scrollToIndex.js'; |
@@ -56,28 +56,26 @@ /* | ||
| el.onBeforeLayout = (_, size) => { | ||
| if (size) { | ||
| el.width = | ||
| el.children.reduce((acc, c) => { | ||
| return acc + (c.width || 0); | ||
| }, 0) + | ||
| left + | ||
| right; | ||
| const firstChild = el.children[0]; | ||
| if (firstChild) { | ||
| // set padding or marginLeft for flex | ||
| firstChild.x = left; | ||
| firstChild.marginLeft = left; | ||
| } | ||
| el.onBeforeLayout = () => { | ||
| el.width = | ||
| el.children.reduce((acc, c) => { | ||
| return acc + (c.width || 0); | ||
| }, 0) + | ||
| left + | ||
| right; | ||
| const firstChild = el.children[0]; | ||
| if (firstChild) { | ||
| // set padding or marginLeft for flex | ||
| firstChild.x = left; | ||
| firstChild.marginLeft = left; | ||
| } | ||
| let maxHeight = 0; | ||
| el.children.forEach(c => { | ||
| c.y = top; | ||
| c.marginTop = top; | ||
| maxHeight = Math.max(maxHeight, c.height || 0); | ||
| }); | ||
| el.height = maxHeight + top + bottom; | ||
| // let flex know we need to re-layout | ||
| return true; | ||
| } | ||
| let maxHeight = 0; | ||
| el.children.forEach(c => { | ||
| c.y = top; | ||
| c.marginTop = top; | ||
| maxHeight = Math.max(maxHeight, c.height || 0); | ||
| }); | ||
| el.height = maxHeight + top + bottom; | ||
| // let flex know we need to re-layout | ||
| return true; | ||
| }; | ||
| } |
@@ -34,3 +34,3 @@ /* | ||
| componentRef: ScrollableElement, | ||
| selectedElement: ElementNode | ElementText, | ||
| selectedElement?: ElementNode | ElementText, | ||
| selected: number = 0, | ||
@@ -47,4 +47,5 @@ lastSelected?: number | ||
| const offset = componentRef.offset; | ||
| const selectedPosition = selectedElement?.[axis] ?? 0; | ||
| const selectedSize = selectedElement?.[dimension] ?? 0; | ||
| selectedElement = selectedElement || componentRef.children[selected]; | ||
| const selectedPosition = selectedElement[axis] ?? 0; | ||
| const selectedSize = selectedElement[dimension] ?? 0; | ||
| const movement = | ||
@@ -51,0 +52,0 @@ lastSelected === undefined ? 'none' : selected > lastSelected ? 'incremental' : 'decremental'; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-0.67%
786057
- Number of package files
- decreased by-0.77%
389
- Lines of code
- decreased by-0.67%
19207
No dependency changes