617 lines
11 KiB
JavaScript
617 lines
11 KiB
JavaScript
/* eslint-disable import/no-extraneous-dependencies */
|
|
import React from 'react';
|
|
import { SafeAreaView, ScrollView, StyleSheet } from 'react-native';
|
|
import { storiesOf } from '@storybook/react-native';
|
|
|
|
import { UiKitComponent, UiKitModal } from '../../app/containers/UIKit';
|
|
import { KitContext, defaultContext } from '../../app/containers/UIKit/utils';
|
|
import MessageContext from '../../app/containers/message/Context';
|
|
import { themes } from '../../app/lib/constants';
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#fff'
|
|
},
|
|
padding: {
|
|
paddingHorizontal: 16
|
|
}
|
|
});
|
|
|
|
const user = {
|
|
id: 'y8bd77ptZswPj3EW8',
|
|
username: 'diego.mello',
|
|
token: '79q6lH40W4ZRGLOshDiDiVlQaCc4f_lU9HNdHLAzuHz'
|
|
};
|
|
|
|
const baseUrl = 'https://open.rocket.chat';
|
|
|
|
const messageDecorator = story => (
|
|
<MessageContext.Provider
|
|
value={{
|
|
user,
|
|
baseUrl,
|
|
onPress: () => {},
|
|
onLongPress: () => {},
|
|
reactionInit: () => {},
|
|
onErrorPress: () => {},
|
|
replyBroadcast: () => {},
|
|
onReactionPress: () => {},
|
|
onDiscussionPress: () => {},
|
|
onReactionLongPress: () => {},
|
|
threadBadgeColor: themes.light.tunreadColor
|
|
}}>
|
|
{story()}
|
|
</MessageContext.Provider>
|
|
);
|
|
|
|
const stories = storiesOf('UiKitModal', module)
|
|
.addDecorator(story => <SafeAreaView style={styles.container}>{story()}</SafeAreaView>)
|
|
.addDecorator(story => (
|
|
<ScrollView style={[styles.container, styles.padding]} keyboardShouldPersistTaps='always'>
|
|
{story()}
|
|
</ScrollView>
|
|
))
|
|
.addDecorator(messageDecorator);
|
|
|
|
const ModalSectionSelects = () =>
|
|
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'
|
|
}
|
|
]
|
|
}
|
|
]);
|
|
stories.add('Modal - Section and Selects', () => <ModalSectionSelects />);
|
|
|
|
const ModalSectionAccessories = () =>
|
|
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'
|
|
}
|
|
}
|
|
]);
|
|
stories.add('Modal - Section Accessories', () => <ModalSectionAccessories />);
|
|
|
|
const ModalFormInput = () =>
|
|
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
|
|
}
|
|
}
|
|
]);
|
|
stories.add('Modal - Form Input', () => <ModalFormInput />);
|
|
|
|
const ModalFormTextArea = () =>
|
|
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
|
|
}
|
|
}
|
|
]);
|
|
stories.add('Modal - Form TextArea', () => <ModalFormTextArea />);
|
|
|
|
const ModalImages = () =>
|
|
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.'
|
|
}
|
|
}
|
|
]);
|
|
stories.add('Modal - Images', () => <ModalImages />);
|
|
|
|
const ModalActions = () =>
|
|
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
|
|
}
|
|
}
|
|
]);
|
|
stories.add('Modal - Actions', () => <ModalActions />);
|
|
|
|
const ModalContextsDividers = () =>
|
|
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'
|
|
}
|
|
]
|
|
}
|
|
}
|
|
]);
|
|
stories.add('Modal - Contexts and Dividers', () => <ModalContextsDividers />);
|
|
|
|
const ModalInputWithError = () => (
|
|
<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>
|
|
);
|
|
stories.add('Modal - Input with error', () => <ModalInputWithError />);
|
|
|
|
const ModalMultilneWithError = () => (
|
|
<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>
|
|
);
|
|
stories.add('Modal - Multilne with error', () => <ModalMultilneWithError />);
|
|
|
|
const ModalDatePickerWithError = () => (
|
|
<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>
|
|
);
|
|
stories.add('Modal - DatePicker with error', () => <ModalDatePickerWithError />);
|