ywana-core8 0.0.238 → 0.0.242

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.238",
+  "version": "0.0.242",
   "description": "ywana-core8",
   "author": "Ernesto Roldan Garcia",
   "license": "MIT",
@@ -31,6 +31,8 @@
   "dependencies": {
     "deep-equal": "^2.0.5",
     "material-design-icons-iconfont": "^6.1.1",
+    "moment": "^2.29.1",
+    "moment-range": "^4.0.2",
     "react-datepicker": "^4.6.0",
     "react-error-overlay": "^6.0.10",
     "react-notifications": "^1.7.3",

package/src/html/header.css

@@ -5,6 +5,7 @@
   align-items: center;
   background-repeat: no-repeat;
   background-size: cover;
+  overflow: visible;
 }
 
 .header>.icon .header>img {
@@ -50,7 +51,7 @@
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
-  overflow: vivsible;
+  overflow: visible;
 }
 
 .header.primary {

package/src/html/index.js

@@ -13,7 +13,7 @@ export { Section } from './section'
 export { Tabs, Tab, Stack } from './tab'
 export { DataTable } from './table'
 export { Text } from './text'
-export { TextField, DropDown } from './textfield'
+export { TextField, DropDown, TextArea } from './textfield'
 export { TokenField } from './tokenfield'
 export { Tree, TreeNode, TreeItem } from './tree'
 export { Switch } from './switch'

package/src/html/textarea.css

@@ -0,0 +1,158 @@
+.textarea {
+  flex: 1;
+  position: relative;
+  padding-top: 1.5rem;
+  overflow: hidden;
+  display: flex;
+  min-height: 3.5;
+}
+
+.textarea.no-label {
+  padding-top: .5rem;
+  padding-bottom: .5rem;
+}
+
+.textarea > textarea {
+  flex: 1;
+  padding: 10px 10px 10px .5rem;
+  display: block;
+  border: none;
+  border-bottom: 1px solid var(--divider-color);
+  overflow: hidden;
+  font-size: 1rem;
+  color: var(--text-color);
+  background-color: var(--paper-color);
+}
+
+.textarea > textarea:focus {
+  outline: none;
+}
+
+.textarea>.icon {
+  position: absolute;
+  top: 1.5rem;
+  right: .2rem;
+  color: rgba(150,150,150,1);
+}
+
+.textarea-date>.icon,
+.textarea-DATE>.icon {
+  right: 2.5rem;
+}
+
+.textarea > label {
+  color: var(--primary-color);
+  font-size: .9rem;
+  font-weight: normal;
+  position: absolute;
+  pointer-events: none;
+  left: .4rem;
+  top: 2rem;
+  transition: 0.2s ease all;
+  -moz-transition: 0.2s ease all;
+  -webkit-transition: 0.2s ease all;
+}
+
+textarea:read-only {
+  background-color: rgba(200,200,200,.1);
+  border: 0px !important;
+}
+
+.textarea textarea[type="date"] ~ label {
+    top: .3rem;
+    font-size: .8rem;
+    color: var(--primary-color);
+}
+
+/* active state */
+textarea:read-only ~ label,
+.textarea > textarea:focus ~ label,
+.textarea > textarea:valid ~ label {
+  top: .3rem;
+  font-size: .8rem;
+  color: var(--primary-color);
+}
+
+.textarea > .bar {
+  position: relative;
+  display: block;
+}
+
+.textarea > .bar:before,
+.textarea > .bar:after {
+  content: "";
+  height: 2px;
+  width: 0;
+  bottom: 1px;
+  position: absolute;
+  background: #5264ae;
+  transition: 0.2s ease all;
+  -moz-transition: 0.2s ease all;
+  -webkit-transition: 0.2s ease all;
+}
+
+.textarea > .bar:before {
+  left: 50%;
+}
+
+.textarea > .bar:after {
+  right: 50%;
+}
+
+/* active state */
+.textarea > textarea:focus ~ .bar:before,
+.textarea > textarea:focus ~ .bar:after {
+  width: 50%;
+}
+
+.dropdown {
+  position: relative;
+}
+
+.dropdown>.icon {
+  position: absolute;
+  top: 1.7rem;
+  right: .2rem;
+}
+
+.dropdown>.textarea>.icon,
+.dropdown>.textarea-outlined>.icon {
+  position: absolute;
+  top: 1.7rem;
+  right: 2rem;
+  color: rgba(150,150,150,1);
+}
+
+.dropdown>menu {
+  z-index: 11;
+  position: absolute;
+  top: 3.8rem;
+  left: 0px;
+  right: 0px;
+  margin: 0;
+  border: solid 1px var(--divider-color);
+  color: var(--text-color);
+  background-color: var(--paper-color);
+  padding: 0;
+  max-height: 20rem;
+  overflow: auto;
+}
+
+.dropdown>menu ul {
+  list-style: none;
+  margin: 0;
+  padding: .5rem 0;
+  cursor: pointer;
+}
+
+.dropdown>menu li {
+  min-height: 2rem;
+  padding: 0 .5rem;
+  display: flex;
+  align-items: center;
+  font-size: .9rem;
+}
+
+.dropdown>menu li:hover {
+  background-color: var(--primary-color-lighter);
+}

package/src/html/textfield.css

@@ -31,11 +31,16 @@
 
 .textfield>.icon {
   position: absolute;
-  top: 1.7rem;
+  top: 1.5rem;
   right: .2rem;
   color: rgba(150,150,150,1);
 }
 
+.textfield-date>.icon,
+.textfield-DATE>.icon {
+  right: 2.5rem;
+}
+
 .textfield > label {
   color: var(--primary-color);
   font-size: .9rem;
@@ -120,7 +125,7 @@ input:read-only ~ label,
 }
 
 .dropdown>menu {
-  z-index: 2;
+  z-index: 11;
   position: absolute;
   top: 3.8rem;
   left: 0px;

package/src/html/textfield.js

@@ -4,6 +4,7 @@ import { Icon } from './icon'
 import { Text } from './text'
 import './textfield-outlined.css'
 import './textfield.css'
+import './textarea.css'
 
 /**
  * Text Field
@@ -28,7 +29,7 @@ export const TextField = (props) => {
     }
 
     function focus() {
-        if (site) {
+        if (site && site.changeFocus) {
             site.changeFocus({
                 lose: () => {
                     // DO NOTHING
@@ -43,7 +44,7 @@ export const TextField = (props) => {
 
     const borderStyle = outlined ? "textfield-outlined" : "textfield"
     const labelStyle = label ? "" : "no-label"
-    const style = `${labelStyle} ${borderStyle}`
+    const style = `${labelStyle} ${borderStyle} textfield-${type}`
     const labelTxt = <Text>{label}</Text>
 
     return (
@@ -56,6 +57,59 @@ export const TextField = (props) => {
     )
 }
 
+
+/**
+ * Text Area
+ */
+ export const TextArea = (props) => {
+
+    const site = useContext(SiteContext)
+    const { id, type = 'text', label, placeholder, value, outlined, readOnly = false, canClear = true, onChange, onEnter, onClick } = props
+
+    function onKeyPress(event) {
+        var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
+        if (key == 13) {
+            if (onEnter) onEnter()
+        }
+    }
+
+    function change(event) {
+        event.stopPropagation()
+        event.preventDefault()
+        const value = event.target.value
+        console.log(value)
+        if (onChange) onChange(id, value)
+    }
+
+    function focus() {
+        if (site && site.changeFocus) {
+            site.changeFocus({
+                lose: () => {
+                    // DO NOTHING
+                }
+            })
+        }
+    }
+
+    function clear() {
+        if (onChange) onChange(id, "")
+    }
+
+    const labelStyle = label ? "" : "no-label"
+    const style = `textarea ${labelStyle} textarea-${type}`
+    const labelTxt = <Text>{label}</Text>
+
+    return (
+        <div className={`${style}`} onClick={onClick}>
+            <textarea id={id} placeholder={placeholder} value={value} required onChange={change} onKeyDown={onKeyPress} onFocus={focus} readOnly={readOnly} />
+            {!readOnly && canClear && value && value.length > 0 ? <Icon icon="close" clickable size="small" action={clear} /> : null }
+            <span className="bar"></span>
+            {label ? <label>{labelTxt}</label> : null}
+        </div>
+    )
+}
+
+
 /**
  * Dropdown
  */
@@ -83,7 +137,7 @@ export const DropDown = (props) => {
     }
 
     function toggle() {
-        if (site) {
+        if (site && site.changeFocus) {
             site.changeFocus({
                 lose: () => {
                     setOpen(false)

package/src/html/textfield.test.js

@@ -0,0 +1,21 @@
+import React, { useState } from 'react'
+import { DropDown, TextField, TextArea } from '.'
+import { Wrapper } from '../../__reactpreview__/Wrapper'
+
+const TextFieldTest = (prop) => {
+
+    const [form, setForm] = useState({})
+
+    function change(id, value) {
+        const next = Object.assign({}, form, { [id]: value })
+        setForm(next)
+    }
+
+    return (
+        <>
+            <TextArea id="text1" label="Text 1" value={form.text1} onChange={change}/>
+            <TextField id="date1" type="DATE" label="Date" value={form.date1} onChange={change}/>
+            <DropDown id="gender1" label="Gender" value={form.gender1} onChange={change} options={[ {label: "Male", value: "M"}, { label: "Female", value: "F" }]} /> 
+        </>
+    )
+}

package/src/site/page.css

@@ -11,6 +11,7 @@
     color: var(--page-menu-color);
     background-color: var(--page-menu-bgcolor);
     border-right: solid 1px var(--divider-color);
+    resize: horizontal;
 }
 
 .page6>header {

package/src/site/site.css

@@ -57,6 +57,7 @@
 .site6>main {
     grid-area: main;
     overflow: hidden;
+    resize: horizontal;
 }
 
 .site6>aside {

package/src/widgets/index.js

@@ -3,4 +3,5 @@ export * from './login/ResetPasswordBox'
 export * from './viewer/Viewer'
 export * from './kanban/Kanban'
 export * from './avatar/avatar'
-export * from './waiter'
+export * from './waiter'
+export * from './planner/Planner'

package/src/widgets/kanban/Kanban.test.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Kanban, KanbanCard, KanbanColumn } from './Kanban'
+
+const KanbanTest = (prop) => {
+    return (
+           <Kanban>
+               <KanbanColumn title="TODO">
+                    <KanbanCard />
+               </KanbanColumn>
+               <KanbanColumn title="IN PROGRESS">
+
+               </KanbanColumn>
+               <KanbanColumn title="DONE">
+                   
+               </KanbanColumn>
+           </Kanban>
+    )
+}

package/src/widgets/planner/Planner.css

@@ -0,0 +1,179 @@
+.planner-box {
+    flex:1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    border: solid 1px var(--divider-color);
+}
+
+.planner-box > header > label { 
+    min-width:13rem;
+}
+
+.planner {
+    flex: 1;
+    display: flex;
+    height: 70rem;
+    overflow-y: auto;
+    margin: 1rem;
+
+    --row-height: 8rem;
+    --column-width: 14rem;
+}
+
+.planner > .column0 {
+    position: sticky;
+    left: 0px;
+    z-index: 11;
+    background-color: var(--paper-color);
+    width: var(--column-width);
+    border-right: solid 1px var(--divider-color);
+}
+
+.column-header {
+    width: var(--column-width);
+    background-color: var(--paper-color);
+    height: 2.6rem;
+}
+
+.date-header {
+    display: flex;
+    padding: 0.5rem 1rem;
+    align-items: baseline;
+}
+
+.weekend {
+    background-color: rgb(245, 245, 245);
+}
+
+.month-header {
+    padding: 0.5rem 1rem;
+    border-top: solid 1px var(--divider-color);
+}
+
+.month-header>* {
+    display: none
+}
+
+.month-header.first {
+    border-left: solid 1px var(--divider-color);
+}
+
+.month-header.first>* {
+    display: block
+}
+
+.column0 > .column-header {
+    position: sticky;
+    top: 0px;
+    height: 6rem;
+    border-bottom: solid 1px var(--divider-color);
+    border-right: solid 1px var(--divider-color);
+}
+
+.row-header {
+    width: var(--column-width);
+    height: var(--row-height);
+    border-bottom: solid 1px var(--divider-color);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.planner > .rows {
+    flex: 1;
+}
+
+.planner .row {
+    height: var(--row-height);
+    border-bottom: solid 1px var(--divider-color);
+    display: flex;
+}
+
+.planner .row0 {
+    position: sticky;
+    top: 0px;
+    z-index: 10;
+    height: 3rem;
+    background-color: var(--paper-color);
+    border-bottom: solid 1px var(--divider-color);
+}
+
+.planner .row1 {
+    position: sticky;
+    top: 3rem;
+    z-index: 10;
+    height: 3rem;
+    background-color: var(--paper-color);
+    border-bottom: solid 1px var(--divider-color);
+}
+
+.planner .cell {
+    width: var(--column-width);
+    height: 100%;
+    padding: 0.5rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-right: dotted 1px var(--divider-color);
+}
+
+.photoshoot-icon {
+    border: solid 0px var(--divider-color);
+    border-radius: 4px;
+    flex: 1;
+    height: 100%;
+    padding: 0.5rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: rgba(200, 200, 200, 0.5);
+}
+
+.photoshoot-icon.dragOver {
+    background-color: rgba(225,225,250);
+}
+
+.photoshoot-card {
+    border: solid 1px var(--divider-color);
+    border-radius: 4px;
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.photoshoot-card > * {
+    background-color: #FFF;
+    opacity: .8;
+}
+
+.photoshoot-card > header {
+    padding:  0 0.5rem ;
+
+}
+
+.photoshoot-card > main {
+    padding:  0 0.5rem ;
+    flex: 1;
+}
+
+.photoshoot-card > footer {
+    display: flex;
+}
+
+.photoshoot-card.disabled {
+    opacity: 0.3;
+}
+
+.photoshoot-card:hover {
+    cursor: pointer;
+    box-shadow: var(--shadow1);
+}
+
+.expand {
+    flex: 1;
+}
+