ywana-core8 0.0.241 → 0.0.245

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ywana-core8",
3
- "version": "0.0.241",
3
+ "version": "0.0.245",
4
4
  "description": "ywana-core8",
5
5
  "author": "Ernesto Roldan Garcia",
6
6
  "license": "MIT",
@@ -1,6 +1,8 @@
1
1
  .property {
2
2
  flex:1;
3
+ max-height: 3rem;
3
4
  display: flex;
5
+ flex-direction: row;
4
6
  }
5
7
 
6
8
  .property-name {
@@ -8,8 +10,9 @@
8
10
  overflow: hidden;
9
11
  text-overflow: ellipsis;
10
12
  white-space: nowrap;
11
- padding: .5rem 0 .5rem .5rem;
12
-
13
+ display: flex;
14
+ align-items: center;
15
+ padding: .5rem;
13
16
  }
14
17
 
15
18
  .property-value {
@@ -17,5 +20,20 @@
17
20
  overflow: hidden;
18
21
  text-overflow: ellipsis;
19
22
  white-space: nowrap;
20
- padding: .5rem .5rem .5rem 0
23
+ display: flex;
24
+ align-items: center;
25
+ position: relative;
26
+ }
27
+
28
+ .property-value>input {
29
+ width: 100%;
30
+ height: 100%;
31
+ border: solid 0px;
32
+ background-color: rgba(240,240,240,.5);
33
+ padding: .5rem;
34
+ }
35
+
36
+ .property-value>.icon {
37
+ position: absolute;
38
+ right: .5rem;
21
39
  }
@@ -1,4 +1,5 @@
1
1
  import React from 'react'
2
+ import { Icon } from './icon'
2
3
  import './property.css'
3
4
 
4
5
  /**
@@ -6,12 +7,27 @@ import './property.css'
6
7
  */
7
8
  export const Property = (props) => {
8
9
 
9
- const { label, name, value} = props
10
+ const { id, className, label, name, initial, value, editable = false, onChange } = props
11
+
12
+ function change(event) {
13
+ if (onChange) {
14
+ const value = event.target.value
15
+ onChange(id, value)
16
+ }
17
+ }
18
+
19
+ function clear() {
20
+ if (onChange) onChange(id, "")
21
+ }
10
22
 
11
23
  return (
12
- <div className="property">
24
+ <div className={`property property-${id} ${className}`}>
13
25
  <div className="property-name">{name || label}</div>
14
- <div className="property-value">{value}</div>
26
+ { initial ? <div className='property-value'>{initial}</div> : null}
27
+ <div className="property-value">
28
+ {editable ? <input type="text" value={value} onChange={change}/> : value}
29
+ {editable && value.length > 0 ? <Icon icon="close" size="small" clickable action={clear} /> : null }
30
+ </div>
15
31
  </div>
16
32
  )
17
33
  }
@@ -0,0 +1,23 @@
1
+ import React, { useState } from 'react'
2
+ import { FORMATS } from '../domain/ContentType'
3
+ import { Property } from './property'
4
+
5
+ const PropertyTest = (prop) => {
6
+
7
+ const [form, setForm] = useState({
8
+ name: 'John',
9
+ address: 'Porto Colon'
10
+ })
11
+
12
+ function change(id, value) {
13
+ const next = Object.assign({}, form, { [id] : value })
14
+ setForm(next)
15
+ }
16
+
17
+ return (
18
+ <>
19
+ <Property id="name" label="Name" initial="John" value={form.name} editable={true} onChange={change}/>
20
+ <Property id="address" label="Address" initial="Porto Colon" value={form.address} editable={true} onChange={change}/>
21
+ </>
22
+ )
23
+ }
@@ -116,7 +116,7 @@ export const TextField = (props) => {
116
116
  export const DropDown = (props) => {
117
117
 
118
118
  const site = useContext(SiteContext)
119
- const { id, options = [], value, onChange, canFilter = false, readOnly = false } = props
119
+ const { id, options = [], value, onChange, predictive = false, readOnly = false } = props
120
120
  const [open, setOpen] = useState(false)
121
121
  const [label, setLabel] = useState()
122
122
 
@@ -129,7 +129,7 @@ export const DropDown = (props) => {
129
129
  }, [value])
130
130
 
131
131
  function change(id, value) {
132
- if (canFilter) {
132
+ if (predictive) {
133
133
  setLabel(value)
134
134
  } else {
135
135
  if (onChange) onChange(id, value)
@@ -158,7 +158,7 @@ export const DropDown = (props) => {
158
158
  function renderOptions() {
159
159
  const canShow = open == true && Array.isArray(options)
160
160
  if (canShow) {
161
- const filterActive = canFilter === true && label && label.length > 0
161
+ const filterActive = predictive === true && label && label.length > 0
162
162
  const items = filterActive ? options.filter(option => option.label.toUpperCase().indexOf(label.toUpperCase()) >= 0) : options
163
163
  const lis = items.map(option => <li key={option.value} value={option.value}>{option.label}</li>)
164
164
  return <menu><ul onClick={select}>{lis}</ul></menu>
@@ -7,15 +7,23 @@ const TextFieldTest = (prop) => {
7
7
  const [form, setForm] = useState({})
8
8
 
9
9
  function change(id, value) {
10
- const next = Object.assign({}, form, { [id]: value })
10
+ const next = Object.assign({}, form, { [id]: value })
11
11
  setForm(next)
12
12
  }
13
13
 
14
+ const options = [
15
+ { label: "One", value: "1" },
16
+ { label: "Two", value: "2" },
17
+ { label: "Three", value: "3" },
18
+ { label: "Four", value: "4" },
19
+ { label: "Five", value: "5" },
20
+ ]
21
+
14
22
  return (
15
23
  <>
16
- <TextArea id="text1" label="Text 1" value={form.text1} onChange={change}/>
17
- <TextField id="date1" type="DATE" label="Date" value={form.date1} onChange={change}/>
18
- <DropDown id="gender1" label="Gender" value={form.gender1} onChange={change} options={[ {label: "Male", value: "M"}, { label: "Female", value: "F" }]} />
24
+ <DropDown id="gender1" label="Dropdown" value={form.gender1} onChange={change} options={options} predictive={true}/>
25
+ <TextArea id="text1" label="Text 1" value={form.text1} onChange={change} />
26
+ <TextField id="date1" type="DATE" label="Date" value={form.date1} onChange={change} />
19
27
  </>
20
28
  )
21
29
  }
package/src/site/page.css CHANGED
@@ -11,6 +11,7 @@
11
11
  color: var(--page-menu-color);
12
12
  background-color: var(--page-menu-bgcolor);
13
13
  border-right: solid 1px var(--divider-color);
14
+ resize: horizontal;
14
15
  }
15
16
 
16
17
  .page6>header {
package/src/site/site.css CHANGED
@@ -57,6 +57,7 @@
57
57
  .site6>main {
58
58
  grid-area: main;
59
59
  overflow: hidden;
60
+ resize: horizontal;
60
61
  }
61
62
 
62
63
  .site6>aside {
@@ -3,4 +3,5 @@ export * from './login/ResetPasswordBox'
3
3
  export * from './viewer/Viewer'
4
4
  export * from './kanban/Kanban'
5
5
  export * from './avatar/avatar'
6
- export * from './waiter'
6
+ export * from './waiter'
7
+ export * from './planner/Planner'
@@ -0,0 +1,11 @@
1
+ import React from 'react'
2
+ import { LoginBox } from './LoginBox'
3
+
4
+ const LoginBoxTest = (prop) => {
5
+
6
+ return (
7
+
8
+ <LoginBox />
9
+
10
+ )
11
+ }