ywana-core8 0.0.178 → 0.0.182
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/__reactpreview__/Wrapper.tsx +14 -0
- package/dist/index.cjs +3 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.modern.js +3 -2
- package/dist/index.modern.js.map +1 -1
- package/dist/index.umd.js +3 -2
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/reactpreview.config.js +37 -0
- package/src/domain/ContentEditor.js +8 -3
- package/src/html/button.js +16 -2
- package/src/html/button.tsx +38 -0
- package/src/test.js +5 -0
package/package.json
CHANGED
@@ -0,0 +1,37 @@
|
|
1
|
+
const reactpreview = require("@reactpreview/config");
|
2
|
+
|
3
|
+
module.exports = reactpreview.config({
|
4
|
+
/**
|
5
|
+
* Configure custom aliases (auto-detected if you use TypeScript).
|
6
|
+
*/
|
7
|
+
alias: {
|
8
|
+
foo: "src/foo"
|
9
|
+
},
|
10
|
+
|
11
|
+
/**
|
12
|
+
* Configure a public assets directory.
|
13
|
+
*/
|
14
|
+
publicDir: "public",
|
15
|
+
|
16
|
+
/**
|
17
|
+
* Set up a custom component to wrap around previewed components.
|
18
|
+
*
|
19
|
+
* Useful to set up context providers and CSS dependencies.
|
20
|
+
*/
|
21
|
+
wrapper: {
|
22
|
+
path: "src/ReactPreviewWrapper.js",
|
23
|
+
componentName: "Wrapper"
|
24
|
+
},
|
25
|
+
|
26
|
+
/**
|
27
|
+
* Customise the exported React component name for SVG files.
|
28
|
+
*/
|
29
|
+
svgr: {
|
30
|
+
componentName: "default"
|
31
|
+
},
|
32
|
+
|
33
|
+
/**
|
34
|
+
* Specify a custom Vite configuration.
|
35
|
+
*/
|
36
|
+
vite: vite.UserConfig;
|
37
|
+
});
|
@@ -70,6 +70,8 @@ export const TabbedContentEditor = ({ content, filter, grouped = false, onChange
|
|
70
70
|
|
71
71
|
const sections = content.sections()
|
72
72
|
|
73
|
+
console.log("TabbedContentEditor",sections)
|
74
|
+
|
73
75
|
return (
|
74
76
|
<div className='content-editor tabbed'>
|
75
77
|
<Tabs selected={tab} onChange={changeTab}>
|
@@ -175,7 +177,7 @@ export const FieldEditor = ({ field, onChange, content, outlined = false }) => {
|
|
175
177
|
}
|
176
178
|
|
177
179
|
function renderField() {
|
178
|
-
const value1 = field.value ? field.value : field.default
|
180
|
+
const value1 = field.value || field.value === "" ? field.value : field.default
|
179
181
|
const isHidden = CHECK['isFunction'](hidden) ? hidden(field, value1) : hidden
|
180
182
|
if (isHidden) {
|
181
183
|
return null
|
@@ -237,7 +239,7 @@ const EntityEditor = ({ field, value = {}, onChange }) => {
|
|
237
239
|
* String Editor
|
238
240
|
*/
|
239
241
|
export const StringEditor = ({ field, value = '', onChange, content, outlined }) => {
|
240
|
-
const { id, format, label, options, editable = true, predictive = false } = field
|
242
|
+
const { id, format, label, options, editable = true, predictive = false, Editor } = field
|
241
243
|
|
242
244
|
function change(id, value) {
|
243
245
|
if (onChange) onChange(id, value)
|
@@ -250,6 +252,9 @@ export const StringEditor = ({ field, value = '', onChange, content, outlined })
|
|
250
252
|
|
251
253
|
return (
|
252
254
|
<div className='field-editor string-editor'>
|
255
|
+
|
256
|
+
{ format === FORMATS.HTML ? <Editor value={value}/> }
|
257
|
+
|
253
258
|
{
|
254
259
|
format === FORMATS.DATE ? <TextField outlined={outlined} id={id} type="date" label={label} value={value} onChange={change} readOnly={!editable} /> :
|
255
260
|
options ? <DropDown outlined={outlined} id={id} label={label} value={value} onChange={change} options={buildOptions()} readOnly={!editable} canFilter={predictive} /> :
|
@@ -269,7 +274,7 @@ const NumberEditor = ({ field, value, onChange, outlined = false }) => {
|
|
269
274
|
if (onChange) onChange(id, value)
|
270
275
|
}
|
271
276
|
|
272
|
-
const val = value || field.default
|
277
|
+
const val = value || value ==="" ? value : field.default
|
273
278
|
const min = field.min
|
274
279
|
const max = field.max
|
275
280
|
const disabled = !editable
|
package/src/html/button.js
CHANGED
@@ -1,6 +1,7 @@
|
|
1
1
|
import React from 'react'
|
2
|
-
import
|
2
|
+
import { preview } from "@reactpreview/config";
|
3
3
|
import { Icon } from './icon'
|
4
|
+
import './button.css'
|
4
5
|
|
5
6
|
/**
|
6
7
|
* HTML Button
|
@@ -23,4 +24,17 @@ export const Button = ({ label, icon, action, disabled = false, outlined, raised
|
|
23
24
|
<span>{ label }</span>
|
24
25
|
</button>
|
25
26
|
)
|
26
|
-
}
|
27
|
+
}
|
28
|
+
|
29
|
+
preview(Button, {
|
30
|
+
example1: {
|
31
|
+
label: "OK",
|
32
|
+
raised: true,
|
33
|
+
action: () => alert('click')
|
34
|
+
},
|
35
|
+
example2: {
|
36
|
+
label: "CANCEL",
|
37
|
+
outlined: true,
|
38
|
+
action: () => alert('click')
|
39
|
+
}
|
40
|
+
})
|
@@ -0,0 +1,38 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import './button.css'
|
3
|
+
import { Icon } from './icon'
|
4
|
+
|
5
|
+
|
6
|
+
interface Button2Props {
|
7
|
+
label: String
|
8
|
+
icon: String
|
9
|
+
action: () => {},
|
10
|
+
disabled: Boolean,
|
11
|
+
outlined: Boolean,
|
12
|
+
raised: Boolean
|
13
|
+
}
|
14
|
+
|
15
|
+
/**
|
16
|
+
* HTML Button
|
17
|
+
*/
|
18
|
+
export const Button2 = (props: Button2Props) => {
|
19
|
+
|
20
|
+
const { label,icon, action, disabled, outlined, raised} = props
|
21
|
+
|
22
|
+
function click(event) {
|
23
|
+
if (!disabled) {
|
24
|
+
event.stopPropagation();
|
25
|
+
event.preventDefault();
|
26
|
+
if (action) action()
|
27
|
+
}
|
28
|
+
}
|
29
|
+
|
30
|
+
let style = raised ? 'raised' : outlined ? 'outlined' : 'normal'
|
31
|
+
if (disabled) style = `${style} disabled`
|
32
|
+
return (
|
33
|
+
<button className={`btn ${style}`} onClick={click}>
|
34
|
+
{ icon ? <Icon icon={icon} size="small" clickable action={click} /> : null }
|
35
|
+
<span>{ label }</span>
|
36
|
+
</button>
|
37
|
+
)
|
38
|
+
}
|