@mapples/components 1.0.0 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +81 -0
- package/dist/components/ImageCarousel/CarouselItem.d.ts +20 -0
- package/dist/components/ImageCarousel/CarouselItem.d.ts.map +1 -0
- package/dist/components/ImageCarousel/CarouselItem.js +20 -0
- package/dist/components/ImageCarousel/CarouselItem.js.map +1 -0
- package/dist/components/ImageCarousel/CarouselItemIndicator.d.ts +13 -0
- package/dist/components/ImageCarousel/CarouselItemIndicator.d.ts.map +1 -0
- package/dist/components/ImageCarousel/CarouselItemIndicator.js +13 -0
- package/dist/components/ImageCarousel/CarouselItemIndicator.js.map +1 -0
- package/dist/components/ImageCarousel/index.d.ts +31 -0
- package/dist/components/ImageCarousel/index.d.ts.map +1 -0
- package/dist/components/ImageCarousel/index.js +43 -0
- package/dist/components/ImageCarousel/index.js.map +1 -0
- package/dist/components/ImageCarousel/schematic.d.ts +3 -0
- package/dist/components/ImageCarousel/schematic.d.ts.map +1 -0
- package/dist/components/ImageCarousel/schematic.js +6 -0
- package/dist/components/ImageCarousel/schematic.js.map +1 -0
- package/dist/index.d.ts +9 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +9 -0
- package/dist/index.js.map +1 -1
- package/dist/schematics.d.ts +2 -1
- package/dist/schematics.d.ts.map +1 -1
- package/dist/schematics.js +4 -1
- package/dist/schematics.js.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1 +1,82 @@
|
|
|
1
1
|
# @mapples/components
|
|
2
|
+
|
|
3
|
+
Placeholder package for app-specific component registration in the Mapples Open Kit. Use this package to register custom components and schematics that will be available to the render system and visual editor.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- **Component registry** – Export a `Components` object compatible with `@mapples/render` and `RegisteredComponents` from `@mapples/types`
|
|
8
|
+
- **Schematics** – Attach component schematics (type, groupId, label, Icon, initialProps, styleKeys, props, actionProps) for visual editor integration
|
|
9
|
+
- **TypeScript** – Aligns with `@mapples/types` and `@mapples/ui` patterns
|
|
10
|
+
|
|
11
|
+
## Installation
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install @mapples/components
|
|
15
|
+
# or
|
|
16
|
+
yarn add @mapples/components
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
The package currently exports an empty **`Components`** registry and re-exports from **schematics**. Applications can:
|
|
22
|
+
|
|
23
|
+
1. **Extend in-app** – Import `@mapples/ui` (or other) components and merge with custom components, then pass the combined registry to `RenderProvider` (or use `MapplesApp` / `MapplesAppProvider` from `@mapples/app`, which use `@mapples/ui`’s `Components` by default).
|
|
24
|
+
|
|
25
|
+
2. **Use this package as the app shell** – Add local component definitions and schematics in `src/schematics.ts` (and related files), then build and consume `Components` from `@mapples/components` in your app’s provider setup.
|
|
26
|
+
|
|
27
|
+
### Example: custom component registration
|
|
28
|
+
|
|
29
|
+
```tsx
|
|
30
|
+
// In your app or in this package’s schematics
|
|
31
|
+
import { RegisteredComponent } from '@mapples/types';
|
|
32
|
+
import { MyWidget } from './MyWidget';
|
|
33
|
+
import { MyWidgetIcon } from './MyWidgetIcon';
|
|
34
|
+
|
|
35
|
+
const myWidgetSchematic: RegisteredComponent<MyWidgetProps> = {
|
|
36
|
+
type: 'MyWidget',
|
|
37
|
+
groupId: 'custom',
|
|
38
|
+
label: 'My Widget',
|
|
39
|
+
Component: MyWidget,
|
|
40
|
+
Icon: MyWidgetIcon,
|
|
41
|
+
initialProps: { title: '' },
|
|
42
|
+
styleKeys: [],
|
|
43
|
+
props: [],
|
|
44
|
+
actionProps: [],
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
// Merge with existing Components when providing to RenderProvider
|
|
48
|
+
import { Components } from '@mapples/ui';
|
|
49
|
+
const allComponents = { ...Components, MyWidget: myWidgetSchematic };
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
## API
|
|
53
|
+
|
|
54
|
+
- **`Components`** – `Record<string, RegisteredComponent>` (currently `{}`). Populate via this package’s schematics or by merging in your app.
|
|
55
|
+
- **Schematics** – Re-exported from `./schematics`; add your component definitions here for a single place to maintain the registry.
|
|
56
|
+
|
|
57
|
+
## Dependencies
|
|
58
|
+
|
|
59
|
+
- **@mapples/types** – For `RegisteredComponent`, `StyleKey`, `PropsFormField`, etc.
|
|
60
|
+
- **react** / **react-native** – For component implementations
|
|
61
|
+
- **react-native-svg** – For palette/icons when using SVG icons in schematics
|
|
62
|
+
|
|
63
|
+
## Integration
|
|
64
|
+
|
|
65
|
+
- **@mapples/app** – `MapplesApp` and `MapplesAppProvider` use `@mapples/ui`’s `Components` by default; replace or merge with `@mapples/components` if your app defines its components in this package.
|
|
66
|
+
- **@mapples/render** – `RenderProvider` accepts a `components` prop; pass the registry you build from this package and/or `@mapples/ui`.
|
|
67
|
+
|
|
68
|
+
## Development
|
|
69
|
+
|
|
70
|
+
```bash
|
|
71
|
+
npm run build
|
|
72
|
+
npm run type-check
|
|
73
|
+
npm run lint
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
## License
|
|
77
|
+
|
|
78
|
+
MIT
|
|
79
|
+
|
|
80
|
+
## Author
|
|
81
|
+
|
|
82
|
+
Oleksandr Soloviov – [mapples.org](https://mapples.org/people/olek_soloviov)
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { StyledProp } from '@mapples/style';
|
|
3
|
+
import { ImageProps, ImageStyle } from 'expo-image';
|
|
4
|
+
import { TextStyle, ViewStyle } from 'react-native';
|
|
5
|
+
export type ImageCarouselMode = 'textOver' | 'textUnder';
|
|
6
|
+
export interface ImageCarouselItemProps {
|
|
7
|
+
image?: any;
|
|
8
|
+
title?: string;
|
|
9
|
+
subtitle?: string;
|
|
10
|
+
mode?: ImageCarouselMode;
|
|
11
|
+
imageProps?: ImageProps;
|
|
12
|
+
styleItemContainer?: StyledProp<ViewStyle>;
|
|
13
|
+
styleImage?: StyledProp<ImageStyle>;
|
|
14
|
+
styleTextContainer?: StyledProp<ViewStyle>;
|
|
15
|
+
styleTitle?: StyledProp<TextStyle>;
|
|
16
|
+
styleSubtitle?: StyledProp<TextStyle>;
|
|
17
|
+
}
|
|
18
|
+
declare const CarouselItem: FC<ImageCarouselItemProps>;
|
|
19
|
+
export default CarouselItem;
|
|
20
|
+
//# sourceMappingURL=CarouselItem.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CarouselItem.d.ts","sourceRoot":"","sources":["../../../src/components/ImageCarousel/CarouselItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAE3B,OAAO,EAGL,UAAU,EAGX,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,MAAM,MAAM,iBAAiB,GAAG,UAAU,GAAG,WAAW,CAAC;AAEzD,MAAM,WAAW,sBAAsB;IACrC,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,kBAAkB,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IAC3C,UAAU,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;IACpC,kBAAkB,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IAC3C,UAAU,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IACnC,aAAa,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;CACvC;AAED,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,sBAAsB,CAwC5C,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { StyledImage, StyledImageBackground, StyledView, Typography, } from '@mapples/style';
|
|
2
|
+
const CarouselItem = ({ image, title, subtitle, mode = 'textOver', styleItemContainer, styleImage, styleTextContainer, styleTitle, styleSubtitle, imageProps, }) => {
|
|
3
|
+
if (mode === 'textUnder') {
|
|
4
|
+
return (<StyledView styled={{ style: styleItemContainer }}>
|
|
5
|
+
<StyledImage {...imageProps} source={image} styled={{ style: styleImage }}/>
|
|
6
|
+
<StyledView styled={{ style: styleTextContainer }}>
|
|
7
|
+
<Typography styled={{ style: styleTitle }}>{title}</Typography>
|
|
8
|
+
<Typography styled={{ style: styleSubtitle }}>{subtitle}</Typography>
|
|
9
|
+
</StyledView>
|
|
10
|
+
</StyledView>);
|
|
11
|
+
}
|
|
12
|
+
return (<StyledImageBackground {...imageProps} source={image} styled={{ style: styleItemContainer, imageStyle: styleImage }}>
|
|
13
|
+
<StyledView styled={{ style: styleTextContainer }}>
|
|
14
|
+
<Typography styled={{ style: styleTitle }}>{title}</Typography>
|
|
15
|
+
<Typography styled={{ style: styleSubtitle }}>{subtitle}</Typography>
|
|
16
|
+
</StyledView>
|
|
17
|
+
</StyledImageBackground>);
|
|
18
|
+
};
|
|
19
|
+
export default CarouselItem;
|
|
20
|
+
//# sourceMappingURL=CarouselItem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CarouselItem.js","sourceRoot":"","sources":["../../../src/components/ImageCarousel/CarouselItem.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,WAAW,EACX,qBAAqB,EAErB,UAAU,EACV,UAAU,GACX,MAAM,gBAAgB,CAAC;AAmBxB,MAAM,YAAY,GAA+B,CAAC,EAChD,KAAK,EACL,KAAK,EACL,QAAQ,EACR,IAAI,GAAG,UAAU,EACjB,kBAAkB,EAClB,UAAU,EACV,kBAAkB,EAClB,UAAU,EACV,aAAa,EACb,UAAU,GACX,EAAE,EAAE;IACH,IAAI,IAAI,KAAK,WAAW,EAAE,CAAC;QACzB,OAAO,CACL,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,kBAAkB,EAAE,CAAC,CAChD;QAAA,CAAC,WAAW,CACV,IAAI,UAAU,CAAC,CACf,MAAM,CAAC,CAAC,KAAK,CAAC,CACd,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,EAEhC;QAAA,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,kBAAkB,EAAE,CAAC,CAChD;UAAA,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,UAAU,CAC9D;UAAA,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,UAAU,CACtE;QAAA,EAAE,UAAU,CACd;MAAA,EAAE,UAAU,CAAC,CACd,CAAC;IACJ,CAAC;IAED,OAAO,CACL,CAAC,qBAAqB,CACpB,IAAI,UAAU,CAAC,CACf,MAAM,CAAC,CAAC,KAAK,CAAC,CACd,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,kBAAkB,EAAE,UAAU,EAAE,UAAU,EAAE,CAAC,CAE9D;MAAA,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,kBAAkB,EAAE,CAAC,CAChD;QAAA,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,UAAU,CAC9D;QAAA,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,UAAU,CACtE;MAAA,EAAE,UAAU,CACd;IAAA,EAAE,qBAAqB,CAAC,CACzB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { StyledProp } from '@mapples/style';
|
|
3
|
+
import { ViewStyle } from 'react-native';
|
|
4
|
+
interface CarouselItemIndicatorProps {
|
|
5
|
+
total: number;
|
|
6
|
+
activeIndex: number;
|
|
7
|
+
styleIndicatorContainer?: StyledProp<ViewStyle>;
|
|
8
|
+
styleIndicator?: StyledProp<ViewStyle>;
|
|
9
|
+
styleIndicatorActive?: StyledProp<ViewStyle>;
|
|
10
|
+
}
|
|
11
|
+
declare const CarouselItemIndicator: FC<CarouselItemIndicatorProps>;
|
|
12
|
+
export default CarouselItemIndicator;
|
|
13
|
+
//# sourceMappingURL=CarouselItemIndicator.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CarouselItemIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/ImageCarousel/CarouselItemIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAE3B,OAAO,EAAE,UAAU,EAAc,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,UAAU,0BAA0B;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,uBAAuB,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IAChD,cAAc,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IACvC,oBAAoB,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;CAC9C;AAED,QAAA,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CAsBzD,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { StyledView } from '@mapples/style';
|
|
2
|
+
const CarouselItemIndicator = ({ total, activeIndex, styleIndicatorContainer, styleIndicator, styleIndicatorActive, }) => {
|
|
3
|
+
return (<StyledView styled={{ style: styleIndicatorContainer }}>
|
|
4
|
+
{Array.from({ length: total }).map((_, index) => (<StyledView key={index} styled={{
|
|
5
|
+
style: [
|
|
6
|
+
styleIndicator,
|
|
7
|
+
index === activeIndex && styleIndicatorActive,
|
|
8
|
+
],
|
|
9
|
+
}}/>))}
|
|
10
|
+
</StyledView>);
|
|
11
|
+
};
|
|
12
|
+
export default CarouselItemIndicator;
|
|
13
|
+
//# sourceMappingURL=CarouselItemIndicator.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CarouselItemIndicator.js","sourceRoot":"","sources":["../../../src/components/ImageCarousel/CarouselItemIndicator.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAWxD,MAAM,qBAAqB,GAAmC,CAAC,EAC7D,KAAK,EACL,WAAW,EACX,uBAAuB,EACvB,cAAc,EACd,oBAAoB,GACrB,EAAE,EAAE;IACH,OAAO,CACL,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,uBAAuB,EAAE,CAAC,CACrD;MAAA,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/C,CAAC,UAAU,CACT,GAAG,CAAC,CAAC,KAAK,CAAC,CACX,MAAM,CAAC,CAAC;gBACN,KAAK,EAAE;oBACL,cAAc;oBACd,KAAK,KAAK,WAAW,IAAI,oBAAoB;iBAC9C;aACF,CAAC,EACF,CACH,CAAC,CACJ;IAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { StyledProp } from '@mapples/style';
|
|
2
|
+
import { ImageProps } from 'expo-image';
|
|
3
|
+
import { ImageStyle, TextStyle, View, ViewStyle } from 'react-native';
|
|
4
|
+
import { ImageCarouselMode } from './CarouselItem';
|
|
5
|
+
export interface ImageCarouselDataItem {
|
|
6
|
+
image?: any;
|
|
7
|
+
title?: string;
|
|
8
|
+
subtitle?: string;
|
|
9
|
+
id?: string | number;
|
|
10
|
+
}
|
|
11
|
+
export interface ImageCarouselProps<T extends ImageCarouselDataItem> {
|
|
12
|
+
data?: T[];
|
|
13
|
+
mode?: ImageCarouselMode;
|
|
14
|
+
showIndicators?: boolean;
|
|
15
|
+
keyMap?: Record<keyof ImageCarouselDataItem, string>;
|
|
16
|
+
imageProps?: ImageProps;
|
|
17
|
+
styled?: {
|
|
18
|
+
style?: StyledProp<ViewStyle>;
|
|
19
|
+
styleIndicator?: StyledProp<ViewStyle>;
|
|
20
|
+
styleIndicatorActive?: StyledProp<ViewStyle>;
|
|
21
|
+
styleItemContainer?: StyledProp<ViewStyle>;
|
|
22
|
+
styleImage?: StyledProp<ImageStyle>;
|
|
23
|
+
styleTextContainer?: StyledProp<ViewStyle>;
|
|
24
|
+
styleTitle?: StyledProp<TextStyle>;
|
|
25
|
+
styleSubtitle?: StyledProp<TextStyle>;
|
|
26
|
+
styleIndicatorContainer?: StyledProp<ViewStyle>;
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
declare const ImageCarousel: import("react").ForwardRefExoticComponent<ImageCarouselProps<any> & import("react").RefAttributes<View>>;
|
|
30
|
+
export default ImageCarousel;
|
|
31
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ImageCarousel/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkB,UAAU,EAAc,MAAM,gBAAgB,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAExC,OAAO,EACL,UAAU,EAEV,SAAS,EACT,IAAI,EACJ,SAAS,EACV,MAAM,cAAc,CAAC;AAEtB,OAAqB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAGjE,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACtB;AASD,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,qBAAqB;IACjE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;IACX,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,qBAAqB,EAAE,MAAM,CAAC,CAAC;IACrD,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;QAC9B,cAAc,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;QACvC,oBAAoB,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;QAC7C,kBAAkB,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;QAC3C,UAAU,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;QACpC,kBAAkB,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;QAC3C,UAAU,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;QACnC,aAAa,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;QACtC,uBAAuB,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;KACjD,CAAC;CACH;AAED,QAAA,MAAM,aAAa,0GA0FlB,CAAC;AAGF,eAAe,aAAa,CAAC"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { forwardRef, useCallback, useRef, useState } from 'react';
|
|
2
|
+
import { StyledFlatList, StyledView } from '@mapples/style';
|
|
3
|
+
import { get } from 'lodash';
|
|
4
|
+
import CarouselItem from './CarouselItem';
|
|
5
|
+
import CarouselItemIndicator from './CarouselItemIndicator';
|
|
6
|
+
const defaultKeyMap = {
|
|
7
|
+
image: 'image',
|
|
8
|
+
title: 'title',
|
|
9
|
+
subtitle: 'subtitle',
|
|
10
|
+
id: 'id',
|
|
11
|
+
};
|
|
12
|
+
const ImageCarousel = forwardRef(({ styled, keyMap = defaultKeyMap, data = [], mode = 'textOver', showIndicators = true, imageProps, }, ref) => {
|
|
13
|
+
const [activeIndex, setActiveIndex] = useState(0);
|
|
14
|
+
const viewabilityConfig = useRef({
|
|
15
|
+
itemVisiblePercentThreshold: 50,
|
|
16
|
+
});
|
|
17
|
+
const { styleIndicator, styleIndicatorActive, styleItemContainer, styleImage, styleTextContainer, styleTitle, styleSubtitle, style, styleIndicatorContainer, } = styled || {};
|
|
18
|
+
const onViewableItemsChanged = useRef(({ viewableItems }) => {
|
|
19
|
+
const firstVisibleItem = viewableItems?.[0]?.index;
|
|
20
|
+
if (typeof firstVisibleItem === 'number') {
|
|
21
|
+
setActiveIndex(firstVisibleItem);
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
const renderItem = useCallback(({ item }) => (<CarouselItem image={get(item, keyMap.image)} title={get(item, keyMap.title, 'Title')} subtitle={get(item, keyMap.subtitle, 'Subtitle')} mode={mode} styleItemContainer={styleItemContainer} styleImage={styleImage} styleTextContainer={styleTextContainer} styleTitle={styleTitle} styleSubtitle={styleSubtitle} imageProps={imageProps}/>), [
|
|
25
|
+
imageProps,
|
|
26
|
+
keyMap.image,
|
|
27
|
+
keyMap.subtitle,
|
|
28
|
+
keyMap.title,
|
|
29
|
+
mode,
|
|
30
|
+
styleImage,
|
|
31
|
+
styleItemContainer,
|
|
32
|
+
styleSubtitle,
|
|
33
|
+
styleTextContainer,
|
|
34
|
+
styleTitle,
|
|
35
|
+
]);
|
|
36
|
+
return (<StyledView ref={ref} styled={{ style }}>
|
|
37
|
+
<StyledFlatList data={data} renderItem={renderItem} horizontal pagingEnabled keyExtractor={(item, index) => get(item, keyMap.id, index)} showsHorizontalScrollIndicator={false} onViewableItemsChanged={onViewableItemsChanged.current} viewabilityConfig={viewabilityConfig.current}/>
|
|
38
|
+
{showIndicators && data.length > 1 && (<CarouselItemIndicator total={data.length} activeIndex={activeIndex} styleIndicator={styleIndicator} styleIndicatorActive={styleIndicatorActive} styleIndicatorContainer={styleIndicatorContainer}/>)}
|
|
39
|
+
</StyledView>);
|
|
40
|
+
});
|
|
41
|
+
ImageCarousel.displayName = 'ImageCarousel';
|
|
42
|
+
export default ImageCarousel;
|
|
43
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ImageCarousel/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"schematic.d.ts","sourceRoot":"","sources":["../../../src/components/ImageCarousel/schematic.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAIrD,eAAO,MAAM,sBAAsB,EAAE,mBAGpC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"schematic.js","sourceRoot":"","sources":["../../../src/components/ImageCarousel/schematic.ts"],"names":[],"mappings":"AAEA,OAAO,aAAa,MAAM,SAAS,CAAC;AAEpC,MAAM,CAAC,MAAM,sBAAsB,GAAwB;IACzD,IAAI,EAAE,eAAe;IACrB,SAAS,EAAE,aAAoB;CAChC,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,2 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @packageDocumentation
|
|
3
|
+
* @module @mapples/components
|
|
4
|
+
*
|
|
5
|
+
* Placeholder package for app-specific component registration in the Mapples Open Kit.
|
|
6
|
+
* Export a Components registry and schematics for use with @mapples/render and visual editors.
|
|
7
|
+
*/
|
|
1
8
|
export * from './schematics';
|
|
9
|
+
export { default as ImageCarousel } from './components/ImageCarousel';
|
|
10
|
+
export * from './components/ImageCarousel/schematic';
|
|
2
11
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACtE,cAAc,sCAAsC,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @packageDocumentation
|
|
3
|
+
* @module @mapples/components
|
|
4
|
+
*
|
|
5
|
+
* Placeholder package for app-specific component registration in the Mapples Open Kit.
|
|
6
|
+
* Export a Components registry and schematics for use with @mapples/render and visual editors.
|
|
7
|
+
*/
|
|
1
8
|
export * from './schematics';
|
|
9
|
+
export { default as ImageCarousel } from './components/ImageCarousel';
|
|
10
|
+
export * from './components/ImageCarousel/schematic';
|
|
2
11
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACtE,cAAc,sCAAsC,CAAC"}
|
package/dist/schematics.d.ts
CHANGED
package/dist/schematics.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"schematics.d.ts","sourceRoot":"","sources":["../src/schematics.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,
|
|
1
|
+
{"version":3,"file":"schematics.d.ts","sourceRoot":"","sources":["../src/schematics.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAItD,eAAO,MAAM,UAAU,EAAE,oBAExB,CAAC"}
|
package/dist/schematics.js
CHANGED
package/dist/schematics.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"schematics.js","sourceRoot":"","sources":["../src/schematics.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"schematics.js","sourceRoot":"","sources":["../src/schematics.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAE9E,MAAM,CAAC,MAAM,UAAU,GAAyB;IAC9C,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,sBAAsB;CACtD,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mapples/components",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"scripts": {
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@types/react": ">=18.0.0 <20.0.0",
|
|
29
|
-
"typescript": "~
|
|
29
|
+
"typescript": "~6.0.3"
|
|
30
30
|
},
|
|
31
31
|
"files": [
|
|
32
32
|
"dist",
|