react-ui-basics 0.0.175 → 0.0.178

package/src/DatePicker.tsx

@@ -0,0 +1,179 @@
+import React from 'react';
+import './DatePicker.css'
+import TextField from "./TextField";
+import * as DateTools from "./DateTools";
+import {orNoop, classNames, preventDefault} from "./Tools";
+import Button from './Button'
+import CalendarMonthView from "./CalendarMonthView";
+import MaterialIcon from "./MaterialIcon";
+import {DateExtended} from "./DateTools";
+
+const DayRenderer = ({day, selected, minDate, onClick}: {
+    day: DateExtended,
+    selected: Date,
+    minDate: Date,
+    onClick: (day: Date) => void
+}) =>
+    <span
+        className={classNames('value',
+            minDate && (day.isBefore(minDate) && !day.isSameDate(minDate)) && 'inactive',
+            selected && day.isSameDate(selected) && 'selected',
+        )}
+        onClick={e => {
+            preventDefault(e);
+            if (minDate && (day.isBefore(minDate) && !day.isSameDate(minDate))) return;
+
+            onClick(day);
+        }}
+    >
+        {DateTools.get(day, DateTools.TimeUnit.DAY)}
+    </span>;
+
+export interface DatePickerProps {
+    id?: number | string
+    name?: string
+    value: Date
+    minDate?: Date
+    formatter: (date: Date) => string
+    parser: (date: string) => Date
+    onChange: (e) => void
+    dayOfWeekToString: (day: number) => string | JSX.Element
+    monthToString: (day: number) => string | JSX.Element
+}
+
+interface DatePickerState {
+    focused: boolean,
+    value: Date,
+    selectedMonth: DateExtended,
+    text: string,
+}
+
+class DatePicker extends React.Component<DatePickerProps, DatePickerState> {
+    private el: HTMLDivElement;
+    private listener: (e) => void;
+
+    constructor(props: DatePickerProps) {
+        super(props);
+        const date = props.value || new Date();
+        this.state = {
+            focused: false,
+            value: date,
+            text: props.formatter(date),
+            selectedMonth: DateTools.dateOf(date).resetTime().set(1, DateTools.TimeUnit.DAY),
+        };
+    }
+
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        if (this.props.value !== prevProps.value)
+            this.setState({
+                value: this.props.value,
+                selectedMonth: DateTools.dateOf(this.props.value).resetTime().set(1, DateTools.TimeUnit.DAY),
+                text: this.props.formatter(this.props.value)
+            })
+    };
+
+    componentDidMount() {
+        document.addEventListener('mousedown', this.listener = (e) => {
+            if (this.state.focused && !this.el.contains(e.target))
+                this.setState({focused: false});
+        })
+    };
+
+    componentWillUnmount() {
+        document.removeEventListener('mousedown', this.listener)
+    };
+
+    shouldComponentUpdate(nextProps, nextState, nextContext) {
+        if (!DateTools.equals(this.props.value, nextProps.value))
+            return true;
+
+        if (!DateTools.equals(this.state.value, nextState.value))
+            return true;
+
+        if (this.state.text !== nextState.text)
+            return true;
+
+        if (this.state.focused !== nextState.focused)
+            return true;
+
+        if (this.state.selectedMonth !== nextState.selectedMonth)
+            return true;
+
+        if (!DateTools.equals(this.props.minDate, nextProps.minDate))
+            return true;
+
+        return false;
+    };
+
+    render() {
+        const {minDate, formatter, parser, dayOfWeekToString, monthToString} = this.props;
+        const {value, text, focused, selectedMonth} = this.state;
+
+        return <div className={`DatePicker`} ref={el => this.el = el}>
+            <TextField id={'value'} value={text}
+                       autoComplete="off"
+                       onFocus={() => this.setState({focused: true})}
+                       onChange={e => {
+                           const text = e.target.value;
+                           try {
+                               const date = parser(text);
+                               if (date instanceof Date && !Number.isNaN(date.getTime())) {
+                                   if (date && value.getTime() !== date.getTime())
+                                       this.onChange(date);
+                               }
+                               this.setState({text})
+                           } catch (ignored) {
+                           }
+                       }}
+                       onKeyDown={e => {
+                           if ((e.keyCode === 27/*esc*/ || e.keyCode === 13/*enter*/) && focused) {
+                               e.preventDefault();
+                               this.setState({text: formatter(value), focused: false});
+                           }
+                       }}
+            />
+            <div className={`calendar ${focused && 'focused'}`}>
+                <div className={'row monthSelect'}>
+                    <span>
+                        {monthToString(selectedMonth.get(DateTools.TimeUnit.MONTH))}
+                        &nbsp;{selectedMonth.get(DateTools.TimeUnit.YEAR)}
+                    </span>
+                    <Button flat={true} round={true} disabled={minDate && DateTools.dateOf(selectedMonth).isBefore(minDate)} onClick={() => {
+                        this.setState({selectedMonth: DateTools.dateOf(selectedMonth).subtract(1, DateTools.TimeUnit.MONTH)})
+                    }}>
+                        <MaterialIcon icon={'chevron_left'}/>
+                    </Button>
+                    <Button flat={true} round={true} onClick={() => {
+                        this.setState({selectedMonth: DateTools.dateOf(selectedMonth).add(1, DateTools.TimeUnit.MONTH)})
+                    }}>
+                        <MaterialIcon icon={'chevron_right'}/>
+                    </Button>
+                </div>
+                <CalendarMonthView monthOf={selectedMonth}
+                                   dayOfWeekToString={dayOfWeekToString}
+                                   dayRenderer={(date) => <DayRenderer
+                                       day={DateTools.dateOf(date)}
+                                       selected={value}
+                                       minDate={minDate}
+                                       onClick={value => {
+                                           this.onChange(value)
+                                           this.setState({focused: false, text: formatter(value)});
+                                       }}
+                                   />}/>
+            </div>
+        </div>
+    };
+
+    onChange = (value: Date) => {
+        this.setState({value});
+        orNoop(this.props.onChange)({
+            target: {
+                id: this.props.id,
+                name: this.props.name,
+                value,
+            }
+        })
+    }
+}
+
+export default DatePicker;

package/src/DateTools.ts

@@ -0,0 +1,85 @@
+export const resetTime = (date: Date) => {
+    date.setHours(0, 0, 0, 0);
+    return date
+};
+export const timeOf = (date: Date) => date.getTime();
+export const equals = (a: Date, b: Date) => a && b && timeOf(a) === timeOf(b);
+export const isBefore = (a: Date, b: Date) => a && b && timeOf(a) < timeOf(b);
+export const isAfter = (a: Date, b: Date) => a && b && timeOf(a) > timeOf(b);
+export const max = (a: Date, b: Date) => {
+    if (!b) return a;
+    if (!a) return b;
+    return timeOf(a) > timeOf(b) ? a : b;
+};
+export const min = (a: Date, b: Date) => {
+    if (!b) return a;
+    if (!a) return b;
+    return timeOf(a) < timeOf(b) ? a : b;
+};
+
+export class TimeUnit {
+    static MILLISECOND = new TimeUnit('Milliseconds');
+    static SECOND = new TimeUnit('Seconds');
+    static MINUTE = new TimeUnit('Minutes');
+    static HOUR = new TimeUnit('Hours');
+    static DAY = new TimeUnit('Date');
+    static MONTH = new TimeUnit('Month');
+    static YEAR = new TimeUnit('FullYear');
+    set: (date: Date, value: number) => void;
+    get: (date: Date) => number;
+
+    constructor(field) {
+        const getter = 'get' + field;
+        const setter = 'set' + field;
+        // this.getter = getter;
+        // this.setter = setter;
+        this.toString = () => field;
+        this.get = (date) => date[getter]();
+        this.set = (date, value) => date[setter](value);
+    }
+
+}
+
+export const get = (date: Date, timeUnit: TimeUnit) => timeUnit.get(date);
+export const set = (date: Date, value: number, timeUnit: TimeUnit): Date => {
+    timeUnit.set(date, value);
+    return date;
+};
+
+export const add = (date: Date, amount: number, timeUnit: TimeUnit): Date => {
+    timeUnit.set(date, timeUnit.get(date) + amount);
+    return date;
+};
+
+export const subtract = (date: Date, amount: number, timeUnit: TimeUnit): Date => add(date, -amount, timeUnit);
+
+export interface DateExtended extends Date {
+    get: (timeUnit: TimeUnit) => number;
+    set: (value: number, timeUnit: TimeUnit) => DateExtended;
+    add: (amount: number, timeUnit: TimeUnit) => DateExtended;
+    subtract: (amount: number, timeUnit: TimeUnit) => DateExtended;
+    isBefore: (after: Date) => boolean;
+    isAfter: (before: Date) => boolean;
+    isSameDate: (another: Date) => boolean;
+    equals: (another: Date) => boolean;
+    resetTime: () => DateExtended;
+}
+
+export const extend = (date:Date):DateExtended => {
+    const d = date as DateExtended
+    d.get = (timeUnit) => get(date, timeUnit);
+    d.set = (value, timeUnit) => set(date, value, timeUnit) as DateExtended;
+    d.add = (amount, timeUnit) => add(date, amount, timeUnit) as DateExtended;
+    d.subtract = (amount, timeUnit) => subtract(date, amount, timeUnit) as DateExtended;
+    d.isBefore = (after) => isBefore(date, after);
+    d.isAfter = (before) => isAfter(date, before);
+    d.isSameDate = (another) => isSameDay(date, another);
+    d.equals = (another) => equals(date, another);
+    d.resetTime = () => resetTime(date) as DateExtended;
+    return d;
+};
+export const dateOf = (date?: string | Date): DateExtended => extend(date ? new Date(date) : new Date());
+export const now = dateOf;
+export const copy = dateOf;
+
+export const isSameDay = (dateA: Date, dateB: Date) => dateA.getDate() === dateB.getDate() && dateA.getMonth() === dateB.getMonth() && dateA.getFullYear() === dateB.getFullYear();

package/src/Dialog.css

@@ -0,0 +1,36 @@
+.DialogModal {
+  overflow: hidden;
+}
+.DialogModal .content {
+  top: 20vh;
+}
+
+.Dialog {
+  background-color: white;
+  min-width: 460px;
+  max-width: 40vw;
+  padding: 15px;
+}
+.Dialog .title {
+  margin-bottom: 15px;
+  padding: 20px 50px 0px 30px;
+  font-size: 1.25rem;
+  line-height: 2rem;
+  font-weight: 400;
+  letter-spacing: 0.0125em;
+}
+.Dialog .description {
+  color: rgba(0, 0, 0, 0.54);
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 400;
+  letter-spacing: 0.03125em;
+  margin-top: 20px;
+  padding: 0 24px 24px;
+}
+.Dialog > div.row {
+  margin-bottom: 15px;
+}
+.Dialog > div.row:last-child {
+  margin-bottom: 0;
+}

package/src/Dialog.js

@@ -0,0 +1,160 @@
+import ReactConstants from "./../ReactConstants";
+import {clientHeight as __clientHeight, clientWidth as __clientWidth, createAccessor as __createAccessor, data as __data, height as __height, left as __left, length as __length, pageX as __pageX, pageY as __pageY, props as __props, scrollLeft as __scrollLeft, scrollTop as __scrollTop, state as __state, style as __style, target as __target, top as __top, value as __value, width as __width} from "./../CommonFields";
+import React, {Component} from 'react';
+import {toConsumableArray as __toConsumableArray} from "./../_virtual/_rollupPluginBabelHelpers";
+import {extends as __extends} from "./../_virtual/_rollupPluginBabelHelpers";
+import {inherits as __inherits} from "./../_virtual/_rollupPluginBabelHelpers";
+import './Dialog.css';
+import ReactCreateElement from './ReactCreateElement';
+import './Dialog.css'
+import Button from "./Button";
+import Modal from "./Modal";
+import {isUndefined, orNoop, preventDefault, ref, UNDEFINED, classNames, createRef} from "./Tools";
+import {PureComponent, render, componentDidMount, propsGetter, stateGSs} from "./ReactConstants";
+import PropTypes from "prop-types";
+
+class Dialog extends PureComponent {
+    constructor(properties) {
+        super(properties);
+
+        this[ReactConstants[3]] = () => {
+            const {title, description, accept, cancel, onAccept, onCancel, children} = __props(this);
+            return <div className="Dialog">
+                {title && <div className="title">{title}</div>}
+                {description && <div className="description">{description}</div>}
+                {children}
+                <div className="row right">
+                    {cancel && <Button flat={true} onClick={onCancel}>{cancel}</Button>}
+                    {accept && <Button flat={true} onClick={onAccept}>{accept}</Button>}
+                </div>
+            </div>
+        }
+    }
+}
+
+Dialog.defaultProps = {
+    accept: 'Accept',
+    cancel: 'Decline',
+};
+
+const throwIfPropExists = (key, props) => {
+    if (props[key]) throw Error(key + " was already set by props")
+};
+
+class DialogWrapper extends Component {
+
+    constructor(properties) {
+        super(properties);
+        const that = this;
+        that.state = {};
+
+        const props = propsGetter(that);
+        const openRef = createRef();
+        const closeRef = createRef();
+
+        const [titleState,
+            descriptionState,
+            onAcceptState,
+            onCancelState,
+            acceptState,
+            cancelState
+        ] = stateGSs(that, 6);
+
+        const onCancel = (e) => {
+            preventDefault(e);
+            orNoop(props().onCancel || onCancelState())();
+            closeRef()();
+        };
+
+        const onAccept = (e) => {
+            preventDefault(e);
+            orNoop(props().onAccept || onAcceptState())();
+            closeRef()();
+        };
+
+        that[ReactConstants[3]] = () => {
+            const {top, className, ...other} = props();
+            return (
+                <Modal
+                    top={top}
+                    className={classNames('DialogModal', className)}
+                    open={openRef}
+                    close={closeRef}
+                    onClose={onCancel}
+                >
+                    <Dialog title={titleState()} description={descriptionState()} accept={acceptState()} cancel={cancelState()} {...other} onAccept={onAccept} onCancel={onCancel}/>
+                </Modal>
+            );
+        };
+
+        that.open = (onAccept, onCancel, title, description, accept, cancel) => {
+            titleState(UNDEFINED);
+            descriptionState(UNDEFINED);
+            onAcceptState(UNDEFINED);
+            onCancelState(UNDEFINED);
+            acceptState(UNDEFINED);
+            cancelState(UNDEFINED);
+
+            const _props = props();
+            if (!isUndefined(onAccept)) {
+                throwIfPropExists("onAccept", _props);
+                onAcceptState(onAccept);
+            }
+            if (!isUndefined(onCancel)) {
+                throwIfPropExists("onCancel", _props);
+                onCancelState(onCancel);
+            }
+            if (!isUndefined(title)) {
+                throwIfPropExists("title", _props);
+                titleState(title);
+            }
+            if (!isUndefined(description)) {
+                throwIfPropExists("description", _props);
+                descriptionState(description);
+            }
+            if (!isUndefined(accept)) {
+                throwIfPropExists("accept", _props);
+                acceptState(accept);
+            }
+            if (!isUndefined(cancel)) {
+                throwIfPropExists("cancel", _props);
+                cancelState(cancel);
+            }
+            openRef()();
+        };
+
+        that[ReactConstants[0]] = () => {
+            const _props = props();
+            orNoop(_props.open)(that.open);
+            orNoop(_props.close)(closeRef());
+            _props.show && that.open();
+        }
+    }
+}
+
+export default DialogWrapper;
+
+if (process.env.NODE_ENV !== 'production') {
+    DialogWrapper.propTypes = {
+        title: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.element
+        ]),
+        description: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.element
+        ]),
+        accept: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.element
+        ]),
+        cancel: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.element
+        ]),
+        onAccept: PropTypes.func,
+        onCancel: PropTypes.func,
+        [ReactConstants[5]]: PropTypes.string,
+        top: PropTypes.number,
+    };
+}

package/src/Dialog.scss

@@ -0,0 +1,42 @@
+.DialogModal {
+  overflow: hidden;
+
+  .content {
+    top: 20vh;
+  }
+}
+
+.Dialog {
+  background-color: white;
+  min-width: 460px;
+  max-width: 40vw;
+  padding: 15px;
+
+  .title {
+    margin-bottom: 15px;
+    padding: 20px 50px 0px 30px;
+    font-size: 1.25rem;
+    line-height: 2rem;
+    font-weight: 400;
+    letter-spacing: .0125em;
+  }
+
+  .description {
+    color: rgba(0, 0, 0, .54);
+    font-size: 1rem;
+    line-height: 1.5rem;
+    font-weight: 400;
+    letter-spacing: .03125em;
+    margin-top: 20px;
+    padding: 0 24px 24px;
+  }
+
+
+  > div.row {
+    margin-bottom: 15px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}

package/src/DropFileInput.css

@@ -0,0 +1,24 @@
+.DropFileInput {
+  flex-grow: 1;
+}
+.DropFileInput .Dropzone {
+  border: 1px dashed #808080;
+  padding: 12px;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  color: gray;
+  cursor: pointer;
+  border-radius: 3px;
+  font-weight: normal;
+  line-height: 22px;
+  font-size: 14px;
+  color: #7E7E7E;
+  max-width: 100%;
+  word-break: break-all;
+  word-break: break-word;
+}
+.DropFileInput .Dropzone .icon.withText {
+  margin-right: 10px;
+}

package/src/DropFileInput.js

@@ -0,0 +1,45 @@
+import ReactConstants from "./../ReactConstants";
+import {clientHeight as __clientHeight, clientWidth as __clientWidth, createAccessor as __createAccessor, data as __data, height as __height, left as __left, length as __length, pageX as __pageX, pageY as __pageY, props as __props, scrollLeft as __scrollLeft, scrollTop as __scrollTop, state as __state, style as __style, target as __target, top as __top, value as __value, width as __width} from "./../CommonFields";
+import React from 'react';
+import {toConsumableArray as __toConsumableArray} from "./../_virtual/_rollupPluginBabelHelpers";
+import {extends as __extends} from "./../_virtual/_rollupPluginBabelHelpers";
+import {inherits as __inherits} from "./../_virtual/_rollupPluginBabelHelpers";
+import './DropFileInput.css';
+import ReactCreateElement from './ReactCreateElement';
+import './DropFileInput.css'
+import Dropzone from "./Dropzone";
+import PropTypes from "prop-types";
+import {classNames} from "./Tools";
+import MaterialIcon from "./MaterialIcon";
+
+const DropFileInput = ({icon, label, onDrop, droppable, multiple, accept}) => (
+    <section className="DropFileInput">
+        <Dropzone droppable={droppable} onDrop={onDrop} accept={accept} multiple={multiple}>
+            <MaterialIcon className={classNames(`icon`, label && 'withText')} icon={icon}/>
+            {label && <div>{label}</div>}
+        </Dropzone>
+    </section>
+);
+
+DropFileInput.defaultProps = {
+    icon: 'cloud_upload',
+    droppable: false,
+    multiple: true,
+};
+
+if (process.env.NODE_ENV !== 'production') {
+    DropFileInput.propTypes = {
+        icon: MaterialIcon.propTypes.icon,
+        label: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.element
+        ]),
+        droppable: PropTypes.bool,
+        onDrop: PropTypes.func,
+        multiple: PropTypes.bool,
+        accept: PropTypes.string,
+    };
+}
+
+
+export default DropFileInput;

package/src/DropFileInput.scss

@@ -0,0 +1,28 @@
+.DropFileInput {
+  flex-grow: 1;
+
+  .Dropzone {
+    border: 1px dashed #808080;
+    padding: 12px;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    align-items: center;
+    color: gray;
+    cursor: pointer;
+    border-radius: 3px;
+
+    font-weight: normal;
+    line-height: 22px;
+    font-size: 14px;
+
+    color: #7E7E7E;
+    max-width: 100%;
+    word-break: break-all;
+    word-break: break-word;
+
+    .icon.withText {
+      margin-right: 10px;
+    }
+  }
+}