-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* WIP * feat: flex * feat: layout flex * feat: Flex and View * clean up a few things * remove aliases * add to the gallery * v0.9.25-0 * support colors on backgrounds * v0.9.25-1
- Loading branch information
1 parent
f3de7be
commit 43ec63b
Showing
17 changed files
with
862 additions
and
50 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| import { | ||
| StyleHandlers, | ||
| classNames, | ||
| passthroughStyle, | ||
| responsiveDimensionValue, | ||
| useDOMRef, | ||
| useStyleProps, | ||
| } from '../utils'; | ||
| import { DOMProps, DOMRef, FlexStyleProps } from '../types'; | ||
| import { filterDOMProps } from '@react-aria/utils'; | ||
| import React, { forwardRef, ReactNode } from 'react'; | ||
| import { css } from '@emotion/react'; | ||
|
|
||
| export interface FlexProps extends DOMProps, FlexStyleProps { | ||
| /** Children of the flex container. */ | ||
| children: ReactNode; | ||
| } | ||
|
|
||
| const flexCSS = css` | ||
| display: flex; | ||
| `; | ||
|
|
||
| const flexStyleProps: StyleHandlers = { | ||
| direction: ['flexDirection', passthroughStyle], | ||
| wrap: ['flexWrap', flexWrapValue], | ||
| justifyContent: ['justifyContent', flexAlignValue], | ||
| alignItems: ['alignItems', flexAlignValue], | ||
| alignContent: ['alignContent', flexAlignValue], | ||
| }; | ||
|
|
||
| function Flex(props: FlexProps, ref: DOMRef<HTMLDivElement>) { | ||
| let { children, ...otherProps } = props; | ||
|
|
||
| let matchedBreakpoints = ['base']; | ||
| let { styleProps } = useStyleProps(otherProps); | ||
| let { styleProps: flexStyle } = useStyleProps(otherProps, flexStyleProps); | ||
| let domRef = useDOMRef(ref); | ||
|
|
||
| // If no gaps, or native support exists, then we only need to render a single div. | ||
| let style = { | ||
| ...styleProps.style, | ||
| ...flexStyle.style, | ||
| }; | ||
|
|
||
| if (props.gap != null) { | ||
| style.gap = responsiveDimensionValue(props.gap, matchedBreakpoints); | ||
| } | ||
|
|
||
| if (props.columnGap != null) { | ||
| style.columnGap = responsiveDimensionValue( | ||
| props.columnGap, | ||
| matchedBreakpoints | ||
| ); | ||
| } | ||
|
|
||
| if (props.rowGap != null) { | ||
| style.rowGap = responsiveDimensionValue(props.rowGap, matchedBreakpoints); | ||
| } | ||
|
|
||
| return ( | ||
| <div | ||
| css={flexCSS} | ||
| {...filterDOMProps(otherProps)} | ||
| className={classNames('flex', styleProps.className)} | ||
| style={style} | ||
| ref={domRef} | ||
| > | ||
| {children} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| /** | ||
| * Normalize 'start' and 'end' alignment values to 'flex-start' and 'flex-end' | ||
| * in flex containers for browser compatibility. | ||
| */ | ||
| function flexAlignValue(value) { | ||
| if (value === 'start') { | ||
| return 'flex-start'; | ||
| } | ||
|
|
||
| if (value === 'end') { | ||
| return 'flex-end'; | ||
| } | ||
|
|
||
| return value; | ||
| } | ||
|
|
||
| /** | ||
| * Takes a boolean and translates it to flex wrap or nowrap. | ||
| */ | ||
| function flexWrapValue(value: boolean | 'wrap' | 'nowrap') { | ||
| if (typeof value === 'boolean') { | ||
| return value ? 'wrap' : 'nowrap'; | ||
| } | ||
|
|
||
| return value; | ||
| } | ||
|
|
||
| /** | ||
| * A layout container using flexbox. Provides Spectrum dimension values, and supports the gap | ||
| * property to define consistent spacing between items. | ||
| */ | ||
| const _Flex = forwardRef(Flex); | ||
| export { _Flex as Flex }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './Flex'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export type Direction = 'ltr' | 'rtl'; |
Oops, something went wrong.