superdesk-ui-framework 3.0.1-beta.9 → 3.0.1

package/examples/pages/react/ContentList.tsx

@@ -1,28 +1,23 @@
 import * as React from 'react';
 import * as Markup from '../../js/react';
-import { BoxedList, BoxedListItem, BoxedListContentRow, Prop, PropsList, Icon, IconButton, AvatarWrapper, AvatarContentText, ButtonGroup, Button, Heading, Text, Label, Container, IconLabel } from '../../../app-typescript';
-import { TableList, TableListItem } from '../../../app-typescript/components/Lists/TableList';
-import { ContentList, ContentListItem } from '../../../app-typescript/components/Lists/ContentList';
+import { Prop, PropsList, Icon, IconButton, Label, Container, IconLabel } from '../../../app-typescript';
+import { ContentList } from '../../../app-typescript/components/Lists/ContentList';
 
 export default class ContentListDoc extends React.Component {
     render() {
         return (
             <section className='docs-page__container'>
                 <h2 className='docs-page__h2'>ContentList</h2>
-                
                 <Markup.ReactMarkupCodePreview>{`
                     <ContentList 
                     items: [...]
                     />
                 `}
                 </Markup.ReactMarkupCodePreview>
-
                 <p className="docs-page__paragraph">...</p>
-
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <p className="docs-page__paragraph">// basic</p>
-
                         <ContentList
                         items={[
                             {
@@ -61,7 +56,6 @@ export default class ContentListDoc extends React.Component {
                                     }
                                 ],
                                 action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
-                                loading: true,
                             },
                             {
                                 itemColum: [
@@ -98,8 +92,6 @@ export default class ContentListDoc extends React.Component {
                                         fullwidth: true,
                                     }
                                 ],
-                                //locked: true,
-                                selected: true,
                                 action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
                             },
                             {
@@ -140,7 +132,141 @@ export default class ContentListDoc extends React.Component {
                                 action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
                             },
                         ]} />
+                    </Markup.ReactMarkupPreview>
+
+                    <Markup.ReactMarkupPreview>
+                        <p className="docs-page__paragraph">// loading</p>
+                        <ContentList
+                        items={[
+                            {
+                                itemColum: [
+                                    {
+                                        itemRow: [{content:<>
+                                                    <i className="icon-rundown"></i>
+                                                </>}],
+                                        border: true
+                                    },
+                                    {
+                                        itemRow: [
+                                            {
+                                                content:
+                                                <>
+                                                    <span className="sd-list-item__slugline">19:00 – 19:45</span>
+                                                    <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
+                                                    <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
+                                                    <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
+                                                </>
+                                            },
+                                            {
+                                                content:
+                                                <>
+                                                    <Label text='Marker' color='blue--800'/>
+                                                        <span className='sd-list-item__compound-text'>
+                                                            <span className='sd-list-item__text-label'>Template:</span>
+                                                            <span>Marker Daily</span>
+                                                        </span>
+                                                        <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>    
+                                                    <Label style='translucent' text='In Progress' type='warning' />
+                                                </>
+                                            },
+                                        ],
+                                        fullwidth: true,
+                                    }
+                                ],
+                                action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
+                                loading: true
+                            },
+                        ]} />
+                    </Markup.ReactMarkupPreview>
 
+                    <Markup.ReactMarkupPreview>
+                        <p className="docs-page__paragraph">// selected</p>
+                        <ContentList
+                        items={[
+                            {
+                                itemColum: [
+                                    {
+                                        itemRow: [{content:<>
+                                                    <i className="icon-rundown"></i>
+                                                </>}],
+                                        border: true
+                                    },
+                                    {
+                                        itemRow: [
+                                            {
+                                                content:
+                                                <>
+                                                    <span className="sd-list-item__slugline">19:00 – 19:45</span>
+                                                    <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
+                                                    <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
+                                                    <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
+                                                </>
+                                            },
+                                            {
+                                                content:
+                                                <>
+                                                    <Label text='Marker' color='blue--800'/>
+                                                        <span className='sd-list-item__compound-text'>
+                                                            <span className='sd-list-item__text-label'>Template:</span>
+                                                            <span>Marker Daily</span>
+                                                        </span>
+                                                        <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>    
+                                                    <Label style='translucent' text='In Progress' type='warning' />
+                                                </>
+                                            },
+                                        ],
+                                        fullwidth: true,
+                                    }
+                                ],
+                                action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
+                                selected: true,
+                            },
+                        ]} />
+                    </Markup.ReactMarkupPreview>
+
+                    <Markup.ReactMarkupPreview>
+                        <p className="docs-page__paragraph">// locked</p>
+                        <ContentList
+                        items={[
+                            {
+                                itemColum: [
+                                    {
+                                        itemRow: [{content:<>
+                                                    <i className="icon-rundown"></i>
+                                                </>}],
+                                        border: true
+                                    },
+                                    {
+                                        itemRow: [
+                                            {
+                                                content:
+                                                <>
+                                                    <span className="sd-list-item__slugline">19:00 – 19:45</span>
+                                                    <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
+                                                    <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
+                                                    <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
+                                                </>
+                                            },
+                                            {
+                                                content:
+                                                <>
+                                                    <Label text='Marker' color='blue--800'/>
+                                                        <span className='sd-list-item__compound-text'>
+                                                            <span className='sd-list-item__text-label'>Template:</span>
+                                                            <span>Marker Daily</span>
+                                                        </span>
+                                                        <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>    
+                                                    <Label style='translucent' text='In Progress' type='warning' />
+                                                </>
+                                            },
+                                        ],
+                                        fullwidth: true,
+                                    }
+                                ],
+                                action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
+                                locked: true,
+                            },
+                        ]} />
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                         <ContentList
@@ -258,10 +384,55 @@ export default class ContentListDoc extends React.Component {
                                 action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
                             },
                         ]} />
+
+                        // loading, slected & locked
+
+                        <ContentList
+                        items={[
+                            {
+                                itemColum: [
+                                    {
+                                        itemRow: [{content:<>
+                                                    <i className="icon-rundown"></i>
+                                                </>}],
+                                        border: true
+                                    },
+                                    {
+                                        itemRow: [
+                                            {
+                                                content:
+                                                <>
+                                                    <span className="sd-list-item__slugline">19:00 – 19:45</span>
+                                                    <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
+                                                    <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
+                                                    <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
+                                                </>
+                                            },
+                                            {
+                                                content:
+                                                <>
+                                                    <Label text='Marker' color='blue--800'/>
+                                                        <span className='sd-list-item__compound-text'>
+                                                            <span className='sd-list-item__text-label'>Template:</span>
+                                                            <span>Marker Daily</span>
+                                                        </span>
+                                                        <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>    
+                                                    <Label style='translucent' text='In Progress' type='warning' />
+                                                </>
+                                            },
+                                        ],
+                                        fullwidth: true,
+                                    }
+                                ],
+                                action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
+                                loading: true,
+                                selected: true,
+                                locked: true,
+                            },
+                        ]} />
                     `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
-
                 <h3 className="docs-page__h3">Props</h3>
                 <p className="docs-page__paragraph">ContentList</p>
                 <PropsList>
@@ -279,7 +450,12 @@ export default class ContentListDoc extends React.Component {
                     <Prop name='onClick' isRequired={false} type='function' default='/' description='onClick functionality.'/>
                     <Prop name='onDoubleClick' isRequired={false} type='function' default='/' description='onDoubleClick functionality.'/>
                 </PropsList>
-    
+                <p className="docs-page__paragraph">itemColum:</p>
+                <PropsList>
+                    <Prop name='itemRow' isRequired={true} type='Array<{content: any}>' default='ture' description='An array of objects for defining rows of individual items.'/>
+                    <Prop name='border' isRequired={false} type='boolean' default='false' description='If is true, the individual item of list change style.'/>
+                    <Prop name='fullwidth' isRequired={false} type='boolean' default='false' description='If is true, the individual item of list change style.'/>
+                </PropsList>
             </section>
         )
     }

package/examples/pages/react/DatePicker.tsx

@@ -30,6 +30,13 @@ class DatePickerExample extends React.PureComponent<{}, {date: Date}> {
 }
 
 export default class DatePickerDoc extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            today: new Date(),
+        };
+    }
     render() {
         return (
             <section className="docs-page__container">
@@ -120,14 +127,55 @@ export default class DatePickerDoc extends React.Component {
                         />
                     `}</Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
+                <p className="docs-page__paragraph">DatePicker with headerButtonBar:</p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row'>
+                        <DatePicker
+                            value={this.state.today}
+                            dateFormat="YYYY-MM-DD"
+                            onChange={(today) => {
+                                this.setState({today});
+                            }}
+                            required
+                            tabindex={1}
+                            label={'This is Label'}
+                            info={'This is info'}
+                            error={'This is error'}
+                            headerButtonBar={[{days: 0, label: 'today'}, {days: 1, label: 'tomorow'}, {days: 2, label: 'in 2 days'}]}
+                        />
+                        </div>
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        <DatePicker
+                            value={this.state.date}
+                            dateFormat="YYYY-MM-DD"
+                            onChange={(date) => {
+                                this.setState({date});
+                            }}
+                            required
+                            tabindex={1}
+                            label={'This is Label'}
+                            info={'This is info'}
+                            error={'This is error'}
+                            headerButtonBar={[{days: 0, label: 'today'}, {days: 1, label: 'tomorow'}, {days: 2, label: 'in 2 days'}]}
+                        />
+                    `}</Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
 
                 <h3 className='docs-page__h3'>Props</h3>
                 <PropsList>
                     <Prop name='value' isRequired={false} type='Date' default='/' description='Item value' />
-                    <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled' />
                     <Prop name='dateFormat' isRequired={true} type='string' default='/' description='Date format to use, i.e. "MM/DD/YYYY"' />
-                    <Prop name='shortcuts' isRequired={false} type='string' default='/' description='Shortcuts for calendar popup, i.e. [{label: "tomorrow", days: 1}]' />
                     <Prop name='locale' isRequired={false} type='string' default='/' description='see: https://primefaces.org/primereact/showcase/#/calendar' />
+                    <Prop name='headerButtonBar' isRequired={false} type='Array' default='/' description='Aditional button in header, ex. [{label: "today", days: 0}, {label: "tomorrow", days: 1}]' />
+                    <Prop name='label' isRequired={false} type='string' default='/' description='Input label'/>
+                    <Prop name='info' isRequired={false} type='string' default='/' description='Hint text'/>
+                    <Prop name='error' isRequired={false} type='string' default='/' description='Error text'/>
+                    <Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline'/>
+                    <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required'/>
+                    <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled'/>
+                    <Prop name='invalid' isRequired={false} type='boolean' default='false' description='Mark field as invalid'/>
                 </PropsList>
 
                 <h3 className='docs-page__h3'>Events</h3>