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/dist/index.cjs +278 -9
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +207 -3
- package/dist/index.css.map +1 -1
- package/dist/index.modern.js +278 -11
- package/dist/index.modern.js.map +1 -1
- package/dist/index.umd.js +280 -13
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/html/property.css +21 -3
- package/src/html/property.js +19 -3
- package/src/html/property.test.js +23 -0
- package/src/html/textfield.js +3 -3
- package/src/html/textfield.test.js +12 -4
- package/src/site/page.css +1 -0
- package/src/site/site.css +1 -0
- package/src/widgets/index.js +2 -1
- package/src/widgets/login/LoginBox.test.js +11 -0
package/package.json
CHANGED
package/src/html/property.css
CHANGED
@@ -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
|
-
|
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
|
-
|
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
|
}
|
package/src/html/property.js
CHANGED
@@ -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=
|
24
|
+
<div className={`property property-${id} ${className}`}>
|
13
25
|
<div className="property-name">{name || label}</div>
|
14
|
-
<div className=
|
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
|
+
}
|
package/src/html/textfield.js
CHANGED
@@ -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,
|
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 (
|
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 =
|
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, {
|
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
|
-
<
|
17
|
-
<
|
18
|
-
<
|
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
package/src/site/site.css
CHANGED
package/src/widgets/index.js
CHANGED