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

package/dist/react/Selects.tsx

@@ -62,6 +62,61 @@ export default class InputsDoc extends React.Component<{}, IState> {
                                     <Option>Option 2</Option>
                                 </Select>
                             </div>
+
+                            <p className="docs-page__paragraph">// Boxed with hidden label</p>
+                            <div className='form__row'>
+                                <Select label='Select label'
+                                    value='Option 2'
+                                    boxedStyle
+                                    labelHidden
+                                    error='This is error message'
+                                    info='This is some hint message'
+                                    inlineLabel={this.state.inlineLabel}
+                                    required={this.state.required}
+                                    disabled={this.state.disabled}
+                                    invalid={this.state.invalid}
+                                    tabindex={0}
+                                    onChange={(value) => { console.log(value) }}>
+                                    <Option>Option 1</Option>
+                                    <Option>Option 2</Option>
+                                </Select>
+                            </div>
+                            <div className='form__row'>
+                                <Select label='Select label'
+                                    value='Option 2'
+                                    boxedStyle
+                                    labelHidden
+                                    size='large'
+                                    error='This is error message'
+                                    info='This is some hint message'
+                                    inlineLabel={this.state.inlineLabel}
+                                    required={this.state.required}
+                                    disabled={this.state.disabled}
+                                    invalid={this.state.invalid}
+                                    tabindex={0}
+                                    onChange={(value) => { console.log(value) }}>
+                                    <Option>Option 1</Option>
+                                    <Option>Option 2</Option>
+                                </Select>
+                            </div>
+                            <div className='form__row'>
+                                <Select label='Select label'
+                                    value='Option 2'
+                                    boxedStyle
+                                    labelHidden
+                                    size='x-large'
+                                    error='This is error message'
+                                    info='This is some hint message'
+                                    inlineLabel={this.state.inlineLabel}
+                                    required={this.state.required}
+                                    disabled={this.state.disabled}
+                                    invalid={this.state.invalid}
+                                    tabindex={0}
+                                    onChange={(value) => { console.log(value) }}>
+                                    <Option>Option 1</Option>
+                                    <Option>Option 2</Option>
+                                </Select>
+                            </div>
                         </div>
 
                     </Markup.ReactMarkupPreview>

package/dist/react/WithSizeObserver.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import * as Markup from '../../js/react';
+import {WithSizeObserver} from '../../../app-typescript/components/WithSizeObserver';
+
+export class WithSizeObserverDocs extends React.Component {
+    render() {
+        return (
+            <section className='docs-page__container'>
+
+                <h2 className='docs-page__h2'>WithSizeObserver</h2>
+
+                <p>Higher order component for dynamically retrieving dimensions of any element.</p>
+
+                <p>It uses `ResizeObserver` to listen for updates and re-render children efficiently.</p>
+
+                <p className='docs-page__paragraph'></p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
+                            <div className='form__row'>
+                                <div style={{resize: 'both', overflow: 'auto', height: 40, outline: '1px solid red'}}>
+                                    <WithSizeObserver>
+                                        {({width, height}) => (
+                                            <div>width: {width}px ; height: {height}px</div>
+                                        )}
+                                    </WithSizeObserver>
+                                </div>
+                            </div>
+                        </div>
+
+                    </Markup.ReactMarkupPreview>
+
+                    <Markup.ReactMarkupCode>{`
+                        <WithSizeObserver>
+                            {({width, height}) => (
+                                <div>width: {width}px ; height: {height}px</div>
+                            )}
+                        </WithSizeObserver>
+                    `}</Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+            </section>
+        )
+    }
+}