react-ui-basics 0.0.177 → 0.0.179

package/package.json

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

package/src/DateTools.ts

@@ -17,6 +17,9 @@ export const min = (a: Date, b: Date) => {
     return timeOf(a) < timeOf(b) ? a : b;
 };
 
+// todo: add formatter base on
+//https://stevenlevithan.com/assets/misc/date.format.js
+
 export class TimeUnit {
     static MILLISECOND = new TimeUnit('Milliseconds');
     static SECOND = new TimeUnit('Seconds');

package/src/Table.tsx

@@ -29,7 +29,7 @@ export interface RowProps<T> {
     cancelEditing: () => void,
     onFinishEditing: () => void,
     handleInputChange: (e: ChangeEvent) => void,
-    setValue: (v: any) => void,
+    setValue: (v: any, t: T, field: String) => void,
     setEditing: (t: T, i: number, value?: any) => void,
     onMouseDown?: (e: SyntheticEvent, row: number, column: number) => void,
     onMouseUp?: (e: SyntheticEvent, row: number, column: number) => void,
@@ -147,8 +147,8 @@ class Table<T> extends Component<TableProps<T>, TableState<T>> {
         };
         this.finishEditing = onFinishEditing
 
-        const setValue = (value) => {
-            editingState({...editingState(), value}, onFinishEditing)
+        const setValue = (value, item, field) => {
+            editingState({item, field, value}, onFinishEditing)
         };
 
 
@@ -332,8 +332,12 @@ class Row<T> extends PureComponent<RowProps<T>> {
                                 selectedMode={'inline'}
                                 selectedComponent={(column as TableColumnSelect).editorSelectedComponent}
                                 mode={(column as TableColumnSelect).multiSelect ? MODE_MULTIPLE_MINI : MODE_DEFAULT}
-                                onChange={(column as TableColumnSelect).multiSelect && ((column as TableColumnSelect).onSelect ? (value => setValue((column as TableColumnSelect).onSelect(value))) : setValue)}
-                                onSelect={!(column as TableColumnSelect).multiSelect && ((column as TableColumnSelect).onSelect ? (value => setValue((column as TableColumnSelect).onSelect(value))) : setValue)}
+                                onChange={(column as TableColumnSelect).multiSelect && ((column as TableColumnSelect).onSelect ? (value => {
+                                    setValue((column as TableColumnSelect).onSelect(value), item, column.field);
+                                }) : value => setValue(value, item, column.field))}
+                                onSelect={!(column as TableColumnSelect).multiSelect && ((column as TableColumnSelect).onSelect ? (value => {
+                                    setValue((column as TableColumnSelect).onSelect(value), item, column.field);
+                                }) : value => setValue(value, item, column.field))}
                                 childComponent={(column as TableColumnSelect).editorChildCompononent}
                                 onCancel={cancelEditing}
                                 prefilter={(column as TableColumnSelect).prefilter}
@@ -343,7 +347,7 @@ class Row<T> extends PureComponent<RowProps<T>> {
                             <Switch onClick={e => {
                                 stopPropagation(e);
                                 preventDefault(e);
-                                setValue(!value)
+                                setValue(!value, item, column.field)
                             }} value={value}/>
                         )}
                         {displayEditor && isFunction(column.editor)

package/src/Tabs.css

@@ -0,0 +1,65 @@
+.Tabs {
+  display: block;
+  padding: 16px;
+  background: #fff;
+}
+.Tabs .visible {
+  position: relative;
+  opacity: 1;
+  height: auto;
+  transition: opacity 0.5s ease-out 0.25s;
+}
+.Tabs .hidden {
+  left: 0;
+  top: 0;
+  position: absolute;
+  opacity: 0;
+  transition: opacity 0.25s ease-out 0s, transform 1ms linear 0.25s;
+  transform: scale(0);
+}
+.Tabs .contents {
+  position: relative;
+}
+.Tabs .selector {
+  padding: 0;
+  margin: 0;
+  margin-bottom: 10px;
+  display: flex;
+  flex-flow: row nowrap;
+  position: relative;
+}
+.Tabs .selector .tab {
+  display: block;
+  height: 32px;
+  line-height: 32px;
+  padding: 0px 16px;
+  text-align: center;
+  background: #fff;
+  font-weight: bold;
+  text-decoration: none;
+  color: black;
+  font-size: 14px;
+  white-space: nowrap;
+}
+.Tabs .selector .tab.active {
+  color: #2196F3;
+}
+.Tabs .selector a:first-child {
+  border-top-left-radius: 2px;
+}
+.Tabs .selector a:last-of-type {
+  border-top-right-radius: 2px;
+}
+.Tabs .highlighter {
+  position: absolute;
+  z-index: 10;
+  bottom: 0;
+  height: 2px;
+  background: #2196F3;
+  width: 1px;
+  transform: translateX(0);
+  transform-origin: top left;
+  display: block;
+  left: 0;
+  transition: transform 0.23s ease-out;
+}

package/src/Tabs.scss

@@ -0,0 +1,77 @@
+@import "./global.scss";
+
+.Tabs {
+  $main-size: 16px;
+
+  display: block;
+  padding: $main-size;
+  background: #fff;
+
+  .visible {
+    position: relative;
+    opacity: 1;
+    height: auto;
+    transition: opacity .5s ease-out 0.25s;
+  }
+  .hidden {
+    left: 0;
+    top: 0;
+    position: absolute;
+    opacity: 0;
+    transition: opacity .25s ease-out 0s, transform 1ms linear 0.25s;
+    transform: scale(0);
+  }
+
+  .contents {
+    position: relative;
+  }
+
+  .selector {
+    padding: 0;
+    margin: 0;
+    margin-bottom: 10px;
+    display: flex;
+    flex-flow: row nowrap;
+    position: relative;
+
+    .tab {
+      display: block;
+      height: $main-size*2;
+      line-height: $main-size*2;
+      padding: 0px 16px;
+      text-align: center;
+      background: #fff;
+      font-weight: bold;
+      text-decoration: none;
+      color: black;
+      font-size: 14px;
+      white-space: nowrap;
+
+      &.active {
+        color: $colorBlue;
+      }
+    }
+
+    a:first-child {
+      border-top-left-radius: 2px;
+    }
+    a:last-of-type {
+      border-top-right-radius: 2px;
+    }
+  }
+
+  .highlighter {
+    position: absolute;
+    z-index: 10;
+    bottom: 0;
+    height: 2px;
+    background: $colorBlue;
+    width: 1px;
+    transform: translateX(0);
+    transform-origin: top left;
+    display: block;
+    left: 0;
+    transition: transform .23s ease-out;
+  }
+
+}

package/src/Tabs.tsx

@@ -0,0 +1,63 @@
+import React, {PureComponent} from "react";
+import "./Tabs.css";
+import {classNames} from "./Tools";
+
+export interface Tab {
+    label: string | JSX.Element
+    className?: string
+    renderer: (active: boolean) => JSX.Element
+}
+
+export interface TabsProps {
+    tabs: Tab[]
+}
+
+interface TabsState {
+    active: number,
+    highlighterPosition: number,
+    highlighterWidth: number,
+}
+
+class Tabs extends PureComponent<TabsProps, TabsState> {
+    private selector: HTMLDivElement;
+
+    render() {
+        const {tabs} = this.props;
+        const {active = 0, highlighterPosition = 0, highlighterWidth = 0} = this.state || {};
+        return (<div className="Tabs">
+                <div className="selector" ref={el => this.selector = el}>
+                    {tabs.map((tab, i) => <a key={i}
+                                             className={classNames(`tab `, i === active && 'active', tab.className)}
+                                             href="#"
+                                             onClick={this.openTab}>
+                        {tab.label}
+                    </a>)}
+                    <span className="highlighter" style={{transform: `translateX(${highlighterPosition}px) scale(${highlighterWidth},1)`}}/>
+                </div>
+                <div className="contents">
+                    {tabs.map((tab, i) => <div key={i} className={`content ${i === active ? 'visible' : 'hidden'}`}>{tab.renderer(i === active)}</div>)}
+                </div>
+            </div>
+        );
+    }
+
+    openTab = (e) => {
+        e.preventDefault();
+        let i = 0;
+        let child = e.target;
+        while ((child = child.previousSibling) != null) i++;
+
+        this.setState({active: i, highlighterPosition: e.target.offsetLeft, highlighterWidth: e.target.offsetWidth});
+    };
+
+    componentDidMount() {
+        const selected = this.selector.childNodes[0] as HTMLElement;
+        this.setState({active: 0, highlighterPosition: selected.offsetLeft, highlighterWidth: selected.offsetWidth});
+    }
+}
+
+export default Tabs;
+
+
+
+