superdesk-ui-framework 4.0.1 → 4.0.3

package/app-typescript/components/DatePicker.tsx

@@ -33,6 +33,8 @@ interface IDatePickerBase extends IInputWrapper {
         }}
      */
     locale?: DatePickerLocaleSettings;
+
+    hideClearButton?: boolean;
 }
 
 interface IDatePicker extends IDatePickerBase {
@@ -146,6 +148,10 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
             );
         }
 
+        const showClearButton = this.props.required === true
+            ? false
+            : this.props.hideClearButton !== true;
+
         return (
             <InputWrapper
                 label={this.props.label}
@@ -160,7 +166,8 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
                 tabindex={this.props.tabindex}
             >
                 <Calendar
-                    footerTemplate={this.props.required !== true ? () => (
+                    className='sd-input__input'
+                    footerTemplate={showClearButton ? () => (
                         <div className='d-flex justify-end'>
                             <Button
                                 onClick={() => {

package/app-typescript/components/DateTimePicker.tsx

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import {DatePicker} from '../components/DatePicker';
+import {Spacer} from '@superdesk/common';
+import {defaultTo} from 'lodash';
+import {TimePicker} from './TimePicker';
+import {IconButton} from './IconButton';
+
+interface IProps {
+    value: Date | null;
+    label: string;
+    dateFormat: string;
+    onChange: (value: string | null) => void;
+    preview?: boolean;
+    fullWidth?: boolean;
+    allowSeconds?: boolean;
+    required?: boolean;
+    width?: React.CSSProperties['width'];
+    disabled?: boolean;
+}
+
+const MIN_WIDTH = 348;
+
+export class DateTimePicker extends React.PureComponent<IProps> {
+    handleTimeChange = (time: string) => {
+        const [hours, minutes] = time.split(':').map((x) => defaultTo(parseInt(x, 10), 0)); // handle NaN value
+        const origDate = this.props.value ?? new Date();
+
+        origDate.setHours(hours);
+        origDate.setMinutes(minutes);
+
+        this.props.onChange(origDate.toISOString());
+    }
+
+    handleDateChange = (date?: string) => {
+        if (date == null) {
+            this.props.onChange(null);
+
+            return;
+        }
+
+        const selectedDate = new Date(date);
+        const origDate = this.props.value ?? new Date();
+
+        selectedDate.setHours(origDate.getHours());
+        selectedDate.setMinutes(origDate.getMinutes());
+
+        this.props.onChange(selectedDate.toISOString());
+    }
+
+    prepareFormat(unitOfTime: number) {
+        return unitOfTime.toString().padStart(2, '0');
+    }
+
+    render() {
+        const convertedValue = this.props.value ? new Date(this.props.value) : null;
+        const convertedTimeValue = convertedValue
+            ? `${this.prepareFormat(convertedValue.getHours())}:${this.prepareFormat(convertedValue.getMinutes())}`
+            : '';
+
+        return (
+            <div style={{width: Number(this.props.width) > MIN_WIDTH ? this.props.width : MIN_WIDTH}}>
+                <Spacer h gap="0" noGrow alignItems='end'>
+                    <DatePicker
+                        disabled={this.props.disabled}
+                        preview={this.props.preview}
+                        required={this.props.required}
+                        hideClearButton={true}
+                        value={convertedValue}
+                        onChange={(val) => {
+                            this.handleDateChange(val?.toString());
+                        }}
+                        dateFormat={this.props.dateFormat}
+                        label={this.props.label}
+                        fullWidth={this.props.fullWidth}
+                    />
+                    <TimePicker
+                        disabled={this.props.disabled}
+                        preview={this.props.preview}
+                        value={convertedTimeValue}
+                        onChange={(val) => {
+                            this.handleTimeChange(val);
+                        }}
+                        allowSeconds={this.props.allowSeconds}
+                        fullWidth={this.props.fullWidth}
+                        required={this.props.required}
+                    />
+                    {this.props.preview !== true && (
+                        <IconButton
+                            disabled={this.props.disabled}
+                            icon='close-small'
+                            onClick={() => {
+                                this.props.onChange(null);
+                            }}
+                            ariaValue='Clear'
+                        />
+                    )}
+                </Spacer>
+            </div>
+        );
+    }
+}

package/app-typescript/components/Dropdown.tsx

@@ -84,6 +84,7 @@ export const Dropdown = ({
             el.style.left = '0';
             el.style.width = '1px';
             el.style.height = '1px';
+            el.setAttribute('data-test-id', 'dropdown-overlay');
 
             document.body.appendChild(el);
         }

package/app-typescript/components/ToggleBox/CustomHeaderToggleBox.tsx

@@ -67,7 +67,7 @@ export class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeade
                         aria-controls={this.htmlId}
                     >
                         <span className='label label--translucent new-collapse-box__divider-label'>
-                            {this.props.toggleButtonLabel}
+                            {this.props.getToggleButtonLabel(isOpen)}
                         </span>
                     </button>
                 </div>

package/app-typescript/components/ToggleBox/index.tsx

@@ -21,7 +21,7 @@ export interface IPropsCustomHeader {
     variant: 'custom-header'; // always visible
     header: React.ReactNode;
     children: React.ReactNode;
-    toggleButtonLabel: string;
+    getToggleButtonLabel: (isOpen: boolean) => string;
     initiallyOpen?: boolean;
     onToggle?(isOpen: boolean): void;
 }

package/app-typescript/index.ts

@@ -24,6 +24,7 @@ export { Tooltip } from './components/Tooltip';
 export { DurationInput } from './components/DurationInput';
 export { getDurationString } from './components/DurationInput';
 export { DatePicker } from './components/DatePicker';
+export { DateTimePicker } from './components/DateTimePicker';
 export { DatePickerISO } from './components/DatePicker';
 export { DatePickerLocaleSettings } from './components/DatePicker';
 export { TimePicker } from './components/TimePicker';

package/dist/components/DateTimePicker.tsx

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import * as Markup from '../../js/react';
+import {PropsList, Prop, DateTimePicker} from '../../../app-typescript';
+
+class DateTimePickerExample extends React.PureComponent<{}, {dateTime: Date | null}> {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            dateTime: new Date(),
+        };
+    }
+
+    render() {
+        return (
+            <DateTimePicker
+                label='Planning datetime'
+                value={this.state.dateTime}
+                dateFormat="YYYY-MM-DD"
+                onChange={(val) => {
+                    const parsedVal = val != null && (val.length > 0) ? new Date(val) : null;
+
+                    this.setState({dateTime: parsedVal});
+                }}
+            />
+        );
+    }
+}
+
+interface IState {
+    today: string;
+    dateTime: Date | null;
+}
+
+export default class DateTimePickerDoc extends React.Component<{}, IState> {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            today: '',
+            dateTime: new Date(),
+        };
+    }
+
+    render() {
+        return (
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">Date picker</h2>
+                <Markup.ReactMarkupCodePreview>{`
+                    <DateTimePicker
+                        label="Planning datetime"
+                        value={this.state.date}
+                        dateFormat="YYYY-MM-DD"
+                        onChange={(date) => {
+                            this.setState({date});
+                        }}
+                    />
+                `}</Markup.ReactMarkupCodePreview>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row'>
+                            <DateTimePickerExample />
+                        </div>
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        <DateTimePicker
+                            value={this.state.date}
+                            onChange={(date) => {
+                                this.setState({date});
+                            }}
+                            dateFormat="YYYY-MM-DD"
+                        />
+                    `}</Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+
+                <h3 className='docs-page__h3'>Props</h3>
+                <PropsList>
+                    <Prop name='value' isRequired={false} type='Date' default='null' description='Value of the component.' />
+                    <Prop name='dateFormat' isRequired={true} type='string' default='/' description='Date format to use, i.e. "MM/DD/YYYY".' />
+                    <Prop name='onChange' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
+                    <Prop name='label' isRequired={false} type='string' default='/' description='Label of component.' />
+                    <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.' />
+                </PropsList>
+
+                <h3 className='docs-page__h3'>Events</h3>
+                <PropsList>
+                    <Prop name='onChange' isRequired={true} type='function' default='/' description='Returns value of date input' />
+                </PropsList>
+            </section>
+        );
+    }
+}

package/dist/components/Index.tsx

@@ -21,6 +21,7 @@ import IconButtonDoc from './IconButtons';
 import IconLabelDoc from './IconLabels';
 import TooltipDoc from './Tooltips';
 import DatePickerDoc from './DatePicker';
+import DateTimePickerDoc from './DateTimePicker';
 import TimePickerDoc from './TimePicker';
 import SwitchDoc from './Switch';
 import RadioGroupDoc from './RadioGroup';
@@ -337,6 +338,10 @@ const pages: IPages = {
                 name: 'Date Picker',
                 component: DatePickerDoc,
             },
+            'date-time-picker': {
+                name: 'DateTime Picker',
+                component: DateTimePickerDoc,
+            },
             'time-picker': {
                 name: 'Time Picker',
                 component: TimePickerDoc,