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

package/app-typescript/components/Spacer.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+export interface IPropsSpacer {
+    h?: boolean; // horizontal
+    v?: boolean; // vertical
+    gap: '0' | '4' | '8' | '16' | '32' | '64';
+    justifyContent?: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'stretch';
+    alignItems?: 'start' | 'end' | 'center' | 'stretch';
+    noGrow?: boolean;
+
+    /**
+     * Will not wrap children in div elements.
+     * `noGrow` prop would then not be relevant.
+     */
+    noWrap?: boolean;
+
+    style?: React.CSSProperties;
+
+    children: Array<React.ReactNode>;
+}
+
+export class Spacer extends React.PureComponent<IPropsSpacer> {
+    constructor(props: IPropsSpacer) {
+        super(props);
+        this.state = {
+            items: [],
+        };
+
+    }
+    render() {
+        const {h, v, gap, justifyContent, alignItems, noGrow, noWrap} = this.props;
+
+        const justifyContentDefault: IPropsSpacer['justifyContent'] = h ? 'space-between' : 'start';
+        const alignItemsDefault: IPropsSpacer['alignItems'] = h ? 'center' : 'start';
+
+        return (
+            <div
+                style={{
+                    display: 'flex',
+                    flexDirection: v ? 'column' : 'row',
+                    gap: `${gap}px`,
+                    justifyContent: justifyContent ?? justifyContentDefault,
+                    alignItems: alignItems ?? alignItemsDefault,
+                    width: noGrow === true ? undefined : '100%',
+                    ...(this.props.style ?? {}),
+                }}
+            >
+                {this.props.children.map((el, i) => noWrap ? el : (
+                    <div
+                        key={i}
+                        style={{
+                            width: noGrow === true ? undefined : '100%',
+                        }}
+                    >
+                        {el}
+                    </div>
+                ))}
+            </div>
+        );
+    }
+}
+
+/**
+ * Renders a standalone spacing block - similar to <br />
+ */
+export interface ISpacerBlock {
+    h?: boolean; // horizontal
+    v?: boolean; // vertical
+    gap: '4' | '8' | '16' | '32' | '64';
+}
+
+export class SpacerBlock extends React.PureComponent<ISpacerBlock> {
+    render() {
+        const {gap, h, v} = this.props;
+
+        return (
+            <span
+                style={{
+                    display: h === true ? 'inline-block' : 'block',
+                    width: h === true ? `${gap}px` : undefined,
+                    height: v === true ? `${gap}px` : undefined,
+                }}
+            />
+        );
+    }
+}

package/app-typescript/components/TimePicker.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-// import classNames from 'classnames';
 import nextId from "react-id-generator";
 import { InputWrapper } from './Form';
 
@@ -19,18 +18,8 @@ interface IProps {
     error?: string;
 }
 
-interface IState {
-    invalid: boolean;
-}
-
-export class TimePicker extends React.PureComponent<IProps, IState> {
+export class TimePicker extends React.PureComponent<IProps> {
     private htmlId = nextId();
-    constructor(props: IProps) {
-        super(props);
-        this.state = {
-            invalid: this.props.invalid ? this.props.invalid : false,
-        };
-    }
 
     render() {
         return (
@@ -39,7 +28,7 @@ export class TimePicker extends React.PureComponent<IProps, IState> {
             error={this.props.error}
             required={this.props.required}
             disabled={this.props.disabled}
-            invalid={this.state.invalid}
+            invalid={this.props.invalid}
             info={this.props.info}
             inlineLabel={this.props.inlineLabel}
             labelHidden={this.props.labelHidden}