superdesk-ui-framework 2.4.21 → 3.0.1-beta.2

package/dist/react/Text.tsx

@@ -0,0 +1,134 @@
+import * as React from 'react';
+import * as Markup from '../../js/react';
+import { PropsList, Prop, Text } from '../../../app-typescript';
+
+interface IProps {
+    children?: React.ReactNode;
+}
+
+export default class TextDoc extends React.Component<IProps> {
+    render() {
+        return (
+            <section className='docs-page__container'>
+                <h2 className='docs-page__h2'>Text</h2>
+                
+                <Markup.ReactMarkupCodePreview>{`
+                    <Text>Cum sociis natoque penatibus et magnis dis parturient...</Text>
+                `}
+                </Markup.ReactMarkupCodePreview>
+
+                <p className="docs-page__paragraph">Text component.</p>
+
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <p className="docs-page__paragraph">// Sizes and alignments</p>
+                        <div className='docs-page__content-row sd-margin-b--5'>
+                            <Text size='x-small' style='italic'>
+                                Extra small size (x-small), default alignment (start), italic. Fusce dapibus, tellus ac cursus commodo,
+                                tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis
+                                ornare vel eu leo. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                            </Text>
+                        </div>
+                        <div className='docs-page__content-row sd-margin-b--5'>
+                            <Text align='end'>
+                                Default size (small), align to end. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+                                Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
+                                Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus
+                                posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Praesent
+                                commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Morbi leo
+                                risus, porta ac consectetur ac, vestibulum at eros.
+                            </Text>
+                        </div>
+                        <div className='docs-page__content-row sd-margin-b--5'>
+                            <Text size='medium' align='center'>
+                                Medium size, center aligned. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere
+                                consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus,
+                                porta ac consectetur ac, vestibulum at eros.
+                            </Text>
+                        </div>
+                        <div className='docs-page__content-row sd-margin-b--5'>
+                            <Text size='large' align='justify'>
+                                Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur
+                                est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac
+                                consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare
+                                sem lacinia quam venenatis vestibulum. 
+                            </Text>
+                        </div>
+
+                        <p className="docs-page__paragraph">// Variations</p>
+                        <div className='docs-page__content-row sd-margin-b--5'>
+                            <Text weight='light' size='medium'>
+                                Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur
+                                est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac
+                                consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare
+                                sem lacinia quam venenatis vestibulum. 
+                            </Text>
+                        </div>
+                        <div className='docs-page__content-row sd-margin-b--5'>
+                            <Text fontStyle='serif' weight='strong' size='medium' color='light' align='center'>
+                                Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur
+                                est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac
+                                consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare
+                                sem lacinia quam venenatis vestibulum. 
+                            </Text>
+                        </div>
+                        <div className='docs-page__content-row sd-margin-b--5'>
+                            <Text fontStyle='serif' weight='light' size='small' align='start'>
+                                Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur
+                                est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac
+                                consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare
+                                sem lacinia quam venenatis vestibulum. 
+                            </Text>
+                        </div>
+                        
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        // Sizes and alignments
+
+                        <Text size='x-small' style='italic'>
+                            Extra small size (x-small), default alignment (start), italic. Fusce dapibus, tellus...
+                        </Text>
+
+                        <Text align='end'>
+                            Default size (small), align to end. Praesent commodo cursus magna...
+                        </Text>
+
+                        <Text size='medium' align='center'>
+                            Medium size, center aligned. Praesent commodo cursus magna, vel scelerisque...
+                        </Text>
+
+                        <Text size='large' align='justify'>
+                            Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl...
+                        </Text>
+
+                        // Variations
+
+                        <Text weight='light' size='medium'>
+                            Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
+                        </Text>
+
+                        <Text fontStyle='serif' weight='medium' size='medium' color='light' align='center'>
+                            Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et... 
+                        </Text>
+
+                        <Text className='' fontStyle='serif' weight='medium' size='medium' color='light' align='center'>
+                            Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et... 
+                        </Text>
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+
+                <h3 className="docs-page__h3">Props</h3>
+                <PropsList>
+                    <Prop name='weight' isRequired={false} type='light | normal | medium | strong' default='normal' description='Change the default font weight.'/>
+                    <Prop name='size' isRequired={true} type='x-small | small | medium | large' default='small' description='Choose between four predefined font sizes.'/>
+                    <Prop name='style' isRequired={false} type='normal | italic' default='normal' description='Change the default text style.'/>
+                    <Prop name='align' isRequired={false} type='start | end | center | justify' default='start' description='Text-align'/>
+                    <Prop name='fontStyle' isRequired={false} type='sans | serif' default='sans' description='Choose between the default – sans (Roboto) – and serif (Merriweather) font styles. '/>
+                    <Prop name='color' isRequired={false} type='normal | light | lighter' default='normal' description='Choose a different text colour. Additional two lighter shades are available.'/>
+                    <Prop name='className' isRequired={false} type='string' default='/' description='Add helper classes or custom CSS styles'/>
+                </PropsList>
+            </section>
+        )
+    }
+}

package/dist/react/Tooltips.tsx

@@ -60,7 +60,7 @@ export default class TooltipDoc extends React.Component {
                        
                         <div className="docs-page__content-row docs-page__content-row--no-margin">
                             
-                            <div className="docs-page__content-row docs-page__content-row--no-margin" style={{background: "#ebebeb", width: "100%", padding: "5px", overflow: "hidden"}}>
+                            <div className="docs-page__content-row docs-page__content-row--no-margin">
                                 <Tooltip text="I'm appended to body" flow='top' appendToBody={true}>
                                     <Button text='top' onClick={() => false} />
                                 </Tooltip>

package/dist/react/TreeSelect.tsx

@@ -0,0 +1,178 @@
+import * as React from 'react';
+import * as Markup from '../../js/react';
+import { PropsList, Prop } from '../../../app-typescript';
+import { MultiSelect } from '../../../app-typescript/components/MultiSelect';
+import { TreeSelect } from '../../../app-typescript/components/TreeSelect';
+
+interface IState {
+    value: any;
+    value2: any;
+    options: any;
+    options2: any;
+}
+
+let itemArr = [
+    {
+        label: 'Item1',
+        items: [
+            {
+                label: 'Item4',
+                items: [
+                    {label: 'Item10'}
+                ]
+            },
+            {
+                label: 'Item5',
+                items: [
+                    {label: 'Item11'}
+                ]
+            }
+        ]
+    },
+    {
+        label: 'Item2',
+        items: [
+            {
+                label: 'Item6'
+            },
+            {
+                label: 'Item7'
+            }
+        ]
+    },
+    {
+        label: 'Item3',
+        items: [
+            {
+                label: 'Item8'
+            },
+            {
+                label: 'Item9'
+            }
+        ]
+    },
+]
+
+export class TreeSelectDocs extends React.Component<{}, IState> {
+    constructor(props) {
+        super(props);
+        this.state = {
+            value: [],
+            value2: [],
+            options: itemArr,
+            options2: itemArr
+        }
+
+        this.handleChange = this.handleChange.bind(this);
+    }
+
+    handleChange(e, option) {
+
+        if(option.item) {
+            e.stopPropagation();
+            e.preventDefault();
+            
+            this.setState({
+                options: option.item
+            })
+        }  
+    }
+
+    render() {
+        return (
+            <section className='docs-page__container'>
+                <h2 className='docs-page__h2'>TreeSelect</h2>
+
+                <Markup.ReactMarkupCodePreview>{`
+                    <TreeSelect
+                        options={this.state.options2}
+                        getLabel={'label'}
+                        getMultilevelArray={'items'}
+                        selectBranchWithChildren={true}
+                        onChange={() => false}
+                    />
+                `}
+                </Markup.ReactMarkupCodePreview>
+                
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
+                            <div className='form__row'>
+                                <TreeSelect
+                                    options={this.state.options}
+                                    getLabel={'label'}
+                                    getMultilevelArray={'items'}
+                                    selectBranchWithChildren={true}
+                                    onChange={() => false}
+                                />
+                            </div>
+                        </div>
+                    </Markup.ReactMarkupPreview>
+
+                    <Markup.ReactMarkupCode>{`
+                        <TreeSelect
+                            options={this.state.options}
+                            getLabel={'label'}
+                            getMultilevelArray={'items'}
+                            selectBranchWithChildren={true}
+                            onChange={() => false}
+                        />
+                    `}</Markup.ReactMarkupCode>
+                    
+                </Markup.ReactMarkup>
+                <p className='docs-page__paragraph'>TreeSelect with custom template.</p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
+                            <div className='form__row'>
+                                <TreeSelect
+                                    options={this.state.options2}
+                                    getMultilevelArray={'items'}
+                                    getLabel={'label'}
+                                    onChange={() => false}
+                                    optionTemplate={(item: any) => {
+                                        return <div>Label: {item.label}</div>
+                                    }}
+                                    valueTemplate={(item: any) => {
+                                        return <span>Label: {item.label}</span>
+                                    }}
+                                />
+                            </div>
+                        </div>
+                    </Markup.ReactMarkupPreview>
+
+                    <Markup.ReactMarkupCode>{`
+                        <TreeSelect
+                            options={this.state.options2}
+                            getMultilevelArray={'items'}
+                            getLabel={'label'}
+                            onChange={() => false}
+                            optionTemplate={(item: any) => {
+                                return <div>Label: {item.label}</div>
+                            }}
+                            valueTemplate={(item: any) => {
+                                return <span>Label: {item.label}</span>
+                            }}   
+                        />
+                    `}</Markup.ReactMarkupCode>
+
+                </Markup.ReactMarkup>
+
+                <h3 className="docs-page__h3">Props</h3>
+                <PropsList>
+                    <Prop name='value' isRequired={false} type='Array<T>' default='/' description='Value of the component.'/>
+                    <Prop name='options' isRequired={true} type='Array<T>' default='/' description='An array of selectitems to display as the available options.'/>
+                    <Prop name='getLabel' isRequired={true} type='string' default='/' description='Name of the label field of an option and decides which field or fields to search against.'/>
+                    <Prop name='getMultilevelArray' isRequired={true} type='string' default='/' description='Name of the children array of an option.'/>
+                    <Prop name='width' isRequired={false} type='medium | full-width (100%)' default='100%' description='Dropdown width.'/>
+                    <Prop name='selectBranchWithChildren' isRequired={false} type='boolean' default='false' description='When specified, select branch with children is enabled.'/>
+                    <Prop name='readonly' isRequired={false} type='boolean' default='false' description='When specified, component changes are not enabled.'/>
+                    <Prop name='valueTemplate' isRequired={false} type='function' default='/' description='Function that gets an item in the value and returns the content for it.'/>
+                    <Prop name='optionTemplate' isRequired={false} type='function' default='/' description='Function that gets the option and returns the content for it.'/>
+                    <Prop name='onChange' isRequired={true} type='function' default='/' description='Callback to invoke when value changes.'/>
+                </PropsList>
+  
+            </section>
+        )
+    }
+}

package/dist/react.html

@@ -8,6 +8,10 @@
         <li class="docs-page__header-nav-item docs-page__header-nav-item--active"><a class="docs-page__header-nav-link" href="#/react">React</a></li>
         <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/playgrounds">Playground</a></li>
     </ul>
+    <button class="docs-page__header-button" aria-label="Change theme" aria-haspopup="menu" aria-expanded="false">
+        <i role="presentation" class="icon-adjust"></i>
+    </button>
 </header>
 
+
 <doc-react class="sd-wrap-helper"></doc-react>