192 lines
3.3 KiB
TypeScript
192 lines
3.3 KiB
TypeScript
import { createStyle } from '@gluestack-style/react';
|
|
|
|
export const Slider = createStyle({
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
variants: {
|
|
orientation: {
|
|
horizontal: {
|
|
w: '$full',
|
|
_track: {
|
|
width: '$full',
|
|
},
|
|
_filledTrack: {
|
|
height: '$full',
|
|
},
|
|
},
|
|
vertical: {
|
|
h: '$full',
|
|
_track: {
|
|
height: '$full',
|
|
},
|
|
_filledTrack: {
|
|
width: '$full',
|
|
},
|
|
},
|
|
},
|
|
isReversed: {
|
|
true: {},
|
|
false: {},
|
|
},
|
|
size: {
|
|
sm: {
|
|
_thumb: {
|
|
h: '$4',
|
|
w: '$4',
|
|
},
|
|
},
|
|
md: {
|
|
_thumb: {
|
|
h: '$5',
|
|
w: '$5',
|
|
},
|
|
},
|
|
lg: {
|
|
_thumb: {
|
|
h: '$6',
|
|
w: '$6',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
compoundVariants: [
|
|
{
|
|
orientation: 'horizontal',
|
|
size: 'sm',
|
|
value: {
|
|
_track: {
|
|
height: '$1',
|
|
flexDirection: 'row',
|
|
},
|
|
},
|
|
},
|
|
{
|
|
orientation: 'horizontal',
|
|
size: 'sm',
|
|
isReversed: true,
|
|
value: {
|
|
_track: {
|
|
height: '$1',
|
|
flexDirection: 'row-reverse',
|
|
},
|
|
},
|
|
},
|
|
{
|
|
orientation: 'horizontal',
|
|
size: 'md',
|
|
value: {
|
|
_track: {
|
|
height: 5,
|
|
flexDirection: 'row',
|
|
},
|
|
},
|
|
},
|
|
{
|
|
orientation: 'horizontal',
|
|
size: 'md',
|
|
isReversed: true,
|
|
value: {
|
|
_track: {
|
|
height: 5,
|
|
flexDirection: 'row-reverse',
|
|
},
|
|
},
|
|
},
|
|
{
|
|
orientation: 'horizontal',
|
|
size: 'lg',
|
|
value: {
|
|
_track: {
|
|
height: '$1.5',
|
|
flexDirection: 'row',
|
|
},
|
|
},
|
|
},
|
|
{
|
|
orientation: 'horizontal',
|
|
size: 'lg',
|
|
isReversed: true,
|
|
value: {
|
|
_track: {
|
|
height: '$1.5',
|
|
flexDirection: 'row-reverse',
|
|
},
|
|
},
|
|
},
|
|
{
|
|
orientation: 'vertical',
|
|
size: 'sm',
|
|
value: {
|
|
_track: {
|
|
w: '$1',
|
|
flexDirection: 'column-reverse',
|
|
},
|
|
},
|
|
},
|
|
{
|
|
orientation: 'vertical',
|
|
size: 'sm',
|
|
isReversed: true,
|
|
value: {
|
|
_track: {
|
|
width: '$1',
|
|
flexDirection: 'column',
|
|
},
|
|
},
|
|
},
|
|
{
|
|
orientation: 'vertical',
|
|
size: 'md',
|
|
value: {
|
|
_track: {
|
|
width: 5,
|
|
flexDirection: 'column-reverse',
|
|
},
|
|
},
|
|
},
|
|
{
|
|
orientation: 'vertical',
|
|
size: 'md',
|
|
isReversed: true,
|
|
value: {
|
|
_track: {
|
|
width: 5,
|
|
flexDirection: 'column',
|
|
},
|
|
},
|
|
},
|
|
{
|
|
orientation: 'vertical',
|
|
size: 'lg',
|
|
value: {
|
|
_track: {
|
|
width: '$1.5',
|
|
flexDirection: 'column-reverse',
|
|
},
|
|
},
|
|
},
|
|
{
|
|
orientation: 'vertical',
|
|
size: 'lg',
|
|
isReversed: true,
|
|
value: {
|
|
_track: {
|
|
width: '$1.5',
|
|
flexDirection: 'column',
|
|
},
|
|
},
|
|
},
|
|
],
|
|
_web: {
|
|
':disabled': {
|
|
// @ts-ignore
|
|
pointerEvents: 'all !important',
|
|
cursor: 'not-allowed',
|
|
opacity: 0.4,
|
|
},
|
|
},
|
|
defaultProps: {
|
|
size: 'md',
|
|
orientation: 'horizontal',
|
|
},
|
|
});
|