react-icons/fa#FaPlus JavaScript Examples
The following examples show how to use
react-icons/fa#FaPlus.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: CostsTableFooter.js From plataforma-sabia with MIT License | 6 votes |
|
CostsTable = ({ form, append, collection, emptyValue, fields }) => {
return (
<>
<Summary form={form} collection={collection} fields={fields} />
<CircularButton
right
size="medium"
variant="info"
color="white"
name={`${collection}_add_button`}
onClick={(event) => {
event.preventDefault();
append(emptyValue);
}}
>
<FaPlus />
</CircularButton>
</>
);
}
Example #2
| Source File: index.js From HexactaLabs-NetCore_React-Level2 with Apache License 2.0 | 6 votes |
|
Presentation = props => {
return (
<Container fluid>
<Row className="my-1">
<Col>
<h1>Categorías</h1>
</Col>
</Row>
<Row className="my-1">
<Col>
<Button
className="product__button"
color="primary"
aria-label="Agregar"
onClick={() => props.push(props.urls.create)}
>
<FaPlus className="product__button-icon" />
AGREGAR
</Button>
</Col>
</Row>
<Row className="my-3">
<Col>
<ReactTable
{...props}
data={props.data}
pages={props.pages}
loading={props.dataLoading}
columns={columns}
defaultPageSize={props.defaultPageSize}
className="-striped -highlight"
/>
</Col>
</Row>
</Container>
);
}
Example #3
| Source File: Counter.js From dm2 with Apache License 2.0 | 6 votes |
|
CounterButton = ({ type }) => {
const { currentValue, min, max, disabled, ref, onClickHandler } = useContext(CounterContext);
const compareLimit = type === 'increase' ? max : min;
return (
<Elem
tag="a"
href="#"
name="btn"
mod={{
type,
disabled: currentValue === compareLimit || disabled,
}}
onClick={onClickHandler(type, ref)}
onMouseDownCapture={e => e.preventDefault()}
>
<Oneof value={type}>
<FaMinus case="decrease"/>
<FaPlus case="increase"/>
</Oneof>
</Elem>
);
}
Example #4
| Source File: GridWidthButton.js From dm2 with Apache License 2.0 | 6 votes |
|
GridWidthButton = injector(({ view, gridWidth, size }) => {
const [width, setWidth] = useState(gridWidth);
const setGridWidth = useCallback(
(width) => {
const newWidth = Math.max(3, Math.min(width, 10));
setWidth(newWidth);
view.setGridWidth(newWidth);
},
[view],
);
return view.type === "grid" ? (
<Space style={{ fontSize: 12 }}>
Columns: {width}
<Button.Group>
<Button
size={size}
icon={<Icon icon={FaMinus} size="12" color="#595959" />}
onClick={() => setGridWidth(width - 1)}
disabled={width === 3}
/>
<Button
size={size}
icon={<Icon icon={FaPlus} size="12" color="#595959" />}
onClick={() => setGridWidth(width + 1)}
disabled={width === 10}
/>
</Button.Group>
</Space>
) : null;
})
Example #5
| Source File: index.js From HexactaLabs-NetCore_React-Initial with Apache License 2.0 | 5 votes |
|
Presentation = props => {
return (
<Container fluid>
<Row className="my-1">
<Col>
<h1>Tiendas</h1>
</Col>
</Row>
<Row>
<Col>
<Search
handleFilter={props.onFilterChange}
submitFilter={props.onFilterSubmit}
clearFilter={props.clearFilter}
filters={props.filters}
/>
</Col>
</Row>
<Row className="my-1">
<Col>
<Button
className="store__button"
color="primary"
onClick={() => props.push(props.urls.create)}
>
<FaPlus className="store__button-icon" />
Agregar
</Button>
</Col>
</Row>
<Row className="my-3">
<Col>
<ReactTable
{...props}
className="-striped -highlight"
data={props.data}
loading={props.dataLoading}
columns={columns}
defaultPageSize={props.defaultPageSize}
/>
</Col>
</Row>
</Container>
);
}
Example #6
| Source File: index.js From HexactaLabs-NetCore_React-Level1 with Apache License 2.0 | 5 votes |
|
Presentation = props => {
return (
<Container fluid>
<Row className="my-1">
<Col>
<h1>Tipos de Producto</h1>
</Col>
</Row>
<Row>
<Col>
<Search
handleFilter={props.handleFilter}
submitFilter={props.submitFilter}
clearFilter={props.clearFilter}
filters={props.filters}
/>
</Col>
</Row>
<Row className="my-1">
<Col>
<Button
className="producttype__button"
color="primary"
aria-label="Agregar"
onClick={() => props.push(props.urls.create)}
>
<FaPlus className="producttype__button-icon" />
AGREGAR
</Button>
</Col>
</Row>
<Row className="my-3">
<Col>
<ReactTable
{...props}
data={props.data}
loading={props.dataLoading}
columns={columns}
defaultPageSize={props.defaultPageSize}
className="-striped -highlight"
/>
</Col>
</Row>
</Container>
);
}
Example #7
| Source File: HomeScreen.js From kalimba-tabs with MIT License | 5 votes |
|
render() {
return (
<div style={styles.homeContainer}>
{this.state.showNewSongWindow && (
<NewSongWindow
hide={() => {
this.setState({ showNewSongWindow: false });
}}
onCreate={() => {
this.props.history.push("/tabcreator");
}}
/>
)}
<div style={styles.body}>
{/* SONG LIST */}
<div style={styles.songList}>
<h1>Your Songs</h1>
<div style={styles.linebreak} />
<div style={{ display: "flex", flexDirection: "row" }}>
{/* NEW SONG BUTTON */}
<div
style={styles.newSongButton}
onClick={() => {
this.setState({ showNewSongWindow: true });
}}
>
<FaPlus size={70} color="black" />
</div>
{this.state.yourSongs.map((songTitle) => (
<SongItem
title={songTitle}
onClick={() => {
this.openSong(songTitle);
}}
onDeleteClicked={() => {
this.deleteSong(songTitle);
}}
/>
))}
</div>
<h1>Example Songs</h1>
<div style={styles.linebreak} />
<div style={{ display: "flex", flexDirection: "row" }}>
{exampleSongs.map((song) => (
<SongItem
title={song.songTitle}
onClick={() => {
this.props.openSong(song);
this.props.history.push("/tabcreator");
}}
/>
))}
</div>
</div>
</div>
</div>
);
}
Example #8
| Source File: NoteToolBar.js From kalimba-tabs with MIT License | 5 votes |
|
render() {
return (
<div style={styles.mainContainer}>
<div style={styles.actionContainer}>
<FaPlus
onClick={() => {
this.props.addRow(this.props.noteBarNoteIndex);
}}
/>
</div>
<div style={styles.actionContainer}>
<FaMinus
onClick={() => {
this.props.removeRow(this.props.noteBarNoteIndex);
}}
/>
</div>
<div style={styles.actionContainer}>
<FaPaste
onClick={() => {
this.props.pasteSelection(this.props.noteBarNoteIndex);
this.props.hideNoteBar();
}}
/>
</div>
<div style={styles.actionContainer}>
<FaStopwatch
onClick={() => {
this.props.noteTempoChange();
this.props.hideNoteBar();
}}
/>
</div>
<div style={styles.actionContainer}>
<FaPlay
onClick={() => {
this.props.playFromNote(this.props.noteBarNoteIndex);
this.props.hideNoteBar();
}}
color="blue"
/>
</div>
<div style={styles.actionContainer}>
<FaTimes
onClick={() => {
this.props.hideNoteBar();
}}
/>
</div>
</div>
);
}
Example #9
| Source File: KalimbaChooser.js From kalimba-tabs with MIT License | 5 votes |
|
render() {
return (
<div style={styles.container}>
<div style={styles.tineContainer}>
<div style={{ marginRight: 3 }}>
<input
onChange={(e) => {
this.setState({ newNoteLeft: e.target.value });
}}
value={this.state.newNoteLeft}
style={{ width: 40, height: 40 }}
/>
<div
onClick={() => {
this.props.addNote(this.state.newNoteLeft, true);
}}
>
<FaPlus style={{ cursor: "pointer" }} />
</div>
</div>
{this.props.notes.map((note, index) => (
<div
style={{
...styles.tine,
flex: this.props.notes.length,
height:
150 +
Math.ceil(this.props.notes.length / 2) -
1 -
Math.abs(Math.ceil(this.props.notes.length / 2) - 1 - index) *
10,
}}
>
<div style={{ flex: 1 }}>
<FaTimes
style={{ cursor: "pointer" }}
onClick={() => {
this.props.removeNote(note);
}}
color="black"
/>
</div>
<div style={{ height: 10, marginBottom: 20 }}>{note}</div>
</div>
))}
<div style={{ marginLeft: 3 }}>
<input
onChange={(e) => {
this.setState({ newNoteRight: e.target.value });
}}
value={this.state.newNoteRight}
style={{ width: 40, height: 40 }}
/>
<div
onClick={() => {
this.props.addNote(this.state.newNoteRight, false);
}}
>
<FaPlus style={{ cursor: "pointer" }} />
</div>
</div>
</div>
</div>
);
}
Example #10
| Source File: index.js From HexactaLabs-NetCore_React-Level1 with Apache License 2.0 | 5 votes |
|
Presentation = (props) => {
return (
<Container fluid>
<Row className="my-1">
<Col>
<h1>Tipo Producto</h1>
</Col>
</Row>
<Row>
<Col>
<Search
handleFilter={props.handleFilter}
submitFilter={props.submitFilter}
clearFilter={props.clearFilter}
filters={props.filters}
/>
</Col>
</Row>
<Row className="my-1">
<Col>
<Button
className="provider__button"
color="primary"
aria-label="Agregar"
onClick={() => props.push(props.urls.create)}
>
<FaPlus className="provider__button-icon" />
AGREGAR
</Button>
</Col>
</Row>
<Row className="my-3">
<Col>
<ReactTable
{...props}
data={props.data}
loading={props.dataLoading}
columns={columns}
defaultPageSize={props.defaultPageSize}
className="-striped -highlight"
/>
</Col>
</Row>
</Container>
);
}
Example #11
| Source File: Products.js From HexactaLabs-NetCore_React-Final with Apache License 2.0 | 5 votes |
|
Presentation = props => {
return (
<Container fluid>
<Row className="my-1">
<Col>
<h1>Productos</h1>
</Col>
</Row>
<Row>
<Col>
<Search
handleFilter={props.handleFilter}
submitFilter={props.submitFilter}
clearFilter={props.clearFilter}
filters={props.filters}
/>
</Col>
</Row>
<Row className="my-1">
<Col>
<Button
className="product__button"
color="primary"
aria-label="Agregar"
onClick={() => props.push(props.urls.create)}
>
<FaPlus className="product__button-icon" />
AGREGAR
</Button>
</Col>
</Row>
<Row className="my-3">
<Col>
<ReactTable
{...props}
data={props.data}
pages={props.pages}
loading={props.dataLoading}
columns={columns}
defaultPageSize={props.defaultPageSize}
className="-striped -highlight"
/>
</Col>
</Row>
</Container>
);
}
Example #12
| Source File: ChatRooms.js From talk4free with MIT License | 5 votes |
|
render() {
const fetchRooms = () => {
// If there are rooms render roomslist if not... show a message
if (
typeof this.state.rooms === "object" &&
Object.keys(this.state.rooms.data).length > 0
) {
return (
<RoomsList
rooms={this.state.rooms}
isLoggedIn={this.props.isLoggedIn}
email={this.props.email}
username={this.props.username}
img={this.props.img}
users={this.props.users}
onUpdate={this.getRooms}
/>
);
} else {
return (
<p className="text-center">No rooms available, please create one!</p>
);
}
};
return (
<section>
<Container>
<div className="chatRooms">
<h1 className="display-4">Chat Rooms</h1>
<p className="lead">
Here you can Join or Create a Room. Just setup the language and
the limit of participants you want to allow in you conversation.
Rembember not to share banned content{" "}
<a href="#Sdsd">more details</a>
</p>
<Button variant="primary" onClick={this.createRoom}>
Create a Room <FaPlus />
</Button>
<CreateRoomModal
show={this.state.showCreateRoomModal}
handleClose={this.createRoom}
email={this.props.email}
username={this.props.username}
img={this.props.img}
onUpdate={this.getRooms}
/>
</div>
{fetchRooms()}
</Container>
</section>
);
}
Example #13
| Source File: Filters.js From dm2 with Apache License 2.0 | 5 votes |
|
Filters = injector(({ views, currentView, filters }) => {
const { sidebarEnabled } = views;
const fields = React.useMemo(
() =>
currentView.availableFilters.reduce((res, filter) => {
const target = filter.field.target;
const groupTitle = target
.split("_")
.map((s) =>
s
.split("")
.map((c, i) => (i === 0 ? c.toUpperCase() : c))
.join(""),
)
.join(" ");
const group = res[target] ?? {
id: target,
title: groupTitle,
options: [],
};
group.options.push({
value: filter.id,
title: filter.field.title,
original: filter,
});
return { ...res, [target]: group };
}, {}),
[currentView.availableFilters],
);
return (
<Block name="filters" mod={{ sidebar: sidebarEnabled }}>
<Elem name="list" mod={{ withFilters: !!filters.length }}>
{filters.length ? (
filters.map((filter, i) => (
<FilterLine
index={i}
filter={filter}
view={currentView}
sidebar={sidebarEnabled}
value={filter.currentValue}
key={`${filter.filter.id}-${i}`}
availableFilters={Object.values(fields)}
dropdownClassName={cn("filters").elem("selector")}
/>
))
) : (
<Elem name="empty">No filters applied</Elem>
)}
</Elem>
<Elem name="actions">
<Button
type="primary"
size="small"
onClick={() => currentView.createFilter()}
icon={<FaPlus />}
>
Add {filters.length ? "Another Filter" : "Filter"}
</Button>
{!sidebarEnabled ? (
<Tooltip title="Pin to sidebar">
<Button
type="link"
size="small"
about="Pin to sidebar"
onClick={() => views.expandFilters()}
style={{ display: "inline-flex", alignItems: "center" }}
icon={<Icon icon={FaCaretSquareRight} size={18} />}
/>
</Tooltip>
) : null}
</Elem>
</Block>
);
})
Example #14
| Source File: Bundle.js From make-react-apps-site with MIT License | 5 votes |
|
// import usePodia from './usePodia'
export default function Bundle() {
// usePodia()
return (
<div className="bg-green-50 text-green-800 px-6 py-32">
<div className="container mx-auto">
{/* header */}
<h2 className="russo text-2xl lg:text-4xl mb-10 text-center">
Purchase Multiple Courses and Save
</h2>
<div className="grid lg:grid-cols-11 gap-4 text-lg text-gray-600 leading-none relative z-10 text-center bg-green-300 p-8 rounded-lg">
{/* part 1 */}
<div className="col-span-3 bg-blue-100 rounded-lg">
<img
src="https://scotch-res.cloudinary.com/image/upload/q_auto/v1594571945/d2e337a4f6900f8d0798c596eb0607a8e0c2fbddb6a7ab7afcd60009c119d4c7_evfnlk.png"
alt="10 React Apps"
className="rounded-t-lg"
/>
<h2 className="arial text-blue-600 text-xl p-4">
10 React Apps
<span className="ml-2">$47</span>
</h2>
</div>
{/* + */}
<div className="col-span-3 lg:col-span-1 flex items-center justify-center">
<FaPlus />
</div>
{/* part 2 */}
<div className="col-span-3 bg-purple-100 rounded-lg">
<img
src="https://scotch-res.cloudinary.com/image/upload/q_auto/v1594571945/d2e337a4f6900f8d0798c596eb0607a8e0c2fbddb6a7ab7afcd60009c119d4c7_1_nq11gx.png"
alt="10 React Apps Part 2"
className="rounded-t-lg"
/>
<h2 className="arial text-purple-600 text-xl p-4">
10 React Apps <span className="ml-2 font-bold">Part 2</span>{' '}
<span className="ml-2">$47</span>
</h2>
</div>
{/* = */}
<div className="col-span-3 lg:col-span-1 flex items-center justify-center">
<FaEquals />
</div>
{/* bundle */}
<a
href="https://learn.better.dev/make-react-apps-bundle-a-and-b/buy"
className="col-span-3 flex flex-col items-center justify-center h-full text-3xl lg:text-4xl border-2 border-yellow-300 bg-yellow-300 text-yellow-800 rounded-lg px-6 py-6 cursor-pointer hover:bg-yellow-200 w-full transition-colors duration-150"
>
<strong className="block text-lg mb-3 text-yellow-700">
Buy the Bundle
</strong>
<span>
<strong className="line-through opacity-25 mr-2">$99</strong>
<span className="text-blue-900">$79</span>
</span>
</a>
</div>
</div>
</div>
)
}
Example #15
| Source File: MapGeojsonMarkers.jsx From Zulu with MIT License | 5 votes |
|
render() {
var center = [this.state.lat, this.state.lng];
const basemapsDict = {
dark: " https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png",
osm: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
hot: "https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png",
}
return (
<Map zoom={this.state.zoom} center={center}>
<div className="leaflet-bottom leaflet-right buttons-container">
<Container>
<Fab
color="primary"
aria-label="edit"
tooltip="Add a new story!"
onClick={this.showModal}>
<FaPlus />
</Fab>
</Container>
</div>
{
<Modal position={[this.state.lat, this.state.lng]} show={this.state.showModal} onHide={this.closeModal.bind(this)}>
<form onSubmit={this.handleSubmit}>
<h3> Add your Story. </h3>
<label>
<br />
Title:
<br />
<input name="storyTitle" type="text" defaultValue={this.state.storyTitle} onChange={this.handleChange} />
<br />
</label>
<label>
<br />
Body:<br />
<textarea name="storyBody" defaultValue={this.state.storyBody} onChange={this.handleChange} />
<br />
</label>
<label>
<br />
Add a photo: (optional) <br />
<input type="file" style={{ marginRight: "-95px" }} ref={this.fileInput} />
<br />
</label>
<br />
<br />
<input type="submit" value="Submit" />
</form>
</Modal>}
<TileLayer
attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url={basemapsDict[this.state.basemap]}
/>
<Basemap basemap={this.state.basemap} onChange={this.onBMChange} />
<GeojsonLayer lat={center[0]} lng={center[1]} maxDist={5000} cluster={true} />
<GeoWikipediaLayer lat={center[0]} lng={center[1]} maxDist={5000} cluster={true} />
<Marker position={center} icon={MyLocationIcon}>
<Popup>
<div>Your Location - latitude: {Number(this.state.lat).toFixed(4)} - longitude: {Number(this.state.lng).toFixed(4)}</div>
</Popup>
</Marker>
</Map>
);
}
Example #16
| Source File: Student_Home_Page.jsx From camprec with MIT License | 5 votes |
|
function Cards(props) {
console.log(props.certification)
return (
<>
<div className="card2 magin-top" >
<div className="card-body profile_width pop">
<div ><img src={props.image} className="profile_img"></img></div>
<div className="cb"><strong><h4 className="card-title marginb centers fsize2">{props.name}</h4></strong>
<div className="details"><p className=" card-body card-text fsize"><strong>Email : <br/> </strong> {props.email}</p>
<p className="card-body card-text boder fsize" ><strong>Phone no: </strong> <br/>{props.phone}</p>
<p className="card-body card-text fsize"><strong>College : </strong> <br/>{props.college}</p>
<p className="card-body card-text fsize"><strong>Description : </strong> <br/> {props.description}</p>
<p className="card-body card-text fsize"><strong>Education : </strong><br/>
{props.education.map((user,i) => {
return (<>
<div className="card2" key={i}>
<strong>Course: </strong>{props.education[i].course}<br/>
<strong>Institute: </strong>{props.education[i].institute}<br/>
<strong>Marks: </strong>{props.education[i].marks}<br/>
</div>
<br/>
</>
);
})}
<p ><a href="\addedu"><FaPlus></FaPlus></a> <a href="/deledu"><FaRegTrashAlt></FaRegTrashAlt></a> </p>
</p>
<p className="card-body card-text fsize"><strong>Work experience :</strong> <br/>
{props.work.map((user,i) => {
return (<>
<div className="card2" key={i}>
<strong>Job Title: </strong>{props.work[i].names}<br/>
<strong>Company: </strong>{props.work[i].companys}<br/>
<strong>Duration:</strong>{props.work[i].duration}<br/>
<strong>Description: </strong>{props.work[i].description}<br/>
<strong>Link:</strong> <a href={props.work[i].link}>{props.work[i].link}</a>
</div>
<br/>
</>
);
})}
<p ><a href="\addexp"><FaPlus></FaPlus></a> <a href="\delexp"><FaRegTrashAlt></FaRegTrashAlt></a> </p>
</p>
<p className="card-body card-text fsize"><strong>Certification :</strong><br/> {props.certification.map((user,i) => {
return (<>
<div className="card2" key={i}>
<strong>Course: </strong>{props.certification[i].courses}<br/>
<strong>Institutes: </strong>{props.certification[i].institutes}<br/>
<strong>Valid_till: </strong>{props.certification[i].valid_till}<br/>
<strong>Link: </strong> <a href={props.certification[i].links}>{props.certification[i].links}</a>
</div>
<br/>
</>
);
})}
<p ><a href="\addcer"><FaPlus></FaPlus></a> <a href="\delcer"><FaRegTrashAlt></FaRegTrashAlt></a> </p>
</p>
<p className="card-text fsize"> <a href={props.facebook}><FaFacebookF></FaFacebookF></a> <a href={props.twitter}><FaTwitter></FaTwitter></a> <a href={props.LinkedIn}> <FaLinkedin></FaLinkedin></a> <a href={props.Insta}> <FaInstagram></FaInstagram></a></p>
</div>
</div>
</div>
</div>
</>
)
}
Example #17
| Source File: index.js From HexactaLabs-NetCore_React-Initial with Apache License 2.0 | 5 votes |
|
Presentation = props => {
return (
<Container fluid>
<Row className="my-1">
<Col>
<h1>Proveedores</h1>
</Col>
</Row>
<Row>
<Col>
<Search
handleFilter={props.handleFilter}
submitFilter={props.submitFilter}
clearFilter={props.clearFilter}
filters={props.filters}
/>
</Col>
</Row>
<Row className="my-1">
<Col>
<Button
className="provider__button"
color="primary"
aria-label="Agregar"
onClick={() => props.push(props.urls.create)}
>
<FaPlus className="provider__button-icon" />
AGREGAR
</Button>
</Col>
</Row>
<Row className="my-3">
<Col>
<ReactTable
{...props}
data={props.data}
loading={props.dataLoading}
columns={columns}
defaultPageSize={props.defaultPageSize}
className="-striped -highlight"
/>
</Col>
</Row>
</Container>
);
}
Example #18
| Source File: index.js From hackchat-client with Do What The F*ck You Want To Public License | 4 votes |
|
export function MainMenu({
mainMenuIsOpen,
usersMenuIsOpen,
ChannelsModalIsOpen,
joinMenuIsOpen,
localeMenuIsOpen,
onOpenMainMenu,
onCloseMainMenu,
onOpenUsersModal,
onCloseUsersModal,
onOpenChannelsModal,
onCloseChannelsModal,
onOpenJoinMenu,
onCloseJoinMenu,
onOpenLocaleMenu,
onCloseLocaleMenu,
history,
intl,
}) {
useInjectReducer({ key: 'mainMenu', reducer });
const usersBtnToolTip = intl.formatMessage(messages.usersBtnToolTip);
const channelsBtnToolTip = intl.formatMessage(messages.channelsBtnToolTip);
const joinBtnToolTip = intl.formatMessage(messages.joinBtnToolTip);
const languageBtnToolTip = intl.formatMessage(messages.languageBtnToolTip);
const mainIcon = mainMenuIsOpen ? <MdClose /> : <MdMenu />;
const menuBtnText = intl.formatMessage(messages.menuBtnToolTip);
const settingsBtnText = intl.formatMessage(messages.settingsBtnToolTip);
return (
<div>
<Collapse className="fixed-bottom" isOpen={mainMenuIsOpen}>
<Container fluid>
<Row className="mx-auto">
<Col>
<MenuButton
onClick={() => {
if (ChannelsModalIsOpen) {
onCloseUsersModal();
} else {
onOpenUsersModal();
}
}}
toolTip={usersBtnToolTip}
>
<MdPeople />
</MenuButton>
<UsersModal open={usersMenuIsOpen} />
</Col>
</Row>
<Row className="mx-auto">
<Col>
<MenuButton
onClick={() => {
if (ChannelsModalIsOpen) {
onCloseChannelsModal();
} else {
onOpenChannelsModal();
}
}}
toolTip={channelsBtnToolTip}
>
<MdForum />
</MenuButton>
<ChannelsModal open={ChannelsModalIsOpen} />
</Col>
</Row>
<Row className="mx-auto">
<Col>
<MenuButton
onClick={() => {
if (joinMenuIsOpen) {
onCloseJoinMenu();
} else {
onOpenJoinMenu();
}
}}
toolTip={joinBtnToolTip}
>
<FaPlus />
</MenuButton>
<JoinModal open={joinMenuIsOpen} />
</Col>
</Row>
<Row className="mx-auto">
<Col>
<MenuButton
onClick={() => {
if (localeMenuIsOpen) {
onCloseLocaleMenu();
} else {
onOpenLocaleMenu();
}
}}
toolTip={languageBtnToolTip}
>
<MdLanguage />
</MenuButton>
<LocaleModal open={localeMenuIsOpen} />
</Col>
</Row>
<Row className="mx-auto">
<Col>
<MenuButton
onClick={() => {
history.push('/settings');
}}
toolTip={settingsBtnText}
>
<MdSettings />
</MenuButton>
</Col>
</Row>
<Row>
<Col>
<Spacer />
</Col>
</Row>
</Container>
</Collapse>
<MenuButton
isMain
className="fixed-bottom"
onClick={() => {
if (mainMenuIsOpen) {
onCloseMainMenu();
} else {
onOpenMainMenu();
}
}}
toolTip={menuBtnText}
>
{mainIcon}
</MenuButton>
</div>
);
}
Example #19
| Source File: Navbar.js From devagram with GNU General Public License v3.0 | 4 votes |
|
Navbar = (props) => {
const [searchText, setSearchText] = useState("");
const [open, setOpen] = useState(false);
const [openProfile, setOpenProfile] = useState(false);
return (
<>
<nav className={classes.Navbar}>
<div className={classes.NavContent}>
<Title title="Devagram" />
<div className={classes.Search}>
<input
type="text"
value={searchText}
onChange={setSearchText}
name="search"
required
placeholder="Search"
aria-labelledby="label-search"
/>
<Link to="#">
<FaSearch size="1.2em" style={{ color: "#aaa" }} />
</Link>
</div>
<div className={classes.Options}>
<div className={classes.Option}>
<Link to="#">
<FaInbox style={{ color: "black" }} />
</Link>
</div>
<div className={classes.Option}>
<Link to="/feeds">
<FaCompass style={{ color: "black" }} />
</Link>
</div>
<div className={classes.Option}>
<Link to="/connect">
<FaUsers style={{ color: "black" }} />
</Link>
</div>
<div className={classes.Option}>
<Link to="/jobsAndHack">
<AiFillCode style={{ color: "black" }} />
</Link>
</div>
<div
className={classes.Option}
onClick={() => setOpenProfile(!openProfile)}
>
<CgProfile style={{ color: "black", cursor: "pointer" }} />
</div>
<div
className={(classes.Option, classes.Burger)}
onClick={() => setOpen(!open)}
>
<FaHamburger style={{ color: "black", cursor: "pointer" }} />
</div>
</div>
</div>
<div
className={[
classes.ProfileOptions,
openProfile ? classes.Open : "",
].join(" ")}
>
<div className={classes.ProfileOption}>
<NavLink to="/dashboard" activeClassName={classes.selected}>
<FaHome />
<span>Home</span>
</NavLink>
</div>
<div className={classes.ProfileOption}>
<NavLink to="#" activeClassName={classes.selected}>
<FaSearch />
<span>Search</span>
</NavLink>
</div>
<div className={classes.ProfileOption}>
<NavLink to="#" activeClassName={classes.selected}>
<FaPlus />
<span>Create Post</span>
</NavLink>
</div>
<div className={classes.ProfileOption}>
<NavLink to="/profile" activeClassName={classes.selected}>
<FaUser />
<span>Profile</span>
</NavLink>
</div>
</div>
<div
className={[classes.SmallScreen, open ? classes.Open : ""].join(" ")}
>
<div className={classes.SmallOption}>
<Link to="/dashboard">
<FaHome style={{ color: "black" }} />
<span>Home</span>
</Link>
</div>
<div className={classes.SmallOption}>
<Link to="#">
<FaInbox style={{ color: "black" }} />
<span>Inbox</span>
</Link>
</div>
<div className={classes.SmallOption}>
<Link to="/feeds">
<FaCompass style={{ color: "black" }} />
<span>Explore-feeds</span>
</Link>
</div>
<div className={classes.SmallOption}>
<Link to="/connect">
<FaUsers style={{ color: "black" }} />
<span>Connect</span>
</Link>
</div>
<div className={classes.SmallOption}>
<Link to="/jobsAndHack">
<AiFillCode style={{ color: "black" }} />
<span>jobs-hackathons</span>
</Link>
</div>
</div>
</nav>
</>
);
}
Example #20
| Source File: SelectAnioMes.jsx From core-audit with MIT License | 4 votes |
|
SelectAnioMes = ({auditoriaId, getLibrosMensuales}) => {
const [datosNewLibroMes, setDatosNewLibroMes] = useState({})
const mesesCrudo = [
'Enero',
'Febrero',
'Marzo',
'Abril',
'Mayo',
'Junio',
'Julio',
'Agosto',
'Septiembre',
'Octubre',
'Noviembre',
'Diciembre'
];
const handlerDatosLibroMes = (e) => {
const {name} = e.target
setDatosNewLibroMes((datos) => {
return {
...datos,
[name]: e.target.value
}
})
}
const crearLibroMes = async () => {
const mesIndex = datosNewLibroMes.mesIndex;
const mes = mesesCrudo[mesIndex];
const anio = datosNewLibroMes.anio;
const fecha = parseInt(`${anio}${mesIndex}`);
const tokeep = {
mesIndex,
anio,
mes,
fecha,
createdAt: new Date(),
diezmos: 0,
ofrendas: 0,
especiales: 0,
auditoriaId
}
setDatosNewLibroMes((estado) => tokeep)
await firestoreDB.collection('lib_mensuales').doc().set(tokeep)
getLibrosMensuales()
toast.success('Agregado.')
}
return (
<div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', marginBottom: '10px' }}>
<CSelect onChange={
(e) => handlerDatosLibroMes(e)
}
name="anio"
multiple
className="col-sm">
<option value={2021}>2021</option>
<option value={2022}>2022</option>
<option value={2023}>2023</option>
<option value={2024}>2024</option>
</CSelect>
<CSelect onChange={
(e) => handlerDatosLibroMes(e)
}
name="mesIndex"
multiple
className="col-sm"
>
{
mesesCrudo.map((mes, index) => (
<option key={mes}
value={index}>
{mes}</option>
))
} </CSelect>
<CTooltip content="Agregar libro mes">
<button className="btn btn-primary"
onClick={
() => crearLibroMes()
}>
<FaPlus/>
</button>
</CTooltip>
</div>
)
}
Example #21
| Source File: Auditorias.jsx From core-audit with MIT License | 4 votes |
|
Auditorias = ({history}) => {
const refFire = useFirestore();
const [auditorias, setAuditorias] = useState([])
useEffect(() =>{
const traerDatos = async () => {
const temporales = []
const snapshot = await refFire.collection('auditorias').get()
snapshot.docs.forEach((doc)=>{
const elem = {
id: doc.id,
...doc.data()
}
temporales.push(elem)
})
setAuditorias(temporales)
}
traerDatos()
}, [refFire])
const eliminar = async (id) => {
const respuesta = window.confirm('Seguro que quiere eliminar?');
if (respuesta) {
await refFire.collection('auditorias').doc(id).delete();
toast('Eliminado')
const temp = auditorias.filter((auditorias)=> {
console.log(auditorias, id)
return auditorias.id !== id
})
setAuditorias(temp)
}
}
const setActual = async(id) => {
let batch = refFire.batch();
auditorias.forEach( (audit) => {
let elem = refFire.collection('auditorias').doc(audit.id)
const actual = audit.id === id ? true : false;
batch.update(elem, { actual})
})
await batch.commit();
// await refFire.collection('auditorias').doc(id).update({actual: true})
toast('Actualizado')
}
return (
<div className="card">
<div className="card-body">
<h2 className="card-title">Auditoria </h2>
<Link className="btn btn-primary" to="/auditorias/add">
<FaPlus style={{ marginRight: '5px', marginTop: '-3px' }} />
Crear
</Link>
<table className="table table-striped table-sm">
<thead>
<tr>
<th>Nro</th>
<th>Fecha</th>
<th>Iglesia</th>
<th>Actual</th>
<th>Activo</th>
<th>Editar</th>
</tr>
</thead>
<tbody>
{
auditorias.map((audit, index) => (
<tr key ={audit.id}>
<td>{index + 1}</td>
<td>{audit.fecha}</td>
<td>{}</td>
<td>
{audit.actual
?
'Actual'
:
<button onClick={()=> setActual(audit.id)} className="btn btn-primary btn-xm" >
Poner como actual
</button>
}
</td>
<td>{audit.activo ? 'Si' : 'No'}</td>
<td>
<button onClick={ () => {
history.push(`/auditorias/edit/${audit.id}`)
}}
className="btn btn-success btn-sm">
<FaPen />
</button>
<button onClick={() => eliminar(audit.id)} className="btn btn-danger btn-sm">
<FaTrash />
</button>
</td>
</tr>
))
}
</tbody>
</table>
</div>
</div>
)
}
Example #22
| Source File: TabCreator.js From kalimba-tabs with MIT License | 4 votes |
|
render() {
return (
<div
style={styles.tabCreatorContainer}
onClick={() => {
this.setState({ showPlayContextMenu: false });
}}
>
{this.state.exporting && (
<ScreenWideModal>
<div style={styles.exportModal}>
<div>Exporting Song...</div>
<div style={{ margin: 10 }}>
<ClipLoader />
</div>
<div>Don't resize the window for best results.</div>
</div>
</ScreenWideModal>
)}
{this.state.showNewSongWindow && (
<NewSongWindow
hide={() => {
this.setState({ showNewSongWindow: false });
}}
onCreate={() => {
//ask if they want to save this song
this.setState({ showNewSongWindow: false });
let kalimba = document.getElementById("kalimbaContainer");
kalimba.scrollTop = kalimba.scrollHeight;
}}
/>
)}
{/* TOOLBAR */}
<div style={styles.controlPanelContainer}>
{/* SONG CONTROL */}
<div style={styles.songControlContainer}>
{/* HOME BUTTON */}
<ToolBarButton
onClick={async () => {
this.stopSong();
await delay(1);
this.props.history.push("/");
}}
name="Home"
>
<FaHome size={30} />
</ToolBarButton>
{/* NEW SONG */}
<ToolBarButton
onClick={() => {
this.setState({ showNewSongWindow: true });
}}
name="New"
>
<FaFile size={25} />
</ToolBarButton>
{/* OPEN */}
<ToolBarButton
onClick={() => {
this.openSong();
}}
name="Open"
>
<FaFolderOpen size={30} />
</ToolBarButton>
{/* SAVE */}
<ToolBarButton
onClick={() => {
this.saveSong();
}}
name="Save"
>
<FaSave size={30} />
</ToolBarButton>
{/* EXPORT */}
<ToolBarButton
onClick={() => {
this.exportToPDF();
}}
disabled={this.state.exporting || this.state.playing}
selected={this.state.exporting}
name="Export"
>
{this.state.exporting ? (
<ClipLoader size={30} color="blue" />
) : (
<FaFileExport size={30} />
)}
</ToolBarButton>
{/* PLAY BUTTON */}
<div style={{ position: "relative" }}>
<ToolBarButton
selected={this.state.playing}
onClick={() => {
this.state.playing ? this.stopSong() : this.playSong(false);
}}
onContextMenu={() => {
this.setState({ showPlayContextMenu: true });
}}
name={this.state.playing ? "Stop" : "Play"}
>
{this.state.playing ? (
<FaStop color="red" size={30} />
) : (
<FaPlay color="blue" size={30} />
)}
</ToolBarButton>
{this.state.showPlayContextMenu && (
<PlayContextMenu
play={(fromMiddle) => {
this.state.playing
? this.stopSong()
: this.playSong(fromMiddle);
this.setState({ showPlayContextMenu: false });
}}
isPlaying={this.state.playing}
stop={() => {
this.stopSong();
}}
/>
)}
</div>
</div>
{/* TITLE INPUT */}
<div style={styles.titleContainer} id="titleandtempo">
{!this.state.editTitle ? (
<div
onClick={() => {
this.setState({ editTitle: true });
}}
style={styles.songTitle}
>
{this.props.songTitle}
</div>
) : (
<input
placeholder={this.props.songTitle}
onKeyPress={(event) => {
if (event.key === "Enter") {
this.setState({ editTitle: false });
}
}}
style={styles.titleInput}
onChange={(e) => {
this.props.changeTitle(e.target.value);
}}
/>
)}
{!this.state.editTempo ? (
<div
onClick={() => {
this.setState({ editTempo: true });
}}
style={{ margin: 5 }}
>
{this.props.tempo}
</div>
) : (
<input
onKeyPress={(event) => {
if (event.key === "Enter") {
this.setState({ editTempo: false });
this.props.changeTempo(this.state.enteredTempo);
}
}}
placeholder={this.props.tempo}
style={styles.tempoInput}
type="number"
min="0"
max="500"
onChange={(e) => {
// this.props.changeTempo(e.target.value);
this.setState({ enteredTempo: e.target.value });
}}
/>
)}
</div>
{/* NOTE TOOLBAR */}
<div style={styles.noteToolbarContainer}>
{/* SELECTION MODE BUTTON */}
<ToolBarButton
selected={this.props.selectionMode}
onClick={() => {
this.props.toggleSelectionMode();
}}
name="Selection Mode"
>
<FaHandPointer />
</ToolBarButton>
<div style={styles.noteToolbarDivider} />
{/* EXTEND SONG BUTTON */}
<ToolBarButton
onClick={() => {
this.props.extendSong();
}}
name="Extend Song"
>
<FaPlus />
</ToolBarButton>
<div style={styles.noteToolbarDivider} />
<NoteButton value={1} />
<NoteButton value={2} />
<NoteButton value={4} />
<NoteButton value={8} />
<NoteButton value={16} />
<div style={styles.noteToolbarDivider} />
<AccidentalButton value="♯" />
<AccidentalButton value="♭" />
<AccidentalButton value="♮" />
<div style={styles.noteToolbarDivider} />
{/* DOTTED BUTTON */}
<ToolBarButton
selected={this.props.dotted}
onClick={() => {
this.props.toggleDotted();
}}
>
<div
style={{
width: 10,
height: 10,
borderRadius: 5,
backgroundColor: this.props.dotted ? "blue" : "black",
}}
/>
</ToolBarButton>
{/* REST BUTTON */}
<ToolBarButton
selected={this.props.rest}
onClick={() => {
this.props.toggleRest();
}}
>
<img
src={QuarterRest}
style={{ width: 15, height: "auto" }}
alt={"resticon"}
/>
</ToolBarButton>
{/* TRIPLET BUTTON */}
<ToolBarButton
selected={this.props.tripletMode}
onClick={() => {
this.props.toggleTriplet();
}}
name="Triplet"
>
-3-
</ToolBarButton>
</div>
</div>
{/* EVERYTHING BELOW TOOLBAR */}
<div style={styles.lowerHalf}>
<div style={{ flex: 1 }}></div>
<div
id="kalimbaContainer"
style={{
...styles.kalimbaContainer,
height: this.state.height - 90,
}}
>
{this.state.kalimba !== null ? (
<Kalimba
kalimba={this.state.kalimba}
currentNote={this.state.currentNoteIndex}
playing={this.state.playing}
visibleHeight={this.state.height}
playFromNote={(index) => {
this.playSong(false, index);
}}
scrollBack={() => {
let kalimbaContainer = document.getElementById(
"kalimbaContainer"
);
kalimbaContainer.scrollTop += 50 * 25;
}}
/>
) : (
<div style={{ alignSelf: "center" }}>
<ScaleLoader />
</div>
)}
</div>
<div style={{ flex: 1 }}></div>
</div>
</div>
);
}
Example #23
| Source File: index.js From plataforma-sabia with MIT License | 4 votes |
|
Responsible = ({ form }) => {
const emptyValue = {
full_name: '',
email: '',
phone_number: '',
};
const { user } = useAuth();
const dataName = 'technologyResponsibles';
const owner = `${dataName}.owner`;
const users = `${dataName}.users`;
return (
<Wrapper>
<Row align="center">
<h3>Responsáveis Pela Tecnologia</h3>
<Help
id={owner}
label="Responsáveis Pela Tecnologia"
HelpComponent={<p>Adicione o nome dos responsáveis pelas tecnologias.</p>}
/>
</Row>
<Row data-testid="row">
<InputField
form={form}
name={`${owner}.user_id`}
defaultValue={user.id}
type="hidden"
/>
<Cell col={5}>
<InputField
form={form}
name={`${owner}.full_name`}
label="Nome Completo"
disabled
defaultValue={user.full_name}
/>
</Cell>
<Cell col={3}>
<InputField
form={form}
name={`${owner}.email`}
label="Email"
disabled
defaultValue={user.email}
/>
</Cell>
<Cell col={2}>
<InputField
form={form}
name={`${owner}.phone_number`}
label="Telefone"
disabled
defaultValue={user.phone_number}
/>
</Cell>
<Cell maxWidth={0.5} />
</Row>
<Repeater
form={form}
name={users}
noInitialRow
emptyValue={emptyValue}
childsComponent={({ item, index, remove }) => {
return (
<>
<Row key={item.fieldArrayId} align="center" data-testid="row">
<Cell col={5}>
<InputField
form={form}
name={`${users}.${index}.full_name`}
label="Nome Completo"
placeholder="Nome do responsável"
validation={{ required: true }}
/>
</Cell>
<Cell col={3}>
<InputField
form={form}
name={`${users}.${index}.email`}
label="Email"
placeholder="Ex.: [email protected]"
validation={{ required: true }}
/>
</Cell>
<Cell col={2}>
<MaskedInputField
form={form}
name={`${users}.${index}.phone_number`}
defaultValue={replaceWithMask(
form.getValues(`${users}.${index}.phone_number`),
'phoneNumber',
)}
alwaysShowMask={false}
label="Telefone"
placeholder="(xx) xxxxxxxxx"
validation={{ required: true }}
mask={maskPatterns.phoneNumber.stringMask}
pattern={maskPatterns.phoneNumber.pattern}
formatChars={maskPatterns.phoneNumber.formatChars}
/>
</Cell>
<Cell maxWidth={0.5}>
<CircularButton
size="small"
variant="remove"
shortPadding
onClick={(event) => {
event.preventDefault();
remove(index);
}}
>
<FaMinus />
</CircularButton>
</Cell>
</Row>
</>
);
}}
// eslint-disable-next-line no-shadow
endComponent={({ append, emptyValue }) => {
return (
<CircularButton
right
variant="info"
size="medium"
color="white"
name="technologyResponsibles.users_add_button"
onClick={(event) => {
event.preventDefault();
append(emptyValue);
}}
>
<FaPlus />
</CircularButton>
);
}}
/>
</Wrapper>
);
}
Example #24
| Source File: index.js From plataforma-sabia with MIT License | 4 votes |
|
CommonDataForm = ({ form, user, message, loading }) => {
const { setValue, register, watch } = form;
const { t } = useTranslation(['account']);
const { openModal } = useModal();
const [isResearcher, setIsResearcher] = useState(Boolean(user.researcher));
const [userAreas, setUserAreas] = useState(user?.areas || []);
const [hasAreasLoading, setHasAreasLoading] = useState([true]);
const areaKeys = ['great_area_id', 'area_id', 'sub_area_id', 'speciality_id'];
const maxAreaNumber = 4;
const emptyArea = {
great_area_id: null,
area_id: null,
sub_area_id: null,
speciality_id: null,
};
const brazilStateId = watch('state_id');
const { data: { data: institutions } = {} } = useSWR(
'get-institutions',
() => getInstitutions({ perPage: 10, order: 'desc' }),
{
revalidateOnFocus: false,
},
);
const { data: brazilStates = [] } = useSWR('get-brazil-states', () => getStates(), {
revalidateOnFocus: false,
});
const { data: brazilStateCities = [] } = useSWR(
brazilStateId ? `get-brazil-state-city-${brazilStateId.value || brazilStateId}` : null,
() => getStateCities(brazilStateId.value || brazilStateId, { perPage: 10 }),
{
revalidateOnFocus: false,
},
);
const handleFetchInstitutions = debounce((value, callback) => {
getInstitutions({ filterBy: 'name', filter: value, order: 'desc' }).then((response) => {
const mappedOptions = mapInstitutionsOptions(response.data);
callback(mappedOptions);
});
}, 300);
/**
* Returns default institutions for use in async select
* Do not concat user institution with institutions array if already exists
*
* @returns {Array} Institutions options
*/
const getDefaultInstitutionsOptions = () => {
const userInstitution = institutions?.find(
(institution) => institution.id === user.institution_id,
);
return [
...mapInstitutionsOptions(institutions),
...(!userInstitution ? mapInstitutionsOptions([user.institution]) : []),
];
};
useEffect(() => {
register('researcher');
setValue('researcher', isResearcher);
let newAreaValue;
if (isResearcher) {
newAreaValue = userAreas.length ? [...userAreas] : [emptyArea];
} else {
newAreaValue = [];
}
setUserAreas(newAreaValue);
setValue('areas', newAreaValue);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isResearcher]);
return (
<>
<h3>Dados pessoais</h3>
<Row>
<Cell col={4}>
<InputField
form={form}
name="full_name"
label={t('account:labels.fullName')}
validation={{ required: true }}
variant="gray"
/>
</Cell>
<Cell col={3}>
<Row>
<InputField
form={form}
name="email"
label={t('account:labels.mainEmail')}
type="email"
disabled="disabled"
variant="gray"
wrapperCss={S.inputEmailWrapperCss}
/>
<S.ButtonChangeEmail
type="button"
onClick={() => openModal('updateEmail', {}, { customModal: true })}
aria-label="Change e-mail"
>
<FiEdit3 /> Alterar
</S.ButtonChangeEmail>
</Row>
</Cell>
</Row>
<Row>
<Cell col={4}>
<MaskedInputField
form={form}
name="cpf"
label={t('account:labels.cpf')}
validation={{ required: true }}
variant="gray"
pattern={maskPatterns.cpf.pattern}
mask={maskPatterns.cpf.stringMask}
/>
</Cell>
<Cell col={4}>
<MaskedInputField
form={form}
name="birth_date"
label={t('account:labels.birthDate')}
validation={{ required: true }}
variant="gray"
pattern={maskPatterns.brazilianDate.pattern}
mask={maskPatterns.brazilianDate.stringMask}
/>
</Cell>
<Cell col={4}>
<MaskedInputField
form={form}
name="phone_number"
alwaysShowMask={false}
label={t('account:labels.phoneNumber')}
validation={{ required: true }}
variant="gray"
maskChar={null}
mask={maskPatterns.phoneNumber.stringMask}
pattern={maskPatterns.phoneNumber.pattern}
formatChars={maskPatterns.phoneNumber.formatChars}
/>
</Cell>
</Row>
<Row>
<Cell col={4}>
<MaskedInputField
form={form}
name="zipcode"
validation={{ required: true }}
label={t('account:labels.zipCode')}
variant="gray"
mask={maskPatterns.zipCode.stringMask}
pattern={maskPatterns.zipCode.pattern}
/>
</Cell>
<Cell col={4}>
<InputField
form={form}
name="address"
validation={{ required: true }}
label={t('account:labels.address')}
variant="gray"
/>
</Cell>
<Cell col={4}>
<InputField
form={form}
name="address2"
validation={{ required: true }}
label={t('account:labels.address2')}
variant="gray"
/>
</Cell>
</Row>
<Row>
<Cell col={3}>
<InputField
form={form}
name="district"
validation={{ required: true }}
label={t('account:labels.district')}
variant="gray"
/>
</Cell>
<Cell col={3}>
<SelectField
form={form}
name="state_id"
label={t('account:labels.state')}
validation={{ required: true }}
variant="gray"
options={mapArrayOfObjectToSelect(brazilStates, 'initials', 'id')}
instanceId="select-state-my-account"
placeholder="Selecione o estado..."
callback={() => {
setValue('city_id', null);
}}
/>
</Cell>
<Cell col={3}>
<SelectField
form={form}
name="city_id"
label={t('account:labels.city')}
placeholder={
!brazilStateId
? 'Selecione o estado primeiro...'
: 'Selecione a cidade...'
}
variant="gray"
options={mapArrayOfObjectToSelect(brazilStateCities, 'name', 'id')}
noOptionsMessage={() => 'Nenhuma cidade encontrada...'}
instanceId="select-city-my-account"
validation={{ required: true }}
/>
</Cell>
<Cell col={3}>
<InputField
form={form}
name="country"
validation={{ required: true }}
label={t('account:labels.country')}
variant="gray"
/>
</Cell>
</Row>
<h3>Dados Organizacionais e Acadêmicos</h3>
<Row>
<Cell col={9}>
<Row align="center">
<Cell col="auto">
<SelectField
form={form}
name="institution_id"
label={t('account:labels.institution')}
placeholder="Pesquise sua instituição"
variant="gray"
isAsync
cacheOptions
defaultOptions={getDefaultInstitutionsOptions()}
loadOptions={handleFetchInstitutions}
loadingMessage={() => 'Carregando...'}
noOptionsMessage={() => 'Nenhuma insitutição encontrada...'}
instanceId="select-institutions-my-account"
/>
</Cell>
<S.Button
type="button"
variant="outlined"
wrapperCss={S.buttonInstitutionsWrapperCss}
onClick={() =>
openModal('createInstitutions', null, { overlayClick: false })
}
>
<FaPlus /> Nova Organização
</S.Button>
</Row>
</Cell>
<Cell col={3}>
<InputField
form={form}
name="lattes_id"
type="number"
label={t('account:labels.lattesId')}
variant="gray"
help={
<>
<p>
O ID Lattes poderá ser obtido na{' '}
<a
href="http://lattes.cnpq.br/"
target="_blank"
rel="noreferrer"
>
Plataforma Lattes
</a>{' '}
nessa parte do currículo:
</p>
<img
src="/lattes.jpg"
alt="Currículo Lattes com ID Lattes destacado"
/>
</>
}
/>
</Cell>
</Row>
<h3>Áreas do conhecimento</h3>
<Row align="center">
<CheckBoxField
name="researcher"
value={isResearcher}
label={t('account:labels.researcher')}
onChange={setIsResearcher}
/>
</Row>
<Row align="flex-start" justify="center">
{!!isResearcher && userAreas.length <= maxAreaNumber && (
<Loading
loading={hasAreasLoading.some((item) => item !== false)}
alwaysRenderChildren
>
{userAreas.map((area, index) => {
const key = areaKeys
.map((field) => area[field])
.filter(Boolean)
.concat(index)
.join('-');
return (
<Cell key={key} col={userAreas.length}>
<UserSpecialities
form={form}
selected={area}
index={index}
onFinishInitialLoading={() => {
const newValue = [...hasAreasLoading];
newValue[index] = false;
setHasAreasLoading(newValue);
}}
/>
</Cell>
);
})}
{userAreas.length < maxAreaNumber && (
<S.Button
type="button"
variant="contained"
wrapperCss={S.buttonAddAreasWrapperCss}
alignSelf="flex-start"
onClick={() => {
const newUserAreaValues = [...userAreas, emptyArea];
setUserAreas(newUserAreaValues);
setValue('areas', newUserAreaValues);
}}
>
+
</S.Button>
)}
</Loading>
)}
</Row>
<Row>
<Cell align="center">
<p>{message}</p>
</Cell>
</Row>
<Actions center>
<S.Button type="submit" disabled={loading}>
{loading ? t('account:labels.updatingUser') : t('account:labels.updateUser')}
</S.Button>
</Actions>
</>
);
}
