ywana-core8 0.0.239 → 0.0.240

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.239",
+  "version": "0.0.240",
   "description": "ywana-core8",
   "author": "Ernesto Roldan Garcia",
   "license": "MIT",

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.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
@@ -56,6 +57,58 @@ 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
+        if (onChange) onChange(id, value)
+    }
+
+    function focus() {
+        if (site) {
+            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
  */

package/src/html/textfield.test.js

@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
-import { DropDown, TextField } from '.'
+import { DropDown, TextField, TextArea } from '.'
 import { Wrapper } from '../../__reactpreview__/Wrapper'
 
-const KanbanTest = (prop) => {
+const TextFieldTest = (prop) => {
 
     const [form, setForm] = useState({})
 
@@ -13,9 +13,9 @@ const KanbanTest = (prop) => {
 
     return (
         <>
-           <TextField id="date1" type="DATE" label="Date" value={form.date1} onChange={change}/>
-           <div/>
-           <DropDown id="gender1" label="Gender" value={form.gender1} onChange={change} options={[ {label: "Male", value: "M"}, { label: "Female", value: "F" }]} /> 
+            <TextArea id="text1" label="Text 1" value="Lorem ipsum dolor sit amet..." 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" }]} /> 
         </>
     )
 }