2021-04-19 16:57:19 +00:00
/* eslint-disable import/no-extraneous-dependencies */
2020-02-11 14:01:35 +00:00
import React from 'react' ;
2022-08-19 19:53:40 +00:00
import { ScrollView , StyleSheet } from 'react-native' ;
2020-02-11 14:01:35 +00:00
2022-08-19 19:53:40 +00:00
import { UiKitComponent , UiKitModal } from '.' ;
import { KitContext , defaultContext } from './utils' ;
import MessageContext from '../message/Context' ;
import { themes } from '../../lib/constants' ;
2020-02-11 14:01:35 +00:00
const styles = StyleSheet . create ( {
container : {
flex : 1 ,
backgroundColor : '#fff'
} ,
padding : {
paddingHorizontal : 16
}
} ) ;
2021-04-19 16:57:19 +00:00
const user = {
id : 'y8bd77ptZswPj3EW8' ,
username : 'diego.mello' ,
2022-08-19 19:53:40 +00:00
token : 'abc'
2021-04-19 16:57:19 +00:00
} ;
const baseUrl = 'https://open.rocket.chat' ;
2022-08-19 19:53:40 +00:00
export default {
title : 'UIKit/UiKitModal' ,
decorators : [
( Story : any ) = > (
< ScrollView style = { [ styles . container , styles . padding ] } keyboardShouldPersistTaps = 'always' >
< MessageContext.Provider
value = { {
user ,
baseUrl ,
onPress : ( ) = > { } ,
onLongPress : ( ) = > { } ,
reactionInit : ( ) = > { } ,
onErrorPress : ( ) = > { } ,
replyBroadcast : ( ) = > { } ,
onReactionPress : ( ) = > { } ,
onDiscussionPress : ( ) = > { } ,
onReactionLongPress : ( ) = > { } ,
threadBadgeColor : themes.light.tunreadColor
} }
>
< Story / >
< / MessageContext.Provider >
< / ScrollView >
)
]
} ;
2021-04-19 16:57:19 +00:00
2022-08-19 19:53:40 +00:00
export const ModalSectionSelects = ( ) = >
2021-09-13 20:41:05 +00:00
UiKitModal ( [
{
type : 'section' ,
text : {
type : 'mrkdwn' ,
text : '*Rocket.Chat is free, unlimited and open source* 🚀\nIf you have any doubt ask to @rocketcat'
}
} ,
{
type : 'divider'
} ,
{
type : 'section' ,
fields : [
{
type : 'mrkdwn' ,
text : '*Text 1*\nDescription, Mussum Ipsum, cacilds vidis litro'
} ,
{
type : 'mrkdwn' ,
text : '*Text 2*\nDescription, Mussum Ipsum, cacilds vidis litro'
}
]
} ,
{
type : 'section' ,
fields : [
{
type : 'mrkdwn' ,
text : '*Text 3*\nDescription, Mussum Ipsum, cacilds vidis litro'
} ,
{
type : 'mrkdwn' ,
text : '*Text 4*\nDescription, Mussum Ipsum, cacilds vidis litro'
}
]
2021-04-19 16:57:19 +00:00
}
2021-09-13 20:41:05 +00:00
] ) ;
2022-08-19 19:53:40 +00:00
ModalSectionSelects . storyName = 'Modal - Section and Selects' ;
2021-09-13 20:41:05 +00:00
2022-08-19 19:53:40 +00:00
export const ModalSectionAccessories = ( ) = >
2021-09-13 20:41:05 +00:00
UiKitModal ( [
{
type : 'section' ,
text : {
2021-04-19 16:57:19 +00:00
type : 'mrkdwn' ,
2021-09-13 20:41:05 +00:00
text : '*Bruno Quadros*,\nPlease review your details for your *travel expense*.\nExpense no. *DA921*.'
2021-04-19 16:57:19 +00:00
} ,
2021-09-13 20:41:05 +00:00
accessory : {
type : 'image' ,
imageUrl : 'https://raw.githubusercontent.com/RocketChat/Rocket.Chat.Artwork/master/Logos/icon-circle-256.png'
}
} ,
{
type : 'divider'
} ,
{
type : 'section' ,
text : {
2021-04-19 16:57:19 +00:00
type : 'mrkdwn' ,
2021-09-13 20:41:05 +00:00
text : '*Date:*\n11/02/2020'
2020-02-11 14:01:35 +00:00
}
2021-09-13 20:41:05 +00:00
} ,
{
type : 'section' ,
text : {
2021-04-19 16:57:19 +00:00
type : 'mrkdwn' ,
2021-09-13 20:41:05 +00:00
text : '*Category:*\nTravel'
}
} ,
{
type : 'section' ,
text : {
2021-04-19 16:57:19 +00:00
type : 'mrkdwn' ,
2021-09-13 20:41:05 +00:00
text : '*Cost:*\n$150.00 USD'
2020-02-11 14:01:35 +00:00
}
2021-04-19 16:57:19 +00:00
} ,
2021-09-13 20:41:05 +00:00
{
type : 'section' ,
text : {
type : 'mrkdwn' ,
text : '*Notes:*\nWebSummit Conference'
}
2021-04-19 16:57:19 +00:00
}
2021-09-13 20:41:05 +00:00
] ) ;
2022-08-19 19:53:40 +00:00
ModalSectionAccessories . storyName = 'Modal - Section and Accessories' ;
2021-04-19 16:57:19 +00:00
2022-08-19 19:53:40 +00:00
export const ModalFormInput = ( ) = >
2021-09-13 20:41:05 +00:00
UiKitModal ( [
{
type : 'input' ,
element : {
type : 'plain_text_input'
} ,
label : {
type : 'plain_text' ,
text : 'Outgoing Title' ,
emoji : true
} ,
hint : {
2021-04-19 16:57:19 +00:00
type : 'plain_text' ,
2021-09-13 20:41:05 +00:00
text : 'Pick something unique!' ,
2021-04-19 16:57:19 +00:00
emoji : true
2020-02-11 14:01:35 +00:00
}
2021-04-19 16:57:19 +00:00
} ,
2021-09-13 20:41:05 +00:00
{
type : 'input' ,
element : {
type : 'datepicker' ,
initial_date : '1990-04-28' ,
placeholder : {
2021-04-19 16:57:19 +00:00
type : 'plain_text' ,
2021-09-13 20:41:05 +00:00
text : 'Select a date' ,
emoji : true
}
} ,
label : {
type : 'plain_text' ,
text : 'Set a date' ,
emoji : true
}
2021-04-19 16:57:19 +00:00
} ,
2021-09-13 20:41:05 +00:00
{
type : 'input' ,
element : {
type : 'multi_static_select' ,
options : [
{
text : {
type : 'plain_text' ,
text : 'John'
} ,
value : 1
} ,
{
text : {
type : 'plain_text' ,
text : 'Dog'
} ,
value : 2
}
]
} ,
label : {
type : 'plain_text' ,
text : 'Share with...' ,
emoji : true
}
2021-04-19 16:57:19 +00:00
}
2021-09-13 20:41:05 +00:00
] ) ;
2022-08-19 19:53:40 +00:00
ModalFormInput . storyName = 'Modal - Form Input' ;
2020-02-11 14:01:35 +00:00
2022-08-19 19:53:40 +00:00
export const ModalFormTextArea = ( ) = >
2021-09-13 20:41:05 +00:00
UiKitModal ( [
{
type : 'context' ,
elements : [
{
type : 'mrkdwn' ,
text : 'Task: ZOL-994'
}
]
2021-04-19 16:57:19 +00:00
} ,
2021-09-13 20:41:05 +00:00
{
type : 'section' ,
2021-04-19 16:57:19 +00:00
text : {
2021-09-13 20:41:05 +00:00
type : 'mrkdwn' ,
text : 'Update Spec final assets'
} ,
accessory : {
type : 'button' ,
text : {
type : 'plain_text' ,
text : 'Change'
}
2020-02-11 14:01:35 +00:00
}
2021-04-19 16:57:19 +00:00
} ,
2021-09-13 20:41:05 +00:00
{
type : 'divider'
2021-04-19 16:57:19 +00:00
} ,
2021-09-13 20:41:05 +00:00
{
type : 'input' ,
element : {
type : 'plain_text_input' ,
multiline : true
} ,
placeholder : {
type : 'plain_text' ,
text : 'Write Something' ,
emoji : true
} ,
label : {
type : 'plain_text' ,
text : 'Notes' ,
emoji : true
} ,
hint : {
type : 'plain_text' ,
text : 'Please take the time to compose something short' ,
emoji : true
} ,
description : {
type : 'plain_text' ,
text : 'Describe your update' ,
emoji : true
}
2021-04-19 16:57:19 +00:00
}
2021-09-13 20:41:05 +00:00
] ) ;
2022-08-19 19:53:40 +00:00
ModalFormTextArea . storyName = 'Modal - Form TextArea' ;
2020-02-11 14:01:35 +00:00
2022-08-19 19:53:40 +00:00
export const ModalImages = ( ) = >
2021-09-13 20:41:05 +00:00
UiKitModal ( [
{
type : 'image' ,
title : {
type : 'plain_text' ,
text : 'Example Image' ,
emoji : true
2021-04-19 16:57:19 +00:00
} ,
2021-09-13 20:41:05 +00:00
imageUrl : 'https://raw.githubusercontent.com/RocketChat/Rocket.Chat.Artwork/master/Logos/icon-circle-256.png' ,
alt_text : 'Example Image'
} ,
{
type : 'section' ,
text : {
2021-04-19 16:57:19 +00:00
type : 'mrkdwn' ,
2021-09-13 20:41:05 +00:00
text : 'How could be the life in Mars?'
2020-02-11 14:01:35 +00:00
}
2021-04-19 16:57:19 +00:00
} ,
2021-09-13 20:41:05 +00:00
{
type : 'context' ,
elements : [
2021-04-19 16:57:19 +00:00
{
2021-09-13 20:41:05 +00:00
type : 'image' ,
imageUrl : 'https://raw.githubusercontent.com/RocketChat/Rocket.Chat.Artwork/master/Logos/icon-circle-256.png'
2020-02-11 14:01:35 +00:00
} ,
{
2021-09-13 20:41:05 +00:00
type : 'mrkdwn' ,
text : 'November 25, 2019'
2021-04-19 16:57:19 +00:00
}
]
2021-09-13 20:41:05 +00:00
} ,
{
type : 'section' ,
text : {
type : 'mrkdwn' ,
text : '*Next stop, Mars!*\nMussum Ipsum, cacilds vidis litro abertis. Admodum accumsan disputationi eu sit. Vide electram sadipscing et per. Diuretics paradis num copo é motivis de denguis. Mais vale um bebadis conhecidiss, que um alcoolatra anonimis. Aenean aliquam molestie leo, vitae iaculis nisl.'
}
2021-04-19 16:57:19 +00:00
}
2021-09-13 20:41:05 +00:00
] ) ;
2022-08-19 19:53:40 +00:00
ModalImages . storyName = 'Modal - Images' ;
2021-09-13 20:41:05 +00:00
2022-08-19 19:53:40 +00:00
export const ModalActions = ( ) = >
2021-09-13 20:41:05 +00:00
UiKitModal ( [
{
type : 'input' ,
element : {
type : 'plain_text_input'
} ,
label : {
type : 'plain_text' ,
text : 'Title' ,
emoji : true
}
2021-04-19 16:57:19 +00:00
} ,
2021-09-13 20:41:05 +00:00
{
type : 'section' ,
text : {
type : 'mrkdwn' ,
text : 'Details'
}
} ,
{
type : 'section' ,
accessory : {
type : 'static_select' ,
options : [
{
value : 1 ,
text : {
type : 'plain_text' ,
text : 'TypeL Task'
}
2021-04-19 16:57:19 +00:00
} ,
2021-09-13 20:41:05 +00:00
{
value : 2 ,
text : {
type : 'plain_text' ,
text : 'second button'
}
}
]
}
} ,
{
type : 'section' ,
accessory : {
type : ' static_select ' ,
options : [
{
value : 1 ,
text : {
type : 'plain_text' ,
text : 'Project: Space (winter)'
}
2020-02-11 14:01:35 +00:00
} ,
2021-09-13 20:41:05 +00:00
{
value : 2 ,
text : {
type : 'plain_text' ,
text : 'second button'
}
}
]
}
2021-04-19 16:57:19 +00:00
} ,
2021-09-13 20:41:05 +00:00
{
type : 'section' ,
accessory : {
type : 'static_select' ,
options : [
{
value : 1 ,
text : {
type : 'plain_text' ,
text : 'Priority (optional)'
}
2020-02-11 14:01:35 +00:00
} ,
2021-09-13 20:41:05 +00:00
{
value : 2 ,
text : {
type : 'plain_text' ,
text : 'second button'
}
}
]
}
} ,
{
type : 'section' ,
accessory : {
type : 'static_select' ,
options : [
{
value : 1 ,
text : {
type : 'plain_text' ,
text : 'Assinee (optional)'
}
2020-02-11 14:01:35 +00:00
} ,
2021-09-13 20:41:05 +00:00
{
value : 2 ,
text : {
type : 'plain_text' ,
text : 'second button'
}
}
]
}
} ,
{
type : 'input' ,
element : {
type : 'plain_text_input' ,
multiline : true
} ,
placeholder : {
type : 'plain_text' ,
text : 'Write Something' ,
emoji : true
} ,
label : {
type : 'plain_text' ,
text : 'Description' ,
emoji : true
}
}
] ) ;
2022-08-19 19:53:40 +00:00
ModalActions . storyName = 'Modal - Actions' ;
2021-09-13 20:41:05 +00:00
2022-08-19 19:53:40 +00:00
export const ModalContextsDividers = ( ) = >
2021-09-13 20:41:05 +00:00
UiKitModal ( [
{
type : 'context' ,
elements : [
{
type : 'mrkdwn' ,
text : 'Due today'
2021-04-19 16:57:19 +00:00
}
]
2021-09-13 20:41:05 +00:00
} ,
{
type : 'divider'
} ,
{
type : 'section' ,
text : {
type : 'mrkdwn' ,
text : 'Finish interface componests (3 hours)'
} ,
accessory : {
blockId : 'overflow-1' ,
type : 'overflow' ,
options : [
{
text : {
type : 'plain_text' ,
text : 'Details' ,
emoji : true
} ,
value : 'value-0'
} ,
{
text : {
type : 'plain_text' ,
text : 'Remove' ,
emoji : true
} ,
value : 'value-1'
}
]
}
} ,
{
type : 'section' ,
text : {
type : 'mrkdwn' ,
text : 'English Class (1 hour)'
} ,
accessory : {
blockId : 'overflow-2' ,
type : 'overflow' ,
options : [
{
text : {
type : 'plain_text' ,
text : 'Details' ,
emoji : true
} ,
value : 'value-0'
} ,
{
text : {
type : 'plain_text' ,
text : 'Remove' ,
emoji : true
} ,
value : 'value-1'
}
]
}
} ,
{
type : 'section' ,
text : {
type : 'mrkdwn' ,
text : 'Send an email to John (15min)'
} ,
accessory : {
blockId : 'overflow-3' ,
type : 'overflow' ,
options : [
{
text : {
type : 'plain_text' ,
text : 'Details' ,
emoji : true
} ,
value : 'value-0'
} ,
{
text : {
type : 'plain_text' ,
text : 'Remove' ,
emoji : true
} ,
value : 'value-1'
}
]
}
2021-04-19 16:57:19 +00:00
}
2021-09-13 20:41:05 +00:00
] ) ;
2022-08-19 19:53:40 +00:00
ModalContextsDividers . storyName = 'Modal - Contexts and Dividers' ;
2020-02-11 14:01:35 +00:00
2022-08-19 19:53:40 +00:00
export const ModalInputWithError = ( ) = > (
2021-04-19 16:57:19 +00:00
< KitContext.Provider value = { { . . . defaultContext , errors : { 'input-test' : 'error test' } } } >
< UiKitComponent
render = { UiKitModal }
2021-09-13 20:41:05 +00:00
blocks = { [
{
type : 'input' ,
element : {
type : 'plain_text_input' ,
actionId : 'input-test'
} ,
label : {
type : 'plain_text' ,
text : 'Label' ,
emoji : true
}
2021-04-19 16:57:19 +00:00
}
2021-09-13 20:41:05 +00:00
] }
2021-04-19 16:57:19 +00:00
/ >
< / KitContext.Provider >
) ;
2022-08-19 19:53:40 +00:00
ModalInputWithError . storyName = 'Modal - Input with error' ;
2020-02-11 14:01:35 +00:00
2022-08-19 19:53:40 +00:00
export const ModalMultilneWithError = ( ) = > (
2021-04-19 16:57:19 +00:00
< KitContext.Provider value = { { . . . defaultContext , errors : { 'input-test' : 'error test' } } } >
< UiKitComponent
render = { UiKitModal }
2021-09-13 20:41:05 +00:00
blocks = { [
{
type : 'input' ,
element : {
type : 'plain_text_input' ,
multiline : true ,
actionId : 'input-test'
} ,
label : {
type : 'plain_text' ,
text : 'Label' ,
emoji : true
}
2021-04-19 16:57:19 +00:00
}
2021-09-13 20:41:05 +00:00
] }
2021-04-19 16:57:19 +00:00
/ >
< / KitContext.Provider >
) ;
2022-08-19 19:53:40 +00:00
ModalMultilneWithError . storyName = 'Modal - Multilne with error' ;
2020-02-11 14:01:35 +00:00
2022-08-19 19:53:40 +00:00
export const ModalDatePickerWithError = ( ) = > (
2021-04-19 16:57:19 +00:00
< KitContext.Provider value = { { . . . defaultContext , errors : { 'input-test' : 'error test' } } } >
< UiKitComponent
render = { UiKitModal }
2021-09-13 20:41:05 +00:00
blocks = { [
{
type : 'input' ,
element : {
type : 'datepicker' ,
initial_date : '1990-04-28' ,
actionId : 'input-test' ,
placeholder : {
type : 'plain_text' ,
text : 'Select a date' ,
emoji : true
}
} ,
label : {
2021-04-19 16:57:19 +00:00
type : 'plain_text' ,
2021-09-13 20:41:05 +00:00
text : 'Label' ,
2021-04-19 16:57:19 +00:00
emoji : true
}
}
2021-09-13 20:41:05 +00:00
] }
2021-04-19 16:57:19 +00:00
/ >
< / KitContext.Provider >
2020-02-11 14:01:35 +00:00
) ;
2022-08-19 19:53:40 +00:00
ModalDatePickerWithError . storyName = 'Modal - DatePicker with error' ;