Carousel component
Getting started
安装此组件使用
yarn add adsum-modal-asia
设置 Redux Reducers
通常位于您的项目文件夹/src/rootReducer.js
- import the reducer :
import { ModalReducers } from '@adactive/adsum-modal-asia';
- add ScreenSaverReducers on your root reducer, for example:
const appState: AppStateType = {
routing: routerReducer,
map,
loadingScreen,
modal: ModalReducers
};
在您的应用程序中设置 Redux 操作
首先要做的是将操作导入到您需要操作的文件中，例如 app.js
import { ModalActions } from '@adactive/adsum-modal-asia';
这个组件有 5 个 redux prop 动作：
第一个动作是ONLY /strong> 如果函数想要打开当前模态的子项但我们需要保存后退按钮的 poi，则需要。 一般用在想叫孙子的孩子身上
- 将 poi 保存在嵌套结构中的操作
(ModalActions.setPoiStructure)
显示模态需要以下两个操作
- 设置将出现哪个模态的操作
(ModalActions.setModal)
- 打开模态的动作
(ModalActions.openModal)
当函数打开嵌套模态的子项时，需要执行以下两个操作
- 设置哪个模态是父模态的动作将打开模态
(ModalActions.setModalStructure)
- 保存当前模式的 poi 的操作
(ModalActions.setPoi)
把这些放到 mapDispatchToProps
上的动作
例如：
const mapDispatchToProps = (dispatch: *): MappedDispatchPropsType => ({
openModal: (abc) => {
dispatch(ModalActions.openModal(abc));
},
setModal: (name) => {
dispatch(ModalActions.setModal(name));
},
setModalStructure: (name) => {
dispatch(ModalActions.setModalStructure(name));
},
setPoi: (item) => {
dispatch(ModalActions.setPoi(item));
},
setPoiStructure: (item) => {
dispatch(ModalActions.setPoiStructure(item));
}
});
附加 ScreenSaver 组件
例如：
```javascript
MODAL THREE
### Props
**backButton** - Back Icon, if not provided, will be no back button on Modal
**modalPosition** - modal Position in object contains top, right, bottom, and left
**modalWidth** - modal width in string
**modalHeight** - modal height in string
**modalColor** - modal color in string
**overlayOpen** - overlay open or not in boolean
**overlayWidth** - overlay width in string
**overlayHeight** - overlay height in string
**overlayColor** - overlay color in string
**overlayOpacity**: overlay opacity in string, in default will be set 0.0 or transparent,
**overlayPosition**: overlay Position in object contains top, right, bottom, and left,
javascript
输入 OwnPropsType = {|
后退按钮：字符串，
模态位置：对象，
模态宽度：字符串，
模态高度：字符串，
模态颜色：字符串，
overlayOpen：布尔值，
覆盖宽度：字符串，
覆盖高度：字符串，
覆盖颜色：字符串，
overlayOpacity：字符串，
覆盖位置：数组，
|};
静态默认属性 = {
后退按钮：空，
模态位置：{
顶部：0，
右：空，
底部：空，
左：0，
},
模态宽度：“100%”，
模态高度：“100%”，
模态颜色：“白色”，
overlayOpen：真，
覆盖宽度：“100%”，
覆盖高度：“100%”，
覆盖颜色：“白色”，
覆盖不透明度：“0.0”，
覆盖位置：{
顶部：0，
右：空，
底部：空，
左：0，
},
}
```
Copy component inside your project src folder
Less only
`npx @adactive/adsum-modal-asia copy --less-only`
Full copy
`npx @adactive/adsum-modal-asia copy`
Carousel component
Getting started
Install this component using
yarn add adsum-modal-asia
Setting Redux Reducers
typically located on yourprojectfolder/src/rootReducer.js
- import the reducer :
import { ModalReducers } from '@adactive/adsum-modal-asia';
- add ScreenSaverReducers on your root reducer, for example:
const appState: AppStateType = {
routing: routerReducer,
map,
loadingScreen,
modal: ModalReducers
};
Setting Redux Actions in your Apps
First thing to do is to import the action to file which you need the actions, for example app.js
import { ModalActions } from '@adactive/adsum-modal-asia';
There is 5 redux prop actions that this component have:
The first action is ONLY required if a function want to open children of current modal but we need to save the poi for back button. Usually it used on children that want to call grandchildren
- Action to save the poi in the structure for nested
(ModalActions.setPoiStructure)
This Following Two Actions is required to show modal
- Action to set which modal will appear
(ModalActions.setModal)
- Action to open the modal
(ModalActions.openModal)
The Following Two Actions is required when a function is opening a child of nested modal
- Action to set which modal is the parent of will be opened modal
(ModalActions.setModalStructure)
- Action to save the poi of current modal
(ModalActions.setPoi)
Put these to actions on the mapDispatchToProps
For Example:
const mapDispatchToProps = (dispatch: *): MappedDispatchPropsType => ({
openModal: (abc) => {
dispatch(ModalActions.openModal(abc));
},
setModal: (name) => {
dispatch(ModalActions.setModal(name));
},
setModalStructure: (name) => {
dispatch(ModalActions.setModalStructure(name));
},
setPoi: (item) => {
dispatch(ModalActions.setPoi(item));
},
setPoiStructure: (item) => {
dispatch(ModalActions.setPoiStructure(item));
}
});
Attach ScreenSaver Component
for example:
```javascript
MODAL THREE
### Props
**backButton** - Back Icon, if not provided, will be no back button on Modal
**modalPosition** - modal Position in object contains top, right, bottom, and left
**modalWidth** - modal width in string
**modalHeight** - modal height in string
**modalColor** - modal color in string
**overlayOpen** - overlay open or not in boolean
**overlayWidth** - overlay width in string
**overlayHeight** - overlay height in string
**overlayColor** - overlay color in string
**overlayOpacity**: overlay opacity in string, in default will be set 0.0 or transparent,
**overlayPosition**: overlay Position in object contains top, right, bottom, and left,
javascript
type OwnPropsType = {|
backButton: string,
modalPosition: object,
modalWidth: string,
modalHeight: string,
modalColor: string,
overlayOpen: boolean,
overlayWidth: string,
overlayHeight: string,
overlayColor: string,
overlayOpacity: string,
overlayPosition: array,
|};
static defaultProps = {
backButton: null,
modalPosition: {
top: 0,
right: null,
bottom: null,
left: 0,
},
modalWidth: "100%",
modalHeight: "100%",
modalColor: "white",
overlayOpen: true,
overlayWidth: "100%",
overlayHeight: "100%",
overlayColor: "white",
overlayOpacity: "0.0",
overlayPosition: {
top: 0,
right: null,
bottom: null,
left: 0,
},
}
```
Copy component inside your project src folder
Less only
`npx @adactive/adsum-modal-asia copy --less-only`
Full copy
`npx @adactive/adsum-modal-asia copy`
