diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..f8e0b95 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,3 @@ +*.js eol=lf +*.jsx eol=lf +*.json eol=lf \ No newline at end of file diff --git a/example/package-lock.json b/example/package-lock.json index dfde012..020f6cb 100644 --- a/example/package-lock.json +++ b/example/package-lock.json @@ -4608,6 +4608,9 @@ }, "guildatech-components": { "version": "file:..", + "requires": { + "ckeditor4-react": "^1.1.0" + }, "dependencies": { "@babel/code-frame": { "version": "7.8.3", diff --git a/package-lock.json b/package-lock.json index cf51b1e..5a84525 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@guildatech/guildatech-components", - "version": "1.0.1", + "version": "1.0.2", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/src/.eslintrc b/src/.eslintrc index 55f121d..15b8db0 100644 --- a/src/.eslintrc +++ b/src/.eslintrc @@ -1,5 +1,5 @@ -{ - "env": { - "jest": true - } -} +{ + "env": { + "jest": true + } +} diff --git a/src/components/alert.js b/src/components/alert.js index 090d9d1..3be08d1 100644 --- a/src/components/alert.js +++ b/src/components/alert.js @@ -1,40 +1,36 @@ -import React, { Component, Fragment } from 'react'; +import React, { Fragment } from 'react' -export default class Alert extends Component { - constructor(props) { - super(props); - const reservedKey = ['closable', 'children', 'collpasible']; - let classes = []; - Object.keys(props).forEach(key => { - if (!reservedKey.includes(key)) { - classes.push(key); - } - }); +export default function Alert(props) { - this.state = { props, classNames: classes.join(' '), shown: true, collapsed: false }; - this.closeAlert = this.closeAlert.bind(this); - this.collapseAlert = this.collapseAlert.bind(this); - } + const reservedKey = ['closable', 'children', 'collapsible']; + let classes = [] + Object.keys(props).forEach(key => { + if(!reservedKey.includes(key)) { + classes.push(key); + } + }); + const [collapsed, setCollapsed] = React.useState(false); + const [shown, setShown] = React.useState(true); + const [classNames, setClassNames] = React.useState(classes.join(' ')); - closeAlert() { - this.setState({shown:false}) + function closeAlert() { + setShown(false); } - collapseAlert() { - this.setState({collapsed:!this.state.collapsed}) + + function collapseAlert() { + setCollapsed(prev => !prev); } - render() { - return ( - -
- {this.state.shown ? -
- {this.props.closable ? x : null} - {this.props.collapsible ? : null} + + return ( + +
+ {shown ? +
+ {props.closable ? x : null} + {props.collapsible ? : null} - {this.props.children} -
- - : null} + {props.children} +
: null } -
- - ); - } +
+ + ) } diff --git a/src/components/breadcrumb.js b/src/components/breadcrumb.js index 0d89f3d..cb11f06 100644 --- a/src/components/breadcrumb.js +++ b/src/components/breadcrumb.js @@ -1,21 +1,17 @@ -import React, { Component } from 'react'; -export default class Breadcrumb extends Component { - constructor(props) { - super(props); - } +import React from 'react'; +export default function Breadcrumb(props) { - render() { - return this.props.path ? ( -
- - Voce está em {this.props.path} - - -
- ) : null; - } + return props.path ? ( +
+ + Voce está em {props.path} + + +
+ ) : null; + } diff --git a/src/components/button.js b/src/components/button.js index 198c899..0adff7f 100644 --- a/src/components/button.js +++ b/src/components/button.js @@ -1,64 +1,61 @@ -import React, { Component } from 'react' -export default class Button extends Component { - constructor(props) { - super(props); - this.state = { disabled: false }; - this.callOnClick = this.callOnClick.bind(this); - } - componentWillReceiveProps(updatedProps) { - if (updatedProps.disabled != this.state.disabled) { - this.setState({ disabled: updatedProps.disabled }); +import React from 'react' +export default function Button(props) { + const [disabled, setDisabled] = React.useState(false); + + React.useEffect(() => { + setDisabled(props.disabled); + }, [props.disabled]); + + function callOnClick() { + if (props.onClick) { + props.onClick(props.data); } } - callOnClick() { - if (this.props.onClick) this.props.onClick(this.props.data); - } - render() { - return ( - - ); - } + button.danger:hover { + border-color: white !important + } + `} + + ); + } diff --git a/src/components/editor.js b/src/components/editor.js index e56a147..e32ff1d 100644 --- a/src/components/editor.js +++ b/src/components/editor.js @@ -1,38 +1,23 @@ /* https://ckeditor.com/docs/ckeditor4/latest/examples/react.html#/ */ -import React, { Component, Fragment } from 'react'; +import React, { Fragment } from 'react'; import CKEditor from 'ckeditor4-react'; -export default class GTEditor extends Component { - constructor(props) { - super(props); +export default function GTEditor(props) { - this.state = { - data: props.value || '', - invalid: false, - id: - '_' + - Math.random() - .toString(36) - .substr(2, 9), - }; + const [data, setData] = React.useState(props.value || ''); + const [invalid, setInvalid] = React.useState(false); + const [id, setId] = React.useState('_' + Math.random().toString(36).substr(2, 9)); - this.handleChange = this.handleChange.bind(this); - this.onEditorChange = this.onEditorChange.bind(this); - console.log(props); - } - componentWillReceiveProps(updatedProps) { - if (updatedProps.invalid != this.state.invalid) { - this.setState({ invalid: updatedProps.invalid }); - } - if (updatedProps.value != this.state.value) { - this.setState({ data: updatedProps.value }); - } - // CKEditor.instances.editor1.setData(updatedProps.value); - } - uniqueId() { + React.useEffect(() => { + setInvalid(props.invalid); + setData(props.value); + // CKEditor.instances.editor1.setData(props.value); + }, [props.invalid, props.value]); + + function uniqueId() { return ( '_' + Math.random() @@ -40,56 +25,53 @@ export default class GTEditor extends Component { .substr(2, 9) ); } - onEditorChange(evt) { - this.props.onChange({ + + function onEditorChange(evt) { + props.onChange({ target: { - name: this.props.id, + name: props.id, value: evt.editor.getData(), }, }); - /*this.props.onChange({ + + /*props.onChange({ target: { - name: this.props.id, - value: eevt.editor.window.$.document.body.innerText + name: props.id, + value: evt.editor.window.$.document.body.innerText } - })*/ - this.setState({ - data: evt.editor.getData(), - }); + })*/ + setData(evt.editor.getData()); } - handleChange(changeEvent) { - this.setState({ - data: changeEvent.target.value, - }); + function handleChange(changeEvent) { + setData(changeEvent.target.value); } - // - // - render() { - return ( - -
-
- (CKEDITOR.disableAutoInline = true)} - name={this.state.id} - id={this.props.id} - data={this.state.data} - onChange={this.onEditorChange} - style={{ - float: 'left', - width: '99%', - marginLeft: '5px', - marginBottom: '15px', - }} - /> -
+ // + // + + return ( + +
+
+ (CKEDITOR.disableAutoInline = true)} + name={id} + id={id} + data={data} + onChange={onEditorChange} + style={{ + float: 'left', + width: '99%', + marginLeft: '5px', + marginBottom: '15px', + }} + />
- - ); - } +
+ + ); } diff --git a/src/components/input.js b/src/components/input.js index fbc9dbd..c390621 100644 --- a/src/components/input.js +++ b/src/components/input.js @@ -1,97 +1,94 @@ -import React, { Component } from 'react' +import React from 'react' import PropTypes from 'prop-types'; -export default class Input extends Component { - constructor(props) { - super(props); - this.state = { invalid: false, value: props.value || '' }; +export default function Input(props) { + + const [invalid, setInvalid] = React.useState(false); + const [value, setValue] = React.useState(props.value || ''); - this.handleChange = this.handleChange.bind(this); + React.useEffect(() => { + setInvalid(props.invalid); + }, [props.invalid]); + + function handleChange(e) { + setValue(e.target.value); + props.onChange(e); } - componentWillReceiveProps(updatedProps) { - if (updatedProps.invalid != this.state.invalid) { - this.setState({ invalid: updatedProps.invalid }); - } - } - handleChange(event) { - this.setState({ value: event.target.value }); - this.props.onChange(event); - } - render() { - return ( -
-
- - -
- - -
- ); - } + input { + padding: 10px; + margin: 15px 0px 10px; + border: 1px solid var(--guildatech-color-primary); + position: relative; + display: block; + width: 98%; + outline-color: var(--guildatech-color-primary) !important; + } + input[invalid='true'] { + outline-color: var(--guildatech-color-red) !important; + border: 1px solid var(--guildatech-color-red); + } + input + label { + position: absolute; + pointer-events: none; + left: 15px; + margin-top: -40px; + z-index: 8; + transition: all 300ms; + } + input::placeholder { + color: white !important; + } + input:focus::placeholder { + color: var(--guildatech-color-primary) !important; + } + + input:focus + label, + input:not(:placeholder-shown) + label { + font-size: 12px; + margin-top: -55px; + background: white; + padding: 0px 5px; + } + `} +
+ ); + } + Input.propTypes = { invalid: PropTypes.bool, required: PropTypes.bool, diff --git a/src/components/renderHTML.js b/src/components/renderHTML.js index a65f67d..5ba1ae1 100644 --- a/src/components/renderHTML.js +++ b/src/components/renderHTML.js @@ -1,11 +1,9 @@ -import React, { Component } from 'react'; +import React from 'react'; -export default class RenderHTML extends Component { - render() { - return ( -
-
-
- ); - } +export default function RenderHTML(props) { + return ( +
+
+
+ ); } diff --git a/src/components/section.js b/src/components/section.js index f248ab0..ead5172 100644 --- a/src/components/section.js +++ b/src/components/section.js @@ -1,33 +1,29 @@ -import React, { Component, Fragment } from 'react'; +import React, { Fragment } from 'react'; -export default class Section extends Component { - constructor(props) { - super(props); - } - - render() { - return ( - -
{this.props.children}
- - - ); - } +export default function Section(props) { + +return ( + +
{ props.children }
+ + + ); } + diff --git a/src/components/textarea.js b/src/components/textarea.js index 96284c6..9c33462 100644 --- a/src/components/textarea.js +++ b/src/components/textarea.js @@ -1,85 +1,78 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; +import React from 'react'; -export default class Textarea extends Component { - constructor(props) { - super(props); - this.state = { invalid: false }; - } +export default function Textarea(props) { + const [invalid, setInvalid] = React.useState(false); - componentWillReceiveProps(updatedProps) { - if (updatedProps.invalid != this.state.invalid) { - this.setState({ invalid: updatedProps.invalid }); - } - } + React.useEffect(() => { + setInvalid(props.invalid); + }, [props.invalid]) - render() { - return ( -
-
-