Ontex Posts - Answer Overflow

Ontex

Explore posts from servers

•Created by Ontex on 10/7/2023 in #front-end

Accept any type that satisifies that other type in function

Is there like

type AWithFields = {
  foo: string
}

const mapper = <T satisifies AWithFields>(param: T) => {
  // update param fields here and return
  return param
}

type AWithFields = {
  foo: string
}

const mapper = <T satisifies AWithFields>(param: T) => {
  // update param fields here and return
  return param
}

I wanted to accept any param that satisifies AWithFields in the function.

2 replies

KPCKevin Powell - Community

•Created by Ontex on 8/10/2023 in #front-end

Conditional Type

Is it possible to have a type which resolves between two types with a conditional whether a field on an object exists or not.

Type A = {a: string, b: string}
Type B = {c: string, b: number}

Type C = A | B

Type A = {a: string, b: string}
Type B = {c: string, b: number}

Type C = A | B

I want to achieve something like this

const obj: C;
obj.a ? obj.b : obj.b + 1

const obj: C;
obj.a ? obj.b : obj.b + 1

I know the example can be resolved with another way but my use case is more complex. I just want the type to be resolved like that. How do you go about this?

3 replies

KPCKevin Powell - Community

•Created by Ontex on 8/8/2023 in #front-end

Responsive Grid

I wanted to make two different grid between mobile and desktop screens. What I want is the following: On lg: a b c d e On smallest mobile: a b e c d Basically one full row on lg and two columns on mobile with last item on second column. I am trying grid-area for this but it seems to jumble around on mobile.

.wrapper {
  grid-template-columns: 1fr 1fr 1fr 0.5fr auto
  grid-template-areas: "a b c d e"
}

on mobile
.wrapper {
  grid-template-columns: 1fr auto
  grid-template-areas: "a e" "b" "c" "d"
}

.wrapper {
  grid-template-columns: 1fr 1fr 1fr 0.5fr auto
  grid-template-areas: "a b c d e"
}

on mobile
.wrapper {
  grid-template-columns: 1fr auto
  grid-template-areas: "a e" "b" "c" "d"
}

Edit: code Edit 2: Code is originally in chakra-ui but gist of styling is what's shown.

6 replies

KPCKevin Powell - Community

•Created by Ontex on 2/28/2023 in #front-end

Grid item content goes out of container

2 replies

Gaming

Programming