react-ui-basics 0.0.176 → 0.0.177

package/index.js

@@ -3,6 +3,7 @@ import {clientHeight as __clientHeight, clientWidth as __clientWidth, createAcce
 export { default as Animated } from './Animated.js';
 export { default as AutocompleteSelect } from './AutocompleteSelect.js';
 export { default as Button } from './Button.js';
+export { default as CalendarMonthView } from './CalendarMonthView.js';
 export { default as Checkbox } from './Checkbox.js';
 export { default as CircleProgress } from './CircleProgress.js';
 import {toConsumableArray as __toConsumableArray} from "./_virtual/_rollupPluginBabelHelpers";
@@ -10,6 +11,9 @@ import {extends as __extends} from "./_virtual/_rollupPluginBabelHelpers";
 import {inherits as __inherits} from "./_virtual/_rollupPluginBabelHelpers";
 import * as CommonFields from './CommonFields.js';
 export { CommonFields };
+export { default as DatePicker } from './DatePicker.js';
+import * as DateTools from './DateTools.js';
+export { DateTools };
 export { default as Dialog } from './Dialog.js';
 export { default as DNDContainer } from './DNDContainer.js';
 export { default as DNDDraggable } from './DNDDraggable.js';

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-ui-basics",
-  "version": "0.0.176",
+  "version": "0.0.177",
   "description": "",
   "module": "index.js",
   "_main": "index.cjs.js",

package/src/CalendarMonthView.css

@@ -0,0 +1,20 @@
+.CalendarMonthView {
+  display: flex;
+  flex-flow: column nowrap;
+  height: 100%;
+}
+.CalendarMonthView > .row {
+  display: flex;
+  flex-flow: row nowrap;
+}
+.CalendarMonthView .days {
+  flex-grow: 1;
+  position: relative;
+}
+.CalendarMonthView .day, .CalendarMonthView .header {
+  flex-grow: 1;
+  flex-basis: 1px;
+}
+.CalendarMonthView .day {
+  height: 100%;
+}

package/src/CalendarMonthView.scss

@@ -0,0 +1,25 @@
+.CalendarMonthView {
+  display: flex;
+  flex-flow: column nowrap;
+  height: 100%;
+
+  > .row {
+    display: flex;
+    flex-flow: row nowrap;
+  }
+
+  .days {
+    flex-grow: 1;
+    position: relative;
+  }
+
+  .day, .header {
+    flex-grow: 1;
+    flex-basis: 1px;
+  }
+
+  .day {
+    height: 100%;
+  }
+
+}

package/src/CalendarMonthView.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import './CalendarMonthView.css'
+import * as DateTools from "./DateTools";
+import {classNames} from "./Tools";
+import {DateExtended} from "./DateTools";
+
+const daysOfWeek = [1, 2, 3, 4, 5, 6, 0];
+const rows = [1, 2, 3, 4, 5, 6];
+const TimeUnit = DateTools.TimeUnit;
+
+const defaultDayRenderer = (day) => <span className={'value'}>
+                            {DateTools.get(day, DateTools.TimeUnit.DAY)}
+                        </span>;
+
+interface CalendarMonthViewProps {
+    className?: string,
+    dayOfWeekToString: (day: number) => string | JSX.Element,
+    dayRenderer: (day: DateExtended, defaultRenderer: (day: DateExtended) => JSX.Element, row: number, column: number) => string | JSX.Element,
+    selectedDate?: Date,
+    monthOf?: Date,
+}
+
+const CalendarMonthView = ({className, dayOfWeekToString, selectedDate, monthOf, dayRenderer}: CalendarMonthViewProps) => {
+    const today = DateTools.now();
+
+    const currentDay = today.get(TimeUnit.DAY);
+    const currentMonth = today.get(TimeUnit.MONTH);
+    const currentYear = today.get(TimeUnit.YEAR);
+
+    const selected = selectedDate && DateTools.dateOf(selectedDate);
+
+    const selectedDay = selected && selected.get(TimeUnit.DAY);
+    const selectedMonth = selected && selected.get(TimeUnit.MONTH);
+    const selectedYear = selected && selected.get(TimeUnit.YEAR);
+
+    const showMonth = DateTools.dateOf(monthOf).get(TimeUnit.MONTH);
+
+    const startOfMonth = DateTools.dateOf(monthOf || today);
+    startOfMonth.subtract(startOfMonth.get(TimeUnit.DAY) - 1, TimeUnit.DAY);
+
+    let shiftToStart;
+    if (startOfMonth.getDay() === 0) {
+        shiftToStart = 6;
+    } else if (startOfMonth.getDay() === 1) {
+        shiftToStart = 7;
+    } else {
+        shiftToStart = startOfMonth.getDay() - 1;
+    }
+    const theDay = DateTools.dateOf(startOfMonth).subtract(shiftToStart, TimeUnit.DAY).resetTime();
+
+    return <div className={classNames('CalendarMonthView', className)}>
+        <div className={'headers row'}>
+            {daysOfWeek.map(i => <div key={i} className={classNames('header',
+                (i === 6 || i === 0) && 'weekend'
+            )}>{dayOfWeekToString(i)}</div>)}
+        </div>
+        {rows.map((_, row) => <div key={row} className={'days row'}>
+            {daysOfWeek.map((_, cell) => {
+                const day = DateTools.get(theDay, DateTools.TimeUnit.DAY);
+                const month = DateTools.get(theDay, DateTools.TimeUnit.MONTH);
+                const year = DateTools.get(theDay, DateTools.TimeUnit.YEAR);
+                const dayOfWeek = theDay.getDay();
+
+                const rendered = <div key={(cell + 1) * (row + 1)} className={classNames('day',
+                    month !== showMonth && 'notSelectedMonth',
+                    day === currentDay && month === currentMonth && year === currentYear && 'today',
+                    day === selectedDay && month === selectedMonth && year === selectedYear && 'selected',
+                    (dayOfWeek === 6 || dayOfWeek === 0) && 'weekend'
+                )}>
+                    {!dayRenderer && defaultDayRenderer(theDay)}
+                    {dayRenderer && dayRenderer(theDay, defaultDayRenderer, row, cell)}
+                </div>;
+
+                theDay.add(1, DateTools.TimeUnit.DAY);
+                return rendered;
+            })}
+        </div>)}
+    </div>
+};
+export default CalendarMonthView

package/src/DatePicker.css

@@ -0,0 +1,93 @@
+.DatePicker {
+  position: relative;
+}
+.DatePicker > .TextField {
+  width: 200px;
+  margin-bottom: 0px;
+}
+.DatePicker > .TextField input {
+  text-align: center;
+}
+.DatePicker .calendar {
+  user-select: none;
+  position: absolute;
+  top: 33px;
+  z-index: 10;
+  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+  transition: 0.2s all ease;
+  opacity: 0;
+  visibility: hidden;
+}
+.DatePicker .calendar.focused {
+  opacity: 1;
+  visibility: visible;
+}
+.DatePicker .monthSelect {
+  margin-bottom: 0;
+  background: white;
+  font-size: 12px;
+  color: #aaaaaa;
+  padding-right: 16px;
+  padding-left: 16px;
+  height: 40px;
+}
+.DatePicker .monthSelect span {
+  margin-right: auto;
+}
+.DatePicker .monthSelect .Button {
+  min-width: 25px;
+  min-height: 25px;
+}
+.DatePicker .monthSelect .Button .material-icons {
+  font-size: 16px;
+}
+.DatePicker .monthSelect .Button.disabled {
+  background: transparent;
+}
+.DatePicker .CalendarMonthView {
+  background: white;
+}
+.DatePicker .CalendarMonthView .headers, .DatePicker .CalendarMonthView .days {
+  margin-bottom: 0;
+}
+.DatePicker .CalendarMonthView .header {
+  font-size: 12px;
+  font-weight: bold;
+  text-align: center;
+  text-transform: uppercase;
+  margin: 5px;
+}
+.DatePicker .CalendarMonthView .day {
+  font-size: 10px;
+}
+.DatePicker .CalendarMonthView .day.notSelectedMonth {
+  color: #969696;
+}
+.DatePicker .CalendarMonthView .day span {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  width: 25px;
+  height: 25px;
+  margin: 5px;
+  transition: 0.2s all ease;
+  cursor: pointer;
+}
+.DatePicker .CalendarMonthView .day span:hover {
+  background-color: #e6e6e6;
+}
+.DatePicker .CalendarMonthView .day span.inactive {
+  color: lightgray;
+  cursor: unset;
+}
+.DatePicker .CalendarMonthView .day span.inactive:hover {
+  background: unset;
+}
+.DatePicker .CalendarMonthView .day span.selected {
+  color: white;
+  background-color: #2196F3;
+}
+.DatePicker .CalendarMonthView .day span.selected:hover {
+  background-color: #51adf6;
+}

package/src/DatePicker.scss

@@ -0,0 +1,118 @@
+@import "./global.scss";
+
+.DatePicker {
+  position: relative;
+
+  > .TextField {
+    width: 200px;
+    margin-bottom: 0px;
+
+    input {
+      text-align: center;
+    }
+  }
+
+  .calendar {
+    user-select: none;
+    position: absolute;
+    top: 33px;
+    z-index: 10;
+    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+
+    transition: 0.2s all ease;
+    opacity: 0;
+    visibility: hidden;
+
+    &.focused {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+
+  .monthSelect {
+    margin-bottom: 0;
+    background: white;
+    font-size: 12px;
+    color: rgb(170, 170, 170);
+    padding-right: 16px;
+    padding-left: 16px;
+    height: 40px;
+
+    span {
+      margin-right: auto;
+    }
+
+    .Button {
+      min-width: 25px;
+      min-height: 25px;
+
+      .material-icons {
+        font-size: 16px;
+      }
+
+      &.disabled {
+        background: transparent;
+      }
+    }
+  }
+
+  .CalendarMonthView {
+    background: white;
+
+    .headers, .days {
+      margin-bottom: 0;
+    }
+
+    .header {
+      font-size: 12px;
+      font-weight: bold;
+      text-align: center;
+      text-transform: uppercase;
+      margin: 5px;
+    }
+
+    .day {
+      font-size: 10px;
+
+      &.notSelectedMonth {
+        color: #969696;
+      }
+
+      span {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 50%;
+        width: 25px;
+        height: 25px;
+        margin: 5px;
+        transition: 0.2s all ease;
+
+        cursor: pointer;
+
+        &:hover {
+          background-color: #e6e6e6;
+        }
+
+        &.inactive {
+          color: lightgray;
+          cursor: unset;
+
+          &:hover {
+            background: unset;
+          }
+        }
+
+        &.selected {
+          color: white;
+          background-color: $colorBlue;
+
+          &:hover {
+            background-color: lighten($colorBlue, 10%);
+          }
+        }
+      }
+    }
+  }
+}

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/index.js

@@ -6,9 +6,12 @@ import {extends as __extends} from "./../_virtual/_rollupPluginBabelHelpers";
 import {inherits as __inherits} from "./../_virtual/_rollupPluginBabelHelpers";
 import AutocompleteSelect from "./AutocompleteSelect";
 import Button from "./Button";
+import CalendarMonthView from "./CalendarMonthView";
 import Checkbox from "./Checkbox";
 import CircleProgress from "./CircleProgress";
 import * as CommonFields from "./CommonFields";
+import DatePicker from "./DatePicker";
+import * as DateTools from "./DateTools";
 import Dialog from "./Dialog";
 import DNDContainer from "./DNDContainer";
 import DNDDraggable from "./DNDDraggable";
@@ -43,9 +46,12 @@ export {
     Animated,
     AutocompleteSelect,
     Button,
+    CalendarMonthView,
     Checkbox,
     CircleProgress,
     CommonFields,
+    DatePicker,
+    DateTools,
     Dialog,
     DNDContainer,
     DNDDraggable,