565 lines
11 KiB
JavaScript
565 lines
11 KiB
JavaScript
import React from 'react';
|
|
import { ScrollView, StyleSheet, SafeAreaView } from 'react-native';
|
|
|
|
import { UiKitModal, UiKitComponent } from '../../app/containers/UIKit';
|
|
import { KitContext, defaultContext } from '../../app/containers/UIKit/utils';
|
|
import StoriesSeparator from './StoriesSeparator';
|
|
|
|
// eslint-disable-next-line react/prop-types
|
|
const Separator = ({ title }) => <StoriesSeparator title={title} theme='light' />;
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#fff'
|
|
},
|
|
padding: {
|
|
paddingHorizontal: 16
|
|
}
|
|
});
|
|
|
|
export default () => (
|
|
<SafeAreaView style={styles.container}>
|
|
<ScrollView style={[styles.container, styles.padding]} keyboardShouldPersistTaps='always'>
|
|
<Separator title='Modal - Section and Selects' />
|
|
{
|
|
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'
|
|
}
|
|
]
|
|
}
|
|
])
|
|
}
|
|
|
|
<Separator title='Modal - Section Accessories' />
|
|
{
|
|
UiKitModal([
|
|
{
|
|
type: 'section',
|
|
text: {
|
|
type: 'mrkdwn',
|
|
text: '*Bruno Quadros*,\nPlease review your details for your *travel expense*.\nExpense no. *DA921*.'
|
|
},
|
|
accessory: {
|
|
type: 'image',
|
|
imageUrl: 'https://raw.githubusercontent.com/RocketChat/Rocket.Chat.Artwork/master/Logos/icon-circle-256.png'
|
|
}
|
|
},
|
|
{
|
|
type: 'divider'
|
|
},
|
|
{
|
|
type: 'section',
|
|
text: {
|
|
type: 'mrkdwn',
|
|
text: '*Date:*\n11/02/2020'
|
|
}
|
|
},
|
|
{
|
|
type: 'section',
|
|
text: {
|
|
type: 'mrkdwn',
|
|
text: '*Category:*\nTravel'
|
|
}
|
|
},
|
|
{
|
|
type: 'section',
|
|
text: {
|
|
type: 'mrkdwn',
|
|
text: '*Cost:*\n$150.00 USD'
|
|
}
|
|
},
|
|
{
|
|
type: 'section',
|
|
text: {
|
|
type: 'mrkdwn',
|
|
text: '*Notes:*\nWebSummit Conference'
|
|
}
|
|
}
|
|
])
|
|
}
|
|
|
|
<Separator title='Modal - Form Input' />
|
|
{
|
|
UiKitModal([
|
|
{
|
|
type: 'input',
|
|
element: {
|
|
type: 'plain_text_input'
|
|
},
|
|
label: {
|
|
type: 'plain_text',
|
|
text: 'Outgoing Title',
|
|
emoji: true
|
|
},
|
|
hint: {
|
|
type: 'plain_text',
|
|
text: 'Pick something unique!',
|
|
emoji: true
|
|
}
|
|
},
|
|
{
|
|
type: 'input',
|
|
element: {
|
|
type: 'datepicker',
|
|
initial_date: '1990-04-28',
|
|
placeholder: {
|
|
type: 'plain_text',
|
|
text: 'Select a date',
|
|
emoji: true
|
|
}
|
|
},
|
|
label: {
|
|
type: 'plain_text',
|
|
text: 'Set a date',
|
|
emoji: true
|
|
}
|
|
},
|
|
{
|
|
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
|
|
}
|
|
}
|
|
])
|
|
}
|
|
|
|
<Separator title='Modal - Form TextArea' />
|
|
{
|
|
UiKitModal([
|
|
{
|
|
type: 'context',
|
|
elements: [{
|
|
type: 'mrkdwn',
|
|
text: 'Task: ZOL-994'
|
|
}]
|
|
},
|
|
{
|
|
type: 'section',
|
|
text: {
|
|
type: 'mrkdwn',
|
|
text: 'Update Spec final assets'
|
|
},
|
|
accessory: {
|
|
type: 'button',
|
|
text: {
|
|
type: 'plain_text',
|
|
text: 'Change'
|
|
}
|
|
}
|
|
},
|
|
{
|
|
type: 'divider'
|
|
},
|
|
{
|
|
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
|
|
}
|
|
}
|
|
])
|
|
}
|
|
|
|
<Separator title='Modal - Images' />
|
|
{
|
|
UiKitModal([
|
|
{
|
|
type: 'image',
|
|
title: {
|
|
type: 'plain_text',
|
|
text: 'Example Image',
|
|
emoji: true
|
|
},
|
|
imageUrl: 'https://raw.githubusercontent.com/RocketChat/Rocket.Chat.Artwork/master/Logos/icon-circle-256.png',
|
|
alt_text: 'Example Image'
|
|
},
|
|
{
|
|
type: 'section',
|
|
text: {
|
|
type: 'mrkdwn',
|
|
text: 'How could be the life in Mars?'
|
|
}
|
|
},
|
|
{
|
|
type: 'context',
|
|
elements: [
|
|
{
|
|
type: 'image',
|
|
imageUrl: 'https://raw.githubusercontent.com/RocketChat/Rocket.Chat.Artwork/master/Logos/icon-circle-256.png'
|
|
},
|
|
{
|
|
type: 'mrkdwn',
|
|
text: 'November 25, 2019'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
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.'
|
|
}
|
|
}
|
|
])
|
|
}
|
|
|
|
<Separator title='Modal - Actions' />
|
|
{
|
|
UiKitModal([{
|
|
type: 'input',
|
|
element: {
|
|
type: 'plain_text_input'
|
|
},
|
|
label: {
|
|
type: 'plain_text',
|
|
text: 'Title',
|
|
emoji: true
|
|
}
|
|
},
|
|
{
|
|
type: 'section',
|
|
text: {
|
|
type: 'mrkdwn',
|
|
text: 'Details'
|
|
}
|
|
},
|
|
{
|
|
type: 'section',
|
|
accessory: {
|
|
type: 'static_select',
|
|
options: [
|
|
{
|
|
value: 1,
|
|
text: {
|
|
type: 'plain_text',
|
|
text: 'TypeL Task'
|
|
}
|
|
}, {
|
|
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)'
|
|
}
|
|
}, {
|
|
value: 2,
|
|
text: {
|
|
type: 'plain_text',
|
|
text: 'second button'
|
|
}
|
|
}]
|
|
}
|
|
},
|
|
{
|
|
type: 'section',
|
|
accessory: {
|
|
type: 'static_select',
|
|
options: [
|
|
{
|
|
value: 1,
|
|
text: {
|
|
type: 'plain_text',
|
|
text: 'Priority (optional)'
|
|
}
|
|
}, {
|
|
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)'
|
|
}
|
|
}, {
|
|
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
|
|
}
|
|
}])
|
|
}
|
|
|
|
<Separator title='Modal - Contexts and Dividers' />
|
|
{
|
|
UiKitModal([
|
|
{
|
|
type: 'context',
|
|
elements: [{
|
|
type: 'mrkdwn',
|
|
text: 'Due today'
|
|
}]
|
|
},
|
|
{
|
|
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'
|
|
}
|
|
]
|
|
}
|
|
}
|
|
])
|
|
}
|
|
|
|
<Separator title='Modal - Input with error' />
|
|
<KitContext.Provider value={{ ...defaultContext, errors: { 'input-test': 'error test' } }}>
|
|
<UiKitComponent
|
|
render={UiKitModal}
|
|
blocks={[{
|
|
type: 'input',
|
|
element: {
|
|
type: 'plain_text_input',
|
|
actionId: 'input-test'
|
|
},
|
|
label: {
|
|
type: 'plain_text',
|
|
text: 'Label',
|
|
emoji: true
|
|
}
|
|
}]}
|
|
/>
|
|
</KitContext.Provider>
|
|
|
|
<Separator title='Modal - Multilne with error' />
|
|
<KitContext.Provider value={{ ...defaultContext, errors: { 'input-test': 'error test' } }}>
|
|
<UiKitComponent
|
|
render={UiKitModal}
|
|
blocks={[{
|
|
type: 'input',
|
|
element: {
|
|
type: 'plain_text_input',
|
|
multiline: true,
|
|
actionId: 'input-test'
|
|
},
|
|
label: {
|
|
type: 'plain_text',
|
|
text: 'Label',
|
|
emoji: true
|
|
}
|
|
}]}
|
|
/>
|
|
</KitContext.Provider>
|
|
|
|
<Separator title='Modal - DatePicker with error' />
|
|
<KitContext.Provider value={{ ...defaultContext, errors: { 'input-test': 'error test' } }}>
|
|
<UiKitComponent
|
|
render={UiKitModal}
|
|
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: {
|
|
type: 'plain_text',
|
|
text: 'Label',
|
|
emoji: true
|
|
}
|
|
}]}
|
|
/>
|
|
</KitContext.Provider>
|
|
</ScrollView>
|
|
</SafeAreaView>
|
|
);
|