react-spring#SpringValue TypeScript Examples
The following examples show how to use
react-spring#SpringValue.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: shadow-subsection.tsx From utopia with MIT License | 4 votes |
|
ShadowSubsection = React.memo(() => {
const isVisible = useIsSubSectionVisible('shadow')
const {
value,
onUnsetValues,
onSubmitValue,
controlStatus,
controlStyles,
propertyStatus,
useSubmitValueFactory,
} = useInspectorStyleInfo('boxShadow')
const headerStyle = useGetSubsectionHeaderStyle(controlStatus)
const [insertShadowValue] = useSubmitValueFactory(updateInsertShadow)
const { springs, bind } = useArraySuperControl(value, onSubmitValue, rowHeight)
const contextMenuItems = utils.stripNulls([
value.length > 0 ? addOnUnsetValues(['boxShadow'], onUnsetValues) : null,
])
if (!isVisible) {
return null
}
return (
<InspectorContextMenuWrapper
id='shadow-subsection-context-menu'
items={contextMenuItems}
data={null}
>
<InspectorSubsectionHeader style={headerStyle}>
<FlexRow
style={{
flexGrow: 1,
gap: 8,
}}
>
<InspectorSectionIcons.Shadow />
<span>Shadow</span>
</FlexRow>
{propertyStatus.overwritable ? (
<SquareButton highlight onMouseDown={insertShadowValue}>
<Icn
onMouseDown={insertShadowValue}
style={{ paddingTop: 1 }}
category='semantic'
type='plus'
color={propertyStatus.controlled ? 'primary' : 'secondary'}
width={16}
height={16}
/>
</SquareButton>
) : null}
</InspectorSubsectionHeader>
<div
style={{
height: rowHeight * springs.length,
}}
>
{springs.map((springStyle: { [x: string]: SpringValue<any> }, index: number) => {
const boxShadow = value[index]
if (boxShadow != null) {
return (
<animated.div
{...bind(index)}
key={index}
style={{
...springStyle,
width: '100%',
position: 'absolute',
height: rowHeight,
}}
>
<ShadowItem
value={boxShadow}
shadowsLength={value.length}
useSubmitValueFactory={useSubmitValueFactory}
onUnsetValues={onUnsetValues}
index={index}
key={index}
controlStatus={controlStatus}
controlStyles={controlStyles}
contextMenuItems={contextMenuItems}
/>
</animated.div>
)
} else {
throw new Error(`No shadow exists at index ${index}`)
}
})}
</div>
</InspectorContextMenuWrapper>
)
})
Example #2
| Source File: text-shadow-subsection.tsx From utopia with MIT License | 4 votes |
|
TextShadowSubsection = React.memo(() => {
const {
value: textShadowsValue,
controlStatus,
controlStyles,
onUnsetValues,
onSubmitValue,
useSubmitValueFactory,
} = useInspectorStyleInfo('textShadow', undefined, (transformedType: CSSTextShadows) => {
if (Array.isArray(transformedType) && transformedType.length === 0) {
return {}
} else {
return {
textShadow: transformedType,
}
}
})
const [insertTextShadowItemSubmitValue] = useSubmitValueFactory(insertTextShadow)
const isVisible = useIsSubSectionVisible('textShadow')
const { springs, bind } = useArraySuperControl(
textShadowsValue,
onSubmitValue,
PropertyRowHeightWithLabel,
)
const unsetTextShadows = React.useCallback(() => {
onUnsetValues()
}, [onUnsetValues])
const contextMenuItems = utils.stripNulls([
textShadowsValue.length > 0 ? addOnUnsetValues(['textShadow'], onUnsetValues) : null,
])
const length = textShadowsValue.length
const insertShadow = React.useCallback(() => {
insertTextShadowItemSubmitValue(null)
}, [insertTextShadowItemSubmitValue])
if (isVisible) {
return (
<InspectorContextMenuWrapper
id='text-shadow-subsection-context-menu'
items={contextMenuItems}
data={null}
>
<InspectorSubsectionHeader>
<FlexRow
style={{
flexGrow: 1,
gap: 8,
}}
>
<InspectorSectionIcons.TextShadow />
<span>Text Shadow</span>
</FlexRow>
<SquareButton highlight onMouseDown={insertShadow}>
<Icons.Plus style={{ paddingTop: 1 }} />
</SquareButton>
</InspectorSubsectionHeader>
<div
style={{
height: PropertyRowHeightWithLabel * springs.length,
}}
>
{controlStyles.unknown ? (
<FakeUnknownArrayItem controlStatus={controlStatus} />
) : (
springs.map((springStyle: { [x: string]: SpringValue<any> }, index: number) => {
const value = textShadowsValue[index]
if (value != null) {
return (
<animated.div
{...bind(index)}
key={index}
style={{
...springStyle,
position: 'absolute',
height: PropertyRowHeightWithLabel,
}}
>
<TextShadowItem
key={index}
value={value}
textShadowsLength={length}
index={index}
controlStatus={controlStatus}
controlStyles={controlStyles}
useSubmitValueFactory={useSubmitValueFactory}
/>
</animated.div>
)
} else {
throw new Error(`No text shadow exists at index ${index}`)
}
})
)}
</div>
</InspectorContextMenuWrapper>
)
} else {
return null
}
})
Example #3
| Source File: transform-subsection.tsx From utopia with MIT License | 4 votes |
|
TransformSubsection = React.memo(() => {
const {
value,
onSubmitValue,
onUnsetValues,
controlStatus,
controlStyles,
useSubmitValueFactory,
propertyStatus,
} = useInspectorStyleInfo('transform', undefined, CSSTransformsToTransform)
const transformContextMenuItems = utils.stripNulls([
controlStyles.unsettable ? addOnUnsetValues(['transform'], onUnsetValues) : null,
])
const { springs, bind } = useArraySuperControl(value, onSubmitValue, rowHeight)
const insertCSSTransformMouseDown = React.useCallback(() => {
insertCSSTransform(value, onSubmitValue)
}, [onSubmitValue, value])
const unsetCSSTransforms = React.useCallback(() => {
onUnsetValues()
}, [onUnsetValues])
const headerStyle = useGetSubsectionHeaderStyle(controlStatus)
const isVisible = useIsSubSectionVisible('transform')
if (!isVisible) {
return null
} else {
return (
<InspectorContextMenuWrapper
id='transform-subsection-context-menu'
items={transformContextMenuItems}
data={null}
>
<InspectorSubsectionHeader style={headerStyle}>
<FlexRow style={{ flexGrow: 1, gap: 8 }}>
<InspectorSectionIcons.Transforms />
<span>Transforms</span>
</FlexRow>
{propertyStatus.overwritable ? (
<SquareButton highlight onMouseDown={insertCSSTransformMouseDown}>
<Icn
style={{ paddingTop: 1 }}
category='semantic'
type='plus'
color={propertyStatus.controlled ? 'primary' : 'secondary'}
width={16}
height={16}
/>
</SquareButton>
) : null}
</InspectorSubsectionHeader>
{controlStyles.unknown ? (
<FakeUnknownArrayItem controlStatus={controlStatus} />
) : (
<div
style={{
height: rowHeight * springs.length,
}}
>
{springs.map((springStyle: { [x: string]: SpringValue<any> }, index: number) => {
const transformItem = value[index]
if (transformItem != null) {
let item: JSX.Element
if (isCSSTransformSingleItem(transformItem)) {
item = (
<SingleLengthItem
key={index}
value={transformItem}
emptyValue={
transformItemControlMetadatas[transformItem.type]
.emptyValue as CSSTransformSingleLengthItem
}
index={index}
controlStatus={controlStatus}
controlStyles={controlStyles}
useSubmitValueFactory={useSubmitValueFactory}
/>
)
} else if (isCSSTransformDoubleItem(transformItem)) {
item = (
<DoubleLengthItem
key={index}
value={transformItem}
emptyValue={
transformItemControlMetadatas[transformItem.type]
.emptyValue as CSSTransformDoubleLengthItem
}
index={index}
controlStatus={controlStatus}
controlStyles={controlStyles}
useSubmitValueFactory={useSubmitValueFactory}
/>
)
} else {
item = (
<UnknownArrayItem
index={index}
key={`unknown-${index}`}
useSubmitTransformedValuesFactory={useSubmitValueFactory}
value={transformItem}
controlStatus={controlStatus}
controlStyles={controlStyles}
/>
)
}
return (
<animated.div
{...bind(index)}
key={index}
style={{
...springStyle,
width: '100%',
position: 'absolute',
height: rowHeight,
}}
>
{item}
</animated.div>
)
} else {
throw new Error(`No transform item exists at index ${index}`)
}
})}
</div>
)}
</InspectorContextMenuWrapper>
)
}
})
