Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Stacks v4.0.0 (with Unistyles v3)#53

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Open
mobily wants to merge3 commits intomain
base:main
Choose a base branch
Loading
fromfeature/v4-unistyles-3
Open
Show file tree
Hide file tree
Changes from1 commit
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
PrevPrevious commit
NextNext commit
feat: use Unistyles v3
  • Loading branch information
@mobily
mobily committedFeb 8, 2025
commit62eeb9c0472282dc6f68b66d1397265e477bfe30
12 changes: 12 additions & 0 deletionsjustfile
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
build:
rm -rf ./lib
bun run tsup

test:
bun run tsc --pretty --noEmit
bun run eslint ./src

publish tag="latest": test build
@echo "Using tag: {{tag}}"
npm publish --tag {{tag}}

5 changes: 0 additions & 5 deletionspackage.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -16,11 +16,6 @@
"*.md",
"package.json"
],
"scripts": {
"build": "rm -rf ./lib && tsup",
"lint": "eslint ./src",
"types:check": "tsc --noEmit"
},
"publishConfig": {
"access": "public"
},
Expand Down
87 changes: 79 additions & 8 deletionssrc/components/Box.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,25 @@
import * as React from 'react';
import { DimensionValue, View, ViewProps } from 'react-native';
import {createStyleSheet, useStyles } from 'react-native-unistyles';
import {ColorValue,DimensionValue, View, ViewProps } from 'react-native';
import {StyleSheet } from 'react-native-unistyles';

import { useDebugStyle, useResponsiveProp, useSpacingHelpers } from '../hooks';
import type * as Polymorphic from '../polymorphic';
import type { AxisX, AxisY, Direction, Flex, ResponsiveProp, Space, Stretch, Wrap } from '../types';
import type {
AxisX,
AxisY,
Direction,
Flex,
OutlineStyle,
Overflow,
PointerEvent,
ResponsiveProp,
Space,
Stretch,
Wrap,
} from '../types';
import { resolveDirectionAndReverse } from '../utils';

export type BoxProps = ViewProps & {
export type BoxProps =Omit<ViewProps, 'pointerEvents'> & {
readonly alignX?: ResponsiveProp<AxisX | AxisY | Space | Stretch>;
readonly alignY?: ResponsiveProp<AxisX | AxisY | Space | Stretch>;
readonly gap?: ResponsiveProp<number>;
Expand DownExpand Up@@ -35,7 +47,7 @@ export type BoxProps = ViewProps & {
readonly wrap?: ResponsiveProp<Wrap>;
readonly flex?: ResponsiveProp<Flex>;
readonly reverse?: ResponsiveProp<boolean>;
readonly backgroundColor?: ResponsiveProp<string>;
readonly backgroundColor?: ResponsiveProp<ColorValue>;
readonly borderRadius?: ResponsiveProp<number>;
readonly borderTopLeftRadius?: ResponsiveProp<number>;
readonly borderTopRightRadius?: ResponsiveProp<number>;
Expand All@@ -46,9 +58,16 @@ export type BoxProps = ViewProps & {
readonly borderRightWidth?: ResponsiveProp<number>;
readonly borderBottomWidth?: ResponsiveProp<number>;
readonly borderLeftWidth?: ResponsiveProp<number>;
readonly borderColor?: ResponsiveProp<string>;
readonly borderColor?: ResponsiveProp<ColorValue>;
readonly width?: ResponsiveProp<DimensionValue>;
readonly height?: ResponsiveProp<DimensionValue>;
readonly outlineColor?: ResponsiveProp<ColorValue>;
readonly outlineStyle?: ResponsiveProp<OutlineStyle>;
readonly outlineOffset?: ResponsiveProp<number>;
readonly outlineWidth?: ResponsiveProp<number>;
readonly opacity?: ResponsiveProp<number>;
readonly pointerEvents?: ResponsiveProp<PointerEvent>;
readonly overflow?: ResponsiveProp<Overflow>;
readonly debuggable?: ResponsiveProp<boolean>;
};

Expand DownExpand Up@@ -101,6 +120,13 @@ export const Box = React.forwardRef((props, ref) => {
borderLeftWidth,
style,
debuggable = true,
outlineColor,
outlineWidth,
outlineStyle,
outlineOffset,
opacity,
pointerEvents,
overflow,
...rest
} = props;

Expand All@@ -116,6 +142,11 @@ export const Box = React.forwardRef((props, ref) => {
const justifyContent = resolveResponsiveProp(isDirectionColumn ? alignY : alignX);
const defaultWidth = resolveResponsiveProp(width);
const defaultHeight = resolveResponsiveProp(height);

const defaultOutlineStyle = resolveResponsiveProp(outlineStyle);
const defaultPointerEvents = resolveResponsiveProp(pointerEvents);
const defaultOverflow = resolveResponsiveProp(overflow);

const isDebuggable = resolveResponsiveProp(debuggable);

const flexWrap = resolveResponsiveProp(wrap);
Expand All@@ -129,12 +160,15 @@ export const Box = React.forwardRef((props, ref) => {
: 'content',
);

const {styles } = useStyles(stylesheet,{
styles.useVariants({
justifyContent,
alignItems,
flexBasis,
flexWrap,
flexDirection,
outlineStyle: defaultOutlineStyle,
pointerEvents: defaultPointerEvents,
overflow: defaultOverflow,
});

return (
Expand DownExpand Up@@ -179,6 +213,10 @@ export const Box = React.forwardRef((props, ref) => {
borderBottomWidth: resolveResponsiveProp(borderBottomWidth),
borderLeftWidth: resolveResponsiveProp(borderLeftWidth),
borderColor: resolveResponsiveProp(borderColor),
outlineColor: resolveResponsiveProp(outlineColor),
outlineOffset: resolveResponsiveProp(outlineOffset),
outlineWidth: resolveResponsiveProp(outlineWidth),
opacity: resolveResponsiveProp(opacity),
},
isDebuggable && debugStyle,
style,
Expand All@@ -191,7 +229,7 @@ export const Box = React.forwardRef((props, ref) => {

Box.displayName = 'Box';

conststylesheet =createStyleSheet({
conststyles =StyleSheet.create({
root: {
variants: {
alignItems: {
Expand DownExpand Up@@ -269,6 +307,39 @@ const stylesheet = createStyleSheet({
flexWrap: 'wrap-reverse',
},
},
pointerEvents: {
auto: {
pointerEvents: 'auto',
},
'box-none': {
pointerEvents: 'box-none',
},
'box-only': {
pointerEvents: 'box-only',
},
none: {
pointerEvents: 'none',
},
},
overflow: {
visible: {
overflow: 'visible',
},
hidden: {
overflow: 'hidden',
},
},
outlineStyle: {
solid: {
outlineStyle: 'solid',
},
dotted: {
outlineStyle: 'dotted',
},
dashed: {
outlineStyle: 'dashed',
},
},
flexBasis: {
content: {
flex: 0,
Expand Down
22 changes: 21 additions & 1 deletionsrc/components/Column.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,7 +2,27 @@ import * as React from 'react';

import { BoxProps } from './Box';

export const Column = (_props: BoxProps): JSX.Element => {
export type ColumnProps = Omit<
BoxProps,
| 'backgroundColor'
| 'borderRadius'
| 'borderTopLeftRadius'
| 'borderTopRightRadius'
| 'borderBottomLeftRadius'
| 'borderBottomRightRadius'
| 'borderWidth'
| 'borderTopWidth'
| 'borderRightWidth'
| 'borderBottomWidth'
| 'borderLeftWidth'
| 'borderColor'
| 'outlineColor'
| 'outlineStyle'
| 'outlineWidth'
| 'outlineOffset'
>;

export const Column = (_props: ColumnProps): JSX.Element => {
throw new Error('[Stacks] Column must be a direct child of Columns.');
};

Expand Down
Loading
[8]ページ先頭
©2009-2025 Movatter.jp