@mirai/core 0.1.93 → 0.1.95
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/README.md +25 -14
- package/build/Core.js +2 -1
- package/build/Core.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -81,15 +81,6 @@ Here you have an example of how you should instantiate it:
|
|
|
81
81
|
It should also be noted that some components may offer the _ghosting_ system. This means that that component can receive different html markup than the default component provides.
|
|
82
82
|
For that purpose, the `data-ghost` attribute must be set.
|
|
83
83
|
Css class must be added as well to style the ghost system.
|
|
84
|
-
Let's see a naive example:
|
|
85
|
-
|
|
86
|
-
```html
|
|
87
|
-
<div data-mirai-component="session">
|
|
88
|
-
<button data-ghost class="login">Login here</button>
|
|
89
|
-
</div>
|
|
90
|
-
```
|
|
91
|
-
|
|
92
|
-
> In this example we replace the html markup with a `<button>` with the content `Login Here`
|
|
93
84
|
|
|
94
85
|
## 2.1 `<BookingQuery>`
|
|
95
86
|
|
|
@@ -101,6 +92,14 @@ This component shows a modal in which it asks the user for the `bookingId` and `
|
|
|
101
92
|
|
|
102
93
|
This component supports _ghosting_.
|
|
103
94
|
|
|
95
|
+
Let's see a naive example:
|
|
96
|
+
|
|
97
|
+
```html
|
|
98
|
+
<div data-mirai-component="bookingQuery">
|
|
99
|
+
<button data-ghost>Booking Query</button>
|
|
100
|
+
</div>
|
|
101
|
+
```
|
|
102
|
+
|
|
104
103
|
## 2.2 `<Deals>`
|
|
105
104
|
|
|
106
105
|
This component displays a form to be able to search for rooms with a certain offer. This form contains 3 fields:
|
|
@@ -134,24 +133,36 @@ This component has two behaviors. If the user is not logged in, show an action b
|
|
|
134
133
|
<div data-mirai-component="session"></div>
|
|
135
134
|
```
|
|
136
135
|
|
|
137
|
-
This component supports _ghosting_. In
|
|
136
|
+
This component supports _ghosting_. If we put only one html, it will be used for the Login component. In the another case, the component requires two different html files, one for the Login and another one for the Logged-in/Account.
|
|
138
137
|
|
|
139
138
|
```html
|
|
140
139
|
<div data-mirai-component="session">
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
140
|
+
<div data-ghost>
|
|
141
|
+
<button class="login">Login here</button>
|
|
142
|
+
</div>
|
|
143
|
+
</div>
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
> In this example we replace the html markup with a `<button>` with the content `Login Here`
|
|
147
|
+
|
|
148
|
+
```html
|
|
149
|
+
<div data-mirai-component="session">
|
|
150
|
+
<div data-ghost>
|
|
151
|
+
<p class="login">Login</p>
|
|
152
|
+
<p class="account">Account</p>
|
|
144
153
|
</div>
|
|
145
154
|
</div>
|
|
146
155
|
```
|
|
147
156
|
|
|
157
|
+
> In this example we replace the html markup with 2 `<p>`, the first one for Login and the second for Account
|
|
158
|
+
|
|
148
159
|
We can also bind the elements of the session. Example:
|
|
149
160
|
|
|
150
161
|
```html
|
|
151
162
|
<div data-mirai-component="session">
|
|
152
163
|
<div data-ghost>
|
|
153
164
|
<p class="login">Login</p>
|
|
154
|
-
<p class="account">{{firstName}} - {{email}}</p>
|
|
165
|
+
<p class="account">{{firstName}} - {{secondName}} - {{email}} - ExampleText</p>
|
|
155
166
|
</div>
|
|
156
167
|
</div>
|
|
157
168
|
```
|
package/build/Core.js
CHANGED
|
@@ -34,8 +34,9 @@ const Core = _ref => {
|
|
|
34
34
|
locale = _locale.DEFAULT_LOCALE
|
|
35
35
|
}
|
|
36
36
|
} = (0, _dataSources.useStore)();
|
|
37
|
-
const [dictionary, setDictionary] = (0, _react.useState)();
|
|
37
|
+
const [dictionary, setDictionary] = (0, _react.useState)(_services.ServiceDictionary.cache(_locale.DEFAULT_LOCALE));
|
|
38
38
|
(0, _react.useEffect)(() => {
|
|
39
|
+
if (locale !== _locale.DEFAULT_LOCALE) setDictionary(_services.ServiceDictionary.cache(locale));
|
|
39
40
|
(async () => {
|
|
40
41
|
const next = await _services.ServiceDictionary.get(locale);
|
|
41
42
|
if (next) setDictionary(next);
|
package/build/Core.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Core.js","names":["ghosts","Core","children","components","skeleton","isMobile","isDesktop","useDevice","value","currency","locale","DEFAULT_LOCALE","useStore","dictionary","setDictionary","useState","
|
|
1
|
+
{"version":3,"file":"Core.js","names":["ghosts","Core","children","components","skeleton","isMobile","isDesktop","useDevice","value","currency","locale","DEFAULT_LOCALE","useStore","dictionary","setDictionary","useState","ServiceDictionary","cache","useEffect","next","get","filter","desktop","mobile","map","index","el","component","props","getGhost","skeletonFallback","SKELETONS","React","createElement","ReactDOM","createPortal","COMPONENTS","process","env","NODE_ENV","undefined","ghost","propTypes","PropTypes","node","arrayOf","shape","oneOf","Object","keys","any","bool"],"sources":["../src/Core.jsx"],"sourcesContent":["import { useStore } from '@mirai/data-sources';\nimport { DEFAULT_LOCALE, LocaleProvider } from '@mirai/locale';\nimport { ServiceDictionary } from '@mirai/services';\nimport { useDevice } from '@mirai/ui';\nimport PropTypes from 'prop-types';\nimport React, { useEffect, useState, Suspense } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { COMPONENTS, SKELETONS } from './components';\nimport { Notifications } from './Core.Notifications';\nimport { getGhost } from './helpers';\n\nconst ghosts = {};\n\nconst Core = ({ children, components = [], skeleton = false }) => {\n const { isMobile, isDesktop } = useDevice();\n const {\n value: { currency, locale = DEFAULT_LOCALE },\n } = useStore();\n\n const [dictionary, setDictionary] = useState(ServiceDictionary.cache(DEFAULT_LOCALE));\n\n useEffect(() => {\n if (locale !== DEFAULT_LOCALE) setDictionary(ServiceDictionary.cache(locale));\n (async () => {\n const next = await ServiceDictionary.get(locale);\n if (next) setDictionary(next);\n })();\n }, [locale]);\n\n return (\n <LocaleProvider {...{ currency, dictionary, locale }}>\n <>\n {!skeleton && <Notifications />}\n\n {components\n .filter(({ desktop, mobile }) => !(isMobile && mobile === 'false') && !(isDesktop && desktop === 'false'))\n .map(({ el, component, ...props }, index) => {\n if (!ghosts[index]) ghosts[index] = getGhost(el);\n const skeletonFallback = SKELETONS[component] ? React.createElement(SKELETONS[component]) : <></>;\n\n return ReactDOM.createPortal(\n skeleton ? (\n skeletonFallback\n ) : (\n <Suspense fallback={skeletonFallback}>\n {React.createElement(COMPONENTS[component], {\n ...props,\n ['data-testid']: process.env.NODE_ENV === 'production' ? component : undefined,\n ghost: ghosts[index],\n skeleton: skeletonFallback,\n el,\n })}\n </Suspense>\n ),\n el,\n );\n })}\n </>\n {children}\n </LocaleProvider>\n );\n};\n\nCore.propTypes = {\n children: PropTypes.node,\n components: PropTypes.arrayOf(\n PropTypes.shape({\n component: PropTypes.oneOf(Object.keys(COMPONENTS)),\n el: PropTypes.any,\n }),\n ),\n skeleton: PropTypes.bool,\n};\n\nexport { Core };\n"],"mappings":"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"}
|