Aleksandr Gumroian
4 years ago
parent
e41da48b1a
commit
f8726e6012
@ -1,44 +1,44 @@ |
||||
image: node:8-alpine |
||||
|
||||
stages: |
||||
- test |
||||
- build |
||||
- publish |
||||
- test |
||||
- build |
||||
- publish |
||||
|
||||
before_script: |
||||
- apk add make |
||||
- npm install |
||||
- apk add make |
||||
- npm install |
||||
|
||||
test: |
||||
stage: test |
||||
script: |
||||
- make test |
||||
stage: test |
||||
script: |
||||
- make test |
||||
|
||||
lint: |
||||
stage: test |
||||
script: |
||||
- make lint |
||||
stage: test |
||||
script: |
||||
- make lint |
||||
|
||||
build: |
||||
stage: build |
||||
script: |
||||
- make pack |
||||
artifacts: |
||||
paths: |
||||
- dist/foris-*.tgz |
||||
stage: build |
||||
script: |
||||
- make pack |
||||
artifacts: |
||||
paths: |
||||
- dist/foris-*.tgz |
||||
|
||||
publish_beta: |
||||
stage: publish |
||||
only: |
||||
refs: |
||||
- dev |
||||
script: |
||||
- make publish-beta |
||||
stage: publish |
||||
only: |
||||
refs: |
||||
- dev |
||||
script: |
||||
- make publish-beta |
||||
|
||||
publish_latest: |
||||
stage: publish |
||||
only: |
||||
refs: |
||||
- master |
||||
script: |
||||
- make publish-latest |
||||
stage: publish |
||||
only: |
||||
refs: |
||||
- master |
||||
script: |
||||
- make publish-latest |
||||
|
||||
@ -1,9 +1,4 @@ |
||||
module.exports = { |
||||
presets: [ |
||||
"@babel/preset-env", |
||||
"@babel/preset-react", |
||||
], |
||||
plugins: [ |
||||
"@babel/plugin-transform-runtime", |
||||
], |
||||
presets: ["@babel/preset-env", "@babel/preset-react"], |
||||
plugins: ["@babel/plugin-transform-runtime"], |
||||
}; |
||||
|
||||
@ -1,4 +1,6 @@ |
||||
Foris JS library is set of components and utils for Foris JS application and plugins. |
||||
Foris JS library is set of components and utils for Foris JS application and |
||||
plugins. |
||||
|
||||
Please notice that all of these components or utils are used in reForis and plugins. If you like to study by example I would |
||||
recommend to full-text search these repos. |
||||
Please notice that all of these components or utils are used in reForis and |
||||
plugins. If you like to study by example I would recommend to full-text search |
||||
these repos. |
||||
|
||||
@ -1,4 +1,5 @@ |
||||
It provides alert context to children. `AlertContext` allows using `useAlert` in components. |
||||
It provides alert context to children. `AlertContext` allows using `useAlert` in |
||||
components. |
||||
|
||||
Notice that `<div id="alert-container"/>` should be presented in HTML doc to get it work (In reForis it's already done |
||||
with base Jinja2 templates). |
||||
Notice that `<div id="alert-container"/>` should be presented in HTML doc to get |
||||
it work (In reForis it's already done with base Jinja2 templates). |
||||
|
||||
@ -1,21 +1,21 @@ |
||||
Bootstrap alert component. |
||||
|
||||
```jsx |
||||
import {useState} from 'react'; |
||||
import { useState } from "react"; |
||||
|
||||
function AlertExample(){ |
||||
function AlertExample() { |
||||
const [alert, setAlert] = useState(true); |
||||
if (alert) |
||||
return <Alert |
||||
type='warning' |
||||
onDismiss={()=>setAlert(false)} |
||||
> |
||||
Some warning out there! |
||||
</Alert>; |
||||
return <button |
||||
className='btn btn-secondary' |
||||
onClick={()=>setAlert(true)} |
||||
>Show alert again</button>; |
||||
}; |
||||
<AlertExample/> |
||||
return ( |
||||
<Alert type="warning" onDismiss={() => setAlert(false)}> |
||||
Some warning out there! |
||||
</Alert> |
||||
); |
||||
return ( |
||||
<button className="btn btn-secondary" onClick={() => setAlert(true)}> |
||||
Show alert again |
||||
</button> |
||||
); |
||||
} |
||||
<AlertExample />; |
||||
``` |
||||
|
||||
@ -1,16 +1,17 @@ |
||||
Checkbox with label Bootstrap component with predefined sizes and structure for using in foris forms. |
||||
|
||||
All additional `props` are passed to the `<input type="checkbox">` HTML component. |
||||
Checkbox with label Bootstrap component with predefined sizes and structure for |
||||
using in foris forms. |
||||
|
||||
All additional `props` are passed to the `<input type="checkbox">` HTML |
||||
component. |
||||
|
||||
```js |
||||
import {useState} from 'react'; |
||||
import { useState } from "react"; |
||||
const [value, setValue] = useState(false); |
||||
|
||||
<CheckBox |
||||
value={value} |
||||
label="Some label" |
||||
label="Some label" |
||||
helpText="Read the small text!" |
||||
onChange={event =>setValue(event.target.value)} |
||||
/> |
||||
onChange={(event) => setValue(event.target.value)} |
||||
/>; |
||||
``` |
||||
|
||||
@ -1,25 +1,26 @@ |
||||
Adopted from `react-datetime/DateTime` datatime picker component. |
||||
It uses `momentjs` see example. |
||||
Adopted from `react-datetime/DateTime` datatime picker component. It uses |
||||
`momentjs` see example. |
||||
|
||||
It requires `ForisTranslations.locale` to be defined in order to use right locale. |
||||
It requires `ForisTranslations.locale` to be defined in order to use right |
||||
locale. |
||||
|
||||
```js |
||||
ForisTranslations={locale:'en'}; |
||||
ForisTranslations = { locale: "en" }; |
||||
|
||||
import {useState, useEffect} from 'react'; |
||||
import moment from 'moment/moment'; |
||||
import { useState, useEffect } from "react"; |
||||
import moment from "moment/moment"; |
||||
|
||||
const [dataTime, setDataTime] = useState(moment()); |
||||
const [error, setError] = useState(); |
||||
useEffect(()=>{ |
||||
dataTime.isValid() ? setError(null) : setError('Invalid value!'); |
||||
},[dataTime]); |
||||
|
||||
useEffect(() => { |
||||
dataTime.isValid() ? setError(null) : setError("Invalid value!"); |
||||
}, [dataTime]); |
||||
|
||||
<DataTimeInput |
||||
label='Time to sleep' |
||||
label="Time to sleep" |
||||
value={dataTime} |
||||
error={error} |
||||
helpText='Example helptext...' |
||||
onChange={value => setDataTime(value)} |
||||
/> |
||||
helpText="Example helptext..." |
||||
onChange={(value) => setDataTime(value)} |
||||
/>; |
||||
``` |
||||
|
||||
@ -1,18 +1,19 @@ |
||||
Bootstrap component of email input with label with predefined sizes and structure for using in foris forms. |
||||
It use built-in browser email address checking. It's only meaningful using inside `<form>`. |
||||
Bootstrap component of email input with label with predefined sizes and |
||||
structure for using in foris forms. It use built-in browser email address |
||||
checking. It's only meaningful using inside `<form>`. |
||||
|
||||
All additional `props` are passed to the `<input type="email">` HTML component. |
||||
|
||||
```js |
||||
import {useState} from 'react'; |
||||
const [email, setEmail] = useState('Wrong email'); |
||||
<form onSubmit={e=>e.preventDefault()}> |
||||
import { useState } from "react"; |
||||
const [email, setEmail] = useState("Wrong email"); |
||||
<form onSubmit={(e) => e.preventDefault()}> |
||||
<EmailInput |
||||
value={email} |
||||
label="Some label" |
||||
label="Some label" |
||||
helpText="Read the small text!" |
||||
onChange={event =>setEmail(event.target.value)} |
||||
onChange={(event) => setEmail(event.target.value)} |
||||
/> |
||||
<button type="submit">Try to submit</button> |
||||
</form> |
||||
</form>; |
||||
``` |
||||
|
||||
@ -1,31 +1,36 @@ |
||||
Bootstrap modal component. |
||||
|
||||
it's required to have an element `<div id={"modal-container"}/>` somewhere on the page since modals are rendered in portals. |
||||
it's required to have an element `<div id={"modal-container"}/>` somewhere on |
||||
the page since modals are rendered in portals. |
||||
|
||||
```js |
||||
<div id="modal-container"/> |
||||
<div id="modal-container" /> |
||||
``` |
||||
|
||||
```js |
||||
import {ModalHeader, ModalBody, ModalFooter} from './Modal'; |
||||
import { ModalHeader, ModalBody, ModalFooter } from "./Modal"; |
||||
|
||||
import {useState} from 'react'; |
||||
import { useState } from "react"; |
||||
const [shown, setShown] = useState(false); |
||||
|
||||
<> |
||||
<Modal setShown={setShown} shown={shown}> |
||||
<ModalHeader setShown={setShown} title='Warning!'/> |
||||
<ModalBody><p>Bla bla bla...</p></ModalBody> |
||||
<ModalHeader setShown={setShown} title="Warning!" /> |
||||
<ModalBody> |
||||
<p>Bla bla bla...</p> |
||||
</ModalBody> |
||||
<ModalFooter> |
||||
<button |
||||
className='btn btn-secondary' |
||||
<button |
||||
className="btn btn-secondary" |
||||
onClick={() => setShown(false)} |
||||
>Skip it</button> |
||||
> |
||||
Skip it |
||||
</button> |
||||
</ModalFooter> |
||||
</Modal> |
||||
|
||||
<button className='btn btn-secondary' onClick={()=>setShown(true)}> |
||||
|
||||
<button className="btn btn-secondary" onClick={() => setShown(true)}> |
||||
Show modal |
||||
</button> |
||||
</> |
||||
</>; |
||||
``` |
||||
|
||||
@ -1,17 +1,18 @@ |
||||
Bootstrap component of number input with label with predefined sizes and structure for using in foris forms. |
||||
Bootstrap component of number input with label with predefined sizes and |
||||
structure for using in foris forms. |
||||
|
||||
All additional `props` are passed to the `<input type="number">` HTML component. |
||||
|
||||
```js |
||||
import {useState} from 'react'; |
||||
import { useState } from "react"; |
||||
const [value, setValue] = useState(42); |
||||
|
||||
<NumberInput |
||||
value={value} |
||||
label="Some number" |
||||
label="Some number" |
||||
helpText="Read the small text!" |
||||
min='33' |
||||
max='54' |
||||
onChange={event =>setValue(event.target.value)} |
||||
/> |
||||
min="33" |
||||
max="54" |
||||
onChange={(event) => setValue(event.target.value)} |
||||
/>; |
||||
``` |
||||
|
||||
@ -1,17 +1,18 @@ |
||||
Password Bootstrap component input with label and predefined sizes and structure for using in foris forms. |
||||
Can be used with "eye" button, see example. |
||||
Password Bootstrap component input with label and predefined sizes and structure |
||||
for using in foris forms. Can be used with "eye" button, see example. |
||||
|
||||
All additional `props` are passed to the `<input type="password">` HTML component. |
||||
All additional `props` are passed to the `<input type="password">` HTML |
||||
component. |
||||
|
||||
```js |
||||
import {useState} from 'react'; |
||||
const [value, setValue] = useState('secret'); |
||||
import { useState } from "react"; |
||||
const [value, setValue] = useState("secret"); |
||||
|
||||
<PasswordInput |
||||
withEye |
||||
value={value} |
||||
label="Some password" |
||||
label="Some password" |
||||
helpText="Read the small text!" |
||||
onChange={event =>setValue(event.target.value)} |
||||
/> |
||||
onChange={(event) => setValue(event.target.value)} |
||||
/>; |
||||
``` |
||||
|
||||
@ -1,15 +1,16 @@ |
||||
Text Bootstrap component input with label and predefined sizes and structure for using in foris forms. |
||||
Text Bootstrap component input with label and predefined sizes and structure for |
||||
using in foris forms. |
||||
|
||||
All additional `props` are passed to the `<input type="text">` HTML component. |
||||
|
||||
```js |
||||
import {useState} from 'react'; |
||||
const [value, setValue] = useState('Bla bla'); |
||||
import { useState } from "react"; |
||||
const [value, setValue] = useState("Bla bla"); |
||||
|
||||
<TextInput |
||||
value={value} |
||||
label="Some text" |
||||
label="Some text" |
||||
helpText="Read the small text!" |
||||
onChange={event =>setValue(event.target.value)} |
||||
/> |
||||
onChange={(event) => setValue(event.target.value)} |
||||
/>; |
||||
``` |
||||
|
||||
@ -1,8 +1,9 @@ |
||||
import moment from "moment"; |
||||
|
||||
export function toLocaleDateString(date, { inputFormat, outputFormat = "LLL" } = {}) { |
||||
export function toLocaleDateString( |
||||
date, |
||||
{ inputFormat, outputFormat = "LLL" } = {} |
||||
) { |
||||
const parsedDate = inputFormat ? moment(date, inputFormat) : moment(date); |
||||
return parsedDate |
||||
.locale(ForisTranslations.locale) |
||||
.format(outputFormat); |
||||
return parsedDate.locale(ForisTranslations.locale).format(outputFormat); |
||||
} |
||||
|
||||
Loading…
Reference in new issue