ywana-core8 0.0.736 → 0.0.738

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.736",
+  "version": "0.0.738",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",

package/src/html/textfield.css

@@ -13,6 +13,10 @@
   padding-bottom: .5rem;
 }
 
+.textfield.label-left {
+  flex-direction: row-reverse;
+}
+
 .textfield > input {
   flex: 1;
   padding: 10px 10px 10px .5rem;
@@ -60,6 +64,14 @@
   -webkit-transition: 0.2s ease all;
 }
 
+.textfield.label-left > label {
+  position: relative;
+  margin-right: .5rem;
+  top: .3rem;
+  font-size: .8rem;
+  color: var(--primary-color);
+}
+
 .textfield > label .row .icon,
 .textfield-outlined > label .row .icon {
   width: 1.2rem;

package/src/html/textfield.js

@@ -12,7 +12,7 @@ import './textarea.css'
 export const TextField = (props) => {
 
     const site = useContext(SiteContext)
-    const { id, type = 'text', label, placeholder, value, outlined, readOnly = false, canClear = true, onChange, onEnter, onClick, onBlur } = props
+    const { id, type = 'text', label, labelPosition = 'top', placeholder, value, outlined, readOnly = false, canClear = true, onChange, onEnter, onClick, onBlur } = props
 
     function onKeyPress(event) {
         var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
@@ -48,7 +48,8 @@ export const TextField = (props) => {
 
     const borderStyle = outlined ? "textfield-outlined" : "textfield"
     const labelStyle = label ? "" : "no-label"
-    const style = `${labelStyle} ${borderStyle} textfield-${type}`
+    const labelPositionStyle = labelPosition == 'left' ? "label-left" : "label-top"
+    const style = `${labelStyle} ${labelPositionStyle} ${borderStyle} textfield-${type}`
     const labelTxt = <Text>{label}</Text>
 
     return (

package/src/html/textfield.test.js

@@ -6,7 +6,8 @@ import { DateRange } from './textfield'
 const TextFieldTest = (prop) => {
 
     const [form, setForm] = useState({
-        gender3: "3"
+        gender3: "3",
+        labelLeft: "xxxxx"
     })
 
     function change(id, value) {
@@ -31,16 +32,22 @@ const TextFieldTest = (prop) => {
 
     return (
         <>
-            <DropDown id="b1" label="Boolean1" onChange={change} options={options2} value={form.b1} />
+            <TextField id="labelLeft" labelPosition="left" label="Label Left"  value={form.labelLeft} onChange={change}/>
+            <TextField id="name" label="Name" value={form.name} onChange={change}/>
+            <br/>
+            <DropDown id="b1" label="Boolean1" labelPosition="left" onChange={change} options={options2} value={form.b1} />
+            <br/>
             <DropDown id="gender1" label="Dropdown 1" value={form.gender1} onChange={change} options={options} predictive={false}/>
             <DropDown id="gender2" label="Dropdown 2" value={form.gender2} onChange={change} options={options} predictive={true}/>
             <DropDown id="gender3" label="Dropdown 3" value={form.gender3} onChange={change} options={options} predictive={false} editable={true}/>
             <TokenField id="token1" label="Tokens" onChange={change} />
             <TokenField id="token2" label="Tokens DropDown" onChange={change} options={options} tokens={form.token2}/>
-            <TextField id="name" label="Name" value={form.name} onChange={change} />
+            <br/>
+            <br/>
             <TextArea id="text1" label="Text 1" value={form.text1} onChange={change} />
             <TextField id="date1" type="DATE" label="Date" value={form.date1} onChange={change} />
             <DateRange id="range1" value={form.range1} onChange={change}/>
+
         </>
     )
 }