All files / web/styled-system/patterns float.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
1x
1x
1x
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
1x
 
 
 
1x
1x
1x
import { getPatternStyles, patternFns } from '../helpers.mjs';
import { css } from '../css/index.mjs';
 
const floatConfig = {
transform(props, { map }) {
  const { offset, offsetX, offsetY, placement, ...rest } = props;
  return {
    display: "inline-flex",
    justifyContent: "center",
    alignItems: "center",
    position: "absolute",
    insetBlockStart: map(placement, (v) => {
      const [side] = v.split("-");
      const map2 = { top: offsetY, middle: "50%", bottom: "auto" };
      return map2[side];
    }),
    insetBlockEnd: map(placement, (v) => {
      const [side] = v.split("-");
      const map2 = { top: "auto", middle: "50%", bottom: offsetY };
      return map2[side];
    }),
    insetInlineStart: map(placement, (v) => {
      const [, align] = v.split("-");
      const map2 = { start: offsetX, center: "50%", end: "auto" };
      return map2[align];
    }),
    insetInlineEnd: map(placement, (v) => {
      const [, align] = v.split("-");
      const map2 = { start: "auto", center: "50%", end: offsetX };
      return map2[align];
    }),
    translate: map(placement, (v) => {
      const [side, align] = v.split("-");
      const mapX = { start: "-50%", center: "-50%", end: "50%" };
      const mapY = { top: "-50%", middle: "-50%", bottom: "50%" };
      return `${mapX[align]} ${mapY[side]}`;
    }),
    ...rest
  };
},
defaultValues(props) {
  const offset = props.offset || "0";
  return { offset, offsetX: offset, offsetY: offset, placement: "top-end" };
}}
 
export const getFloatStyle = (styles = {}) => {
  const _styles = getPatternStyles(floatConfig, styles)
  return floatConfig.transform(_styles, patternFns)
}
 
export const float = (styles) => css(getFloatStyle(styles))
float.raw = getFloatStyle