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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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>
    )
  }
})